@embedpdf/plugin-annotation 2.2.0 → 2.3.0

package/dist/preact/index.js

@@ -1,10 +1,10 @@
 import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/preact";
-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 { Fragment as Fragment$1 } from "preact";
-import { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } from "preact/hooks";
+import { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect } from "preact/hooks";
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
+import { boundingRectOrEmpty, PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/preact";
 import { useInteractionHandles, useDoublePressProps, CounterRotate } from "@embedpdf/utils/preact";
@@ -40,6 +40,7 @@ function AnnotationContainer({
   trackedAnnotation,
   children,
   isSelected,
+  isMultiSelected = false,
   isDraggable,
   isResizable,
   lockAspectRatio = false,
@@ -58,10 +59,11 @@ function AnnotationContainer({
 }) {
   const [preview, setPreview] = useState(trackedAnnotation.object);
   const { provides: annotationCapability } = useAnnotationCapability();
+  const { plugin } = useAnnotationPlugin();
   const { canModifyAnnotations } = useDocumentPermissions(documentId);
   const gestureBaseRef = useRef(null);
-  const effectiveIsDraggable = canModifyAnnotations && isDraggable;
-  const effectiveIsResizable = canModifyAnnotations && isResizable;
+  const effectiveIsDraggable = canModifyAnnotations && isDraggable && !isMultiSelected;
+  const effectiveIsResizable = canModifyAnnotations && isResizable && !isMultiSelected;
   const annotationProvides = useMemo(
     () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
     [annotationCapability, documentId]
@@ -71,6 +73,73 @@ function AnnotationContainer({
   const VERTEX_COLOR = (vertexUI == null ? void 0 : vertexUI.color) ?? "#007ACC";
   const HANDLE_SIZE = (resizeUI == null ? void 0 : resizeUI.size) ?? 12;
   const VERTEX_SIZE = (vertexUI == null ? void 0 : vertexUI.size) ?? 12;
+  const gestureBaseRectRef = useRef(null);
+  const handleUpdate = useCallback(
+    (event) => {
+      var _a;
+      if (!((_a = event.transformData) == null ? void 0 : _a.type) || isMultiSelected || !plugin) return;
+      const { type, changes, metadata } = event.transformData;
+      const id = trackedAnnotation.object.id;
+      const pageSize = { width: pageWidth, height: pageHeight };
+      if (event.state === "start") {
+        gestureBaseRectRef.current = trackedAnnotation.object.rect;
+        gestureBaseRef.current = trackedAnnotation.object;
+        if (type === "move") {
+          plugin.startDrag(documentId, { annotationIds: [id], pageSize });
+        } else if (type === "resize") {
+          plugin.startResize(documentId, {
+            annotationIds: [id],
+            pageSize,
+            resizeHandle: (metadata == null ? void 0 : metadata.handle) ?? "se"
+          });
+        }
+      }
+      if (changes.rect && gestureBaseRectRef.current) {
+        if (type === "move") {
+          const delta = {
+            x: changes.rect.origin.x - gestureBaseRectRef.current.origin.x,
+            y: changes.rect.origin.y - gestureBaseRectRef.current.origin.y
+          };
+          plugin.updateDrag(documentId, delta);
+        } else if (type === "resize") {
+          plugin.updateResize(documentId, changes.rect);
+        }
+      }
+      if (type === "vertex-edit" && changes.vertices && vertexConfig) {
+        const base = gestureBaseRef.current ?? trackedAnnotation.object;
+        const vertexChanges = vertexConfig.transformAnnotation(base, changes.vertices);
+        const patched = annotationCapability == null ? void 0 : annotationCapability.transformAnnotation(base, {
+          type,
+          changes: vertexChanges,
+          metadata
+        });
+        if (patched) {
+          setPreview((prev) => ({ ...prev, ...patched }));
+          if (event.state === "end") {
+            annotationProvides == null ? void 0 : annotationProvides.updateAnnotation(pageIndex, id, patched);
+          }
+        }
+      }
+      if (event.state === "end") {
+        gestureBaseRectRef.current = null;
+        gestureBaseRef.current = null;
+        if (type === "move") plugin.commitDrag(documentId);
+        else if (type === "resize") plugin.commitResize(documentId);
+      }
+    },
+    [
+      plugin,
+      documentId,
+      trackedAnnotation.object,
+      pageWidth,
+      pageHeight,
+      pageIndex,
+      isMultiSelected,
+      vertexConfig,
+      annotationCapability,
+      annotationProvides
+    ]
+  );
   const { dragProps, vertices, resize } = useInteractionHandles({
     controller: {
       element: currentObject.rect,
@@ -83,32 +152,9 @@ function AnnotationContainer({
       maintainAspectRatio: lockAspectRatio,
       pageRotation: rotation,
       scale,
-      enabled: isSelected,
-      onUpdate: (event) => {
-        var _a;
-        if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
-        if (event.state === "start") {
-          gestureBaseRef.current = currentObject;
-        }
-        const transformType = event.transformData.type;
-        const base = gestureBaseRef.current ?? currentObject;
-        const changes = event.transformData.changes.vertices ? vertexConfig == null ? void 0 : vertexConfig.transformAnnotation(base, event.transformData.changes.vertices) : { rect: event.transformData.changes.rect };
-        const patched = annotationCapability == null ? void 0 : annotationCapability.transformAnnotation(base, {
-          type: transformType,
-          changes,
-          metadata: event.transformData.metadata
-        });
-        if (patched) {
-          setPreview((prev) => ({
-            ...prev,
-            ...patched
-          }));
-        }
-        if (event.state === "end" && patched) {
-          gestureBaseRef.current = null;
-          annotationProvides == null ? void 0 : annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.object.id, patched);
-        }
-      }
+      // Disable interaction handles when multi-selected
+      enabled: isSelected && !isMultiSelected,
+      onUpdate: handleUpdate
     },
     resizeUI: {
       handleSize: HANDLE_SIZE,
@@ -131,6 +177,20 @@ function AnnotationContainer({
   useEffect(() => {
     setPreview(trackedAnnotation.object);
   }, [trackedAnnotation.object]);
+  useEffect(() => {
+    if (!plugin) return;
+    const id = trackedAnnotation.object.id;
+    const handleEvent = (event) => {
+      var _a;
+      if (event.documentId !== documentId) return;
+      const patch = (_a = event.previewPatches) == null ? void 0 : _a[id];
+      if (event.type === "update" && patch) setPreview((prev) => ({ ...prev, ...patch }));
+      else if (event.type === "cancel") setPreview(trackedAnnotation.object);
+    };
+    const unsubs = [plugin.onDragChange(handleEvent), plugin.onResizeChange(handleEvent)];
+    return () => unsubs.forEach((u) => u());
+  }, [plugin, documentId, trackedAnnotation.object]);
+  const showOutline = isSelected && !isMultiSelected;
   return /* @__PURE__ */ jsxs("div", { "data-no-interaction": true, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -143,9 +203,9 @@ function AnnotationContainer({
           top: currentObject.rect.origin.y * scale,
           width: currentObject.rect.size.width * scale,
           height: currentObject.rect.size.height * scale,
-          outline: isSelected ? `1px solid ${selectionOutlineColor}` : "none",
-          outlineOffset: isSelected ? `${outlineOffset}px` : "0px",
-          pointerEvents: isSelected ? "auto" : "none",
+          outline: showOutline ? `1px solid ${selectionOutlineColor}` : "none",
+          outlineOffset: showOutline ? `${outlineOffset}px` : "0px",
+          pointerEvents: isSelected && !isMultiSelected ? "auto" : "none",
           touchAction: "none",
           cursor: isSelected && effectiveIsDraggable ? "move" : "default",
           zIndex,
@@ -185,7 +245,7 @@ function AnnotationContainer({
               key
             )
           ),
-          isSelected && canModifyAnnotations && vertices.map(
+          isSelected && canModifyAnnotations && !isMultiSelected && vertices.map(
             ({ key, ...vProps }) => (vertexUI == null ? void 0 : vertexUI.component) ? vertexUI.component({
               key,
               ...vProps,
@@ -202,7 +262,7 @@ function AnnotationContainer({
         ]
       }
     ),
-    selectionMenu && /* @__PURE__ */ jsx(
+    selectionMenu && !isMultiSelected && /* @__PURE__ */ jsx(
       CounterRotate,
       {
         rect: {
@@ -216,8 +276,8 @@ function AnnotationContainer({
           }
         },
         rotation,
-        children: (props2) => selectionMenu({
-          ...props2,
+        children: (counterRotateProps) => selectionMenu({
+          ...counterRotateProps,
           context: {
             type: "annotation",
             annotation: trackedAnnotation,
@@ -232,8 +292,194 @@ function AnnotationContainer({
     )
   ] });
 }
+function GroupSelectionBox({
+  documentId,
+  pageIndex,
+  scale,
+  rotation,
+  pageWidth,
+  pageHeight,
+  selectedAnnotations,
+  isDraggable,
+  isResizable,
+  resizeUI,
+  selectionOutlineColor = "#007ACC",
+  outlineOffset = 2,
+  zIndex = 100,
+  groupSelectionMenu
+}) {
+  const { plugin } = useAnnotationPlugin();
+  const gestureBaseRef = useRef(null);
+  const isDraggingRef = useRef(false);
+  const isResizingRef = useRef(false);
+  const groupBox = useMemo(() => {
+    const rects = selectedAnnotations.map((ta) => ta.object.rect);
+    return boundingRectOrEmpty(rects);
+  }, [selectedAnnotations]);
+  const [previewGroupBox, setPreviewGroupBox] = useState(groupBox);
+  useEffect(() => {
+    if (!isDraggingRef.current && !isResizingRef.current) {
+      setPreviewGroupBox(groupBox);
+    }
+  }, [groupBox]);
+  const handleUpdate = useCallback(
+    (event) => {
+      var _a, _b;
+      if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
+      if (!plugin) return;
+      const transformType = event.transformData.type;
+      const isMove = transformType === "move";
+      const isResize = transformType === "resize";
+      if (isMove && !isDraggable) return;
+      if (event.state === "start") {
+        gestureBaseRef.current = groupBox;
+        if (isMove) {
+          isDraggingRef.current = true;
+          plugin.startDrag(documentId, {
+            annotationIds: selectedAnnotations.map((ta) => ta.object.id),
+            pageSize: { width: pageWidth, height: pageHeight }
+          });
+        } else if (isResize) {
+          isResizingRef.current = true;
+          plugin.startResize(documentId, {
+            annotationIds: selectedAnnotations.map((ta) => ta.object.id),
+            pageSize: { width: pageWidth, height: pageHeight },
+            resizeHandle: ((_b = event.transformData.metadata) == null ? void 0 : _b.handle) ?? "se"
+          });
+        }
+      }
+      const base = gestureBaseRef.current ?? groupBox;
+      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(documentId, rawDelta);
+        setPreviewGroupBox({
+          ...base,
+          origin: {
+            x: base.origin.x + clampedDelta.x,
+            y: base.origin.y + clampedDelta.y
+          }
+        });
+      } else if (isResize && event.transformData.changes.rect) {
+        const newGroupBox = event.transformData.changes.rect;
+        plugin.updateResize(documentId, newGroupBox);
+        setPreviewGroupBox(newGroupBox);
+      }
+      if (event.state === "end") {
+        gestureBaseRef.current = null;
+        if (isMove && isDraggingRef.current) {
+          isDraggingRef.current = false;
+          plugin.commitDrag(documentId);
+        } else if (isResize && isResizingRef.current) {
+          isResizingRef.current = false;
+          plugin.commitResize(documentId);
+        }
+      }
+    },
+    [plugin, documentId, pageWidth, pageHeight, groupBox, isDraggable, selectedAnnotations]
+  );
+  const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
+  const HANDLE_SIZE = (resizeUI == null ? void 0 : resizeUI.size) ?? 12;
+  const { dragProps, resize } = useInteractionHandles({
+    controller: {
+      element: previewGroupBox,
+      constraints: {
+        minWidth: 20,
+        minHeight: 20,
+        boundingBox: { width: pageWidth, height: pageHeight }
+      },
+      maintainAspectRatio: false,
+      pageRotation: rotation,
+      scale,
+      enabled: true,
+      onUpdate: handleUpdate
+    },
+    resizeUI: {
+      handleSize: HANDLE_SIZE,
+      spacing: outlineOffset,
+      offsetMode: "outside",
+      includeSides: true,
+      zIndex: zIndex + 1
+    },
+    vertexUI: {
+      vertexSize: 0,
+      zIndex
+    },
+    includeVertices: false
+  });
+  if (selectedAnnotations.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-group-selection-box": true, "data-no-interaction": true, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...isDraggable ? dragProps : {
+          onPointerDown: (e) => e.stopPropagation()
+        },
+        style: {
+          position: "absolute",
+          left: previewGroupBox.origin.x * scale,
+          top: previewGroupBox.origin.y * scale,
+          width: previewGroupBox.size.width * scale,
+          height: previewGroupBox.size.height * scale,
+          outline: `2px dashed ${selectionOutlineColor}`,
+          outlineOffset: outlineOffset - 1,
+          cursor: isDraggable ? "move" : "default",
+          touchAction: "none",
+          zIndex
+        },
+        children: isResizable && resize.map(
+          ({ key, ...hProps }) => (resizeUI == null ? void 0 : resizeUI.component) ? resizeUI.component({
+            key,
+            ...hProps,
+            backgroundColor: HANDLE_COLOR
+          }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...hProps,
+              style: { ...hProps.style, backgroundColor: HANDLE_COLOR }
+            },
+            key
+          )
+        )
+      }
+    ),
+    groupSelectionMenu && /* @__PURE__ */ jsx(
+      CounterRotate,
+      {
+        rect: {
+          origin: {
+            x: previewGroupBox.origin.x * scale,
+            y: previewGroupBox.origin.y * scale
+          },
+          size: {
+            width: previewGroupBox.size.width * scale,
+            height: previewGroupBox.size.height * scale
+          }
+        },
+        rotation,
+        children: (counterRotateProps) => groupSelectionMenu({
+          ...counterRotateProps,
+          context: {
+            type: "group",
+            annotations: selectedAnnotations,
+            pageIndex
+          },
+          selected: true,
+          placement: {
+            suggestTop: false
+          }
+        })
+      }
+    )
+  ] });
+}
 function Highlight({
-  color = "#FFFF00",
+  strokeColor,
   opacity = 0.5,
   segmentRects,
   rect,
@@ -241,6 +487,7 @@ function Highlight({
   onClick,
   style
 }) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
   return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((b, i) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -252,7 +499,7 @@ function Highlight({
         top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
         width: b.size.width * scale,
         height: b.size.height * scale,
-        background: color,
+        background: resolvedColor,
         opacity,
         pointerEvents: onClick ? "auto" : "none",
         cursor: onClick ? "pointer" : "default",
@@ -264,7 +511,7 @@ function Highlight({
   )) });
 }
 function Underline({
-  color = "#FFFF00",
+  strokeColor,
   opacity = 0.5,
   segmentRects,
   rect,
@@ -272,6 +519,7 @@ function Underline({
   onClick,
   style
 }) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
   const thickness = 2 * scale;
   return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
@@ -299,7 +547,7 @@ function Underline({
             bottom: 0,
             width: "100%",
             height: thickness,
-            background: color,
+            background: resolvedColor,
             opacity,
             pointerEvents: "none"
           }
@@ -310,7 +558,7 @@ function Underline({
   )) });
 }
 function Strikeout({
-  color = "#FFFF00",
+  strokeColor,
   opacity = 0.5,
   segmentRects,
   rect,
@@ -318,6 +566,7 @@ function Strikeout({
   onClick,
   style
 }) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
   const thickness = 2 * scale;
   return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
@@ -345,7 +594,7 @@ function Strikeout({
             top: "50%",
             width: "100%",
             height: thickness,
-            background: color,
+            background: resolvedColor,
             opacity,
             transform: "translateY(-50%)",
             pointerEvents: "none"
@@ -357,7 +606,7 @@ function Strikeout({
   )) });
 }
 function Squiggly({
-  color = "#FFFF00",
+  strokeColor,
   opacity = 0.5,
   segmentRects,
   rect,
@@ -365,11 +614,12 @@ function Squiggly({
   onClick,
   style
 }) {
+  const resolvedColor = strokeColor ?? "#FFFF00";
   const amplitude = 2 * scale;
   const period = 6 * scale;
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${period}" height="${amplitude * 2}" viewBox="0 0 ${period} ${amplitude * 2}">
       <path d="M0 ${amplitude} Q ${period / 4} 0 ${period / 2} ${amplitude} T ${period} ${amplitude}"
-            fill="none" stroke="${color}" stroke-width="${amplitude}" stroke-linecap="round"/>
+            fill="none" stroke="${resolvedColor}" stroke-width="${amplitude}" stroke-linecap="round"/>
     </svg>`;
   const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
   return /* @__PURE__ */ jsx(Fragment, { children: segmentRects.map((r, i) => /* @__PURE__ */ jsx(
@@ -412,7 +662,7 @@ function Squiggly({
 }
 function Ink({
   isSelected,
-  color = "#000000",
+  strokeColor,
   opacity = 1,
   strokeWidth,
   inkList,
@@ -420,6 +670,7 @@ function Ink({
   scale,
   onClick
 }) {
+  const resolvedColor = strokeColor ?? "#000000";
   const paths = useMemo(() => {
     return inkList.map(({ points }) => {
       let d = "";
@@ -458,7 +709,7 @@ function Ink({
           style: {
             cursor: isSelected ? "move" : "pointer",
             pointerEvents: isSelected ? "none" : "visibleStroke",
-            stroke: color,
+            stroke: resolvedColor,
             strokeWidth,
             strokeLinecap: "round",
             strokeLinejoin: "round"
@@ -996,7 +1247,7 @@ function FreeText({
             flexDirection: "column",
             justifyContent: annotation.object.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : annotation.object.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
             display: "flex",
-            backgroundColor: annotation.object.backgroundColor,
+            backgroundColor: annotation.object.color ?? annotation.object.backgroundColor,
             opacity: annotation.object.opacity,
             width: needsComp ? `${invScalePercent}%` : "100%",
             height: needsComp ? `${invScalePercent}%` : "100%",
@@ -1109,26 +1360,123 @@ function Stamp({
     }
   );
 }
+function Link({
+  isSelected,
+  strokeColor = "#0000FF",
+  strokeWidth = 2,
+  strokeStyle = PdfAnnotationBorderStyle.UNDERLINE,
+  strokeDashArray,
+  rect,
+  scale,
+  onClick,
+  hasIRT = false
+}) {
+  const { width, height } = useMemo(() => {
+    return {
+      width: rect.size.width,
+      height: rect.size.height
+    };
+  }, [rect]);
+  const svgWidth = width * scale;
+  const svgHeight = height * scale;
+  const dashArray = useMemo(() => {
+    if (strokeStyle === PdfAnnotationBorderStyle.DASHED) {
+      return (strokeDashArray == null ? void 0 : strokeDashArray.join(",")) ?? `${strokeWidth * 3},${strokeWidth}`;
+    }
+    return void 0;
+  }, [strokeStyle, strokeDashArray, strokeWidth]);
+  const isUnderline2 = strokeStyle === PdfAnnotationBorderStyle.UNDERLINE;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width: svgWidth,
+        height: svgHeight,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${width} ${height}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: 0,
+            width,
+            height,
+            fill: "transparent",
+            onPointerDown: hasIRT ? void 0 : onClick,
+            onTouchStart: hasIRT ? void 0 : onClick,
+            style: {
+              cursor: hasIRT ? "default" : isSelected ? "move" : "pointer",
+              pointerEvents: hasIRT ? "none" : isSelected ? "none" : "visible"
+            }
+          }
+        ),
+        isUnderline2 ? (
+          // Underline style: line at bottom of rect
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: 1,
+              y1: height - 1,
+              x2: width - 1,
+              y2: height - 1,
+              stroke: strokeColor,
+              strokeWidth,
+              strokeDasharray: dashArray,
+              style: {
+                pointerEvents: "none"
+              }
+            }
+          )
+        ) : (
+          // Solid/Dashed style: rectangle border
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: strokeWidth / 2,
+              y: strokeWidth / 2,
+              width: Math.max(width - strokeWidth, 0),
+              height: Math.max(height - strokeWidth, 0),
+              fill: "transparent",
+              stroke: strokeColor,
+              strokeWidth,
+              strokeDasharray: dashArray,
+              style: {
+                pointerEvents: "none"
+              }
+            }
+          )
+        )
+      ]
+    }
+  );
+}
 function Annotations(annotationsProps) {
-  const { documentId, pageIndex, scale, selectionMenu } = annotationsProps;
+  const { documentId, pageIndex, scale, pageWidth, pageHeight, selectionMenu } = annotationsProps;
   const { provides: annotationCapability } = useAnnotationCapability();
   const { provides: selectionProvides } = useSelectionCapability();
   const [annotations, setAnnotations] = useState([]);
   const { register } = usePointerHandlers({ documentId, pageIndex });
-  const [selectionState, setSelectionState] = useState(null);
+  const [allSelectedIds, setAllSelectedIds] = useState([]);
   const [editingId, setEditingId] = useState(null);
   const annotationProvides = useMemo(
     () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
     [annotationCapability, documentId]
   );
+  const isMultiSelected = allSelectedIds.length > 1;
   useEffect(() => {
     if (annotationProvides) {
       const currentState = annotationProvides.getState();
       setAnnotations(getAnnotationsByPageIndex(currentState, pageIndex));
-      setSelectionState(getSelectedAnnotationByPageIndex(currentState, pageIndex));
+      setAllSelectedIds(getSelectedAnnotationIds(currentState));
       return annotationProvides.onStateChange((state) => {
         setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
-        setSelectionState(getSelectedAnnotationByPageIndex(state, pageIndex));
+        setAllSelectedIds(getSelectedAnnotationIds(state));
       });
     }
   }, [annotationProvides, pageIndex]);
@@ -1147,8 +1495,13 @@ function Annotations(annotationsProps) {
     (e, annotation) => {
       e.stopPropagation();
       if (annotationProvides && selectionProvides) {
-        annotationProvides.selectAnnotation(pageIndex, annotation.object.id);
         selectionProvides.clear();
+        const isModifierPressed = "metaKey" in e ? e.metaKey || e.ctrlKey : false;
+        if (isModifierPressed) {
+          annotationProvides.toggleSelection(pageIndex, annotation.object.id);
+        } else {
+          annotationProvides.selectAnnotation(pageIndex, annotation.object.id);
+        }
         if (annotation.object.id !== editingId) {
           setEditingId(null);
         }
@@ -1156,369 +1509,467 @@ function Annotations(annotationsProps) {
     },
     [annotationProvides, selectionProvides, editingId, pageIndex]
   );
+  const handleLinkClick = useCallback(
+    (e, annotation) => {
+      e.stopPropagation();
+      if (!annotationProvides || !selectionProvides) return;
+      selectionProvides.clear();
+      if (annotation.object.inReplyToId) {
+        const parentId = annotation.object.inReplyToId;
+        const parent = annotations.find((a) => a.object.id === parentId);
+        if (parent) {
+          annotationProvides.selectAnnotation(parent.object.pageIndex, parentId);
+          return;
+        }
+      }
+      annotationProvides.selectAnnotation(pageIndex, annotation.object.id);
+    },
+    [annotationProvides, selectionProvides, annotations, pageIndex]
+  );
   useEffect(() => {
     return register(handlers, {
       documentId
     });
   }, [register, handlers]);
-  return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((annotation) => {
-    const isSelected = (selectionState == null ? void 0 : selectionState.object.id) === annotation.object.id;
-    const isEditing = editingId === annotation.object.id;
-    const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(annotation.object);
-    if (isInk(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-          },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(
-            Ink,
-            {
-              ...obj,
-              isSelected,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
-        },
-        annotation.object.id
-      );
-    }
-    if (isSquare(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-          },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(
-            Square,
-            {
-              ...obj,
-              isSelected,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
-        },
-        annotation.object.id
-      );
-    }
-    if (isCircle(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-          },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(
-            Circle,
-            {
-              ...obj,
-              isSelected,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
-        },
-        annotation.object.id
-      );
-    }
-    if (isUnderline(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          zIndex: 0,
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+  const selectedAnnotationsOnPage = useMemo(() => {
+    return annotations.filter((anno) => allSelectedIds.includes(anno.object.id));
+  }, [annotations, allSelectedIds]);
+  const areAllSelectedDraggable = useMemo(() => {
+    if (selectedAnnotationsOnPage.length < 2) return false;
+    return selectedAnnotationsOnPage.every((ta) => {
+      const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(ta.object);
+      return (tool == null ? void 0 : tool.interaction.isGroupDraggable) ?? (tool == null ? void 0 : tool.interaction.isDraggable) ?? true;
+    });
+  }, [selectedAnnotationsOnPage, annotationProvides]);
+  const areAllSelectedResizable = useMemo(() => {
+    if (selectedAnnotationsOnPage.length < 2) return false;
+    return selectedAnnotationsOnPage.every((ta) => {
+      const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(ta.object);
+      return (tool == null ? void 0 : tool.interaction.isGroupResizable) ?? (tool == null ? void 0 : tool.interaction.isResizable) ?? true;
+    });
+  }, [selectedAnnotationsOnPage, annotationProvides]);
+  const allSelectedOnSamePage = useMemo(() => {
+    if (!annotationProvides) return false;
+    const allSelected = annotationProvides.getSelectedAnnotations();
+    return allSelected.length > 1 && allSelected.every((ta) => ta.object.pageIndex === pageIndex);
+  }, [annotationProvides, pageIndex, allSelectedIds]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    annotations.map((annotation) => {
+      const isSelected = allSelectedIds.includes(annotation.object.id);
+      const isEditing = editingId === annotation.object.id;
+      const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(annotation.object);
+      if (isInk(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(
+              Ink,
+              {
+                ...obj,
+                isSelected,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
           },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Underline, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
-        },
-        annotation.object.id
-      );
-    }
-    if (isStrikeout(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          zIndex: 0,
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          annotation.object.id
+        );
+      }
+      if (isSquare(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(
+              Square,
+              {
+                ...obj,
+                isSelected,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
           },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Strikeout, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
-        },
-        annotation.object.id
-      );
-    }
-    if (isSquiggly(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          zIndex: 0,
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          annotation.object.id
+        );
+      }
+      if (isCircle(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(
+              Circle,
+              {
+                ...obj,
+                isSelected,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
           },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Squiggly, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
-        },
-        annotation.object.id
-      );
-    }
-    if (isHighlight(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          zIndex: 0,
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Multiply)
+          annotation.object.id
+        );
+      }
+      if (isUnderline(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            zIndex: 0,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(Underline, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
           },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Highlight, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
-        },
-        annotation.object.id
-      );
-    }
-    if (isLine(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          vertexConfig: {
-            extractVertices: (annotation2) => [
-              annotation2.linePoints.start,
-              annotation2.linePoints.end
-            ],
-            transformAnnotation: (annotation2, vertices) => {
-              return {
-                ...annotation2,
-                linePoints: {
-                  start: vertices[0],
-                  end: vertices[1]
-                }
-              };
-            }
+          annotation.object.id
+        );
+      }
+      if (isStrikeout(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            zIndex: 0,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(Strikeout, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
           },
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          annotation.object.id
+        );
+      }
+      if (isSquiggly(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            zIndex: 0,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(Squiggly, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
           },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
-            Line,
-            {
-              ...obj,
-              isSelected,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          ) })
-        },
-        annotation.object.id
-      );
-    }
-    if (isPolyline(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          vertexConfig: {
-            extractVertices: (annotation2) => annotation2.vertices,
-            transformAnnotation: (annotation2, vertices) => {
-              return {
-                ...annotation2,
-                vertices
-              };
-            }
+          annotation.object.id
+        );
+      }
+      if (isHighlight(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? false,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            zIndex: 0,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Multiply)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(Highlight, { ...obj, scale, onClick: (e) => handleClick(e, annotation) })
           },
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          annotation.object.id
+        );
+      }
+      if (isLine(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: {
+              extractVertices: (annotation2) => [
+                annotation2.linePoints.start,
+                annotation2.linePoints.end
+              ],
+              transformAnnotation: (annotation2, vertices) => {
+                return {
+                  ...annotation2,
+                  linePoints: {
+                    start: vertices[0],
+                    end: vertices[1]
+                  }
+                };
+              }
+            },
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+              Line,
+              {
+                ...obj,
+                isSelected,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            ) })
           },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
-            Polyline,
-            {
-              ...obj,
-              isSelected,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          ) })
-        },
-        annotation.object.id
-      );
-    }
-    if (isPolygon(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          vertexConfig: {
-            extractVertices: (annotation2) => annotation2.vertices,
-            transformAnnotation: (annotation2, vertices) => {
-              return {
-                ...annotation2,
-                vertices
-              };
-            }
+          annotation.object.id
+        );
+      }
+      if (isPolyline(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: {
+              extractVertices: (annotation2) => annotation2.vertices,
+              transformAnnotation: (annotation2, vertices) => {
+                return {
+                  ...annotation2,
+                  vertices
+                };
+              }
+            },
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+              Polyline,
+              {
+                ...obj,
+                isSelected,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            ) })
           },
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          annotation.object.id
+        );
+      }
+      if (isPolygon(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? false,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            vertexConfig: {
+              extractVertices: (annotation2) => annotation2.vertices,
+              transformAnnotation: (annotation2, vertices) => {
+                return {
+                  ...annotation2,
+                  vertices
+                };
+              }
+            },
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
+              Polygon,
+              {
+                ...obj,
+                isSelected,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            ) })
           },
-          ...annotationsProps,
-          children: (obj) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
-            Polygon,
-            {
-              ...obj,
-              isSelected,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          ) })
-        },
-        annotation.object.id
-      );
-    }
-    if (isFreeText(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: ((tool == null ? void 0 : tool.interaction.isDraggable) ?? true) && !isEditing,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          annotation.object.id
+        );
+      }
+      if (isFreeText(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: ((tool == null ? void 0 : tool.interaction.isDraggable) ?? true) && !isEditing,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            onDoubleClick: (e) => {
+              e.stopPropagation();
+              setEditingId(annotation.object.id);
+            },
+            ...annotationsProps,
+            children: (object) => /* @__PURE__ */ jsx(
+              FreeText,
+              {
+                isSelected,
+                isEditing,
+                annotation: {
+                  ...annotation,
+                  object
+                },
+                pageIndex,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
           },
-          onDoubleClick: (e) => {
-            e.stopPropagation();
-            setEditingId(annotation.object.id);
+          annotation.object.id
+        );
+      }
+      if (isStamp(annotation)) {
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
+            isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
+            lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
+            selectionMenu,
+            onSelect: (e) => handleClick(e, annotation),
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (_object) => /* @__PURE__ */ jsx(
+              Stamp,
+              {
+                isSelected,
+                annotation,
+                documentId,
+                pageIndex,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
           },
-          ...annotationsProps,
-          children: (object) => /* @__PURE__ */ jsx(
-            FreeText,
-            {
-              isSelected,
-              isEditing,
-              annotation: {
-                ...annotation,
-                object
-              },
-              pageIndex,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
-        },
-        annotation.object.id
-      );
-    }
-    if (isStamp(annotation)) {
-      return /* @__PURE__ */ jsx(
-        AnnotationContainer,
-        {
-          trackedAnnotation: annotation,
-          isSelected,
-          isDraggable: (tool == null ? void 0 : tool.interaction.isDraggable) ?? true,
-          isResizable: (tool == null ? void 0 : tool.interaction.isResizable) ?? true,
-          lockAspectRatio: (tool == null ? void 0 : tool.interaction.lockAspectRatio) ?? false,
-          selectionMenu,
-          onSelect: (e) => handleClick(e, annotation),
-          style: {
-            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          annotation.object.id
+        );
+      }
+      if (isLink(annotation)) {
+        const hasIRT = !!annotation.object.inReplyToId;
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isMultiSelected,
+            isDraggable: false,
+            isResizable: false,
+            lockAspectRatio: false,
+            selectionMenu: hasIRT ? void 0 : selectionMenu,
+            onSelect: (e) => handleLinkClick(e, annotation),
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(
+              Link,
+              {
+                ...obj,
+                isSelected,
+                scale,
+                onClick: (e) => handleLinkClick(e, annotation),
+                hasIRT
+              }
+            )
           },
-          ...annotationsProps,
-          children: (_object) => /* @__PURE__ */ jsx(
-            Stamp,
-            {
-              isSelected,
-              annotation,
-              documentId,
-              pageIndex,
-              scale,
-              onClick: (e) => handleClick(e, annotation)
-            }
-          )
-        },
-        annotation.object.id
-      );
-    }
-    return null;
-  }) });
+          annotation.object.id
+        );
+      }
+      return null;
+    }),
+    allSelectedOnSamePage && selectedAnnotationsOnPage.length >= 2 && /* @__PURE__ */ jsx(
+      GroupSelectionBox,
+      {
+        documentId,
+        pageIndex,
+        scale,
+        rotation: annotationsProps.rotation,
+        pageWidth,
+        pageHeight,
+        selectedAnnotations: selectedAnnotationsOnPage,
+        isDraggable: areAllSelectedDraggable,
+        isResizable: areAllSelectedResizable,
+        resizeUI: annotationsProps.resizeUI,
+        selectionOutlineColor: annotationsProps.selectionOutlineColor,
+        groupSelectionMenu: annotationsProps.groupSelectionMenu
+      }
+    )
+  ] });
 }
 function TextMarkup({ documentId, pageIndex, scale }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
@@ -1555,7 +2006,7 @@ function TextMarkup({ documentId, pageIndex, scale }) {
           children: /* @__PURE__ */ jsx(
             Underline,
             {
-              color: (_b = activeTool.defaults) == null ? void 0 : _b.color,
+              strokeColor: (_b = activeTool.defaults) == null ? void 0 : _b.strokeColor,
               opacity: (_c = activeTool.defaults) == null ? void 0 : _c.opacity,
               segmentRects: rects,
               scale
@@ -1576,7 +2027,7 @@ function TextMarkup({ documentId, pageIndex, scale }) {
           children: /* @__PURE__ */ jsx(
             Highlight,
             {
-              color: (_e = activeTool.defaults) == null ? void 0 : _e.color,
+              strokeColor: (_e = activeTool.defaults) == null ? void 0 : _e.strokeColor,
               opacity: (_f = activeTool.defaults) == null ? void 0 : _f.opacity,
               segmentRects: rects,
               scale
@@ -1597,7 +2048,7 @@ function TextMarkup({ documentId, pageIndex, scale }) {
           children: /* @__PURE__ */ jsx(
             Strikeout,
             {
-              color: (_h = activeTool.defaults) == null ? void 0 : _h.color,
+              strokeColor: (_h = activeTool.defaults) == null ? void 0 : _h.strokeColor,
               opacity: (_i = activeTool.defaults) == null ? void 0 : _i.opacity,
               segmentRects: rects,
               scale
@@ -1618,7 +2069,7 @@ function TextMarkup({ documentId, pageIndex, scale }) {
           children: /* @__PURE__ */ jsx(
             Squiggly,
             {
-              color: (_k = activeTool.defaults) == null ? void 0 : _k.color,
+              strokeColor: (_k = activeTool.defaults) == null ? void 0 : _k.strokeColor,
               opacity: (_l = activeTool.defaults) == null ? void 0 : _l.opacity,
               segmentRects: rects,
               scale
@@ -1751,6 +2202,7 @@ function AnnotationLayer({
   scale: overrideScale,
   rotation: overrideRotation,
   selectionMenu,
+  groupSelectionMenu,
   resizeUI,
   vertexUI,
   selectionOutlineColor,
@@ -1783,6 +2235,7 @@ function AnnotationLayer({
           {
             documentId,
             selectionMenu,
+            groupSelectionMenu,
             pageIndex,
             scale: actualScale,
             rotation: actualRotation,
@@ -1802,6 +2255,7 @@ function AnnotationLayer({
 }
 export {
   AnnotationLayer,
+  GroupSelectionBox,
   useAnnotation,
   useAnnotationCapability,
   useAnnotationPlugin