@embedpdf/plugin-annotation 2.5.0 → 2.6.1

package/dist/vue/index.js

@@ -1,10 +1,10 @@
 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";
+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";
 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 { 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 { 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 } from "@embedpdf/models";
+import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfBlendMode, blendModeToCss, PdfAnnotationSubtype } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
@@ -37,10 +37,8 @@ const useAnnotation = (documentId) => {
     })
   };
 };
-const _hoisted_1$a = {
-  "data-no-interaction": "",
-  style: { display: "contents" }
-};
+const _hoisted_1$a = ["width", "height", "stroke"];
+const _hoisted_2$8 = ["width", "height", "stroke"];
 const __default__ = {
   inheritAttrs: false
 };
@@ -59,6 +57,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     isMultiSelected: { type: Boolean, default: false },
     isDraggable: { type: Boolean },
     isResizable: { type: Boolean },
+    isRotatable: { type: Boolean, default: true },
     lockAspectRatio: { type: Boolean, default: false },
     vertexConfig: {},
     selectionMenu: {},
@@ -67,15 +66,88 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     onSelect: {},
     zIndex: { default: 1 },
     selectionOutlineColor: { default: "#007ACC" },
+    selectionOutline: {},
+    resizeUi: {},
+    vertexUi: {},
+    rotationUi: {},
     style: {}
   },
   setup(__props) {
     const props = __props;
-    const HANDLE_COLOR = "#007ACC";
-    const VERTEX_COLOR = "#007ACC";
-    const HANDLE_SIZE = 12;
-    const VERTEX_SIZE = 12;
+    const HANDLE_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.resizeUi) == null ? void 0 : _a.color) ?? "#007ACC";
+    });
+    const VERTEX_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.vertexUi) == null ? void 0 : _a.color) ?? "#007ACC";
+    });
+    const HANDLE_SIZE = computed(() => {
+      var _a;
+      return ((_a = props.resizeUi) == null ? void 0 : _a.size) ?? 12;
+    });
+    const VERTEX_SIZE = computed(() => {
+      var _a;
+      return ((_a = props.vertexUi) == null ? void 0 : _a.size) ?? 12;
+    });
+    const ROTATION_SIZE = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.size) ?? 32;
+    });
+    const ROTATION_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.color) ?? "white";
+    });
+    const ROTATION_CONNECTOR_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.connectorColor) ?? "#007ACC";
+    });
+    const ROTATION_ICON_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.iconColor) ?? "#007ACC";
+    });
+    const SHOW_CONNECTOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.showConnector) ?? false;
+    });
+    const ROTATION_MARGIN = computed(() => {
+      var _a;
+      return (_a = props.rotationUi) == null ? void 0 : _a.margin;
+    });
+    const ROTATION_BORDER_COLOR = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = props.rotationUi) == null ? void 0 : _a.border) == null ? void 0 : _b.color) ?? "#007ACC";
+    });
+    const ROTATION_BORDER_WIDTH = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = props.rotationUi) == null ? void 0 : _a.border) == null ? void 0 : _b.width) ?? 1;
+    });
+    const ROTATION_BORDER_STYLE = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = props.rotationUi) == null ? void 0 : _a.border) == null ? void 0 : _b.style) ?? "solid";
+    });
+    const outlineColor = computed(
+      () => {
+        var _a;
+        return ((_a = props.selectionOutline) == null ? void 0 : _a.color) ?? props.selectionOutlineColor ?? "#007ACC";
+      }
+    );
+    const outlineStyle = computed(() => {
+      var _a;
+      return ((_a = props.selectionOutline) == null ? void 0 : _a.style) ?? "solid";
+    });
+    const outlineWidth = computed(() => {
+      var _a;
+      return ((_a = props.selectionOutline) == null ? void 0 : _a.width) ?? 1;
+    });
+    const outlineOff = computed(() => {
+      var _a;
+      return ((_a = props.selectionOutline) == null ? void 0 : _a.offset) ?? props.outlineOffset ?? 1;
+    });
     const preview = shallowRef(toRaw(props.trackedAnnotation.object));
+    const liveRotation = ref(null);
+    const cursorScreen = ref(null);
+    const isHandleHovered = ref(false);
     const { provides: annotationCapability } = useAnnotationCapability();
     const { plugin: annotationPlugin } = useAnnotationPlugin();
     const permissions = useDocumentPermissions(props.documentId);
@@ -87,6 +159,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const effectiveIsResizable = computed(
       () => permissions.value.canModifyAnnotations && props.isResizable && !props.isMultiSelected
     );
+    const effectiveIsRotatable = computed(
+      () => permissions.value.canModifyAnnotations && props.isRotatable && !props.isMultiSelected
+    );
     const guardedOnDoubleClick = props.onDoubleClick ? (e) => {
       var _a;
       if (permissions.value.canModifyAnnotations) {
@@ -99,6 +174,40 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const currentObject = computed(
       () => ({ ...toRaw(props.trackedAnnotation.object), ...toRaw(preview.value) })
     );
+    const annotationRotation = computed(
+      () => liveRotation.value ?? currentObject.value.rotation ?? 0
+    );
+    const rotationDisplay = computed(
+      () => liveRotation.value ?? currentObject.value.rotation ?? 0
+    );
+    const normalizedRotationDisplay = computed(() => {
+      const val = rotationDisplay.value;
+      return Number.isFinite(val) ? Math.round(val * 10) / 10 : 0;
+    });
+    const rotationActive = computed(() => liveRotation.value !== null);
+    const explicitUnrotatedRect = computed(
+      () => currentObject.value.unrotatedRect
+    );
+    const effectiveUnrotatedRect = computed(
+      () => explicitUnrotatedRect.value ?? currentObject.value.rect
+    );
+    const rotationPivot = computed(() => {
+      if (explicitUnrotatedRect.value && annotationRotation.value !== 0) {
+        return inferRotationCenterFromRects(
+          effectiveUnrotatedRect.value,
+          currentObject.value.rect,
+          annotationRotation.value
+        );
+      }
+      return void 0;
+    });
+    const controllerElement = computed(() => effectiveUnrotatedRect.value);
+    const childObject = computed(() => {
+      if (explicitUnrotatedRect.value) {
+        return { ...currentObject.value, rect: explicitUnrotatedRect.value };
+      }
+      return currentObject.value;
+    });
     const showOutline = computed(() => props.isSelected && !props.isMultiSelected);
     const shouldShowMenu = computed(() => {
       return props.isSelected && !props.isMultiSelected && (props.selectionMenu || slots["selection-menu"]);
@@ -118,12 +227,13 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       annotation: props.trackedAnnotation,
       pageIndex: props.pageIndex
     }));
-    const menuPlacement = computed(() => ({
-      suggestTop: false,
-      // Could calculate based on position in viewport
-      spaceAbove: 0,
-      spaceBelow: 0
-    }));
+    const menuPlacement = computed(() => {
+      const effectiveAngle = ((annotationRotation.value + props.rotation * 90) % 360 + 360) % 360;
+      const handleNearMenuSide = effectiveIsRotatable.value && effectiveAngle > 90 && effectiveAngle < 270;
+      return {
+        suggestTop: handleNearMenuSide
+      };
+    });
     const renderSelectionMenu = (rect, menuWrapperProps) => {
       if (!props.selectionMenu) return null;
       return props.selectionMenu({
@@ -134,10 +244,6 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         context: menuContext.value
       });
     };
-    const elementSnapshot = computed(() => {
-      const obj = toRaw(currentObject.value);
-      return obj.rect;
-    });
     const verticesSnapshot = computed(() => {
       var _a;
       const obj = toRaw(currentObject.value);
@@ -151,13 +257,21 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         height: props.pageHeight
       }
     }));
