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

package/dist/vue/index.js

@@ -1,28 +1,39 @@
-import { ref, watchEffect, readonly, defineComponent, shallowRef, toRaw, computed, watch, useSlots, createElementBlock, openBlock, createElementVNode, createVNode, mergeProps, unref, renderSlot, createCommentVNode, Fragment, renderList, withCtx, normalizeStyle, onMounted, toDisplayString, onUnmounted, createBlock, normalizeProps, guardReactiveProps } from "vue";
-import { usePlugin, useCapability } from "@embedpdf/core/vue";
-import { AnnotationPlugin, initialState, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isLine, isPolyline, isPolygon, isFreeText, isStamp, isUnderline, isStrikeout, isSquiggly, isHighlight } from "@embedpdf/plugin-annotation";
+import { ref, toValue, watch, computed, defineComponent, shallowRef, toRaw, useSlots, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, mergeProps, unref, renderSlot, Fragment, renderList, withCtx, resolveDynamicComponent, normalizeStyle, onMounted, toDisplayString, onUnmounted, createVNode, watchEffect, normalizeProps, guardReactiveProps } from "vue";
+import { usePlugin, useCapability, useDocumentState } from "@embedpdf/core/vue";
+import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isLine, isPolyline, isPolygon, isFreeText, isStamp, isUnderline, isStrikeout, isSquiggly, isHighlight } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { useInteractionHandles, useDoublePressProps, CounterRotate, deepToRaw } from "@embedpdf/utils/vue";
-import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype } from "@embedpdf/models";
+import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
-const useAnnotation = () => {
+const useAnnotation = (documentId) => {
+  var _a, _b;
   const { provides } = useAnnotationCapability();
-  const dummyConfig = { enabled: true };
-  const state = ref(initialState(dummyConfig));
-  watchEffect((onCleanup) => {
-    if (provides.value) {
-      const unsubscribe = provides.value.onStateChange((newState) => {
-        state.value = newState;
-      });
-      onCleanup(unsubscribe);
-    }
-  });
+  const state = ref(
+    ((_b = (_a = provides == null ? void 0 : provides.value) == null ? void 0 : _a.forDocument(toValue(documentId))) == null ? void 0 : _b.getState()) ?? initialDocumentState()
+  );
+  watch(
+    [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);
+      }
+    },
+    { immediate: true }
+  );
   return {
-    state: readonly(state),
-    provides
+    state,
+    provides: computed(() => {
+      var _a2;
+      return ((_a2 = provides.value) == null ? void 0 : _a2.forDocument(toValue(documentId))) ?? null;
+    })
   };
 };
 const _hoisted_1$8 = { "data-no-interaction": "" };
