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

package/dist/lib/types.d.ts

@@ -1,5 +1,5 @@
 import { BasePluginConfig, EventHook } from '@embedpdf/core';
-import { PdfPageObject, Rect, Rotation } from '@embedpdf/models';
+import { PdfPageObjectWithRotatedSize, Rect, Rotation } from '@embedpdf/models';
 import { ViewportMetrics } from '@embedpdf/plugin-viewport';
 import { VirtualItem } from './types/virtual-item';
 export type ScrollBehavior = 'instant' | 'smooth' | 'auto';
@@ -9,29 +9,40 @@ export interface PageChangeState {
     fromPage: number;
     startTime: number;
 }
-export interface ScrollState extends ScrollMetrics {
+export interface ScrollDocumentState {
     virtualItems: VirtualItem[];
     totalPages: number;
+    currentPage: number;
     totalContentSize: {
         width: number;
         height: number;
     };
-    desiredScrollPosition: {
+    strategy: ScrollStrategy;
+    pageGap: number;
+    visiblePages: number[];
+    pageVisibilityMetrics: PageVisibilityMetrics[];
+    renderedPageIndexes: number[];
+    scrollOffset: {
         x: number;
         y: number;
     };
-    strategy: ScrollStrategy;
-    pageGap: number;
-    scale: number;
+    startSpacing: number;
+    endSpacing: number;
     pageChangeState: PageChangeState;
 }
+export interface ScrollState {
+    defaultStrategy: ScrollStrategy;
+    defaultPageGap: number;
+    defaultBufferSize: number;
+    documents: Record<string, ScrollDocumentState>;
+}
 export interface ScrollerLayout {
     startSpacing: number;
     endSpacing: number;
     totalWidth: number;
     totalHeight: number;
     pageGap: number;
-    strategy: ScrollState['strategy'];
+    strategy: ScrollStrategy;
     items: VirtualItem[];
 }
 export declare enum ScrollStrategy {
@@ -70,22 +81,12 @@ export interface ScrollMetrics {
     startSpacing: number;
     endSpacing: number;
 }
-export interface ScrollStrategyInterface {
-    initialize(container: HTMLElement, innerDiv: HTMLElement): void;
-    destroy(): void;
-    updateLayout(viewport: ViewportMetrics, pdfPageObject: PdfPageObject[][]): void;
-    handleScroll(viewport: ViewportMetrics): void;
-    getVirtualItems(): VirtualItem[];
-    scrollToPage(pageNumber: number, behavior?: ScrollBehavior): void;
-    calculateDimensions(pdfPageObject: PdfPageObject[][]): void;
-}
 export interface ScrollPluginConfig extends BasePluginConfig {
-    strategy?: ScrollStrategy;
-    initialPage?: number;
-    bufferSize?: number;
-    pageGap?: number;
+    defaultStrategy?: ScrollStrategy;
+    defaultPageGap?: number;
+    defaultBufferSize?: number;
 }
-export type LayoutChangePayload = Pick<ScrollState, 'virtualItems' | 'totalContentSize'>;
+export type LayoutChangePayload = Pick<ScrollDocumentState, 'virtualItems' | 'totalContentSize'>;
 export interface ScrollToPageOptions {
     pageNumber: number;
     pageCoordinates?: {
@@ -95,27 +96,61 @@ export interface ScrollToPageOptions {
     behavior?: ScrollBehavior;
     center?: boolean;
 }
-export interface PageChangePayload {
+export interface PageChangeEvent {
+    documentId: string;
     pageNumber: number;
     totalPages: number;
 }
-export interface ScrollCapability {
-    onStateChange: EventHook<ScrollState>;
-    onScroll: EventHook<ScrollMetrics>;
+export interface ScrollEvent {
+    documentId: string;
+    metrics: ScrollMetrics;
+}
+export interface LayoutChangeEvent {
+    documentId: string;
+    layout: LayoutChangePayload;
+}
+export interface PageChangeStateEvent {
+    documentId: string;
+    state: PageChangeState;
+}
+export interface LayoutReadyEvent {
+    documentId: string;
+    /** True only on the first layout ready after document load, false on subsequent (e.g., tab switches) */
+    isInitial: boolean;
+}
+export interface ScrollScope {
     getCurrentPage(): number;
     getTotalPages(): number;
     getPageChangeState(): PageChangeState;
-    onPageChange: EventHook<PageChangePayload>;
-    onLayoutChange: EventHook<LayoutChangePayload>;
-    onPageChangeState: EventHook<PageChangeState>;
-    onLayoutReady: EventHook<boolean>;
     scrollToPage(options: ScrollToPageOptions): void;
     scrollToNextPage(behavior?: ScrollBehavior): void;
     scrollToPreviousPage(behavior?: ScrollBehavior): void;
+    getSpreadPagesWithRotatedSize(): PdfPageObjectWithRotatedSize[][];
     getMetrics(viewport?: ViewportMetrics): ScrollMetrics;
     getLayout(): LayoutChangePayload;
     getRectPositionForPage(page: number, rect: Rect, scale?: number, rotation?: Rotation): Rect | null;
     setScrollStrategy(strategy: ScrollStrategy): void;
+    onPageChange: EventHook<PageChangeEvent>;
+    onScroll: EventHook<ScrollMetrics>;
+    onLayoutChange: EventHook<LayoutChangePayload>;
+}
+export interface ScrollCapability {
+    getCurrentPage(): number;
+    getTotalPages(): number;
+    getPageChangeState(): PageChangeState;
+    scrollToPage(options: ScrollToPageOptions): void;
+    scrollToNextPage(behavior?: ScrollBehavior): void;
+    scrollToPreviousPage(behavior?: ScrollBehavior): void;
+    getMetrics(viewport?: ViewportMetrics): ScrollMetrics;
+    getLayout(): LayoutChangePayload;
+    getRectPositionForPage(page: number, rect: Rect, scale?: number, rotation?: Rotation): Rect | null;
+    forDocument(documentId: string): ScrollScope;
+    setScrollStrategy(strategy: ScrollStrategy, documentId?: string): void;
     getPageGap(): number;
-    getPageChangeState: () => PageChangeState;
+    onPageChange: EventHook<PageChangeEvent>;
+    onScroll: EventHook<ScrollEvent>;
+    onLayoutChange: EventHook<LayoutChangeEvent>;
+    onLayoutReady: EventHook<LayoutReadyEvent>;
+    onPageChangeState: EventHook<PageChangeStateEvent>;
+    onStateChange: EventHook<ScrollDocumentState>;
 }

package/dist/preact/adapter.d.ts

@@ -1,4 +1,4 @@
 export { Fragment } from 'preact';
-export { useEffect, useRef, useState } from 'preact/hooks';
+export { useEffect, useRef, useState, useLayoutEffect } from 'preact/hooks';
 export type { ComponentChildren as ReactNode } from 'preact';
 export type HTMLAttributes<T = any> = import('preact').JSX.HTMLAttributes<T extends EventTarget ? T : never>;

package/dist/preact/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("preact");const e=require("preact/hooks"),t=require("@embedpdf/core/preact"),r=require("@embedpdf/plugin-scroll"),o=require("preact/jsx-runtime"),l=()=>t.usePlugin(r.ScrollPlugin.id),s=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({renderPage:s,overlayElements:n,...i}){const{plugin:a}=l(),{registry:c}=t.useRegistry(),[g,u]=e.useState((()=>(null==a?void 0:a.getScrollerLayout())??null));if(e.useEffect((()=>{if(a)return a.onScrollerData(u)}),[a]),e.useEffect((()=>{a&&a.setLayoutReady()}),[a]),!g)return null;if(!c)return null;const d=c.getStore().getState();return o.jsxs("div",{...i,style:{width:`${g.totalWidth}px`,height:`${g.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...g.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.startSpacing,height:"100%",flexShrink:0}:{height:g.startSpacing,width:"100%"}}}),o.jsx("div",{style:{gap:g.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...g.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:g.items.map((e=>o.jsx("div",{style:{display:"flex",justifyContent:"center",gap:g.pageGap},children:e.pageLayouts.map((e=>o.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:s({...e,rotation:d.core.rotation,scale:d.core.scale,document:d.core.document})},e.pageNumber)))},e.pageNumbers[0])))}),o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.endSpacing,height:"100%",flexShrink:0}:{height:g.endSpacing,width:"100%"}}}),n]})},exports.useScroll=()=>{const{provides:t}=s(),[r,o]=e.useState(1),[l,n]=e.useState(1);return e.useEffect((()=>{if(t)return t.onPageChange((({pageNumber:e,totalPages:t})=>{o(e),n(t)}))}),[t]),{provides:t,state:{currentPage:r,totalPages:l},get currentPage(){return console.warn("Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead."),r},get totalPages(){return console.warn("Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead."),l},get scrollToPage(){return(null==t?void 0:t.scrollToPage)&&console.warn("Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead."),null==t?void 0:t.scrollToPage},get scrollToNextPage(){return(null==t?void 0:t.scrollToNextPage)&&console.warn("Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead."),null==t?void 0:t.scrollToNextPage},get scrollToPreviousPage(){return(null==t?void 0:t.scrollToPreviousPage)&&console.warn("Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead."),null==t?void 0:t.scrollToPreviousPage},get getMetrics(){return(null==t?void 0:t.getMetrics)&&console.warn("Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead."),null==t?void 0:t.getMetrics},get onPageChange(){return(null==t?void 0:t.onPageChange)&&console.warn("Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead."),null==t?void 0:t.onPageChange},get onScroll(){return(null==t?void 0:t.onScroll)&&console.warn("Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead."),null==t?void 0:t.onScroll},get onLayoutChange(){return(null==t?void 0:t.onLayoutChange)&&console.warn("Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead."),null==t?void 0:t.onLayoutChange},get getCurrentPage(){return(null==t?void 0:t.getCurrentPage)&&console.warn("Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead."),null==t?void 0:t.getCurrentPage},get getTotalPages(){return(null==t?void 0:t.getTotalPages)&&console.warn("Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead."),null==t?void 0:t.getTotalPages}}},exports.useScrollCapability=s,exports.useScrollPlugin=l,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("preact");const e=require("preact/hooks"),t=require("@embedpdf/core/preact"),r=require("@embedpdf/plugin-scroll"),o=require("preact/jsx-runtime"),l=()=>t.usePlugin(r.ScrollPlugin.id),i=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({documentId:t,renderPage:i,...a}){const{plugin:n}=l(),[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?o.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:[o.jsx("div",{style:{...c.strategy===r.ScrollStrategy.Horizontal?{width:c.startSpacing,height:"100%",flexShrink:0}:{height:c.startSpacing,width:"100%"}}}),o.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=>o.jsx("div",{style:{display:"flex",justifyContent:"center",gap:c.pageGap},children:e.pageLayouts.map(e=>o.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:i({...e})},e.pageNumber))},e.pageNumbers[0]))}),o.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(),[o,l]=e.useState(1),[a,n]=e.useState(1);return e.useEffect(()=>{if(!r||!t)return;const e=r.forDocument(t);return l(e.getCurrentPage()),n(e.getTotalPages()),r.onPageChange(e=>{e.documentId===t&&(l(e.pageNumber),n(e.totalPages))})},[r,t]),{provides:(null==r?void 0:r.forDocument(t))??null,state:{currentPage:o,totalPages:a}}},exports.useScrollCapability=i,exports.useScrollPlugin=l,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/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 { ScrollCapability, ScrollPlugin } 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: ScrollCapability | null;\n  state: {\n    currentPage: number;\n    totalPages: number;\n  };\n  // Deprecated properties (for backward compatibility)\n  readonly currentPage: number;\n  readonly totalPages: number;\n  readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;\n  readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;\n  readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;\n  readonly getMetrics: ScrollCapability['getMetrics'] | undefined;\n  readonly onPageChange: ScrollCapability['onPageChange'] | undefined;\n  readonly onScroll: ScrollCapability['onScroll'] | undefined;\n  readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;\n  readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;\n  readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides) return;\n    return provides.onPageChange(({ pageNumber, totalPages }) => {\n      setCurrentPage(pageNumber);\n      setTotalPages(totalPages);\n    });\n  }, [provides]);\n\n  return {\n    // New format (preferred)\n    provides,\n    state: {\n      currentPage,\n      totalPages,\n    },\n\n    // Deprecated properties with getters that show warnings\n    get currentPage() {\n      console.warn(\n        `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n      );\n      return currentPage;\n    },\n\n    get totalPages() {\n      console.warn(\n        `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n      );\n      return totalPages;\n    },\n\n    get scrollToPage() {\n      if (provides?.scrollToPage) {\n        console.warn(\n          `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`,\n        );\n      }\n      return provides?.scrollToPage;\n    },\n\n    get scrollToNextPage() {\n      if (provides?.scrollToNextPage) {\n        console.warn(\n          `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`,\n        );\n      }\n      return provides?.scrollToNextPage;\n    },\n\n    get scrollToPreviousPage() {\n      if (provides?.scrollToPreviousPage) {\n        console.warn(\n          `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`,\n        );\n      }\n      return provides?.scrollToPreviousPage;\n    },\n\n    get getMetrics() {\n      if (provides?.getMetrics) {\n        console.warn(\n          `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`,\n        );\n      }\n      return provides?.getMetrics;\n    },\n\n    get onPageChange() {\n      if (provides?.onPageChange) {\n        console.warn(\n          `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`,\n        );\n      }\n      return provides?.onPageChange;\n    },\n\n    get onScroll() {\n      if (provides?.onScroll) {\n        console.warn(\n          `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`,\n        );\n      }\n      return provides?.onScroll;\n    },\n\n    get onLayoutChange() {\n      if (provides?.onLayoutChange) {\n        console.warn(\n          `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`,\n        );\n      }\n      return provides?.onLayoutChange;\n    },\n\n    get getCurrentPage() {\n      if (provides?.getCurrentPage) {\n        console.warn(\n          `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`,\n        );\n      }\n      return provides?.getCurrentPage;\n    },\n\n    get getTotalPages() {\n      if (provides?.getTotalPages) {\n        console.warn(\n          `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`,\n        );\n      }\n      return provides?.getTotalPages;\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\nimport { ScrollStrategy, ScrollerLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\n\nimport { useScrollPlugin } from '../hooks';\nimport { RenderPageProps } from '../types';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  renderPage: (props: RenderPageProps) => ReactNode;\n  overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const { registry } = useRegistry();\n  const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n    () => scrollPlugin?.getScrollerLayout() ?? null,\n  );\n\n  useEffect(() => {\n    if (!scrollPlugin) return;\n\n    return scrollPlugin.onScrollerData(setScrollerLayout);\n  }, [scrollPlugin]);\n\n  useEffect(() => {\n    if (!scrollPlugin) return;\n\n    scrollPlugin.setLayoutReady();\n  }, [scrollPlugin]);\n\n  if (!scrollerLayout) return null;\n  if (!registry) return null;\n\n  const coreState = registry.getStore().getState();\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                  rotation: coreState.core.rotation,\n                  scale: coreState.core.scale,\n                  document: coreState.core.document,\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      {overlayElements}\n    </div>\n  );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","renderPage","overlayElements","props","plugin","scrollPlugin","registry","useRegistry","scrollerLayout","setScrollerLayout","useState","getScrollerLayout","useEffect","onScrollerData","setLayoutReady","coreState","getStore","getState","jsxRuntime","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","layout","rotatedWidth","rotatedHeight","rotation","core","scale","document","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","onPageChange","state","console","warn","scrollToPage","scrollToNextPage","scrollToPreviousPage","getMetrics","onScroll","onLayoutChange","getCurrentPage","getTotalPages"],"mappings":"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"}
+{"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"}

package/dist/preact/index.js

@@ -1,133 +1,56 @@
 import "preact";
-import { useState, useEffect } from "preact/hooks";
-import { usePlugin, useCapability, useRegistry } from "@embedpdf/core/preact";
+import { useState, useEffect, useLayoutEffect } from "preact/hooks";
+import { usePlugin, useCapability } from "@embedpdf/core/preact";
 import { ScrollPlugin, ScrollStrategy } from "@embedpdf/plugin-scroll";
 export * from "@embedpdf/plugin-scroll";
 import { jsxs, jsx } from "preact/jsx-runtime";
 const useScrollPlugin = () => usePlugin(ScrollPlugin.id);
 const useScrollCapability = () => useCapability(ScrollPlugin.id);
-const useScroll = () => {
+const useScroll = (documentId) => {
   const { provides } = useScrollCapability();
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   useEffect(() => {
-    if (!provides) return;
-    return provides.onPageChange(({ pageNumber, totalPages: totalPages2 }) => {
-      setCurrentPage(pageNumber);
-      setTotalPages(totalPages2);
+    if (!provides || !documentId) return;
+    const scope = provides.forDocument(documentId);
+    setCurrentPage(scope.getCurrentPage());
+    setTotalPages(scope.getTotalPages());
+    return provides.onPageChange((event) => {
+      if (event.documentId === documentId) {
+        setCurrentPage(event.pageNumber);
+        setTotalPages(event.totalPages);
+      }
     });
-  }, [provides]);
+  }, [provides, documentId]);
   return {
     // New format (preferred)
-    provides,
+    provides: (provides == null ? void 0 : provides.forDocument(documentId)) ?? null,
     state: {
       currentPage,
       totalPages
-    },
-    // Deprecated properties with getters that show warnings
-    get currentPage() {
-      console.warn(
-        `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`
-      );
-      return currentPage;
-    },
-    get totalPages() {
-      console.warn(
-        `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`
-      );
-      return totalPages;
-    },
-    get scrollToPage() {
-      if (provides == null ? void 0 : provides.scrollToPage) {
-        console.warn(
-          `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.scrollToPage;
-    },
-    get scrollToNextPage() {
-      if (provides == null ? void 0 : provides.scrollToNextPage) {
-        console.warn(
-          `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.scrollToNextPage;
-    },
-    get scrollToPreviousPage() {
-      if (provides == null ? void 0 : provides.scrollToPreviousPage) {
-        console.warn(
-          `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.scrollToPreviousPage;
-    },
-    get getMetrics() {
-      if (provides == null ? void 0 : provides.getMetrics) {
-        console.warn(
-          `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.getMetrics;
-    },
-    get onPageChange() {
-      if (provides == null ? void 0 : provides.onPageChange) {
-        console.warn(
-          `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.onPageChange;
-    },
-    get onScroll() {
-      if (provides == null ? void 0 : provides.onScroll) {
-        console.warn(
-          `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.onScroll;
-    },
-    get onLayoutChange() {
-      if (provides == null ? void 0 : provides.onLayoutChange) {
-        console.warn(
-          `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.onLayoutChange;
-    },
-    get getCurrentPage() {
-      if (provides == null ? void 0 : provides.getCurrentPage) {
-        console.warn(
-          `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.getCurrentPage;
-    },
-    get getTotalPages() {
-      if (provides == null ? void 0 : provides.getTotalPages) {
-        console.warn(
-          `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`
-        );
-      }
-      return provides == null ? void 0 : provides.getTotalPages;
     }
   };
 };
-function Scroller({ renderPage, overlayElements, ...props }) {
+function Scroller({ documentId, renderPage, ...props }) {
   const { plugin: scrollPlugin } = useScrollPlugin();
-  const { registry } = useRegistry();
-  const [scrollerLayout, setScrollerLayout] = useState(
-    () => (scrollPlugin == null ? void 0 : scrollPlugin.getScrollerLayout()) ?? null
-  );
+  const [layoutData, setLayoutData] = useState({ layout: null, docId: null });
   useEffect(() => {
-    if (!scrollPlugin) return;
-    return scrollPlugin.onScrollerData(setScrollerLayout);
-  }, [scrollPlugin]);
-  useEffect(() => {
-    if (!scrollPlugin) return;
-    scrollPlugin.setLayoutReady();
-  }, [scrollPlugin]);
+    if (!scrollPlugin || !documentId) return;
+    const unsubscribe = scrollPlugin.onScrollerData(documentId, (newLayout) => {
+      setLayoutData({ layout: newLayout, docId: documentId });
+    });
+    return () => {
+      unsubscribe();
+      setLayoutData({ layout: null, docId: null });
+      scrollPlugin.clearLayoutReady(documentId);
+    };
+  }, [scrollPlugin, documentId]);
+  const scrollerLayout = layoutData.docId === documentId ? layoutData.layout : null;
+  useLayoutEffect(() => {
+    if (!scrollPlugin || !documentId || !scrollerLayout) return;
+    scrollPlugin.setLayoutReady(documentId);
+  }, [scrollPlugin, documentId, scrollerLayout]);
   if (!scrollerLayout) return null;
-  if (!registry) return null;
-  const coreState = registry.getStore().getState();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -192,10 +115,7 @@ function Scroller({ renderPage, overlayElements, ...props }) {
                       height: `${layout.rotatedHeight}px`
                     },
                     children: renderPage({
-                      ...layout,
-                      rotation: coreState.core.rotation,
-                      scale: coreState.core.scale,
-                      document: coreState.core.document
+                      ...layout
                     })
                   },
                   layout.pageNumber
@@ -219,8 +139,7 @@ function Scroller({ renderPage, overlayElements, ...props }) {
               }
             }
           }
-        ),
-        overlayElements
+        )
       ]
     }
   );

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 { ScrollCapability, ScrollPlugin } 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: ScrollCapability | null;\n  state: {\n    currentPage: number;\n    totalPages: number;\n  };\n  // Deprecated properties (for backward compatibility)\n  readonly currentPage: number;\n  readonly totalPages: number;\n  readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;\n  readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;\n  readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;\n  readonly getMetrics: ScrollCapability['getMetrics'] | undefined;\n  readonly onPageChange: ScrollCapability['onPageChange'] | undefined;\n  readonly onScroll: ScrollCapability['onScroll'] | undefined;\n  readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;\n  readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;\n  readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides) return;\n    return provides.onPageChange(({ pageNumber, totalPages }) => {\n      setCurrentPage(pageNumber);\n      setTotalPages(totalPages);\n    });\n  }, [provides]);\n\n  return {\n    // New format (preferred)\n    provides,\n    state: {\n      currentPage,\n      totalPages,\n    },\n\n    // Deprecated properties with getters that show warnings\n    get currentPage() {\n      console.warn(\n        `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n      );\n      return currentPage;\n    },\n\n    get totalPages() {\n      console.warn(\n        `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n      );\n      return totalPages;\n    },\n\n    get scrollToPage() {\n      if (provides?.scrollToPage) {\n        console.warn(\n          `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`,\n        );\n      }\n      return provides?.scrollToPage;\n    },\n\n    get scrollToNextPage() {\n      if (provides?.scrollToNextPage) {\n        console.warn(\n          `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`,\n        );\n      }\n      return provides?.scrollToNextPage;\n    },\n\n    get scrollToPreviousPage() {\n      if (provides?.scrollToPreviousPage) {\n        console.warn(\n          `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`,\n        );\n      }\n      return provides?.scrollToPreviousPage;\n    },\n\n    get getMetrics() {\n      if (provides?.getMetrics) {\n        console.warn(\n          `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`,\n        );\n      }\n      return provides?.getMetrics;\n    },\n\n    get onPageChange() {\n      if (provides?.onPageChange) {\n        console.warn(\n          `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`,\n        );\n      }\n      return provides?.onPageChange;\n    },\n\n    get onScroll() {\n      if (provides?.onScroll) {\n        console.warn(\n          `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`,\n        );\n      }\n      return provides?.onScroll;\n    },\n\n    get onLayoutChange() {\n      if (provides?.onLayoutChange) {\n        console.warn(\n          `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`,\n        );\n      }\n      return provides?.onLayoutChange;\n    },\n\n    get getCurrentPage() {\n      if (provides?.getCurrentPage) {\n        console.warn(\n          `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`,\n        );\n      }\n      return provides?.getCurrentPage;\n    },\n\n    get getTotalPages() {\n      if (provides?.getTotalPages) {\n        console.warn(\n          `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`,\n        );\n      }\n      return provides?.getTotalPages;\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\nimport { ScrollStrategy, ScrollerLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\n\nimport { useScrollPlugin } from '../hooks';\nimport { RenderPageProps } from '../types';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  renderPage: (props: RenderPageProps) => ReactNode;\n  overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const { registry } = useRegistry();\n  const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n    () => scrollPlugin?.getScrollerLayout() ?? null,\n  );\n\n  useEffect(() => {\n    if (!scrollPlugin) return;\n\n    return scrollPlugin.onScrollerData(setScrollerLayout);\n  }, [scrollPlugin]);\n\n  useEffect(() => {\n    if (!scrollPlugin) return;\n\n    scrollPlugin.setLayoutReady();\n  }, [scrollPlugin]);\n\n  if (!scrollerLayout) return null;\n  if (!registry) return null;\n\n  const coreState = registry.getStore().getState();\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                  rotation: coreState.core.rotation,\n                  scale: coreState.core.scale,\n                  document: coreState.core.document,\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      {overlayElements}\n    </div>\n  );\n}\n"],"names":["totalPages"],"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                }}\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/adapter.d.ts

@@ -1,2 +1,2 @@
-export { Fragment, useEffect, useRef, useState } from 'react';
+export { Fragment, useEffect, useRef, useState, useLayoutEffect } from 'react';
 export type { ReactNode, HTMLAttributes } from 'react';

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"),o=require("react/jsx-runtime"),l=()=>t.usePlugin(r.ScrollPlugin.id),s=()=>t.useCapability(r.ScrollPlugin.id);exports.Scroller=function({renderPage:s,overlayElements:n,...i}){const{plugin:a}=l(),{registry:c}=t.useRegistry(),[g,u]=e.useState((()=>(null==a?void 0:a.getScrollerLayout())??null));if(e.useEffect((()=>{if(a)return a.onScrollerData(u)}),[a]),e.useEffect((()=>{a&&a.setLayoutReady()}),[a]),!g)return null;if(!c)return null;const d=c.getStore().getState();return o.jsxs("div",{...i,style:{width:`${g.totalWidth}px`,height:`${g.totalHeight}px`,position:"relative",boxSizing:"border-box",margin:"0 auto",...g.strategy===r.ScrollStrategy.Horizontal&&{display:"flex",flexDirection:"row"}},children:[o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.startSpacing,height:"100%",flexShrink:0}:{height:g.startSpacing,width:"100%"}}}),o.jsx("div",{style:{gap:g.pageGap,display:"flex",alignItems:"center",position:"relative",boxSizing:"border-box",...g.strategy===r.ScrollStrategy.Horizontal?{flexDirection:"row",minHeight:"100%"}:{flexDirection:"column",minWidth:"fit-content"}},children:g.items.map((e=>o.jsx("div",{style:{display:"flex",justifyContent:"center",gap:g.pageGap},children:e.pageLayouts.map((e=>o.jsx("div",{style:{width:`${e.rotatedWidth}px`,height:`${e.rotatedHeight}px`},children:s({...e,rotation:d.core.rotation,scale:d.core.scale,document:d.core.document})},e.pageNumber)))},e.pageNumbers[0])))}),o.jsx("div",{style:{...g.strategy===r.ScrollStrategy.Horizontal?{width:g.endSpacing,height:"100%",flexShrink:0}:{height:g.endSpacing,width:"100%"}}}),n]})},exports.useScroll=()=>{const{provides:t}=s(),[r,o]=e.useState(1),[l,n]=e.useState(1);return e.useEffect((()=>{if(t)return t.onPageChange((({pageNumber:e,totalPages:t})=>{o(e),n(t)}))}),[t]),{provides:t,state:{currentPage:r,totalPages:l},get currentPage(){return console.warn("Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead."),r},get totalPages(){return console.warn("Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead."),l},get scrollToPage(){return(null==t?void 0:t.scrollToPage)&&console.warn("Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead."),null==t?void 0:t.scrollToPage},get scrollToNextPage(){return(null==t?void 0:t.scrollToNextPage)&&console.warn("Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead."),null==t?void 0:t.scrollToNextPage},get scrollToPreviousPage(){return(null==t?void 0:t.scrollToPreviousPage)&&console.warn("Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead."),null==t?void 0:t.scrollToPreviousPage},get getMetrics(){return(null==t?void 0:t.getMetrics)&&console.warn("Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead."),null==t?void 0:t.getMetrics},get onPageChange(){return(null==t?void 0:t.onPageChange)&&console.warn("Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead."),null==t?void 0:t.onPageChange},get onScroll(){return(null==t?void 0:t.onScroll)&&console.warn("Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead."),null==t?void 0:t.onScroll},get onLayoutChange(){return(null==t?void 0:t.onLayoutChange)&&console.warn("Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead."),null==t?void 0:t.onLayoutChange},get getCurrentPage(){return(null==t?void 0:t.getCurrentPage)&&console.warn("Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead."),null==t?void 0:t.getCurrentPage},get getTotalPages(){return(null==t?void 0:t.getTotalPages)&&console.warn("Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead."),null==t?void 0:t.getTotalPages}}},exports.useScrollCapability=s,exports.useScrollPlugin=l,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 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]})});
 //# 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 { ScrollCapability, ScrollPlugin } 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: ScrollCapability | null;\n  state: {\n    currentPage: number;\n    totalPages: number;\n  };\n  // Deprecated properties (for backward compatibility)\n  readonly currentPage: number;\n  readonly totalPages: number;\n  readonly scrollToPage: ScrollCapability['scrollToPage'] | undefined;\n  readonly scrollToNextPage: ScrollCapability['scrollToNextPage'] | undefined;\n  readonly scrollToPreviousPage: ScrollCapability['scrollToPreviousPage'] | undefined;\n  readonly getMetrics: ScrollCapability['getMetrics'] | undefined;\n  readonly onPageChange: ScrollCapability['onPageChange'] | undefined;\n  readonly onScroll: ScrollCapability['onScroll'] | undefined;\n  readonly onLayoutChange: ScrollCapability['onLayoutChange'] | undefined;\n  readonly getCurrentPage: ScrollCapability['getCurrentPage'] | undefined;\n  readonly getTotalPages: ScrollCapability['getTotalPages'] | undefined;\n}\n\nexport const useScroll = (): UseScrollReturn => {\n  const { provides } = useScrollCapability();\n  const [currentPage, setCurrentPage] = useState(1);\n  const [totalPages, setTotalPages] = useState(1);\n\n  useEffect(() => {\n    if (!provides) return;\n    return provides.onPageChange(({ pageNumber, totalPages }) => {\n      setCurrentPage(pageNumber);\n      setTotalPages(totalPages);\n    });\n  }, [provides]);\n\n  return {\n    // New format (preferred)\n    provides,\n    state: {\n      currentPage,\n      totalPages,\n    },\n\n    // Deprecated properties with getters that show warnings\n    get currentPage() {\n      console.warn(\n        `Accessing 'currentPage' directly on useScroll() is deprecated. Use useScroll().state.currentPage instead.`,\n      );\n      return currentPage;\n    },\n\n    get totalPages() {\n      console.warn(\n        `Accessing 'totalPages' directly on useScroll() is deprecated. Use useScroll().state.totalPages instead.`,\n      );\n      return totalPages;\n    },\n\n    get scrollToPage() {\n      if (provides?.scrollToPage) {\n        console.warn(\n          `Accessing 'scrollToPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPage instead.`,\n        );\n      }\n      return provides?.scrollToPage;\n    },\n\n    get scrollToNextPage() {\n      if (provides?.scrollToNextPage) {\n        console.warn(\n          `Accessing 'scrollToNextPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToNextPage instead.`,\n        );\n      }\n      return provides?.scrollToNextPage;\n    },\n\n    get scrollToPreviousPage() {\n      if (provides?.scrollToPreviousPage) {\n        console.warn(\n          `Accessing 'scrollToPreviousPage' directly on useScroll() is deprecated. Use useScroll().provides.scrollToPreviousPage instead.`,\n        );\n      }\n      return provides?.scrollToPreviousPage;\n    },\n\n    get getMetrics() {\n      if (provides?.getMetrics) {\n        console.warn(\n          `Accessing 'getMetrics' directly on useScroll() is deprecated. Use useScroll().provides.getMetrics instead.`,\n        );\n      }\n      return provides?.getMetrics;\n    },\n\n    get onPageChange() {\n      if (provides?.onPageChange) {\n        console.warn(\n          `Accessing 'onPageChange' directly on useScroll() is deprecated. Use useScroll().provides.onPageChange instead.`,\n        );\n      }\n      return provides?.onPageChange;\n    },\n\n    get onScroll() {\n      if (provides?.onScroll) {\n        console.warn(\n          `Accessing 'onScroll' directly on useScroll() is deprecated. Use useScroll().provides.onScroll instead.`,\n        );\n      }\n      return provides?.onScroll;\n    },\n\n    get onLayoutChange() {\n      if (provides?.onLayoutChange) {\n        console.warn(\n          `Accessing 'onLayoutChange' directly on useScroll() is deprecated. Use useScroll().provides.onLayoutChange instead.`,\n        );\n      }\n      return provides?.onLayoutChange;\n    },\n\n    get getCurrentPage() {\n      if (provides?.getCurrentPage) {\n        console.warn(\n          `Accessing 'getCurrentPage' directly on useScroll() is deprecated. Use useScroll().provides.getCurrentPage instead.`,\n        );\n      }\n      return provides?.getCurrentPage;\n    },\n\n    get getTotalPages() {\n      if (provides?.getTotalPages) {\n        console.warn(\n          `Accessing 'getTotalPages' directly on useScroll() is deprecated. Use useScroll().provides.getTotalPages instead.`,\n        );\n      }\n      return provides?.getTotalPages;\n    },\n  };\n};\n","import { ReactNode, useEffect, useState, HTMLAttributes } from '@framework';\nimport { ScrollStrategy, ScrollerLayout } from '@embedpdf/plugin-scroll';\nimport { useRegistry } from '@embedpdf/core/@framework';\n\nimport { useScrollPlugin } from '../hooks';\nimport { RenderPageProps } from '../types';\n\ntype ScrollerProps = HTMLAttributes<HTMLDivElement> & {\n  renderPage: (props: RenderPageProps) => ReactNode;\n  overlayElements?: ReactNode[];\n};\n\nexport function Scroller({ renderPage, overlayElements, ...props }: ScrollerProps) {\n  const { plugin: scrollPlugin } = useScrollPlugin();\n  const { registry } = useRegistry();\n  const [scrollerLayout, setScrollerLayout] = useState<ScrollerLayout | null>(\n    () => scrollPlugin?.getScrollerLayout() ?? null,\n  );\n\n  useEffect(() => {\n    if (!scrollPlugin) return;\n\n    return scrollPlugin.onScrollerData(setScrollerLayout);\n  }, [scrollPlugin]);\n\n  useEffect(() => {\n    if (!scrollPlugin) return;\n\n    scrollPlugin.setLayoutReady();\n  }, [scrollPlugin]);\n\n  if (!scrollerLayout) return null;\n  if (!registry) return null;\n\n  const coreState = registry.getStore().getState();\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                  rotation: coreState.core.rotation,\n                  scale: coreState.core.scale,\n                  document: coreState.core.document,\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      {overlayElements}\n    </div>\n  );\n}\n"],"names":["useScrollPlugin","usePlugin","ScrollPlugin","id","useScrollCapability","useCapability","renderPage","overlayElements","props","plugin","scrollPlugin","registry","useRegistry","scrollerLayout","setScrollerLayout","useState","getScrollerLayout","useEffect","onScrollerData","setLayoutReady","coreState","getStore","getState","jsxRuntime","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","layout","rotatedWidth","rotatedHeight","rotation","core","scale","document","pageNumber","pageNumbers","endSpacing","provides","currentPage","setCurrentPage","totalPages","setTotalPages","onPageChange","state","console","warn","scrollToPage","scrollToNextPage","scrollToPreviousPage","getMetrics","onScroll","onLayoutChange","getCurrentPage","getTotalPages"],"mappings":"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"}
+{"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"}