-    const { dragProps, vertices, resize } = useInteractionHandles({
+    const {
+      dragProps,
+      vertices,
+      resize,
+      rotation: rotationHandleData
+    } = useInteractionHandles({
       controller: {
-        element: elementSnapshot,
+        element: controllerElement,
         vertices: verticesSnapshot,
         constraints: constraintsSnapshot,
         maintainAspectRatio: computed(() => props.lockAspectRatio),
         pageRotation: computed(() => props.rotation),
+        annotationRotation: computed(() => annotationRotation.value),
+        rotationCenter: computed(() => rotationPivot.value),
+        rotationElement: computed(() => currentObject.value.rect),
         scale: computed(() => props.scale),
         // Disable interaction handles when multi-selected
         enabled: computed(() => props.isSelected && !props.isMultiSelected),
@@ -170,7 +284,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           const id = props.trackedAnnotation.object.id;
           const pageSize = { width: props.pageWidth, height: props.pageHeight };
           if (event.state === "start") {
-            gestureBaseRectRef.value = props.trackedAnnotation.object.rect;
+            gestureBaseRectRef.value = props.trackedAnnotation.object.unrotatedRect ?? props.trackedAnnotation.object.rect;
             gestureBaseRef.value = currentObject.value;
             if (type === "move") {
               plugin.startDrag(props.documentId, { annotationIds: [id], pageSize });
@@ -208,6 +322,27 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
               }
             }
           }
+          if (type === "rotate") {
+            const cursorAngle = (metadata == null ? void 0 : metadata.rotationAngle) ?? annotationRotation.value;
+            const cursorPos = metadata == null ? void 0 : metadata.cursorPosition;
+            if (cursorPos) cursorScreen.value = { x: cursorPos.clientX, y: cursorPos.clientY };
+            if (event.state === "start") {
+              liveRotation.value = cursorAngle;
+              plugin.startRotation(props.documentId, {
+                annotationIds: [id],
+                cursorAngle,
+                rotationCenter: metadata == null ? void 0 : metadata.rotationCenter
+              });
+            } else if (event.state === "move") {
+              liveRotation.value = cursorAngle;
+              plugin.updateRotation(props.documentId, cursorAngle, metadata == null ? void 0 : metadata.rotationDelta);
+            } else if (event.state === "end") {
+              liveRotation.value = null;
+              cursorScreen.value = null;
+              plugin.commitRotation(props.documentId);
+            }
+            return;
+          }
           if (event.state === "end") {
             gestureBaseRectRef.value = null;
             gestureBaseRef.value = null;
@@ -217,19 +352,32 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
         }
       },
       resizeUI: {
-        handleSize: HANDLE_SIZE,
-        spacing: props.outlineOffset,
+        handleSize: HANDLE_SIZE.value,
+        spacing: outlineOff.value,
         offsetMode: "outside",
-        includeSides: !props.lockAspectRatio,
+        includeSides: props.lockAspectRatio ? false : true,
         zIndex: props.zIndex + 1
       },
       vertexUI: {
-        vertexSize: VERTEX_SIZE,
+        vertexSize: VERTEX_SIZE.value,
         zIndex: props.zIndex + 2
       },
-      includeVertices: !!props.vertexConfig
+      rotationUI: {
+        handleSize: ROTATION_SIZE.value,
+        margin: ROTATION_MARGIN.value,
+        zIndex: props.zIndex + 3,
+        showConnector: SHOW_CONNECTOR.value
+      },
+      includeVertices: !!props.vertexConfig,
+      includeRotation: effectiveIsRotatable,
+      currentRotation: annotationRotation
     });
     const doubleProps = useDoublePressProps(guardedOnDoubleClick);
+    const onHandlePointerMove = (e) => {
+      if (!rotationActive.value) {
+        cursorScreen.value = { x: e.clientX, y: e.clientY };
+      }
+    };
     watchEffect(() => {
       if (props.trackedAnnotation.object) {
         preview.value = props.trackedAnnotation.object;
@@ -242,6 +390,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
       const handleEvent = (event) => {
         var _a;
         if (event.documentId !== props.documentId) return;
+        if (event.type === "end" || event.type === "cancel") {
+          liveRotation.value = null;
+        }
         const patch = (_a = event.previewPatches) == null ? void 0 : _a[id];
         if (event.type === "update" && patch) {
           preview.value = { ...toRaw(preview.value), ...patch };
@@ -249,67 +400,259 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           preview.value = props.trackedAnnotation.object;
         }
       };
-      const unsubs = [plugin.onDragChange(handleEvent), plugin.onResizeChange(handleEvent)];
+      const unsubs = [
+        plugin.onDragChange(handleEvent),
+        plugin.onResizeChange(handleEvent),
+        plugin.onRotateChange(handleEvent)
+      ];
       onCleanup(() => unsubs.forEach((u) => u()));
     });
-    const containerStyle = computed(() => ({
+    const aabbWidth = computed(() => currentObject.value.rect.size.width * props.scale);
+    const aabbHeight = computed(() => currentObject.value.rect.size.height * props.scale);
+    const innerWidth = computed(() => effectiveUnrotatedRect.value.size.width * props.scale);
+    const innerHeight = computed(() => effectiveUnrotatedRect.value.size.height * props.scale);
+    const usesCustomPivot = computed(
+      () => Boolean(explicitUnrotatedRect.value) && annotationRotation.value !== 0
+    );
+    const innerLeft = computed(
+      () => usesCustomPivot.value ? (effectiveUnrotatedRect.value.origin.x - currentObject.value.rect.origin.x) * props.scale : (aabbWidth.value - innerWidth.value) / 2
+    );
+    const innerTop = computed(
+      () => usesCustomPivot.value ? (effectiveUnrotatedRect.value.origin.y - currentObject.value.rect.origin.y) * props.scale : (aabbHeight.value - innerHeight.value) / 2
+    );
+    const innerTransformOrigin = computed(() => {
+      if (usesCustomPivot.value && rotationPivot.value) {
+        return `${(rotationPivot.value.x - effectiveUnrotatedRect.value.origin.x) * props.scale}px ${(rotationPivot.value.y - effectiveUnrotatedRect.value.origin.y) * props.scale}px`;
+      }
+      return "center center";
+    });
+    const centerX = computed(
+      () => rotationPivot.value ? (rotationPivot.value.x - currentObject.value.rect.origin.x) * props.scale : aabbWidth.value / 2
+    );
+    const centerY = computed(
+      () => rotationPivot.value ? (rotationPivot.value.y - currentObject.value.rect.origin.y) * props.scale : aabbHeight.value / 2
+    );
+    const guideLength = computed(() => Math.max(300, Math.max(aabbWidth.value, aabbHeight.value) + 80));
+    const rotationIconSize = computed(() => Math.round(ROTATION_SIZE.value * 0.6));
+    const contentsStyle = { display: "contents" };
+    const outerAABBStyle = computed(() => ({
       position: "absolute",
       left: `${currentObject.value.rect.origin.x * props.scale}px`,
       top: `${currentObject.value.rect.origin.y * props.scale}px`,
-      width: `${currentObject.value.rect.size.width * props.scale}px`,
-      height: `${currentObject.value.rect.size.height * props.scale}px`,
-      outline: showOutline.value ? `1px solid ${props.selectionOutlineColor}` : "none",
-      outlineOffset: showOutline.value ? `${props.outlineOffset}px` : "0px",
+      width: `${aabbWidth.value}px`,
+      height: `${aabbHeight.value}px`,
+      pointerEvents: "none",
+      zIndex: props.zIndex,
+      ...props.style ?? {}
+    }));
+    const innerRotatedStyle = computed(() => ({
+      position: "absolute",
+      left: `${innerLeft.value}px`,
+      top: `${innerTop.value}px`,
+      width: `${innerWidth.value}px`,
+      height: `${innerHeight.value}px`,
+      transform: annotationRotation.value !== 0 ? `rotate(${annotationRotation.value}deg)` : void 0,
+      transformOrigin: innerTransformOrigin.value,
+      outline: showOutline.value ? `${outlineWidth.value}px ${outlineStyle.value} ${outlineColor.value}` : "none",
+      outlineOffset: showOutline.value ? `${outlineOff.value}px` : "0px",
       pointerEvents: props.isSelected && !props.isMultiSelected ? "auto" : "none",
       touchAction: "none",
-      cursor: props.isSelected && effectiveIsDraggable.value ? "move" : "default",
-      zIndex: props.zIndex
+      cursor: props.isSelected && effectiveIsDraggable.value ? "move" : "default"
     }));
-    const mergedContainerStyle = computed(() => ({
-      ...containerStyle.value,
-      ...props.style ?? {}
+    const guideHorizontalStyle = computed(() => ({
+      position: "absolute",
+      left: `${centerX.value - guideLength.value / 2}px`,
+      top: `${centerY.value}px`,
+      width: `${guideLength.value}px`,
+      height: "1px",
+      backgroundColor: ROTATION_CONNECTOR_COLOR.value,
+      opacity: 0.35,
+      pointerEvents: "none"
+    }));
+    const guideVerticalStyle = computed(() => ({
+      position: "absolute",
+      left: `${centerX.value}px`,
+      top: `${centerY.value - guideLength.value / 2}px`,
+      width: "1px",
+      height: `${guideLength.value}px`,
+      backgroundColor: ROTATION_CONNECTOR_COLOR.value,
+      opacity: 0.35,
+      pointerEvents: "none"
+    }));
+    const guideAngleStyle = computed(() => ({
+      position: "absolute",
+      left: `${centerX.value - guideLength.value / 2}px`,
+      top: `${centerY.value}px`,
+      width: `${guideLength.value}px`,
+      height: "1px",
+      transformOrigin: "center center",
+      transform: `rotate(${annotationRotation.value}deg)`,
+      backgroundColor: ROTATION_CONNECTOR_COLOR.value,
+      opacity: 0.8,
+      pointerEvents: "none"
+    }));
+    const connectorLineStyle = computed(() => {
+      var _a;
+      return {
+        ...((_a = rotationHandleData.value) == null ? void 0 : _a.connector.style) ?? {},
+        backgroundColor: ROTATION_CONNECTOR_COLOR.value,
+        opacity: rotationActive.value ? 0 : 1
+      };
+    });
+    const rotationHandleStyle = computed(() => {
+      var _a;
+      return {
+        ...((_a = rotationHandleData.value) == null ? void 0 : _a.handle.style) ?? {},
+        backgroundColor: ROTATION_COLOR.value,
+        border: `${ROTATION_BORDER_WIDTH.value}px ${ROTATION_BORDER_STYLE.value} ${ROTATION_BORDER_COLOR.value}`,
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "auto",
+        opacity: rotationActive.value ? 0 : 1
+      };
+    });
+    const rotationHandleBindings = computed(() => {
+      if (!rotationHandleData.value) return {};
+      const { style: _s, ...rest } = rotationHandleData.value.handle;
+      return rest;
+    });
+    const rotationHandleSlotProps = computed(() => {
+      if (!rotationHandleData.value) return {};
+      return {
+        ...rotationHandleData.value.handle,
+        backgroundColor: ROTATION_COLOR.value,
+        iconColor: ROTATION_ICON_COLOR.value,
+        connectorStyle: connectorLineStyle.value,
+        showConnector: SHOW_CONNECTOR.value,
+        opacity: rotationActive.value ? 0 : 1,
+        border: {
+          color: ROTATION_BORDER_COLOR.value,
+          width: ROTATION_BORDER_WIDTH.value,
+          style: ROTATION_BORDER_STYLE.value
+        }
+      };
+    });
+    const tooltipStyle = computed(() => ({
+      position: "fixed",
+      left: cursorScreen.value ? `${cursorScreen.value.x + 16}px` : "0",
+      top: cursorScreen.value ? `${cursorScreen.value.y - 16}px` : "0",
+      background: "rgba(0,0,0,0.8)",
+      color: "#fff",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      fontSize: "12px",
+      fontFamily: "monospace",
+      pointerEvents: "none",
+      zIndex: 1e4,
+      whiteSpace: "nowrap"
     }));
     const slots = useSlots();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", mergeProps({ ...effectiveIsDraggable.value && __props.isSelected ? unref(dragProps) : {}, ...unref(doubleProps) }, { style: mergedContainerStyle.value }), [
-          renderSlot(_ctx.$slots, "default", { annotation: currentObject.value }),
-          __props.isSelected && 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,
-                ref_for: true
-              }, { key, style, ...handle, backgroundColor: HANDLE_COLOR }), () => [
-                createElementVNode("div", mergeProps({ ref_for: true }, handle, {
-                  style: [style, { backgroundColor: HANDLE_COLOR }]
-                }), null, 16)
-              ]) : (openBlock(), createElementBlock("div", mergeProps({
-                key: 1,
-                ref_for: true
-              }, handle, {
-                style: [style, { backgroundColor: HANDLE_COLOR }]
-              }), null, 16))
-            ], 64);
-          }), 128)) : createCommentVNode("", true),
-          __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
-            return openBlock(), createElementBlock(Fragment, { key }, [
-              unref(slots)["vertex-handle"] ? renderSlot(_ctx.$slots, "vertex-handle", mergeProps({
-                key: 0,
-                ref_for: true
-              }, { key, style, ...vertex, backgroundColor: VERTEX_COLOR }), () => [
-                createElementVNode("div", mergeProps({ ref_for: true }, vertex, {
-                  style: [style, { backgroundColor: VERTEX_COLOR }]
-                }), null, 16)
-              ]) : (openBlock(), createElementBlock("div", mergeProps({
-                key: 1,
-                ref_for: true
-              }, vertex, {
-                style: [style, { backgroundColor: VERTEX_COLOR }]
-              }), null, 16))
-            ], 64);
-          }), 128)) : createCommentVNode("", true)
-        ], 16),
-        shouldShowMenu.value ? (openBlock(), createBlock(unref(CounterRotate), {
+      return openBlock(), createElementBlock("div", {
+        "data-no-interaction": "",
+        style: contentsStyle
+      }, [
+        createElementVNode("div", {
+          style: normalizeStyle(outerAABBStyle.value)
+        }, [
+          rotationActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("div", {
+              style: normalizeStyle(guideHorizontalStyle.value)
+            }, null, 4),
+            createElementVNode("div", {
+              style: normalizeStyle(guideVerticalStyle.value)
+            }, null, 4),
+            createElementVNode("div", {
+              style: normalizeStyle(guideAngleStyle.value)
+            }, null, 4)
+          ], 64)) : createCommentVNode("", true),
+          __props.isSelected && effectiveIsRotatable.value && unref(rotationHandleData) ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            onPointerenter: _cache[0] || (_cache[0] = ($event) => isHandleHovered.value = true),
+            onPointerleave: _cache[1] || (_cache[1] = ($event) => {
+              isHandleHovered.value = false;
+              cursorScreen.value = null;
+            }),
+            onPointermove: onHandlePointerMove,
+            style: contentsStyle
+          }, [
+            SHOW_CONNECTOR.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              style: normalizeStyle(connectorLineStyle.value)
+            }, null, 4)) : createCommentVNode("", true),
+            unref(slots)["rotation-handle"] ? renderSlot(_ctx.$slots, "rotation-handle", normalizeProps(mergeProps({ key: 1 }, rotationHandleSlotProps.value)), () => [
+              createElementVNode("div", mergeProps(rotationHandleBindings.value, { style: rotationHandleStyle.value }), [
+                (openBlock(), createElementBlock("svg", {
+                  width: rotationIconSize.value,
+                  height: rotationIconSize.value,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: ROTATION_ICON_COLOR.value,
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [..._cache[2] || (_cache[2] = [
+                  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_1$a))
+              ], 16)
+            ]) : (openBlock(), createElementBlock("div", mergeProps({ key: 2 }, rotationHandleBindings.value, { style: rotationHandleStyle.value }), [
+              (openBlock(), createElementBlock("svg", {
+                width: rotationIconSize.value,
+                height: rotationIconSize.value,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: ROTATION_ICON_COLOR.value,
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, [..._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_2$8))
+            ], 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 }) => {
+              return openBlock(), createElementBlock(Fragment, { key }, [
+                unref(slots)["resize-handle"] ? renderSlot(_ctx.$slots, "resize-handle", mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, { key, style, ...handle, backgroundColor: HANDLE_COLOR.value }), () => [
+                  createElementVNode("div", mergeProps({ ref_for: true }, handle, {
+                    style: [style, { backgroundColor: HANDLE_COLOR.value }]
+                  }), null, 16)
+                ]) : (openBlock(), createElementBlock("div", mergeProps({
+                  key: 1,
+                  ref_for: true
+                }, handle, {
+                  style: [style, { backgroundColor: HANDLE_COLOR.value }]
+                }), 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 }) => {
+              return openBlock(), createElementBlock(Fragment, { key }, [
+                unref(slots)["vertex-handle"] ? renderSlot(_ctx.$slots, "vertex-handle", mergeProps({
+                  key: 0,
+                  ref_for: true
+                }, { key, style, ...vertex, backgroundColor: VERTEX_COLOR.value }), () => [
+                  createElementVNode("div", mergeProps({ ref_for: true }, vertex, {
+                    style: [style, { backgroundColor: VERTEX_COLOR.value }]
+                  }), null, 16)
+                ]) : (openBlock(), createElementBlock("div", mergeProps({
+                  key: 1,
+                  ref_for: true
+                }, vertex, {
+                  style: [style, { backgroundColor: VERTEX_COLOR.value }]
+                }), null, 16))
+              ], 64);
+            }), 128)) : createCommentVNode("", true)
+          ], 16)
+        ], 4),
+        shouldShowMenu.value && !rotationActive.value ? (openBlock(), createBlock(unref(CounterRotate), {
           key: 0,
           rect: menuRect.value,
           rotation: __props.rotation
@@ -325,7 +668,15 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             })
           ]),
           _: 3
-        }, 8, ["rect", "rotation"])) : createCommentVNode("", true)
+        }, 8, ["rect", "rotation"])) : createCommentVNode("", true),
+        (rotationActive.value || isHandleHovered.value) && cursorScreen.value ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body"
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle(tooltipStyle.value)
+          }, toDisplayString(normalizedRotationDisplay.value.toFixed(0)) + "°", 5)
+        ])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -335,6 +686,8 @@ const _hoisted_1$9 = {
   "data-group-selection-box": "",
   "data-no-interaction": ""
 };
