@embedpdf/plugin-zoom 1.4.1 → 2.0.0-next.0

package/dist/preact/index.js

@@ -1,25 +1,33 @@
-import { useCapability, usePlugin } from "@embedpdf/core/preact";
-import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/preact";
+import { ZoomPlugin, initialDocumentState } from "@embedpdf/plugin-zoom";
 export * from "@embedpdf/plugin-zoom";
 import "preact";
-import { useState, useEffect, useRef } from "preact/hooks";
+import { useState, useEffect, useRef, useMemo } from "preact/hooks";
 import { jsx } from "preact/jsx-runtime";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
 const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
-const useZoom = () => {
+const useZoom = (documentId) => {
   const { provides } = useZoomCapability();
-  const [state, setState] = useState(initialState);
+  const [state, setState] = useState(initialDocumentState);
   useEffect(() => {
-    return provides == null ? void 0 : provides.onStateChange((action) => {
-      setState(action);
+    if (!provides) return;
+    const scope = provides.forDocument(documentId);
+    setState(scope.getState());
+    return scope.onStateChange((newState) => {
+      setState(newState);
     });
-  }, [provides]);
+  }, [provides, documentId]);
   return {
     state,
-    provides
+    provides: (provides == null ? void 0 : provides.forDocument(documentId)) ?? null
   };
 };
-function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
+function setupPinchZoom({
+  element,
+  documentId,
+  viewportProvides,
+  zoomProvides
+}) {
   if (typeof window === "undefined") {
     return () => {
     };
@@ -27,7 +35,9 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   let hammer;
   let initialZoom = 0;
   let lastCenter = { x: 0, y: 0 };
-  const getState = () => zoomProvides.getState();
+  const viewportScope = viewportProvides.forDocument(documentId);
+  const zoomScope = zoomProvides.forDocument(documentId);
+  const getState = () => zoomScope.getState();
   const updateTransform = (scale) => {
     element.style.transform = `scale(${scale})`;
   };
@@ -38,7 +48,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   const pinchStart = (e) => {
     var _a;
     initialZoom = getState().currentZoomLevel;
-    const contRect = viewportProvides.getBoundingRect();
+    const contRect = viewportScope.getBoundingRect();
     lastCenter = {
       x: e.center.x - contRect.origin.x,
       y: e.center.y - contRect.origin.y
@@ -60,7 +70,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   };
   const pinchEnd = (e) => {
     const delta = (e.scale - 1) * initialZoom;
-    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
+    zoomScope.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
     resetTransform();
     initialZoom = 0;
   };
@@ -77,7 +87,6 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
       })();
       hammer = new Hammer(element, {
         touchAction: "pan-x pan-y",
-        // allow scroll in every direction
         inputClass
       });
       hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
@@ -94,7 +103,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
     resetTransform();
   };
 }
-function usePinch() {
+function usePinch(documentId) {
   const { provides: viewportProvides } = useCapability("viewport");
   const { provides: zoomProvides } = useZoomCapability();
   const elementRef = useRef(null);
@@ -103,12 +112,17 @@ function usePinch() {
     if (!element || !viewportProvides || !zoomProvides) {
       return;
     }
-    return setupPinchZoom({ element, viewportProvides, zoomProvides });
-  }, [viewportProvides, zoomProvides]);
+    return setupPinchZoom({
+      element,
+      documentId,
+      viewportProvides,
+      zoomProvides
+    });
+  }, [viewportProvides, zoomProvides, documentId]);
   return { elementRef };
 }
