@embedpdf/plugin-annotation 2.4.1 → 2.6.0

package/dist/svelte/index.js

@@ -6,7 +6,7 @@ import * as $ from "svelte/internal/client";
 import { setContext, getContext, untrack } from "svelte";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/svelte";
 import { useInteractionHandles, deepToRaw, doublePress, CounterRotate } from "@embedpdf/utils/svelte";
-import { PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCss, ignore, PdfErrorCode, boundingRectOrEmpty, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
+import { inferRotationCenterFromRects, PdfAnnotationBorderStyle, PdfVerticalAlignment, standardFontCssProperties, textAlignmentToCss, ignore, PdfErrorCode, boundingRectOrEmpty, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/svelte";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/svelte";
 const REGISTRY_KEY = Symbol("AnnotationRendererRegistry");
@@ -85,12 +85,17 @@ const useAnnotation = (getDocumentId) => {
     }
   };
 };
-var root_6$1 = $.from_html(`<div></div>`);
-var root_10 = $.from_html(`<div></div>`);
-var root$c = $.from_html(`<div data-no-interaction=""><div><!> <!> <!></div> <!></div>`);
+var root_1$c = $.from_html(`<div></div> <div></div> <div></div>`, 1);
+var root_3$1 = $.from_html(`<div style="display: contents;"><!></div>`);
+var root_5$2 = $.from_html(`<div></div>`);
+var root_4$2 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
+var root_11$2 = $.from_html(`<div></div>`);
+var root_15 = $.from_html(`<div></div>`);
+var root_22 = $.from_html(`<div><div> </div></div>`);
+var root$c = $.from_html(`<div data-no-interaction=""><div><!> <!> <div><!> <!> <!></div></div> <!> <!></div>`);
 function AnnotationContainer($$anchor, $$props) {
   $.push($$props, true);
-  let isMultiSelected = $.prop($$props, "isMultiSelected", 3, false), lockAspectRatio = $.prop($$props, "lockAspectRatio", 3, false), propsClass = $.prop($$props, "class", 3, ""), outlineOffset = $.prop($$props, "outlineOffset", 3, 1), zIndex = $.prop($$props, "zIndex", 3, 1), selectionOutlineColor = $.prop($$props, "selectionOutlineColor", 3, "#007ACC"), restProps = $.rest_props($$props, [
+  let isMultiSelected = $.prop($$props, "isMultiSelected", 3, false), isRotatable = $.prop($$props, "isRotatable", 3, true), lockAspectRatio = $.prop($$props, "lockAspectRatio", 3, false), propsClass = $.prop($$props, "class", 3, ""), outlineOffset = $.prop($$props, "outlineOffset", 3, 1), zIndex = $.prop($$props, "zIndex", 3, 1), restProps = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -106,6 +111,7 @@ function AnnotationContainer($$anchor, $$props) {
     "isMultiSelected",
     "isDraggable",
     "isResizable",
+    "isRotatable",
     "lockAspectRatio",
     "style",
     "class",
@@ -118,10 +124,18 @@ function AnnotationContainer($$anchor, $$props) {
     "zIndex",
     "resizeUI",
     "vertexUI",
+    "rotationUI",
     "selectionOutlineColor",
-    "customAnnotationRenderer"
+    "selectionOutline",
+    "customAnnotationRenderer",
+    "groupSelectionMenu",
+    "groupSelectionOutline",
+    "annotationRenderers"
   ]);
   let preview = $.state($.proxy($$props.trackedAnnotation.object));
+  let liveRotation = $.state(null);
+  let cursorScreen = $.state(null);
+  let isHandleHovered = $.state(false);
   let annotationCapability = useAnnotationCapability();
   const annotationPlugin = useAnnotationPlugin();
   const permissions = useDocumentPermissions(() => $$props.documentId);
@@ -129,6 +143,7 @@ function AnnotationContainer($$anchor, $$props) {
   let gestureBaseRectRef = $.state(null);
   const effectiveIsDraggable = $.derived(() => permissions.canModifyAnnotations && $$props.isDraggable && !isMultiSelected());
   const effectiveIsResizable = $.derived(() => permissions.canModifyAnnotations && $$props.isResizable && !isMultiSelected());
+  const effectiveIsRotatable = $.derived(() => permissions.canModifyAnnotations && isRotatable() && !isMultiSelected());
   const guardedOnDoubleClick = $.derived(() => permissions.canModifyAnnotations && $$props.onDoubleClick ? $$props.onDoubleClick : void 0);
   const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
   let currentObject = $.derived(() => $.get(preview) ? { ...$$props.trackedAnnotation.object, ...$.get(preview) } : $$props.trackedAnnotation.object);
@@ -140,6 +155,14 @@ function AnnotationContainer($$anchor, $$props) {
     var _a;
     return ((_a = $$props.vertexUI) == null ? void 0 : _a.color) ?? "#007ACC";
   });
+  const ROTATION_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.color) ?? "white";
+  });
+  const ROTATION_CONNECTOR_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.connectorColor) ?? "#007ACC";
+  });
   const HANDLE_SIZE = $.derived(() => {
     var _a;
     return ((_a = $$props.resizeUI) == null ? void 0 : _a.size) ?? 12;
@@ -148,7 +171,76 @@ function AnnotationContainer($$anchor, $$props) {
     var _a;
     return ((_a = $$props.vertexUI) == null ? void 0 : _a.size) ?? 12;
   });
+  const ROTATION_SIZE = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.size) ?? 32;
+  });
+  const ROTATION_MARGIN = $.derived(() => {
+    var _a;
+    return (_a = $$props.rotationUI) == null ? void 0 : _a.margin;
+  });
+  const ROTATION_ICON_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.iconColor) ?? "#007ACC";
+  });
+  const SHOW_CONNECTOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.showConnector) ?? false;
+  });
+  const ROTATION_BORDER_COLOR = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $$props.rotationUI) == null ? void 0 : _a.border) == null ? void 0 : _b.color) ?? "#007ACC";
+  });
+  const ROTATION_BORDER_WIDTH = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $$props.rotationUI) == null ? void 0 : _a.border) == null ? void 0 : _b.width) ?? 1;
+  });
+  const ROTATION_BORDER_STYLE = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $$props.rotationUI) == null ? void 0 : _a.border) == null ? void 0 : _b.style) ?? "solid";
+  });
+  const outlineColor = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.color) ?? $$props.selectionOutlineColor ?? "#007ACC";
+  });
+  const outlineStyleVal = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.style) ?? "solid";
+  });
+  const outlineWidth = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.width) ?? 1;
+  });
+  const outlineOff = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.offset) ?? outlineOffset() ?? 1;
+  });
+  const annotationRotation = $.derived(() => $.get(liveRotation) ?? $.get(currentObject).rotation ?? 0);
+  const rotationDisplay = $.derived(() => $.get(liveRotation) ?? $.get(currentObject).rotation ?? 0);
+  const normalizedRotationDisplay = $.derived(() => Number.isFinite($.get(rotationDisplay)) ? Math.round($.get(rotationDisplay) * 10) / 10 : 0);
+  const rotationActive = $.derived(() => $.get(liveRotation) !== null);
   const showOutline = $.derived(() => $$props.isSelected && !isMultiSelected());