+const _hoisted_2$7 = ["width", "height", "stroke"];
+const _hoisted_3$4 = ["width", "height", "stroke"];
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "group-selection-box",
   props: {
@@ -347,9 +700,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     selectedAnnotations: {},
     isDraggable: { type: Boolean },
     isResizable: { type: Boolean },
-    resizeUI: {},
+    isRotatable: { type: Boolean, default: true },
+    lockAspectRatio: { type: Boolean, default: false },
+    resizeUi: {},
+    rotationUi: {},
     selectionOutlineColor: { default: "#007ACC" },
     outlineOffset: { default: 2 },
+    selectionOutline: {},
     zIndex: { default: 100 },
     groupSelectionMenu: {}
   },
@@ -361,20 +718,87 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     const gestureBase = shallowRef(null);
     const isDraggingRef = ref(false);
     const isResizingRef = ref(false);
+    const liveRotation = ref(null);
+    const cursorScreen = ref(null);
+    const isHandleHovered = ref(false);
     const effectiveIsDraggable = computed(
       () => permissions.value.canModifyAnnotations && props.isDraggable
     );
     const effectiveIsResizable = computed(
       () => permissions.value.canModifyAnnotations && props.isResizable
     );
+    const effectiveIsRotatable = computed(
+      () => permissions.value.canModifyAnnotations && props.isRotatable
+    );
     const HANDLE_COLOR = computed(() => {
       var _a;
-      return ((_a = props.resizeUI) == null ? void 0 : _a.color) ?? "#007ACC";
+      return ((_a = props.resizeUi) == null ? void 0 : _a.color) ?? "#007ACC";
     });
     const HANDLE_SIZE = computed(() => {
       var _a;
-      return ((_a = props.resizeUI) == null ? void 0 : _a.size) ?? 12;
+      return ((_a = props.resizeUi) == null ? void 0 : _a.size) ?? 12;
+    });
+    const ROTATION_SIZE = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.size) ?? 32;
+    });
+    const ROTATION_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.color) ?? "white";
+    });
+    const ROTATION_CONNECTOR_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.connectorColor) ?? "#007ACC";
+    });
+    const ROTATION_ICON_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.iconColor) ?? "#007ACC";
+    });
+    const SHOW_CONNECTOR = computed(() => {
+      var _a;
+      return ((_a = props.rotationUi) == null ? void 0 : _a.showConnector) ?? false;
+    });
+    const ROTATION_MARGIN = computed(() => {
+      var _a;
+      return (_a = props.rotationUi) == null ? void 0 : _a.margin;
+    });
+    const ROTATION_BORDER_COLOR = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = props.rotationUi) == null ? void 0 : _a.border) == null ? void 0 : _b.color) ?? "#007ACC";
+    });
+    const ROTATION_BORDER_WIDTH = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = props.rotationUi) == null ? void 0 : _a.border) == null ? void 0 : _b.width) ?? 1;
+    });
+    const ROTATION_BORDER_STYLE = computed(() => {
+      var _a, _b;
+      return ((_b = (_a = props.rotationUi) == null ? void 0 : _a.border) == null ? void 0 : _b.style) ?? "solid";
+    });
+    const outlineColor = computed(
+      () => {
+        var _a;
+        return ((_a = props.selectionOutline) == null ? void 0 : _a.color) ?? props.selectionOutlineColor ?? "#007ACC";
+      }
+    );
+    const outlineStyleVal = computed(() => {
+      var _a;
+      return ((_a = props.selectionOutline) == null ? void 0 : _a.style) ?? "dashed";
+    });
+    const outlineWidth = computed(() => {
+      var _a;
+      return ((_a = props.selectionOutline) == null ? void 0 : _a.width) ?? 2;
+    });
+    const outlineOff = computed(() => {
+      var _a;
+      return ((_a = props.selectionOutline) == null ? void 0 : _a.offset) ?? props.outlineOffset ?? 2;
+    });
+    const groupRotationDisplay = computed(() => liveRotation.value ?? 0);
+    const rotationActive = computed(() => liveRotation.value !== null);
+    const normalizedRotationDisplay = computed(() => {
+      const val = groupRotationDisplay.value;
+      return Number.isFinite(val) ? Math.round(val * 10) / 10 : 0;
     });
