@embedpdf/plugin-annotation 2.8.0 → 2.9.0

package/dist/react/index.js

@@ -1,11 +1,11 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { initialDocumentState, AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { initialDocumentState, AnnotationPlugin, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useState, useCallback, useContext, useRef, useEffect, useMemo, useLayoutEffect, Fragment as Fragment$1 } from "react";
 import { createPortal } from "react-dom";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/react";
-import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, getContrastStrokeColor, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, getContrastStrokeColor, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
 import { useInteractionHandles, useDoublePressProps, CounterRotate } from "@embedpdf/utils/react";
@@ -115,6 +115,7 @@ function AnnotationContainer({
   isRotatable = true,
   lockAspectRatio = false,
   style = {},
+  blendMode,
   vertexConfig,
   selectionMenu,
   outlineOffset = 1,
@@ -371,242 +372,250 @@ function AnnotationContainer({
     return currentObject;
   }, [currentObject, explicitUnrotatedRect]);
   const apActive = !!(appearance == null ? void 0 : appearance.normal) && !gestureActive && !isEditing && !trackedAnnotation.dictMode;
+  const layerBaseStyle = {
+    position: "absolute",
+    left: currentObject.rect.origin.x * scale,
+    top: currentObject.rect.origin.y * scale,
+    width: counterRot ? counterRot.width : aabbWidth,
+    height: counterRot ? counterRot.height : aabbHeight,
+    pointerEvents: "none",
+    zIndex,
+    // noRotate: apply counter-rotation matrix so the annotation stays upright
+    ...counterRot && {
+      transform: counterRot.matrix,
+      transformOrigin: "0 0"
+    }
+  };
+  const innerDivBaseStyle = {
+    position: "absolute",
+    left: innerLeft,
+    top: innerTop,
+    width: innerWidth,
+    height: innerHeight,
+    transform: annotationRotation !== 0 ? `rotate(${annotationRotation}deg)` : void 0,
+    transformOrigin: innerTransformOrigin
+  };
   return /* @__PURE__ */ jsxs("div", { "data-no-interaction": true, children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
         style: {
-          position: "absolute",
-          left: currentObject.rect.origin.x * scale,
-          top: currentObject.rect.origin.y * scale,
-          width: counterRot ? counterRot.width : aabbWidth,
-          height: counterRot ? counterRot.height : aabbHeight,
-          pointerEvents: "none",
-          zIndex,
-          // noRotate: apply counter-rotation matrix so the annotation stays upright
-          ...counterRot && {
-            transform: counterRot.matrix,
-            transformOrigin: "0 0"
-          },
+          ...layerBaseStyle,
+          ...blendMode && { mixBlendMode: blendMode },
           ...style
         },
-        ...props,
-        children: [
-          rotationActive && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  left: centerX - guideLength / 2,
-                  top: centerY,
-                  width: guideLength,
-                  height: 1,
-                  backgroundColor: ROTATION_CONNECTOR_COLOR,
-                  opacity: 0.35,
-                  pointerEvents: "none"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs("div", { style: { ...innerDivBaseStyle, pointerEvents: "none" }, children: [
+          (() => {
+            const childrenRender = typeof children === "function" ? children(childObject, { appearanceActive: apActive }) : children;
+            const customRender = customAnnotationRenderer == null ? void 0 : customAnnotationRenderer({
+              annotation: childObject,
+              children: childrenRender,
+              isSelected,
+              scale,
+              rotation,
+              pageWidth,
+              pageHeight,
+              pageIndex,
+              onSelect
+            });
+            return customRender ?? childrenRender;
+          })(),
+          (appearance == null ? void 0 : appearance.normal) && /* @__PURE__ */ jsx(
+            AppearanceImage,
+            {
+              appearance: appearance.normal,
+              style: { display: apActive ? "block" : "none" }
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: layerBaseStyle, ...props, children: [
+      rotationActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: centerX - guideLength / 2,
+              top: centerY,
+              width: guideLength,
+              height: 1,
+              backgroundColor: ROTATION_CONNECTOR_COLOR,
+              opacity: 0.35,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: centerX,
+              top: centerY - guideLength / 2,
+              width: 1,
+              height: guideLength,
+              backgroundColor: ROTATION_CONNECTOR_COLOR,
+              opacity: 0.35,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: centerX - guideLength / 2,
+              top: centerY,
+              width: guideLength,
+              height: 1,
+              transformOrigin: "center center",
+              transform: `rotate(${annotationRotation}deg)`,
+              backgroundColor: ROTATION_CONNECTOR_COLOR,
+              opacity: 0.8,
+              pointerEvents: "none"
+            }
+          }
+        )
+      ] }),
+      isSelected && effectiveIsRotatable && rotationHandle && ((rotationUI == null ? void 0 : rotationUI.component) ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          onPointerEnter: () => setIsHandleHovered(true),
+          onPointerLeave: () => {
+            setIsHandleHovered(false);
+            setCursorScreen(null);
+          },
+          onPointerMove: (e) => {
+            if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
+          },
+          style: { display: "contents" },
+          children: rotationUI.component({
+            ...rotationHandle.handle,
+            backgroundColor: ROTATION_COLOR,
+            iconColor: ROTATION_ICON_COLOR,
+            connectorStyle: {
+              ...rotationHandle.connector.style,
+              backgroundColor: ROTATION_CONNECTOR_COLOR,
+              opacity: rotationActive ? 0 : 1
+            },
+            showConnector: SHOW_CONNECTOR,
+            opacity: rotationActive ? 0 : 1,
+            border: {
+              color: ROTATION_BORDER_COLOR,
+              width: ROTATION_BORDER_WIDTH,
+              style: ROTATION_BORDER_STYLE
+            }
+          })
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onPointerEnter: () => setIsHandleHovered(true),
+          onPointerLeave: () => {
+            setIsHandleHovered(false);
+            setCursorScreen(null);
+          },
+          onPointerMove: (e) => {
+            if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
+          },
+          style: { display: "contents" },
+          children: [
+            SHOW_CONNECTOR && /* @__PURE__ */ jsx(
               "div",
               {
                 style: {
-                  position: "absolute",
-                  left: centerX,
-                  top: centerY - guideLength / 2,
-                  width: 1,
-                  height: guideLength,
+                  ...rotationHandle.connector.style,
                   backgroundColor: ROTATION_CONNECTOR_COLOR,
-                  opacity: 0.35,
-                  pointerEvents: "none"
+                  opacity: rotationActive ? 0 : 1
                 }
               }
             ),
             /* @__PURE__ */ jsx(
               "div",
               {
-                style: {
-                  position: "absolute",
-                  left: centerX - guideLength / 2,
-                  top: centerY,
-                  width: guideLength,
-                  height: 1,
-                  transformOrigin: "center center",
-                  transform: `rotate(${annotationRotation}deg)`,
-                  backgroundColor: ROTATION_CONNECTOR_COLOR,
-                  opacity: 0.8,
-                  pointerEvents: "none"
-                }
-              }
-            )
-          ] }),
-          isSelected && effectiveIsRotatable && rotationHandle && ((rotationUI == null ? void 0 : rotationUI.component) ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              onPointerEnter: () => setIsHandleHovered(true),
-              onPointerLeave: () => {
-                setIsHandleHovered(false);
-                setCursorScreen(null);
-              },
-              onPointerMove: (e) => {
-                if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
-              },
-              style: { display: "contents" },
-              children: rotationUI.component({
                 ...rotationHandle.handle,
-                backgroundColor: ROTATION_COLOR,
-                iconColor: ROTATION_ICON_COLOR,
-                connectorStyle: {
-                  ...rotationHandle.connector.style,
-                  backgroundColor: ROTATION_CONNECTOR_COLOR,
+                style: {
+                  ...rotationHandle.handle.style,
+                  backgroundColor: ROTATION_COLOR,
+                  border: `${ROTATION_BORDER_WIDTH}px ${ROTATION_BORDER_STYLE} ${ROTATION_BORDER_COLOR}`,
+                  boxSizing: "border-box",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  pointerEvents: "auto",
                   opacity: rotationActive ? 0 : 1
                 },
-                showConnector: SHOW_CONNECTOR,
-                opacity: rotationActive ? 0 : 1,
-                border: {
-                  color: ROTATION_BORDER_COLOR,
-                  width: ROTATION_BORDER_WIDTH,
-                  style: ROTATION_BORDER_STYLE
-                }
-              })
-            }
-          ) : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              onPointerEnter: () => setIsHandleHovered(true),
-              onPointerLeave: () => {
-                setIsHandleHovered(false);
-                setCursorScreen(null);
-              },
-              onPointerMove: (e) => {
-                if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
-              },
-              style: { display: "contents" },
-              children: [
-                SHOW_CONNECTOR && /* @__PURE__ */ jsx(
-                  "div",
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
                   {
-                    style: {
-                      ...rotationHandle.connector.style,
-                      backgroundColor: ROTATION_CONNECTOR_COLOR,
-                      opacity: rotationActive ? 0 : 1
-                    }
+                    width: Math.round(ROTATION_SIZE * 0.6),
+                    height: Math.round(ROTATION_SIZE * 0.6),
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: ROTATION_ICON_COLOR,
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+                      /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
+                    ]
                   }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    ...rotationHandle.handle,
-                    style: {
-                      ...rotationHandle.handle.style,
-                      backgroundColor: ROTATION_COLOR,
-                      border: `${ROTATION_BORDER_WIDTH}px ${ROTATION_BORDER_STYLE} ${ROTATION_BORDER_COLOR}`,
-                      boxSizing: "border-box",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      pointerEvents: "auto",
-                      opacity: rotationActive ? 0 : 1
-                    },
-                    children: /* @__PURE__ */ jsxs(
-                      "svg",
-                      {
-                        width: Math.round(ROTATION_SIZE * 0.6),
-                        height: Math.round(ROTATION_SIZE * 0.6),
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: ROTATION_ICON_COLOR,
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        children: [
-                          /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
-                          /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
-                        ]
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          )),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ...effectiveIsDraggable && isSelected ? dragProps : {},
-              ...doubleProps,
-              style: {
-                position: "absolute",
-                left: innerLeft,
-                top: innerTop,
-                width: innerWidth,
-                height: innerHeight,
-                transform: annotationRotation !== 0 ? `rotate(${annotationRotation}deg)` : void 0,
-                transformOrigin: innerTransformOrigin,
-                outline: showOutline ? `${outlineWidth}px ${outlineStyle} ${outlineColor}` : "none",
-                outlineOffset: showOutline ? `${outlineOff}px` : "0px",
-                pointerEvents: isSelected && !isMultiSelected ? "auto" : "none",
-                touchAction: "none",
-                cursor: isSelected && effectiveIsDraggable ? "move" : "default"
-              },
-              children: [
-                (() => {
-                  const childrenRender = typeof children === "function" ? children(childObject, { appearanceActive: apActive }) : children;
-                  const customRender = customAnnotationRenderer == null ? void 0 : customAnnotationRenderer({
-                    annotation: childObject,
-                    children: childrenRender,
-                    isSelected,
-                    scale,
-                    rotation,
-                    pageWidth,
-                    pageHeight,
-                    pageIndex,
-                    onSelect
-                  });
-                  return customRender ?? childrenRender;
-                })(),
-                (appearance == null ? void 0 : appearance.normal) && /* @__PURE__ */ jsx(
-                  AppearanceImage,
-                  {
-                    appearance: appearance.normal,
-                    style: { display: apActive ? "block" : "none" }
-                  }
-                ),
-                isSelected && effectiveIsResizable && !rotationActive && resize.map(
-                  ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
-                    key,
-                    ...hProps,
-                    backgroundColor: HANDLE_COLOR
-                  }) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ...hProps,
-                      style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
-                    },
-                    key
-                  )
-                ),
-                isSelected && canModifyAnnotations && !isMultiSelected && !rotationActive && vertices.map(
-                  ({ key, ...vProps }) => (vertexUI == null ? void 0 : vertexUI.component) ? vertexUI.component({
-                    key,
-                    ...vProps,
-                    backgroundColor: VERTEX_COLOR
-                  }) : /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ...vProps,
-                      style: { ...vProps.style, backgroundColor: VERTEX_COLOR }
-                    },
-                    key
-                  )
                 )
-              ]
-            }
-          )
-        ]
-      }
-    ),
+              }
+            )
+          ]
+        }
+      )),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...effectiveIsDraggable && isSelected ? dragProps : {},
+          ...doubleProps,
+          style: {
+            ...innerDivBaseStyle,
+            outline: showOutline ? `${outlineWidth}px ${outlineStyle} ${outlineColor}` : "none",
+            outlineOffset: showOutline ? `${outlineOff}px` : "0px",
+            pointerEvents: isSelected && !isMultiSelected ? "auto" : "none",
+            touchAction: "none",
+            cursor: isSelected && effectiveIsDraggable ? "move" : "default"
+          },
+          children: [
+            isSelected && effectiveIsResizable && !rotationActive && resize.map(
+              ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
+                key,
+                ...hProps,
+                backgroundColor: HANDLE_COLOR
+              }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...hProps,
+                  style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
+                },
+                key
+              )
+            ),
+            isSelected && canModifyAnnotations && !isMultiSelected && !rotationActive && vertices.map(
+              ({ key, ...vProps }) => (vertexUI == null ? void 0 : vertexUI.component) ? vertexUI.component({
+                key,
+                ...vProps,
+                backgroundColor: VERTEX_COLOR
+              }) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...vProps,
+                  style: { ...vProps.style, backgroundColor: VERTEX_COLOR }
+                },
+                key
+              )
+            )
+          ]
+        }
+      )
+    ] }),
     selectionMenu && !isMultiSelected && !rotationActive && /* @__PURE__ */ jsx(
       CounterRotate,
       {
@@ -1167,7 +1176,7 @@ function GroupSelectionBox({
       ),
       document.body
     ),
-    groupSelectionMenu && /* @__PURE__ */ jsx(
+    groupSelectionMenu && !rotationActive && /* @__PURE__ */ jsx(
       CounterRotate,
       {
         rect: {
@@ -1208,6 +1217,7 @@ function createRenderer(entry) {
     render: (props) => entry.render(props),
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
+    defaultBlendMode: entry.defaultBlendMode,
     containerStyle: entry.containerStyle,
     interactionDefaults: entry.interactionDefaults,
     useAppearanceStream: entry.useAppearanceStream,
@@ -1308,8 +1318,11 @@ function Square({
   rect,
   scale,
   onClick,
-  appearanceActive = false
+  appearanceActive = false,
+  cloudyBorderIntensity,
+  rectangleDifferences
 }) {
+  const isCloudy = (cloudyBorderIntensity ?? 0) > 0;
   const { width, height, x, y } = useMemo(() => {
     const outerW = rect.size.width;
     const outerH = rect.size.height;
@@ -1322,8 +1335,17 @@ function Square({
       y: strokeWidth / 2
     };
   }, [rect, strokeWidth]);
-  const svgWidth = (width + strokeWidth) * scale;
-  const svgHeight = (height + strokeWidth) * scale;
+  const cloudyPath = useMemo(() => {
+    if (!isCloudy) return null;
+    return generateCloudyRectanglePath(
+      { x: 0, y: 0, width: rect.size.width, height: rect.size.height },
+      rectangleDifferences,
+      cloudyBorderIntensity,
+      strokeWidth
+    );
+  }, [isCloudy, rect, rectangleDifferences, cloudyBorderIntensity, strokeWidth]);
+  const svgWidth = rect.size.width * scale;
+  const svgHeight = rect.size.height * scale;
   const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$4 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -1337,10 +1359,23 @@ function Square({
       },
       width: svgWidth,
       height: svgHeight,
-      viewBox: `0 0 ${width + strokeWidth} ${height + strokeWidth}`,
+      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
       overflow: "visible",
       children: [
-        /* @__PURE__ */ jsx(
+        isCloudy && cloudyPath ? /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: cloudyPath.path,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
           "rect",
           {
             x,
@@ -1357,7 +1392,20 @@ function Square({
             }
           }
         ),
-        !appearanceActive && /* @__PURE__ */ jsx(
+        !appearanceActive && (isCloudy && cloudyPath ? /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: cloudyPath.path,
+            fill: color,
+            opacity,
+            style: {
+              pointerEvents: "none",
+              stroke: strokeColor ?? color,
+              strokeWidth,
+              strokeLinejoin: "round"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
           "rect",
           {
             x,
@@ -1375,7 +1423,7 @@ function Square({
               }
             }
           }
-        )
+        ))
       ]
     }
   );
@@ -1392,8 +1440,11 @@ function Circle({
   scale,
   onClick,
   isSelected,
-  appearanceActive = false
+  appearanceActive = false,
+  cloudyBorderIntensity,
+  rectangleDifferences
 }) {
+  const isCloudy = (cloudyBorderIntensity ?? 0) > 0;
   const { width, height, cx, cy, rx, ry } = useMemo(() => {
     const outerW = rect.size.width;
     const outerH = rect.size.height;
@@ -1408,6 +1459,15 @@ function Circle({
       ry: innerH / 2
     };
   }, [rect, strokeWidth]);
+  const cloudyPath = useMemo(() => {
+    if (!isCloudy) return null;
+    return generateCloudyEllipsePath(
+      { x: 0, y: 0, width: rect.size.width, height: rect.size.height },
+      rectangleDifferences,
+      cloudyBorderIntensity,
+      strokeWidth
+    );
+  }, [isCloudy, rect, rectangleDifferences, cloudyBorderIntensity, strokeWidth]);
   const svgWidth = width * scale;
   const svgHeight = height * scale;
   const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$3 / scale);
@@ -1426,7 +1486,20 @@ function Circle({
       viewBox: `0 0 ${width} ${height}`,
       overflow: "visible",
       children: [
-        /* @__PURE__ */ jsx(
+        isCloudy && cloudyPath ? /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: cloudyPath.path,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: hitStrokeWidth,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
           "ellipse",
           {
             cx,
@@ -1443,7 +1516,20 @@ function Circle({
             }
           }
         ),
-        !appearanceActive && /* @__PURE__ */ jsx(
+        !appearanceActive && (isCloudy && cloudyPath ? /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: cloudyPath.path,
+            fill: color,
+            opacity,
+            style: {
+              pointerEvents: "none",
+              stroke: strokeColor ?? color,
+              strokeWidth,
+              strokeLinejoin: "round"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
           "ellipse",
           {
             cx,
@@ -1461,7 +1547,7 @@ function Circle({
               }
             }
           }
-        )
+        ))
       ]
     }
   );
@@ -1808,8 +1894,10 @@ function Polygon({
   onClick,
   currentVertex,
   handleSize = 14,
-  appearanceActive = false
+  appearanceActive = false,
+  cloudyBorderIntensity
 }) {
+  const isCloudy = (cloudyBorderIntensity ?? 0) > 0;
   const allPoints = currentVertex ? [...vertices, currentVertex] : vertices;
   const localPts = useMemo(
     () => allPoints.map(({ x, y }) => ({ x: x - rect.origin.x, y: y - rect.origin.y })),
@@ -1821,6 +1909,10 @@ function Polygon({
     const isPreview = !!currentVertex;
     return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
   }, [localPts, currentVertex]);
+  const cloudyPath = useMemo(() => {
+    if (!isCloudy || allPoints.length < 3) return null;
+    return generateCloudyPolygonPath(allPoints, rect.origin, cloudyBorderIntensity, strokeWidth);
+  }, [isCloudy, allPoints, rect.origin, cloudyBorderIntensity, strokeWidth]);
   const isPreviewing = currentVertex && vertices.length > 0;
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
@@ -1843,7 +1935,7 @@ function Polygon({
         /* @__PURE__ */ jsx(
           "path",
           {
-            d: pathData,
+            d: isCloudy && cloudyPath ? cloudyPath.path : pathData,
             fill: "transparent",
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
@@ -1856,7 +1948,20 @@ function Polygon({
             }
           }
         ),
-        !appearanceActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+        !appearanceActive && /* @__PURE__ */ jsx(Fragment, { children: isCloudy && cloudyPath ? /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: cloudyPath.path,
+            opacity,
+            style: {
+              fill: color,
+              stroke: strokeColor ?? color,
+              strokeWidth,
+              pointerEvents: "none",
+              strokeLinejoin: "round"
+            }
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             "path",
             {
@@ -1903,7 +2008,7 @@ function Polygon({
               style: { pointerEvents: "none" }
             }
           )
-        ] })
+        ] }) })
       ]
     }
   );
@@ -2634,9 +2739,7 @@ const builtInRenderers = [
     ),
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
-    containerStyle: (a) => ({
-      mixBlendMode: blendModeToCss(a.blendMode ?? PdfBlendMode.Multiply)
-    })
+    defaultBlendMode: PdfBlendMode.Multiply
   }),
   createRenderer({
     id: "underline",
@@ -3029,9 +3132,10 @@ function Annotations(annotationsProps) {
             renderer.onDoubleClick(annotation.object.id, setEditingId);
           } : void 0,
           zIndex: renderer.zIndex,
-          style: ((_c = renderer.containerStyle) == null ? void 0 : _c.call(renderer, annotation.object)) ?? {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-          },
+          blendMode: blendModeToCss(
+            annotation.object.blendMode ?? renderer.defaultBlendMode ?? PdfBlendMode.Normal
+          ),
+          style: (_c = renderer.containerStyle) == null ? void 0 : _c.call(renderer, annotation.object),
           appearance: useAP ? getAppearanceForAnnotation(annotation) : void 0,
           ...annotationsProps,
           children: (currentObject, { appearanceActive }) => renderer.render({
@@ -3211,7 +3315,16 @@ function PreviewRenderer({ preview, scale }) {
     return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Line, { isSelected: false, scale, ...preview.data }) });
   }
   if (preview.type === PdfAnnotationSubtype.INK) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Ink, { isSelected: false, scale, ...preview.data }) });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...style,
+          mixBlendMode: blendModeToCss(preview.data.blendMode ?? PdfBlendMode.Normal)
+        },
+        children: /* @__PURE__ */ jsx(Ink, { isSelected: false, scale, ...preview.data })
+      }
+    );
   }
   if (preview.type === PdfAnnotationSubtype.FREETEXT) {
     return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(