@embedpdf/plugin-annotation 2.7.0 → 2.9.0

package/dist/react/index.js

@@ -1,14 +1,15 @@
 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, 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";
+import { getCounterRotation } from "@embedpdf/utils";
 const suppressContentEditableWarningProps = {
   suppressContentEditableWarning: true
 };
@@ -114,6 +115,7 @@ function AnnotationContainer({
   isRotatable = true,
   lockAspectRatio = false,
   style = {},
+  blendMode,
   vertexConfig,
   selectionMenu,
   outlineOffset = 1,
@@ -151,6 +153,11 @@ function AnnotationContainer({
     [annotationCapability, documentId]
   );
   const currentObject = preview ? { ...trackedAnnotation.object, ...preview } : trackedAnnotation.object;
+  const annoFlags = trackedAnnotation.object.flags ?? [];
+  const hasNoZoom = annoFlags.includes("noZoom");
+  const hasNoRotate = annoFlags.includes("noRotate");
+  const visualScale = hasNoZoom ? 1 : scale;
+  const effectivePageRotation = hasNoRotate ? 0 : rotation;
   const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
   const VERTEX_COLOR = (vertexUI == null ? void 0 : vertexUI.color) ?? "#007ACC";
   const ROTATION_COLOR = (rotationUI == null ? void 0 : rotationUI.color) ?? "white";
@@ -343,17 +350,21 @@ function AnnotationContainer({
     return () => unsubs.forEach((u) => u());
   }, [plugin, documentId, trackedAnnotation.object]);
   const showOutline = isSelected && !isMultiSelected;
-  const aabbWidth = currentObject.rect.size.width * scale;
-  const aabbHeight = currentObject.rect.size.height * scale;
-  const innerWidth = effectiveUnrotatedRect.size.width * scale;
-  const innerHeight = effectiveUnrotatedRect.size.height * scale;
+  const aabbWidth = currentObject.rect.size.width * visualScale;
+  const aabbHeight = currentObject.rect.size.height * visualScale;
+  const innerWidth = effectiveUnrotatedRect.size.width * visualScale;
+  const innerHeight = effectiveUnrotatedRect.size.height * visualScale;
   const usesCustomPivot = Boolean(explicitUnrotatedRect) && annotationRotation !== 0;
-  const innerLeft = usesCustomPivot ? (effectiveUnrotatedRect.origin.x - currentObject.rect.origin.x) * scale : (aabbWidth - innerWidth) / 2;
-  const innerTop = usesCustomPivot ? (effectiveUnrotatedRect.origin.y - currentObject.rect.origin.y) * scale : (aabbHeight - innerHeight) / 2;
-  const innerTransformOrigin = usesCustomPivot && rotationPivot ? `${(rotationPivot.x - effectiveUnrotatedRect.origin.x) * scale}px ${(rotationPivot.y - effectiveUnrotatedRect.origin.y) * scale}px` : "center center";
-  const centerX = rotationPivot ? (rotationPivot.x - currentObject.rect.origin.x) * scale : aabbWidth / 2;
-  const centerY = rotationPivot ? (rotationPivot.y - currentObject.rect.origin.y) * scale : aabbHeight / 2;
+  const innerLeft = usesCustomPivot ? (effectiveUnrotatedRect.origin.x - currentObject.rect.origin.x) * visualScale : (aabbWidth - innerWidth) / 2;
+  const innerTop = usesCustomPivot ? (effectiveUnrotatedRect.origin.y - currentObject.rect.origin.y) * visualScale : (aabbHeight - innerHeight) / 2;
+  const innerTransformOrigin = usesCustomPivot && rotationPivot ? `${(rotationPivot.x - effectiveUnrotatedRect.origin.x) * visualScale}px ${(rotationPivot.y - effectiveUnrotatedRect.origin.y) * visualScale}px` : "center center";
+  const centerX = rotationPivot ? (rotationPivot.x - currentObject.rect.origin.x) * visualScale : aabbWidth / 2;
+  const centerY = rotationPivot ? (rotationPivot.y - currentObject.rect.origin.y) * visualScale : aabbHeight / 2;
   const guideLength = Math.max(300, Math.max(aabbWidth, aabbHeight) + 80);
+  const counterRot = hasNoRotate ? getCounterRotation(
+    { origin: { x: 0, y: 0 }, size: { width: aabbWidth, height: aabbHeight } },
+    rotation
+  ) : null;
   const childObject = useMemo(() => {
     if (explicitUnrotatedRect) {
       return { ...currentObject, rect: explicitUnrotatedRect };
@@ -361,237 +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: aabbWidth,
-          height: aabbHeight,
-          pointerEvents: "none",
-          zIndex,
+          ...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",
-                  {
-                    style: {
-                      ...rotationHandle.connector.style,
-                      backgroundColor: ROTATION_CONNECTOR_COLOR,
-                      opacity: rotationActive ? 0 : 1
-                    }
-                  }
-                ),
-                /* @__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,
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
                   {
-                    appearance: appearance.normal,
-                    style: { display: apActive ? "block" : "none" }
+                    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" })
+                    ]
                   }
-                ),
-                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,
       {
@@ -601,13 +625,13 @@ function AnnotationContainer({
             y: currentObject.rect.origin.y * scale
           },
           size: {
-            width: currentObject.rect.size.width * scale,
-            height: currentObject.rect.size.height * scale
+            width: currentObject.rect.size.width * visualScale,
+            height: currentObject.rect.size.height * visualScale
           }
         },
         rotation,
         children: (counterRotateProps) => {
-          const effectiveAngle = ((annotationRotation + rotation * 90) % 360 + 360) % 360;
+          const effectiveAngle = ((annotationRotation + effectivePageRotation * 90) % 360 + 360) % 360;
           const handleNearMenuSide = effectiveIsRotatable && effectiveAngle > 90 && effectiveAngle < 270;
           return selectionMenu({
             ...counterRotateProps,
@@ -652,6 +676,57 @@ function AnnotationContainer({
     )
   ] });
 }
+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
+  };
+}
 function GroupSelectionBox({
   documentId,
   pageIndex,
@@ -859,8 +934,29 @@ function GroupSelectionBox({
   if (selectedAnnotations.length < 2) {
     return null;
   }
-  const groupBoxWidth = previewGroupBox.size.width * scale;
-  const groupBoxHeight = previewGroupBox.size.height * scale;
+  let visualLeft = Infinity;
+  let visualTop = Infinity;
+  let visualRight = -Infinity;
+  let visualBottom = -Infinity;
+  for (const ta of selectedAnnotations) {
+    const bounds = getAnnotationScreenBounds(ta, scale, rotation);
+    visualLeft = Math.min(visualLeft, bounds.left);
+    visualTop = Math.min(visualTop, bounds.top);
+    visualRight = Math.max(visualRight, bounds.right);
+    visualBottom = Math.max(visualBottom, bounds.bottom);
+  }
+  const initialLogicalLeft = groupBox.origin.x * scale;
+  const initialLogicalTop = groupBox.origin.y * scale;
+  const initialLogicalRight = (groupBox.origin.x + groupBox.size.width) * scale;
+  const initialLogicalBottom = (groupBox.origin.y + groupBox.size.height) * scale;
+  const leftCorrection = visualLeft - initialLogicalLeft;
+  const topCorrection = visualTop - initialLogicalTop;
+  const rightCorrection = visualRight - initialLogicalRight;
+  const bottomCorrection = visualBottom - initialLogicalBottom;
+  const groupBoxLeft = previewGroupBox.origin.x * scale + leftCorrection;
+  const groupBoxTop = previewGroupBox.origin.y * scale + topCorrection;
+  const groupBoxWidth = previewGroupBox.size.width * scale + (rightCorrection - leftCorrection);
+  const groupBoxHeight = previewGroupBox.size.height * scale + (bottomCorrection - topCorrection);
   const groupCenterX = groupBoxWidth / 2;
   const groupCenterY = groupBoxHeight / 2;
   const groupGuideLength = Math.max(300, Math.max(groupBoxWidth, groupBoxHeight) + 80);
@@ -870,8 +966,8 @@ function GroupSelectionBox({
       {
         style: {
           position: "absolute",
-          left: previewGroupBox.origin.x * scale,
-          top: previewGroupBox.origin.y * scale,
+          left: groupBoxLeft,
+          top: groupBoxTop,
           width: groupBoxWidth,
           height: groupBoxHeight,
           pointerEvents: "none",
@@ -1080,17 +1176,17 @@ function GroupSelectionBox({
       ),
       document.body
     ),
-    groupSelectionMenu && /* @__PURE__ */ jsx(
+    groupSelectionMenu && !rotationActive && /* @__PURE__ */ jsx(
       CounterRotate,
       {
         rect: {
           origin: {
-            x: previewGroupBox.origin.x * scale,
-            y: previewGroupBox.origin.y * scale
+            x: groupBoxLeft,
+            y: groupBoxTop
           },
           size: {
-            width: previewGroupBox.size.width * scale,
-            height: previewGroupBox.size.height * scale
+            width: groupBoxWidth,
+            height: groupBoxHeight
           }
         },
         rotation,
@@ -1121,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,
@@ -1180,7 +1277,6 @@ function Ink({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
@@ -1222,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;
@@ -1236,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",
@@ -1251,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,
@@ -1265,14 +1386,26 @@ function Square({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
             }
           }
         ),
-        !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,
@@ -1290,7 +1423,7 @@ function Square({
               }
             }
           }
-        )
+        ))
       ]
     }
   );
@@ -1307,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;
@@ -1323,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);
@@ -1341,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,
@@ -1352,14 +1510,26 @@ function Circle({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
             }
           }
         ),
