@embedpdf/plugin-annotation 2.13.0 → 2.14.1

package/dist/svelte/index.js

@@ -1,5 +1,5 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { AnnotationPlugin, initialDocumentState, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, LockModeType, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, getAnnotationCategories, hasLockedFlag, isCategoryLocked, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, LockModeType, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, hasNoViewFlag, hasHiddenFlag, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -161,7 +161,7 @@ function AnnotationNavigationHandler($$anchor, $$props) {
   });
   $.pop();
 }
-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);
@@ -187,7 +187,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 ?? "" ?? ""}`);
@@ -203,17 +203,17 @@ function AppearanceImage($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_4$7 = $.from_html(`<div></div> <div></div> <div></div>`, 1);
+var root_4$8 = $.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 = $.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$i = $.from_html(`<div data-no-interaction=""><div><div><!> <!></div></div>  <div><!> <!> <div><!> <!></div></div> <!> <!></div>`);
+var root$j = $.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, [
+  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, ""), structurallyLocked = $.prop($$props, "structurallyLocked", 3, false), contentLocked = $.prop($$props, "contentLocked", 3, false), outlineOffset = $.prop($$props, "outlineOffset", 3, 1), zIndex = $.prop($$props, "zIndex", 3, 1), restProps = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -238,6 +238,8 @@ function AnnotationContainer($$anchor, $$props) {
     "vertexConfig",
     "selectionMenu",
     "selectionMenuSnippet",
+    "structurallyLocked",
+    "contentLocked",
     "outlineOffset",
     "onDoubleClick",
     "onSelect",
@@ -545,7 +547,9 @@ function AnnotationContainer($$anchor, $$props) {
     return {
       type: "annotation",
       annotation: $$props.trackedAnnotation,
-      pageIndex: $$props.pageIndex
+      pageIndex: $$props.pageIndex,
+      structurallyLocked: structurallyLocked(),
+      contentLocked: contentLocked()
     };
   }
   function buildMenuProps(rect, menuWrapperProps) {
@@ -569,7 +573,7 @@ function AnnotationContainer($$anchor, $$props) {
       }
     };
   }
-  var div = root$i();
+  var div = root$j();
   var div_1 = $.child(div);
   let styles;
   var div_2 = $.child(div_1);
@@ -644,7 +648,7 @@ function AnnotationContainer($$anchor, $$props) {
   var node_5 = $.child(div_3);
   {
     var consequent_2 = ($$anchor2) => {
-      var fragment_3 = root_4$7();
+      var fragment_3 = root_4$8();
       var div_4 = $.first_child(fragment_3);
       let styles_2;
       var div_5 = $.sibling(div_4, 2);
@@ -1101,13 +1105,13 @@ function getAnnotationScreenBounds(annotation, scale, rotation) {
     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_2$c = $.from_html(`<div></div> <div></div> <div></div>`, 1);
+var root_4$7 = $.from_html(`<div style="display: contents;"><!></div>`);
 var root_6$1 = $.from_html(`<div></div>`);
-var root_5$5 = $.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 = $.from_html(`<div><div> </div></div>`);
-var root_1$e = $.from_html(`<div data-group-selection-box="" data-no-interaction=""><div><!> <!> <div><!></div></div> <!> <!></div>`);
+var root_1$g = $.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);
@@ -1390,13 +1394,13 @@ function GroupSelectionBox($$anchor, $$props) {
   var node_1 = $.first_child(fragment);
   {
     var consequent_11 = ($$anchor2) => {
-      var div = root_1$e();
+      var div = root_1$g();
       var div_1 = $.child(div);
       let styles;
       var node_2 = $.child(div_1);
       {
         var consequent = ($$anchor3) => {
-          var fragment_1 = root_2$a();
+          var fragment_1 = root_2$c();
           var div_2 = $.first_child(fragment_1);
           let styles_1;
           var div_3 = $.sibling(div_2, 2);
@@ -1450,7 +1454,7 @@ function GroupSelectionBox($$anchor, $$props) {
           var node_4 = $.first_child(fragment_2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_5 = root_4$6();
+              var div_5 = root_4$7();
               div_5.__pointermove = (e) => {
                 if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
               };
@@ -1480,7 +1484,7 @@ function GroupSelectionBox($$anchor, $$props) {
               $.append($$anchor4, div_5);
             };
             var alternate = ($$anchor4) => {
-              var div_6 = root_5$5();
+              var div_6 = root_5$6();
               div_6.__pointermove = (e) => {
                 if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
               };
@@ -1735,7 +1739,7 @@ function GroupSelectionBox($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointermove"]);
-var root$h = $.from_html(`<div role="link" tabindex="-1"></div>`);
+var root$i = $.from_html(`<div role="link" tabindex="-1"></div>`);
 function LinkLockedMode($$anchor, $$props) {
   $.push($$props, true);
   const { provides } = useAnnotationCapability();
@@ -1744,7 +1748,7 @@ function LinkLockedMode($$anchor, $$props) {
     if (!target || !provides) return;
     provides.forDocument($$props.documentId).navigateTarget(target);
   }
-  var div = root$h();
+  var div = root$i();
   div.__click = handleClick;
   div.__keydown = (e) => {
     if (e.key === "Enter") handleClick();
@@ -1759,10 +1763,10 @@ function LinkLockedMode($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["click", "keydown"]);
-var root$g = $.from_html(`<div></div>`);
+var root$h = $.from_html(`<div></div>`);
 function LinkPreview($$anchor, $$props) {
   $.push($$props, true);
-  var div = root$g();
+  var div = root$h();
   let styles;
   $.template_effect(() => styles = $.set_style(div, "", styles, {
     position: "absolute",
@@ -1777,9 +1781,9 @@ function LinkPreview($$anchor, $$props) {
   $.append($$anchor, div);
   $.pop();
 }
-var root_1$d = $.from_svg(`<path fill="none" stroke="transparent"></path>`);
-var root_3$3 = $.from_svg(`<path fill="none"></path>`);
-var root$f = $.from_svg(`<svg><!><!></svg>`);
+var root_1$f = $.from_svg(`<path fill="none" stroke="transparent"></path>`);
+var root_3$5 = $.from_svg(`<path fill="none"></path>`);
+var root$g = $.from_svg(`<svg><!><!></svg>`);
 function Ink($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1798,11 +1802,11 @@ 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$f();
+  var svg = root$g();
   let styles;
   var node = $.child(svg);
   $.each(node, 19, () => $.get(paths), (d, i) => `hit-${i}`, ($$anchor2, d) => {
-    var path = root_1$d();
+    var path = root_1$f();
     path.__pointerdown = function(...$$args) {
       var _a;
       (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1826,7 +1830,7 @@ function Ink($$anchor, $$props) {
       var fragment = $.comment();
       var node_2 = $.first_child(fragment);
       $.each(node_2, 19, () => $.get(paths), (d, i) => `vis-${i}`, ($$anchor3, d) => {
-        var path_1 = root_3$3();
+        var path_1 = root_3$5();
         let styles_2;
         $.template_effect(() => {
           $.set_attribute(path_1, "d", $.get(d));
@@ -1869,11 +1873,11 @@ function InkPreview($$anchor, $$props) {
     () => $$props.data
   ));
 }
-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$4 = $.from_svg(`<rect></rect>`);
-var root$e = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
+var root_1$e = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_2$b = $.from_svg(`<rect fill="transparent" stroke="transparent"></rect>`);
+var root_4$6 = $.from_svg(`<path stroke-linejoin="round"></path>`);
+var root_5$5 = $.from_svg(`<rect></rect>`);
+var root$f = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
 function Square($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1912,12 +1916,12 @@ function Square($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$e();
+  var svg = root$f();
   let styles;
   var node = $.child(svg);
   {
     var consequent = ($$anchor2) => {
-      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);
@@ -1934,7 +1938,7 @@ function Square($$anchor, $$props) {
       $.append($$anchor2, path);
     };
     var alternate = ($$anchor2) => {
-      var rect_1 = root_2$9();
+      var rect_1 = root_2$b();
       rect_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1965,7 +1969,7 @@ function Square($$anchor, $$props) {
       var node_2 = $.first_child(fragment);
       {
         var consequent_1 = ($$anchor3) => {
-          var path_1 = root_4$5();
+          var path_1 = root_4$6();
           let styles_3;
           $.template_effect(() => {
             $.set_attribute(path_1, "d", $.get(cloudyPath).path);
@@ -1980,7 +1984,7 @@ function Square($$anchor, $$props) {
           $.append($$anchor3, path_1);
         };
         var alternate_1 = ($$anchor3) => {
-          var rect_2 = root_5$4();
+          var rect_2 = root_5$5();
           let styles_4;
           $.template_effect(() => {
             $.set_attribute(rect_2, "x", $.get(x));
@@ -2034,11 +2038,11 @@ function SquarePreview($$anchor, $$props) {
     () => $$props.data
   ));
 }
-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$3 = $.from_svg(`<ellipse></ellipse>`);
-var root$d = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
+var root_1$d = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_2$a = $.from_svg(`<ellipse fill="transparent" stroke="transparent"></ellipse>`);
+var root_4$5 = $.from_svg(`<path stroke-linejoin="round"></path>`);
+var root_5$4 = $.from_svg(`<ellipse></ellipse>`);
+var root$e = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
 function Circle($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2076,12 +2080,12 @@ 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.onClick ? "none" : $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible");
-  var svg = root$d();
+  var svg = root$e();
   let styles;
   var node = $.child(svg);
   {
     var consequent = ($$anchor2) => {
-      var path = root_1$b();
+      var path = root_1$d();
       path.__pointerdown = (e) => {
         var _a;
         return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
@@ -2098,7 +2102,7 @@ function Circle($$anchor, $$props) {
       $.append($$anchor2, path);
     };
     var alternate = ($$anchor2) => {
-      var ellipse = root_2$8();
+      var ellipse = root_2$a();
       ellipse.__pointerdown = (e) => {
         var _a;
         return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
@@ -2129,7 +2133,7 @@ function Circle($$anchor, $$props) {
       var node_2 = $.first_child(fragment);
       {
         var consequent_1 = ($$anchor3) => {
-          var path_1 = root_4$4();
+          var path_1 = root_4$5();
           $.set_style(path_1, "", {}, { "pointer-events": "none" });
           $.template_effect(() => {
             $.set_attribute(path_1, "d", $.get(cloudyPath).path);
@@ -2141,7 +2145,7 @@ function Circle($$anchor, $$props) {
           $.append($$anchor3, path_1);
         };
         var alternate_1 = ($$anchor3) => {
-          var ellipse_1 = root_5$3();
+          var ellipse_1 = root_5$4();
           $.set_style(ellipse_1, "", {}, { "pointer-events": "none" });
           $.template_effect(
             ($0) => {
@@ -2203,12 +2207,12 @@ function CirclePreview($$anchor, $$props) {
     () => $$props.data
   ));
 }
-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$3 = $.from_svg(`<path></path>`);
-var root_5$2 = $.from_svg(`<path></path>`);
-var root_3$2 = $.from_svg(`<line></line><!><!>`, 1);
-var root$c = $.from_svg(`<svg><line stroke="transparent"></line><!><!><!></svg>`);
+var root_1$c = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_2$9 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_4$4 = $.from_svg(`<path></path>`);
+var root_5$3 = $.from_svg(`<path></path>`);
+var root_3$4 = $.from_svg(`<line></line><!><!>`, 1);
+var root$d = $.from_svg(`<svg><line stroke="transparent"></line><!><!><!></svg>`);
 function Line($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2232,7 +2236,7 @@ function Line($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$c();
+  var svg = root$d();
   let styles;
   var line = $.child(svg);
   line.__pointerdown = function(...$$args) {
@@ -2243,7 +2247,7 @@ function Line($$anchor, $$props) {
   var node = $.sibling(line);
   {
     var consequent = ($$anchor2) => {
-      var path = root_1$a();
+      var path = root_1$c();
       path.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -2268,7 +2272,7 @@ function Line($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var path_1 = root_2$7();
+      var path_1 = root_2$9();
       path_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -2293,13 +2297,13 @@ function Line($$anchor, $$props) {
   var node_2 = $.sibling(node_1);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment = root_3$2();
+      var fragment = root_3$4();
       var line_1 = $.first_child(fragment);
       let styles_4;
       var node_3 = $.sibling(line_1);
       {
         var consequent_2 = ($$anchor3) => {
-          var path_2 = root_4$3();
+          var path_2 = root_4$4();
           let styles_5;
           $.template_effect(() => {
             $.set_attribute(path_2, "d", $.get(endings).start.d);
@@ -2322,7 +2326,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);
@@ -2394,12 +2398,12 @@ function LinePreview($$anchor, $$props) {
     () => $$props.data
   ));
 }
-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$2 = $.from_svg(`<path></path>`);
-var root_5$1 = $.from_svg(`<path></path>`);
-var root_3$1 = $.from_svg(`<path></path><!><!>`, 1);
-var root$b = $.from_svg(`<svg><path fill="none" stroke="transparent"></path><!><!><!></svg>`);
+var root_1$b = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_2$8 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_4$3 = $.from_svg(`<path></path>`);
+var root_5$2 = $.from_svg(`<path></path>`);
+var root_3$3 = $.from_svg(`<path></path><!><!>`, 1);
+var root$c = $.from_svg(`<svg><path fill="none" stroke="transparent"></path><!><!><!></svg>`);
 function Polyline($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2427,7 +2431,7 @@ function Polyline($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$b();
+  var svg = root$c();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
@@ -2438,7 +2442,7 @@ function Polyline($$anchor, $$props) {
   var node = $.sibling(path);
   {
     var consequent = ($$anchor2) => {
-      var path_1 = root_1$9();
+      var path_1 = root_1$b();
       path_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -2463,7 +2467,7 @@ function Polyline($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var path_2 = root_2$6();
+      var path_2 = root_2$8();
       path_2.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -2488,13 +2492,13 @@ function Polyline($$anchor, $$props) {
   var node_2 = $.sibling(node_1);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment = root_3$1();
+      var fragment = root_3$3();
       var path_3 = $.first_child(fragment);
       let styles_4;
       var node_3 = $.sibling(path_3);
       {
         var consequent_2 = ($$anchor3) => {
-          var path_4 = root_4$2();
+          var path_4 = root_4$3();
           let styles_5;
           $.template_effect(() => {
             $.set_attribute(path_4, "d", $.get(endings).start.d);
@@ -2517,7 +2521,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);
@@ -2586,11 +2590,11 @@ function PolylinePreview($$anchor, $$props) {
     () => $$props.data
   ));
 }
-var root_2$5 = $.from_svg(`<path></path>`);
-var root_4$1 = $.from_svg(`<path fill="none"></path>`);
-var root_5 = $.from_svg(`<rect></rect>`);
-var root_3 = $.from_svg(`<path></path><!><!>`, 1);
-var root$a = $.from_svg(`<svg><path fill="transparent" stroke="transparent"></path><!></svg>`);
+var root_2$7 = $.from_svg(`<path></path>`);
+var root_4$2 = $.from_svg(`<path fill="none"></path>`);
+var root_5$1 = $.from_svg(`<rect></rect>`);
+var root_3$2 = $.from_svg(`<path></path><!><!>`, 1);
+var root$b = $.from_svg(`<svg><path fill="transparent" stroke="transparent"></path><!></svg>`);
 function Polygon($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2616,7 +2620,7 @@ function Polygon($$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$b();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
@@ -2631,7 +2635,7 @@ function Polygon($$anchor, $$props) {
       var node_1 = $.first_child(fragment);
       {
         var consequent = ($$anchor3) => {
-          var path_1 = root_2$5();
+          var path_1 = root_2$7();
           let styles_2;
           $.template_effect(() => {
             $.set_attribute(path_1, "d", $.get(cloudyPath).path);
@@ -2647,13 +2651,13 @@ function Polygon($$anchor, $$props) {
           $.append($$anchor3, path_1);
         };
         var alternate = ($$anchor3) => {
-          var fragment_1 = root_3();
+          var fragment_1 = root_3$2();
           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();
+              var path_3 = root_4$2();
               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}`);