+    const rotationIconSize = computed(() => Math.round(ROTATION_SIZE.value * 0.6));
     const groupBox = computed(() => {
       const rects = props.selectedAnnotations.map((ta) => ta.object.rect);
       return boundingRectOrEmpty(rects);
@@ -389,17 +813,137 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       },
       { immediate: true }
     );
-    const boxStyle = computed(() => ({
+    watch(
+      () => annotationPlugin.value,
+      (plugin, _old, onCleanup) => {
+        if (!plugin) return;
+        const unsub = plugin.onRotateChange((event) => {
+          if (event.documentId !== props.documentId) return;
+          if (event.type === "end" || event.type === "cancel") {
+            liveRotation.value = null;
+          }
+        });
+        onCleanup(unsub);
+      },
+      { immediate: true }
+    );
+    const groupBoxWidth = computed(() => previewGroupBox.value.size.width * props.scale);
+    const groupBoxHeight = computed(() => previewGroupBox.value.size.height * props.scale);
+    const groupCenterX = computed(() => groupBoxWidth.value / 2);
+    const groupCenterY = computed(() => groupBoxHeight.value / 2);
+    const groupGuideLength = computed(
+      () => Math.max(300, Math.max(groupBoxWidth.value, groupBoxHeight.value) + 80)
+    );
+    const contentsStyle = { display: "contents" };
+    const outerStyle = computed(() => ({
       position: "absolute",
       left: `${previewGroupBox.value.origin.x * props.scale}px`,
       top: `${previewGroupBox.value.origin.y * props.scale}px`,
-      width: `${previewGroupBox.value.size.width * props.scale}px`,
-      height: `${previewGroupBox.value.size.height * props.scale}px`,
-      outline: `2px dashed ${props.selectionOutlineColor}`,
-      outlineOffset: `${props.outlineOffset - 1}px`,
+      width: `${groupBoxWidth.value}px`,
+      height: `${groupBoxHeight.value}px`,
+      pointerEvents: "none",
+      zIndex: props.zIndex
+    }));
+    const boxStyle = computed(() => ({
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: `${groupBoxWidth.value}px`,
+      height: `${groupBoxHeight.value}px`,
+      outline: rotationActive.value ? "none" : `${outlineWidth.value}px ${outlineStyleVal.value} ${outlineColor.value}`,
+      outlineOffset: `${outlineOff.value - 1}px`,
       cursor: effectiveIsDraggable.value ? "move" : "default",
       touchAction: "none",
-      zIndex: props.zIndex
+      pointerEvents: "auto"
+    }));
+    const guideHorizontalStyle = computed(() => ({
+      position: "absolute",
+      left: `${groupCenterX.value - groupGuideLength.value / 2}px`,
+      top: `${groupCenterY.value}px`,
+      width: `${groupGuideLength.value}px`,
+      height: "1px",
+      backgroundColor: HANDLE_COLOR.value,
+      opacity: 0.35,
+      pointerEvents: "none"
+    }));
+    const guideVerticalStyle = computed(() => ({
+      position: "absolute",
+      left: `${groupCenterX.value}px`,
+      top: `${groupCenterY.value - groupGuideLength.value / 2}px`,
+      width: "1px",
+      height: `${groupGuideLength.value}px`,
+      backgroundColor: HANDLE_COLOR.value,
+      opacity: 0.35,
+      pointerEvents: "none"
+    }));
+    const guideAngleStyle = computed(() => ({
+      position: "absolute",
+      left: `${groupCenterX.value - groupGuideLength.value / 2}px`,
+      top: `${groupCenterY.value}px`,
+      width: `${groupGuideLength.value}px`,
+      height: "1px",
+      transformOrigin: "center center",
+      transform: `rotate(${groupRotationDisplay.value}deg)`,
+      backgroundColor: HANDLE_COLOR.value,
+      opacity: 0.8,
+      pointerEvents: "none"
+    }));
+    const connectorLineStyle = computed(() => {
+      var _a;
+      return {
+        ...((_a = rotationHandleData.value) == null ? void 0 : _a.connector.style) ?? {},
+        backgroundColor: ROTATION_CONNECTOR_COLOR.value,
+        opacity: rotationActive.value ? 0 : 1
+      };
+    });
+    const rotationHandleStyle = computed(() => {
+      var _a;
+      return {
+        ...((_a = rotationHandleData.value) == null ? void 0 : _a.handle.style) ?? {},
+        backgroundColor: ROTATION_COLOR.value,
+        border: `${ROTATION_BORDER_WIDTH.value}px ${ROTATION_BORDER_STYLE.value} ${ROTATION_BORDER_COLOR.value}`,
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        pointerEvents: "auto",
+        opacity: rotationActive.value ? 0 : 1
+      };
+    });
+    const rotationHandleBindings = computed(() => {
+      if (!rotationHandleData.value) return {};
+      const { style: _s, ...rest } = rotationHandleData.value.handle;
+      return rest;
+    });
+    const rotationHandleSlotProps = computed(() => {
+      if (!rotationHandleData.value) return {};
+      return {
+        ...rotationHandleData.value.handle,
+        backgroundColor: ROTATION_COLOR.value,
+        iconColor: ROTATION_ICON_COLOR.value,
+        connectorStyle: connectorLineStyle.value,
+        showConnector: SHOW_CONNECTOR.value,
+        opacity: rotationActive.value ? 0 : 1,
+        border: {
+          color: ROTATION_BORDER_COLOR.value,
+          width: ROTATION_BORDER_WIDTH.value,
+          style: ROTATION_BORDER_STYLE.value
+        }
+      };
+    });
+    const tooltipStyle = computed(() => ({
+      position: "fixed",
+      left: cursorScreen.value ? `${cursorScreen.value.x + 16}px` : "0",
+      top: cursorScreen.value ? `${cursorScreen.value.y - 16}px` : "0",
+      background: "rgba(0,0,0,0.8)",
+      color: "#fff",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      fontSize: "12px",
+      fontFamily: "monospace",
+      pointerEvents: "none",
+      zIndex: 1e4,
+      whiteSpace: "nowrap"
     }));
     const menuRect = computed(() => ({
       origin: {
@@ -416,9 +960,13 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       annotations: props.selectedAnnotations,
       pageIndex: props.pageIndex
     }));
-    const menuPlacement = computed(() => ({
-      suggestTop: false
-    }));
+    const menuPlacement = computed(() => {
+      const effectiveAngle = ((groupRotationDisplay.value + props.rotation * 90) % 360 + 360) % 360;
+      const handleNearMenuSide = effectiveIsRotatable.value && effectiveAngle > 90 && effectiveAngle < 270;
+      return {
+        suggestTop: handleNearMenuSide
+      };
+    });
     const shouldShowMenu = computed(() => {
       return props.groupSelectionMenu || slots["group-selection-menu"];
     });
@@ -432,6 +980,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         context: menuContext.value
       });
     };
+    const onHandlePointerMove = (e) => {
+      if (!rotationActive.value) {
+        cursorScreen.value = { x: e.clientX, y: e.clientY };
+      }
+    };
     const elementSnapshot = computed(() => previewGroupBox.value);
     const constraintsSnapshot = computed(() => ({
       minWidth: 20,
@@ -441,17 +994,21 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         height: props.pageHeight
       }
     }));
