@embedpdf/plugin-annotation 2.8.0 → 2.9.0

package/dist/svelte/index.js

@@ -1,5 +1,5 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -7,7 +7,7 @@ import { setContext, getContext, untrack } from "svelte";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/svelte";
 import { getCounterRotation } from "@embedpdf/utils";
 import { useInteractionHandles, deepToRaw, doublePress, CounterRotate } from "@embedpdf/utils/svelte";
-import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, standardFontCssProperties, textAlignmentToCss, ignore, PdfErrorCode, getContrastStrokeColor, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, standardFontCssProperties, textAlignmentToCss, ignore, PdfErrorCode, getContrastStrokeColor, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/svelte";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/svelte";
 const REGISTRY_KEY = Symbol("AnnotationRendererRegistry");
@@ -48,6 +48,7 @@ function createRenderer(entry) {
     component: entry.component,
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
+    defaultBlendMode: entry.defaultBlendMode,
     containerStyle: entry.containerStyle,
     interactionDefaults: entry.interactionDefaults,
     useAppearanceStream: entry.useAppearanceStream,
@@ -95,7 +96,7 @@ const useAnnotation = (getDocumentId) => {
     }
   };
 };
-var root_1$h = $.from_html(`<img alt="" draggable="false"/>`);
+var root_1$f = $.from_html(`<img alt="" draggable="false"/>`);
 function AppearanceImage($$anchor, $$props) {
   $.push($$props, true);
   let imageUrl = $.state(null);
@@ -121,7 +122,7 @@ function AppearanceImage($$anchor, $$props) {
   var node = $.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var img = root_1$h();
+      var img = root_1$f();
       $.template_effect(() => {
         $.set_attribute(img, "src", $.get(imageUrl));
         $.set_style(img, `position: absolute; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; ${$$props.style ?? "" ?? ""}`);
@@ -137,14 +138,14 @@ function AppearanceImage($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_1$g = $.from_html(`<div></div> <div></div> <div></div>`, 1);
-var root_3$5 = $.from_html(`<div style="display: contents;"><!></div>`);
-var root_5$4 = $.from_html(`<div></div>`);
-var root_4$4 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
+var root_4$7 = $.from_html(`<div></div> <div></div> <div></div>`, 1);
+var root_6$2 = $.from_html(`<div style="display: contents;"><!></div>`);
+var root_8$1 = $.from_html(`<div></div>`);
+var root_7$1 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
 var root_12 = $.from_html(`<div></div>`);
 var root_16 = $.from_html(`<div></div>`);
 var root_23 = $.from_html(`<div><div> </div></div>`);
-var root$e = $.from_html(`<div data-no-interaction=""><div><!> <!> <div><!> <!> <!> <!></div></div> <!> <!></div>`);
+var root$e = $.from_html(`<div data-no-interaction=""><div><div><!> <!></div></div>  <div><!> <!> <div><!> <!></div></div> <!> <!></div>`);
 function AnnotationContainer($$anchor, $$props) {
   $.push($$props, true);
   let isEditing = $.prop($$props, "isEditing", 3, false), isMultiSelected = $.prop($$props, "isMultiSelected", 3, false), isRotatable = $.prop($$props, "isRotatable", 3, true), lockAspectRatio = $.prop($$props, "lockAspectRatio", 3, false), propsClass = $.prop($$props, "class", 3, ""), outlineOffset = $.prop($$props, "outlineOffset", 3, 1), zIndex = $.prop($$props, "zIndex", 3, 1), restProps = $.rest_props($$props, [
@@ -166,6 +167,7 @@ function AnnotationContainer($$anchor, $$props) {
     "isResizable",
     "isRotatable",
     "lockAspectRatio",
+    "blendMode",
     "style",
     "class",
     "vertexConfig",
@@ -504,8 +506,62 @@ function AnnotationContainer($$anchor, $$props) {
   }
   var div = root$e();
   var div_1 = $.child(div);
-  $.attribute_effect(div_1, () => ({
-    style: $$props.style || "",
+  let styles;
+  var div_2 = $.child(div_1);
+  let styles_1;
+  var node_1 = $.child(div_2);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_2 = $.first_child(fragment);
+      $.snippet(node_2, () => $$props.customAnnotationRenderer ?? $.noop, () => ({
+        annotation: $.get(childObject),
+        children: $$props.children,
+        isSelected: $$props.isSelected,
+        scale: $$props.scale,
+        rotation: $$props.rotation,
+        pageWidth: $$props.pageWidth,
+        pageHeight: $$props.pageHeight,
+        pageIndex: $$props.pageIndex,
+        onSelect: $$props.onSelect
+      }));
+      $.append($$anchor2, fragment);
+    };
+    var alternate = ($$anchor2) => {
+      var fragment_1 = $.comment();
+      var node_3 = $.first_child(fragment_1);
+      $.snippet(node_3, () => $$props.children, () => $.get(childObject), () => ({ appearanceActive: $.get(apActive) }));
+      $.append($$anchor2, fragment_1);
+    };
+    $.if(node_1, ($$render) => {
+      if ($$props.customAnnotationRenderer) $$render(consequent);
+      else $$render(alternate, false);
+    });
+  }
+  var node_4 = $.sibling(node_1, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      {
+        let $0 = $.derived(() => $.get(apActive) ? "block" : "none");
+        AppearanceImage($$anchor2, {
+          get appearance() {
+            return $$props.appearance.normal;
+          },
+          get style() {
+            return `display: ${$.get($0) ?? ""};`;
+          }
+        });
+      }
+    };
+    $.if(node_4, ($$render) => {
+      var _a;
+      if ((_a = $$props.appearance) == null ? void 0 : _a.normal) $$render(consequent_1);
+    });
+  }
+  $.reset(div_2);
+  $.reset(div_1);
+  var div_3 = $.sibling(div_1, 2);
+  $.attribute_effect(div_3, () => ({
     class: propsClass(),
     ...restProps,
     [$.STYLE]: {
@@ -520,18 +576,18 @@ function AnnotationContainer($$anchor, $$props) {
       "transform-origin": $.get(counterRot) ? "0 0" : void 0
     }
   }));
-  var node_1 = $.child(div_1);
+  var node_5 = $.child(div_3);
   {
-    var consequent = ($$anchor2) => {
-      var fragment = root_1$g();
-      var div_2 = $.first_child(fragment);
-      let styles;
-      var div_3 = $.sibling(div_2, 2);
-      let styles_1;
-      var div_4 = $.sibling(div_3, 2);
+    var consequent_2 = ($$anchor2) => {
+      var fragment_3 = root_4$7();
+      var div_4 = $.first_child(fragment_3);
       let styles_2;
+      var div_5 = $.sibling(div_4, 2);
+      let styles_3;
+      var div_6 = $.sibling(div_5, 2);
+      let styles_4;
       $.template_effect(() => {
-        styles = $.set_style(div_2, "", styles, {
+        styles_2 = $.set_style(div_4, "", styles_2, {
           position: "absolute",
           left: `${$.get(centerX) - $.get(guideLength) / 2}px`,
           top: `${$.get(centerY) ?? ""}px`,
@@ -541,7 +597,7 @@ function AnnotationContainer($$anchor, $$props) {
           opacity: "0.35",
           "pointer-events": "none"
         });
-        styles_1 = $.set_style(div_3, "", styles_1, {
+        styles_3 = $.set_style(div_5, "", styles_3, {
           position: "absolute",
           left: `${$.get(centerX) ?? ""}px`,
           top: `${$.get(centerY) - $.get(guideLength) / 2}px`,
@@ -551,7 +607,7 @@ function AnnotationContainer($$anchor, $$props) {
           opacity: "0.35",
           "pointer-events": "none"
         });
-        styles_2 = $.set_style(div_4, "", styles_2, {
+        styles_4 = $.set_style(div_6, "", styles_4, {
           position: "absolute",
           left: `${$.get(centerX) - $.get(guideLength) / 2}px`,
           top: `${$.get(centerY) ?? ""}px`,
@@ -564,24 +620,24 @@ function AnnotationContainer($$anchor, $$props) {
           "pointer-events": "none"
         });
       });
-      $.append($$anchor2, fragment);
+      $.append($$anchor2, fragment_3);
     };
-    $.if(node_1, ($$render) => {
-      if ($.get(rotationActive)) $$render(consequent);
+    $.if(node_5, ($$render) => {
+      if ($.get(rotationActive)) $$render(consequent_2);
     });
   }
-  var node_2 = $.sibling(node_1, 2);
+  var node_6 = $.sibling(node_5, 2);
   {
-    var consequent_3 = ($$anchor2) => {
-      var fragment_1 = $.comment();
-      var node_3 = $.first_child(fragment_1);
+    var consequent_5 = ($$anchor2) => {
+      var fragment_4 = $.comment();
+      var node_7 = $.first_child(fragment_4);
       {
-        var consequent_1 = ($$anchor3) => {
-          var div_5 = root_3$5();
-          div_5.__pointermove = (e) => {
+        var consequent_3 = ($$anchor3) => {
+          var div_7 = root_6$2();
+          div_7.__pointermove = (e) => {
             if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
           };
-          var node_4 = $.child(div_5);
+          var node_8 = $.child(div_7);
           {
             let $0 = $.derived(() => ({
               ...$.get(rotationHandle).handle,
@@ -596,34 +652,34 @@ function AnnotationContainer($$anchor, $$props) {
                 style: $.get(ROTATION_BORDER_STYLE)
               }
             }));
-            $.snippet(node_4, () => $$props.rotationUI.component, () => $.get($0));
+            $.snippet(node_8, () => $$props.rotationUI.component, () => $.get($0));
           }
-          $.reset(div_5);
-          $.event("pointerenter", div_5, () => $.set(isHandleHovered, true));
-          $.event("pointerleave", div_5, () => {
+          $.reset(div_7);
+          $.event("pointerenter", div_7, () => $.set(isHandleHovered, true));
+          $.event("pointerleave", div_7, () => {
             $.set(isHandleHovered, false);
             $.set(cursorScreen, null);
           });
-          $.append($$anchor3, div_5);
+          $.append($$anchor3, div_7);
         };
-        var alternate = ($$anchor3) => {
-          var div_6 = root_4$4();
-          div_6.__pointermove = (e) => {
+        var alternate_1 = ($$anchor3) => {
+          var div_8 = root_7$1();
+          div_8.__pointermove = (e) => {
             if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
           };
-          var node_5 = $.child(div_6);
+          var node_9 = $.child(div_8);
           {
-            var consequent_2 = ($$anchor4) => {
-              var div_7 = root_5$4();
-              $.template_effect(() => $.set_style(div_7, `${$.get(rotationHandle).connector.style ?? ""}; background-color: ${$.get(ROTATION_CONNECTOR_COLOR) ?? ""}; opacity: ${$.get(rotationActive) ? 0 : 1};`));
-              $.append($$anchor4, div_7);
+            var consequent_4 = ($$anchor4) => {
+              var div_9 = root_8$1();
+              $.template_effect(() => $.set_style(div_9, `${$.get(rotationHandle).connector.style ?? ""}; background-color: ${$.get(ROTATION_CONNECTOR_COLOR) ?? ""}; opacity: ${$.get(rotationActive) ? 0 : 1};`));
+              $.append($$anchor4, div_9);
             };
-            $.if(node_5, ($$render) => {
-              if ($.get(SHOW_CONNECTOR)) $$render(consequent_2);
+            $.if(node_9, ($$render) => {
+              if ($.get(SHOW_CONNECTOR)) $$render(consequent_4);
             });
           }
-          var div_8 = $.sibling(node_5, 2);
-          $.attribute_effect(div_8, () => ({
+          var div_10 = $.sibling(node_9, 2);
+          $.attribute_effect(div_10, () => ({
             ...{
               onpointerdown: $.get(rotationHandle).handle.onpointerdown,
               onpointermove: $.get(rotationHandle).handle.onpointermove,
@@ -632,9 +688,9 @@ function AnnotationContainer($$anchor, $$props) {
             },
             style: `${$.get(rotationHandle).handle.style ?? ""}; background-color: ${$.get(ROTATION_COLOR) ?? ""}; border: ${$.get(ROTATION_BORDER_WIDTH) ?? ""}px ${$.get(ROTATION_BORDER_STYLE) ?? ""} ${$.get(ROTATION_BORDER_COLOR) ?? ""}; box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: auto; opacity: ${$.get(rotationActive) ? 0 : 1};`
           }));
-          var svg = $.child(div_8);
+          var svg = $.child(div_10);
+          $.reset(div_10);
           $.reset(div_8);
-          $.reset(div_6);
           $.template_effect(
             ($0, $1) => {
               $.set_attribute(svg, "width", $0);
@@ -646,27 +702,27 @@ function AnnotationContainer($$anchor, $$props) {
               () => Math.round($.get(ROTATION_SIZE) * 0.6)
             ]
           );
-          $.event("pointerenter", div_6, () => $.set(isHandleHovered, true));
-          $.event("pointerleave", div_6, () => {
+          $.event("pointerenter", div_8, () => $.set(isHandleHovered, true));
+          $.event("pointerleave", div_8, () => {
             $.set(isHandleHovered, false);
             $.set(cursorScreen, null);
           });
-          $.append($$anchor3, div_6);
+          $.append($$anchor3, div_8);
         };
-        $.if(node_3, ($$render) => {
+        $.if(node_7, ($$render) => {
           var _a;
-          if ((_a = $$props.rotationUI) == null ? void 0 : _a.component) $$render(consequent_1);
-          else $$render(alternate, false);
+          if ((_a = $$props.rotationUI) == null ? void 0 : _a.component) $$render(consequent_3);
+          else $$render(alternate_1, false);
         });
       }
-      $.append($$anchor2, fragment_1);
+      $.append($$anchor2, fragment_4);
     };
-    $.if(node_2, ($$render) => {
-      if ($$props.isSelected && $.get(effectiveIsRotatable) && $.get(rotationHandle)) $$render(consequent_3);
+    $.if(node_6, ($$render) => {
+      if ($$props.isSelected && $.get(effectiveIsRotatable) && $.get(rotationHandle)) $$render(consequent_5);
     });
   }
-  var div_9 = $.sibling(node_2, 2);
-  $.attribute_effect(div_9, () => ({
+  var div_11 = $.sibling(node_6, 2);
+  $.attribute_effect(div_11, () => ({
     ...$.get(effectiveIsDraggable) && $$props.isSelected ? interactionHandles.dragProps : {},
     [$.STYLE]: {
       position: "absolute",
@@ -683,56 +739,7 @@ function AnnotationContainer($$anchor, $$props) {
       cursor: $$props.isSelected && $.get(effectiveIsDraggable) ? "move" : "default"
     }
   }));
-  var node_6 = $.child(div_9);
-  {
-    var consequent_4 = ($$anchor2) => {
-      var fragment_2 = $.comment();
-      var node_7 = $.first_child(fragment_2);
-      $.snippet(node_7, () => $$props.customAnnotationRenderer ?? $.noop, () => ({
-        annotation: $.get(childObject),
-        children: $$props.children,
-        isSelected: $$props.isSelected,
-        scale: $$props.scale,
-        rotation: $$props.rotation,
-        pageWidth: $$props.pageWidth,
-        pageHeight: $$props.pageHeight,
-        pageIndex: $$props.pageIndex,
-        onSelect: $$props.onSelect
-      }));
-      $.append($$anchor2, fragment_2);
-    };
-    var alternate_1 = ($$anchor2) => {
-      var fragment_3 = $.comment();
-      var node_8 = $.first_child(fragment_3);
-      $.snippet(node_8, () => $$props.children, () => $.get(childObject), () => ({ appearanceActive: $.get(apActive) }));
-      $.append($$anchor2, fragment_3);
-    };
-    $.if(node_6, ($$render) => {
-      if ($$props.customAnnotationRenderer) $$render(consequent_4);
-      else $$render(alternate_1, false);
-    });
-  }
-  var node_9 = $.sibling(node_6, 2);
-  {
-    var consequent_5 = ($$anchor2) => {
-      {
-        let $0 = $.derived(() => $.get(apActive) ? "block" : "none");
-        AppearanceImage($$anchor2, {
-          get appearance() {
-            return $$props.appearance.normal;
-          },
-          get style() {
-            return `display: ${$.get($0) ?? ""};`;
-          }
-        });
-      }
-    };
-    $.if(node_9, ($$render) => {
-      var _a;
-      if ((_a = $$props.appearance) == null ? void 0 : _a.normal) $$render(consequent_5);
-    });
-  }
-  var node_10 = $.sibling(node_9, 2);
+  var node_10 = $.child(div_11);
   {
     var consequent_7 = ($$anchor2) => {
       var fragment_5 = $.comment();
@@ -757,12 +764,12 @@ function AnnotationContainer($$anchor, $$props) {
             $.append($$anchor4, fragment_7);
           };
           var alternate_2 = ($$anchor4) => {
-            var div_10 = root_12();
-            $.attribute_effect(div_10, () => ({
+            var div_12 = root_12();
+            $.attribute_effect(div_12, () => ({
               ...hProps(),
               style: `${handleStyle() ?? ""}; background-color: ${$.get(HANDLE_COLOR) ?? ""};`
             }));
-            $.append($$anchor4, div_10);
+            $.append($$anchor4, div_12);
           };
           $.if(node_12, ($$render) => {
             var _a;
@@ -803,12 +810,12 @@ function AnnotationContainer($$anchor, $$props) {
             $.append($$anchor4, fragment_10);
           };
           var alternate_3 = ($$anchor4) => {
-            var div_11 = root_16();
-            $.attribute_effect(div_11, () => ({
+            var div_13 = root_16();
+            $.attribute_effect(div_13, () => ({
               ...vProps(),
               style: `${vertexStyle() ?? ""}; background-color: ${$.get(VERTEX_COLOR) ?? ""};`
             }));
-            $.append($$anchor4, div_11);
+            $.append($$anchor4, div_13);
           };
           $.if(node_16, ($$render) => {
             var _a;
@@ -824,13 +831,13 @@ function AnnotationContainer($$anchor, $$props) {
       if ($$props.isSelected && permissions.canModifyAnnotations && !isMultiSelected() && !$.get(rotationActive)) $$render(consequent_9);
     });
   }
-  $.reset(div_9);
-  $.action(div_9, ($$node, $$action_arg) => {
+  $.reset(div_11);
+  $.action(div_11, ($$node, $$action_arg) => {
     var _a;
     return (_a = doublePress) == null ? void 0 : _a($$node, $$action_arg);
   }, () => ({ onDouble: $.get(guardedOnDoubleClick) }));
-  $.reset(div_1);
-  var node_18 = $.sibling(div_1, 2);
+  $.reset(div_3);
+  var node_18 = $.sibling(div_3, 2);
   {
     var consequent_13 = ($$anchor2) => {
       {
@@ -916,16 +923,16 @@ function AnnotationContainer($$anchor, $$props) {
   var node_24 = $.sibling(node_18, 2);
   {
     var consequent_14 = ($$anchor2) => {
-      var div_12 = root_23();
-      var div_13 = $.child(div_12);
-      let styles_3;
-      var text = $.child(div_13);
-      $.reset(div_13);
-      $.reset(div_12);
-      $.action(div_12, ($$node) => portalToBody == null ? void 0 : portalToBody($$node));
+      var div_14 = root_23();
+      var div_15 = $.child(div_14);
+      let styles_5;
+      var text = $.child(div_15);
+      $.reset(div_15);
+      $.reset(div_14);
+      $.action(div_14, ($$node) => portalToBody == null ? void 0 : portalToBody($$node));
       $.template_effect(
         ($0) => {
-          styles_3 = $.set_style(div_13, "", styles_3, {
+          styles_5 = $.set_style(div_15, "", styles_5, {
             position: "fixed",
             left: `${$.get(cursorScreen).x + 16}px`,
             top: `${$.get(cursorScreen).y - 16}px`,
@@ -943,13 +950,37 @@ function AnnotationContainer($$anchor, $$props) {
         },
         [() => $.get(normalizedRotationDisplay).toFixed(0)]
       );
-      $.append($$anchor2, div_12);
+      $.append($$anchor2, div_14);
     };
     $.if(node_24, ($$render) => {
       if (($.get(rotationActive) || $.get(isHandleHovered)) && $.get(cursorScreen)) $$render(consequent_14);
     });
   }
   $.reset(div);
+  $.template_effect(() => {
+    styles = $.set_style(div_1, $$props.style, styles, {
+      position: "absolute",
+      left: `${$.get(currentObject).rect.origin.x * $$props.scale}px`,
+      top: `${$.get(currentObject).rect.origin.y * $$props.scale}px`,
+      width: `${($.get(counterRot) ? $.get(counterRot).width : $.get(aabbWidth)) ?? ""}px`,
+      height: `${($.get(counterRot) ? $.get(counterRot).height : $.get(aabbHeight)) ?? ""}px`,
+      "pointer-events": "none",
+      "z-index": zIndex(),
+      transform: $.get(counterRot) ? $.get(counterRot).matrix : void 0,
+      "transform-origin": $.get(counterRot) ? "0 0" : void 0,
+      "mix-blend-mode": $$props.blendMode
+    });
+    styles_1 = $.set_style(div_2, "", styles_1, {
+      position: "absolute",
+      left: `${$.get(innerLeft) ?? ""}px`,
+      top: `${$.get(innerTop) ?? ""}px`,
+      width: `${$.get(innerWidth) ?? ""}px`,
+      height: `${$.get(innerHeight) ?? ""}px`,
+      transform: $.get(annotationRotation) !== 0 ? `rotate(${$.get(annotationRotation)}deg)` : void 0,
+      "transform-origin": $.get(innerTransformOrigin),
+      "pointer-events": "none"
+    });
+  });
   $.append($$anchor, div);
   $.pop();
 }
@@ -1005,13 +1036,13 @@ function getAnnotationScreenBounds(annotation, scale, rotation) {
     bottom: top + maxY
   };
 }
-var root_2$8 = $.from_html(`<div></div> <div></div> <div></div>`, 1);
-var root_4$3 = $.from_html(`<div style="display: contents;"><!></div>`);
+var root_2$a = $.from_html(`<div></div> <div></div> <div></div>`, 1);
+var root_4$6 = $.from_html(`<div style="display: contents;"><!></div>`);
 var root_6$1 = $.from_html(`<div></div>`);
-var root_5$3 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
+var root_5$6 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
 var root_10 = $.from_html(`<div></div>`);
 var root_11$1 = $.from_html(`<div><div> </div></div>`);
-var root_1$f = $.from_html(`<div data-group-selection-box="" data-no-interaction=""><div><!> <!> <div><!></div></div> <!> <!></div>`);
+var root_1$e = $.from_html(`<div data-group-selection-box="" data-no-interaction=""><div><!> <!> <div><!></div></div> <!> <!></div>`);
 function GroupSelectionBox($$anchor, $$props) {
   $.push($$props, true);
   let isRotatable = $.prop($$props, "isRotatable", 3, true), lockAspectRatio = $.prop($$props, "lockAspectRatio", 3, false), zIndex = $.prop($$props, "zIndex", 3, 2);
@@ -1294,13 +1325,13 @@ function GroupSelectionBox($$anchor, $$props) {
   var node_1 = $.first_child(fragment);
   {
     var consequent_11 = ($$anchor2) => {
-      var div = root_1$f();
+      var div = root_1$e();
       var div_1 = $.child(div);
       let styles;
       var node_2 = $.child(div_1);
       {
         var consequent = ($$anchor3) => {
-          var fragment_1 = root_2$8();
+          var fragment_1 = root_2$a();
           var div_2 = $.first_child(fragment_1);
           let styles_1;
           var div_3 = $.sibling(div_2, 2);
@@ -1354,7 +1385,7 @@ function GroupSelectionBox($$anchor, $$props) {
           var node_4 = $.first_child(fragment_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_5 = root_4$3();
+              var div_5 = root_4$6();
               div_5.__pointermove = (e) => {
                 if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
               };
@@ -1384,7 +1415,7 @@ function GroupSelectionBox($$anchor, $$props) {
               $.append($$anchor4, div_5);
             };
             var alternate = ($$anchor4) => {
-              var div_6 = root_5$3();
+              var div_6 = root_5$6();
               div_6.__pointermove = (e) => {
                 if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
               };
@@ -1616,7 +1647,7 @@ function GroupSelectionBox($$anchor, $$props) {
           }
         };
         $.if(node_12, ($$render) => {
-          if ($.get(shouldShowMenu)) $$render(consequent_10);
+          if ($.get(shouldShowMenu) && !$.get(rotationActive)) $$render(consequent_10);
         });
       }
       $.reset(div);
@@ -1639,7 +1670,7 @@ function GroupSelectionBox($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointermove"]);
-var root_1$e = $.from_svg(`<path fill="none" stroke="transparent"></path>`);
+var root_1$d = $.from_svg(`<path fill="none" stroke="transparent"></path>`);
 var root_3$4 = $.from_svg(`<path fill="none"></path>`);
 var root$d = $.from_svg(`<svg><!><!></svg>`);
 function Ink($$anchor, $$props) {
@@ -1664,7 +1695,7 @@ function Ink($$anchor, $$props) {
   let styles;
   var node = $.child(svg);
   $.each(node, 19, () => $.get(paths), (d, i) => `hit-${i}`, ($$anchor2, d) => {
-    var path = root_1$e();
+    var path = root_1$d();
     path.__pointerdown = function(...$$args) {
       var _a;
       (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1736,12 +1767,16 @@ function InkRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$d = $.from_svg(`<rect></rect>`);
-var root$c = $.from_svg(`<svg overflow="visible"><rect fill="transparent" stroke="transparent"></rect><!></svg>`);
+var root_1$c = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_2$9 = $.from_svg(`<rect fill="transparent" stroke="transparent"></rect>`);
+var root_4$5 = $.from_svg(`<path stroke-linejoin="round"></path>`);
+var root_5$5 = $.from_svg(`<rect></rect>`);
+var root$c = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
 function Square($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
   let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
+  const isCloudy = $.derived(() => ($$props.cloudyBorderIntensity ?? 0) > 0);
   const $$d = $.derived(() => {
     const outerW = $$props.rect.size.width;
     const outerH = $$props.rect.size.height;
@@ -1754,6 +1789,20 @@ function Square($$anchor, $$props) {
       y: $$props.strokeWidth / 2
     };
   }), width = $.derived(() => $.get($$d).width), height = $.derived(() => $.get($$d).height), x = $.derived(() => $.get($$d).x), y = $.derived(() => $.get($$d).y);
+  const cloudyPath = $.derived(() => {
+    if (!$.get(isCloudy)) 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 = $.derived(() => ($.get(width) + $$props.strokeWidth) * $$props.scale);
   const svgHeight = $.derived(() => ($.get(height) + $$props.strokeWidth) * $$props.scale);
   const hitStrokeWidth = $.derived(() => Math.max($$props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / $$props.scale));
@@ -1763,35 +1812,99 @@ function Square($$anchor, $$props) {
   });
   var svg = root$c();
   let styles;
-  var rect_1 = $.child(svg);
-  rect_1.__pointerdown = function(...$$args) {
-    var _a;
-    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-  };
-  let styles_1;
-  var node = $.sibling(rect_1);
+  var node = $.child(svg);
   {
     var consequent = ($$anchor2) => {
-      var rect_2 = root_1$d();
+      var path = root_1$c();
+      path.__pointerdown = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      let styles_1;
+      $.template_effect(() => {
+        $.set_attribute(path, "d", $.get(cloudyPath).path);
+        $.set_attribute(path, "stroke-width", $.get(hitStrokeWidth));
+        styles_1 = $.set_style(path, "", styles_1, {
+          cursor: $$props.isSelected ? "move" : "pointer",
+          "pointer-events": $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible"
+        });
+      });
+      $.append($$anchor2, path);
+    };
+    var alternate = ($$anchor2) => {
+      var rect_1 = root_2$9();
+      rect_1.__pointerdown = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
       let styles_2;
       $.template_effect(() => {
-        $.set_attribute(rect_2, "x", $.get(x));
-        $.set_attribute(rect_2, "y", $.get(y));
-        $.set_attribute(rect_2, "width", $.get(width));
-        $.set_attribute(rect_2, "height", $.get(height));
-        $.set_attribute(rect_2, "fill", color());
-        $.set_attribute(rect_2, "opacity", opacity());
-        styles_2 = $.set_style(rect_2, "", styles_2, {
-          "pointer-events": "none",
-          stroke: $$props.strokeColor ?? color(),
-          "stroke-width": $$props.strokeWidth,
-          "stroke-dasharray": $.get(dash)
+        $.set_attribute(rect_1, "x", $.get(x));
+        $.set_attribute(rect_1, "y", $.get(y));
+        $.set_attribute(rect_1, "width", $.get(width));
+        $.set_attribute(rect_1, "height", $.get(height));
+        $.set_attribute(rect_1, "stroke-width", $.get(hitStrokeWidth));
+        styles_2 = $.set_style(rect_1, "", styles_2, {
+          cursor: $$props.isSelected ? "move" : "pointer",
+          "pointer-events": $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible"
         });
       });
-      $.append($$anchor2, rect_2);
+      $.append($$anchor2, rect_1);
     };
     $.if(node, ($$render) => {
-      if (!appearanceActive()) $$render(consequent);
+      if ($.get(isCloudy) && $.get(cloudyPath)) $$render(consequent);
+      else $$render(alternate, false);
+    });
+  }
+  var node_1 = $.sibling(node);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_2 = $.first_child(fragment);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var path_1 = root_4$5();
+          let styles_3;
+          $.template_effect(() => {
+            $.set_attribute(path_1, "d", $.get(cloudyPath).path);
+            $.set_attribute(path_1, "fill", color());
+            $.set_attribute(path_1, "opacity", opacity());
+            styles_3 = $.set_style(path_1, "", styles_3, {
+              "pointer-events": "none",
+              stroke: $$props.strokeColor ?? color(),
+              "stroke-width": $$props.strokeWidth
+            });
+          });
+          $.append($$anchor3, path_1);
+        };
+        var alternate_1 = ($$anchor3) => {
+          var rect_2 = root_5$5();
+          let styles_4;
+          $.template_effect(() => {
+            $.set_attribute(rect_2, "x", $.get(x));
+            $.set_attribute(rect_2, "y", $.get(y));
+            $.set_attribute(rect_2, "width", $.get(width));
+            $.set_attribute(rect_2, "height", $.get(height));
+            $.set_attribute(rect_2, "fill", color());
+            $.set_attribute(rect_2, "opacity", opacity());
+            styles_4 = $.set_style(rect_2, "", styles_4, {
+              "pointer-events": "none",
+              stroke: $$props.strokeColor ?? color(),
+              "stroke-width": $$props.strokeWidth,
+              "stroke-dasharray": $.get(dash)
+            });
+          });
+          $.append($$anchor3, rect_2);
+        };
+        $.if(node_2, ($$render) => {
+          if ($.get(isCloudy) && $.get(cloudyPath)) $$render(consequent_1);
+          else $$render(alternate_1, false);
+        });
+      }
+      $.append($$anchor2, fragment);
+    };
+    $.if(node_1, ($$render) => {
+      if (!appearanceActive()) $$render(consequent_2);
     });
   }
   $.reset(svg);
@@ -1803,15 +1916,6 @@ function Square($$anchor, $$props) {
     $.set_attribute(svg, "width", $.get(svgWidth));
     $.set_attribute(svg, "height", $.get(svgHeight));
     $.set_attribute(svg, "viewBox", `0 0 ${$.get(width) + $$props.strokeWidth} ${$.get(height) + $$props.strokeWidth}`);
-    $.set_attribute(rect_1, "x", $.get(x));
-    $.set_attribute(rect_1, "y", $.get(y));
-    $.set_attribute(rect_1, "width", $.get(width));
-    $.set_attribute(rect_1, "height", $.get(height));
-    $.set_attribute(rect_1, "stroke-width", $.get(hitStrokeWidth));
-    styles_1 = $.set_style(rect_1, "", styles_1, {
-      cursor: $$props.isSelected ? "move" : "pointer",
-      "pointer-events": $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible"
-    });
   });
   $.append($$anchor, svg);
   $.pop();
@@ -1833,12 +1937,16 @@ function SquareRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$c = $.from_svg(`<ellipse></ellipse>`);
-var root$b = $.from_svg(`<svg overflow="visible"><ellipse fill="transparent" stroke="transparent"></ellipse><!></svg>`);
+var root_1$b = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_2$8 = $.from_svg(`<ellipse fill="transparent" stroke="transparent"></ellipse>`);
+var root_4$4 = $.from_svg(`<path stroke-linejoin="round"></path>`);
+var root_5$4 = $.from_svg(`<ellipse></ellipse>`);
+var root$b = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
 function Circle($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
   let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
+  const isCloudy = $.derived(() => ($$props.cloudyBorderIntensity ?? 0) > 0);
   const $$d = $.derived(() => {
     const outerW = $$props.rect.size.width;
     const outerH = $$props.rect.size.height;
@@ -1853,46 +1961,117 @@ function Circle($$anchor, $$props) {
       ry: innerH / 2
     };
   }), width = $.derived(() => $.get($$d).width), height = $.derived(() => $.get($$d).height), cx = $.derived(() => $.get($$d).cx), cy = $.derived(() => $.get($$d).cy), rx = $.derived(() => $.get($$d).rx), ry = $.derived(() => $.get($$d).ry);
+  const cloudyPath = $.derived(() => {
+    if (!$.get(isCloudy)) return null;
+    return generateCloudyEllipsePath(
+      {
+        x: 0,
+        y: 0,
+        width: $$props.rect.size.width,
+        height: $$props.rect.size.height
+      },
+      $$props.rectangleDifferences,
+      $$props.cloudyBorderIntensity,
+      $$props.strokeWidth
+    );
+  });
   let svgWidth = $.derived(() => $.get(width) * $$props.scale);
   let svgHeight = $.derived(() => $.get(height) * $$props.scale);
   let hitStrokeWidth = $.derived(() => Math.max($$props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / $$props.scale));
   let peValue = $.derived(() => $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible");
   var svg = root$b();
   let styles;
-  var ellipse = $.child(svg);
-  ellipse.__pointerdown = (e) => {
-    var _a;
-    return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
-  };
-  let styles_1;
-  var node = $.sibling(ellipse);
+  var node = $.child(svg);
   {
     var consequent = ($$anchor2) => {
-      var ellipse_1 = root_1$c();
-      $.set_style(ellipse_1, "", {}, { "pointer-events": "none" });
-      $.template_effect(
-        ($0) => {
-          $.set_attribute(ellipse_1, "cx", $.get(cx));
-          $.set_attribute(ellipse_1, "cy", $.get(cy));
-          $.set_attribute(ellipse_1, "rx", $.get(rx));
-          $.set_attribute(ellipse_1, "ry", $.get(ry));
-          $.set_attribute(ellipse_1, "fill", color());
-          $.set_attribute(ellipse_1, "opacity", opacity());
-          $.set_attribute(ellipse_1, "stroke", $$props.strokeColor ?? color());
-          $.set_attribute(ellipse_1, "stroke-width", $$props.strokeWidth);
-          $.set_attribute(ellipse_1, "stroke-dasharray", $0);
-        },
-        [
-          () => {
-            var _a;
-            return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
-          }
-        ]
-      );
-      $.append($$anchor2, ellipse_1);
+      var path = root_1$b();
+      path.__pointerdown = (e) => {
+        var _a;
+        return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+      };
+      let styles_1;
+      $.template_effect(() => {
+        $.set_attribute(path, "d", $.get(cloudyPath).path);
+        $.set_attribute(path, "stroke-width", $.get(hitStrokeWidth));
+        $.set_attribute(path, "pointer-events", $.get(peValue));
+        styles_1 = $.set_style(path, "", styles_1, { cursor: $$props.isSelected ? "move" : "pointer" });
+      });
+      $.append($$anchor2, path);
+    };
+    var alternate = ($$anchor2) => {
+      var ellipse = root_2$8();
+      ellipse.__pointerdown = (e) => {
+        var _a;
+        return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+      };
+      let styles_2;
+      $.template_effect(() => {
+        $.set_attribute(ellipse, "cx", $.get(cx));
+        $.set_attribute(ellipse, "cy", $.get(cy));
+        $.set_attribute(ellipse, "rx", $.get(rx));
+        $.set_attribute(ellipse, "ry", $.get(ry));
+        $.set_attribute(ellipse, "stroke-width", $.get(hitStrokeWidth));
+        $.set_attribute(ellipse, "pointer-events", $.get(peValue));
+        styles_2 = $.set_style(ellipse, "", styles_2, { cursor: $$props.isSelected ? "move" : "pointer" });
+      });
+      $.append($$anchor2, ellipse);
     };
     $.if(node, ($$render) => {
-      if (!appearanceActive()) $$render(consequent);
+      if ($.get(isCloudy) && $.get(cloudyPath)) $$render(consequent);
+      else $$render(alternate, false);
+    });
+  }
+  var node_1 = $.sibling(node);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_2 = $.first_child(fragment);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var path_1 = root_4$4();
+          $.set_style(path_1, "", {}, { "pointer-events": "none" });
+          $.template_effect(() => {
+            $.set_attribute(path_1, "d", $.get(cloudyPath).path);
+            $.set_attribute(path_1, "fill", color());
+            $.set_attribute(path_1, "opacity", opacity());
+            $.set_attribute(path_1, "stroke", $$props.strokeColor ?? color());
+            $.set_attribute(path_1, "stroke-width", $$props.strokeWidth);
+          });
+          $.append($$anchor3, path_1);
+        };
+        var alternate_1 = ($$anchor3) => {
+          var ellipse_1 = root_5$4();
+          $.set_style(ellipse_1, "", {}, { "pointer-events": "none" });
+          $.template_effect(
+            ($0) => {
+              $.set_attribute(ellipse_1, "cx", $.get(cx));
+              $.set_attribute(ellipse_1, "cy", $.get(cy));
+              $.set_attribute(ellipse_1, "rx", $.get(rx));
+              $.set_attribute(ellipse_1, "ry", $.get(ry));
+              $.set_attribute(ellipse_1, "fill", color());
+              $.set_attribute(ellipse_1, "opacity", opacity());
+              $.set_attribute(ellipse_1, "stroke", $$props.strokeColor ?? color());
+              $.set_attribute(ellipse_1, "stroke-width", $$props.strokeWidth);
+              $.set_attribute(ellipse_1, "stroke-dasharray", $0);
+            },
+            [
+              () => {
+                var _a;
+                return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
+              }
+            ]
+          );
+          $.append($$anchor3, ellipse_1);
+        };
+        $.if(node_2, ($$render) => {
+          if ($.get(isCloudy) && $.get(cloudyPath)) $$render(consequent_1);
+          else $$render(alternate_1, false);
+        });
+      }
+      $.append($$anchor2, fragment);
+    };
+    $.if(node_1, ($$render) => {
+      if (!appearanceActive()) $$render(consequent_2);
     });
   }
   $.reset(svg);
@@ -1907,13 +2086,6 @@ function Circle($$anchor, $$props) {
       "pointer-events": "none",
       "z-index": "2"
     });
-    $.set_attribute(ellipse, "cx", $.get(cx));
-    $.set_attribute(ellipse, "cy", $.get(cy));
-    $.set_attribute(ellipse, "rx", $.get(rx));
-    $.set_attribute(ellipse, "ry", $.get(ry));
-    $.set_attribute(ellipse, "stroke-width", $.get(hitStrokeWidth));
-    $.set_attribute(ellipse, "pointer-events", $.get(peValue));
-    styles_1 = $.set_style(ellipse, "", styles_1, { cursor: $$props.isSelected ? "move" : "pointer" });
   });
   $.append($$anchor, svg);
   $.pop();
@@ -1935,10 +2107,10 @@ function CircleRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$b = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_1$a = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
 var root_2$7 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
-var root_4$2 = $.from_svg(`<path></path>`);
-var root_5$2 = $.from_svg(`<path></path>`);
+var root_4$3 = $.from_svg(`<path></path>`);
+var root_5$3 = $.from_svg(`<path></path>`);
 var root_3$3 = $.from_svg(`<line></line><!><!>`, 1);
 var root$a = $.from_svg(`<svg><line stroke="transparent"></line><!><!><!></svg>`);
 function Line($$anchor, $$props) {
@@ -1975,7 +2147,7 @@ function Line($$anchor, $$props) {
   var node = $.sibling(line);
   {
     var consequent = ($$anchor2) => {
-      var path = root_1$b();
+      var path = root_1$a();
       path.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -2031,7 +2203,7 @@ function Line($$anchor, $$props) {
       var node_3 = $.sibling(line_1);
       {
         var consequent_2 = ($$anchor3) => {
-          var path_2 = root_4$2();
+          var path_2 = root_4$3();
           let styles_5;
           $.template_effect(() => {
             $.set_attribute(path_2, "d", $.get(endings).start.d);
@@ -2054,7 +2226,7 @@ function Line($$anchor, $$props) {
       var node_4 = $.sibling(node_3);
       {
         var consequent_3 = ($$anchor3) => {
-          var path_3 = root_5$2();
+          var path_3 = root_5$3();
           let styles_6;
           $.template_effect(() => {
             $.set_attribute(path_3, "d", $.get(endings).end.d);
@@ -2131,10 +2303,10 @@ function LineRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$a = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_1$9 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
 var root_2$6 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
-var root_4$1 = $.from_svg(`<path></path>`);
-var root_5$1 = $.from_svg(`<path></path>`);
+var root_4$2 = $.from_svg(`<path></path>`);
+var root_5$2 = $.from_svg(`<path></path>`);
 var root_3$2 = $.from_svg(`<path></path><!><!>`, 1);
 var root$9 = $.from_svg(`<svg><path fill="none" stroke="transparent"></path><!><!><!></svg>`);
 function Polyline($$anchor, $$props) {
@@ -2175,7 +2347,7 @@ function Polyline($$anchor, $$props) {
   var node = $.sibling(path);
   {
     var consequent = ($$anchor2) => {
-      var path_1 = root_1$a();
+      var path_1 = root_1$9();
       path_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -2231,7 +2403,7 @@ function Polyline($$anchor, $$props) {
       var node_3 = $.sibling(path_3);
       {
         var consequent_2 = ($$anchor3) => {
-          var path_4 = root_4$1();
+          var path_4 = root_4$2();
           let styles_5;
           $.template_effect(() => {
             $.set_attribute(path_4, "d", $.get(endings).start.d);
@@ -2254,7 +2426,7 @@ function Polyline($$anchor, $$props) {
       var node_4 = $.sibling(node_3);
       {
         var consequent_3 = ($$anchor3) => {
-          var path_5 = root_5$1();
+          var path_5 = root_5$2();
           let styles_6;
           $.template_effect(() => {
             $.set_attribute(path_5, "d", $.get(endings).end.d);
@@ -2328,14 +2500,16 @@ function PolylineRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_2$5 = $.from_svg(`<path fill="none"></path>`);
-var root_3$1 = $.from_svg(`<rect></rect>`);
-var root_1$9 = $.from_svg(`<path></path><!><!>`, 1);
+var root_2$5 = $.from_svg(`<path></path>`);
+var root_4$1 = $.from_svg(`<path fill="none"></path>`);
+var root_5$1 = $.from_svg(`<rect></rect>`);
+var root_3$1 = $.from_svg(`<path></path><!><!>`, 1);
 var root$8 = $.from_svg(`<svg><path fill="transparent" stroke="transparent"></path><!></svg>`);
 function Polygon($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
   let color = $.prop($$props, "color", 3, "transparent"), strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID), handleSize = $.prop($$props, "handleSize", 3, 14), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
+  const isCloudy = $.derived(() => ($$props.cloudyBorderIntensity ?? 0) > 0);
   const allPoints = $.derived(() => $$props.currentVertex ? [...$$props.vertices, $$props.currentVertex] : $$props.vertices);
   const localPts = $.derived(() => $.get(allPoints).map(({ x, y }) => ({ x: x - $$props.rect.origin.x, y: y - $$props.rect.origin.y })));
   const pathData = $.derived(() => {
@@ -2344,6 +2518,10 @@ function Polygon($$anchor, $$props) {
     const isPreview = !!$$props.currentVertex;
     return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
   });
+  const cloudyPath = $.derived(() => {
+    if (!$.get(isCloudy) || $.get(allPoints).length < 3) return null;
+    return generateCloudyPolygonPath($.get(allPoints), $$props.rect.origin, $$props.cloudyBorderIntensity, $$props.strokeWidth);
+  });
   const isPreviewing = $.derived(() => !!$$props.currentVertex && $$props.vertices.length > 0);
   const width = $.derived(() => $$props.rect.size.width * $$props.scale);
   const height = $.derived(() => $$props.rect.size.height * $$props.scale);
@@ -2362,69 +2540,96 @@ function Polygon($$anchor, $$props) {
   let styles_1;
   var node = $.sibling(path);
   {
-    var consequent_2 = ($$anchor2) => {
-      var fragment = root_1$9();
-      var path_1 = $.first_child(fragment);
-      let styles_2;
-      var node_1 = $.sibling(path_1);
+    var consequent_3 = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_1 = $.first_child(fragment);
       {
         var consequent = ($$anchor3) => {
-          var path_2 = root_2$5();
-          let styles_3;
+          var path_1 = root_2$5();
+          let styles_2;
           $.template_effect(() => {
-            $.set_attribute(path_2, "d", `M ${$.get(localPts)[$.get(localPts).length - 1].x} ${$.get(localPts)[$.get(localPts).length - 1].y} L ${$.get(localPts)[0].x} ${$.get(localPts)[0].y}`);
-            styles_3 = $.set_style(path_2, "", styles_3, {
-              stroke: strokeColor(),
+            $.set_attribute(path_1, "d", $.get(cloudyPath).path);
+            $.set_attribute(path_1, "opacity", opacity());
+            styles_2 = $.set_style(path_1, "", styles_2, {
+              fill: color(),
+              stroke: strokeColor() ?? color(),
               "stroke-width": $$props.strokeWidth,
-              "stroke-dasharray": "4,4",
-              opacity: 0.7,
-              "pointer-events": "none"
+              "pointer-events": "none",
+              "stroke-linejoin": "round"
             });
           });
-          $.append($$anchor3, path_2);
+          $.append($$anchor3, path_1);
         };
-        $.if(node_1, ($$render) => {
-          if ($.get(isPreviewing) && $$props.vertices.length > 1) $$render(consequent);
-        });
-      }
-      var node_2 = $.sibling(node_1);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var rect_1 = root_3$1();
-          $.set_attribute(rect_1, "opacity", 0.4);
-          $.set_style(rect_1, "", {}, { "pointer-events": "none" });
+        var alternate = ($$anchor3) => {
+          var fragment_1 = root_3$1();
+          var path_2 = $.first_child(fragment_1);
+          let styles_3;
+          var node_2 = $.sibling(path_2);
+          {
+            var consequent_1 = ($$anchor4) => {
+              var path_3 = root_4$1();
+              let styles_4;
+              $.template_effect(() => {
+                $.set_attribute(path_3, "d", `M ${$.get(localPts)[$.get(localPts).length - 1].x} ${$.get(localPts)[$.get(localPts).length - 1].y} L ${$.get(localPts)[0].x} ${$.get(localPts)[0].y}`);
+                styles_4 = $.set_style(path_3, "", styles_4, {
+                  stroke: strokeColor(),
+                  "stroke-width": $$props.strokeWidth,
+                  "stroke-dasharray": "4,4",
+                  opacity: 0.7,
+                  "pointer-events": "none"
+                });
+              });
+              $.append($$anchor4, path_3);
+            };
+            $.if(node_2, ($$render) => {
+              if ($.get(isPreviewing) && $$props.vertices.length > 1) $$render(consequent_1);
+            });
+          }
+          var node_3 = $.sibling(node_2);
+          {
+            var consequent_2 = ($$anchor4) => {
+              var rect_1 = root_5$1();
+              $.set_attribute(rect_1, "opacity", 0.4);
+              $.set_style(rect_1, "", {}, { "pointer-events": "none" });
+              $.template_effect(() => {
+                $.set_attribute(rect_1, "x", $.get(localPts)[0].x - handleSize() / $$props.scale / 2);
+                $.set_attribute(rect_1, "y", $.get(localPts)[0].y - handleSize() / $$props.scale / 2);
+                $.set_attribute(rect_1, "width", handleSize() / $$props.scale);
+                $.set_attribute(rect_1, "height", handleSize() / $$props.scale);
+                $.set_attribute(rect_1, "fill", strokeColor());
+                $.set_attribute(rect_1, "stroke", strokeColor());
+                $.set_attribute(rect_1, "stroke-width", $$props.strokeWidth / 2);
+              });
+              $.append($$anchor4, rect_1);
+            };
+            $.if(node_3, ($$render) => {
+              if ($.get(isPreviewing) && $$props.vertices.length >= 2) $$render(consequent_2);
+            });
+          }
           $.template_effect(() => {
-            $.set_attribute(rect_1, "x", $.get(localPts)[0].x - handleSize() / $$props.scale / 2);
-            $.set_attribute(rect_1, "y", $.get(localPts)[0].y - handleSize() / $$props.scale / 2);
-            $.set_attribute(rect_1, "width", handleSize() / $$props.scale);
-            $.set_attribute(rect_1, "height", handleSize() / $$props.scale);
-            $.set_attribute(rect_1, "fill", strokeColor());
-            $.set_attribute(rect_1, "stroke", strokeColor());
-            $.set_attribute(rect_1, "stroke-width", $$props.strokeWidth / 2);
+            $.set_attribute(path_2, "d", $.get(pathData));
+            $.set_attribute(path_2, "opacity", opacity());
+            styles_3 = $.set_style(path_2, "", styles_3, {
+              fill: $$props.currentVertex ? "none" : color(),
+              stroke: strokeColor() ?? color(),
+              "stroke-width": $$props.strokeWidth,
+              "pointer-events": "none",
+              "stroke-linecap": "butt",
+              "stroke-linejoin": "miter",
+              "stroke-dasharray": $.get(dash)
+            });
           });
-          $.append($$anchor3, rect_1);
+          $.append($$anchor3, fragment_1);
         };
-        $.if(node_2, ($$render) => {
-          if ($.get(isPreviewing) && $$props.vertices.length >= 2) $$render(consequent_1);
+        $.if(node_1, ($$render) => {
+          if ($.get(isCloudy) && $.get(cloudyPath)) $$render(consequent);
+          else $$render(alternate, false);
         });
       }
-      $.template_effect(() => {
-        $.set_attribute(path_1, "d", $.get(pathData));
-        $.set_attribute(path_1, "opacity", opacity());
-        styles_2 = $.set_style(path_1, "", styles_2, {
-          fill: $$props.currentVertex ? "none" : color(),
-          stroke: strokeColor() ?? color(),
-          "stroke-width": $$props.strokeWidth,
-          "pointer-events": "none",
-          "stroke-linecap": "butt",
-          "stroke-linejoin": "miter",
-          "stroke-dasharray": $.get(dash)
-        });
-      });
       $.append($$anchor2, fragment);
     };
     $.if(node, ($$render) => {
-      if (!appearanceActive()) $$render(consequent_2);
+      if (!appearanceActive()) $$render(consequent_3);
     });
   }
   $.reset(svg);
@@ -2433,7 +2638,7 @@ function Polygon($$anchor, $$props) {
     $.set_attribute(svg, "width", $.get(width));
     $.set_attribute(svg, "height", $.get(height));
     $.set_attribute(svg, "viewBox", `0 0 ${$$props.rect.size.width} ${$$props.rect.size.height}`);
-    $.set_attribute(path, "d", $.get(pathData));
+    $.set_attribute(path, "d", $.get(isCloudy) && $.get(cloudyPath) ? $.get(cloudyPath).path : $.get(pathData));
     $.set_attribute(path, "stroke-width", $.get(hitStrokeWidth));
     styles_1 = $.set_style(path, "", styles_1, {
       cursor: $$props.isSelected ? "move" : "pointer",
@@ -3349,7 +3554,7 @@ const builtInRenderers = [
     component: HighlightRenderer,
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
-    containerStyle: (a) => `mix-blend-mode: ${blendModeToCss(a.blendMode ?? PdfBlendMode.Multiply)}`
+    defaultBlendMode: PdfBlendMode.Multiply
   }),
   createRenderer({
     id: "underline",
@@ -3654,11 +3859,12 @@ function Annotations($$anchor, $$props) {
             e.stopPropagation();
             $.get(renderer).onDoubleClick($.get(annotation).object.id, setEditingId);
           } : void 0);
-          let $6 = $.derived(() => {
+          let $6 = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? $.get(renderer).defaultBlendMode ?? PdfBlendMode.Normal));
+          let $7 = $.derived(() => {
             var _a, _b;
-            return ((_b = (_a = $.get(renderer)).containerStyle) == null ? void 0 : _b.call(_a, $.get(annotation).object)) ?? `mix-blend-mode: ${blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Normal)}`;
+            return (_b = (_a = $.get(renderer)).containerStyle) == null ? void 0 : _b.call(_a, $.get(annotation).object);
           });
-          let $7 = $.derived(() => $.get(useAP) ? getAppearanceForAnnotation($.get(annotation)) : void 0);
+          let $8 = $.derived(() => $.get(useAP) ? getAppearanceForAnnotation($.get(annotation)) : void 0);
           AnnotationContainer($$anchor3, $.spread_props(
             {
               get trackedAnnotation() {
@@ -3703,11 +3909,14 @@ function Annotations($$anchor, $$props) {
               get zIndex() {
                 return $.get(renderer).zIndex;
               },
-              get style() {
+              get blendMode() {
                 return $.get($6);
               },
-              get appearance() {
+              get style() {
                 return $.get($7);
+              },
+              get appearance() {
+                return $.get($8);
               }
             },
             () => annotationsProps,
@@ -4212,15 +4421,18 @@ function PreviewRenderer($$anchor, $$props) {
                             () => $$props.preview.data
                           ));
                           $.reset(div_5);
-                          $.template_effect(() => styles_5 = $.set_style(div_5, "", styles_5, {
-                            position: "absolute",
-                            left: `${$.get(style).left ?? ""}px`,
-                            top: `${$.get(style).top ?? ""}px`,
-                            width: `${$.get(style).width ?? ""}px`,
-                            height: `${$.get(style).height ?? ""}px`,
-                            "pointer-events": "none",
-                            "z-index": "10"
-                          }));
+                          $.template_effect(($0) => styles_5 = $.set_style(div_5, "", styles_5, $0), [
+                            () => ({
+                              position: "absolute",
+                              left: `${$.get(style).left ?? ""}px`,
+                              top: `${$.get(style).top ?? ""}px`,
+                              width: `${$.get(style).width ?? ""}px`,
+                              height: `${$.get(style).height ?? ""}px`,
+                              "pointer-events": "none",
+                              "z-index": "10",
+                              "mix-blend-mode": blendModeToCss($$props.preview.data.blendMode ?? PdfBlendMode.Normal)
+                            })
+                          ]);
                           $.append($$anchor7, div_5);
                         };
                         var alternate = ($$anchor7) => {