@embedpdf/plugin-annotation 2.7.0 → 2.9.0

package/dist/vue/index.js

@@ -1,14 +1,15 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { AnnotationPlugin, initialDocumentState, inferRotationCenterFromRects, patching, resolveInteractionProp, getAnnotationsByPageIndex, getSelectedAnnotationIds, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, inferRotationCenterFromRects, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, resolveInteractionProp, getAnnotationsByPageIndex, getSelectedAnnotationIds, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
-import { defineComponent, ref, watchEffect, openBlock, createElementBlock, normalizeStyle, createCommentVNode, toValue, watch, computed, shallowRef, toRaw, useSlots, createElementVNode, Fragment, unref, renderSlot, normalizeProps, mergeProps, createBlock, renderList, withCtx, resolveDynamicComponent, Teleport, toDisplayString, markRaw, provide, inject, onUnmounted, onMounted, createVNode, createSlots, guardReactiveProps } from "vue";
+import { defineComponent, ref, watchEffect, openBlock, createElementBlock, normalizeStyle, createCommentVNode, toValue, watch, computed, shallowRef, toRaw, useSlots, createElementVNode, renderSlot, createBlock, Fragment, unref, normalizeProps, mergeProps, renderList, withCtx, resolveDynamicComponent, Teleport, toDisplayString, markRaw, provide, inject, onUnmounted, onMounted, createVNode, createSlots, guardReactiveProps } from "vue";
+import { getCounterRotation } from "@embedpdf/utils";
 import { useInteractionHandles, useDoublePressProps, CounterRotate, deepToRaw } from "@embedpdf/utils/vue";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
-import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, getContrastStrokeColor, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
-const _hoisted_1$b = ["src"];
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const _hoisted_1$d = ["src"];
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "appearance-image",
   props: {
     appearance: {},
@@ -51,7 +52,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
           userSelect: "none",
           ...__props.style
         })
-      }, null, 44, _hoisted_1$b)) : createCommentVNode("", true);
+      }, null, 44, _hoisted_1$d)) : createCommentVNode("", true);
     };
   }
 });
@@ -85,13 +86,13 @@ const useAnnotation = (documentId) => {
     })
   };
 };
-const _hoisted_1$a = ["width", "height", "stroke"];
-const _hoisted_2$8 = ["width", "height", "stroke"];
-const __default__$d = {
+const _hoisted_1$c = ["width", "height", "stroke"];
+const _hoisted_2$a = ["width", "height", "stroke"];
+const __default__$e = {
   inheritAttrs: false
 };
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
-  ...__default__$d,
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
+  ...__default__$e,
   __name: "annotation-container",
   props: {
     scale: {},
@@ -120,6 +121,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     resizeUi: {},
     vertexUi: {},
     rotationUi: {},
+    blendMode: {},
     style: {}
   },
   setup(__props) {
@@ -225,6 +227,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     const currentObject = computed(
       () => ({ ...toRaw(props.trackedAnnotation.object), ...toRaw(preview.value) })
     );
+    const hasNoZoom = computed(() => (props.trackedAnnotation.object.flags ?? []).includes("noZoom"));
+    const hasNoRotate = computed(
+      () => (props.trackedAnnotation.object.flags ?? []).includes("noRotate")
+    );
+    const visualScale = computed(() => hasNoZoom.value ? 1 : props.scale);
+    const effectivePageRotation = computed(() => hasNoRotate.value ? 0 : props.rotation);
     const annotationRotation = computed(
       () => liveRotation.value ?? currentObject.value.rotation ?? 0
     );
@@ -269,8 +277,8 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         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
+        width: currentObject.value.rect.size.width * visualScale.value,
+        height: currentObject.value.rect.size.height * visualScale.value
       }
     }));
     const menuContext = computed(() => ({
@@ -279,7 +287,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       pageIndex: props.pageIndex
     }));
     const menuPlacement = computed(() => {
-      const effectiveAngle = ((annotationRotation.value + props.rotation * 90) % 360 + 360) % 360;
+      const effectiveAngle = ((annotationRotation.value + effectivePageRotation.value * 90) % 360 + 360) % 360;
       const handleNearMenuSide = effectiveIsRotatable.value && effectiveAngle > 90 && effectiveAngle < 270;
       return {
         suggestTop: handleNearMenuSide
@@ -462,32 +470,38 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       ];
       onCleanup(() => unsubs.forEach((u) => u()));
     });
-    const aabbWidth = computed(() => currentObject.value.rect.size.width * props.scale);
-    const aabbHeight = computed(() => currentObject.value.rect.size.height * props.scale);
-    const innerWidth = computed(() => effectiveUnrotatedRect.value.size.width * props.scale);
-    const innerHeight = computed(() => effectiveUnrotatedRect.value.size.height * props.scale);
+    const aabbWidth = computed(() => currentObject.value.rect.size.width * visualScale.value);
+    const aabbHeight = computed(() => currentObject.value.rect.size.height * visualScale.value);
+    const innerWidth = computed(() => effectiveUnrotatedRect.value.size.width * visualScale.value);
+    const innerHeight = computed(() => effectiveUnrotatedRect.value.size.height * visualScale.value);
     const usesCustomPivot = computed(
       () => Boolean(explicitUnrotatedRect.value) && annotationRotation.value !== 0
     );
     const innerLeft = computed(
-      () => usesCustomPivot.value ? (effectiveUnrotatedRect.value.origin.x - currentObject.value.rect.origin.x) * props.scale : (aabbWidth.value - innerWidth.value) / 2
+      () => usesCustomPivot.value ? (effectiveUnrotatedRect.value.origin.x - currentObject.value.rect.origin.x) * visualScale.value : (aabbWidth.value - innerWidth.value) / 2
     );
     const innerTop = computed(
-      () => usesCustomPivot.value ? (effectiveUnrotatedRect.value.origin.y - currentObject.value.rect.origin.y) * props.scale : (aabbHeight.value - innerHeight.value) / 2
+      () => usesCustomPivot.value ? (effectiveUnrotatedRect.value.origin.y - currentObject.value.rect.origin.y) * visualScale.value : (aabbHeight.value - innerHeight.value) / 2
     );
     const innerTransformOrigin = computed(() => {
       if (usesCustomPivot.value && rotationPivot.value) {
-        return `${(rotationPivot.value.x - effectiveUnrotatedRect.value.origin.x) * props.scale}px ${(rotationPivot.value.y - effectiveUnrotatedRect.value.origin.y) * props.scale}px`;
+        return `${(rotationPivot.value.x - effectiveUnrotatedRect.value.origin.x) * visualScale.value}px ${(rotationPivot.value.y - effectiveUnrotatedRect.value.origin.y) * visualScale.value}px`;
       }
       return "center center";
     });
     const centerX = computed(
-      () => rotationPivot.value ? (rotationPivot.value.x - currentObject.value.rect.origin.x) * props.scale : aabbWidth.value / 2
+      () => rotationPivot.value ? (rotationPivot.value.x - currentObject.value.rect.origin.x) * visualScale.value : aabbWidth.value / 2
     );
     const centerY = computed(
-      () => rotationPivot.value ? (rotationPivot.value.y - currentObject.value.rect.origin.y) * props.scale : aabbHeight.value / 2
+      () => rotationPivot.value ? (rotationPivot.value.y - currentObject.value.rect.origin.y) * visualScale.value : aabbHeight.value / 2
     );
     const guideLength = computed(() => Math.max(300, Math.max(aabbWidth.value, aabbHeight.value) + 80));
+    const counterRot = computed(
+      () => hasNoRotate.value ? getCounterRotation(
+        { origin: { x: 0, y: 0 }, size: { width: aabbWidth.value, height: aabbHeight.value } },
+        props.rotation
+      ) : null
+    );
     const rotationIconSize = computed(() => Math.round(ROTATION_SIZE.value * 0.6));
     const apActive = computed(
       () => {
@@ -496,15 +510,31 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       }
     );
     const contentsStyle = { display: "contents" };
