@embedpdf/plugin-zoom 1.0.11 → 1.0.12

package/dist/react/index.d.ts

@@ -1,53 +1 @@
-import * as _embedpdf_plugin_zoom from '@embedpdf/plugin-zoom';
-import { ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const useZoomCapability: () => {
-    provides: Readonly<_embedpdf_plugin_zoom.ZoomCapability> | null;
-    isLoading: boolean;
-    ready: Promise<void>;
-};
-declare const useZoomPlugin: () => {
-    plugin: ZoomPlugin | null;
-    isLoading: boolean;
-    ready: Promise<void>;
-};
-declare const useZoom: () => {
-    state: ZoomState;
-    provides: Readonly<_embedpdf_plugin_zoom.ZoomCapability> | null;
-};
-
-declare function usePinch(): {
-    elementRef: react.RefObject<HTMLDivElement>;
-};
-
-type PinchWrapperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> & {
-    children: ReactNode;
-    style?: React.CSSProperties;
-};
-declare function PinchWrapper({ children, style, ...props }: PinchWrapperProps): react_jsx_runtime.JSX.Element;
-
-interface MarqueeZoomProps {
-    /** Index of the page this layer lives on */
-    pageIndex: number;
-    /** Scale of the page */
-    scale: number;
-    /** Width of the page */
-    pageWidth: number;
-    /** Height of the page */
-    pageHeight: number;
-    /** Optional CSS class applied to the marquee rectangle */
-    className?: string;
-    /** Stroke / fill colours (defaults below) */
-    stroke?: string;
-    fill?: string;
-}
-/**
- * Draws a marquee rectangle while the user drags.
- * Hook it into the interaction-manager with modeId = 'marqueeZoom'.
- */
-declare const MarqueeZoom: ({ pageIndex, scale, pageWidth, pageHeight, className, stroke, fill, }: MarqueeZoomProps) => react_jsx_runtime.JSX.Element | null;
-
-export { MarqueeZoom, PinchWrapper, usePinch, useZoom, useZoomCapability, useZoomPlugin };
+export * from '../shared-react';

package/dist/react/index.js

@@ -1,14 +1,15 @@
-// src/react/hooks/use-zoom.ts
 import { useCapability, usePlugin } from "@embedpdf/core/react";
-import { initialState, ZoomPlugin } from "@embedpdf/plugin-zoom";
-import { useEffect, useState } from "react";
-var useZoomCapability = () => useCapability(ZoomPlugin.id);
-var useZoomPlugin = () => usePlugin(ZoomPlugin.id);
-var useZoom = () => {
+import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+import { useState, useEffect, useRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
+const useZoomCapability = () => useCapability(ZoomPlugin.id);
+const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
+const useZoom = () => {
   const { provides } = useZoomCapability();
   const [state, setState] = useState(initialState);
   useEffect(() => {
-    return provides?.onStateChange((action) => {
+    return provides == null ? void 0 : provides.onStateChange((action) => {
       setState(action);
     });
   }, [provides]);
@@ -17,15 +18,11 @@ var useZoom = () => {
     provides
   };
 };
-
-// src/react/hooks/use-pinch-zoom.ts
-import { useEffect as useEffect2, useRef } from "react";
-import { useCapability as useCapability2 } from "@embedpdf/core/react";
 function usePinch() {
-  const { provides: viewportProvides } = useCapability2("viewport");
+  const { provides: viewportProvides } = useCapability("viewport");
   const { provides: zoomProvides } = useZoomCapability();
   const elementRef = useRef(null);
-  useEffect2(() => {
+  useEffect(() => {
     const element = elementRef.current;
     if (!element || !viewportProvides || !zoomProvides) {
       return;
@@ -45,6 +42,7 @@ function usePinch() {
       element.style.transformOrigin = "0 0";
     };
     const pinchStart = (e) => {
+      var _a;
       initialZoom = getState().currentZoomLevel;
       const contRect = viewportProvides.getBoundingRect();
       lastCenter = {
@@ -53,14 +51,15 @@ function usePinch() {
       };
       const innerRect = element.getBoundingClientRect();
       element.style.transformOrigin = `${e.center.x - innerRect.left}px ${e.center.y - innerRect.top}px`;
-      if (e.srcEvent?.cancelable) {
+      if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
         e.srcEvent.preventDefault();
         e.srcEvent.stopPropagation();
       }
     };
     const pinchMove = (e) => {
+      var _a;
       updateTransform(e.scale);
-      if (e.srcEvent?.cancelable) {
+      if ((_a = e.srcEvent) == null ? void 0 : _a.cancelable) {
         e.srcEvent.preventDefault();
         e.srcEvent.stopPropagation();
       }
@@ -73,7 +72,7 @@ function usePinch() {
     };
     const setupHammer = async () => {
       try {
-        const Hammer = (await import("hammerjs")).default;
+        const Hammer = (await import("../hammer-e1aXHboh.js").then((n) => n.h)).default;
         const inputClass = (() => {
           const MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
           const SUPPORT_TOUCH = "ontouchstart" in window || navigator.maxTouchPoints > 0;
@@ -97,15 +96,12 @@ function usePinch() {
     };
     setupHammer();
     return () => {
-      hammer?.destroy();
+      hammer == null ? void 0 : hammer.destroy();
       resetTransform();
     };
   }, [viewportProvides, zoomProvides]);
   return { elementRef };
 }
-
-// src/react/components/pinch-wrapper.tsx
-import { jsx } from "react/jsx-runtime";
 function PinchWrapper({ children, style, ...props }) {
   const { elementRef } = usePinch();
   return /* @__PURE__ */ jsx(
@@ -125,12 +121,7 @@ function PinchWrapper({ children, style, ...props }) {
     }
   );
 }
-
-// src/react/components/marquee-zoom.tsx
-import { useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState2 } from "react";
-import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var MarqueeZoom = ({
+const MarqueeZoom = ({
   pageIndex,
   scale,
   pageWidth,
@@ -142,16 +133,17 @@ var MarqueeZoom = ({
   const { provides: zoom } = useZoomCapability();
   const { register } = usePointerHandlers({ modeId: "marqueeZoom", pageIndex });
   const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
-  const startRef = useRef2(null);
-  const [rect, setRect] = useState2(null);
+  const startRef = useRef(null);
+  const [rect, setRect] = useState(null);
   const pageWidthPDF = pageWidth / scale;
   const pageHeightPDF = pageHeight / scale;
   const handlers = useMemo(
     () => ({
       onPointerDown: (pos, evt) => {
+        var _a, _b;
         startRef.current = pos;
         setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });
-        evt.target?.setPointerCapture?.(evt.pointerId);
+        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
       },
       onPointerMove: (pos) => {
         if (!startRef.current) return;
@@ -165,6 +157,7 @@ var MarqueeZoom = ({
         setRect({ origin: { x: left, y: top }, size: { width, height } });
       },
       onPointerUp: (_, evt) => {
+        var _a, _b;
         if (rect && zoom) {
           const dragPx = Math.max(rect.size.width, rect.size.height) * scale;
           if (dragPx > 5) {
@@ -175,22 +168,23 @@ var MarqueeZoom = ({
         }
         startRef.current = null;
         setRect(null);
-        evt.target?.releasePointerCapture?.(evt.pointerId);
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
       },
       onPointerCancel: (_, evt) => {
+        var _a, _b;
         startRef.current = null;
         setRect(null);
-        evt.target?.releasePointerCapture?.(evt.pointerId);
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
       }
     }),
     [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex]
   );
-  useEffect3(() => {
+  useEffect(() => {
     if (!register) return;
     return register(handlers);
   }, [register, handlers]);
   if (!rect) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: {
@@ -217,4 +211,4 @@ export {
   useZoomCapability,
   useZoomPlugin
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/hooks/use-zoom.ts","../../src/react/hooks/use-pinch-zoom.ts","../../src/react/components/pinch-wrapper.tsx","../../src/react/components/marquee-zoom.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/react';\nimport { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useEffect, useState } from 'react';\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 { useEffect, useRef } from 'react';\nimport { useCapability } from '@embedpdf/core/react';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { ZoomState } from '@embedpdf/plugin-zoom';\n\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    // 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    // Dynamically import and setup Hammer\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();\n\n    return () => {\n      hammer?.destroy();\n      resetTransform();\n    };\n  }, [viewportProvides, zoomProvides]);\n\n  return { elementRef };\n}\n","import { ReactNode } from 'react';\n\nimport { usePinch } from '../hooks';\n\ntype PinchWrapperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> & {\n  children: ReactNode;\n  style?: React.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, useMemo, useRef, useState } from 'react';\nimport type { PointerEventHandlers } from '@embedpdf/plugin-interaction-manager';\nimport { usePointerHandlers } from '@embedpdf/plugin-interaction-manager/react';\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  /** Width of the page */\n  pageWidth: number;\n  /** Height of the page */\n  pageHeight: 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\n/**\n * Draws a marquee rectangle while the user drags.\n * Hook it into the interaction-manager with modeId = 'marqueeZoom'.\n */\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  pageWidth,\n  pageHeight,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  /* ------------------------------------------------------------------ */\n  /* zoom capability                                                   */\n  /* ------------------------------------------------------------------ */\n  const { provides: zoom } = useZoomCapability();\n\n  /* ------------------------------------------------------------------ */\n  /* integration with interaction-manager                               */\n  /* ------------------------------------------------------------------ */\n  const { register } = usePointerHandlers({ modeId: 'marqueeZoom', pageIndex });\n\n  /* ------------------------------------------------------------------ */\n  /* helpers                                                            */\n  /* ------------------------------------------------------------------ */\n  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));\n\n  /* ------------------------------------------------------------------ */\n  /* local state – start / current drag position                        */\n  /* ------------------------------------------------------------------ */\n  const startRef = useRef<{ x: number; y: number } | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  /* page size in **PDF-space** (unscaled) ----------------------------- */\n  const pageWidthPDF = pageWidth / scale;\n  const pageHeightPDF = pageHeight / scale;\n\n  /* ------------------------------------------------------------------ */\n  /* pointer handlers                                                   */\n  /* ------------------------------------------------------------------ */\n  const handlers = useMemo<PointerEventHandlers<PointerEvent>>(\n    () => ({\n      onPointerDown: (pos, evt) => {\n        startRef.current = pos;\n        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });\n        (evt.target as HTMLElement)?.setPointerCapture?.(evt.pointerId);\n      },\n      onPointerMove: (pos) => {\n        if (!startRef.current) return;\n        /* clamp current position to the page bounds */\n        const curX = clamp(pos.x, 0, pageWidthPDF);\n        const curY = clamp(pos.y, 0, pageHeightPDF);\n\n        const { x: sx, y: sy } = startRef.current;\n        const left = Math.min(sx, curX);\n        const top = Math.min(sy, curY);\n        const width = Math.abs(curX - sx);\n        const height = Math.abs(curY - sy);\n\n        setRect({ origin: { x: left, y: top }, size: { width, height } });\n      },\n      onPointerUp: (_, evt) => {\n        if (rect && zoom) {\n          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;\n          if (dragPx > 5) {\n            // real drag → zoom to it\n            zoom.zoomToArea(pageIndex, rect);\n          } else {\n            // tiny drag → simple zoom-in\n            zoom.zoomIn();\n          }\n        }\n\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n      onPointerCancel: (_, evt) => {\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n    }),\n    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex],\n  );\n\n  /* register with the interaction-manager */\n  useEffect(() => {\n    if (!register) return;\n    return register(handlers);\n  }, [register, handlers]);\n\n  /* ------------------------------------------------------------------ */\n  /* render                                                              */\n  /* ------------------------------------------------------------------ */\n  if (!rect) return null; // nothing to draw\n\n  return (\n    <div\n      /* Each page wrapper is position:relative, so absolute is fine */\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none', // ignore hits – underlying page still gets events\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"],"mappings":"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","names":["useEffect","useCapability","useCapability","useEffect","useEffect","useRef","useState","jsx","useRef","useState","useEffect"]}
+{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-zoom.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 { useEffect, useRef } from '@framework';\nimport { useCapability } from '@embedpdf/core/@framework';\nimport { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { ZoomState } from '@embedpdf/plugin-zoom';\n\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    // 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    // Dynamically import and setup Hammer\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();\n\n    return () => {\n      hammer?.destroy();\n      resetTransform();\n    };\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, useMemo, useRef, useState } from '@framework';\nimport type { PointerEventHandlers } from '@embedpdf/plugin-interaction-manager';\nimport { usePointerHandlers } from '@embedpdf/plugin-interaction-manager/@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  /** Width of the page */\n  pageWidth: number;\n  /** Height of the page */\n  pageHeight: 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\n/**\n * Draws a marquee rectangle while the user drags.\n * Hook it into the interaction-manager with modeId = 'marqueeZoom'.\n */\nexport const MarqueeZoom = ({\n  pageIndex,\n  scale,\n  pageWidth,\n  pageHeight,\n  className,\n  stroke = 'rgba(33,150,243,0.8)',\n  fill = 'rgba(33,150,243,0.15)',\n}: MarqueeZoomProps) => {\n  /* ------------------------------------------------------------------ */\n  /* zoom capability                                                   */\n  /* ------------------------------------------------------------------ */\n  const { provides: zoom } = useZoomCapability();\n\n  /* ------------------------------------------------------------------ */\n  /* integration with interaction-manager                               */\n  /* ------------------------------------------------------------------ */\n  const { register } = usePointerHandlers({ modeId: 'marqueeZoom', pageIndex });\n\n  /* ------------------------------------------------------------------ */\n  /* helpers                                                            */\n  /* ------------------------------------------------------------------ */\n  const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(max, v));\n\n  /* ------------------------------------------------------------------ */\n  /* local state – start / current drag position                        */\n  /* ------------------------------------------------------------------ */\n  const startRef = useRef<{ x: number; y: number } | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n\n  /* page size in **PDF-space** (unscaled) ----------------------------- */\n  const pageWidthPDF = pageWidth / scale;\n  const pageHeightPDF = pageHeight / scale;\n\n  /* ------------------------------------------------------------------ */\n  /* pointer handlers                                                   */\n  /* ------------------------------------------------------------------ */\n  const handlers = useMemo<PointerEventHandlers<PointerEvent>>(\n    () => ({\n      onPointerDown: (pos, evt) => {\n        startRef.current = pos;\n        setRect({ origin: { x: pos.x, y: pos.y }, size: { width: 0, height: 0 } });\n        (evt.target as HTMLElement)?.setPointerCapture?.(evt.pointerId);\n      },\n      onPointerMove: (pos) => {\n        if (!startRef.current) return;\n        /* clamp current position to the page bounds */\n        const curX = clamp(pos.x, 0, pageWidthPDF);\n        const curY = clamp(pos.y, 0, pageHeightPDF);\n\n        const { x: sx, y: sy } = startRef.current;\n        const left = Math.min(sx, curX);\n        const top = Math.min(sy, curY);\n        const width = Math.abs(curX - sx);\n        const height = Math.abs(curY - sy);\n\n        setRect({ origin: { x: left, y: top }, size: { width, height } });\n      },\n      onPointerUp: (_, evt) => {\n        if (rect && zoom) {\n          const dragPx = Math.max(rect.size.width, rect.size.height) * scale;\n          if (dragPx > 5) {\n            // real drag → zoom to it\n            zoom.zoomToArea(pageIndex, rect);\n          } else {\n            // tiny drag → simple zoom-in\n            zoom.zoomIn();\n          }\n        }\n\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n      onPointerCancel: (_, evt) => {\n        startRef.current = null;\n        setRect(null);\n        (evt.target as HTMLElement)?.releasePointerCapture?.(evt.pointerId);\n      },\n    }),\n    [pageWidthPDF, pageWidthPDF, zoom, scale, rect, pageIndex],\n  );\n\n  /* register with the interaction-manager */\n  useEffect(() => {\n    if (!register) return;\n    return register(handlers);\n  }, [register, handlers]);\n\n  /* ------------------------------------------------------------------ */\n  /* render                                                              */\n  /* ------------------------------------------------------------------ */\n  if (!rect) return null; // nothing to draw\n\n  return (\n    <div\n      /* Each page wrapper is position:relative, so absolute is fine */\n      style={{\n        position: 'absolute',\n        pointerEvents: 'none', // ignore hits – underlying page still gets events\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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"}

package/dist/react/interaction-manager.d.ts

@@ -0,0 +1 @@
+export * from '@embedpdf/plugin-interaction-manager/react';

package/dist/shared-preact/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pinch-wrapper';
+export * from './marquee-zoom';

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

@@ -0,0 +1,21 @@
+interface MarqueeZoomProps {
+    /** Index of the page this layer lives on */
+    pageIndex: number;
+    /** Scale of the page */
+    scale: number;
+    /** Width of the page */
+    pageWidth: number;
+    /** Height of the page */
+    pageHeight: number;
+    /** Optional CSS class applied to the marquee rectangle */
+    className?: string;
+    /** Stroke / fill colours (defaults below) */
+    stroke?: string;
+    fill?: string;
+}
+/**
+ * Draws a marquee rectangle while the user drags.
+ * Hook it into the interaction-manager with modeId = 'marqueeZoom'.
+ */
+export declare const MarqueeZoom: ({ pageIndex, scale, pageWidth, pageHeight, className, stroke, fill, }: MarqueeZoomProps) => import("preact").JSX.Element | null;
+export {};

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

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

package/dist/shared-preact/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-zoom';
+export * from './use-pinch-zoom';

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

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

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

@@ -0,0 +1,15 @@
+import { ZoomPlugin, ZoomState } from '../../lib/index.ts';
+export declare const useZoomCapability: () => {
+    provides: Readonly<import('../../lib/index.ts').ZoomCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useZoomPlugin: () => {
+    plugin: ZoomPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useZoom: () => {
+    state: ZoomState;
+    provides: Readonly<import('../../lib/index.ts').ZoomCapability> | null;
+};

package/dist/shared-preact/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './components';

package/dist/shared-react/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pinch-wrapper';
+export * from './marquee-zoom';

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

@@ -0,0 +1,21 @@
+interface MarqueeZoomProps {
+    /** Index of the page this layer lives on */
+    pageIndex: number;
+    /** Scale of the page */
+    scale: number;
+    /** Width of the page */
+    pageWidth: number;
+    /** Height of the page */
+    pageHeight: number;
+    /** Optional CSS class applied to the marquee rectangle */
+    className?: string;
+    /** Stroke / fill colours (defaults below) */
+    stroke?: string;
+    fill?: string;
+}
+/**
+ * Draws a marquee rectangle while the user drags.
+ * Hook it into the interaction-manager with modeId = 'marqueeZoom'.
+ */
+export declare const MarqueeZoom: ({ pageIndex, scale, pageWidth, pageHeight, className, stroke, fill, }: MarqueeZoomProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

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

package/dist/shared-react/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-zoom';
+export * from './use-pinch-zoom';

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

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

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

@@ -0,0 +1,15 @@
+import { ZoomPlugin, ZoomState } from '../../lib/index.ts';
+export declare const useZoomCapability: () => {
+    provides: Readonly<import('../../lib/index.ts').ZoomCapability> | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useZoomPlugin: () => {
+    plugin: ZoomPlugin | null;
+    isLoading: boolean;
+    ready: Promise<void>;
+};
+export declare const useZoom: () => {
+    state: ZoomState;
+    provides: Readonly<import('../../lib/index.ts').ZoomCapability> | null;
+};

package/dist/shared-react/index.d.ts

@@ -0,0 +1,2 @@
+export * from './hooks';
+export * from './components';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-zoom",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -24,26 +24,26 @@
   },
   "dependencies": {
     "hammerjs": "^2.0.8",
-    "@embedpdf/models": "1.0.11"
+    "@embedpdf/models": "1.0.12"
   },
   "devDependencies": {
     "@types/hammerjs": "^2.0.46",
     "@types/react": "^18.2.0",
-    "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "@embedpdf/core": "1.0.11",
-    "@embedpdf/plugin-viewport": "1.0.11",
-    "@embedpdf/plugin-interaction-manager": "1.0.11",
-    "@embedpdf/plugin-scroll": "1.0.11"
+    "@embedpdf/core": "1.0.12",
+    "@embedpdf/plugin-viewport": "1.0.12",
+    "@embedpdf/build": "1.0.0",
+    "@embedpdf/plugin-interaction-manager": "1.0.12",
+    "@embedpdf/plugin-scroll": "1.0.12"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "preact": "^10.26.4",
-    "@embedpdf/core": "1.0.11",
-    "@embedpdf/plugin-viewport": "1.0.11",
-    "@embedpdf/plugin-scroll": "1.0.11",
-    "@embedpdf/plugin-interaction-manager": "1.0.11"
+    "@embedpdf/core": "1.0.12",
+    "@embedpdf/plugin-viewport": "1.0.12",
+    "@embedpdf/plugin-scroll": "1.0.12",
+    "@embedpdf/plugin-interaction-manager": "1.0.12"
   },
   "files": [
     "dist",
@@ -62,11 +62,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "PROJECT_CWD=$(pwd) pnpm -w p:build",
-    "build:watch": "PROJECT_CWD=$(pwd) pnpm -w p:build:watch",
-    "clean": "PROJECT_CWD=$(pwd) pnpm -w p:clean",
-    "lint": "PROJECT_CWD=$(pwd) pnpm -w p:lint",
-    "lint:fix": "PROJECT_CWD=$(pwd) pnpm -w p:lint:fix",
-    "typecheck": "PROJECT_CWD=$(pwd) pnpm -w p:typecheck"
+    "build:base": "vite build --mode base",
+    "build:react": "vite build --mode react",
+    "build:preact": "vite build --mode preact",
+    "build": "pnpm run clean && concurrently -c auto -n base,react,preact \"vite build --mode base\" \"vite build --mode react\" \"vite build --mode preact\"",
+    "clean": "rimraf dist",
+    "lint": "eslint src --color",
+    "lint:fix": "eslint src --color --fix"
   }
 }

package/dist/index.d.cts

@@ -1,147 +0,0 @@
-import { BasePluginConfig, EventHook, Action, BasePlugin, PluginRegistry, PluginManifest, PluginPackage } from '@embedpdf/core';
-import { Rect } from '@embedpdf/models';
-import { ViewportMetrics } from '@embedpdf/plugin-viewport';
-
-declare enum ZoomMode {
-    Automatic = "automatic",
-    FitPage = "fit-page",
-    FitWidth = "fit-width"
-}
-type ZoomLevel = ZoomMode | number;
-interface Point {
-    vx: number;
-    vy: number;
-}
-interface ZoomChangeEvent {
-    /** old and new *actual* scale factors */
-    oldZoom: number;
-    newZoom: number;
-    /** level used to obtain the newZoom (number | mode) */
-    level: ZoomLevel;
-    /** viewport point kept under the finger / mouse‑wheel focus */
-    center: Point;
-    /** where the viewport should scroll to after the scale change */
-    desiredScrollLeft: number;
-    desiredScrollTop: number;
-    /** metrics at the moment the zoom was requested                    */
-    viewport: ViewportMetrics;
-}
-interface ZoomCapability {
-    /** subscribe – returns the unsubscribe function */
-    onZoomChange: EventHook<ZoomChangeEvent>;
-    /** subscribe – returns the unsubscribe function */
-    onStateChange: EventHook<ZoomState>;
-    /** absolute requests -------------------------------------------------- */
-    requestZoom(level: ZoomLevel, center?: Point): void;
-    /** relative requests -------------------------------------------------- */
-    requestZoomBy(delta: number, center?: Point): void;
-    /** absolute requests -------------------------------------------------- */
-    zoomIn(): void;
-    zoomOut(): void;
-    zoomToArea(pageIndex: number, rect: Rect): void;
-    /** zoom in on an area -------------------------------------------------- */
-    enableMarqueeZoom(): void;
-    disableMarqueeZoom(): void;
-    toggleMarqueeZoom(): void;
-    isMarqueeZoomActive(): boolean;
-    getState(): ZoomState;
-    getPresets(): ZoomPreset[];
-}
-interface ZoomRangeStep {
-    min: number;
-    max: number;
-    step: number;
-}
-interface ZoomPreset {
-    name: string;
-    value: ZoomLevel;
-    icon?: string;
-}
-interface ZoomPluginConfig extends BasePluginConfig {
-    defaultZoomLevel: ZoomLevel;
-    minZoom?: number;
-    maxZoom?: number;
-    zoomStep?: number;
-    zoomRanges?: ZoomRangeStep[];
-    presets?: ZoomPreset[];
-}
-interface ZoomState {
-    zoomLevel: ZoomLevel;
-    currentZoomLevel: number;
-}
-declare enum VerticalZoomFocus {
-    Center = 0,
-    Top = 1
-}
-interface ZoomRequest {
-    level: ZoomLevel;
-    delta?: number;
-    center?: Point;
-    focus?: VerticalZoomFocus;
-    /** Scroll so that the focal point ends up …
-     *  ▸ `"keep"`   (default) at the same viewport coords
-     *  ▸ `"center"` centred in the viewport  */
-    align?: 'keep' | 'center';
-}
-
-declare const SET_ZOOM_LEVEL = "SET_ZOOM_LEVEL";
-declare const SET_INITIAL_ZOOM_LEVEL = "SET_INITIAL_ZOOM_LEVEL";
-interface SetZoomLevelAction extends Action {
-    type: typeof SET_ZOOM_LEVEL;
-    payload: {
-        zoomLevel: ZoomLevel;
-        currentZoomLevel: number;
-    };
-}
-interface SetInitialZoomLevelAction extends Action {
-    type: typeof SET_INITIAL_ZOOM_LEVEL;
-    payload: {
-        zoomLevel: ZoomLevel;
-    };
-}
-type ZoomAction = SetZoomLevelAction | SetInitialZoomLevelAction;
-
-declare const initialState: ZoomState;
-
-declare class ZoomPlugin extends BasePlugin<ZoomPluginConfig, ZoomCapability, ZoomState, ZoomAction> {
-    static readonly id: "zoom";
-    private readonly zoom$;
-    private readonly state$;
-    private readonly viewport;
-    private readonly viewportPlugin;
-    private readonly scroll;
-    private readonly interactionManager;
-    private readonly presets;
-    private readonly zoomRanges;
-    private readonly minZoom;
-    private readonly maxZoom;
-    private readonly zoomStep;
-    constructor(id: string, registry: PluginRegistry, cfg: ZoomPluginConfig);
-    protected buildCapability(): ZoomCapability;
-    initialize(): Promise<void>;
-    destroy(): Promise<void>;
-    /**
-     * Sort ranges once, make sure they are sane
-     */
-    private normalizeRanges;
-    /** pick the step that applies to a given numeric zoom */
-    private stepFor;
-    /** clamp + round helper reused later */
-    private toZoom;
-    private handleRequest;
-    /** numeric zoom for Automatic / FitPage / FitWidth */
-    private computeZoomForMode;
-    /** where to scroll so that *focus* stays stable after scaling          */
-    private computeScrollForZoomChange;
-    private handleZoomToArea;
-    /** recalculates Automatic / Fit* when viewport or pages change */
-    private recalcAuto;
-    onStoreUpdated(_prevState: ZoomState, newState: ZoomState): void;
-}
-
-declare const ZOOM_PLUGIN_ID = "zoom";
-declare const manifest: PluginManifest<ZoomPluginConfig>;
-
-declare const ZoomPluginPackage: PluginPackage<ZoomPlugin, ZoomPluginConfig, ZoomState, ZoomAction>;
-
-export { type Point, VerticalZoomFocus, ZOOM_PLUGIN_ID, type ZoomCapability, type ZoomChangeEvent, type ZoomLevel, ZoomMode, ZoomPlugin, type ZoomPluginConfig, ZoomPluginPackage, type ZoomPreset, type ZoomRangeStep, type ZoomRequest, type ZoomState, initialState, manifest };