@embedpdf/plugin-annotation 2.7.0 → 2.8.0

package/dist/svelte/index.js

@@ -5,8 +5,9 @@ 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, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/svelte";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/svelte";
 const REGISTRY_KEY = Symbol("AnnotationRendererRegistry");
@@ -94,7 +95,7 @@ const useAnnotation = (getDocumentId) => {
     }
   };
 };
-var root_1$f = $.from_html(`<img alt="" draggable="false"/>`);
+var root_1$h = $.from_html(`<img alt="" draggable="false"/>`);
 function AppearanceImage($$anchor, $$props) {
   $.push($$props, true);
   let imageUrl = $.state(null);
@@ -120,7 +121,7 @@ function AppearanceImage($$anchor, $$props) {
   var node = $.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var img = root_1$f();
+      var img = root_1$h();
       $.template_effect(() => {
         $.set_attribute(img, "src", $.get(imageUrl));
         $.set_style(img, `position: absolute; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; ${$$props.style ?? "" ?? ""}`);
@@ -136,14 +137,14 @@ function AppearanceImage($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_1$e = $.from_html(`<div></div> <div></div> <div></div>`, 1);
+var root_1$g = $.from_html(`<div></div> <div></div> <div></div>`, 1);
 var root_3$5 = $.from_html(`<div style="display: contents;"><!></div>`);
 var root_5$4 = $.from_html(`<div></div>`);
 var root_4$4 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
 var root_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>`);
 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, [
@@ -201,6 +202,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 +284,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 +482,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,7 +502,7 @@ function AnnotationContainer($$anchor, $$props) {
       }
     };
   }
-  var div = root$c();
+  var div = root$e();
   var div_1 = $.child(div);
   $.attribute_effect(div_1, () => ({
     style: $$props.style || "",
@@ -499,16 +512,18 @@ function AnnotationContainer($$anchor, $$props) {
       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 consequent = ($$anchor2) => {
-      var fragment = root_1$e();
+      var fragment = root_1$g();
       var div_2 = $.first_child(fragment);
       let styles;
       var div_3 = $.sibling(div_2, 2);
@@ -878,8 +893,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, {
@@ -939,13 +954,64 @@ function AnnotationContainer($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointermove"]);
+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$8 = $.from_html(`<div></div> <div></div> <div></div>`, 1);
 var root_4$3 = $.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_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$f = $.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 +1114,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,7 +1294,7 @@ function GroupSelectionBox($$anchor, $$props) {
   var node_1 = $.first_child(fragment);
   {
     var consequent_11 = ($$anchor2) => {
-      var div = root_1$d();
+      var div = root_1$f();
       var div_1 = $.child(div);
       let styles;
       var node_2 = $.child(div_1);
@@ -1509,14 +1600,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() {
@@ -1537,8 +1622,8 @@ function GroupSelectionBox($$anchor, $$props) {
       $.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 +1639,9 @@ function GroupSelectionBox($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointermove"]);
-var root_1$c = $.from_svg(`<path fill="none" stroke="transparent"></path>`);
+var root_1$e = $.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 +1660,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$e();
     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 +1719,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,8 +1736,8 @@ 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$d = $.from_svg(`<rect></rect>`);
+var root$c = $.from_svg(`<svg overflow="visible"><rect fill="transparent" stroke="transparent"></rect><!></svg>`);
 function Square($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1680,22 +1761,18 @@ 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 consequent = ($$anchor2) => {
-      var rect_2 = root_1$b();
+      var rect_2 = root_1$d();
       let styles_2;
       $.template_effect(() => {
         $.set_attribute(rect_2, "x", $.get(x));
@@ -1739,7 +1816,7 @@ function Square($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function SquareRenderer($$anchor, $$props) {
   Square($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -1756,8 +1833,8 @@ 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$c = $.from_svg(`<ellipse></ellipse>`);
+var root$b = $.from_svg(`<svg overflow="visible"><ellipse fill="transparent" stroke="transparent"></ellipse><!></svg>`);
 function Circle($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1780,22 +1857,18 @@ function Circle($$anchor, $$props) {
   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 consequent = ($$anchor2) => {
-      var ellipse_1 = root_1$a();
+      var ellipse_1 = root_1$c();
       $.set_style(ellipse_1, "", {}, { "pointer-events": "none" });
       $.template_effect(
         ($0) => {
@@ -1845,7 +1918,7 @@ function Circle($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function CircleRenderer($$anchor, $$props) {
   Circle($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -1862,12 +1935,12 @@ function CircleRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$9 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_1$b = $.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_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 +1964,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$b();
       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 +2005,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);
@@ -2053,7 +2114,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 +2131,16 @@ function LineRenderer($$anchor, $$props) {
     }
   }));
 }
-var root_1$8 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_1$a = $.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_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 +2160,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$a();
       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 +2205,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);
@@ -2188,7 +2241,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);
@@ -2210,7 +2264,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 +2283,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 +2311,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() {
@@ -2274,8 +2330,8 @@ 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_1$9 = $.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;
@@ -2296,22 +2352,18 @@ 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 fragment = root_1$9();
       var path_1 = $.first_child(fragment);
       let styles_2;
       var node_1 = $.sibling(path_1);
@@ -2393,7 +2445,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 +2462,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 +2509,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 +2565,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 +2597,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 +2660,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 +2679,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 +2687,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 +2720,7 @@ function Stamp($$anchor, $$props) {
   $.append($$anchor, div);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function StampRenderer($$anchor, $$props) {
   Stamp($$anchor, {
     get documentId() {
@@ -2699,9 +2743,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 +2763,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 +2772,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 +2833,7 @@ function Link($$anchor, $$props) {
   $.append($$anchor, svg);
   $.pop();
 }
-$.delegate(["pointerdown", "touchstart"]);
+$.delegate(["pointerdown"]);
 function LinkRenderer($$anchor, $$props) {
   $.push($$props, true);
   {
@@ -2815,7 +2855,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 +2863,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 +2907,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 +2916,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 +2981,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 +2990,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 +3056,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 +3071,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 +3137,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",
@@ -3182,6 +3372,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,
@@ -4379,6 +4581,7 @@ export {
   Squiggly,
   Stamp,
   Strikeout,
+  Text,
   TextMarkup,
   Underline,
   createRenderer,