-    const outerAABBStyle = computed(() => ({
+    const layerBaseStyle = computed(() => ({
       position: "absolute",
       left: `${currentObject.value.rect.origin.x * props.scale}px`,
       top: `${currentObject.value.rect.origin.y * props.scale}px`,
-      width: `${aabbWidth.value}px`,
-      height: `${aabbHeight.value}px`,
+      width: `${counterRot.value ? counterRot.value.width : aabbWidth.value}px`,
+      height: `${counterRot.value ? counterRot.value.height : aabbHeight.value}px`,
       pointerEvents: "none",
       zIndex: props.zIndex,
-      ...props.style ?? {}
+      ...counterRot.value ? { transform: counterRot.value.matrix, transformOrigin: "0 0" } : {}
+    }));
+    const visualLayerStyle = computed(() => ({
+      ...layerBaseStyle.value,
+      ...props.blendMode ? { mixBlendMode: props.blendMode } : {},
+      ...props.style
+    }));
+    const outerAABBStyle = computed(() => layerBaseStyle.value);
+    const visualInnerStyle = computed(() => ({
+      position: "absolute",
+      left: `${innerLeft.value}px`,
+      top: `${innerTop.value}px`,
+      width: `${innerWidth.value}px`,
+      height: `${innerHeight.value}px`,
+      transform: annotationRotation.value !== 0 ? `rotate(${annotationRotation.value}deg)` : void 0,
+      transformOrigin: innerTransformOrigin.value,
+      pointerEvents: "none"
     }));
     const innerRotatedStyle = computed(() => ({
       position: "absolute",
@@ -616,6 +646,23 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         "data-no-interaction": "",
         style: contentsStyle
       }, [
+        createElementVNode("div", {
+          style: normalizeStyle(visualLayerStyle.value)
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle(visualInnerStyle.value)
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              annotation: childObject.value,
+              appearanceActive: apActive.value
+            }),
+            ((_a = __props.appearance) == null ? void 0 : _a.normal) ? (openBlock(), createBlock(_sfc_main$D, {
+              key: 0,
+              appearance: __props.appearance.normal,
+              style: normalizeStyle({ display: apActive.value ? "block" : "none" })
+            }, null, 8, ["appearance", "style"])) : createCommentVNode("", true)
+          ], 4)
+        ], 4),
         createElementVNode("div", {
           style: normalizeStyle(outerAABBStyle.value)
         }, [
@@ -658,7 +705,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 }, [..._cache[2] || (_cache[2] = [
                   createElementVNode("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }, null, -1),
                   createElementVNode("path", { d: "M21 3v5h-5" }, null, -1)
-                ])], 8, _hoisted_1$a))
+                ])], 8, _hoisted_1$c))
               ], 16)
             ]) : (openBlock(), createElementBlock("div", mergeProps({ key: 2 }, rotationHandleBindings.value, { style: rotationHandleStyle.value }), [
               (openBlock(), createElementBlock("svg", {
@@ -673,20 +720,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               }, [..._cache[3] || (_cache[3] = [
                 createElementVNode("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }, null, -1),
                 createElementVNode("path", { d: "M21 3v5h-5" }, null, -1)
-              ])], 8, _hoisted_2$8))
+              ])], 8, _hoisted_2$a))
             ], 16))
           ], 32)) : createCommentVNode("", true),
           createElementVNode("div", mergeProps({ ...effectiveIsDraggable.value && __props.isSelected ? unref(dragProps) : {}, ...unref(doubleProps) }, { style: innerRotatedStyle.value }), [
-            renderSlot(_ctx.$slots, "default", {
-              annotation: childObject.value,
-              appearanceActive: apActive.value
-            }),
-            ((_a = __props.appearance) == null ? void 0 : _a.normal) ? (openBlock(), createBlock(_sfc_main$z, {
-              key: 0,
-              appearance: __props.appearance.normal,
-              style: normalizeStyle({ display: apActive.value ? "block" : "none" })
-            }, null, 8, ["appearance", "style"])) : createCommentVNode("", true),
-            __props.isSelected && effectiveIsResizable.value && !rotationActive.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(resize), ({ key, style, ...handle }) => {
+            __props.isSelected && effectiveIsResizable.value && !rotationActive.value ? (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,
@@ -703,7 +741,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 }), null, 16))
               ], 64);
             }), 128)) : createCommentVNode("", true),
-            __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && !rotationActive.value && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
+            __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && !rotationActive.value && 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,
@@ -751,14 +789,65 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$9 = {
+function mapCounterRotatePoint(x, y, width, height, rotation) {
+  switch (rotation) {
+    case 1:
+      return { x: y, y: height - x };
+    case 2:
+      return { x: width - x, y: height - y };
+    case 3:
+      return { x: width - y, y: x };
+    default:
+      return { x, y };
+  }
+}
+function getAnnotationScreenBounds(annotation, scale, rotation) {
+  const flags = annotation.object.flags ?? [];
+  const hasNoZoom = flags.includes("noZoom");
+  const hasNoRotate = flags.includes("noRotate");
+  const left = annotation.object.rect.origin.x * scale;
+  const top = annotation.object.rect.origin.y * scale;
+  const width = annotation.object.rect.size.width * (hasNoZoom ? 1 : scale);
+  const height = annotation.object.rect.size.height * (hasNoZoom ? 1 : scale);
+  if (!hasNoRotate || rotation === 0) {
+    return {
+      left,
+      top,
+      right: left + width,
+      bottom: top + height
+    };
+  }
+  const corners = [
+    mapCounterRotatePoint(0, 0, width, height, rotation),
+    mapCounterRotatePoint(width, 0, width, height, rotation),
+    mapCounterRotatePoint(0, height, width, height, rotation),
+    mapCounterRotatePoint(width, height, width, height, rotation)
+  ];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const corner of corners) {
+    if (corner.x < minX) minX = corner.x;
+    if (corner.y < minY) minY = corner.y;
+    if (corner.x > maxX) maxX = corner.x;
+    if (corner.y > maxY) maxY = corner.y;
+  }
+  return {
+    left: left + minX,
+    top: top + minY,
+    right: left + maxX,
+    bottom: top + maxY
+  };
+}
+const _hoisted_1$b = {
   key: 0,
   "data-group-selection-box": "",
   "data-no-interaction": ""
 };
