@embedpdf/plugin-annotation 2.6.2 → 2.7.0

package/dist/vue/index.js

@@ -1,12 +1,60 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { AnnotationPlugin, initialDocumentState, inferRotationCenterFromRects, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, isInk, isSquare, isCircle, isLine, isPolyline, isPolygon, isFreeText, isStamp, isUnderline, isStrikeout, isSquiggly, isHighlight, isLink, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, inferRotationCenterFromRects, patching, resolveInteractionProp, getAnnotationsByPageIndex, getSelectedAnnotationIds, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
-import { ref, toValue, watch, computed, defineComponent, shallowRef, toRaw, watchEffect, useSlots, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, createCommentVNode, unref, renderSlot, normalizeProps, mergeProps, renderList, createBlock, withCtx, resolveDynamicComponent, Teleport, toDisplayString, onMounted, onUnmounted, createVNode, createSlots, guardReactiveProps, provide, inject, markRaw } from "vue";
+import { defineComponent, ref, watchEffect, openBlock, createElementBlock, normalizeStyle, createCommentVNode, toValue, watch, computed, shallowRef, toRaw, useSlots, createElementVNode, Fragment, unref, renderSlot, normalizeProps, mergeProps, createBlock, renderList, withCtx, resolveDynamicComponent, Teleport, toDisplayString, markRaw, provide, inject, onUnmounted, onMounted, createVNode, createSlots, guardReactiveProps } from "vue";
 import { useInteractionHandles, useDoublePressProps, CounterRotate, deepToRaw } from "@embedpdf/utils/vue";
-import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
-import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfBlendMode, blendModeToCss, PdfAnnotationSubtype } from "@embedpdf/models";
+import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
+import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
+const _hoisted_1$b = ["src"];
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
+  __name: "appearance-image",
+  props: {
+    appearance: {},
+    style: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const imageUrl = ref(null);
+    const urlRef = ref(null);
+    watchEffect((onCleanup) => {
+      const url = URL.createObjectURL(props.appearance.data);
+      imageUrl.value = url;
+      urlRef.value = url;
+      onCleanup(() => {
+        if (urlRef.value) {
+          URL.revokeObjectURL(urlRef.value);
+          urlRef.value = null;
+        }
+      });
+    });
+    const handleImageLoad = () => {
+      if (urlRef.value) {
+        URL.revokeObjectURL(urlRef.value);
+        urlRef.value = null;
+      }
+    };
+    return (_ctx, _cache) => {
+      return imageUrl.value ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        src: imageUrl.value,
+        alt: "",
+        draggable: "false",
+        onLoad: handleImageLoad,
+        style: normalizeStyle({
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          display: "block",
+          pointerEvents: "none",
+          userSelect: "none",
+          ...__props.style
+        })
+      }, null, 44, _hoisted_1$b)) : createCommentVNode("", true);
+    };
+  }
+});
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
 const useAnnotation = (documentId) => {
@@ -39,11 +87,11 @@ const useAnnotation = (documentId) => {
 };
 const _hoisted_1$a = ["width", "height", "stroke"];
 const _hoisted_2$8 = ["width", "height", "stroke"];
-const __default__ = {
+const __default__$d = {
   inheritAttrs: false
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  ...__default__$d,
   __name: "annotation-container",
   props: {
     scale: {},
@@ -54,6 +102,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     pageHeight: {},
     trackedAnnotation: {},
     isSelected: { type: Boolean },
+    isEditing: { type: Boolean, default: false },
     isMultiSelected: { type: Boolean, default: false },
     isDraggable: { type: Boolean },
     isResizable: { type: Boolean },
@@ -64,6 +113,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     outlineOffset: { default: 1 },
     onDoubleClick: {},
     onSelect: {},
+    appearance: {},
     zIndex: { default: 1 },
     selectionOutlineColor: { default: "#007ACC" },
     selectionOutline: {},
@@ -148,6 +198,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const liveRotation = ref(null);
     const cursorScreen = ref(null);
     const isHandleHovered = ref(false);
+    const gestureActive = ref(false);
     const { provides: annotationCapability } = useAnnotationCapability();
     const { plugin: annotationPlugin } = useAnnotationPlugin();
     const permissions = useDocumentPermissions(props.documentId);
@@ -286,6 +337,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           if (event.state === "start") {
             gestureBaseRectRef.value = props.trackedAnnotation.object.unrotatedRect ?? props.trackedAnnotation.object.rect;
             gestureBaseRef.value = currentObject.value;
+            if (type === "resize" || type === "vertex-edit") {
+              gestureActive.value = true;
+            }
             if (type === "move") {
               plugin.startDrag(props.documentId, { annotationIds: [id], pageSize });
             } else if (type === "resize") {
@@ -344,6 +398,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             return;
           }
           if (event.state === "end") {
+            gestureActive.value = false;
             gestureBaseRectRef.value = null;
             gestureBaseRef.value = null;
             if (type === "move") plugin.commitDrag(props.documentId);
@@ -434,6 +489,12 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     );
     const guideLength = computed(() => Math.max(300, Math.max(aabbWidth.value, aabbHeight.value) + 80));
     const rotationIconSize = computed(() => Math.round(ROTATION_SIZE.value * 0.6));
+    const apActive = computed(
+      () => {
+        var _a;
+        return !!((_a = props.appearance) == null ? void 0 : _a.normal) && !gestureActive.value && !props.isEditing && !props.trackedAnnotation.dictMode;
+      }
+    );
     const contentsStyle = { display: "contents" };
     const outerAABBStyle = computed(() => ({
       position: "absolute",
@@ -550,6 +611,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     }));
     const slots = useSlots();
     return (_ctx, _cache) => {
+      var _a;
       return openBlock(), createElementBlock("div", {
         "data-no-interaction": "",
         style: contentsStyle
@@ -615,8 +677,16 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ], 16))
           ], 32)) : createCommentVNode("", true),
           createElementVNode("div", mergeProps({ ...effectiveIsDraggable.value && __props.isSelected ? unref(dragProps) : {}, ...unref(doubleProps) }, { style: innerRotatedStyle.value }), [
-            renderSlot(_ctx.$slots, "default", { annotation: childObject.value }),
-            __props.isSelected && effectiveIsResizable.value && !rotationActive.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(resize), ({ key, style, ...handle }) => {
+            renderSlot(_ctx.$slots, "default", {
+              annotation: childObject.value,
+              appearanceActive: apActive.value
+            }),
+            ((_a = __props.appearance) == null ? void 0 : _a.normal) ? (openBlock(), createBlock(_sfc_main$z, {
+              key: 0,
+              appearance: __props.appearance.normal,
+              style: normalizeStyle({ display: apActive.value ? "block" : "none" })
+            }, null, 8, ["appearance", "style"])) : createCommentVNode("", true),
+            __props.isSelected && effectiveIsResizable.value && !rotationActive.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(resize), ({ key, style, ...handle }) => {
               return openBlock(), createElementBlock(Fragment, { key }, [
                 unref(slots)["resize-handle"] ? renderSlot(_ctx.$slots, "resize-handle", mergeProps({
                   key: 0,
@@ -633,7 +703,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                 }), null, 16))
               ], 64);
             }), 128)) : createCommentVNode("", true),
-            __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && !rotationActive.value && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
+            __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && !rotationActive.value && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
               return openBlock(), createElementBlock(Fragment, { key }, [
                 unref(slots)["vertex-handle"] ? renderSlot(_ctx.$slots, "vertex-handle", mergeProps({
                   key: 0,
@@ -687,8 +757,8 @@ const _hoisted_1$9 = {
   "data-no-interaction": ""
 };
 const _hoisted_2$7 = ["width", "height", "stroke"];
-const _hoisted_3$4 = ["width", "height", "stroke"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_3$7 = ["width", "height", "stroke"];
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "group-selection-box",
   props: {
     documentId: {},
@@ -1172,7 +1242,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               }, [..._cache[3] || (_cache[3] = [
                 createElementVNode("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }, null, -1),
                 createElementVNode("path", { d: "M21 3v5h-5" }, null, -1)
-              ])], 8, _hoisted_3$4))
+              ])], 8, _hoisted_3$7))
             ], 16))
           ], 32)) : createCommentVNode("", true),
           createElementVNode("div", mergeProps(
@@ -1227,10 +1297,175 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const RendererRegistryKey = Symbol(
+  "AnnotationRendererRegistry"
+);
+function createRendererRegistry() {
+  const renderers = shallowRef([]);
+  return {
+    register(entries) {
+      const ids = new Set(entries.map((e) => e.id));
+      renderers.value = [...renderers.value.filter((r) => !ids.has(r.id)), ...entries];
+      return () => {
+        renderers.value = renderers.value.filter((r) => !entries.some((e) => e.id === r.id));
+      };
+    },
+    getAll() {
+      return renderers.value;
+    }
+  };
+}
+function provideRendererRegistry() {
+  const registry = createRendererRegistry();
+  provide(RendererRegistryKey, registry);
+  return registry;
+}
+function useRendererRegistry() {
+  return inject(RendererRegistryKey, null);
+}
+function useRegisterRenderers(entries) {
+  const registry = useRendererRegistry();
+  if (!registry) return;
+  const unregister = registry.register(entries);
+  onUnmounted(unregister);
+}
+function createRenderer(entry) {
+  return {
+    id: entry.id,
+    matches: entry.matches,
+    component: markRaw(entry.component),
+    vertexConfig: entry.vertexConfig,
+    zIndex: entry.zIndex,
+    containerStyle: entry.containerStyle,
+    interactionDefaults: entry.interactionDefaults,
+    useAppearanceStream: entry.useAppearanceStream,
+    isDraggable: entry.isDraggable,
+    onDoubleClick: entry.onDoubleClick,
+    selectOverride: entry.selectOverride,
+    hideSelectionMenu: entry.hideSelectionMenu
+  };
+}
 const _hoisted_1$8 = ["width", "height", "viewBox"];
-const _hoisted_2$6 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
-  __name: "circle",
+const _hoisted_2$6 = ["d", "stroke-width"];
+const _hoisted_3$6 = ["d", "opacity"];
+const __default__$c = { inheritAttrs: false };
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  ...__default__$c,
+  __name: "ink",
+  props: {
+    isSelected: { type: Boolean },
+    strokeColor: {},
+    opacity: { default: 1 },
+    strokeWidth: {},
+    inkList: {},
+    rect: {},
+    scale: {},
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const MIN_HIT_AREA_SCREEN_PX = 20;
+    const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#000000");
+    const paths = computed(() => {
+      return props.inkList.map(({ points }) => {
+        let d = "";
+        points.forEach(({ x, y }, 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 = computed(() => props.rect.size.width * props.scale);
+    const height = computed(() => props.rect.size.height * props.scale);
+    const hitStrokeWidth = computed(
+      () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${width.value}px`,
+          height: `${height.value}px`,
+          pointerEvents: "none",
+          zIndex: 2,
+          overflow: "visible"
+        }),
+        width: width.value,
+        height: height.value,
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(paths.value, (d, i) => {
+          return openBlock(), createElementBlock("path", {
+            key: `hit-${i}`,
+            d,
+            fill: "none",
+            stroke: "transparent",
+            "stroke-width": hitStrokeWidth.value,
+            onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+            (...args) => __props.onClick && __props.onClick(...args)),
+            onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+            (...args) => __props.onClick && __props.onClick(...args)),
+            style: normalizeStyle({
+              cursor: __props.isSelected ? "move" : "pointer",
+              pointerEvents: __props.isSelected ? "none" : "visibleStroke",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            })
+          }, null, 44, _hoisted_2$6);
+        }), 128)),
+        !__props.appearanceActive ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(paths.value, (d, i) => {
+          return openBlock(), createElementBlock("path", {
+            key: `vis-${i}`,
+            d,
+            fill: "none",
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: resolvedColor.value,
+              strokeWidth: __props.strokeWidth,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            })
+          }, null, 12, _hoisted_3$6);
+        }), 128)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$8);
+    };
+  }
+});
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
+  __name: "ink-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$w, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _hoisted_1$7 = ["width", "height", "viewBox"];
+const _hoisted_2$5 = ["x", "y", "width", "height", "stroke-width"];
+const _hoisted_3$5 = ["x", "y", "width", "height", "fill", "opacity"];
+const __default__$b = { inheritAttrs: false };
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
+  ...__default__$b,
+  __name: "square",
   props: {
     isSelected: { type: Boolean },
     color: { default: "#000000" },
@@ -1241,9 +1476,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     strokeDashArray: {},
     rect: {},
     scale: {},
-    onClick: {}
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
   },
   setup(__props) {
+    const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
     const geometry = computed(() => {
       const outerW = props.rect.size.width;
@@ -1251,16 +1488,17 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       const innerW = Math.max(outerW - props.strokeWidth, 0);
       const innerH = Math.max(outerH - props.strokeWidth, 0);
       return {
-        width: outerW,
-        height: outerH,
-        cx: props.strokeWidth / 2 + innerW / 2,
-        cy: props.strokeWidth / 2 + innerH / 2,
-        rx: innerW / 2,
-        ry: innerH / 2
+        width: innerW,
+        height: innerH,
+        x: props.strokeWidth / 2,
+        y: props.strokeWidth / 2
       };
     });
-    const svgWidth = computed(() => geometry.value.width * props.scale);
-    const svgHeight = computed(() => geometry.value.height * props.scale);
+    const svgWidth = computed(() => (geometry.value.width + props.strokeWidth) * props.scale);
+    const svgHeight = computed(() => (geometry.value.height + props.strokeWidth) * props.scale);
+    const hitStrokeWidth = computed(
+      () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
+    );
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("svg", {
@@ -1273,208 +1511,200 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         }),
         width: svgWidth.value,
         height: svgHeight.value,
-        viewBox: `0 0 ${geometry.value.width} ${geometry.value.height}`
+        viewBox: `0 0 ${geometry.value.width + __props.strokeWidth} ${geometry.value.height + __props.strokeWidth}`,
+        overflow: "visible"
       }, [
-        createElementVNode("ellipse", {
-          cx: geometry.value.cx,
-          cy: geometry.value.cy,
-          rx: geometry.value.rx,
-          ry: geometry.value.ry,
-          fill: __props.color,
-          opacity: __props.opacity,
+        createElementVNode("rect", {
+          x: geometry.value.x,
+          y: geometry.value.y,
+          width: geometry.value.width,
+          height: geometry.value.height,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
-            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
+          })
+        }, null, 44, _hoisted_2$5),
+        !__props.appearanceActive ? (openBlock(), createElementBlock("rect", {
+          key: 0,
+          x: geometry.value.x,
+          y: geometry.value.y,
+          width: geometry.value.width,
+          height: geometry.value.height,
+          fill: __props.color,
+          opacity: __props.opacity,
+          style: normalizeStyle({
+            pointerEvents: "none",
             stroke: __props.strokeColor ?? __props.color,
             strokeWidth: __props.strokeWidth,
             ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
               strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
             }
           })
-        }, null, 44, _hoisted_2$6)
-      ], 12, _hoisted_1$8);
+        }, null, 12, _hoisted_3$5)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$7);
     };
   }
 });
-const _hoisted_1$7 = ["contenteditable"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
-  __name: "free-text",
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
+  __name: "square-renderer",
   props: {
+    annotation: {},
+    currentObject: {},
     isSelected: { type: Boolean },
     isEditing: { type: Boolean },
-    annotation: {},
+    scale: {},
     pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$u, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _hoisted_1$6 = ["width", "height", "viewBox"];
+const _hoisted_2$4 = ["cx", "cy", "rx", "ry", "stroke-width"];
+const _hoisted_3$4 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
+const __default__$a = { inheritAttrs: false };
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
+  ...__default__$a,
+  __name: "circle",
+  props: {
+    isSelected: { type: Boolean },
+    color: { default: "#000000" },
+    strokeColor: {},
+    opacity: { default: 1 },
+    strokeWidth: {},
+    strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
+    strokeDashArray: {},
+    rect: {},
     scale: {},
-    onClick: { type: Function }
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
   },
   setup(__props) {
+    const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
-    const editorRef = ref(null);
-    const { provides: annotationProvides } = useAnnotationCapability();
-    const isIOS = ref(false);
-    onMounted(() => {
-      try {
-        const nav = navigator;
-        isIOS.value = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && (nav == null ? void 0 : nav.maxTouchPoints) > 1;
-      } catch {
-        isIOS.value = false;
-      }
-    });
-    watch(
-      () => props.isEditing,
-      (editing) => {
-        if (editing && editorRef.value) {
-          const editor = editorRef.value;
-          editor.focus();
-          const selection = window.getSelection();
-          if (selection) {
-            const range = document.createRange();
-            range.selectNodeContents(editor);
-            range.collapse(false);
-            selection.removeAllRanges();
-            selection.addRange(range);
-          }
-        }
-      }
-    );
-    const handleBlur = () => {
-      if (!annotationProvides.value || !editorRef.value) return;
-      annotationProvides.value.updateAnnotation(props.pageIndex, props.annotation.object.id, {
-        contents: editorRef.value.innerText
-      });
-    };
-    const editorStyle = computed(() => {
-      const { object: anno } = props.annotation;
-      const computedFontPx = anno.fontSize * props.scale;
-      const MIN_IOS_FOCUS_FONT_PX = 16;
-      const needsComp = isIOS.value && props.isEditing && computedFontPx > 0 && computedFontPx < MIN_IOS_FOCUS_FONT_PX;
-      const adjustedFontPx = needsComp ? MIN_IOS_FOCUS_FONT_PX : computedFontPx;
-      const scaleComp = needsComp ? computedFontPx / MIN_IOS_FOCUS_FONT_PX : 1;
-      const invScalePercent = needsComp ? 100 / scaleComp : 100;
+    const geometry = computed(() => {
+      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 {
-        color: anno.fontColor,
-        fontSize: `${adjustedFontPx}px`,
-        ...standardFontCssProperties(anno.fontFamily),
-        textAlign: textAlignmentToCss(anno.textAlign),
-        flexDirection: "column",
-        justifyContent: anno.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : anno.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
-        display: "flex",
-        backgroundColor: anno.color ?? anno.backgroundColor,
-        opacity: anno.opacity,
-        width: needsComp ? `${invScalePercent}%` : "100%",
-        height: needsComp ? `${invScalePercent}%` : "100%",
-        lineHeight: "1.18",
-        overflow: "hidden",
-        cursor: props.isEditing ? "text" : "pointer",
-        outline: "none",
-        transform: needsComp ? `scale(${scaleComp})` : void 0,
-        transformOrigin: "top left"
+        width: outerW,
+        height: outerH,
+        cx: props.strokeWidth / 2 + innerW / 2,
+        cy: props.strokeWidth / 2 + innerH / 2,
+        rx: innerW / 2,
+        ry: innerH / 2
       };
     });
+    const svgWidth = computed(() => geometry.value.width * props.scale);
+    const svgHeight = computed(() => geometry.value.height * props.scale);
+    const hitStrokeWidth = computed(
+      () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      var _a;
+      return openBlock(), createElementBlock("svg", {
         style: normalizeStyle({
           position: "absolute",
-          width: `${__props.annotation.object.rect.size.width * __props.scale}px`,
-          height: `${__props.annotation.object.rect.size.height * __props.scale}px`,
-          cursor: __props.isSelected && !__props.isEditing ? "move" : "default",
-          pointerEvents: __props.isSelected && !__props.isEditing ? "none" : "auto",
+          width: svgWidth.value,
+          height: svgHeight.value,
+          pointerEvents: "none",
           zIndex: 2
         }),
-        onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-        (...args) => __props.onClick && __props.onClick(...args)),
-        onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-        (...args) => __props.onClick && __props.onClick(...args))
+        width: svgWidth.value,
+        height: svgHeight.value,
+        viewBox: `0 0 ${geometry.value.width} ${geometry.value.height}`,
+        overflow: "visible"
       }, [
-        createElementVNode("span", {
-          ref_key: "editorRef",
-          ref: editorRef,
-          onBlur: handleBlur,
-          tabindex: "0",
-          style: normalizeStyle(editorStyle.value),
-          contenteditable: __props.isEditing
-        }, toDisplayString(__props.annotation.object.contents), 45, _hoisted_1$7)
-      ], 36);
+        createElementVNode("ellipse", {
+          cx: geometry.value.cx,
+          cy: geometry.value.cy,
+          rx: geometry.value.rx,
+          ry: geometry.value.ry,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
+          style: normalizeStyle({
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
+          })
+        }, null, 44, _hoisted_2$4),
+        !__props.appearanceActive ? (openBlock(), createElementBlock("ellipse", {
+          key: 0,
+          cx: geometry.value.cx,
+          cy: geometry.value.cy,
+          rx: geometry.value.rx,
+          ry: geometry.value.ry,
+          fill: __props.color,
+          opacity: __props.opacity,
+          style: normalizeStyle({
+            pointerEvents: "none",
+            stroke: __props.strokeColor ?? __props.color,
+            strokeWidth: __props.strokeWidth,
+            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+            }
+          })
+        }, null, 12, _hoisted_3$4)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$6);
     };
   }
 });
-const _hoisted_1$6 = ["width", "height", "viewBox"];
-const _hoisted_2$5 = ["d", "opacity"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
-  __name: "ink",
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  __name: "circle-renderer",
   props: {
+    annotation: {},
+    currentObject: {},
     isSelected: { type: Boolean },
-    strokeColor: {},
-    opacity: { default: 1 },
-    strokeWidth: {},
-    inkList: {},
-    rect: {},
+    isEditing: { type: Boolean },
     scale: {},
-    onClick: {}
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
   },
   setup(__props) {
-    const props = __props;
-    const resolvedColor = computed(() => props.strokeColor ?? "#000000");
-    const paths = computed(() => {
-      return props.inkList.map(({ points }) => {
-        let d = "";
-        points.forEach(({ x, y }, 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 = computed(() => props.rect.size.width * props.scale);
-    const height = computed(() => props.rect.size.height * props.scale);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", {
-        style: normalizeStyle({
-          position: "absolute",
-          width: `${width.value}px`,
-          height: `${height.value}px`,
-          pointerEvents: "none",
-          zIndex: 2,
-          overflow: "visible"
-        }),
-        width: width.value,
-        height: height.value,
-        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(paths.value, (d, i) => {
-          return openBlock(), createElementBlock("path", {
-            key: i,
-            d,
-            fill: "none",
-            opacity: __props.opacity,
-            onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-            (...args) => __props.onClick && __props.onClick(...args)),
-            onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-            (...args) => __props.onClick && __props.onClick(...args)),
-            style: normalizeStyle({
-              cursor: __props.isSelected ? "move" : "pointer",
-              pointerEvents: __props.isSelected ? "none" : "visibleStroke",
-              stroke: resolvedColor.value,
-              strokeWidth: __props.strokeWidth,
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            })
-          }, null, 44, _hoisted_2$5);
-        }), 128))
-      ], 12, _hoisted_1$6);
+      return openBlock(), createBlock(_sfc_main$s, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
     };
   }
 });
 const _hoisted_1$5 = ["width", "height", "viewBox"];
-const _hoisted_2$4 = ["x1", "y1", "x2", "y2", "opacity"];
-const _hoisted_3$3 = ["d", "transform", "stroke", "fill"];
-const _hoisted_4$3 = ["d", "transform", "stroke", "fill"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_2$3 = ["x1", "y1", "x2", "y2", "stroke-width"];
+const _hoisted_3$3 = ["d", "transform", "stroke-width"];
+const _hoisted_4$3 = ["d", "transform", "stroke-width"];
+const _hoisted_5$2 = ["x1", "y1", "x2", "y2", "opacity"];
+const _hoisted_6$1 = ["d", "transform", "stroke", "fill"];
+const _hoisted_7$1 = ["d", "transform", "stroke", "fill"];
+const __default__$9 = { inheritAttrs: false };
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
   __name: "line",
   props: {
     color: { default: "transparent" },
@@ -1488,9 +1718,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     lineEndings: {},
     scale: {},
     onClick: {},
-    isSelected: { type: Boolean }
+    isSelected: { type: Boolean },
+    appearanceActive: { type: Boolean, default: false }
   },
   setup(__props) {
+    const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
     const localLine = computed(() => ({
       x1: props.linePoints.start.x - props.rect.origin.x,
@@ -1513,22 +1745,13 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         end: patching.createEnding((_b = props.lineEndings) == null ? void 0 : _b.end, props.strokeWidth, angle, x2, y2)
       };
     });
-    const getEndingStyle = (ending) => {
-      var _a;
-      return {
-        cursor: props.isSelected ? "move" : "pointer",
-        strokeWidth: props.strokeWidth,
-        strokeLinecap: "butt",
-        pointerEvents: props.isSelected ? "none" : ending.filled ? "visible" : "visibleStroke",
-        ...props.strokeStyle === PdfAnnotationBorderStyle.DASHED && {
-          strokeDasharray: (_a = props.strokeDashArray) == null ? void 0 : _a.join(",")
-        }
-      };
-    };
     const width = computed(() => props.rect.size.width * props.scale);
     const height = computed(() => props.rect.size.height * props.scale);
+    const hitStrokeWidth = computed(
+      () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
+    );
     return (_ctx, _cache) => {
-      var _a;
+      var _a, _b, _c;
       return openBlock(), createElementBlock("svg", {
         style: normalizeStyle({
           position: "absolute",
@@ -1547,7 +1770,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           y1: localLine.value.y1,
           x2: localLine.value.x2,
           y2: localLine.value.y2,
-          opacity: __props.opacity,
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
@@ -1555,258 +1779,151 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : "visibleStroke",
-            stroke: __props.strokeColor,
-            strokeWidth: __props.strokeWidth,
-            strokeLinecap: "butt",
-            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-            }
+            strokeLinecap: "butt"
           })
-        }, null, 44, _hoisted_2$4),
+        }, null, 44, _hoisted_2$3),
         endings.value.start ? (openBlock(), createElementBlock("path", {
           key: 0,
           d: endings.value.start.d,
           transform: endings.value.start.transform,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          stroke: __props.strokeColor,
-          style: normalizeStyle(getEndingStyle(endings.value.start)),
-          fill: endings.value.start.filled ? __props.color : "none"
+          style: normalizeStyle({
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : endings.value.start.filled ? "visible" : "visibleStroke",
+            strokeLinecap: "butt"
+          })
         }, null, 44, _hoisted_3$3)) : createCommentVNode("", true),
         endings.value.end ? (openBlock(), createElementBlock("path", {
           key: 1,
           d: endings.value.end.d,
           transform: endings.value.end.transform,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          stroke: __props.strokeColor,
-          style: normalizeStyle(getEndingStyle(endings.value.end)),
-          fill: endings.value.end.filled ? __props.color : "none"
-        }, null, 44, _hoisted_4$3)) : createCommentVNode("", true)
+          style: normalizeStyle({
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : endings.value.end.filled ? "visible" : "visibleStroke",
+            strokeLinecap: "butt"
+          })
+        }, null, 44, _hoisted_4$3)) : createCommentVNode("", true),
+        !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          createElementVNode("line", {
+            x1: localLine.value.x1,
+            y1: localLine.value.y1,
+            x2: localLine.value.x2,
+            y2: localLine.value.y2,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor,
+              strokeWidth: __props.strokeWidth,
+              strokeLinecap: "butt",
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+              }
+            })
+          }, null, 12, _hoisted_5$2),
+          endings.value.start ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: endings.value.start.d,
+            transform: endings.value.start.transform,
+            stroke: __props.strokeColor,
+            fill: endings.value.start.filled ? __props.color : "none",
+            style: normalizeStyle({
+              pointerEvents: "none",
+              strokeWidth: __props.strokeWidth,
+              strokeLinecap: "butt",
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_b = __props.strokeDashArray) == null ? void 0 : _b.join(",")
+              }
+            })
+          }, null, 12, _hoisted_6$1)) : createCommentVNode("", true),
+          endings.value.end ? (openBlock(), createElementBlock("path", {
+            key: 1,
+            d: endings.value.end.d,
+            transform: endings.value.end.transform,
+            stroke: __props.strokeColor,
+            fill: endings.value.end.filled ? __props.color : "none",
+            style: normalizeStyle({
+              pointerEvents: "none",
+              strokeWidth: __props.strokeWidth,
+              strokeLinecap: "butt",
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_c = __props.strokeDashArray) == null ? void 0 : _c.join(",")
+              }
+            })
+          }, null, 12, _hoisted_7$1)) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
       ], 12, _hoisted_1$5);
     };
   }
 });
-const _hoisted_1$4 = ["width", "height", "viewBox"];
-const _hoisted_2$3 = ["width", "height"];
-const _hoisted_3$2 = ["y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"];
-const _hoisted_4$2 = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-dasharray"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
-  __name: "link",
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  __name: "line-renderer",
   props: {
+    annotation: {},
+    currentObject: {},
     isSelected: { type: Boolean },
-    strokeColor: { default: "#0000FF" },
-    strokeWidth: { default: 2 },
-    strokeStyle: { default: PdfAnnotationBorderStyle.UNDERLINE },
-    strokeDashArray: {},
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$q, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _hoisted_1$4 = ["width", "height", "viewBox"];
+const _hoisted_2$2 = ["d", "stroke-width"];
+const _hoisted_3$2 = ["d", "transform", "stroke-width"];
+const _hoisted_4$2 = ["d", "transform", "stroke-width"];
+const _hoisted_5$1 = ["d", "opacity"];
+const _hoisted_6 = ["d", "transform", "stroke", "fill"];
+const _hoisted_7 = ["d", "transform", "stroke", "fill"];
+const __default__$8 = { inheritAttrs: false };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
+  __name: "polyline",
+  props: {
     rect: {},
+    vertices: {},
+    color: { default: "transparent" },
+    strokeColor: { default: "#000000" },
+    opacity: { default: 1 },
+    strokeWidth: {},
     scale: {},
+    isSelected: { type: Boolean },
     onClick: {},
-    hasIRT: { type: Boolean, default: false }
+    lineEndings: {},
+    appearanceActive: { type: Boolean, default: false }
   },
   setup(__props) {
+    const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
-    const width = computed(() => props.rect.size.width);
-    const height = computed(() => props.rect.size.height);
-    const svgWidth = computed(() => width.value * props.scale);
-    const svgHeight = computed(() => height.value * props.scale);
-    const dashArray = computed(() => {
-      var _a;
-      if (props.strokeStyle === PdfAnnotationBorderStyle.DASHED) {
-        return ((_a = props.strokeDashArray) == null ? void 0 : _a.join(",")) ?? `${props.strokeWidth * 3},${props.strokeWidth}`;
-      }
-      return void 0;
-    });
-    const isUnderline2 = computed(() => props.strokeStyle === PdfAnnotationBorderStyle.UNDERLINE);
-    const hitAreaCursor = computed(
-      () => props.hasIRT ? "default" : props.isSelected ? "move" : "pointer"
-    );
-    const hitAreaPointerEvents = computed(
-      () => props.hasIRT ? "none" : props.isSelected ? "none" : "visible"
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("svg", {
-        style: normalizeStyle({
-          position: "absolute",
-          width: `${svgWidth.value}px`,
-          height: `${svgHeight.value}px`,
-          pointerEvents: "none",
-          zIndex: 2
-        }),
-        width: svgWidth.value,
-        height: svgHeight.value,
-        viewBox: `0 0 ${width.value} ${height.value}`
-      }, [
-        createElementVNode("rect", {
-          x: 0,
-          y: 0,
-          width: width.value,
-          height: height.value,
-          fill: "transparent",
-          onPointerdown: _cache[0] || (_cache[0] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
-          onTouchstart: _cache[1] || (_cache[1] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
-          style: normalizeStyle({
-            cursor: hitAreaCursor.value,
-            pointerEvents: hitAreaPointerEvents.value
-          })
-        }, null, 44, _hoisted_2$3),
-        isUnderline2.value ? (openBlock(), createElementBlock("line", {
-          key: 0,
-          x1: 1,
-          y1: height.value - 1,
-          x2: width.value - 1,
-          y2: height.value - 1,
-          stroke: __props.strokeColor,
-          "stroke-width": __props.strokeWidth,
-          "stroke-dasharray": dashArray.value,
-          style: { "pointer-events": "none" }
-        }, null, 8, _hoisted_3$2)) : (openBlock(), createElementBlock("rect", {
-          key: 1,
-          x: __props.strokeWidth / 2,
-          y: __props.strokeWidth / 2,
-          width: Math.max(width.value - __props.strokeWidth, 0),
-          height: Math.max(height.value - __props.strokeWidth, 0),
-          fill: "transparent",
-          stroke: __props.strokeColor,
-          "stroke-width": __props.strokeWidth,
-          "stroke-dasharray": dashArray.value,
-          style: { "pointer-events": "none" }
-        }, null, 8, _hoisted_4$2))
-      ], 12, _hoisted_1$4);
-    };
-  }
-});
-const _hoisted_1$3 = ["width", "height", "viewBox"];
-const _hoisted_2$2 = ["d", "opacity"];
-const _hoisted_3$1 = ["d"];
-const _hoisted_4$1 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
-  __name: "polygon",
-  props: {
-    rect: {},
-    vertices: {},
-    color: { default: "transparent" },
-    strokeColor: { default: "#000000" },
-    opacity: { default: 1 },
-    strokeWidth: {},
-    strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
-    strokeDashArray: {},
-    scale: {},
-    isSelected: { type: Boolean },
-    onClick: {},
-    currentVertex: {},
-    handleSize: { default: 14 }
-  },
-  setup(__props) {
-    const props = __props;
-    const allPoints = computed(
-      () => props.currentVertex ? [...props.vertices, props.currentVertex] : props.vertices
-    );
-    const localPts = computed(
-      () => allPoints.value.map(({ x, y }) => ({
-        x: x - props.rect.origin.x,
-        y: y - props.rect.origin.y
-      }))
-    );
-    const pathData = computed(() => {
-      if (!localPts.value.length) return "";
-      const [first, ...rest] = localPts.value;
-      const isPreview = !!props.currentVertex;
-      return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
-    });
-    const isPreviewing = computed(() => props.currentVertex && props.vertices.length > 0);
-    const width = computed(() => props.rect.size.width * props.scale);
-    const height = computed(() => props.rect.size.height * props.scale);
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("svg", {
-        style: normalizeStyle({
-          position: "absolute",
-          width: `${width.value}px`,
-          height: `${height.value}px`,
-          pointerEvents: "none",
-          zIndex: 2,
-          overflow: "visible"
-        }),
-        width: width.value,
-        height: height.value,
-        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
-      }, [
-        createElementVNode("path", {
-          d: pathData.value,
-          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          opacity: __props.opacity,
-          style: normalizeStyle({
-            fill: __props.currentVertex ? "none" : __props.color,
-            stroke: __props.strokeColor ?? __props.color,
-            strokeWidth: __props.strokeWidth,
-            cursor: __props.isSelected ? "move" : "pointer",
-            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible",
-            strokeLinecap: "butt",
-            strokeLinejoin: "miter",
-            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-            }
-          })
-        }, null, 44, _hoisted_2$2),
-        isPreviewing.value && localPts.value.length > 1 ? (openBlock(), createElementBlock("path", {
-          key: 0,
-          d: `M ${localPts.value[localPts.value.length - 1].x} ${localPts.value[localPts.value.length - 1].y} L ${localPts.value[0].x} ${localPts.value[0].y}`,
-          fill: "none",
-          style: normalizeStyle({
-            stroke: __props.strokeColor,
-            strokeWidth: __props.strokeWidth,
-            strokeDasharray: "4,4",
-            opacity: 0.7
-          })
-        }, null, 12, _hoisted_3$1)) : createCommentVNode("", true),
-        isPreviewing.value && localPts.value.length >= 2 ? (openBlock(), createElementBlock("rect", {
-          key: 1,
-          x: localPts.value[0].x - __props.handleSize / __props.scale / 2,
-          y: localPts.value[0].y - __props.handleSize / __props.scale / 2,
-          width: __props.handleSize / __props.scale,
-          height: __props.handleSize / __props.scale,
-          fill: __props.strokeColor,
-          opacity: 0.4,
-          stroke: __props.strokeColor,
-          "stroke-width": __props.strokeWidth / 2
-        }, null, 8, _hoisted_4$1)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$3);
-    };
-  }
-});
-const _hoisted_1$2 = ["width", "height", "viewBox"];
-const _hoisted_2$1 = ["d", "opacity"];
-const _hoisted_3 = ["d", "transform", "stroke", "fill"];
-const _hoisted_4 = ["d", "transform", "stroke", "fill"];
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
-  __name: "polyline",
-  props: {
-    rect: {},
-    vertices: {},
-    color: { default: "transparent" },
-    strokeColor: { default: "#000000" },
-    opacity: { default: 1 },
-    strokeWidth: {},
-    scale: {},
-    isSelected: { type: Boolean },
-    onClick: {},
-    lineEndings: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const localPts = computed(
-      () => props.vertices.map(({ x, y }) => ({
-        x: x - props.rect.origin.x,
-        y: y - props.rect.origin.y
-      }))
+    const localPts = computed(
+      () => props.vertices.map(({ x, y }) => ({
+        x: x - props.rect.origin.x,
+        y: y - props.rect.origin.y
+      }))
     );
     const pathData = computed(() => {
       if (localPts.value.length === 0) return "";
@@ -1839,14 +1956,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         )
       };
     });
-    const getEndingStyle = (ending) => ({
-      cursor: props.isSelected ? "move" : "pointer",
-      strokeWidth: props.strokeWidth,
-      pointerEvents: props.isSelected ? "none" : ending.filled ? "visible" : "visibleStroke",
-      strokeLinecap: "butt"
-    });
     const width = computed(() => props.rect.size.width * props.scale);
     const height = computed(() => props.rect.size.height * props.scale);
+    const hitStrokeWidth = computed(
+      () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("svg", {
         style: normalizeStyle({
@@ -1863,102 +1977,189 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       }, [
         createElementVNode("path", {
           d: pathData.value,
+          fill: "none",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          opacity: __props.opacity,
           style: normalizeStyle({
-            fill: "none",
-            stroke: __props.strokeColor ?? __props.color,
-            strokeWidth: __props.strokeWidth,
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : "visibleStroke",
             strokeLinecap: "butt",
             strokeLinejoin: "miter"
           })
-        }, null, 44, _hoisted_2$1),
+        }, null, 44, _hoisted_2$2),
         endings.value.start ? (openBlock(), createElementBlock("path", {
           key: 0,
           d: endings.value.start.d,
           transform: endings.value.start.transform,
-          stroke: __props.strokeColor,
-          fill: endings.value.start.filled ? __props.color : "none",
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[2] || (_cache[2] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          style: normalizeStyle(getEndingStyle(endings.value.start))
-        }, null, 44, _hoisted_3)) : createCommentVNode("", true),
+          style: normalizeStyle({
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : endings.value.start.filled ? "visible" : "visibleStroke",
+            strokeLinecap: "butt"
+          })
+        }, null, 44, _hoisted_3$2)) : createCommentVNode("", true),
         endings.value.end ? (openBlock(), createElementBlock("path", {
           key: 1,
           d: endings.value.end.d,
           transform: endings.value.end.transform,
-          stroke: __props.strokeColor,
-          fill: endings.value.end.filled ? __props.color : "none",
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[4] || (_cache[4] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[5] || (_cache[5] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
-          style: normalizeStyle(getEndingStyle(endings.value.end))
-        }, null, 44, _hoisted_4)) : createCommentVNode("", true)
-      ], 12, _hoisted_1$2);
+          style: normalizeStyle({
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : endings.value.end.filled ? "visible" : "visibleStroke",
+            strokeLinecap: "butt"
+          })
+        }, null, 44, _hoisted_4$2)) : createCommentVNode("", true),
+        !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          createElementVNode("path", {
+            d: pathData.value,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              fill: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              pointerEvents: "none",
+              strokeLinecap: "butt",
+              strokeLinejoin: "miter"
+            })
+          }, null, 12, _hoisted_5$1),
+          endings.value.start ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: endings.value.start.d,
+            transform: endings.value.start.transform,
+            stroke: __props.strokeColor,
+            fill: endings.value.start.filled ? __props.color : "none",
+            style: normalizeStyle({
+              pointerEvents: "none",
+              strokeWidth: __props.strokeWidth,
+              strokeLinecap: "butt"
+            })
+          }, null, 12, _hoisted_6)) : createCommentVNode("", true),
+          endings.value.end ? (openBlock(), createElementBlock("path", {
+            key: 1,
+            d: endings.value.end.d,
+            transform: endings.value.end.transform,
+            stroke: __props.strokeColor,
+            fill: endings.value.end.filled ? __props.color : "none",
+            style: normalizeStyle({
+              pointerEvents: "none",
+              strokeWidth: __props.strokeWidth,
+              strokeLinecap: "butt"
+            })
+          }, null, 12, _hoisted_7)) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$4);
     };
   }
 });
-const _hoisted_1$1 = ["width", "height", "viewBox"];
-const _hoisted_2 = ["x", "y", "width", "height", "fill", "opacity"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  __name: "square",
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  __name: "polyline-renderer",
   props: {
+    annotation: {},
+    currentObject: {},
     isSelected: { type: Boolean },
-    color: { default: "#000000" },
-    strokeColor: {},
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$o, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _hoisted_1$3 = ["width", "height", "viewBox"];
+const _hoisted_2$1 = ["d", "stroke-width"];
+const _hoisted_3$1 = ["d", "opacity"];
+const _hoisted_4$1 = ["d"];
+const _hoisted_5 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
+const __default__$7 = { inheritAttrs: false };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
+  __name: "polygon",
+  props: {
+    rect: {},
+    vertices: {},
+    color: { default: "transparent" },
+    strokeColor: { default: "#000000" },
     opacity: { default: 1 },
     strokeWidth: {},
     strokeStyle: { default: PdfAnnotationBorderStyle.SOLID },
     strokeDashArray: {},
-    rect: {},
     scale: {},
-    onClick: {}
+    isSelected: { type: Boolean },
+    onClick: {},
+    currentVertex: {},
+    handleSize: { default: 14 },
+    appearanceActive: { type: Boolean, default: false }
   },
   setup(__props) {
+    const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
-    const geometry = computed(() => {
-      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
-      };
+    const allPoints = computed(
+      () => props.currentVertex ? [...props.vertices, props.currentVertex] : props.vertices
+    );
+    const localPts = computed(
+      () => allPoints.value.map(({ x, y }) => ({
+        x: x - props.rect.origin.x,
+        y: y - props.rect.origin.y
+      }))
+    );
+    const pathData = computed(() => {
+      if (!localPts.value.length) return "";
+      const [first, ...rest] = localPts.value;
+      const isPreview = !!props.currentVertex;
+      return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
     });
-    const svgWidth = computed(() => (geometry.value.width + props.strokeWidth) * props.scale);
-    const svgHeight = computed(() => (geometry.value.height + props.strokeWidth) * props.scale);
+    const isPreviewing = computed(() => props.currentVertex && props.vertices.length > 0);
+    const width = computed(() => props.rect.size.width * props.scale);
+    const height = computed(() => props.rect.size.height * props.scale);
+    const hitStrokeWidth = computed(
+      () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
+    );
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("svg", {
         style: normalizeStyle({
           position: "absolute",
-          width: svgWidth.value,
-          height: svgHeight.value,
+          width: `${width.value}px`,
+          height: `${height.value}px`,
           pointerEvents: "none",
-          zIndex: 2
+          zIndex: 2,
+          overflow: "visible"
         }),
-        width: svgWidth.value,
-        height: svgHeight.value,
-        viewBox: `0 0 ${geometry.value.width + __props.strokeWidth} ${geometry.value.height + __props.strokeWidth}`
-      }, [
-        createElementVNode("rect", {
-          x: geometry.value.x,
-          y: geometry.value.y,
-          width: geometry.value.width,
-          height: geometry.value.height,
-          fill: __props.color,
-          opacity: __props.opacity,
+        width: width.value,
+        height: height.value,
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
+      }, [
+        createElementVNode("path", {
+          d: pathData.value,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
           onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
           (...args) => __props.onClick && __props.onClick(...args)),
           onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
@@ -1966,19 +2167,226 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           style: normalizeStyle({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible",
-            stroke: __props.strokeColor ?? __props.color,
-            strokeWidth: __props.strokeWidth,
-            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-            }
+            strokeLinecap: "butt",
+            strokeLinejoin: "miter"
           })
-        }, null, 44, _hoisted_2)
-      ], 12, _hoisted_1$1);
+        }, null, 44, _hoisted_2$1),
+        !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("path", {
+            d: pathData.value,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              fill: __props.currentVertex ? "none" : __props.color,
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              pointerEvents: "none",
+              strokeLinecap: "butt",
+              strokeLinejoin: "miter",
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+              }
+            })
+          }, null, 12, _hoisted_3$1),
+          isPreviewing.value && localPts.value.length > 1 ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: `M ${localPts.value[localPts.value.length - 1].x} ${localPts.value[localPts.value.length - 1].y} L ${localPts.value[0].x} ${localPts.value[0].y}`,
+            fill: "none",
+            style: normalizeStyle({
+              stroke: __props.strokeColor,
+              strokeWidth: __props.strokeWidth,
+              strokeDasharray: "4,4",
+              opacity: 0.7,
+              pointerEvents: "none"
+            })
+          }, null, 12, _hoisted_4$1)) : createCommentVNode("", true),
+          isPreviewing.value && localPts.value.length >= 2 ? (openBlock(), createElementBlock("rect", {
+            key: 1,
+            x: localPts.value[0].x - __props.handleSize / __props.scale / 2,
+            y: localPts.value[0].y - __props.handleSize / __props.scale / 2,
+            width: __props.handleSize / __props.scale,
+            height: __props.handleSize / __props.scale,
+            fill: __props.strokeColor,
+            opacity: 0.4,
+            stroke: __props.strokeColor,
+            "stroke-width": __props.strokeWidth / 2,
+            style: { "pointer-events": "none" }
+          }, null, 8, _hoisted_5)) : createCommentVNode("", true)
+        ], 64)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$3);
     };
   }
 });
-const _hoisted_1 = ["src"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  __name: "polygon-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$m, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["isSelected", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _hoisted_1$2 = ["contenteditable"];
+const __default__$6 = { inheritAttrs: false };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
+  __name: "free-text",
+  props: {
+    documentId: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    annotation: {},
+    pageIndex: {},
+    scale: {},
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const editorRef = ref(null);
+    const editingRef = ref(false);
+    const { provides: annotationCapability } = useAnnotationCapability();
+    const annotationProvides = computed(
+      () => {
+        var _a;
+        return ((_a = annotationCapability.value) == null ? void 0 : _a.forDocument(props.documentId)) ?? null;
+      }
+    );
+    const isIOS = ref(false);
+    onMounted(() => {
+      try {
+        const nav = navigator;
+        isIOS.value = /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && (nav == null ? void 0 : nav.maxTouchPoints) > 1;
+      } catch {
+        isIOS.value = false;
+      }
+    });
+    watch(
+      () => props.isEditing,
+      (editing) => {
+        if (editing && editorRef.value) {
+          editingRef.value = true;
+          const editor = editorRef.value;
+          editor.focus();
+          const selection = window.getSelection();
+          if (selection) {
+            const range = document.createRange();
+            range.selectNodeContents(editor);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        }
+      }
+    );
+    const handleBlur = () => {
+      if (!editingRef.value) return;
+      editingRef.value = false;
+      if (!annotationProvides.value || !editorRef.value) return;
+      annotationProvides.value.updateAnnotation(props.pageIndex, props.annotation.object.id, {
+        contents: editorRef.value.innerText
+      });
+    };
+    const editorStyle = computed(() => {
+      const { object: anno } = props.annotation;
+      const computedFontPx = anno.fontSize * props.scale;
+      const MIN_IOS_FOCUS_FONT_PX = 16;
+      const needsComp = isIOS.value && props.isEditing && computedFontPx > 0 && computedFontPx < MIN_IOS_FOCUS_FONT_PX;
+      const adjustedFontPx = needsComp ? MIN_IOS_FOCUS_FONT_PX : computedFontPx;
+      const scaleComp = needsComp ? computedFontPx / MIN_IOS_FOCUS_FONT_PX : 1;
+      const invScalePercent = needsComp ? 100 / scaleComp : 100;
+      return {
+        color: anno.fontColor,
+        fontSize: `${adjustedFontPx}px`,
+        ...standardFontCssProperties(anno.fontFamily),
+        textAlign: textAlignmentToCss(anno.textAlign),
+        flexDirection: "column",
+        justifyContent: anno.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : anno.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
+        display: "flex",
+        backgroundColor: anno.color ?? anno.backgroundColor,
+        opacity: anno.opacity,
+        width: needsComp ? `${invScalePercent}%` : "100%",
+        height: needsComp ? `${invScalePercent}%` : "100%",
+        lineHeight: "1.18",
+        overflow: "hidden",
+        cursor: props.isEditing ? "text" : "pointer",
+        outline: "none",
+        transform: needsComp ? `scale(${scaleComp})` : void 0,
+        transformOrigin: "top left"
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${__props.annotation.object.rect.size.width * __props.scale}px`,
+          height: `${__props.annotation.object.rect.size.height * __props.scale}px`,
+          cursor: __props.isSelected && !__props.isEditing ? "move" : "default",
+          pointerEvents: __props.isSelected && !__props.isEditing ? "none" : "auto",
+          zIndex: 2,
+          opacity: __props.appearanceActive ? 0 : 1
+        }),
+        onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => __props.onClick && __props.onClick(...args)),
+        onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => __props.onClick && __props.onClick(...args))
+      }, [
+        createElementVNode("span", {
+          ref_key: "editorRef",
+          ref: editorRef,
+          onBlur: handleBlur,
+          tabindex: "0",
+          style: normalizeStyle(editorStyle.value),
+          contenteditable: __props.isEditing
+        }, toDisplayString(__props.annotation.object.contents), 45, _hoisted_1$2)
+      ], 36);
+    };
+  }
+});
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "free-text-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$k, {
+        documentId: __props.documentId,
+        isSelected: __props.isSelected,
+        isEditing: __props.isEditing,
+        annotation: { ...__props.annotation, object: __props.currentObject },
+        pageIndex: __props.pageIndex,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }, null, 8, ["documentId", "isSelected", "isEditing", "annotation", "pageIndex", "scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const _hoisted_1$1 = ["src"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "render-annotation",
   props: {
     documentId: {},
@@ -2073,11 +2481,13 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
           display: "block",
           ...__props.style
         })