@@ -34,6 +45,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "annotation-container",
   props: {
     scale: {},
+    documentId: {},
     pageIndex: {},
     rotation: {},
     pageWidth: {},
@@ -44,6 +56,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     isResizable: { type: Boolean },
     lockAspectRatio: { type: Boolean, default: false },
     vertexConfig: {},
+    selectionMenu: {},
     outlineOffset: { default: 1 },
     onDoubleClick: {},
     onSelect: {},
@@ -53,11 +66,48 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const preview = shallowRef(toRaw(props.trackedAnnotation.object));
-    const { provides: annotationProvides } = useAnnotationCapability();
+    const { provides: annotationCapability } = useAnnotationCapability();
     const gestureBaseRef = ref(null);
+    const annotationProvides = computed(
+      () => annotationCapability.value ? annotationCapability.value.forDocument(props.documentId) : null
+    );
     const currentObject = computed(
       () => ({ ...toRaw(props.trackedAnnotation.object), ...toRaw(preview.value) })
     );
+    const shouldShowMenu = computed(() => {
+      return props.isSelected && (props.selectionMenu || slots["selection-menu"]);
+    });
+    const menuRect = computed(() => ({
+      origin: {
+        x: currentObject.value.rect.origin.x * props.scale,
+        y: currentObject.value.rect.origin.y * props.scale
+      },
+      size: {
+        width: currentObject.value.rect.size.width * props.scale,
+        height: currentObject.value.rect.size.height * props.scale
+      }
+    }));
+    const menuContext = computed(() => ({
+      type: "annotation",
+      annotation: props.trackedAnnotation,
+      pageIndex: props.pageIndex
+    }));
+    const menuPlacement = computed(() => ({
+      suggestTop: false,
+      // Could calculate based on position in viewport
+      spaceAbove: 0,
+      spaceBelow: 0
+    }));
+    const renderSelectionMenu = (rect, menuWrapperProps) => {
+      if (!props.selectionMenu) return null;
+      return props.selectionMenu({
+        rect,
+        menuWrapperProps,
+        selected: props.isSelected,
+        placement: menuPlacement.value,
+        context: menuContext.value
+      });
+    };
     const elementSnapshot = computed(() => {
       const obj = toRaw(currentObject.value);
       return obj.rect;
@@ -71,8 +121,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       minWidth: 10,
       minHeight: 10,
       boundingBox: {
-        width: props.pageWidth / props.scale,
-        height: props.pageHeight / props.scale
+        width: props.pageWidth,
+        height: props.pageHeight
       }
     }));
     const { dragProps, vertices, resize } = useInteractionHandles({
@@ -92,7 +142,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           }
           const base = gestureBaseRef.value ?? currentObject.value;
           const changes = event.transformData.changes.vertices ? (_b = props.vertexConfig) == null ? void 0 : _b.transformAnnotation(toRaw(base), event.transformData.changes.vertices) : { rect: event.transformData.changes.rect };
-          const patched = (_c = annotationProvides.value) == null ? void 0 : _c.transformAnnotation(base, {
+          const patched = (_c = annotationCapability.value) == null ? void 0 : _c.transformAnnotation(base, {
             type: event.transformData.type,
             changes,
             metadata: event.transformData.metadata
@@ -149,7 +199,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$8, [
         createElementVNode("div", mergeProps({ ...unref(dragProps), ...unref(doubleProps) }, { style: containerStyle.value }), [
           renderSlot(_ctx.$slots, "default", { annotation: currentObject.value }),
-          _ctx.isSelected && _ctx.isResizable ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(resize), ({ key, style, ...handle }) => {
+          __props.isSelected && __props.isResizable ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(resize), ({ key, style, ...handle }) => {
             return openBlock(), createElementBlock(Fragment, { key }, [
               unref(slots)["resize-handle"] ? renderSlot(_ctx.$slots, "resize-handle", mergeProps({
                 key: 0,
@@ -166,7 +216,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               }), null, 16))
             ], 64);
           }), 128)) : createCommentVNode("", true),
-          _ctx.isSelected && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
+          __props.isSelected && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
             return openBlock(), createElementBlock(Fragment, { key }, [
               unref(slots)["vertex-handle"] ? renderSlot(_ctx.$slots, "vertex-handle", mergeProps({
                 key: 0,
@@ -184,29 +234,23 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ], 64);
           }), 128)) : createCommentVNode("", true)
         ], 16),
-        createVNode(unref(CounterRotate), {
-          rect: {
-            origin: {
-              x: currentObject.value.rect.origin.x * _ctx.scale,
-              y: currentObject.value.rect.origin.y * _ctx.scale
-            },
-            size: {
-              width: currentObject.value.rect.size.width * _ctx.scale,
-              height: currentObject.value.rect.size.height * _ctx.scale
-            }
-          },
-          rotation: _ctx.rotation
+        shouldShowMenu.value ? (openBlock(), createBlock(unref(CounterRotate), {
+          key: 0,
+          rect: menuRect.value,
+          rotation: __props.rotation
         }, {
           default: withCtx(({ rect, menuWrapperProps }) => [
-            renderSlot(_ctx.$slots, "selection-menu", {
-              annotation: _ctx.trackedAnnotation,
-              selected: _ctx.isSelected,
+            __props.selectionMenu ? (openBlock(), createBlock(resolveDynamicComponent(renderSelectionMenu(rect, menuWrapperProps)), { key: 0 })) : renderSlot(_ctx.$slots, "selection-menu", {
+              key: 1,
+              context: menuContext.value,
+              selected: __props.isSelected,
               rect,
+              placement: menuPlacement.value,
               menuWrapperProps
             })
           ]),
           _: 3
-        }, 8, ["rect", "rotation"])
+        }, 8, ["rect", "rotation"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -264,19 +308,19 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           cy: geometry.value.cy,
           rx: geometry.value.rx,
           ry: geometry.value.ry,
-          fill: _ctx.color,
-          opacity: _ctx.opacity,
+          fill: __props.color,
+          opacity: __props.opacity,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
-            cursor: _ctx.isSelected ? "move" : "pointer",
-            pointerEvents: _ctx.isSelected ? "none" : _ctx.color === "transparent" ? "visibleStroke" : "visible",
-            stroke: _ctx.strokeColor ?? _ctx.color,
-            strokeWidth: _ctx.strokeWidth,
-            ..._ctx.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = _ctx.strokeDashArray) == null ? void 0 : _a.join(",")
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible",
+            stroke: __props.strokeColor ?? __props.color,
+            strokeWidth: __props.strokeWidth,
+            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
             }
           })
         }, null, 44, _hoisted_2$5)
@@ -363,16 +407,16 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle({
           position: "absolute",
-          width: `${_ctx.annotation.object.rect.size.width * _ctx.scale}px`,
-          height: `${_ctx.annotation.object.rect.size.height * _ctx.scale}px`,
-          cursor: _ctx.isSelected && !_ctx.isEditing ? "move" : "default",
-          pointerEvents: _ctx.isSelected && !_ctx.isEditing ? "none" : "auto",
+          width: `${__props.annotation.object.rect.size.width * __props.scale}px`,
+          height: `${__props.annotation.object.rect.size.height * __props.scale}px`,
+          cursor: __props.isSelected && !__props.isEditing ? "move" : "default",
+          pointerEvents: __props.isSelected && !__props.isEditing ? "none" : "auto",
           zIndex: 2
         }),
         onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-        (...args) => _ctx.onClick && _ctx.onClick(...args)),
+        (...args) => __props.onClick && __props.onClick(...args)),
         onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-        (...args) => _ctx.onClick && _ctx.onClick(...args))