+  const explicitUnrotatedRect = $.derived(() => $.get(currentObject).unrotatedRect);
+  const effectiveUnrotatedRect = $.derived(() => $.get(explicitUnrotatedRect) ?? $.get(currentObject).rect);
+  const rotationPivot = $.derived(() => $.get(explicitUnrotatedRect) && $.get(annotationRotation) !== 0 ? inferRotationCenterFromRects($.get(effectiveUnrotatedRect), $.get(currentObject).rect, $.get(annotationRotation)) : void 0);
+  const controllerElement = $.derived(() => $.get(effectiveUnrotatedRect));
+  const aabbWidth = $.derived(() => $.get(currentObject).rect.size.width * $$props.scale);
+  const aabbHeight = $.derived(() => $.get(currentObject).rect.size.height * $$props.scale);
+  const innerWidth = $.derived(() => $.get(effectiveUnrotatedRect).size.width * $$props.scale);
+  const innerHeight = $.derived(() => $.get(effectiveUnrotatedRect).size.height * $$props.scale);
+  const usesCustomPivot = $.derived(() => Boolean($.get(explicitUnrotatedRect)) && $.get(annotationRotation) !== 0);
+  const innerLeft = $.derived(() => $.get(usesCustomPivot) ? ($.get(effectiveUnrotatedRect).origin.x - $.get(currentObject).rect.origin.x) * $$props.scale : ($.get(aabbWidth) - $.get(innerWidth)) / 2);
+  const innerTop = $.derived(() => $.get(usesCustomPivot) ? ($.get(effectiveUnrotatedRect).origin.y - $.get(currentObject).rect.origin.y) * $$props.scale : ($.get(aabbHeight) - $.get(innerHeight)) / 2);
+  const innerTransformOrigin = $.derived(() => $.get(usesCustomPivot) && $.get(rotationPivot) ? `${($.get(rotationPivot).x - $.get(effectiveUnrotatedRect).origin.x) * $$props.scale}px ${($.get(rotationPivot).y - $.get(effectiveUnrotatedRect).origin.y) * $$props.scale}px` : "center center");
+  const centerX = $.derived(() => $.get(rotationPivot) ? ($.get(rotationPivot).x - $.get(currentObject).rect.origin.x) * $$props.scale : $.get(aabbWidth) / 2);
+  const centerY = $.derived(() => $.get(rotationPivot) ? ($.get(rotationPivot).y - $.get(currentObject).rect.origin.y) * $$props.scale : $.get(aabbHeight) / 2);
+  const guideLength = $.derived(() => Math.max(300, Math.max($.get(aabbWidth), $.get(aabbHeight)) + 80));
+  const childObject = $.derived(() => {
+    if ($.get(explicitUnrotatedRect)) {
+      return { ...$.get(currentObject), rect: $.get(explicitUnrotatedRect) };
+    }
+    return $.get(currentObject);
+  });
   $.user_effect(() => {
     if ($$props.trackedAnnotation.object) {
       $.set(preview, $$props.trackedAnnotation.object, true);
@@ -161,6 +253,9 @@ function AnnotationContainer($$anchor, $$props) {
     const handleEvent = (event) => {
       var _a;
       if (event.documentId !== $$props.documentId) return;
+      if (event.type === "end" || event.type === "cancel") {
+        $.set(liveRotation, null);
+      }
       const patch = (_a = event.previewPatches) == null ? void 0 : _a[id];
       if (event.type === "update" && patch) {
         $.set(preview, { ...untrack(() => $.get(preview)), ...patch }, true);
@@ -170,7 +265,8 @@ function AnnotationContainer($$anchor, $$props) {
     };
     const unsubs = [
       plugin.onDragChange(handleEvent),
-      plugin.onResizeChange(handleEvent)
+      plugin.onResizeChange(handleEvent),
+      plugin.onRotateChange(handleEvent)
     ];
     return () => unsubs.forEach((u) => u());
   });
@@ -178,7 +274,7 @@ function AnnotationContainer($$anchor, $$props) {
     var _a;
     return {
       controller: {
-        element: $.get(currentObject).rect,
+        element: $.get(controllerElement),
         vertices: (_a = $$props.vertexConfig) == null ? void 0 : _a.extractVertices($.get(currentObject)),
         constraints: {
           minWidth: 10,
@@ -187,6 +283,9 @@ function AnnotationContainer($$anchor, $$props) {
         },
         maintainAspectRatio: lockAspectRatio(),
         pageRotation: $$props.rotation,
+        annotationRotation: $.get(annotationRotation),
+        rotationCenter: $.get(rotationPivot),
+        rotationElement: $.get(currentObject).rect,
         scale: $$props.scale,
         // Disable interaction handles when multi-selected
         enabled: $$props.isSelected && !isMultiSelected(),
@@ -199,7 +298,7 @@ function AnnotationContainer($$anchor, $$props) {
           const id = $$props.trackedAnnotation.object.id;
           const pageSize = { width: $$props.pageWidth, height: $$props.pageHeight };
           if (event.state === "start") {
-            $.set(gestureBaseRectRef, $$props.trackedAnnotation.object.rect, true);
+            $.set(gestureBaseRectRef, $$props.trackedAnnotation.object.unrotatedRect ?? $$props.trackedAnnotation.object.rect, true);
             $.set(
               gestureBaseRef,
               $$props.trackedAnnotation.object,
@@ -239,6 +338,27 @@ function AnnotationContainer($$anchor, $$props) {
               }
             }
           }
+          if (type === "rotate") {
+            const cursorAngle = (metadata == null ? void 0 : metadata.rotationAngle) ?? $.get(annotationRotation);
+            const cursorPos = metadata == null ? void 0 : metadata.cursorPosition;
+            if (cursorPos) $.set(cursorScreen, { x: cursorPos.clientX, y: cursorPos.clientY }, true);
+            if (event.state === "start") {
+              $.set(liveRotation, cursorAngle, true);
+              plugin.startRotation($$props.documentId, {
+                annotationIds: [id],
+                cursorAngle,
+                rotationCenter: metadata == null ? void 0 : metadata.rotationCenter
+              });
+            } else if (event.state === "move") {
+              $.set(liveRotation, cursorAngle, true);
+              plugin.updateRotation($$props.documentId, cursorAngle, metadata == null ? void 0 : metadata.rotationDelta);
+            } else if (event.state === "end") {
+              $.set(liveRotation, null);
+              $.set(cursorScreen, null);
+              plugin.commitRotation($$props.documentId);
+            }
+            return;
+          }
           if (event.state === "end") {
             $.set(gestureBaseRectRef, null);
             $.set(gestureBaseRef, null);
@@ -249,18 +369,27 @@ function AnnotationContainer($$anchor, $$props) {
       },
       resizeUI: {
         handleSize: $.get(HANDLE_SIZE),
-        spacing: outlineOffset(),
+        spacing: $.get(outlineOff),
         offsetMode: "outside",
         includeSides: lockAspectRatio() ? false : true,
         zIndex: zIndex() + 1
       },
       vertexUI: { vertexSize: $.get(VERTEX_SIZE), zIndex: zIndex() + 2 },
-      includeVertices: $$props.vertexConfig ? true : false
+      rotationUI: {
+        handleSize: $.get(ROTATION_SIZE),
+        margin: $.get(ROTATION_MARGIN),
+        zIndex: zIndex() + 3,
+        showConnector: $.get(SHOW_CONNECTOR)
+      },
+      includeVertices: $$props.vertexConfig ? true : false,
+      includeRotation: $.get(effectiveIsRotatable),
+      currentRotation: $.get(annotationRotation)
     };
   });
   const resizeHandles = $.derived(() => interactionHandles.resize);
   const vertexHandles = $.derived(() => interactionHandles.vertices);
-  const shouldShowMenu = $.derived(() => $$props.isSelected && !isMultiSelected() && (!!$$props.selectionMenu || !!$$props.selectionMenuSnippet));
+  const rotationHandle = $.derived(() => interactionHandles.rotation);
+  const shouldShowMenu = $.derived(() => $$props.isSelected && !isMultiSelected() && !$.get(rotationActive) && (!!$$props.selectionMenu || !!$$props.selectionMenuSnippet));
   function buildContext() {
     return {
       type: "annotation",
@@ -268,20 +397,30 @@ function AnnotationContainer($$anchor, $$props) {
       pageIndex: $$props.pageIndex
     };
   }
-  const menuPlacement = { suggestTop: false, spaceAbove: 0, spaceBelow: 0 };
   function buildMenuProps(rect, menuWrapperProps) {
+    const effectiveAngle = (($.get(annotationRotation) + $$props.rotation * 90) % 360 + 360) % 360;
+    const handleNearMenuSide = $.get(effectiveIsRotatable) && effectiveAngle > 90 && effectiveAngle < 270;
     return {
       context: buildContext(),
       selected: $$props.isSelected,
       rect,
-      placement: menuPlacement,
+      placement: { suggestTop: handleNearMenuSide, spaceAbove: 0, spaceBelow: 0 },
       menuWrapperProps
     };
   }
+  function portalToBody(node) {
+    document.body.appendChild(node);
+    return {
+      destroy() {
+        if (node.parentNode === document.body) {
+          document.body.removeChild(node);
+        }
+      }
+    };
+  }
   var div = root$c();
   var div_1 = $.child(div);
   $.attribute_effect(div_1, () => ({
-    ...$.get(effectiveIsDraggable) && $$props.isSelected ? interactionHandles.dragProps : {},
     style: $$props.style || "",
     class: propsClass(),
     ...restProps,
@@ -289,23 +428,182 @@ function AnnotationContainer($$anchor, $$props) {
       position: "absolute",
       left: `${$.get(currentObject).rect.origin.x * $$props.scale}px`,
       top: `${$.get(currentObject).rect.origin.y * $$props.scale}px`,
-      width: `${$.get(currentObject).rect.size.width * $$props.scale}px`,
-      height: `${$.get(currentObject).rect.size.height * $$props.scale}px`,
-      outline: $.get(showOutline) ? `1px solid ${selectionOutlineColor()}` : "none",
-      "outline-offset": $.get(showOutline) ? `${outlineOffset()}px` : "0px",
-      "pointer-events": $$props.isSelected && !isMultiSelected() ? "auto" : "none",
-      "touch-action": "none",
-      cursor: $$props.isSelected && $.get(effectiveIsDraggable) ? "move" : "default",
+      width: `${$.get(aabbWidth) ?? ""}px`,
+      height: `${$.get(aabbHeight) ?? ""}px`,
+      "pointer-events": "none",
       "z-index": zIndex()
     }
   }));
-  var node = $.child(div_1);
+  var node_1 = $.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var fragment = $.comment();
-      var node_1 = $.first_child(fragment);
-      $.snippet(node_1, () => $$props.customAnnotationRenderer ?? $.noop, () => ({
-        annotation: $.get(currentObject),
+      var fragment = root_1$c();
+      var div_2 = $.first_child(fragment);
+      let styles;
+      var div_3 = $.sibling(div_2, 2);
+      let styles_1;
+      var div_4 = $.sibling(div_3, 2);
+      let styles_2;
+      $.template_effect(() => {
+        styles = $.set_style(div_2, "", styles, {
+          position: "absolute",
+          left: `${$.get(centerX) - $.get(guideLength) / 2}px`,
+          top: `${$.get(centerY) ?? ""}px`,
+          width: `${$.get(guideLength) ?? ""}px`,
+          height: "1px",
+          "background-color": $.get(ROTATION_CONNECTOR_COLOR),
+          opacity: "0.35",
+          "pointer-events": "none"
+        });
+        styles_1 = $.set_style(div_3, "", styles_1, {
+          position: "absolute",
+          left: `${$.get(centerX) ?? ""}px`,
+          top: `${$.get(centerY) - $.get(guideLength) / 2}px`,
+          width: "1px",
+          height: `${$.get(guideLength) ?? ""}px`,
+          "background-color": $.get(ROTATION_CONNECTOR_COLOR),
+          opacity: "0.35",
+          "pointer-events": "none"
+        });
+        styles_2 = $.set_style(div_4, "", styles_2, {
+          position: "absolute",
+          left: `${$.get(centerX) - $.get(guideLength) / 2}px`,
+          top: `${$.get(centerY) ?? ""}px`,
+          width: `${$.get(guideLength) ?? ""}px`,
+          height: "1px",
+          "transform-origin": "center center",
+          transform: `rotate(${$.get(annotationRotation) ?? ""}deg)`,
+          "background-color": $.get(ROTATION_CONNECTOR_COLOR),
+          opacity: "0.8",
+          "pointer-events": "none"
+        });
+      });
+      $.append($$anchor2, fragment);
+    };
+    $.if(node_1, ($$render) => {
+      if ($.get(rotationActive)) $$render(consequent);
+    });
+  }
+  var node_2 = $.sibling(node_1, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var fragment_1 = $.comment();
+      var node_3 = $.first_child(fragment_1);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var div_5 = root_3$1();
+          div_5.__pointermove = (e) => {
+            if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
+          };
+          var node_4 = $.child(div_5);
+          {
+            let $0 = $.derived(() => ({
+              ...$.get(rotationHandle).handle,
+              backgroundColor: $.get(ROTATION_COLOR),
+              iconColor: $.get(ROTATION_ICON_COLOR),
+              connectorStyle: `${$.get(rotationHandle).connector.style}; background-color: ${$.get(ROTATION_CONNECTOR_COLOR)}; opacity: ${$.get(rotationActive) ? 0 : 1};`,
+              showConnector: $.get(SHOW_CONNECTOR),
+              opacity: $.get(rotationActive) ? 0 : 1,
+              border: {
+                color: $.get(ROTATION_BORDER_COLOR),
+                width: $.get(ROTATION_BORDER_WIDTH),
+                style: $.get(ROTATION_BORDER_STYLE)
+              }
+            }));
+            $.snippet(node_4, () => $$props.rotationUI.component, () => $.get($0));
+          }
+          $.reset(div_5);
+          $.event("pointerenter", div_5, () => $.set(isHandleHovered, true));
+          $.event("pointerleave", div_5, () => {
+            $.set(isHandleHovered, false);
+            $.set(cursorScreen, null);
+          });
+          $.append($$anchor3, div_5);
+        };
+        var alternate = ($$anchor3) => {
+          var div_6 = root_4$2();
+          div_6.__pointermove = (e) => {
+            if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
+          };
+          var node_5 = $.child(div_6);
+          {
+            var consequent_2 = ($$anchor4) => {
+              var div_7 = root_5$2();
+              $.template_effect(() => $.set_style(div_7, `${$.get(rotationHandle).connector.style ?? ""}; background-color: ${$.get(ROTATION_CONNECTOR_COLOR) ?? ""}; opacity: ${$.get(rotationActive) ? 0 : 1};`));
+              $.append($$anchor4, div_7);
+            };
+            $.if(node_5, ($$render) => {
+              if ($.get(SHOW_CONNECTOR)) $$render(consequent_2);
+            });
+          }
+          var div_8 = $.sibling(node_5, 2);
+          $.attribute_effect(div_8, () => ({
+            ...{
+              onpointerdown: $.get(rotationHandle).handle.onpointerdown,
+              onpointermove: $.get(rotationHandle).handle.onpointermove,
+              onpointerup: $.get(rotationHandle).handle.onpointerup,
+              onpointercancel: $.get(rotationHandle).handle.onpointercancel
+            },
+            style: `${$.get(rotationHandle).handle.style ?? ""}; background-color: ${$.get(ROTATION_COLOR) ?? ""}; border: ${$.get(ROTATION_BORDER_WIDTH) ?? ""}px ${$.get(ROTATION_BORDER_STYLE) ?? ""} ${$.get(ROTATION_BORDER_COLOR) ?? ""}; box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: auto; opacity: ${$.get(rotationActive) ? 0 : 1};`
+          }));
+          var svg = $.child(div_8);
+          $.reset(div_8);
+          $.reset(div_6);
+          $.template_effect(
+            ($0, $1) => {
+              $.set_attribute(svg, "width", $0);
+              $.set_attribute(svg, "height", $1);
+              $.set_attribute(svg, "stroke", $.get(ROTATION_ICON_COLOR));
+            },
+            [
+              () => Math.round($.get(ROTATION_SIZE) * 0.6),
+              () => Math.round($.get(ROTATION_SIZE) * 0.6)
+            ]
+          );
+          $.event("pointerenter", div_6, () => $.set(isHandleHovered, true));
+          $.event("pointerleave", div_6, () => {
+            $.set(isHandleHovered, false);
+            $.set(cursorScreen, null);
+          });
+          $.append($$anchor3, div_6);
+        };
+        $.if(node_3, ($$render) => {
+          var _a;
+          if ((_a = $$props.rotationUI) == null ? void 0 : _a.component) $$render(consequent_1);
+          else $$render(alternate, false);
+        });
+      }
+      $.append($$anchor2, fragment_1);
+    };
+    $.if(node_2, ($$render) => {
+      if ($$props.isSelected && $.get(effectiveIsRotatable) && $.get(rotationHandle)) $$render(consequent_3);
+    });
+  }
+  var div_9 = $.sibling(node_2, 2);
+  $.attribute_effect(div_9, () => ({
+    ...$.get(effectiveIsDraggable) && $$props.isSelected ? interactionHandles.dragProps : {},
+    [$.STYLE]: {
+      position: "absolute",
+      left: `${$.get(innerLeft) ?? ""}px`,
+      top: `${$.get(innerTop) ?? ""}px`,
+      width: `${$.get(innerWidth) ?? ""}px`,
+      height: `${$.get(innerHeight) ?? ""}px`,
+      transform: $.get(annotationRotation) !== 0 ? `rotate(${$.get(annotationRotation)}deg)` : void 0,
+      "transform-origin": $.get(innerTransformOrigin),
+      outline: $.get(showOutline) ? `${$.get(outlineWidth)}px ${$.get(outlineStyleVal)} ${$.get(outlineColor)}` : "none",
+      "outline-offset": $.get(showOutline) ? `${$.get(outlineOff)}px` : "0px",
+      "pointer-events": $$props.isSelected && !isMultiSelected() ? "auto" : "none",
+      "touch-action": "none",
+      cursor: $$props.isSelected && $.get(effectiveIsDraggable) ? "move" : "default"
+    }
+  }));
+  var node_6 = $.child(div_9);
+  {
+    var consequent_4 = ($$anchor2) => {
+      var fragment_2 = $.comment();
+      var node_7 = $.first_child(fragment_2);
+      $.snippet(node_7, () => $$props.customAnnotationRenderer ?? $.noop, () => ({
+        annotation: $.get(childObject),
         children: $$props.children,
         isSelected: $$props.isSelected,
         scale: $$props.scale,
@@ -315,172 +613,173 @@ function AnnotationContainer($$anchor, $$props) {
         pageIndex: $$props.pageIndex,
         onSelect: $$props.onSelect
       }));
-      $.append($$anchor2, fragment);
+      $.append($$anchor2, fragment_2);
     };
-    var alternate = ($$anchor2) => {
-      var fragment_1 = $.comment();
-      var node_2 = $.first_child(fragment_1);
-      $.snippet(node_2, () => $$props.children, () => $.get(currentObject));
-      $.append($$anchor2, fragment_1);
+    var alternate_1 = ($$anchor2) => {
+      var fragment_3 = $.comment();
+      var node_8 = $.first_child(fragment_3);
+      $.snippet(node_8, () => $$props.children, () => $.get(childObject));
+      $.append($$anchor2, fragment_3);
     };
-    $.if(node, ($$render) => {
-      if ($$props.customAnnotationRenderer) $$render(consequent);
-      else $$render(alternate, false);
+    $.if(node_6, ($$render) => {
+      if ($$props.customAnnotationRenderer) $$render(consequent_4);
+      else $$render(alternate_1, false);
     });
   }
-  var node_3 = $.sibling(node, 2);
+  var node_9 = $.sibling(node_6, 2);
   {
-    var consequent_2 = ($$anchor2) => {
-      var fragment_2 = $.comment();
-      var node_4 = $.first_child(fragment_2);
-      $.each(node_4, 17, () => $.get(resizeHandles), ({ key, style: handleStyle, ...hProps }) => key, ($$anchor3, $$item) => {
+    var consequent_6 = ($$anchor2) => {
+      var fragment_4 = $.comment();
+      var node_10 = $.first_child(fragment_4);
+      $.each(node_10, 17, () => $.get(resizeHandles), ({ key, style: handleStyle, ...hProps }) => key, ($$anchor3, $$item) => {
         let handleStyle = () => $.get($$item).style;
         let hProps = () => $.exclude_from_object($.get($$item), ["key", "style"]);
-        var fragment_3 = $.comment();
-        var node_5 = $.first_child(fragment_3);
+        var fragment_5 = $.comment();
+        var node_11 = $.first_child(fragment_5);
         {
-          var consequent_1 = ($$anchor4) => {
-            const Component = $.derived(() => $$props.resizeUI.component);
-            var fragment_4 = $.comment();
-            var node_6 = $.first_child(fragment_4);
-            $.component(node_6, () => $.get(Component), ($$anchor5, Component_1) => {
-              Component_1($$anchor5, $.spread_props(hProps, {
-                get backgroundColor() {
-                  return $.get(HANDLE_COLOR);
-                }
+          var consequent_5 = ($$anchor4) => {
+            var fragment_6 = $.comment();
+            var node_12 = $.first_child(fragment_6);
+            {
+              let $0 = $.derived(() => ({
+                ...hProps(),
+                style: handleStyle(),
+                backgroundColor: $.get(HANDLE_COLOR)
               }));
-            });
-            $.append($$anchor4, fragment_4);
+              $.snippet(node_12, () => $$props.resizeUI.component, () => $.get($0));
+            }
+            $.append($$anchor4, fragment_6);
           };
-          var alternate_1 = ($$anchor4) => {
-            var div_2 = root_6$1();
-            $.attribute_effect(div_2, () => ({
+          var alternate_2 = ($$anchor4) => {
+            var div_10 = root_11$2();
+            $.attribute_effect(div_10, () => ({
               ...hProps(),
               style: `${handleStyle() ?? ""}; background-color: ${$.get(HANDLE_COLOR) ?? ""};`
             }));
-            $.append($$anchor4, div_2);
+            $.append($$anchor4, div_10);
           };
-          $.if(node_5, ($$render) => {
+          $.if(node_11, ($$render) => {
             var _a;
-            if ((_a = $$props.resizeUI) == null ? void 0 : _a.component) $$render(consequent_1);
-            else $$render(alternate_1, false);
+            if ((_a = $$props.resizeUI) == null ? void 0 : _a.component) $$render(consequent_5);
+            else $$render(alternate_2, false);
           });
         }
-        $.append($$anchor3, fragment_3);
+        $.append($$anchor3, fragment_5);
       });
-      $.append($$anchor2, fragment_2);
+      $.append($$anchor2, fragment_4);
     };
-    $.if(node_3, ($$render) => {
-      if ($$props.isSelected && $.get(effectiveIsResizable)) $$render(consequent_2);
+    $.if(node_9, ($$render) => {
+      if ($$props.isSelected && $.get(effectiveIsResizable) && !$.get(rotationActive)) $$render(consequent_6);
     });
   }
-  var node_7 = $.sibling(node_3, 2);
+  var node_13 = $.sibling(node_9, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var fragment_5 = $.comment();
-      var node_8 = $.first_child(fragment_5);
-      $.each(node_8, 17, () => $.get(vertexHandles), ({ key, style: vertexStyle, ...vProps }) => key, ($$anchor3, $$item) => {
+    var consequent_8 = ($$anchor2) => {
+      var fragment_7 = $.comment();
+      var node_14 = $.first_child(fragment_7);
+      $.each(node_14, 17, () => $.get(vertexHandles), ({ key, style: vertexStyle, ...vProps }) => key, ($$anchor3, $$item) => {
         let vertexStyle = () => $.get($$item).style;
         let vProps = () => $.exclude_from_object($.get($$item), ["key", "style"]);
-        var fragment_6 = $.comment();
-        var node_9 = $.first_child(fragment_6);
+        var fragment_8 = $.comment();
+        var node_15 = $.first_child(fragment_8);
         {
-          var consequent_3 = ($$anchor4) => {
-            const Component = $.derived(() => $$props.vertexUI.component);
-            var fragment_7 = $.comment();
-            var node_10 = $.first_child(fragment_7);
-            $.component(node_10, () => $.get(Component), ($$anchor5, Component_2) => {
-              Component_2($$anchor5, $.spread_props(vProps, {
-                get backgroundColor() {
-                  return $.get(VERTEX_COLOR);
-                }
+          var consequent_7 = ($$anchor4) => {
+            var fragment_9 = $.comment();
+            var node_16 = $.first_child(fragment_9);
+            {
+              let $0 = $.derived(() => ({
+                ...vProps(),
+                style: vertexStyle(),
+                backgroundColor: $.get(VERTEX_COLOR)
               }));
-            });
-            $.append($$anchor4, fragment_7);
+              $.snippet(node_16, () => $$props.vertexUI.component, () => $.get($0));
+            }
+            $.append($$anchor4, fragment_9);
           };
-          var alternate_2 = ($$anchor4) => {
-            var div_3 = root_10();
-            $.attribute_effect(div_3, () => ({
+          var alternate_3 = ($$anchor4) => {
+            var div_11 = root_15();
+            $.attribute_effect(div_11, () => ({
               ...vProps(),
               style: `${vertexStyle() ?? ""}; background-color: ${$.get(VERTEX_COLOR) ?? ""};`
             }));
-            $.append($$anchor4, div_3);
+            $.append($$anchor4, div_11);
           };
-          $.if(node_9, ($$render) => {
+          $.if(node_15, ($$render) => {
             var _a;
-            if ((_a = $$props.vertexUI) == null ? void 0 : _a.component) $$render(consequent_3);
-            else $$render(alternate_2, false);
+            if ((_a = $$props.vertexUI) == null ? void 0 : _a.component) $$render(consequent_7);
+            else $$render(alternate_3, false);
           });
         }
-        $.append($$anchor3, fragment_6);
+        $.append($$anchor3, fragment_8);
       });
-      $.append($$anchor2, fragment_5);
+      $.append($$anchor2, fragment_7);
     };
-    $.if(node_7, ($$render) => {
-      if ($$props.isSelected && permissions.canModifyAnnotations && !isMultiSelected()) $$render(consequent_4);
+    $.if(node_13, ($$render) => {
+      if ($$props.isSelected && permissions.canModifyAnnotations && !isMultiSelected() && !$.get(rotationActive)) $$render(consequent_8);
     });
   }
-  $.reset(div_1);
-  $.action(div_1, ($$node, $$action_arg) => {
+  $.reset(div_9);
+  $.action(div_9, ($$node, $$action_arg) => {
     var _a;
     return (_a = doublePress) == null ? void 0 : _a($$node, $$action_arg);
   }, () => ({ onDouble: $.get(guardedOnDoubleClick) }));
-  var node_11 = $.sibling(div_1, 2);
+  $.reset(div_1);
+  var node_17 = $.sibling(div_1, 2);
   {
-    var consequent_8 = ($$anchor2) => {
+    var consequent_12 = ($$anchor2) => {
       {
         const children = ($$anchor3, $$arg0) => {
           let rect = () => $$arg0 == null ? void 0 : $$arg0().rect;
           let menuWrapperProps = () => $$arg0 == null ? void 0 : $$arg0().menuWrapperProps;
           const menuProps = $.derived(() => buildMenuProps(rect(), menuWrapperProps()));
-          var fragment_9 = $.comment();
-          var node_12 = $.first_child(fragment_9);
+          var fragment_11 = $.comment();
+          var node_18 = $.first_child(fragment_11);
           {
-            var consequent_6 = ($$anchor4) => {
+            var consequent_10 = ($$anchor4) => {
               const result = $.derived(() => $$props.selectionMenu($.get(menuProps)));
-              var fragment_10 = $.comment();
-              var node_13 = $.first_child(fragment_10);
+              var fragment_12 = $.comment();
+              var node_19 = $.first_child(fragment_12);
               {
-                var consequent_5 = ($$anchor5) => {
-                  var fragment_11 = $.comment();
-                  var node_14 = $.first_child(fragment_11);
-                  $.component(node_14, () => $.get(result).component, ($$anchor6, result_component) => {
+                var consequent_9 = ($$anchor5) => {
+                  var fragment_13 = $.comment();
+                  var node_20 = $.first_child(fragment_13);
+                  $.component(node_20, () => $.get(result).component, ($$anchor6, result_component) => {
                     result_component($$anchor6, $.spread_props(() => $.get(result).props));
                   });
-                  $.append($$anchor5, fragment_11);
+                  $.append($$anchor5, fragment_13);
                 };
-                $.if(node_13, ($$render) => {
-                  if ($.get(result)) $$render(consequent_5);
+                $.if(node_19, ($$render) => {
+                  if ($.get(result)) $$render(consequent_9);
                 });
               }
-              $.append($$anchor4, fragment_10);
+              $.append($$anchor4, fragment_12);
             };
-            var alternate_3 = ($$anchor4) => {
-              var fragment_12 = $.comment();
-              var node_15 = $.first_child(fragment_12);
+            var alternate_4 = ($$anchor4) => {
+              var fragment_14 = $.comment();
+              var node_21 = $.first_child(fragment_14);
               {
-                var consequent_7 = ($$anchor5) => {
-                  var fragment_13 = $.comment();
-                  var node_16 = $.first_child(fragment_13);
-                  $.snippet(node_16, () => $$props.selectionMenuSnippet, () => $.get(menuProps));
-                  $.append($$anchor5, fragment_13);
+                var consequent_11 = ($$anchor5) => {
+                  var fragment_15 = $.comment();
+                  var node_22 = $.first_child(fragment_15);
+                  $.snippet(node_22, () => $$props.selectionMenuSnippet, () => $.get(menuProps));
+                  $.append($$anchor5, fragment_15);
                 };
                 $.if(
-                  node_15,
+                  node_21,
                   ($$render) => {
-                    if ($$props.selectionMenuSnippet) $$render(consequent_7);
+                    if ($$props.selectionMenuSnippet) $$render(consequent_11);
                   },
                   true
                 );
               }
-              $.append($$anchor4, fragment_12);
+              $.append($$anchor4, fragment_14);
             };
-            $.if(node_12, ($$render) => {
-              if ($$props.selectionMenu) $$render(consequent_6);
-              else $$render(alternate_3, false);
+            $.if(node_18, ($$render) => {
+              if ($$props.selectionMenu) $$render(consequent_10);
+              else $$render(alternate_4, false);
             });
           }
-          $.append($$anchor3, fragment_9);
+          $.append($$anchor3, fragment_11);
         };
         let $0 = $.derived(() => ({
           origin: {
@@ -504,14 +803,51 @@ function AnnotationContainer($$anchor, $$props) {
         });
       }
     };
-    $.if(node_11, ($$render) => {
-      if ($.get(shouldShowMenu)) $$render(consequent_8);
+    $.if(node_17, ($$render) => {
+      if ($.get(shouldShowMenu)) $$render(consequent_12);
+    });
+  }
+  var node_23 = $.sibling(node_17, 2);
+  {
+    var consequent_13 = ($$anchor2) => {
+      var div_12 = root_22();
+      var div_13 = $.child(div_12);
+      let styles_3;
+      var text = $.child(div_13);
+      $.reset(div_13);
+      $.reset(div_12);
+      $.action(div_12, ($$node) => portalToBody == null ? void 0 : portalToBody($$node));
+      $.template_effect(
+        ($0) => {
+          styles_3 = $.set_style(div_13, "", styles_3, {
+            position: "fixed",
+            left: `${$.get(cursorScreen).x + 16}px`,
+            top: `${$.get(cursorScreen).y - 16}px`,
+            background: "rgba(0,0,0,0.8)",
+            color: "#fff",
+            padding: "4px 8px",
+            "border-radius": "4px",
+            "font-size": "12px",
+            "font-family": "monospace",
+            "pointer-events": "none",
+            "z-index": "10000",
+            "white-space": "nowrap"
+          });
+          $.set_text(text, `${$0 ?? ""}°`);
+        },
+        [() => $.get(normalizedRotationDisplay).toFixed(0)]
+      );
+      $.append($$anchor2, div_12);
+    };
+    $.if(node_23, ($$render) => {
+      if (($.get(rotationActive) || $.get(isHandleHovered)) && $.get(cursorScreen)) $$render(consequent_13);
     });
   }
   $.reset(div);
   $.append($$anchor, div);
   $.pop();
 }
+$.delegate(["pointermove"]);
 var root_1$b = $.from_html(`<div></div>`);
 function Highlight($$anchor, $$props) {
   $.push($$props, true);
@@ -904,7 +1240,7 @@ function Circle($$anchor, $$props) {
 }
 $.delegate(["pointerdown", "touchstart"]);
 var root_1$6 = $.from_svg(`<path></path>`);
-var root_2$4 = $.from_svg(`<path></path>`);
+var root_2$5 = $.from_svg(`<path></path>`);
 var root$8 = $.from_svg(`<svg><line></line><!><!></svg>`);
 function Line($$anchor, $$props) {
   $.push($$props, true);
@@ -974,7 +1310,7 @@ function Line($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var path_1 = root_2$4();
+      var path_1 = root_2$5();
       path_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1028,7 +1364,7 @@ function Line($$anchor, $$props) {
 }
 $.delegate(["pointerdown", "touchstart"]);
 var root_1$5 = $.from_svg(`<path></path>`);
-var root_2$3 = $.from_svg(`<path></path>`);
+var root_2$4 = $.from_svg(`<path></path>`);
 var root$7 = $.from_svg(`<svg><path></path><!><!></svg>`);
 function Polyline($$anchor, $$props) {
   $.push($$props, true);
@@ -1117,7 +1453,7 @@ function Polyline($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var path_2 = root_2$3();
+      var path_2 = root_2$4();
       path_2.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1168,7 +1504,7 @@ function Polyline($$anchor, $$props) {
 }
 $.delegate(["pointerdown", "touchstart"]);
 var root_1$4 = $.from_svg(`<path fill="none"></path>`);
-var root_2$2 = $.from_svg(`<rect></rect>`);
+var root_2$3 = $.from_svg(`<rect></rect>`);
 var root$6 = $.from_svg(`<svg><path></path><!><!></svg>`);
 function Polygon($$anchor, $$props) {
   $.push($$props, true);
@@ -1223,7 +1559,7 @@ function Polygon($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var rect_1 = root_2$2();
+      var rect_1 = root_2$3();
       $.set_attribute(rect_1, "opacity", 0.4);
       $.template_effect(() => {
         $.set_attribute(rect_1, "x", $.get(localPts)[0].x - handleSize() / $$props.scale / 2);
@@ -1263,7 +1599,7 @@ function Polygon($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root$5 = $.from_html(`<div><span tabindex="0"> </span></div>`);
+var root$5 = $.from_html(`<div role="button"><span role="textbox" tabindex="0"> </span></div>`);
 function FreeText($$anchor, $$props) {
   $.push($$props, true);
   const annotationCapability = useAnnotationCapability();
@@ -1304,7 +1640,9 @@ function FreeText($$anchor, $$props) {
   const outerW = $.derived(() => $$props.annotation.object.rect.size.width * $$props.scale);
   const outerH = $.derived(() => $$props.annotation.object.rect.size.height * $$props.scale);
   const justify = $.derived(() => $$props.annotation.object.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : $$props.annotation.object.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end");
+  const fontCss = $.derived(() => standardFontCssProperties($$props.annotation.object.fontFamily));
   var div = root$5();
+  $.set_attribute(div, "tabindex", -1);
   div.__pointerdown = function(...$$args) {
     var _a;
     (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1341,7 +1679,9 @@ function FreeText($$anchor, $$props) {
         "justify-content": $.get(justify),
         color: $$props.annotation.object.fontColor,
         "font-size": `${$.get(adjustedFontPx)}px`,
-        "font-family": standardFontCss($$props.annotation.object.fontFamily),
+        "font-family": $.get(fontCss).fontFamily,
+        "font-weight": $.get(fontCss).fontWeight,
+        "font-style": $.get(fontCss).fontStyle,
         "text-align": textAlignmentToCss($$props.annotation.object.textAlign),
         "background-color": $$props.annotation.object.color ?? $$props.annotation.object.backgroundColor,
         opacity: $$props.annotation.object.opacity,
@@ -1364,7 +1704,7 @@ $.delegate(["pointerdown", "touchstart"]);
 var root_1$3 = $.from_html(`<img/>`);
 function RenderAnnotation($$anchor, $$props) {
   $.push($$props, true);
-  let scaleFactor = $.prop($$props, "scaleFactor", 3, 1), restProps = $.rest_props($$props, [
+  let scaleFactor = $.prop($$props, "scaleFactor", 3, 1), unrotated = $.prop($$props, "unrotated", 3, false), restProps = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -1372,6 +1712,7 @@ function RenderAnnotation($$anchor, $$props) {
     "pageIndex",
     "annotation",
     "scaleFactor",
+    "unrotated",
     "style"
   ]);
   const annotationCapability = useAnnotationCapability();
@@ -1386,7 +1727,11 @@ function RenderAnnotation($$anchor, $$props) {
       const task = $.get(annotationProvides).renderAnnotation({
         pageIndex: $$props.pageIndex,
         annotation: deepToRaw($$props.annotation),
-        options: { scaleFactor: scaleFactor(), dpr: window.devicePixelRatio }
+        options: {
+          scaleFactor: scaleFactor(),
+          dpr: window.devicePixelRatio,
+          unrotated: unrotated()
+        }
       });
       task.wait(
         (blob) => {
@@ -1438,14 +1783,16 @@ function RenderAnnotation($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root$4 = $.from_html(`<div><!></div>`);
+var root$4 = $.from_html(`<div role="button"><!></div>`);
 function Stamp($$anchor, $$props) {
   $.push($$props, true);
   let annotationProp = $.derived(() => ({
     ...$$props.annotation.object,
     id: $$props.annotation.object.id
   }));
+  const unrotated = $.derived(() => !!$$props.annotation.object.rotation && !!$$props.annotation.object.unrotatedRect);
   var div = root$4();
+  $.set_attribute(div, "tabindex", -1);
   let styles;
   div.__pointerdown = function(...$$args) {
     var _a;
@@ -1468,6 +1815,9 @@ function Stamp($$anchor, $$props) {
     },
     get scaleFactor() {
       return $$props.scale;
+    },
+    get unrotated() {
+      return $.get(unrotated);
     }
   });
   $.reset(div);
@@ -1480,7 +1830,7 @@ function Stamp($$anchor, $$props) {
 }
 $.delegate(["pointerdown", "touchstart"]);
 var root_1$2 = $.from_svg(`<line></line>`);
-var root_2$1 = $.from_svg(`<rect fill="transparent"></rect>`);
+var root_2$2 = $.from_svg(`<rect fill="transparent"></rect>`);
 var root$3 = $.from_svg(`<svg><rect fill="transparent"></rect><!></svg>`);
 function Link($$anchor, $$props) {
   $.push($$props, true);
@@ -1530,7 +1880,7 @@ function Link($$anchor, $$props) {
       $.append($$anchor2, line);
     };
     var alternate = ($$anchor2) => {
-      var rect_2 = root_2$1();
+      var rect_2 = root_2$2();
       $.set_style(rect_2, "", {}, { "pointer-events": "none" });
       $.template_effect(
         ($0, $1) => {
@@ -1574,18 +1924,27 @@ function Link($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root_5$1 = $.from_html(`<div></div>`);
-var root_1$1 = $.from_html(`<div data-group-selection-box="" data-no-interaction=""><div><!></div> <!></div>`);
+var root_2$1 = $.from_html(`<div></div> <div></div> <div></div>`, 1);
+var root_4$1 = $.from_html(`<div style="display: contents;"><!></div>`);
+var root_6$1 = $.from_html(`<div></div>`);
+var root_5$1 = $.from_html(`<div style="display: contents;"><!> <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path></svg></div></div>`);
+var root_10 = $.from_html(`<div></div>`);
+var root_11$1 = $.from_html(`<div><div> </div></div>`);
+var root_1$1 = $.from_html(`<div data-group-selection-box="" data-no-interaction=""><div><!> <!> <div><!></div></div> <!> <!></div>`);
 function GroupSelectionBox($$anchor, $$props) {
   $.push($$props, true);
-  let selectionOutlineColor = $.prop($$props, "selectionOutlineColor", 3, "#007ACC"), outlineOffset = $.prop($$props, "outlineOffset", 3, 2), zIndex = $.prop($$props, "zIndex", 3, 100);
+  let isRotatable = $.prop($$props, "isRotatable", 3, true), lockAspectRatio = $.prop($$props, "lockAspectRatio", 3, false), zIndex = $.prop($$props, "zIndex", 3, 2);
   const annotationPlugin = useAnnotationPlugin();
   const permissions = useDocumentPermissions(() => $$props.documentId);
   let gestureBase = $.state(null);
   let isDraggingRef = $.state(false);
   let isResizingRef = $.state(false);
+  let liveRotation = $.state(null);
+  let cursorScreen = $.state(null);
+  let isHandleHovered = $.state(false);
   const effectiveIsDraggable = $.derived(() => permissions.canModifyAnnotations && $$props.isDraggable);
   const effectiveIsResizable = $.derived(() => permissions.canModifyAnnotations && $$props.isResizable);
+  const effectiveIsRotatable = $.derived(() => permissions.canModifyAnnotations && isRotatable());
   function getGroupBox() {
     const rects = $$props.selectedAnnotations.map((ta) => ta.object.rect);
     return boundingRectOrEmpty(rects);
@@ -1600,6 +1959,17 @@ function GroupSelectionBox($$anchor, $$props) {
       }
     }
   });
+  $.user_effect(() => {
+    const plugin = annotationPlugin.plugin;
+    if (!plugin) return;
+    const unsubscribe = plugin.onRotateChange((event) => {
+      if (event.documentId !== $$props.documentId) return;
+      if (event.type === "end" || event.type === "cancel") {
+        $.set(liveRotation, null);
+      }
+    });
+    return unsubscribe;
+  });
   const HANDLE_COLOR = $.derived(() => {
     var _a;
     return ((_a = $$props.resizeUI) == null ? void 0 : _a.color) ?? "#007ACC";
@@ -1608,6 +1978,66 @@ function GroupSelectionBox($$anchor, $$props) {
     var _a;
     return ((_a = $$props.resizeUI) == null ? void 0 : _a.size) ?? 12;
   });
+  const ROTATION_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.color) ?? "white";
+  });
+  const ROTATION_CONNECTOR_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.connectorColor) ?? "#007ACC";
+  });
+  const ROTATION_SIZE = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.size) ?? 32;
+  });
+  const ROTATION_MARGIN = $.derived(() => {
+    var _a;
+    return (_a = $$props.rotationUI) == null ? void 0 : _a.margin;
+  });
+  const ROTATION_ICON_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.iconColor) ?? "#007ACC";
+  });
+  const SHOW_CONNECTOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.rotationUI) == null ? void 0 : _a.showConnector) ?? false;
+  });
+  const ROTATION_BORDER_COLOR = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $$props.rotationUI) == null ? void 0 : _a.border) == null ? void 0 : _b.color) ?? "#007ACC";
+  });
+  const ROTATION_BORDER_WIDTH = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $$props.rotationUI) == null ? void 0 : _a.border) == null ? void 0 : _b.width) ?? 1;
+  });
+  const ROTATION_BORDER_STYLE = $.derived(() => {
+    var _a, _b;
+    return ((_b = (_a = $$props.rotationUI) == null ? void 0 : _a.border) == null ? void 0 : _b.style) ?? "solid";
+  });
+  const outlineColor = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.color) ?? $$props.selectionOutlineColor ?? "#007ACC";
+  });
+  const outlineStyleVal = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.style) ?? "dashed";
+  });
+  const outlineWidthVal = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.width) ?? 2;
+  });
+  const outlineOff = $.derived(() => {
+    var _a;
+    return ((_a = $$props.selectionOutline) == null ? void 0 : _a.offset) ?? $$props.outlineOffset ?? 2;
+  });
+  const groupRotationDisplay = $.derived(() => $.get(liveRotation) ?? 0);
+  const rotationActive = $.derived(() => $.get(liveRotation) !== null);
+  const normalizedRotationDisplay = $.derived(() => Number.isFinite($.get(groupRotationDisplay)) ? Math.round($.get(groupRotationDisplay) * 10) / 10 : 0);
+  const groupBoxWidth = $.derived(() => $.get(previewGroupBox).size.width * $$props.scale);
+  const groupBoxHeight = $.derived(() => $.get(previewGroupBox).size.height * $$props.scale);
+  const groupCenterX = $.derived(() => $.get(groupBoxWidth) / 2);
+  const groupCenterY = $.derived(() => $.get(groupBoxHeight) / 2);
+  const groupGuideLength = $.derived(() => Math.max(300, Math.max($.get(groupBoxWidth), $.get(groupBoxHeight)) + 80));
   const interactionHandles = useInteractionHandles(() => ({
     controller: {
       element: $.get(previewGroupBox),
@@ -1616,12 +2046,12 @@ function GroupSelectionBox($$anchor, $$props) {
         minHeight: 20,
         boundingBox: { width: $$props.pageWidth, height: $$props.pageHeight }
       },
-      maintainAspectRatio: false,
+      maintainAspectRatio: lockAspectRatio(),
       pageRotation: $$props.rotation,
       scale: $$props.scale,
       enabled: 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.plugin) return;
         const plugin = annotationPlugin.plugin;
@@ -1646,6 +2076,29 @@ function GroupSelectionBox($$anchor, $$props) {
             });
           }
         }
+        if (transformType === "rotate") {
+          if (!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) $.set(cursorScreen, { x: cursorPos.clientX, y: cursorPos.clientY }, true);
+          if (event.state === "start") {
+            $.set(liveRotation, cursorAngle, true);
+            plugin.startRotation($$props.documentId, {
+              annotationIds: ids,
+              cursorAngle,
+              rotationCenter: (_e = event.transformData.metadata) == null ? void 0 : _e.rotationCenter
+            });
+          } else if (event.state === "move") {
+            $.set(liveRotation, cursorAngle, true);
+            plugin.updateRotation($$props.documentId, cursorAngle, (_f = event.transformData.metadata) == null ? void 0 : _f.rotationDelta);
+          } else if (event.state === "end") {
+            $.set(liveRotation, null);
+            $.set(cursorScreen, null);
+            plugin.commitRotation($$props.documentId);
+          }
+          return;
+        }
         const base = $.get(gestureBase) ?? getGroupBox();
         if (isMove && event.transformData.changes.rect) {
           const newRect = event.transformData.changes.rect;
@@ -1684,15 +2137,24 @@ function GroupSelectionBox($$anchor, $$props) {
     },
     resizeUI: {
       handleSize: $.get(HANDLE_SIZE),
-      spacing: outlineOffset(),
+      spacing: $.get(outlineOff),
       offsetMode: "outside",
-      includeSides: true,
+      includeSides: !lockAspectRatio(),
       zIndex: zIndex() + 1
     },
     vertexUI: { vertexSize: 0, zIndex: zIndex() },
-    includeVertices: false
+    rotationUI: {
+      handleSize: $.get(ROTATION_SIZE),
+      margin: $.get(ROTATION_MARGIN),
+      zIndex: zIndex() + 2,
+      showConnector: $.get(SHOW_CONNECTOR)
+    },
+    includeVertices: false,
+    includeRotation: $.get(effectiveIsRotatable),
+    currentRotation: $.get(liveRotation) ?? 0
   }));
   const resizeHandles = $.derived(() => interactionHandles.resize);
+  const rotationHandle = $.derived(() => interactionHandles.rotation);
   const shouldShowMenu = $.derived(() => !!$$props.groupSelectionMenu || !!$$props.groupSelectionMenuSnippet);
   function buildContext() {
     return {
@@ -1702,134 +2164,334 @@ function GroupSelectionBox($$anchor, $$props) {
     };
   }
   function buildMenuProps(rect, menuWrapperProps) {
+    const effectiveAngle = (($.get(groupRotationDisplay) + $$props.rotation * 90) % 360 + 360) % 360;
+    const handleNearMenuSide = $.get(effectiveIsRotatable) && effectiveAngle > 90 && effectiveAngle < 270;
     return {
       context: buildContext(),
       selected: true,
       rect,
-      placement: { suggestTop: false },
+      placement: { suggestTop: handleNearMenuSide },
       menuWrapperProps
     };
   }
+  function portalToBody(node) {
+    document.body.appendChild(node);
+    return {
+      destroy() {
+        if (node.parentNode === document.body) {
+          document.body.removeChild(node);
+        }
+      }
+    };
+  }
   var fragment = $.comment();
-  var node = $.first_child(fragment);
+  var node_1 = $.first_child(fragment);
   {
-    var consequent_6 = ($$anchor2) => {
+    var consequent_11 = ($$anchor2) => {
       var div = root_1$1();
       var div_1 = $.child(div);
-      $.attribute_effect(div_1, () => ({
+      let styles;
+      var node_2 = $.child(div_1);
+      {
+        var consequent = ($$anchor3) => {
+          var fragment_1 = root_2$1();
+          var div_2 = $.first_child(fragment_1);
+          let styles_1;
+          var div_3 = $.sibling(div_2, 2);
+          let styles_2;
+          var div_4 = $.sibling(div_3, 2);
+          let styles_3;
+          $.template_effect(() => {
+            styles_1 = $.set_style(div_2, "", styles_1, {
+              position: "absolute",
+              left: `${$.get(groupCenterX) - $.get(groupGuideLength) / 2}px`,
+              top: `${$.get(groupCenterY) ?? ""}px`,
+              width: `${$.get(groupGuideLength) ?? ""}px`,
+              height: "1px",
+              "background-color": $.get(HANDLE_COLOR),
+              opacity: "0.35",
+              "pointer-events": "none"
+            });
+            styles_2 = $.set_style(div_3, "", styles_2, {
+              position: "absolute",
+              left: `${$.get(groupCenterX) ?? ""}px`,
+              top: `${$.get(groupCenterY) - $.get(groupGuideLength) / 2}px`,
+              width: "1px",
+              height: `${$.get(groupGuideLength) ?? ""}px`,
+              "background-color": $.get(HANDLE_COLOR),
+              opacity: "0.35",
+              "pointer-events": "none"
+            });
+            styles_3 = $.set_style(div_4, "", styles_3, {
+              position: "absolute",
+              left: `${$.get(groupCenterX) - $.get(groupGuideLength) / 2}px`,
+              top: `${$.get(groupCenterY) ?? ""}px`,
+              width: `${$.get(groupGuideLength) ?? ""}px`,
+              height: "1px",
+              "transform-origin": "center center",
+              transform: `rotate(${$.get(groupRotationDisplay) ?? ""}deg)`,
+              "background-color": $.get(HANDLE_COLOR),
+              opacity: "0.8",
+              "pointer-events": "none"
+            });
+          });
+          $.append($$anchor3, fragment_1);
+        };
+        $.if(node_2, ($$render) => {
+          if ($.get(rotationActive)) $$render(consequent);
+        });
+      }
+      var node_3 = $.sibling(node_2, 2);
+      {
+        var consequent_3 = ($$anchor3) => {
+          var fragment_2 = $.comment();
+          var node_4 = $.first_child(fragment_2);
+          {
+            var consequent_1 = ($$anchor4) => {
+              var div_5 = root_4$1();
+              div_5.__pointermove = (e) => {
+                if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
+              };
+              var node_5 = $.child(div_5);
+              {
+                let $0 = $.derived(() => ({
+                  ...$.get(rotationHandle).handle,
+                  backgroundColor: $.get(ROTATION_COLOR),
+                  iconColor: $.get(ROTATION_ICON_COLOR),
+                  connectorStyle: `${$.get(rotationHandle).connector.style}; background-color: ${$.get(ROTATION_CONNECTOR_COLOR)}; opacity: ${$.get(rotationActive) ? 0 : 1};`,
+                  showConnector: $.get(SHOW_CONNECTOR),
+                  opacity: $.get(rotationActive) ? 0 : 1,
+                  border: {
+                    color: $.get(ROTATION_BORDER_COLOR),
+                    width: $.get(ROTATION_BORDER_WIDTH),
+                    style: $.get(ROTATION_BORDER_STYLE)
+                  }
+                }));
+                $.snippet(node_5, () => $$props.rotationUI.component, () => $.get($0));
+              }
+              $.reset(div_5);
+              $.event("pointerenter", div_5, () => $.set(isHandleHovered, true));
+              $.event("pointerleave", div_5, () => {
+                $.set(isHandleHovered, false);
+                $.set(cursorScreen, null);
+              });
+              $.append($$anchor4, div_5);
+            };
+            var alternate = ($$anchor4) => {
+              var div_6 = root_5$1();
+              div_6.__pointermove = (e) => {
+                if (!$.get(rotationActive)) $.set(cursorScreen, { x: e.clientX, y: e.clientY }, true);
+              };
+              var node_6 = $.child(div_6);
+              {
+                var consequent_2 = ($$anchor5) => {
+                  var div_7 = root_6$1();
+                  $.template_effect(() => $.set_style(div_7, `${$.get(rotationHandle).connector.style ?? ""}; background-color: ${$.get(ROTATION_CONNECTOR_COLOR) ?? ""}; opacity: ${$.get(rotationActive) ? 0 : 1};`));
+                  $.append($$anchor5, div_7);
+                };
+                $.if(node_6, ($$render) => {
+                  if ($.get(SHOW_CONNECTOR)) $$render(consequent_2);
+                });
+              }
+              var div_8 = $.sibling(node_6, 2);
+              $.attribute_effect(div_8, () => ({
+                ...{
+                  onpointerdown: $.get(rotationHandle).handle.onpointerdown,
+                  onpointermove: $.get(rotationHandle).handle.onpointermove,
+                  onpointerup: $.get(rotationHandle).handle.onpointerup,
+                  onpointercancel: $.get(rotationHandle).handle.onpointercancel
+                },
+                style: `${$.get(rotationHandle).handle.style ?? ""}; background-color: ${$.get(ROTATION_COLOR) ?? ""}; border: ${$.get(ROTATION_BORDER_WIDTH) ?? ""}px ${$.get(ROTATION_BORDER_STYLE) ?? ""} ${$.get(ROTATION_BORDER_COLOR) ?? ""}; box-sizing: border-box; display: flex; align-items: center; justify-content: center; pointer-events: auto; opacity: ${$.get(rotationActive) ? 0 : 1};`
+              }));
+              var svg = $.child(div_8);
+              $.reset(div_8);
+              $.reset(div_6);
+              $.template_effect(
+                ($0, $1) => {
+                  $.set_attribute(svg, "width", $0);
+                  $.set_attribute(svg, "height", $1);
+                  $.set_attribute(svg, "stroke", $.get(ROTATION_ICON_COLOR));
+                },
+                [
+                  () => Math.round($.get(ROTATION_SIZE) * 0.6),
+                  () => Math.round($.get(ROTATION_SIZE) * 0.6)
+                ]
+              );
+              $.event("pointerenter", div_6, () => $.set(isHandleHovered, true));
+              $.event("pointerleave", div_6, () => {
+                $.set(isHandleHovered, false);
+                $.set(cursorScreen, null);
+              });
+              $.append($$anchor4, div_6);
+            };
+            $.if(node_4, ($$render) => {
+              var _a;
+              if ((_a = $$props.rotationUI) == null ? void 0 : _a.component) $$render(consequent_1);
+              else $$render(alternate, false);
+            });
+          }
+          $.append($$anchor3, fragment_2);
+        };
+        $.if(node_3, ($$render) => {
+          if ($.get(effectiveIsRotatable) && $.get(rotationHandle)) $$render(consequent_3);
+        });
+      }
+      var div_9 = $.sibling(node_3, 2);
+      $.attribute_effect(div_9, () => ({
         ...$.get(effectiveIsDraggable) ? interactionHandles.dragProps : { onpointerdown: (e) => e.stopPropagation() },
         [$.STYLE]: {
           position: "absolute",
-          left: `${$.get(previewGroupBox).origin.x * $$props.scale}px`,
-          top: `${$.get(previewGroupBox).origin.y * $$props.scale}px`,
-          width: `${$.get(previewGroupBox).size.width * $$props.scale}px`,
-          height: `${$.get(previewGroupBox).size.height * $$props.scale}px`,
-          outline: `2px dashed ${selectionOutlineColor() ?? ""}`,
-          "outline-offset": `${outlineOffset() - 1}px`,
+          left: "0px",
+          top: "0px",
+          width: `${$.get(groupBoxWidth) ?? ""}px`,
+          height: `${$.get(groupBoxHeight) ?? ""}px`,
+          outline: $.get(rotationActive) ? "none" : `${$.get(outlineWidthVal)}px ${$.get(outlineStyleVal)} ${$.get(outlineColor)}`,
+          "outline-offset": `${$.get(outlineOff) - 1}px`,
           cursor: $.get(effectiveIsDraggable) ? "move" : "default",
           "touch-action": "none",
-          "z-index": zIndex()
+          "pointer-events": "auto"
         }
       }));
-      var node_1 = $.child(div_1);
+      var node_7 = $.child(div_9);
       {
-        var consequent_1 = ($$anchor3) => {
-          var fragment_1 = $.comment();
-          var node_2 = $.first_child(fragment_1);
-          $.each(node_2, 17, () => $.get(resizeHandles), ({ key, style: handleStyle, ...hProps }) => key, ($$anchor4, $$item) => {
+        var consequent_5 = ($$anchor3) => {
+          var fragment_3 = $.comment();
+          var node_8 = $.first_child(fragment_3);
+          $.each(node_8, 17, () => $.get(resizeHandles), ({ key, style: handleStyle, ...hProps }) => key, ($$anchor4, $$item) => {
             let handleStyle = () => $.get($$item).style;
             let hProps = () => $.exclude_from_object($.get($$item), ["key", "style"]);
-            var fragment_2 = $.comment();
-            var node_3 = $.first_child(fragment_2);
+            var fragment_4 = $.comment();
+            var node_9 = $.first_child(fragment_4);
             {
-              var consequent = ($$anchor5) => {
-                var fragment_3 = $.comment();
-                var node_4 = $.first_child(fragment_3);
+              var consequent_4 = ($$anchor5) => {
+                var fragment_5 = $.comment();
+                var node_10 = $.first_child(fragment_5);
                 {
-                  let $0 = $.derived(() => ({ ...hProps(), backgroundColor: $.get(HANDLE_COLOR) }));
-                  $.snippet(node_4, () => $$props.resizeUI.component, () => $.get($0));
+                  let $0 = $.derived(() => ({
+                    ...hProps(),
+                    style: handleStyle(),
+                    backgroundColor: $.get(HANDLE_COLOR)
+                  }));
+                  $.snippet(node_10, () => $$props.resizeUI.component, () => $.get($0));
                 }
-                $.append($$anchor5, fragment_3);
+                $.append($$anchor5, fragment_5);
               };
-              var alternate = ($$anchor5) => {
-                var div_2 = root_5$1();
-                $.attribute_effect(div_2, () => ({
+              var alternate_1 = ($$anchor5) => {
+                var div_10 = root_10();
+                $.attribute_effect(div_10, () => ({
                   ...hProps(),
                   style: `${handleStyle() ?? ""}; background-color: ${$.get(HANDLE_COLOR) ?? ""};`
                 }));
-                $.append($$anchor5, div_2);
+                $.append($$anchor5, div_10);
               };
-              $.if(node_3, ($$render) => {
+              $.if(node_9, ($$render) => {
                 var _a;
-                if ((_a = $$props.resizeUI) == null ? void 0 : _a.component) $$render(consequent);
-                else $$render(alternate, false);
+                if ((_a = $$props.resizeUI) == null ? void 0 : _a.component) $$render(consequent_4);
+                else $$render(alternate_1, false);
               });
             }
-            $.append($$anchor4, fragment_2);
+            $.append($$anchor4, fragment_4);
           });
-          $.append($$anchor3, fragment_1);
+          $.append($$anchor3, fragment_3);
         };
-        $.if(node_1, ($$render) => {
-          if ($.get(effectiveIsResizable)) $$render(consequent_1);
+        $.if(node_7, ($$render) => {
+          if ($.get(effectiveIsResizable) && !$.get(rotationActive)) $$render(consequent_5);
         });
       }
+      $.reset(div_9);
       $.reset(div_1);
-      var node_5 = $.sibling(div_1, 2);
+      var node_11 = $.sibling(div_1, 2);
       {
-        var consequent_5 = ($$anchor3) => {
+        var consequent_6 = ($$anchor3) => {
+          var div_11 = root_11$1();
+          var div_12 = $.child(div_11);
+          let styles_4;
+          var text = $.child(div_12);
+          $.reset(div_12);
+          $.reset(div_11);
+          $.action(div_11, ($$node) => portalToBody == null ? void 0 : portalToBody($$node));
+          $.template_effect(
+            ($0) => {
+              styles_4 = $.set_style(div_12, "", styles_4, {
+                position: "fixed",
+                left: `${$.get(cursorScreen).x + 16}px`,
+                top: `${$.get(cursorScreen).y - 16}px`,
+                background: "rgba(0,0,0,0.8)",
+                color: "#fff",
+                padding: "4px 8px",
+                "border-radius": "4px",
+                "font-size": "12px",
+                "font-family": "monospace",
+                "pointer-events": "none",
+                "z-index": "10000",
+                "white-space": "nowrap"
+              });
+              $.set_text(text, `${$0 ?? ""}°`);
+            },
+            [() => $.get(normalizedRotationDisplay).toFixed(0)]
+          );
+          $.append($$anchor3, div_11);
+        };
+        $.if(node_11, ($$render) => {
+          if (($.get(rotationActive) || $.get(isHandleHovered)) && $.get(cursorScreen)) $$render(consequent_6);
+        });
+      }
+      var node_12 = $.sibling(node_11, 2);
+      {
+        var consequent_10 = ($$anchor3) => {
           {
             const children = ($$anchor4, $$arg0) => {
               let rect = () => $$arg0 == null ? void 0 : $$arg0().rect;
               let menuWrapperProps = () => $$arg0 == null ? void 0 : $$arg0().menuWrapperProps;
               const menuProps = $.derived(() => buildMenuProps(rect(), menuWrapperProps()));
-              var fragment_5 = $.comment();
-              var node_6 = $.first_child(fragment_5);
+              var fragment_7 = $.comment();
+              var node_13 = $.first_child(fragment_7);
               {
-                var consequent_3 = ($$anchor5) => {
+                var consequent_8 = ($$anchor5) => {
                   const result = $.derived(() => $$props.groupSelectionMenu($.get(menuProps)));
-                  var fragment_6 = $.comment();
-                  var node_7 = $.first_child(fragment_6);
+                  var fragment_8 = $.comment();
+                  var node_14 = $.first_child(fragment_8);
                   {
-                    var consequent_2 = ($$anchor6) => {
-                      var fragment_7 = $.comment();
-                      var node_8 = $.first_child(fragment_7);
-                      $.component(node_8, () => $.get(result).component, ($$anchor7, result_component) => {
+                    var consequent_7 = ($$anchor6) => {
+                      var fragment_9 = $.comment();
+                      var node_15 = $.first_child(fragment_9);
+                      $.component(node_15, () => $.get(result).component, ($$anchor7, result_component) => {
                         result_component($$anchor7, $.spread_props(() => $.get(result).props));
                       });
-                      $.append($$anchor6, fragment_7);
+                      $.append($$anchor6, fragment_9);
                     };
-                    $.if(node_7, ($$render) => {
-                      if ($.get(result)) $$render(consequent_2);
+                    $.if(node_14, ($$render) => {
+                      if ($.get(result)) $$render(consequent_7);
                     });
                   }
-                  $.append($$anchor5, fragment_6);
+                  $.append($$anchor5, fragment_8);
                 };
-                var alternate_1 = ($$anchor5) => {
-                  var fragment_8 = $.comment();
-                  var node_9 = $.first_child(fragment_8);
+                var alternate_2 = ($$anchor5) => {
+                  var fragment_10 = $.comment();
+                  var node_16 = $.first_child(fragment_10);
                   {
-                    var consequent_4 = ($$anchor6) => {
-                      var fragment_9 = $.comment();
-                      var node_10 = $.first_child(fragment_9);
-                      $.snippet(node_10, () => $$props.groupSelectionMenuSnippet, () => $.get(menuProps));
-                      $.append($$anchor6, fragment_9);
+                    var consequent_9 = ($$anchor6) => {
+                      var fragment_11 = $.comment();
+                      var node_17 = $.first_child(fragment_11);
+                      $.snippet(node_17, () => $$props.groupSelectionMenuSnippet, () => $.get(menuProps));
+                      $.append($$anchor6, fragment_11);
                     };
                     $.if(
-                      node_9,
+                      node_16,
                       ($$render) => {
-                        if ($$props.groupSelectionMenuSnippet) $$render(consequent_4);
+                        if ($$props.groupSelectionMenuSnippet) $$render(consequent_9);
                       },
                       true
                     );
                   }
-                  $.append($$anchor5, fragment_8);
+                  $.append($$anchor5, fragment_10);
                 };
-                $.if(node_6, ($$render) => {
-                  if ($$props.groupSelectionMenu) $$render(consequent_3);
-                  else $$render(alternate_1, false);
+                $.if(node_13, ($$render) => {
+                  if ($$props.groupSelectionMenu) $$render(consequent_8);
+                  else $$render(alternate_2, false);
                 });
               }
-              $.append($$anchor4, fragment_5);
+              $.append($$anchor4, fragment_7);
             };
             let $0 = $.derived(() => ({
               origin: {
@@ -1853,20 +2515,30 @@ function GroupSelectionBox($$anchor, $$props) {
             });
           }
         };
-        $.if(node_5, ($$render) => {
-          if ($.get(shouldShowMenu)) $$render(consequent_5);
+        $.if(node_12, ($$render) => {
+          if ($.get(shouldShowMenu)) $$render(consequent_10);
         });
       }
       $.reset(div);
+      $.template_effect(() => styles = $.set_style(div_1, "", styles, {
+        position: "absolute",
+        left: `${$.get(previewGroupBox).origin.x * $$props.scale}px`,
+        top: `${$.get(previewGroupBox).origin.y * $$props.scale}px`,
+        width: `${$.get(groupBoxWidth) ?? ""}px`,
+        height: `${$.get(groupBoxHeight) ?? ""}px`,
+        "pointer-events": "none",
+        "z-index": zIndex()
+      }));
       $.append($$anchor2, div);
     };
-    $.if(node, ($$render) => {
-      if ($$props.selectedAnnotations.length >= 2) $$render(consequent_6);
+    $.if(node_1, ($$render) => {
+      if ($$props.selectedAnnotations.length >= 2) $$render(consequent_11);
     });
   }
   $.append($$anchor, fragment);
   $.pop();
 }
+$.delegate(["pointermove"]);
 var root$2 = $.from_html(`<!> <!>`, 1);
 function Annotations($$anchor, $$props) {
   $.push($$props, true);
@@ -1955,6 +2627,26 @@ function Annotations($$anchor, $$props) {
       return (tool == null ? void 0 : tool.interaction.isGroupResizable) !== void 0 ? groupResizable : singleResizable;
     });
   });
+  const areAllSelectedRotatable = $.derived(() => {
+    if ($.get(selectedAnnotationsOnPage).length < 2) return false;
+    return $.get(selectedAnnotationsOnPage).every((ta) => {
+      var _a;
+      const tool = (_a = $.get(annotationProvides)) == 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 = $.derived(() => {
+    if ($.get(selectedAnnotationsOnPage).length < 2) return false;
+    return $.get(selectedAnnotationsOnPage).some((ta) => {
+      var _a;
+      const tool = (_a = $.get(annotationProvides)) == 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 = $.derived(() => {
     if (!$.get(annotationProvides)) return false;
     if ($.get(allSelectedIds).length < 2) return false;
@@ -2000,14 +2692,17 @@ function Annotations($$anchor, $$props) {
             });
             $.append($$anchor4, fragment_3);
           };
-          let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+          let $0 = $.derived(() => {
+            var _a;
+            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false);
+          });
           let $1 = $.derived(() => {
             var _a;
-            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
           });
           let $2 = $.derived(() => {
             var _a;
-            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, false);
           });
           let $3 = $.derived(() => {
             var _a;
@@ -2021,12 +2716,18 @@ function Annotations($$anchor, $$props) {
                 return $.get(annotation);
               },
               get isSelected() {
-                return $.get($0);
+                return $.get(isSelected);
+              },
+              get isMultiSelected() {
+                return $.get(isMultiSelected);
               },
               get isDraggable() {
-                return $.get($1);
+                return $.get($0);
               },
               get isResizable() {
+                return $.get($1);
+              },
+              get isRotatable() {
                 return $.get($2);
               },
               get lockAspectRatio() {
@@ -2065,14 +2766,17 @@ function Annotations($$anchor, $$props) {
                   onClick: (e) => handleClick(e, $.get(annotation))
                 }));
               };
-              let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+              let $0 = $.derived(() => {
+                var _a;
+                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true);
+              });
               let $1 = $.derived(() => {
                 var _a;
-                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true);
               });
               let $2 = $.derived(() => {
                 var _a;
-                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
               });
               let $3 = $.derived(() => {
                 var _a;
@@ -2086,12 +2790,18 @@ function Annotations($$anchor, $$props) {
                     return $.get(annotation);
                   },
                   get isSelected() {
-                    return $.get($0);
+                    return $.get(isSelected);
+                  },
+                  get isMultiSelected() {
+                    return $.get(isMultiSelected);
                   },
                   get isDraggable() {
-                    return $.get($1);
+                    return $.get($0);
                   },
                   get isResizable() {
+                    return $.get($1);
+                  },
+                  get isRotatable() {
                     return $.get($2);
                   },
                   get lockAspectRatio() {
@@ -2130,14 +2840,17 @@ function Annotations($$anchor, $$props) {
                       onClick: (e) => handleClick(e, $.get(annotation))
                     }));
                   };
-                  let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                  let $0 = $.derived(() => {
+                    var _a;
+                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true);
+                  });
                   let $1 = $.derived(() => {
                     var _a;
-                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true);
                   });
                   let $2 = $.derived(() => {
                     var _a;
-                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
                   });
                   let $3 = $.derived(() => {
                     var _a;
@@ -2151,12 +2864,18 @@ function Annotations($$anchor, $$props) {
                         return $.get(annotation);
                       },
                       get isSelected() {
-                        return $.get($0);
+                        return $.get(isSelected);
+                      },
+                      get isMultiSelected() {
+                        return $.get(isMultiSelected);
                       },
                       get isDraggable() {
-                        return $.get($1);
+                        return $.get($0);
                       },
                       get isResizable() {
+                        return $.get($1);
+                      },
+                      get isRotatable() {
                         return $.get($2);
                       },
                       get lockAspectRatio() {
@@ -2195,14 +2914,17 @@ function Annotations($$anchor, $$props) {
                           onClick: (e) => handleClick(e, $.get(annotation))
                         }));
                       };
-                      let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                      let $0 = $.derived(() => {
+                        var _a;
+                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true);
+                      });
                       let $1 = $.derived(() => {
                         var _a;
-                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true);
                       });
                       let $2 = $.derived(() => {
                         var _a;
-                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
                       });
                       let $3 = $.derived(() => {
                         var _a;
@@ -2216,12 +2938,18 @@ function Annotations($$anchor, $$props) {
                             return $.get(annotation);
                           },
                           get isSelected() {
-                            return $.get($0);
+                            return $.get(isSelected);
+                          },
+                          get isMultiSelected() {
+                            return $.get(isMultiSelected);
                           },
                           get isDraggable() {
-                            return $.get($1);
+                            return $.get($0);
                           },
                           get isResizable() {
+                            return $.get($1);
+                          },
+                          get isRotatable() {
                             return $.get($2);
                           },
                           get lockAspectRatio() {
@@ -2257,14 +2985,17 @@ function Annotations($$anchor, $$props) {
                               onClick: (e) => handleClick(e, $.get(annotation))
                             }));
                           };
-                          let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                          let $0 = $.derived(() => {
+                            var _a;
+                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false);
+                          });
                           let $1 = $.derived(() => {
                             var _a;
-                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
                           });
                           let $2 = $.derived(() => {
                             var _a;
-                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, false);
                           });
                           let $3 = $.derived(() => {
                             var _a;
@@ -2278,12 +3009,18 @@ function Annotations($$anchor, $$props) {
                                 return $.get(annotation);
                               },
                               get isSelected() {
-                                return $.get($0);
+                                return $.get(isSelected);
+                              },
+                              get isMultiSelected() {
+                                return $.get(isMultiSelected);
                               },
                               get isDraggable() {
-                                return $.get($1);
+                                return $.get($0);
                               },
                               get isResizable() {
+                                return $.get($1);
+                              },
+                              get isRotatable() {
                                 return $.get($2);
                               },
                               get lockAspectRatio() {
@@ -2320,14 +3057,17 @@ function Annotations($$anchor, $$props) {
                                   onClick: (e) => handleClick(e, $.get(annotation))
                                 }));
                               };
-                              let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                              let $0 = $.derived(() => {
+                                var _a;
+                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false);
+                              });
                               let $1 = $.derived(() => {
                                 var _a;
-                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
                               });
                               let $2 = $.derived(() => {
                                 var _a;
-                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, false);
                               });
                               let $3 = $.derived(() => {
                                 var _a;
@@ -2341,12 +3081,18 @@ function Annotations($$anchor, $$props) {
                                     return $.get(annotation);
                                   },
                                   get isSelected() {
-                                    return $.get($0);
+                                    return $.get(isSelected);
+                                  },
+                                  get isMultiSelected() {
+                                    return $.get(isMultiSelected);
                                   },
                                   get isDraggable() {
-                                    return $.get($1);
+                                    return $.get($0);
                                   },
                                   get isResizable() {
+                                    return $.get($1);
+                                  },
+                                  get isRotatable() {
                                     return $.get($2);
                                   },
                                   get lockAspectRatio() {
@@ -2383,14 +3129,17 @@ function Annotations($$anchor, $$props) {
                                       onClick: (e) => handleClick(e, $.get(annotation))
                                     }));
                                   };
-                                  let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                                  let $0 = $.derived(() => {
+                                    var _a;
+                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false);
+                                  });
                                   let $1 = $.derived(() => {
                                     var _a;
-                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
                                   });
                                   let $2 = $.derived(() => {
                                     var _a;
-                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, false);
                                   });
                                   let $3 = $.derived(() => {
                                     var _a;
@@ -2404,12 +3153,18 @@ function Annotations($$anchor, $$props) {
                                         return $.get(annotation);
                                       },
                                       get isSelected() {
-                                        return $.get($0);
+                                        return $.get(isSelected);
+                                      },
+                                      get isMultiSelected() {
+                                        return $.get(isMultiSelected);
                                       },
                                       get isDraggable() {
-                                        return $.get($1);
+                                        return $.get($0);
                                       },
                                       get isResizable() {
+                                        return $.get($1);
+                                      },
+                                      get isRotatable() {
                                         return $.get($2);
                                       },
                                       get lockAspectRatio() {
@@ -2446,14 +3201,17 @@ function Annotations($$anchor, $$props) {
                                           onClick: (e) => handleClick(e, $.get(annotation))
                                         }));
                                       };
-                                      let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                                      let $0 = $.derived(() => {
+                                        var _a;
+                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false);
+                                      });
                                       let $1 = $.derived(() => {
                                         var _a;
-                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
                                       });
                                       let $2 = $.derived(() => {
                                         var _a;
-                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, false);
                                       });
                                       let $3 = $.derived(() => {
                                         var _a;
@@ -2468,12 +3226,18 @@ function Annotations($$anchor, $$props) {
                                             return $.get(annotation);
                                           },
                                           get isSelected() {
-                                            return $.get($0);
+                                            return $.get(isSelected);
+                                          },
+                                          get isMultiSelected() {
+                                            return $.get(isMultiSelected);
                                           },
                                           get isDraggable() {
-                                            return $.get($1);
+                                            return $.get($0);
                                           },
                                           get isResizable() {
+                                            return $.get($1);
+                                          },
+                                          get isRotatable() {
                                             return $.get($2);
                                           },
                                           get lockAspectRatio() {
@@ -2513,14 +3277,17 @@ function Annotations($$anchor, $$props) {
                                               onClick: (e) => handleClick(e, $.get(annotation))
                                             }));
                                           };
-                                          let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                                          let $0 = $.derived(() => {
+                                            var _a;
+                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true);
+                                          });
                                           let $1 = $.derived(() => {
                                             var _a;
-                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
                                           });
                                           let $2 = $.derived(() => {
                                             var _a;
-                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
                                           });
                                           let $3 = $.derived(() => {
                                             var _a;
@@ -2534,12 +3301,18 @@ function Annotations($$anchor, $$props) {
                                                 return $.get(annotation);
                                               },
                                               get isSelected() {
-                                                return $.get($0);
+                                                return $.get(isSelected);
+                                              },
+                                              get isMultiSelected() {
+                                                return $.get(isMultiSelected);
                                               },
                                               get isDraggable() {
-                                                return $.get($1);
+                                                return $.get($0);
                                               },
                                               get isResizable() {
+                                                return $.get($1);
+                                              },
+                                              get isRotatable() {
                                                 return $.get($2);
                                               },
                                               get lockAspectRatio() {
@@ -2586,17 +3359,20 @@ function Annotations($$anchor, $$props) {
                                               let $1 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                                               let $2 = $.derived(() => {
                                                 var _a;
-                                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true);
                                               });
                                               let $3 = $.derived(() => {
                                                 var _a;
-                                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
                                               });
                                               let $4 = $.derived(() => {
+                                                var _a;
+                                                return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
+                                              });
+                                              let $5 = $.derived(() => {
                                                 var _a;
                                                 return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio, $.get(annotation).object, false);
                                               });
-                                              let $5 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                                               AnnotationContainer($$anchor12, $.spread_props(
                                                 {
                                                   get trackedAnnotation() {
@@ -2614,12 +3390,18 @@ function Annotations($$anchor, $$props) {
                                                   get isResizable() {
                                                     return $.get($3);
                                                   },
-                                                  get lockAspectRatio() {
+                                                  get isRotatable() {
                                                     return $.get($4);
                                                   },
-                                                  get isSelected() {
+                                                  get lockAspectRatio() {
                                                     return $.get($5);
                                                   },
+                                                  get isSelected() {
+                                                    return $.get(isSelected);
+                                                  },
+                                                  get isMultiSelected() {
+                                                    return $.get(isMultiSelected);
+                                                  },
                                                   onSelect: (e) => handleClick(e, $.get(annotation)),
                                                   vertexConfig: {
                                                     extractVertices: (a) => a.vertices,
@@ -2651,14 +3433,17 @@ function Annotations($$anchor, $$props) {
                                                       onClick: (e) => handleClick(e, $.get(annotation))
                                                     }));
                                                   };
-                                                  let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                                                  let $0 = $.derived(() => {
+                                                    var _a;
+                                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true);
+                                                  });
                                                   let $1 = $.derived(() => {
                                                     var _a;
-                                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false);
                                                   });
                                                   let $2 = $.derived(() => {
                                                     var _a;
-                                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, false) && !$.get(isMultiSelected);
+                                                    return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
                                                   });
                                                   let $3 = $.derived(() => {
                                                     var _a;
@@ -2672,12 +3457,18 @@ function Annotations($$anchor, $$props) {
                                                         return $.get(annotation);
                                                       },
                                                       get isSelected() {
-                                                        return $.get($0);
+                                                        return $.get(isSelected);
+                                                      },
+                                                      get isMultiSelected() {
+                                                        return $.get(isMultiSelected);
                                                       },
                                                       get isDraggable() {
-                                                        return $.get($1);
+                                                        return $.get($0);
                                                       },
                                                       get isResizable() {
+                                                        return $.get($1);
+                                                      },
+                                                      get isRotatable() {
                                                         return $.get($2);
                                                       },
                                                       get lockAspectRatio() {
@@ -2735,14 +3526,17 @@ function Annotations($$anchor, $$props) {
                                                           });
                                                         }
                                                       };
-                                                      let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                                                      let $0 = $.derived(() => {
+                                                        var _a;
+                                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isEditing);
+                                                      });
                                                       let $1 = $.derived(() => {
                                                         var _a;
-                                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isEditing) && !$.get(isMultiSelected);
+                                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true);
                                                       });
                                                       let $2 = $.derived(() => {
                                                         var _a;
-                                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                                                        return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
                                                       });
                                                       let $3 = $.derived(() => {
                                                         var _a;
@@ -2757,12 +3551,18 @@ function Annotations($$anchor, $$props) {
                                                             return $.get(annotation);
                                                           },
                                                           get isSelected() {
-                                                            return $.get($0);
+                                                            return $.get(isSelected);
+                                                          },
+                                                          get isMultiSelected() {
+                                                            return $.get(isMultiSelected);
                                                           },
                                                           get isDraggable() {
-                                                            return $.get($1);
+                                                            return $.get($0);
                                                           },
                                                           get isResizable() {
+                                                            return $.get($1);
+                                                          },
+                                                          get isRotatable() {
                                                             return $.get($2);
                                                           },
                                                           get lockAspectRatio() {
@@ -2814,14 +3614,17 @@ function Annotations($$anchor, $$props) {
                                                               onClick: (e) => handleClick(e, $.get(annotation))
                                                             });
                                                           };
-                                                          let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
+                                                          let $0 = $.derived(() => {
+                                                            var _a;
+                                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true);
+                                                          });
                                                           let $1 = $.derived(() => {
                                                             var _a;
-                                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true);
                                                           });
                                                           let $2 = $.derived(() => {
                                                             var _a;
-                                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable, $.get(annotation).object, true) && !$.get(isMultiSelected);
+                                                            return resolveInteractionProp((_a = $.get(tool)) == null ? void 0 : _a.interaction.isRotatable, $.get(annotation).object, true);
                                                           });
                                                           let $3 = $.derived(() => {
                                                             var _a;
@@ -2835,12 +3638,18 @@ function Annotations($$anchor, $$props) {
                                                                 return $.get(annotation);
                                                               },
                                                               get isSelected() {
-                                                                return $.get($0);
+                                                                return $.get(isSelected);
+                                                              },
+                                                              get isMultiSelected() {
+                                                                return $.get(isMultiSelected);
                                                               },
                                                               get isDraggable() {
-                                                                return $.get($1);
+                                                                return $.get($0);
                                                               },
                                                               get isResizable() {
+                                                                return $.get($1);
+                                                              },
+                                                              get isRotatable() {
                                                                 return $.get($2);
                                                               },
                                                               get lockAspectRatio() {
@@ -2883,28 +3692,28 @@ function Annotations($$anchor, $$props) {
                                                                   }
                                                                 }));
                                                               };
-                                                              let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
-                                                              let $1 = $.derived(() => $.get(hasIRT) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
-                                                              let $2 = $.derived(() => $.get(hasIRT) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
+                                                              let $0 = $.derived(() => $.get(hasIRT) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                                                              let $1 = $.derived(() => $.get(hasIRT) ? void 0 : $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                                                               AnnotationContainer($$anchor16, $.spread_props(
                                                                 {
                                                                   get trackedAnnotation() {
                                                                     return $.get(annotation);
                                                                   },
                                                                   get isSelected() {
-                                                                    return $.get($0);
+                                                                    return $.get(isSelected);
                                                                   },
                                                                   get isMultiSelected() {
                                                                     return $.get(isMultiSelected);
                                                                   },
                                                                   isDraggable: false,
                                                                   isResizable: false,
+                                                                  isRotatable: false,
                                                                   lockAspectRatio: false,
                                                                   get selectionMenu() {
-                                                                    return $.get($1);
+                                                                    return $.get($0);
                                                                   },
                                                                   get selectionMenuSnippet() {
-                                                                    return $.get($2);
+                                                                    return $.get($1);
                                                                   },
                                                                   onSelect: (e) => handleLinkClick(e, $.get(annotation)),
                                                                   get style() {
@@ -3068,47 +3877,62 @@ function Annotations($$anchor, $$props) {
   var node_16 = $.sibling(node, 2);
   {
     var consequent_14 = ($$anchor2) => {
-      GroupSelectionBox($$anchor2, {
-        get documentId() {
-          return $$props.documentId;
-        },
-        get pageIndex() {
-          return $$props.pageIndex;
-        },
-        get scale() {
-          return $$props.scale;
-        },
-        get rotation() {
-          return $$props.rotation;
-        },
-        get pageWidth() {
-          return $$props.pageWidth;
-        },
-        get pageHeight() {
-          return $$props.pageHeight;
-        },
-        get selectedAnnotations() {
-          return $.get(selectedAnnotationsOnPage);
-        },
-        get isDraggable() {
-          return $.get(areAllSelectedDraggable);
-        },
-        get isResizable() {
-          return $.get(areAllSelectedResizable);
-        },
-        get resizeUI() {
-          return $$props.resizeUI;
-        },
-        get selectionOutlineColor() {
-          return $$props.selectionOutlineColor;
-        },
-        get groupSelectionMenu() {
-          return $$props.groupSelectionMenu;
-        },
-        get groupSelectionMenuSnippet() {
-          return $$props.groupSelectionMenuSnippet;
-        }
-      });
+      {
+        let $0 = $.derived(() => $$props.groupSelectionOutline ?? $$props.selectionOutline);
+        GroupSelectionBox($$anchor2, {
+          get documentId() {
+            return $$props.documentId;
+          },
+          get pageIndex() {
+            return $$props.pageIndex;
+          },
+          get scale() {
+            return $$props.scale;
+          },
+          get rotation() {
+            return $$props.rotation;
+          },
+          get pageWidth() {
+            return $$props.pageWidth;
+          },
+          get pageHeight() {
+            return $$props.pageHeight;
+          },
+          get selectedAnnotations() {
+            return $.get(selectedAnnotationsOnPage);
+          },
+          get isDraggable() {
+            return $.get(areAllSelectedDraggable);
+          },
+          get isResizable() {
+            return $.get(areAllSelectedResizable);
+          },
+          get isRotatable() {
+            return $.get(areAllSelectedRotatable);
+          },
+          get lockAspectRatio() {
+            return $.get(shouldLockGroupAspectRatio);
+          },
+          get resizeUI() {
+            return $$props.resizeUI;
+          },
+          get rotationUI() {
+            return $$props.rotationUI;
+          },
+          get selectionOutlineColor() {
+            return $$props.selectionOutlineColor;
+          },
+          get selectionOutline() {
+            return $.get($0);
+          },
+          get groupSelectionMenu() {
+            return $$props.groupSelectionMenu;
+          },
+          get groupSelectionMenuSnippet() {
+            return $$props.groupSelectionMenuSnippet;
+          }
+        });
+      }
     };
     $.if(node_16, ($$render) => {
       if ($.get(allSelectedOnSamePage) && $.get(selectedAnnotationsOnPage).length >= 2) $$render(consequent_14);
@@ -3755,7 +4579,10 @@ function AnnotationLayer($$anchor, $$props) {
     "groupSelectionMenuSnippet",
     "resizeUI",
     "vertexUI",
+    "rotationUI",
     "selectionOutlineColor",
+    "selectionOutline",
+    "groupSelectionOutline",
     "customAnnotationRenderer",
     "annotationRenderers"
   ]);
@@ -3789,8 +4616,11 @@ function AnnotationLayer($$anchor, $$props) {
     return $$props.scale !== void 0 ? $$props.scale : ((_a = documentState == null ? void 0 : documentState.current) == null ? void 0 : _a.scale) ?? 1;
   });
   const actualRotation = $.derived(() => {
-    var _a;
-    return $$props.rotation !== void 0 ? $$props.rotation : ((_a = documentState == null ? void 0 : documentState.current) == null ? void 0 : _a.rotation) ?? Rotation.Degree0;
+    var _a, _b;
+    if ($$props.rotation !== void 0) return $$props.rotation;
+    const pageRotation = ((_a = $.get(page)) == null ? void 0 : _a.rotation) ?? 0;
+    const docRotation = ((_b = documentState == null ? void 0 : documentState.current) == null ? void 0 : _b.rotation) ?? 0;
+    return (pageRotation + docRotation) % 4;
   });
   var div = root();
   $.attribute_effect(div, ($0) => ({ id: "annotation-layer", ...$0, ...restProps }), [
@@ -3834,9 +4664,18 @@ function AnnotationLayer($$anchor, $$props) {
     get vertexUI() {
       return $$props.vertexUI;
     },
+    get rotationUI() {
+      return $$props.rotationUI;
+    },
     get selectionOutlineColor() {
       return $$props.selectionOutlineColor;
     },
+    get selectionOutline() {
+      return $$props.selectionOutline;
+    },
+    get groupSelectionOutline() {
+      return $$props.groupSelectionOutline;
+    },
     get customAnnotationRenderer() {
       return $$props.customAnnotationRenderer;
     },