@embedpdf/plugin-annotation 1.5.0 → 2.0.0-next.1

package/dist/svelte/index.js

@@ -0,0 +1,3083 @@
+import * as $ from "svelte/internal/client";
+import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp } from "@embedpdf/plugin-annotation";
+export * from "@embedpdf/plugin-annotation";
+import { useCapability, usePlugin, useDocumentState } from "@embedpdf/core/svelte";
+import "svelte/internal/disclose-version";
+import { useInteractionHandles, deepToRaw, doublePress, CounterRotate } from "@embedpdf/utils/svelte";
+import { PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCss, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
+import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/svelte";
+import { useSelectionCapability } from "@embedpdf/plugin-selection/svelte";
+const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
+const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
+const useAnnotation = (getDocumentId) => {
+  const capability = useAnnotationCapability();
+  let state = $.state($.proxy(initialDocumentState()));
+  const documentId = $.derived(getDocumentId);
+  const scopedProvides = $.derived(() => capability.provides && $.get(documentId) ? capability.provides.forDocument($.get(documentId)) : null);
+  $.user_effect(() => {
+    const provides = capability.provides;
+    const docId = $.get(documentId);
+    if (!provides || !docId) {
+      $.set(state, initialDocumentState(), true);
+      return;
+    }
+    const scope = provides.forDocument(docId);
+    $.set(state, scope.getState(), true);
+    return scope.onStateChange((newState) => {
+      $.set(state, newState, true);
+    });
+  });
+  return {
+    get provides() {
+      return $.get(scopedProvides);
+    },
+    get state() {
+      return $.get(state);
+    }
+  };
+};
+var root_6$1 = $.from_html(`<div></div>`);
+var root_10 = $.from_html(`<div></div>`);
+var root$a = $.from_html(`<div data-no-interaction=""><div><!> <!> <!></div> <!></div>`);
+function AnnotationContainer($$anchor, $$props) {
+  $.push($$props, true);
+  let lockAspectRatio = $.prop($$props, "lockAspectRatio", 3, false), propsClass = $.prop($$props, "class", 3, ""), outlineOffset = $.prop($$props, "outlineOffset", 3, 1), zIndex = $.prop($$props, "zIndex", 3, 20), selectionOutlineColor = $.prop($$props, "selectionOutlineColor", 3, "#007ACC"), restProps = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "documentId",
+    "scale",
+    "pageIndex",
+    "rotation",
+    "pageWidth",
+    "pageHeight",
+    "trackedAnnotation",
+    "children",
+    "isSelected",
+    "isDraggable",
+    "isResizable",
+    "lockAspectRatio",
+    "style",
+    "class",
+    "vertexConfig",
+    "selectionMenu",
+    "selectionMenuSnippet",
+    "outlineOffset",
+    "onDoubleClick",
+    "onSelect",
+    "zIndex",
+    "resizeUI",
+    "vertexUI",
+    "selectionOutlineColor",
+    "customAnnotationRenderer"
+  ]);
+  let preview = $.state($.proxy($$props.trackedAnnotation.object));
+  let annotationCapability = useAnnotationCapability();
+  let gestureBaseRef = $.state(null);
+  const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
+  let currentObject = $.derived(() => $.get(preview) ? { ...$$props.trackedAnnotation.object, ...$.get(preview) } : $$props.trackedAnnotation.object);
+  const HANDLE_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.resizeUI) == null ? void 0 : _a.color) ?? "#007ACC";
+  });
+  const VERTEX_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.vertexUI) == null ? void 0 : _a.color) ?? "#007ACC";
+  });
+  const HANDLE_SIZE = $.derived(() => {
+    var _a;
+    return ((_a = $$props.resizeUI) == null ? void 0 : _a.size) ?? 12;
+  });
+  const VERTEX_SIZE = $.derived(() => {
+    var _a;
+    return ((_a = $$props.vertexUI) == null ? void 0 : _a.size) ?? 12;
+  });
+  $.user_effect(() => {
+    if ($$props.trackedAnnotation.object) {
+      $.set(preview, $$props.trackedAnnotation.object, true);
+    }
+  });
+  const interactionHandles = useInteractionHandles(() => {
+    var _a;
+    return {
+      controller: {
+        element: $.get(currentObject).rect,
+        vertices: (_a = $$props.vertexConfig) == null ? void 0 : _a.extractVertices($.get(currentObject)),
+        constraints: {
+          minWidth: 10,
+          minHeight: 10,
+          boundingBox: { width: $$props.pageWidth, height: $$props.pageHeight }
+        },
+        maintainAspectRatio: lockAspectRatio(),
+        pageRotation: $$props.rotation,
+        scale: $$props.scale,
+        enabled: $$props.isSelected,
+        onUpdate: (event) => {
+          var _a2, _b, _c, _d;
+          if (!((_a2 = event.transformData) == null ? void 0 : _a2.type)) return;
+          if (event.state === "start") {
+            $.set(gestureBaseRef, $.get(currentObject), true);
+          }
+          const transformType = event.transformData.type;
+          const base = $.get(gestureBaseRef) ?? $.get(currentObject);
+          const changes = event.transformData.changes.vertices ? (_b = $$props.vertexConfig) == null ? void 0 : _b.transformAnnotation(base, event.transformData.changes.vertices) : { rect: event.transformData.changes.rect };
+          const patched = (_c = annotationCapability.provides) == null ? void 0 : _c.transformAnnotation(base, {
+            type: transformType,
+            changes,
+            metadata: event.transformData.metadata
+          });
+          if (patched) {
+            $.set(preview, { ...$.get(preview), ...patched }, true);
+          }
+          if (event.state === "end" && patched) {
+            $.set(gestureBaseRef, null);
+            const sanitized = deepToRaw(patched);
+            (_d = $.get(annotationProvides)) == null ? void 0 : _d.updateAnnotation($$props.pageIndex, $$props.trackedAnnotation.object.id, sanitized);
+          }
+        }
+      },
+      resizeUI: {
+        handleSize: $.get(HANDLE_SIZE),
+        spacing: outlineOffset(),
+        offsetMode: "outside",
+        includeSides: lockAspectRatio() ? false : true,
+        zIndex: zIndex() + 1
+      },
+      vertexUI: { vertexSize: $.get(VERTEX_SIZE), zIndex: zIndex() + 2 },
+      includeVertices: $$props.vertexConfig ? true : false
+    };
+  });
+  const resizeHandles = $.derived(() => interactionHandles.resize);
+  const vertexHandles = $.derived(() => interactionHandles.vertices);
+  const shouldShowMenu = $.derived(() => $$props.isSelected && (!!$$props.selectionMenu || !!$$props.selectionMenuSnippet));
+  function buildContext() {
+    return {
+      type: "annotation",
+      annotation: $$props.trackedAnnotation,
+      pageIndex: $$props.pageIndex
+    };
+  }
+  const menuPlacement = { suggestTop: false, spaceAbove: 0, spaceBelow: 0 };
+  function buildMenuProps(rect, menuWrapperProps) {
+    return {
+      context: buildContext(),
+      selected: $$props.isSelected,
+      rect,
+      placement: menuPlacement,
+      menuWrapperProps
+    };
+  }
+  var div = root$a();
+  var div_1 = $.child(div);
+  $.attribute_effect(div_1, () => ({
+    ...$$props.isDraggable && $$props.isSelected ? interactionHandles.dragProps : {},
+    style: $$props.style || "",
+    class: propsClass(),
+    ...restProps,
+    [$.STYLE]: {
+      position: "absolute",
+      left: `${$.get(currentObject).rect.origin.x * $$props.scale}px`,
+      top: `${$.get(currentObject).rect.origin.y * $$props.scale}px`,
+      width: `${$.get(currentObject).rect.size.width * $$props.scale}px`,
+      height: `${$.get(currentObject).rect.size.height * $$props.scale}px`,
+      outline: $$props.isSelected ? `1px solid ${selectionOutlineColor()}` : "none",
+      "outline-offset": $$props.isSelected ? `${outlineOffset()}px` : "0px",
+      "pointer-events": $$props.isSelected ? "auto" : "none",
+      "touch-action": "none",
+      cursor: $$props.isSelected && $$props.isDraggable ? "move" : "default",
+      "z-index": zIndex()
+    }
+  }));
+  var node = $.child(div_1);
+  {
+    var consequent = ($$anchor2) => {
+      var fragment = $.comment();
+      var node_1 = $.first_child(fragment);
+      $.snippet(node_1, () => $$props.customAnnotationRenderer ?? $.noop, () => ({
+        annotation: $.get(currentObject),
+        children: $$props.children,
+        isSelected: $$props.isSelected,
+        scale: $$props.scale,
+        rotation: $$props.rotation,
+        pageWidth: $$props.pageWidth,
+        pageHeight: $$props.pageHeight,
+        pageIndex: $$props.pageIndex,
+        onSelect: $$props.onSelect
+      }));
+      $.append($$anchor2, fragment);
+    };
+    var alternate = ($$anchor2) => {
+      var fragment_1 = $.comment();
+      var node_2 = $.first_child(fragment_1);
+      $.snippet(node_2, () => $$props.children, () => $.get(currentObject));
+      $.append($$anchor2, fragment_1);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.customAnnotationRenderer) $$render(consequent);
+      else $$render(alternate, false);
+    });
+  }
+  var node_3 = $.sibling(node, 2);
+  {
+    var consequent_2 = ($$anchor2) => {
+      var fragment_2 = $.comment();
+      var node_4 = $.first_child(fragment_2);
+      $.each(node_4, 17, () => $.get(resizeHandles), ({ key, style: handleStyle, ...hProps }) => key, ($$anchor3, $$item) => {
+        let handleStyle = () => $.get($$item).style;
+        let hProps = () => $.exclude_from_object($.get($$item), ["key", "style"]);
+        var fragment_3 = $.comment();
+        var node_5 = $.first_child(fragment_3);
+        {
+          var consequent_1 = ($$anchor4) => {
+            const Component = $.derived(() => $$props.resizeUI.component);
+            var fragment_4 = $.comment();
+            var node_6 = $.first_child(fragment_4);
+            $.component(node_6, () => $.get(Component), ($$anchor5, Component_1) => {
+              Component_1($$anchor5, $.spread_props(hProps, {
+                get backgroundColor() {
+                  return $.get(HANDLE_COLOR);
+                }
+              }));
+            });
+            $.append($$anchor4, fragment_4);
+          };
+          var alternate_1 = ($$anchor4) => {
+            var div_2 = root_6$1();
+            $.attribute_effect(div_2, () => ({
+              ...hProps(),
+              style: `${handleStyle() ?? ""}; background-color: ${$.get(HANDLE_COLOR) ?? ""};`
+            }));
+            $.append($$anchor4, div_2);
+          };
+          $.if(node_5, ($$render) => {
+            var _a;
+            if ((_a = $$props.resizeUI) == null ? void 0 : _a.component) $$render(consequent_1);
+            else $$render(alternate_1, false);
+          });
+        }
+        $.append($$anchor3, fragment_3);
+      });
+      $.append($$anchor2, fragment_2);
+    };
+    $.if(node_3, ($$render) => {
+      if ($$props.isSelected && $$props.isResizable) $$render(consequent_2);
+    });
+  }
+  var node_7 = $.sibling(node_3, 2);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var fragment_5 = $.comment();
+      var node_8 = $.first_child(fragment_5);
+      $.each(node_8, 17, () => $.get(vertexHandles), ({ key, style: vertexStyle, ...vProps }) => key, ($$anchor3, $$item) => {
+        let vertexStyle = () => $.get($$item).style;
+        let vProps = () => $.exclude_from_object($.get($$item), ["key", "style"]);
+        var fragment_6 = $.comment();
+        var node_9 = $.first_child(fragment_6);
+        {
+          var consequent_3 = ($$anchor4) => {
+            const Component = $.derived(() => $$props.vertexUI.component);
+            var fragment_7 = $.comment();
+            var node_10 = $.first_child(fragment_7);
+            $.component(node_10, () => $.get(Component), ($$anchor5, Component_2) => {
+              Component_2($$anchor5, $.spread_props(vProps, {
+                get backgroundColor() {
+                  return $.get(VERTEX_COLOR);
+                }
+              }));
+            });
+            $.append($$anchor4, fragment_7);
+          };
+          var alternate_2 = ($$anchor4) => {
+            var div_3 = root_10();
+            $.attribute_effect(div_3, () => ({
+              ...vProps(),
+              style: `${vertexStyle() ?? ""}; background-color: ${$.get(VERTEX_COLOR) ?? ""};`
+            }));
+            $.append($$anchor4, div_3);
+          };
+          $.if(node_9, ($$render) => {
+            var _a;
+            if ((_a = $$props.vertexUI) == null ? void 0 : _a.component) $$render(consequent_3);
+            else $$render(alternate_2, false);
+          });
+        }
+        $.append($$anchor3, fragment_6);
+      });
+      $.append($$anchor2, fragment_5);
+    };
+    $.if(node_7, ($$render) => {
+      if ($$props.isSelected) $$render(consequent_4);
+    });
+  }
+  $.reset(div_1);
+  $.action(div_1, ($$node, $$action_arg) => {
+    var _a;
+    return (_a = doublePress) == null ? void 0 : _a($$node, $$action_arg);
+  }, () => ({ onDouble: $$props.onDoubleClick }));
+  var node_11 = $.sibling(div_1, 2);
+  {
+    var consequent_8 = ($$anchor2) => {
+      {
+        const children = ($$anchor3, $$arg0) => {
+          let rect = () => $$arg0 == null ? void 0 : $$arg0().rect;
+          let menuWrapperProps = () => $$arg0 == null ? void 0 : $$arg0().menuWrapperProps;
+          const menuProps = $.derived(() => buildMenuProps(rect(), menuWrapperProps()));
+          var fragment_9 = $.comment();
+          var node_12 = $.first_child(fragment_9);
+          {
+            var consequent_6 = ($$anchor4) => {
+              const result = $.derived(() => $$props.selectionMenu($.get(menuProps)));
+              var fragment_10 = $.comment();
+              var node_13 = $.first_child(fragment_10);
+              {
+                var consequent_5 = ($$anchor5) => {
+                  var fragment_11 = $.comment();
+                  var node_14 = $.first_child(fragment_11);
+                  $.component(node_14, () => $.get(result).component, ($$anchor6, result_component) => {
+                    result_component($$anchor6, $.spread_props(() => $.get(result).props));
+                  });
+                  $.append($$anchor5, fragment_11);
+                };
+                $.if(node_13, ($$render) => {
+                  if ($.get(result)) $$render(consequent_5);
+                });
+              }
+              $.append($$anchor4, fragment_10);
+            };
+            var alternate_3 = ($$anchor4) => {
+              var fragment_12 = $.comment();
+              var node_15 = $.first_child(fragment_12);
+              {
+                var consequent_7 = ($$anchor5) => {
+                  var fragment_13 = $.comment();
+                  var node_16 = $.first_child(fragment_13);
+                  $.snippet(node_16, () => $$props.selectionMenuSnippet, () => $.get(menuProps));
+                  $.append($$anchor5, fragment_13);
+                };
+                $.if(
+                  node_15,
+                  ($$render) => {
+                    if ($$props.selectionMenuSnippet) $$render(consequent_7);
+                  },
+                  true
+                );
+              }
+              $.append($$anchor4, fragment_12);
+            };
+            $.if(node_12, ($$render) => {
+              if ($$props.selectionMenu) $$render(consequent_6);
+              else $$render(alternate_3, false);
+            });
+          }
+          $.append($$anchor3, fragment_9);
+        };
+        let $0 = $.derived(() => ({
+          origin: {
+            x: $.get(currentObject).rect.origin.x * $$props.scale,
+            y: $.get(currentObject).rect.origin.y * $$props.scale
+          },
+          size: {
+            width: $.get(currentObject).rect.size.width * $$props.scale,
+            height: $.get(currentObject).rect.size.height * $$props.scale
+          }
+        }));
+        CounterRotate($$anchor2, {
+          get rect() {
+            return $.get($0);
+          },
+          get rotation() {
+            return $$props.rotation;
+          },
+          children,
+          $$slots: { default: true }
+        });
+      }
+    };
+    $.if(node_11, ($$render) => {
+      if ($.get(shouldShowMenu)) $$render(consequent_8);
+    });
+  }
+  $.reset(div);
+  $.append($$anchor, div);
+  $.pop();
+}
+var root_1$9 = $.from_html(`<div></div>`);
+function Highlight($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, b) => {
+    var div = root_1$9();
+    $.attribute_effect(
+      div,
+      ($0) => ({
+        role: "button",
+        tabindex: $$props.onClick ? 0 : -1,
+        onpointerdown: $$props.onClick,
+        ontouchstart: $$props.onClick,
+        ...$0,
+        [$.STYLE]: {
+          position: "absolute",
+          left: `${($$props.rect ? $.get(b).origin.x - $$props.rect.origin.x : $.get(b).origin.x) * $$props.scale}px`,
+          top: `${($$props.rect ? $.get(b).origin.y - $$props.rect.origin.y : $.get(b).origin.y) * $$props.scale}px`,
+          width: `${$.get(b).size.width * $$props.scale}px`,
+          height: `${$.get(b).size.height * $$props.scale}px`,
+          background: color(),
+          opacity: opacity(),
+          "pointer-events": $$props.onClick ? "auto" : "none",
+          cursor: $$props.onClick ? "pointer" : "default",
+          "z-index": $$props.onClick ? 1 : void 0
+        }
+      }),
+      [
+        () => $$props.style ? Object.fromEntries(Object.entries($$props.style).map(([k, v]) => [`style:${k}`, v])) : {}
+      ]
+    );
+    $.append($$anchor2, div);
+  });
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root_1$8 = $.from_html(`<div><div></div></div>`);
+function Underline($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  const thickness = $.derived(() => 2 * $$props.scale);
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
+    var div = root_1$8();
+    $.attribute_effect(
+      div,
+      ($0) => ({
+        role: "button",
+        tabindex: $$props.onClick ? 0 : -1,
+        onpointerdown: $$props.onClick,
+        ontouchstart: $$props.onClick,
+        ...$0,
+        [$.STYLE]: {
+          position: "absolute",
+          left: `${($$props.rect ? $.get(r).origin.x - $$props.rect.origin.x : $.get(r).origin.x) * $$props.scale}px`,
+          top: `${($$props.rect ? $.get(r).origin.y - $$props.rect.origin.y : $.get(r).origin.y) * $$props.scale}px`,
+          width: `${$.get(r).size.width * $$props.scale}px`,
+          height: `${$.get(r).size.height * $$props.scale}px`,
+          background: "transparent",
+          "pointer-events": $$props.onClick ? "auto" : "none",
+          cursor: $$props.onClick ? "pointer" : "default",
+          "z-index": $$props.onClick ? 1 : 0
+        }
+      }),
+      [
+        () => $$props.style ? Object.fromEntries(Object.entries($$props.style).map(([k, v]) => [`style:${k}`, v])) : {}
+      ]
+    );
+    var div_1 = $.child(div);
+    let styles;
+    $.reset(div);
+    $.template_effect(() => styles = $.set_style(div_1, "", styles, {
+      position: "absolute",
+      left: "0",
+      bottom: "0",
+      width: "100%",
+      height: `${$.get(thickness) ?? ""}px`,
+      background: color(),
+      opacity: opacity(),
+      "pointer-events": "none"
+    }));
+    $.append($$anchor2, div);
+  });
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root_1$7 = $.from_html(`<div><div></div></div>`);
+function Strikeout($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  const thickness = $.derived(() => 2 * $$props.scale);
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
+    var div = root_1$7();
+    $.attribute_effect(
+      div,
+      ($0) => ({
+        role: "button",
+        tabindex: $$props.onClick ? 0 : -1,
+        onpointerdown: $$props.onClick,
+        ontouchstart: $$props.onClick,
+        ...$0,
+        [$.STYLE]: {
+          position: "absolute",
+          left: `${($$props.rect ? $.get(r).origin.x - $$props.rect.origin.x : $.get(r).origin.x) * $$props.scale}px`,
+          top: `${($$props.rect ? $.get(r).origin.y - $$props.rect.origin.y : $.get(r).origin.y) * $$props.scale}px`,
+          width: `${$.get(r).size.width * $$props.scale}px`,
+          height: `${$.get(r).size.height * $$props.scale}px`,
+          background: "transparent",
+          "pointer-events": $$props.onClick ? "auto" : "none",
+          cursor: $$props.onClick ? "pointer" : "default",
+          "z-index": $$props.onClick ? 1 : 0
+        }
+      }),
+      [
+        () => $$props.style ? Object.fromEntries(Object.entries($$props.style).map(([k, v]) => [`style:${k}`, v])) : {}
+      ]
+    );
+    var div_1 = $.child(div);
+    let styles;
+    $.reset(div);
+    $.template_effect(() => styles = $.set_style(div_1, "", styles, {
+      position: "absolute",
+      left: "0",
+      top: "50%",
+      width: "100%",
+      height: `${$.get(thickness) ?? ""}px`,
+      background: color(),
+      opacity: opacity(),
+      transform: "translateY(-50%)",
+      "pointer-events": "none"
+    }));
+    $.append($$anchor2, div);
+  });
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root_1$6 = $.from_html(`<div><div></div></div>`);
+function Squiggly($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  const amplitude = $.derived(() => 2 * $$props.scale);
+  const period = $.derived(() => 6 * $$props.scale);
+  const svg = $.derived(() => `<svg xmlns="http://www.w3.org/2000/svg" width="${$.get(period)}" height="${$.get(amplitude) * 2}" viewBox="0 0 ${$.get(period)} ${$.get(amplitude) * 2}">
+      <path d="M0 ${$.get(amplitude)} Q ${$.get(period) / 4} 0 ${$.get(period) / 2} ${$.get(amplitude)} T ${$.get(period)} ${$.get(amplitude)}"
+            fill="none" stroke="${color()}" stroke-width="${$.get(amplitude)}" stroke-linecap="round"/>
+    </svg>`);
+  const svgDataUri = $.derived(() => `url("data:image/svg+xml;utf8,${encodeURIComponent($.get(svg))}")`);
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
+    var div = root_1$6();
+    $.attribute_effect(
+      div,
+      ($0) => ({
+        role: "button",
+        tabindex: $$props.onClick ? 0 : -1,
+        onpointerdown: $$props.onClick,
+        ontouchstart: $$props.onClick,
+        ...$0,
+        [$.STYLE]: {
+          position: "absolute",
+          left: `${($$props.rect ? $.get(r).origin.x - $$props.rect.origin.x : $.get(r).origin.x) * $$props.scale}px`,
+          top: `${($$props.rect ? $.get(r).origin.y - $$props.rect.origin.y : $.get(r).origin.y) * $$props.scale}px`,
+          width: `${$.get(r).size.width * $$props.scale}px`,
+          height: `${$.get(r).size.height * $$props.scale}px`,
+          background: "transparent",
+          "pointer-events": $$props.onClick ? "auto" : "none",
+          cursor: $$props.onClick ? "pointer" : "default",
+          "z-index": $$props.onClick ? 1 : 0
+        }
+      }),
+      [
+        () => $$props.style ? Object.fromEntries(Object.entries($$props.style).map(([k, v]) => [`style:${k}`, v])) : {}
+      ]
+    );
+    var div_1 = $.child(div);
+    let styles;
+    $.reset(div);
+    $.template_effect(() => styles = $.set_style(div_1, "", styles, {
+      position: "absolute",
+      left: "0",
+      bottom: "0",
+      width: "100%",
+      height: `${$.get(amplitude) * 2}px`,
+      "background-image": $.get(svgDataUri),
+      "background-repeat": "repeat-x",
+      "background-size": `${$.get(period) ?? ""}px ${$.get(amplitude) * 2}px`,
+      opacity: opacity(),
+      "pointer-events": "none"
+    }));
+    $.append($$anchor2, div);
+  });
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root_1$5 = $.from_svg(`<path fill="none"></path>`);
+var root$9 = $.from_svg(`<svg></svg>`);
+function Ink($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1);
+  const paths = $.derived(() => $$props.inkList.map(({ points }) => {
+    let d = "";
+    for (let i = 0; i < points.length; i++) {
+      const { x, y } = points[i];
+      const lx = x - $$props.rect.origin.x;
+      const ly = y - $$props.rect.origin.y;
+      d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
+    }
+    return d.trim();
+  }));
+  const width = $.derived(() => $$props.rect.size.width * $$props.scale);
+  const height = $.derived(() => $$props.rect.size.height * $$props.scale);
+  var svg = root$9();
+  let styles;
+  $.each(svg, 21, () => $.get(paths), $.index, ($$anchor2, d) => {
+    var path = root_1$5();
+    path.__pointerdown = function(...$$args) {
+      var _a;
+      (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+    };
+    path.__touchstart = function(...$$args) {
+      var _a;
+      (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+    };
+    let styles_1;
+    $.template_effect(() => {
+      $.set_attribute(path, "d", $.get(d));
+      $.set_attribute(path, "opacity", opacity());
+      styles_1 = $.set_style(path, "", styles_1, {
+        cursor: $$props.isSelected ? "move" : "pointer",
+        "pointer-events": $$props.isSelected ? "none" : "visibleStroke",
+        stroke: color(),
+        "stroke-width": $$props.strokeWidth,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      });
+    });
+    $.append($$anchor2, path);
+  });
+  $.reset(svg);
+  $.template_effect(() => {
+    styles = $.set_style(svg, "position: absolute; z-index: 2; overflow: visible; pointer-events: none;", styles, { 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 ${$$props.rect.size.width} ${$$props.rect.size.height}`);
+  });
+  $.append($$anchor, svg);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+var root$8 = $.from_svg(`<svg><rect></rect></svg>`);
+function Square($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID);
+  const $$d = $.derived(() => {
+    const outerW = $$props.rect.size.width;
+    const outerH = $$props.rect.size.height;
+    const innerW = Math.max(outerW - $$props.strokeWidth, 0);
+    const innerH = Math.max(outerH - $$props.strokeWidth, 0);
+    return {
+      width: innerW,
+      height: innerH,
+      x: $$props.strokeWidth / 2,
+      y: $$props.strokeWidth / 2
+    };
+  }), width = $.derived(() => $.get($$d).width), height = $.derived(() => $.get($$d).height), x = $.derived(() => $.get($$d).x), y = $.derived(() => $.get($$d).y);
+  const svgWidth = $.derived(() => ($.get(width) + $$props.strokeWidth) * $$props.scale);
+  const svgHeight = $.derived(() => ($.get(height) + $$props.strokeWidth) * $$props.scale);
+  const dash = $.derived(() => {
+    var _a;
+    return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
+  });
+  var svg = root$8();
+  let styles;
+  var rect_1 = $.child(svg);
+  rect_1.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  rect_1.__touchstart = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles_1;
+  $.reset(svg);
+  $.template_effect(() => {
+    styles = $.set_style(svg, "position: absolute; pointer-events: none; z-index: 2;", styles, {
+      width: `${$.get(svgWidth)}px`,
+      height: `${$.get(svgHeight)}px`
+    });
+    $.set_attribute(svg, "width", $.get(svgWidth));
+    $.set_attribute(svg, "height", $.get(svgHeight));
+    $.set_attribute(svg, "viewBox", `0 0 ${$.get(width) + $$props.strokeWidth} ${$.get(height) + $$props.strokeWidth}`);
+    $.set_attribute(rect_1, "x", $.get(x));
+    $.set_attribute(rect_1, "y", $.get(y));
+    $.set_attribute(rect_1, "width", $.get(width));
+    $.set_attribute(rect_1, "height", $.get(height));
+    $.set_attribute(rect_1, "fill", color());
+    $.set_attribute(rect_1, "opacity", opacity());
+    styles_1 = $.set_style(rect_1, "", styles_1, {
+      cursor: $$props.isSelected ? "move" : "pointer",
+      "pointer-events": $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible",
+      stroke: $$props.strokeColor ?? color(),
+      "stroke-width": $$props.strokeWidth,
+      "stroke-dasharray": $.get(dash)
+    });
+  });
+  $.append($$anchor, svg);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+var root$7 = $.from_svg(`<svg><ellipse></ellipse></svg>`);
+function Circle($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID);
+  const $$d = $.derived(() => {
+    const outerW = $$props.rect.size.width;
+    const outerH = $$props.rect.size.height;
+    const innerW = Math.max(outerW - $$props.strokeWidth, 0);
+    const innerH = Math.max(outerH - $$props.strokeWidth, 0);
+    return {
+      width: outerW,
+      height: outerH,
+      // Centre of the fill sits strokeWidth/2 in from the edges
+      cx: $$props.strokeWidth / 2 + innerW / 2,
+      cy: $$props.strokeWidth / 2 + innerH / 2,
+      rx: innerW / 2,
+      ry: innerH / 2
+    };
+  }), width = $.derived(() => $.get($$d).width), height = $.derived(() => $.get($$d).height), cx = $.derived(() => $.get($$d).cx), cy = $.derived(() => $.get($$d).cy), rx = $.derived(() => $.get($$d).rx), ry = $.derived(() => $.get($$d).ry);
+  let svgWidth = $.derived(() => $.get(width) * $$props.scale);
+  let svgHeight = $.derived(() => $.get(height) * $$props.scale);
+  let peValue = $.derived(() => $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible");
+  var svg = root$7();
+  let styles;
+  var ellipse = $.child(svg);
+  ellipse.__pointerdown = (e) => {
+    var _a;
+    return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  ellipse.__touchstart = (e) => {
+    var _a;
+    return (_a = $$props.onClick) == null ? void 0 : _a.call($$props, e);
+  };
+  let styles_1;
+  $.reset(svg);
+  $.template_effect(
+    ($0) => {
+      $.set_attribute(svg, "svgWidth", $.get(svgWidth));
+      $.set_attribute(svg, "svgHeight", $.get(svgHeight));
+      $.set_attribute(svg, "viewBox", `0 0 ${$.get(width)} ${$.get(height)}`);
+      styles = $.set_style(svg, "", styles, {
+        position: "absolute",
+        width: `${$.get(svgWidth)}px`,
+        height: `${$.get(svgHeight)}px`,
+        "pointer-events": "none",
+        "z-index": "2"
+      });
+      $.set_attribute(ellipse, "cx", $.get(cx));
+      $.set_attribute(ellipse, "cy", $.get(cy));
+      $.set_attribute(ellipse, "rx", $.get(rx));
+      $.set_attribute(ellipse, "ry", $.get(ry));
+      $.set_attribute(ellipse, "fill", color());
+      $.set_attribute(ellipse, "opacity", opacity());
+      $.set_attribute(ellipse, "pointer-events", $.get(peValue));
+      $.set_attribute(ellipse, "stroke", $$props.strokeColor ?? color());
+      $.set_attribute(ellipse, "stroke-width", $$props.strokeWidth);
+      $.set_attribute(ellipse, "stroke-dasharray", $0);
+      styles_1 = $.set_style(ellipse, "", styles_1, { cursor: $$props.isSelected ? "move" : "pointer" });
+    },
+    [
+      () => {
+        var _a;
+        return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
+      }
+    ]
+  );
+  $.append($$anchor, svg);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+var root_1$4 = $.from_svg(`<path></path>`);
+var root_2$3 = $.from_svg(`<path></path>`);
+var root$6 = $.from_svg(`<svg><line></line><!><!></svg>`);
+function Line($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "transparent"), opacity = $.prop($$props, "opacity", 3, 1), strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID);
+  const x1 = $.derived(() => $$props.linePoints.start.x - $$props.rect.origin.x);
+  const y1 = $.derived(() => $$props.linePoints.start.y - $$props.rect.origin.y);
+  const x2 = $.derived(() => $$props.linePoints.end.x - $$props.rect.origin.x);
+  const y2 = $.derived(() => $$props.linePoints.end.y - $$props.rect.origin.y);
+  const endings = $.derived(() => {
+    var _a, _b;
+    const angle = Math.atan2($.get(y2) - $.get(y1), $.get(x2) - $.get(x1));
+    return {
+      start: patching.createEnding((_a = $$props.lineEndings) == null ? void 0 : _a.start, $$props.strokeWidth, angle + Math.PI, $.get(x1), $.get(y1)),
+      end: patching.createEnding((_b = $$props.lineEndings) == null ? void 0 : _b.end, $$props.strokeWidth, angle, $.get(x2), $.get(y2))
+    };
+  });
+  const width = $.derived(() => $$props.rect.size.width * $$props.scale);
+  const height = $.derived(() => $$props.rect.size.height * $$props.scale);
+  const dash = $.derived(() => {
+    var _a;
+    return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
+  });
+  var svg = root$6();
+  let styles;
+  var line = $.child(svg);
+  line.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  line.__touchstart = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles_1;
+  var node = $.sibling(line);
+  {
+    var consequent = ($$anchor2) => {
+      var path = root_1$4();
+      path.__pointerdown = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      path.__touchstart = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      let styles_2;
+      $.template_effect(() => {
+        $.set_attribute(path, "d", $.get(endings).start.d);
+        $.set_attribute(path, "transform", $.get(endings).start.transform);
+        $.set_attribute(path, "stroke", strokeColor());
+        $.set_attribute(path, "fill", $.get(endings).start.filled ? color() : "none");
+        styles_2 = $.set_style(path, "", styles_2, {
+          cursor: $$props.isSelected ? "move" : "pointer",
+          "stroke-width": $$props.strokeWidth,
+          "stroke-linecap": "butt",
+          "pointer-events": $$props.isSelected ? "none" : $.get(endings).start.filled ? "visible" : "visibleStroke",
+          "stroke-dasharray": $.get(dash)
+        });
+      });
+      $.append($$anchor2, path);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(endings).start) $$render(consequent);
+    });
+  }
+  var node_1 = $.sibling(node);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var path_1 = root_2$3();
+      path_1.__pointerdown = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      path_1.__touchstart = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      let styles_3;
+      $.template_effect(() => {
+        $.set_attribute(path_1, "d", $.get(endings).end.d);
+        $.set_attribute(path_1, "transform", $.get(endings).end.transform);
+        $.set_attribute(path_1, "stroke", strokeColor());
+        $.set_attribute(path_1, "fill", $.get(endings).end.filled ? color() : "none");
+        styles_3 = $.set_style(path_1, "", styles_3, {
+          cursor: $$props.isSelected ? "move" : "pointer",
+          "stroke-width": $$props.strokeWidth,
+          "stroke-linecap": "butt",
+          "pointer-events": $$props.isSelected ? "none" : $.get(endings).end.filled ? "visible" : "visibleStroke",
+          "stroke-dasharray": $.get(dash)
+        });
+      });
+      $.append($$anchor2, path_1);
+    };
+    $.if(node_1, ($$render) => {
+      if ($.get(endings).end) $$render(consequent_1);
+    });
+  }
+  $.reset(svg);
+  $.template_effect(() => {
+    styles = $.set_style(svg, "position: absolute; z-index: 2; overflow: visible; pointer-events: none;", styles, { 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 ${$$props.rect.size.width} ${$$props.rect.size.height}`);
+    $.set_attribute(line, "x1", $.get(x1));
+    $.set_attribute(line, "y1", $.get(y1));
+    $.set_attribute(line, "x2", $.get(x2));
+    $.set_attribute(line, "y2", $.get(y2));
+    $.set_attribute(line, "opacity", opacity());
+    styles_1 = $.set_style(line, "", styles_1, {
+      cursor: $$props.isSelected ? "move" : "pointer",
+      "pointer-events": $$props.isSelected ? "none" : "visibleStroke",
+      stroke: strokeColor(),
+      "stroke-width": $$props.strokeWidth,
+      "stroke-linecap": "butt",
+      "stroke-dasharray": $.get(dash)
+    });
+  });
+  $.append($$anchor, svg);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+var root_1$3 = $.from_svg(`<path></path>`);
+var root_2$2 = $.from_svg(`<path></path>`);
+var root$5 = $.from_svg(`<svg><path></path><!><!></svg>`);
+function Polyline($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "transparent"), strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1);
+  const localPts = $.derived(() => $$props.vertices.map(({ x, y }) => ({ x: x - $$props.rect.origin.x, y: y - $$props.rect.origin.y })));
+  const pathData = $.derived(() => {
+    if (!$.get(localPts).length) return "";
+    const [first, ...rest] = $.get(localPts);
+    return `M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y} `).join("").trim();
+  });
+  const endings = $.derived(() => {
+    var _a, _b;
+    if ($.get(localPts).length < 2) return { start: null, end: null };
+    const toAngle = (a, b) => Math.atan2(b.y - a.y, b.x - a.x);
+    const startRad = toAngle($.get(
+      localPts
+      // FROM first TO second
+    )[0], $.get(localPts)[1]);
+    const endRad = toAngle($.get(
+      localPts
+      // FROM second-to-last TO last
+    )[$.get(localPts).length - 2], $.get(localPts)[$.get(localPts).length - 1]);
+    const start = patching.createEnding(
+      (_a = $$props.lineEndings) == null ? void 0 : _a.start,
+      $$props.strokeWidth,
+      startRad + Math.PI,
+      // tip outward from start
+      $.get(localPts)[0].x,
+      $.get(localPts)[0].y
+    );
+    const end = patching.createEnding(
+      (_b = $$props.lineEndings) == null ? void 0 : _b.end,
+      $$props.strokeWidth,
+      endRad,
+      // tip in line direction
+      $.get(localPts)[$.get(localPts).length - 1].x,
+      $.get(localPts)[$.get(localPts).length - 1].y
+    );
+    return { start, end };
+  });
+  const width = $.derived(() => $$props.rect.size.width * $$props.scale);
+  const height = $.derived(() => $$props.rect.size.height * $$props.scale);
+  var svg = root$5();
+  let styles;
+  var path = $.child(svg);
+  path.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  path.__touchstart = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles_1;
+  var node = $.sibling(path);
+  {
+    var consequent = ($$anchor2) => {
+      var path_1 = root_1$3();
+      path_1.__pointerdown = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      path_1.__touchstart = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      let styles_2;
+      $.template_effect(() => {
+        $.set_attribute(path_1, "d", $.get(endings).start.d);
+        $.set_attribute(path_1, "transform", $.get(endings).start.transform);
+        $.set_attribute(path_1, "stroke", strokeColor());
+        $.set_attribute(path_1, "fill", $.get(endings).start.filled ? color() : "none");
+        styles_2 = $.set_style(path_1, "", styles_2, {
+          cursor: $$props.isSelected ? "move" : "pointer",
+          "stroke-width": $$props.strokeWidth,
+          "pointer-events": $$props.isSelected ? "none" : $.get(endings).start.filled ? "visible" : "visibleStroke",
+          "stroke-linecap": "butt"
+        });
+      });
+      $.append($$anchor2, path_1);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(endings).start) $$render(consequent);
+    });
+  }
+  var node_1 = $.sibling(node);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var path_2 = root_2$2();
+      path_2.__pointerdown = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      path_2.__touchstart = function(...$$args) {
+        var _a;
+        (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+      };
+      let styles_3;
+      $.template_effect(() => {
+        $.set_attribute(path_2, "d", $.get(endings).end.d);
+        $.set_attribute(path_2, "transform", $.get(endings).end.transform);
+        $.set_attribute(path_2, "stroke", strokeColor());
+        $.set_attribute(path_2, "fill", $.get(endings).end.filled ? color() : "none");
+        styles_3 = $.set_style(path_2, "", styles_3, {
+          cursor: $$props.isSelected ? "move" : "pointer",
+          "stroke-width": $$props.strokeWidth,
+          "pointer-events": $$props.isSelected ? "none" : $.get(endings).end.filled ? "visible" : "visibleStroke",
+          "stroke-linecap": "butt"
+        });
+      });
+      $.append($$anchor2, path_2);
+    };
+    $.if(node_1, ($$render) => {
+      if ($.get(endings).end) $$render(consequent_1);
+    });
+  }
+  $.reset(svg);
+  $.template_effect(() => {
+    styles = $.set_style(svg, "position: absolute; width: var(--w); height: var(--h); pointer-events: none; z-index: 2; overflow: visible;", styles, { "--w": `${$.get(width)}px`, "--h": `${$.get(height)}px` });
+    $.set_attribute(svg, "width", $.get(width));
+    $.set_attribute(svg, "height", $.get(height));
+    $.set_attribute(svg, "viewBox", `0 0 ${$$props.rect.size.width} ${$$props.rect.size.height}`);
+    $.set_attribute(path, "d", $.get(pathData));
+    $.set_attribute(path, "opacity", opacity());
+    styles_1 = $.set_style(path, "", styles_1, {
+      fill: "none",
+      stroke: strokeColor() ?? color(),
+      "stroke-width": $$props.strokeWidth,
+      cursor: $$props.isSelected ? "move" : "pointer",
+      "pointer-events": $$props.isSelected ? "none" : "visibleStroke",
+      "stroke-linecap": "butt",
+      "stroke-linejoin": "miter"
+    });
+  });
+  $.append($$anchor, svg);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+var root_1$2 = $.from_svg(`<path fill="none"></path>`);
+var root_2$1 = $.from_svg(`<rect></rect>`);
+var root$4 = $.from_svg(`<svg><path></path><!><!></svg>`);
+function Polygon($$anchor, $$props) {
+  $.push($$props, true);
+  let color = $.prop($$props, "color", 3, "transparent"), strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID), handleSize = $.prop($$props, "handleSize", 3, 14);
+  const allPoints = $.derived(() => $$props.currentVertex ? [...$$props.vertices, $$props.currentVertex] : $$props.vertices);
+  const localPts = $.derived(() => $.get(allPoints).map(({ x, y }) => ({ x: x - $$props.rect.origin.x, y: y - $$props.rect.origin.y })));
+  const pathData = $.derived(() => {
+    if (!$.get(localPts).length) return "";
+    const [first, ...rest] = $.get(localPts);
+    const isPreview = !!$$props.currentVertex;
+    return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
+  });
+  const isPreviewing = $.derived(() => !!$$props.currentVertex && $$props.vertices.length > 0);
+  const width = $.derived(() => $$props.rect.size.width * $$props.scale);
+  const height = $.derived(() => $$props.rect.size.height * $$props.scale);
+  const dash = $.derived(() => {
+    var _a;
+    return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
+  });
+  var svg = root$4();
+  let styles;
+  var path = $.child(svg);
+  path.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  path.__touchstart = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles_1;
+  var node = $.sibling(path);
+  {
+    var consequent = ($$anchor2) => {
+      var path_1 = root_1$2();
+      let styles_2;
+      $.template_effect(() => {
+        $.set_attribute(path_1, "d", `M ${$.get(localPts)[$.get(localPts).length - 1].x} ${$.get(localPts)[$.get(localPts).length - 1].y} L ${$.get(localPts)[0].x} ${$.get(localPts)[0].y}`);
+        styles_2 = $.set_style(path_1, "", styles_2, {
+          stroke: strokeColor(),
+          "stroke-width": $$props.strokeWidth,
+          "stroke-dasharray": "4,4",
+          opacity: 0.7
+        });
+      });
+      $.append($$anchor2, path_1);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isPreviewing) && $$props.vertices.length > 1) $$render(consequent);
+    });
+  }
+  var node_1 = $.sibling(node);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var rect_1 = root_2$1();
+      $.set_attribute(rect_1, "opacity", 0.4);
+      $.template_effect(() => {
+        $.set_attribute(rect_1, "x", $.get(localPts)[0].x - handleSize() / $$props.scale / 2);
+        $.set_attribute(rect_1, "y", $.get(localPts)[0].y - handleSize() / $$props.scale / 2);
+        $.set_attribute(rect_1, "width", handleSize() / $$props.scale);
+        $.set_attribute(rect_1, "height", handleSize() / $$props.scale);
+        $.set_attribute(rect_1, "fill", strokeColor());
+        $.set_attribute(rect_1, "stroke", strokeColor());
+        $.set_attribute(rect_1, "stroke-width", $$props.strokeWidth / 2);
+      });
+      $.append($$anchor2, rect_1);
+    };
+    $.if(node_1, ($$render) => {
+      if ($.get(isPreviewing) && $$props.vertices.length >= 2) $$render(consequent_1);
+    });
+  }
+  $.reset(svg);
+  $.template_effect(() => {
+    styles = $.set_style(svg, "position: absolute; z-index: 2; overflow: visible; pointer-events: none;", styles, { 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 ${$$props.rect.size.width} ${$$props.rect.size.height}`);
+    $.set_attribute(path, "d", $.get(pathData));
+    $.set_attribute(path, "opacity", opacity());
+    styles_1 = $.set_style(path, "", styles_1, {
+      fill: $$props.currentVertex ? "none" : color(),
+      stroke: strokeColor() ?? color(),
+      "stroke-width": $$props.strokeWidth,
+      cursor: $$props.isSelected ? "move" : "pointer",
+      "pointer-events": $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible",
+      "stroke-linecap": "butt",
+      "stroke-linejoin": "miter",
+      "stroke-dasharray": $.get(dash)
+    });
+  });
+  $.append($$anchor, svg);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+var root$3 = $.from_html(`<div><span tabindex="0"> </span></div>`);
+function FreeText($$anchor, $$props) {
+  $.push($$props, true);
+  const annotationCapability = useAnnotationCapability();
+  const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
+  let editorRef = null;
+  let isIOS = $.state(false);
+  $.user_effect(() => {
+    var _a;
+    if (!$$props.isEditing || !editorRef) return;
+    editorRef.focus();
+    const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+    if (!selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(editorRef);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  });
+  $.user_pre_effect(() => {
+    try {
+      const nav = navigator;
+      const ios = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && (nav == null ? void 0 : nav.maxTouchPoints) > 1;
+      $.set(isIOS, ios, true);
+    } catch {
+      $.set(isIOS, false);
+    }
+  });
+  function handleBlur() {
+    if (!$.get(annotationProvides) || !editorRef) return;
+    $.get(annotationProvides).updateAnnotation($$props.pageIndex, $$props.annotation.object.id, { contents: editorRef.innerText });
+  }
+  const computedFontPx = $.derived(() => $$props.annotation.object.fontSize * $$props.scale);
+  const MIN_IOS_FOCUS_FONT_PX = 16;
+  const needsComp = $.derived(() => $.get(isIOS) && $$props.isEditing && $.get(computedFontPx) > 0 && $.get(computedFontPx) < MIN_IOS_FOCUS_FONT_PX);
+  const adjustedFontPx = $.derived(() => $.get(needsComp) ? MIN_IOS_FOCUS_FONT_PX : $.get(computedFontPx));
+  const scaleComp = $.derived(() => $.get(needsComp) ? $.get(computedFontPx) / MIN_IOS_FOCUS_FONT_PX : 1);
+  const invScalePercent = $.derived(() => $.get(needsComp) ? 100 / $.get(scaleComp) : 100);
+  const outerW = $.derived(() => $$props.annotation.object.rect.size.width * $$props.scale);
+  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");
+  var div = root$3();
+  div.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  div.__touchstart = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles;
+  var span = $.child(div);
+  let styles_1;
+  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(outerW)}px`,
+        height: `${$.get(outerH)}px`,
+        "z-index": 2,
+        cursor: $$props.isSelected && !$$props.isEditing ? "move" : "default",
+        "pointer-events": $$props.isSelected && !$$props.isEditing ? "none" : "auto"
+      });
+      $.set_attribute(span, "contenteditable", $$props.isEditing);
+      styles_1 = $.set_style(span, "", styles_1, $0);
+      $.set_text(text, $$props.annotation.object.contents);
+    },
+    [
+      () => ({
+        display: "flex",
+        "flex-direction": "column",
+        "justify-content": $.get(justify),
+        color: $$props.annotation.object.fontColor,
+        "font-size": `${$.get(adjustedFontPx)}px`,
+        "font-family": standardFontCss($$props.annotation.object.fontFamily),
+        "text-align": textAlignmentToCss($$props.annotation.object.textAlign),
+        "background-color": $$props.annotation.object.backgroundColor,
+        opacity: $$props.annotation.object.opacity,
+        width: $.get(needsComp) ? `${$.get(invScalePercent)}%` : "100%",
+        height: $.get(needsComp) ? `${$.get(invScalePercent)}%` : "100%",
+        "line-height": "1.18",
+        overflow: "hidden",
+        cursor: $$props.isEditing ? "text" : "pointer",
+        outline: "none",
+        transform: $.get(needsComp) ? `scale(${$.get(scaleComp)})` : void 0,
+        "transform-origin": "top left"
+      })
+    ]
+  );
+  $.event("blur", span, handleBlur);
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+var root_1$1 = $.from_html(`<img/>`);
+function RenderAnnotation($$anchor, $$props) {
+  $.push($$props, true);
+  let scaleFactor = $.prop($$props, "scaleFactor", 3, 1), restProps = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "documentId",
+    "pageIndex",
+    "annotation",
+    "scaleFactor",
+    "style"
+  ]);
+  const annotationCapability = useAnnotationCapability();
+  let imageUrl = $.state(null);
+  let urlRef = null;
+  const $$d = $.derived(() => $$props.annotation.rect.size);
+  $.derived(() => $.get($$d).width);
+  $.derived(() => $.get($$d).height);
+  const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
+  $.user_effect(() => {
+    if ($.get(annotationProvides)) {
+      const task = $.get(annotationProvides).renderAnnotation({
+        pageIndex: $$props.pageIndex,
+        annotation: deepToRaw($$props.annotation),
+        options: { scaleFactor: scaleFactor(), dpr: window.devicePixelRatio }
+      });
+      task.wait(
+        (blob) => {
+          const url = URL.createObjectURL(blob);
+          $.set(imageUrl, url, true);
+          urlRef = url;
+        },
+        ignore
+      );
+      return () => {
+        if (urlRef) {
+          URL.revokeObjectURL(urlRef);
+          urlRef = null;
+        } else {
+          task.abort({
+            code: PdfErrorCode.Cancelled,
+            message: "canceled render task"
+          });
+        }
+      };
+    }
+  });
+  function handleImageLoad() {
+    if (urlRef) {
+      URL.revokeObjectURL(urlRef);
+      urlRef = null;
+    }
+  }
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var img = root_1$1();
+      $.attribute_effect(img, () => ({
+        alt: "",
+        src: $.get(imageUrl),
+        onload: handleImageLoad,
+        ...restProps,
+        style: $$props.style,
+        [$.STYLE]: { width: "100%", height: "100%", display: "block" }
+      }));
+      $.replay_events(img);
+      $.append($$anchor2, img);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(imageUrl)) $$render(consequent);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root$2 = $.from_html(`<div><!></div>`);
+function Stamp($$anchor, $$props) {
+  $.push($$props, true);
+  let annotationProp = $.derived(() => ({
+    ...$$props.annotation.object,
+    id: $$props.annotation.object.id
+  }));
+  var div = root$2();
+  let styles;
+  div.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  div.__touchstart = function(...$$args) {
+    var _a;
+    (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  var node = $.child(div);
+  RenderAnnotation(node, {
+    get documentId() {
+      return $$props.documentId;
+    },
+    get pageIndex() {
+      return $$props.pageIndex;
+    },
+    get annotation() {
+      return $.get(annotationProp);
+    },
+    get scaleFactor() {
+      return $$props.scale;
+    }
+  });
+  $.reset(div);
+  $.template_effect(() => styles = $.set_style(div, "position: absolute; width: 100%; height: 100%; z-index: 2;", styles, {
+    "pointer-events": $$props.isSelected ? "none" : "auto",
+    cursor: "pointer"
+  }));
+  $.append($$anchor, div);
+  $.pop();
+}
+$.delegate(["pointerdown", "touchstart"]);
+function Annotations($$anchor, $$props) {
+  $.push($$props, true);
+  let annotationsProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+  const annotationCapability = useAnnotationCapability();
+  const selectionCapability = useSelectionCapability();
+  const pointerHandlers = usePointerHandlers({ documentId: $$props.documentId, pageIndex: $$props.pageIndex });
+  let annotations = $.state($.proxy([]));
+  let selectionState = $.state(null);
+  let editingId = $.state(null);
+  const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
+  $.user_effect(() => {
+    if (!$.get(annotationProvides)) return;
+    const currentState = $.get(annotationProvides).getState();
+    $.set(annotations, getAnnotationsByPageIndex(currentState, $$props.pageIndex), true);
+    $.set(selectionState, getSelectedAnnotationByPageIndex(currentState, $$props.pageIndex), true);
+    const off = $.get(annotationProvides).onStateChange((state) => {
+      $.set(annotations, getAnnotationsByPageIndex(state, $$props.pageIndex), true);
+      $.set(selectionState, getSelectedAnnotationByPageIndex(state, $$props.pageIndex), true);
+    });
+    return () => off == null ? void 0 : off();
+  });
+  const handlers = {
+    onPointerDown: (_, pe) => {
+      if (pe.target === pe.currentTarget && $.get(annotationProvides)) {
+        $.get(annotationProvides).deselectAnnotation();
+        $.set(editingId, null);
+      }
+    }
+  };
+  $.user_effect(() => {
+    return pointerHandlers.register(handlers, { documentId: $$props.documentId });
+  });
+  function handleClick(e, annotation) {
+    e.stopPropagation();
+    if ($.get(annotationProvides) && selectionCapability.provides) {
+      $.get(annotationProvides).selectAnnotation($$props.pageIndex, annotation.object.id);
+      selectionCapability.provides.clear();
+      if (annotation.object.id !== $.get(editingId)) {
+        $.set(editingId, null);
+      }
+    }
+  }
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  $.each(node, 17, () => $.get(annotations), (annotation) => annotation.object.id, ($$anchor2, annotation) => {
+    const isSelected = $.derived(() => {
+      var _a;
+      return ((_a = $.get(selectionState)) == null ? void 0 : _a.object.id) === $.get(annotation).object.id;
+    });
+    const isEditing = $.derived(() => $.get(editingId) === $.get(annotation).object.id);
+    const tool = $.derived(() => {
+      var _a;
+      return (_a = $.get(annotationProvides)) == null ? void 0 : _a.findToolForAnnotation($.get(annotation).object);
+    });
+    const mixBlendMode = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Normal));
+    var fragment_1 = $.comment();
+    var node_1 = $.first_child(fragment_1);
+    {
+      var consequent = ($$anchor3) => {
+        {
+          const children = ($$anchor4, obj = $.noop) => {
+            Ink($$anchor4, $.spread_props(obj, {
+              get isSelected() {
+                return $.get(isSelected);
+              },
+              get scale() {
+                return $$props.scale;
+              },
+              onClick: (e) => handleClick(e, $.get(annotation))
+            }));
+          };
+          let $0 = $.derived(() => {
+            var _a;
+            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+          });
+          let $1 = $.derived(() => {
+            var _a;
+            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+          });
+          let $2 = $.derived(() => {
+            var _a;
+            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+          });
+          AnnotationContainer($$anchor3, $.spread_props(
+            {
+              get trackedAnnotation() {
+                return $.get(annotation);
+              },
+              get isSelected() {
+                return $.get(isSelected);
+              },
+              get isDraggable() {
+                return $.get($0);
+              },
+              get isResizable() {
+                return $.get($1);
+              },
+              get lockAspectRatio() {
+                return $.get($2);
+              },
+              get selectionMenu() {
+                return $$props.selectionMenu;
+              },
+              get selectionMenuSnippet() {
+                return $$props.selectionMenuSnippet;
+              },
+              onSelect: (e) => handleClick(e, $.get(annotation)),
+              get style() {
+                return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+              }
+            },
+            () => annotationsProps,
+            { children, $$slots: { default: true } }
+          ));
+        }
+      };
+      var alternate_10 = ($$anchor3) => {
+        var fragment_4 = $.comment();
+        var node_2 = $.first_child(fragment_4);
+        {
+          var consequent_1 = ($$anchor4) => {
+            {
+              const children = ($$anchor5, obj = $.noop) => {
+                Square($$anchor5, $.spread_props(obj, {
+                  get isSelected() {
+                    return $.get(isSelected);
+                  },
+                  get scale() {
+                    return $$props.scale;
+                  },
+                  onClick: (e) => handleClick(e, $.get(annotation))
+                }));
+              };
+              let $0 = $.derived(() => {
+                var _a;
+                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+              });
+              let $1 = $.derived(() => {
+                var _a;
+                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+              });
+              let $2 = $.derived(() => {
+                var _a;
+                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+              });
+              AnnotationContainer($$anchor4, $.spread_props(
+                {
+                  get trackedAnnotation() {
+                    return $.get(annotation);
+                  },
+                  get isSelected() {
+                    return $.get(isSelected);
+                  },
+                  get isDraggable() {
+                    return $.get($0);
+                  },
+                  get isResizable() {
+                    return $.get($1);
+                  },
+                  get lockAspectRatio() {
+                    return $.get($2);
+                  },
+                  get selectionMenu() {
+                    return $$props.selectionMenu;
+                  },
+                  get selectionMenuSnippet() {
+                    return $$props.selectionMenuSnippet;
+                  },
+                  onSelect: (e) => handleClick(e, $.get(annotation)),
+                  get style() {
+                    return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                  }
+                },
+                () => annotationsProps,
+                { children, $$slots: { default: true } }
+              ));
+            }
+          };
+          var alternate_9 = ($$anchor4) => {
+            var fragment_7 = $.comment();
+            var node_3 = $.first_child(fragment_7);
+            {
+              var consequent_2 = ($$anchor5) => {
+                {
+                  const children = ($$anchor6, obj = $.noop) => {
+                    Circle($$anchor6, $.spread_props(obj, {
+                      get isSelected() {
+                        return $.get(isSelected);
+                      },
+                      get scale() {
+                        return $$props.scale;
+                      },
+                      onClick: (e) => handleClick(e, $.get(annotation))
+                    }));
+                  };
+                  let $0 = $.derived(() => {
+                    var _a;
+                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+                  });
+                  let $1 = $.derived(() => {
+                    var _a;
+                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+                  });
+                  let $2 = $.derived(() => {
+                    var _a;
+                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                  });
+                  AnnotationContainer($$anchor5, $.spread_props(
+                    {
+                      get trackedAnnotation() {
+                        return $.get(annotation);
+                      },
+                      get isSelected() {
+                        return $.get(isSelected);
+                      },
+                      get isDraggable() {
+                        return $.get($0);
+                      },
+                      get isResizable() {
+                        return $.get($1);
+                      },
+                      get lockAspectRatio() {
+                        return $.get($2);
+                      },
+                      get selectionMenu() {
+                        return $$props.selectionMenu;
+                      },
+                      get selectionMenuSnippet() {
+                        return $$props.selectionMenuSnippet;
+                      },
+                      onSelect: (e) => handleClick(e, $.get(annotation)),
+                      get style() {
+                        return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                      }
+                    },
+                    () => annotationsProps,
+                    { children, $$slots: { default: true } }
+                  ));
+                }
+              };
+              var alternate_8 = ($$anchor5) => {
+                var fragment_10 = $.comment();
+                var node_4 = $.first_child(fragment_10);
+                {
+                  var consequent_3 = ($$anchor6) => {
+                    {
+                      const children = ($$anchor7, obj = $.noop) => {
+                        Underline($$anchor7, $.spread_props(obj, {
+                          get scale() {
+                            return $$props.scale;
+                          },
+                          onClick: (e) => handleClick(e, $.get(annotation))
+                        }));
+                      };
+                      let $0 = $.derived(() => {
+                        var _a;
+                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
+                      });
+                      let $1 = $.derived(() => {
+                        var _a;
+                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                      });
+                      let $2 = $.derived(() => {
+                        var _a;
+                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                      });
+                      AnnotationContainer($$anchor6, $.spread_props(
+                        {
+                          get trackedAnnotation() {
+                            return $.get(annotation);
+                          },
+                          get isSelected() {
+                            return $.get(isSelected);
+                          },
+                          get isDraggable() {
+                            return $.get($0);
+                          },
+                          get isResizable() {
+                            return $.get($1);
+                          },
+                          get lockAspectRatio() {
+                            return $.get($2);
+                          },
+                          get selectionMenu() {
+                            return $$props.selectionMenu;
+                          },
+                          get selectionMenuSnippet() {
+                            return $$props.selectionMenuSnippet;
+                          },
+                          onSelect: (e) => handleClick(e, $.get(annotation)),
+                          zIndex: 0,
+                          get style() {
+                            return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                          }
+                        },
+                        () => annotationsProps,
+                        { children, $$slots: { default: true } }
+                      ));
+                    }
+                  };
+                  var alternate_7 = ($$anchor6) => {
+                    var fragment_13 = $.comment();
+                    var node_5 = $.first_child(fragment_13);
+                    {
+                      var consequent_4 = ($$anchor7) => {
+                        {
+                          const children = ($$anchor8, obj = $.noop) => {
+                            Strikeout($$anchor8, $.spread_props(obj, {
+                              get scale() {
+                                return $$props.scale;
+                              },
+                              onClick: (e) => handleClick(e, $.get(annotation))
+                            }));
+                          };
+                          let $0 = $.derived(() => {
+                            var _a;
+                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
+                          });
+                          let $1 = $.derived(() => {
+                            var _a;
+                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                          });
+                          let $2 = $.derived(() => {
+                            var _a;
+                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                          });
+                          AnnotationContainer($$anchor7, $.spread_props(
+                            {
+                              get trackedAnnotation() {
+                                return $.get(annotation);
+                              },
+                              get isSelected() {
+                                return $.get(isSelected);
+                              },
+                              get isDraggable() {
+                                return $.get($0);
+                              },
+                              get isResizable() {
+                                return $.get($1);
+                              },
+                              get lockAspectRatio() {
+                                return $.get($2);
+                              },
+                              get selectionMenu() {
+                                return $$props.selectionMenu;
+                              },
+                              get selectionMenuSnippet() {
+                                return $$props.selectionMenuSnippet;
+                              },
+                              onSelect: (e) => handleClick(e, $.get(annotation)),
+                              zIndex: 0,
+                              get style() {
+                                return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                              }
+                            },
+                            () => annotationsProps,
+                            { children, $$slots: { default: true } }
+                          ));
+                        }
+                      };
+                      var alternate_6 = ($$anchor7) => {
+                        var fragment_16 = $.comment();
+                        var node_6 = $.first_child(fragment_16);
+                        {
+                          var consequent_5 = ($$anchor8) => {
+                            {
+                              const children = ($$anchor9, obj = $.noop) => {
+                                Squiggly($$anchor9, $.spread_props(obj, {
+                                  get scale() {
+                                    return $$props.scale;
+                                  },
+                                  onClick: (e) => handleClick(e, $.get(annotation))
+                                }));
+                              };
+                              let $0 = $.derived(() => {
+                                var _a;
+                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
+                              });
+                              let $1 = $.derived(() => {
+                                var _a;
+                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                              });
+                              let $2 = $.derived(() => {
+                                var _a;
+                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                              });
+                              AnnotationContainer($$anchor8, $.spread_props(
+                                {
+                                  get trackedAnnotation() {
+                                    return $.get(annotation);
+                                  },
+                                  get isSelected() {
+                                    return $.get(isSelected);
+                                  },
+                                  get isDraggable() {
+                                    return $.get($0);
+                                  },
+                                  get isResizable() {
+                                    return $.get($1);
+                                  },
+                                  get lockAspectRatio() {
+                                    return $.get($2);
+                                  },
+                                  get selectionMenu() {
+                                    return $$props.selectionMenu;
+                                  },
+                                  get selectionMenuSnippet() {
+                                    return $$props.selectionMenuSnippet;
+                                  },
+                                  onSelect: (e) => handleClick(e, $.get(annotation)),
+                                  zIndex: 0,
+                                  get style() {
+                                    return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                                  }
+                                },
+                                () => annotationsProps,
+                                { children, $$slots: { default: true } }
+                              ));
+                            }
+                          };
+                          var alternate_5 = ($$anchor8) => {
+                            var fragment_19 = $.comment();
+                            var node_7 = $.first_child(fragment_19);
+                            {
+                              var consequent_6 = ($$anchor9) => {
+                                {
+                                  const children = ($$anchor10, obj = $.noop) => {
+                                    Highlight($$anchor10, $.spread_props(obj, {
+                                      get scale() {
+                                        return $$props.scale;
+                                      },
+                                      onClick: (e) => handleClick(e, $.get(annotation))
+                                    }));
+                                  };
+                                  let $0 = $.derived(() => {
+                                    var _a;
+                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
+                                  });
+                                  let $1 = $.derived(() => {
+                                    var _a;
+                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                  });
+                                  let $2 = $.derived(() => {
+                                    var _a;
+                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                                  });
+                                  let $3 = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Multiply));
+                                  AnnotationContainer($$anchor9, $.spread_props(
+                                    {
+                                      get trackedAnnotation() {
+                                        return $.get(annotation);
+                                      },
+                                      get isSelected() {
+                                        return $.get(isSelected);
+                                      },
+                                      get isDraggable() {
+                                        return $.get($0);
+                                      },
+                                      get isResizable() {
+                                        return $.get($1);
+                                      },
+                                      get lockAspectRatio() {
+                                        return $.get($2);
+                                      },
+                                      onSelect: (e) => handleClick(e, $.get(annotation)),
+                                      zIndex: 0,
+                                      get selectionMenu() {
+                                        return $$props.selectionMenu;
+                                      },
+                                      get selectionMenuSnippet() {
+                                        return $$props.selectionMenuSnippet;
+                                      },
+                                      get style() {
+                                        return `mix-blend-mode: ${$.get($3) ?? ""}`;
+                                      }
+                                    },
+                                    () => annotationsProps,
+                                    { children, $$slots: { default: true } }
+                                  ));
+                                }
+                              };
+                              var alternate_4 = ($$anchor9) => {
+                                var fragment_22 = $.comment();
+                                var node_8 = $.first_child(fragment_22);
+                                {
+                                  var consequent_7 = ($$anchor10) => {
+                                    {
+                                      const children = ($$anchor11, obj = $.noop) => {
+                                        Line($$anchor11, $.spread_props(obj, {
+                                          get isSelected() {
+                                            return $.get(isSelected);
+                                          },
+                                          get scale() {
+                                            return $$props.scale;
+                                          },
+                                          onClick: (e) => handleClick(e, $.get(annotation))
+                                        }));
+                                      };
+                                      let $0 = $.derived(() => {
+                                        var _a;
+                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+                                      });
+                                      let $1 = $.derived(() => {
+                                        var _a;
+                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                      });
+                                      let $2 = $.derived(() => {
+                                        var _a;
+                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                                      });
+                                      AnnotationContainer($$anchor10, $.spread_props(
+                                        {
+                                          get trackedAnnotation() {
+                                            return $.get(annotation);
+                                          },
+                                          get isSelected() {
+                                            return $.get(isSelected);
+                                          },
+                                          get isDraggable() {
+                                            return $.get($0);
+                                          },
+                                          get isResizable() {
+                                            return $.get($1);
+                                          },
+                                          get lockAspectRatio() {
+                                            return $.get($2);
+                                          },
+                                          get selectionMenu() {
+                                            return $$props.selectionMenu;
+                                          },
+                                          get selectionMenuSnippet() {
+                                            return $$props.selectionMenuSnippet;
+                                          },
+                                          onSelect: (e) => handleClick(e, $.get(annotation)),
+                                          vertexConfig: {
+                                            extractVertices: (a) => [a.linePoints.start, a.linePoints.end],
+                                            transformAnnotation: (a, vertices) => ({ ...a, linePoints: { start: vertices[0], end: vertices[1] } })
+                                          },
+                                          get style() {
+                                            return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                                          }
+                                        },
+                                        () => annotationsProps,
+                                        { children, $$slots: { default: true } }
+                                      ));
+                                    }
+                                  };
+                                  var alternate_3 = ($$anchor10) => {
+                                    var fragment_25 = $.comment();
+                                    var node_9 = $.first_child(fragment_25);
+                                    {
+                                      var consequent_8 = ($$anchor11) => {
+                                        {
+                                          const children = ($$anchor12, obj = $.noop) => {
+                                            Polyline($$anchor12, $.spread_props(obj, {
+                                              get isSelected() {
+                                                return $.get(isSelected);
+                                              },
+                                              get scale() {
+                                                return $$props.scale;
+                                              },
+                                              onClick: (e) => handleClick(e, $.get(annotation))
+                                            }));
+                                          };
+                                          let $0 = $.derived(() => {
+                                            var _a;
+                                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+                                          });
+                                          let $1 = $.derived(() => {
+                                            var _a;
+                                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                          });
+                                          let $2 = $.derived(() => {
+                                            var _a;
+                                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                                          });
+                                          AnnotationContainer($$anchor11, $.spread_props(
+                                            {
+                                              get trackedAnnotation() {
+                                                return $.get(annotation);
+                                              },
+                                              get selectionMenu() {
+                                                return $$props.selectionMenu;
+                                              },
+                                              get selectionMenuSnippet() {
+                                                return $$props.selectionMenuSnippet;
+                                              },
+                                              get isDraggable() {
+                                                return $.get($0);
+                                              },
+                                              get isResizable() {
+                                                return $.get($1);
+                                              },
+                                              get lockAspectRatio() {
+                                                return $.get($2);
+                                              },
+                                              get isSelected() {
+                                                return $.get(isSelected);
+                                              },
+                                              onSelect: (e) => handleClick(e, $.get(annotation)),
+                                              vertexConfig: {
+                                                extractVertices: (a) => a.vertices,
+                                                transformAnnotation: (a, vertices) => ({ ...a, vertices })
+                                              },
+                                              get style() {
+                                                return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                                              }
+                                            },
+                                            () => annotationsProps,
+                                            { children, $$slots: { default: true } }
+                                          ));
+                                        }
+                                      };
+                                      var alternate_2 = ($$anchor11) => {
+                                        var fragment_28 = $.comment();
+                                        var node_10 = $.first_child(fragment_28);
+                                        {
+                                          var consequent_9 = ($$anchor12) => {
+                                            {
+                                              const children = ($$anchor13, obj = $.noop) => {
+                                                Polygon($$anchor13, $.spread_props(obj, {
+                                                  get isSelected() {
+                                                    return $.get(isSelected);
+                                                  },
+                                                  get scale() {
+                                                    return $$props.scale;
+                                                  },
+                                                  onClick: (e) => handleClick(e, $.get(annotation))
+                                                }));
+                                              };
+                                              let $0 = $.derived(() => {
+                                                var _a;
+                                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+                                              });
+                                              let $1 = $.derived(() => {
+                                                var _a;
+                                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                              });
+                                              let $2 = $.derived(() => {
+                                                var _a;
+                                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                                              });
+                                              AnnotationContainer($$anchor12, $.spread_props(
+                                                {
+                                                  get trackedAnnotation() {
+                                                    return $.get(annotation);
+                                                  },
+                                                  get isSelected() {
+                                                    return $.get(isSelected);
+                                                  },
+                                                  get isDraggable() {
+                                                    return $.get($0);
+                                                  },
+                                                  get isResizable() {
+                                                    return $.get($1);
+                                                  },
+                                                  get lockAspectRatio() {
+                                                    return $.get($2);
+                                                  },
+                                                  get selectionMenu() {
+                                                    return $$props.selectionMenu;
+                                                  },
+                                                  get selectionMenuSnippet() {
+                                                    return $$props.selectionMenuSnippet;
+                                                  },
+                                                  onSelect: (e) => handleClick(e, $.get(annotation)),
+                                                  vertexConfig: {
+                                                    extractVertices: (a) => a.vertices,
+                                                    transformAnnotation: (a, vertices) => ({ ...a, vertices })
+                                                  },
+                                                  get style() {
+                                                    return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                                                  }
+                                                },
+                                                () => annotationsProps,
+                                                { children, $$slots: { default: true } }
+                                              ));
+                                            }
+                                          };
+                                          var alternate_1 = ($$anchor12) => {
+                                            var fragment_31 = $.comment();
+                                            var node_11 = $.first_child(fragment_31);
+                                            {
+                                              var consequent_10 = ($$anchor13) => {
+                                                {
+                                                  const children = ($$anchor14, object = $.noop) => {
+                                                    {
+                                                      let $02 = $.derived(() => ({ ...$.get(annotation), object: object() }));
+                                                      FreeText($$anchor14, {
+                                                        get documentId() {
+                                                          return $$props.documentId;
+                                                        },
+                                                        get isSelected() {
+                                                          return $.get(isSelected);
+                                                        },
+                                                        get isEditing() {
+                                                          return $.get(isEditing);
+                                                        },
+                                                        get annotation() {
+                                                          return $.get($02);
+                                                        },
+                                                        get pageIndex() {
+                                                          return $$props.pageIndex;
+                                                        },
+                                                        get scale() {
+                                                          return $$props.scale;
+                                                        },
+                                                        onClick: (e) => handleClick(e, $.get(annotation))
+                                                      });
+                                                    }
+                                                  };
+                                                  let $0 = $.derived(() => {
+                                                    var _a;
+                                                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isEditing);
+                                                  });
+                                                  let $1 = $.derived(() => {
+                                                    var _a;
+                                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+                                                  });
+                                                  let $2 = $.derived(() => {
+                                                    var _a;
+                                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                                                  });
+                                                  let $3 = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Normal));
+                                                  AnnotationContainer($$anchor13, $.spread_props(
+                                                    {
+                                                      get trackedAnnotation() {
+                                                        return $.get(annotation);
+                                                      },
+                                                      get isSelected() {
+                                                        return $.get(isSelected);
+                                                      },
+                                                      get isDraggable() {
+                                                        return $.get($0);
+                                                      },
+                                                      get isResizable() {
+                                                        return $.get($1);
+                                                      },
+                                                      get lockAspectRatio() {
+                                                        return $.get($2);
+                                                      },
+                                                      get selectionMenu() {
+                                                        return $$props.selectionMenu;
+                                                      },
+                                                      get selectionMenuSnippet() {
+                                                        return $$props.selectionMenuSnippet;
+                                                      },
+                                                      onSelect: (e) => handleClick(e, $.get(annotation)),
+                                                      get style() {
+                                                        return `mix-blend-mode: ${$.get($3) ?? ""}`;
+                                                      },
+                                                      onDoubleClick: (e) => {
+                                                        e.stopPropagation();
+                                                        $.set(editingId, $.get(annotation).object.id, true);
+                                                      }
+                                                    },
+                                                    () => annotationsProps,
+                                                    { children, $$slots: { default: true } }
+                                                  ));
+                                                }
+                                              };
+                                              var alternate = ($$anchor13) => {
+                                                var fragment_34 = $.comment();
+                                                var node_12 = $.first_child(fragment_34);
+                                                {
+                                                  var consequent_11 = ($$anchor14) => {
+                                                    {
+                                                      const children = ($$anchor15, _object = $.noop) => {
+                                                        Stamp($$anchor15, {
+                                                          get documentId() {
+                                                            return $$props.documentId;
+                                                          },
+                                                          get isSelected() {
+                                                            return $.get(isSelected);
+                                                          },
+                                                          get annotation() {
+                                                            return $.get(annotation);
+                                                          },
+                                                          get pageIndex() {
+                                                            return $$props.pageIndex;
+                                                          },
+                                                          get scale() {
+                                                            return $$props.scale;
+                                                          },
+                                                          onClick: (e) => handleClick(e, $.get(annotation))
+                                                        });
+                                                      };
+                                                      let $0 = $.derived(() => {
+                                                        var _a;
+                                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+                                                      });
+                                                      let $1 = $.derived(() => {
+                                                        var _a;
+                                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+                                                      });
+                                                      let $2 = $.derived(() => {
+                                                        var _a;
+                                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+                                                      });
+                                                      AnnotationContainer($$anchor14, $.spread_props(
+                                                        {
+                                                          get trackedAnnotation() {
+                                                            return $.get(annotation);
+                                                          },
+                                                          get isSelected() {
+                                                            return $.get(isSelected);
+                                                          },
+                                                          get isDraggable() {
+                                                            return $.get($0);
+                                                          },
+                                                          get isResizable() {
+                                                            return $.get($1);
+                                                          },
+                                                          get lockAspectRatio() {
+                                                            return $.get($2);
+                                                          },
+                                                          get selectionMenu() {
+                                                            return $$props.selectionMenu;
+                                                          },
+                                                          get selectionMenuSnippet() {
+                                                            return $$props.selectionMenuSnippet;
+                                                          },
+                                                          onSelect: (e) => handleClick(e, $.get(annotation)),
+                                                          get style() {
+                                                            return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                                                          }
+                                                        },
+                                                        () => annotationsProps,
+                                                        { children, $$slots: { default: true } }
+                                                      ));
+                                                    }
+                                                  };
+                                                  $.if(
+                                                    node_12,
+                                                    ($$render) => {
+                                                      if (isStamp($.get(annotation))) $$render(consequent_11);
+                                                    },
+                                                    true
+                                                  );
+                                                }
+                                                $.append($$anchor13, fragment_34);
+                                              };
+                                              $.if(
+                                                node_11,
+                                                ($$render) => {
+                                                  if (isFreeText($.get(annotation))) $$render(consequent_10);
+                                                  else $$render(alternate, false);
+                                                },
+                                                true
+                                              );
+                                            }
+                                            $.append($$anchor12, fragment_31);
+                                          };
+                                          $.if(
+                                            node_10,
+                                            ($$render) => {
+                                              if (isPolygon($.get(annotation))) $$render(consequent_9);
+                                              else $$render(alternate_1, false);
+                                            },
+                                            true
+                                          );
+                                        }
+                                        $.append($$anchor11, fragment_28);
+                                      };
+                                      $.if(
+                                        node_9,
+                                        ($$render) => {
+                                          if (isPolyline($.get(annotation))) $$render(consequent_8);
+                                          else $$render(alternate_2, false);
+                                        },
+                                        true
+                                      );
+                                    }
+                                    $.append($$anchor10, fragment_25);
+                                  };
+                                  $.if(
+                                    node_8,
+                                    ($$render) => {
+                                      if (isLine($.get(annotation))) $$render(consequent_7);
+                                      else $$render(alternate_3, false);
+                                    },
+                                    true
+                                  );
+                                }
+                                $.append($$anchor9, fragment_22);
+                              };
+                              $.if(
+                                node_7,
+                                ($$render) => {
+                                  if (isHighlight($.get(annotation))) $$render(consequent_6);
+                                  else $$render(alternate_4, false);
+                                },
+                                true
+                              );
+                            }
+                            $.append($$anchor8, fragment_19);
+                          };
+                          $.if(
+                            node_6,
+                            ($$render) => {
+                              if (isSquiggly($.get(annotation))) $$render(consequent_5);
+                              else $$render(alternate_5, false);
+                            },
+                            true
+                          );
+                        }
+                        $.append($$anchor7, fragment_16);
+                      };
+                      $.if(
+                        node_5,
+                        ($$render) => {
+                          if (isStrikeout($.get(annotation))) $$render(consequent_4);
+                          else $$render(alternate_6, false);
+                        },
+                        true
+                      );
+                    }
+                    $.append($$anchor6, fragment_13);
+                  };
+                  $.if(
+                    node_4,
+                    ($$render) => {
+                      if (isUnderline($.get(annotation))) $$render(consequent_3);
+                      else $$render(alternate_7, false);
+                    },
+                    true
+                  );
+                }
+                $.append($$anchor5, fragment_10);
+              };
+              $.if(
+                node_3,
+                ($$render) => {
+                  if (isCircle($.get(annotation))) $$render(consequent_2);
+                  else $$render(alternate_8, false);
+                },
+                true
+              );
+            }
+            $.append($$anchor4, fragment_7);
+          };
+          $.if(
+            node_2,
+            ($$render) => {
+              if (isSquare($.get(annotation))) $$render(consequent_1);
+              else $$render(alternate_9, false);
+            },
+            true
+          );
+        }
+        $.append($$anchor3, fragment_4);
+      };
+      $.if(node_1, ($$render) => {
+        if (isInk($.get(annotation))) $$render(consequent);
+        else $$render(alternate_10, false);
+      });
+    }
+    $.append($$anchor2, fragment_1);
+  });
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root_2 = $.from_html(`<div><!></div>`);
+var root_4 = $.from_html(`<div><!></div>`);
+var root_6 = $.from_html(`<div><!></div>`);
+var root_8 = $.from_html(`<div><!></div>`);
+function TextMarkup($$anchor, $$props) {
+  $.push($$props, true);
+  const selectionCapability = useSelectionCapability();
+  const annotationCapability = useAnnotationCapability();
+  let rects = $.state($.proxy([]));
+  let boundingRect = $.state(null);
+  let activeTool = $.state(null);
+  const selectionProvides = $.derived(() => selectionCapability.provides ? selectionCapability.provides.forDocument($$props.documentId) : null);
+  const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
+  $.user_effect(() => {
+    if (!$.get(selectionProvides)) return;
+    const off = $.get(selectionProvides).onSelectionChange(() => {
+      $.set(rects, $.get(selectionProvides).getHighlightRectsForPage($$props.pageIndex), true);
+      $.set(boundingRect, $.get(selectionProvides).getBoundingRectForPage($$props.pageIndex), true);
+    });
+    return off;
+  });
+  $.user_effect(() => {
+    if (!$.get(annotationProvides)) return;
+    $.set(activeTool, $.get(annotationProvides).getActiveTool(), true);
+    const off = $.get(annotationProvides).onActiveToolChange((tool) => {
+      $.set(activeTool, tool, true);
+    });
+    return off;
+  });
+  const mixBlendMode = $.derived(() => {
+    var _a, _b, _c, _d;
+    return ((_b = (_a = $.get(activeTool)) == null ? void 0 : _a.defaults) == null ? void 0 : _b.blendMode) ? blendModeToCss($.get(activeTool).defaults.blendMode) : ((_d = (_c = $.get(activeTool)) == null ? void 0 : _c.defaults) == null ? void 0 : _d.type) === PdfAnnotationSubtype.HIGHLIGHT ? blendModeToCss(PdfBlendMode.Multiply) : blendModeToCss(PdfBlendMode.Normal);
+  });
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var fragment_1 = $.comment();
+      var node_1 = $.first_child(fragment_1);
+      {
+        var consequent = ($$anchor3) => {
+          var div = root_2();
+          let styles;
+          var node_2 = $.child(div);
+          {
+            let $0 = $.derived(() => {
+              var _a;
+              return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+            });
+            let $1 = $.derived(() => {
+              var _a;
+              return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
+            });
+            Underline(node_2, {
+              get color() {
+                return $.get($0);
+              },
+              get opacity() {
+                return $.get($1);
+              },
+              get segmentRects() {
+                return $.get(rects);
+              },
+              get scale() {
+                return $$props.scale;
+              }
+            });
+          }
+          $.reset(div);
+          $.template_effect(() => styles = $.set_style(div, "", styles, {
+            "mix-blend-mode": $.get(mixBlendMode),
+            "pointer-events": "none",
+            position: "absolute",
+            inset: "0"
+          }));
+          $.append($$anchor3, div);
+        };
+        var alternate_2 = ($$anchor3) => {
+          var fragment_2 = $.comment();
+          var node_3 = $.first_child(fragment_2);
+          {
+            var consequent_1 = ($$anchor4) => {
+              var div_1 = root_4();
+              let styles_1;
+              var node_4 = $.child(div_1);
+              {
+                let $0 = $.derived(() => {
+                  var _a;
+                  return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+                });
+                let $1 = $.derived(() => {
+                  var _a;
+                  return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
+                });
+                Highlight(node_4, {
+                  get color() {
+                    return $.get($0);
+                  },
+                  get opacity() {
+                    return $.get($1);
+                  },
+                  get segmentRects() {
+                    return $.get(rects);
+                  },
+                  get scale() {
+                    return $$props.scale;
+                  }
+                });
+              }
+              $.reset(div_1);
+              $.template_effect(() => styles_1 = $.set_style(div_1, "", styles_1, {
+                "mix-blend-mode": $.get(mixBlendMode),
+                "pointer-events": "none",
+                position: "absolute",
+                inset: "0"
+              }));
+              $.append($$anchor4, div_1);
+            };
+            var alternate_1 = ($$anchor4) => {
+              var fragment_3 = $.comment();
+              var node_5 = $.first_child(fragment_3);
+              {
+                var consequent_2 = ($$anchor5) => {
+                  var div_2 = root_6();
+                  let styles_2;
+                  var node_6 = $.child(div_2);
+                  {
+                    let $0 = $.derived(() => {
+                      var _a;
+                      return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+                    });
+                    let $1 = $.derived(() => {
+                      var _a;
+                      return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
+                    });
+                    Strikeout(node_6, {
+                      get color() {
+                        return $.get($0);
+                      },
+                      get opacity() {
+                        return $.get($1);
+                      },
+                      get segmentRects() {
+                        return $.get(rects);
+                      },
+                      get scale() {
+                        return $$props.scale;
+                      }
+                    });
+                  }
+                  $.reset(div_2);
+                  $.template_effect(() => styles_2 = $.set_style(div_2, "", styles_2, {
+                    "mix-blend-mode": $.get(mixBlendMode),
+                    "pointer-events": "none",
+                    position: "absolute",
+                    inset: "0"
+                  }));
+                  $.append($$anchor5, div_2);
+                };
+                var alternate = ($$anchor5) => {
+                  var fragment_4 = $.comment();
+                  var node_7 = $.first_child(fragment_4);
+                  {
+                    var consequent_3 = ($$anchor6) => {
+                      var div_3 = root_8();
+                      let styles_3;
+                      var node_8 = $.child(div_3);
+                      {
+                        let $0 = $.derived(() => {
+                          var _a;
+                          return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+                        });
+                        let $1 = $.derived(() => {
+                          var _a;
+                          return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
+                        });
+                        Squiggly(node_8, {
+                          get color() {
+                            return $.get($0);
+                          },
+                          get opacity() {
+                            return $.get($1);
+                          },
+                          get segmentRects() {
+                            return $.get(rects);
+                          },
+                          get scale() {
+                            return $$props.scale;
+                          }
+                        });
+                      }
+                      $.reset(div_3);
+                      $.template_effect(() => styles_3 = $.set_style(div_3, "", styles_3, {
+                        "mix-blend-mode": $.get(mixBlendMode),
+                        "pointer-events": "none",
+                        position: "absolute",
+                        inset: "0"
+                      }));
+                      $.append($$anchor6, div_3);
+                    };
+                    $.if(
+                      node_7,
+                      ($$render) => {
+                        if ($.get(activeTool).defaults.type === PdfAnnotationSubtype.SQUIGGLY) $$render(consequent_3);
+                      },
+                      true
+                    );
+                  }
+                  $.append($$anchor5, fragment_4);
+                };
+                $.if(
+                  node_5,
+                  ($$render) => {
+                    if ($.get(activeTool).defaults.type === PdfAnnotationSubtype.STRIKEOUT) $$render(consequent_2);
+                    else $$render(alternate, false);
+                  },
+                  true
+                );
+              }
+              $.append($$anchor4, fragment_3);
+            };
+            $.if(
+              node_3,
+              ($$render) => {
+                if ($.get(activeTool).defaults.type === PdfAnnotationSubtype.HIGHLIGHT) $$render(consequent_1);
+                else $$render(alternate_1, false);
+              },
+              true
+            );
+          }
+          $.append($$anchor3, fragment_2);
+        };
+        $.if(node_1, ($$render) => {
+          if ($.get(activeTool).defaults.type === PdfAnnotationSubtype.UNDERLINE) $$render(consequent);
+          else $$render(alternate_2, false);
+        });
+      }
+      $.append($$anchor2, fragment_1);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(boundingRect) && $.get(activeTool) && $.get(activeTool).defaults) $$render(consequent_4);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.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>`);
+function PreviewRenderer($$anchor, $$props) {
+  $.push($$props, true);
+  const bounds = $.derived(() => $$props.preview.bounds);
+  const style = $.derived(() => ({
+    left: $.get(bounds).origin.x * $$props.scale,
+    top: $.get(bounds).origin.y * $$props.scale,
+    width: $.get(bounds).size.width * $$props.scale,
+    height: $.get(bounds).size.height * $$props.scale
+  }));
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root_1();
+      let styles;
+      var node_1 = $.child(div);
+      Circle(node_1, $.spread_props(
+        {
+          isSelected: false,
+          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"
+      }));
+      $.append($$anchor2, div);
+    };
+    var alternate_5 = ($$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_4 = ($$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_3 = ($$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_2 = ($$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_1 = ($$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(() => styles_5 = $.set_style(div_5, "", styles_5, {
+                            position: "absolute",
+                            left: `${$.get(style).left ?? ""}px`,
+                            top: `${$.get(style).top ?? ""}px`,
+                            width: `${$.get(style).width ?? ""}px`,
+                            height: `${$.get(style).height ?? ""}px`,
+                            "pointer-events": "none",
+                            "z-index": "10"
+                          }));
+                          $.append($$anchor7, div_5);
+                        };
+                        var alternate = ($$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);
+                            };
+                            $.if(
+                              node_12,
+                              ($$render) => {
+                                if ($$props.preview.type === PdfAnnotationSubtype.FREETEXT) $$render(consequent_6);
+                              },
+                              true
+                            );
+                          }
+                          $.append($$anchor7, fragment_6);
+                        };
+                        $.if(
+                          node_10,
+                          ($$render) => {
+                            if ($$props.preview.type === PdfAnnotationSubtype.INK) $$render(consequent_5);
+                            else $$render(alternate, false);
+                          },
+                          true
+                        );
+                      }
+                      $.append($$anchor6, fragment_5);
+                    };
+                    $.if(
+                      node_8,
+                      ($$render) => {
+                        if ($$props.preview.type === PdfAnnotationSubtype.LINE) $$render(consequent_4);
+                        else $$render(alternate_1, false);
+                      },
+                      true
+                    );
+                  }
+                  $.append($$anchor5, fragment_4);
+                };
+                $.if(
+                  node_6,
+                  ($$render) => {
+                    if ($$props.preview.type === PdfAnnotationSubtype.POLYLINE) $$render(consequent_3);
+                    else $$render(alternate_2, false);
+                  },
+                  true
+                );
+              }
+              $.append($$anchor4, fragment_3);
+            };
+            $.if(
+              node_4,
+              ($$render) => {
+                if ($$props.preview.type === PdfAnnotationSubtype.POLYGON) $$render(consequent_2);
+                else $$render(alternate_3, false);
+              },
+              true
+            );
+          }
+          $.append($$anchor3, fragment_2);
+        };
+        $.if(
+          node_2,
+          ($$render) => {
+            if ($$props.preview.type === PdfAnnotationSubtype.SQUARE) $$render(consequent_1);
+            else $$render(alternate_4, false);
+          },
+          true
+        );
+      }
+      $.append($$anchor2, fragment_1);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.preview.type === PdfAnnotationSubtype.CIRCLE) $$render(consequent);
+      else $$render(alternate_5, false);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root$1 = $.from_html(`<input type="file"/> <canvas></canvas> <!>`, 1);
+function AnnotationPaintLayer($$anchor, $$props) {
+  $.push($$props, true);
+  const annotationPlugin = useAnnotationPlugin();
+  let previews = $.state($.proxy(/* @__PURE__ */ new Map()));
+  let fileInputRef = $.state(null);
+  let canvasRef = $.state(null);
+  const services = {
+    requestFile: ({ accept, onFile }) => {
+      if (!$.get(fileInputRef)) return;
+      const input = $.get(fileInputRef);
+      input.accept = accept;
+      input.onchange = (e) => {
+        var _a;
+        const file = (_a = e.target.files) == null ? void 0 : _a[0];
+        if (file) {
+          onFile(file);
+          input.value = "";
+        }
+      };
+      input.click();
+    },
+    processImage: ({ source, maxWidth, maxHeight, onComplete }) => {
+      const canvas = $.get(canvasRef);
+      if (!canvas || !canvas.getContext) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const img = new Image();
+      img.crossOrigin = "Anonymous";
+      img.onload = () => {
+        let { naturalWidth: width, naturalHeight: height } = img;
+        const scaleX = maxWidth ? maxWidth / width : 1;
+        const scaleY = maxHeight ? maxHeight / height : 1;
+        const scaleFactor = Math.min(scaleX, scaleY, 1);
+        const finalWidth = width * scaleFactor;
+        const finalHeight = height * scaleFactor;
+        canvas.width = finalWidth;
+        canvas.height = finalHeight;
+        ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
+        const imageData = ctx.getImageData(0, 0, finalWidth, finalHeight);
+        if (typeof source !== "string") URL.revokeObjectURL(img.src);
+        onComplete({ imageData, width: finalWidth, height: finalHeight });
+      };
+      img.src = typeof source === "string" ? source : URL.createObjectURL(source);
+    }
+  };
+  $.user_effect(() => {
+    if (!annotationPlugin.plugin) return;
+    return annotationPlugin.plugin.registerPageHandlers($$props.documentId, $$props.pageIndex, $$props.scale, {
+      services,
+      onPreview: (toolId, state) => {
+        $.set(previews, new Map($.get(previews)), true);
+        if (state) {
+          $.get(previews).set(toolId, state);
+        } else {
+          $.get(previews).delete(toolId);
+        }
+      }
+    });
+  });
+  var fragment = root$1();
+  var input_1 = $.first_child(fragment);
+  $.set_style(input_1, "", {}, { display: "none" });
+  $.bind_this(input_1, ($$value) => $.set(fileInputRef, $$value), () => $.get(fileInputRef));
+  var canvas_1 = $.sibling(input_1, 2);
+  $.set_style(canvas_1, "", {}, { display: "none" });
+  $.bind_this(canvas_1, ($$value) => $.set(canvasRef, $$value), () => $.get(canvasRef));
+  var node = $.sibling(canvas_1, 2);
+  $.each(node, 17, () => Array.from($.get(previews).entries()), ([toolId, preview]) => toolId, ($$anchor2, $$item) => {
+    var $$array = $.derived(() => $.to_array($.get($$item), 2));
+    let preview = () => $.get($$array)[1];
+    PreviewRenderer($$anchor2, {
+      get preview() {
+        return preview();
+      },
+      get scale() {
+        return $$props.scale;
+      }
+    });
+  });
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root = $.from_html(`<div><!> <!> <!></div>`);
+function AnnotationLayer($$anchor, $$props) {
+  $.push($$props, true);
+  let restProps = $.rest_props($$props, [
+    "$$slots",
+    "$$events",
+    "$$legacy",
+    "style",
+    "documentId",
+    "pageIndex",
+    "scale",
+    "rotation",
+    "selectionMenu",
+    "selectionMenuSnippet",
+    "resizeUI",
+    "vertexUI",
+    "selectionOutlineColor",
+    "customAnnotationRenderer"
+  ]);
+  const documentState = useDocumentState(() => $$props.documentId);
+  const page = $.derived(() => {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = documentState == null ? void 0 : documentState.current) == null ? void 0 : _a.document) == null ? void 0 : _b.pages) == null ? void 0 : _c[$$props.pageIndex];
+  });
+  const pageWidth = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $.get(page)) == null ? void 0 : _a.size) == null ? void 0 : _b.width) ?? 0;
+  });
+  const pageHeight = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $.get(page)) == null ? void 0 : _a.size) == null ? void 0 : _b.height) ?? 0;
+  });
+  const actualScale = $.derived(() => {
+    var _a;
+    return $$props.scale !== void 0 ? $$props.scale : ((_a = documentState == null ? void 0 : documentState.current) == null ? void 0 : _a.scale) ?? 1;
+  });
+  const actualRotation = $.derived(() => {
+    var _a;
+    return $$props.rotation !== void 0 ? $$props.rotation : ((_a = documentState == null ? void 0 : documentState.current) == null ? void 0 : _a.rotation) ?? Rotation.Degree0;
+  });
+  var div = root();
+  $.attribute_effect(div, ($0) => ({ id: "annotation-layer", ...$0, ...restProps }), [
+    () => $$props.style ? Object.fromEntries(Object.entries($$props.style).map(([k, v]) => [`style:${k}`, v])) : {}
+  ]);
+  var node = $.child(div);
+  Annotations(node, {
+    get documentId() {
+      return $$props.documentId;
+    },
+    get selectionMenu() {
+      return $$props.selectionMenu;
+    },
+    get selectionMenuSnippet() {
+      return $$props.selectionMenuSnippet;
+    },
+    get pageIndex() {
+      return $$props.pageIndex;
+    },
+    get scale() {
+      return $.get(actualScale);
+    },
+    get rotation() {
+      return $.get(actualRotation);
+    },
+    get pageWidth() {
+      return $.get(pageWidth);
+    },
+    get pageHeight() {
+      return $.get(pageHeight);
+    },
+    get resizeUI() {
+      return $$props.resizeUI;
+    },
+    get vertexUI() {
+      return $$props.vertexUI;
+    },
+    get selectionOutlineColor() {
+      return $$props.selectionOutlineColor;
+    },
+    get customAnnotationRenderer() {
+      return $$props.customAnnotationRenderer;
+    }
+  });
+  var node_1 = $.sibling(node, 2);
+  TextMarkup(node_1, {
+    get documentId() {
+      return $$props.documentId;
+    },
+    get pageIndex() {
+      return $$props.pageIndex;
+    },
+    get scale() {
+      return $.get(actualScale);
+    }
+  });
+  var node_2 = $.sibling(node_1, 2);
+  AnnotationPaintLayer(node_2, {
+    get documentId() {
+      return $$props.documentId;
+    },
+    get pageIndex() {
+      return $$props.pageIndex;
+    },
+    get scale() {
+      return $.get(actualScale);
+    }
+  });
+  $.reset(div);
+  $.append($$anchor, div);
+  $.pop();
+}
+export {
+  AnnotationContainer,
+  AnnotationLayer,
+  AnnotationPaintLayer,
+  Annotations,
+  Circle,
+  FreeText,
+  Highlight,
+  Ink,
+  Line,
+  Polygon,
+  Polyline,
+  PreviewRenderer,
+  RenderAnnotation,
+  Square,
+  Squiggly,
+  Stamp,
+  Strikeout,
+  TextMarkup,
+  Underline,
+  useAnnotation,
+  useAnnotationCapability,
+  useAnnotationPlugin
+};
+//# sourceMappingURL=index.js.map