-    const { dragProps, resize } = useInteractionHandles({
+    const {
+      dragProps,
+      resize,
+      rotation: rotationHandleData
+    } = useInteractionHandles({
       controller: {
         element: elementSnapshot,
         vertices: computed(() => []),
         constraints: constraintsSnapshot,
-        maintainAspectRatio: computed(() => false),
+        maintainAspectRatio: computed(() => props.lockAspectRatio),
         pageRotation: computed(() => props.rotation),
         scale: computed(() => props.scale),
         enabled: computed(() => true),
         onUpdate: (event) => {
-          var _a, _b;
+          var _a, _b, _c, _d, _e, _f;
           if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
           if (!annotationPlugin.value) return;
           const plugin = annotationPlugin.value;
@@ -476,6 +1033,33 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
               });
             }
           }
+          if (transformType === "rotate") {
+            if (!props.isRotatable) return;
+            const ids = props.selectedAnnotations.map((ta) => ta.object.id);
+            const cursorAngle = ((_c = event.transformData.metadata) == null ? void 0 : _c.rotationAngle) ?? 0;
+            const cursorPos = (_d = event.transformData.metadata) == null ? void 0 : _d.cursorPosition;
+            if (cursorPos) cursorScreen.value = { x: cursorPos.clientX, y: cursorPos.clientY };
+            if (event.state === "start") {
+              liveRotation.value = cursorAngle;
+              plugin.startRotation(props.documentId, {
+                annotationIds: ids,
+                cursorAngle,
+                rotationCenter: (_e = event.transformData.metadata) == null ? void 0 : _e.rotationCenter
+              });
+            } else if (event.state === "move") {
+              liveRotation.value = cursorAngle;
+              plugin.updateRotation(
+                props.documentId,
+                cursorAngle,
+                (_f = event.transformData.metadata) == null ? void 0 : _f.rotationDelta
+              );
+            } else if (event.state === "end") {
+              liveRotation.value = null;
+              cursorScreen.value = null;
+              plugin.commitRotation(props.documentId);
+            }
+            return;
+          }
           const base = gestureBase.value ?? groupBox.value;
           if (isMove && event.transformData.changes.rect) {
             const newRect = event.transformData.changes.rect;
@@ -510,41 +1094,110 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       },
       resizeUI: {
         handleSize: HANDLE_SIZE.value,
-        spacing: props.outlineOffset,
+        spacing: outlineOff.value,
         offsetMode: "outside",
-        includeSides: true,
+        includeSides: !props.lockAspectRatio,
         zIndex: props.zIndex + 1
       },
       vertexUI: {
         vertexSize: 0,
         zIndex: props.zIndex
       },
-      includeVertices: false
+      rotationUI: {
+        handleSize: ROTATION_SIZE.value,
+        margin: ROTATION_MARGIN.value,
+        zIndex: props.zIndex + 2,
+        showConnector: SHOW_CONNECTOR.value
+      },
+      includeVertices: false,
+      includeRotation: effectiveIsRotatable,
+      currentRotation: computed(() => liveRotation.value ?? 0)
     });
     return (_ctx, _cache) => {
       return __props.selectedAnnotations.length >= 2 ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
-        createElementVNode("div", mergeProps(effectiveIsDraggable.value ? unref(dragProps) : {}, {
-          style: boxStyle.value,
-          onPointerdown: _cache[0] || (_cache[0] = ($event) => !effectiveIsDraggable.value ? $event.stopPropagation() : void 0)
-        }), [
-          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,
-                ref_for: true
-              }, { key, style, ...handle, backgroundColor: HANDLE_COLOR.value }), () => [
-                createElementVNode("div", mergeProps({ ref_for: true }, handle, {
+        createElementVNode("div", {
+          style: normalizeStyle(outerStyle.value)
+        }, [
+          rotationActive.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createElementVNode("div", {
+              style: normalizeStyle(guideHorizontalStyle.value)
+            }, null, 4),
+            createElementVNode("div", {
+              style: normalizeStyle(guideVerticalStyle.value)
+            }, null, 4),
+            createElementVNode("div", {
+              style: normalizeStyle(guideAngleStyle.value)
+            }, null, 4)
+          ], 64)) : createCommentVNode("", true),
+          effectiveIsRotatable.value && unref(rotationHandleData) ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            onPointerenter: _cache[0] || (_cache[0] = ($event) => isHandleHovered.value = true),
+            onPointerleave: _cache[1] || (_cache[1] = ($event) => {
+              isHandleHovered.value = false;
+              cursorScreen.value = null;
+            }),
+            onPointermove: onHandlePointerMove,
+            style: contentsStyle
+          }, [
+            SHOW_CONNECTOR.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              style: normalizeStyle(connectorLineStyle.value)
+            }, null, 4)) : createCommentVNode("", true),
+            unref(slots)["rotation-handle"] ? renderSlot(_ctx.$slots, "rotation-handle", normalizeProps(mergeProps({ key: 1 }, rotationHandleSlotProps.value)), () => [
+              createElementVNode("div", mergeProps(rotationHandleBindings.value, { style: rotationHandleStyle.value }), [
+                (openBlock(), createElementBlock("svg", {
+                  width: rotationIconSize.value,
+                  height: rotationIconSize.value,
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: ROTATION_ICON_COLOR.value,
+                  "stroke-width": "2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [..._cache[2] || (_cache[2] = [
+                  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_2$7))
+              ], 16)
+            ]) : (openBlock(), createElementBlock("div", mergeProps({ key: 2 }, rotationHandleBindings.value, { style: rotationHandleStyle.value }), [
+              (openBlock(), createElementBlock("svg", {
+                width: rotationIconSize.value,
+                height: rotationIconSize.value,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: ROTATION_ICON_COLOR.value,
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, [..._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))
+            ], 16))
+          ], 32)) : createCommentVNode("", true),
+          createElementVNode("div", mergeProps(
+            effectiveIsDraggable.value ? unref(dragProps) : { onPointerdown: (e) => e.stopPropagation() },
+            { style: boxStyle.value }
+          ), [
+            effectiveIsResizable.value && !rotationActive.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,
+                  ref_for: true
+                }, { key, style, ...handle, backgroundColor: HANDLE_COLOR.value }), () => [
+                  createElementVNode("div", mergeProps({ ref_for: true }, handle, {
+                    style: [style, { backgroundColor: HANDLE_COLOR.value }]
+                  }), null, 16)
+                ]) : (openBlock(), createElementBlock("div", mergeProps({
+                  key: 1,
+                  ref_for: true
+                }, handle, {
                   style: [style, { backgroundColor: HANDLE_COLOR.value }]
-                }), null, 16)
-              ]) : (openBlock(), createElementBlock("div", mergeProps({
-                key: 1,
-                ref_for: true
-              }, handle, {
-                style: [style, { backgroundColor: HANDLE_COLOR.value }]
-              }), null, 16))
-            ], 64);
-          }), 128)) : createCommentVNode("", true)
-        ], 16),
+                }), null, 16))
+              ], 64);
+            }), 128)) : createCommentVNode("", true)
+          ], 16)
+        ], 4),
         shouldShowMenu.value ? (openBlock(), createBlock(unref(CounterRotate), {
           key: 0,
           rect: menuRect.value,
@@ -561,7 +1214,15 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             })
           ]),
           _: 3
