@embedpdf/plugin-annotation 2.4.1 → 2.6.0

package/dist/preact/index.js

@@ -1,11 +1,12 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp, isLink, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { initialDocumentState, AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, resolveInteractionProp, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp, isLink, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
 import { createContext, Fragment as Fragment$1 } from "preact";
 import { useState, useCallback, useContext, useRef, useEffect, useMemo, useLayoutEffect } from "preact/hooks";
-import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/preact";
-import { boundingRectOrEmpty, PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
+import { createPortal } from "preact/compat";
+import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/preact";
+import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/preact";
 import { useInteractionHandles, useDoublePressProps, CounterRotate } from "@embedpdf/utils/preact";
@@ -71,6 +72,7 @@ function AnnotationContainer({
   isMultiSelected = false,
   isDraggable,
   isResizable,
+  isRotatable = true,
   lockAspectRatio = false,
   style = {},
   vertexConfig,
@@ -81,20 +83,28 @@ function AnnotationContainer({
   zIndex = 1,
   resizeUI,
   vertexUI,
-  selectionOutlineColor = "#007ACC",
+  rotationUI,
+  selectionOutlineColor,
+  selectionOutline,
   customAnnotationRenderer,
   // Destructure props that shouldn't be passed to DOM elements
   groupSelectionMenu: _groupSelectionMenu,
+  groupSelectionOutline: _groupSelectionOutline,
   annotationRenderers: _annotationRenderers,
   ...props
 }) {
+  var _a, _b, _c;
   const [preview, setPreview] = useState(trackedAnnotation.object);
+  const [liveRotation, setLiveRotation] = useState(null);
+  const [cursorScreen, setCursorScreen] = useState(null);
+  const [isHandleHovered, setIsHandleHovered] = useState(false);
   const { provides: annotationCapability } = useAnnotationCapability();
   const { plugin } = useAnnotationPlugin();
   const { canModifyAnnotations } = useDocumentPermissions(documentId);
   const gestureBaseRef = useRef(null);
   const effectiveIsDraggable = canModifyAnnotations && isDraggable && !isMultiSelected;
   const effectiveIsResizable = canModifyAnnotations && isResizable && !isMultiSelected;
+  const effectiveIsRotatable = canModifyAnnotations && isRotatable && !isMultiSelected;
   const annotationProvides = useMemo(
     () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
     [annotationCapability, documentId]
@@ -102,18 +112,35 @@ function AnnotationContainer({
   const currentObject = preview ? { ...trackedAnnotation.object, ...preview } : trackedAnnotation.object;
   const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
   const VERTEX_COLOR = (vertexUI == null ? void 0 : vertexUI.color) ?? "#007ACC";
+  const ROTATION_COLOR = (rotationUI == null ? void 0 : rotationUI.color) ?? "white";
+  const ROTATION_CONNECTOR_COLOR = (rotationUI == null ? void 0 : rotationUI.connectorColor) ?? "#007ACC";
   const HANDLE_SIZE = (resizeUI == null ? void 0 : resizeUI.size) ?? 12;
   const VERTEX_SIZE = (vertexUI == null ? void 0 : vertexUI.size) ?? 12;
+  const ROTATION_SIZE = (rotationUI == null ? void 0 : rotationUI.size) ?? 32;
+  const ROTATION_MARGIN = rotationUI == null ? void 0 : rotationUI.margin;
+  const ROTATION_ICON_COLOR = (rotationUI == null ? void 0 : rotationUI.iconColor) ?? "#007ACC";
+  const SHOW_CONNECTOR = (rotationUI == null ? void 0 : rotationUI.showConnector) ?? false;
+  const ROTATION_BORDER_COLOR = ((_a = rotationUI == null ? void 0 : rotationUI.border) == null ? void 0 : _a.color) ?? "#007ACC";
+  const ROTATION_BORDER_WIDTH = ((_b = rotationUI == null ? void 0 : rotationUI.border) == null ? void 0 : _b.width) ?? 1;
+  const ROTATION_BORDER_STYLE = ((_c = rotationUI == null ? void 0 : rotationUI.border) == null ? void 0 : _c.style) ?? "solid";
+  const outlineColor = (selectionOutline == null ? void 0 : selectionOutline.color) ?? selectionOutlineColor ?? "#007ACC";
+  const outlineStyle = (selectionOutline == null ? void 0 : selectionOutline.style) ?? "solid";
+  const outlineWidth = (selectionOutline == null ? void 0 : selectionOutline.width) ?? 1;
+  const outlineOff = (selectionOutline == null ? void 0 : selectionOutline.offset) ?? outlineOffset ?? 1;
+  const annotationRotation = liveRotation ?? currentObject.rotation ?? 0;
+  const rotationDisplay = liveRotation ?? currentObject.rotation ?? 0;
+  const normalizedRotationDisplay = Number.isFinite(rotationDisplay) ? Math.round(rotationDisplay * 10) / 10 : 0;
+  const rotationActive = liveRotation !== null;
   const gestureBaseRectRef = useRef(null);
   const handleUpdate = useCallback(
     (event) => {
-      var _a;
-      if (!((_a = event.transformData) == null ? void 0 : _a.type) || isMultiSelected || !plugin) return;
+      var _a2;
+      if (!((_a2 = event.transformData) == null ? void 0 : _a2.type) || isMultiSelected || !plugin) return;
       const { type, changes, metadata } = event.transformData;
       const id = trackedAnnotation.object.id;
       const pageSize = { width: pageWidth, height: pageHeight };
       if (event.state === "start") {
-        gestureBaseRectRef.current = trackedAnnotation.object.rect;
+        gestureBaseRectRef.current = trackedAnnotation.object.unrotatedRect ?? trackedAnnotation.object.rect;
         gestureBaseRef.current = trackedAnnotation.object;
         if (type === "move") {
           plugin.startDrag(documentId, { annotationIds: [id], pageSize });
@@ -151,6 +178,27 @@ function AnnotationContainer({
           }
         }
       }
+      if (type === "rotate") {
+        const cursorAngle = (metadata == null ? void 0 : metadata.rotationAngle) ?? annotationRotation;
+        const cursorPos = metadata == null ? void 0 : metadata.cursorPosition;
+        if (cursorPos) setCursorScreen({ x: cursorPos.clientX, y: cursorPos.clientY });
+        if (event.state === "start") {
+          setLiveRotation(cursorAngle);
+          plugin.startRotation(documentId, {
+            annotationIds: [id],
+            cursorAngle,
+            rotationCenter: metadata == null ? void 0 : metadata.rotationCenter
+          });
+        } else if (event.state === "move") {
+          setLiveRotation(cursorAngle);
+          plugin.updateRotation(documentId, cursorAngle, metadata == null ? void 0 : metadata.rotationDelta);
+        } else if (event.state === "end") {
+          setLiveRotation(null);
+          setCursorScreen(null);
+          plugin.commitRotation(documentId);
+        }
+        return;
+      }
       if (event.state === "end") {
         gestureBaseRectRef.current = null;
         gestureBaseRef.current = null;
@@ -168,12 +216,22 @@ function AnnotationContainer({
       isMultiSelected,
       vertexConfig,
       annotationCapability,
-      annotationProvides
+      annotationProvides,
+      annotationRotation
     ]
   );
-  const { dragProps, vertices, resize } = useInteractionHandles({
+  const explicitUnrotatedRect = currentObject.unrotatedRect;
+  const effectiveUnrotatedRect = explicitUnrotatedRect ?? currentObject.rect;
+  const rotationPivot = explicitUnrotatedRect && annotationRotation !== 0 ? inferRotationCenterFromRects(effectiveUnrotatedRect, currentObject.rect, annotationRotation) : void 0;
+  const controllerElement = effectiveUnrotatedRect;
+  const {
+    dragProps,
+    vertices,
+    resize,
+    rotation: rotationHandle
+  } = useInteractionHandles({
     controller: {
-      element: currentObject.rect,
+      element: controllerElement,
       vertices: vertexConfig == null ? void 0 : vertexConfig.extractVertices(currentObject),
       constraints: {
         minWidth: 10,
@@ -182,6 +240,9 @@ function AnnotationContainer({
       },
       maintainAspectRatio: lockAspectRatio,
       pageRotation: rotation,
+      annotationRotation,
+      rotationCenter: rotationPivot,
+      rotationElement: currentObject.rect,
       scale,
       // Disable interaction handles when multi-selected
       enabled: isSelected && !isMultiSelected,
@@ -189,7 +250,7 @@ function AnnotationContainer({
     },
     resizeUI: {
       handleSize: HANDLE_SIZE,
-      spacing: outlineOffset,
+      spacing: outlineOff,
       offsetMode: "outside",
       includeSides: lockAspectRatio ? false : true,
       zIndex: zIndex + 1
@@ -198,7 +259,15 @@ function AnnotationContainer({
       vertexSize: VERTEX_SIZE,
       zIndex: zIndex + 2
     },
-    includeVertices: vertexConfig ? true : false
+    rotationUI: {
+      handleSize: ROTATION_SIZE,
+      margin: ROTATION_MARGIN,
+      zIndex: zIndex + 3,
+      showConnector: SHOW_CONNECTOR
+    },
+    includeVertices: vertexConfig ? true : false,
+    includeRotation: effectiveIsRotatable,
+    currentRotation: annotationRotation
   });
   const guardedOnDoubleClick = useMemo(() => {
     if (!canModifyAnnotations || !onDoubleClick) return void 0;
@@ -212,88 +281,268 @@ function AnnotationContainer({
     if (!plugin) return;
     const id = trackedAnnotation.object.id;
     const handleEvent = (event) => {
-      var _a;
+      var _a2;
       if (event.documentId !== documentId) return;
-      const patch = (_a = event.previewPatches) == null ? void 0 : _a[id];
+      if (event.type === "end" || event.type === "cancel") {
+        setLiveRotation(null);
+      }
+      const patch = (_a2 = event.previewPatches) == null ? void 0 : _a2[id];
       if (event.type === "update" && patch) setPreview((prev) => ({ ...prev, ...patch }));
       else if (event.type === "cancel") setPreview(trackedAnnotation.object);
     };
-    const unsubs = [plugin.onDragChange(handleEvent), plugin.onResizeChange(handleEvent)];
+    const unsubs = [
+      plugin.onDragChange(handleEvent),
+      plugin.onResizeChange(handleEvent),
+      plugin.onRotateChange(handleEvent)
+    ];
     return () => unsubs.forEach((u) => u());
   }, [plugin, documentId, trackedAnnotation.object]);
   const showOutline = isSelected && !isMultiSelected;
+  const aabbWidth = currentObject.rect.size.width * scale;
+  const aabbHeight = currentObject.rect.size.height * scale;
+  const innerWidth = effectiveUnrotatedRect.size.width * scale;
+  const innerHeight = effectiveUnrotatedRect.size.height * scale;
+  const usesCustomPivot = Boolean(explicitUnrotatedRect) && annotationRotation !== 0;
+  const innerLeft = usesCustomPivot ? (effectiveUnrotatedRect.origin.x - currentObject.rect.origin.x) * scale : (aabbWidth - innerWidth) / 2;
+  const innerTop = usesCustomPivot ? (effectiveUnrotatedRect.origin.y - currentObject.rect.origin.y) * scale : (aabbHeight - innerHeight) / 2;
+  const innerTransformOrigin = usesCustomPivot && rotationPivot ? `${(rotationPivot.x - effectiveUnrotatedRect.origin.x) * scale}px ${(rotationPivot.y - effectiveUnrotatedRect.origin.y) * scale}px` : "center center";
+  const centerX = rotationPivot ? (rotationPivot.x - currentObject.rect.origin.x) * scale : aabbWidth / 2;
+  const centerY = rotationPivot ? (rotationPivot.y - currentObject.rect.origin.y) * scale : aabbHeight / 2;
+  const guideLength = Math.max(300, Math.max(aabbWidth, aabbHeight) + 80);
+  const childObject = useMemo(() => {
+    if (explicitUnrotatedRect) {
+      return { ...currentObject, rect: explicitUnrotatedRect };
+    }
+    return currentObject;
+  }, [currentObject, explicitUnrotatedRect]);
   return /* @__PURE__ */ jsxs("div", { "data-no-interaction": true, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ...effectiveIsDraggable && isSelected ? dragProps : {},
-        ...doubleProps,
         style: {
           position: "absolute",
           left: currentObject.rect.origin.x * scale,
           top: currentObject.rect.origin.y * scale,
-          width: currentObject.rect.size.width * scale,
-          height: currentObject.rect.size.height * scale,
-          outline: showOutline ? `1px solid ${selectionOutlineColor}` : "none",
-          outlineOffset: showOutline ? `${outlineOffset}px` : "0px",
-          pointerEvents: isSelected && !isMultiSelected ? "auto" : "none",
-          touchAction: "none",
-          cursor: isSelected && effectiveIsDraggable ? "move" : "default",
+          width: aabbWidth,
+          height: aabbHeight,
+          pointerEvents: "none",
           zIndex,
           ...style
         },
         ...props,
         children: [
-          (() => {
-            const childrenRender = typeof children === "function" ? children(currentObject) : children;
-            const customRender = customAnnotationRenderer == null ? void 0 : customAnnotationRenderer({
-              annotation: currentObject,
-              children: childrenRender,
-              isSelected,
-              scale,
-              rotation,
-              pageWidth,
-              pageHeight,
-              pageIndex,
-              onSelect
-            });
-            if (customRender !== null && customRender !== void 0) {
-              return customRender;
-            }
-            return childrenRender;
-          })(),
-          isSelected && effectiveIsResizable && resize.map(
-            ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
-              key,
-              ...hProps,
-              backgroundColor: HANDLE_COLOR
-            }) : /* @__PURE__ */ jsx(
+          rotationActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
               "div",
               {
-                ...hProps,
-                style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
-              },
-              key
-            )
-          ),
-          isSelected && canModifyAnnotations && !isMultiSelected && vertices.map(
-            ({ key, ...vProps }) => (vertexUI == null ? void 0 : vertexUI.component) ? vertexUI.component({
-              key,
-              ...vProps,
-              backgroundColor: VERTEX_COLOR
-            }) : /* @__PURE__ */ jsx(
+                style: {
+                  position: "absolute",
+                  left: centerX - guideLength / 2,
+                  top: centerY,
+                  width: guideLength,
+                  height: 1,
+                  backgroundColor: ROTATION_CONNECTOR_COLOR,
+                  opacity: 0.35,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
               "div",
               {
-                ...vProps,
-                style: { ...vProps.style, backgroundColor: VERTEX_COLOR }
-              },
-              key
+                style: {
+                  position: "absolute",
+                  left: centerX,
+                  top: centerY - guideLength / 2,
+                  width: 1,
+                  height: guideLength,
+                  backgroundColor: ROTATION_CONNECTOR_COLOR,
+                  opacity: 0.35,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: centerX - guideLength / 2,
+                  top: centerY,
+                  width: guideLength,
+                  height: 1,
+                  transformOrigin: "center center",
+                  transform: `rotate(${annotationRotation}deg)`,
+                  backgroundColor: ROTATION_CONNECTOR_COLOR,
+                  opacity: 0.8,
+                  pointerEvents: "none"
+                }
+              }
             )
+          ] }),
+          isSelected && effectiveIsRotatable && rotationHandle && ((rotationUI == null ? void 0 : rotationUI.component) ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              onPointerEnter: () => setIsHandleHovered(true),
+              onPointerLeave: () => {
+                setIsHandleHovered(false);
+                setCursorScreen(null);
+              },
+              onPointerMove: (e) => {
+                if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
+              },
+              style: { display: "contents" },
+              children: rotationUI.component({
+                ...rotationHandle.handle,
+                backgroundColor: ROTATION_COLOR,
+                iconColor: ROTATION_ICON_COLOR,
+                connectorStyle: {
+                  ...rotationHandle.connector.style,
+                  backgroundColor: ROTATION_CONNECTOR_COLOR,
+                  opacity: rotationActive ? 0 : 1
+                },
+                showConnector: SHOW_CONNECTOR,
+                opacity: rotationActive ? 0 : 1,
+                border: {
+                  color: ROTATION_BORDER_COLOR,
+                  width: ROTATION_BORDER_WIDTH,
+                  style: ROTATION_BORDER_STYLE
+                }
+              })
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onPointerEnter: () => setIsHandleHovered(true),
+              onPointerLeave: () => {
+                setIsHandleHovered(false);
+                setCursorScreen(null);
+              },
+              onPointerMove: (e) => {
+                if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
+              },
+              style: { display: "contents" },
+              children: [
+                SHOW_CONNECTOR && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      ...rotationHandle.connector.style,
+                      backgroundColor: ROTATION_CONNECTOR_COLOR,
+                      opacity: rotationActive ? 0 : 1
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...rotationHandle.handle,
+                    style: {
+                      ...rotationHandle.handle.style,
+                      backgroundColor: ROTATION_COLOR,
+                      border: `${ROTATION_BORDER_WIDTH}px ${ROTATION_BORDER_STYLE} ${ROTATION_BORDER_COLOR}`,
+                      boxSizing: "border-box",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      pointerEvents: "auto",
+                      opacity: rotationActive ? 0 : 1
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        width: Math.round(ROTATION_SIZE * 0.6),
+                        height: Math.round(ROTATION_SIZE * 0.6),
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: ROTATION_ICON_COLOR,
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+                          /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ...effectiveIsDraggable && isSelected ? dragProps : {},
+              ...doubleProps,
+              style: {
+                position: "absolute",
+                left: innerLeft,
+                top: innerTop,
+                width: innerWidth,
+                height: innerHeight,
+                transform: annotationRotation !== 0 ? `rotate(${annotationRotation}deg)` : void 0,
+                transformOrigin: innerTransformOrigin,
+                outline: showOutline ? `${outlineWidth}px ${outlineStyle} ${outlineColor}` : "none",
+                outlineOffset: showOutline ? `${outlineOff}px` : "0px",
+                pointerEvents: isSelected && !isMultiSelected ? "auto" : "none",
+                touchAction: "none",
+                cursor: isSelected && effectiveIsDraggable ? "move" : "default"
+              },
+              children: [
+                (() => {
+                  const childrenRender = typeof children === "function" ? children(childObject) : children;
+                  const customRender = customAnnotationRenderer == null ? void 0 : customAnnotationRenderer({
+                    annotation: childObject,
+                    children: childrenRender,
+                    isSelected,
+                    scale,
+                    rotation,
+                    pageWidth,
+                    pageHeight,
+                    pageIndex,
+                    onSelect
+                  });
+                  if (customRender !== null && customRender !== void 0) {
+                    return customRender;
+                  }
+                  return childrenRender;
+                })(),
+                isSelected && effectiveIsResizable && !rotationActive && resize.map(
+                  ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
+                    key,
+                    ...hProps,
+                    backgroundColor: HANDLE_COLOR
+                  }) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...hProps,
+                      style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
+                    },
+                    key
+                  )
+                ),
+                isSelected && canModifyAnnotations && !isMultiSelected && !rotationActive && vertices.map(
+                  ({ key, ...vProps }) => (vertexUI == null ? void 0 : vertexUI.component) ? vertexUI.component({
+                    key,
+                    ...vProps,
+                    backgroundColor: VERTEX_COLOR
+                  }) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...vProps,
+                      style: { ...vProps.style, backgroundColor: VERTEX_COLOR }
+                    },
+                    key
+                  )
+                )
+              ]
+            }
           )
         ]
       }
     ),
-    selectionMenu && !isMultiSelected && /* @__PURE__ */ jsx(
+    selectionMenu && !isMultiSelected && !rotationActive && /* @__PURE__ */ jsx(
       CounterRotate,
       {
         rect: {
@@ -307,19 +556,49 @@ function AnnotationContainer({
           }
         },
         rotation,
-        children: (counterRotateProps) => selectionMenu({
-          ...counterRotateProps,
-          context: {
-            type: "annotation",
-            annotation: trackedAnnotation,
-            pageIndex
-          },
-          selected: isSelected,
-          placement: {
-            suggestTop: false
-          }
-        })
+        children: (counterRotateProps) => {
+          const effectiveAngle = ((annotationRotation + rotation * 90) % 360 + 360) % 360;
+          const handleNearMenuSide = effectiveIsRotatable && effectiveAngle > 90 && effectiveAngle < 270;
+          return selectionMenu({
+            ...counterRotateProps,
+            context: {
+              type: "annotation",
+              annotation: trackedAnnotation,
+              pageIndex
+            },
+            selected: isSelected,
+            placement: {
+              suggestTop: handleNearMenuSide
+            }
+          });
+        }
       }
+    ),
+    (rotationActive || isHandleHovered) && cursorScreen && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: cursorScreen.x + 16,
+            top: cursorScreen.y - 16,
+            background: "rgba(0,0,0,0.8)",
+            color: "#fff",
+            padding: "4px 8px",
+            borderRadius: 4,
+            fontSize: 12,
+            fontFamily: "monospace",
+            pointerEvents: "none",
+            zIndex: 1e4,
+            whiteSpace: "nowrap"
+          },
+          children: [
+            normalizedRotationDisplay.toFixed(0),
+            "°"
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -333,19 +612,28 @@ function GroupSelectionBox({
   selectedAnnotations,
   isDraggable,
   isResizable,
+  isRotatable = true,
+  lockAspectRatio = false,
   resizeUI,
-  selectionOutlineColor = "#007ACC",
-  outlineOffset = 2,
-  zIndex = 100,
+  rotationUI,
+  selectionOutlineColor,
+  outlineOffset,
+  selectionOutline,
+  zIndex = 2,
   groupSelectionMenu
 }) {
+  var _a, _b, _c;
   const { plugin } = useAnnotationPlugin();
   const { canModifyAnnotations } = useDocumentPermissions(documentId);
   const gestureBaseRef = useRef(null);
   const isDraggingRef = useRef(false);
   const isResizingRef = useRef(false);
+  const [liveRotation, setLiveRotation] = useState(null);
+  const [cursorScreen, setCursorScreen] = useState(null);
+  const [isHandleHovered, setIsHandleHovered] = useState(false);
   const effectiveIsDraggable = canModifyAnnotations && isDraggable;
   const effectiveIsResizable = canModifyAnnotations && isResizable;
+  const effectiveIsRotatable = canModifyAnnotations && isRotatable;
   const groupBox = useMemo(() => {
     const rects = selectedAnnotations.map((ta) => ta.object.rect);
     return boundingRectOrEmpty(rects);
@@ -356,10 +644,20 @@ function GroupSelectionBox({
       setPreviewGroupBox(groupBox);
     }
   }, [groupBox]);
+  useEffect(() => {
+    if (!plugin) return;
+    const unsubscribe = plugin.onRotateChange((event) => {
+      if (event.documentId !== documentId) return;
+      if (event.type === "end" || event.type === "cancel") {
+        setLiveRotation(null);
+      }
+    });
+    return unsubscribe;
+  }, [plugin, documentId]);
   const handleUpdate = useCallback(
     (event) => {
-      var _a, _b;
-      if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
+      var _a2, _b2, _c2, _d, _e, _f;
+      if (!((_a2 = event.transformData) == null ? void 0 : _a2.type)) return;
       if (!plugin) return;
       const transformType = event.transformData.type;
       const isMove = transformType === "move";
@@ -378,10 +676,37 @@ function GroupSelectionBox({
           plugin.startResize(documentId, {
             annotationIds: selectedAnnotations.map((ta) => ta.object.id),
             pageSize: { width: pageWidth, height: pageHeight },
-            resizeHandle: ((_b = event.transformData.metadata) == null ? void 0 : _b.handle) ?? "se"
+            resizeHandle: ((_b2 = event.transformData.metadata) == null ? void 0 : _b2.handle) ?? "se"
           });
         }
       }
+      if (transformType === "rotate") {
+        if (!isRotatable) return;
+        const ids = selectedAnnotations.map((ta) => ta.object.id);
+        const cursorAngle = ((_c2 = event.transformData.metadata) == null ? void 0 : _c2.rotationAngle) ?? 0;
+        const cursorPos = (_d = event.transformData.metadata) == null ? void 0 : _d.cursorPosition;
+        if (cursorPos) setCursorScreen({ x: cursorPos.clientX, y: cursorPos.clientY });
+        if (event.state === "start") {
+          setLiveRotation(cursorAngle);
+          plugin.startRotation(documentId, {
+            annotationIds: ids,
+            cursorAngle,
+            rotationCenter: (_e = event.transformData.metadata) == null ? void 0 : _e.rotationCenter
+          });
+        } else if (event.state === "move") {
+          setLiveRotation(cursorAngle);
+          plugin.updateRotation(
+            documentId,
+            cursorAngle,
+            (_f = event.transformData.metadata) == null ? void 0 : _f.rotationDelta
+          );
+        } else if (event.state === "end") {
+          setLiveRotation(null);
+          setCursorScreen(null);
+          plugin.commitRotation(documentId);
+        }
+        return;
+      }
       const base = gestureBaseRef.current ?? groupBox;
       if (isMove && event.transformData.changes.rect) {
         const newRect = event.transformData.changes.rect;
@@ -420,12 +745,33 @@ function GroupSelectionBox({
       pageHeight,
       groupBox,
       effectiveIsDraggable,
-      selectedAnnotations
+      selectedAnnotations,
+      isRotatable
     ]
   );
+  const groupRotationDisplay = liveRotation ?? 0;
+  const rotationActive = liveRotation !== null;
+  const normalizedRotationDisplay = Number.isFinite(groupRotationDisplay) ? Math.round(groupRotationDisplay * 10) / 10 : 0;
   const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
   const HANDLE_SIZE = (resizeUI == null ? void 0 : resizeUI.size) ?? 12;
-  const { dragProps, resize } = useInteractionHandles({
+  const ROTATION_COLOR = (rotationUI == null ? void 0 : rotationUI.color) ?? "white";
+  const ROTATION_CONNECTOR_COLOR = (rotationUI == null ? void 0 : rotationUI.connectorColor) ?? "#007ACC";
+  const ROTATION_SIZE = (rotationUI == null ? void 0 : rotationUI.size) ?? 32;
+  const ROTATION_MARGIN = rotationUI == null ? void 0 : rotationUI.margin;
+  const ROTATION_ICON_COLOR = (rotationUI == null ? void 0 : rotationUI.iconColor) ?? "#007ACC";
+  const SHOW_CONNECTOR = (rotationUI == null ? void 0 : rotationUI.showConnector) ?? false;
+  const ROTATION_BORDER_COLOR = ((_a = rotationUI == null ? void 0 : rotationUI.border) == null ? void 0 : _a.color) ?? "#007ACC";
+  const ROTATION_BORDER_WIDTH = ((_b = rotationUI == null ? void 0 : rotationUI.border) == null ? void 0 : _b.width) ?? 1;
+  const ROTATION_BORDER_STYLE = ((_c = rotationUI == null ? void 0 : rotationUI.border) == null ? void 0 : _c.style) ?? "solid";
+  const outlineColor = (selectionOutline == null ? void 0 : selectionOutline.color) ?? selectionOutlineColor ?? "#007ACC";
+  const outlineStyleVal = (selectionOutline == null ? void 0 : selectionOutline.style) ?? "dashed";
+  const outlineWidth = (selectionOutline == null ? void 0 : selectionOutline.width) ?? 2;
+  const outlineOff = (selectionOutline == null ? void 0 : selectionOutline.offset) ?? outlineOffset ?? 2;
+  const {
+    dragProps,
+    resize,
+    rotation: rotationHandle
+  } = useInteractionHandles({
     controller: {
       element: previewGroupBox,
       constraints: {
@@ -433,7 +779,7 @@ function GroupSelectionBox({
         minHeight: 20,
         boundingBox: { width: pageWidth, height: pageHeight }
       },
-      maintainAspectRatio: false,
+      maintainAspectRatio: lockAspectRatio,
       pageRotation: rotation,
       scale,
       enabled: true,
@@ -441,55 +787,249 @@ function GroupSelectionBox({
     },
     resizeUI: {
       handleSize: HANDLE_SIZE,
-      spacing: outlineOffset,
+      spacing: outlineOff,
       offsetMode: "outside",
-      includeSides: true,
+      includeSides: !lockAspectRatio,
       zIndex: zIndex + 1
     },
     vertexUI: {
       vertexSize: 0,
       zIndex
     },
-    includeVertices: false
+    rotationUI: {
+      handleSize: ROTATION_SIZE,
+      margin: ROTATION_MARGIN,
+      zIndex: zIndex + 2,
+      showConnector: SHOW_CONNECTOR
+    },
+    includeVertices: false,
+    includeRotation: effectiveIsRotatable,
+    currentRotation: liveRotation ?? 0
   });
   if (selectedAnnotations.length < 2) {
     return null;
   }
+  const groupBoxWidth = previewGroupBox.size.width * scale;
+  const groupBoxHeight = previewGroupBox.size.height * scale;
+  const groupCenterX = groupBoxWidth / 2;
+  const groupCenterY = groupBoxHeight / 2;
+  const groupGuideLength = Math.max(300, Math.max(groupBoxWidth, groupBoxHeight) + 80);
   return /* @__PURE__ */ jsxs("div", { "data-group-selection-box": true, "data-no-interaction": true, children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        ...effectiveIsDraggable ? dragProps : {
-          onPointerDown: (e) => e.stopPropagation()
-        },
         style: {
           position: "absolute",
           left: previewGroupBox.origin.x * scale,
           top: previewGroupBox.origin.y * scale,
-          width: previewGroupBox.size.width * scale,
-          height: previewGroupBox.size.height * scale,
-          outline: `2px dashed ${selectionOutlineColor}`,
-          outlineOffset: outlineOffset - 1,
-          cursor: effectiveIsDraggable ? "move" : "default",
-          touchAction: "none",
+          width: groupBoxWidth,
+          height: groupBoxHeight,
+          pointerEvents: "none",
           zIndex
         },
-        children: effectiveIsResizable && resize.map(
-          ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
-            key,
-            ...hProps,
-            backgroundColor: HANDLE_COLOR
-          }) : /* @__PURE__ */ jsx(
+        children: [
+          rotationActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: groupCenterX - groupGuideLength / 2,
+                  top: groupCenterY,
+                  width: groupGuideLength,
+                  height: 1,
+                  backgroundColor: HANDLE_COLOR,
+                  opacity: 0.35,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: groupCenterX,
+                  top: groupCenterY - groupGuideLength / 2,
+                  width: 1,
+                  height: groupGuideLength,
+                  backgroundColor: HANDLE_COLOR,
+                  opacity: 0.35,
+                  pointerEvents: "none"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: groupCenterX - groupGuideLength / 2,
+                  top: groupCenterY,
+                  width: groupGuideLength,
+                  height: 1,
+                  transformOrigin: "center center",
+                  transform: `rotate(${groupRotationDisplay}deg)`,
+                  backgroundColor: HANDLE_COLOR,
+                  opacity: 0.8,
+                  pointerEvents: "none"
+                }
+              }
+            )
+          ] }),
+          effectiveIsRotatable && rotationHandle && ((rotationUI == null ? void 0 : rotationUI.component) ? /* @__PURE__ */ jsx(
             "div",
             {
-              ...hProps,
-              style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
-            },
-            key
+              onPointerEnter: () => setIsHandleHovered(true),
+              onPointerLeave: () => {
+                setIsHandleHovered(false);
+                setCursorScreen(null);
+              },
+              onPointerMove: (e) => {
+                if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
+              },
+              style: { display: "contents" },
+              children: rotationUI.component({
+                ...rotationHandle.handle,
+                backgroundColor: ROTATION_COLOR,
+                iconColor: ROTATION_ICON_COLOR,
+                connectorStyle: {
+                  ...rotationHandle.connector.style,
+                  backgroundColor: ROTATION_CONNECTOR_COLOR,
+                  opacity: rotationActive ? 0 : 1
+                },
+                showConnector: SHOW_CONNECTOR,
+                opacity: rotationActive ? 0 : 1,
+                border: {
+                  color: ROTATION_BORDER_COLOR,
+                  width: ROTATION_BORDER_WIDTH,
+                  style: ROTATION_BORDER_STYLE
+                }
+              })
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              onPointerEnter: () => setIsHandleHovered(true),
+              onPointerLeave: () => {
+                setIsHandleHovered(false);
+                setCursorScreen(null);
+              },
+              onPointerMove: (e) => {
+                if (!rotationActive) setCursorScreen({ x: e.clientX, y: e.clientY });
+              },
+              style: { display: "contents" },
+              children: [
+                SHOW_CONNECTOR && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      ...rotationHandle.connector.style,
+                      backgroundColor: ROTATION_CONNECTOR_COLOR,
+                      opacity: rotationActive ? 0 : 1
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...rotationHandle.handle,
+                    style: {
+                      ...rotationHandle.handle.style,
+                      backgroundColor: ROTATION_COLOR,
+                      border: `${ROTATION_BORDER_WIDTH}px ${ROTATION_BORDER_STYLE} ${ROTATION_BORDER_COLOR}`,
+                      boxSizing: "border-box",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      pointerEvents: "auto",
+                      opacity: rotationActive ? 0 : 1
+                    },
+                    children: /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        width: Math.round(ROTATION_SIZE * 0.6),
+                        height: Math.round(ROTATION_SIZE * 0.6),
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: ROTATION_ICON_COLOR,
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }),
+                          /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" })
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...effectiveIsDraggable ? dragProps : {
+                onPointerDown: (e) => e.stopPropagation()
+              },
+              style: {
+                position: "absolute",
+                left: 0,
+                top: 0,
+                width: groupBoxWidth,
+                height: groupBoxHeight,
+                outline: rotationActive ? "none" : `${outlineWidth}px ${outlineStyleVal} ${outlineColor}`,
+                outlineOffset: outlineOff - 1,
+                cursor: effectiveIsDraggable ? "move" : "default",
+                touchAction: "none",
+                pointerEvents: "auto"
+              },
+              children: effectiveIsResizable && !rotationActive && resize.map(
+                ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
+                  key,
+                  ...hProps,
+                  backgroundColor: HANDLE_COLOR
+                }) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ...hProps,
+                    style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
+                  },
+                  key
+                )
+              )
+            }
           )
-        )
+        ]
       }
     ),
+    (rotationActive || isHandleHovered) && cursorScreen && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "fixed",
+            left: cursorScreen.x + 16,
+            top: cursorScreen.y - 16,
+            background: "rgba(0,0,0,0.8)",
+            color: "#fff",
+            padding: "4px 8px",
+            borderRadius: 4,
+            fontSize: 12,
+            fontFamily: "monospace",
+            pointerEvents: "none",
+            zIndex: 1e4,
+            whiteSpace: "nowrap"
+          },
+          children: [
+            normalizedRotationDisplay.toFixed(0),
+            "°"
+          ]
+        }
+      ),
+      document.body
+    ),
     groupSelectionMenu && /* @__PURE__ */ jsx(
       CounterRotate,
       {
@@ -504,18 +1044,22 @@ function GroupSelectionBox({
           }
         },
         rotation,
-        children: (counterRotateProps) => groupSelectionMenu({
-          ...counterRotateProps,
-          context: {
-            type: "group",
-            annotations: selectedAnnotations,
-            pageIndex
-          },
-          selected: true,
-          placement: {
-            suggestTop: false
-          }
-        })
+        children: (counterRotateProps) => {
+          const effectiveAngle = ((groupRotationDisplay + rotation * 90) % 360 + 360) % 360;
+          const handleNearMenuSide = effectiveIsRotatable && effectiveAngle > 90 && effectiveAngle < 270;
+          return groupSelectionMenu({
+            ...counterRotateProps,
+            context: {
+              type: "group",
+              annotations: selectedAnnotations,
+              pageIndex
+            },
+            selected: true,
+            placement: {
+              suggestTop: handleNearMenuSide
+            }
+          });
+        }
       }
     )
   ] });
@@ -1284,7 +1828,7 @@ function FreeText({
           style: {
             color: annotation.object.fontColor,
             fontSize: adjustedFontPx,
-            fontFamily: standardFontCss(annotation.object.fontFamily),
+            ...standardFontCssProperties(annotation.object.fontFamily),
             textAlign: textAlignmentToCss(annotation.object.textAlign),
             flexDirection: "column",
             justifyContent: annotation.object.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : annotation.object.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
@@ -1313,6 +1857,7 @@ function RenderAnnotation({
   pageIndex,
   annotation,
   scaleFactor = 1,
+  unrotated,
   style,
   ...props
 }) {
@@ -1327,7 +1872,8 @@ function RenderAnnotation({
         annotation,
         options: {
           scaleFactor,
-          dpr: window.devicePixelRatio
+          dpr: window.devicePixelRatio,
+          unrotated
         }
       });
       task.wait((blob) => {
@@ -1347,7 +1893,16 @@ function RenderAnnotation({
         }
       };
     }
-  }, [pageIndex, scaleFactor, annotationProvides, documentId, annotation.id, width, height]);
+  }, [
+    pageIndex,
+    scaleFactor,
+    unrotated,
+    annotationProvides,
+    documentId,
+    annotation.id,
+    width,
+    height
+  ]);
   const handleImageLoad = () => {
     if (urlRef.current) {
       URL.revokeObjectURL(urlRef.current);
@@ -1377,6 +1932,7 @@ function Stamp({
   scale,
   onClick
 }) {
+  const unrotated = !!annotation.object.rotation && !!annotation.object.unrotatedRect;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1396,7 +1952,8 @@ function Stamp({
           documentId,
           pageIndex,
           annotation: { ...annotation.object, id: annotation.object.id },
-          scaleFactor: scale
+          scaleFactor: scale,
+          unrotated
         }
       )
     }
@@ -1610,6 +2167,40 @@ function Annotations(annotationsProps) {
       return (tool == null ? void 0 : tool.interaction.isGroupResizable) !== void 0 ? groupResizable : singleResizable;
     });
   }, [selectedAnnotationsOnPage, annotationProvides]);
+  const areAllSelectedRotatable = useMemo(() => {
+    if (selectedAnnotationsOnPage.length < 2) return false;
+    return selectedAnnotationsOnPage.every((ta) => {
+      const tool = annotationProvides == null ? void 0 : annotationProvides.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;
+    });
+  }, [selectedAnnotationsOnPage, annotationProvides]);
+  const shouldLockGroupAspectRatio = useMemo(() => {
+    if (selectedAnnotationsOnPage.length < 2) return false;
+    return selectedAnnotationsOnPage.some((ta) => {
+      const tool = annotationProvides == null ? void 0 : annotationProvides.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;
+    });
+  }, [selectedAnnotationsOnPage, annotationProvides]);
   const allSelectedOnSamePage = useMemo(() => {
     if (!annotationProvides) return false;
     const allSelected = annotationProvides.getSelectedAnnotations();
@@ -1649,6 +2240,11 @@ function Annotations(annotationsProps) {
                 annotation.object,
                 false
               ),
+              isRotatable: resolveInteractionProp(
+                tool == null ? void 0 : tool.interaction.isRotatable,
+                annotation.object,
+                false
+              ),
               selectionMenu,
               onSelect: (e) => handleClick(e, annotation),
               style: {
@@ -1683,6 +2279,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             style: {
@@ -1724,6 +2325,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             style: {
@@ -1765,6 +2371,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             style: {
@@ -1806,6 +2417,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              false
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             zIndex: 0,
@@ -1840,6 +2456,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              false
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             zIndex: 0,
@@ -1874,6 +2495,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              false
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             zIndex: 0,
@@ -1908,6 +2534,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              false
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             zIndex: 0,
@@ -1942,6 +2573,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             vertexConfig: {
@@ -1998,6 +2634,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             vertexConfig: {
@@ -2048,6 +2689,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             vertexConfig: {
@@ -2094,6 +2740,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             style: {
@@ -2144,6 +2795,11 @@ function Annotations(annotationsProps) {
               annotation.object,
               false
             ),
+            isRotatable: resolveInteractionProp(
+              tool == null ? void 0 : tool.interaction.isRotatable,
+              annotation.object,
+              true
+            ),
             selectionMenu,
             onSelect: (e) => handleClick(e, annotation),
             style: {
@@ -2176,6 +2832,7 @@ function Annotations(annotationsProps) {
             isDraggable: false,
             isResizable: false,
             lockAspectRatio: false,
+            isRotatable: false,
             selectionMenu: hasIRT ? void 0 : selectionMenu,
             onSelect: (e) => handleLinkClick(e, annotation),
             ...annotationsProps,
@@ -2207,8 +2864,12 @@ function Annotations(annotationsProps) {
         selectedAnnotations: selectedAnnotationsOnPage,
         isDraggable: areAllSelectedDraggable,
         isResizable: areAllSelectedResizable,
+        isRotatable: areAllSelectedRotatable,
+        lockAspectRatio: shouldLockGroupAspectRatio,
         resizeUI: annotationsProps.resizeUI,
+        rotationUI: annotationsProps.rotationUI,
         selectionOutlineColor: annotationsProps.selectionOutlineColor,
+        selectionOutline: annotationsProps.groupSelectionOutline ?? annotationsProps.selectionOutline,
         groupSelectionMenu: annotationsProps.groupSelectionMenu
       }
     )
@@ -2448,7 +3109,10 @@ function AnnotationLayer({
   groupSelectionMenu,
   resizeUI,
   vertexUI,
+  rotationUI,
   selectionOutlineColor,
+  selectionOutline,
+  groupSelectionOutline,
   customAnnotationRenderer,
   annotationRenderers,
   ...props
@@ -2474,8 +3138,10 @@ function AnnotationLayer({
   }, [overrideScale, documentState == null ? void 0 : documentState.scale]);
   const actualRotation = useMemo(() => {
     if (overrideRotation !== void 0) return overrideRotation;
-    return (documentState == null ? void 0 : documentState.rotation) ?? Rotation.Degree0;
-  }, [overrideRotation, documentState == null ? void 0 : documentState.rotation]);
+    const pageRotation = (page == null ? void 0 : page.rotation) ?? 0;
+    const docRotation = (documentState == null ? void 0 : documentState.rotation) ?? 0;
+    return (pageRotation + docRotation) % 4;
+  }, [overrideRotation, page == null ? void 0 : page.rotation, documentState == null ? void 0 : documentState.rotation]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2497,7 +3163,10 @@ function AnnotationLayer({
             pageHeight: height,
             resizeUI,
             vertexUI,
+            rotationUI,
             selectionOutlineColor,
+            selectionOutline,
+            groupSelectionOutline,
             customAnnotationRenderer,
             annotationRenderers: allRenderers
           }