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

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

@@ -1,4 +1,4 @@
-import { ZoomPlugin, ZoomState } from '../../lib/index.ts';
+import { ZoomDocumentState, ZoomPlugin } from '../../lib/index.ts';
 export declare const useZoomCapability: () => {
     provides: Readonly<import('../../lib/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('../../lib/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('../../lib/index.ts').ZoomScope | null;
 };

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

@@ -2,7 +2,8 @@ import { ViewportCapability } from '@embedpdf/plugin-viewport';
 import { ZoomCapability } from '../../lib/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-react/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-react/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-react/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-react/hooks/use-zoom.d.ts

@@ -1,4 +1,4 @@
-import { ZoomPlugin, ZoomState } from '../../lib/index.ts';
+import { ZoomDocumentState, ZoomPlugin } from '../../lib/index.ts';
 export declare const useZoomCapability: () => {
     provides: Readonly<import('../../lib/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('../../lib/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('../../lib/index.ts').ZoomScope | null;
 };

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

@@ -2,7 +2,8 @@ import { ViewportCapability } from '@embedpdf/plugin-viewport';
 import { ZoomCapability } from '../../lib/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-svelte/utils/pinch-zoom-logic.d.ts

@@ -2,7 +2,8 @@ import { ViewportCapability } from '@embedpdf/plugin-viewport';
 import { ZoomCapability } from '../../lib/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-vue/utils/pinch-zoom-logic.d.ts

@@ -2,7 +2,8 @@ import { ViewportCapability } from '@embedpdf/plugin-viewport';
 import { ZoomCapability } from '../../lib/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/svelte/components/MarqueeZoom.svelte.d.ts

@@ -1,8 +1,10 @@
 interface MarqueeZoomProps {
+    /** The ID of the document */
+    documentId: string;
     /** Index of the page this layer lives on */
     pageIndex: number;
     /** Scale of the page */
-    scale: number;
+    scale?: number;
     /** Optional CSS class applied to the marquee rectangle */
     class?: string;
     /** Stroke / fill colours (defaults below) */

package/dist/svelte/components/PinchWrapper.svelte.d.ts

@@ -1,6 +1,7 @@
 import { Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
+    documentId: string;
     children: Snippet;
     class?: string;
 };

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

@@ -1,3 +1,7 @@
-export declare function usePinch(): {
+/**
+ * Hook for setting up pinch-to-zoom functionality on an element
+ * @param getDocumentId Function that returns the document ID
+ */
+export declare function usePinch(getDocumentId: () => string | null): {
     elementRef: HTMLDivElement | null;
 };

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

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

package/dist/svelte/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("svelte/internal/client"),t=require("@embedpdf/plugin-zoom"),o=require("@embedpdf/core/svelte");function r(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const o in e)if("default"!==o){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,r.get?r:{enumerable:!0,get:()=>e[o]})}return t.default=e,Object.freeze(t)}require("svelte/internal/disclose-version");const n=r(e),s=()=>o.useCapability(t.ZoomPlugin.id);function i({element:e,viewportProvides:t,zoomProvides:o}){if("undefined"==typeof window)return()=>{};let r,n=0,s={x:0,y:0};const i=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},l=r=>{var i;n=o.getState().currentZoomLevel;const l=t.getBoundingRect();s={x:r.center.x-l.origin.x,y:r.center.y-l.origin.y};const a=e.getBoundingClientRect();e.style.transformOrigin=`${r.center.x-a.left}px ${r.center.y-a.top}px`,(null==(i=r.srcEvent)?void 0:i.cancelable)&&(r.srcEvent.preventDefault(),r.srcEvent.stopPropagation())},a=t=>{var o,r;r=t.scale,e.style.transform=`scale(${r})`,(null==(o=t.srcEvent)?void 0:o.cancelable)&&(t.srcEvent.preventDefault(),t.srcEvent.stopPropagation())},c=e=>{const t=(e.scale-1)*n;o.requestZoomBy(t,{vx:s.x,vy:s.y}),i(),n=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})();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",a),r.on("pinchend",c)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==r||r.destroy(),i()}}function l(){const e=o.useCapability("viewport"),t=s(),r=n.proxy({elementRef:null});return n.user_effect((()=>{const o=r.elementRef;if(o&&e.provides&&t.provides)return i({element:o,viewportProvides:e.provides,zoomProvides:t.provides})})),r}var a=n.from_html("<div></div>");var c=n.from_html("<div> </div>");exports.MarqueeZoom=function(e,t){n.push(t,!0);let o=n.prop(t,"stroke",3,"rgba(33,150,243,0.8)"),r=n.prop(t,"fill",3,"rgba(33,150,243,0.15)");const i=s();let l=n.state(null);n.user_effect((()=>{if(i.provides)return i.provides.registerMarqueeOnPage({pageIndex:t.pageIndex,scale:t.scale,callback:{onPreview:e=>n.set(l,e,!0)}})}));var c=n.comment(),p=n.first_child(c),u=e=>{var s=a();let i;n.template_effect((e=>{n.set_class(s,1,n.clsx(t.class)),i=n.set_style(s,"",i,e)}),[()=>({position:"absolute","pointer-events":"none",left:n.get(l).origin.x*t.scale+"px",top:n.get(l).origin.y*t.scale+"px",width:n.get(l).size.width*t.scale+"px",height:n.get(l).size.height*t.scale+"px",border:`1px solid ${o()}`,background:r(),"box-sizing":"border-box"})]),n.append(e,s)};n.if(p,(e=>{n.get(l)&&e(u)})),n.append(e,c),n.pop()},exports.PinchWrapper=function(e,t){n.push(t,!0);let o=n.rest_props(t,["$$slots","$$events","$$legacy","children","class"]);const r=l();var s=c();n.attribute_effect(s,(()=>({...o,class:t.class,[n.STYLE]:{display:"block",width:"fit-content",overflow:"visible","box-sizing":"border-box",margin:"0px auto"}})));var i=n.child(s,!0);n.reset(s),n.bind_this(s,(e=>r.elementRef=e),(()=>null==r?void 0:r.elementRef)),n.template_effect((()=>n.set_text(i,t.children))),n.append(e,s),n.pop()},exports.usePinch=l,exports.useZoom=()=>{const e=s(),o=n.proxy({get provides(){return e.provides},state:t.initialState});return n.user_effect((()=>{if(e.provides)return e.provides.onStateChange((e=>{o.state=e}))})),o},exports.useZoomCapability=s,exports.useZoomPlugin=()=>o.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("svelte/internal/client"),t=require("@embedpdf/core/svelte"),o=require("@embedpdf/plugin-zoom");function n(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const o in e)if("default"!==o){const n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:()=>e[o]})}return t.default=e,Object.freeze(t)}require("svelte/internal/disclose-version");const r=n(e),s=()=>t.useCapability(o.ZoomPlugin.id);function i({element:e,documentId:t,viewportProvides:o,zoomProvides:n}){if("undefined"==typeof window)return()=>{};let r,s=0,i={x:0,y:0};const c=o.forDocument(t),l=n.forDocument(t),a=()=>{e.style.transform="none",e.style.transformOrigin="0 0"},u=t=>{var o;s=l.getState().currentZoomLevel;const n=c.getBoundingRect();i={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)*s;l.requestZoomBy(t,{vx:i.x,vy:i.y}),a(),s=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",u),r.on("pinchmove",d),r.on("pinchend",p)}catch(t){console.warn("Failed to load HammerJS:",t)}})(),()=>{null==r||r.destroy(),a()}}function c(e){const o=t.useCapability("viewport"),n=s();let c,l=r.state(null);const a=r.derived(e);return r.user_effect(()=>{const e=r.get(l),t=o.provides,s=n.provides,u=r.get(a);if(c&&(c(),c=void 0),e&&t&&s&&u)return c=i({element:e,documentId:u,viewportProvides:t,zoomProvides:s}),()=>{c&&(c(),c=void 0)}}),{get elementRef(){return r.get(l)},set elementRef(e){r.set(l,e,!0)}}}var l=r.from_html("<div></div>");var a=r.from_html("<div><!></div>");exports.MarqueeZoom=function(e,o){r.push(o,!0);let n=r.prop(o,"stroke",3,"rgba(33,150,243,0.8)"),i=r.prop(o,"fill",3,"rgba(33,150,243,0.15)");const c=s(),a=t.useDocumentState(()=>o.documentId);let u=r.state(null);const d=r.derived(()=>{var e;return void 0!==o.scale?o.scale:(null==(e=a.current)?void 0:e.scale)??1});r.user_effect(()=>{if(r.set(u,null),c.provides)return c.provides.registerMarqueeOnPage({documentId:o.documentId,pageIndex:o.pageIndex,scale:r.get(d),callback:{onPreview:e=>{r.set(u,e,!0)}}})});var p=r.comment(),g=r.first_child(p),v=e=>{var t=l();let s;r.template_effect(()=>{r.set_class(t,1,r.clsx(o.class)),s=r.set_style(t,"",s,{position:"absolute","pointer-events":"none",left:r.get(u).origin.x*r.get(d)+"px",top:r.get(u).origin.y*r.get(d)+"px",width:r.get(u).size.width*r.get(d)+"px",height:r.get(u).size.height*r.get(d)+"px",border:`1px solid ${n()}`,background:i(),"box-sizing":"border-box"})}),r.append(e,t)};r.if(g,e=>{r.get(u)&&e(v)}),r.append(e,p),r.pop()},exports.PinchWrapper=function(e,t){r.push(t,!0);let o=r.rest_props(t,["$$slots","$$events","$$legacy","documentId","children","class"]);const n=c(()=>t.documentId);var s=a();r.attribute_effect(s,()=>({...o,class:t.class,[r.STYLE]:{display:"block",width:"fit-content",overflow:"visible","box-sizing":"border-box",margin:"0px auto"}}));var i=r.child(s);r.snippet(i,()=>t.children),r.reset(s),r.bind_this(s,e=>n.elementRef=e,()=>null==n?void 0:n.elementRef),r.append(e,s),r.pop()},exports.usePinch=c,exports.useZoom=e=>{const t=s();let n=r.state(r.proxy(o.initialDocumentState));const i=r.derived(e),c=r.derived(()=>t.provides&&r.get(i)?t.provides.forDocument(r.get(i)):null);return r.user_effect(()=>{const e=t.provides,s=r.get(i);if(!e||!s)return void r.set(n,o.initialDocumentState,!0);const c=e.forDocument(s);return r.set(n,c.getState(),!0),c.onStateChange(e=>{r.set(n,e,!0)})}),{get provides(){return r.get(c)},get state(){return r.get(n)}}},exports.useZoomCapability=s,exports.useZoomPlugin=()=>t.usePlugin(o.ZoomPlugin.id),Object.keys(o).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})});
 //# sourceMappingURL=index.cjs.map