@@ -2674,7 +2678,7 @@ function Polygon($$anchor, $$props) {
           var node_3 = $.sibling(node_2);
           {
             var consequent_2 = ($$anchor4) => {
-              var rect_1 = root_5();
+              var rect_1 = root_5$1();
               $.set_attribute(rect_1, "opacity", 0.4);
               $.set_style(rect_1, "", {}, { "pointer-events": "none" });
               $.template_effect(() => {
@@ -2748,10 +2752,10 @@ function PolygonPreview($$anchor, $$props) {
     () => $$props.data
   ));
 }
-var root$9 = $.from_html(`<div></div>`);
+var root$a = $.from_html(`<div></div>`);
 function FreeTextPreview($$anchor, $$props) {
   $.push($$props, true);
-  var div = root$9();
+  var div = root$a();
   let styles;
   $.template_effect(() => styles = $.set_style(div, "", styles, {
     width: "100%",
@@ -2762,11 +2766,108 @@ function FreeTextPreview($$anchor, $$props) {
   $.append($$anchor, div);
   $.pop();
 }
-var root$8 = $.from_html(`<img alt=""/>`);
+var root_2$6 = $.from_svg(`<path></path>`);
+var root_3$1 = $.from_svg(`<rect></rect>`);
+var root_1$a = $.from_svg(`<svg><polyline fill="none"></polyline><!><!></svg>`);
+function CalloutFreeTextPreview($$anchor, $$props) {
+  $.push($$props, true);
+  const cl = $.derived(() => $$props.data.calloutLine);
+  const sw = $.derived(() => $$props.data.strokeWidth ?? 1);
+  const sc = $.derived(() => $$props.data.strokeColor ?? "#000000");
+  const op = $.derived(() => $$props.data.opacity ?? 1);
+  const w = $.derived(() => $$props.bounds.size.width);
+  const h = $.derived(() => $$props.bounds.size.height);
+  const ox = $.derived(() => $$props.bounds.origin.x);
+  const oy = $.derived(() => $$props.bounds.origin.y);
+  const lineCoords = $.derived(() => {
+    if (!$.get(cl) || $.get(cl).length < 2) return null;
+    return $.get(cl).map((p) => ({ x: p.x - $.get(ox), y: p.y - $.get(oy) }));
+  });
+  const ending = $.derived(() => {
+    if (!$.get(lineCoords) || $.get(lineCoords).length < 2) return null;
+    const angle = Math.atan2($.get(lineCoords)[1].y - $.get(lineCoords)[0].y, $.get(lineCoords)[1].x - $.get(lineCoords)[0].x);
+    return patching.createEnding($$props.data.lineEnding, $.get(sw), angle + Math.PI, $.get(lineCoords)[0].x, $.get(lineCoords)[0].y);
+  });
+  const halfSw = $.derived(() => $.get(sw) / 2);
+  const tb = $.derived(() => $$props.data.textBox);
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var svg = root_1$a();
+      let styles;
+      var polyline = $.child(svg);
+      var node_1 = $.sibling(polyline);
+      {
+        var consequent = ($$anchor3) => {
+          var path = root_2$6();
+          $.template_effect(() => {
+            $.set_attribute(path, "d", $.get(ending).d);
+            $.set_attribute(path, "transform", $.get(ending).transform);
+            $.set_attribute(path, "stroke", $.get(sc));
+            $.set_attribute(path, "fill", $.get(ending).filled ? $$props.data.color ?? "transparent" : "none");
+            $.set_attribute(path, "stroke-width", $.get(sw));
+            $.set_attribute(path, "opacity", $.get(op));
+          });
+          $.append($$anchor3, path);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(ending)) $$render(consequent);
+        });
+      }
+      var node_2 = $.sibling(node_1);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var rect = root_3$1();
+          $.template_effect(() => {
+            $.set_attribute(rect, "x", $.get(tb).origin.x - $.get(ox) + $.get(halfSw));
+            $.set_attribute(rect, "y", $.get(tb).origin.y - $.get(oy) + $.get(halfSw));
+            $.set_attribute(rect, "width", $.get(tb).size.width - $.get(sw));
+            $.set_attribute(rect, "height", $.get(tb).size.height - $.get(sw));
+            $.set_attribute(rect, "fill", $$props.data.color ?? $$props.data.backgroundColor ?? "transparent");
+            $.set_attribute(rect, "stroke", $.get(sc));
+            $.set_attribute(rect, "stroke-width", $.get(sw));
+            $.set_attribute(rect, "opacity", $.get(op));
+          });
+          $.append($$anchor3, rect);
+        };
+        $.if(node_2, ($$render) => {
+          if ($.get(tb)) $$render(consequent_1);
+        });
+      }
+      $.reset(svg);
+      $.template_effect(
+        ($0) => {
+          styles = $.set_style(svg, "position: absolute; pointer-events: none; overflow: visible;", styles, {
+            width: `${$.get(w) * $$props.scale}px`,
+            height: `${$.get(h) * $$props.scale}px`
+          });
+          $.set_attribute(svg, "width", $.get(w) * $$props.scale);
+          $.set_attribute(svg, "height", $.get(h) * $$props.scale);
+          $.set_attribute(svg, "viewBox", `0 0 ${$.get(w)} ${$.get(h)}`);
+          $.set_attribute(polyline, "points", $0);
+          $.set_attribute(polyline, "stroke", $.get(sc));
+          $.set_attribute(polyline, "stroke-width", $.get(sw));
+          $.set_attribute(polyline, "opacity", $.get(op));
+        },
+        [
+          () => $.get(lineCoords).map((p) => `${p.x},${p.y}`).join(" ")
+        ]
+      );
+      $.append($$anchor2, svg);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(lineCoords)) $$render(consequent_2);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root$9 = $.from_html(`<img alt=""/>`);
 function StampPreview($$anchor, $$props) {
   $.push($$props, true);
   const rotationDeg = $.derived(() => (4 - $$props.data.pageRotation) % 4 * 90);
-  var img = root$8();
+  var img = root$9();
   let styles;
   $.template_effect(() => {
     $.set_attribute(img, "src", $$props.data.ghostUrl);
@@ -2878,7 +2979,7 @@ function PolygonRenderer($$anchor, $$props) {
     }
   }));
 }
-var root$7 = $.from_html(`<div role="button"><span role="textbox" tabindex="0"> </span></div>`);
+var root$8 = $.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);
@@ -2915,7 +3016,7 @@ 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$7();
+  var div = root$8();
   $.set_attribute(div, "tabindex", -1);
   div.__pointerdown = function(...$$args) {
     var _a;
@@ -3003,6 +3104,309 @@ function FreeTextRenderer($$anchor, $$props) {
     });
   }
 }