-const _hoisted_2$7 = ["width", "height", "stroke"];
-const _hoisted_3$7 = ["width", "height", "stroke"];
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _hoisted_2$9 = ["width", "height", "stroke"];
+const _hoisted_3$9 = ["width", "height", "stroke"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "group-selection-box",
   props: {
     documentId: {},
@@ -897,8 +986,42 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    const groupBoxWidth = computed(() => previewGroupBox.value.size.width * props.scale);
-    const groupBoxHeight = computed(() => previewGroupBox.value.size.height * props.scale);
+    const visualBoundsCorrection = computed(() => {
+      let visualLeft = Infinity;
+      let visualTop = Infinity;
+      let visualRight = -Infinity;
+      let visualBottom = -Infinity;
+      for (const ta of props.selectedAnnotations) {
+        const bounds = getAnnotationScreenBounds(ta, props.scale, props.rotation);
+        if (bounds.left < visualLeft) visualLeft = bounds.left;
+        if (bounds.top < visualTop) visualTop = bounds.top;
+        if (bounds.right > visualRight) visualRight = bounds.right;
+        if (bounds.bottom > visualBottom) visualBottom = bounds.bottom;
+      }
+      const gb = groupBox.value;
+      const logicalLeft = gb.origin.x * props.scale;
+      const logicalTop = gb.origin.y * props.scale;
+      const logicalRight = (gb.origin.x + gb.size.width) * props.scale;
+      const logicalBottom = (gb.origin.y + gb.size.height) * props.scale;
+      return {
+        left: visualLeft - logicalLeft,
+        top: visualTop - logicalTop,
+        right: visualRight - logicalRight,
+        bottom: visualBottom - logicalBottom
+      };
+    });
+    const groupBoxLeft = computed(
+      () => previewGroupBox.value.origin.x * props.scale + visualBoundsCorrection.value.left
+    );
+    const groupBoxTop = computed(
+      () => previewGroupBox.value.origin.y * props.scale + visualBoundsCorrection.value.top
+    );
+    const groupBoxWidth = computed(
+      () => previewGroupBox.value.size.width * props.scale + (visualBoundsCorrection.value.right - visualBoundsCorrection.value.left)
+    );
+    const groupBoxHeight = computed(
+      () => previewGroupBox.value.size.height * props.scale + (visualBoundsCorrection.value.bottom - visualBoundsCorrection.value.top)
+    );
     const groupCenterX = computed(() => groupBoxWidth.value / 2);
     const groupCenterY = computed(() => groupBoxHeight.value / 2);
     const groupGuideLength = computed(
@@ -907,8 +1030,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     const contentsStyle = { display: "contents" };
     const outerStyle = computed(() => ({
       position: "absolute",
-      left: `${previewGroupBox.value.origin.x * props.scale}px`,
-      top: `${previewGroupBox.value.origin.y * props.scale}px`,
+      left: `${groupBoxLeft.value}px`,
+      top: `${groupBoxTop.value}px`,
       width: `${groupBoxWidth.value}px`,
       height: `${groupBoxHeight.value}px`,
       pointerEvents: "none",
@@ -1017,12 +1140,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     }));
     const menuRect = computed(() => ({
       origin: {
-        x: previewGroupBox.value.origin.x * props.scale,
-        y: previewGroupBox.value.origin.y * props.scale
+        x: groupBoxLeft.value,
+        y: groupBoxTop.value
       },
       size: {
-        width: previewGroupBox.value.size.width * props.scale,
-        height: previewGroupBox.value.size.height * props.scale
+        width: groupBoxWidth.value,
+        height: groupBoxHeight.value
       }
     }));
     const menuContext = computed(() => ({
@@ -1184,7 +1307,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
       currentRotation: computed(() => liveRotation.value ?? 0)
     });
     return (_ctx, _cache) => {
-      return __props.selectedAnnotations.length >= 2 ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return __props.selectedAnnotations.length >= 2 ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
         createElementVNode("div", {
           style: normalizeStyle(outerStyle.value)
         }, [
@@ -1227,7 +1350,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 }, [..._cache[2] || (_cache[2] = [
                   createElementVNode("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }, null, -1),
                   createElementVNode("path", { d: "M21 3v5h-5" }, null, -1)
-                ])], 8, _hoisted_2$7))
+                ])], 8, _hoisted_2$9))
               ], 16)
             ]) : (openBlock(), createElementBlock("div", mergeProps({ key: 2 }, rotationHandleBindings.value, { style: rotationHandleStyle.value }), [
               (openBlock(), createElementBlock("svg", {
@@ -1242,7 +1365,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
               }, [..._cache[3] || (_cache[3] = [
                 createElementVNode("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }, null, -1),
                 createElementVNode("path", { d: "M21 3v5h-5" }, null, -1)
-              ])], 8, _hoisted_3$7))
+              ])], 8, _hoisted_3$9))
             ], 16))
           ], 32)) : createCommentVNode("", true),
           createElementVNode("div", mergeProps(
@@ -1268,7 +1391,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
             }), 128)) : createCommentVNode("", true)
           ], 16)
         ], 4),
-        shouldShowMenu.value ? (openBlock(), createBlock(unref(CounterRotate), {
+        shouldShowMenu.value && !rotationActive.value ? (openBlock(), createBlock(unref(CounterRotate), {
           key: 0,
           rect: menuRect.value,
           rotation: __props.rotation
@@ -1336,6 +1459,7 @@ function createRenderer(entry) {
     component: markRaw(entry.component),
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
+    defaultBlendMode: entry.defaultBlendMode,
     containerStyle: entry.containerStyle,
     interactionDefaults: entry.interactionDefaults,
     useAppearanceStream: entry.useAppearanceStream,
@@ -1345,12 +1469,12 @@ function createRenderer(entry) {
     hideSelectionMenu: entry.hideSelectionMenu
   };
 }
-const _hoisted_1$8 = ["width", "height", "viewBox"];
-const _hoisted_2$6 = ["d", "stroke-width"];
-const _hoisted_3$6 = ["d", "opacity"];
-const __default__$c = { inheritAttrs: false };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
-  ...__default__$c,
+const _hoisted_1$a = ["width", "height", "viewBox"];
+const _hoisted_2$8 = ["d", "stroke-width"];
+const _hoisted_3$8 = ["d", "opacity"];
+const __default__$d = { inheritAttrs: false };
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
   __name: "ink",
   props: {
     isSelected: { type: Boolean },
@@ -1406,15 +1530,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             "stroke-width": hitStrokeWidth.value,
             onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
             (...args) => __props.onClick && __props.onClick(...args)),
-            onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-            (...args) => __props.onClick && __props.onClick(...args)),
             style: normalizeStyle({
               cursor: __props.isSelected ? "move" : "pointer",
               pointerEvents: __props.isSelected ? "none" : "visibleStroke",
               strokeLinecap: "round",
               strokeLinejoin: "round"
             })
-          }, null, 44, _hoisted_2$6);
+          }, null, 44, _hoisted_2$8);
         }), 128)),
         !__props.appearanceActive ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(paths.value, (d, i) => {
           return openBlock(), createElementBlock("path", {
@@ -1429,13 +1551,13 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
               strokeLinecap: "round",
               strokeLinejoin: "round"
             })
-          }, null, 12, _hoisted_3$6);
+          }, null, 12, _hoisted_3$8);
         }), 128)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$8);
+      ], 12, _hoisted_1$a);
     };
   }
 });
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "ink-renderer",
   props: {
     annotation: {},
@@ -1450,7 +1572,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$w, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$A, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -1459,12 +1581,14 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["width", "height", "viewBox"];
-const _hoisted_2$5 = ["x", "y", "width", "height", "stroke-width"];
-const _hoisted_3$5 = ["x", "y", "width", "height", "fill", "opacity"];
-const __default__$b = { inheritAttrs: false };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
-  ...__default__$b,
+const _hoisted_1$9 = ["width", "height", "viewBox"];
+const _hoisted_2$7 = ["d", "stroke-width"];
+const _hoisted_3$7 = ["x", "y", "width", "height", "stroke-width"];
+const _hoisted_4$6 = ["d", "fill", "opacity"];
+const _hoisted_5$5 = ["x", "y", "width", "height", "fill", "opacity"];
+const __default__$c = { inheritAttrs: false };
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  ...__default__$c,
   __name: "square",
   props: {
     isSelected: { type: Boolean },
@@ -1477,11 +1601,14 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     rect: {},
     scale: {},
     onClick: {},
-    appearanceActive: { type: Boolean, default: false }
+    appearanceActive: { type: Boolean, default: false },
+    cloudyBorderIntensity: {},
+    rectangleDifferences: {}
   },
   setup(__props) {
     const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
+    const isCloudy = computed(() => (props.cloudyBorderIntensity ?? 0) > 0);
     const geometry = computed(() => {
       const outerW = props.rect.size.width;
       const outerH = props.rect.size.height;
@@ -1494,8 +1621,17 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         y: props.strokeWidth / 2
       };
     });
-    const svgWidth = computed(() => (geometry.value.width + props.strokeWidth) * props.scale);
-    const svgHeight = computed(() => (geometry.value.height + props.strokeWidth) * props.scale);
+    const cloudyPath = computed(() => {
+      if (!isCloudy.value) return null;
+      return generateCloudyRectanglePath(
+        { x: 0, y: 0, width: props.rect.size.width, height: props.rect.size.height },
+        props.rectangleDifferences,
+        props.cloudyBorderIntensity,
+        props.strokeWidth
+      );
+    });
+    const svgWidth = computed(() => props.rect.size.width * props.scale);
+    const svgHeight = computed(() => props.rect.size.height * props.scale);
     const hitStrokeWidth = computed(
       () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
     );
@@ -1511,48 +1647,72 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         }),
         width: svgWidth.value,
         height: svgHeight.value,