+        (...args) => __props.onClick && __props.onClick(...args))
       }, [
         createElementVNode("span", {
           ref_key: "editorRef",
@@ -380,8 +424,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           onBlur: handleBlur,
           tabindex: "0",
           style: normalizeStyle(editorStyle.value),
-          contenteditable: _ctx.isEditing
-        }, toDisplayString(_ctx.annotation.object.contents), 45, _hoisted_1$6)
+          contenteditable: __props.isEditing
+        }, toDisplayString(__props.annotation.object.contents), 45, _hoisted_1$6)
       ], 36);
     };
   }
@@ -427,23 +471,23 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }),
         width: width.value,
         height: height.value,
-        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.rect.size.height}`
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(paths.value, (d, i) => {
           return openBlock(), createElementBlock("path", {
             key: i,
             d,
             fill: "none",
-            opacity: _ctx.opacity,
+            opacity: __props.opacity,
             onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => _ctx.onClick && _ctx.onClick(...args)),
+            (...args) => __props.onClick && __props.onClick(...args)),
             onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-            (...args) => _ctx.onClick && _ctx.onClick(...args)),
+            (...args) => __props.onClick && __props.onClick(...args)),
             style: normalizeStyle({
-              cursor: _ctx.isSelected ? "move" : "pointer",
-              pointerEvents: _ctx.isSelected ? "none" : "visibleStroke",
-              stroke: _ctx.color,
-              strokeWidth: _ctx.strokeWidth,
+              cursor: __props.isSelected ? "move" : "pointer",
+              pointerEvents: __props.isSelected ? "none" : "visibleStroke",
+              stroke: __props.color,
+              strokeWidth: __props.strokeWidth,
               strokeLinecap: "round",
               strokeLinejoin: "round"
             })
@@ -523,26 +567,26 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         }),
         width: width.value,
         height: height.value,
-        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.rect.size.height}`
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
       }, [
         createElementVNode("line", {
           x1: localLine.value.x1,
           y1: localLine.value.y1,
           x2: localLine.value.x2,
           y2: localLine.value.y2,
-          opacity: _ctx.opacity,
+          opacity: __props.opacity,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
-            cursor: _ctx.isSelected ? "move" : "pointer",
-            pointerEvents: _ctx.isSelected ? "none" : "visibleStroke",
-            stroke: _ctx.strokeColor,
-            strokeWidth: _ctx.strokeWidth,
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : "visibleStroke",
+            stroke: __props.strokeColor,
+            strokeWidth: __props.strokeWidth,
             strokeLinecap: "butt",
-            ..._ctx.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = _ctx.strokeDashArray) == null ? void 0 : _a.join(",")
+            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
             }
           })
         }, null, 44, _hoisted_2$3),
@@ -551,24 +595,24 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           d: endings.value.start.d,
           transform: endings.value.start.transform,
           onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
-          stroke: _ctx.strokeColor,
+          (...args) => __props.onClick && __props.onClick(...args)),
+          stroke: __props.strokeColor,
           style: normalizeStyle(getEndingStyle(endings.value.start)),
-          fill: endings.value.start.filled ? _ctx.color : "none"
+          fill: endings.value.start.filled ? __props.color : "none"
         }, null, 44, _hoisted_3$2)) : createCommentVNode("", true),
         endings.value.end ? (openBlock(), createElementBlock("path", {
           key: 1,
           d: endings.value.end.d,
           transform: endings.value.end.transform,
           onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
-          stroke: _ctx.strokeColor,
+          (...args) => __props.onClick && __props.onClick(...args)),
+          stroke: __props.strokeColor,
           style: normalizeStyle(getEndingStyle(endings.value.end)),
-          fill: endings.value.end.filled ? _ctx.color : "none"
+          fill: endings.value.end.filled ? __props.color : "none"
         }, null, 44, _hoisted_4$2)) : createCommentVNode("", true)
       ], 12, _hoisted_1$4);
     };
@@ -628,25 +672,25 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         }),
         width: width.value,
         height: height.value,