+var root_2$5 = $.from_svg(`<path fill="transparent" stroke="transparent"></path>`);
+var root_1$9 = $.from_svg(`<polyline fill="none" stroke="transparent"></polyline><!>`, 1);
+var root_5 = $.from_svg(`<path></path>`);
+var root_4$1 = $.from_svg(`<polyline fill="none"></polyline><!>`, 1);
+var root_3 = $.from_svg(`<!><rect></rect>`, 1);
+var root$7 = $.from_html(`<div><svg><!><!></svg> <div></div> <span role="textbox" tabindex="0"> </span></div>`);
+function CalloutFreeText($$anchor, $$props) {
+  $.push($$props, true);
+  const MIN_HIT_AREA_SCREEN_PX = 20;
+  let appearanceActive = $.prop($$props, "appearanceActive", 3, false);
+  const annotationCapability = useAnnotationCapability();
+  const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
+  let editorRef = null;
+  let editingRef = false;
+  const obj = $.derived(() => $$props.annotation.object);
+  const rect = $.derived(() => $.get(obj).rect);
+  const strokeWidth = $.derived(() => $.get(obj).strokeWidth ?? 1);
+  const strokeColor = $.derived(() => $.get(obj).strokeColor ?? "#000000");
+  const textBox = $.derived(() => patching.computeTextBoxFromRD($.get(rect), $.get(obj).rectangleDifferences));
+  const textBoxRelative = $.derived(() => ({
+    left: ($.get(textBox).origin.x - $.get(rect).origin.x + $.get(strokeWidth) / 2) * $$props.scale,
+    top: ($.get(textBox).origin.y - $.get(rect).origin.y + $.get(strokeWidth) / 2) * $$props.scale,
+    width: ($.get(textBox).size.width - $.get(strokeWidth)) * $$props.scale,
+    height: ($.get(textBox).size.height - $.get(strokeWidth)) * $$props.scale
+  }));
+  const lineCoords = $.derived(() => {
+    const cl = $.get(obj).calloutLine;
+    if (!cl || cl.length < 3) return null;
+    return cl.map((p) => ({ x: p.x - $.get(rect).origin.x, y: p.y - $.get(rect).origin.y }));
+  });
+  const ending = $.derived(() => {
+    if (!$.get(lineCoords) || $.get(lineCoords).length < 2) return null;
+    const angle = Math.atan2($.get(lineCoords)[1].y - $.get(lineCoords)[0].y, $.get(lineCoords)[1].x - $.get(lineCoords)[0].x);
+    return patching.createEnding($.get(obj).lineEnding, $.get(strokeWidth), angle + Math.PI, $.get(lineCoords)[0].x, $.get(lineCoords)[0].y);
+  });
+  const visualLineCoords = $.derived(() => {
+    if (!$.get(lineCoords) || $.get(lineCoords).length < 2) return $.get(lineCoords);
+    const pts = $.get(lineCoords).map((p) => ({ ...p }));
+    const last = pts.length - 1;
+    const prev = last - 1;
+    const dx = pts[last].x - pts[prev].x;
+    const dy = pts[last].y - pts[prev].y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len > 0) {
+      const halfBw = $.get(strokeWidth) / 2;
+      pts[last].x += dx / len * halfBw;
+      pts[last].y += dy / len * halfBw;
+    }
+    return pts;
+  });
+  const ios = useIOSZoomPrevention(() => $.get(obj).fontSize * $$props.scale, () => $$props.isEditing);
+  const width = $.derived(() => $.get(rect).size.width * $$props.scale);
+  const height = $.derived(() => $.get(rect).size.height * $$props.scale);
+  const hitStrokeWidth = $.derived(() => Math.max($.get(strokeWidth), MIN_HIT_AREA_SCREEN_PX / $$props.scale));
+  const fontCss = $.derived(() => standardFontCssProperties($.get(obj).fontFamily));
+  const justify = $.derived(() => $.get(obj).verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : $.get(obj).verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end");
+  $.user_effect(() => {
+    var _a, _b, _c;
+    if (!$$props.isEditing || !editorRef) return;
+    editingRef = true;
+    editorRef.focus();
+    const tool = (_a = $.get(annotationProvides)) == null ? void 0 : _a.findToolForAnnotation($.get(obj));
+    const isDefaultContent = ((_b = tool == null ? void 0 : tool.defaults) == null ? void 0 : _b.contents) != null && $.get(obj).contents === tool.defaults.contents;
+    const selection = (_c = window.getSelection) == null ? void 0 : _c.call(window);
+    if (!selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(editorRef);
+    if (!isDefaultContent) {
+      range.collapse(false);
+    }
+    selection.removeAllRanges();
+    selection.addRange(range);
+  });
+  function handleBlur() {
+    if (!editingRef) return;
+    editingRef = false;
+    if (!$.get(annotationProvides) || !editorRef) return;
+    $.get(annotationProvides).updateAnnotation($$props.pageIndex, $.get(obj).id, { contents: editorRef.innerText.replace(/\u00A0/g, " ") });
+  }
+  var div = root$7();
+  let styles;
+  var svg = $.child(div);
+  let styles_1;
+  var node = $.child(svg);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var fragment = root_1$9();
+      var polyline = $.first_child(fragment);
+      polyline.__pointerdown = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick ? (e) => $$props.onClick(e) : void 0) == null ? void 0 : _a.apply(this, $$args);
+      };
+      let styles_2;
+      var node_1 = $.sibling(polyline);
+      {
+        var consequent = ($$anchor3) => {
+          var path = root_2$5();
+          path.__pointerdown = function(...$$args) {
+            var _a;
+            (_a = $$props.onClick ? (e) => $$props.onClick(e) : void 0) == null ? void 0 : _a.apply(this, $$args);
+          };
+          let styles_3;
+          $.template_effect(() => {
+            $.set_attribute(path, "d", $.get(ending).d);
+            $.set_attribute(path, "transform", $.get(ending).transform);
+            $.set_attribute(path, "stroke-width", $.get(hitStrokeWidth));
+            styles_3 = $.set_style(path, "", styles_3, {
+              cursor: $$props.isSelected ? "move" : $$props.onClick ? "pointer" : "default",
+              "pointer-events": !$$props.onClick ? "none" : $$props.isSelected ? "none" : $.get(ending).filled ? "visible" : "visibleStroke"
+            });
+          });
+          $.append($$anchor3, path);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(ending)) $$render(consequent);
+        });
+      }
+      $.template_effect(
+        ($0) => {
+          $.set_attribute(polyline, "points", $0);
+          $.set_attribute(polyline, "stroke-width", $.get(hitStrokeWidth));
+          styles_2 = $.set_style(polyline, "", styles_2, {
+            cursor: $$props.isSelected ? "move" : $$props.onClick ? "pointer" : "default",
+            "pointer-events": !$$props.onClick ? "none" : $$props.isSelected ? "none" : "visibleStroke"
+          });
+        },
+        [
+          () => $.get(lineCoords).map((p) => `${p.x},${p.y}`).join(" ")
+        ]
+      );
+      $.append($$anchor2, fragment);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(lineCoords)) $$render(consequent_1);
+    });
+  }
+  var node_2 = $.sibling(node);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var fragment_1 = root_3();
+      var node_3 = $.first_child(fragment_1);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var fragment_2 = root_4$1();
+          var polyline_1 = $.first_child(fragment_2);
+          $.set_style(polyline_1, "", {}, { "pointer-events": "none" });
+          var node_4 = $.sibling(polyline_1);
+          {
+            var consequent_2 = ($$anchor4) => {
+              var path_1 = root_5();
+              $.set_style(path_1, "", {}, { "pointer-events": "none" });
+              $.template_effect(() => {
+                $.set_attribute(path_1, "d", $.get(ending).d);
+                $.set_attribute(path_1, "transform", $.get(ending).transform);
+                $.set_attribute(path_1, "stroke", $.get(strokeColor));
+                $.set_attribute(path_1, "fill", $.get(ending).filled ? $.get(obj).color ?? "transparent" : "none");
+                $.set_attribute(path_1, "stroke-width", $.get(strokeWidth));
+                $.set_attribute(path_1, "opacity", $.get(obj).opacity);
+              });
+              $.append($$anchor4, path_1);
+            };
+            $.if(node_4, ($$render) => {
+              if ($.get(ending)) $$render(consequent_2);
+            });
+          }
+          $.template_effect(
+            ($0) => {
+              $.set_attribute(polyline_1, "points", $0);
+              $.set_attribute(polyline_1, "stroke", $.get(strokeColor));
+              $.set_attribute(polyline_1, "stroke-width", $.get(strokeWidth));
+              $.set_attribute(polyline_1, "opacity", $.get(obj).opacity);
+            },
+            [
+              () => $.get(visualLineCoords).map((p) => `${p.x},${p.y}`).join(" ")
+            ]
+          );
+          $.append($$anchor3, fragment_2);
+        };
+        $.if(node_3, ($$render) => {
+          if ($.get(visualLineCoords)) $$render(consequent_3);
+        });
+      }
+      var rect_1 = $.sibling(node_3);
+      $.set_style(rect_1, "", {}, { "pointer-events": "none" });
+      $.template_effect(() => {
+        $.set_attribute(rect_1, "x", $.get(textBox).origin.x - $.get(rect).origin.x + $.get(strokeWidth) / 2);
+        $.set_attribute(rect_1, "y", $.get(textBox).origin.y - $.get(rect).origin.y + $.get(strokeWidth) / 2);
+        $.set_attribute(rect_1, "width", $.get(textBox).size.width - $.get(strokeWidth));
+        $.set_attribute(rect_1, "height", $.get(textBox).size.height - $.get(strokeWidth));
+        $.set_attribute(rect_1, "fill", $.get(obj).color ?? $.get(obj).backgroundColor ?? "transparent");
+        $.set_attribute(rect_1, "stroke", $.get(strokeColor));
+        $.set_attribute(rect_1, "stroke-width", $.get(strokeWidth));
+        $.set_attribute(rect_1, "opacity", $.get(obj).opacity);
+      });
+      $.append($$anchor2, fragment_1);
+    };
+    $.if(node_2, ($$render) => {
+      if (!appearanceActive()) $$render(consequent_4);
+    });
+  }
+  $.reset(svg);
+  var div_1 = $.sibling(svg, 2);
+  div_1.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick ? (e) => $$props.onClick(e) : void 0) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles_4;
+  var span = $.sibling(div_1, 2);
+  let styles_5;
+  var text = $.child(span, true);
+  $.reset(span);
+  $.bind_this(span, ($$value) => editorRef = $$value, () => editorRef);
+  $.reset(div);
+  $.template_effect(
+    ($0) => {
+      styles = $.set_style(div, "", styles, {
+        position: "absolute",
+        width: `${$.get(width)}px`,
+        height: `${$.get(height)}px`,
+        cursor: $$props.isSelected && !$$props.isEditing ? "move" : "default",
+        "pointer-events": "none",
+        "z-index": 2,
+        opacity: appearanceActive() ? 0 : 1
+      });
+      styles_1 = $.set_style(svg, "position: absolute; pointer-events: none; overflow: visible;", styles_1, { width: `${$.get(width)}px`, height: `${$.get(height)}px` });
+      $.set_attribute(svg, "width", $.get(width));
+      $.set_attribute(svg, "height", $.get(height));
+      $.set_attribute(svg, "viewBox", `0 0 ${$.get(rect).size.width} ${$.get(rect).size.height}`);
+      styles_4 = $.set_style(div_1, "", styles_4, {
+        position: "absolute",
+        left: `${($.get(textBox).origin.x - $.get(rect).origin.x) * $$props.scale}px`,
+        top: `${($.get(textBox).origin.y - $.get(rect).origin.y) * $$props.scale}px`,
+        width: `${$.get(textBox).size.width * $$props.scale}px`,
+        height: `${$.get(textBox).size.height * $$props.scale}px`,
+        cursor: $$props.isSelected && !$$props.isEditing ? "move" : $$props.onClick ? "pointer" : "default",
+        "pointer-events": !$$props.onClick ? "none" : $$props.isSelected && !$$props.isEditing ? "none" : "auto"
+      });
+      $.set_attribute(span, "contenteditable", $$props.isEditing);
+      styles_5 = $.set_style(span, "", styles_5, $0);
+      $.set_text(text, $.get(obj).contents);
+    },
+    [
+      () => ({
+        position: "absolute",
+        left: `${$.get(textBoxRelative).left}px`,
+        top: `${$.get(textBoxRelative).top}px`,
+        width: `${$.get(textBoxRelative).width}px`,
+        height: `${$.get(textBoxRelative).height}px`,
+        color: $.get(obj).fontColor,
+        "font-size": `${ios.adjustedFontPx}px`,
+        "font-family": $.get(fontCss).fontFamily,
+        "font-weight": $.get(fontCss).fontWeight,
+        "font-style": $.get(fontCss).fontStyle,
+        "text-align": textAlignmentToCss($.get(obj).textAlign),
+        "flex-direction": "column",
+        "justify-content": $.get(justify),
+        display: "flex",
+        padding: `${$.get(strokeWidth) * $$props.scale / 2 + 2 * $$props.scale}px`,
+        opacity: $.get(obj).opacity,
+        "line-height": "1.18",
+        overflow: "hidden",
+        cursor: $$props.isEditing ? "text" : "default",
+        outline: "none",
+        "pointer-events": $$props.isEditing ? "auto" : "none"
+      })
+    ]
+  );
+  $.event("blur", span, handleBlur);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown"]);
+function CalloutFreeTextRenderer($$anchor, $$props) {
+  {
+    let $0 = $.derived(() => ({ ...$$props.annotation, object: $$props.currentObject }));
+    CalloutFreeText($$anchor, {
+      get documentId() {
+        return $$props.documentId;
+      },
+      get isSelected() {
+        return $$props.isSelected;
+      },
+      get isEditing() {
+        return $$props.isEditing;
+      },
+      get annotation() {
+        return $.get($0);
+      },
+      get pageIndex() {
+        return $$props.pageIndex;
+      },
+      get scale() {
+        return $$props.scale;
+      },
+      get onClick() {
+        return $$props.onClick;
+      },
+      get appearanceActive() {
+        return $$props.appearanceActive;
+      }
+    });
+  }
+}
 var root_1$8 = $.from_html(`<img/>`);
 function RenderAnnotation($$anchor, $$props) {
   $.push($$props, true);
@@ -3805,10 +4209,21 @@ const builtInRenderers = [
     component: CaretRenderer,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
+  createRenderer({
+    id: "freeTextCallout",
+    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT && a.intent === "FreeTextCallout",
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT && !!p.data.calloutLine,
+    component: CalloutFreeTextRenderer,
+    renderPreview: CalloutFreeTextPreview,
+    vertexConfig: patching.calloutVertexConfig,
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: false },
+    isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
+    onDoubleClick: (id, setEditingId) => setEditingId(id)
+  }),
   createRenderer({
     id: "freeText",
-    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
-    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT,
+    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT && a.intent !== "FreeTextCallout",
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT && !p.data.calloutLine,
     component: FreeTextRenderer,
     renderPreview: FreeTextPreview,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true },
@@ -4010,21 +4425,22 @@ function Annotations($$anchor, $$props) {
           var _a;
           return ((_a = $.get(annotationProvides)) == null ? void 0 : _a.findToolForAnnotation($.get(annotation).object)) ?? null;
         });
-        const categories = $.derived(() => getAnnotationCategories($.get(tool)));
-        const locked = $.derived(() => hasLockedFlag($.get(annotation).object) || isCategoryLocked($.get(categories), $.get(lockedMode)));
+        const nonInteractive = $.derived(() => $.get(annotationProvides) ? !$.get(annotationProvides).isAnnotationInteractive($.get(annotation).object) : false);
+        const structurallyLocked = $.derived(() => $.get(annotationProvides) ? $.get(annotationProvides).isAnnotationStructurallyLocked($.get(annotation).object) : false);
+        const contentLocked = $.derived(() => $.get(annotationProvides) ? $.get(annotationProvides).isAnnotationContentLocked($.get(annotation).object) : false);
         var fragment_2 = $.comment();
         var node_2 = $.first_child(fragment_2);
         {
           var consequent = ($$anchor4) => {
-            const hasRenderLocked = $.derived(() => $.get(locked) && !!$.get(renderer).renderLocked);
-            const isSelected = $.derived(() => $.get(locked) ? false : $.get(allSelectedIds).includes($.get(annotation).object.id));
-            const isEditing = $.derived(() => $.get(locked) ? false : $.get(editingId) === $.get(annotation).object.id);
+            const hasRenderLocked = $.derived(() => $.get(nonInteractive) && !!$.get(renderer).renderLocked);
+            const isSelected = $.derived(() => $.get(nonInteractive) ? false : $.get(allSelectedIds).includes($.get(annotation).object.id));
+            const isEditing = $.derived(() => $.get(nonInteractive) ? false : $.get(editingId) === $.get(annotation).object.id);
             const defaults = $.derived(() => $.get(renderer).interactionDefaults);
             const resolvedDraggable = $.derived(() => {
               var _a, _b;
               return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, ((_b = $.get(defaults)) == null ? void 0 : _b.isDraggable) ?? true);
             });
-            const finalDraggable = $.derived(() => $.get(locked) ? false : $.get(renderer).isDraggable ? $.get(renderer).isDraggable($.get(resolvedDraggable), { isEditing: $.get(isEditing) }) : $.get(resolvedDraggable));
+            const finalDraggable = $.derived(() => $.get(structurallyLocked) ? false : $.get(renderer).isDraggable ? $.get(renderer).isDraggable($.get(resolvedDraggable), { isEditing: $.get(isEditing) }) : $.get(resolvedDraggable));
             const useAP = $.derived(() => {
               var _a, _b;
               return ((_b = (_a = $.get(tool)) == null ? void 0 : _a.behavior) == null ? void 0 : _b.useAppearanceStream) ?? $.get(renderer).useAppearanceStream ?? true;
@@ -4046,7 +4462,7 @@ function Annotations($$anchor, $$props) {
             const noopSelect = $.derived(() => (e) => {
               e.stopPropagation();
             });
-            const onSelect = $.derived(() => $.get(locked) ? $.get(noopSelect) : $.get(renderer).selectOverride ? (e) => $.get(renderer).selectOverride(e, $.get(annotation), $.get(selectHelpers)) : (e) => handleClick(e, $.get(annotation)));
+            const onSelect = $.derived(() => $.get(nonInteractive) ? $.get(noopSelect) : $.get(renderer).selectOverride ? (e) => $.get(renderer).selectOverride(e, $.get(annotation), $.get(selectHelpers)) : (e) => handleClick(e, $.get(annotation)));
             const RendererComponent = $.derived(() => $.get(hasRenderLocked) ? $.get(renderer).renderLocked : $.get(renderer).component);
             {
               const children = ($$anchor5, currentObject = $.noop, $$arg1) => {
@@ -4054,7 +4470,7 @@ function Annotations($$anchor, $$props) {
                 var fragment_4 = $.comment();
                 var node_3 = $.first_child(fragment_4);
                 {
-                  let $02 = $.derived(() => $.get(locked) ? void 0 : $.get(onSelect));
+                  let $02 = $.derived(() => $.get(nonInteractive) ? void 0 : $.get(onSelect));
                   $.component(node_3, () => $.get(RendererComponent), ($$anchor6, RendererComponent_1) => {
                     RendererComponent_1($$anchor6, {
                       get annotation() {
@@ -4089,10 +4505,10 @@ function Annotations($$anchor, $$props) {
                 }
                 $.append($$anchor5, fragment_4);
               };
-              let $0 = $.derived(() => $.get(locked) ? false : $.get(isMultiSelected));
+              let $0 = $.derived(() => $.get(nonInteractive) ? false : $.get(isMultiSelected));
               let $1 = $.derived(() => {
                 var _a, _b;
-                return $.get(locked) ? false : resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, ((_b = $.get(defaults)) == null ? void 0 : _b.isResizable) ?? false);
+                return $.get(structurallyLocked) ? false : resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, ((_b = $.get(defaults)) == null ? void 0 : _b.isResizable) ?? false);
               });
               let $2 = $.derived(() => {
                 var _a, _b;
@@ -4100,18 +4516,18 @@ function Annotations($$anchor, $$props) {
               });
               let $3 = $.derived(() => {
                 var _a, _b;
-                return $.get(locked) ? false : resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, ((_b = $.get(defaults)) == null ? void 0 : _b.isRotatable) ?? false);
+                return $.get(structurallyLocked) ? false : resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, ((_b = $.get(defaults)) == null ? void 0 : _b.isRotatable) ?? false);
               });
-              let $4 = $.derived(() => $.get(locked) ? void 0 : $.get(renderer).vertexConfig);
+              let $4 = $.derived(() => $.get(structurallyLocked) ? void 0 : $.get(renderer).vertexConfig);
               let $5 = $.derived(() => {
                 var _a, _b;
-                return $.get(locked) ? void 0 : ((_b = (_a = $.get(renderer)).hideSelectionMenu) == null ? void 0 : _b.call(_a, $.get(annotation).object)) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenu;
+                return $.get(nonInteractive) ? void 0 : ((_b = (_a = $.get(renderer)).hideSelectionMenu) == null ? void 0 : _b.call(_a, $.get(annotation).object)) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenu;
               });
               let $6 = $.derived(() => {
                 var _a, _b;
-                return $.get(locked) ? void 0 : ((_b = (_a = $.get(renderer)).hideSelectionMenu) == null ? void 0 : _b.call(_a, $.get(annotation).object)) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet;
+                return $.get(nonInteractive) ? void 0 : ((_b = (_a = $.get(renderer)).hideSelectionMenu) == null ? void 0 : _b.call(_a, $.get(annotation).object)) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet;
               });
-              let $7 = $.derived(() => $.get(locked) ? void 0 : $.get(renderer).onDoubleClick ? (e) => {
+              let $7 = $.derived(() => $.get(nonInteractive) || $.get(contentLocked) ? void 0 : $.get(renderer).onDoubleClick ? (e) => {
                 e.stopPropagation();
                 $.get(renderer).onDoubleClick($.get(annotation).object.id, setEditingId);
               } : void 0);
@@ -4155,6 +4571,12 @@ function Annotations($$anchor, $$props) {
                   get selectionMenuSnippet() {
                     return $.get($6);
                   },
+                  get structurallyLocked() {
+                    return $.get(structurallyLocked);
+                  },
+                  get contentLocked() {
+                    return $.get(contentLocked);
+                  },
                   get onSelect() {
                     return $.get(onSelect);
                   },
@@ -4180,13 +4602,13 @@ function Annotations($$anchor, $$props) {
             }
           };
           $.if(node_2, ($$render) => {
-            if (!($.get(locked) && $.get(renderer).hiddenWhenLocked)) $$render(consequent);
+            if (!($.get(nonInteractive) && $.get(renderer).hiddenWhenLocked)) $$render(consequent);
           });
         }
         $.append($$anchor3, fragment_2);
       };
       $.if(node_1, ($$render) => {
-        if ($.get(renderer)) $$render(consequent_1);
+        if ($.get(renderer) && !hasNoViewFlag($.get(annotation).object) && !hasHiddenFlag($.get(annotation).object)) $$render(consequent_1);
       });
     }
     $.append($$anchor2, fragment_1);