-        viewBox: `0 0 ${geometry.value.width + __props.strokeWidth} ${geometry.value.height + __props.strokeWidth}`,
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`,
         overflow: "visible"
       }, [
-        createElementVNode("rect", {
-          x: geometry.value.x,
-          y: geometry.value.y,
-          width: geometry.value.width,
-          height: geometry.value.height,
+        isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: cloudyPath.value.path,
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 44, _hoisted_2$5),
-        !__props.appearanceActive ? (openBlock(), createElementBlock("rect", {
-          key: 0,
+        }, null, 44, _hoisted_2$7)) : (openBlock(), createElementBlock("rect", {
+          key: 1,
           x: geometry.value.x,
           y: geometry.value.y,
           width: geometry.value.width,
           height: geometry.value.height,
-          fill: __props.color,
-          opacity: __props.opacity,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
+          onPointerdown: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
-            pointerEvents: "none",
-            stroke: __props.strokeColor ?? __props.color,
-            strokeWidth: __props.strokeWidth,
-            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-            }
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 12, _hoisted_3$5)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$7);
+        }, null, 44, _hoisted_3$7)),
+        !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: cloudyPath.value.path,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              strokeLinejoin: "round"
+            })
+          }, null, 12, _hoisted_4$6)) : (openBlock(), createElementBlock("rect", {
+            key: 1,
+            x: geometry.value.x,
+            y: geometry.value.y,
+            width: geometry.value.width,
+            height: geometry.value.height,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+              }
+            })
+          }, null, 12, _hoisted_5$5))
+        ], 64)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$9);
     };
   }
 });
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "square-renderer",
   props: {
     annotation: {},
@@ -1567,7 +1727,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$u, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$y, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -1576,12 +1736,14 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = ["width", "height", "viewBox"];
-const _hoisted_2$4 = ["cx", "cy", "rx", "ry", "stroke-width"];
-const _hoisted_3$4 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
-const __default__$a = { inheritAttrs: false };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
-  ...__default__$a,
+const _hoisted_1$8 = ["width", "height", "viewBox"];
+const _hoisted_2$6 = ["d", "stroke-width"];
+const _hoisted_3$6 = ["cx", "cy", "rx", "ry", "stroke-width"];
+const _hoisted_4$5 = ["d", "fill", "opacity"];
+const _hoisted_5$4 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
+const __default__$b = { inheritAttrs: false };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...__default__$b,
   __name: "circle",
   props: {
     isSelected: { type: Boolean },
@@ -1594,11 +1756,14 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     rect: {},
     scale: {},
     onClick: {},
-    appearanceActive: { type: Boolean, default: false }
+    appearanceActive: { type: Boolean, default: false },
+    cloudyBorderIntensity: {},
+    rectangleDifferences: {}
   },
   setup(__props) {
     const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
+    const isCloudy = computed(() => (props.cloudyBorderIntensity ?? 0) > 0);
     const geometry = computed(() => {
       const outerW = props.rect.size.width;
       const outerH = props.rect.size.height;
@@ -1613,6 +1778,15 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         ry: innerH / 2
       };
     });
+    const cloudyPath = computed(() => {
+      if (!isCloudy.value) return null;
+      return generateCloudyEllipsePath(
+        { x: 0, y: 0, width: props.rect.size.width, height: props.rect.size.height },
+        props.rectangleDifferences,
+        props.cloudyBorderIntensity,
+        props.strokeWidth
+      );
+    });
     const svgWidth = computed(() => geometry.value.width * props.scale);
     const svgHeight = computed(() => geometry.value.height * props.scale);
     const hitStrokeWidth = computed(
@@ -1633,45 +1807,69 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
         viewBox: `0 0 ${geometry.value.width} ${geometry.value.height}`,
         overflow: "visible"
       }, [
-        createElementVNode("ellipse", {
-          cx: geometry.value.cx,
-          cy: geometry.value.cy,
-          rx: geometry.value.rx,
-          ry: geometry.value.ry,
+        isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: cloudyPath.value.path,
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 44, _hoisted_2$4),
-        !__props.appearanceActive ? (openBlock(), createElementBlock("ellipse", {
-          key: 0,
+        }, null, 44, _hoisted_2$6)) : (openBlock(), createElementBlock("ellipse", {
+          key: 1,
           cx: geometry.value.cx,
           cy: geometry.value.cy,
           rx: geometry.value.rx,
           ry: geometry.value.ry,
-          fill: __props.color,
-          opacity: __props.opacity,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
+          onPointerdown: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
-            pointerEvents: "none",
-            stroke: __props.strokeColor ?? __props.color,
-            strokeWidth: __props.strokeWidth,
-            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-            }
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 12, _hoisted_3$4)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$6);
+        }, null, 44, _hoisted_3$6)),
+        !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: cloudyPath.value.path,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              strokeLinejoin: "round"
+            })
+          }, null, 12, _hoisted_4$5)) : (openBlock(), createElementBlock("ellipse", {
+            key: 1,
+            cx: geometry.value.cx,
+            cy: geometry.value.cy,
+            rx: geometry.value.rx,
+            ry: geometry.value.ry,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+              }
+            })
+          }, null, 12, _hoisted_5$4))
+        ], 64)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$8);
     };
   }
 });
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "circle-renderer",
   props: {
     annotation: {},
@@ -1686,7 +1884,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$s, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$w, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -1695,16 +1893,16 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = ["width", "height", "viewBox"];
-const _hoisted_2$3 = ["x1", "y1", "x2", "y2", "stroke-width"];
-const _hoisted_3$3 = ["d", "transform", "stroke-width"];
-const _hoisted_4$3 = ["d", "transform", "stroke-width"];
-const _hoisted_5$2 = ["x1", "y1", "x2", "y2", "opacity"];
-const _hoisted_6$1 = ["d", "transform", "stroke", "fill"];
+const _hoisted_1$7 = ["width", "height", "viewBox"];
+const _hoisted_2$5 = ["x1", "y1", "x2", "y2", "stroke-width"];
+const _hoisted_3$5 = ["d", "transform", "stroke-width"];
+const _hoisted_4$4 = ["d", "transform", "stroke-width"];
+const _hoisted_5$3 = ["x1", "y1", "x2", "y2", "opacity"];
+const _hoisted_6$2 = ["d", "transform", "stroke", "fill"];
 const _hoisted_7$1 = ["d", "transform", "stroke", "fill"];
-const __default__$9 = { inheritAttrs: false };
-const _sfc_main$q = /* @__PURE__ */ defineComponent({
-  ...__default__$9,
+const __default__$a = { inheritAttrs: false };
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
   __name: "line",
   props: {
     color: { default: "transparent" },
@@ -1774,14 +1972,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : "visibleStroke",
             strokeLinecap: "butt"
           })
-        }, null, 44, _hoisted_2$3),
+        }, null, 44, _hoisted_2$5),
         endings.value.start ? (openBlock(), createElementBlock("path", {
           key: 0,
           d: endings.value.start.d,
@@ -1789,16 +1985,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
-          onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
+          onPointerdown: _cache[1] || (_cache[1] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : endings.value.start.filled ? "visible" : "visibleStroke",
             strokeLinecap: "butt"
           })
-        }, null, 44, _hoisted_3$3)) : createCommentVNode("", true),
+        }, null, 44, _hoisted_3$5)) : createCommentVNode("", true),
         endings.value.end ? (openBlock(), createElementBlock("path", {
           key: 1,
           d: endings.value.end.d,
@@ -1806,16 +2000,14 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
-          onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
+          onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : endings.value.end.filled ? "visible" : "visibleStroke",
             strokeLinecap: "butt"
           })
-        }, null, 44, _hoisted_4$3)) : createCommentVNode("", true),
+        }, null, 44, _hoisted_4$4)) : createCommentVNode("", true),
         !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createElementVNode("line", {
             x1: localLine.value.x1,
@@ -1832,7 +2024,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
               }
             })
-          }, null, 12, _hoisted_5$2),
+          }, null, 12, _hoisted_5$3),
           endings.value.start ? (openBlock(), createElementBlock("path", {
             key: 0,
             d: endings.value.start.d,
@@ -1847,7 +2039,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
                 strokeDasharray: (_b = __props.strokeDashArray) == null ? void 0 : _b.join(",")
               }
             })
-          }, null, 12, _hoisted_6$1)) : createCommentVNode("", true),
+          }, null, 12, _hoisted_6$2)) : createCommentVNode("", true),
           endings.value.end ? (openBlock(), createElementBlock("path", {
             key: 1,
             d: endings.value.end.d,
@@ -1864,11 +2056,11 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
             })
           }, null, 12, _hoisted_7$1)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$5);
+      ], 12, _hoisted_1$7);
     };
   }
 });
-const _sfc_main$p = /* @__PURE__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "line-renderer",
   props: {
     annotation: {},
@@ -1883,7 +2075,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$q, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$u, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -1892,16 +2084,16 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$4 = ["width", "height", "viewBox"];
-const _hoisted_2$2 = ["d", "stroke-width"];
-const _hoisted_3$2 = ["d", "transform", "stroke-width"];
-const _hoisted_4$2 = ["d", "transform", "stroke-width"];
-const _hoisted_5$1 = ["d", "opacity"];
-const _hoisted_6 = ["d", "transform", "stroke", "fill"];
+const _hoisted_1$6 = ["width", "height", "viewBox"];
+const _hoisted_2$4 = ["d", "stroke-width"];
+const _hoisted_3$4 = ["d", "transform", "stroke-width"];
+const _hoisted_4$3 = ["d", "transform", "stroke-width"];
+const _hoisted_5$2 = ["d", "opacity"];
+const _hoisted_6$1 = ["d", "transform", "stroke", "fill"];
 const _hoisted_7 = ["d", "transform", "stroke", "fill"];
-const __default__$8 = { inheritAttrs: false };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  ...__default__$8,
+const __default__$9 = { inheritAttrs: false };
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
   __name: "polyline",
   props: {
     rect: {},
@@ -1910,6 +2102,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     strokeColor: { default: "#000000" },
     opacity: { default: 1 },
     strokeWidth: {},
+    strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
+    strokeDashArray: {},
     scale: {},
     isSelected: { type: Boolean },
     onClick: {},
@@ -1962,6 +2156,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
     );
     return (_ctx, _cache) => {
+      var _a, _b, _c;
       return openBlock(), createElementBlock("svg", {
         style: normalizeStyle({
           position: "absolute",
@@ -1982,15 +2177,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : "visibleStroke",
             strokeLinecap: "butt",
             strokeLinejoin: "miter"
           })
-        }, null, 44, _hoisted_2$2),
+        }, null, 44, _hoisted_2$4),
         endings.value.start ? (openBlock(), createElementBlock("path", {
           key: 0,
           d: endings.value.start.d,
@@ -1998,16 +2191,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
-          onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
+          onPointerdown: _cache[1] || (_cache[1] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : endings.value.start.filled ? "visible" : "visibleStroke",
             strokeLinecap: "butt"
           })
-        }, null, 44, _hoisted_3$2)) : createCommentVNode("", true),
+        }, null, 44, _hoisted_3$4)) : createCommentVNode("", true),
         endings.value.end ? (openBlock(), createElementBlock("path", {
           key: 1,
           d: endings.value.end.d,
@@ -2015,16 +2206,14 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
-          onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
+          onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : endings.value.end.filled ? "visible" : "visibleStroke",
             strokeLinecap: "butt"
           })
-        }, null, 44, _hoisted_4$2)) : createCommentVNode("", true),
+        }, null, 44, _hoisted_4$3)) : createCommentVNode("", true),
         !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createElementVNode("path", {
             d: pathData.value,
@@ -2035,9 +2224,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               strokeWidth: __props.strokeWidth,
               pointerEvents: "none",
               strokeLinecap: "butt",
-              strokeLinejoin: "miter"
+              strokeLinejoin: "miter",
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+              }
             })
-          }, null, 12, _hoisted_5$1),
+          }, null, 12, _hoisted_5$2),
           endings.value.start ? (openBlock(), createElementBlock("path", {
             key: 0,
             d: endings.value.start.d,
@@ -2047,9 +2239,12 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({
               pointerEvents: "none",
               strokeWidth: __props.strokeWidth,
-              strokeLinecap: "butt"
+              strokeLinecap: "butt",
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_b = __props.strokeDashArray) == null ? void 0 : _b.join(",")
+              }
             })
-          }, null, 12, _hoisted_6)) : createCommentVNode("", true),
+          }, null, 12, _hoisted_6$1)) : createCommentVNode("", true),
           endings.value.end ? (openBlock(), createElementBlock("path", {
             key: 1,
             d: endings.value.end.d,
@@ -2059,15 +2254,18 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({
               pointerEvents: "none",
               strokeWidth: __props.strokeWidth,
-              strokeLinecap: "butt"
+              strokeLinecap: "butt",
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_c = __props.strokeDashArray) == null ? void 0 : _c.join(",")
+              }
             })
           }, null, 12, _hoisted_7)) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$4);
+      ], 12, _hoisted_1$6);
     };
   }
 });
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "polyline-renderer",
   props: {
     annotation: {},
@@ -2082,7 +2280,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$o, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$s, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -2091,14 +2289,15 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = ["width", "height", "viewBox"];
-const _hoisted_2$1 = ["d", "stroke-width"];
-const _hoisted_3$1 = ["d", "opacity"];
-const _hoisted_4$1 = ["d"];
-const _hoisted_5 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
-const __default__$7 = { inheritAttrs: false };
-const _sfc_main$m = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+const _hoisted_1$5 = ["width", "height", "viewBox"];
+const _hoisted_2$3 = ["d", "stroke-width"];
+const _hoisted_3$3 = ["d", "opacity"];
+const _hoisted_4$2 = ["d", "opacity"];
+const _hoisted_5$1 = ["d"];
+const _hoisted_6 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
+const __default__$8 = { inheritAttrs: false };
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   __name: "polygon",
   props: {
     rect: {},
@@ -2114,11 +2313,13 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     onClick: {},
     currentVertex: {},
     handleSize: { default: 14 },
-    appearanceActive: { type: Boolean, default: false }
+    appearanceActive: { type: Boolean, default: false },
+    cloudyBorderIntensity: {}
   },
   setup(__props) {
     const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
+    const isCloudy = computed(() => (props.cloudyBorderIntensity ?? 0) > 0);
     const allPoints = computed(
       () => props.currentVertex ? [...props.vertices, props.currentVertex] : props.vertices
     );
@@ -2134,6 +2335,15 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
       const isPreview = !!props.currentVertex;
       return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
     });
+    const cloudyPath = computed(() => {
+      if (!isCloudy.value || allPoints.value.length < 3) return null;
+      return generateCloudyPolygonPath(
+        allPoints.value,
+        props.rect.origin,
+        props.cloudyBorderIntensity,
+        props.strokeWidth
+      );
+    });
     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);
@@ -2156,67 +2366,78 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
         viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
       }, [
         createElementVNode("path", {
-          d: pathData.value,
+          d: isCloudy.value && cloudyPath.value ? cloudyPath.value.path : pathData.value,
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible",
             strokeLinecap: "butt",
             strokeLinejoin: "miter"
           })
-        }, null, 44, _hoisted_2$1),
+        }, null, 44, _hoisted_2$3),
         !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("path", {
-            d: pathData.value,
+          isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: cloudyPath.value.path,
             opacity: __props.opacity,
             style: normalizeStyle({
-              fill: __props.currentVertex ? "none" : __props.color,
+              fill: __props.color,
               stroke: __props.strokeColor ?? __props.color,
               strokeWidth: __props.strokeWidth,
               pointerEvents: "none",
-              strokeLinecap: "butt",
-              strokeLinejoin: "miter",
-              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-              }
+              strokeLinejoin: "round"
             })
-          }, null, 12, _hoisted_3$1),
-          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({
+          }, null, 12, _hoisted_3$3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createElementVNode("path", {
+              d: pathData.value,
+              opacity: __props.opacity,
+              style: normalizeStyle({
+                fill: __props.currentVertex ? "none" : __props.color,
+                stroke: __props.strokeColor ?? __props.color,
+                strokeWidth: __props.strokeWidth,
+                pointerEvents: "none",
+                strokeLinecap: "butt",
+                strokeLinejoin: "miter",
+                ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                  strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+                }
+              })
+            }, null, 12, _hoisted_4$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: __props.strokeColor,
+                strokeWidth: __props.strokeWidth,
+                strokeDasharray: "4,4",
+                opacity: 0.7,
+                pointerEvents: "none"
+              })
+            }, null, 12, _hoisted_5$1)) : createCommentVNode("", true),
+            isPreviewing.value && localPts.value.length >= 2 ? (openBlock(), createElementBlock("rect", {
+              key: 1,
+              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: __props.strokeColor,
-              strokeWidth: __props.strokeWidth,
-              strokeDasharray: "4,4",
-              opacity: 0.7,
-              pointerEvents: "none"
-            })
-          }, null, 12, _hoisted_4$1)) : createCommentVNode("", true),
-          isPreviewing.value && localPts.value.length >= 2 ? (openBlock(), createElementBlock("rect", {
-            key: 1,
-            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: __props.strokeColor,
-            "stroke-width": __props.strokeWidth / 2,
-            style: { "pointer-events": "none" }
-          }, null, 8, _hoisted_5)) : createCommentVNode("", true)
+              "stroke-width": __props.strokeWidth / 2,
+              style: { "pointer-events": "none" }
+            }, null, 8, _hoisted_6)) : createCommentVNode("", true)
+          ], 64))
         ], 64)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$3);
+      ], 12, _hoisted_1$5);
     };
   }
 });
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "polygon-renderer",
   props: {
     annotation: {},
@@ -2231,7 +2452,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$m, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$q, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -2240,10 +2461,10 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = ["contenteditable"];
-const __default__$6 = { inheritAttrs: false };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _hoisted_1$4 = ["contenteditable"];
+const __default__$7 = { inheritAttrs: false };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
   __name: "free-text",
   props: {
     documentId: {},
@@ -2341,8 +2562,6 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           opacity: __props.appearanceActive ? 0 : 1
         }),
         onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-        (...args) => __props.onClick && __props.onClick(...args)),
-        onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
         (...args) => __props.onClick && __props.onClick(...args))
       }, [
         createElementVNode("span", {
@@ -2352,12 +2571,12 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           tabindex: "0",
           style: normalizeStyle(editorStyle.value),
           contenteditable: __props.isEditing
-        }, toDisplayString(__props.annotation.object.contents), 45, _hoisted_1$2)
+        }, toDisplayString(__props.annotation.object.contents), 45, _hoisted_1$4)
       ], 36);
     };
   }
 });
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "free-text-renderer",
   props: {
     annotation: {},
@@ -2372,7 +2591,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$k, {
+      return openBlock(), createBlock(_sfc_main$o, {
         documentId: __props.documentId,
         isSelected: __props.isSelected,
         isEditing: __props.isEditing,
@@ -2385,8 +2604,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = ["src"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = ["src"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "render-annotation",
   props: {
     documentId: {},
@@ -2481,13 +2700,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           display: "block",
           ...__props.style
         })
-      }, null, 44, _hoisted_1$1)) : createCommentVNode("", true);
+      }, null, 44, _hoisted_1$3)) : createCommentVNode("", true);
     };
   }
 });
-const __default__$5 = { inheritAttrs: false };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+const __default__$6 = { inheritAttrs: false };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
   __name: "stamp",
   props: {
     isSelected: { type: Boolean },
@@ -2513,11 +2732,9 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
           cursor: "pointer"
         }),
         onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-        (...args) => __props.onClick && __props.onClick(...args)),
-        onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
         (...args) => __props.onClick && __props.onClick(...args))
       }, [
-        createVNode(_sfc_main$i, {
+        createVNode(_sfc_main$m, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
           annotation: { ...__props.annotation.object, id: __props.annotation.object.id },
@@ -2528,7 +2745,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "stamp-renderer",
   props: {
     annotation: {},
@@ -2543,7 +2760,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$h, {
+      return openBlock(), createBlock(_sfc_main$l, {
         isSelected: __props.isSelected,
         annotation: __props.annotation,
         documentId: __props.documentId,
@@ -2554,13 +2771,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = ["width", "height", "viewBox"];
-const _hoisted_2 = ["width", "height"];
-const _hoisted_3 = ["y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"];
-const _hoisted_4 = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-dasharray"];
-const __default__$4 = { inheritAttrs: false };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _hoisted_1$2 = ["width", "height", "viewBox"];
+const _hoisted_2$2 = ["width", "height"];
+const _hoisted_3$2 = ["y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"];
+const _hoisted_4$1 = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-dasharray"];
+const __default__$5 = { inheritAttrs: false };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
   __name: "link",
   props: {
     isSelected: { type: Boolean },
@@ -2612,13 +2829,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           width: width.value,
           height: height.value,
           fill: "transparent",
-          onPointerdown: _cache[0] || (_cache[0] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
-          onTouchstart: _cache[1] || (_cache[1] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return __props.hasIRT ? void 0 : (_a = __props.onClick) == null ? void 0 : _a.call(__props, $event);
+          }),
           style: normalizeStyle({
             cursor: hitAreaCursor.value,
             pointerEvents: hitAreaPointerEvents.value
           })
-        }, null, 44, _hoisted_2),
+        }, null, 44, _hoisted_2$2),
         isUnderline.value ? (openBlock(), createElementBlock("line", {
           key: 0,
           x1: 1,
@@ -2629,7 +2848,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "stroke-width": __props.strokeWidth,
           "stroke-dasharray": dashArray.value,
           style: { "pointer-events": "none" }
-        }, null, 8, _hoisted_3)) : (openBlock(), createElementBlock("rect", {
+        }, null, 8, _hoisted_3$2)) : (openBlock(), createElementBlock("rect", {
           key: 1,
           x: __props.strokeWidth / 2,
           y: __props.strokeWidth / 2,
@@ -2640,12 +2859,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "stroke-width": __props.strokeWidth,
           "stroke-dasharray": dashArray.value,
           style: { "pointer-events": "none" }
-        }, null, 8, _hoisted_4))
-      ], 12, _hoisted_1);
+        }, null, 8, _hoisted_4$1))
+      ], 12, _hoisted_1$2);
     };
   }
 });
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "link-renderer",
   props: {
     annotation: {},
@@ -2660,7 +2879,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$f, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$j, mergeProps(__props.currentObject, {
         isSelected: __props.isSelected,
         scale: __props.scale,
         onClick: __props.onClick,
@@ -2669,9 +2888,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__$3 = { inheritAttrs: false };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const __default__$4 = { inheritAttrs: false };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
   __name: "highlight",
   props: {
     strokeColor: {},
@@ -2691,8 +2910,6 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
             left: `${(__props.rect ? b.origin.x - __props.rect.origin.x : b.origin.x) * __props.scale}px`,
@@ -2710,7 +2927,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "highlight-renderer",
   props: {
     annotation: {},
@@ -2725,7 +2942,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$d, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$h, mergeProps(__props.currentObject, {
         scale: __props.scale,
         onClick: __props.onClick,
         appearanceActive: __props.appearanceActive
@@ -2733,9 +2950,9 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__$2 = { inheritAttrs: false };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+const __default__$3 = { inheritAttrs: false };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
   __name: "underline",
   props: {
     strokeColor: {},
@@ -2756,8 +2973,6 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
             left: `${(__props.rect ? r.origin.x - __props.rect.origin.x : r.origin.x) * __props.scale}px`,
@@ -2788,7 +3003,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "underline-renderer",
   props: {
     annotation: {},
@@ -2803,7 +3018,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$b, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$f, mergeProps(__props.currentObject, {
         scale: __props.scale,
         onClick: __props.onClick,
         appearanceActive: __props.appearanceActive
@@ -2811,9 +3026,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__$1 = { inheritAttrs: false };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const __default__$2 = { inheritAttrs: false };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
   __name: "strikeout",
   props: {
     strokeColor: {},
@@ -2834,8 +3049,6 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
             left: `${(__props.rect ? r.origin.x - __props.rect.origin.x : r.origin.x) * __props.scale}px`,
@@ -2867,7 +3080,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "strikeout-renderer",
   props: {
     annotation: {},
@@ -2882,7 +3095,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$d, mergeProps(__props.currentObject, {
         scale: __props.scale,
         onClick: __props.onClick,
         appearanceActive: __props.appearanceActive
@@ -2890,9 +3103,9 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__ = { inheritAttrs: false };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const __default__$1 = { inheritAttrs: false };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
   __name: "squiggly",
   props: {
     strokeColor: {},
@@ -2923,8 +3136,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           key: i,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             position: "absolute",
             left: `${(__props.rect ? r.origin.x - __props.rect.origin.x : r.origin.x) * __props.scale}px`,
@@ -2957,7 +3168,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "squiggly-renderer",
   props: {
     annotation: {},
@@ -2972,7 +3183,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$7, mergeProps(__props.currentObject, {
+      return openBlock(), createBlock(_sfc_main$b, mergeProps(__props.currentObject, {
         scale: __props.scale,
         onClick: __props.onClick,
         appearanceActive: __props.appearanceActive
@@ -2980,29 +3191,224 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$1 = ["width", "height", "viewBox"];
+const _hoisted_2$1 = ["d"];
+const _hoisted_3$1 = ["d", "fill", "stroke", "opacity"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "caret",
+  props: {
+    isSelected: { type: Boolean },
+    strokeColor: { default: "#000000" },
+    opacity: { default: 1 },
+    rect: {},
+    scale: {},
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const width = computed(() => props.rect.size.width);
+    const height = computed(() => props.rect.size.height);
+    const path = computed(() => {
+      const w = width.value;
+      const h = height.value;
+      const midX = w / 2;
+      return [
+        `M 0 ${h}`,
+        `C ${w * 0.27} ${h} ${midX} ${h - h * 0.44} ${midX} 0`,
+        `C ${midX} ${h - h * 0.44} ${w - w * 0.27} ${h} ${w} ${h}`,
+        "Z"
+      ].join(" ");
+    });
+    const svgWidth = computed(() => width.value * props.scale);
+    const svgHeight = computed(() => height.value * props.scale);
+    return (_ctx, _cache) => {
+      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 ${width.value} ${height.value}`,
+        overflow: "visible"
+      }, [
+        createElementVNode("path", {
+          d: path.value,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": 4,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
+          style: normalizeStyle({
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : "visible"
+          })
+        }, null, 44, _hoisted_2$1),
+        !__props.appearanceActive ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: path.value,
+          fill: __props.strokeColor,
+          stroke: __props.strokeColor,
+          "stroke-width": 0.5,
+          opacity: __props.opacity,
+          "fill-rule": "evenodd",
+          style: { pointerEvents: "none" }
+        }, null, 8, _hoisted_3$1)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$1);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "caret-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$9, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  style: { position: "absolute", inset: 0, pointerEvents: "none" },
+  viewBox: "0 0 20 20",
+  width: "100%",
+  height: "100%"
+};
+const _hoisted_2 = ["fill", "opacity", "stroke"];
+const _hoisted_3 = ["stroke"];
+const _hoisted_4 = ["stroke"];
+const _hoisted_5 = ["stroke"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "text",
+  props: {
+    isSelected: { type: Boolean },
+    color: { default: "#facc15" },
+    opacity: { default: 1 },
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const lineColor = computed(() => getContrastStrokeColor(props.color));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          position: "absolute",
+          inset: 0,
+          zIndex: 2,
+          pointerEvents: __props.isSelected ? "none" : "auto",
+          cursor: __props.isSelected ? "move" : "pointer"
+        }),
+        onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => __props.onClick && __props.onClick(...args))
+      }, [
+        !__props.appearanceActive ? (openBlock(), createElementBlock("svg", _hoisted_1, [
+          createElementVNode("path", {
+            d: "M 0.5 15.5 L 0.5 0.5 L 19.5 0.5 L 19.5 15.5 L 8.5 15.5 L 6.5 19.5 L 4.5 15.5 Z",
+            fill: __props.color,
+            opacity: __props.opacity,
+            stroke: lineColor.value,
+            "stroke-width": "1",
+            "stroke-linejoin": "miter"
+          }, null, 8, _hoisted_2),
+          createElementVNode("line", {
+            x1: "2.5",
+            y1: "4.25",
+            x2: "17.5",
+            y2: "4.25",
+            stroke: lineColor.value,
+            "stroke-width": "1"
+          }, null, 8, _hoisted_3),
+          createElementVNode("line", {
+            x1: "2.5",
+            y1: "8",
+            x2: "17.5",
+            y2: "8",
+            stroke: lineColor.value,
+            "stroke-width": "1"
+          }, null, 8, _hoisted_4),
+          createElementVNode("line", {
+            x1: "2.5",
+            y1: "11.75",
+            x2: "17.5",
+            y2: "11.75",
+            stroke: lineColor.value,
+            "stroke-width": "1"
+          }, null, 8, _hoisted_5)
+        ])) : createCommentVNode("", true)
+      ], 36);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "text-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$7, {
+        isSelected: __props.isSelected,
+        color: __props.currentObject.strokeColor ?? __props.currentObject.color,
+        opacity: __props.currentObject.opacity,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }, null, 8, ["isSelected", "color", "opacity", "onClick", "appearanceActive"]);
+    };
+  }
+});
 const builtInRenderers = [
   createRenderer({
     id: "ink",
     matches: (a) => a.type === PdfAnnotationSubtype.INK,
-    component: _sfc_main$v,
+    component: _sfc_main$z,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "square",
     matches: (a) => a.type === PdfAnnotationSubtype.SQUARE,
-    component: _sfc_main$t,
+    component: _sfc_main$x,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "circle",
     matches: (a) => a.type === PdfAnnotationSubtype.CIRCLE,
-    component: _sfc_main$r,
+    component: _sfc_main$v,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "line",
     matches: (a) => a.type === PdfAnnotationSubtype.LINE,
-    component: _sfc_main$p,
+    component: _sfc_main$t,
     vertexConfig: {
       extractVertices: (a) => [a.linePoints.start, a.linePoints.end],
       transformAnnotation: (a, v) => ({
@@ -3015,7 +3421,7 @@ const builtInRenderers = [
   createRenderer({
     id: "polyline",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYLINE,
-    component: _sfc_main$n,
+    component: _sfc_main$r,
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -3025,7 +3431,7 @@ const builtInRenderers = [
   createRenderer({
     id: "polygon",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYGON,
-    component: _sfc_main$l,
+    component: _sfc_main$p,
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -3035,38 +3441,48 @@ const builtInRenderers = [
   createRenderer({
     id: "highlight",
     matches: (a) => a.type === PdfAnnotationSubtype.HIGHLIGHT,
-    component: _sfc_main$c,
+    component: _sfc_main$g,
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
-    containerStyle: (a) => ({
-      mixBlendMode: blendModeToCss(a.blendMode ?? PdfBlendMode.Multiply)
-    })
+    defaultBlendMode: PdfBlendMode.Multiply
   }),
   createRenderer({
     id: "underline",
     matches: (a) => a.type === PdfAnnotationSubtype.UNDERLINE,
-    component: _sfc_main$a,
+    component: _sfc_main$e,
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
   createRenderer({
     id: "strikeout",
     matches: (a) => a.type === PdfAnnotationSubtype.STRIKEOUT,
-    component: _sfc_main$8,
+    component: _sfc_main$c,
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
   createRenderer({
     id: "squiggly",
     matches: (a) => a.type === PdfAnnotationSubtype.SQUIGGLY,
-    component: _sfc_main$6,
+    component: _sfc_main$a,
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
+  createRenderer({
+    id: "text",
+    matches: (a) => a.type === PdfAnnotationSubtype.TEXT && !a.inReplyToId,
+    component: _sfc_main$6,
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: false }
+  }),
+  createRenderer({
+    id: "caret",
+    matches: (a) => a.type === PdfAnnotationSubtype.CARET,
+    component: _sfc_main$8,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
   createRenderer({
     id: "freeText",
     matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
-    component: _sfc_main$j,
+    component: _sfc_main$n,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true },
     isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
     onDoubleClick: (id, setEditingId) => setEditingId(id)
@@ -3074,14 +3490,14 @@ const builtInRenderers = [
   createRenderer({
     id: "stamp",
     matches: (a) => a.type === PdfAnnotationSubtype.STAMP,
-    component: _sfc_main$g,
+    component: _sfc_main$k,
     useAppearanceStream: false,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "link",
     matches: (a) => a.type === PdfAnnotationSubtype.LINK,
-    component: _sfc_main$e,
+    component: _sfc_main$i,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
     useAppearanceStream: false,
     selectOverride: (e, annotation, helpers) => {
@@ -3378,11 +3794,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         renderer.onDoubleClick(annotation.object.id, setEditingId);
       };
     };
-    const getContainerStyle = (annotation, renderer) => {
-      var _a;
-      return ((_a = renderer.containerStyle) == null ? void 0 : _a.call(renderer, annotation.object)) ?? {
-        mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-      };
+    const getBlendMode = (annotation, renderer) => {
+      return blendModeToCss(
+        annotation.object.blendMode ?? renderer.defaultBlendMode ?? PdfBlendMode.Normal
+      );
     };
     const getAppearance = (annotation, renderer) => {
       var _a, _b;
@@ -3403,10 +3818,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedAnnotations.value, ({ annotation, renderer }) => {
+          var _a;
           return openBlock(), createElementBlock(Fragment, {
             key: annotation.object.id
           }, [
-            renderer ? (openBlock(), createBlock(_sfc_main$y, mergeProps({
+            renderer ? (openBlock(), createBlock(_sfc_main$C, mergeProps({
               key: 0,
               trackedAnnotation: annotation,
               isSelected: allSelectedIds.value.includes(annotation.object.id),
@@ -3421,7 +3837,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               onSelect: getOnSelect(annotation, renderer),
               onDoubleClick: getOnDoubleClick(renderer, annotation),
               zIndex: renderer.zIndex,
-              style: getContainerStyle(annotation, renderer),
+              blendMode: getBlendMode(annotation, renderer),
+              style: (_a = renderer.containerStyle) == null ? void 0 : _a.call(renderer, annotation.object),
               appearance: getAppearance(annotation, renderer)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject, appearanceActive }) => [
@@ -3455,10 +3872,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isEditing", "isMultiSelected", "isDraggable", "isResizable", "lockAspectRatio", "isRotatable", "vertexConfig", "selectionMenu", "onSelect", "onDoubleClick", "zIndex", "style", "appearance"])) : createCommentVNode("", true)
+            ]), 1040, ["trackedAnnotation", "isSelected", "isEditing", "isMultiSelected", "isDraggable", "isResizable", "lockAspectRatio", "isRotatable", "vertexConfig", "selectionMenu", "onSelect", "onDoubleClick", "zIndex", "blendMode", "style", "appearance"])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
-        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$x, {
+        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$B, {
           key: 0,
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
@@ -3541,25 +3958,25 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           inset: 0
         })
       }, [
-        activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$d, {
+        activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$h, {
           key: 0,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$b, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$f, {
           key: 1,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$9, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$d, {
           key: 2,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$7, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$b, {
           key: 3,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
@@ -3578,40 +3995,46 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   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
-    }));
+    const style = computed(() => {
+      const base = {
+        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
+      };
+      if (props.preview.type === PdfAnnotationSubtype.INK) {
+        base.mixBlendMode = blendModeToCss(props.preview.data.blendMode ?? PdfBlendMode.Normal);
+      }
+      return base;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(style.value)
       }, [
-        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$s), mergeProps({
+        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$w), mergeProps({
           key: 0,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$u), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$y), mergeProps({
           key: 1,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$m), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$q), mergeProps({
           key: 2,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$o), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$s), mergeProps({
           key: 3,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$q), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$u), mergeProps({
           key: 4,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$w), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$A), mergeProps({
           key: 5,
           isSelected: false,
           scale: __props.scale
@@ -3862,29 +4285,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 const AnnotationPluginPackage = createPluginPackage(AnnotationPluginPackage$1).addWrapper(_sfc_main).build();
 export {
-  _sfc_main$y as AnnotationContainer,
+  _sfc_main$C as AnnotationContainer,
   _sfc_main$1 as AnnotationLayer,
   _sfc_main$2 as AnnotationPaintLayer,
   AnnotationPluginPackage,
   _sfc_main$5 as Annotations,
-  _sfc_main$s as Circle,
-  _sfc_main$k as FreeText,
-  _sfc_main$x as GroupSelectionBox,
-  _sfc_main$d as Highlight,
-  _sfc_main$w as Ink,
-  _sfc_main$q as Line,
-  _sfc_main$f as Link,
-  _sfc_main$m as Polygon,
-  _sfc_main$o as Polyline,
+  _sfc_main$w as Circle,
+  _sfc_main$o as FreeText,
+  _sfc_main$B as GroupSelectionBox,
+  _sfc_main$h as Highlight,
+  _sfc_main$A as Ink,
+  _sfc_main$u as Line,
+  _sfc_main$j as Link,
+  _sfc_main$q as Polygon,
+  _sfc_main$s as Polyline,
   _sfc_main$3 as PreviewRenderer,
-  _sfc_main$i as RenderAnnotation,
+  _sfc_main$m as RenderAnnotation,
   _sfc_main as RendererRegistryProvider,
-  _sfc_main$u as Square,
-  _sfc_main$7 as Squiggly,
-  _sfc_main$h as Stamp,
-  _sfc_main$9 as Strikeout,
+  _sfc_main$y as Square,
+  _sfc_main$b as Squiggly,
+  _sfc_main$l as Stamp,
+  _sfc_main$d as Strikeout,
+  _sfc_main$7 as Text,
   _sfc_main$4 as TextMarkup,
-  _sfc_main$b as Underline,
+  _sfc_main$f as Underline,
   createRenderer,
   createRendererRegistry,
   provideRendererRegistry,