-        }, 8, ["rect", "rotation"])) : createCommentVNode("", true)
+        }, 8, ["rect", "rotation"])) : createCommentVNode("", true),
+        (rotationActive.value || isHandleHovered.value) && cursorScreen.value ? (openBlock(), createBlock(Teleport, {
+          key: 1,
+          to: "body"
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle(tooltipStyle.value)
+          }, toDisplayString(normalizedRotationDisplay.value.toFixed(0)) + "°", 5)
+        ])) : createCommentVNode("", true)
       ])) : createCommentVNode("", true);
     };
   }
@@ -697,7 +1358,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       return {
         color: anno.fontColor,
         fontSize: `${adjustedFontPx}px`,
-        fontFamily: standardFontCss(anno.fontFamily),
+        ...standardFontCssProperties(anno.fontFamily),
         textAlign: textAlignmentToCss(anno.textAlign),
         flexDirection: "column",
         justifyContent: anno.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : anno.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
@@ -1324,6 +1985,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     pageIndex: {},
     annotation: {},
     scaleFactor: { default: 1 },
+    unrotated: { type: Boolean, default: false },
     style: {}
   },
   setup(__props) {
@@ -1339,6 +2001,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       () => [
         props.pageIndex,
         props.scaleFactor,
+        props.unrotated,
         props.documentId,
         annotationId.value,
         rectWidth.value,
@@ -1356,7 +2019,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             annotation: deepToRaw(props.annotation),
             options: {
               scaleFactor: props.scaleFactor,
-              dpr: window.devicePixelRatio
+              dpr: window.devicePixelRatio,
+              unrotated: props.unrotated
             }
           });
           currentTask.value = task;