-function PinchWrapper({ children, style, ...props }) {
-  const { elementRef } = usePinch();
+function PinchWrapper({ children, documentId, style, ...props }) {
+  const { elementRef } = usePinch(documentId);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -127,24 +141,31 @@ function PinchWrapper({ children, style, ...props }) {
   );
 }
 const MarqueeZoom = ({
+  documentId,
   pageIndex,
-  scale,
+  scale: scaleOverride,
   className,
   stroke = "rgba(33,150,243,0.8)",
   fill = "rgba(33,150,243,0.15)"
 }) => {
   const { provides: zoomPlugin } = useZoomCapability();
+  const documentState = useDocumentState(documentId);
   const [rect, setRect] = useState(null);
+  const actualScale = useMemo(() => {
+    if (scaleOverride !== void 0) return scaleOverride;
+    return (documentState == null ? void 0 : documentState.scale) ?? 1;
+  }, [scaleOverride, documentState == null ? void 0 : documentState.scale]);
   useEffect(() => {
     if (!zoomPlugin) return;
     return zoomPlugin.registerMarqueeOnPage({
+      documentId,
       pageIndex,
-      scale,
+      scale: actualScale,
       callback: {
         onPreview: setRect
       }
     });
-  }, [zoomPlugin, pageIndex, scale]);
+  }, [zoomPlugin, documentId, pageIndex, actualScale]);
   if (!rect) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -152,10 +173,10 @@ const MarqueeZoom = ({
       style: {
         position: "absolute",
         pointerEvents: "none",
-        left: rect.origin.x * scale,
-        top: rect.origin.y * scale,
-        width: rect.size.width * scale,
-        height: rect.size.height * scale,
+        left: rect.origin.x * actualScale,
+        top: rect.origin.y * actualScale,
+        width: rect.size.width * actualScale,
+        height: rect.size.height * actualScale,
         border: `1px solid ${stroke}`,
         background: fill,
         boxSizing: "border-box"

package/dist/preact/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({ element, viewportProvides, zoomProvides });\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialDocumentState, ZoomDocumentState, ZoomPlugin } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\n/**\n * Hook for zoom state for a specific document\n * @param documentId Document ID\n */\nexport const useZoom = (documentId: string) => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomDocumentState>(initialDocumentState);\n\n  useEffect(() => {\n    if (!provides) return;\n\n    const scope = provides.forDocument(documentId);\n\n    // Get initial state\n    setState(scope.getState());\n\n    // Subscribe to state changes\n    return scope.onStateChange((newState) => {\n      setState(newState);\n    });\n  }, [provides, documentId]);\n\n  return {\n    state,\n    provides: provides?.forDocument(documentId) ?? null,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  documentId: string;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({\n  element,\n  documentId,\n  viewportProvides,\n  zoomProvides,\n}: PinchZoomDeps) {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0;\n  let lastCenter = { x: 0, y: 0 };\n\n  const viewportScope = viewportProvides.forDocument(documentId);\n  const zoomScope = zoomProvides.forDocument(documentId);\n\n  const getState = () => zoomScope.getState();\n\n  const updateTransform = (scale: number) => {\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportScope.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale);\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    const delta = (e.scale - 1) * initialZoom;\n    zoomScope.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y',\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer();\n\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch(documentId: string) {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({\n      element,\n      documentId,\n      viewportProvides,\n      zoomProvides,\n    });\n  }, [viewportProvides, zoomProvides, documentId]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  documentId: string;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, documentId, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch(documentId);\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useMemo, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\nimport { useZoomCapability } from '../hooks/use-zoom';\nimport { useDocumentState } from '@embedpdf/core/@framework';\n\ninterface MarqueeZoomProps {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n  className?: string;\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  documentId,\n  pageIndex,\n  scale: scaleOverride,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const documentState = useDocumentState(documentId);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  const actualScale = useMemo(() => {\n    if (scaleOverride !== undefined) return scaleOverride;\n    return documentState?.scale ?? 1;\n  }, [scaleOverride, documentState?.scale]);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      documentId,\n      pageIndex,\n      scale: actualScale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, documentId, pageIndex, actualScale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * actualScale,\n        top: rect.origin.y * actualScale,\n        width: rect.size.width * actualScale,\n        height: rect.size.height * actualScale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/react/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-zoom"),o=require("react"),n=require("react/jsx-runtime"),r=()=>e.useCapability(t.ZoomPlugin.id);function i({element:e,viewportProvides:t,zoomProvides:o}){if("undefined"==typeof window)return()=>{};let n,r=0,i={x:0,y:0};const s=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},a=n=>{var s;r=o.getState().currentZoomLevel;const a=t.getBoundingRect();i={x:n.center.x-a.origin.x,y:n.center.y-a.origin.y};const l=e.getBoundingClientRect();e.style.transformOrigin=`${n.center.x-l.left}px ${n.center.y-l.top}px`,(null==(s=n.srcEvent)?void 0:s.cancelable)&&(n.srcEvent.preventDefault(),n.srcEvent.stopPropagation())},l=t=>{var o,n;n=t.scale,e.style.transform=`scale(${n})`,(null==(o=t.srcEvent)?void 0:o.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},c=e=>{const t=(e.scale-1)*r;o.requestZoomBy(t,{vx:i.x,vy:i.y}),s(),r=0};return(async()=>{try{const t=(await Promise.resolve().then((()=>require("../hammer-Bs-QCG8V.cjs"))).then((e=>e.hammer))).default,o=(()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0;return e&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent)?t.TouchInput:e?t.TouchMouseInput:t.MouseInput})();n=new t(e,{touchAction:"pan-x pan-y",inputClass:o}),n.get("pinch").set({enable:!0,pointers:2,threshold:.1}),n.on("pinchstart",a),n.on("pinchmove",l),n.on("pinchend",c)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==n||n.destroy(),s()}}function s(){const{provides:t}=e.useCapability("viewport"),{provides:n}=r(),s=o.useRef(null);return o.useEffect((()=>{const e=s.current;if(e&&t&&n)return i({element:e,viewportProvides:t,zoomProvides:n})}),[t,n]),{elementRef:s}}exports.MarqueeZoom=({pageIndex:e,scale:t,className:i,stroke:s="rgba(33,150,243,0.8)",fill:a="rgba(33,150,243,0.15)"})=>{const{provides:l}=r(),[c,u]=o.useState(null);return o.useEffect((()=>{if(l)return l.registerMarqueeOnPage({pageIndex:e,scale:t,callback:{onPreview:u}})}),[l,e,t]),c?n.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:c.origin.x*t,top:c.origin.y*t,width:c.size.width*t,height:c.size.height*t,border:`1px solid ${s}`,background:a,boxSizing:"border-box"},className:i}):null},exports.PinchWrapper=function({children:e,style:t,...o}){const{elementRef:r}=s();return n.jsx("div",{ref:r,...o,style:{...t,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=s,exports.useZoom=()=>{const{provides:e}=r(),[n,i]=o.useState(t.initialState);return o.useEffect((()=>null==e?void 0:e.onStateChange((e=>{i(e)}))),[e]),{state:n,provides:e}},exports.useZoomCapability=r,exports.useZoomPlugin=()=>e.usePlugin(t.ZoomPlugin.id),Object.keys(t).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/react"),t=require("@embedpdf/plugin-zoom"),o=require("react"),n=require("react/jsx-runtime"),r=()=>e.useCapability(t.ZoomPlugin.id);function i({element:e,documentId:t,viewportProvides:o,zoomProvides:n}){if("undefined"==typeof window)return()=>{};let r,i=0,s={x:0,y:0};const a=o.forDocument(t),c=n.forDocument(t),u=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},l=t=>{var o;i=c.getState().currentZoomLevel;const n=a.getBoundingRect();s={x:t.center.x-n.origin.x,y:t.center.y-n.origin.y};const r=e.getBoundingClientRect();e.style.transformOrigin=`${t.center.x-r.left}px ${t.center.y-r.top}px`,(null==(o=t.srcEvent)?void 0:o.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},d=t=>{var o,n;n=t.scale,e.style.transform=`scale(${n})`,(null==(o=t.srcEvent)?void 0:o.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},p=e=>{const t=(e.scale-1)*i;c.requestZoomBy(t,{vx:s.x,vy:s.y}),u(),i=0};return(async()=>{try{const t=(await Promise.resolve().then(()=>require("../hammer-DhVzwxwy.cjs")).then(e=>e.hammer)).default,o=(()=>{const e="ontouchstart"in window||navigator.maxTouchPoints>0;return e&&/mobile|tablet|ip(ad|hone|od)|android/i.test(navigator.userAgent)?t.TouchInput:e?t.TouchMouseInput:t.MouseInput})();r=new t(e,{touchAction:"pan-x pan-y",inputClass:o}),r.get("pinch").set({enable:!0,pointers:2,threshold:.1}),r.on("pinchstart",l),r.on("pinchmove",d),r.on("pinchend",p)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==r||r.destroy(),u()}}function s(t){const{provides:n}=e.useCapability("viewport"),{provides:s}=r(),a=o.useRef(null);return o.useEffect(()=>{const e=a.current;if(e&&n&&s)return i({element:e,documentId:t,viewportProvides:n,zoomProvides:s})},[n,s,t]),{elementRef:a}}exports.MarqueeZoom=({documentId:t,pageIndex:i,scale:s,className:a,stroke:c="rgba(33,150,243,0.8)",fill:u="rgba(33,150,243,0.15)"})=>{const{provides:l}=r(),d=e.useDocumentState(t),[p,m]=o.useState(null),v=o.useMemo(()=>void 0!==s?s:(null==d?void 0:d.scale)??1,[s,null==d?void 0:d.scale]);return o.useEffect(()=>{if(l)return l.registerMarqueeOnPage({documentId:t,pageIndex:i,scale:v,callback:{onPreview:m}})},[l,t,i,v]),p?n.jsx("div",{style:{position:"absolute",pointerEvents:"none",left:p.origin.x*v,top:p.origin.y*v,width:p.size.width*v,height:p.size.height*v,border:`1px solid ${c}`,background:u,boxSizing:"border-box"},className:a}):null},exports.PinchWrapper=function({children:e,documentId:t,style:o,...r}){const{elementRef:i}=s(t);return n.jsx("div",{ref:i,...r,style:{...o,display:"block",width:"fit-content",overflow:"visible",boxSizing:"border-box",margin:"0px auto"},children:e})},exports.usePinch=s,exports.useZoom=e=>{const{provides:n}=r(),[i,s]=o.useState(t.initialDocumentState);return o.useEffect(()=>{if(!n)return;const t=n.forDocument(e);return s(t.getState()),t.onStateChange(e=>{s(e)})},[n,e]),{state:i,provides:(null==n?void 0:n.forDocument(e))??null}},exports.useZoomCapability=r,exports.useZoomPlugin=()=>e.usePlugin(t.ZoomPlugin.id),Object.keys(t).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
 //# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/marquee-zoom.tsx","../../src/shared/components/pinch-wrapper.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({ element, viewportProvides, zoomProvides });\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["useZoomCapability","useCapability","ZoomPlugin","id","setupPinchZoom","element","viewportProvides","zoomProvides","window","hammer","initialZoom","lastCenter","x","y","resetTransform","style","transform","transformOrigin","pinchStart","e","getState","currentZoomLevel","contRect","getBoundingRect","center","origin","innerRect","getBoundingClientRect","left","top","_a","srcEvent","cancelable","preventDefault","stopPropagation","pinchMove","scale","pinchEnd","delta","requestZoomBy","vx","vy","async","Hammer","Promise","resolve","then","require","n","default","inputClass","SUPPORT_TOUCH","navigator","maxTouchPoints","test","userAgent","TouchInput","TouchMouseInput","MouseInput","touchAction","get","set","enable","pointers","threshold","on","error","console","warn","setupHammer","destroy","usePinch","provides","elementRef","useRef","useEffect","current","pageIndex","className","stroke","fill","zoomPlugin","rect","setRect","useState","registerMarqueeOnPage","callback","onPreview","jsxRuntime","jsx","position","pointerEvents","width","size","height","border","background","boxSizing","children","props","ref","display","overflow","margin","state","setState","initialState","onStateChange","action","usePlugin"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/marquee-zoom.tsx","../../src/shared/components/pinch-wrapper.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialDocumentState, ZoomDocumentState, ZoomPlugin } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\n/**\n * Hook for zoom state for a specific document\n * @param documentId Document ID\n */\nexport const useZoom = (documentId: string) => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomDocumentState>(initialDocumentState);\n\n  useEffect(() => {\n    if (!provides) return;\n\n    const scope = provides.forDocument(documentId);\n\n    // Get initial state\n    setState(scope.getState());\n\n    // Subscribe to state changes\n    return scope.onStateChange((newState) => {\n      setState(newState);\n    });\n  }, [provides, documentId]);\n\n  return {\n    state,\n    provides: provides?.forDocument(documentId) ?? null,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  documentId: string;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({\n  element,\n  documentId,\n  viewportProvides,\n  zoomProvides,\n}: PinchZoomDeps) {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0;\n  let lastCenter = { x: 0, y: 0 };\n\n  const viewportScope = viewportProvides.forDocument(documentId);\n  const zoomScope = zoomProvides.forDocument(documentId);\n\n  const getState = () => zoomScope.getState();\n\n  const updateTransform = (scale: number) => {\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportScope.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale);\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    const delta = (e.scale - 1) * initialZoom;\n    zoomScope.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y',\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer();\n\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch(documentId: string) {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({\n      element,\n      documentId,\n      viewportProvides,\n      zoomProvides,\n    });\n  }, [viewportProvides, zoomProvides, documentId]);\n\n  return { elementRef };\n}\n","import { useEffect, useMemo, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\nimport { useZoomCapability } from '../hooks/use-zoom';\nimport { useDocumentState } from '@embedpdf/core/@framework';\n\ninterface MarqueeZoomProps {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n  className?: string;\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  documentId,\n  pageIndex,\n  scale: scaleOverride,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const documentState = useDocumentState(documentId);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  const actualScale = useMemo(() => {\n    if (scaleOverride !== undefined) return scaleOverride;\n    return documentState?.scale ?? 1;\n  }, [scaleOverride, documentState?.scale]);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      documentId,\n      pageIndex,\n      scale: actualScale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, documentId, pageIndex, actualScale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * actualScale,\n        top: rect.origin.y * actualScale,\n        width: rect.size.width * actualScale,\n        height: rect.size.height * actualScale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  documentId: string;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, documentId, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch(documentId);\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["useZoomCapability","useCapability","ZoomPlugin","id","setupPinchZoom","element","documentId","viewportProvides","zoomProvides","window","hammer","initialZoom","lastCenter","x","y","viewportScope","forDocument","zoomScope","resetTransform","style","transform","transformOrigin","pinchStart","e","getState","currentZoomLevel","contRect","getBoundingRect","center","origin","innerRect","getBoundingClientRect","left","top","_a","srcEvent","cancelable","preventDefault","stopPropagation","pinchMove","scale","pinchEnd","delta","requestZoomBy","vx","vy","async","Hammer","Promise","resolve","then","require","n","default","inputClass","SUPPORT_TOUCH","navigator","maxTouchPoints","test","userAgent","TouchInput","TouchMouseInput","MouseInput","touchAction","get","set","enable","pointers","threshold","on","error","console","warn","setupHammer","destroy","usePinch","provides","elementRef","useRef","useEffect","current","pageIndex","scaleOverride","className","stroke","fill","zoomPlugin","documentState","useDocumentState","rect","setRect","useState","actualScale","useMemo","registerMarqueeOnPage","callback","onPreview","jsx","position","pointerEvents","width","size","height","border","background","boxSizing","children","props","ref","display","overflow","margin","state","setState","initialDocumentState","scope","onStateChange","newState","usePlugin"],"mappings":"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"}

package/dist/react/index.js

@@ -1,24 +1,32 @@
-import { useCapability, usePlugin } from "@embedpdf/core/react";
-import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/react";
+import { ZoomPlugin, initialDocumentState } from "@embedpdf/plugin-zoom";
 export * from "@embedpdf/plugin-zoom";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
 const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
-const useZoom = () => {
+const useZoom = (documentId) => {
   const { provides } = useZoomCapability();
-  const [state, setState] = useState(initialState);
+  const [state, setState] = useState(initialDocumentState);
   useEffect(() => {
-    return provides == null ? void 0 : provides.onStateChange((action) => {
-      setState(action);
+    if (!provides) return;
+    const scope = provides.forDocument(documentId);
+    setState(scope.getState());
+    return scope.onStateChange((newState) => {
+      setState(newState);
     });
-  }, [provides]);
+  }, [provides, documentId]);
   return {
     state,
-    provides
+    provides: (provides == null ? void 0 : provides.forDocument(documentId)) ?? null
   };
 };
-function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
+function setupPinchZoom({
+  element,
+  documentId,
+  viewportProvides,
+  zoomProvides
+}) {
   if (typeof window === "undefined") {
     return () => {
     };
@@ -26,7 +34,9 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   let hammer;
   let initialZoom = 0;
   let lastCenter = { x: 0, y: 0 };
-  const getState = () => zoomProvides.getState();
+  const viewportScope = viewportProvides.forDocument(documentId);
+  const zoomScope = zoomProvides.forDocument(documentId);
+  const getState = () => zoomScope.getState();
   const updateTransform = (scale) => {
     element.style.transform = `scale(${scale})`;
   };
@@ -37,7 +47,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   const pinchStart = (e) => {
     var _a;
     initialZoom = getState().currentZoomLevel;
-    const contRect = viewportProvides.getBoundingRect();
+    const contRect = viewportScope.getBoundingRect();
     lastCenter = {
       x: e.center.x - contRect.origin.x,
       y: e.center.y - contRect.origin.y
@@ -59,7 +69,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
   };
   const pinchEnd = (e) => {
     const delta = (e.scale - 1) * initialZoom;
-    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
+    zoomScope.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });
     resetTransform();
     initialZoom = 0;
   };
@@ -76,7 +86,6 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
       })();
       hammer = new Hammer(element, {
         touchAction: "pan-x pan-y",
-        // allow scroll in every direction
         inputClass
       });
       hammer.get("pinch").set({ enable: true, pointers: 2, threshold: 0.1 });
@@ -93,7 +102,7 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
     resetTransform();
   };
 }
-function usePinch() {
+function usePinch(documentId) {
   const { provides: viewportProvides } = useCapability("viewport");
   const { provides: zoomProvides } = useZoomCapability();
   const elementRef = useRef(null);
@@ -102,12 +111,17 @@ function usePinch() {
     if (!element || !viewportProvides || !zoomProvides) {
       return;
     }
-    return setupPinchZoom({ element, viewportProvides, zoomProvides });
-  }, [viewportProvides, zoomProvides]);
+    return setupPinchZoom({
+      element,
+      documentId,
+      viewportProvides,
+      zoomProvides
+    });
+  }, [viewportProvides, zoomProvides, documentId]);
   return { elementRef };
 }
