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

package/dist/index.js

@@ -1,5 +1,5 @@
-import { BasePlugin, createBehaviorEmitter, SET_DOCUMENT, getPagesWithRotatedSize, SET_ROTATION, SET_PAGES, SET_SCALE } from "@embedpdf/core";
-import { scalePosition, transformPosition, transformRect, Rotation } from "@embedpdf/models";
+import { BasePlugin, createBehaviorEmitter } from "@embedpdf/core";
+import { scalePosition, transformPosition, transformRect, transformSize } from "@embedpdf/models";
 var ScrollStrategy = /* @__PURE__ */ ((ScrollStrategy2) => {
   ScrollStrategy2["Vertical"] = "vertical";
   ScrollStrategy2["Horizontal"] = "horizontal";
@@ -296,31 +296,99 @@ class HorizontalScrollStrategy extends BaseScrollStrategy {
     return viewport.clientWidth;
   }
 }
-const UPDATE_SCROLL_STATE = "UPDATE_SCROLL_STATE";
-const SET_DESIRED_SCROLL_POSITION = "SET_DESIRED_SCROLL_POSITION";
-const UPDATE_TOTAL_PAGES = "UPDATE_TOTAL_PAGES";
-const SET_PAGE_CHANGE_STATE = "SET_PAGE_CHANGE_STATE";
-function updateScrollState(payload) {
-  return { type: UPDATE_SCROLL_STATE, payload };
+const INIT_SCROLL_STATE = "INIT_SCROLL_STATE";
+const CLEANUP_SCROLL_STATE = "CLEANUP_SCROLL_STATE";
+const UPDATE_DOCUMENT_SCROLL_STATE = "UPDATE_DOCUMENT_SCROLL_STATE";
+const SET_SCROLL_STRATEGY = "SET_SCROLL_STRATEGY";
+function initScrollState(documentId, state) {
+  return { type: INIT_SCROLL_STATE, payload: { documentId, state } };
 }
-function updateTotalPages(payload) {
-  return { type: UPDATE_TOTAL_PAGES, payload };
+function cleanupScrollState(documentId) {
+  return { type: CLEANUP_SCROLL_STATE, payload: documentId };
 }
-function setPageChangeState(payload) {
-  return { type: SET_PAGE_CHANGE_STATE, payload };
+function updateDocumentScrollState(documentId, state) {
+  return { type: UPDATE_DOCUMENT_SCROLL_STATE, payload: { documentId, state } };
 }
-const getScrollerLayout = (state, scale) => {
+function setScrollStrategy(documentId, strategy) {
+  return { type: SET_SCROLL_STRATEGY, payload: { documentId, strategy } };
+}
+const defaultPageChangeState = {
+  isChanging: false,
+  targetPage: 1,
+  fromPage: 1,
+  startTime: 0
+};
+const initialState = (_coreState, config) => ({
+  defaultStrategy: config.defaultStrategy ?? ScrollStrategy.Vertical,
+  defaultPageGap: config.defaultPageGap ?? 10,
+  defaultBufferSize: config.defaultBufferSize ?? 2,
+  documents: {}
+});
+const scrollReducer = (state, action) => {
+  switch (action.type) {
+    case INIT_SCROLL_STATE: {
+      const { documentId, state: docState } = action.payload;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: docState
+        }
+      };
+    }
+    case CLEANUP_SCROLL_STATE: {
+      const { [action.payload]: removed, ...remaining } = state.documents;
+      return {
+        ...state,
+        documents: remaining
+      };
+    }
+    case UPDATE_DOCUMENT_SCROLL_STATE: {
+      const { documentId, state: updates } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            ...updates
+          }
+        }
+      };
+    }
+    case SET_SCROLL_STRATEGY: {
+      const { documentId, strategy } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            strategy
+          }
+        }
+      };
+    }
+    default:
+      return state;
+  }
+};
+const getScrollerLayout = (documentState, scale) => {
   return {
-    startSpacing: state.startSpacing,
-    endSpacing: state.endSpacing,
-    totalWidth: state.totalContentSize.width * scale,
-    totalHeight: state.totalContentSize.height * scale,
-    pageGap: state.pageGap * scale,
-    strategy: state.strategy,
-    items: state.renderedPageIndexes.map((idx) => {
+    startSpacing: documentState.startSpacing,
+    endSpacing: documentState.endSpacing,
+    totalWidth: documentState.totalContentSize.width * scale,
+    totalHeight: documentState.totalContentSize.height * scale,
+    pageGap: documentState.pageGap * scale,
+    strategy: documentState.strategy,
+    items: documentState.renderedPageIndexes.map((idx) => {
       return {
-        ...state.virtualItems[idx],
-        pageLayouts: state.virtualItems[idx].pageLayouts.map((layout) => {
+        ...documentState.virtualItems[idx],
+        pageLayouts: documentState.virtualItems[idx].pageLayouts.map((layout) => {
           return {
             ...layout,
             rotatedWidth: layout.rotatedWidth * scale,
@@ -335,278 +403,505 @@ const getScrollerLayout = (state, scale) => {
 };
 const _ScrollPlugin = class _ScrollPlugin extends BasePlugin {
   constructor(id, registry, config) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     super(id, registry);
     this.id = id;
     this.config = config;
-    this.currentScale = 1;
-    this.currentRotation = Rotation.Degree0;
-    this.currentPage = 1;
-    this.layoutReady = false;
-    this.pageChangeState$ = createBehaviorEmitter();
-    this.layout$ = createBehaviorEmitter();
-    this.scroll$ = createBehaviorEmitter();
-    this.state$ = createBehaviorEmitter();
-    this.scrollerLayout$ = createBehaviorEmitter();
+    this.strategies = /* @__PURE__ */ new Map();
+    this.layoutReady = /* @__PURE__ */ new Set();
+    this.scrollerLayoutEmitters = /* @__PURE__ */ new Map();
+    this.initialPageUsed = false;
     this.pageChange$ = createBehaviorEmitter();
+    this.scroll$ = createBehaviorEmitter();
+    this.layoutChange$ = createBehaviorEmitter();
+    this.pageChangeState$ = createBehaviorEmitter();
     this.layoutReady$ = createBehaviorEmitter();
+    this.state$ = createBehaviorEmitter();
     this.viewport = this.registry.getPlugin("viewport").provides();
-    this.strategyConfig = {
-      pageGap: ((_a = this.config) == null ? void 0 : _a.pageGap) ?? 10,
-      viewportGap: this.viewport.getViewportGap(),
-      bufferSize: ((_b = this.config) == null ? void 0 : _b.bufferSize) ?? 2
-    };
-    this.strategy = ((_c = this.config) == null ? void 0 : _c.strategy) === ScrollStrategy.Horizontal ? new HorizontalScrollStrategy(this.strategyConfig) : new VerticalScrollStrategy(this.strategyConfig);
-    this.initialPage = (_d = this.config) == null ? void 0 : _d.initialPage;
-    this.currentScale = this.coreState.core.scale;
-    this.currentRotation = this.coreState.core.rotation;
-    this.viewport.onScrollActivity((activity) => {
-      if (this.state.pageChangeState.isChanging && !activity.isSmoothScrolling) {
-        this.completePageChange();
+    this.spread = ((_a = this.registry.getPlugin("spread")) == null ? void 0 : _a.provides()) ?? null;
+    this.initialPage = (_b = this.config) == null ? void 0 : _b.initialPage;
+    this.viewport.onScrollActivity((event) => {
+      const docState = this.getDocumentState(event.documentId);
+      if ((docState == null ? void 0 : docState.pageChangeState.isChanging) && !event.activity.isSmoothScrolling) {
+        this.completePageChange(event.documentId);
       }
     });
-    this.viewport.onViewportChange((vp) => this.commitMetrics(this.computeMetrics(vp)), {
-      mode: "throttle",
-      wait: 100
+    (_c = this.spread) == null ? void 0 : _c.onSpreadChange((event) => {
+      this.refreshDocumentLayout(event.documentId);
     });
-    this.coreStore.onAction(SET_DOCUMENT, (_action, state) => {
-      const totalPages = state.core.pages.length;
-      this.dispatch(updateTotalPages(totalPages));
-      this.pageChange$.emit({ pageNumber: this.currentPage, totalPages });
-      this.refreshAll(getPagesWithRotatedSize(state.core), this.viewport.getMetrics());
+    this.viewport.onViewportChange((event) => {
+      const docState = this.getDocumentState(event.documentId);
+      if (!docState) return;
+      const computedMetrics = this.computeMetrics(event.documentId, event.metrics);
+      if (this.layoutReady.has(event.documentId)) {
+        this.commitMetrics(event.documentId, computedMetrics);
+      } else {
+        this.commitMetrics(event.documentId, {
+          ...computedMetrics,
+          scrollOffset: docState.scrollOffset
+        });
+      }
     });
-    this.coreStore.onAction(
-      SET_ROTATION,
-      (_action, state) => this.refreshAll(getPagesWithRotatedSize(state.core), this.viewport.getMetrics())
+  }
+  // ─────────────────────────────────────────────────────────
+  // Document Lifecycle Hooks (from BasePlugin)
+  // ─────────────────────────────────────────────────────────
+  onDocumentLoadingStarted(documentId) {
+    const coreDoc = this.getCoreDocument(documentId);
+    if (!coreDoc) return;
+    const docState = this.createDocumentState(coreDoc);
+    this.dispatch(initScrollState(documentId, docState));
+    const strategy = this.createStrategy(docState.strategy);
+    this.strategies.set(documentId, strategy);
+    this.scrollerLayoutEmitters.set(documentId, createBehaviorEmitter());
+  }
+  onDocumentLoaded(documentId) {
+    var _a;
+    const coreDoc = this.getCoreDocument(documentId);
+    if (!coreDoc) return;
+    this.dispatch(
+      updateDocumentScrollState(documentId, { totalPages: ((_a = coreDoc.document) == null ? void 0 : _a.pageCount) ?? 0 })
     );
-    this.coreStore.onAction(
-      SET_PAGES,
-      (_action, state) => this.refreshAll(getPagesWithRotatedSize(state.core), this.viewport.getMetrics())
+    this.refreshDocumentLayout(documentId);
+    this.logger.debug(
+      "ScrollPlugin",
+      "DocumentOpened",
+      `Initialized scroll state for document: ${documentId}`
     );
   }
-  startPageChange(targetPage, behavior = "smooth") {
-    const pageChangeState = {
-      isChanging: true,
-      targetPage,
-      fromPage: this.currentPage,
-      startTime: Date.now()
-    };
-    this.dispatch(setPageChangeState(pageChangeState));
-    if (behavior === "instant") {
-      this.completePageChange();
+  onDocumentClosed(documentId) {
+    this.strategies.delete(documentId);
+    this.layoutReady.delete(documentId);
+    const emitter = this.scrollerLayoutEmitters.get(documentId);
+    if (emitter) {
+      emitter.clear();
+      this.scrollerLayoutEmitters.delete(documentId);
     }
+    this.dispatch(cleanupScrollState(documentId));
+    this.logger.debug(
+      "ScrollPlugin",
+      "DocumentClosed",
+      `Cleaned up scroll state for document: ${documentId}`
+    );
   }
-  completePageChange() {
-    if (!this.state.pageChangeState.isChanging) return;
-    const pageChangeState = {
-      isChanging: false,
-      targetPage: this.state.pageChangeState.targetPage,
-      fromPage: this.state.pageChangeState.fromPage,
-      startTime: this.state.pageChangeState.startTime
-    };
-    this.dispatch(setPageChangeState(pageChangeState));
-  }
-  /* ------------------------------------------------------------------ */
-  /*  ᴄᴏᴍᴘᴜᴛᴇʀs                                                       */
-  /* ------------------------------------------------------------------ */
-  computeLayout(pages) {
-    const virtualItems = this.strategy.createVirtualItems(pages);
-    const totalContentSize = this.strategy.getTotalContentSize(virtualItems);
-    return { virtualItems, totalContentSize };
+  onScaleChanged(documentId) {
+    const coreDoc = this.coreState.core.documents[documentId];
+    if (!coreDoc || coreDoc.status !== "loaded") return;
+    const viewportScope = this.viewport.forDocument(documentId);
+    const metrics = this.computeMetrics(documentId, viewportScope.getMetrics());
+    this.commitMetrics(documentId, metrics);
   }
-  computeMetrics(vp, items = this.state.virtualItems) {
-    return this.strategy.handleScroll(vp, items, this.currentScale);
-  }
-  /* ------------------------------------------------------------------ */
-  /*  ᴄᴏᴍᴍɪᴛ  (single source of truth)                                  */
-  /* ------------------------------------------------------------------ */
-  commit(stateDelta, emit) {
-    this.dispatch(updateScrollState(stateDelta));
-    if (emit == null ? void 0 : emit.layout) this.layout$.emit(emit.layout);
-    if (emit == null ? void 0 : emit.metrics) {
-      this.scroll$.emit(emit.metrics);
-      if (emit.metrics.currentPage !== this.currentPage) {
-        this.currentPage = emit.metrics.currentPage;
-        this.pageChange$.emit({ pageNumber: this.currentPage, totalPages: this.state.totalPages });
-      }
-    }
-    this.scrollerLayout$.emit(this.getScrollerLayout());
+  onRotationChanged(documentId) {
+    this.refreshDocumentLayout(documentId);
   }
-  /* convenience wrappers */
-  commitMetrics(metrics) {
-    this.commit(metrics, { metrics });
+  // ─────────────────────────────────────────────────────────
+  // Public API for Components (Scroller Layout)
+  // ─────────────────────────────────────────────────────────
+  /**
+   * Subscribe to scroller layout updates for a specific document
+   * This is the key method for the Scroller component to stay reactive
+   */
+  onScrollerData(documentId, callback) {
+    const emitter = this.scrollerLayoutEmitters.get(documentId);
+    if (!emitter) {
+      throw new Error(`No scroller layout emitter found for document: ${documentId}`);
+    }
+    return emitter.on(callback);
   }
-  /* full re-compute after page-spread or initialisation */
-  refreshAll(pages, vp) {
-    const layout = this.computeLayout(pages);
-    const metrics = this.computeMetrics(vp, layout.virtualItems);
-    this.commit({ ...layout, ...metrics }, { layout, metrics });
+  /**
+   * Get current scroller layout for a document
+   */
+  getScrollerLayout(documentId) {
+    const docState = this.getDocumentState(documentId);
+    const coreDoc = this.getCoreDocumentOrThrow(documentId);
+    if (!docState || !coreDoc) {
+      throw new Error(`Cannot get scroller layout for document: ${documentId}`);
+    }
+    return getScrollerLayout(docState, coreDoc.scale);
   }
-  getVirtualItemsFromState() {
-    return this.state.virtualItems || [];
+  setLayoutReady(documentId) {
+    if (this.layoutReady.has(documentId)) {
+      return;
+    }
+    const docState = this.getDocumentState(documentId);
+    if (!docState) return;
+    this.layoutReady.add(documentId);
+    if (this.initialPage && !this.initialPageUsed) {
+      this.initialPageUsed = true;
+      this.scrollToPage({ pageNumber: this.initialPage, behavior: "instant" }, documentId);
+    } else {
+      const viewport = this.viewport.forDocument(documentId);
+      viewport.scrollTo({ ...docState.scrollOffset, behavior: "instant" });
+    }
+    this.layoutReady$.emit({ documentId });
   }
-  onScrollerData(callback) {
-    return this.scrollerLayout$.on(callback);
+  clearLayoutReady(documentId) {
+    this.layoutReady.delete(documentId);
   }
-  getScrollerLayout() {
-    const scale = this.coreState.core.scale;
-    return getScrollerLayout(this.state, scale);
+  // ─────────────────────────────────────────────────────────
+  // Capability
+  // ─────────────────────────────────────────────────────────
+  buildCapability() {
+    return {
+      // Active document operations
+      getCurrentPage: () => this.getCurrentPage(),
+      getTotalPages: () => this.getTotalPages(),
+      getPageChangeState: () => this.getPageChangeState(),
+      scrollToPage: (options) => this.scrollToPage(options),
+      scrollToNextPage: (behavior) => this.scrollToNextPage(behavior),
+      scrollToPreviousPage: (behavior) => this.scrollToPreviousPage(behavior),
+      getMetrics: (viewport) => this.getMetrics(viewport),
+      getLayout: () => this.getLayout(),
+      getRectPositionForPage: (page, rect, scale, rotation) => this.getRectPositionForPage(page, rect, scale, rotation),
+      // Document-scoped operations
+      forDocument: (documentId) => this.createScrollScope(documentId),
+      // Global settings
+      setScrollStrategy: (strategy, documentId) => this.setScrollStrategyForDocument(strategy, documentId),
+      getPageGap: () => this.state.defaultPageGap,
+      // Events
+      onPageChange: this.pageChange$.on,
+      onScroll: this.scroll$.on,
+      onLayoutChange: this.layoutChange$.on,
+      onLayoutReady: this.layoutReady$.on,
+      onPageChangeState: this.pageChangeState$.on,
+      onStateChange: this.state$.on
+    };
   }
-  pushScrollLayout() {
-    this.scrollerLayout$.emit(this.getScrollerLayout());
+  // ─────────────────────────────────────────────────────────
+  // Document Scoping
+  // ─────────────────────────────────────────────────────────
+  createScrollScope(documentId) {
+    return {
+      getCurrentPage: () => this.getCurrentPage(documentId),
+      getTotalPages: () => this.getTotalPages(documentId),
+      getPageChangeState: () => this.getPageChangeState(documentId),
+      scrollToPage: (options) => this.scrollToPage(options, documentId),
+      scrollToNextPage: (behavior) => this.scrollToNextPage(behavior, documentId),
+      scrollToPreviousPage: (behavior) => this.scrollToPreviousPage(behavior, documentId),
+      getSpreadPagesWithRotatedSize: () => this.getSpreadPagesWithRotatedSize(documentId),
+      getMetrics: (viewport) => this.getMetrics(viewport, documentId),
+      getLayout: () => this.getLayout(documentId),
+      getRectPositionForPage: (page, rect, scale, rotation) => this.getRectPositionForPage(page, rect, scale, rotation, documentId),
+      setScrollStrategy: (strategy) => this.setScrollStrategyForDocument(strategy, documentId),
+      onPageChange: (listener) => this.pageChange$.on((event) => {
+        if (event.documentId === documentId) listener(event);
+      }),
+      onScroll: (listener) => this.scroll$.on((event) => {
+        if (event.documentId === documentId) listener(event.metrics);
+      }),
+      onLayoutChange: (listener) => this.layoutChange$.on((event) => {
+        if (event.documentId === documentId) listener(event.layout);
+      })
+    };
   }
-  onStoreUpdated(prevState, newState) {
-    this.pushScrollLayout();
-    if (prevState.pageChangeState !== newState.pageChangeState) {
-      this.pageChangeState$.emit(newState.pageChangeState);
+  // ─────────────────────────────────────────────────────────
+  // State Helpers
+  // ─────────────────────────────────────────────────────────
+  getDocumentState(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    return this.state.documents[id] ?? null;
+  }
+  getDocumentStateOrThrow(documentId) {
+    const state = this.getDocumentState(documentId);
+    if (!state) {
+      throw new Error(`Scroll state not found for document: ${documentId ?? "active"}`);
     }
+    return state;
   }
-  onCoreStoreUpdated(prevState, newState) {
-    if (prevState.core.scale !== newState.core.scale) {
-      this.currentScale = newState.core.scale;
-      this.commitMetrics(this.computeMetrics(this.viewport.getMetrics()));
+  getStrategy(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const strategy = this.strategies.get(id);
+    if (!strategy) {
+      throw new Error(`Strategy not found for document: ${id}`);
     }
-    if (prevState.core.rotation !== newState.core.rotation) {
-      this.currentRotation = newState.core.rotation;
+    return strategy;
+  }
+  createStrategy(strategyType) {
+    const config = {
+      pageGap: this.state.defaultPageGap,
+      viewportGap: this.viewport.getViewportGap(),
+      bufferSize: this.state.defaultBufferSize
+    };
+    return strategyType === ScrollStrategy.Horizontal ? new HorizontalScrollStrategy(config) : new VerticalScrollStrategy(config);
+  }
+  createDocumentState(coreDoc) {
+    var _a;
+    return {
+      virtualItems: [],
+      totalPages: ((_a = coreDoc.document) == null ? void 0 : _a.pageCount) ?? 0,
+      currentPage: 1,
+      totalContentSize: { width: 0, height: 0 },
+      strategy: this.state.defaultStrategy,
+      pageGap: this.state.defaultPageGap,
+      visiblePages: [],
+      pageVisibilityMetrics: [],
+      renderedPageIndexes: [],
+      scrollOffset: { x: 0, y: 0 },
+      startSpacing: 0,
+      endSpacing: 0,
+      pageChangeState: defaultPageChangeState
+    };
+  }
+  // ─────────────────────────────────────────────────────────
+  // Page Change Management
+  // ─────────────────────────────────────────────────────────
+  startPageChange(documentId, targetPage, behavior = "smooth") {
+    const docState = this.getDocumentState(documentId);
+    if (!docState) return;
+    const pageChangeState = {
+      isChanging: true,
+      targetPage,
+      fromPage: docState.currentPage,
+      startTime: Date.now()
+    };
+    this.dispatch(updateDocumentScrollState(documentId, { pageChangeState }));
+    if (behavior === "instant") {
+      this.completePageChange(documentId);
     }
   }
-  /**
-   * Change the scroll strategy at runtime (e.g., vertical <-> horizontal)
-   * @param newStrategy ScrollStrategy.Horizontal or ScrollStrategy.Vertical
-   */
-  setScrollStrategy(newStrategy) {
-    if (newStrategy === ScrollStrategy.Horizontal && this.strategy instanceof HorizontalScrollStrategy || newStrategy === ScrollStrategy.Vertical && this.strategy instanceof VerticalScrollStrategy) {
-      return;
+  completePageChange(documentId) {
+    const docState = this.getDocumentState(documentId);
+    if (!docState || !docState.pageChangeState.isChanging) return;
+    const pageChangeState = {
+      isChanging: false,
+      targetPage: docState.pageChangeState.targetPage,
+      fromPage: docState.pageChangeState.fromPage,
+      startTime: docState.pageChangeState.startTime
+    };
+    this.dispatch(updateDocumentScrollState(documentId, { pageChangeState }));
+  }
+  // ─────────────────────────────────────────────────────────
+  // Layout & Metrics Computation
+  // ─────────────────────────────────────────────────────────
+  computeLayout(documentId, pages) {
+    const strategy = this.getStrategy(documentId);
+    const virtualItems = strategy.createVirtualItems(pages);
+    const totalContentSize = strategy.getTotalContentSize(virtualItems);
+    return { virtualItems, totalContentSize };
+  }
+  computeMetrics(documentId, vp, items) {
+    const coreDocState = this.getCoreDocumentOrThrow(documentId);
+    const docState = this.getDocumentState(documentId);
+    const strategy = this.getStrategy(documentId);
+    if (!docState) throw new Error(`Document state not found: ${documentId}`);
+    return strategy.handleScroll(vp, items ?? docState.virtualItems, coreDocState.scale);
+  }
+  // ─────────────────────────────────────────────────────────
+  // Commit (Single Source of Truth)
+  // ─────────────────────────────────────────────────────────
+  commitMetrics(documentId, metrics) {
+    const docState = this.getDocumentState(documentId);
+    if (!docState) return;
+    this.dispatch(updateDocumentScrollState(documentId, metrics));
+    this.scroll$.emit({ documentId, metrics });
+    if (metrics.currentPage !== docState.currentPage) {
+      this.pageChange$.emit({
+        documentId,
+        pageNumber: metrics.currentPage,
+        totalPages: docState.totalPages
+      });
+    }
+    this.pushScrollerLayout(documentId);
+  }
+  pushScrollerLayout(documentId) {
+    const emitter = this.scrollerLayoutEmitters.get(documentId);
+    if (!emitter) return;
+    try {
+      const layout = this.getScrollerLayout(documentId);
+      emitter.emit(layout);
+    } catch (error) {
     }
-    this.strategy = newStrategy === ScrollStrategy.Horizontal ? new HorizontalScrollStrategy(this.strategyConfig) : new VerticalScrollStrategy(this.strategyConfig);
+  }
+  refreshDocumentLayout(documentId) {
+    const coreDoc = this.coreState.core.documents[documentId];
+    const docState = this.getDocumentState(documentId);
+    if (!coreDoc || !docState || coreDoc.status !== "loaded") return;
+    const pages = this.getSpreadPagesWithRotatedSize(documentId);
+    const layout = this.computeLayout(documentId, pages);
+    const viewport = this.viewport.forDocument(documentId);
+    const metrics = this.computeMetrics(documentId, viewport.getMetrics(), layout.virtualItems);
     this.dispatch(
-      updateScrollState({
-        strategy: newStrategy
+      updateDocumentScrollState(documentId, {
+        ...layout,
+        ...metrics
       })
     );
-    const pages = getPagesWithRotatedSize(this.coreState.core);
-    this.refreshAll(pages, this.viewport.getMetrics());
-  }
-  setLayoutReady() {
-    if (this.layoutReady) return;
-    this.layoutReady = true;
-    this.layoutReady$.emit(true);
-    if (this.initialPage) {
-      this.scrollToPage({ pageNumber: this.initialPage, behavior: "instant" });
-    }
+    this.layoutChange$.emit({ documentId, layout });
+    this.pushScrollerLayout(documentId);
+  }
+  getSpreadPagesWithRotatedSize(documentId) {
+    var _a, _b;
+    const id = documentId ?? this.getActiveDocumentId();
+    const coreDoc = this.coreState.core.documents[id];
+    if (!coreDoc) throw new Error(`Document ${id} not loaded`);
+    const spreadPages = ((_a = this.spread) == null ? void 0 : _a.forDocument(id).getSpreadPages()) || ((_b = coreDoc.document) == null ? void 0 : _b.pages.map((page) => [page])) || [];
+    return spreadPages.map(
+      (spread) => spread.map((page) => ({
+        ...page,
+        rotatedSize: transformSize(page.size, coreDoc.rotation, 1)
+      }))
+    );
   }
-  buildCapability() {
-    return {
-      onStateChange: this.state$.on,
-      onLayoutChange: this.layout$.on,
-      onScroll: this.scroll$.on,
-      onPageChange: this.pageChange$.on,
-      onLayoutReady: this.layoutReady$.on,
-      onPageChangeState: this.pageChangeState$.on,
-      getCurrentPage: () => this.currentPage,
-      getTotalPages: () => this.state.totalPages,
-      getPageChangeState: () => this.state.pageChangeState,
-      scrollToPage: this.scrollToPage.bind(this),
-      scrollToNextPage: this.scrollToNextPage.bind(this),
-      scrollToPreviousPage: this.scrollToPreviousPage.bind(this),
-      getMetrics: this.getMetrics.bind(this),
-      getLayout: this.getLayout.bind(this),
-      getRectPositionForPage: this.getRectPositionForPage.bind(this),
-      getPageGap: () => this.state.pageGap,
-      setScrollStrategy: (strategy) => this.setScrollStrategy(strategy)
-    };
+  // ─────────────────────────────────────────────────────────
+  // Core Operations
+  // ─────────────────────────────────────────────────────────
+  getCurrentPage(documentId) {
+    return this.getDocumentStateOrThrow(documentId).currentPage;
+  }
+  getTotalPages(documentId) {
+    return this.getDocumentStateOrThrow(documentId).totalPages;
   }
-  scrollToPage(options) {
+  getPageChangeState(documentId) {
+    return this.getDocumentStateOrThrow(documentId).pageChangeState;
+  }
+  scrollToPage(options, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const strategy = this.getStrategy(id);
+    const coreDoc = this.getCoreDocumentOrThrow(id);
     const { pageNumber, behavior = "smooth", pageCoordinates, center = false } = options;
-    this.startPageChange(pageNumber, behavior);
-    const virtualItems = this.getVirtualItemsFromState();
-    const position = this.strategy.getScrollPositionForPage(
+    this.startPageChange(id, pageNumber, behavior);
+    const position = strategy.getScrollPositionForPage(
       pageNumber,
-      virtualItems,
-      this.currentScale,
-      this.currentRotation,
+      docState.virtualItems,
+      coreDoc.scale,
+      coreDoc.rotation,
       pageCoordinates
     );
     if (position) {
-      this.viewport.scrollTo({ ...position, behavior, center });
+      const viewport = this.viewport.forDocument(id);
+      viewport.scrollTo({ ...position, behavior, center });
     } else {
-      this.completePageChange();
+      this.completePageChange(id);
     }
   }
-  scrollToNextPage(behavior = "smooth") {
-    const virtualItems = this.getVirtualItemsFromState();
-    const currentItemIndex = virtualItems.findIndex(
-      (item) => item.pageNumbers.includes(this.currentPage)
+  scrollToNextPage(behavior = "smooth", documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const strategy = this.getStrategy(id);
+    const coreDoc = this.getCoreDocumentOrThrow(id);
+    const currentItemIndex = docState.virtualItems.findIndex(
+      (item) => item.pageNumbers.includes(docState.currentPage)
     );
-    if (currentItemIndex >= 0 && currentItemIndex < virtualItems.length - 1) {
-      const nextItem = virtualItems[currentItemIndex + 1];
+    if (currentItemIndex >= 0 && currentItemIndex < docState.virtualItems.length - 1) {
+      const nextItem = docState.virtualItems[currentItemIndex + 1];
       const targetPage = nextItem.pageNumbers[0];
-      this.startPageChange(targetPage, behavior);
-      const position = this.strategy.getScrollPositionForPage(
-        nextItem.pageNumbers[0],
-        virtualItems,
-        this.currentScale,
-        this.currentRotation
+      this.startPageChange(id, targetPage, behavior);
+      const position = strategy.getScrollPositionForPage(
+        targetPage,
+        docState.virtualItems,
+        coreDoc.scale,
+        coreDoc.rotation
       );
       if (position) {
-        this.viewport.scrollTo({ ...position, behavior });
+        const viewport = this.viewport.forDocument(id);
+        viewport.scrollTo({ ...position, behavior });
       } else {
-        this.completePageChange();
+        this.completePageChange(id);
       }
     }
   }
-  scrollToPreviousPage(behavior = "smooth") {
-    const virtualItems = this.getVirtualItemsFromState();
-    const currentItemIndex = virtualItems.findIndex(
-      (item) => item.pageNumbers.includes(this.currentPage)
+  scrollToPreviousPage(behavior = "smooth", documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const strategy = this.getStrategy(id);
+    const coreDoc = this.coreState.core.documents[id];
+    const currentItemIndex = docState.virtualItems.findIndex(
+      (item) => item.pageNumbers.includes(docState.currentPage)
     );
     if (currentItemIndex > 0) {
-      const prevItem = virtualItems[currentItemIndex - 1];
+      const prevItem = docState.virtualItems[currentItemIndex - 1];
       const targetPage = prevItem.pageNumbers[0];
-      this.startPageChange(targetPage, behavior);
-      const position = this.strategy.getScrollPositionForPage(
-        prevItem.pageNumbers[0],
-        virtualItems,
-        this.currentScale,
-        this.currentRotation
+      this.startPageChange(id, targetPage, behavior);
+      const position = strategy.getScrollPositionForPage(
+        targetPage,
+        docState.virtualItems,
+        coreDoc.scale,
+        coreDoc.rotation
       );
       if (position) {
-        this.viewport.scrollTo({ ...position, behavior });
+        const viewport = this.viewport.forDocument(id);
+        viewport.scrollTo({ ...position, behavior });
       } else {
-        this.completePageChange();
+        this.completePageChange(id);
       }
     }
   }
-  getMetrics(viewport) {
-    const metrics = viewport || this.viewport.getMetrics();
-    const virtualItems = this.getVirtualItemsFromState();
-    return this.strategy.handleScroll(metrics, virtualItems, this.currentScale);
+  getMetrics(viewport, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    if (viewport) {
+      return this.computeMetrics(id, viewport);
+    }
+    const viewportScope = this.viewport.forDocument(id);
+    return this.computeMetrics(id, viewportScope.getMetrics());
   }
-  getLayout() {
+  getLayout(documentId) {
+    const docState = this.getDocumentStateOrThrow(documentId);
     return {
-      virtualItems: this.state.virtualItems,
-      totalContentSize: this.state.totalContentSize
+      virtualItems: docState.virtualItems,
+      totalContentSize: docState.totalContentSize
     };
   }
-  getRectPositionForPage(pageIndex, rect, scale, rotation) {
-    return this.strategy.getRectPositionForPage(
+  getRectPositionForPage(pageIndex, rect, scale, rotation, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const strategy = this.getStrategy(id);
+    const coreDoc = this.getCoreDocumentOrThrow(id);
+    return strategy.getRectPositionForPage(
       pageIndex + 1,
-      this.state.virtualItems,
-      scale ?? this.currentScale,
-      rotation ?? this.currentRotation,
+      docState.virtualItems,
+      scale ?? coreDoc.scale,
+      rotation ?? coreDoc.rotation,
       rect
     );
   }
+  setScrollStrategyForDocument(newStrategy, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentState(id);
+    if (!docState || docState.strategy === newStrategy) return;
+    const strategy = this.createStrategy(newStrategy);
+    this.strategies.set(id, strategy);
+    this.dispatch(setScrollStrategy(id, newStrategy));
+    this.refreshDocumentLayout(id);
+  }
+  // ─────────────────────────────────────────────────────────
+  // Store Update Handlers
+  // ─────────────────────────────────────────────────────────
+  onStoreUpdated(prevState, newState) {
+    for (const documentId in newState.documents) {
+      const prevDoc = prevState.documents[documentId];
+      const newDoc = newState.documents[documentId];
+      if (prevDoc !== newDoc) {
+        this.state$.emit(newDoc);
+        if ((prevDoc == null ? void 0 : prevDoc.pageChangeState) !== newDoc.pageChangeState) {
+          this.pageChangeState$.emit({
+            documentId,
+            state: newDoc.pageChangeState
+          });
+        }
+        this.pushScrollerLayout(documentId);
+      }
+    }
+  }
+  // ─────────────────────────────────────────────────────────
+  // Lifecycle
+  // ─────────────────────────────────────────────────────────
   async initialize() {
+    this.logger.info("ScrollPlugin", "Initialize", "Scroll plugin initialized");
   }
   async destroy() {
-    this.layout$.clear();
-    this.scroll$.clear();
+    this.strategies.clear();
+    this.layoutReady.clear();
+    for (const emitter of this.scrollerLayoutEmitters.values()) {
+      emitter.clear();
+    }
+    this.scrollerLayoutEmitters.clear();
     this.pageChange$.clear();
-    this.state$.clear();
-    this.scrollerLayout$.clear();
-    this.layoutReady$.clear();
+    this.scroll$.clear();
+    this.layoutChange$.clear();
     this.pageChangeState$.clear();
+    this.layoutReady$.clear();
+    this.state$.clear();
     super.destroy();
   }
 };
@@ -619,52 +914,12 @@ const manifest = {
   version: "1.0.0",
   provides: ["scroll"],
   requires: ["viewport"],
-  optional: [],
+  optional: ["spread"],
   defaultConfig: {
     enabled: true,
-    pageGap: 10
-  }
-};
-const defaultScrollMetrics = {
-  currentPage: 1,
-  visiblePages: [],
-  pageVisibilityMetrics: [],
-  renderedPageIndexes: [],
-  scrollOffset: { x: 0, y: 0 },
-  startSpacing: 0,
-  endSpacing: 0
-};
-const defaultPageChangeState = {
-  isChanging: false,
-  targetPage: 1,
-  fromPage: 1,
-  startTime: 0
-};
-const initialState = (coreState, config) => ({
-  virtualItems: [],
-  totalPages: coreState.pages.length,
-  totalContentSize: { width: 0, height: 0 },
-  desiredScrollPosition: { x: 0, y: 0 },
-  strategy: config.strategy ?? ScrollStrategy.Vertical,
-  pageGap: config.pageGap ?? 10,
-  scale: coreState.scale,
-  pageChangeState: defaultPageChangeState,
-  ...defaultScrollMetrics
-});
-const scrollReducer = (state, action) => {
-  switch (action.type) {
-    case UPDATE_TOTAL_PAGES:
-      return { ...state, totalPages: action.payload };
-    case SET_SCALE:
-      return { ...state, scale: action.payload };
-    case UPDATE_SCROLL_STATE:
-      return { ...state, ...action.payload };
-    case SET_DESIRED_SCROLL_POSITION:
-      return { ...state, desiredScrollPosition: action.payload };
-    case SET_PAGE_CHANGE_STATE:
-      return { ...state, pageChangeState: action.payload };
-    default:
-      return state;
+    defaultPageGap: 10,
+    defaultBufferSize: 4,
+    defaultStrategy: ScrollStrategy.Vertical
   }
 };
 const ScrollPluginPackage = {
@@ -678,6 +933,7 @@ export {
   ScrollPlugin,
   ScrollPluginPackage,
   ScrollStrategy,
+  getScrollerLayout,
   manifest
 };
 //# sourceMappingURL=index.js.map