@@ -1424,6 +2088,10 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     onClick: { type: Function }
   },
   setup(__props) {
+    const props = __props;
+    const unrotated = computed(
+      () => !!props.annotation.object.rotation && !!props.annotation.object.unrotatedRect
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle({
@@ -1443,8 +2111,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
           annotation: { ...__props.annotation.object, id: __props.annotation.object.id },
-          scaleFactor: __props.scale
-        }, null, 8, ["documentId", "pageIndex", "annotation", "scaleFactor"])
+          scaleFactor: __props.scale,
+          unrotated: unrotated.value
+        }, null, 8, ["documentId", "pageIndex", "annotation", "scaleFactor", "unrotated"])
       ], 36);
     };
   }
@@ -1662,15 +2331,21 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     rotation: {},
     pageWidth: {},
     pageHeight: {},
-    resizeUI: {},
-    vertexUI: {},
+    resizeUi: {},
+    vertexUi: {},
+    rotationUi: {},
     selectionOutlineColor: {},
+    selectionOutline: {},
+    groupSelectionOutline: {},
     selectionMenu: { type: Function },
     groupSelectionMenu: { type: Function },
     annotationRenderers: {}
   },
   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));
@@ -1780,6 +2455,34 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         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;
@@ -1805,9 +2508,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       var _a;
       return resolveInteractionProp((_a = getTool(anno)) == null ? void 0 : _a.interaction.lockAspectRatio, anno.object, false);
     };