-        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.rect.size.height}`
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
       }, [
         createElementVNode("path", {
           d: pathData.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
-          opacity: _ctx.opacity,
+          (...args) => __props.onClick && __props.onClick(...args)),
+          opacity: __props.opacity,
           style: normalizeStyle({
-            fill: _ctx.currentVertex ? "none" : _ctx.color,
-            stroke: _ctx.strokeColor ?? _ctx.color,
-            strokeWidth: _ctx.strokeWidth,
-            cursor: _ctx.isSelected ? "move" : "pointer",
-            pointerEvents: _ctx.isSelected ? "none" : _ctx.color === "transparent" ? "visibleStroke" : "visible",
+            fill: __props.currentVertex ? "none" : __props.color,
+            stroke: __props.strokeColor ?? __props.color,
+            strokeWidth: __props.strokeWidth,
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible",
             strokeLinecap: "butt",
             strokeLinejoin: "miter",
-            ..._ctx.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = _ctx.strokeDashArray) == null ? void 0 : _a.join(",")
+            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
             }
           })
         }, null, 44, _hoisted_2$2),
@@ -655,22 +699,22 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           d: `M ${localPts.value[localPts.value.length - 1].x} ${localPts.value[localPts.value.length - 1].y} L ${localPts.value[0].x} ${localPts.value[0].y}`,
           fill: "none",
           style: normalizeStyle({
-            stroke: _ctx.strokeColor,
-            strokeWidth: _ctx.strokeWidth,
+            stroke: __props.strokeColor,
+            strokeWidth: __props.strokeWidth,
             strokeDasharray: "4,4",
             opacity: 0.7
           })
         }, null, 12, _hoisted_3$1)) : createCommentVNode("", true),
         isPreviewing.value && localPts.value.length >= 2 ? (openBlock(), createElementBlock("rect", {
           key: 1,
-          x: localPts.value[0].x - _ctx.handleSize / _ctx.scale / 2,
-          y: localPts.value[0].y - _ctx.handleSize / _ctx.scale / 2,
-          width: _ctx.handleSize / _ctx.scale,
-          height: _ctx.handleSize / _ctx.scale,
-          fill: _ctx.strokeColor,
+          x: localPts.value[0].x - __props.handleSize / __props.scale / 2,
+          y: localPts.value[0].y - __props.handleSize / __props.scale / 2,
+          width: __props.handleSize / __props.scale,
+          height: __props.handleSize / __props.scale,
+          fill: __props.strokeColor,
           opacity: 0.4,
-          stroke: _ctx.strokeColor,
-          "stroke-width": _ctx.strokeWidth / 2
+          stroke: __props.strokeColor,
+          "stroke-width": __props.strokeWidth / 2
         }, null, 8, _hoisted_4$1)) : createCommentVNode("", true)
       ], 12, _hoisted_1$3);
     };
@@ -753,21 +797,21 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         }),
         width: width.value,
         height: height.value,
-        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.rect.size.height}`
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
       }, [
         createElementVNode("path", {
           d: pathData.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
-          opacity: _ctx.opacity,
+          (...args) => __props.onClick && __props.onClick(...args)),
+          opacity: __props.opacity,
           style: normalizeStyle({
             fill: "none",
-            stroke: _ctx.strokeColor ?? _ctx.color,
-            strokeWidth: _ctx.strokeWidth,
-            cursor: _ctx.isSelected ? "move" : "pointer",
-            pointerEvents: _ctx.isSelected ? "none" : "visibleStroke",
+            stroke: __props.strokeColor ?? __props.color,
+            strokeWidth: __props.strokeWidth,
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : "visibleStroke",
             strokeLinecap: "butt",
             strokeLinejoin: "miter"
           })
@@ -776,24 +820,24 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           key: 0,
           d: endings.value.start.d,
           transform: endings.value.start.transform,
-          stroke: _ctx.strokeColor,
-          fill: endings.value.start.filled ? _ctx.color : "none",
+          stroke: __props.strokeColor,
+          fill: endings.value.start.filled ? __props.color : "none",
           onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle(getEndingStyle(endings.value.start))
         }, null, 44, _hoisted_3)) : createCommentVNode("", true),
         endings.value.end ? (openBlock(), createElementBlock("path", {
           key: 1,
           d: endings.value.end.d,
           transform: endings.value.end.transform,
-          stroke: _ctx.strokeColor,
-          fill: endings.value.end.filled ? _ctx.color : "none",
+          stroke: __props.strokeColor,
+          fill: endings.value.end.filled ? __props.color : "none",
           onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle(getEndingStyle(endings.value.end))
         }, null, 44, _hoisted_4)) : createCommentVNode("", true)
       ], 12, _hoisted_1$2);
@@ -844,26 +888,26 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         }),
         width: svgWidth.value,
         height: svgHeight.value,
-        viewBox: `0 0 ${geometry.value.width + _ctx.strokeWidth} ${geometry.value.height + _ctx.strokeWidth}`
+        viewBox: `0 0 ${geometry.value.width + __props.strokeWidth} ${geometry.value.height + __props.strokeWidth}`
       }, [
         createElementVNode("rect", {
           x: geometry.value.x,
           y: geometry.value.y,
           width: geometry.value.width,
           height: geometry.value.height,
-          fill: _ctx.color,
-          opacity: _ctx.opacity,
+          fill: __props.color,
+          opacity: __props.opacity,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
-            cursor: _ctx.isSelected ? "move" : "pointer",
-            pointerEvents: _ctx.isSelected ? "none" : _ctx.color === "transparent" ? "visibleStroke" : "visible",
-            stroke: _ctx.strokeColor ?? _ctx.color,
-            strokeWidth: _ctx.strokeWidth,
-            ..._ctx.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = _ctx.strokeDashArray) == null ? void 0 : _a.join(",")
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible",
+            stroke: __props.strokeColor ?? __props.color,
+            strokeWidth: __props.strokeWidth,
+            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
             }
           })
         }, null, 44, _hoisted_2)
@@ -875,6 +919,7 @@ const _hoisted_1 = ["src"];
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "render-annotation",
   props: {
+    documentId: {},
     pageIndex: {},
     annotation: {},
     scaleFactor: { default: 1 },
@@ -893,6 +938,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       () => [
         props.pageIndex,
         props.scaleFactor,
+        props.documentId,
         annotationId.value,
         rectWidth.value,
         rectHeight.value,
@@ -904,7 +950,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
             URL.revokeObjectURL(urlRef.value);
             urlRef.value = null;
           }
-          const task = annotationProvides.value.renderAnnotation({
+          const task = annotationProvides.value.forDocument(props.documentId).renderAnnotation({
             pageIndex: props.pageIndex,
             annotation: deepToRaw(props.annotation),
             options: {
@@ -960,7 +1006,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           width: "100%",
           height: "100%",
           display: "block",
-          ..._ctx.style
+          ...__props.style
         })
       }, null, 44, _hoisted_1)) : createCommentVNode("", true);
     };