-      }, null, 44, _hoisted_1)) : createCommentVNode("", true);
+      }, null, 44, _hoisted_1$1)) : createCommentVNode("", true);
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const __default__$5 = { inheritAttrs: false };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
   __name: "stamp",
   props: {
     isSelected: { type: Boolean },
@@ -2107,7 +2517,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
         (...args) => __props.onClick && __props.onClick(...args))
       }, [
-        createVNode(_sfc_main$b, {
+        createVNode(_sfc_main$i, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
           annotation: { ...__props.annotation.object, id: __props.annotation.object.id },
@@ -2118,78 +2528,238 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "highlight",
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "stamp-renderer",
   props: {
-    strokeColor: {},
-    opacity: { default: 0.5 },
-    segmentRects: {},
-    rect: {},
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
     scale: {},
-    onClick: {}
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
   },
   setup(__props) {
-    const props = __props;
-    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (b, i) => {
-        return openBlock(), createElementBlock("div", {
-          key: i,
-          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          style: normalizeStyle({
-            position: "absolute",
-            left: `${(__props.rect ? b.origin.x - __props.rect.origin.x : b.origin.x) * __props.scale}px`,
-            top: `${(__props.rect ? b.origin.y - __props.rect.origin.y : b.origin.y) * __props.scale}px`,
-            width: `${b.size.width * __props.scale}px`,
-            height: `${b.size.height * __props.scale}px`,
-            background: resolvedColor.value,
-            opacity: __props.opacity,
-            pointerEvents: __props.onClick ? "auto" : "none",
-            cursor: __props.onClick ? "pointer" : "default",
-            zIndex: __props.onClick ? 1 : void 0
-          })
-        }, null, 36);
-      }), 128);
+      return openBlock(), createBlock(_sfc_main$h, {
+        isSelected: __props.isSelected,
+        annotation: __props.annotation,
+        documentId: __props.documentId,
+        pageIndex: __props.pageIndex,
+        scale: __props.scale,
+        onClick: __props.onClick
+      }, null, 8, ["isSelected", "annotation", "documentId", "pageIndex", "scale", "onClick"]);
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "squiggly",
+const _hoisted_1 = ["width", "height", "viewBox"];
+const _hoisted_2 = ["width", "height"];
+const _hoisted_3 = ["y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"];
+const _hoisted_4 = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-dasharray"];
+const __default__$4 = { inheritAttrs: false };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
+  __name: "link",
   props: {
-    strokeColor: {},
-    opacity: { default: 0.5 },
-    segmentRects: {},
+    isSelected: { type: Boolean },
+    strokeColor: { default: "#0000FF" },
+    strokeWidth: { default: 2 },
+    strokeStyle: { default: PdfAnnotationBorderStyle.UNDERLINE },
+    strokeDashArray: {},
     rect: {},
     scale: {},
-    onClick: {}
+    onClick: {},
+    hasIRT: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
-    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
-    const amplitude = computed(() => 2 * props.scale);
-    const period = computed(() => 6 * props.scale);
-    const svgDataUri = computed(() => {
-      const amp = amplitude.value;
-      const per = period.value;
-      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${per}" height="${amp * 2}" viewBox="0 0 ${per} ${amp * 2}">
-    <path d="M0 ${amp} Q ${per / 4} 0 ${per / 2} ${amp} T ${per} ${amp}"
-          fill="none" stroke="${resolvedColor.value}" stroke-width="${amp}" stroke-linecap="round"/>
-  </svg>`;
-      return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+    const width = computed(() => props.rect.size.width);
+    const height = computed(() => props.rect.size.height);
+    const svgWidth = computed(() => width.value * props.scale);
+    const svgHeight = computed(() => height.value * props.scale);
+    const dashArray = computed(() => {
+      var _a;
+      if (props.strokeStyle === PdfAnnotationBorderStyle.DASHED) {
+        return ((_a = props.strokeDashArray) == null ? void 0 : _a.join(",")) ?? `${props.strokeWidth * 3},${props.strokeWidth}`;
+      }
+      return void 0;
     });
+    const isUnderline = computed(() => props.strokeStyle === PdfAnnotationBorderStyle.UNDERLINE);
+    const hitAreaCursor = computed(
+      () => props.hasIRT ? "default" : props.isSelected ? "move" : "pointer"
+    );
+    const hitAreaPointerEvents = computed(
+      () => props.hasIRT ? "none" : props.isSelected ? "none" : "visible"
+    );
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
-        return openBlock(), createElementBlock("div", {
-          key: i,
-          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
-          (...args) => __props.onClick && __props.onClick(...args)),
-          style: normalizeStyle({
-            position: "absolute",
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${svgWidth.value}px`,
+          height: `${svgHeight.value}px`,
+          pointerEvents: "none",
+          zIndex: 2
+        }),
+        width: svgWidth.value,
+        height: svgHeight.value,
+        viewBox: `0 0 ${width.value} ${height.value}`
+      }, [
+        createElementVNode("rect", {
+          x: 0,
+          y: 0,
+          width: width.value,
+          height: height.value,
+          fill: "transparent",
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
+          onTouchstart: _cache[1] || (_cache[1] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
+          style: normalizeStyle({
+            cursor: hitAreaCursor.value,
+            pointerEvents: hitAreaPointerEvents.value
+          })
+        }, null, 44, _hoisted_2),
+        isUnderline.value ? (openBlock(), createElementBlock("line", {
+          key: 0,
+          x1: 1,
+          y1: height.value - 1,
+          x2: width.value - 1,
+          y2: height.value - 1,
+          stroke: __props.strokeColor,
+          "stroke-width": __props.strokeWidth,
+          "stroke-dasharray": dashArray.value,
+          style: { "pointer-events": "none" }
+        }, null, 8, _hoisted_3)) : (openBlock(), createElementBlock("rect", {
+          key: 1,
+          x: __props.strokeWidth / 2,
+          y: __props.strokeWidth / 2,
+          width: Math.max(width.value - __props.strokeWidth, 0),
+          height: Math.max(height.value - __props.strokeWidth, 0),
+          fill: "transparent",
+          stroke: __props.strokeColor,
+          "stroke-width": __props.strokeWidth,
+          "stroke-dasharray": dashArray.value,
+          style: { "pointer-events": "none" }
+        }, null, 8, _hoisted_4))
+      ], 12, _hoisted_1);
+    };
+  }
+});
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "link-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$f, mergeProps(__props.currentObject, {
+        isSelected: __props.isSelected,
+        scale: __props.scale,
+        onClick: __props.onClick,
+        hasIRT: !!__props.currentObject.inReplyToId
+      }), null, 16, ["isSelected", "scale", "onClick", "hasIRT"]);
+    };
+  }
+});
+const __default__$3 = { inheritAttrs: false };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
+  __name: "highlight",
+  props: {
+    strokeColor: {},
+    opacity: { default: 0.5 },
+    segmentRects: {},
+    rect: {},
+    scale: {},
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (b, i) => {
+        return openBlock(), createElementBlock("div", {
+          key: i,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
+          style: normalizeStyle({
+            position: "absolute",
+            left: `${(__props.rect ? b.origin.x - __props.rect.origin.x : b.origin.x) * __props.scale}px`,
+            top: `${(__props.rect ? b.origin.y - __props.rect.origin.y : b.origin.y) * __props.scale}px`,
+            width: `${b.size.width * __props.scale}px`,
+            height: `${b.size.height * __props.scale}px`,
+            background: __props.appearanceActive ? "transparent" : resolvedColor.value,
+            opacity: __props.appearanceActive ? void 0 : __props.opacity,
+            pointerEvents: __props.onClick ? "auto" : "none",
+            cursor: __props.onClick ? "pointer" : "default",
+            zIndex: __props.onClick ? 1 : void 0
+          })
+        }, null, 36);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "highlight-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$d, mergeProps(__props.currentObject, {
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const __default__$2 = { inheritAttrs: false };
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  __name: "underline",
+  props: {
+    strokeColor: {},
+    opacity: { default: 0.5 },
+    segmentRects: {},
+    rect: {},
+    scale: {},
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
+    const thickness = computed(() => 2 * props.scale);
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
+        return openBlock(), createElementBlock("div", {
+          key: i,
+          onPointerdown: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
+          onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
+          style: normalizeStyle({
+            position: "absolute",
             left: `${(__props.rect ? r.origin.x - __props.rect.origin.x : r.origin.x) * __props.scale}px`,
             top: `${(__props.rect ? r.origin.y - __props.rect.origin.y : r.origin.y) * __props.scale}px`,
             width: `${r.size.width * __props.scale}px`,
@@ -2200,26 +2770,50 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             zIndex: __props.onClick ? 1 : 0
           })
         }, [
-          createElementVNode("div", {
+          !__props.appearanceActive ? (openBlock(), createElementBlock("div", {
+            key: 0,
             style: normalizeStyle({
               position: "absolute",
               left: 0,
               bottom: 0,
               width: "100%",
-              height: `${amplitude.value * 2}px`,
-              backgroundImage: svgDataUri.value,
-              backgroundRepeat: "repeat-x",
-              backgroundSize: `${period.value}px ${amplitude.value * 2}px`,
+              height: `${thickness.value}px`,
+              background: resolvedColor.value,
               opacity: __props.opacity,
               pointerEvents: "none"
             })
-          }, null, 4)
+          }, null, 4)) : createCommentVNode("", true)
         ], 36);
       }), 128);
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  __name: "underline-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$b, mergeProps(__props.currentObject, {
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const __default__$1 = { inheritAttrs: false };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
   __name: "strikeout",
   props: {
     strokeColor: {},
@@ -2227,7 +2821,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     segmentRects: {},
     rect: {},
     scale: {},
-    onClick: {}
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
@@ -2253,7 +2848,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             zIndex: __props.onClick ? 1 : 0
           })
         }, [
-          createElementVNode("div", {
+          !__props.appearanceActive ? (openBlock(), createElementBlock("div", {
+            key: 0,
             style: normalizeStyle({
               position: "absolute",
               left: 0,
@@ -2265,26 +2861,62 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
               transform: "translateY(-50%)",
               pointerEvents: "none"
             })
-          }, null, 4)
+          }, null, 4)) : createCommentVNode("", true)
         ], 36);
       }), 128);
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "underline",
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "strikeout-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$9, mergeProps(__props.currentObject, {
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const __default__ = { inheritAttrs: false };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "squiggly",
   props: {
     strokeColor: {},
     opacity: { default: 0.5 },
     segmentRects: {},
     rect: {},
     scale: {},
-    onClick: {}
+    onClick: {},
+    appearanceActive: { type: Boolean, default: false }
   },
   setup(__props) {
     const props = __props;
     const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
-    const thickness = computed(() => 2 * props.scale);
+    const amplitude = computed(() => 2 * props.scale);
+    const period = computed(() => 6 * props.scale);
+    const svgDataUri = computed(() => {
+      const amp = amplitude.value;
+      const per = period.value;
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${per}" height="${amp * 2}" viewBox="0 0 ${per} ${amp * 2}">
+    <path d="M0 ${amp} Q ${per / 4} 0 ${per / 2} ${amp} T ${per} ${amp}"
+          fill="none" stroke="${resolvedColor.value}" stroke-width="${amp}" stroke-linecap="round"/>
+  </svg>`;
+      return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+    });
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
         return openBlock(), createElementBlock("div", {
@@ -2305,23 +2937,170 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             zIndex: __props.onClick ? 1 : 0
           })
         }, [
-          createElementVNode("div", {
+          !__props.appearanceActive ? (openBlock(), createElementBlock("div", {
+            key: 0,
             style: normalizeStyle({
               position: "absolute",
               left: 0,
               bottom: 0,
               width: "100%",
-              height: `${thickness.value}px`,
-              background: resolvedColor.value,
+              height: `${amplitude.value * 2}px`,
+              backgroundImage: svgDataUri.value,
+              backgroundRepeat: "repeat-x",
+              backgroundSize: `${period.value}px ${amplitude.value * 2}px`,
               opacity: __props.opacity,
               pointerEvents: "none"
             })
-          }, null, 4)
+          }, null, 4)) : createCommentVNode("", true)
         ], 36);
       }), 128);
     };
   }
 });
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "squiggly-renderer",
+  props: {
+    annotation: {},
+    currentObject: {},
+    isSelected: { type: Boolean },
+    isEditing: { type: Boolean },
+    scale: {},
+    pageIndex: {},
+    documentId: {},
+    onClick: { type: Function },
+    appearanceActive: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$7, mergeProps(__props.currentObject, {
+        scale: __props.scale,
+        onClick: __props.onClick,
+        appearanceActive: __props.appearanceActive
+      }), null, 16, ["scale", "onClick", "appearanceActive"]);
+    };
+  }
+});
+const builtInRenderers = [
+  createRenderer({
+    id: "ink",
+    matches: (a) => a.type === PdfAnnotationSubtype.INK,
+    component: _sfc_main$v,
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  createRenderer({
+    id: "square",
+    matches: (a) => a.type === PdfAnnotationSubtype.SQUARE,
+    component: _sfc_main$t,
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  createRenderer({
+    id: "circle",
+    matches: (a) => a.type === PdfAnnotationSubtype.CIRCLE,
+    component: _sfc_main$r,
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  createRenderer({
+    id: "line",
+    matches: (a) => a.type === PdfAnnotationSubtype.LINE,
+    component: _sfc_main$p,
+    vertexConfig: {
+      extractVertices: (a) => [a.linePoints.start, a.linePoints.end],
+      transformAnnotation: (a, v) => ({
+        ...a,
+        linePoints: { start: v[0], end: v[1] }
+      })
+    },
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: true }
+  }),
+  createRenderer({
+    id: "polyline",
+    matches: (a) => a.type === PdfAnnotationSubtype.POLYLINE,
+    component: _sfc_main$n,
+    vertexConfig: {
+      extractVertices: (a) => a.vertices,
+      transformAnnotation: (a, vertices) => ({ ...a, vertices })
+    },
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: true }
+  }),
+  createRenderer({
+    id: "polygon",
+    matches: (a) => a.type === PdfAnnotationSubtype.POLYGON,
+    component: _sfc_main$l,
+    vertexConfig: {
+      extractVertices: (a) => a.vertices,
+      transformAnnotation: (a, vertices) => ({ ...a, vertices })
+    },
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: true }
+  }),
+  createRenderer({
+    id: "highlight",
+    matches: (a) => a.type === PdfAnnotationSubtype.HIGHLIGHT,
+    component: _sfc_main$c,
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
+    containerStyle: (a) => ({
+      mixBlendMode: blendModeToCss(a.blendMode ?? PdfBlendMode.Multiply)
+    })
+  }),
+  createRenderer({
+    id: "underline",
+    matches: (a) => a.type === PdfAnnotationSubtype.UNDERLINE,
+    component: _sfc_main$a,
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
+  createRenderer({
+    id: "strikeout",
+    matches: (a) => a.type === PdfAnnotationSubtype.STRIKEOUT,
+    component: _sfc_main$8,
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
+  createRenderer({
+    id: "squiggly",
+    matches: (a) => a.type === PdfAnnotationSubtype.SQUIGGLY,
+    component: _sfc_main$6,
+    zIndex: 0,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
+  createRenderer({
+    id: "freeText",
+    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
+    component: _sfc_main$j,
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true },
+    isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
+    onDoubleClick: (id, setEditingId) => setEditingId(id)
+  }),
+  createRenderer({
+    id: "stamp",
+    matches: (a) => a.type === PdfAnnotationSubtype.STAMP,
+    component: _sfc_main$g,
+    useAppearanceStream: false,
+    interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
+  }),
+  createRenderer({
+    id: "link",
+    matches: (a) => a.type === PdfAnnotationSubtype.LINK,
+    component: _sfc_main$e,
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
+    useAppearanceStream: false,
+    selectOverride: (e, annotation, helpers) => {
+      e.stopPropagation();
+      helpers.clearSelection();
+      if (annotation.object.inReplyToId) {
+        const parent = helpers.allAnnotations.find(
+          (a) => a.object.id === annotation.object.inReplyToId
+        );
+        if (parent) {
+          helpers.selectAnnotation(parent.object.pageIndex, parent.object.id);
+          return;
+        }
+      }
+      helpers.selectAnnotation(helpers.pageIndex, annotation.object.id);
+    },
+    hideSelectionMenu: (a) => !!a.inReplyToId
+  })
+];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "annotations",
   props: {
@@ -2343,538 +3122,320 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const blendStyle = (annotation, defaultBlend = PdfBlendMode.Normal) => ({
-      mixBlendMode: blendModeToCss(annotation.object.blendMode ?? defaultBlend)
-    });
-    const findCustomRenderer = (annotation) => {
-      var _a;
-      return (_a = props.annotationRenderers) == null ? void 0 : _a.find((r) => r.matches(annotation.object));
-    };
     const { provides: annotationCapability } = useAnnotationCapability();
     const { provides: selectionProvides } = useSelectionCapability();
-    const annotations = ref([]);
-    const allSelectedIds = ref([]);
+    const annotations = shallowRef([]);
+    const allSelectedIds = shallowRef([]);
     const { register } = usePointerHandlers({
       documentId: () => props.documentId,
       pageIndex: props.pageIndex
     });
     const editingId = ref(null);
+    const appearanceMap = shallowRef({});
+    let prevScale = props.scale;
     const annotationProvides = computed(
       () => annotationCapability.value ? annotationCapability.value.forDocument(props.documentId) : null
     );
     const isMultiSelected = computed(() => allSelectedIds.value.length > 1);
-    watchEffect((onCleanup) => {
-      if (annotationProvides.value) {
-        const currentState = annotationProvides.value.getState();
-        annotations.value = getAnnotationsByPageIndex(currentState, props.pageIndex);
-        allSelectedIds.value = getSelectedAnnotationIds(currentState);
-        const off = annotationProvides.value.onStateChange((state) => {
-          annotations.value = getAnnotationsByPageIndex(state, props.pageIndex);
-          allSelectedIds.value = getSelectedAnnotationIds(state);
-        });
-        onCleanup(off);
-      }
+    const allRenderers = computed(() => {
+      const external = props.annotationRenderers ?? [];
+      const externalIds = new Set(external.map((r) => r.id));
+      return [...external, ...builtInRenderers.filter((r) => !externalIds.has(r.id))];
     });
-    const handlePointerDown = (_pos, pe) => {
-      if (pe.target === pe.currentTarget && annotationProvides.value) {
-        annotationProvides.value.deselectAnnotation();
-        editingId.value = null;
-      }
+    const resolveRenderer = (annotation) => {
+      return allRenderers.value.find((r) => r.matches(annotation.object)) ?? null;
     };
-    const handleClick = (e, annotation) => {
-      e.stopPropagation();
-      if (annotationProvides.value && selectionProvides.value) {
-        selectionProvides.value.clear();
-        const isModifierPressed = "metaKey" in e ? e.metaKey || e.ctrlKey : false;
-        if (isModifierPressed) {
-          annotationProvides.value.toggleSelection(props.pageIndex, annotation.object.id);
-        } else {
-          annotationProvides.value.selectAnnotation(props.pageIndex, annotation.object.id);
-        }
-        if (annotation.object.id !== editingId.value) {
-          editingId.value = null;
-        }
-      }
+    const getAppearanceForAnnotation = (ta) => {
+      if (ta.dictMode) return null;
+      if (ta.object.rotation && ta.object.unrotatedRect) return null;
+      const appearances = appearanceMap.value[ta.object.id];
+      if (!(appearances == null ? void 0 : appearances.normal)) return null;
+      return appearances;
     };
-    const handleLinkClick = (e, annotation) => {
-      e.stopPropagation();
-      if (!annotationProvides.value || !selectionProvides.value) return;
-      selectionProvides.value.clear();
-      if (annotation.object.inReplyToId) {
-        const parentId = annotation.object.inReplyToId;
-        const parent = annotations.value.find((a) => a.object.id === parentId);
-        if (parent) {
-          annotationProvides.value.selectAnnotation(parent.object.pageIndex, parentId);
+    watch(
+      [annotationProvides, () => props.pageIndex],
+      ([provides, pageIndex], _prev, onCleanup) => {
+        if (!provides) {
+          annotations.value = [];
+          allSelectedIds.value = [];
           return;
         }
-      }
-      annotationProvides.value.selectAnnotation(props.pageIndex, annotation.object.id);
-    };
-    const handleDoubleClick = (_e, id) => {
-      if (isFreeText(annotations.value.find((a) => a.object.id === id))) {
-        editingId.value = id;
-      }
-    };
-    watchEffect((onCleanup) => {
-      if (annotationProvides.value) {
-        const unregister = register({ onPointerDown: handlePointerDown });
-        if (unregister) {
-          onCleanup(unregister);
-        }
-      }
-    });
-    const isSelected = (annotation) => allSelectedIds.value.includes(annotation.object.id);
-    const selectedAnnotationsOnPage = computed(
-      () => annotations.value.filter((anno) => allSelectedIds.value.includes(anno.object.id))
+        const syncState = (state) => {
+          annotations.value = getAnnotationsByPageIndex(state, pageIndex);
+          allSelectedIds.value = getSelectedAnnotationIds(state);
+        };
+        syncState(provides.getState());
+        const off = provides.onStateChange(syncState);
+        onCleanup(off);
+      },
+      { immediate: true }
     );
-    const areAllSelectedDraggable = computed(() => {
-      if (selectedAnnotationsOnPage.value.length < 2) return false;
-      return selectedAnnotationsOnPage.value.every((ta) => {
-        var _a;
-        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
-        const groupDraggable = resolveInteractionProp(
-          tool == null ? void 0 : tool.interaction.isGroupDraggable,
-          ta.object,
-          true
-        );
-        const singleDraggable = resolveInteractionProp(tool == null ? void 0 : tool.interaction.isDraggable, ta.object, true);
-        return (tool == null ? void 0 : tool.interaction.isGroupDraggable) !== void 0 ? groupDraggable : singleDraggable;
-      });
-    });
-    const areAllSelectedResizable = computed(() => {
-      if (selectedAnnotationsOnPage.value.length < 2) return false;
-      return selectedAnnotationsOnPage.value.every((ta) => {
-        var _a;
-        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
-        const groupResizable = resolveInteractionProp(
-          tool == null ? void 0 : tool.interaction.isGroupResizable,
-          ta.object,
-          true
-        );
-        const singleResizable = resolveInteractionProp(tool == null ? void 0 : tool.interaction.isResizable, ta.object, true);
-        return (tool == null ? void 0 : tool.interaction.isGroupResizable) !== void 0 ? groupResizable : singleResizable;
-      });
-    });
-    const areAllSelectedRotatable = computed(() => {
-      if (selectedAnnotationsOnPage.value.length < 2) return false;
-      return selectedAnnotationsOnPage.value.every((ta) => {
-        var _a;
-        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
-        const groupRotatable = resolveInteractionProp(
-          tool == null ? void 0 : tool.interaction.isGroupRotatable,
-          ta.object,
-          true
-        );
-        const singleRotatable = resolveInteractionProp(tool == null ? void 0 : tool.interaction.isRotatable, ta.object, true);
-        return (tool == null ? void 0 : tool.interaction.isGroupRotatable) !== void 0 ? groupRotatable : singleRotatable;
-      });
-    });
-    const shouldLockGroupAspectRatio = computed(() => {
-      if (selectedAnnotationsOnPage.value.length < 2) return false;
-      return selectedAnnotationsOnPage.value.some((ta) => {
-        var _a;
-        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
-        const groupLock = resolveInteractionProp(
-          tool == null ? void 0 : tool.interaction.lockGroupAspectRatio,
-          ta.object,
-          false
+    watch(
+      [annotationProvides, () => props.pageIndex, () => props.scale],
+      ([provides, pageIndex, scale], _prev, onCleanup) => {
+        if (!provides) {
+          appearanceMap.value = {};
+          return;
+        }
+        if (prevScale !== scale) {
+          provides.invalidatePageAppearances(pageIndex);
+          prevScale = scale;
+        }
+        let cancelled = false;
+        onCleanup(() => {
+          cancelled = true;
+        });
+        const task = provides.getPageAppearances(pageIndex, {
+          scaleFactor: scale,
+          dpr: typeof window !== "undefined" ? window.devicePixelRatio : 1
+        });
+        task.wait(
+          (map) => {
+            if (!cancelled) appearanceMap.value = map;
+          },
+          () => {
+            if (!cancelled) appearanceMap.value = {};
+          }
         );
-        const singleLock = resolveInteractionProp(tool == null ? void 0 : tool.interaction.lockAspectRatio, ta.object, false);
-        return (tool == null ? void 0 : tool.interaction.lockGroupAspectRatio) !== void 0 ? groupLock : singleLock;
-      });
-    });
-    const allSelectedOnSamePage = computed(() => {
-      if (!annotationProvides.value) return false;
-      if (allSelectedIds.value.length < 2) return false;
-      const allSelected = annotationProvides.value.getSelectedAnnotations();
-      return allSelected.every((ta) => ta.object.pageIndex === props.pageIndex);
-    });
-    const getTool = (annotation) => {
+      },
+      { immediate: true }
+    );
+    const resolvedAnnotations = computed(
+      () => annotations.value.map((annotation) => ({
+        annotation,
+        renderer: resolveRenderer(annotation)
+      }))
+    );
+    const getFinalDraggable = (annotation, renderer) => {
       var _a;
-      return (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
+      const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
+      const defaults = renderer.interactionDefaults;
+      const isEditing = editingId.value === annotation.object.id;
+      const resolvedDraggable = resolveInteractionProp(
+        tool == null ? void 0 : tool.interaction.isDraggable,
+        annotation.object,
+        (defaults == null ? void 0 : defaults.isDraggable) ?? true
+      );
+      return renderer.isDraggable ? renderer.isDraggable(resolvedDraggable, { isEditing }) : resolvedDraggable;
     };
-    const isDraggable = (anno) => {
-      var _a;
-      if (isFreeText(anno) && editingId.value === anno.object.id) return false;
-      if (isMultiSelected.value) return false;
-      return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.isDraggable, anno.object, false);
+    const getResolvedResizable = (annotation, renderer) => {
+      var _a, _b;
+      const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
+      return resolveInteractionProp(
+        tool == null ? void 0 : tool.interaction.isResizable,
+        annotation.object,
+        ((_b = renderer.interactionDefaults) == null ? void 0 : _b.isResizable) ?? false
+      );
     };
-    const isResizable = (anno) => {
-      var _a;
-      if (isMultiSelected.value) return false;
-      return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.isResizable, anno.object, false);
+    const getResolvedLockAspectRatio = (annotation, renderer) => {
+      var _a, _b;
+      const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
+      return resolveInteractionProp(
+        tool == null ? void 0 : tool.interaction.lockAspectRatio,
+        annotation.object,
+        ((_b = renderer.interactionDefaults) == null ? void 0 : _b.lockAspectRatio) ?? false
+      );
     };
-    const lockAspectRatio = (anno) => {
-      var _a;
-      return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.lockAspectRatio, anno.object, false);
+    const getResolvedRotatable = (annotation, renderer) => {
+      var _a, _b;
+      const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
+      return resolveInteractionProp(
+        tool == null ? void 0 : tool.interaction.isRotatable,
+        annotation.object,
+        ((_b = renderer.interactionDefaults) == null ? void 0 : _b.isRotatable) ?? false
+      );
     };
-    const isRotatableFor = (anno, fallback) => {
+    const getSelectionMenu = (annotation, renderer) => {
       var _a;
-      if (isMultiSelected.value) return false;
-      return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.isRotatable, anno.object, fallback);
-    };
-    const showIndividualSelection = (anno) => isSelected(anno) && !isMultiSelected.value;
-    const containerProps = computed(() => {
-      const {
-        selectionMenu: _sm,
-        groupSelectionMenu: _gsm,
-        groupSelectionOutline: _gso,
-        ...rest
-      } = props;
-      return rest;
-    });
-    const getVertexConfig = (annotation) => {
-      if (isLine(annotation)) {
-        return {
-          extractVertices: (anno) => [anno.linePoints.start, anno.linePoints.end],
-          transformAnnotation: (anno, vertices) => ({
-            ...anno,
-            linePoints: { start: vertices[0], end: vertices[1] }
-          })
-        };
-      }
-      if (isPolyline(annotation) || isPolygon(annotation)) {
-        return {
-          extractVertices: (anno) => anno.vertices,
-          transformAnnotation: (anno, vertices) => ({ ...anno, vertices })
-        };
-      }
-      return void 0;
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(annotations.value, (annotation) => {
-          return openBlock(), createElementBlock(Fragment, {
-            key: annotation.object.id
-          }, [
-            findCustomRenderer(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 0,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, false),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(findCustomRenderer(annotation).component), {
-                  annotation,
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  pageIndex: __props.pageIndex,
-                  onClick: (e) => handleClick(e, annotation)
-                }, null, 8, ["annotation", "isSelected", "scale", "pageIndex", "onClick"]))
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "selectionMenu", "style"])) : unref(isInk)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 1,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$h, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["isSelected", "scale", "onClick"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "vertex-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquare)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 2,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$c, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["isSelected", "scale", "onClick"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "vertex-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isCircle)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 3,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$j, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["isSelected", "scale", "onClick"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "vertex-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLine)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 4,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$g, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["isSelected", "scale", "onClick"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "vertex-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolyline)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 5,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$d, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["isSelected", "scale", "onClick"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "vertex-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolygon)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 6,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$e, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["isSelected", "scale", "onClick"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "vertex-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isFreeText)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 7,
+      if ((_a = renderer.hideSelectionMenu) == null ? void 0 : _a.call(renderer, annotation.object)) return void 0;
+      if (isMultiSelected.value) return void 0;
+      return props.selectionMenu;
+    };
+    const getOnSelect = (annotation, renderer) => {
+      if (renderer.selectOverride) {
+        const selectHelpers = {
+          defaultSelect: handleClick,
+          selectAnnotation: (pi, id) => {
+            var _a;
+            return (_a = annotationProvides.value) == null ? void 0 : _a.selectAnnotation(pi, id);
+          },
+          clearSelection: () => {
+            var _a;
+            return (_a = selectionProvides.value) == null ? void 0 : _a.clear();
+          },
+          allAnnotations: annotations.value,
+          pageIndex: props.pageIndex
+        };
+        return (e) => renderer.selectOverride(e, annotation, selectHelpers);
+      }
+      return (e) => handleClick(e, annotation);
+    };
+    const handlePointerDown = (_pos, pe) => {
+      if (pe.target === pe.currentTarget && annotationProvides.value) {
+        annotationProvides.value.deselectAnnotation();
+        editingId.value = null;
+      }
+    };
+    const handleClick = (e, annotation) => {
+      e.stopPropagation();
+      if (annotationProvides.value && selectionProvides.value) {
+        selectionProvides.value.clear();
+        const isModifierPressed = "metaKey" in e ? e.metaKey || e.ctrlKey : false;
+        if (isModifierPressed) {
+          annotationProvides.value.toggleSelection(props.pageIndex, annotation.object.id);
+        } else {
+          annotationProvides.value.selectAnnotation(props.pageIndex, annotation.object.id);
+        }
+        if (annotation.object.id !== editingId.value) {
+          editingId.value = null;
+        }
+      }
+    };
+    const setEditingId = (id) => {
+      editingId.value = id;
+    };
+    const pointerHandlers = { onPointerDown: handlePointerDown };
+    watch(
+      annotationProvides,
+      (provides, _prev, onCleanup) => {
+        if (!provides) return;
+        const unregister = register(pointerHandlers);
+        if (unregister) {
+          onCleanup(unregister);
+        }
+      },
+      { immediate: true }
+    );
+    const selectedAnnotationsOnPage = computed(
+      () => annotations.value.filter((anno) => allSelectedIds.value.includes(anno.object.id))
+    );
+    const areAllSelectedDraggable = computed(() => {
+      if (selectedAnnotationsOnPage.value.length < 2) return false;
+      return selectedAnnotationsOnPage.value.every((ta) => {
+        var _a;
+        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
+        const groupDraggable = resolveInteractionProp(
+          tool == null ? void 0 : tool.interaction.isGroupDraggable,
+          ta.object,
+          true
+        );
+        const singleDraggable = resolveInteractionProp(tool == null ? void 0 : tool.interaction.isDraggable, ta.object, true);
+        return (tool == null ? void 0 : tool.interaction.isGroupDraggable) !== void 0 ? groupDraggable : singleDraggable;
+      });
+    });
+    const areAllSelectedResizable = computed(() => {
+      if (selectedAnnotationsOnPage.value.length < 2) return false;
+      return selectedAnnotationsOnPage.value.every((ta) => {
+        var _a;
+        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
+        const groupResizable = resolveInteractionProp(
+          tool == null ? void 0 : tool.interaction.isGroupResizable,
+          ta.object,
+          true
+        );
+        const singleResizable = resolveInteractionProp(tool == null ? void 0 : tool.interaction.isResizable, ta.object, true);
+        return (tool == null ? void 0 : tool.interaction.isGroupResizable) !== void 0 ? groupResizable : singleResizable;
+      });
+    });
+    const areAllSelectedRotatable = computed(() => {
+      if (selectedAnnotationsOnPage.value.length < 2) return false;
+      return selectedAnnotationsOnPage.value.every((ta) => {
+        var _a;
+        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
+        const groupRotatable = resolveInteractionProp(
+          tool == null ? void 0 : tool.interaction.isGroupRotatable,
+          ta.object,
+          true
+        );
+        const singleRotatable = resolveInteractionProp(tool == null ? void 0 : tool.interaction.isRotatable, ta.object, true);
+        return (tool == null ? void 0 : tool.interaction.isGroupRotatable) !== void 0 ? groupRotatable : singleRotatable;
+      });
+    });
+    const shouldLockGroupAspectRatio = computed(() => {
+      if (selectedAnnotationsOnPage.value.length < 2) return false;
+      return selectedAnnotationsOnPage.value.some((ta) => {
+        var _a;
+        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
+        const groupLock = resolveInteractionProp(
+          tool == null ? void 0 : tool.interaction.lockGroupAspectRatio,
+          ta.object,
+          false
+        );
+        const singleLock = resolveInteractionProp(tool == null ? void 0 : tool.interaction.lockAspectRatio, ta.object, false);
+        return (tool == null ? void 0 : tool.interaction.lockGroupAspectRatio) !== void 0 ? groupLock : singleLock;
+      });
+    });
+    const allSelectedOnSamePage = computed(() => {
+      if (!annotationProvides.value) return false;
+      if (allSelectedIds.value.length < 2) return false;
+      const allSelected = annotationProvides.value.getSelectedAnnotations();
+      return allSelected.every((ta) => ta.object.pageIndex === props.pageIndex);
+    });
+    const getOnDoubleClick = (renderer, annotation) => {
+      if (!renderer.onDoubleClick) return void 0;
+      return (e) => {
+        e.stopPropagation();
+        renderer.onDoubleClick(annotation.object.id, setEditingId);
+      };
+    };
+    const getContainerStyle = (annotation, renderer) => {
+      var _a;
+      return ((_a = renderer.containerStyle) == null ? void 0 : _a.call(renderer, annotation.object)) ?? {
+        mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+      };
+    };
+    const getAppearance = (annotation, renderer) => {
+      var _a, _b;
+      const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
+      const useAP = ((_b = tool == null ? void 0 : tool.behavior) == null ? void 0 : _b.useAppearanceStream) ?? renderer.useAppearanceStream ?? true;
+      return useAP ? getAppearanceForAnnotation(annotation) : void 0;
+    };
+    const containerProps = computed(() => {
+      const {
+        selectionMenu: _sm,
+        groupSelectionMenu: _gsm,
+        groupSelectionOutline: _gso,
+        annotationRenderers: _ar,
+        ...rest
+      } = props;
+      return rest;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedAnnotations.value, ({ annotation, renderer }) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: annotation.object.id
+          }, [
+            renderer ? (openBlock(), createBlock(_sfc_main$y, mergeProps({
+              key: 0,
               trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              onDoubleClick: (e) => handleDoubleClick(e, annotation.object.id),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
+              isSelected: allSelectedIds.value.includes(annotation.object.id),
+              isEditing: editingId.value === annotation.object.id,
+              isMultiSelected: isMultiSelected.value,
+              isDraggable: getFinalDraggable(annotation, renderer),
+              isResizable: getResolvedResizable(annotation, renderer),
+              lockAspectRatio: getResolvedLockAspectRatio(annotation, renderer),
+              isRotatable: getResolvedRotatable(annotation, renderer),
+              vertexConfig: renderer.vertexConfig,
+              selectionMenu: getSelectionMenu(annotation, renderer),
+              onSelect: getOnSelect(annotation, renderer),
+              onDoubleClick: getOnDoubleClick(renderer, annotation),
+              zIndex: renderer.zIndex,
+              style: getContainerStyle(annotation, renderer),
+              appearance: getAppearance(annotation, renderer)
             }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$i, {
-                  isSelected: isSelected(annotation),
+              default: withCtx(({ annotation: currentObject, appearanceActive }) => [
+                (openBlock(), createBlock(resolveDynamicComponent(renderer.component), {
+                  annotation,
+                  currentObject,
+                  isSelected: allSelectedIds.value.includes(annotation.object.id),
                   isEditing: editingId.value === annotation.object.id,
-                  annotation: { ...annotation, object: currentObject },
-                  pageIndex: __props.pageIndex,
                   scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }, null, 8, ["isSelected", "isEditing", "annotation", "pageIndex", "scale", "onClick"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "vertex-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              "rotation-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "rotation-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "onDoubleClick", "vertexConfig", "selectionMenu", "style"])) : unref(isStamp)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 8,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, true),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(() => [
-                createVNode(_sfc_main$a, {
-                  documentId: __props.documentId,
-                  isSelected: isSelected(annotation),
-                  annotation,
                   pageIndex: __props.pageIndex,
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }, null, 8, ["documentId", "isSelected", "annotation", "pageIndex", "scale", "onClick"])
+                  documentId: __props.documentId,
+                  onClick: getOnSelect(annotation, renderer),
+                  appearanceActive
+                }, null, 8, ["annotation", "currentObject", "isSelected", "isEditing", "scale", "pageIndex", "documentId", "onClick", "appearanceActive"]))
               ]),
               "resize-handle": withCtx((slotProps) => [
                 renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
@@ -2894,159 +3455,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isUnderline)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 9,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, false),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              zIndex: 0,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["scale", "onClick"])
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isStrikeout)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 10,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, false),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              zIndex: 0,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["scale", "onClick"])
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquiggly)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 11,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, false),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              zIndex: 0,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["scale", "onClick"])
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isHighlight)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 12,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isDraggable: isDraggable(annotation),
-              isResizable: isResizable(annotation),
-              isRotatable: isRotatableFor(annotation, false),
-              lockAspectRatio: lockAspectRatio(annotation),
-              onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
-              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
-              zIndex: 0,
-              style: blendStyle(annotation, unref(PdfBlendMode).Multiply)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$9, mergeProps({ ref_for: true }, currentObject, {
-                  scale: __props.scale,
-                  onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["scale", "onClick"])
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLink)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
-              key: 13,
-              trackedAnnotation: annotation,
-              isSelected: showIndividualSelection(annotation),
-              isMultiSelected: isMultiSelected.value,
-              isDraggable: false,
-              isResizable: false,
-              isRotatable: false,
-              lockAspectRatio: false,
-              onSelect: (e) => handleLinkClick(e, annotation),
-              selectionMenu: annotation.object.inReplyToId ? void 0 : isMultiSelected.value ? void 0 : __props.selectionMenu,
-              style: blendStyle(annotation)
-            }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$f, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: isSelected(annotation),
-                  scale: __props.scale,
-                  onClick: (e) => handleLinkClick(e, annotation),
-                  hasIRT: !!annotation.object.inReplyToId
-                }), null, 16, ["isSelected", "scale", "onClick", "hasIRT"])
-              ]),
-              "resize-handle": withCtx((slotProps) => [
-                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-              ]),
-              _: 2
-            }, [
-              !isMultiSelected.value && !annotation.object.inReplyToId ? {
-                name: "selection-menu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isMultiSelected", "onSelect", "selectionMenu", "style"])) : createCommentVNode("", true)
+            ]), 1040, ["trackedAnnotation", "isSelected", "isEditing", "isMultiSelected", "isDraggable", "isResizable", "lockAspectRatio", "isRotatable", "vertexConfig", "selectionMenu", "onSelect", "onDoubleClick", "zIndex", "style", "appearance"])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
-        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$k, {
+        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$x, {
           key: 0,
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
@@ -3065,7 +3477,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           selectionOutline: __props.groupSelectionOutline ?? __props.selectionOutline,
           groupSelectionMenu: __props.groupSelectionMenu
         }, {
-          "group-selection-menu": withCtx((slotProps) => [
+          "selection-menu": withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "group-selection-menu", normalizeProps(guardReactiveProps(slotProps)))
           ]),
           "resize-handle": withCtx((slotProps) => [
@@ -3129,25 +3541,25 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           inset: 0
         })
       }, [
-        activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$9, {
+        activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$d, {
           key: 0,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$6, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$b, {
           key: 1,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$7, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$9, {
           key: 2,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$8, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$7, {
           key: 3,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
@@ -3179,27 +3591,27 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(style.value)
       }, [
-        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$j), mergeProps({
+        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$s), mergeProps({
           key: 0,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$c), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$u), mergeProps({
           key: 1,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$e), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$m), mergeProps({
           key: 2,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$d), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$o), mergeProps({
           key: 3,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$g), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$q), mergeProps({
           key: 4,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$h), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$w), mergeProps({
           key: 5,
           isSelected: false,
           scale: __props.scale
@@ -3317,45 +3729,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const RendererRegistryKey = Symbol(
-  "AnnotationRendererRegistry"
-);
-function createRendererRegistry() {
-  const renderers = shallowRef([]);
-  return {
-    register(entries) {
-      const ids = new Set(entries.map((e) => e.id));
-      renderers.value = [...renderers.value.filter((r) => !ids.has(r.id)), ...entries];
-      return () => {
-        renderers.value = renderers.value.filter((r) => !entries.some((e) => e.id === r.id));
-      };
-    },
-    getAll() {
-      return renderers.value;
-    }
-  };
-}
-function provideRendererRegistry() {
-  const registry = createRendererRegistry();
-  provide(RendererRegistryKey, registry);
-  return registry;
-}
-function useRendererRegistry() {
-  return inject(RendererRegistryKey, null);
-}
-function useRegisterRenderers(entries) {
-  const registry = useRendererRegistry();
-  if (!registry) return;
-  const unregister = registry.register(entries);
-  onUnmounted(unregister);
-}
-function createRenderer(entry) {
-  return {
-    id: entry.id,
-    matches: entry.matches,
-    component: markRaw(entry.component)
-  };
-}
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "annotation-layer",
   props: {
@@ -3489,29 +3862,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 });
 const AnnotationPluginPackage = createPluginPackage(AnnotationPluginPackage$1).addWrapper(_sfc_main).build();
 export {
-  _sfc_main$l as AnnotationContainer,
+  _sfc_main$y as AnnotationContainer,
   _sfc_main$1 as AnnotationLayer,
   _sfc_main$2 as AnnotationPaintLayer,
   AnnotationPluginPackage,
   _sfc_main$5 as Annotations,
-  _sfc_main$j as Circle,
-  _sfc_main$i as FreeText,
-  _sfc_main$k as GroupSelectionBox,
-  _sfc_main$9 as Highlight,
-  _sfc_main$h as Ink,
-  _sfc_main$g as Line,
+  _sfc_main$s as Circle,
+  _sfc_main$k as FreeText,
+  _sfc_main$x as GroupSelectionBox,
+  _sfc_main$d as Highlight,
+  _sfc_main$w as Ink,
+  _sfc_main$q as Line,
   _sfc_main$f as Link,
-  _sfc_main$e as Polygon,
-  _sfc_main$d as Polyline,
+  _sfc_main$m as Polygon,
+  _sfc_main$o as Polyline,
   _sfc_main$3 as PreviewRenderer,
-  _sfc_main$b as RenderAnnotation,
+  _sfc_main$i as RenderAnnotation,
   _sfc_main as RendererRegistryProvider,
-  _sfc_main$c as Square,
-  _sfc_main$8 as Squiggly,
-  _sfc_main$a as Stamp,
-  _sfc_main$7 as Strikeout,
+  _sfc_main$u as Square,
+  _sfc_main$7 as Squiggly,
+  _sfc_main$h as Stamp,
+  _sfc_main$9 as Strikeout,
   _sfc_main$4 as TextMarkup,
-  _sfc_main$6 as Underline,
+  _sfc_main$b as Underline,
   createRenderer,
   createRendererRegistry,
   provideRendererRegistry,