@embedpdf/plugin-annotation 1.3.11 → 1.3.13

package/dist/vue/index.js

@@ -1,9 +1,1929 @@
+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 } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialState, 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 { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
+import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
+import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype } from "@embedpdf/models";
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
+const useAnnotation = () => {
+  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);
+    }
+  });
+  return {
+    state: readonly(state),
+    provides
+  };
+};
+const _hoisted_1$8 = { "data-no-interaction": "" };
+const HANDLE_COLOR = "#007ACC";
+const VERTEX_COLOR = "#007ACC";
+const HANDLE_SIZE = 12;
+const VERTEX_SIZE = 12;
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "annotation-container",
+  props: {
+    scale: {},
+    pageIndex: {},
+    rotation: {},
+    pageWidth: {},
+    pageHeight: {},
+    trackedAnnotation: {},
+    isSelected: { type: Boolean },
+    isDraggable: { type: Boolean },
+    isResizable: { type: Boolean },
+    lockAspectRatio: { type: Boolean, default: false },
+    vertexConfig: {},
+    outlineOffset: { default: 1 },
+    onDoubleClick: {},
+    onSelect: {},
+    zIndex: { default: 1 },
+    selectionOutlineColor: { default: "#007ACC" }
+  },
+  setup(__props) {
+    const props = __props;
+    const preview = shallowRef(toRaw(props.trackedAnnotation.object));
+    const { provides: annotationProvides } = useAnnotationCapability();
+    const gestureBaseRef = ref(null);
+    const currentObject = computed(
+      () => ({ ...toRaw(props.trackedAnnotation.object), ...toRaw(preview.value) })
+    );
+    const elementSnapshot = computed(() => {
+      const obj = toRaw(currentObject.value);
+      return obj.rect;
+    });
+    const verticesSnapshot = computed(() => {
+      var _a;
+      const obj = toRaw(currentObject.value);
+      return ((_a = props.vertexConfig) == null ? void 0 : _a.extractVertices(obj)) ?? [];
+    });
+    const constraintsSnapshot = computed(() => ({
+      minWidth: 10,
+      minHeight: 10,
+      boundingBox: {
+        width: props.pageWidth / props.scale,
+        height: props.pageHeight / props.scale
+      }
+    }));
+    const { dragProps, vertices, resize } = useInteractionHandles({
+      controller: {
+        element: elementSnapshot,
+        vertices: verticesSnapshot,
+        constraints: constraintsSnapshot,
+        maintainAspectRatio: computed(() => props.lockAspectRatio),
+        pageRotation: computed(() => props.rotation),
+        scale: computed(() => props.scale),
+        enabled: computed(() => props.isSelected),
+        onUpdate: (event) => {
+          var _a, _b, _c, _d;
+          if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
+          if (event.state === "start") {
+            gestureBaseRef.value = currentObject.value;
+          }
+          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, {
+            type: event.transformData.type,
+            changes,
+            metadata: event.transformData.metadata
+          });
+          if (patched) {
+            preview.value = { ...toRaw(preview.value), ...patched };
+          }
+          if (event.state === "end" && patched) {
+            gestureBaseRef.value = null;
+            (_d = annotationProvides.value) == null ? void 0 : _d.updateAnnotation(
+              props.pageIndex,
+              props.trackedAnnotation.object.id,
+              patched
+            );
+          }
+        }
+      },
+      resizeUI: {
+        handleSize: HANDLE_SIZE,
+        spacing: props.outlineOffset,
+        offsetMode: "outside",
+        includeSides: !props.lockAspectRatio,
+        zIndex: props.zIndex + 1
+      },
+      vertexUI: {
+        vertexSize: VERTEX_SIZE,
+        zIndex: props.zIndex + 2
+      },
+      includeVertices: !!props.vertexConfig
+    });
+    const doubleProps = useDoublePressProps(props.onDoubleClick);
+    watch(
+      () => props.trackedAnnotation.object,
+      (newObject) => {
+        preview.value = newObject;
+      },
+      { deep: true }
+    );
+    const containerStyle = computed(() => ({
+      position: "absolute",
+      left: `${currentObject.value.rect.origin.x * props.scale}px`,
+      top: `${currentObject.value.rect.origin.y * props.scale}px`,
+      width: `${currentObject.value.rect.size.width * props.scale}px`,
+      height: `${currentObject.value.rect.size.height * props.scale}px`,
+      outline: props.isSelected ? `1px solid ${props.selectionOutlineColor}` : "none",
+      outlineOffset: props.isSelected ? `${props.outlineOffset}px` : "0px",
+      pointerEvents: props.isSelected ? "auto" : "none",
+      touchAction: "none",
+      cursor: props.isSelected && props.isDraggable ? "move" : "default",
+      zIndex: props.zIndex
+    }));
+    const slots = useSlots();
+    return (_ctx, _cache) => {
+      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 }) => {
+            return openBlock(), createElementBlock(Fragment, { key }, [
+              unref(slots)["resize-handle"] ? renderSlot(_ctx.$slots, "resize-handle", mergeProps({
+                key: 0,
+                ref_for: true
+              }, { key, style, ...handle, backgroundColor: HANDLE_COLOR }), () => [
+                createElementVNode("div", mergeProps({ ref_for: true }, handle, {
+                  style: [style, { backgroundColor: HANDLE_COLOR }]
+                }), null, 16)
+              ]) : (openBlock(), createElementBlock("div", mergeProps({
+                key: 1,
+                ref_for: true
+              }, handle, {
+                style: [style, { backgroundColor: HANDLE_COLOR }]
+              }), null, 16))
+            ], 64);
+          }), 128)) : createCommentVNode("", true),
+          _ctx.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,
+                ref_for: true
+              }, { key, style, ...vertex, backgroundColor: VERTEX_COLOR }), () => [
+                createElementVNode("div", mergeProps({ ref_for: true }, vertex, {
+                  style: [style, { backgroundColor: VERTEX_COLOR }]
+                }), null, 16)
+              ]) : (openBlock(), createElementBlock("div", mergeProps({
+                key: 1,
+                ref_for: true
+              }, vertex, {
+                style: [style, { backgroundColor: VERTEX_COLOR }]
+              }), null, 16))
+            ], 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
+        }, {
+          default: withCtx(({ rect, menuWrapperProps }) => [
+            renderSlot(_ctx.$slots, "selection-menu", {
+              annotation: _ctx.trackedAnnotation,
+              selected: _ctx.isSelected,
+              rect,
+              menuWrapperProps
+            })
+          ]),
+          _: 3
+        }, 8, ["rect", "rotation"])
+      ]);
+    };
+  }
+});
+const _hoisted_1$7 = ["width", "height", "viewBox"];
+const _hoisted_2$5 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "circle",
+  props: {
+    isSelected: { type: Boolean },
+    color: { default: "#000000" },
+    strokeColor: {},
+    opacity: { default: 1 },
+    strokeWidth: {},
+    strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
+    strokeDashArray: {},
+    rect: {},
+    scale: {},
+    onClick: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const geometry = computed(() => {
+      const outerW = props.rect.size.width;
+      const outerH = props.rect.size.height;
+      const innerW = Math.max(outerW - props.strokeWidth, 0);
+      const innerH = Math.max(outerH - props.strokeWidth, 0);
+      return {
+        width: outerW,
+        height: outerH,
+        cx: props.strokeWidth / 2 + innerW / 2,
+        cy: props.strokeWidth / 2 + innerH / 2,
+        rx: innerW / 2,
+        ry: innerH / 2
+      };
+    });
+    const svgWidth = computed(() => geometry.value.width * props.scale);
+    const svgHeight = computed(() => geometry.value.height * props.scale);
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: svgWidth.value,
+          height: svgHeight.value,
+          pointerEvents: "none",
+          zIndex: 2
+        }),
+        width: svgWidth.value,
+        height: svgHeight.value,
+        viewBox: `0 0 ${geometry.value.width} ${geometry.value.height}`
+      }, [
+        createElementVNode("ellipse", {
+          cx: geometry.value.cx,
+          cy: geometry.value.cy,
+          rx: geometry.value.rx,
+          ry: geometry.value.ry,
+          fill: _ctx.color,
+          opacity: _ctx.opacity,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.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(",")
+            }
+          })
+        }, null, 44, _hoisted_2$5)
+      ], 12, _hoisted_1$7);
+    };
+  }
+});
+const _hoisted_1$6 = ["contenteditable"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "free-text",
+  props: {
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    annotation: {},
+    pageIndex: {},
+    scale: {},
+    onClick: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const editorRef = ref(null);
+    const { provides: annotationProvides } = useAnnotationCapability();
+    const isIOS = ref(false);
+    onMounted(() => {
+      try {
+        const nav = navigator;
+        isIOS.value = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && (nav == null ? void 0 : nav.maxTouchPoints) > 1;
+      } catch {
+        isIOS.value = false;
+      }
+    });
+    watch(
+      () => props.isEditing,
+      (editing) => {
+        if (editing && editorRef.value) {
+          const editor = editorRef.value;
+          editor.focus();
+          const selection = window.getSelection();
+          if (selection) {
+            const range = document.createRange();
+            range.selectNodeContents(editor);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }
+      }
+    );
+    const handleBlur = () => {
+      if (!annotationProvides.value || !editorRef.value) return;
+      annotationProvides.value.updateAnnotation(props.pageIndex, props.annotation.object.id, {
+        contents: editorRef.value.innerText
+      });
+    };
+    const editorStyle = computed(() => {
+      const { object: anno } = props.annotation;
+      const computedFontPx = anno.fontSize * props.scale;
+      const MIN_IOS_FOCUS_FONT_PX = 16;
+      const needsComp = isIOS.value && props.isEditing && computedFontPx > 0 && computedFontPx < MIN_IOS_FOCUS_FONT_PX;
+      const adjustedFontPx = needsComp ? MIN_IOS_FOCUS_FONT_PX : computedFontPx;
+      const scaleComp = needsComp ? computedFontPx / MIN_IOS_FOCUS_FONT_PX : 1;
+      const invScalePercent = needsComp ? 100 / scaleComp : 100;
+      return {
+        color: anno.fontColor,
+        fontSize: `${adjustedFontPx}px`,
+        fontFamily: standardFontCss(anno.fontFamily),
+        textAlign: textAlignmentToCss(anno.textAlign),
+        flexDirection: "column",
+        justifyContent: anno.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : anno.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
+        display: "flex",
+        backgroundColor: anno.backgroundColor,
+        opacity: anno.opacity,
+        width: needsComp ? `${invScalePercent}%` : "100%",
+        height: needsComp ? `${invScalePercent}%` : "100%",
+        lineHeight: "1.18",
+        overflow: "hidden",
+        cursor: props.isEditing ? "text" : "pointer",
+        outline: "none",
+        transform: needsComp ? `scale(${scaleComp})` : void 0,
+        transformOrigin: "top left"
+      };
+    });
+    return (_ctx, _cache) => {
+      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",
+          zIndex: 2
+        }),
+        onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => _ctx.onClick && _ctx.onClick(...args)),
+        onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => _ctx.onClick && _ctx.onClick(...args))
+      }, [
+        createElementVNode("span", {
+          ref_key: "editorRef",
+          ref: editorRef,
+          onBlur: handleBlur,
+          tabindex: "0",
+          style: normalizeStyle(editorStyle.value),
+          contenteditable: _ctx.isEditing
+        }, toDisplayString(_ctx.annotation.object.contents), 45, _hoisted_1$6)
+      ], 36);
+    };
+  }
+});
+const _hoisted_1$5 = ["width", "height", "viewBox"];
+const _hoisted_2$4 = ["d", "opacity"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  __name: "ink",
+  props: {
+    isSelected: { type: Boolean },
+    color: { default: "#000000" },
+    opacity: { default: 1 },
+    strokeWidth: {},
+    inkList: {},
+    rect: {},
+    scale: {},
+    onClick: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const paths = computed(() => {
+      return props.inkList.map(({ points }) => {
+        let d = "";
+        points.forEach(({ x, y }, i) => {
+          const lx = x - props.rect.origin.x;
+          const ly = y - props.rect.origin.y;
+          d += (i === 0 ? "M" : "L") + `${lx} ${ly} `;
+        });
+        return d.trim();
+      });
+    });
+    const width = computed(() => props.rect.size.width * props.scale);
+    const height = computed(() => props.rect.size.height * props.scale);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${width.value}px`,
+          height: `${height.value}px`,
+          pointerEvents: "none",
+          zIndex: 2,
+          overflow: "visible"
+        }),
+        width: width.value,
+        height: height.value,
+        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.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,
+            onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => _ctx.onClick && _ctx.onClick(...args)),
+            onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => _ctx.onClick && _ctx.onClick(...args)),
+            style: normalizeStyle({
+              cursor: _ctx.isSelected ? "move" : "pointer",
+              pointerEvents: _ctx.isSelected ? "none" : "visibleStroke",
+              stroke: _ctx.color,
+              strokeWidth: _ctx.strokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            })
+          }, null, 44, _hoisted_2$4);
+        }), 128))
+      ], 12, _hoisted_1$5);
+    };
+  }
+});
+const _hoisted_1$4 = ["width", "height", "viewBox"];
+const _hoisted_2$3 = ["x1", "y1", "x2", "y2", "opacity"];
+const _hoisted_3$2 = ["d", "transform", "stroke", "fill"];
+const _hoisted_4$2 = ["d", "transform", "stroke", "fill"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "line",
+  props: {
+    color: { default: "transparent" },
+    opacity: { default: 1 },
+    strokeWidth: {},
+    strokeColor: { default: "#000000" },
+    strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
+    strokeDashArray: {},
+    rect: {},
+    linePoints: {},
+    lineEndings: {},
+    scale: {},
+    onClick: {},
+    isSelected: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const localLine = computed(() => ({
+      x1: props.linePoints.start.x - props.rect.origin.x,
+      y1: props.linePoints.start.y - props.rect.origin.y,
+      x2: props.linePoints.end.x - props.rect.origin.x,
+      y2: props.linePoints.end.y - props.rect.origin.y
+    }));
+    const endings = computed(() => {
+      var _a, _b;
+      const { x1, y1, x2, y2 } = localLine.value;
+      const angle = Math.atan2(y2 - y1, x2 - x1);
+      return {
+        start: patching.createEnding(
+          (_a = props.lineEndings) == null ? void 0 : _a.start,
+          props.strokeWidth,
+          angle + Math.PI,
+          x1,
+          y1
+        ),
+        end: patching.createEnding((_b = props.lineEndings) == null ? void 0 : _b.end, props.strokeWidth, angle, x2, y2)
+      };
+    });
+    const getEndingStyle = (ending) => {
+      var _a;
+      return {
+        cursor: props.isSelected ? "move" : "pointer",
+        strokeWidth: props.strokeWidth,
+        strokeLinecap: "butt",
+        pointerEvents: props.isSelected ? "none" : ending.filled ? "visible" : "visibleStroke",
+        ...props.strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+          strokeDasharray: (_a = props.strokeDashArray) == null ? void 0 : _a.join(",")
+        }
+      };
+    };
+    const width = computed(() => props.rect.size.width * props.scale);
+    const height = computed(() => props.rect.size.height * props.scale);
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${width.value}px`,
+          height: `${height.value}px`,
+          pointerEvents: "none",
+          zIndex: 2,
+          overflow: "visible"
+        }),
+        width: width.value,
+        height: height.value,
+        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.rect.size.height}`
+      }, [
+        createElementVNode("line", {
+          x1: localLine.value.x1,
+          y1: localLine.value.y1,
+          x2: localLine.value.x2,
+          y2: localLine.value.y2,
+          opacity: _ctx.opacity,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          style: normalizeStyle({
+            cursor: _ctx.isSelected ? "move" : "pointer",
+            pointerEvents: _ctx.isSelected ? "none" : "visibleStroke",
+            stroke: _ctx.strokeColor,
+            strokeWidth: _ctx.strokeWidth,
+            strokeLinecap: "butt",
+            ..._ctx.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+              strokeDasharray: (_a = _ctx.strokeDashArray) == null ? void 0 : _a.join(",")
+            }
+          })
+        }, null, 44, _hoisted_2$3),
+        endings.value.start ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: endings.value.start.d,
+          transform: endings.value.start.transform,
+          onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          stroke: _ctx.strokeColor,
+          style: normalizeStyle(getEndingStyle(endings.value.start)),
+          fill: endings.value.start.filled ? _ctx.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)),
+          onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          stroke: _ctx.strokeColor,
+          style: normalizeStyle(getEndingStyle(endings.value.end)),
+          fill: endings.value.end.filled ? _ctx.color : "none"
+        }, null, 44, _hoisted_4$2)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$4);
+    };
+  }
+});
+const _hoisted_1$3 = ["width", "height", "viewBox"];
+const _hoisted_2$2 = ["d", "opacity"];
+const _hoisted_3$1 = ["d"];
+const _hoisted_4$1 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "polygon",
+  props: {
+    rect: {},
+    vertices: {},
+    color: { default: "transparent" },
+    strokeColor: { default: "#000000" },
+    opacity: { default: 1 },
+    strokeWidth: {},
+    strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
+    strokeDashArray: {},
+    scale: {},
+    isSelected: { type: Boolean },
+    onClick: {},
+    currentVertex: {},
+    handleSize: { default: 14 }
+  },
+  setup(__props) {
+    const props = __props;
+    const allPoints = computed(
+      () => props.currentVertex ? [...props.vertices, props.currentVertex] : props.vertices
+    );
+    const localPts = computed(
+      () => allPoints.value.map(({ x, y }) => ({
+        x: x - props.rect.origin.x,
+        y: y - props.rect.origin.y
+      }))
+    );
+    const pathData = computed(() => {
+      if (!localPts.value.length) return "";
+      const [first, ...rest] = localPts.value;
+      const isPreview = !!props.currentVertex;
+      return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
+    });
+    const isPreviewing = computed(() => props.currentVertex && props.vertices.length > 0);
+    const width = computed(() => props.rect.size.width * props.scale);
+    const height = computed(() => props.rect.size.height * props.scale);
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${width.value}px`,
+          height: `${height.value}px`,
+          pointerEvents: "none",
+          zIndex: 2,
+          overflow: "visible"
+        }),
+        width: width.value,
+        height: height.value,
+        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.rect.size.height}`
+      }, [
+        createElementVNode("path", {
+          d: pathData.value,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          opacity: _ctx.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",
+            strokeLinecap: "butt",
+            strokeLinejoin: "miter",
+            ..._ctx.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+              strokeDasharray: (_a = _ctx.strokeDashArray) == null ? void 0 : _a.join(",")
+            }
+          })
+        }, null, 44, _hoisted_2$2),
+        isPreviewing.value && localPts.value.length > 1 ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          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,
+            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,
+          opacity: 0.4,
+          stroke: _ctx.strokeColor,
+          "stroke-width": _ctx.strokeWidth / 2
+        }, null, 8, _hoisted_4$1)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$3);
+    };
+  }
+});
+const _hoisted_1$2 = ["width", "height", "viewBox"];
+const _hoisted_2$1 = ["d", "opacity"];
+const _hoisted_3 = ["d", "transform", "stroke", "fill"];
+const _hoisted_4 = ["d", "transform", "stroke", "fill"];
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "polyline",
+  props: {
+    rect: {},
+    vertices: {},
+    color: { default: "transparent" },
+    strokeColor: { default: "#000000" },
+    opacity: { default: 1 },
+    strokeWidth: {},
+    scale: {},
+    isSelected: { type: Boolean },
+    onClick: {},
+    lineEndings: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const localPts = computed(
+      () => props.vertices.map(({ x, y }) => ({
+        x: x - props.rect.origin.x,
+        y: y - props.rect.origin.y
+      }))
+    );
+    const pathData = computed(() => {
+      if (localPts.value.length === 0) return "";
+      const [first, ...rest] = localPts.value;
+      return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y} `).join("")).trim();
+    });
+    const endings = computed(() => {
+      var _a, _b;
+      if (localPts.value.length < 2) return { start: null, end: null };
+      const toAngle = (a, b) => Math.atan2(b.y - a.y, b.x - a.x);
+      const startRad = toAngle(localPts.value[0], localPts.value[1]);
+      const endRad = toAngle(
+        localPts.value[localPts.value.length - 2],
+        localPts.value[localPts.value.length - 1]
+      );
+      return {
+        start: patching.createEnding(
+          (_a = props.lineEndings) == null ? void 0 : _a.start,
+          props.strokeWidth,
+          startRad + Math.PI,
+          localPts.value[0].x,
+          localPts.value[0].y
+        ),
+        end: patching.createEnding(
+          (_b = props.lineEndings) == null ? void 0 : _b.end,
+          props.strokeWidth,
+          endRad,
+          localPts.value[localPts.value.length - 1].x,
+          localPts.value[localPts.value.length - 1].y
+        )
+      };
+    });
+    const getEndingStyle = (ending) => ({
+      cursor: props.isSelected ? "move" : "pointer",
+      strokeWidth: props.strokeWidth,
+      pointerEvents: props.isSelected ? "none" : ending.filled ? "visible" : "visibleStroke",
+      strokeLinecap: "butt"
+    });
+    const width = computed(() => props.rect.size.width * props.scale);
+    const height = computed(() => props.rect.size.height * props.scale);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${width.value}px`,
+          height: `${height.value}px`,
+          pointerEvents: "none",
+          zIndex: 2,
+          overflow: "visible"
+        }),
+        width: width.value,
+        height: height.value,
+        viewBox: `0 0 ${_ctx.rect.size.width} ${_ctx.rect.size.height}`
+      }, [
+        createElementVNode("path", {
+          d: pathData.value,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          opacity: _ctx.opacity,
+          style: normalizeStyle({
+            fill: "none",
+            stroke: _ctx.strokeColor ?? _ctx.color,
+            strokeWidth: _ctx.strokeWidth,
+            cursor: _ctx.isSelected ? "move" : "pointer",
+            pointerEvents: _ctx.isSelected ? "none" : "visibleStroke",
+            strokeLinecap: "butt",
+            strokeLinejoin: "miter"
+          })
+        }, null, 44, _hoisted_2$1),
+        endings.value.start ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: endings.value.start.d,
+          transform: endings.value.start.transform,
+          stroke: _ctx.strokeColor,
+          fill: endings.value.start.filled ? _ctx.color : "none",
+          onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.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",
+          onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          style: normalizeStyle(getEndingStyle(endings.value.end))
+        }, null, 44, _hoisted_4)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$2);
+    };
+  }
+});
+const _hoisted_1$1 = ["width", "height", "viewBox"];
+const _hoisted_2 = ["x", "y", "width", "height", "fill", "opacity"];
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "square",
+  props: {
+    isSelected: { type: Boolean },
+    color: { default: "#000000" },
+    strokeColor: {},
+    opacity: { default: 1 },
+    strokeWidth: {},
+    strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
+    strokeDashArray: {},
+    rect: {},
+    scale: {},
+    onClick: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const geometry = computed(() => {
+      const outerW = props.rect.size.width;
+      const outerH = props.rect.size.height;
+      const innerW = Math.max(outerW - props.strokeWidth, 0);
+      const innerH = Math.max(outerH - props.strokeWidth, 0);
+      return {
+        width: innerW,
+        height: innerH,
+        x: props.strokeWidth / 2,
+        y: props.strokeWidth / 2
+      };
+    });
+    const svgWidth = computed(() => (geometry.value.width + props.strokeWidth) * props.scale);
+    const svgHeight = computed(() => (geometry.value.height + props.strokeWidth) * props.scale);
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: svgWidth.value,
+          height: svgHeight.value,
+          pointerEvents: "none",
+          zIndex: 2
+        }),
+        width: svgWidth.value,
+        height: svgHeight.value,
+        viewBox: `0 0 ${geometry.value.width + _ctx.strokeWidth} ${geometry.value.height + _ctx.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,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.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(",")
+            }
+          })
+        }, null, 44, _hoisted_2)
+      ], 12, _hoisted_1$1);
+    };
+  }
+});
+const _hoisted_1 = ["src"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "render-annotation",
+  props: {
+    pageIndex: {},
+    annotation: {},
+    scaleFactor: { default: 1 },
+    style: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { provides: annotationProvides } = useAnnotationCapability();
+    const imageUrl = ref(null);
+    const urlRef = ref(null);
+    const currentTask = ref(null);
+    const annotationId = computed(() => props.annotation.id);
+    const rectWidth = computed(() => props.annotation.rect.size.width);
+    const rectHeight = computed(() => props.annotation.rect.size.height);
+    watch(
+      () => [
+        props.pageIndex,
+        props.scaleFactor,
+        annotationId.value,
+        rectWidth.value,
+        rectHeight.value,
+        annotationProvides.value
+      ],
+      (_, __, onCleanup) => {
+        if (annotationProvides.value) {
+          if (urlRef.value) {
+            URL.revokeObjectURL(urlRef.value);
+            urlRef.value = null;
+          }
+          const task = annotationProvides.value.renderAnnotation({
+            pageIndex: props.pageIndex,
+            annotation: deepToRaw(props.annotation),
+            options: {
+              scaleFactor: props.scaleFactor,
+              dpr: window.devicePixelRatio
+            }
+          });
+          currentTask.value = task;
+          task.wait((blob) => {
+            const url = URL.createObjectURL(blob);
+            imageUrl.value = url;
+            urlRef.value = url;
+          }, ignore);
+          onCleanup(() => {
+            if (urlRef.value) {
+              URL.revokeObjectURL(urlRef.value);
+              urlRef.value = null;
+            } else {
+              task.abort({
+                code: PdfErrorCode.Cancelled,
+                message: "canceled render task"
+              });
+            }
+          });
+        }
+      },
+      { immediate: true }
+    );
+    onUnmounted(() => {
+      if (urlRef.value) {
+        URL.revokeObjectURL(urlRef.value);
+        urlRef.value = null;
+      }
+      if (currentTask.value) {
+        currentTask.value.abort({
+          code: PdfErrorCode.Cancelled,
+          message: "canceled render task on unmount"
+        });
+      }
+    });
+    const handleImageLoad = () => {
+      if (urlRef.value) {
+        URL.revokeObjectURL(urlRef.value);
+        urlRef.value = null;
+      }
+    };
+    return (_ctx, _cache) => {
+      return imageUrl.value ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        src: imageUrl.value,
+        onLoad: handleImageLoad,
+        style: normalizeStyle({
+          width: "100%",
+          height: "100%",
+          display: "block",
+          ..._ctx.style
+        })
+      }, null, 44, _hoisted_1)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "stamp",
+  props: {
+    isSelected: { type: Boolean },
+    annotation: {},
+    pageIndex: {},
+    scale: {},
+    onClick: { type: Function }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          zIndex: 2,
+          pointerEvents: _ctx.isSelected ? "none" : "auto",
+          cursor: "pointer"
+        }),
+        onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => _ctx.onClick && _ctx.onClick(...args)),
+        onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => _ctx.onClick && _ctx.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"])
+      ], 36);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "highlight",
+  props: {
+    color: { default: "#FFFF00" },
+    opacity: { default: 0.5 },
+    segmentRects: {},
+    rect: {},
+    scale: {},
+    onClick: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.segmentRects, (b, i) => {
+        return openBlock(), createElementBlock("div", {
+          key: i,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.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
+          })
+        }, null, 36);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "squiggly",
+  props: {
+    color: { default: "#FFFF00" },
+    opacity: { default: 0.5 },
+    segmentRects: {},
+    rect: {},
+    scale: {},
+    onClick: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const amplitude = computed(() => 2 * props.scale);
+    const period = computed(() => 6 * props.scale);
+    const svgDataUri = computed(() => {
+      const amp = amplitude.value;
+      const per = period.value;
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${per}" height="${amp * 2}" viewBox="0 0 ${per} ${amp * 2}">
+    <path d="M0 ${amp} Q ${per / 4} 0 ${per / 2} ${amp} T ${per} ${amp}"
+          fill="none" stroke="${props.color}" stroke-width="${amp}" stroke-linecap="round"/>
+  </svg>`;
+      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(), createElementBlock("div", {
+          key: i,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.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`,
+            background: "transparent",
+            pointerEvents: _ctx.onClick ? "auto" : "none",
+            cursor: _ctx.onClick ? "pointer" : "default",
+            zIndex: _ctx.onClick ? 1 : 0
+          })
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle({
+              position: "absolute",
+              left: 0,
+              bottom: 0,
+              width: "100%",
+              height: `${amplitude.value * 2}px`,
+              backgroundImage: svgDataUri.value,
+              backgroundRepeat: "repeat-x",
+              backgroundSize: `${period.value}px ${amplitude.value * 2}px`,
+              opacity: _ctx.opacity,
+              pointerEvents: "none"
+            })
+          }, null, 4)
+        ], 36);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "strikeout",
+  props: {
+    color: { default: "#FFFF00" },
+    opacity: { default: 0.5 },
+    segmentRects: {},
+    rect: {},
+    scale: {},
+    onClick: {}
+  },
+  setup(__props) {
+    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(), createElementBlock("div", {
+          key: i,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.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`,
+            background: "transparent",
+            pointerEvents: _ctx.onClick ? "auto" : "none",
+            cursor: _ctx.onClick ? "pointer" : "default",
+            zIndex: _ctx.onClick ? 1 : 0
+          })
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle({
+              position: "absolute",
+              left: 0,
+              top: "50%",
+              width: "100%",
+              height: `${thickness.value}px`,
+              background: _ctx.color,
+              opacity: _ctx.opacity,
+              transform: "translateY(-50%)",
+              pointerEvents: "none"
+            })
+          }, null, 4)
+        ], 36);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "underline",
+  props: {
+    color: { default: "#FFFF00" },
+    opacity: { default: 0.5 },
+    segmentRects: {},
+    rect: {},
+    scale: {},
+    onClick: {}
+  },
+  setup(__props) {
+    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(), createElementBlock("div", {
+          key: i,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.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`,
+            background: "transparent",
+            pointerEvents: _ctx.onClick ? "auto" : "none",
+            cursor: _ctx.onClick ? "pointer" : "default",
+            zIndex: _ctx.onClick ? 1 : 0
+          })
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle({
+              position: "absolute",
+              left: 0,
+              bottom: 0,
+              width: "100%",
+              height: `${thickness.value}px`,
+              background: _ctx.color,
+              opacity: _ctx.opacity,
+              pointerEvents: "none"
+            })
+          }, null, 4)
+        ], 36);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "annotations",
+  props: {
+    pageIndex: {},
+    scale: {},
+    rotation: {},
+    pageWidth: {},
+    pageHeight: {},
+    resizeUI: {},
+    vertexUI: {},
+    selectionOutlineColor: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { provides: annotationProvides } = useAnnotationCapability();
+    const { provides: selectionProvides } = useSelectionCapability();
+    const annotations = ref([]);
+    const { register } = usePointerHandlers({ pageIndex: props.pageIndex });
+    const selectionState = ref(null);
+    const editingId = ref(null);
+    watchEffect((onCleanup) => {
+      if (annotationProvides.value) {
+        const off = annotationProvides.value.onStateChange((state) => {
+          annotations.value = getAnnotationsByPageIndex(state, props.pageIndex);
+          selectionState.value = getSelectedAnnotationByPageIndex(state, props.pageIndex);
+        });
+        onCleanup(off);
+      }
+    });
+    const handlePointerDown = (_pos, pe) => {
+      if (pe.target === pe.currentTarget && annotationProvides.value) {
+        annotationProvides.value.deselectAnnotation();
+        editingId.value = null;
+      }
+    };
+    const handleClick = (e, annotation) => {
+      e.stopPropagation();
+      if (annotationProvides.value && selectionProvides.value) {
+        annotationProvides.value.selectAnnotation(props.pageIndex, annotation.object.id);
+        selectionProvides.value.clear();
+        if (annotation.object.id !== editingId.value) {
+          editingId.value = null;
+        }
+      }
+    };
+    const handleDoubleClick = (_e, id) => {
+      if (isFreeText(annotations.value.find((a) => a.object.id === id))) {
+        editingId.value = id;
+      }
+    };
+    watchEffect((onCleanup) => {
+      if (annotationProvides.value) {
+        const unregister = register({ onPointerDown: handlePointerDown });
+        if (unregister) {
+          onCleanup(unregister);
+        }
+      }
+    });
+    const getTool = (annotation) => {
+      var _a;
+      return (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
+    };
+    const isDraggable = (anno) => {
+      var _a;
+      if (isFreeText(anno) && editingId.value === anno.object.id) return false;
+      return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
+    };
+    const isResizable = (anno) => {
+      var _a;
+      return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+    };
+    const lockAspectRatio = (anno) => {
+      var _a;
+      return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+    };
+    const getVertexConfig = (annotation) => {
+      if (isLine(annotation)) {
+        return {
+          extractVertices: (anno) => [anno.linePoints.start, anno.linePoints.end],
+          transformAnnotation: (anno, vertices) => ({
+            ...anno,
+            linePoints: { start: vertices[0], end: vertices[1] }
+          })
+        };
+      }
+      if (isPolyline(annotation) || isPolygon(annotation)) {
+        return {
+          extractVertices: (anno) => anno.vertices,
+          transformAnnotation: (anno, vertices) => ({ ...anno, vertices })
+        };
+      }
+      return void 0;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(annotations.value, (annotation) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+        return openBlock(), createElementBlock(Fragment, {
+          key: annotation.object.id
+        }, [
+          unref(isInk)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 0,
+            trackedAnnotation: annotation,
+            isSelected: ((_a = selectionState.value) == null ? void 0 : _a.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => {
+              var _a2;
+              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,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["isSelected", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isSquare)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 1,
+            trackedAnnotation: annotation,
+            isSelected: ((_b = selectionState.value) == null ? void 0 : _b.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => {
+              var _a2;
+              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,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["isSelected", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isCircle)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 2,
+            trackedAnnotation: annotation,
+            isSelected: ((_c = selectionState.value) == null ? void 0 : _c.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => {
+              var _a2;
+              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,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["isSelected", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isLine)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 3,
+            trackedAnnotation: annotation,
+            isSelected: ((_d = selectionState.value) == null ? void 0 : _d.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => {
+              var _a2;
+              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,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["isSelected", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isPolyline)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 4,
+            trackedAnnotation: annotation,
+            isSelected: ((_e = selectionState.value) == null ? void 0 : _e.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => {
+              var _a2;
+              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,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["isSelected", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isPolygon)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 5,
+            trackedAnnotation: annotation,
+            isSelected: ((_f = selectionState.value) == null ? void 0 : _f.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => {
+              var _a2;
+              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,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["isSelected", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isFreeText)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 6,
+            trackedAnnotation: annotation,
+            isSelected: ((_g = selectionState.value) == null ? void 0 : _g.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            onDoubleClick: (e) => handleDoubleClick(e, annotation.object.id),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => {
+              var _a2;
+              return [
+                createVNode(_sfc_main$g, {
+                  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,
+                  onClick: (e) => handleClick(e, annotation)
+                }, null, 8, ["isSelected", "isEditing", "annotation", "pageIndex", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "onDoubleClick", "vertexConfig"])) : unref(isStamp)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 7,
+            trackedAnnotation: annotation,
+            isSelected: ((_h = selectionState.value) == null ? void 0 : _h.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation)
+          }, { ref_for: true }, props), {
+            default: withCtx(() => {
+              var _a2;
+              return [
+                createVNode(_sfc_main$9, {
+                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+                  annotation,
+                  pageIndex: _ctx.pageIndex,
+                  scale: _ctx.scale,
+                  onClick: (e) => handleClick(e, annotation)
+                }, null, 8, ["isSelected", "annotation", "pageIndex", "scale", "onClick"])
+              ];
+            }),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "resize-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            "vertex-handle": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isUnderline)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 8,
+            trackedAnnotation: annotation,
+            isSelected: ((_i = selectionState.value) == null ? void 0 : _i.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation),
+            zIndex: 0
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => [
+              createVNode(_sfc_main$5, mergeProps({ ref_for: true }, currentObject, {
+                scale: _ctx.scale,
+                onClick: (e) => handleClick(e, annotation)
+              }), null, 16, ["scale", "onClick"])
+            ]),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isStrikeout)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 9,
+            trackedAnnotation: annotation,
+            isSelected: ((_j = selectionState.value) == null ? void 0 : _j.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation),
+            zIndex: 0
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => [
+              createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
+                scale: _ctx.scale,
+                onClick: (e) => handleClick(e, annotation)
+              }), null, 16, ["scale", "onClick"])
+            ]),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isSquiggly)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 10,
+            trackedAnnotation: annotation,
+            isSelected: ((_k = selectionState.value) == null ? void 0 : _k.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation),
+            zIndex: 0
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => [
+              createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
+                scale: _ctx.scale,
+                onClick: (e) => handleClick(e, annotation)
+              }), null, 16, ["scale", "onClick"])
+            ]),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : unref(isHighlight)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
+            key: 11,
+            trackedAnnotation: annotation,
+            isSelected: ((_l = selectionState.value) == null ? void 0 : _l.object.id) === annotation.object.id,
+            isDraggable: isDraggable(annotation),
+            isResizable: isResizable(annotation),
+            lockAspectRatio: lockAspectRatio(annotation),
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: getVertexConfig(annotation),
+            zIndex: 0
+          }, { ref_for: true }, props), {
+            default: withCtx(({ annotation: currentObject }) => [
+              createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
+                scale: _ctx.scale,
+                onClick: (e) => handleClick(e, annotation)
+              }), null, 16, ["scale", "onClick"])
+            ]),
+            "selection-menu": withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+            ]),
+            _: 2
+          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig"])) : createCommentVNode("", true)
+        ], 64);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "text-markup",
+  props: {
+    pageIndex: {},
+    scale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { provides: selectionProvides } = useSelectionCapability();
+    const { provides: annotationProvides } = useAnnotationCapability();
+    const rects = ref([]);
+    const boundingRect = ref(null);
+    const activeTool = ref(null);
+    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);
+        });
+        unsubscribers.push(off);
+      }
+      if (annotationProvides.value) {
+        const provides = annotationProvides.value;
+        const off = provides.onActiveToolChange((tool) => activeTool.value = tool);
+        unsubscribers.push(off);
+      }
+      onCleanup(() => {
+        unsubscribers.forEach((unsub) => unsub());
+      });
+    });
+    const blendMode = computed(() => {
+      if (!activeTool.value) return blendModeToCss(PdfBlendMode.Normal);
+      const defaultMode = activeTool.value.defaults.type === PdfAnnotationSubtype.HIGHLIGHT ? PdfBlendMode.Multiply : PdfBlendMode.Normal;
+      return blendModeToCss(activeTool.value.defaults.blendMode ?? defaultMode);
+    });
+    return (_ctx, _cache) => {
+      return boundingRect.value && activeTool.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        style: normalizeStyle({
+          mixBlendMode: blendMode.value,
+          pointerEvents: "none",
+          position: "absolute",
+          inset: 0
+        })
+      }, [
+        activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$8, {
+          key: 0,
+          color: activeTool.value.defaults.color,
+          opacity: activeTool.value.defaults.opacity,
+          segmentRects: rects.value,
+          scale: _ctx.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
+        }, 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
+        }, 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
+        }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : createCommentVNode("", true)
+      ], 4)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "preview-renderer",
+  props: {
+    preview: {},
+    scale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const style = computed(() => ({
+      position: "absolute",
+      left: `${props.preview.bounds.origin.x * props.scale}px`,
+      top: `${props.preview.bounds.origin.y * props.scale}px`,
+      width: `${props.preview.bounds.size.width * props.scale}px`,
+      height: `${props.preview.bounds.size.height * props.scale}px`,
+      pointerEvents: "none",
+      zIndex: 10
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle(style.value)
+      }, [
+        _ctx.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({
+          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({
+          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({
+          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({
+          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({
+          key: 5,
+          isSelected: false,
+          scale: _ctx.scale
+        }, _ctx.preview.data), null, 16, ["scale"])) : _ctx.preview.type === unref(PdfAnnotationSubtype).FREETEXT ? (openBlock(), createElementBlock("div", {
+          key: 6,
+          style: normalizeStyle({
+            width: "100%",
+            height: "100%",
+            border: `1px dashed ${_ctx.preview.data.fontColor || "#000000"}`,
+            backgroundColor: "transparent"
+          })
+        }, null, 4)) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "annotation-paint-layer",
+  props: {
+    pageIndex: {},
+    scale: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { plugin: annotationPlugin } = useAnnotationPlugin();
+    const previews = ref(/* @__PURE__ */ new Map());
+    const fileInputRef = ref(null);
+    const canvasRef = ref(null);
+    const services = computed(() => ({
+      requestFile: ({ accept, onFile }) => {
+        const input = fileInputRef.value;
+        if (!input) return;
+        input.accept = accept;
+        input.onchange = (e) => {
+          var _a;
+          const file = (_a = e.target.files) == null ? void 0 : _a[0];
+          if (file) {
+            onFile(file);
+            input.value = "";
+          }
+        };
+        input.click();
+      },
+      processImage: ({ source, maxWidth, maxHeight, onComplete }) => {
+        const canvas = canvasRef.value;
+        if (!canvas || !canvas.getContext) return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        const img = new Image();
+        img.crossOrigin = "Anonymous";
+        img.onload = () => {
+          let { naturalWidth: width, naturalHeight: height } = img;
+          const scaleX = maxWidth ? maxWidth / width : 1;
+          const scaleY = maxHeight ? maxHeight / height : 1;
+          const scaleFactor = Math.min(scaleX, scaleY, 1);
+          const finalWidth = width * scaleFactor;
+          const finalHeight = height * scaleFactor;
+          canvas.width = finalWidth;
+          canvas.height = finalHeight;
+          ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
+          const imageData = ctx.getImageData(0, 0, finalWidth, finalHeight);
+          if (typeof source !== "string") URL.revokeObjectURL(img.src);
+          onComplete({ imageData, width: finalWidth, height: finalHeight });
+        };
+        img.src = typeof source === "string" ? source : URL.createObjectURL(source);
+      }
+    }));
+    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);
+            }
+            previews.value = next;
+          }
+        });
+      }
+      onCleanup(() => {
+        unregister == null ? void 0 : unregister();
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("input", {
+          ref_key: "fileInputRef",
+          ref: fileInputRef,
+          type: "file",
+          style: { "display": "none" }
+        }, null, 512),
+        createElementVNode("canvas", {
+          ref_key: "canvasRef",
+          ref: canvasRef,
+          style: { "display": "none" }
+        }, null, 512),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(previews.value.entries(), ([toolId, preview]) => {
+          return openBlock(), createBlock(_sfc_main$2, {
+            key: toolId,
+            preview,
+            scale: _ctx.scale
+          }, null, 8, ["preview", "scale"]);
+        }), 128))
+      ], 64);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "annotation-layer",
+  props: {
+    pageIndex: {},
+    scale: {},
+    pageWidth: {},
+    pageHeight: {},
+    rotation: {},
+    resizeUI: {},
+    vertexUI: {},
+    selectionOutlineColor: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createVNode(_sfc_main$4, normalizeProps(guardReactiveProps(props)), {
+          "selection-menu": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "selection-menu", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
+          "resize-handle": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "resize-handle", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
+          "vertex-handle": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "vertex-handle", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
+          _: 3
+        }, 16),
+        createVNode(_sfc_main$3, {
+          pageIndex: _ctx.pageIndex,
+          scale: _ctx.scale
+        }, null, 8, ["pageIndex", "scale"]),
+        createVNode(_sfc_main$1, {
+          pageIndex: _ctx.pageIndex,
+          scale: _ctx.scale
+        }, null, 8, ["pageIndex", "scale"])
+      ]);
+    };
+  }
+});
 export {
+  _sfc_main$i as AnnotationContainer,
+  _sfc_main as AnnotationLayer,
+  _sfc_main$1 as AnnotationPaintLayer,
+  _sfc_main$4 as Annotations,
+  _sfc_main$h as Circle,
+  _sfc_main$g as FreeText,
+  _sfc_main$8 as Highlight,
+  _sfc_main$f as Ink,
+  _sfc_main$e as Line,
+  _sfc_main$d as Polygon,
+  _sfc_main$c as Polyline,
+  _sfc_main$2 as PreviewRenderer,
+  _sfc_main$a as RenderAnnotation,
+  _sfc_main$b as Square,
+  _sfc_main$7 as Squiggly,
+  _sfc_main$9 as Stamp,
+  _sfc_main$6 as Strikeout,
+  _sfc_main$3 as TextMarkup,
+  _sfc_main$5 as Underline,
+  useAnnotation,
   useAnnotationCapability,
   useAnnotationPlugin
 };