@@ -971,6 +1017,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   props: {
     isSelected: { type: Boolean },
     annotation: {},
+    documentId: {},
     pageIndex: {},
     scale: {},
     onClick: { type: Function }
@@ -983,19 +1030,20 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           width: "100%",
           height: "100%",
           zIndex: 2,
-          pointerEvents: _ctx.isSelected ? "none" : "auto",
+          pointerEvents: __props.isSelected ? "none" : "auto",
           cursor: "pointer"
         }),
         onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-        (...args) => _ctx.onClick && _ctx.onClick(...args)),
+        (...args) => __props.onClick && __props.onClick(...args)),
         onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-        (...args) => _ctx.onClick && _ctx.onClick(...args))
+        (...args) => __props.onClick && __props.onClick(...args))
       }, [
         createVNode(_sfc_main$a, {
-          pageIndex: _ctx.pageIndex,
-          annotation: { ..._ctx.annotation.object, id: _ctx.annotation.object.id },
-          scaleFactor: _ctx.scale
-        }, null, 8, ["pageIndex", "annotation", "scaleFactor"])
+          documentId: __props.documentId,
+          pageIndex: __props.pageIndex,
+          annotation: { ...__props.annotation.object, id: __props.annotation.object.id },
+          scaleFactor: __props.scale
+        }, null, 8, ["documentId", "pageIndex", "annotation", "scaleFactor"])
       ], 36);
     };
   }
@@ -1012,24 +1060,24 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.segmentRects, (b, i) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (b, i) => {
         return openBlock(), createElementBlock("div", {
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
-            left: `${(_ctx.rect ? b.origin.x - _ctx.rect.origin.x : b.origin.x) * _ctx.scale}px`,
-            top: `${(_ctx.rect ? b.origin.y - _ctx.rect.origin.y : b.origin.y) * _ctx.scale}px`,
-            width: `${b.size.width * _ctx.scale}px`,
-            height: `${b.size.height * _ctx.scale}px`,
-            background: _ctx.color,
-            opacity: _ctx.opacity,
-            pointerEvents: _ctx.onClick ? "auto" : "none",
-            cursor: _ctx.onClick ? "pointer" : "default",
-            zIndex: _ctx.onClick ? 1 : void 0
+            left: `${(__props.rect ? b.origin.x - __props.rect.origin.x : b.origin.x) * __props.scale}px`,
+            top: `${(__props.rect ? b.origin.y - __props.rect.origin.y : b.origin.y) * __props.scale}px`,
+            width: `${b.size.width * __props.scale}px`,
+            height: `${b.size.height * __props.scale}px`,
+            background: __props.color,
+            opacity: __props.opacity,
+            pointerEvents: __props.onClick ? "auto" : "none",
+            cursor: __props.onClick ? "pointer" : "default",
+            zIndex: __props.onClick ? 1 : void 0
           })
         }, null, 36);
       }), 128);
@@ -1060,23 +1108,23 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
     });
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.segmentRects, (r, i) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
         return openBlock(), createElementBlock("div", {
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
-            left: `${(_ctx.rect ? r.origin.x - _ctx.rect.origin.x : r.origin.x) * _ctx.scale}px`,
-            top: `${(_ctx.rect ? r.origin.y - _ctx.rect.origin.y : r.origin.y) * _ctx.scale}px`,
-            width: `${r.size.width * _ctx.scale}px`,
-            height: `${r.size.height * _ctx.scale}px`,
+            left: `${(__props.rect ? r.origin.x - __props.rect.origin.x : r.origin.x) * __props.scale}px`,
+            top: `${(__props.rect ? r.origin.y - __props.rect.origin.y : r.origin.y) * __props.scale}px`,
+            width: `${r.size.width * __props.scale}px`,
+            height: `${r.size.height * __props.scale}px`,
             background: "transparent",
-            pointerEvents: _ctx.onClick ? "auto" : "none",
-            cursor: _ctx.onClick ? "pointer" : "default",
-            zIndex: _ctx.onClick ? 1 : 0
+            pointerEvents: __props.onClick ? "auto" : "none",
+            cursor: __props.onClick ? "pointer" : "default",
+            zIndex: __props.onClick ? 1 : 0
           })
         }, [
           createElementVNode("div", {
@@ -1089,7 +1137,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               backgroundImage: svgDataUri.value,
               backgroundRepeat: "repeat-x",
               backgroundSize: `${period.value}px ${amplitude.value * 2}px`,
-              opacity: _ctx.opacity,
+              opacity: __props.opacity,
               pointerEvents: "none"
             })
           }, null, 4)
