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

package/dist/index.js

@@ -1,4 +1,4 @@
-import { clamp, BasePlugin, createEmitter, createBehaviorEmitter, SET_ROTATION, SET_PAGES, SET_DOCUMENT, setScale, getPagesWithRotatedSize } from "@embedpdf/core";
+import { clamp, BasePlugin, createEmitter, createBehaviorEmitter, setScale } from "@embedpdf/core";
 import { rotateRect } from "@embedpdf/models";
 var ZoomMode = /* @__PURE__ */ ((ZoomMode2) => {
   ZoomMode2["Automatic"] = "automatic";
@@ -18,7 +18,7 @@ const manifest = {
   version: "1.0.0",
   provides: ["zoom"],
   requires: ["viewport", "scroll"],
-  optional: ["interaction-manager"],
+  optional: ["interaction-manager", "spread"],
   defaultConfig: {
     enabled: true,
     defaultZoomLevel: ZoomMode.Automatic,
@@ -119,37 +119,92 @@ const manifest = {
     ]
   }
 };
-const SET_ZOOM_LEVEL = "SET_ZOOM_LEVEL";
-const SET_INITIAL_ZOOM_LEVEL = "SET_INITIAL_ZOOM_LEVEL";
-function setZoomLevel(zoomLevel, currentZoomLevel) {
-  return {
-    type: SET_ZOOM_LEVEL,
-    payload: { zoomLevel, currentZoomLevel }
-  };
+const INIT_ZOOM_STATE = "ZOOM/INIT_STATE";
+const CLEANUP_ZOOM_STATE = "ZOOM/CLEANUP_STATE";
+const SET_ACTIVE_DOCUMENT = "ZOOM/SET_ACTIVE_DOCUMENT";
+const SET_ZOOM_LEVEL = "ZOOM/SET_ZOOM_LEVEL";
+const SET_MARQUEE_ZOOM_ACTIVE = "ZOOM/SET_MARQUEE_ZOOM_ACTIVE";
+function initZoomState(documentId, state) {
+  return { type: INIT_ZOOM_STATE, payload: { documentId, state } };
 }
-function setInitialZoomLevel(zoomLevel) {
-  return {
-    type: SET_INITIAL_ZOOM_LEVEL,
-    payload: { zoomLevel }
-  };
+function cleanupZoomState(documentId) {
+  return { type: CLEANUP_ZOOM_STATE, payload: documentId };
 }
-const initialState = {
+function setZoomLevel(documentId, zoomLevel, currentZoomLevel) {
+  return { type: SET_ZOOM_LEVEL, payload: { documentId, zoomLevel, currentZoomLevel } };
+}
+function setMarqueeZoomActive(documentId, isActive) {
+  return { type: SET_MARQUEE_ZOOM_ACTIVE, payload: { documentId, isActive } };
+}
+const initialDocumentState = {
   zoomLevel: ZoomMode.Automatic,
-  currentZoomLevel: 1
+  currentZoomLevel: 1,
+  isMarqueeZoomActive: false
+};
+const initialState = {
+  documents: {},
+  activeDocumentId: null
 };
 const zoomReducer = (state = initialState, action) => {
   switch (action.type) {
-    case SET_ZOOM_LEVEL:
+    case INIT_ZOOM_STATE: {
+      const { documentId, state: docState } = action.payload;
       return {
         ...state,
-        zoomLevel: action.payload.zoomLevel,
-        currentZoomLevel: action.payload.currentZoomLevel
+        documents: {
+          ...state.documents,
+          [documentId]: docState
+        },
+        // Set as active if no active document
+        activeDocumentId: state.activeDocumentId ?? documentId
       };
-    case SET_INITIAL_ZOOM_LEVEL:
+    }
+    case CLEANUP_ZOOM_STATE: {
+      const documentId = action.payload;
+      const { [documentId]: removed, ...remainingDocs } = state.documents;
       return {
         ...state,
-        zoomLevel: action.payload.zoomLevel
+        documents: remainingDocs,
+        activeDocumentId: state.activeDocumentId === documentId ? null : state.activeDocumentId
       };
+    }
+    case SET_ACTIVE_DOCUMENT: {
+      return {
+        ...state,
+        activeDocumentId: action.payload
+      };
+    }
+    case SET_ZOOM_LEVEL: {
+      const { documentId, zoomLevel, currentZoomLevel } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            zoomLevel,
+            currentZoomLevel
+          }
+        }
+      };
+    }
+    case SET_MARQUEE_ZOOM_ACTIVE: {
+      const { documentId, isActive } = action.payload;
+      const docState = state.documents[documentId];
+      if (!docState) return state;
+      return {
+        ...state,
+        documents: {
+          ...state.documents,
+          [documentId]: {
+            ...docState,
+            isMarqueeZoomActive: isActive
+          }
+        }
+      };
+    }
     default:
       return state;
   }
@@ -201,9 +256,8 @@ function createMarqueeHandler(opts) {
   };
 }
 const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
-  /* ------------------------------------------------------------------ */
   constructor(id, registry, cfg) {
-    var _a;
+    var _a, _b, _c;
     super(id, registry);
     this.zoom$ = createEmitter();
     this.state$ = createBehaviorEmitter();
@@ -212,122 +266,207 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
     this.scroll = registry.getPlugin("scroll").provides();
     const interactionManager = registry.getPlugin("interaction-manager");
     this.interactionManager = (interactionManager == null ? void 0 : interactionManager.provides()) ?? null;
+    const spread = registry.getPlugin("spread");
+    this.spread = (spread == null ? void 0 : spread.provides()) ?? null;
     this.minZoom = cfg.minZoom ?? 0.25;
     this.maxZoom = cfg.maxZoom ?? 10;
     this.zoomStep = cfg.zoomStep ?? 0.1;
+    this.defaultZoomLevel = cfg.defaultZoomLevel;
     this.presets = cfg.presets ?? [];
     this.zoomRanges = this.normalizeRanges(cfg.zoomRanges ?? []);
-    this.dispatch(setInitialZoomLevel(cfg.defaultZoomLevel));
-    this.viewport.onViewportResize(() => this.recalcAuto(VerticalZoomFocus.Top), {
-      mode: "debounce",
-      wait: 150
+    this.viewport.onViewportResize(
+      (event) => this.recalcAuto(event.documentId, VerticalZoomFocus.Top),
+      {
+        mode: "debounce",
+        wait: 150,
+        keyExtractor: (event) => event.documentId
+      }
+    );
+    (_a = this.spread) == null ? void 0 : _a.onSpreadChange((event) => {
+      this.recalcAuto(event.documentId, VerticalZoomFocus.Top);
     });
-    this.coreStore.onAction(SET_ROTATION, () => this.recalcAuto(VerticalZoomFocus.Top));
-    this.coreStore.onAction(SET_PAGES, () => this.recalcAuto(VerticalZoomFocus.Top));
-    this.coreStore.onAction(SET_DOCUMENT, () => this.recalcAuto(VerticalZoomFocus.Top));
-    (_a = this.interactionManager) == null ? void 0 : _a.registerMode({
+    (_b = this.interactionManager) == null ? void 0 : _b.registerMode({
       id: "marqueeZoom",
       scope: "page",
       exclusive: true,
       cursor: "zoom-in"
     });
-    this.resetReady();
+    (_c = this.interactionManager) == null ? void 0 : _c.onModeChange((state) => {
+      const isMarqueeActive = state.activeMode === "marqueeZoom";
+      const docState = this.getDocumentState(state.documentId);
+      if (docState && docState.isMarqueeZoomActive !== isMarqueeActive) {
+        this.dispatch(setMarqueeZoomActive(state.documentId, isMarqueeActive));
+      }
+    });
+  }
+  // ─────────────────────────────────────────────────────────
+  // Document Lifecycle Hooks (from BasePlugin)
+  // ─────────────────────────────────────────────────────────
+  onDocumentLoadingStarted(documentId) {
+    this.viewport.gate("zoom", documentId);
+    const docState = {
+      ...initialDocumentState,
+      zoomLevel: this.defaultZoomLevel
+    };
+    this.dispatch(initZoomState(documentId, docState));
+    this.logger.debug(
+      "ZoomPlugin",
+      "DocumentOpened",
+      `Initialized zoom state for document: ${documentId}`
+    );
+  }
+  onDocumentLoaded(documentId) {
+    this.recalcAuto(documentId, VerticalZoomFocus.Top);
+  }
+  onDocumentClosed(documentId) {
+    this.dispatch(cleanupZoomState(documentId));
+    this.logger.debug(
+      "ZoomPlugin",
+      "DocumentClosed",
+      `Cleaned up zoom state for document: ${documentId}`
+    );
+  }
+  onRotationChanged(documentId) {
+    this.recalcAuto(documentId, VerticalZoomFocus.Top);
   }
-  /* ------------------------------------------------------------------ */
-  /* capability                                                          */
-  /* ------------------------------------------------------------------ */
+  /*
+  protected override onPagesChanged(documentId: string): void {
+    // Recalculate auto modes when pages change
+    this.recalcAuto(documentId, VerticalZoomFocus.Top);
+  }*/
+  // ─────────────────────────────────────────────────────────
+  // Capability
+  // ─────────────────────────────────────────────────────────
   buildCapability() {
     return {
-      onZoomChange: this.zoom$.on,
-      onStateChange: this.state$.on,
+      // Active document operations
+      requestZoom: (level, c) => this.requestZoom(level, c),
+      requestZoomBy: (d, c) => this.requestZoomBy(d, c),
       zoomIn: () => this.zoomIn(),
       zoomOut: () => this.zoomOut(),
       zoomToArea: (pageIndex, rect) => this.zoomToArea(pageIndex, rect),
-      requestZoom: (level, c) => this.handleRequest({ level, center: c }),
-      requestZoomBy: (d, c) => {
-        const cur = this.state.currentZoomLevel;
-        const target = this.toZoom(cur + d);
-        return this.handleRequest({ level: target, center: c });
-      },
-      enableMarqueeZoom: () => {
-        var _a;
-        (_a = this.interactionManager) == null ? void 0 : _a.activate("marqueeZoom");
-      },
-      disableMarqueeZoom: () => {
-        var _a;
-        (_a = this.interactionManager) == null ? void 0 : _a.activateDefaultMode();
-      },
-      toggleMarqueeZoom: () => {
-        var _a, _b, _c;
-        if (((_a = this.interactionManager) == null ? void 0 : _a.getActiveMode()) === "marqueeZoom") {
-          (_b = this.interactionManager) == null ? void 0 : _b.activateDefaultMode();
-        } else {
-          (_c = this.interactionManager) == null ? void 0 : _c.activate("marqueeZoom");
-        }
-      },
-      isMarqueeZoomActive: () => {
-        var _a;
-        return ((_a = this.interactionManager) == null ? void 0 : _a.getActiveMode()) === "marqueeZoom";
-      },
+      enableMarqueeZoom: () => this.enableMarqueeZoom(),
+      disableMarqueeZoom: () => this.disableMarqueeZoom(),
+      toggleMarqueeZoom: () => this.toggleMarqueeZoom(),
+      isMarqueeZoomActive: () => this.isMarqueeZoomActive(),
+      getState: () => this.getDocumentStateOrThrow(),
+      // Document-scoped operations
+      forDocument: (documentId) => this.createZoomScope(documentId),
+      // Global
       registerMarqueeOnPage: (opts) => this.registerMarqueeOnPage(opts),
-      getState: () => this.state,
-      getPresets: () => this.presets
+      getPresets: () => this.presets,
+      // Events
+      onZoomChange: this.zoom$.on,
+      onStateChange: this.state$.on
+    };
+  }
+  // ─────────────────────────────────────────────────────────
+  // Document Scoping
+  // ─────────────────────────────────────────────────────────
+  createZoomScope(documentId) {
+    return {
+      requestZoom: (level, c) => this.requestZoom(level, c, documentId),
+      requestZoomBy: (d, c) => this.requestZoomBy(d, c, documentId),
+      zoomIn: () => this.zoomIn(documentId),
+      zoomOut: () => this.zoomOut(documentId),
+      zoomToArea: (pageIndex, rect) => this.zoomToArea(pageIndex, rect, documentId),
+      enableMarqueeZoom: () => this.enableMarqueeZoom(documentId),
+      disableMarqueeZoom: () => this.disableMarqueeZoom(documentId),
+      toggleMarqueeZoom: () => this.toggleMarqueeZoom(documentId),
+      isMarqueeZoomActive: () => this.isMarqueeZoomActive(documentId),
+      getState: () => this.getDocumentStateOrThrow(documentId),
+      onZoomChange: (listener) => this.zoom$.on((event) => {
+        if (event.documentId === documentId) listener(event);
+      }),
+      onStateChange: (listener) => this.state$.on((event) => {
+        if (event.documentId === documentId) listener(event.state);
+      })
     };
   }
-  zoomOut() {
-    const cur = this.state.currentZoomLevel;
-    return this.handleRequest({ level: cur, delta: -this.stepFor(cur) });
+  // ─────────────────────────────────────────────────────────
+  // State Helpers
+  // ─────────────────────────────────────────────────────────
+  getDocumentState(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    return this.state.documents[id] ?? null;
   }
-  zoomIn() {
-    const cur = this.state.currentZoomLevel;
-    return this.handleRequest({ level: cur, delta: this.stepFor(cur) });
+  getDocumentStateOrThrow(documentId) {
+    const state = this.getDocumentState(documentId);
+    if (!state) {
+      throw new Error(`Zoom state not found for document: ${documentId ?? "active"}`);
+    }
+    return state;
   }
-  zoomToArea(pageIndex, rect) {
-    this.handleZoomToArea(pageIndex, rect);
+  // ─────────────────────────────────────────────────────────
+  // Core Operations
+  // ─────────────────────────────────────────────────────────
+  requestZoom(level, center, documentId) {
+    this.handleRequest({ level, center }, documentId);
   }
-  /* ------------------------------------------------------------------ */
-  /* plugin life‑cycle                                                   */
-  /* ------------------------------------------------------------------ */
-  async initialize() {
-    this.markReady();
+  requestZoomBy(delta, center, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const cur = docState.currentZoomLevel;
+    const target = this.toZoom(cur + delta);
+    this.handleRequest({ level: target, center }, id);
   }
-  async destroy() {
-    this.zoom$.clear();
+  zoomIn(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const cur = docState.currentZoomLevel;
+    this.handleRequest({ level: cur, delta: this.stepFor(cur) }, id);
   }
-  /**
-   * Sort ranges once, make sure they are sane
-   */
-  normalizeRanges(ranges) {
-    return [...ranges].filter((r) => r.step > 0 && r.max > r.min).sort((a, b) => a.min - b.min);
+  zoomOut(documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const cur = docState.currentZoomLevel;
+    this.handleRequest({ level: cur, delta: -this.stepFor(cur) }, id);
   }
-  /** pick the step that applies to a given numeric zoom */
-  stepFor(zoom) {
-    const r = this.zoomRanges.find((r2) => zoom >= r2.min && zoom < r2.max);
-    return r ? r.step : this.zoomStep;
+  zoomToArea(pageIndex, rect, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    this.handleZoomToArea(id, pageIndex, rect);
   }
-  /** clamp + round helper reused later */
-  toZoom(v) {
-    return parseFloat(clamp(v, this.minZoom, this.maxZoom).toFixed(2));
+  enableMarqueeZoom(documentId) {
+    var _a;
+    const id = documentId ?? this.getActiveDocumentId();
+    (_a = this.interactionManager) == null ? void 0 : _a.forDocument(id).activate("marqueeZoom");
   }
-  /* ------------------------------------------------------------------ */
-  /* main entry – handles **every** zoom request                          */
-  /* ------------------------------------------------------------------ */
-  handleRequest({
-    level,
-    delta = 0,
-    center,
-    focus = VerticalZoomFocus.Center,
-    align = "keep"
-  }) {
-    const metrics = this.viewport.getMetrics();
-    const oldZoom = this.state.currentZoomLevel;
-    if (metrics.clientWidth === 0 || metrics.clientHeight === 0) {
-      return;
+  disableMarqueeZoom(documentId) {
+    var _a;
+    const id = documentId ?? this.getActiveDocumentId();
+    (_a = this.interactionManager) == null ? void 0 : _a.forDocument(id).activateDefaultMode();
+  }
+  toggleMarqueeZoom(documentId) {
+    var _a;
+    const id = documentId ?? this.getActiveDocumentId();
+    const scope = (_a = this.interactionManager) == null ? void 0 : _a.forDocument(id);
+    if ((scope == null ? void 0 : scope.getActiveMode()) === "marqueeZoom") {
+      scope.activateDefaultMode();
+    } else {
+      scope == null ? void 0 : scope.activate("marqueeZoom");
     }
-    const base = typeof level === "number" ? level : this.computeZoomForMode(level, metrics);
-    if (base === false) {
+  }
+  isMarqueeZoomActive(documentId) {
+    var _a;
+    const id = documentId ?? this.getActiveDocumentId();
+    return ((_a = this.interactionManager) == null ? void 0 : _a.forDocument(id).getActiveMode()) === "marqueeZoom";
+  }
+  // ─────────────────────────────────────────────────────────
+  // Main Zoom Logic
+  // ─────────────────────────────────────────────────────────
+  handleRequest({ level, delta = 0, center, focus = VerticalZoomFocus.Center, align = "keep" }, documentId) {
+    const id = documentId ?? this.getActiveDocumentId();
+    const docState = this.getDocumentStateOrThrow(id);
+    const coreDoc = this.coreState.core.documents[id];
+    if (!coreDoc) return;
+    const viewport = this.viewport.forDocument(id);
+    const metrics = viewport.getMetrics();
+    const oldZoom = docState.currentZoomLevel;
+    if (metrics.clientWidth === 0 || metrics.clientHeight === 0) {
       return;
     }
+    const base = typeof level === "number" ? level : this.computeZoomForMode(id, level, metrics);
+    if (base === false) return;
     const exactZoom = clamp(base + delta, this.minZoom, this.maxZoom);
     const newZoom = Math.floor(exactZoom * 1e3) / 1e3;
     const focusPoint = center ?? {
@@ -335,6 +474,7 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
       vy: focus === VerticalZoomFocus.Top ? 0 : metrics.clientHeight / 2
     };
     const { desiredScrollLeft, desiredScrollTop } = this.computeScrollForZoomChange(
+      id,
       metrics,
       oldZoom,
       newZoom,
@@ -342,20 +482,23 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
       align
     );
     if (!isNaN(desiredScrollLeft) && !isNaN(desiredScrollTop)) {
-      this.viewportPlugin.setViewportScrollMetrics({
+      this.viewportPlugin.setViewportScrollMetrics(id, {
         scrollLeft: desiredScrollLeft,
         scrollTop: desiredScrollTop
       });
     }
-    this.dispatch(setZoomLevel(typeof level === "number" ? newZoom : level, newZoom));
-    this.dispatchCoreAction(setScale(newZoom));
-    this.markReady();
-    this.viewport.scrollTo({
+    this.dispatch(setZoomLevel(id, typeof level === "number" ? newZoom : level, newZoom));
+    this.dispatchCoreAction(setScale(newZoom, id));
+    if (this.viewport.isGated(id)) {
+      this.viewport.releaseGate("zoom", id);
+    }
+    viewport.scrollTo({
       x: desiredScrollLeft,
       y: desiredScrollTop,
       behavior: "instant"
     });
     const evt = {
+      documentId: id,
       oldZoom,
       newZoom,
       level,
@@ -366,23 +509,18 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
     };
     this.zoom$.emit(evt);
   }
-  /* ------------------------------------------------------------------ */
-  /* helpers                                                             */
-  /* ------------------------------------------------------------------ */
-  /** numeric zoom for Automatic / FitPage / FitWidth */
-  computeZoomForMode(mode, vp) {
-    const spreads = getPagesWithRotatedSize(this.coreState.core);
-    if (!spreads.length) return false;
-    const pgGap = this.scroll.getPageGap();
+  computeZoomForMode(documentId, mode, vp) {
+    const coreDoc = this.coreState.core.documents[documentId];
+    if (!coreDoc) return false;
+    const scrollScope = this.scroll.forDocument(documentId);
+    const pgGap = scrollScope ? this.scroll.getPageGap() : 0;
     const vpGap = this.viewport.getViewportGap();
-    if (vp.clientWidth === 0 || vp.clientHeight === 0) {
-      return false;
-    }
+    const spreads = scrollScope.getSpreadPagesWithRotatedSize();
+    if (!spreads.length) return false;
+    if (vp.clientWidth === 0 || vp.clientHeight === 0) return false;
     const availableWidth = vp.clientWidth - 2 * vpGap;
     const availableHeight = vp.clientHeight - 2 * vpGap;
-    if (availableWidth <= 0 || availableHeight <= 0) {
-      return false;
-    }
+    if (availableWidth <= 0 || availableHeight <= 0) return false;
     let maxContentW = 0, maxContentH = 0;
     spreads.forEach((spread) => {
       const contentW = spread.reduce((s, p, i) => s + p.rotatedSize.width + (i ? pgGap : 0), 0);
@@ -397,14 +535,13 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
         return Math.min(availableWidth / maxContentW, availableHeight / maxContentH);
       case ZoomMode.Automatic:
         return Math.min(availableWidth / maxContentW, 1);
-      /* istanbul ignore next */
       default:
         return 1;
     }
   }
-  /** where to scroll so that *focus* stays stable after scaling          */
-  computeScrollForZoomChange(vp, oldZoom, newZoom, focus, align = "keep") {
-    const layout = this.scroll.getLayout();
+  computeScrollForZoomChange(documentId, vp, oldZoom, newZoom, focus, align = "keep") {
+    const scrollScope = this.scroll.forDocument(documentId);
+    const layout = scrollScope.getLayout();
     const vpGap = this.viewport.getViewportGap();
     const contentW = layout.totalContentSize.width;
     const contentH = layout.totalContentSize.height;
@@ -426,24 +563,26 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
       desiredScrollTop: Math.max(0, desiredScrollTop)
     };
   }
-  handleZoomToArea(pageIndex, rect) {
-    const rotation = this.coreState.core.rotation;
-    const vp = this.viewport.getMetrics();
+  handleZoomToArea(documentId, pageIndex, rect) {
+    const coreDoc = this.coreState.core.documents[documentId];
+    if (!coreDoc) return;
+    const rotation = coreDoc.rotation;
+    const viewport = this.viewport.forDocument(documentId);
+    const vp = viewport.getMetrics();
     const vpGap = this.viewport.getViewportGap();
-    const oldZ = this.state.currentZoomLevel;
+    const docState = this.getDocumentStateOrThrow(documentId);
+    const oldZ = docState.currentZoomLevel;
     const availableW = vp.clientWidth - 2 * vpGap;
     const availableH = vp.clientHeight - 2 * vpGap;
-    const layout = this.scroll.getLayout();
+    const scrollScope = this.scroll.forDocument(documentId);
+    const layout = scrollScope.getLayout();
     const vItem = layout.virtualItems.find(
       (it) => it.pageLayouts.some((p) => p.pageIndex === pageIndex)
     );
     if (!vItem) return;
     const pageRel = vItem.pageLayouts.find((p) => p.pageIndex === pageIndex);
     const rotatedRect = rotateRect(
-      {
-        width: pageRel.width,
-        height: pageRel.height
-      },
+      { width: pageRel.width, height: pageRel.height },
       rect,
       rotation
     );
@@ -459,21 +598,38 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
     const offYold = off(availableH, layout.totalContentSize.height, oldZ);
     const centerVX = vpGap + offXold + cxContent * oldZ - vp.scrollLeft;
     const centerVY = vpGap + offYold + cyContent * oldZ - vp.scrollTop;
-    this.handleRequest({
-      level: targetZoom,
-      center: { vx: centerVX, vy: centerVY },
-      align: "center"
-    });
+    this.handleRequest(
+      {
+        level: targetZoom,
+        center: { vx: centerVX, vy: centerVY },
+        align: "center"
+      },
+      documentId
+    );
   }
-  /** recalculates Automatic / Fit* when viewport or pages change */
-  recalcAuto(focus) {
-    const s = this.state;
-    if (s.zoomLevel === ZoomMode.Automatic || s.zoomLevel === ZoomMode.FitPage || s.zoomLevel === ZoomMode.FitWidth)
-      this.handleRequest({ level: s.zoomLevel, focus });
+  recalcAuto(documentId, focus) {
+    const docState = this.getDocumentState(documentId);
+    if (!docState) return;
+    if (docState.zoomLevel === ZoomMode.Automatic || docState.zoomLevel === ZoomMode.FitPage || docState.zoomLevel === ZoomMode.FitWidth) {
+      this.handleRequest({ level: docState.zoomLevel, focus }, documentId);
+    }
   }
-  onStoreUpdated(_prevState, newState) {
-    this.state$.emit(newState);
+  // ─────────────────────────────────────────────────────────
+  // Helpers
+  // ─────────────────────────────────────────────────────────
+  normalizeRanges(ranges) {
+    return [...ranges].filter((r) => r.step > 0 && r.max > r.min).sort((a, b) => a.min - b.min);
   }
+  stepFor(zoom) {
+    const r = this.zoomRanges.find((r2) => zoom >= r2.min && zoom < r2.max);
+    return r ? r.step : this.zoomStep;
+  }
+  toZoom(v) {
+    return parseFloat(clamp(v, this.minZoom, this.maxZoom).toFixed(2));
+  }
+  // ─────────────────────────────────────────────────────────
+  // Marquee Zoom
+  // ─────────────────────────────────────────────────────────
   registerMarqueeOnPage(opts) {
     if (!this.interactionManager) {
       this.logger.warn(
@@ -484,13 +640,13 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
       return () => {
       };
     }
-    const document = this.coreState.core.document;
-    if (!document) {
+    const coreDoc = this.coreState.core.documents[opts.documentId];
+    if (!coreDoc || !coreDoc.document) {
       this.logger.warn("ZoomPlugin", "DocumentNotFound", "Document not found");
       return () => {
       };
     }
-    const page = document.pages[opts.pageIndex];
+    const page = coreDoc.document.pages[opts.pageIndex];
     if (!page) {
       this.logger.warn("ZoomPlugin", "PageNotFound", `Page ${opts.pageIndex} not found`);
       return () => {
@@ -502,22 +658,49 @@ const _ZoomPlugin = class _ZoomPlugin extends BasePlugin {
       onPreview: opts.callback.onPreview,
       onCommit: (rect) => {
         var _a, _b;
-        this.zoomToArea(opts.pageIndex, rect);
+        this.zoomToArea(opts.pageIndex, rect, opts.documentId);
         (_b = (_a = opts.callback).onCommit) == null ? void 0 : _b.call(_a, rect);
       },
       onSmallDrag: () => {
         var _a, _b;
-        this.zoomIn();
+        this.zoomIn(opts.documentId);
         (_b = (_a = opts.callback).onSmallDrag) == null ? void 0 : _b.call(_a);
       }
     });
     const off = this.interactionManager.registerHandlers({
+      documentId: opts.documentId,
       modeId: "marqueeZoom",
       handlers,
       pageIndex: opts.pageIndex
     });
     return off;
   }
+  // ─────────────────────────────────────────────────────────
+  // 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 && (prevDoc.currentZoomLevel !== newDoc.currentZoomLevel || prevDoc.zoomLevel !== newDoc.zoomLevel || prevDoc.isMarqueeZoomActive !== newDoc.isMarqueeZoomActive)) {
+        this.state$.emit({
+          documentId,
+          state: newDoc
+        });
+      }
+    }
+  }
+  // ─────────────────────────────────────────────────────────
+  // Lifecycle
+  // ─────────────────────────────────────────────────────────
+  async initialize() {
+    this.logger.info("ZoomPlugin", "Initialize", "Zoom plugin initialized");
+  }
+  async destroy() {
+    this.zoom$.clear();
+    this.state$.clear();
+    super.destroy();
+  }
 };
 _ZoomPlugin.id = "zoom";
 let ZoomPlugin = _ZoomPlugin;
@@ -533,6 +716,7 @@ export {
   ZoomMode,
   ZoomPlugin,
   ZoomPluginPackage,
+  initialDocumentState,
   initialState,
   manifest
 };