-        !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,
@@ -1377,7 +1547,7 @@ function Circle({
               }
             }
           }
-        )
+        ))
       ]
     }
   );
@@ -1441,7 +1611,6 @@ function Line({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
@@ -1458,7 +1627,6 @@ function Line({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
@@ -1475,7 +1643,6 @@ function Line({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
@@ -1550,6 +1717,8 @@ function Polyline({
   strokeColor = "#000000",
   opacity = 1,
   strokeWidth,
+  strokeStyle = PdfAnnotationBorderStyle.SOLID,
+  strokeDashArray,
   scale,
   isSelected,
   onClick,
@@ -1612,7 +1781,6 @@ function Polyline({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
@@ -1630,7 +1798,6 @@ function Polyline({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
@@ -1647,7 +1814,6 @@ function Polyline({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
@@ -1667,7 +1833,10 @@ function Polyline({
                 strokeWidth,
                 pointerEvents: "none",
                 strokeLinecap: "butt",
-                strokeLinejoin: "miter"
+                strokeLinejoin: "miter",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
               }
             }
           ),
@@ -1681,7 +1850,10 @@ function Polyline({
               style: {
                 pointerEvents: "none",
                 strokeWidth,
-                strokeLinecap: "butt"
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
               }
             }
           ),
@@ -1695,7 +1867,10 @@ function Polyline({
               style: {
                 pointerEvents: "none",
                 strokeWidth,
-                strokeLinecap: "butt"
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
               }
             }
           )
@@ -1719,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 })),
@@ -1732,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;
@@ -1754,12 +1935,11 @@ function Polygon({
         /* @__PURE__ */ jsx(
           "path",
           {
-            d: pathData,
+            d: isCloudy && cloudyPath ? cloudyPath.path : pathData,
             fill: "transparent",
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
@@ -1768,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",
             {
@@ -1815,11 +2008,62 @@ function Polygon({
               style: { pointerEvents: "none" }
             }
           )
-        ] })
+        ] }) })
       ]
     }
   );
 }
+function Text({
+  isSelected,
+  color = "#facc15",
+  opacity = 1,
+  onClick,
+  appearanceActive = false
+}) {
+  const lineColor = getContrastStrokeColor(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 2,
+        pointerEvents: isSelected ? "none" : "auto",
+        cursor: isSelected ? "move" : "pointer"
+      },
+      onPointerDown: onClick,
+      children: !appearanceActive && /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none"
+          },
+          viewBox: "0 0 20 20",
+          width: "100%",
+          height: "100%",
+          children: [
+            /* @__PURE__ */ jsx(
+              "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: color,
+                opacity,
+                stroke: lineColor,
+                strokeWidth: "1",
+                strokeLinejoin: "miter"
+              }
+            ),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "4.25", x2: "17.5", y2: "4.25", stroke: lineColor, strokeWidth: "1" }),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "8", x2: "17.5", y2: "8", stroke: lineColor, strokeWidth: "1" }),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "11.75", x2: "17.5", y2: "11.75", stroke: lineColor, strokeWidth: "1" })
+          ]
+        }
+      )
+    }
+  );
+}
 function FreeText({
   documentId,
   isSelected,
@@ -1887,7 +2131,6 @@ function FreeText({
         opacity: appearanceActive ? 0 : 1
       },
       onPointerDown: onClick,
-      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         "span",
         {
@@ -2014,7 +2257,6 @@ function Stamp({
         cursor: "pointer"
       },
       onPointerDown: onClick,
-      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         RenderAnnotation,
         {
@@ -2077,7 +2319,6 @@ function Link({
             height,
             fill: "transparent",
             onPointerDown: hasIRT ? void 0 : onClick,
-            onTouchStart: hasIRT ? void 0 : onClick,
             style: {
               cursor: hasIRT ? "default" : isSelected ? "move" : "pointer",
               pointerEvents: hasIRT ? "none" : isSelected ? "none" : "visible"
@@ -2139,7 +2380,6 @@ function Highlight({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
@@ -2173,7 +2413,6 @@ function Underline({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -2221,7 +2460,6 @@ function Strikeout({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -2276,7 +2514,6 @@ function Squiggly({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -2310,6 +2547,74 @@ function Squiggly({
     i
   )) });
 }
+function Caret({
+  isSelected,
+  strokeColor = "#000000",
+  opacity = 1,
+  rect,
+  scale,
+  onClick,
+  appearanceActive = false
+}) {
+  const { width, height, path } = useMemo(() => {
+    const w = rect.size.width;
+    const h = rect.size.height;
+    const midX = w / 2;
+    const d = [
+      `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(" ");
+    return { width: w, height: h, path: d };
+  }, [rect]);
+  const svgWidth = width * scale;
+  const svgHeight = height * scale;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width: svgWidth,
+        height: svgHeight,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${width} ${height}`,
+      overflow: "visible",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: 4,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : "visible"
+            }
+          }
+        ),
+        !appearanceActive && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            fill: strokeColor,
+            stroke: strokeColor,
+            strokeWidth: 0.5,
+            opacity,
+            fillRule: "evenodd",
+            style: { pointerEvents: "none" }
+          }
+        )
+      ]
+    }
+  );
+}
 const builtInRenderers = [
   // --- Drawing ---
   createRenderer({
@@ -2434,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",
@@ -2483,6 +2786,38 @@ const builtInRenderers = [
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
+  // --- Text Comment ---
+  createRenderer({
+    id: "text",
+    matches: (a) => a.type === PdfAnnotationSubtype.TEXT && !a.inReplyToId,
+    render: ({ currentObject, isSelected, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        isSelected,
+        color: currentObject.strokeColor ?? currentObject.color,
+        opacity: currentObject.opacity,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: false }
+  }),
+  // --- Caret ---
+  createRenderer({
+    id: "caret",
+    matches: (a) => a.type === PdfAnnotationSubtype.CARET,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Caret,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
   // --- FreeText ---
   createRenderer({
     id: "freeText",
@@ -2797,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({
@@ -2946,6 +3282,8 @@ function TextMarkup({ documentId, pageIndex, scale }) {
           )
         }
       );
+    case PdfAnnotationSubtype.CARET:
+      return null;
     default:
       return null;
   }
@@ -2977,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(