@embedpdf/plugin-annotation 2.2.0 → 2.3.0

package/dist/svelte/index.js

@@ -1,10 +1,11 @@
 import * as $ from "svelte/internal/client";
-import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp, isLink } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/svelte";
 import "svelte/internal/disclose-version";
 import { useInteractionHandles, deepToRaw, doublePress, CounterRotate } from "@embedpdf/utils/svelte";
-import { PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCss, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
+import { untrack } from "svelte";
+import { PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCss, ignore, PdfErrorCode, boundingRectOrEmpty, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/svelte";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/svelte";
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
@@ -38,10 +39,10 @@ const useAnnotation = (getDocumentId) => {
 };
 var root_6$1 = $.from_html(`<div></div>`);
 var root_10 = $.from_html(`<div></div>`);
-var root$a = $.from_html(`<div data-no-interaction=""><div><!> <!> <!></div> <!></div>`);
+var root$c = $.from_html(`<div data-no-interaction=""><div><!> <!> <!></div> <!></div>`);
 function AnnotationContainer($$anchor, $$props) {
   $.push($$props, true);
-  let lockAspectRatio = $.prop($$props, "lockAspectRatio", 3, false), propsClass = $.prop($$props, "class", 3, ""), outlineOffset = $.prop($$props, "outlineOffset", 3, 1), zIndex = $.prop($$props, "zIndex", 3, 20), selectionOutlineColor = $.prop($$props, "selectionOutlineColor", 3, "#007ACC"), restProps = $.rest_props($$props, [
+  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, 20), selectionOutlineColor = $.prop($$props, "selectionOutlineColor", 3, "#007ACC"), restProps = $.rest_props($$props, [
     "$$slots",
     "$$events",
     "$$legacy",
@@ -54,6 +55,7 @@ function AnnotationContainer($$anchor, $$props) {
     "trackedAnnotation",
     "children",
     "isSelected",
+    "isMultiSelected",
     "isDraggable",
     "isResizable",
     "lockAspectRatio",
@@ -73,10 +75,12 @@ function AnnotationContainer($$anchor, $$props) {
   ]);
   let preview = $.state($.proxy($$props.trackedAnnotation.object));
   let annotationCapability = useAnnotationCapability();
+  const annotationPlugin = useAnnotationPlugin();
   const permissions = useDocumentPermissions(() => $$props.documentId);
   let gestureBaseRef = $.state(null);
-  const effectiveIsDraggable = $.derived(() => permissions.canModifyAnnotations && $$props.isDraggable);
-  const effectiveIsResizable = $.derived(() => permissions.canModifyAnnotations && $$props.isResizable);
+  let gestureBaseRectRef = $.state(null);
+  const effectiveIsDraggable = $.derived(() => permissions.canModifyAnnotations && $$props.isDraggable && !isMultiSelected());
+  const effectiveIsResizable = $.derived(() => permissions.canModifyAnnotations && $$props.isResizable && !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);
@@ -96,11 +100,32 @@ function AnnotationContainer($$anchor, $$props) {
     var _a;
     return ((_a = $$props.vertexUI) == null ? void 0 : _a.size) ?? 12;
   });
+  const showOutline = $.derived(() => $$props.isSelected && !isMultiSelected());
   $.user_effect(() => {
     if ($$props.trackedAnnotation.object) {
       $.set(preview, $$props.trackedAnnotation.object, true);
     }
   });
+  $.user_effect(() => {
+    const plugin = annotationPlugin.plugin;
+    if (!plugin) return;
+    const id = $$props.trackedAnnotation.object.id;
+    const handleEvent = (event) => {
+      var _a;
+      if (event.documentId !== $$props.documentId) return;
+      const patch = (_a = event.previewPatches) == null ? void 0 : _a[id];
+      if (event.type === "update" && patch) {
+        $.set(preview, { ...untrack(() => $.get(preview)), ...patch }, true);
+      } else if (event.type === "cancel") {
+        $.set(preview, $$props.trackedAnnotation.object, true);
+      }
+    };
+    const unsubs = [
+      plugin.onDragChange(handleEvent),
+      plugin.onResizeChange(handleEvent)
+    ];
+    return () => unsubs.forEach((u) => u());
+  });
   const interactionHandles = useInteractionHandles(() => {
     var _a;
     return {
@@ -115,28 +140,62 @@ function AnnotationContainer($$anchor, $$props) {
         maintainAspectRatio: lockAspectRatio(),
         pageRotation: $$props.rotation,
         scale: $$props.scale,
-        enabled: $$props.isSelected,
+        // Disable interaction handles when multi-selected
+        enabled: $$props.isSelected && !isMultiSelected(),
         onUpdate: (event) => {
-          var _a2, _b, _c, _d;
-          if (!((_a2 = event.transformData) == null ? void 0 : _a2.type)) return;
+          var _a2, _b, _c;
+          if (!((_a2 = event.transformData) == null ? void 0 : _a2.type) || isMultiSelected()) return;
+          const plugin = annotationPlugin.plugin;
+          if (!plugin) return;
+          const { type, changes, metadata } = event.transformData;
+          const id = $$props.trackedAnnotation.object.id;
+          const pageSize = { width: $$props.pageWidth, height: $$props.pageHeight };
           if (event.state === "start") {
-            $.set(gestureBaseRef, $.get(currentObject), true);
+            $.set(gestureBaseRectRef, $$props.trackedAnnotation.object.rect, true);
+            $.set(
+              gestureBaseRef,
+              $$props.trackedAnnotation.object,
+              // For vertex edit
+              true
+            );
+            if (type === "move") {
+              plugin.startDrag($$props.documentId, { annotationIds: [id], pageSize });
+            } else if (type === "resize") {
+              plugin.startResize($$props.documentId, {
+                annotationIds: [id],
+                pageSize,
+                resizeHandle: (metadata == null ? void 0 : metadata.handle) ?? "se"
+              });
+            }
           }
-          const transformType = event.transformData.type;
-          const base = $.get(gestureBaseRef) ?? $.get(currentObject);
-          const changes = event.transformData.changes.vertices ? (_b = $$props.vertexConfig) == null ? void 0 : _b.transformAnnotation(base, event.transformData.changes.vertices) : { rect: event.transformData.changes.rect };
-          const patched = (_c = annotationCapability.provides) == null ? void 0 : _c.transformAnnotation(base, {
-            type: transformType,
-            changes,
-            metadata: event.transformData.metadata
-          });
-          if (patched) {
-            $.set(preview, { ...$.get(preview), ...patched }, true);
+          if (changes.rect && $.get(gestureBaseRectRef)) {
+            if (type === "move") {
+              const delta = {
+                x: changes.rect.origin.x - $.get(gestureBaseRectRef).origin.x,
+                y: changes.rect.origin.y - $.get(gestureBaseRectRef).origin.y
+              };
+              plugin.updateDrag($$props.documentId, delta);
+            } else if (type === "resize") {
+              plugin.updateResize($$props.documentId, changes.rect);
+            }
+          }
+          if (type === "vertex-edit" && changes.vertices && $$props.vertexConfig) {
+            const base = $.get(gestureBaseRef) ?? $$props.trackedAnnotation.object;
+            const vertexChanges = $$props.vertexConfig.transformAnnotation(base, changes.vertices);
+            const patched = (_b = annotationCapability.provides) == null ? void 0 : _b.transformAnnotation(base, { type, changes: vertexChanges, metadata });
+            if (patched) {
+              $.set(preview, { ...$.get(preview), ...patched }, true);
+              if (event.state === "end") {
+                const sanitized = deepToRaw(patched);
+                (_c = $.get(annotationProvides)) == null ? void 0 : _c.updateAnnotation($$props.pageIndex, id, sanitized);
+              }
+            }
           }
-          if (event.state === "end" && patched) {
+          if (event.state === "end") {
+            $.set(gestureBaseRectRef, null);
             $.set(gestureBaseRef, null);
-            const sanitized = deepToRaw(patched);
-            (_d = $.get(annotationProvides)) == null ? void 0 : _d.updateAnnotation($$props.pageIndex, $$props.trackedAnnotation.object.id, sanitized);
+            if (type === "move") plugin.commitDrag($$props.documentId);
+            else if (type === "resize") plugin.commitResize($$props.documentId);
           }
         }
       },
@@ -153,7 +212,7 @@ function AnnotationContainer($$anchor, $$props) {
   });
   const resizeHandles = $.derived(() => interactionHandles.resize);
   const vertexHandles = $.derived(() => interactionHandles.vertices);
-  const shouldShowMenu = $.derived(() => $$props.isSelected && (!!$$props.selectionMenu || !!$$props.selectionMenuSnippet));
+  const shouldShowMenu = $.derived(() => $$props.isSelected && !isMultiSelected() && (!!$$props.selectionMenu || !!$$props.selectionMenuSnippet));
   function buildContext() {
     return {
       type: "annotation",
@@ -171,7 +230,7 @@ function AnnotationContainer($$anchor, $$props) {
       menuWrapperProps
     };
   }
-  var div = root$a();
+  var div = root$c();
   var div_1 = $.child(div);
   $.attribute_effect(div_1, () => ({
     ...$.get(effectiveIsDraggable) && $$props.isSelected ? interactionHandles.dragProps : {},
@@ -184,9 +243,9 @@ function AnnotationContainer($$anchor, $$props) {
       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: $$props.isSelected ? `1px solid ${selectionOutlineColor()}` : "none",
-      "outline-offset": $$props.isSelected ? `${outlineOffset()}px` : "0px",
-      "pointer-events": $$props.isSelected ? "auto" : "none",
+      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",
       "z-index": zIndex()
@@ -310,7 +369,7 @@ function AnnotationContainer($$anchor, $$props) {
       $.append($$anchor2, fragment_5);
     };
     $.if(node_7, ($$render) => {
-      if ($$props.isSelected && permissions.canModifyAnnotations) $$render(consequent_4);
+      if ($$props.isSelected && permissions.canModifyAnnotations && !isMultiSelected()) $$render(consequent_4);
     });
   }
   $.reset(div_1);
@@ -405,14 +464,15 @@ function AnnotationContainer($$anchor, $$props) {
   $.append($$anchor, div);
   $.pop();
 }
-var root_1$9 = $.from_html(`<div></div>`);
+var root_1$b = $.from_html(`<div></div>`);
 function Highlight($$anchor, $$props) {
   $.push($$props, true);
-  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  let opacity = $.prop($$props, "opacity", 3, 0.5);
+  const resolvedColor = $.derived(() => $$props.strokeColor ?? "#FFFF00");
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, b) => {
-    var div = root_1$9();
+    var div = root_1$b();
     $.attribute_effect(
       div,
       ($0) => ({
@@ -427,7 +487,7 @@ function Highlight($$anchor, $$props) {
           top: `${($$props.rect ? $.get(b).origin.y - $$props.rect.origin.y : $.get(b).origin.y) * $$props.scale}px`,
           width: `${$.get(b).size.width * $$props.scale}px`,
           height: `${$.get(b).size.height * $$props.scale}px`,
-          background: color(),
+          background: $.get(resolvedColor),
           opacity: opacity(),
           "pointer-events": $$props.onClick ? "auto" : "none",
           cursor: $$props.onClick ? "pointer" : "default",
@@ -443,15 +503,16 @@ function Highlight($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_1$8 = $.from_html(`<div><div></div></div>`);
+var root_1$a = $.from_html(`<div><div></div></div>`);
 function Underline($$anchor, $$props) {
   $.push($$props, true);
-  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  let opacity = $.prop($$props, "opacity", 3, 0.5);
+  const resolvedColor = $.derived(() => $$props.strokeColor ?? "#FFFF00");
   const thickness = $.derived(() => 2 * $$props.scale);
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
-    var div = root_1$8();
+    var div = root_1$a();
     $.attribute_effect(
       div,
       ($0) => ({
@@ -485,7 +546,7 @@ function Underline($$anchor, $$props) {
       bottom: "0",
       width: "100%",
       height: `${$.get(thickness) ?? ""}px`,
-      background: color(),
+      background: $.get(resolvedColor),
       opacity: opacity(),
       "pointer-events": "none"
     }));
@@ -494,15 +555,16 @@ function Underline($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_1$7 = $.from_html(`<div><div></div></div>`);
+var root_1$9 = $.from_html(`<div><div></div></div>`);
 function Strikeout($$anchor, $$props) {
   $.push($$props, true);
-  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  let opacity = $.prop($$props, "opacity", 3, 0.5);
+  const resolvedColor = $.derived(() => $$props.strokeColor ?? "#FFFF00");
   const thickness = $.derived(() => 2 * $$props.scale);
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
-    var div = root_1$7();
+    var div = root_1$9();
     $.attribute_effect(
       div,
       ($0) => ({
@@ -536,7 +598,7 @@ function Strikeout($$anchor, $$props) {
       top: "50%",
       width: "100%",
       height: `${$.get(thickness) ?? ""}px`,
-      background: color(),
+      background: $.get(resolvedColor),
       opacity: opacity(),
       transform: "translateY(-50%)",
       "pointer-events": "none"
@@ -546,21 +608,22 @@ function Strikeout($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_1$6 = $.from_html(`<div><div></div></div>`);
+var root_1$8 = $.from_html(`<div><div></div></div>`);
 function Squiggly($$anchor, $$props) {
   $.push($$props, true);
-  let color = $.prop($$props, "color", 3, "#FFFF00"), opacity = $.prop($$props, "opacity", 3, 0.5);
+  let opacity = $.prop($$props, "opacity", 3, 0.5);
+  const resolvedColor = $.derived(() => $$props.strokeColor ?? "#FFFF00");
   const amplitude = $.derived(() => 2 * $$props.scale);
   const period = $.derived(() => 6 * $$props.scale);
   const svg = $.derived(() => `<svg xmlns="http://www.w3.org/2000/svg" width="${$.get(period)}" height="${$.get(amplitude) * 2}" viewBox="0 0 ${$.get(period)} ${$.get(amplitude) * 2}">
       <path d="M0 ${$.get(amplitude)} Q ${$.get(period) / 4} 0 ${$.get(period) / 2} ${$.get(amplitude)} T ${$.get(period)} ${$.get(amplitude)}"
-            fill="none" stroke="${color()}" stroke-width="${$.get(amplitude)}" stroke-linecap="round"/>
+            fill="none" stroke="${$.get(resolvedColor)}" stroke-width="${$.get(amplitude)}" stroke-linecap="round"/>
     </svg>`);
   const svgDataUri = $.derived(() => `url("data:image/svg+xml;utf8,${encodeURIComponent($.get(svg))}")`);
   var fragment = $.comment();
   var node = $.first_child(fragment);
   $.each(node, 17, () => $$props.segmentRects, $.index, ($$anchor2, r) => {
-    var div = root_1$6();
+    var div = root_1$8();
     $.attribute_effect(
       div,
       ($0) => ({
@@ -605,11 +668,12 @@ function Squiggly($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root_1$5 = $.from_svg(`<path fill="none"></path>`);
-var root$9 = $.from_svg(`<svg></svg>`);
+var root_1$7 = $.from_svg(`<path fill="none"></path>`);
+var root$b = $.from_svg(`<svg></svg>`);
 function Ink($$anchor, $$props) {
   $.push($$props, true);
-  let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1);
+  let opacity = $.prop($$props, "opacity", 3, 1);
+  const resolvedColor = $.derived(() => $$props.strokeColor ?? "#000000");
   const paths = $.derived(() => $$props.inkList.map(({ points }) => {
     let d = "";
     for (let i = 0; i < points.length; i++) {
@@ -622,10 +686,10 @@ function Ink($$anchor, $$props) {
   }));
   const width = $.derived(() => $$props.rect.size.width * $$props.scale);
   const height = $.derived(() => $$props.rect.size.height * $$props.scale);
-  var svg = root$9();
+  var svg = root$b();
   let styles;
   $.each(svg, 21, () => $.get(paths), $.index, ($$anchor2, d) => {
-    var path = root_1$5();
+    var path = root_1$7();
     path.__pointerdown = function(...$$args) {
       var _a;
       (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -641,7 +705,7 @@ function Ink($$anchor, $$props) {
       styles_1 = $.set_style(path, "", styles_1, {
         cursor: $$props.isSelected ? "move" : "pointer",
         "pointer-events": $$props.isSelected ? "none" : "visibleStroke",
-        stroke: color(),
+        stroke: $.get(resolvedColor),
         "stroke-width": $$props.strokeWidth,
         "stroke-linecap": "round",
         "stroke-linejoin": "round"
@@ -660,7 +724,7 @@ function Ink($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root$8 = $.from_svg(`<svg><rect></rect></svg>`);
+var root$a = $.from_svg(`<svg><rect></rect></svg>`);
 function Square($$anchor, $$props) {
   $.push($$props, true);
   let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID);
@@ -682,7 +746,7 @@ function Square($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$8();
+  var svg = root$a();
   let styles;
   var rect_1 = $.child(svg);
   rect_1.__pointerdown = function(...$$args) {
@@ -721,7 +785,7 @@ function Square($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root$7 = $.from_svg(`<svg><ellipse></ellipse></svg>`);
+var root$9 = $.from_svg(`<svg><ellipse></ellipse></svg>`);
 function Circle($$anchor, $$props) {
   $.push($$props, true);
   let color = $.prop($$props, "color", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID);
@@ -743,7 +807,7 @@ function Circle($$anchor, $$props) {
   let svgWidth = $.derived(() => $.get(width) * $$props.scale);
   let svgHeight = $.derived(() => $.get(height) * $$props.scale);
   let peValue = $.derived(() => $$props.isSelected ? "none" : color() === "transparent" ? "visibleStroke" : "visible");
-  var svg = root$7();
+  var svg = root$9();
   let styles;
   var ellipse = $.child(svg);
   ellipse.__pointerdown = (e) => {
@@ -791,9 +855,9 @@ function Circle($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root_1$4 = $.from_svg(`<path></path>`);
-var root_2$3 = $.from_svg(`<path></path>`);
-var root$6 = $.from_svg(`<svg><line></line><!><!></svg>`);
+var root_1$6 = $.from_svg(`<path></path>`);
+var root_2$4 = $.from_svg(`<path></path>`);
+var root$8 = $.from_svg(`<svg><line></line><!><!></svg>`);
 function Line($$anchor, $$props) {
   $.push($$props, true);
   let color = $.prop($$props, "color", 3, "transparent"), opacity = $.prop($$props, "opacity", 3, 1), strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID);
@@ -815,7 +879,7 @@ function Line($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$6();
+  var svg = root$8();
   let styles;
   var line = $.child(svg);
   line.__pointerdown = function(...$$args) {
@@ -830,7 +894,7 @@ function Line($$anchor, $$props) {
   var node = $.sibling(line);
   {
     var consequent = ($$anchor2) => {
-      var path = root_1$4();
+      var path = root_1$6();
       path.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -862,7 +926,7 @@ function Line($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var path_1 = root_2$3();
+      var path_1 = root_2$4();
       path_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -915,9 +979,9 @@ function Line($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root_1$3 = $.from_svg(`<path></path>`);
-var root_2$2 = $.from_svg(`<path></path>`);
-var root$5 = $.from_svg(`<svg><path></path><!><!></svg>`);
+var root_1$5 = $.from_svg(`<path></path>`);
+var root_2$3 = $.from_svg(`<path></path>`);
+var root$7 = $.from_svg(`<svg><path></path><!><!></svg>`);
 function Polyline($$anchor, $$props) {
   $.push($$props, true);
   let color = $.prop($$props, "color", 3, "transparent"), strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1);
@@ -959,7 +1023,7 @@ function Polyline($$anchor, $$props) {
   });
   const width = $.derived(() => $$props.rect.size.width * $$props.scale);
   const height = $.derived(() => $$props.rect.size.height * $$props.scale);
-  var svg = root$5();
+  var svg = root$7();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
@@ -974,7 +1038,7 @@ function Polyline($$anchor, $$props) {
   var node = $.sibling(path);
   {
     var consequent = ($$anchor2) => {
-      var path_1 = root_1$3();
+      var path_1 = root_1$5();
       path_1.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1005,7 +1069,7 @@ function Polyline($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var path_2 = root_2$2();
+      var path_2 = root_2$3();
       path_2.__pointerdown = function(...$$args) {
         var _a;
         (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1055,9 +1119,9 @@ function Polyline($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root_1$2 = $.from_svg(`<path fill="none"></path>`);
-var root_2$1 = $.from_svg(`<rect></rect>`);
-var root$4 = $.from_svg(`<svg><path></path><!><!></svg>`);
+var root_1$4 = $.from_svg(`<path fill="none"></path>`);
+var root_2$2 = $.from_svg(`<rect></rect>`);
+var root$6 = $.from_svg(`<svg><path></path><!><!></svg>`);
 function Polygon($$anchor, $$props) {
   $.push($$props, true);
   let color = $.prop($$props, "color", 3, "transparent"), strokeColor = $.prop($$props, "strokeColor", 3, "#000000"), opacity = $.prop($$props, "opacity", 3, 1), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.SOLID), handleSize = $.prop($$props, "handleSize", 3, 14);
@@ -1076,7 +1140,7 @@ function Polygon($$anchor, $$props) {
     var _a;
     return strokeStyle() === PdfAnnotationBorderStyle.DASHED ? (_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",") : void 0;
   });
-  var svg = root$4();
+  var svg = root$6();
   let styles;
   var path = $.child(svg);
   path.__pointerdown = function(...$$args) {
@@ -1091,7 +1155,7 @@ function Polygon($$anchor, $$props) {
   var node = $.sibling(path);
   {
     var consequent = ($$anchor2) => {
-      var path_1 = root_1$2();
+      var path_1 = root_1$4();
       let styles_2;
       $.template_effect(() => {
         $.set_attribute(path_1, "d", `M ${$.get(localPts)[$.get(localPts).length - 1].x} ${$.get(localPts)[$.get(localPts).length - 1].y} L ${$.get(localPts)[0].x} ${$.get(localPts)[0].y}`);
@@ -1111,7 +1175,7 @@ function Polygon($$anchor, $$props) {
   var node_1 = $.sibling(node);
   {
     var consequent_1 = ($$anchor2) => {
-      var rect_1 = root_2$1();
+      var rect_1 = root_2$2();
       $.set_attribute(rect_1, "opacity", 0.4);
       $.template_effect(() => {
         $.set_attribute(rect_1, "x", $.get(localPts)[0].x - handleSize() / $$props.scale / 2);
@@ -1151,7 +1215,7 @@ function Polygon($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root$3 = $.from_html(`<div><span tabindex="0"> </span></div>`);
+var root$5 = $.from_html(`<div><span tabindex="0"> </span></div>`);
 function FreeText($$anchor, $$props) {
   $.push($$props, true);
   const annotationCapability = useAnnotationCapability();
@@ -1192,7 +1256,7 @@ 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");
-  var div = root$3();
+  var div = root$5();
   div.__pointerdown = function(...$$args) {
     var _a;
     (_a = $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
@@ -1231,7 +1295,7 @@ function FreeText($$anchor, $$props) {
         "font-size": `${$.get(adjustedFontPx)}px`,
         "font-family": standardFontCss($$props.annotation.object.fontFamily),
         "text-align": textAlignmentToCss($$props.annotation.object.textAlign),
-        "background-color": $$props.annotation.object.backgroundColor,
+        "background-color": $$props.annotation.object.color ?? $$props.annotation.object.backgroundColor,
         opacity: $$props.annotation.object.opacity,
         width: $.get(needsComp) ? `${$.get(invScalePercent)}%` : "100%",
         height: $.get(needsComp) ? `${$.get(invScalePercent)}%` : "100%",
@@ -1249,7 +1313,7 @@ function FreeText($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
-var root_1$1 = $.from_html(`<img/>`);
+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, [
@@ -1307,7 +1371,7 @@ function RenderAnnotation($$anchor, $$props) {
   var node = $.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var img = root_1$1();
+      var img = root_1$3();
       $.attribute_effect(img, () => ({
         alt: "",
         src: $.get(imageUrl),
@@ -1326,14 +1390,14 @@ function RenderAnnotation($$anchor, $$props) {
   $.append($$anchor, fragment);
   $.pop();
 }
-var root$2 = $.from_html(`<div><!></div>`);
+var root$4 = $.from_html(`<div><!></div>`);
 function Stamp($$anchor, $$props) {
   $.push($$props, true);
   let annotationProp = $.derived(() => ({
     ...$$props.annotation.object,
     id: $$props.annotation.object.id
   }));
-  var div = root$2();
+  var div = root$4();
   let styles;
   div.__pointerdown = function(...$$args) {
     var _a;
@@ -1367,6 +1431,392 @@ function Stamp($$anchor, $$props) {
   $.pop();
 }
 $.delegate(["pointerdown", "touchstart"]);
+var root_1$2 = $.from_svg(`<line></line>`);
+var root_2$1 = $.from_svg(`<rect fill="transparent"></rect>`);
+var root$3 = $.from_svg(`<svg><rect fill="transparent"></rect><!></svg>`);
+function Link($$anchor, $$props) {
+  $.push($$props, true);
+  let strokeColor = $.prop($$props, "strokeColor", 3, "#0000FF"), strokeWidth = $.prop($$props, "strokeWidth", 3, 2), strokeStyle = $.prop($$props, "strokeStyle", 19, () => PdfAnnotationBorderStyle.UNDERLINE), hasIRT = $.prop($$props, "hasIRT", 3, false);
+  const width = $.derived(() => $$props.rect.size.width);
+  const height = $.derived(() => $$props.rect.size.height);
+  const svgWidth = $.derived(() => $.get(width) * $$props.scale);
+  const svgHeight = $.derived(() => $.get(height) * $$props.scale);
+  const dashArray = $.derived(() => {
+    var _a;
+    if (strokeStyle() === PdfAnnotationBorderStyle.DASHED) {
+      return ((_a = $$props.strokeDashArray) == null ? void 0 : _a.join(",")) ?? `${strokeWidth() * 3},${strokeWidth()}`;
+    }
+    return void 0;
+  });
+  const isUnderline2 = $.derived(() => strokeStyle() === PdfAnnotationBorderStyle.UNDERLINE);
+  const hitAreaCursor = $.derived(() => hasIRT() ? "default" : $$props.isSelected ? "move" : "pointer");
+  const hitAreaPointerEvents = $.derived(() => hasIRT() ? "none" : $$props.isSelected ? "none" : "visible");
+  var svg = root$3();
+  let styles;
+  var rect_1 = $.child(svg);
+  $.set_attribute(rect_1, "x", 0);
+  $.set_attribute(rect_1, "y", 0);
+  rect_1.__pointerdown = function(...$$args) {
+    var _a;
+    (_a = hasIRT() ? void 0 : $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  rect_1.__touchstart = function(...$$args) {
+    var _a;
+    (_a = hasIRT() ? void 0 : $$props.onClick) == null ? void 0 : _a.apply(this, $$args);
+  };
+  let styles_1;
+  var node = $.sibling(rect_1);
+  {
+    var consequent = ($$anchor2) => {
+      var line = root_1$2();
+      $.set_attribute(line, "x1", 1);
+      $.set_style(line, "", {}, { "pointer-events": "none" });
+      $.template_effect(() => {
+        $.set_attribute(line, "y1", $.get(height) - 1);
+        $.set_attribute(line, "x2", $.get(width) - 1);
+        $.set_attribute(line, "y2", $.get(height) - 1);
+        $.set_attribute(line, "stroke", strokeColor());
+        $.set_attribute(line, "stroke-width", strokeWidth());
+        $.set_attribute(line, "stroke-dasharray", $.get(dashArray));
+      });
+      $.append($$anchor2, line);
+    };
+    var alternate = ($$anchor2) => {
+      var rect_2 = root_2$1();
+      $.set_style(rect_2, "", {}, { "pointer-events": "none" });
+      $.template_effect(
+        ($0, $1) => {
+          $.set_attribute(rect_2, "x", strokeWidth() / 2);
+          $.set_attribute(rect_2, "y", strokeWidth() / 2);
+          $.set_attribute(rect_2, "width", $0);
+          $.set_attribute(rect_2, "height", $1);
+          $.set_attribute(rect_2, "stroke", strokeColor());
+          $.set_attribute(rect_2, "stroke-width", strokeWidth());
+          $.set_attribute(rect_2, "stroke-dasharray", $.get(dashArray));
+        },
+        [
+          () => Math.max($.get(width) - strokeWidth(), 0),
+          () => Math.max($.get(height) - strokeWidth(), 0)
+        ]
+      );
+      $.append($$anchor2, rect_2);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(isUnderline2)) $$render(consequent);
+      else $$render(alternate, false);
+    });
+  }
+  $.reset(svg);
+  $.template_effect(() => {
+    styles = $.set_style(svg, "position: absolute; z-index: 2; pointer-events: none;", styles, {
+      width: `${$.get(svgWidth) ?? ""}px`,
+      height: `${$.get(svgHeight) ?? ""}px`
+    });
+    $.set_attribute(svg, "width", $.get(svgWidth));
+    $.set_attribute(svg, "height", $.get(svgHeight));
+    $.set_attribute(svg, "viewBox", `0 0 ${$.get(width) ?? ""} ${$.get(height) ?? ""}`);
+    $.set_attribute(rect_1, "width", $.get(width));
+    $.set_attribute(rect_1, "height", $.get(height));
+    styles_1 = $.set_style(rect_1, "", styles_1, {
+      cursor: $.get(hitAreaCursor),
+      "pointer-events": $.get(hitAreaPointerEvents)
+    });
+  });
+  $.append($$anchor, svg);
+  $.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>`);
+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);
+  const annotationPlugin = useAnnotationPlugin();
+  let gestureBase = $.state(null);
+  let isDraggingRef = $.state(false);
+  let isResizingRef = $.state(false);
+  function getGroupBox() {
+    const rects = $$props.selectedAnnotations.map((ta) => ta.object.rect);
+    return boundingRectOrEmpty(rects);
+  }
+  const groupBox = $.derived(getGroupBox);
+  let previewGroupBox = $.state($.proxy(getGroupBox()));
+  $.user_effect(() => {
+    if (!$.get(isDraggingRef) && !$.get(isResizingRef)) {
+      const newBox = $.get(groupBox);
+      if ($.get(previewGroupBox).origin.x !== newBox.origin.x || $.get(previewGroupBox).origin.y !== newBox.origin.y || $.get(previewGroupBox).size.width !== newBox.size.width || $.get(previewGroupBox).size.height !== newBox.size.height) {
+        $.set(previewGroupBox, newBox, true);
+      }
+    }
+  });
+  const HANDLE_COLOR = $.derived(() => {
+    var _a;
+    return ((_a = $$props.resizeUI) == null ? void 0 : _a.color) ?? "#007ACC";
+  });
+  const HANDLE_SIZE = $.derived(() => {
+    var _a;
+    return ((_a = $$props.resizeUI) == null ? void 0 : _a.size) ?? 12;
+  });
+  const interactionHandles = useInteractionHandles(() => ({
+    controller: {
+      element: $.get(previewGroupBox),
+      constraints: {
+        minWidth: 20,
+        minHeight: 20,
+        boundingBox: { width: $$props.pageWidth, height: $$props.pageHeight }
+      },
+      maintainAspectRatio: false,
+      pageRotation: $$props.rotation,
+      scale: $$props.scale,
+      enabled: true,
+      onUpdate: (event) => {
+        var _a, _b;
+        if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
+        if (!annotationPlugin.plugin) return;
+        const plugin = annotationPlugin.plugin;
+        const transformType = event.transformData.type;
+        const isMove = transformType === "move";
+        const isResize = transformType === "resize";
+        if (isMove && !$$props.isDraggable) return;
+        if (event.state === "start") {
+          $.set(gestureBase, getGroupBox(), true);
+          if (isMove) {
+            $.set(isDraggingRef, true);
+            plugin.startDrag($$props.documentId, {
+              annotationIds: $$props.selectedAnnotations.map((ta) => ta.object.id),
+              pageSize: { width: $$props.pageWidth, height: $$props.pageHeight }
+            });
+          } else if (isResize) {
+            $.set(isResizingRef, true);
+            plugin.startResize($$props.documentId, {
+              annotationIds: $$props.selectedAnnotations.map((ta) => ta.object.id),
+              pageSize: { width: $$props.pageWidth, height: $$props.pageHeight },
+              resizeHandle: ((_b = event.transformData.metadata) == null ? void 0 : _b.handle) ?? "se"
+            });
+          }
+        }
+        const base = $.get(gestureBase) ?? getGroupBox();
+        if (isMove && event.transformData.changes.rect) {
+          const newRect = event.transformData.changes.rect;
+          const rawDelta = {
+            x: newRect.origin.x - base.origin.x,
+            y: newRect.origin.y - base.origin.y
+          };
+          const clampedDelta = plugin.updateDrag($$props.documentId, rawDelta);
+          $.set(
+            previewGroupBox,
+            {
+              ...base,
+              origin: {
+                x: base.origin.x + clampedDelta.x,
+                y: base.origin.y + clampedDelta.y
+              }
+            },
+            true
+          );
+        } else if (isResize && event.transformData.changes.rect) {
+          const newGroupBox = event.transformData.changes.rect;
+          plugin.updateResize($$props.documentId, newGroupBox);
+          $.set(previewGroupBox, newGroupBox, true);
+        }
+        if (event.state === "end") {
+          $.set(gestureBase, null);
+          if (isMove && $.get(isDraggingRef)) {
+            $.set(isDraggingRef, false);
+            plugin.commitDrag($$props.documentId);
+          } else if (isResize && $.get(isResizingRef)) {
+            $.set(isResizingRef, false);
+            plugin.commitResize($$props.documentId);
+          }
+        }
+      }
+    },
+    resizeUI: {
+      handleSize: $.get(HANDLE_SIZE),
+      spacing: outlineOffset(),
+      offsetMode: "outside",
+      includeSides: true,
+      zIndex: zIndex() + 1
+    },
+    vertexUI: { vertexSize: 0, zIndex: zIndex() },
+    includeVertices: false
+  }));
+  const resizeHandles = $.derived(() => interactionHandles.resize);
+  const shouldShowMenu = $.derived(() => !!$$props.groupSelectionMenu || !!$$props.groupSelectionMenuSnippet);
+  function buildContext() {
+    return {
+      type: "group",
+      annotations: $$props.selectedAnnotations,
+      pageIndex: $$props.pageIndex
+    };
+  }
+  function buildMenuProps(rect, menuWrapperProps) {
+    return {
+      context: buildContext(),
+      selected: true,
+      rect,
+      placement: { suggestTop: false },
+      menuWrapperProps
+    };
+  }
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent_6 = ($$anchor2) => {
+      var div = root_1$1();
+      var div_1 = $.child(div);
+      $.attribute_effect(div_1, () => ({
+        ...$$props.isDraggable ? 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`,
+          cursor: $$props.isDraggable ? "move" : "default",
+          "touch-action": "none",
+          "z-index": zIndex()
+        }
+      }));
+      var node_1 = $.child(div_1);
+      {
+        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) => {
+            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 consequent = ($$anchor5) => {
+                var fragment_3 = $.comment();
+                var node_4 = $.first_child(fragment_3);
+                {
+                  let $0 = $.derived(() => ({ ...hProps(), backgroundColor: $.get(HANDLE_COLOR) }));
+                  $.snippet(node_4, () => $$props.resizeUI.component, () => $.get($0));
+                }
+                $.append($$anchor5, fragment_3);
+              };
+              var alternate = ($$anchor5) => {
+                var div_2 = root_5$1();
+                $.attribute_effect(div_2, () => ({
+                  ...hProps(),
+                  style: `${handleStyle() ?? ""}; background-color: ${$.get(HANDLE_COLOR) ?? ""};`
+                }));
+                $.append($$anchor5, div_2);
+              };
+              $.if(node_3, ($$render) => {
+                var _a;
+                if ((_a = $$props.resizeUI) == null ? void 0 : _a.component) $$render(consequent);
+                else $$render(alternate, false);
+              });
+            }
+            $.append($$anchor4, fragment_2);
+          });
+          $.append($$anchor3, fragment_1);
+        };
+        $.if(node_1, ($$render) => {
+          if ($$props.isResizable) $$render(consequent_1);
+        });
+      }
+      $.reset(div_1);
+      var node_5 = $.sibling(div_1, 2);
+      {
+        var consequent_5 = ($$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 consequent_3 = ($$anchor5) => {
+                  const result = $.derived(() => $$props.groupSelectionMenu($.get(menuProps)));
+                  var fragment_6 = $.comment();
+                  var node_7 = $.first_child(fragment_6);
+                  {
+                    var consequent_2 = ($$anchor6) => {
+                      var fragment_7 = $.comment();
+                      var node_8 = $.first_child(fragment_7);
+                      $.component(node_8, () => $.get(result).component, ($$anchor7, result_component) => {
+                        result_component($$anchor7, $.spread_props(() => $.get(result).props));
+                      });
+                      $.append($$anchor6, fragment_7);
+                    };
+                    $.if(node_7, ($$render) => {
+                      if ($.get(result)) $$render(consequent_2);
+                    });
+                  }
+                  $.append($$anchor5, fragment_6);
+                };
+                var alternate_1 = ($$anchor5) => {
+                  var fragment_8 = $.comment();
+                  var node_9 = $.first_child(fragment_8);
+                  {
+                    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);
+                    };
+                    $.if(
+                      node_9,
+                      ($$render) => {
+                        if ($$props.groupSelectionMenuSnippet) $$render(consequent_4);
+                      },
+                      true
+                    );
+                  }
+                  $.append($$anchor5, fragment_8);
+                };
+                $.if(node_6, ($$render) => {
+                  if ($$props.groupSelectionMenu) $$render(consequent_3);
+                  else $$render(alternate_1, false);
+                });
+              }
+              $.append($$anchor4, fragment_5);
+            };
+            let $0 = $.derived(() => ({
+              origin: {
+                x: $.get(previewGroupBox).origin.x * $$props.scale,
+                y: $.get(previewGroupBox).origin.y * $$props.scale
+              },
+              size: {
+                width: $.get(previewGroupBox).size.width * $$props.scale,
+                height: $.get(previewGroupBox).size.height * $$props.scale
+              }
+            }));
+            CounterRotate($$anchor3, {
+              get rect() {
+                return $.get($0);
+              },
+              get rotation() {
+                return $$props.rotation;
+              },
+              children,
+              $$slots: { default: true }
+            });
+          }
+        };
+        $.if(node_5, ($$render) => {
+          if ($.get(shouldShowMenu)) $$render(consequent_5);
+        });
+      }
+      $.reset(div);
+      $.append($$anchor2, div);
+    };
+    $.if(node, ($$render) => {
+      if ($$props.selectedAnnotations.length >= 2) $$render(consequent_6);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+}
+var root$2 = $.from_html(`<!> <!>`, 1);
 function Annotations($$anchor, $$props) {
   $.push($$props, true);
   let annotationsProps = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
@@ -1374,17 +1824,18 @@ function Annotations($$anchor, $$props) {
   const selectionCapability = useSelectionCapability();
   const pointerHandlers = usePointerHandlers({ documentId: $$props.documentId, pageIndex: $$props.pageIndex });
   let annotations = $.state($.proxy([]));
-  let selectionState = $.state(null);
+  let allSelectedIds = $.state($.proxy([]));
   let editingId = $.state(null);
   const annotationProvides = $.derived(() => annotationCapability.provides ? annotationCapability.provides.forDocument($$props.documentId) : null);
+  const isMultiSelected = $.derived(() => $.get(allSelectedIds).length > 1);
   $.user_effect(() => {
     if (!$.get(annotationProvides)) return;
     const currentState = $.get(annotationProvides).getState();
     $.set(annotations, getAnnotationsByPageIndex(currentState, $$props.pageIndex), true);
-    $.set(selectionState, getSelectedAnnotationByPageIndex(currentState, $$props.pageIndex), true);
+    $.set(allSelectedIds, getSelectedAnnotationIds(currentState), true);
     const off = $.get(annotationProvides).onStateChange((state) => {
       $.set(annotations, getAnnotationsByPageIndex(state, $$props.pageIndex), true);
-      $.set(selectionState, getSelectedAnnotationByPageIndex(state, $$props.pageIndex), true);
+      $.set(allSelectedIds, getSelectedAnnotationIds(state), true);
     });
     return () => off == null ? void 0 : off();
   });
@@ -1402,20 +1853,59 @@ function Annotations($$anchor, $$props) {
   function handleClick(e, annotation) {
     e.stopPropagation();
     if ($.get(annotationProvides) && selectionCapability.provides) {
-      $.get(annotationProvides).selectAnnotation($$props.pageIndex, annotation.object.id);
       selectionCapability.provides.clear();
+      const isModifierPressed = "metaKey" in e ? e.metaKey || e.ctrlKey : false;
+      if (isModifierPressed) {
+        $.get(annotationProvides).toggleSelection($$props.pageIndex, annotation.object.id);
+      } else {
+        $.get(annotationProvides).selectAnnotation($$props.pageIndex, annotation.object.id);
+      }
       if (annotation.object.id !== $.get(editingId)) {
         $.set(editingId, null);
       }
     }
   }
-  var fragment = $.comment();
-  var node = $.first_child(fragment);
-  $.each(node, 17, () => $.get(annotations), (annotation) => annotation.object.id, ($$anchor2, annotation) => {
-    const isSelected = $.derived(() => {
+  function handleLinkClick(e, annotation) {
+    e.stopPropagation();
+    if (!$.get(annotationProvides) || !selectionCapability.provides) return;
+    selectionCapability.provides.clear();
+    if (annotation.object.inReplyToId) {
+      const parentId = annotation.object.inReplyToId;
+      const parent = $.get(annotations).find((a) => a.object.id === parentId);
+      if (parent) {
+        $.get(annotationProvides).selectAnnotation(parent.object.pageIndex, parentId);
+        return;
+      }
+    }
+    $.get(annotationProvides).selectAnnotation($$props.pageIndex, annotation.object.id);
+  }
+  const selectedAnnotationsOnPage = $.derived(() => $.get(annotations).filter((anno) => $.get(allSelectedIds).includes(anno.object.id)));
+  const areAllSelectedDraggable = $.derived(() => {
+    if ($.get(selectedAnnotationsOnPage).length < 2) return false;
+    return $.get(selectedAnnotationsOnPage).every((ta) => {
       var _a;
-      return ((_a = $.get(selectionState)) == null ? void 0 : _a.object.id) === $.get(annotation).object.id;
+      const tool = (_a = $.get(annotationProvides)) == null ? void 0 : _a.findToolForAnnotation(ta.object);
+      return (tool == null ? void 0 : tool.interaction.isGroupDraggable) ?? (tool == null ? void 0 : tool.interaction.isDraggable) ?? true;
     });
+  });
+  const areAllSelectedResizable = $.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);
+      return (tool == null ? void 0 : tool.interaction.isGroupResizable) ?? (tool == null ? void 0 : tool.interaction.isResizable) ?? true;
+    });
+  });
+  const allSelectedOnSamePage = $.derived(() => {
+    if (!$.get(annotationProvides)) return false;
+    if ($.get(allSelectedIds).length < 2) return false;
+    const allSelected = $.get(annotationProvides).getSelectedAnnotations();
+    return allSelected.every((ta) => ta.object.pageIndex === $$props.pageIndex);
+  });
+  var fragment = root$2();
+  var node = $.first_child(fragment);
+  $.each(node, 17, () => $.get(annotations), (annotation) => annotation.object.id, ($$anchor2, annotation) => {
+    const isSelected = $.derived(() => $.get(allSelectedIds).includes($.get(annotation).object.id));
     const isEditing = $.derived(() => $.get(editingId) === $.get(annotation).object.id);
     const tool = $.derived(() => {
       var _a;
@@ -1438,40 +1928,43 @@ function Annotations($$anchor, $$props) {
               onClick: (e) => handleClick(e, $.get(annotation))
             }));
           };
-          let $0 = $.derived(() => {
-            var _a;
-            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
-          });
+          let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
           let $1 = $.derived(() => {
             var _a;
-            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+            return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isMultiSelected);
           });
           let $2 = $.derived(() => {
+            var _a;
+            return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true) && !$.get(isMultiSelected);
+          });
+          let $3 = $.derived(() => {
             var _a;
             return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
           });
+          let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+          let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
           AnnotationContainer($$anchor3, $.spread_props(
             {
               get trackedAnnotation() {
                 return $.get(annotation);
               },
               get isSelected() {
-                return $.get(isSelected);
+                return $.get($0);
               },
               get isDraggable() {
-                return $.get($0);
+                return $.get($1);
               },
               get isResizable() {
-                return $.get($1);
+                return $.get($2);
               },
               get lockAspectRatio() {
-                return $.get($2);
+                return $.get($3);
               },
               get selectionMenu() {
-                return $$props.selectionMenu;
+                return $.get($4);
               },
               get selectionMenuSnippet() {
-                return $$props.selectionMenuSnippet;
+                return $.get($5);
               },
               onSelect: (e) => handleClick(e, $.get(annotation)),
               get style() {
@@ -1483,7 +1976,7 @@ function Annotations($$anchor, $$props) {
           ));
         }
       };
-      var alternate_10 = ($$anchor3) => {
+      var alternate_11 = ($$anchor3) => {
         var fragment_4 = $.comment();
         var node_2 = $.first_child(fragment_4);
         {
@@ -1500,40 +1993,43 @@ function Annotations($$anchor, $$props) {
                   onClick: (e) => handleClick(e, $.get(annotation))
                 }));
               };
-              let $0 = $.derived(() => {
-                var _a;
-                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
-              });
+              let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
               let $1 = $.derived(() => {
                 var _a;
-                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+                return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isMultiSelected);
               });
               let $2 = $.derived(() => {
+                var _a;
+                return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true) && !$.get(isMultiSelected);
+              });
+              let $3 = $.derived(() => {
                 var _a;
                 return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
               });
+              let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+              let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
               AnnotationContainer($$anchor4, $.spread_props(
                 {
                   get trackedAnnotation() {
                     return $.get(annotation);
                   },
                   get isSelected() {
-                    return $.get(isSelected);
+                    return $.get($0);
                   },
                   get isDraggable() {
-                    return $.get($0);
+                    return $.get($1);
                   },
                   get isResizable() {
-                    return $.get($1);
+                    return $.get($2);
                   },
                   get lockAspectRatio() {
-                    return $.get($2);
+                    return $.get($3);
                   },
                   get selectionMenu() {
-                    return $$props.selectionMenu;
+                    return $.get($4);
                   },
                   get selectionMenuSnippet() {
-                    return $$props.selectionMenuSnippet;
+                    return $.get($5);
                   },
                   onSelect: (e) => handleClick(e, $.get(annotation)),
                   get style() {
@@ -1545,7 +2041,7 @@ function Annotations($$anchor, $$props) {
               ));
             }
           };
-          var alternate_9 = ($$anchor4) => {
+          var alternate_10 = ($$anchor4) => {
             var fragment_7 = $.comment();
             var node_3 = $.first_child(fragment_7);
             {
@@ -1562,40 +2058,43 @@ function Annotations($$anchor, $$props) {
                       onClick: (e) => handleClick(e, $.get(annotation))
                     }));
                   };
-                  let $0 = $.derived(() => {
-                    var _a;
-                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
-                  });
+                  let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                   let $1 = $.derived(() => {
                     var _a;
-                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isMultiSelected);
                   });
                   let $2 = $.derived(() => {
+                    var _a;
+                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true) && !$.get(isMultiSelected);
+                  });
+                  let $3 = $.derived(() => {
                     var _a;
                     return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                   });
+                  let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                  let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                   AnnotationContainer($$anchor5, $.spread_props(
                     {
                       get trackedAnnotation() {
                         return $.get(annotation);
                       },
                       get isSelected() {
-                        return $.get(isSelected);
+                        return $.get($0);
                       },
                       get isDraggable() {
-                        return $.get($0);
+                        return $.get($1);
                       },
                       get isResizable() {
-                        return $.get($1);
+                        return $.get($2);
                       },
                       get lockAspectRatio() {
-                        return $.get($2);
+                        return $.get($3);
                       },
                       get selectionMenu() {
-                        return $$props.selectionMenu;
+                        return $.get($4);
                       },
                       get selectionMenuSnippet() {
-                        return $$props.selectionMenuSnippet;
+                        return $.get($5);
                       },
                       onSelect: (e) => handleClick(e, $.get(annotation)),
                       get style() {
@@ -1607,7 +2106,7 @@ function Annotations($$anchor, $$props) {
                   ));
                 }
               };
-              var alternate_8 = ($$anchor5) => {
+              var alternate_9 = ($$anchor5) => {
                 var fragment_10 = $.comment();
                 var node_4 = $.first_child(fragment_10);
                 {
@@ -1621,40 +2120,43 @@ function Annotations($$anchor, $$props) {
                           onClick: (e) => handleClick(e, $.get(annotation))
                         }));
                       };
-                      let $0 = $.derived(() => {
-                        var _a;
-                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
-                      });
+                      let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                       let $1 = $.derived(() => {
                         var _a;
-                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                        return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false) && !$.get(isMultiSelected);
                       });
                       let $2 = $.derived(() => {
+                        var _a;
+                        return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false) && !$.get(isMultiSelected);
+                      });
+                      let $3 = $.derived(() => {
                         var _a;
                         return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                       });
+                      let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                      let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                       AnnotationContainer($$anchor6, $.spread_props(
                         {
                           get trackedAnnotation() {
                             return $.get(annotation);
                           },
                           get isSelected() {
-                            return $.get(isSelected);
+                            return $.get($0);
                           },
                           get isDraggable() {
-                            return $.get($0);
+                            return $.get($1);
                           },
                           get isResizable() {
-                            return $.get($1);
+                            return $.get($2);
                           },
                           get lockAspectRatio() {
-                            return $.get($2);
+                            return $.get($3);
                           },
                           get selectionMenu() {
-                            return $$props.selectionMenu;
+                            return $.get($4);
                           },
                           get selectionMenuSnippet() {
-                            return $$props.selectionMenuSnippet;
+                            return $.get($5);
                           },
                           onSelect: (e) => handleClick(e, $.get(annotation)),
                           zIndex: 0,
@@ -1667,7 +2169,7 @@ function Annotations($$anchor, $$props) {
                       ));
                     }
                   };
-                  var alternate_7 = ($$anchor6) => {
+                  var alternate_8 = ($$anchor6) => {
                     var fragment_13 = $.comment();
                     var node_5 = $.first_child(fragment_13);
                     {
@@ -1681,40 +2183,43 @@ function Annotations($$anchor, $$props) {
                               onClick: (e) => handleClick(e, $.get(annotation))
                             }));
                           };
-                          let $0 = $.derived(() => {
-                            var _a;
-                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
-                          });
+                          let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                           let $1 = $.derived(() => {
                             var _a;
-                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                            return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false) && !$.get(isMultiSelected);
                           });
                           let $2 = $.derived(() => {
+                            var _a;
+                            return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false) && !$.get(isMultiSelected);
+                          });
+                          let $3 = $.derived(() => {
                             var _a;
                             return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                           });
+                          let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                          let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                           AnnotationContainer($$anchor7, $.spread_props(
                             {
                               get trackedAnnotation() {
                                 return $.get(annotation);
                               },
                               get isSelected() {
-                                return $.get(isSelected);
+                                return $.get($0);
                               },
                               get isDraggable() {
-                                return $.get($0);
+                                return $.get($1);
                               },
                               get isResizable() {
-                                return $.get($1);
+                                return $.get($2);
                               },
                               get lockAspectRatio() {
-                                return $.get($2);
+                                return $.get($3);
                               },
                               get selectionMenu() {
-                                return $$props.selectionMenu;
+                                return $.get($4);
                               },
                               get selectionMenuSnippet() {
-                                return $$props.selectionMenuSnippet;
+                                return $.get($5);
                               },
                               onSelect: (e) => handleClick(e, $.get(annotation)),
                               zIndex: 0,
@@ -1727,7 +2232,7 @@ function Annotations($$anchor, $$props) {
                           ));
                         }
                       };
-                      var alternate_6 = ($$anchor7) => {
+                      var alternate_7 = ($$anchor7) => {
                         var fragment_16 = $.comment();
                         var node_6 = $.first_child(fragment_16);
                         {
@@ -1741,40 +2246,43 @@ function Annotations($$anchor, $$props) {
                                   onClick: (e) => handleClick(e, $.get(annotation))
                                 }));
                               };
-                              let $0 = $.derived(() => {
-                                var _a;
-                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
-                              });
+                              let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                               let $1 = $.derived(() => {
                                 var _a;
-                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false) && !$.get(isMultiSelected);
                               });
                               let $2 = $.derived(() => {
+                                var _a;
+                                return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false) && !$.get(isMultiSelected);
+                              });
+                              let $3 = $.derived(() => {
                                 var _a;
                                 return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                               });
+                              let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                              let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                               AnnotationContainer($$anchor8, $.spread_props(
                                 {
                                   get trackedAnnotation() {
                                     return $.get(annotation);
                                   },
                                   get isSelected() {
-                                    return $.get(isSelected);
+                                    return $.get($0);
                                   },
                                   get isDraggable() {
-                                    return $.get($0);
+                                    return $.get($1);
                                   },
                                   get isResizable() {
-                                    return $.get($1);
+                                    return $.get($2);
                                   },
                                   get lockAspectRatio() {
-                                    return $.get($2);
+                                    return $.get($3);
                                   },
                                   get selectionMenu() {
-                                    return $$props.selectionMenu;
+                                    return $.get($4);
                                   },
                                   get selectionMenuSnippet() {
-                                    return $$props.selectionMenuSnippet;
+                                    return $.get($5);
                                   },
                                   onSelect: (e) => handleClick(e, $.get(annotation)),
                                   zIndex: 0,
@@ -1787,7 +2295,7 @@ function Annotations($$anchor, $$props) {
                               ));
                             }
                           };
-                          var alternate_5 = ($$anchor8) => {
+                          var alternate_6 = ($$anchor8) => {
                             var fragment_19 = $.comment();
                             var node_7 = $.first_child(fragment_19);
                             {
@@ -1801,46 +2309,49 @@ function Annotations($$anchor, $$props) {
                                       onClick: (e) => handleClick(e, $.get(annotation))
                                     }));
                                   };
-                                  let $0 = $.derived(() => {
-                                    var _a;
-                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
-                                  });
+                                  let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                                   let $1 = $.derived(() => {
                                     var _a;
-                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? false) && !$.get(isMultiSelected);
                                   });
                                   let $2 = $.derived(() => {
+                                    var _a;
+                                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false) && !$.get(isMultiSelected);
+                                  });
+                                  let $3 = $.derived(() => {
                                     var _a;
                                     return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                                   });
-                                  let $3 = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Multiply));
+                                  let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                                  let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
+                                  let $6 = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Multiply));
                                   AnnotationContainer($$anchor9, $.spread_props(
                                     {
                                       get trackedAnnotation() {
                                         return $.get(annotation);
                                       },
                                       get isSelected() {
-                                        return $.get(isSelected);
+                                        return $.get($0);
                                       },
                                       get isDraggable() {
-                                        return $.get($0);
+                                        return $.get($1);
                                       },
                                       get isResizable() {
-                                        return $.get($1);
+                                        return $.get($2);
                                       },
                                       get lockAspectRatio() {
-                                        return $.get($2);
+                                        return $.get($3);
                                       },
                                       onSelect: (e) => handleClick(e, $.get(annotation)),
                                       zIndex: 0,
                                       get selectionMenu() {
-                                        return $$props.selectionMenu;
+                                        return $.get($4);
                                       },
                                       get selectionMenuSnippet() {
-                                        return $$props.selectionMenuSnippet;
+                                        return $.get($5);
                                       },
                                       get style() {
-                                        return `mix-blend-mode: ${$.get($3) ?? ""}`;
+                                        return `mix-blend-mode: ${$.get($6) ?? ""}`;
                                       }
                                     },
                                     () => annotationsProps,
@@ -1848,7 +2359,7 @@ function Annotations($$anchor, $$props) {
                                   ));
                                 }
                               };
-                              var alternate_4 = ($$anchor9) => {
+                              var alternate_5 = ($$anchor9) => {
                                 var fragment_22 = $.comment();
                                 var node_8 = $.first_child(fragment_22);
                                 {
@@ -1865,40 +2376,43 @@ function Annotations($$anchor, $$props) {
                                           onClick: (e) => handleClick(e, $.get(annotation))
                                         }));
                                       };
-                                      let $0 = $.derived(() => {
-                                        var _a;
-                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
-                                      });
+                                      let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                                       let $1 = $.derived(() => {
                                         var _a;
-                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                        return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isMultiSelected);
                                       });
                                       let $2 = $.derived(() => {
+                                        var _a;
+                                        return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false) && !$.get(isMultiSelected);
+                                      });
+                                      let $3 = $.derived(() => {
                                         var _a;
                                         return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                                       });
+                                      let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                                      let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                                       AnnotationContainer($$anchor10, $.spread_props(
                                         {
                                           get trackedAnnotation() {
                                             return $.get(annotation);
                                           },
                                           get isSelected() {
-                                            return $.get(isSelected);
+                                            return $.get($0);
                                           },
                                           get isDraggable() {
-                                            return $.get($0);
+                                            return $.get($1);
                                           },
                                           get isResizable() {
-                                            return $.get($1);
+                                            return $.get($2);
                                           },
                                           get lockAspectRatio() {
-                                            return $.get($2);
+                                            return $.get($3);
                                           },
                                           get selectionMenu() {
-                                            return $$props.selectionMenu;
+                                            return $.get($4);
                                           },
                                           get selectionMenuSnippet() {
-                                            return $$props.selectionMenuSnippet;
+                                            return $.get($5);
                                           },
                                           onSelect: (e) => handleClick(e, $.get(annotation)),
                                           vertexConfig: {
@@ -1914,7 +2428,7 @@ function Annotations($$anchor, $$props) {
                                       ));
                                     }
                                   };
-                                  var alternate_3 = ($$anchor10) => {
+                                  var alternate_4 = ($$anchor10) => {
                                     var fragment_25 = $.comment();
                                     var node_9 = $.first_child(fragment_25);
                                     {
@@ -1931,40 +2445,43 @@ function Annotations($$anchor, $$props) {
                                               onClick: (e) => handleClick(e, $.get(annotation))
                                             }));
                                           };
-                                          let $0 = $.derived(() => {
+                                          let $0 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                                          let $1 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
+                                          let $2 = $.derived(() => {
                                             var _a;
-                                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
+                                            return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isMultiSelected);
                                           });
-                                          let $1 = $.derived(() => {
+                                          let $3 = $.derived(() => {
                                             var _a;
-                                            return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                            return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false) && !$.get(isMultiSelected);
                                           });
-                                          let $2 = $.derived(() => {
+                                          let $4 = $.derived(() => {
                                             var _a;
                                             return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                                           });
+                                          let $5 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                                           AnnotationContainer($$anchor11, $.spread_props(
                                             {
                                               get trackedAnnotation() {
                                                 return $.get(annotation);
                                               },
                                               get selectionMenu() {
-                                                return $$props.selectionMenu;
+                                                return $.get($0);
                                               },
                                               get selectionMenuSnippet() {
-                                                return $$props.selectionMenuSnippet;
+                                                return $.get($1);
                                               },
                                               get isDraggable() {
-                                                return $.get($0);
+                                                return $.get($2);
                                               },
                                               get isResizable() {
-                                                return $.get($1);
+                                                return $.get($3);
                                               },
                                               get lockAspectRatio() {
-                                                return $.get($2);
+                                                return $.get($4);
                                               },
                                               get isSelected() {
-                                                return $.get(isSelected);
+                                                return $.get($5);
                                               },
                                               onSelect: (e) => handleClick(e, $.get(annotation)),
                                               vertexConfig: {
@@ -1980,7 +2497,7 @@ function Annotations($$anchor, $$props) {
                                           ));
                                         }
                                       };
-                                      var alternate_2 = ($$anchor11) => {
+                                      var alternate_3 = ($$anchor11) => {
                                         var fragment_28 = $.comment();
                                         var node_10 = $.first_child(fragment_28);
                                         {
@@ -1997,40 +2514,43 @@ function Annotations($$anchor, $$props) {
                                                   onClick: (e) => handleClick(e, $.get(annotation))
                                                 }));
                                               };
-                                              let $0 = $.derived(() => {
-                                                var _a;
-                                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
-                                              });
+                                              let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                                               let $1 = $.derived(() => {
                                                 var _a;
-                                                return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false;
+                                                return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isMultiSelected);
                                               });
                                               let $2 = $.derived(() => {
+                                                var _a;
+                                                return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? false) && !$.get(isMultiSelected);
+                                              });
+                                              let $3 = $.derived(() => {
                                                 var _a;
                                                 return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                                               });
+                                              let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                                              let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                                               AnnotationContainer($$anchor12, $.spread_props(
                                                 {
                                                   get trackedAnnotation() {
                                                     return $.get(annotation);
                                                   },
                                                   get isSelected() {
-                                                    return $.get(isSelected);
+                                                    return $.get($0);
                                                   },
                                                   get isDraggable() {
-                                                    return $.get($0);
+                                                    return $.get($1);
                                                   },
                                                   get isResizable() {
-                                                    return $.get($1);
+                                                    return $.get($2);
                                                   },
                                                   get lockAspectRatio() {
-                                                    return $.get($2);
+                                                    return $.get($3);
                                                   },
                                                   get selectionMenu() {
-                                                    return $$props.selectionMenu;
+                                                    return $.get($4);
                                                   },
                                                   get selectionMenuSnippet() {
-                                                    return $$props.selectionMenuSnippet;
+                                                    return $.get($5);
                                                   },
                                                   onSelect: (e) => handleClick(e, $.get(annotation)),
                                                   vertexConfig: {
@@ -2046,7 +2566,7 @@ function Annotations($$anchor, $$props) {
                                               ));
                                             }
                                           };
-                                          var alternate_1 = ($$anchor12) => {
+                                          var alternate_2 = ($$anchor12) => {
                                             var fragment_31 = $.comment();
                                             var node_11 = $.first_child(fragment_31);
                                             {
@@ -2078,45 +2598,48 @@ function Annotations($$anchor, $$props) {
                                                       });
                                                     }
                                                   };
-                                                  let $0 = $.derived(() => {
-                                                    var _a;
-                                                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isEditing);
-                                                  });
+                                                  let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                                                   let $1 = $.derived(() => {
                                                     var _a;
-                                                    return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+                                                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isEditing) && !$.get(isMultiSelected);
                                                   });
                                                   let $2 = $.derived(() => {
+                                                    var _a;
+                                                    return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true) && !$.get(isMultiSelected);
+                                                  });
+                                                  let $3 = $.derived(() => {
                                                     var _a;
                                                     return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                                                   });
-                                                  let $3 = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Normal));
+                                                  let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                                                  let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
+                                                  let $6 = $.derived(() => blendModeToCss($.get(annotation).object.blendMode ?? PdfBlendMode.Normal));
                                                   AnnotationContainer($$anchor13, $.spread_props(
                                                     {
                                                       get trackedAnnotation() {
                                                         return $.get(annotation);
                                                       },
                                                       get isSelected() {
-                                                        return $.get(isSelected);
+                                                        return $.get($0);
                                                       },
                                                       get isDraggable() {
-                                                        return $.get($0);
+                                                        return $.get($1);
                                                       },
                                                       get isResizable() {
-                                                        return $.get($1);
+                                                        return $.get($2);
                                                       },
                                                       get lockAspectRatio() {
-                                                        return $.get($2);
+                                                        return $.get($3);
                                                       },
                                                       get selectionMenu() {
-                                                        return $$props.selectionMenu;
+                                                        return $.get($4);
                                                       },
                                                       get selectionMenuSnippet() {
-                                                        return $$props.selectionMenuSnippet;
+                                                        return $.get($5);
                                                       },
                                                       onSelect: (e) => handleClick(e, $.get(annotation)),
                                                       get style() {
-                                                        return `mix-blend-mode: ${$.get($3) ?? ""}`;
+                                                        return `mix-blend-mode: ${$.get($6) ?? ""}`;
                                                       },
                                                       onDoubleClick: (e) => {
                                                         e.stopPropagation();
@@ -2128,7 +2651,7 @@ function Annotations($$anchor, $$props) {
                                                   ));
                                                 }
                                               };
-                                              var alternate = ($$anchor13) => {
+                                              var alternate_1 = ($$anchor13) => {
                                                 var fragment_34 = $.comment();
                                                 var node_12 = $.first_child(fragment_34);
                                                 {
@@ -2154,40 +2677,43 @@ function Annotations($$anchor, $$props) {
                                                           onClick: (e) => handleClick(e, $.get(annotation))
                                                         });
                                                       };
-                                                      let $0 = $.derived(() => {
-                                                        var _a;
-                                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true;
-                                                      });
+                                                      let $0 = $.derived(() => $.get(isSelected) && !$.get(isMultiSelected));
                                                       let $1 = $.derived(() => {
                                                         var _a;
-                                                        return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true;
+                                                        return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isDraggable) ?? true) && !$.get(isMultiSelected);
                                                       });
                                                       let $2 = $.derived(() => {
+                                                        var _a;
+                                                        return (((_a = $.get(tool)) == null ? void 0 : _a.interaction.isResizable) ?? true) && !$.get(isMultiSelected);
+                                                      });
+                                                      let $3 = $.derived(() => {
                                                         var _a;
                                                         return ((_a = $.get(tool)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
                                                       });
+                                                      let $4 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenu);
+                                                      let $5 = $.derived(() => $.get(isMultiSelected) ? void 0 : $$props.selectionMenuSnippet);
                                                       AnnotationContainer($$anchor14, $.spread_props(
                                                         {
                                                           get trackedAnnotation() {
                                                             return $.get(annotation);
                                                           },
                                                           get isSelected() {
-                                                            return $.get(isSelected);
+                                                            return $.get($0);
                                                           },
                                                           get isDraggable() {
-                                                            return $.get($0);
+                                                            return $.get($1);
                                                           },
                                                           get isResizable() {
-                                                            return $.get($1);
+                                                            return $.get($2);
                                                           },
                                                           get lockAspectRatio() {
-                                                            return $.get($2);
+                                                            return $.get($3);
                                                           },
                                                           get selectionMenu() {
-                                                            return $$props.selectionMenu;
+                                                            return $.get($4);
                                                           },
                                                           get selectionMenuSnippet() {
-                                                            return $$props.selectionMenuSnippet;
+                                                            return $.get($5);
                                                           },
                                                           onSelect: (e) => handleClick(e, $.get(annotation)),
                                                           get style() {
@@ -2199,10 +2725,75 @@ function Annotations($$anchor, $$props) {
                                                       ));
                                                     }
                                                   };
+                                                  var alternate = ($$anchor14) => {
+                                                    var fragment_37 = $.comment();
+                                                    var node_13 = $.first_child(fragment_37);
+                                                    {
+                                                      var consequent_12 = ($$anchor15) => {
+                                                        const hasIRT = $.derived(() => !!$.get(annotation).object.inReplyToId);
+                                                        {
+                                                          const children = ($$anchor16, obj = $.noop) => {
+                                                            Link($$anchor16, $.spread_props(obj, {
+                                                              get isSelected() {
+                                                                return $.get(isSelected);
+                                                              },
+                                                              get scale() {
+                                                                return $$props.scale;
+                                                              },
+                                                              onClick: (e) => handleLinkClick(e, $.get(annotation)),
+                                                              get hasIRT() {
+                                                                return $.get(hasIRT);
+                                                              }
+                                                            }));
+                                                          };
+                                                          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);
+                                                          AnnotationContainer($$anchor15, $.spread_props(
+                                                            {
+                                                              get trackedAnnotation() {
+                                                                return $.get(annotation);
+                                                              },
+                                                              get isSelected() {
+                                                                return $.get($0);
+                                                              },
+                                                              get isMultiSelected() {
+                                                                return $.get(isMultiSelected);
+                                                              },
+                                                              isDraggable: false,
+                                                              isResizable: false,
+                                                              lockAspectRatio: false,
+                                                              get selectionMenu() {
+                                                                return $.get($1);
+                                                              },
+                                                              get selectionMenuSnippet() {
+                                                                return $.get($2);
+                                                              },
+                                                              onSelect: (e) => handleLinkClick(e, $.get(annotation)),
+                                                              get style() {
+                                                                return `mix-blend-mode: ${$.get(mixBlendMode) ?? ""}`;
+                                                              }
+                                                            },
+                                                            () => annotationsProps,
+                                                            { children, $$slots: { default: true } }
+                                                          ));
+                                                        }
+                                                      };
+                                                      $.if(
+                                                        node_13,
+                                                        ($$render) => {
+                                                          if (isLink($.get(annotation))) $$render(consequent_12);
+                                                        },
+                                                        true
+                                                      );
+                                                    }
+                                                    $.append($$anchor14, fragment_37);
+                                                  };
                                                   $.if(
                                                     node_12,
                                                     ($$render) => {
                                                       if (isStamp($.get(annotation))) $$render(consequent_11);
+                                                      else $$render(alternate, false);
                                                     },
                                                     true
                                                   );
@@ -2213,7 +2804,7 @@ function Annotations($$anchor, $$props) {
                                                 node_11,
                                                 ($$render) => {
                                                   if (isFreeText($.get(annotation))) $$render(consequent_10);
-                                                  else $$render(alternate, false);
+                                                  else $$render(alternate_1, false);
                                                 },
                                                 true
                                               );
@@ -2224,7 +2815,7 @@ function Annotations($$anchor, $$props) {
                                             node_10,
                                             ($$render) => {
                                               if (isPolygon($.get(annotation))) $$render(consequent_9);
-                                              else $$render(alternate_1, false);
+                                              else $$render(alternate_2, false);
                                             },
                                             true
                                           );
@@ -2235,7 +2826,7 @@ function Annotations($$anchor, $$props) {
                                         node_9,
                                         ($$render) => {
                                           if (isPolyline($.get(annotation))) $$render(consequent_8);
-                                          else $$render(alternate_2, false);
+                                          else $$render(alternate_3, false);
                                         },
                                         true
                                       );
@@ -2246,7 +2837,7 @@ function Annotations($$anchor, $$props) {
                                     node_8,
                                     ($$render) => {
                                       if (isLine($.get(annotation))) $$render(consequent_7);
-                                      else $$render(alternate_3, false);
+                                      else $$render(alternate_4, false);
                                     },
                                     true
                                   );
@@ -2257,7 +2848,7 @@ function Annotations($$anchor, $$props) {
                                 node_7,
                                 ($$render) => {
                                   if (isHighlight($.get(annotation))) $$render(consequent_6);
-                                  else $$render(alternate_4, false);
+                                  else $$render(alternate_5, false);
                                 },
                                 true
                               );
@@ -2268,7 +2859,7 @@ function Annotations($$anchor, $$props) {
                             node_6,
                             ($$render) => {
                               if (isSquiggly($.get(annotation))) $$render(consequent_5);
-                              else $$render(alternate_5, false);
+                              else $$render(alternate_6, false);
                             },
                             true
                           );
@@ -2279,7 +2870,7 @@ function Annotations($$anchor, $$props) {
                         node_5,
                         ($$render) => {
                           if (isStrikeout($.get(annotation))) $$render(consequent_4);
-                          else $$render(alternate_6, false);
+                          else $$render(alternate_7, false);
                         },
                         true
                       );
@@ -2290,7 +2881,7 @@ function Annotations($$anchor, $$props) {
                     node_4,
                     ($$render) => {
                       if (isUnderline($.get(annotation))) $$render(consequent_3);
-                      else $$render(alternate_7, false);
+                      else $$render(alternate_8, false);
                     },
                     true
                   );
@@ -2301,7 +2892,7 @@ function Annotations($$anchor, $$props) {
                 node_3,
                 ($$render) => {
                   if (isCircle($.get(annotation))) $$render(consequent_2);
-                  else $$render(alternate_8, false);
+                  else $$render(alternate_9, false);
                 },
                 true
               );
@@ -2312,7 +2903,7 @@ function Annotations($$anchor, $$props) {
             node_2,
             ($$render) => {
               if (isSquare($.get(annotation))) $$render(consequent_1);
-              else $$render(alternate_9, false);
+              else $$render(alternate_10, false);
             },
             true
           );
@@ -2321,11 +2912,60 @@ function Annotations($$anchor, $$props) {
       };
       $.if(node_1, ($$render) => {
         if (isInk($.get(annotation))) $$render(consequent);
-        else $$render(alternate_10, false);
+        else $$render(alternate_11, false);
       });
     }
     $.append($$anchor2, fragment_1);
   });
+  var node_14 = $.sibling(node, 2);
+  {
+    var consequent_13 = ($$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;
+        }
+      });
+    };
+    $.if(node_14, ($$render) => {
+      if ($.get(allSelectedOnSamePage) && $.get(selectedAnnotationsOnPage).length >= 2) $$render(consequent_13);
+    });
+  }
   $.append($$anchor, fragment);
   $.pop();
 }
@@ -2376,14 +3016,14 @@ function TextMarkup($$anchor, $$props) {
           {
             let $0 = $.derived(() => {
               var _a;
-              return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+              return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.strokeColor;
             });
             let $1 = $.derived(() => {
               var _a;
               return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
             });
             Underline(node_2, {
-              get color() {
+              get strokeColor() {
                 return $.get($0);
               },
               get opacity() {
@@ -2417,14 +3057,14 @@ function TextMarkup($$anchor, $$props) {
               {
                 let $0 = $.derived(() => {
                   var _a;
-                  return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+                  return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.strokeColor;
                 });
                 let $1 = $.derived(() => {
                   var _a;
                   return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
                 });
                 Highlight(node_4, {
-                  get color() {
+                  get strokeColor() {
                     return $.get($0);
                   },
                   get opacity() {
@@ -2458,14 +3098,14 @@ function TextMarkup($$anchor, $$props) {
                   {
                     let $0 = $.derived(() => {
                       var _a;
-                      return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+                      return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.strokeColor;
                     });
                     let $1 = $.derived(() => {
                       var _a;
                       return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
                     });
                     Strikeout(node_6, {
-                      get color() {
+                      get strokeColor() {
                         return $.get($0);
                       },
                       get opacity() {
@@ -2499,14 +3139,14 @@ function TextMarkup($$anchor, $$props) {
                       {
                         let $0 = $.derived(() => {
                           var _a;
-                          return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.color;
+                          return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.strokeColor;
                         });
                         let $1 = $.derived(() => {
                           var _a;
                           return (_a = $.get(activeTool).defaults) == null ? void 0 : _a.opacity;
                         });
                         Squiggly(node_8, {
-                          get color() {
+                          get strokeColor() {
                             return $.get($0);
                           },
                           get opacity() {
@@ -2963,6 +3603,8 @@ function AnnotationLayer($$anchor, $$props) {
     "rotation",
     "selectionMenu",
     "selectionMenuSnippet",
+    "groupSelectionMenu",
+    "groupSelectionMenuSnippet",
     "resizeUI",
     "vertexUI",
     "selectionOutlineColor",
@@ -3004,6 +3646,12 @@ function AnnotationLayer($$anchor, $$props) {
     get selectionMenuSnippet() {
       return $$props.selectionMenuSnippet;
     },
+    get groupSelectionMenu() {
+      return $$props.groupSelectionMenu;
+    },
+    get groupSelectionMenuSnippet() {
+      return $$props.groupSelectionMenuSnippet;
+    },
     get pageIndex() {
       return $$props.pageIndex;
     },
@@ -3067,9 +3715,11 @@ export {
   Annotations,
   Circle,
   FreeText,
+  GroupSelectionBox,
   Highlight,
   Ink,
   Line,
+  Link,
   Polygon,
   Polyline,
   PreviewRenderer,