@@ -1112,23 +1160,23 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const thickness = computed(() => 2 * props.scale);
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.segmentRects, (r, i) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
         return openBlock(), createElementBlock("div", {
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
-            left: `${(_ctx.rect ? r.origin.x - _ctx.rect.origin.x : r.origin.x) * _ctx.scale}px`,
-            top: `${(_ctx.rect ? r.origin.y - _ctx.rect.origin.y : r.origin.y) * _ctx.scale}px`,
-            width: `${r.size.width * _ctx.scale}px`,
-            height: `${r.size.height * _ctx.scale}px`,
+            left: `${(__props.rect ? r.origin.x - __props.rect.origin.x : r.origin.x) * __props.scale}px`,
+            top: `${(__props.rect ? r.origin.y - __props.rect.origin.y : r.origin.y) * __props.scale}px`,
+            width: `${r.size.width * __props.scale}px`,
+            height: `${r.size.height * __props.scale}px`,
             background: "transparent",
-            pointerEvents: _ctx.onClick ? "auto" : "none",
-            cursor: _ctx.onClick ? "pointer" : "default",
-            zIndex: _ctx.onClick ? 1 : 0
+            pointerEvents: __props.onClick ? "auto" : "none",
+            cursor: __props.onClick ? "pointer" : "default",
+            zIndex: __props.onClick ? 1 : 0
           })
         }, [
           createElementVNode("div", {
@@ -1138,8 +1186,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               top: "50%",
               width: "100%",
               height: `${thickness.value}px`,
-              background: _ctx.color,
-              opacity: _ctx.opacity,
+              background: __props.color,
+              opacity: __props.opacity,
               transform: "translateY(-50%)",
               pointerEvents: "none"
             })
@@ -1163,23 +1211,23 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const thickness = computed(() => 2 * props.scale);
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.segmentRects, (r, i) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
         return openBlock(), createElementBlock("div", {
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
-            left: `${(_ctx.rect ? r.origin.x - _ctx.rect.origin.x : r.origin.x) * _ctx.scale}px`,
-            top: `${(_ctx.rect ? r.origin.y - _ctx.rect.origin.y : r.origin.y) * _ctx.scale}px`,
-            width: `${r.size.width * _ctx.scale}px`,
-            height: `${r.size.height * _ctx.scale}px`,
+            left: `${(__props.rect ? r.origin.x - __props.rect.origin.x : r.origin.x) * __props.scale}px`,
+            top: `${(__props.rect ? r.origin.y - __props.rect.origin.y : r.origin.y) * __props.scale}px`,
+            width: `${r.size.width * __props.scale}px`,
+            height: `${r.size.height * __props.scale}px`,
             background: "transparent",
-            pointerEvents: _ctx.onClick ? "auto" : "none",
-            cursor: _ctx.onClick ? "pointer" : "default",
-            zIndex: _ctx.onClick ? 1 : 0
+            pointerEvents: __props.onClick ? "auto" : "none",
+            cursor: __props.onClick ? "pointer" : "default",
+            zIndex: __props.onClick ? 1 : 0
           })
         }, [
           createElementVNode("div", {
@@ -1189,8 +1237,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               bottom: 0,
               width: "100%",
               height: `${thickness.value}px`,
-              background: _ctx.color,
-              opacity: _ctx.opacity,
+              background: __props.color,
+              opacity: __props.opacity,
               pointerEvents: "none"
             })
           }, null, 4)
@@ -1202,6 +1250,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "annotations",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {},
     rotation: {},
@@ -1209,18 +1258,28 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     pageHeight: {},
     resizeUI: {},
     vertexUI: {},