package/dist/svelte/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-zoom.svelte.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/svelte/hooks/use-pinch-zoom.svelte.ts","../../src/svelte/components/MarqueeZoom.svelte","../../src/svelte/components/PinchWrapper.svelte"],"sourcesContent":["import { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const capability = useZoomCapability();\n\n  const state = $state({\n    get provides() {\n      return capability.provides;\n    },\n    state: initialState as ZoomState,\n  });\n\n  $effect(() => {\n    if (!capability.provides) return;\n    return capability.provides.onStateChange((newState) => {\n      state.state = newState;\n    });\n  });\n\n  return state;\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 type { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { useZoomCapability } from './use-zoom.svelte';\nimport { useCapability } from '@embedpdf/core/svelte';\nimport { setupPinchZoom } from '../../shared/utils/pinch-zoom-logic';\n\nexport function usePinch() {\n  const viewportCapability = useCapability<ViewportPlugin>('viewport');\n  const zoomCapability = useZoomCapability();\n\n  const state = $state({\n    elementRef: null as HTMLDivElement | null,\n  });\n\n  $effect(() => {\n    const element = state.elementRef;\n    if (!element || !viewportCapability.provides || !zoomCapability.provides) {\n      return;\n    }\n\n    return setupPinchZoom({\n      element,\n      viewportProvides: viewportCapability.provides,\n      zoomProvides: zoomCapability.provides,\n    });\n  });\n\n  return state;\n}\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useZoomCapability } from '../hooks/use-zoom.svelte';\n\n  interface 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    class?: string;\n    /** Stroke / fill colours (defaults below) */\n    stroke?: string;\n    fill?: string;\n  }\n\n  let {\n    pageIndex,\n    scale,\n    class: propsClass,\n    stroke = 'rgba(33,150,243,0.8)',\n    fill = 'rgba(33,150,243,0.15)',\n  }: MarqueeZoomProps = $props();\n\n  const zoomCapability = useZoomCapability();\n  let rect = $state<Rect | null>(null);\n\n  $effect(() => {\n    if (!zoomCapability.provides) return;\n    return zoomCapability.provides.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: { onPreview: (val) => (rect = val) },\n    });\n  });\n</script>\n\n{#if rect}\n  <div\n    style:position=\"absolute\"\n    style:pointer-events=\"none\"\n    style:left={`${rect.origin.x * scale}px`}\n    style:top={`${rect.origin.y * scale}px`}\n    style:width={`${rect.size.width * scale}px`}\n    style:height={`${rect.size.height * scale}px`}\n    style:border={`1px solid ${stroke}`}\n    style:background={fill}\n    style:box-sizing=\"border-box\"\n    class={propsClass}\n  ></div>\n{/if}\n","<script lang=\"ts\">\n  import { usePinch } from '../hooks';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n    children: Snippet;\n    class?: string;\n  };\n\n  let { children, class: propsClass, ...restProps }: PinchWrapperProps = $props();\n  const pinch = usePinch();\n</script>\n\n<div\n  bind:this={pinch.elementRef}\n  {...restProps}\n  style:display=\"block\"\n  style:width=\"fit-content\"\n  style:overflow=\"visible\"\n  style:box-sizing=\"border-box\"\n  style:margin=\"0px auto\"\n  class={propsClass}\n>\n  {children}\n</div>\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","viewportCapability","zoomCapability","state","elementRef","$","user_effect","provides","stroke","fill","rect","registerMarqueeOnPage","pageIndex","$$props","callback","onPreview","val","size","width","height","consequent","restProps","rest_props","pinch","$__namespace","bind_this","div","$$value","capability","initialState","onStateChange","newState","usePlugin"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-zoom.svelte.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/svelte/hooks/use-pinch-zoom.svelte.ts","../../src/svelte/components/MarqueeZoom.svelte","../../src/svelte/components/PinchWrapper.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {\n  initialDocumentState,\n  ZoomDocumentState,\n  ZoomPlugin,\n  ZoomScope,\n} from '@embedpdf/plugin-zoom';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseZoomReturn {\n  provides: ZoomScope | null;\n  state: ZoomDocumentState;\n}\n\n/**\n * Hook for zoom state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useZoom = (getDocumentId: () => string | null): UseZoomReturn => {\n  const capability = useZoomCapability();\n\n  let state = $state<ZoomDocumentState>(initialDocumentState);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state = initialDocumentState;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Get initial state\n    state = scope.getState();\n\n    // Subscribe to state changes for this document\n    return scope.onStateChange((newState) => {\n      state = newState;\n    });\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\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 { useCapability } from '@embedpdf/core/svelte';\nimport type { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { setupPinchZoom } from '../../shared/utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom.svelte';\n\n/**\n * Hook for setting up pinch-to-zoom functionality on an element\n * @param getDocumentId Function that returns the document ID\n */\nexport function usePinch(getDocumentId: () => string | null) {\n  const viewportCapability = useCapability<ViewportPlugin>('viewport');\n  const zoomCapability = useZoomCapability();\n\n  let elementRef = $state<HTMLDivElement | null>(null);\n  let cleanup: (() => void) | undefined;\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  $effect(() => {\n    const element = elementRef;\n    const viewport = viewportCapability.provides;\n    const zoom = zoomCapability.provides;\n    const docId = documentId;\n\n    // Clean up previous setup\n    if (cleanup) {\n      cleanup();\n      cleanup = undefined;\n    }\n\n    // Setup new pinch zoom if all dependencies are available\n    if (!element || !viewport || !zoom || !docId) {\n      return;\n    }\n\n    cleanup = setupPinchZoom({\n      element,\n      documentId: docId,\n      viewportProvides: viewport,\n      zoomProvides: zoom,\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n        cleanup = undefined;\n      }\n    };\n  });\n\n  return {\n    get elementRef() {\n      return elementRef;\n    },\n    set elementRef(value: HTMLDivElement | null) {\n      elementRef = value;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useDocumentState } from '@embedpdf/core/svelte';\n  import { useZoomCapability } from '../hooks/use-zoom.svelte';\n\n  interface MarqueeZoomProps {\n    /** The ID of the document */\n    documentId: string;\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    class?: string;\n    /** Stroke / fill colours (defaults below) */\n    stroke?: string;\n    fill?: string;\n  }\n\n  let {\n    documentId,\n    pageIndex,\n    scale: scaleOverride,\n    class: propsClass,\n    stroke = 'rgba(33,150,243,0.8)',\n    fill = 'rgba(33,150,243,0.15)',\n  }: MarqueeZoomProps = $props();\n\n  const zoomCapability = useZoomCapability();\n  const documentState = useDocumentState(() => documentId);\n\n  let rect = $state<Rect | null>(null);\n\n  const actualScale = $derived(\n    scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),\n  );\n\n  $effect(() => {\n    rect = null;\n\n    if (!zoomCapability.provides) {\n      return;\n    }\n\n    return zoomCapability.provides.registerMarqueeOnPage({\n      documentId,\n      pageIndex,\n      scale: actualScale,\n      callback: {\n        onPreview: (newRect) => {\n          rect = newRect;\n        },\n      },\n    });\n  });\n</script>\n\n{#if rect}\n  <div\n    style:position=\"absolute\"\n    style:pointer-events=\"none\"\n    style:left={`${rect.origin.x * actualScale}px`}\n    style:top={`${rect.origin.y * actualScale}px`}\n    style:width={`${rect.size.width * actualScale}px`}\n    style:height={`${rect.size.height * actualScale}px`}\n    style:border={`1px solid ${stroke}`}\n    style:background={fill}\n    style:box-sizing=\"border-box\"\n    class={propsClass}\n  ></div>\n{/if}\n","<script lang=\"ts\">\n  import { usePinch } from '../hooks';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n    documentId: string;\n    children: Snippet;\n    class?: string;\n  };\n\n  let { documentId, children, class: propsClass, ...restProps }: PinchWrapperProps = $props();\n  const pinch = usePinch(() => documentId);\n</script>\n\n<div\n  bind:this={pinch.elementRef}\n  {...restProps}\n  style:display=\"block\"\n  style:width=\"fit-content\"\n  style:overflow=\"visible\"\n  style:box-sizing=\"border-box\"\n  style:margin=\"0px auto\"\n  class={propsClass}\n>\n  {@render children()}\n</div>\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","getDocumentId","viewportCapability","zoomCapability","cleanup","elementRef","$","user_effect","viewport","provides","zoom","docId","value","stroke","fill","documentState","useDocumentState","$$props","rect","actualScale","derived","current","registerMarqueeOnPage","pageIndex","callback","onPreview","newRect","width","size","height","consequent","restProps","rest_props","pinch","bind_this","div","$$value","capability","state","initialDocumentState","scopedProvides","scope","onStateChange","newState","usePlugin"],"mappings":"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"}

package/dist/svelte/index.js

@@ -1,27 +1,43 @@
 import * as $ from "svelte/internal/client";
-import { ZoomPlugin, initialState } from "@embedpdf/plugin-zoom";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/svelte";
+import { ZoomPlugin, initialDocumentState } from "@embedpdf/plugin-zoom";
 export * from "@embedpdf/plugin-zoom";
-import { useCapability, usePlugin } from "@embedpdf/core/svelte";
 import "svelte/internal/disclose-version";
 const useZoomCapability = () => useCapability(ZoomPlugin.id);
 const useZoomPlugin = () => usePlugin(ZoomPlugin.id);
-const useZoom = () => {
+const useZoom = (getDocumentId) => {
   const capability = useZoomCapability();
-  const state = $.proxy({
-    get provides() {
-      return capability.provides;
-    },
-    state: initialState
-  });
+  let state = $.state($.proxy(initialDocumentState));
+  const documentId = $.derived(getDocumentId);
+  const scopedProvides = $.derived(() => capability.provides && $.get(documentId) ? capability.provides.forDocument($.get(documentId)) : null);
   $.user_effect(() => {
-    if (!capability.provides) return;
-    return capability.provides.onStateChange((newState) => {
-      state.state = newState;
+    const provides = capability.provides;
+    const docId = $.get(documentId);
+    if (!provides || !docId) {
+      $.set(state, initialDocumentState, true);
+      return;
+    }
+    const scope = provides.forDocument(docId);
+    $.set(state, scope.getState(), true);
+    return scope.onStateChange((newState) => {
+      $.set(state, newState, true);
     });
   });
-  return state;
+  return {
+    get provides() {
+      return $.get(scopedProvides);
+    },
+    get state() {
+      return $.get(state);
+    }
+  };
 };
-function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
+function setupPinchZoom({
+  element,
+  documentId,
+  viewportProvides,
+  zoomProvides
+}) {
   if (typeof window === "undefined") {
     return () => {
     };
@@ -29,7 +45,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})`;
   };
@@ -40,7 +58,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
@@ -62,7 +80,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;
   };
@@ -79,7 +97,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 });
@@ -96,35 +113,71 @@ function setupPinchZoom({ element, viewportProvides, zoomProvides }) {
     resetTransform();
   };
 }
-function usePinch() {
+function usePinch(getDocumentId) {
   const viewportCapability = useCapability("viewport");
   const zoomCapability = useZoomCapability();
-  const state = $.proxy({ elementRef: null });
+  let elementRef = $.state(null);
+  let cleanup;
+  const documentId = $.derived(getDocumentId);
   $.user_effect(() => {
-    const element = state.elementRef;
-    if (!element || !viewportCapability.provides || !zoomCapability.provides) {
+    const element = $.get(elementRef);
+    const viewport = viewportCapability.provides;
+    const zoom = zoomCapability.provides;
+    const docId = $.get(documentId);
+    if (cleanup) {
+      cleanup();
+      cleanup = void 0;
+    }
+    if (!element || !viewport || !zoom || !docId) {
       return;
     }
-    return setupPinchZoom({
+    cleanup = setupPinchZoom({
       element,
-      viewportProvides: viewportCapability.provides,
-      zoomProvides: zoomCapability.provides
+      documentId: docId,
+      viewportProvides: viewport,
+      zoomProvides: zoom
     });
+    return () => {
+      if (cleanup) {
+        cleanup();
+        cleanup = void 0;
+      }
+    };
   });
-  return state;
+  return {
+    get elementRef() {
+      return $.get(elementRef);
+    },
+    set elementRef(value) {
+      $.set(elementRef, value, true);
+    }
+  };
 }
 var root_1 = $.from_html(`<div></div>`);
 function MarqueeZoom($$anchor, $$props) {
   $.push($$props, true);
   let stroke = $.prop($$props, "stroke", 3, "rgba(33,150,243,0.8)"), fill = $.prop($$props, "fill", 3, "rgba(33,150,243,0.15)");
   const zoomCapability = useZoomCapability();
+  const documentState = useDocumentState(() => $$props.documentId);
   let rect = $.state(null);
+  const actualScale = $.derived(() => {
+    var _a;
+    return $$props.scale !== void 0 ? $$props.scale : ((_a = documentState.current) == null ? void 0 : _a.scale) ?? 1;
+  });
   $.user_effect(() => {
-    if (!zoomCapability.provides) return;
+    $.set(rect, null);
+    if (!zoomCapability.provides) {
+      return;
+    }
     return zoomCapability.provides.registerMarqueeOnPage({
+      documentId: $$props.documentId,
       pageIndex: $$props.pageIndex,
-      scale: $$props.scale,
-      callback: { onPreview: (val) => $.set(rect, val, true) }
+      scale: $.get(actualScale),
+      callback: {
+        onPreview: (newRect) => {
+          $.set(rect, newRect, true);
+        }
+      }
     });
   });
   var fragment = $.comment();
@@ -133,25 +186,20 @@ function MarqueeZoom($$anchor, $$props) {
     var consequent = ($$anchor2) => {
       var div = root_1();
       let styles;
-      $.template_effect(
-        ($0) => {
-          $.set_class(div, 1, $.clsx($$props.class));
-          styles = $.set_style(div, "", styles, $0);
-        },
-        [
-          () => ({
-            position: "absolute",
-            "pointer-events": "none",
-            left: `${$.get(rect).origin.x * $$props.scale}px`,
-            top: `${$.get(rect).origin.y * $$props.scale}px`,
-            width: `${$.get(rect).size.width * $$props.scale}px`,
-            height: `${$.get(rect).size.height * $$props.scale}px`,
-            border: `1px solid ${stroke()}`,
-            background: fill(),
-            "box-sizing": "border-box"
-          })
-        ]
-      );
+      $.template_effect(() => {
+        $.set_class(div, 1, $.clsx($$props.class));
+        styles = $.set_style(div, "", styles, {
+          position: "absolute",
+          "pointer-events": "none",
+          left: `${$.get(rect).origin.x * $.get(actualScale)}px`,
+          top: `${$.get(rect).origin.y * $.get(actualScale)}px`,
+          width: `${$.get(rect).size.width * $.get(actualScale)}px`,
+          height: `${$.get(rect).size.height * $.get(actualScale)}px`,
+          border: `1px solid ${stroke()}`,
+          background: fill(),
+          "box-sizing": "border-box"
+        });
+      });
       $.append($$anchor2, div);
     };
     $.if(node, ($$render) => {
@@ -161,11 +209,18 @@ function MarqueeZoom($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root = $.from_html(`<div> </div>`);
+var root = $.from_html(`<div><!></div>`);
 function PinchWrapper($$anchor, $$props) {
   $.push($$props, true);
-  let restProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy", "children", "class"]);
-  const pinch = usePinch();
+  let restProps = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "documentId",
+    "children",
+    "class"
+  ]);
+  const pinch = usePinch(() => $$props.documentId);
   var div = root();
   $.attribute_effect(div, () => ({
     ...restProps,
@@ -178,10 +233,10 @@ function PinchWrapper($$anchor, $$props) {
       margin: "0px auto"
     }
   }));
-  var text = $.child(div, true);
+  var node = $.child(div);
+  $.snippet(node, () => $$props.children);
   $.reset(div);
   $.bind_this(div, ($$value) => pinch.elementRef = $$value, () => pinch == null ? void 0 : pinch.elementRef);
-  $.template_effect(() => $.set_text(text, $$props.children));
   $.append($$anchor, div);
   $.pop();
 }

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-zoom.svelte.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/svelte/hooks/use-pinch-zoom.svelte.ts","../../src/svelte/components/MarqueeZoom.svelte","../../src/svelte/components/PinchWrapper.svelte"],"sourcesContent":["import { initialState, ZoomPlugin, ZoomState } from '@embedpdf/plugin-zoom';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\nexport const useZoom = () => {\n  const capability = useZoomCapability();\n\n  const state = $state({\n    get provides() {\n      return capability.provides;\n    },\n    state: initialState as ZoomState,\n  });\n\n  $effect(() => {\n    if (!capability.provides) return;\n    return capability.provides.onStateChange((newState) => {\n      state.state = newState;\n    });\n  });\n\n  return state;\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 type { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { useZoomCapability } from './use-zoom.svelte';\nimport { useCapability } from '@embedpdf/core/svelte';\nimport { setupPinchZoom } from '../../shared/utils/pinch-zoom-logic';\n\nexport function usePinch() {\n  const viewportCapability = useCapability<ViewportPlugin>('viewport');\n  const zoomCapability = useZoomCapability();\n\n  const state = $state({\n    elementRef: null as HTMLDivElement | null,\n  });\n\n  $effect(() => {\n    const element = state.elementRef;\n    if (!element || !viewportCapability.provides || !zoomCapability.provides) {\n      return;\n    }\n\n    return setupPinchZoom({\n      element,\n      viewportProvides: viewportCapability.provides,\n      zoomProvides: zoomCapability.provides,\n    });\n  });\n\n  return state;\n}\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useZoomCapability } from '../hooks/use-zoom.svelte';\n\n  interface 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    class?: string;\n    /** Stroke / fill colours (defaults below) */\n    stroke?: string;\n    fill?: string;\n  }\n\n  let {\n    pageIndex,\n    scale,\n    class: propsClass,\n    stroke = 'rgba(33,150,243,0.8)',\n    fill = 'rgba(33,150,243,0.15)',\n  }: MarqueeZoomProps = $props();\n\n  const zoomCapability = useZoomCapability();\n  let rect = $state<Rect | null>(null);\n\n  $effect(() => {\n    if (!zoomCapability.provides) return;\n    return zoomCapability.provides.registerMarqueeOnPage({\n      pageIndex,\n      scale,\n      callback: { onPreview: (val) => (rect = val) },\n    });\n  });\n</script>\n\n{#if rect}\n  <div\n    style:position=\"absolute\"\n    style:pointer-events=\"none\"\n    style:left={`${rect.origin.x * scale}px`}\n    style:top={`${rect.origin.y * scale}px`}\n    style:width={`${rect.size.width * scale}px`}\n    style:height={`${rect.size.height * scale}px`}\n    style:border={`1px solid ${stroke}`}\n    style:background={fill}\n    style:box-sizing=\"border-box\"\n    class={propsClass}\n  ></div>\n{/if}\n","<script lang=\"ts\">\n  import { usePinch } from '../hooks';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n    children: Snippet;\n    class?: string;\n  };\n\n  let { children, class: propsClass, ...restProps }: PinchWrapperProps = $props();\n  const pinch = usePinch();\n</script>\n\n<div\n  bind:this={pinch.elementRef}\n  {...restProps}\n  style:display=\"block\"\n  style:width=\"fit-content\"\n  style:overflow=\"visible\"\n  style:box-sizing=\"border-box\"\n  style:margin=\"0px auto\"\n  class={propsClass}\n>\n  {children}\n</div>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-zoom.svelte.ts","../../src/shared/utils/pinch-zoom-logic.ts","../../src/svelte/hooks/use-pinch-zoom.svelte.ts","../../src/svelte/components/MarqueeZoom.svelte","../../src/svelte/components/PinchWrapper.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {\n  initialDocumentState,\n  ZoomDocumentState,\n  ZoomPlugin,\n  ZoomScope,\n} from '@embedpdf/plugin-zoom';\n\nexport const useZoomCapability = () => useCapability<ZoomPlugin>(ZoomPlugin.id);\nexport const useZoomPlugin = () => usePlugin<ZoomPlugin>(ZoomPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseZoomReturn {\n  provides: ZoomScope | null;\n  state: ZoomDocumentState;\n}\n\n/**\n * Hook for zoom state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useZoom = (getDocumentId: () => string | null): UseZoomReturn => {\n  const capability = useZoomCapability();\n\n  let state = $state<ZoomDocumentState>(initialDocumentState);\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  // Scoped capability for current docId\n  const scopedProvides = $derived(\n    capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n  );\n\n  $effect(() => {\n    const provides = capability.provides;\n    const docId = documentId;\n\n    if (!provides || !docId) {\n      state = initialDocumentState;\n      return;\n    }\n\n    const scope = provides.forDocument(docId);\n\n    // Get initial state\n    state = scope.getState();\n\n    // Subscribe to state changes for this document\n    return scope.onStateChange((newState) => {\n      state = newState;\n    });\n  });\n\n  return {\n    get provides() {\n      return scopedProvides;\n    },\n    get state() {\n      return state;\n    },\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 { useCapability } from '@embedpdf/core/svelte';\nimport type { ViewportPlugin } from '@embedpdf/plugin-viewport';\nimport { setupPinchZoom } from '../../shared/utils/pinch-zoom-logic';\nimport { useZoomCapability } from './use-zoom.svelte';\n\n/**\n * Hook for setting up pinch-to-zoom functionality on an element\n * @param getDocumentId Function that returns the document ID\n */\nexport function usePinch(getDocumentId: () => string | null) {\n  const viewportCapability = useCapability<ViewportPlugin>('viewport');\n  const zoomCapability = useZoomCapability();\n\n  let elementRef = $state<HTMLDivElement | null>(null);\n  let cleanup: (() => void) | undefined;\n\n  // Reactive documentId\n  const documentId = $derived(getDocumentId());\n\n  $effect(() => {\n    const element = elementRef;\n    const viewport = viewportCapability.provides;\n    const zoom = zoomCapability.provides;\n    const docId = documentId;\n\n    // Clean up previous setup\n    if (cleanup) {\n      cleanup();\n      cleanup = undefined;\n    }\n\n    // Setup new pinch zoom if all dependencies are available\n    if (!element || !viewport || !zoom || !docId) {\n      return;\n    }\n\n    cleanup = setupPinchZoom({\n      element,\n      documentId: docId,\n      viewportProvides: viewport,\n      zoomProvides: zoom,\n    });\n\n    return () => {\n      if (cleanup) {\n        cleanup();\n        cleanup = undefined;\n      }\n    };\n  });\n\n  return {\n    get elementRef() {\n      return elementRef;\n    },\n    set elementRef(value: HTMLDivElement | null) {\n      elementRef = value;\n    },\n  };\n}\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useDocumentState } from '@embedpdf/core/svelte';\n  import { useZoomCapability } from '../hooks/use-zoom.svelte';\n\n  interface MarqueeZoomProps {\n    /** The ID of the document */\n    documentId: string;\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    class?: string;\n    /** Stroke / fill colours (defaults below) */\n    stroke?: string;\n    fill?: string;\n  }\n\n  let {\n    documentId,\n    pageIndex,\n    scale: scaleOverride,\n    class: propsClass,\n    stroke = 'rgba(33,150,243,0.8)',\n    fill = 'rgba(33,150,243,0.15)',\n  }: MarqueeZoomProps = $props();\n\n  const zoomCapability = useZoomCapability();\n  const documentState = useDocumentState(() => documentId);\n\n  let rect = $state<Rect | null>(null);\n\n  const actualScale = $derived(\n    scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),\n  );\n\n  $effect(() => {\n    rect = null;\n\n    if (!zoomCapability.provides) {\n      return;\n    }\n\n    return zoomCapability.provides.registerMarqueeOnPage({\n      documentId,\n      pageIndex,\n      scale: actualScale,\n      callback: {\n        onPreview: (newRect) => {\n          rect = newRect;\n        },\n      },\n    });\n  });\n</script>\n\n{#if rect}\n  <div\n    style:position=\"absolute\"\n    style:pointer-events=\"none\"\n    style:left={`${rect.origin.x * actualScale}px`}\n    style:top={`${rect.origin.y * actualScale}px`}\n    style:width={`${rect.size.width * actualScale}px`}\n    style:height={`${rect.size.height * actualScale}px`}\n    style:border={`1px solid ${stroke}`}\n    style:background={fill}\n    style:box-sizing=\"border-box\"\n    class={propsClass}\n  ></div>\n{/if}\n","<script lang=\"ts\">\n  import { usePinch } from '../hooks';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  type PinchWrapperProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n    documentId: string;\n    children: Snippet;\n    class?: string;\n  };\n\n  let { documentId, children, class: propsClass, ...restProps }: PinchWrapperProps = $props();\n  const pinch = usePinch(() => documentId);\n</script>\n\n<div\n  bind:this={pinch.elementRef}\n  {...restProps}\n  style:display=\"block\"\n  style:width=\"fit-content\"\n  style:overflow=\"visible\"\n  style:box-sizing=\"border-box\"\n  style:margin=\"0px auto\"\n  class={propsClass}\n>\n  {@render children()}\n</div>\n"],"names":[],"mappings":"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"}

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

@@ -1,16 +1,19 @@
 interface MarqueeZoomProps {
+    /** The ID of the document */
+    documentId: string;
     /** Index of the page this layer lives on */
     pageIndex: number;
     /** Scale of the page */
-    scale: number;
+    scale?: number;
     /** Optional CSS class applied to the marquee rectangle */
     className?: string;
     /** Stroke / fill colours (defaults below) */
     stroke?: string;
     fill?: string;
 }
-declare const _default: import('vue').DefineComponent<MarqueeZoomProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MarqueeZoomProps> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<MarqueeZoomProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MarqueeZoomProps> & Readonly<{}>, {
     fill: string;
     stroke: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;