-function PinchWrapper({ children, style, ...props }) {
-  const { elementRef } = usePinch();
+function PinchWrapper({ children, documentId, style, ...props }) {
+  const { elementRef } = usePinch(documentId);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -126,24 +140,31 @@ function PinchWrapper({ children, style, ...props }) {
   );
 }
 const MarqueeZoom = ({
+  documentId,
   pageIndex,
-  scale,
+  scale: scaleOverride,
   className,
   stroke = "rgba(33,150,243,0.8)",
   fill = "rgba(33,150,243,0.15)"
 }) => {
   const { provides: zoomPlugin } = useZoomCapability();
+  const documentState = useDocumentState(documentId);
   const [rect, setRect] = useState(null);
+  const actualScale = useMemo(() => {
+    if (scaleOverride !== void 0) return scaleOverride;
+    return (documentState == null ? void 0 : documentState.scale) ?? 1;
+  }, [scaleOverride, documentState == null ? void 0 : documentState.scale]);
   useEffect(() => {
     if (!zoomPlugin) return;
     return zoomPlugin.registerMarqueeOnPage({
+      documentId,
       pageIndex,
-      scale,
+      scale: actualScale,
       callback: {
         onPreview: setRect
       }
     });
-  }, [zoomPlugin, pageIndex, scale]);
+  }, [zoomPlugin, documentId, pageIndex, actualScale]);
   if (!rect) return null;
   return /* @__PURE__ */ jsx(
     "div",
@@ -151,10 +172,10 @@ const MarqueeZoom = ({
       style: {
         position: "absolute",
         pointerEvents: "none",
-        left: rect.origin.x * scale,
-        top: rect.origin.y * scale,
-        width: rect.size.width * scale,
-        height: rect.size.height * scale,
+        left: rect.origin.x * actualScale,
+        top: rect.origin.y * actualScale,
+        width: rect.size.width * actualScale,
+        height: rect.size.height * actualScale,
         border: `1px solid ${stroke}`,
         background: fill,
         boxSizing: "border-box"

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomState>(initialState);\n\n  useEffect(() => {\n    return provides?.onStateChange((action) => {\n      setState(action);\n    });\n  }, [provides]);\n\n  return {\n    state,\n    provides,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability, ZoomState } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps) {\n  // Check if we're on the client side\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0; // numeric scale at pinchstart\n  let lastCenter = { x: 0, y: 0 };\n\n  const getState = (): ZoomState => zoomProvides.getState();\n\n  const updateTransform = (scale: number) => {\n    // 1 → no scale; we only scale *relatively* to the start\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportProvides.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    // put the transform-origin under the fingers so the preview feels right\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    // stop the browser's own pinch-zoom\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale); // *only* CSS, no real zoom yet\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    // translate the relative hammer scale into a delta for requestZoomBy\n    const delta = (e.scale - 1) * initialZoom;\n    zoomProvides.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  // Async Hammer setup (internal)\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      /* ------------------------------------------------------------------ */\n      /* Hammer setup                                                        */\n      /* ------------------------------------------------------------------ */\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y', // allow scroll in every direction\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer(); // Fire and forget\n\n  // Return cleanup immediately\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\n\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch() {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({ element, viewportProvides, zoomProvides });\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch();\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useZoomCapability } from '../hooks/use-zoom';\n\ninterface MarqueeZoomProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, pageIndex, scale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * scale,\n        top: rect.origin.y * scale,\n        width: rect.size.width * scale,\n        height: rect.size.height * scale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAIO,MAAM,oBAAoB,MAAM,cAA0B,WAAW,EAAE;AACvE,MAAM,gBAAgB,MAAM,UAAsB,WAAW,EAAE;AAE/D,MAAM,UAAU,MAAM;AACrB,QAAA,EAAE,SAAS,IAAI,kBAAkB;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoB,YAAY;AAE1D,YAAU,MAAM;AACP,WAAA,qCAAU,cAAc,CAAC,WAAW;AACzC,eAAS,MAAM;AAAA,IAAA;AAAA,EAChB,GACA,CAAC,QAAQ,CAAC;AAEN,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;ACZO,SAAS,eAAe,EAAE,SAAS,kBAAkB,gBAA+B;AAErF,MAAA,OAAO,WAAW,aAAa;AACjC,WAAO,MAAM;AAAA,IAAC;AAAA,EAAA;AAGZ,MAAA;AACJ,MAAI,cAAc;AAClB,MAAI,aAAa,EAAE,GAAG,GAAG,GAAG,EAAE;AAExB,QAAA,WAAW,MAAiB,aAAa,SAAS;AAElD,QAAA,kBAAkB,CAAC,UAAkB;AAEjC,YAAA,MAAM,YAAY,SAAS,KAAK;AAAA,EAC1C;AAEA,QAAM,iBAAiB,MAAM;AAC3B,YAAQ,MAAM,YAAY;AAC1B,YAAQ,MAAM,kBAAkB;AAAA,EAClC;AAEM,QAAA,aAAa,CAAC,MAAmB;;AACrC,kBAAc,WAAW;AAEnB,UAAA,WAAW,iBAAiB,gBAAgB;AAErC,iBAAA;AAAA,MACX,GAAG,EAAE,OAAO,IAAI,SAAS,OAAO;AAAA,MAChC,GAAG,EAAE,OAAO,IAAI,SAAS,OAAO;AAAA,IAClC;AAGM,UAAA,YAAY,QAAQ,sBAAsB;AAChD,YAAQ,MAAM,kBAAkB,GAAG,EAAE,OAAO,IAAI,UAAU,IAAI,MAAM,EAAE,OAAO,IAAI,UAAU,GAAG;AAG1F,SAAA,OAAE,aAAF,mBAAY,YAAY;AAC1B,QAAE,SAAS,eAAe;AAC1B,QAAE,SAAS,gBAAgB;AAAA,IAAA;AAAA,EAE/B;AAEM,QAAA,YAAY,CAAC,MAAmB;;AACpC,oBAAgB,EAAE,KAAK;AACnB,SAAA,OAAE,aAAF,mBAAY,YAAY;AAC1B,QAAE,SAAS,eAAe;AAC1B,QAAE,SAAS,gBAAgB;AAAA,IAAA;AAAA,EAE/B;AAEM,QAAA,WAAW,CAAC,MAAmB;AAE7B,UAAA,SAAS,EAAE,QAAQ,KAAK;AACjB,iBAAA,cAAc,OAAO,EAAE,IAAI,WAAW,GAAG,IAAI,WAAW,GAAG;AAEzD,mBAAA;AACD,kBAAA;AAAA,EAChB;AAGA,QAAM,cAAc,YAAY;AAC1B,QAAA;AACF,YAAM,UAAU,MAAM,OAAO,uBAAU,EAAG,KAAA,OAAA,EAAA,CAAA,GAAA;AAK1C,YAAM,cAAc,MAAM;AACxB,cAAM,eAAe;AACrB,cAAM,gBAAgB,kBAAkB,UAAU,UAAU,iBAAiB;AAC7E,cAAM,qBAAqB,iBAAiB,aAAa,KAAK,UAAU,SAAS;AAC7E,YAAA,2BAA2B,OAAO;AAClC,YAAA,CAAC,cAAe,QAAO,OAAO;AAClC,eAAO,OAAO;AAAA,MAAA,GACb;AAEM,eAAA,IAAI,OAAO,SAAS;AAAA,QAC3B,aAAa;AAAA;AAAA,QACb;AAAA,MAAA,CACD;AAEM,aAAA,IAAI,OAAO,EAAE,IAAI,EAAE,QAAQ,MAAM,UAAU,GAAG,WAAW,IAAA,CAAK;AAE9D,aAAA,GAAG,cAAc,UAAU;AAC3B,aAAA,GAAG,aAAa,SAAS;AACzB,aAAA,GAAG,YAAY,QAAQ;AAAA,aACvB,OAAO;AACN,cAAA,KAAK,4BAA4B,KAAK;AAAA,IAAA;AAAA,EAElD;AAEY,cAAA;AAGZ,SAAO,MAAM;AACX,qCAAQ;AACO,mBAAA;AAAA,EACjB;AACF;ACrGO,SAAS,WAAW;AACzB,QAAM,EAAE,UAAU,qBAAqB,cAA8B,UAAU;AAC/E,QAAM,EAAE,UAAU,aAAa,IAAI,kBAAkB;AAC/C,QAAA,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,cAAc;AAClD;AAAA,IAAA;AAGF,WAAO,eAAe,EAAE,SAAS,kBAAkB,cAAc;AAAA,EAAA,GAChE,CAAC,kBAAkB,YAAY,CAAC;AAEnC,SAAO,EAAE,WAAW;AACtB;ACbO,SAAS,aAAa,EAAE,UAAU,OAAO,GAAG,SAA4B;AACvE,QAAA,EAAE,WAAW,IAAI,SAAS;AAG9B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,OAAO;AAAA,QACL,GAAG;AAAA,QACH,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX,QAAQ;AAAA,MACV;AAAA,MAEC;AAAA,IAAA;AAAA,EACH;AAEJ;ACXO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,OAAO;AACT,MAAwB;AACtB,QAAM,EAAE,UAAU,WAAW,IAAI,kBAAkB;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAsB,IAAI;AAElD,YAAU,MAAM;AACd,QAAI,CAAC,WAAY;AACjB,WAAO,WAAW,sBAAsB;AAAA,MACtC;AAAA,MACA;AAAA,MACA,UAAU;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACb,CACD;AAAA,EACA,GAAA,CAAC,YAAY,WAAW,KAAK,CAAC;AAE7B,MAAA,CAAC,KAAa,QAAA;AAGhB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,eAAe;AAAA,QACf,MAAM,KAAK,OAAO,IAAI;AAAA,QACtB,KAAK,KAAK,OAAO,IAAI;AAAA,QACrB,OAAO,KAAK,KAAK,QAAQ;AAAA,QACzB,QAAQ,KAAK,KAAK,SAAS;AAAA,QAC3B,QAAQ,aAAa,MAAM;AAAA,QAC3B,YAAY;AAAA,QACZ,WAAW;AAAA,MACb;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/shared/hooks/use-pinch-zoom.ts","../../src/shared/components/pinch-wrapper.tsx","../../src/shared/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialDocumentState, ZoomDocumentState, ZoomPlugin } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from '@framework';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\n/**\n * Hook for zoom state for a specific document\n * @param documentId Document ID\n */\nexport const useZoom = (documentId: string) => {\n  const { provides } = useZoomCapability();\n  const [state, setState] = useState<ZoomDocumentState>(initialDocumentState);\n\n  useEffect(() => {\n    if (!provides) return;\n\n    const scope = provides.forDocument(documentId);\n\n    // Get initial state\n    setState(scope.getState());\n\n    // Subscribe to state changes\n    return scope.onStateChange((newState) => {\n      setState(newState);\n    });\n  }, [provides, documentId]);\n\n  return {\n    state,\n    provides: provides?.forDocument(documentId) ?? null,\n  };\n};\n","import type { ViewportCapability } from '@embedpdf/plugin-viewport';\nimport type { ZoomCapability } from '@embedpdf/plugin-zoom';\n\nexport interface PinchZoomDeps {\n  element: HTMLDivElement;\n  documentId: string;\n  viewportProvides: ViewportCapability;\n  zoomProvides: ZoomCapability;\n}\n\nexport function setupPinchZoom({\n  element,\n  documentId,\n  viewportProvides,\n  zoomProvides,\n}: PinchZoomDeps) {\n  if (typeof window === 'undefined') {\n    return () => {};\n  }\n\n  let hammer: any | undefined;\n  let initialZoom = 0;\n  let lastCenter = { x: 0, y: 0 };\n\n  const viewportScope = viewportProvides.forDocument(documentId);\n  const zoomScope = zoomProvides.forDocument(documentId);\n\n  const getState = () => zoomScope.getState();\n\n  const updateTransform = (scale: number) => {\n    element.style.transform = `scale(${scale})`;\n  };\n\n  const resetTransform = () => {\n    element.style.transform = 'none';\n    element.style.transformOrigin = '0 0';\n  };\n\n  const pinchStart = (e: HammerInput) => {\n    initialZoom = getState().currentZoomLevel;\n\n    const contRect = viewportScope.getBoundingRect();\n\n    lastCenter = {\n      x: e.center.x - contRect.origin.x,\n      y: e.center.y - contRect.origin.y,\n    };\n\n    const innerRect = element.getBoundingClientRect();\n    element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;\n\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchMove = (e: HammerInput) => {\n    updateTransform(e.scale);\n    if (e.srcEvent?.cancelable) {\n      e.srcEvent.preventDefault();\n      e.srcEvent.stopPropagation();\n    }\n  };\n\n  const pinchEnd = (e: HammerInput) => {\n    const delta = (e.scale - 1) * initialZoom;\n    zoomScope.requestZoomBy(delta, { vx: lastCenter.x, vy: lastCenter.y });\n\n    resetTransform();\n    initialZoom = 0;\n  };\n\n  const setupHammer = async () => {\n    try {\n      const Hammer = (await import('hammerjs')).default;\n\n      const inputClass = (() => {\n        const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;\n        const SUPPORT_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;\n        const SUPPORT_ONLY_TOUCH = SUPPORT_TOUCH && MOBILE_REGEX.test(navigator.userAgent);\n        if (SUPPORT_ONLY_TOUCH) return Hammer.TouchInput;\n        if (!SUPPORT_TOUCH) return Hammer.MouseInput;\n        return Hammer.TouchMouseInput;\n      })();\n\n      hammer = new Hammer(element, {\n        touchAction: 'pan-x pan-y',\n        inputClass,\n      });\n\n      hammer.get('pinch').set({ enable: true, pointers: 2, threshold: 0.1 });\n\n      hammer.on('pinchstart', pinchStart);\n      hammer.on('pinchmove', pinchMove);\n      hammer.on('pinchend', pinchEnd);\n    } catch (error) {\n      console.warn('Failed to load HammerJS:', error);\n    }\n  };\n\n  setupHammer();\n\n  return () => {\n    hammer?.destroy();\n    resetTransform();\n  };\n}\n","import { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { setupPinchZoom } from '../utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom';\n\nexport function usePinch(documentId: string) {\n  const { provides: viewportProvides } = useCapability<ViewportPlugin>('viewport');\n  const { provides: zoomProvides } = useZoomCapability();\n  const elementRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || !viewportProvides || !zoomProvides) {\n      return;\n    }\n\n    return setupPinchZoom({\n      element,\n      documentId,\n      viewportProvides,\n      zoomProvides,\n    });\n  }, [viewportProvides, zoomProvides, documentId]);\n\n  return { elementRef };\n}\n","import { ReactNode, HTMLAttributes, CSSProperties } from '@framework';\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  documentId: string;\n  style?: CSSProperties;\n};\n\nexport function PinchWrapper({ children, documentId, style, ...props }: PinchWrapperProps) {\n  const { elementRef } = usePinch(documentId);\n\n  return (\n    <div\n      ref={elementRef}\n      {...props}\n      style={{\n        ...style,\n        display: 'block',\n        width: 'fit-content',\n        overflow: 'visible',\n        boxSizing: 'border-box',\n        margin: '0px auto',\n      }}\n    >\n      {children}\n    </div>\n  );\n}\n","import { useEffect, useMemo, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\nimport { useZoomCapability } from '../hooks/use-zoom';\nimport { useDocumentState } from '@embedpdf/core/@framework';\n\ninterface MarqueeZoomProps {\n  documentId: string;\n  pageIndex: number;\n  scale?: number;\n  className?: string;\n  stroke?: string;\n  fill?: string;\n}\n\nexport const MarqueeZoom = ({\n  documentId,\n  pageIndex,\n  scale: scaleOverride,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  const { provides: zoomPlugin } = useZoomCapability();\n  const documentState = useDocumentState(documentId);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  const actualScale = useMemo(() => {\n    if (scaleOverride !== undefined) return scaleOverride;\n    return documentState?.scale ?? 1;\n  }, [scaleOverride, documentState?.scale]);\n\n  useEffect(() => {\n    if (!zoomPlugin) return;\n    return zoomPlugin.registerMarqueeOnPage({\n      documentId,\n      pageIndex,\n      scale: actualScale,\n      callback: {\n        onPreview: setRect,\n      },\n    });\n  }, [zoomPlugin, documentId, pageIndex, actualScale]);\n\n  if (!rect) return null;\n\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none',\n        left: rect.origin.x * actualScale,\n        top: rect.origin.y * actualScale,\n        width: rect.size.width * actualScale,\n        height: rect.size.height * actualScale,\n        border: `1px solid ${stroke}`,\n        background: fill,\n        boxSizing: 'border-box',\n      }}\n      className={className}\n    />\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/shared/components/marquee-zoom.d.ts

@@ -1,13 +1,10 @@
 interface MarqueeZoomProps {
-    /** Index of the page this layer lives on */
+    documentId: string;
     pageIndex: number;
-    /** Scale of the page */
-    scale: number;
-    /** Optional CSS class applied to the marquee rectangle */
+    scale?: number;
     className?: string;
-    /** Stroke / fill colours (defaults below) */
     stroke?: string;
     fill?: string;
 }
-export declare const MarqueeZoom: ({ pageIndex, scale, className, stroke, fill, }: MarqueeZoomProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MarqueeZoom: ({ documentId, pageIndex, scale: scaleOverride, className, stroke, fill, }: MarqueeZoomProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/shared/components/pinch-wrapper.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode, HTMLAttributes, CSSProperties } from '../../react/adapter.ts';
 type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     children: ReactNode;
+    documentId: string;
     style?: CSSProperties;
 };
-export declare function PinchWrapper({ children, style, ...props }: PinchWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function PinchWrapper({ children, documentId, style, ...props }: PinchWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shared/hooks/use-pinch-zoom.d.ts

@@ -1,3 +1,3 @@
-export declare function usePinch(): {
+export declare function usePinch(documentId: string): {
     elementRef: import('react').RefObject<HTMLDivElement>;
 };

package/dist/shared/hooks/use-zoom.d.ts

@@ -1,4 +1,4 @@
-import { ZoomPlugin, ZoomState } from '../../index.ts';
+import { ZoomDocumentState, ZoomPlugin } from '../../index.ts';
 export declare const useZoomCapability: () => {
     provides: Readonly<import('../../index.ts').ZoomCapability> | null;
     isLoading: boolean;
@@ -9,7 +9,11 @@ export declare const useZoomPlugin: () => {
     isLoading: boolean;
     ready: Promise<void>;
 };
-export declare const useZoom: () => {
-    state: ZoomState;
-    provides: Readonly<import('../../index.ts').ZoomCapability> | null;
+/**
+ * Hook for zoom state for a specific document
+ * @param documentId Document ID
+ */
+export declare const useZoom: (documentId: string) => {
+    state: ZoomDocumentState;
+    provides: import('../../index.ts').ZoomScope | null;
 };

package/dist/shared/utils/pinch-zoom-logic.d.ts

@@ -2,7 +2,8 @@ import { ViewportCapability } from '@embedpdf/plugin-viewport';
 import { ZoomCapability } from '../../index.ts';
 export interface PinchZoomDeps {
     element: HTMLDivElement;
+    documentId: string;
     viewportProvides: ViewportCapability;
     zoomProvides: ZoomCapability;
 }
-export declare function setupPinchZoom({ element, viewportProvides, zoomProvides }: PinchZoomDeps): () => void;
+export declare function setupPinchZoom({ element, documentId, viewportProvides, zoomProvides, }: PinchZoomDeps): () => void;

package/dist/shared-preact/components/marquee-zoom.d.ts

@@ -1,13 +1,10 @@
 interface MarqueeZoomProps {
-    /** Index of the page this layer lives on */
+    documentId: string;
     pageIndex: number;
-    /** Scale of the page */
-    scale: number;
-    /** Optional CSS class applied to the marquee rectangle */
+    scale?: number;
     className?: string;
-    /** Stroke / fill colours (defaults below) */
     stroke?: string;
     fill?: string;
 }
-export declare const MarqueeZoom: ({ pageIndex, scale, className, stroke, fill, }: MarqueeZoomProps) => import("preact").JSX.Element | null;
+export declare const MarqueeZoom: ({ documentId, pageIndex, scale: scaleOverride, className, stroke, fill, }: MarqueeZoomProps) => import("preact").JSX.Element | null;
 export {};

package/dist/shared-preact/components/pinch-wrapper.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode, HTMLAttributes, CSSProperties } from '../../preact/adapter.ts';
 type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     children: ReactNode;
+    documentId: string;
     style?: CSSProperties;
 };
-export declare function PinchWrapper({ children, style, ...props }: PinchWrapperProps): import("preact").JSX.Element;
+export declare function PinchWrapper({ children, documentId, style, ...props }: PinchWrapperProps): import("preact").JSX.Element;
 export {};

package/dist/shared-preact/hooks/use-pinch-zoom.d.ts

@@ -1,3 +1,3 @@
-export declare function usePinch(): {
+export declare function usePinch(documentId: string): {
     elementRef: import('preact').RefObject<HTMLDivElement>;
 };