-    selectionOutlineColor: {}
+    selectionOutlineColor: {},
+    selectionMenu: { type: Function }
   },
   setup(__props) {
     const props = __props;
-    const { provides: annotationProvides } = useAnnotationCapability();
+    const { provides: annotationCapability } = useAnnotationCapability();
     const { provides: selectionProvides } = useSelectionCapability();
     const annotations = ref([]);
-    const { register } = usePointerHandlers({ pageIndex: props.pageIndex });
+    const { register } = usePointerHandlers({
+      documentId: () => props.documentId,
+      pageIndex: props.pageIndex
+    });
     const selectionState = ref(null);
     const editingId = ref(null);
+    const annotationProvides = computed(
+      () => annotationCapability.value ? annotationCapability.value.forDocument(props.documentId) : null
+    );
     watchEffect((onCleanup) => {
       if (annotationProvides.value) {
+        const currentState = annotationProvides.value.getState();
+        annotations.value = getAnnotationsByPageIndex(currentState, props.pageIndex);
+        selectionState.value = getSelectedAnnotationByPageIndex(currentState, props.pageIndex);
         const off = annotationProvides.value.onStateChange((state) => {
           annotations.value = getAnnotationsByPageIndex(state, props.pageIndex);
           selectionState.value = getSelectedAnnotationByPageIndex(state, props.pageIndex);
@@ -1314,7 +1373,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               return [
                 createVNode(_sfc_main$f, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
-                  scale: _ctx.scale,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
               ];
@@ -1345,7 +1404,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               return [
                 createVNode(_sfc_main$b, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
-                  scale: _ctx.scale,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
               ];
@@ -1376,7 +1435,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               return [
                 createVNode(_sfc_main$h, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
-                  scale: _ctx.scale,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
               ];
@@ -1407,7 +1466,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               return [
                 createVNode(_sfc_main$e, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
-                  scale: _ctx.scale,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
               ];
@@ -1438,7 +1497,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               return [
                 createVNode(_sfc_main$c, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
-                  scale: _ctx.scale,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
               ];
@@ -1469,7 +1528,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               return [
                 createVNode(_sfc_main$d, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
-                  scale: _ctx.scale,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
               ];
@@ -1503,8 +1562,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
                   isEditing: editingId.value === annotation.object.id,
                   annotation: { ...annotation, object: currentObject },
-                  pageIndex: _ctx.pageIndex,
-                  scale: _ctx.scale,
+                  pageIndex: __props.pageIndex,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }, null, 8, ["isSelected", "isEditing", "annotation", "pageIndex", "scale", "onClick"])
               ];
@@ -1534,12 +1593,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               var _a2;
               return [
                 createVNode(_sfc_main$9, {
+                  documentId: __props.documentId,
                   isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
                   annotation,
-                  pageIndex: _ctx.pageIndex,
-                  scale: _ctx.scale,
+                  pageIndex: __props.pageIndex,
+                  scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
-                }, null, 8, ["isSelected", "annotation", "pageIndex", "scale", "onClick"])
+                }, null, 8, ["documentId", "isSelected", "annotation", "pageIndex", "scale", "onClick"])
               ];
             }),
             "selection-menu": withCtx((slotProps) => [
@@ -1566,7 +1626,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, { ref_for: true }, props), {
             default: withCtx(({ annotation: currentObject }) => [
               createVNode(_sfc_main$5, mergeProps({ ref_for: true }, currentObject, {
-                scale: _ctx.scale,
+                scale: __props.scale,
                 onClick: (e) => handleClick(e, annotation)
               }), null, 16, ["scale", "onClick"])
             ]),
@@ -1588,7 +1648,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, { ref_for: true }, props), {
             default: withCtx(({ annotation: currentObject }) => [
               createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
-                scale: _ctx.scale,
+                scale: __props.scale,
                 onClick: (e) => handleClick(e, annotation)
               }), null, 16, ["scale", "onClick"])
             ]),
@@ -1610,7 +1670,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, { ref_for: true }, props), {
             default: withCtx(({ annotation: currentObject }) => [
               createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
-                scale: _ctx.scale,
+                scale: __props.scale,
                 onClick: (e) => handleClick(e, annotation)
               }), null, 16, ["scale", "onClick"])
             ]),
@@ -1634,7 +1694,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, { ref_for: true }, props), {
             default: withCtx(({ annotation: currentObject }) => [
               createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
-                scale: _ctx.scale,
+                scale: __props.scale,
                 onClick: (e) => handleClick(e, annotation)
               }), null, 16, ["scale", "onClick"])
             ]),
@@ -1651,6 +1711,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "text-markup",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {}
   },
