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

package/dist/svelte/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-capture.svelte.ts","../../src/svelte/components/MarqueeCapture.svelte"],"sourcesContent":["import { CapturePlugin } from '@embedpdf/plugin-capture';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\nexport const useCapture = () => {\n  const capability = useCaptureCapability();\n\n  const state = $state({\n    get provides() {\n      return capability.provides;\n    },\n    isMarqueeCaptureActive: false,\n  });\n\n  $effect(() => {\n    return capability.provides?.onMarqueeCaptureActiveChange((active) => {\n      state.isMarqueeCaptureActive = active;\n    });\n  });\n\n  return state;\n};\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useCaptureCapability } from '../hooks/use-capture.svelte';\n\n  interface MarqueeCaptureProps {\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  }: MarqueeCaptureProps = $props();\n\n  const captureCapability = useCaptureCapability();\n  let rect = $state<Rect | null>(null);\n\n  $effect(() => {\n    if (!captureCapability.provides) return;\n    return captureCapability.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"],"names":["useCaptureCapability","useCapability","CapturePlugin","id","stroke","fill","captureCapability","rect","$","user_effect","provides","registerMarqueeOnPage","pageIndex","$$props","scale","callback","onPreview","val","set","origin","x","y","size","width","height","consequent","capability","state","isMarqueeCaptureActive","_a","onMarqueeCaptureActiveChange","active","usePlugin"],"mappings":"ugBAGaA,EAA6B,IAAAC,gBAA6BC,EAAAA,cAAcC,uFCiBjF,IAAAC,sBAAS,wBACTC,oBAAO,yBAGH,MAAAC,EAAoBN,IACtB,IAAAO,UAA2B,MAE/BC,EAAAC,aAAc,KACP,GAAAH,EAAkBI,SAChB,OAAAJ,EAAkBI,SAASC,sBAAqB,CACrDC,UAASC,EAAAD,UACTE,MAAKD,EAAAC,MACLC,UAAYC,UAAYC,GAAST,EAAAU,IAAAX,EAAOU,GAAG,oNAS9BV,GAAKY,OAAOC,EAACP,EAAAC,qBACdP,GAAKY,OAAOE,EAACR,EAAAC,uBACXP,GAAKe,KAAKC,MAAKV,EAAAC,wBACdP,GAAKe,KAAKE,OAAMX,EAAAC,+BACNV,iBACTC,mEATjBE,MAAIkB,EAAA,yBAFT,0BD5BQ,MAAAC,EAAa1B,IAEb2B,WACA,YAAAjB,GACK,OAAAgB,EAAWhB,QACpB,EACAkB,wBAAwB,IASnB,OANPpB,EAAAC,wBACS,OAAA,OAAAoB,EAAWH,EAAAhB,eAAU,EAAAmB,EAAAC,8BAA8BC,IACxDJ,EAAMC,uBAAyBG,CAAA,OAI5BJ,CAAA,0DAlB6B,IAAAK,YAAyB9B,EAAAA,cAAcC"}
+{"version":3,"file":"index.cjs","sources":["../../src/svelte/hooks/use-capture.svelte.ts","../../src/svelte/components/MarqueeCapture.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {\n  CapturePlugin,\n  CaptureDocumentState,\n  initialDocumentState,\n  CaptureScope,\n} from '@embedpdf/plugin-capture';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseCaptureReturn {\n  provides: CaptureScope | null;\n  state: CaptureDocumentState;\n}\n\n/**\n * Hook for capture state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useCapture = (getDocumentId: () => string | null): UseCaptureReturn => {\n  const capability = useCaptureCapability();\n\n  let state = $state<CaptureDocumentState>(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","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useDocumentState } from '@embedpdf/core/svelte';\n  import { useCaptureCapability } from '../hooks/use-capture.svelte';\n\n  interface MarqueeCaptureProps {\n    /** Document ID */\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  }: MarqueeCaptureProps = $props();\n\n  const captureCapability = useCaptureCapability();\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 (!captureCapability.provides) {\n      return;\n    }\n\n    return captureCapability.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"],"names":["useCaptureCapability","useCapability","CapturePlugin","id","stroke","fill","captureCapability","documentState","useDocumentState","$$props","documentId","rect","actualScale","$","derived","scale","_a","current","user_effect","set","provides","registerMarqueeOnPage","pageIndex","callback","onPreview","newRect","left","get","origin","x","top","y","width","size","height","consequent","getDocumentId","capability","state","initialDocumentState","scopedProvides","forDocument","docId","scope","getState","onStateChange","newState","usePlugin"],"mappings":"ugBAQaA,EAAA,IAA6BC,gBAA6BC,EAAAA,cAAcC,uFCgBjF,IAAAC,sBAAS,wBACTC,oBAAO,yBAGH,MAAAC,EAAoBN,IACpBO,EAAgBC,EAAAA,iBAAgB,IAAAC,EAAAC,YAElC,IAAAC,UAA2B,YAEzBC,EAAWC,EAAAC,QAAA,WAAA,YACG,IADHL,EAAAM,MACYN,EAAAM,OAAoB,OAAAC,EAAAT,EAAcU,kBAASF,QAAS,IAGjFF,EAAAK,YAAO,QACLL,EAAAM,IAAAR,EAAO,MAEFL,EAAkBc,gBAIhBd,EAAkBc,SAASC,sBAAqB,CACrDX,WAAUD,EAAAC,WACVY,UAASb,EAAAa,UACTP,YAAOH,GACPW,SAAQ,CACNC,UAAYC,IACVZ,EAAAM,IAAAR,EAAOc,GAAO,8LAWLC,KAAAb,EAAAc,IAAAhB,GAAKiB,OAAOC,QAAIjB,GAAhB,KACDkB,IAAAjB,EAAAc,IAAAhB,GAAKiB,OAAOG,QAAInB,GAAhB,KACEoB,MAAAnB,EAAAc,IAAAhB,GAAKsB,KAAKD,YAAQpB,GAAlB,KACCsB,OAAArB,EAAAc,IAAAhB,GAAKsB,KAAKC,aAAStB,GAAnB,yBACUR,iBACTC,kEATjBM,MAAIwB,0BAFT,qBDlC2BC,IACnB,MAAAC,EAAarC,IAEf,IAAAsC,kBAAqCC,EAAAA,uBAGnC,MAAA7B,YAAsB0B,GAGtBI,EAAA3B,EAAAC,QAAA,IACJuB,EAAWjB,gBAAYV,GAAa2B,EAAWjB,SAASqB,kBAAY/B,IAAc,aAGpFG,EAAAK,uBACQE,EAAWiB,EAAWjB,SACtBsB,QAAQhC,OAETU,IAAasB,cAChB7B,EAAAM,IAAAmB,EAAQC,EAAAA,sBAAA,GAIJ,MAAAI,EAAQvB,EAASqB,YAAYC,GAM5B,aAHPJ,EAAQK,EAAMC,YAAA,GAGPD,EAAME,cAAeC,IAC1BjC,EAAAM,IAAAmB,EAAQQ,GAAA,QAKN,YAAA1B,gBACKoB,EACT,EACI,SAAAF,gBACKA,EACT,4DAnDS,IAAyBS,YAAyB7C,EAAAA,cAAcC"}

package/dist/svelte/index.js

@@ -1,38 +1,62 @@
 import * as $ from "svelte/internal/client";
-import { CapturePlugin } from "@embedpdf/plugin-capture";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/svelte";
+import { CapturePlugin, initialDocumentState } from "@embedpdf/plugin-capture";
 export * from "@embedpdf/plugin-capture";
-import { useCapability, usePlugin } from "@embedpdf/core/svelte";
 import "svelte/internal/disclose-version";
 const useCaptureCapability = () => useCapability(CapturePlugin.id);
 const useCapturePlugin = () => usePlugin(CapturePlugin.id);
-const useCapture = () => {
+const useCapture = (getDocumentId) => {
   const capability = useCaptureCapability();
-  const state = $.proxy({
-    get provides() {
-      return capability.provides;
-    },
-    isMarqueeCaptureActive: false
-  });
+  let state = $.state($.proxy(initialDocumentState));
+  const documentId = $.derived(getDocumentId);
+  const scopedProvides = $.derived(() => capability.provides && $.get(documentId) ? capability.provides.forDocument($.get(documentId)) : null);
   $.user_effect(() => {
-    var _a;
-    return (_a = capability.provides) == null ? void 0 : _a.onMarqueeCaptureActiveChange((active) => {
-      state.isMarqueeCaptureActive = active;
+    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);
+    }
+  };
 };
 var root_1 = $.from_html(`<div></div>`);
 function MarqueeCapture($$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 captureCapability = useCaptureCapability();
+  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 (!captureCapability.provides) return;
+    $.set(rect, null);
+    if (!captureCapability.provides) {
+      return;
+    }
     return captureCapability.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();
@@ -41,25 +65,20 @@ function MarqueeCapture($$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) => {

package/dist/svelte/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-capture.svelte.ts","../../src/svelte/components/MarqueeCapture.svelte"],"sourcesContent":["import { CapturePlugin } from '@embedpdf/plugin-capture';\nimport { useCapability, usePlugin } from '@embedpdf/core/svelte';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\nexport const useCapture = () => {\n  const capability = useCaptureCapability();\n\n  const state = $state({\n    get provides() {\n      return capability.provides;\n    },\n    isMarqueeCaptureActive: false,\n  });\n\n  $effect(() => {\n    return capability.provides?.onMarqueeCaptureActiveChange((active) => {\n      state.isMarqueeCaptureActive = active;\n    });\n  });\n\n  return state;\n};\n","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useCaptureCapability } from '../hooks/use-capture.svelte';\n\n  interface MarqueeCaptureProps {\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  }: MarqueeCaptureProps = $props();\n\n  const captureCapability = useCaptureCapability();\n  let rect = $state<Rect | null>(null);\n\n  $effect(() => {\n    if (!captureCapability.provides) return;\n    return captureCapability.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"],"names":[],"mappings":";;;;;AAGa,MAAA,uBAA6B,MAAA,cAA6B,cAAc,EAAE;AAC1E,MAAA,mBAAyB,MAAA,UAAyB,cAAc,EAAE;AAElE,MAAA,mBAAmB;AACxB,QAAA,aAAa,qBAAqB;QAElC;IACA,IAAA,WAAW;AACN,aAAA,WAAW;AAAA,IACpB;AAAA,IACA,wBAAwB;AAAA;AAG1B,IAAA,kBAAc;;AACL,YAAA,gBAAW,aAAX,mBAAqB,6BAA8B,CAAA,WAAW;AACnE,YAAM,yBAAyB;AAAA;GAElC;SAEM;AACT;;2CCvBA;;AAoBI,MAAA,sCAAS,sBAAsB,GAC/B,kCAAO,uBAAuB;AAG1B,QAAA,oBAAoB,qBAAoB;AAC1C,MAAA,eAA2B,IAAI;AAEnC,IAAA,YAAc,MAAA;AACP,QAAA,CAAA,kBAAkB,SAAQ;WACxB,kBAAkB,SAAS,sBAAqB;AAAA,MACrD,WAAS,QAAA;AAAA,MACT,OAAK,QAAA;AAAA,MACL,YAAY,WAAS,CAAG,QAAS,EAAA,IAAA,MAAO,KAAG,IAAA,EAAA;AAAA;GAE9C;;;;;;;;;;;;;;;;2BAOgB,IAAI,EAAC,OAAO,IAAC,QAAA,KAAA;AAAA,0BACd,IAAI,EAAC,OAAO,IAAC,QAAA,KAAA;AAAA,4BACX,IAAI,EAAC,KAAK,QAAK,QAAA,KAAA;AAAA,6BACd,IAAI,EAAC,KAAK,SAAM,QAAA,KAAA;AAAA,iCACN,OAAM,CAAA;AAAA,wBACf,KAAI;AAAA;;;;;;;gBATrB,IAAI,EAAA,UAAA,UAAA;AAAA;;;;AAFT;"}
+{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-capture.svelte.ts","../../src/svelte/components/MarqueeCapture.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {\n  CapturePlugin,\n  CaptureDocumentState,\n  initialDocumentState,\n  CaptureScope,\n} from '@embedpdf/plugin-capture';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseCaptureReturn {\n  provides: CaptureScope | null;\n  state: CaptureDocumentState;\n}\n\n/**\n * Hook for capture state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useCapture = (getDocumentId: () => string | null): UseCaptureReturn => {\n  const capability = useCaptureCapability();\n\n  let state = $state<CaptureDocumentState>(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","<script lang=\"ts\">\n  import type { Rect } from '@embedpdf/models';\n  import { useDocumentState } from '@embedpdf/core/svelte';\n  import { useCaptureCapability } from '../hooks/use-capture.svelte';\n\n  interface MarqueeCaptureProps {\n    /** Document ID */\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  }: MarqueeCaptureProps = $props();\n\n  const captureCapability = useCaptureCapability();\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 (!captureCapability.provides) {\n      return;\n    }\n\n    return captureCapability.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"],"names":[],"mappings":";;;;;AAQa,MAAA,uBAAA,MAA6B,cAA6B,cAAc,EAAE;AAC1E,MAAA,mBAAA,MAAyB,UAAyB,cAAc,EAAE;MAYlE,aAAA,CAAc,kBAAyD;AAC5E,QAAA,aAAa,qBAAA;AAEf,MAAA,wBAAqC,oBAAoB,CAAA;AAGvD,QAAA,uBAAsB,aAAA;AAGtB,QAAA,iBAAA,EAAA,QAAA,MACJ,WAAW,kBAAY,UAAA,IAAa,WAAW,SAAS,kBAAY,UAAU,CAAA,IAAI,IAAA;AAGpF,IAAA,kBAAc;UACN,WAAW,WAAW;AACtB,UAAA,cAAQ,UAAA;SAET,YAAA,CAAa,OAAO;AACvB,QAAA,IAAA,OAAQ,sBAAA,IAAA;;IAEV;AAEM,UAAA,QAAQ,SAAS,YAAY,KAAK;UAGxC,OAAQ,MAAM,SAAA,GAAA,IAAA;AAGP,WAAA,MAAM,cAAA,CAAe,aAAa;AACvC,QAAA,IAAA,OAAQ,UAAA,IAAA;AAAA,IACV,CAAC;AAAA,EACH,CAAC;;IAGK,IAAA,WAAW;mBACN,cAAA;AAAA,IACT;AAAA,IACI,IAAA,QAAQ;mBACH,KAAA;AAAA,IACT;AAAA;AAEJ;;2CC9DA;;AAwBI,MAAA,sCAAS,sBAAsB,GAC/B,kCAAO,uBAAuB;AAG1B,QAAA,oBAAoB,qBAAoB;AACxC,QAAA,gBAAgB,iBAAgB,MAAA,QAAA,UAAA;AAElC,MAAA,eAA2B,IAAI;QAE7B,cAAW,EAAA,QAAA,MAAA;;AAAA,mBAAA,UACG,SAAS,QAAA,UAAoB,mBAAc,YAAd,mBAAuB,UAAS;AAAA,GAAC;AAGlF,IAAA,YAAO,MAAO;AACZ,MAAA,IAAA,MAAO,IAAI;SAEN,kBAAkB,UAAU;;IAEjC;WAEO,kBAAkB,SAAS,sBAAqB;AAAA,MACrD,YAAU,QAAA;AAAA,MACV,WAAS,QAAA;AAAA,MACT,aAAO,WAAW;AAAA,MAClB,UAAQ;AAAA,QACN,WAAS,CAAG,YAAY;AACtB,YAAA,IAAA,MAAO,SAAO,IAAA;AAAA,QAChB;AAAA;;EAGN,CAAC;;;;;;;;;;;;UAOgB,MAAA,GAAA,EAAA,IAAA,IAAI,EAAC,OAAO,UAAI,WAAW,CAAA;AAAA,UAC5B,KAAA,GAAA,EAAA,IAAA,IAAI,EAAC,OAAO,UAAI,WAAW,CAAA;AAAA,UACzB,OAAA,GAAA,EAAA,IAAA,IAAI,EAAC,KAAK,cAAQ,WAAW,CAAA;AAAA,UAC5B,QAAA,GAAA,EAAA,IAAA,IAAI,EAAC,KAAK,eAAS,WAAW,CAAA;AAAA,+BACpB,OAAM,CAAA;AAAA,sBACf,KAAI;AAAA;;;;;;gBATrB,IAAI,EAAA,UAAA,UAAA;AAAA;;;;AAFT;"}

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

@@ -1,16 +1,19 @@
 interface MarqueeCaptureProps {
+    /** Document ID */
+    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<MarqueeCaptureProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MarqueeCaptureProps> & Readonly<{}>, {
+declare const __VLS_export: import('vue').DefineComponent<MarqueeCaptureProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MarqueeCaptureProps> & Readonly<{}>, {
     fill: string;
     stroke: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/vue/hooks/use-capture.d.ts

@@ -1,7 +1,16 @@
-import { CapturePlugin } from '../../lib/index.ts';
+import { CapturePlugin, CaptureDocumentState } from '../../lib/index.ts';
+import { MaybeRefOrGetter } from 'vue';
 export declare const useCaptureCapability: () => import('@embedpdf/core/vue').CapabilityState<Readonly<import('../../lib/index.ts').CaptureCapability>>;
 export declare const useCapturePlugin: () => import('@embedpdf/core/vue').PluginState<CapturePlugin>;
-export declare const useCapture: () => {
-    provides: import('vue').Ref<Readonly<import('../../lib/index.ts').CaptureCapability> | null, Readonly<import('../../lib/index.ts').CaptureCapability> | null>;
-    isMarqueeCaptureActive: import('vue').Ref<boolean, boolean>;
+/**
+ * Hook for capture state for a specific document
+ * @param documentId Document ID (can be ref, computed, getter, or plain value)
+ */
+export declare const useCapture: (documentId: MaybeRefOrGetter<string>) => {
+    state: import('vue').Ref<{
+        isMarqueeCaptureActive: boolean;
+    }, CaptureDocumentState | {
+        isMarqueeCaptureActive: boolean;
+    }>;
+    provides: import('vue').ComputedRef<import('../../lib/index.ts').CaptureScope | null>;
 };

package/dist/vue/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/vue"),r=require("@embedpdf/plugin-capture"),t=require("vue"),a=()=>e.useCapability(r.CapturePlugin.id),l=t.defineComponent({__name:"marquee-capture",props:{pageIndex:{},scale:{},className:{},stroke:{default:"rgba(33,150,243,0.8)"},fill:{default:"rgba(33,150,243,0.15)"}},setup(e){const r=e,{provides:l}=a(),u=t.ref(null);let o;return t.onMounted((()=>{l.value&&(o=l.value.registerMarqueeOnPage({pageIndex:r.pageIndex,scale:r.scale,callback:{onPreview:e=>{u.value=e}}}))})),t.onUnmounted((()=>{null==o||o()})),(e,r)=>u.value?(t.openBlock(),t.createElementBlock("div",{key:0,style:t.normalizeStyle({position:"absolute",pointerEvents:"none",left:u.value.origin.x*e.scale+"px",top:u.value.origin.y*e.scale+"px",width:u.value.size.width*e.scale+"px",height:u.value.size.height*e.scale+"px",border:`1px solid ${e.stroke}`,background:e.fill,boxSizing:"border-box"}),class:t.normalizeClass(e.className)},null,6)):t.createCommentVNode("",!0)}});exports.MarqueeCapture=l,exports.useCapture=()=>{const{provides:e}=a(),r=t.ref(!1);return t.watch(e,((e,t,a)=>{if(e){a(e.onMarqueeCaptureActiveChange((e=>{r.value=e})))}}),{immediate:!0}),{provides:e,isMarqueeCaptureActive:r}},exports.useCaptureCapability=a,exports.useCapturePlugin=()=>e.usePlugin(r.CapturePlugin.id),Object.keys(r).forEach((e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})}));
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@embedpdf/core/vue"),t=require("@embedpdf/plugin-capture"),a=require("vue"),u=()=>e.useCapability(t.CapturePlugin.id),r=a.defineComponent({__name:"marquee-capture",props:{documentId:{},pageIndex:{},scale:{},className:{},stroke:{default:"rgba(33,150,243,0.8)"},fill:{default:"rgba(33,150,243,0.15)"}},setup(t){const r=t,{provides:l}=u(),o=e.useDocumentState(()=>r.documentId),n=a.ref(null),i=a.computed(()=>{var e;return void 0!==r.scale?r.scale:(null==(e=o.value)?void 0:e.scale)??1});return a.watch([l,()=>r.documentId,()=>r.pageIndex,i],([e,t,a,u],r,l)=>{if(!e)return void(n.value=null);const o=e.registerMarqueeOnPage({documentId:t,pageIndex:a,scale:u,callback:{onPreview:e=>{n.value=e}}});l(()=>{null==o||o()})},{immediate:!0}),(e,u)=>n.value?(a.openBlock(),a.createElementBlock("div",{key:0,style:a.normalizeStyle({position:"absolute",pointerEvents:"none",left:n.value.origin.x*i.value+"px",top:n.value.origin.y*i.value+"px",width:n.value.size.width*i.value+"px",height:n.value.size.height*i.value+"px",border:`1px solid ${t.stroke}`,background:t.fill,boxSizing:"border-box"}),class:a.normalizeClass(t.className)},null,6)):a.createCommentVNode("",!0)}});exports.MarqueeCapture=r,exports.useCapture=e=>{const{provides:r}=u(),l=a.ref(t.initialDocumentState);return a.watch([r,()=>a.toValue(e)],([e,t],a,u)=>{if(e&&t){const a=e.forDocument(t);l.value=a.getState();u(a.onStateChange(e=>{l.value=e}))}},{immediate:!0}),{state:l,provides:a.computed(()=>{var t;return(null==(t=r.value)?void 0:t.forDocument(a.toValue(e)))??null})}},exports.useCaptureCapability=u,exports.useCapturePlugin=()=>e.usePlugin(t.CapturePlugin.id),Object.keys(t).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
 //# sourceMappingURL=index.cjs.map

package/dist/vue/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-capture.ts","../../src/vue/components/marquee-capture.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { CapturePlugin } from '@embedpdf/plugin-capture';\nimport { ref, watch } from 'vue';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\nexport const useCapture = () => {\n  const { provides } = useCaptureCapability();\n  const isMarqueeCaptureActive = ref(false);\n\n  watch(\n    provides,\n    (providesValue, _, onCleanup) => {\n      if (providesValue) {\n        const unsubscribe = providesValue.onMarqueeCaptureActiveChange((active) => {\n          isMarqueeCaptureActive.value = active;\n        });\n        onCleanup(unsubscribe);\n      }\n    },\n    { immediate: true },\n  );\n\n  return {\n    provides,\n    isMarqueeCaptureActive,\n  };\n};\n","<template>\n  <div\n    v-if=\"rect\"\n    :style=\"{\n      position: 'absolute',\n      pointerEvents: 'none',\n      left: `${rect.origin.x * scale}px`,\n      top: `${rect.origin.y * scale}px`,\n      width: `${rect.size.width * scale}px`,\n      height: `${rect.size.height * scale}px`,\n      border: `1px solid ${stroke}`,\n      background: fill,\n      boxSizing: 'border-box',\n    }\"\n    :class=\"className\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport type { Rect } from '@embedpdf/models';\nimport { useCaptureCapability } from '../hooks/use-capture';\n\ninterface MarqueeCaptureProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nconst props = withDefaults(defineProps<MarqueeCaptureProps>(), {\n  stroke: 'rgba(33,150,243,0.8)',\n  fill: 'rgba(33,150,243,0.15)',\n});\n\nconst { provides: capturePlugin } = useCaptureCapability();\nconst rect = ref<Rect | null>(null);\n\nlet unregister: (() => void) | undefined;\n\nonMounted(() => {\n  if (!capturePlugin.value) return;\n\n  unregister = capturePlugin.value.registerMarqueeOnPage({\n    pageIndex: props.pageIndex,\n    scale: props.scale,\n    callback: {\n      onPreview: (newRect) => {\n        rect.value = newRect;\n      },\n    },\n  });\n});\n\nonUnmounted(() => {\n  unregister?.();\n});\n</script>\n"],"names":["useCaptureCapability","useCapability","CapturePlugin","id","props","__props","provides","capturePlugin","rect","ref","unregister","onMounted","value","registerMarqueeOnPage","pageIndex","scale","callback","onPreview","newRect","onUnmounted","_createElementBlock","style","_normalizeStyle","left","origin","x","top","y","width","size","height","stroke","fill","class","className","isMarqueeCaptureActive","vue$1","watch","providesValue","_","onCleanup","onMarqueeCaptureActiveChange","active","immediate","usePlugin"],"mappings":"6KAIaA,EAAuB,IAAMC,gBAA6BC,EAAAA,cAAcC,qLC+BrF,MAAMC,EAAQC,GAKNC,SAAUC,GAAkBP,IAC9BQ,EAAOC,MAAiB,MAE1B,IAAAC,SAEJC,EAAAA,WAAU,KACHJ,EAAcK,QAENF,EAAAH,EAAcK,MAAMC,sBAAsB,CACrDC,UAAWV,EAAMU,UACjBC,MAAOX,EAAMW,MACbC,SAAU,CACRC,UAAYC,IACVV,EAAKI,MAAQM,CAAA,KAGlB,IAGHC,EAAAA,aAAY,KACG,MAAAT,GAAAA,GAAA,WA1DLF,EAAII,qBADZQ,EAAAA,mBAcE,MAAA,OAZCC,MAAKC,EAAAA,eAAA,0CAA4EC,KAAAf,EAAAI,MAAKY,OAAOC,EAAIV,EAAKA,MAArB,KAAyCW,IAAAlB,EAAAI,MAAKY,OAAOG,EAAIZ,EAAKA,MAArB,KAA2Ca,MAAApB,EAAAI,MAAKiB,KAAKD,MAAQb,EAAKA,MAAvB,KAA8Ce,OAAAtB,EAAAI,MAAKiB,KAAKC,OAASf,EAAKA,MAAxB,yBAAyDgB,EAAMA,oBAAsBC,EAAIA,8BAW5SC,uBAAOC,EAASA,gGDPK,KAClB,MAAA5B,SAAEA,GAAaN,IACfmC,EAAyB1B,OAAI,GAe5B,OAbP2B,EAAAC,MACE/B,GACA,CAACgC,EAAeC,EAAGC,KACjB,GAAIF,EAAe,CAIjBE,EAHoBF,EAAcG,8BAA8BC,IAC9DP,EAAuBvB,MAAQ8B,CAAA,IAEZ,IAGzB,CAAEC,WAAW,IAGR,CACLrC,WACA6B,yBACF,0DAtB8B,IAAMS,YAAyB1C,EAAAA,cAAcC"}
+{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-capture.ts","../../src/vue/components/marquee-capture.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport {\n  CapturePlugin,\n  CaptureDocumentState,\n  initialDocumentState,\n} from '@embedpdf/plugin-capture';\nimport { ref, watch, toValue, MaybeRefOrGetter, computed } from 'vue';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\n/**\n * Hook for capture state for a specific document\n * @param documentId Document ID (can be ref, computed, getter, or plain value)\n */\nexport const useCapture = (documentId: MaybeRefOrGetter<string>) => {\n  const { provides } = useCaptureCapability();\n  const state = ref<CaptureDocumentState>(initialDocumentState);\n\n  watch(\n    [provides, () => toValue(documentId)],\n    ([providesValue, docId], _, onCleanup) => {\n      if (providesValue && docId) {\n        const scope = providesValue.forDocument(docId);\n        state.value = scope.getState();\n\n        const unsubscribe = scope.onStateChange((newState) => {\n          state.value = newState;\n        });\n        onCleanup(unsubscribe);\n      }\n    },\n    { immediate: true },\n  );\n\n  return {\n    state,\n    provides: computed(() => provides.value?.forDocument(toValue(documentId)) ?? null),\n  };\n};\n","<template>\n  <div\n    v-if=\"rect\"\n    :style=\"{\n      position: 'absolute',\n      pointerEvents: 'none',\n      left: `${rect.origin.x * actualScale}px`,\n      top: `${rect.origin.y * actualScale}px`,\n      width: `${rect.size.width * actualScale}px`,\n      height: `${rect.size.height * actualScale}px`,\n      border: `1px solid ${stroke}`,\n      background: fill,\n      boxSizing: 'border-box',\n    }\"\n    :class=\"className\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue';\nimport type { Rect } from '@embedpdf/models';\nimport { useDocumentState } from '@embedpdf/core/vue';\nimport { useCaptureCapability } from '../hooks/use-capture';\n\ninterface MarqueeCaptureProps {\n  /** Document ID */\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  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nconst props = withDefaults(defineProps<MarqueeCaptureProps>(), {\n  stroke: 'rgba(33,150,243,0.8)',\n  fill: 'rgba(33,150,243,0.15)',\n});\n\nconst { provides: capturePlugin } = useCaptureCapability();\nconst documentState = useDocumentState(() => props.documentId);\nconst rect = ref<Rect | null>(null);\n\nconst actualScale = computed(() => {\n  if (props.scale !== undefined) return props.scale;\n  return documentState.value?.scale ?? 1;\n});\n\nwatch(\n  [capturePlugin, () => props.documentId, () => props.pageIndex, actualScale],\n  ([plugin, docId, pageIdx, scale], _, onCleanup) => {\n    if (!plugin) {\n      rect.value = null;\n      return;\n    }\n\n    const unregister = plugin.registerMarqueeOnPage({\n      documentId: docId,\n      pageIndex: pageIdx,\n      scale,\n      callback: {\n        onPreview: (newRect) => {\n          rect.value = newRect;\n        },\n      },\n    });\n\n    onCleanup(() => {\n      unregister?.();\n    });\n  },\n  { immediate: true },\n);\n</script>\n"],"names":["useCaptureCapability","useCapability","CapturePlugin","id","props","__props","provides","capturePlugin","documentState","useDocumentState","documentId","rect","ref","actualScale","computed","scale","_a","value","watch","pageIndex","plugin","docId","pageIdx","_","onCleanup","unregister","registerMarqueeOnPage","callback","onPreview","newRect","immediate","_createElementBlock","style","_normalizeStyle","left","origin","x","top","y","width","size","height","stroke","fill","class","className","state","initialDocumentState","toValue","providesValue","scope","forDocument","getState","onStateChange","newState","usePlugin"],"mappings":"6KAQaA,EAAuB,IAAMC,gBAA6BC,EAAAA,cAAcC,mMC8BrF,MAAMC,EAAQC,GAKNC,SAAUC,GAAkBP,IAC9BQ,EAAgBC,EAAAA,iBAAiB,IAAML,EAAMM,YAC7CC,EAAOC,EAAAA,IAAiB,MAExBC,EAAcC,EAAAA,SAAS,WAC3B,YAAoB,IAAhBV,EAAMW,MAA4BX,EAAMW,OACrC,OAAAC,EAAAR,EAAcS,YAAd,EAAAD,EAAqBD,QAAS,WAGvCG,EAAAA,MACE,CAACX,EAAe,IAAMH,EAAMM,WAAY,IAAMN,EAAMe,UAAWN,GAC/D,EAAEO,EAAQC,EAAOC,EAASP,GAAQQ,EAAGC,KACnC,IAAKJ,EAEH,YADAT,EAAKM,MAAQ,MAIf,MAAMQ,EAAaL,EAAOM,sBAAsB,CAC9ChB,WAAYW,EACZF,UAAWG,EACXP,QACAY,SAAU,CACRC,UAAYC,IACVlB,EAAKM,MAAQY,MAKnBL,EAAU,KACR,MAAAC,GAAAA,OAGJ,CAAEK,WAAW,WAzELnB,EAAAM,qBADRc,EAAAA,mBAcE,MAAA,OAZCC,MAAKC,EAAAA,eAAA,0CAA4EC,KAAAvB,EAAAM,MAAKkB,OAAOC,EAAIvB,EAAAI,MAAhB,KAA+CoB,IAAA1B,EAAAM,MAAKkB,OAAOG,EAAIzB,EAAAI,MAAhB,KAAiDsB,MAAA5B,EAAAM,MAAKuB,KAAKD,MAAQ1B,EAAAI,MAAlB,KAAoDwB,OAAA9B,EAAAM,MAAKuB,KAAKC,OAAS5B,EAAAI,MAAnB,yBAA+DZ,EAAAqC,oBAA4BrC,EAAAsC,8BAWhUC,uBAAOvC,EAAAwC,gGDCenC,IACzB,MAAMJ,SAAEA,GAAaN,IACf8C,EAAQlC,EAAAA,IAA0BmC,wBAkBxC,OAhBA7B,EAAAA,MACE,CAACZ,EAAU,IAAM0C,UAAQtC,IACzB,EAAEuC,EAAe5B,GAAQE,EAAGC,KAC1B,GAAIyB,GAAiB5B,EAAO,CAC1B,MAAM6B,EAAQD,EAAcE,YAAY9B,GACxCyB,EAAM7B,MAAQiC,EAAME,WAKpB5B,EAHoB0B,EAAMG,cAAeC,IACvCR,EAAM7B,MAAQqC,IAGlB,GAEF,CAAExB,WAAW,IAGR,CACLgB,QACAxC,SAAUQ,EAAAA,SAAS,WAAM,OAAA,OAAAE,EAAAV,EAASW,YAAT,EAAAD,EAAgBmC,YAAYH,EAAAA,QAAQtC,MAAgB,iEA5BjD,IAAM6C,YAAyBrD,EAAAA,cAAcC"}

package/dist/vue/index.js

@@ -1,18 +1,20 @@
-import { useCapability, usePlugin } from "@embedpdf/core/vue";
-import { CapturePlugin } from "@embedpdf/plugin-capture";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/vue";
+import { CapturePlugin, initialDocumentState } from "@embedpdf/plugin-capture";
 export * from "@embedpdf/plugin-capture";
-import { ref, watch, defineComponent, onMounted, onUnmounted, createElementBlock, createCommentVNode, openBlock, normalizeClass, normalizeStyle } from "vue";
+import { ref, watch, toValue, computed, defineComponent, createElementBlock, createCommentVNode, openBlock, normalizeClass, normalizeStyle } from "vue";
 const useCaptureCapability = () => useCapability(CapturePlugin.id);
 const useCapturePlugin = () => usePlugin(CapturePlugin.id);
-const useCapture = () => {
+const useCapture = (documentId) => {
   const { provides } = useCaptureCapability();
-  const isMarqueeCaptureActive = ref(false);
+  const state = ref(initialDocumentState);
   watch(
-    provides,
-    (providesValue, _, onCleanup) => {
-      if (providesValue) {
-        const unsubscribe = providesValue.onMarqueeCaptureActiveChange((active) => {
-          isMarqueeCaptureActive.value = active;
+    [provides, () => toValue(documentId)],
+    ([providesValue, docId], _, onCleanup) => {
+      if (providesValue && docId) {
+        const scope = providesValue.forDocument(docId);
+        state.value = scope.getState();
+        const unsubscribe = scope.onStateChange((newState) => {
+          state.value = newState;
         });
         onCleanup(unsubscribe);
       }
@@ -20,13 +22,17 @@ const useCapture = () => {
     { immediate: true }
   );
   return {
-    provides,
-    isMarqueeCaptureActive
+    state,
+    provides: computed(() => {
+      var _a;
+      return ((_a = provides.value) == null ? void 0 : _a.forDocument(toValue(documentId))) ?? null;
+    })
   };
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "marquee-capture",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {},
     className: {},
@@ -36,38 +42,51 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const { provides: capturePlugin } = useCaptureCapability();
+    const documentState = useDocumentState(() => props.documentId);
     const rect = ref(null);
-    let unregister;
-    onMounted(() => {
-      if (!capturePlugin.value) return;
-      unregister = capturePlugin.value.registerMarqueeOnPage({
-        pageIndex: props.pageIndex,
-        scale: props.scale,
-        callback: {
-          onPreview: (newRect) => {
-            rect.value = newRect;
-          }
-        }
-      });
-    });
-    onUnmounted(() => {
-      unregister == null ? void 0 : unregister();
+    const actualScale = computed(() => {
+      var _a;
+      if (props.scale !== void 0) return props.scale;
+      return ((_a = documentState.value) == null ? void 0 : _a.scale) ?? 1;
     });
+    watch(
+      [capturePlugin, () => props.documentId, () => props.pageIndex, actualScale],
+      ([plugin, docId, pageIdx, scale], _, onCleanup) => {
+        if (!plugin) {
+          rect.value = null;
+          return;
+        }
+        const unregister = plugin.registerMarqueeOnPage({
+          documentId: docId,
+          pageIndex: pageIdx,
+          scale,
+          callback: {
+            onPreview: (newRect) => {
+              rect.value = newRect;
+            }
+          }
+        });
+        onCleanup(() => {
+          unregister == null ? void 0 : unregister();
+        });
+      },
+      { immediate: true }
+    );
     return (_ctx, _cache) => {
       return rect.value ? (openBlock(), createElementBlock("div", {
         key: 0,
         style: normalizeStyle({
           position: "absolute",
           pointerEvents: "none",
-          left: `${rect.value.origin.x * _ctx.scale}px`,
-          top: `${rect.value.origin.y * _ctx.scale}px`,
-          width: `${rect.value.size.width * _ctx.scale}px`,
-          height: `${rect.value.size.height * _ctx.scale}px`,
-          border: `1px solid ${_ctx.stroke}`,
-          background: _ctx.fill,
+          left: `${rect.value.origin.x * actualScale.value}px`,
+          top: `${rect.value.origin.y * actualScale.value}px`,
+          width: `${rect.value.size.width * actualScale.value}px`,
+          height: `${rect.value.size.height * actualScale.value}px`,
+          border: `1px solid ${__props.stroke}`,
+          background: __props.fill,
           boxSizing: "border-box"
         }),
-        class: normalizeClass(_ctx.className)
+        class: normalizeClass(__props.className)
       }, null, 6)) : createCommentVNode("", true);
     };
   }

package/dist/vue/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-capture.ts","../../src/vue/components/marquee-capture.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport { CapturePlugin } from '@embedpdf/plugin-capture';\nimport { ref, watch } from 'vue';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\nexport const useCapture = () => {\n  const { provides } = useCaptureCapability();\n  const isMarqueeCaptureActive = ref(false);\n\n  watch(\n    provides,\n    (providesValue, _, onCleanup) => {\n      if (providesValue) {\n        const unsubscribe = providesValue.onMarqueeCaptureActiveChange((active) => {\n          isMarqueeCaptureActive.value = active;\n        });\n        onCleanup(unsubscribe);\n      }\n    },\n    { immediate: true },\n  );\n\n  return {\n    provides,\n    isMarqueeCaptureActive,\n  };\n};\n","<template>\n  <div\n    v-if=\"rect\"\n    :style=\"{\n      position: 'absolute',\n      pointerEvents: 'none',\n      left: `${rect.origin.x * scale}px`,\n      top: `${rect.origin.y * scale}px`,\n      width: `${rect.size.width * scale}px`,\n      height: `${rect.size.height * scale}px`,\n      border: `1px solid ${stroke}`,\n      background: fill,\n      boxSizing: 'border-box',\n    }\"\n    :class=\"className\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport type { Rect } from '@embedpdf/models';\nimport { useCaptureCapability } from '../hooks/use-capture';\n\ninterface MarqueeCaptureProps {\n  /** Index of the page this layer lives on */\n  pageIndex: number;\n  /** Scale of the page */\n  scale: number;\n  /** Optional CSS class applied to the marquee rectangle */\n  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nconst props = withDefaults(defineProps<MarqueeCaptureProps>(), {\n  stroke: 'rgba(33,150,243,0.8)',\n  fill: 'rgba(33,150,243,0.15)',\n});\n\nconst { provides: capturePlugin } = useCaptureCapability();\nconst rect = ref<Rect | null>(null);\n\nlet unregister: (() => void) | undefined;\n\nonMounted(() => {\n  if (!capturePlugin.value) return;\n\n  unregister = capturePlugin.value.registerMarqueeOnPage({\n    pageIndex: props.pageIndex,\n    scale: props.scale,\n    callback: {\n      onPreview: (newRect) => {\n        rect.value = newRect;\n      },\n    },\n  });\n});\n\nonUnmounted(() => {\n  unregister?.();\n});\n</script>\n"],"names":["_createElementBlock","_normalizeStyle","scale","stroke","fill","className"],"mappings":";;;;AAIO,MAAM,uBAAuB,MAAM,cAA6B,cAAc,EAAE;AAChF,MAAM,mBAAmB,MAAM,UAAyB,cAAc,EAAE;AAExE,MAAM,aAAa,MAAM;AACxB,QAAA,EAAE,SAAS,IAAI,qBAAqB;AACpC,QAAA,yBAAyB,IAAI,KAAK;AAExC;AAAA,IACE;AAAA,IACA,CAAC,eAAe,GAAG,cAAc;AAC/B,UAAI,eAAe;AACjB,cAAM,cAAc,cAAc,6BAA6B,CAAC,WAAW;AACzE,iCAAuB,QAAQ;AAAA,QAAA,CAChC;AACD,kBAAU,WAAW;AAAA,MAAA;AAAA,IAEzB;AAAA,IACA,EAAE,WAAW,KAAK;AAAA,EACpB;AAEO,SAAA;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;;;;;;;;;ACOA,UAAM,QAAQ;AAKd,UAAM,EAAE,UAAU,cAAc,IAAI,qBAAqB;AACnD,UAAA,OAAO,IAAiB,IAAI;AAE9B,QAAA;AAEJ,cAAU,MAAM;AACV,UAAA,CAAC,cAAc,MAAO;AAEb,mBAAA,cAAc,MAAM,sBAAsB;AAAA,QACrD,WAAW,MAAM;AAAA,QACjB,OAAO,MAAM;AAAA,QACb,UAAU;AAAA,UACR,WAAW,CAAC,YAAY;AACtB,iBAAK,QAAQ;AAAA,UAAA;AAAA,QACf;AAAA,MACF,CACD;AAAA,IAAA,CACF;AAED,gBAAY,MAAM;AACH;AAAA,IAAA,CACd;;aA3DS,KAAI,sBADZA,mBAcE,OAAA;AAAA;QAZC,OAAKC,eAAA;AAAA;;UAA4E,MAAA,GAAA,KAAA,MAAK,OAAO,IAAIC,KAAK,KAAA;AAAA,UAAoB,KAAA,GAAA,KAAA,MAAK,OAAO,IAAIA,KAAK,KAAA;AAAA,UAAsB,OAAA,GAAA,KAAA,MAAK,KAAK,QAAQA,KAAK,KAAA;AAAA,UAAuB,QAAA,GAAA,KAAA,MAAK,KAAK,SAASA,KAAK,KAAA;AAAA,+BAAiCC,KAAM,MAAA;AAAA,sBAAsBC,KAAI;AAAA;;QAW5S,sBAAOC,KAAS,SAAA;AAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-capture.ts","../../src/vue/components/marquee-capture.vue"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport {\n  CapturePlugin,\n  CaptureDocumentState,\n  initialDocumentState,\n} from '@embedpdf/plugin-capture';\nimport { ref, watch, toValue, MaybeRefOrGetter, computed } from 'vue';\n\nexport const useCaptureCapability = () => useCapability<CapturePlugin>(CapturePlugin.id);\nexport const useCapturePlugin = () => usePlugin<CapturePlugin>(CapturePlugin.id);\n\n/**\n * Hook for capture state for a specific document\n * @param documentId Document ID (can be ref, computed, getter, or plain value)\n */\nexport const useCapture = (documentId: MaybeRefOrGetter<string>) => {\n  const { provides } = useCaptureCapability();\n  const state = ref<CaptureDocumentState>(initialDocumentState);\n\n  watch(\n    [provides, () => toValue(documentId)],\n    ([providesValue, docId], _, onCleanup) => {\n      if (providesValue && docId) {\n        const scope = providesValue.forDocument(docId);\n        state.value = scope.getState();\n\n        const unsubscribe = scope.onStateChange((newState) => {\n          state.value = newState;\n        });\n        onCleanup(unsubscribe);\n      }\n    },\n    { immediate: true },\n  );\n\n  return {\n    state,\n    provides: computed(() => provides.value?.forDocument(toValue(documentId)) ?? null),\n  };\n};\n","<template>\n  <div\n    v-if=\"rect\"\n    :style=\"{\n      position: 'absolute',\n      pointerEvents: 'none',\n      left: `${rect.origin.x * actualScale}px`,\n      top: `${rect.origin.y * actualScale}px`,\n      width: `${rect.size.width * actualScale}px`,\n      height: `${rect.size.height * actualScale}px`,\n      border: `1px solid ${stroke}`,\n      background: fill,\n      boxSizing: 'border-box',\n    }\"\n    :class=\"className\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, watch } from 'vue';\nimport type { Rect } from '@embedpdf/models';\nimport { useDocumentState } from '@embedpdf/core/vue';\nimport { useCaptureCapability } from '../hooks/use-capture';\n\ninterface MarqueeCaptureProps {\n  /** Document ID */\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  className?: string;\n  /** Stroke / fill colours (defaults below) */\n  stroke?: string;\n  fill?: string;\n}\n\nconst props = withDefaults(defineProps<MarqueeCaptureProps>(), {\n  stroke: 'rgba(33,150,243,0.8)',\n  fill: 'rgba(33,150,243,0.15)',\n});\n\nconst { provides: capturePlugin } = useCaptureCapability();\nconst documentState = useDocumentState(() => props.documentId);\nconst rect = ref<Rect | null>(null);\n\nconst actualScale = computed(() => {\n  if (props.scale !== undefined) return props.scale;\n  return documentState.value?.scale ?? 1;\n});\n\nwatch(\n  [capturePlugin, () => props.documentId, () => props.pageIndex, actualScale],\n  ([plugin, docId, pageIdx, scale], _, onCleanup) => {\n    if (!plugin) {\n      rect.value = null;\n      return;\n    }\n\n    const unregister = plugin.registerMarqueeOnPage({\n      documentId: docId,\n      pageIndex: pageIdx,\n      scale,\n      callback: {\n        onPreview: (newRect) => {\n          rect.value = newRect;\n        },\n      },\n    });\n\n    onCleanup(() => {\n      unregister?.();\n    });\n  },\n  { immediate: true },\n);\n</script>\n"],"names":["_createElementBlock","_normalizeStyle"],"mappings":";;;;AAQO,MAAM,uBAAuB,MAAM,cAA6B,cAAc,EAAE;AAChF,MAAM,mBAAmB,MAAM,UAAyB,cAAc,EAAE;AAMxE,MAAM,aAAa,CAAC,eAAyC;AAClE,QAAM,EAAE,SAAA,IAAa,qBAAA;AACrB,QAAM,QAAQ,IAA0B,oBAAoB;AAE5D;AAAA,IACE,CAAC,UAAU,MAAM,QAAQ,UAAU,CAAC;AAAA,IACpC,CAAC,CAAC,eAAe,KAAK,GAAG,GAAG,cAAc;AACxC,UAAI,iBAAiB,OAAO;AAC1B,cAAM,QAAQ,cAAc,YAAY,KAAK;AAC7C,cAAM,QAAQ,MAAM,SAAA;AAEpB,cAAM,cAAc,MAAM,cAAc,CAAC,aAAa;AACpD,gBAAM,QAAQ;AAAA,QAChB,CAAC;AACD,kBAAU,WAAW;AAAA,MACvB;AAAA,IACF;AAAA,IACA,EAAE,WAAW,KAAA;AAAA,EAAK;AAGpB,SAAO;AAAA,IACL;AAAA,IACA,UAAU,SAAS,MAAA;;AAAM,6BAAS,UAAT,mBAAgB,YAAY,QAAQ,UAAU,OAAM;AAAA,KAAI;AAAA,EAAA;AAErF;;;;;;;;;;;;ACDA,UAAM,QAAQ;AAKd,UAAM,EAAE,UAAU,cAAA,IAAkB,qBAAA;AACpC,UAAM,gBAAgB,iBAAiB,MAAM,MAAM,UAAU;AAC7D,UAAM,OAAO,IAAiB,IAAI;AAElC,UAAM,cAAc,SAAS,MAAM;;AACjC,UAAI,MAAM,UAAU,OAAW,QAAO,MAAM;AAC5C,eAAO,mBAAc,UAAd,mBAAqB,UAAS;AAAA,IACvC,CAAC;AAED;AAAA,MACE,CAAC,eAAe,MAAM,MAAM,YAAY,MAAM,MAAM,WAAW,WAAW;AAAA,MAC1E,CAAC,CAAC,QAAQ,OAAO,SAAS,KAAK,GAAG,GAAG,cAAc;AACjD,YAAI,CAAC,QAAQ;AACX,eAAK,QAAQ;AACb;AAAA,QACF;AAEA,cAAM,aAAa,OAAO,sBAAsB;AAAA,UAC9C,YAAY;AAAA,UACZ,WAAW;AAAA,UACX;AAAA,UACA,UAAU;AAAA,YACR,WAAW,CAAC,YAAY;AACtB,mBAAK,QAAQ;AAAA,YACf;AAAA,UAAA;AAAA,QACF,CACD;AAED,kBAAU,MAAM;AACd;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,EAAE,WAAW,KAAA;AAAA,IAAK;;aAzEV,KAAA,sBADRA,mBAcE,OAAA;AAAA;QAZC,OAAKC,eAAA;AAAA;;UAA4E,MAAA,GAAA,KAAA,MAAK,OAAO,IAAI,YAAA,KAAW;AAAA,UAAoB,KAAA,GAAA,KAAA,MAAK,OAAO,IAAI,YAAA,KAAW;AAAA,UAAsB,OAAA,GAAA,KAAA,MAAK,KAAK,QAAQ,YAAA,KAAW;AAAA,UAAuB,QAAA,GAAA,KAAA,MAAK,KAAK,SAAS,YAAA,KAAW;AAAA,+BAAiC,QAAA,MAAM;AAAA,sBAAsB,QAAA;AAAA;;QAWhU,sBAAO,QAAA,SAAS;AAAA,MAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embedpdf/plugin-capture",
-  "version": "1.5.0",
+  "version": "2.0.0-next.1",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",
@@ -34,15 +34,15 @@
     }
   },
   "dependencies": {
-    "@embedpdf/models": "1.5.0"
+    "@embedpdf/models": "2.0.0-next.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
     "typescript": "^5.0.0",
     "@embedpdf/build": "1.1.0",
-    "@embedpdf/core": "1.5.0",
-    "@embedpdf/plugin-render": "1.5.0",
-    "@embedpdf/plugin-interaction-manager": "1.5.0"
+    "@embedpdf/core": "2.0.0-next.1",
+    "@embedpdf/plugin-interaction-manager": "2.0.0-next.1",
+    "@embedpdf/plugin-render": "2.0.0-next.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -50,9 +50,9 @@
     "preact": "^10.26.4",
     "vue": ">=3.2.0",
     "svelte": ">=5 <6",
-    "@embedpdf/core": "1.5.0",
-    "@embedpdf/plugin-render": "1.5.0",
-    "@embedpdf/plugin-interaction-manager": "1.5.0"
+    "@embedpdf/plugin-interaction-manager": "2.0.0-next.1",
+    "@embedpdf/core": "2.0.0-next.1",
+    "@embedpdf/plugin-render": "2.0.0-next.1"
   },
   "files": [
     "dist",