+    const isRotatableFor = (anno, fallback) => {
+      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, ...rest } = props;
+      const {
+        selectionMenu: _sm,
+        groupSelectionMenu: _gsm,
+        groupSelectionOutline: _gso,
+        ...rest
+      } = props;
       return rest;
     });
     const getVertexConfig = (annotation) => {
@@ -1840,10 +2553,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(() => [
                 (openBlock(), createBlock(resolveDynamicComponent(findCustomRenderer(annotation).component), {
@@ -1857,6 +2571,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -1866,17 +2583,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "selectionMenu", "style"])) : unref(isInk)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$h, mergeProps({ ref_for: true }, currentObject, {
@@ -1891,6 +2609,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -1900,17 +2621,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquare)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$c, mergeProps({ ref_for: true }, currentObject, {
@@ -1925,6 +2647,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -1934,17 +2659,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isCircle)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$j, mergeProps({ ref_for: true }, currentObject, {
@@ -1959,6 +2685,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -1968,17 +2697,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLine)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$g, mergeProps({ ref_for: true }, currentObject, {
@@ -1993,6 +2723,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -2002,17 +2735,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolyline)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$d, mergeProps({ ref_for: true }, currentObject, {
@@ -2027,6 +2761,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -2036,17 +2773,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolygon)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$e, mergeProps({ ref_for: true }, currentObject, {
@@ -2061,6 +2799,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -2070,18 +2811,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isFreeText)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "isRotatable", "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),
+              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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$i, {
@@ -2099,6 +2841,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -2108,17 +2853,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "onDoubleClick", "vertexConfig", "selectionMenu", "style"])) : unref(isStamp)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(() => [
                 createVNode(_sfc_main$a, {
@@ -2136,6 +2882,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               "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 ? {
@@ -2145,18 +2894,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isUnderline)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
@@ -2173,18 +2923,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isStrikeout)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
@@ -2201,18 +2952,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquiggly)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
@@ -2229,20 +2981,19 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isHighlight)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: {
-                mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Multiply)
-              }
+              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, {
@@ -2259,17 +3010,18 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLink)(annotation) ? (openBlock(), createBlock(_sfc_main$l, mergeProps({
+            ]), 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: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+              style: blendStyle(annotation)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$f, mergeProps({ ref_for: true }, currentObject, {
@@ -2305,8 +3057,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           selectedAnnotations: selectedAnnotationsOnPage.value,
           isDraggable: areAllSelectedDraggable.value,
           isResizable: areAllSelectedResizable.value,
-          resizeUI: __props.resizeUI,
+          isRotatable: areAllSelectedRotatable.value,
+          lockAspectRatio: shouldLockGroupAspectRatio.value,
+          resizeUi: __props.resizeUi,
+          rotationUi: __props.rotationUi,
           selectionOutlineColor: __props.selectionOutlineColor,
+          selectionOutline: __props.groupSelectionOutline ?? __props.selectionOutline,
           groupSelectionMenu: __props.groupSelectionMenu
         }, {
           "group-selection-menu": withCtx((slotProps) => [
@@ -2315,8 +3071,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           "resize-handle": withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "resize-handle", normalizeProps(guardReactiveProps(slotProps)))
           ]),
+          "rotation-handle": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "rotation-handle", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
           _: 3
-        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "selectedAnnotations", "isDraggable", "isResizable", "resizeUI", "selectionOutlineColor", "groupSelectionMenu"])) : createCommentVNode("", true)
+        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "selectedAnnotations", "isDraggable", "isResizable", "isRotatable", "lockAspectRatio", "resizeUi", "rotationUi", "selectionOutlineColor", "selectionOutline", "groupSelectionMenu"])) : createCommentVNode("", true)
       ], 64);
     };
   }
@@ -2604,15 +3363,34 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     pageIndex: {},
     scale: {},
     rotation: {},
+    resizeUi: {},
     resizeUI: {},
+    vertexUi: {},
     vertexUI: {},
+    rotationUi: {},
     selectionOutlineColor: {},
+    selectionOutline: {},
+    groupSelectionOutline: {},
     selectionMenu: { type: Function },
     groupSelectionMenu: { type: Function },
     annotationRenderers: {}
   },
   setup(__props) {
     const props = __props;
+    const resolvedResizeUi = computed(() => props.resizeUi ?? props.resizeUI);
+    const resolvedVertexUi = computed(() => props.vertexUi ?? props.vertexUI);
+    onMounted(() => {
+      if (props.resizeUI) {
+        console.warn(
+          '[AnnotationLayer] The "resizeUI" prop is deprecated. Use :resize-ui in templates instead.'
+        );
+      }
+      if (props.vertexUI) {
+        console.warn(
+          '[AnnotationLayer] The "vertexUI" prop is deprecated. Use :vertex-ui in templates instead.'
+        );
+      }
+    });
     const registry = useRendererRegistry();
     const allRenderers = computed(() => {
       const fromRegistry = (registry == null ? void 0 : registry.getAll()) ?? [];
@@ -2659,9 +3437,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           rotation: actualRotation.value,
           pageWidth: pageWidth.value,
           pageHeight: pageHeight.value,
-          resizeUI: __props.resizeUI,
-          vertexUI: __props.vertexUI,
+          resizeUi: resolvedResizeUi.value,
+          vertexUi: resolvedVertexUi.value,
+          rotationUi: __props.rotationUi,
           selectionOutlineColor: __props.selectionOutlineColor,
+          selectionOutline: __props.selectionOutline,
+          groupSelectionOutline: __props.groupSelectionOutline,
           selectionMenu: __props.selectionMenu,
           groupSelectionMenu: __props.groupSelectionMenu,
           annotationRenderers: allRenderers.value
@@ -2678,8 +3459,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           "vertex-handle": withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "vertex-handle", normalizeProps(guardReactiveProps(slotProps)))
           ]),
+          "rotation-handle": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "rotation-handle", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
           _: 3
-        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "resizeUI", "vertexUI", "selectionOutlineColor", "selectionMenu", "groupSelectionMenu", "annotationRenderers"]),
+        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "resizeUi", "vertexUi", "rotationUi", "selectionOutlineColor", "selectionOutline", "groupSelectionOutline", "selectionMenu", "groupSelectionMenu", "annotationRenderers"]),
         createVNode(_sfc_main$4, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,