@embedpdf/plugin-annotation 2.3.0 → 2.4.0

package/dist/vue/index.js

@@ -1,8 +1,9 @@
-import { ref, toValue, watch, computed, defineComponent, shallowRef, toRaw, useSlots, watchEffect, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, mergeProps, unref, renderSlot, Fragment, renderList, withCtx, resolveDynamicComponent, normalizeStyle, onMounted, toDisplayString, onUnmounted, createVNode, createSlots, normalizeProps, guardReactiveProps } from "vue";
-import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
-import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, isInk, isSquare, isCircle, isLine, isPolyline, isPolygon, isFreeText, isStamp, isUnderline, isStrikeout, isSquiggly, isHighlight, isLink } from "@embedpdf/plugin-annotation";
+import { createPluginPackage } from "@embedpdf/core";
+import { AnnotationPlugin, initialDocumentState, 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";
 export * from "@embedpdf/plugin-annotation";
+import { ref, toValue, watch, computed, defineComponent, shallowRef, toRaw, useSlots, watchEffect, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, mergeProps, unref, renderSlot, Fragment, renderList, withCtx, resolveDynamicComponent, normalizeStyle, onMounted, toDisplayString, onUnmounted, createVNode, createSlots, normalizeProps, guardReactiveProps, provide, inject, markRaw } from "vue";
 import { useInteractionHandles, useDoublePressProps, CounterRotate, deepToRaw } from "@embedpdf/utils/vue";
+import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
 import { boundingRectOrEmpty, PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
@@ -43,7 +44,7 @@ const _hoisted_1$a = {
 const __default__ = {
   inheritAttrs: false
 };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "annotation-container",
   props: {
@@ -229,13 +230,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       includeVertices: !!props.vertexConfig
     });
     const doubleProps = useDoublePressProps(guardedOnDoubleClick);
-    watch(
-      () => props.trackedAnnotation.object,
-      (newObject) => {
-        preview.value = newObject;
-      },
-      { deep: true }
-    );
+    watchEffect(() => {
+      if (props.trackedAnnotation.object) {
+        preview.value = props.trackedAnnotation.object;
+      }
+    });
     watchEffect((onCleanup) => {
       const plugin = annotationPlugin.value;
       if (!plugin) return;
@@ -336,7 +335,7 @@ const _hoisted_1$9 = {
   "data-group-selection-box": "",
   "data-no-interaction": ""
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "group-selection-box",
   props: {
     documentId: {},
@@ -358,9 +357,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const props = __props;
     const slots = useSlots();
     const { plugin: annotationPlugin } = useAnnotationPlugin();
+    const permissions = useDocumentPermissions(() => props.documentId);
     const gestureBase = shallowRef(null);
     const isDraggingRef = ref(false);
     const isResizingRef = ref(false);
+    const effectiveIsDraggable = computed(
+      () => permissions.value.canModifyAnnotations && props.isDraggable
+    );
+    const effectiveIsResizable = computed(
+      () => permissions.value.canModifyAnnotations && props.isResizable
+    );
     const HANDLE_COLOR = computed(() => {
       var _a;
       return ((_a = props.resizeUI) == null ? void 0 : _a.color) ?? "#007ACC";
@@ -391,7 +397,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       height: `${previewGroupBox.value.size.height * props.scale}px`,
       outline: `2px dashed ${props.selectionOutlineColor}`,
       outlineOffset: `${props.outlineOffset - 1}px`,
-      cursor: props.isDraggable ? "move" : "default",
+      cursor: effectiveIsDraggable.value ? "move" : "default",
       touchAction: "none",
       zIndex: props.zIndex
     }));
@@ -452,7 +458,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           const transformType = event.transformData.type;
           const isMove = transformType === "move";
           const isResize = transformType === "resize";
-          if (isMove && !props.isDraggable) return;
+          if (isMove && !effectiveIsDraggable.value) return;
           if (event.state === "start") {
             gestureBase.value = groupBox.value;
             if (isMove) {
@@ -517,11 +523,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return __props.selectedAnnotations.length >= 2 ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createElementVNode("div", mergeProps(__props.isDraggable ? unref(dragProps) : {}, {
+        createElementVNode("div", mergeProps(effectiveIsDraggable.value ? unref(dragProps) : {}, {
           style: boxStyle.value,
-          onPointerdown: _cache[0] || (_cache[0] = ($event) => !__props.isDraggable ? $event.stopPropagation() : void 0)
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => !effectiveIsDraggable.value ? $event.stopPropagation() : void 0)
         }), [
-          __props.isResizable ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(resize), ({ key, style, ...handle }) => {
+          effectiveIsResizable.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(resize), ({ key, style, ...handle }) => {
             return openBlock(), createElementBlock(Fragment, { key }, [
               unref(slots)["resize-handle"] ? renderSlot(_ctx.$slots, "resize-handle", mergeProps({
                 key: 0,
@@ -562,7 +568,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$8 = ["width", "height", "viewBox"];
 const _hoisted_2$6 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "circle",
   props: {
     isSelected: { type: Boolean },
@@ -634,7 +640,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$7 = ["contenteditable"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "free-text",
   props: {
     isSelected: { type: Boolean },
@@ -737,7 +743,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$6 = ["width", "height", "viewBox"];
 const _hoisted_2$5 = ["d", "opacity"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "ink",
   props: {
     isSelected: { type: Boolean },
@@ -807,7 +813,7 @@ 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$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "line",
   props: {
     color: { default: "transparent" },
@@ -928,7 +934,7 @@ 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$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "link",
   props: {
     isSelected: { type: Boolean },
@@ -1017,7 +1023,7 @@ 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$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "polygon",
   props: {
     rect: {},
@@ -1119,7 +1125,7 @@ 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$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "polyline",
   props: {
     rect: {},
@@ -1241,7 +1247,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1 = ["width", "height", "viewBox"];
 const _hoisted_2 = ["x", "y", "width", "height", "fill", "opacity"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "square",
   props: {
     isSelected: { type: Boolean },
@@ -1311,7 +1317,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1 = ["src"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "render-annotation",
   props: {
     documentId: {},
@@ -1407,7 +1413,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "stamp",
   props: {
     isSelected: { type: Boolean },
@@ -1433,7 +1439,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
         (...args) => __props.onClick && __props.onClick(...args))
       }, [
-        createVNode(_sfc_main$a, {
+        createVNode(_sfc_main$b, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
           annotation: { ...__props.annotation.object, id: __props.annotation.object.id },
@@ -1443,7 +1449,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "highlight",
   props: {
     strokeColor: {},
@@ -1481,7 +1487,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "squiggly",
   props: {
     strokeColor: {},
@@ -1544,7 +1550,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "strikeout",
   props: {
     strokeColor: {},
@@ -1596,7 +1602,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "underline",
   props: {
     strokeColor: {},
@@ -1647,7 +1653,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "annotations",
   props: {
     documentId: {},
@@ -1660,10 +1666,15 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     vertexUI: {},
     selectionOutlineColor: {},
     selectionMenu: { type: Function },
-    groupSelectionMenu: { type: Function }
+    groupSelectionMenu: { type: Function },
+    annotationRenderers: {}
   },
   setup(__props) {
     const props = __props;
+    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([]);
@@ -1746,7 +1757,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return selectedAnnotationsOnPage.value.every((ta) => {
         var _a;
         const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
-        return (tool == null ? void 0 : tool.interaction.isGroupDraggable) ?? (tool == null ? void 0 : tool.interaction.isDraggable) ?? true;
+        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(() => {
@@ -1754,7 +1771,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return selectedAnnotationsOnPage.value.every((ta) => {
         var _a;
         const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
-        return (tool == null ? void 0 : tool.interaction.isGroupResizable) ?? (tool == null ? void 0 : tool.interaction.isResizable) ?? true;
+        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 allSelectedOnSamePage = computed(() => {
@@ -1771,16 +1794,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       var _a;
       if (isFreeText(anno) && editingId.value === anno.object.id) return false;
       if (isMultiSelected.value) return false;
-      return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
+      return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.isDraggable, anno.object, false);
     };
     const isResizable = (anno) => {
       var _a;
       if (isMultiSelected.value) return false;
-      return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+      return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.isResizable, anno.object, false);
     };
     const lockAspectRatio = (anno) => {
       var _a;
-      return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
+      return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.lockAspectRatio, anno.object, false);
     };
     const showIndividualSelection = (anno) => isSelected(anno) && !isMultiSelected.value;
     const containerProps = computed(() => {
@@ -1811,7 +1834,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock(Fragment, {
             key: annotation.object.id
           }, [
-            unref(isInk)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+            findCustomRenderer(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
               key: 0,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
@@ -1819,23 +1842,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               isResizable: isResizable(annotation),
               lockAspectRatio: lockAspectRatio(annotation),
               onSelect: (e) => handleClick(e, annotation),
-              vertexConfig: getVertexConfig(annotation),
               selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
-              default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$g, mergeProps({ ref_for: true }, currentObject, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(findCustomRenderer(annotation).component), {
+                  annotation,
                   isSelected: isSelected(annotation),
                   scale: __props.scale,
+                  pageIndex: __props.pageIndex,
                   onClick: (e) => handleClick(e, annotation)
-                }), null, 16, ["isSelected", "scale", "onClick"])
+                }, null, 8, ["annotation", "isSelected", "scale", "pageIndex", "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))
-              ]),
               _: 2
             }, [
               !isMultiSelected.value ? {
@@ -1845,7 +1866,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquare)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "selectionMenu", "style"])) : unref(isInk)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
               key: 1,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
@@ -1858,7 +1879,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$b, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$h, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
@@ -1879,7 +1900,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isCircle)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquare)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
               key: 2,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
@@ -1892,7 +1913,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$i, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$c, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
@@ -1913,7 +1934,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLine)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isCircle)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
               key: 3,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
@@ -1926,7 +1947,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$f, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$j, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
@@ -1947,7 +1968,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolyline)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLine)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
               key: 4,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
@@ -1960,7 +1981,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$c, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$g, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
@@ -1981,7 +2002,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolygon)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolyline)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
               key: 5,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
@@ -2015,7 +2036,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isFreeText)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolygon)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
               key: 6,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
@@ -2023,13 +2044,47 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               isResizable: isResizable(annotation),
               lockAspectRatio: lockAspectRatio(annotation),
               onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { 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))
+              ]),
+              _: 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", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isFreeText)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+              key: 7,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$h, {
+                createVNode(_sfc_main$i, {
                   isSelected: isSelected(annotation),
                   isEditing: editingId.value === annotation.object.id,
                   annotation: { ...annotation, object: currentObject },
@@ -2053,8 +2108,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "onDoubleClick", "vertexConfig", "selectionMenu", "style"])) : unref(isStamp)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
-              key: 7,
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "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),
@@ -2066,7 +2121,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(() => [
-                createVNode(_sfc_main$9, {
+                createVNode(_sfc_main$a, {
                   documentId: __props.documentId,
                   isSelected: isSelected(annotation),
                   annotation,
@@ -2090,8 +2145,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isUnderline)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
-              key: 8,
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isUnderline)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+              key: 9,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
               isDraggable: isDraggable(annotation),
@@ -2104,7 +2159,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$5, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["scale", "onClick"])
@@ -2118,8 +2173,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isStrikeout)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
-              key: 9,
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isStrikeout)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+              key: 10,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
               isDraggable: isDraggable(annotation),
@@ -2132,7 +2187,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["scale", "onClick"])
@@ -2146,8 +2201,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquiggly)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
-              key: 10,
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquiggly)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+              key: 11,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
               isDraggable: isDraggable(annotation),
@@ -2160,7 +2215,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["scale", "onClick"])
@@ -2174,8 +2229,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isHighlight)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
-              key: 11,
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isHighlight)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+              key: 12,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
               isDraggable: isDraggable(annotation),
@@ -2190,7 +2245,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$9, mergeProps({ ref_for: true }, currentObject, {
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["scale", "onClick"])
@@ -2204,8 +2259,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLink)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
-              key: 12,
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLink)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+              key: 13,
               trackedAnnotation: annotation,
               isSelected: showIndividualSelection(annotation),
               isMultiSelected: isMultiSelected.value,
@@ -2217,7 +2272,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
-                createVNode(_sfc_main$e, mergeProps({ ref_for: true }, currentObject, {
+                createVNode(_sfc_main$f, mergeProps({ ref_for: true }, currentObject, {
                   isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleLinkClick(e, annotation),
@@ -2239,7 +2294,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ]), 1040, ["trackedAnnotation", "isSelected", "isMultiSelected", "onSelect", "selectionMenu", "style"])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
-        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$j, {
+        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$k, {
           key: 0,
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
@@ -2266,7 +2321,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "text-markup",
   props: {
     documentId: {},
@@ -2315,25 +2370,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           inset: 0
         })
       }, [
-        activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$8, {
+        activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$9, {
           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$5, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$6, {
           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$6, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$7, {
           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$7, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$8, {
           key: 3,
           strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
@@ -2344,7 +2399,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "preview-renderer",
   props: {
     preview: {},
@@ -2365,27 +2420,27 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(style.value)
       }, [
-        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$i), mergeProps({
+        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$j), 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$b), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).SQUARE ? (openBlock(), createBlock(unref(_sfc_main$c), 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$d), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYGON ? (openBlock(), createBlock(unref(_sfc_main$e), 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$c), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).POLYLINE ? (openBlock(), createBlock(unref(_sfc_main$d), 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$f), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$g), 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$g), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$h), mergeProps({
           key: 5,
           isSelected: false,
           scale: __props.scale
@@ -2402,7 +2457,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "annotation-paint-layer",
   props: {
     documentId: {},
@@ -2493,7 +2548,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           style: { "display": "none" }
         }, null, 512),
         (openBlock(true), createElementBlock(Fragment, null, renderList(previews.value.entries(), ([toolId, preview]) => {
-          return openBlock(), createBlock(_sfc_main$2, {
+          return openBlock(), createBlock(_sfc_main$3, {
             key: toolId,
             preview,
             scale: __props.scale
@@ -2503,7 +2558,46 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__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: {
     documentId: {},
@@ -2514,10 +2608,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     vertexUI: {},
     selectionOutlineColor: {},
     selectionMenu: { type: Function },
-    groupSelectionMenu: { type: Function }
+    groupSelectionMenu: { type: Function },
+    annotationRenderers: {}
   },
   setup(__props) {
     const props = __props;
+    const registry = useRendererRegistry();
+    const allRenderers = computed(() => {
+      const fromRegistry = (registry == null ? void 0 : registry.getAll()) ?? [];
+      const fromProps = props.annotationRenderers ?? [];
+      const merged = [...fromRegistry];
+      for (const r of fromProps) {
+        const idx = merged.findIndex((m) => m.id === r.id);
+        if (idx >= 0) merged[idx] = r;
+        else merged.push(r);
+      }
+      return merged;
+    });
     const documentState = useDocumentState(() => props.documentId);
     const page = computed(() => {
       var _a, _b, _c;
@@ -2543,7 +2650,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", null, [
-        createVNode(_sfc_main$4, {
+        createVNode(_sfc_main$5, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
           scale: actualScale.value,
@@ -2554,7 +2661,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           vertexUI: __props.vertexUI,
           selectionOutlineColor: __props.selectionOutlineColor,
           selectionMenu: __props.selectionMenu,
-          groupSelectionMenu: __props.groupSelectionMenu
+          groupSelectionMenu: __props.groupSelectionMenu,
+          annotationRenderers: allRenderers.value
         }, {
           "selection-menu": withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "selection-menu", normalizeProps(guardReactiveProps(slotProps)))
@@ -2569,13 +2677,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "vertex-handle", normalizeProps(guardReactiveProps(slotProps)))
           ]),
           _: 3
-        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "resizeUI", "vertexUI", "selectionOutlineColor", "selectionMenu", "groupSelectionMenu"]),
-        createVNode(_sfc_main$3, {
+        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "resizeUI", "vertexUI", "selectionOutlineColor", "selectionMenu", "groupSelectionMenu", "annotationRenderers"]),
+        createVNode(_sfc_main$4, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
           scale: actualScale.value
         }, null, 8, ["documentId", "pageIndex", "scale"]),
-        createVNode(_sfc_main$1, {
+        createVNode(_sfc_main$2, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
           scale: actualScale.value
@@ -2584,30 +2692,47 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "renderer-registry-provider",
+  setup(__props) {
+    provideRendererRegistry();
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+const AnnotationPluginPackage = createPluginPackage(AnnotationPluginPackage$1).addWrapper(_sfc_main).build();
 export {
-  _sfc_main$k as AnnotationContainer,
-  _sfc_main as AnnotationLayer,
-  _sfc_main$1 as AnnotationPaintLayer,
-  _sfc_main$4 as Annotations,
-  _sfc_main$i as Circle,
-  _sfc_main$h as FreeText,
-  _sfc_main$j as GroupSelectionBox,
-  _sfc_main$8 as Highlight,
-  _sfc_main$g as Ink,
-  _sfc_main$f as Line,
-  _sfc_main$e as Link,
-  _sfc_main$d as Polygon,
-  _sfc_main$c as Polyline,
-  _sfc_main$2 as PreviewRenderer,
-  _sfc_main$a as RenderAnnotation,
-  _sfc_main$b as Square,
-  _sfc_main$7 as Squiggly,
-  _sfc_main$9 as Stamp,
-  _sfc_main$6 as Strikeout,
-  _sfc_main$3 as TextMarkup,
-  _sfc_main$5 as Underline,
+  _sfc_main$l 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$f as Link,
+  _sfc_main$e as Polygon,
+  _sfc_main$d as Polyline,
+  _sfc_main$3 as PreviewRenderer,
+  _sfc_main$b 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$4 as TextMarkup,
+  _sfc_main$6 as Underline,
+  createRenderer,
+  createRendererRegistry,
+  provideRendererRegistry,
   useAnnotation,
   useAnnotationCapability,
-  useAnnotationPlugin
+  useAnnotationPlugin,
+  useRegisterRenderers,
+  useRendererRegistry
 };
 //# sourceMappingURL=index.js.map