@embedpdf/plugin-annotation 2.10.1 → 2.11.0

package/dist/svelte/index.js

@@ -7,7 +7,7 @@ import { setContext, getContext, untrack } from "svelte";
 import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/svelte";
 import { getCounterRotation } from "@embedpdf/utils";
 import { useInteractionHandles, deepToRaw, doublePress, CounterRotate } from "@embedpdf/utils/svelte";
-import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, standardFontCssProperties, textAlignmentToCss, ignore, PdfErrorCode, getContrastStrokeColor, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
+import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, standardFontCssProperties, textAlignmentToCss, ignore, PdfErrorCode, getContrastStrokeColor, PdfBlendMode, blendModeToCss, PdfAnnotationSubtype } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/svelte";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/svelte";
 const REGISTRY_KEY = Symbol("AnnotationRendererRegistry");
@@ -44,8 +44,10 @@ function getRendererRegistry() {
 function createRenderer(entry) {
   return {
     id: entry.id,
-    matches: entry.matches,
-    component: entry.component,
+    matches: entry.matches ?? (() => false),
+    component: entry.component ?? (() => null),
+    matchesPreview: entry.matchesPreview,
+    previewContainerStyle: entry.previewContainerStyle,
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
     defaultBlendMode: entry.defaultBlendMode,
@@ -204,11 +206,11 @@ function AppearanceImage($$anchor, $$props) {
 var root_4$7 = $.from_html(`<div></div> <div></div> <div></div>`, 1);
 var root_6$2 = $.from_html(`<div style="display: contents;"><!></div>`);
 var root_8$1 = $.from_html(`<div></div>`);
-var root_7$1 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
+var root_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$g = $.from_html(`<div data-no-interaction=""><div><div><!> <!></div></div>  <div><!> <!> <div><!> <!></div></div> <!> <!></div>`);
+var root$h = $.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, [
@@ -567,7 +569,7 @@ function AnnotationContainer($$anchor, $$props) {
       }
     };
   }
-  var div = root$g();
+  var div = root$h();
   var div_1 = $.child(div);
   let styles;
   var div_2 = $.child(div_1);
@@ -726,7 +728,7 @@ function AnnotationContainer($$anchor, $$props) {
           $.append($$anchor3, div_7);
         };
         var alternate_1 = ($$anchor3) => {
-          var div_8 = root_7$1();
+          var div_8 = root_7();
           div_8.__pointermove = (e) => {
             if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
           };
@@ -1102,9 +1104,9 @@ function getAnnotationScreenBounds(annotation, scale, rotation) {
 var root_2$a = $.from_html(`<div></div> <div></div> <div></div>`, 1);
 var root_4$6 = $.from_html(`<div style="display: contents;"><!></div>`);
 var root_6$1 = $.from_html(`<div></div>`);
-var root_5$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_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_10 = $.from_html(`<div></div>`);
-var root_11$1 = $.from_html(`<div><div> </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>`);
 function GroupSelectionBox($$anchor, $$props) {
   $.push($$props, true);
@@ -1478,7 +1480,7 @@ function GroupSelectionBox($$anchor, $$props) {
               $.append($$anchor4, div_5);
             };
             var alternate = ($$anchor4) => {
-              var div_6 = root_5$6();
+              var div_6 = root_5$5();
               div_6.__pointermove = (e) => {
                 if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
               };
@@ -1603,7 +1605,7 @@ function GroupSelectionBox($$anchor, $$props) {
       var node_11 = $.sibling(div_1, 2);
       {
         var consequent_6 = ($$anchor3) => {
-          var div_11 = root_11$1();
+          var div_11 = root_11();
           var div_12 = $.child(div_11);
           let styles_4;
           var text = $.child(div_12);
@@ -1733,7 +1735,7 @@ function GroupSelectionBox($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointermove"]);
-var root$f = $.from_html(`<div role="link" tabindex="-1"></div>`);
+var root$g = $.from_html(`<div role="link" tabindex="-1"></div>`);
 function LinkLockedMode($$anchor, $$props) {
   $.push($$props, true);
   const { provides } = useAnnotationCapability();
@@ -1742,7 +1744,7 @@ function LinkLockedMode($$anchor, $$props) {
     if (!target || !provides) return;
     provides.forDocument($$props.documentId).navigateTarget(target);
   }
-  var div = root$f();
+  var div = root$g();
   div.__click = handleClick;
   div.__keydown = (e) => {
     if (e.key === "Enter") handleClick();
@@ -1757,10 +1759,10 @@ function LinkLockedMode($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["click", "keydown"]);
-var root$e = $.from_html(`<div></div>`);
+var root$f = $.from_html(`<div></div>`);
 function LinkPreview($$anchor, $$props) {
   $.push($$props, true);
-  var div = root$e();
+  var div = root$f();
   let styles;
   $.template_effect(() => styles = $.set_style(div, "", styles, {
     position: "absolute",
@@ -1776,8 +1778,8 @@ function LinkPreview($$anchor, $$props) {
   $.pop();
 }
 var root_1$d = $.from_svg(`<path fill="none" stroke="transparent"></path>`);
-var root_3$4 = $.from_svg(`<path fill="none"></path>`);
-var root$d = $.from_svg(`<svg><!><!></svg>`);
+var root_3$3 = $.from_svg(`<path fill="none"></path>`);
+var root$e = $.from_svg(`<svg><!><!></svg>`);
 function Ink($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1796,7 +1798,7 @@ 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$d();
+  var svg = root$e();
   let styles;
   var node = $.child(svg);
   $.each(node, 19, () => $.get(paths), (d, i) => `hit-${i}`, ($$anchor2, d) => {
@@ -1824,7 +1826,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$4();
+        var path_1 = root_3$3();
         let styles_2;
         $.template_effect(() => {
           $.set_attribute(path_1, "d", $.get(d));
@@ -1856,27 +1858,22 @@ function Ink($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown"]);
-function InkRenderer($$anchor, $$props) {
-  Ink($$anchor, $.spread_props(() => $$props.currentObject, {
-    get isSelected() {
-      return $$props.isSelected;
-    },
-    get scale() {
-      return $$props.scale;
-    },
-    get onClick() {
-      return $$props.onClick;
+function InkPreview($$anchor, $$props) {
+  Ink($$anchor, $.spread_props(
+    {
+      isSelected: false,
+      get scale() {
+        return $$props.scale;
+      }
     },
-    get appearanceActive() {
-      return $$props.appearanceActive;
-    }
-  }));
+    () => $$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$5 = $.from_svg(`<rect></rect>`);
-var root$c = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
+var root_5$4 = $.from_svg(`<rect></rect>`);
+var root$d = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
 function Square($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -1915,7 +1912,7 @@ function Square($$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 node = $.child(svg);
   {
@@ -1983,7 +1980,7 @@ function Square($$anchor, $$props) {
           $.append($$anchor3, path_1);
         };
         var alternate_1 = ($$anchor3) => {
-          var rect_2 = root_5$5();
+          var rect_2 = root_5$4();
           let styles_4;
           $.template_effect(() => {
             $.set_attribute(rect_2, "x", $.get(x));
@@ -2026,27 +2023,22 @@ function Square($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown"]);
-function SquareRenderer($$anchor, $$props) {
-  Square($$anchor, $.spread_props(() => $$props.currentObject, {
-    get isSelected() {
-      return $$props.isSelected;
-    },
-    get scale() {
-      return $$props.scale;
-    },
-    get onClick() {
-      return $$props.onClick;
+function SquarePreview($$anchor, $$props) {
+  Square($$anchor, $.spread_props(
+    {
+      isSelected: false,
+      get scale() {
+        return $$props.scale;
+      }
     },
-    get appearanceActive() {
-      return $$props.appearanceActive;
-    }
-  }));
+    () => $$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$4 = $.from_svg(`<ellipse></ellipse>`);
-var root$b = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
+var root_5$3 = $.from_svg(`<ellipse></ellipse>`);
+var root$c = $.from_svg(`<svg overflow="visible"><!><!></svg>`);
 function Circle($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2084,7 +2076,7 @@ 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$b();
+  var svg = root$c();
   let styles;
   var node = $.child(svg);
   {
@@ -2149,7 +2141,7 @@ function Circle($$anchor, $$props) {
           $.append($$anchor3, path_1);
         };
         var alternate_1 = ($$anchor3) => {
-          var ellipse_1 = root_5$4();
+          var ellipse_1 = root_5$3();
           $.set_style(ellipse_1, "", {}, { "pointer-events": "none" });
           $.template_effect(
             ($0) => {
@@ -2200,28 +2192,23 @@ function Circle($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown"]);
-function CircleRenderer($$anchor, $$props) {
-  Circle($$anchor, $.spread_props(() => $$props.currentObject, {
-    get isSelected() {
-      return $$props.isSelected;
-    },
-    get scale() {
-      return $$props.scale;
-    },
-    get onClick() {
-      return $$props.onClick;
+function CirclePreview($$anchor, $$props) {
+  Circle($$anchor, $.spread_props(
+    {
+      isSelected: false,
+      get scale() {
+        return $$props.scale;
+      }
     },
-    get appearanceActive() {
-      return $$props.appearanceActive;
-    }
-  }));
+    () => $$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$3 = $.from_svg(`<path></path>`);
-var root_3$3 = $.from_svg(`<line></line><!><!>`, 1);
-var root$a = $.from_svg(`<svg><line stroke="transparent"></line><!><!><!></svg>`);
+var root_5$2 = $.from_svg(`<path></path>`);
+var root_3$2 = $.from_svg(`<line></line><!><!>`, 1);
+var root$b = $.from_svg(`<svg><line stroke="transparent"></line><!><!><!></svg>`);
 function Line($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2245,7 +2232,7 @@ function Line($$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 line = $.child(svg);
   line.__pointerdown = function(...$$args) {
@@ -2306,7 +2293,7 @@ function Line($$anchor, $$props) {
   var node_2 = $.sibling(node_1);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment = root_3$3();
+      var fragment = root_3$2();
       var line_1 = $.first_child(fragment);
       let styles_4;
       var node_3 = $.sibling(line_1);
@@ -2335,7 +2322,7 @@ function Line($$anchor, $$props) {
       var node_4 = $.sibling(node_3);
       {
         var consequent_3 = ($$anchor3) => {
-          var path_3 = root_5$3();
+          var path_3 = root_5$2();
           let styles_6;
           $.template_effect(() => {
             $.set_attribute(path_3, "d", $.get(endings).end.d);
@@ -2396,28 +2383,23 @@ function Line($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown"]);
-function LineRenderer($$anchor, $$props) {
-  Line($$anchor, $.spread_props(() => $$props.currentObject, {
-    get isSelected() {
-      return $$props.isSelected;
-    },
-    get scale() {
-      return $$props.scale;
-    },
-    get onClick() {
-      return $$props.onClick;
+function LinePreview($$anchor, $$props) {
+  Line($$anchor, $.spread_props(
+    {
+      isSelected: false,
+      get scale() {
+        return $$props.scale;
+      }
     },
-    get appearanceActive() {
-      return $$props.appearanceActive;
-    }
-  }));
+    () => $$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$2 = $.from_svg(`<path></path>`);
-var root_3$2 = $.from_svg(`<path></path><!><!>`, 1);
-var root$9 = $.from_svg(`<svg><path fill="none" stroke="transparent"></path><!><!><!></svg>`);
+var root_5$1 = $.from_svg(`<path></path>`);
+var root_3$1 = $.from_svg(`<path></path><!><!>`, 1);
+var root$a = $.from_svg(`<svg><path fill="none" stroke="transparent"></path><!><!><!></svg>`);
 function Polyline($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2445,7 +2427,7 @@ function Polyline($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$9();
+  var svg = root$a();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
@@ -2506,7 +2488,7 @@ function Polyline($$anchor, $$props) {
   var node_2 = $.sibling(node_1);
   {
     var consequent_4 = ($$anchor2) => {
-      var fragment = root_3$2();
+      var fragment = root_3$1();
       var path_3 = $.first_child(fragment);
       let styles_4;
       var node_3 = $.sibling(path_3);
@@ -2535,7 +2517,7 @@ function Polyline($$anchor, $$props) {
       var node_4 = $.sibling(node_3);
       {
         var consequent_3 = ($$anchor3) => {
-          var path_5 = root_5$2();
+          var path_5 = root_5$1();
           let styles_6;
           $.template_effect(() => {
             $.set_attribute(path_5, "d", $.get(endings).end.d);
@@ -2593,27 +2575,22 @@ function Polyline($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown"]);
-function PolylineRenderer($$anchor, $$props) {
-  Polyline($$anchor, $.spread_props(() => $$props.currentObject, {
-    get isSelected() {
-      return $$props.isSelected;
-    },
-    get scale() {
-      return $$props.scale;
-    },
-    get onClick() {
-      return $$props.onClick;
+function PolylinePreview($$anchor, $$props) {
+  Polyline($$anchor, $.spread_props(
+    {
+      isSelected: false,
+      get scale() {
+        return $$props.scale;
+      }
     },
-    get appearanceActive() {
-      return $$props.appearanceActive;
-    }
-  }));
+    () => $$props.data
+  ));
 }
 var root_2$5 = $.from_svg(`<path></path>`);
 var root_4$1 = $.from_svg(`<path fill="none"></path>`);
-var root_5$1 = $.from_svg(`<rect></rect>`);
-var root_3$1 = $.from_svg(`<path></path><!><!>`, 1);
-var root$8 = $.from_svg(`<svg><path fill="transparent" stroke="transparent"></path><!></svg>`);
+var root_5 = $.from_svg(`<rect></rect>`);
+var root_3 = $.from_svg(`<path></path><!><!>`, 1);
+var root$9 = $.from_svg(`<svg><path fill="transparent" stroke="transparent"></path><!></svg>`);
 function Polygon($$anchor, $$props) {
   $.push($$props, true);
   const MIN_HIT_AREA_SCREEN_PX = 20;
@@ -2639,7 +2616,7 @@ function Polygon($$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$9();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
@@ -2670,7 +2647,7 @@ function Polygon($$anchor, $$props) {
           $.append($$anchor3, path_1);
         };
         var alternate = ($$anchor3) => {
-          var fragment_1 = root_3$1();
+          var fragment_1 = root_3();
           var path_2 = $.first_child(fragment_1);
           let styles_3;
           var node_2 = $.sibling(path_2);
@@ -2697,7 +2674,7 @@ function Polygon($$anchor, $$props) {
           var node_3 = $.sibling(node_2);
           {
             var consequent_2 = ($$anchor4) => {
-              var rect_1 = root_5$1();
+              var rect_1 = root_5();
               $.set_attribute(rect_1, "opacity", 0.4);
               $.set_style(rect_1, "", {}, { "pointer-events": "none" });
               $.template_effect(() => {
@@ -2760,6 +2737,111 @@ function Polygon($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown"]);
+function PolygonPreview($$anchor, $$props) {
+  Polygon($$anchor, $.spread_props(
+    {
+      isSelected: false,
+      get scale() {
+        return $$props.scale;
+      }
+    },
+    () => $$props.data
+  ));
+}
+var root$8 = $.from_html(`<div></div>`);
+function FreeTextPreview($$anchor, $$props) {
+  $.push($$props, true);
+  var div = root$8();
+  let styles;
+  $.template_effect(() => styles = $.set_style(div, "", styles, {
+    width: "100%",
+    height: "100%",
+    border: `1px dashed ${($$props.data.fontColor || "#000000") ?? ""}`,
+    "background-color": "transparent"
+  }));
+  $.append($$anchor, div);
+  $.pop();
+}
+function InkRenderer($$anchor, $$props) {
+  Ink($$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;
+    }
+  }));
+}
+function SquareRenderer($$anchor, $$props) {
+  Square($$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;
+    }
+  }));
+}
+function CircleRenderer($$anchor, $$props) {
+  Circle($$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;
+    }
+  }));
+}
+function LineRenderer($$anchor, $$props) {
+  Line($$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;
+    }
+  }));
+}
+function PolylineRenderer($$anchor, $$props) {
+  Polyline($$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;
+    }
+  }));
+}
 function PolygonRenderer($$anchor, $$props) {
   Polygon($$anchor, $.spread_props(() => $$props.currentObject, {
     get isSelected() {
@@ -3601,25 +3683,34 @@ const builtInRenderers = [
   createRenderer({
     id: "ink",
     matches: (a) => a.type === PdfAnnotationSubtype.INK,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.INK,
     component: InkRenderer,
+    renderPreview: InkPreview,
+    previewContainerStyle: ({ data }) => `mix-blend-mode:${blendModeToCss(data.blendMode ?? PdfBlendMode.Normal)}`,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "square",
     matches: (a) => a.type === PdfAnnotationSubtype.SQUARE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.SQUARE,
     component: SquareRenderer,
+    renderPreview: SquarePreview,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "circle",
     matches: (a) => a.type === PdfAnnotationSubtype.CIRCLE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.CIRCLE,
     component: CircleRenderer,
+    renderPreview: CirclePreview,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "line",
     matches: (a) => a.type === PdfAnnotationSubtype.LINE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.LINE,
     component: LineRenderer,
+    renderPreview: LinePreview,
     vertexConfig: {
       extractVertices: (a) => [a.linePoints.start, a.linePoints.end],
       transformAnnotation: (a, v) => ({
@@ -3632,7 +3723,9 @@ const builtInRenderers = [
   createRenderer({
     id: "polyline",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYLINE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.POLYLINE,
     component: PolylineRenderer,
+    renderPreview: PolylinePreview,
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -3642,7 +3735,9 @@ const builtInRenderers = [
   createRenderer({
     id: "polygon",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYGON,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.POLYGON,
     component: PolygonRenderer,
+    renderPreview: PolygonPreview,
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -3693,7 +3788,9 @@ const builtInRenderers = [
   createRenderer({
     id: "freeText",
     matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT,
     component: FreeTextRenderer,
+    renderPreview: FreeTextPreview,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true },
     isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
     onDoubleClick: (id, setEditingId) => setEditingId(id)
@@ -3708,6 +3805,7 @@ const builtInRenderers = [
   createRenderer({
     id: "link",
     matches: (a) => a.type === PdfAnnotationSubtype.LINK,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.LINK,
     component: LinkRenderer,
     renderPreview: LinkPreview,
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: false },
@@ -4382,13 +4480,6 @@ function TextMarkup($$anchor, $$props) {
   $.pop();
 }
 var root_1 = $.from_html(`<div><!></div>`);
-var root_3 = $.from_html(`<div><!></div>`);
-var root_5 = $.from_html(`<div><!></div>`);
-var root_7 = $.from_html(`<div><!></div>`);
-var root_9 = $.from_html(`<div><!></div>`);
-var root_11 = $.from_html(`<div><!></div>`);
-var root_13 = $.from_html(`<div><div></div></div>`);
-var root_15 = $.from_html(`<div><!></div>`);
 function PreviewRenderer($$anchor, $$props) {
   $.push($$props, true);
   const registry = getRendererRegistry();
@@ -4399,322 +4490,53 @@ function PreviewRenderer($$anchor, $$props) {
     width: $.get(bounds).size.width * $$props.scale,
     height: $.get(bounds).size.height * $$props.scale
   }));
+  const allRenderers = $.derived(() => {
+    const external = (registry == null ? void 0 : registry.getAll()) ?? [];
+    const externalIds = new Set(external.map((r) => r.id));
+    return [
+      ...external,
+      ...builtInRenderers.filter((r) => !externalIds.has(r.id))
+    ];
+  });
+  const match = $.derived(() => $.get(allRenderers).find((r) => {
+    var _a;
+    return ((_a = r.matchesPreview) == null ? void 0 : _a.call(r, $$props.preview)) && r.renderPreview;
+  }) ?? $.get(allRenderers).find((r) => r.id === $$props.toolId && r.renderPreview) ?? null);
+  const extraStyle = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $.get(match)) == null ? void 0 : _a.previewContainerStyle) == null ? void 0 : _b.call(_a, {
+      data: $$props.preview.data,
+      bounds: $$props.preview.bounds,
+      scale: $$props.scale
+    })) ?? "";
+  });
   var fragment = $.comment();
   var node = $.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
+      const PreviewComponent = $.derived(() => $.get(match).renderPreview);
       var div = root_1();
-      let styles;
       var node_1 = $.child(div);
-      Circle(node_1, $.spread_props(
-        {
-          isSelected: false,
+      $.component(node_1, () => $.get(PreviewComponent), ($$anchor3, PreviewComponent_1) => {
+        PreviewComponent_1($$anchor3, {
+          get data() {
+            return $$props.preview.data;
+          },
+          get bounds() {
+            return $$props.preview.bounds;
+          },
           get scale() {
             return $$props.scale;
           }
-        },
-        () => $$props.preview.data
-      ));
+        });
+      });
       $.reset(div);
-      $.template_effect(() => styles = $.set_style(div, "", styles, {
-        position: "absolute",
-        left: `${$.get(style).left ?? ""}px`,
-        top: `${$.get(style).top ?? ""}px`,
-        width: `${$.get(style).width ?? ""}px`,
-        height: `${$.get(style).height ?? ""}px`,
-        "pointer-events": "none",
-        "z-index": "10"
-      }));
+      $.template_effect(() => $.set_style(div, `position:absolute;left:${$.get(style).left ?? ""}px;top:${$.get(style).top ?? ""}px;width:${$.get(style).width ?? ""}px;height:${$.get(style).height ?? ""}px;pointer-events:none;z-index:10;${$.get(extraStyle) ?? ""}`));
       $.append($$anchor2, div);
     };
-    var alternate_6 = ($$anchor2) => {
-      var fragment_1 = $.comment();
-      var node_2 = $.first_child(fragment_1);
-      {
-        var consequent_1 = ($$anchor3) => {
-          var div_1 = root_3();
-          let styles_1;
-          var node_3 = $.child(div_1);
-          Square(node_3, $.spread_props(
-            {
-              isSelected: false,
-              get scale() {
-                return $$props.scale;
-              }
-            },
-            () => $$props.preview.data
-          ));
-          $.reset(div_1);
-          $.template_effect(() => styles_1 = $.set_style(div_1, "", styles_1, {
-            position: "absolute",
-            left: `${$.get(style).left ?? ""}px`,
-            top: `${$.get(style).top ?? ""}px`,
-            width: `${$.get(style).width ?? ""}px`,
-            height: `${$.get(style).height ?? ""}px`,
-            "pointer-events": "none",
-            "z-index": "10"
-          }));
-          $.append($$anchor3, div_1);
-        };
-        var alternate_5 = ($$anchor3) => {
-          var fragment_2 = $.comment();
-          var node_4 = $.first_child(fragment_2);
-          {
-            var consequent_2 = ($$anchor4) => {
-              var div_2 = root_5();
-              let styles_2;
-              var node_5 = $.child(div_2);
-              Polygon(node_5, $.spread_props(
-                {
-                  isSelected: false,
-                  get scale() {
-                    return $$props.scale;
-                  }
-                },
-                () => $$props.preview.data
-              ));
-              $.reset(div_2);
-              $.template_effect(() => styles_2 = $.set_style(div_2, "", styles_2, {
-                position: "absolute",
-                left: `${$.get(style).left ?? ""}px`,
-                top: `${$.get(style).top ?? ""}px`,
-                width: `${$.get(style).width ?? ""}px`,
-                height: `${$.get(style).height ?? ""}px`,
-                "pointer-events": "none",
-                "z-index": "10"
-              }));
-              $.append($$anchor4, div_2);
-            };
-            var alternate_4 = ($$anchor4) => {
-              var fragment_3 = $.comment();
-              var node_6 = $.first_child(fragment_3);
-              {
-                var consequent_3 = ($$anchor5) => {
-                  var div_3 = root_7();
-                  let styles_3;
-                  var node_7 = $.child(div_3);
-                  Polyline(node_7, $.spread_props(
-                    {
-                      isSelected: false,
-                      get scale() {
-                        return $$props.scale;
-                      }
-                    },
-                    () => $$props.preview.data
-                  ));
-                  $.reset(div_3);
-                  $.template_effect(() => styles_3 = $.set_style(div_3, "", styles_3, {
-                    position: "absolute",
-                    left: `${$.get(style).left ?? ""}px`,
-                    top: `${$.get(style).top ?? ""}px`,
-                    width: `${$.get(style).width ?? ""}px`,
-                    height: `${$.get(style).height ?? ""}px`,
-                    "pointer-events": "none",
-                    "z-index": "10"
-                  }));
-                  $.append($$anchor5, div_3);
-                };
-                var alternate_3 = ($$anchor5) => {
-                  var fragment_4 = $.comment();
-                  var node_8 = $.first_child(fragment_4);
-                  {
-                    var consequent_4 = ($$anchor6) => {
-                      var div_4 = root_9();
-                      let styles_4;
-                      var node_9 = $.child(div_4);
-                      Line(node_9, $.spread_props(
-                        {
-                          isSelected: false,
-                          get scale() {
-                            return $$props.scale;
-                          }
-                        },
-                        () => $$props.preview.data
-                      ));
-                      $.reset(div_4);
-                      $.template_effect(() => styles_4 = $.set_style(div_4, "", styles_4, {
-                        position: "absolute",
-                        left: `${$.get(style).left ?? ""}px`,
-                        top: `${$.get(style).top ?? ""}px`,
-                        width: `${$.get(style).width ?? ""}px`,
-                        height: `${$.get(style).height ?? ""}px`,
-                        "pointer-events": "none",
-                        "z-index": "10"
-                      }));
-                      $.append($$anchor6, div_4);
-                    };
-                    var alternate_2 = ($$anchor6) => {
-                      var fragment_5 = $.comment();
-                      var node_10 = $.first_child(fragment_5);
-                      {
-                        var consequent_5 = ($$anchor7) => {
-                          var div_5 = root_11();
-                          let styles_5;
-                          var node_11 = $.child(div_5);
-                          Ink(node_11, $.spread_props(
-                            {
-                              isSelected: false,
-                              get scale() {
-                                return $$props.scale;
-                              }
-                            },
-                            () => $$props.preview.data
-                          ));
-                          $.reset(div_5);
-                          $.template_effect(($0) => styles_5 = $.set_style(div_5, "", styles_5, $0), [
-                            () => ({
-                              position: "absolute",
-                              left: `${$.get(style).left ?? ""}px`,
-                              top: `${$.get(style).top ?? ""}px`,
-                              width: `${$.get(style).width ?? ""}px`,
-                              height: `${$.get(style).height ?? ""}px`,
-                              "pointer-events": "none",
-                              "z-index": "10",
-                              "mix-blend-mode": blendModeToCss($$props.preview.data.blendMode ?? PdfBlendMode.Normal)
-                            })
-                          ]);
-                          $.append($$anchor7, div_5);
-                        };
-                        var alternate_1 = ($$anchor7) => {
-                          var fragment_6 = $.comment();
-                          var node_12 = $.first_child(fragment_6);
-                          {
-                            var consequent_6 = ($$anchor8) => {
-                              var div_6 = root_13();
-                              let styles_6;
-                              var div_7 = $.child(div_6);
-                              let styles_7;
-                              $.reset(div_6);
-                              $.template_effect(() => {
-                                styles_6 = $.set_style(div_6, "", styles_6, {
-                                  position: "absolute",
-                                  left: `${$.get(style).left ?? ""}px`,
-                                  top: `${$.get(style).top ?? ""}px`,
-                                  width: `${$.get(style).width ?? ""}px`,
-                                  height: `${$.get(style).height ?? ""}px`,
-                                  "pointer-events": "none",
-                                  "z-index": "10"
-                                });
-                                styles_7 = $.set_style(div_7, "", styles_7, {
-                                  width: "100%",
-                                  height: "100%",
-                                  border: `1px dashed ${($$props.preview.data.fontColor || "#000000") ?? ""}`,
-                                  "background-color": "transparent"
-                                });
-                              });
-                              $.append($$anchor8, div_6);
-                            };
-                            var alternate = ($$anchor8) => {
-                              const match = $.derived(() => registry == null ? void 0 : registry.getAll().find((r) => r.id === $$props.toolId && r.renderPreview));
-                              var fragment_7 = $.comment();
-                              var node_13 = $.first_child(fragment_7);
-                              {
-                                var consequent_7 = ($$anchor9) => {
-                                  const PreviewComponent = $.derived(() => $.get(match).renderPreview);
-                                  var div_8 = root_15();
-                                  let styles_8;
-                                  var node_14 = $.child(div_8);
-                                  $.component(node_14, () => $.get(PreviewComponent), ($$anchor10, PreviewComponent_1) => {
-                                    PreviewComponent_1($$anchor10, {
-                                      get data() {
-                                        return $$props.preview.data;
-                                      },
-                                      get bounds() {
-                                        return $$props.preview.bounds;
-                                      },
-                                      get scale() {
-                                        return $$props.scale;
-                                      }
-                                    });
-                                  });
-                                  $.reset(div_8);
-                                  $.template_effect(() => styles_8 = $.set_style(div_8, "", styles_8, {
-                                    position: "absolute",
-                                    left: `${$.get(style).left ?? ""}px`,
-                                    top: `${$.get(style).top ?? ""}px`,
-                                    width: `${$.get(style).width ?? ""}px`,
-                                    height: `${$.get(style).height ?? ""}px`,
-                                    "pointer-events": "none",
-                                    "z-index": "10"
-                                  }));
-                                  $.append($$anchor9, div_8);
-                                };
-                                $.if(node_13, ($$render) => {
-                                  var _a;
-                                  if ((_a = $.get(match)) == null ? void 0 : _a.renderPreview) $$render(consequent_7);
-                                });
-                              }
-                              $.append($$anchor8, fragment_7);
-                            };
-                            $.if(
-                              node_12,
-                              ($$render) => {
-                                if ($$props.preview.type === PdfAnnotationSubtype.FREETEXT) $$render(consequent_6);
-                                else $$render(alternate, false);
-                              },
-                              true
-                            );
-                          }
-                          $.append($$anchor7, fragment_6);
-                        };
-                        $.if(
-                          node_10,
-                          ($$render) => {
-                            if ($$props.preview.type === PdfAnnotationSubtype.INK) $$render(consequent_5);
-                            else $$render(alternate_1, false);
-                          },
-                          true
-                        );
-                      }
-                      $.append($$anchor6, fragment_5);
-                    };
-                    $.if(
-                      node_8,
-                      ($$render) => {
-                        if ($$props.preview.type === PdfAnnotationSubtype.LINE) $$render(consequent_4);
-                        else $$render(alternate_2, false);
-                      },
-                      true
-                    );
-                  }
-                  $.append($$anchor5, fragment_4);
-                };
-                $.if(
-                  node_6,
-                  ($$render) => {
-                    if ($$props.preview.type === PdfAnnotationSubtype.POLYLINE) $$render(consequent_3);
-                    else $$render(alternate_3, false);
-                  },
-                  true
-                );
-              }
-              $.append($$anchor4, fragment_3);
-            };
-            $.if(
-              node_4,
-              ($$render) => {
-                if ($$props.preview.type === PdfAnnotationSubtype.POLYGON) $$render(consequent_2);
-                else $$render(alternate_4, false);
-              },
-              true
-            );
-          }
-          $.append($$anchor3, fragment_2);
-        };
-        $.if(
-          node_2,
-          ($$render) => {
-            if ($$props.preview.type === PdfAnnotationSubtype.SQUARE) $$render(consequent_1);
-            else $$render(alternate_5, false);
-          },
-          true
-        );
-      }
-      $.append($$anchor2, fragment_1);
-    };
     $.if(node, ($$render) => {
-      if ($$props.preview.type === PdfAnnotationSubtype.CIRCLE) $$render(consequent);
-      else $$render(alternate_6, false);
+      var _a;
+      if ((_a = $.get(match)) == null ? void 0 : _a.renderPreview) $$render(consequent);
     });
   }
   $.append($$anchor, fragment);