@@ -1664,16 +1725,17 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     watchEffect((onCleanup) => {
       const unsubscribers = [];
       if (selectionProvides.value) {
-        const provides = selectionProvides.value;
-        const off = provides.onSelectionChange(() => {
-          rects.value = provides.getHighlightRectsForPage(props.pageIndex);
-          boundingRect.value = provides.getBoundingRectForPage(props.pageIndex);
+        const scoped = selectionProvides.value.forDocument(props.documentId);
+        const off = scoped.onSelectionChange(() => {
+          rects.value = scoped.getHighlightRectsForPage(props.pageIndex);
+          boundingRect.value = scoped.getBoundingRectForPage(props.pageIndex);
         });
         unsubscribers.push(off);
       }
       if (annotationProvides.value) {
-        const provides = annotationProvides.value;
-        const off = provides.onActiveToolChange((tool) => activeTool.value = tool);
+        const scoped = annotationProvides.value.forDocument(props.documentId);
+        activeTool.value = scoped.getActiveTool();
+        const off = scoped.onActiveToolChange((event) => activeTool.value = event);
         unsubscribers.push(off);
       }
       onCleanup(() => {
@@ -1700,25 +1762,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           color: activeTool.value.defaults.color,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
-          scale: _ctx.scale
+          scale: __props.scale
         }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$5, {
           key: 1,
           color: activeTool.value.defaults.color,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
-          scale: _ctx.scale
+          scale: __props.scale
         }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$6, {
           key: 2,
           color: activeTool.value.defaults.color,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
-          scale: _ctx.scale
+          scale: __props.scale
         }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$7, {
           key: 3,
           color: activeTool.value.defaults.color,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
-          scale: _ctx.scale
+          scale: __props.scale
         }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : createCommentVNode("", true)
       ], 4)) : createCommentVNode("", true);
     };
@@ -1745,36 +1807,36 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(style.value)
       }, [
-        _ctx.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$h), mergeProps({
+        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$h), mergeProps({
           key: 0,
           isSelected: false,
-          scale: _ctx.scale
-        }, _ctx.preview.data), null, 16, ["scale"])) : _ctx.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$b), mergeProps({
+          scale: __props.scale
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$b), mergeProps({
           key: 1,
           isSelected: false,
-          scale: _ctx.scale
-        }, _ctx.preview.data), null, 16, ["scale"])) : _ctx.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$d), mergeProps({
+          scale: __props.scale
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$d), mergeProps({
           key: 2,
           isSelected: false,
-          scale: _ctx.scale
-        }, _ctx.preview.data), null, 16, ["scale"])) : _ctx.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$c), mergeProps({
+          scale: __props.scale
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$c), mergeProps({
           key: 3,
           isSelected: false,
-          scale: _ctx.scale
-        }, _ctx.preview.data), null, 16, ["scale"])) : _ctx.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$e), mergeProps({
+          scale: __props.scale
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$e), mergeProps({
           key: 4,
           isSelected: false,
-          scale: _ctx.scale
-        }, _ctx.preview.data), null, 16, ["scale"])) : _ctx.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$f), mergeProps({
+          scale: __props.scale
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$f), mergeProps({
           key: 5,
           isSelected: false,
-          scale: _ctx.scale
-        }, _ctx.preview.data), null, 16, ["scale"])) : _ctx.preview.type === unref(PdfAnnotationSubtype).FREETEXT ? (openBlock(), createElementBlock("div", {
+          scale: __props.scale
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).FREETEXT ? (openBlock(), createElementBlock("div", {
           key: 6,
           style: normalizeStyle({
             width: "100%",
             height: "100%",
-            border: `1px dashed ${_ctx.preview.data.fontColor || "#000000"}`,
+            border: `1px dashed ${__props.preview.data.fontColor || "#000000"}`,
             backgroundColor: "transparent"
           })
         }, null, 4)) : createCommentVNode("", true)
@@ -1785,6 +1847,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "annotation-paint-layer",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {}
   },
@@ -1836,18 +1899,23 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     let unregister;
     watchEffect((onCleanup) => {
       if (annotationPlugin.value) {
-        unregister = annotationPlugin.value.registerPageHandlers(props.pageIndex, props.scale, {
-          services: services.value,
-          onPreview: (toolId, state) => {
-            const next = new Map(previews.value);
-            if (state) {
-              next.set(toolId, state);
-            } else {
-              next.delete(toolId);
+        unregister = annotationPlugin.value.registerPageHandlers(
+          props.documentId,
+          props.pageIndex,
+          props.scale,
+          {
+            services: services.value,
+            onPreview: (toolId, state) => {
+              const next = new Map(previews.value);
+              if (state) {
+                next.set(toolId, state);
+              } else {
+                next.delete(toolId);
+              }
+              previews.value = next;
             }
-            previews.value = next;
           }
-        });
+        );
       }
       onCleanup(() => {
         unregister == null ? void 0 : unregister();
@@ -1870,7 +1938,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           return openBlock(), createBlock(_sfc_main$2, {
             key: toolId,
             preview,
-            scale: _ctx.scale
+            scale: __props.scale
           }, null, 8, ["preview", "scale"]);
         }), 128))
       ], 64);
@@ -1880,20 +1948,54 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "annotation-layer",
   props: {
+    documentId: {},
     pageIndex: {},
     scale: {},
-    pageWidth: {},
-    pageHeight: {},
     rotation: {},
     resizeUI: {},
     vertexUI: {},
-    selectionOutlineColor: {}
+    selectionOutlineColor: {},
+    selectionMenu: { type: Function }
   },
   setup(__props) {
     const props = __props;
+    const documentState = useDocumentState(() => props.documentId);
+    const page = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = documentState.value) == null ? void 0 : _a.document) == null ? void 0 : _b.pages) == null ? void 0 : _c[props.pageIndex];
+    });
+    const pageWidth = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = page.value) == null ? void 0 : _a.size) == null ? void 0 : _b.width) ?? 0;
+    });
+    const pageHeight = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = page.value) == null ? void 0 : _a.size) == null ? void 0 : _b.height) ?? 0;
+    });
+    const actualScale = computed(() => {
+      var _a;
+      if (props.scale !== void 0) return props.scale;
+      return ((_a = documentState.value) == null ? void 0 : _a.scale) ?? 1;
+    });
+    const actualRotation = computed(() => {
+      var _a;
+      if (props.rotation !== void 0) return props.rotation;
+      return ((_a = documentState.value) == null ? void 0 : _a.rotation) ?? Rotation.Degree0;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$4, normalizeProps(guardReactiveProps(props)), {
+        createVNode(_sfc_main$4, {
+          documentId: __props.documentId,
+          pageIndex: __props.pageIndex,
+          scale: actualScale.value,
+          rotation: actualRotation.value,
+          pageWidth: pageWidth.value,
+          pageHeight: pageHeight.value,
+          resizeUI: __props.resizeUI,
+          vertexUI: __props.vertexUI,
+          selectionOutlineColor: __props.selectionOutlineColor,
+          selectionMenu: __props.selectionMenu
+        }, {
           "selection-menu": withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "selection-menu", normalizeProps(guardReactiveProps(slotProps)))
           ]),
@@ -1904,15 +2006,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "vertex-handle", normalizeProps(guardReactiveProps(slotProps)))
           ]),
           _: 3
-        }, 16),
+        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "resizeUI", "vertexUI", "selectionOutlineColor", "selectionMenu"]),
         createVNode(_sfc_main$3, {
-          pageIndex: _ctx.pageIndex,
-          scale: _ctx.scale
-        }, null, 8, ["pageIndex", "scale"]),
+          documentId: __props.documentId,
+          pageIndex: __props.pageIndex,
+          scale: actualScale.value
+        }, null, 8, ["documentId", "pageIndex", "scale"]),
         createVNode(_sfc_main$1, {
-          pageIndex: _ctx.pageIndex,
-          scale: _ctx.scale
-        }, null, 8, ["pageIndex", "scale"])
+          documentId: __props.documentId,
+          pageIndex: __props.pageIndex,
+          scale: actualScale.value
+        }, null, 8, ["documentId", "pageIndex", "scale"])
       ]);
     };
   }