@embedpdf/plugin-annotation 2.7.0 → 2.9.0

package/dist/svelte/index.js

@@ -1,12 +1,13 @@
 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";
 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, 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");
@@ -47,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,
@@ -136,14 +138,14 @@ function AppearanceImage($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_1$e = $.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$c = $.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, [
@@ -165,6 +167,7 @@ function AnnotationContainer($$anchor, $$props) {
     "isResizable",
     "isRotatable",
     "lockAspectRatio",
+    "blendMode",
     "style",
     "class",
     "vertexConfig",
@@ -201,6 +204,11 @@ function AnnotationContainer($$anchor, $$props) {
   const guardedOnDoubleClick = $.derived(() => permissions.canModifyAnnotations && $$props.onDoubleClick ? $$props.onDoubleClick : void 0);
   const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
   let currentObject = $.derived(() => $.get(preview) ? { ...$$props.trackedAnnotation.object, ...$.get(preview) } : $$props.trackedAnnotation.object);
+  const annoFlags = $.derived(() => $$props.trackedAnnotation.object.flags ?? []);
+  const hasNoZoom = $.derived(() => $.get(annoFlags).includes("noZoom"));
+  const hasNoRotate = $.derived(() => $.get(annoFlags).includes("noRotate"));
+  const visualScale = $.derived(() => $.get(hasNoZoom) ? 1 : $$props.scale);
+  const effectivePageRotation = $.derived(() => $.get(hasNoRotate) ? 0 : $$props.rotation);
   const HANDLE_COLOR = $.derived(() => {
     var _a;
     return ((_a = $$props.resizeUI) == null ? void 0 : _a.color) ?? "#007ACC";
@@ -278,17 +286,24 @@ function AnnotationContainer($$anchor, $$props) {
   const effectiveUnrotatedRect = $.derived(() => $.get(explicitUnrotatedRect) ?? $.get(currentObject).rect);
   const rotationPivot = $.derived(() => $.get(explicitUnrotatedRect) && $.get(annotationRotation) !== 0 ? inferRotationCenterFromRects($.get(effectiveUnrotatedRect), $.get(currentObject).rect, $.get(annotationRotation)) : void 0);
   const controllerElement = $.derived(() => $.get(effectiveUnrotatedRect));
-  const aabbWidth = $.derived(() => $.get(currentObject).rect.size.width * $$props.scale);
-  const aabbHeight = $.derived(() => $.get(currentObject).rect.size.height * $$props.scale);
-  const innerWidth = $.derived(() => $.get(effectiveUnrotatedRect).size.width * $$props.scale);
-  const innerHeight = $.derived(() => $.get(effectiveUnrotatedRect).size.height * $$props.scale);
+  const aabbWidth = $.derived(() => $.get(currentObject).rect.size.width * $.get(visualScale));
+  const aabbHeight = $.derived(() => $.get(currentObject).rect.size.height * $.get(visualScale));
+  const innerWidth = $.derived(() => $.get(effectiveUnrotatedRect).size.width * $.get(visualScale));
+  const innerHeight = $.derived(() => $.get(effectiveUnrotatedRect).size.height * $.get(visualScale));
   const usesCustomPivot = $.derived(() => Boolean($.get(explicitUnrotatedRect)) && $.get(annotationRotation) !== 0);
-  const innerLeft = $.derived(() => $.get(usesCustomPivot) ? ($.get(effectiveUnrotatedRect).origin.x - $.get(currentObject).rect.origin.x) * $$props.scale : ($.get(aabbWidth) - $.get(innerWidth)) / 2);
-  const innerTop = $.derived(() => $.get(usesCustomPivot) ? ($.get(effectiveUnrotatedRect).origin.y - $.get(currentObject).rect.origin.y) * $$props.scale : ($.get(aabbHeight) - $.get(innerHeight)) / 2);
-  const innerTransformOrigin = $.derived(() => $.get(usesCustomPivot) && $.get(rotationPivot) ? `${($.get(rotationPivot).x - $.get(effectiveUnrotatedRect).origin.x) * $$props.scale}px ${($.get(rotationPivot).y - $.get(effectiveUnrotatedRect).origin.y) * $$props.scale}px` : "center center");
-  const centerX = $.derived(() => $.get(rotationPivot) ? ($.get(rotationPivot).x - $.get(currentObject).rect.origin.x) * $$props.scale : $.get(aabbWidth) / 2);
-  const centerY = $.derived(() => $.get(rotationPivot) ? ($.get(rotationPivot).y - $.get(currentObject).rect.origin.y) * $$props.scale : $.get(aabbHeight) / 2);
+  const innerLeft = $.derived(() => $.get(usesCustomPivot) ? ($.get(effectiveUnrotatedRect).origin.x - $.get(currentObject).rect.origin.x) * $.get(visualScale) : ($.get(aabbWidth) - $.get(innerWidth)) / 2);
+  const innerTop = $.derived(() => $.get(usesCustomPivot) ? ($.get(effectiveUnrotatedRect).origin.y - $.get(currentObject).rect.origin.y) * $.get(visualScale) : ($.get(aabbHeight) - $.get(innerHeight)) / 2);
+  const innerTransformOrigin = $.derived(() => $.get(usesCustomPivot) && $.get(rotationPivot) ? `${($.get(rotationPivot).x - $.get(effectiveUnrotatedRect).origin.x) * $.get(visualScale)}px ${($.get(rotationPivot).y - $.get(effectiveUnrotatedRect).origin.y) * $.get(visualScale)}px` : "center center");
+  const centerX = $.derived(() => $.get(rotationPivot) ? ($.get(rotationPivot).x - $.get(currentObject).rect.origin.x) * $.get(visualScale) : $.get(aabbWidth) / 2);
+  const centerY = $.derived(() => $.get(rotationPivot) ? ($.get(rotationPivot).y - $.get(currentObject).rect.origin.y) * $.get(visualScale) : $.get(aabbHeight) / 2);
   const guideLength = $.derived(() => Math.max(300, Math.max($.get(aabbWidth), $.get(aabbHeight)) + 80));
+  const counterRot = $.derived(() => $.get(hasNoRotate) ? getCounterRotation(
+    {
+      origin: { x: 0, y: 0 },
+      size: { width: $.get(aabbWidth), height: $.get(aabbHeight) }
+    },
+    $$props.rotation
+  ) : null);
   const apActive = $.derived(() => {
     var _a;
     return !!((_a = $$props.appearance) == null ? void 0 : _a.normal) && !$.get(gestureActive) && !isEditing() && !$$props.trackedAnnotation.dictMode;
@@ -469,7 +484,7 @@ function AnnotationContainer($$anchor, $$props) {
     };
   }
   function buildMenuProps(rect, menuWrapperProps) {
-    const effectiveAngle = (($.get(annotationRotation) + $$props.rotation * 90) % 360 + 360) % 360;
+    const effectiveAngle = (($.get(annotationRotation) + $.get(effectivePageRotation) * 90) % 360 + 360) % 360;
     const handleNearMenuSide = $.get(effectiveIsRotatable) && effectiveAngle > 90 && effectiveAngle < 270;
     return {
       context: buildContext(),
@@ -489,34 +504,90 @@ function AnnotationContainer($$anchor, $$props) {
       }
     };
   }
-  var div = root$c();
+  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]: {
       position: "absolute",
       left: `${$.get(currentObject).rect.origin.x * $$props.scale}px`,
       top: `${$.get(currentObject).rect.origin.y * $$props.scale}px`,
-      width: `${$.get(aabbWidth) ?? ""}px`,
-      height: `${$.get(aabbHeight) ?? ""}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()
+      "z-index": zIndex(),
+      transform: $.get(counterRot) ? $.get(counterRot).matrix : void 0,
+      "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$e();
-      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`,
@@ -526,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`,
@@ -536,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`,
@@ -549,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,
@@ -581,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,
@@ -617,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);
@@ -631,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",
@@ -668,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();
@@ -742,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;
@@ -788,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;
@@ -809,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) => {
       {
@@ -878,8 +900,8 @@ function AnnotationContainer($$anchor, $$props) {
             y: $.get(currentObject).rect.origin.y * $$props.scale
           },
           size: {
-            width: $.get(currentObject).rect.size.width * $$props.scale,
-            height: $.get(currentObject).rect.size.height * $$props.scale
+            width: $.get(currentObject).rect.size.width * $.get(visualScale),
+            height: $.get(currentObject).rect.size.height * $.get(visualScale)
           }
         }));
         CounterRotate($$anchor2, {
@@ -901,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`,
@@ -928,24 +950,99 @@ 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();
 }
 $.delegate(["pointermove"]);
-var root_2$8 = $.from_html(`<div></div> <div></div> <div></div>`, 1);
-var root_4$3 = $.from_html(`<div style="display: contents;"><!></div>`);
+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
+  };
+}
+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$d = $.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);
@@ -1048,8 +1145,33 @@ function GroupSelectionBox($$anchor, $$props) {
   const groupRotationDisplay = $.derived(() => $.get(liveRotation) ?? 0);
   const rotationActive = $.derived(() => $.get(liveRotation) !== null);
   const normalizedRotationDisplay = $.derived(() => Number.isFinite($.get(groupRotationDisplay)) ? Math.round($.get(groupRotationDisplay) * 10) / 10 : 0);
-  const groupBoxWidth = $.derived(() => $.get(previewGroupBox).size.width * $$props.scale);
-  const groupBoxHeight = $.derived(() => $.get(previewGroupBox).size.height * $$props.scale);
+  const visualBoundsCorrection = $.derived(() => {
+    let visualLeft = Infinity;
+    let visualTop = Infinity;
+    let visualRight = -Infinity;
+    let visualBottom = -Infinity;
+    for (const ta of $$props.selectedAnnotations) {
+      const bounds = getAnnotationScreenBounds(ta, $$props.scale, $$props.rotation);
+      if (bounds.left < visualLeft) visualLeft = bounds.left;
+      if (bounds.top < visualTop) visualTop = bounds.top;
+      if (bounds.right > visualRight) visualRight = bounds.right;
+      if (bounds.bottom > visualBottom) visualBottom = bounds.bottom;
+    }
+    const logicalLeft = $.get(groupBox).origin.x * $$props.scale;
+    const logicalTop = $.get(groupBox).origin.y * $$props.scale;
+    const logicalRight = ($.get(groupBox).origin.x + $.get(groupBox).size.width) * $$props.scale;
+    const logicalBottom = ($.get(groupBox).origin.y + $.get(groupBox).size.height) * $$props.scale;
+    return {
+      left: visualLeft - logicalLeft,
+      top: visualTop - logicalTop,
+      right: visualRight - logicalRight,
+      bottom: visualBottom - logicalBottom
+    };
+  });
+  const groupBoxLeft = $.derived(() => $.get(previewGroupBox).origin.x * $$props.scale + $.get(visualBoundsCorrection).left);
+  const groupBoxTop = $.derived(() => $.get(previewGroupBox).origin.y * $$props.scale + $.get(visualBoundsCorrection).top);
+  const groupBoxWidth = $.derived(() => $.get(previewGroupBox).size.width * $$props.scale + ($.get(visualBoundsCorrection).right - $.get(visualBoundsCorrection).left));
+  const groupBoxHeight = $.derived(() => $.get(previewGroupBox).size.height * $$props.scale + ($.get(visualBoundsCorrection).bottom - $.get(visualBoundsCorrection).top));
   const groupCenterX = $.derived(() => $.get(groupBoxWidth) / 2);
   const groupCenterY = $.derived(() => $.get(groupBoxHeight) / 2);
   const groupGuideLength = $.derived(() => Math.max(300, Math.max($.get(groupBoxWidth), $.get(groupBoxHeight)) + 80));
@@ -1203,13 +1325,13 @@ function GroupSelectionBox($$anchor, $$props) {
   var node_1 = $.first_child(fragment);
   {
     var consequent_11 = ($$anchor2) => {
-      var div = root_1$d();
+      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);
@@ -1263,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);
               };
@@ -1293,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);
               };
@@ -1509,14 +1631,8 @@ function GroupSelectionBox($$anchor, $$props) {
               $.append($$anchor4, fragment_7);
             };
             let $0 = $.derived(() => ({
-              origin: {
-                x: $.get(previewGroupBox).origin.x * $$props.scale,
-                y: $.get(previewGroupBox).origin.y * $$props.scale
-              },
-              size: {
-                width: $.get(previewGroupBox).size.width * $$props.scale,
-                height: $.get(previewGroupBox).size.height * $$props.scale
-              }
+              origin: { x: $.get(groupBoxLeft), y: $.get(groupBoxTop) },
+              size: { width: $.get(groupBoxWidth), height: $.get(groupBoxHeight) }
             }));
             CounterRotate($$anchor3, {
               get rect() {
@@ -1531,14 +1647,14 @@ function GroupSelectionBox($$anchor, $$props) {
           }
         };
         $.if(node_12, ($$render) => {
-          if ($.get(shouldShowMenu)) $$render(consequent_10);
+          if ($.get(shouldShowMenu) && !$.get(rotationActive)) $$render(consequent_10);
         });
       }
       $.reset(div);
       $.template_effect(() => styles = $.set_style(div_1, "", styles, {
         position: "absolute",
-        left: `${$.get(previewGroupBox).origin.x * $$props.scale}px`,
-        top: `${$.get(previewGroupBox).origin.y * $$props.scale}px`,
+        left: `${$.get(groupBoxLeft) ?? ""}px`,
+        top: `${$.get(groupBoxTop) ?? ""}px`,
         width: `${$.get(groupBoxWidth) ?? ""}px`,
         height: `${$.get(groupBoxHeight) ?? ""}px`,
         "pointer-events": "none",
@@ -1554,9 +1670,9 @@ function GroupSelectionBox($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointermove"]);
-var root_1$c = $.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$b = $.from_svg(`<svg><!><!></svg>`);
+var root$d = $.from_svg(`<svg><!><!></svg>`);
 function Ink($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1575,19 +1691,15 @@ function Ink($$anchor, $$props) {
   const width = $.derived(() => $$props.rect.size.width * $$props.scale);
   const height = $.derived(() => $$props.rect.size.height * $$props.scale);
   const hitStrokeWidth = $.derived(() => Math.max($$props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / $$props.scale));
-  var svg = root$b();
+  var svg = root$d();
   let styles;
   var node = $.child(svg);
   $.each(node, 19, () => $.get(paths), (d, i) => `hit-${i}`, ($$anchor2, d) => {
-    var path = root_1$c();
+    var path = root_1$d();
     path.__pointerdown = function(...$$args) {
       var _a;
       (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
     };
-    path.__touchstart = function(...$$args) {
-      var _a;
-      (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-    };
     let styles_1;
     $.template_effect(() => {
       $.set_attribute(path, "d", $.get(d));
@@ -1638,7 +1750,7 @@ function Ink($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function InkRenderer($$anchor, $$props) {
   Ink($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -1655,12 +1767,16 @@ function InkRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$b = $.from_svg(`<rect></rect>`);
-var root$a = $.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;
@@ -1673,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));
@@ -1680,41 +1810,101 @@ function Square($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$a();
+  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);
-  };
-  rect_1.__touchstart = 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$b();
+      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);
@@ -1726,20 +1916,11 @@ 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();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function SquareRenderer($$anchor, $$props) {
   Square($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -1756,12 +1937,16 @@ function SquareRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$a = $.from_svg(`<ellipse></ellipse>`);
-var root$9 = $.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;
@@ -1776,50 +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$9();
+  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);
-  };
-  ellipse.__touchstart = (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$a();
-      $.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);
@@ -1834,18 +2086,11 @@ 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();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function CircleRenderer($$anchor, $$props) {
   Circle($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -1862,12 +2107,12 @@ function CircleRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$9 = $.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$8 = $.from_svg(`<svg><line stroke="transparent"></line><!><!><!></svg>`);
+var root$a = $.from_svg(`<svg><line stroke="transparent"></line><!><!><!></svg>`);
 function Line($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1891,30 +2136,22 @@ function Line($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$8();
+  var svg = root$a();
   let styles;
   var line = $.child(svg);
   line.__pointerdown = function(...$$args) {
     var _a;
     (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
   };
-  line.__touchstart = function(...$$args) {
-    var _a;
-    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-  };
   let styles_1;
   var node = $.sibling(line);
   {
     var consequent = ($$anchor2) => {
-      var path = root_1$9();
+      var path = root_1$a();
       path.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
       };
-      path.__touchstart = function(...$$args) {
-        var _a;
-        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-      };
       let styles_2;
       $.template_effect(() => {
         $.set_attribute(path, "d", $.get(endings).start.d);
@@ -1940,10 +2177,6 @@ function Line($$anchor, $$props) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
       };
-      path_1.__touchstart = function(...$$args) {
-        var _a;
-        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-      };
       let styles_3;
       $.template_effect(() => {
         $.set_attribute(path_1, "d", $.get(endings).end.d);
@@ -1970,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);
@@ -1993,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);
@@ -2053,7 +2286,7 @@ function Line($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function LineRenderer($$anchor, $$props) {
   Line($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -2070,16 +2303,16 @@ function LineRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$8 = $.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$7 = $.from_svg(`<svg><path fill="none" stroke="transparent"></path><!><!><!></svg>`);
+var root$9 = $.from_svg(`<svg><path fill="none" stroke="transparent"></path><!><!><!></svg>`);
 function Polyline($$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), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
+  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), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
   const localPts = $.derived(() => $$props.vertices.map(({ x, y }) => ({ x: x - $$props.rect.origin.x, y: y - $$props.rect.origin.y })));
   const pathData = $.derived(() => {
     if (!$.get(localPts).length) return "";
@@ -2099,30 +2332,26 @@ function Polyline($$anchor, $$props) {
   const width = $.derived(() => $$props.rect.size.width * $$props.scale);
   const height = $.derived(() => $$props.rect.size.height * $$props.scale);
   const hitStrokeWidth = $.derived(() => Math.max($$props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / $$props.scale));
-  var svg = root$7();
+  const dash = $.derived(() => {
+    var _a;
+    return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
+  });
+  var svg = root$9();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
     var _a;
     (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
   };
-  path.__touchstart = function(...$$args) {
-    var _a;
-    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-  };
   let styles_1;
   var node = $.sibling(path);
   {
     var consequent = ($$anchor2) => {
-      var path_1 = root_1$8();
+      var path_1 = root_1$9();
       path_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
       };
-      path_1.__touchstart = function(...$$args) {
-        var _a;
-        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-      };
       let styles_2;
       $.template_effect(() => {
         $.set_attribute(path_1, "d", $.get(endings).start.d);
@@ -2148,10 +2377,6 @@ function Polyline($$anchor, $$props) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
       };
-      path_2.__touchstart = function(...$$args) {
-        var _a;
-        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-      };
       let styles_3;
       $.template_effect(() => {
         $.set_attribute(path_2, "d", $.get(endings).end.d);
@@ -2178,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);
@@ -2188,7 +2413,8 @@ function Polyline($$anchor, $$props) {
             styles_5 = $.set_style(path_4, "", styles_5, {
               "pointer-events": "none",
               "stroke-width": $$props.strokeWidth,
-              "stroke-linecap": "butt"
+              "stroke-linecap": "butt",
+              "stroke-dasharray": $.get(dash)
             });
           });
           $.append($$anchor3, path_4);
@@ -2200,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);
@@ -2210,7 +2436,8 @@ function Polyline($$anchor, $$props) {
             styles_6 = $.set_style(path_5, "", styles_6, {
               "pointer-events": "none",
               "stroke-width": $$props.strokeWidth,
-              "stroke-linecap": "butt"
+              "stroke-linecap": "butt",
+              "stroke-dasharray": $.get(dash)
             });
           });
           $.append($$anchor3, path_5);
@@ -2228,7 +2455,8 @@ function Polyline($$anchor, $$props) {
           "stroke-width": $$props.strokeWidth,
           "pointer-events": "none",
           "stroke-linecap": "butt",
-          "stroke-linejoin": "miter"
+          "stroke-linejoin": "miter",
+          "stroke-dasharray": $.get(dash)
         });
       });
       $.append($$anchor2, fragment);
@@ -2255,7 +2483,7 @@ function Polyline($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function PolylineRenderer($$anchor, $$props) {
   Polyline($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -2272,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$7 = $.from_svg(`<path></path><!><!>`, 1);
-var root$6 = $.from_svg(`<svg><path fill="transparent" stroke="transparent"></path><!></svg>`);
+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(() => {
@@ -2288,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);
@@ -2296,83 +2530,106 @@ function Polygon($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$6();
+  var svg = root$8();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
     var _a;
     (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
   };
-  path.__touchstart = function(...$$args) {
-    var _a;
-    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-  };
   let styles_1;
   var node = $.sibling(path);
   {
-    var consequent_2 = ($$anchor2) => {
-      var fragment = root_1$7();
-      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);
@@ -2381,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",
@@ -2393,7 +2650,7 @@ function Polygon($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function PolygonRenderer($$anchor, $$props) {
   Polygon($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -2410,7 +2667,7 @@ function PolygonRenderer($$anchor, $$props) {
     }
   }));
 }
-var root$5 = $.from_html(`<div role="button"><span role="textbox" tabindex="0"> </span></div>`);
+var root$7 = $.from_html(`<div role="button"><span role="textbox" tabindex="0"> </span></div>`);
 function FreeText($$anchor, $$props) {
   $.push($$props, true);
   let appearanceActive = $.prop($$props, "appearanceActive", 3, false);
@@ -2457,16 +2714,12 @@ function FreeText($$anchor, $$props) {
   const outerH = $.derived(() => $$props.annotation.object.rect.size.height * $$props.scale);
   const justify = $.derived(() => $$props.annotation.object.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : $$props.annotation.object.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end");
   const fontCss = $.derived(() => standardFontCssProperties($$props.annotation.object.fontFamily));
-  var div = root$5();
+  var div = root$7();
   $.set_attribute(div, "tabindex", -1);
   div.__pointerdown = function(...$$args) {
     var _a;
     (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
   };
-  div.__touchstart = function(...$$args) {
-    var _a;
-    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-  };
   let styles;
   var span = $.child(div);
   let styles_1;
@@ -2517,7 +2770,7 @@ function FreeText($$anchor, $$props) {
   $.append($$anchor, div);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function FreeTextRenderer($$anchor, $$props) {
   {
     let $0 = $.derived(() => ({ ...$$props.annotation, object: $$props.currentObject }));
@@ -2549,7 +2802,7 @@ function FreeTextRenderer($$anchor, $$props) {
     });
   }
 }
-var root_1$6 = $.from_html(`<img/>`);
+var root_1$8 = $.from_html(`<img/>`);
 function RenderAnnotation($$anchor, $$props) {
   $.push($$props, true);
   let scaleFactor = $.prop($$props, "scaleFactor", 3, 1), unrotated = $.prop($$props, "unrotated", 3, false), restProps = $.rest_props($$props, [
@@ -2612,7 +2865,7 @@ function RenderAnnotation($$anchor, $$props) {
   var node = $.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var img = root_1$6();
+      var img = root_1$8();
       $.attribute_effect(img, () => ({
         alt: "",
         src: $.get(imageUrl),
@@ -2631,7 +2884,7 @@ function RenderAnnotation($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root$4 = $.from_html(`<div role="button"><!></div>`);
+var root$6 = $.from_html(`<div role="button"><!></div>`);
 function Stamp($$anchor, $$props) {
   $.push($$props, true);
   let annotationProp = $.derived(() => ({
@@ -2639,17 +2892,13 @@ function Stamp($$anchor, $$props) {
     id: $$props.annotation.object.id
   }));
   const unrotated = $.derived(() => !!$$props.annotation.object.rotation && !!$$props.annotation.object.unrotatedRect);
-  var div = root$4();
+  var div = root$6();
   $.set_attribute(div, "tabindex", -1);
   let styles;
   div.__pointerdown = function(...$$args) {
     var _a;
     (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
   };
-  div.__touchstart = function(...$$args) {
-    var _a;
-    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-  };
   var node = $.child(div);
   RenderAnnotation(node, {
     get documentId() {
@@ -2676,7 +2925,7 @@ function Stamp($$anchor, $$props) {
   $.append($$anchor, div);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function StampRenderer($$anchor, $$props) {
   Stamp($$anchor, {
     get documentId() {
@@ -2699,9 +2948,9 @@ function StampRenderer($$anchor, $$props) {
     }
   });
 }
-var root_1$5 = $.from_svg(`<line></line>`);
+var root_1$7 = $.from_svg(`<line></line>`);
 var root_2$4 = $.from_svg(`<rect fill="transparent"></rect>`);
-var root$3 = $.from_svg(`<svg><rect fill="transparent"></rect><!></svg>`);
+var root$5 = $.from_svg(`<svg><rect fill="transparent"></rect><!></svg>`);
 function Link($$anchor, $$props) {
   $.push($$props, true);
   let strokeColor = $.prop($$props, "strokeColor", 3, "#0000FF"), strokeWidth = $.prop($$props, "strokeWidth", 3, 2), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.UNDERLINE), hasIRT = $.prop($$props, "hasIRT", 3, false);
@@ -2719,7 +2968,7 @@ function Link($$anchor, $$props) {
   const isUnderline = $.derived(() => strokeStyle() === PdfAnnotationBorderStyle.UNDERLINE);
   const hitAreaCursor = $.derived(() => hasIRT() ? "default" : $$props.isSelected ? "move" : "pointer");
   const hitAreaPointerEvents = $.derived(() => hasIRT() ? "none" : $$props.isSelected ? "none" : "visible");
-  var svg = root$3();
+  var svg = root$5();
   let styles;
   var rect_1 = $.child(svg);
   $.set_attribute(rect_1, "x", 0);
@@ -2728,15 +2977,11 @@ function Link($$anchor, $$props) {
     var _a;
     (_a = hasIRT() ? void 0 : $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
   };
-  rect_1.__touchstart = function(...$$args) {
-    var _a;
-    (_a = hasIRT() ? void 0 : $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
-  };
   let styles_1;
   var node = $.sibling(rect_1);
   {
     var consequent = ($$anchor2) => {
-      var line = root_1$5();
+      var line = root_1$7();
       $.set_attribute(line, "x1", 1);
       $.set_style(line, "", {}, { "pointer-events": "none" });
       $.template_effect(() => {
@@ -2793,7 +3038,7 @@ function Link($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function LinkRenderer($$anchor, $$props) {
   $.push($$props, true);
   {
@@ -2815,7 +3060,7 @@ function LinkRenderer($$anchor, $$props) {
   }
   $.pop();
 }
-var root_1$4 = $.from_html(`<div></div>`);
+var root_1$6 = $.from_html(`<div></div>`);
 function Highlight($$anchor, $$props) {
   $.push($$props, true);
   let opacity = $.prop($$props, "opacity", 3, 0.5), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
@@ -2823,14 +3068,13 @@ function Highlight($$anchor, $$props) {
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, b) => {
-    var div = root_1$4();
+    var div = root_1$6();
     $.attribute_effect(
       div,
       ($0) => ({
         role: "button",
         tabindex: $$props.onClick ? 0 : -1,
         onpointerdown: $$props.onClick,
-        ontouchstart: $$props.onClick,
         ...$0,
         [$.STYLE]: {
           position: "absolute",
@@ -2868,7 +3112,7 @@ function HighlightRenderer($$anchor, $$props) {
   }));
 }
 var root_2$3 = $.from_html(`<div></div>`);
-var root_1$3 = $.from_html(`<div><!></div>`);
+var root_1$5 = $.from_html(`<div><!></div>`);
 function Underline($$anchor, $$props) {
   $.push($$props, true);
   let opacity = $.prop($$props, "opacity", 3, 0.5), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
@@ -2877,14 +3121,13 @@ function Underline($$anchor, $$props) {
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
-    var div = root_1$3();
+    var div = root_1$5();
     $.attribute_effect(
       div,
       ($0) => ({
         role: "button",
         tabindex: $$props.onClick ? 0 : -1,
         onpointerdown: $$props.onClick,
-        ontouchstart: $$props.onClick,
         ...$0,
         [$.STYLE]: {
           position: "absolute",
@@ -2943,7 +3186,7 @@ function UnderlineRenderer($$anchor, $$props) {
   }));
 }
 var root_2$2 = $.from_html(`<div></div>`);
-var root_1$2 = $.from_html(`<div><!></div>`);
+var root_1$4 = $.from_html(`<div><!></div>`);
 function Strikeout($$anchor, $$props) {
   $.push($$props, true);
   let opacity = $.prop($$props, "opacity", 3, 0.5), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
@@ -2952,14 +3195,13 @@ function Strikeout($$anchor, $$props) {
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
-    var div = root_1$2();
+    var div = root_1$4();
     $.attribute_effect(
       div,
       ($0) => ({
         role: "button",
         tabindex: $$props.onClick ? 0 : -1,
         onpointerdown: $$props.onClick,
-        ontouchstart: $$props.onClick,
         ...$0,
         [$.STYLE]: {
           position: "absolute",
@@ -3019,7 +3261,7 @@ function StrikeoutRenderer($$anchor, $$props) {
   }));
 }
 var root_2$1 = $.from_html(`<div></div>`);
-var root_1$1 = $.from_html(`<div><!></div>`);
+var root_1$3 = $.from_html(`<div><!></div>`);
 function Squiggly($$anchor, $$props) {
   $.push($$props, true);
   let opacity = $.prop($$props, "opacity", 3, 0.5), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
@@ -3034,14 +3276,13 @@ function Squiggly($$anchor, $$props) {
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
-    var div = root_1$1();
+    var div = root_1$3();
     $.attribute_effect(
       div,
       ($0) => ({
         role: "button",
         tabindex: $$props.onClick ? 0 : -1,
         onpointerdown: $$props.onClick,
-        ontouchstart: $$props.onClick,
         ...$0,
         [$.STYLE]: {
           position: "absolute",
@@ -3101,6 +3342,160 @@ function SquigglyRenderer($$anchor, $$props) {
     }
   }));
 }
+var root_1$2 = $.from_svg(`<path fill-rule="evenodd"></path>`);
+var root$4 = $.from_svg(`<svg overflow="visible"><path fill="transparent" stroke="transparent"></path><!></svg>`);
+function Caret($$anchor, $$props) {
+  $.push($$props, true);
+  let strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
+  const $$d = $.derived(() => {
+    const w = $$props.rect.size.width;
+    const h = $$props.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 };
+  }), width = $.derived(() => $.get($$d).width), height = $.derived(() => $.get($$d).height), path = $.derived(() => $.get($$d).path);
+  let svgWidth = $.derived(() => $.get(width) * $$props.scale);
+  let svgHeight = $.derived(() => $.get(height) * $$props.scale);
+  var svg = root$4();
+  let styles;
+  var path_1 = $.child(svg);
+  $.set_attribute(path_1, "stroke-width", 4);
+  path_1.__pointerdown = (e) => {
+    var _a;
+    return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  let styles_1;
+  var node = $.sibling(path_1);
+  {
+    var consequent = ($$anchor2) => {
+      var path_2 = root_1$2();
+      $.set_attribute(path_2, "stroke-width", 0.5);
+      $.set_style(path_2, "", {}, { "pointer-events": "none" });
+      $.template_effect(() => {
+        $.set_attribute(path_2, "d", $.get(path));
+        $.set_attribute(path_2, "fill", strokeColor());
+        $.set_attribute(path_2, "stroke", strokeColor());
+        $.set_attribute(path_2, "opacity", opacity());
+      });
+      $.append($$anchor2, path_2);
+    };
+    $.if(node, ($$render) => {
+      if (!appearanceActive()) $$render(consequent);
+    });
+  }
+  $.reset(svg);
+  $.template_effect(() => {
+    $.set_attribute(svg, "width", $.get(svgWidth));
+    $.set_attribute(svg, "height", $.get(svgHeight));
+    $.set_attribute(svg, "viewBox", `0 0 ${$.get(width)} ${$.get(height)}`);
+    styles = $.set_style(svg, "", styles, {
+      position: "absolute",
+      width: `${$.get(svgWidth)}px`,
+      height: `${$.get(svgHeight)}px`,
+      "pointer-events": "none",
+      "z-index": "2"
+    });
+    $.set_attribute(path_1, "d", $.get(path));
+    $.set_attribute(path_1, "pointer-events", $$props.isSelected ? "none" : "visible");
+    styles_1 = $.set_style(path_1, "", styles_1, { cursor: $$props.isSelected ? "move" : "pointer" });
+  });
+  $.append($$anchor, svg);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+function CaretRenderer($$anchor, $$props) {
+  Caret($$anchor, $.spread_props(() => $$props.currentObject, {
+    get isSelected() {
+      return $$props.isSelected;
+    },
+    get scale() {
+      return $$props.scale;
+    },
+    get onClick() {
+      return $$props.onClick;
+    },
+    get appearanceActive() {
+      return $$props.appearanceActive;
+    }
+  }));
+}
+var root_1$1 = $.from_svg(`<svg viewBox="0 0 20 20" width="100%" height="100%"><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" stroke-width="1" stroke-linejoin="miter"></path><line x1="2.5" y1="4.25" x2="17.5" y2="4.25" stroke-width="1"></line><line x1="2.5" y1="8" x2="17.5" y2="8" stroke-width="1"></line><line x1="2.5" y1="11.75" x2="17.5" y2="11.75" stroke-width="1"></line></svg>`);
+var root$3 = $.from_html(`<div><!></div>`);
+function Text($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#facc15"), opacity = $.prop($$props, "opacity", 3, 1), appearanceActive = $.prop($$props, "appearanceActive", 3, false);
+  const lineColor = $.derived(() => getContrastStrokeColor(color()));
+  var div = root$3();
+  div.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles;
+  var node = $.child(div);
+  {
+    var consequent = ($$anchor2) => {
+      var svg = root_1$1();
+      $.set_style(svg, "", {}, { position: "absolute", inset: "0", "pointer-events": "none" });
+      var path = $.child(svg);
+      var line = $.sibling(path);
+      var line_1 = $.sibling(line);
+      var line_2 = $.sibling(line_1);
+      $.reset(svg);
+      $.template_effect(() => {
+        $.set_attribute(path, "fill", color());
+        $.set_attribute(path, "opacity", opacity());
+        $.set_attribute(path, "stroke", $.get(lineColor));
+        $.set_attribute(line, "stroke", $.get(lineColor));
+        $.set_attribute(line_1, "stroke", $.get(lineColor));
+        $.set_attribute(line_2, "stroke", $.get(lineColor));
+      });
+      $.append($$anchor2, svg);
+    };
+    $.if(node, ($$render) => {
+      if (!appearanceActive()) $$render(consequent);
+    });
+  }
+  $.reset(div);
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    position: "absolute",
+    inset: "0",
+    "z-index": "2",
+    "pointer-events": $$props.isSelected ? "none" : "auto",
+    cursor: $$props.isSelected ? "move" : "pointer"
+  }));
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+function TextRenderer($$anchor, $$props) {
+  $.push($$props, true);
+  {
+    let $0 = $.derived(() => $$props.currentObject.strokeColor ?? $$props.currentObject.color);
+    Text($$anchor, {
+      get isSelected() {
+        return $$props.isSelected;
+      },
+      get color() {
+        return $.get($0);
+      },
+      get opacity() {
+        return $$props.currentObject.opacity;
+      },
+      get onClick() {
+        return $$props.onClick;
+      },
+      get appearanceActive() {
+        return $$props.appearanceActive;
+      }
+    });
+  }
+  $.pop();
+}
 const builtInRenderers = [
   createRenderer({
     id: "ink",
@@ -3159,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",
@@ -3182,6 +3577,18 @@ const builtInRenderers = [
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
+  createRenderer({
+    id: "text",
+    matches: (a) => a.type === PdfAnnotationSubtype.TEXT && !a.inReplyToId,
+    component: TextRenderer,
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: false }
+  }),
+  createRenderer({
+    id: "caret",
+    matches: (a) => a.type === PdfAnnotationSubtype.CARET,
+    component: CaretRenderer,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
   createRenderer({
     id: "freeText",
     matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
@@ -3452,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() {
@@ -3501,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,
@@ -4010,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) => {
@@ -4379,6 +4793,7 @@ export {
   Squiggly,
   Stamp,
   Strikeout,
+  Text,
   TextMarkup,
   Underline,
   createRenderer,