@embedpdf/plugin-annotation 1.0.12 → 1.0.13

package/dist/react/index.js

@@ -1,16 +1,332 @@
 import { usePlugin, useCapability } from "@embedpdf/core/react";
-import { AnnotationPlugin, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, makeVariantKey } from "@embedpdf/plugin-annotation";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { restoreOffset, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, makeVariantKey } from "@embedpdf/plugin-annotation";
+import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { restoreOffset, rectEquals, PdfAnnotationBorderStyle, PdfAnnotationSubtype, expandRect, rectFromPoints, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
-import { useRef, useState, useEffect, useMemo, useCallback } from "react";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
+import { Fragment, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
+function getCounterRotation(rect, rotation) {
+  const { width: w, height: h } = rect.size;
+  switch (rotation % 4) {
+    case 1:
+      return {
+        matrix: `matrix(0, -1, 1, 0, 0, ${h})`,
+        width: h,
+        height: w
+      };
+    case 2:
+      return {
+        matrix: `matrix(-1, 0, 0, -1, ${w}, ${h})`,
+        width: w,
+        height: h
+      };
+    case 3:
+      return {
+        matrix: `matrix(0, 1, -1, 0, ${w}, 0)`,
+        width: h,
+        height: w
+      };
+    default:
+      return {
+        matrix: `matrix(1, 0, 0, 1, 0, 0)`,
+        width: w,
+        height: h
+      };
+  }
+}
+function CounterRotate({ children, ...props }) {
+  const { rect, rotation } = props;
+  const { matrix, width, height } = getCounterRotation(rect, rotation);
+  const menuWrapperStyle = {
+    position: "absolute",
+    left: rect.origin.x,
+    top: rect.origin.y,
+    transform: matrix,
+    transformOrigin: "0 0",
+    width,
+    height,
+    pointerEvents: "none",
+    zIndex: 3
+  };
+  const menuWrapperProps = {
+    style: menuWrapperStyle,
+    onPointerDown: (e) => e.stopPropagation()
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: children({
+    menuWrapperProps,
+    matrix,
+    rect: {
+      origin: { x: rect.origin.x, y: rect.origin.y },
+      size: { width, height }
+    }
+  }) });
+}
+function VertexEditor({
+  rect,
+  rotation,
+  scale,
+  vertices,
+  onEdit,
+  onCommit,
+  handleSize = 12
+}) {
+  const [dragIdx, setDragIdx] = useState(null);
+  const startScreen = useRef(null);
+  const startVerts = useRef([]);
+  const applyDelta = (deltaScreen) => {
+    const deltaPdf = restoreOffset(deltaScreen, rotation, scale);
+    const next = [...startVerts.current];
+    if (dragIdx !== null) {
+      next[dragIdx] = {
+        x: next[dragIdx].x + deltaPdf.x,
+        y: next[dragIdx].y + deltaPdf.y
+      };
+    }
+    return next;
+  };
+  const handleDown = (idx) => (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setDragIdx(idx);
+    startScreen.current = { x: e.clientX, y: e.clientY };
+    startVerts.current = vertices;
+    e.target.setPointerCapture(e.pointerId);
+  };
+  const handleMove = (e) => {
+    if (dragIdx === null || !startScreen.current) return;
+    const deltaRaw = {
+      x: e.clientX - startScreen.current.x,
+      y: e.clientY - startScreen.current.y
+    };
+    onEdit(applyDelta(deltaRaw));
+  };
+  const handleUp = (e) => {
+    if (dragIdx === null || !startScreen.current) return;
+    e.target.releasePointerCapture(e.pointerId);
+    const deltaRaw = {
+      x: e.clientX - startScreen.current.x,
+      y: e.clientY - startScreen.current.y
+    };
+    onCommit(applyDelta(deltaRaw));
+    setDragIdx(null);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: vertices.map((v, i) => {
+    const left = (v.x - rect.origin.x) * scale - handleSize / 2;
+    const top = (v.y - rect.origin.y) * scale - handleSize / 2;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left,
+          top,
+          width: handleSize,
+          height: handleSize,
+          borderRadius: "50%",
+          background: "#2196f3",
+          cursor: "pointer",
+          pointerEvents: "auto",
+          zIndex: 4
+        },
+        onPointerDown: handleDown(i),
+        onPointerMove: handleMove,
+        onPointerUp: handleUp
+      },
+      i
+    );
+  }) });
+}
+function useDragResize({
+  scale,
+  pageWidth,
+  pageHeight,
+  rotation,
+  tracked,
+  isSelected,
+  isDraggable,
+  isResizable,
+  computePatch,
+  computeVertices,
+  currentRect,
+  setCurrentRect,
+  setCurrentVertices,
+  setPreviewObject,
+  commit
+}) {
+  const drag = useRef("idle");
+  const dir = useRef("none");
+  const startPos = useRef(null);
+  const startRect = useRef(null);
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const pageW = pageWidth / scale;
+  const pageH = pageHeight / scale;
+  const applyDelta = (dx, dy) => {
+    if (!startRect.current) return currentRect;
+    let { origin, size } = startRect.current;
+    let ox = origin.x;
+    let oy = origin.y;
+    let w = size.width;
+    let h = size.height;
+    if (drag.current === "dragging") {
+      ox += dx;
+      oy += dy;
+    } else if (drag.current === "resizing") {
+      if (dir.current.includes("right")) w += dx;
+      else if (dir.current.includes("left")) {
+        ox += dx;
+        w -= dx;
+      }
+      if (dir.current.includes("bottom")) h += dy;
+      else if (dir.current.includes("top")) {
+        oy += dy;
+        h -= dy;
+      }
+    }
+    if (w < 1 || h < 1) return currentRect;
+    w = clamp(w, 1, pageW);
+    h = clamp(h, 1, pageH);
+    ox = clamp(ox, 0, pageW - w);
+    oy = clamp(oy, 0, pageH - h);
+    return { origin: { x: ox, y: oy }, size: { width: w, height: h } };
+  };
+  const onPointerDown = (e) => {
+    if (!isSelected || !isDraggable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    drag.current = "dragging";
+    startPos.current = { x: e.clientX, y: e.clientY };
+    startRect.current = currentRect;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e) => {
+    if (drag.current === "idle" || !startPos.current) return;
+    const disp = {
+      x: e.clientX - startPos.current.x,
+      y: e.clientY - startPos.current.y
+    };
+    const { x, y } = restoreOffset(disp, rotation, scale);
+    const nextRect = applyDelta(x, y);
+    let patch = { rect: nextRect };
+    if (computePatch) {
+      patch = computePatch(tracked.object, {
+        rect: nextRect,
+        direction: drag.current === "resizing" ? dir.current : "bottom-right"
+      });
+      if (computeVertices) setCurrentVertices(computeVertices({ ...tracked.object, ...patch }));
+    }
+    setCurrentRect(patch.rect ?? nextRect);
+    setPreviewObject(patch);
+  };
+  const onPointerUp = () => {
+    if (drag.current === "idle") return;
+    const usedDir = dir.current || "bottom-right";
+    drag.current = "idle";
+    let patch = { rect: currentRect };
+    if (computePatch) {
+      patch = computePatch(tracked.object, {
+        rect: currentRect,
+        direction: usedDir
+      });
+    }
+    commit(patch);
+    startPos.current = null;
+    startRect.current = null;
+    dir.current = "none";
+    setPreviewObject(null);
+  };
+  const startResize = (direction) => (e) => {
+    if (!isSelected || !isResizable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    drag.current = "resizing";
+    dir.current = direction;
+    startPos.current = { x: e.clientX, y: e.clientY };
+    startRect.current = currentRect;
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  useEffect(() => {
+    drag.current = "idle";
+    dir.current = "none";
+    startPos.current = null;
+    startRect.current = null;
+  }, [tracked]);
+  return {
+    rootHandlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp
+    },
+    startResize
+  };
+}
+const commonStyle = (o) => ({
+  position: "absolute",
+  width: 13,
+  height: 13,
+  background: "blue",
+  borderRadius: "50%"
+});
+function ResizeHandles({ rotation, outlineOffset = 1, startResize }) {
+  const o = outlineOffset;
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...commonStyle(),
+          top: -7 - o,
+          left: -7 - o,
+          cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
+        },
+        onPointerDown: startResize("top-left")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...commonStyle(),
+          top: -7 - o,
+          right: -7 - o,
+          cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
+        },
+        onPointerDown: startResize("top-right")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...commonStyle(),
+          bottom: -7 - o,
+          left: -7 - o,
+          cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
+        },
+        onPointerDown: startResize("bottom-left")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          ...commonStyle(),
+          bottom: -7 - o,
+          right: -7 - o,
+          cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
+        },
+        onPointerDown: startResize("bottom-right")
+      }
+    )
+  ] });
+}
 function AnnotationContainer({
   scale,
   pageIndex,
   rotation,
+  pageWidth,
+  pageHeight,
   trackedAnnotation,
   children,
   style,
@@ -18,193 +334,119 @@ function AnnotationContainer({
   isSelected = false,
   isDraggable = true,
   isResizable = true,
-  computeResizePatch,
+  computeVertices,
+  computePatch,
+  selectionMenu,
   ...props
 }) {
   const { provides: annotationProvides } = useAnnotationCapability();
-  const ref = useRef(null);
-  const [dragState, setDragState] = useState("idle");
-  const [resizeDirection, setResizeDirection] = useState(null);
-  const [startPos, setStartPos] = useState(null);
-  const [startRect, setStartRect] = useState(null);
   const [currentRect, setCurrentRect] = useState(trackedAnnotation.object.rect);
+  const [currentVertices, setCurrentVertices] = useState(
+    (computeVertices == null ? void 0 : computeVertices(trackedAnnotation.object)) ?? []
+  );
   const [previewObject, setPreviewObject] = useState(null);
-  useEffect(() => {
-    setCurrentRect(trackedAnnotation.object.rect);
-    setPreviewObject(null);
-  }, [trackedAnnotation]);
-  const handlePointerDown = (e) => {
-    var _a;
-    if (!isSelected) return;
-    e.stopPropagation();
-    e.preventDefault();
-    const target = e.target;
-    if (isResizable && target.classList.contains("resize-handle")) {
-      setDragState("resizing");
-      setResizeDirection(target.dataset.direction);
-    } else if (isDraggable) {
-      setDragState("dragging");
-    } else {
-      return;
-    }
-    setStartPos({ x: e.clientX, y: e.clientY });
-    setStartRect(currentRect);
-    (_a = ref.current) == null ? void 0 : _a.setPointerCapture(e.pointerId);
-  };
-  const handlePointerMove = (e) => {
-    if (dragState === "idle" || !startPos || !startRect) return;
-    const dispDelta = { x: e.clientX - startPos.x, y: e.clientY - startPos.y };
-    const { x: dx, y: dy } = restoreOffset(dispDelta, rotation, scale);
-    let newOriginX = startRect.origin.x;
-    let newOriginY = startRect.origin.y;
-    let newWidth = startRect.size.width;
-    let newHeight = startRect.size.height;
-    if (dragState === "dragging") {
-      newOriginX += dx;
-      newOriginY += dy;
-    } else if (dragState === "resizing" && resizeDirection) {
-      if (resizeDirection.includes("right")) {
-        newWidth += dx;
-      } else if (resizeDirection.includes("left")) {
-        newOriginX += dx;
-        newWidth -= dx;
-      }
-      if (resizeDirection.includes("bottom")) {
-        newHeight += dy;
-      } else if (resizeDirection.includes("top")) {
-        newOriginY += dy;
-        newHeight -= dy;
-      }
-      if (newWidth < 1 || newHeight < 1) return;
-    }
-    const tentativeRect = {
-      origin: { x: newOriginX, y: newOriginY },
-      size: { width: newWidth, height: newHeight }
-    };
-    let previewPatch = { rect: tentativeRect };
-    if (computeResizePatch) {
-      const dir = dragState === "resizing" ? resizeDirection : "bottom-right";
-      if (dir) {
-        previewPatch = computeResizePatch(trackedAnnotation.object, tentativeRect, dir);
-      }
-    }
-    setCurrentRect(previewPatch.rect || tentativeRect);
-    setPreviewObject(previewPatch);
-  };
-  const handlePointerUp = (e) => {
-    var _a;
-    if (dragState === "idle") return;
-    const usedDirection = resizeDirection || "bottom-right";
-    setDragState("idle");
-    setResizeDirection(null);
-    (_a = ref.current) == null ? void 0 : _a.releasePointerCapture(e.pointerId);
-    if (annotationProvides && trackedAnnotation) {
-      let patch = { rect: currentRect };
-      if (computeResizePatch && usedDirection) {
-        patch = computeResizePatch(trackedAnnotation.object, currentRect, usedDirection);
-      }
-      annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.localId, patch);
+  const { rootHandlers, startResize } = useDragResize({
+    scale,
+    pageWidth,
+    pageHeight,
+    rotation,
+    tracked: trackedAnnotation,
+    isSelected,
+    isDraggable,
+    isResizable,
+    computePatch,
+    computeVertices,
+    currentRect,
+    setCurrentRect,
+    setCurrentVertices,
+    setPreviewObject,
+    commit: (patch) => annotationProvides == null ? void 0 : annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.localId, patch)
+  });
+  useLayoutEffect(() => {
+    if (!rectEquals(trackedAnnotation.object.rect, currentRect)) {
+      setCurrentRect(trackedAnnotation.object.rect);
+      setPreviewObject((prev) => prev ? { ...prev, rect: trackedAnnotation.object.rect } : null);
+      setCurrentVertices((computeVertices == null ? void 0 : computeVertices(trackedAnnotation.object)) ?? []);
     }
-    setStartPos(null);
-    setStartRect(null);
-    setPreviewObject(null);
-  };
+  }, [trackedAnnotation]);
   const currentObject = previewObject ? { ...trackedAnnotation.object, ...previewObject } : trackedAnnotation.object;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      style: {
-        position: "absolute",
-        outline: isSelected ? "1px solid #007ACC" : "none",
-        outlineOffset: isSelected ? `${outlineOffset}px` : "0px",
-        left: `${currentRect.origin.x * scale}px`,
-        top: `${currentRect.origin.y * scale}px`,
-        width: `${currentRect.size.width * scale}px`,
-        height: `${currentRect.size.height * scale}px`,
-        pointerEvents: isSelected ? "auto" : "none",
-        cursor: isSelected && isDraggable ? "move" : "default",
-        ...style
-      },
-      ...props,
-      children: [
-        typeof children === "function" ? children(currentObject) : children,
-        isSelected && isResizable && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "resize-handle",
-              "data-direction": "top-left",
-              style: {
-                position: "absolute",
-                top: -7 - outlineOffset,
-                left: -7 - outlineOffset,
-                width: 13,
-                height: 13,
-                background: "blue",
-                borderRadius: "50%",
-                cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "resize-handle",
-              "data-direction": "top-right",
-              style: {
-                position: "absolute",
-                top: -7 - outlineOffset,
-                right: -7 - outlineOffset,
-                width: 13,
-                height: 13,
-                background: "blue",
-                borderRadius: "50%",
-                cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rootHandlers,
+        style: {
+          position: "absolute",
+          outline: isSelected ? "1px solid #007ACC" : "none",
+          outlineOffset: isSelected ? `${outlineOffset}px` : "0px",
+          left: `${currentRect.origin.x * scale}px`,
+          top: `${currentRect.origin.y * scale}px`,
+          width: `${currentRect.size.width * scale}px`,
+          height: `${currentRect.size.height * scale}px`,
+          pointerEvents: isSelected ? "auto" : "none",
+          cursor: isSelected && isDraggable ? "move" : "default",
+          ...style
+        },
+        ...props,
+        children: [
+          typeof children === "function" ? children(currentObject) : children,
+          isSelected && currentVertices.length > 0 && /* @__PURE__ */ jsx(
+            VertexEditor,
             {
-              className: "resize-handle",
-              "data-direction": "bottom-left",
-              style: {
-                position: "absolute",
-                bottom: -7 - outlineOffset,
-                left: -7 - outlineOffset,
-                width: 13,
-                height: 13,
-                background: "blue",
-                borderRadius: "50%",
-                cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
+              rect: currentRect,
+              rotation,
+              scale,
+              vertices: currentVertices,
+              onEdit: (v) => {
+                setCurrentVertices(v);
+                if (computePatch) {
+                  const patch = computePatch(trackedAnnotation.object, {
+                    rect: currentRect,
+                    vertices: v
+                  });
+                  setPreviewObject(patch);
+                  setCurrentRect(patch.rect || currentRect);
+                }
+              },
+              onCommit: (v) => {
+                if (annotationProvides && computePatch) {
+                  const patch = computePatch(trackedAnnotation.object, {
+                    rect: currentRect,
+                    vertices: v
+                  });
+                  annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.localId, patch);
+                }
               }
             }
           ),
-          /* @__PURE__ */ jsx(
-            "div",
+          isSelected && isResizable && /* @__PURE__ */ jsx(
+            ResizeHandles,
             {
-              className: "resize-handle",
-              "data-direction": "bottom-right",
-              style: {
-                position: "absolute",
-                bottom: -7 - outlineOffset,
-                right: -7 - outlineOffset,
-                width: 13,
-                height: 13,
-                background: "blue",
-                borderRadius: "50%",
-                cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
-              }
+              rotation,
+              outlineOffset,
+              startResize
             }
           )
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CounterRotate,
+      {
+        rect: {
+          origin: { x: currentRect.origin.x * scale, y: currentRect.origin.y * scale },
+          size: { width: currentRect.size.width * scale, height: currentRect.size.height * scale }
+        },
+        rotation,
+        children: ({ rect, menuWrapperProps }) => selectionMenu && selectionMenu({
+          annotation: trackedAnnotation,
+          selected: isSelected,
+          rect,
+          menuWrapperProps
+        })
+      }
+    )
+  ] });
 }
 function Highlight({
   color = "#FFFF00",
@@ -216,7 +458,7 @@ function Highlight({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onMouseDown: onClick,
@@ -249,7 +491,7 @@ function Underline({
   ...props
 }) {
   const thickness = 2 * scale;
-  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onMouseDown: onClick,
@@ -296,7 +538,7 @@ function Strikeout({
   ...props
 }) {
   const thickness = 2 * scale;
-  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onMouseDown: onClick,
@@ -350,7 +592,7 @@ function Squiggly({
             fill="none" stroke="${color}" stroke-width="${amplitude}" stroke-linecap="round"/>
     </svg>`;
   const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
-  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
       onMouseDown: onClick,
@@ -395,7 +637,8 @@ function Ink({
   inkList,
   rect,
   scale,
-  onClick
+  onClick,
+  cursor
 }) {
   const paths = useMemo(() => {
     return inkList.map(({ points }) => {
@@ -418,7 +661,8 @@ function Ink({
         width,
         height,
         pointerEvents: "none",
-        zIndex: 2
+        zIndex: 2,
+        overflow: "visible"
       },
       width,
       height,
@@ -428,15 +672,15 @@ function Ink({
         {
           d,
           fill: "none",
-          stroke: color,
-          strokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
           opacity,
-          pointerEvents: "visibleStroke",
           onMouseDown: onClick,
           style: {
-            cursor: "pointer"
+            cursor,
+            pointerEvents: "visibleStroke",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         },
         i
@@ -444,229 +688,869 @@ function Ink({
     }
   );
 }
-function resizeInkAnnotation(original, newRect, direction, uniform = false) {
+function Square({
+  color = "#000000",
+  strokeColor,
+  opacity = 1,
+  strokeWidth,
+  strokeStyle = PdfAnnotationBorderStyle.SOLID,
+  strokeDashArray,
+  rect,
+  scale,
+  onClick,
+  cursor
+}) {
+  const { width, height, x, y } = useMemo(() => {
+    const outerW = rect.size.width;
+    const outerH = rect.size.height;
+    const innerW = Math.max(outerW - strokeWidth, 0);
+    const innerH = Math.max(outerH - strokeWidth, 0);
+    return {
+      width: innerW,
+      height: innerH,
+      x: strokeWidth / 2,
+      y: strokeWidth / 2
+    };
+  }, [rect, strokeWidth]);
+  const svgWidth = (width + strokeWidth) * scale;
+  const svgHeight = (height + strokeWidth) * scale;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width: svgWidth,
+        height: svgHeight,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${width + strokeWidth} ${height + strokeWidth}`,
+      children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x,
+          y,
+          width,
+          height,
+          fill: color,
+          opacity,
+          onMouseDown: onClick,
+          style: {
+            cursor,
+            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            stroke: strokeColor ?? color,
+            strokeWidth,
+            ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+              strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+            }
+          }
+        }
+      )
+    }
+  );
+}
+function Circle({
+  color = "#000000",
+  strokeColor,
+  opacity = 1,
+  strokeWidth,
+  strokeStyle = PdfAnnotationBorderStyle.SOLID,
+  strokeDashArray,
+  rect,
+  scale,
+  onClick,
+  cursor
+}) {
+  const { width, height, cx, cy, rx, ry } = useMemo(() => {
+    const outerW = rect.size.width;
+    const outerH = rect.size.height;
+    const innerW = Math.max(outerW - strokeWidth, 0);
+    const innerH = Math.max(outerH - strokeWidth, 0);
+    return {
+      width: outerW,
+      height: outerH,
+      // Centre of the fill sits strokeWidth/2 in from the edges
+      cx: strokeWidth / 2 + innerW / 2,
+      cy: strokeWidth / 2 + innerH / 2,
+      rx: innerW / 2,
+      ry: innerH / 2
+    };
+  }, [rect, strokeWidth]);
+  const svgWidth = width * scale;
+  const svgHeight = height * scale;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width: svgWidth,
+        height: svgHeight,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${width} ${height}`,
+      children: /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx,
+          cy,
+          rx,
+          ry,
+          fill: color,
+          opacity,
+          onMouseDown: onClick,
+          style: {
+            cursor,
+            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            stroke: strokeColor ?? color,
+            strokeWidth,
+            ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+              strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+            }
+          }
+        }
+      )
+    }
+  );
+}
+const patchInk = (original, ctx) => {
   if (original.type !== PdfAnnotationSubtype.INK) {
     throw new Error("resizeInkAnnotation: original is not an ink annotation");
   }
   const oldRect = original.rect;
-  let scaleX = newRect.size.width / oldRect.size.width;
-  let scaleY = newRect.size.height / oldRect.size.height;
+  let scaleX = ctx.rect.size.width / oldRect.size.width;
+  let scaleY = ctx.rect.size.height / oldRect.size.height;
   const minSize = 10;
-  if (newRect.size.width < minSize || newRect.size.height < minSize) {
+  if (ctx.rect.size.width < minSize || ctx.rect.size.height < minSize) {
     scaleX = Math.max(scaleX, minSize / oldRect.size.width);
     scaleY = Math.max(scaleY, minSize / oldRect.size.height);
-    newRect = {
-      origin: newRect.origin,
+    ctx.rect = {
+      origin: ctx.rect.origin,
       size: {
         width: oldRect.size.width * scaleX,
         height: oldRect.size.height * scaleY
       }
     };
   }
-  if (uniform) {
+  if (ctx.uniform) {
     const minScale = Math.min(scaleX, scaleY);
     scaleX = minScale;
     scaleY = minScale;
-    newRect.size = {
+    ctx.rect.size = {
       width: oldRect.size.width * minScale,
       height: oldRect.size.height * minScale
     };
   }
   const newInkList = original.inkList.map((stroke) => ({
     points: stroke.points.map((p) => ({
-      x: newRect.origin.x + (p.x - oldRect.origin.x) * scaleX,
-      y: newRect.origin.y + (p.y - oldRect.origin.y) * scaleY
+      x: ctx.rect.origin.x + (p.x - oldRect.origin.x) * scaleX,
+      y: ctx.rect.origin.y + (p.y - oldRect.origin.y) * scaleY
     }))
   }));
   const avgScale = (scaleX + scaleY) / 2;
-  const newStrokeWidth = original.strokeWidth * avgScale;
+  const newStrokeWidth = Math.round(original.strokeWidth * avgScale);
   return {
-    rect: newRect,
+    rect: ctx.rect,
     inkList: newInkList,
     strokeWidth: newStrokeWidth
   };
-}
-function Annotations(annotationsProps) {
-  const { pageIndex, scale } = annotationsProps;
-  const { provides: annotationProvides } = useAnnotationCapability();
-  const { provides: selectionProvides } = useSelectionCapability();
-  const [annotations, setAnnotations] = useState([]);
-  const { register } = usePointerHandlers({ pageIndex });
-  const [selectionState, setSelectionState] = useState(null);
-  useEffect(() => {
-    if (annotationProvides) {
-      annotationProvides.onStateChange((state) => {
-        setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
-        setSelectionState(getSelectedAnnotationByPageIndex(state, pageIndex));
-      });
-    }
-  }, [annotationProvides]);
-  const handlers = useMemo(
-    () => ({
-      onPointerDown: (_, pe) => {
-        if (pe.target === pe.currentTarget && annotationProvides) {
-          annotationProvides.deselectAnnotation();
-        }
-      }
-    }),
-    [annotationProvides]
-  );
-  const handleClick = useCallback(
-    (e, annotation) => {
-      e.stopPropagation();
-      if (annotationProvides && selectionProvides) {
-        annotationProvides.selectAnnotation(pageIndex, annotation.localId);
-        selectionProvides.clear();
-      }
-    },
-    [annotationProvides, selectionProvides, pageIndex]
-  );
-  useEffect(() => {
-    return register(handlers);
-  }, [register, handlers]);
-  return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((annotation) => {
-    const isSelected = (selectionState == null ? void 0 : selectionState.localId) === annotation.localId;
-    switch (annotation.object.type) {
-      case PdfAnnotationSubtype.UNDERLINE:
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
+};
+function Line({
+  color = "transparent",
+  opacity = 1,
+  strokeWidth,
+  strokeColor = "#000000",
+  strokeStyle = PdfAnnotationBorderStyle.SOLID,
+  strokeDashArray,
+  rect,
+  linePoints,
+  lineEndings,
+  scale,
+  onClick,
+  isSelected
+}) {
+  const { x1, y1, x2, y2 } = useMemo(() => {
+    return {
+      x1: linePoints.start.x - rect.origin.x,
+      y1: linePoints.start.y - rect.origin.y,
+      x2: linePoints.end.x - rect.origin.x,
+      y2: linePoints.end.y - rect.origin.y
+    };
+  }, [linePoints, rect]);
+  const endings = useMemo(() => {
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    return {
+      start: patching.createEnding(lineEndings == null ? void 0 : lineEndings.start, strokeWidth, angle + Math.PI, x1, y1),
+      end: patching.createEnding(lineEndings == null ? void 0 : lineEndings.end, strokeWidth, angle, x2, y2)
+    };
+  }, [lineEndings, strokeWidth, x1, y1, x2, y2]);
+  const width = rect.size.width * scale;
+  const height = rect.size.height * scale;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width,
+        height,
+        pointerEvents: "none",
+        zIndex: 2,
+        overflow: "visible"
+      },
+      width,
+      height,
+      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "line",
           {
-            trackedAnnotation: annotation,
-            isSelected,
-            isDraggable: false,
-            isResizable: false,
+            x1,
+            y1,
+            x2,
+            y2,
+            opacity,
+            onMouseDown: onClick,
             style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: /* @__PURE__ */ jsx(
-              Underline,
-              {
-                rect: annotation.object.rect,
-                color: annotation.object.color,
-                opacity: annotation.object.opacity,
-                rects: annotation.object.segmentRects,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: "visibleStroke",
+              stroke: strokeColor,
+              strokeWidth,
+              strokeLinecap: "butt",
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
               }
-            )
-          },
-          annotation.localId
-        );
-      case PdfAnnotationSubtype.STRIKEOUT:
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
+            }
+          }
+        ),
+        endings.start && /* @__PURE__ */ jsx(
+          "path",
           {
-            trackedAnnotation: annotation,
-            isSelected,
-            isDraggable: false,
-            isResizable: false,
+            d: endings.start.d,
+            transform: endings.start.transform,
+            onMouseDown: onClick,
+            stroke: strokeColor,
             style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-            },
-            ...annotationsProps,
-            children: /* @__PURE__ */ jsx(
-              Strikeout,
-              {
-                rect: annotation.object.rect,
-                color: annotation.object.color,
-                opacity: annotation.object.opacity,
-                rects: annotation.object.segmentRects,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
+              cursor: isSelected ? "move" : "pointer",
+              strokeWidth,
+              strokeLinecap: "butt",
+              pointerEvents: endings.start.filled ? "visible" : "visibleStroke",
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
               }
-            )
-          },
-          annotation.localId
-        );
-      case PdfAnnotationSubtype.SQUIGGLY:
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            trackedAnnotation: annotation,
-            isSelected,
-            isDraggable: false,
-            isResizable: false,
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
             },
-            ...annotationsProps,
-            children: /* @__PURE__ */ jsx(
-              Squiggly,
-              {
-                color: annotation.object.color,
-                opacity: annotation.object.opacity,
-                rects: annotation.object.segmentRects,
-                rect: annotation.object.rect,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            )
-          },
-          annotation.localId
-        );
-      case PdfAnnotationSubtype.HIGHLIGHT:
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
+            fill: endings.start.filled ? color : "none"
+          }
+        ),
+        endings.end && /* @__PURE__ */ jsx(
+          "path",
           {
-            trackedAnnotation: annotation,
-            isSelected,
-            isDraggable: false,
-            isResizable: false,
+            d: endings.end.d,
+            transform: endings.end.transform,
+            stroke: strokeColor,
+            onMouseDown: onClick,
             style: {
-              mixBlendMode: blendModeToCss(
-                annotation.object.blendMode ?? PdfBlendMode.Multiply
-              )
-            },
-            ...annotationsProps,
-            children: /* @__PURE__ */ jsx(
-              Highlight,
-              {
-                color: annotation.object.color,
-                opacity: annotation.object.opacity,
-                rects: annotation.object.segmentRects,
-                scale,
-                rect: annotation.object.rect,
-                onClick: (e) => handleClick(e, annotation)
+              cursor: isSelected ? "move" : "pointer",
+              strokeWidth,
+              strokeLinecap: "butt",
+              pointerEvents: endings.end.filled ? "visible" : "visibleStroke",
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
               }
-            )
-          },
-          annotation.localId
-        );
-      case PdfAnnotationSubtype.INK:
-        return /* @__PURE__ */ jsx(
-          AnnotationContainer,
-          {
-            isSelected,
-            trackedAnnotation: annotation,
-            outlineOffset: 6,
-            computeResizePatch: resizeInkAnnotation,
-            style: {
-              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
             },
-            ...annotationsProps,
-            children: (obj) => /* @__PURE__ */ jsx(
-              Ink,
-              {
-                color: obj.color,
-                opacity: obj.opacity,
-                strokeWidth: obj.strokeWidth,
-                inkList: obj.inkList,
-                rect: obj.rect,
-                scale,
-                onClick: (e) => handleClick(e, annotation)
-              }
-            )
-          },
-          annotation.localId
-        );
-      default:
-        return null;
+            fill: endings.end.filled ? color : "none"
+          }
+        )
+      ]
     }
-  }) });
+  );
 }
-function TextMarkup({ pageIndex, scale }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+function Polyline({
+  rect,
+  vertices,
+  color = "transparent",
+  strokeColor = "#000000",
+  opacity = 1,
+  strokeWidth,
+  scale,
+  isSelected,
+  onClick,
+  lineEndings
+}) {
+  const localPts = useMemo(
+    () => vertices.map(({ x, y }) => ({ x: x - rect.origin.x, y: y - rect.origin.y })),
+    [vertices, rect]
+  );
+  const pathData = useMemo(() => {
+    if (!localPts.length) return "";
+    const [first, ...rest] = localPts;
+    return `M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y} `).join("").trim();
+  }, [localPts]);
+  const endings = useMemo(() => {
+    if (localPts.length < 2) return { start: null, end: null };
+    const toAngle = (a, b) => Math.atan2(b.y - a.y, b.x - a.x);
+    const startRad = toAngle(localPts[1], localPts[0]);
+    const endRad = toAngle(localPts[localPts.length - 2], localPts[localPts.length - 1]);
+    const start = patching.createEnding(
+      lineEndings == null ? void 0 : lineEndings.start,
+      strokeWidth,
+      startRad + Math.PI,
+      // tip points outward from first segment start
+      localPts[0].x,
+      localPts[0].y
+    );
+    const end = patching.createEnding(
+      lineEndings == null ? void 0 : lineEndings.end,
+      strokeWidth,
+      endRad,
+      localPts[localPts.length - 1].x,
+      localPts[localPts.length - 1].y
+    );
+    return { start, end };
+  }, [localPts, lineEndings, strokeWidth]);
+  const width = rect.size.width * scale;
+  const height = rect.size.height * scale;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width,
+        height,
+        pointerEvents: "none",
+        zIndex: 2,
+        overflow: "visible"
+      },
+      width,
+      height,
+      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: pathData,
+            onMouseDown: onClick,
+            opacity,
+            style: {
+              fill: "none",
+              stroke: strokeColor ?? color,
+              strokeWidth,
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: "visibleStroke",
+              strokeLinecap: "butt",
+              strokeLinejoin: "miter"
+            }
+          }
+        ),
+        endings.start && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: endings.start.d,
+            transform: endings.start.transform,
+            stroke: strokeColor,
+            fill: endings.start.filled ? color : "none",
+            onMouseDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              strokeWidth,
+              pointerEvents: endings.start.filled ? "visible" : "visibleStroke",
+              strokeLinecap: "butt"
+            }
+          }
+        ),
+        endings.end && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: endings.end.d,
+            transform: endings.end.transform,
+            stroke: strokeColor,
+            fill: endings.end.filled ? color : "none",
+            onMouseDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              strokeWidth,
+              pointerEvents: endings.end.filled ? "visible" : "visibleStroke",
+              strokeLinecap: "butt"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function Polygon({
+  rect,
+  vertices,
+  color = "transparent",
+  strokeColor = "#000000",
+  opacity = 1,
+  strokeWidth,
+  strokeStyle = PdfAnnotationBorderStyle.SOLID,
+  strokeDashArray,
+  scale,
+  isSelected,
+  onClick
+}) {
+  const localPts = useMemo(
+    () => vertices.map(({ x, y }) => ({ x: x - rect.origin.x, y: y - rect.origin.y })),
+    [vertices, rect]
+  );
+  const pathData = useMemo(() => {
+    if (!localPts.length) return "";
+    const [first, ...rest] = localPts;
+    return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y} `).join("") + "Z").trim();
+  }, [localPts]);
+  const width = rect.size.width * scale;
+  const height = rect.size.height * scale;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width,
+        height,
+        pointerEvents: "none",
+        zIndex: 2,
+        overflow: "visible"
+      },
+      width,
+      height,
+      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: pathData,
+          onMouseDown: onClick,
+          opacity,
+          style: {
+            fill: color,
+            stroke: strokeColor ?? color,
+            strokeWidth,
+            cursor: isSelected ? "move" : "pointer",
+            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            strokeLinecap: "butt",
+            strokeLinejoin: "miter",
+            ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+              strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+            }
+          }
+        }
+      )
+    }
+  );
+}
+const patchLine = (orig, ctx) => {
+  if (ctx.vertices && ctx.vertices.length >= 2) {
+    const rect = patching.lineRectWithEndings(ctx.vertices, orig.strokeWidth, orig.lineEndings);
+    return {
+      rect,
+      linePoints: { start: ctx.vertices[0], end: ctx.vertices[1] }
+    };
+  }
+  const dx = ctx.rect.origin.x - orig.rect.origin.x;
+  const dy = ctx.rect.origin.y - orig.rect.origin.y;
+  return {
+    rect: ctx.rect,
+    linePoints: {
+      start: { x: orig.linePoints.start.x + dx, y: orig.linePoints.start.y + dy },
+      end: { x: orig.linePoints.end.x + dx, y: orig.linePoints.end.y + dy }
+    }
+  };
+};
+const patchPolyline = (orig, ctx) => {
+  if (ctx.vertices && ctx.vertices.length) {
+    return {
+      rect: patching.lineRectWithEndings(ctx.vertices, orig.strokeWidth, orig.lineEndings),
+      vertices: ctx.vertices
+    };
+  }
+  const dx = ctx.rect.origin.x - orig.rect.origin.x;
+  const dy = ctx.rect.origin.y - orig.rect.origin.y;
+  const moved = orig.vertices.map((p) => ({ x: p.x + dx, y: p.y + dy }));
+  return {
+    rect: ctx.rect,
+    vertices: moved
+  };
+};
+const patchPolygon = (orig, ctx) => {
+  if (ctx.vertices && ctx.vertices.length) {
+    const pad = orig.strokeWidth / 2;
+    return {
+      rect: expandRect(rectFromPoints(ctx.vertices), pad),
+      vertices: ctx.vertices
+    };
+  }
+  const dx = ctx.rect.origin.x - orig.rect.origin.x;
+  const dy = ctx.rect.origin.y - orig.rect.origin.y;
+  const moved = orig.vertices.map((p) => ({ x: p.x + dx, y: p.y + dy }));
+  return {
+    rect: ctx.rect,
+    vertices: moved
+  };
+};
+function Annotations(annotationsProps) {
+  const { pageIndex, scale, selectionMenu } = annotationsProps;
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const { provides: selectionProvides } = useSelectionCapability();
+  const [annotations, setAnnotations] = useState([]);
+  const { register } = usePointerHandlers({ pageIndex });
+  const [selectionState, setSelectionState] = useState(null);
+  useEffect(() => {
+    if (annotationProvides) {
+      annotationProvides.onStateChange((state) => {
+        setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
+        setSelectionState(getSelectedAnnotationByPageIndex(state, pageIndex));
+      });
+    }
+  }, [annotationProvides]);
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (_, pe) => {
+        if (pe.target === pe.currentTarget && annotationProvides) {
+          annotationProvides.deselectAnnotation();
+        }
+      }
+    }),
+    [annotationProvides]
+  );
+  const handleClick = useCallback(
+    (e, annotation) => {
+      e.stopPropagation();
+      if (annotationProvides && selectionProvides) {
+        annotationProvides.selectAnnotation(pageIndex, annotation.localId);
+        selectionProvides.clear();
+      }
+    },
+    [annotationProvides, selectionProvides, pageIndex]
+  );
+  useEffect(() => {
+    return register(handlers);
+  }, [register, handlers]);
+  return /* @__PURE__ */ jsx(Fragment$1, { children: annotations.map((annotation) => {
+    const isSelected = (selectionState == null ? void 0 : selectionState.localId) === annotation.localId;
+    if (isInk(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: true,
+          selectionMenu,
+          computePatch: patchInk,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(
+            Ink,
+            {
+              cursor: isSelected ? "move" : "pointer",
+              color: obj.color,
+              opacity: obj.opacity,
+              strokeWidth: obj.strokeWidth,
+              inkList: obj.inkList,
+              rect: obj.rect,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
+    if (isSquare(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: true,
+          selectionMenu,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(
+            Square,
+            {
+              cursor: isSelected ? "move" : "pointer",
+              rect: obj.rect,
+              color: obj.color,
+              opacity: obj.opacity,
+              strokeWidth: obj.strokeWidth,
+              strokeColor: obj.strokeColor,
+              strokeStyle: obj.strokeStyle,
+              strokeDashArray: obj.strokeDashArray,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
+    if (isCircle(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: true,
+          selectionMenu,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(
+            Circle,
+            {
+              cursor: isSelected ? "move" : "pointer",
+              rect: obj.rect,
+              color: obj.color,
+              opacity: obj.opacity,
+              strokeWidth: obj.strokeWidth,
+              strokeColor: obj.strokeColor,
+              strokeStyle: obj.strokeStyle,
+              strokeDashArray: obj.strokeDashArray,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
+    if (isUnderline(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: false,
+          isResizable: false,
+          selectionMenu,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(
+            Underline,
+            {
+              rect: obj.rect,
+              color: obj.color,
+              opacity: obj.opacity,
+              rects: obj.segmentRects,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
+    if (isStrikeout(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: false,
+          isResizable: false,
+          selectionMenu,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(
+            Strikeout,
+            {
+              rect: obj.rect,
+              color: obj.color,
+              opacity: obj.opacity,
+              rects: obj.segmentRects,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
+    if (isSquiggly(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: false,
+          isResizable: false,
+          selectionMenu,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(
+            Squiggly,
+            {
+              color: obj.color,
+              opacity: obj.opacity,
+              rects: obj.segmentRects,
+              rect: obj.rect,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
+    if (isHighlight(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: false,
+          isResizable: false,
+          selectionMenu,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Multiply)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(
+            Highlight,
+            {
+              color: obj.color,
+              opacity: obj.opacity,
+              rects: obj.segmentRects,
+              scale,
+              rect: obj.rect,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
+    if (isLine(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: false,
+          selectionMenu,
+          computePatch: patchLine,
+          computeVertices: (annotation2) => [
+            annotation2.linePoints.start,
+            annotation2.linePoints.end
+          ],
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            Line,
+            {
+              isSelected,
+              rect: obj.rect,
+              color: obj.color,
+              opacity: obj.opacity,
+              linePoints: obj.linePoints,
+              lineEndings: obj.lineEndings,
+              strokeWidth: obj.strokeWidth,
+              strokeColor: obj.strokeColor,
+              strokeStyle: obj.strokeStyle,
+              strokeDashArray: obj.strokeDashArray,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          ) })
+        },
+        annotation.localId
+      );
+    }
+    if (isPolyline(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: false,
+          selectionMenu,
+          computePatch: patchPolyline,
+          computeVertices: (annotation2) => annotation2.vertices,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            Polyline,
+            {
+              isSelected,
+              rect: obj.rect,
+              color: obj.color,
+              opacity: obj.opacity,
+              vertices: obj.vertices,
+              lineEndings: obj.lineEndings,
+              strokeWidth: obj.strokeWidth,
+              strokeColor: obj.strokeColor,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          ) })
+        },
+        annotation.localId
+      );
+    }
+    if (isPolygon(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: false,
+          selectionMenu,
+          computeVertices: (annotation2) => annotation2.vertices,
+          computePatch: patchPolygon,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (obj) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            Polygon,
+            {
+              isSelected,
+              rect: obj.rect,
+              color: obj.color,
+              opacity: obj.opacity,
+              vertices: obj.vertices,
+              strokeWidth: obj.strokeWidth,
+              strokeColor: obj.strokeColor,
+              strokeStyle: obj.strokeStyle,
+              strokeDashArray: obj.strokeDashArray,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          ) })
+        },
+        annotation.localId
+      );
+    }
+    return null;
+  }) });
+}
+function TextMarkup({ pageIndex, scale }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const { provides: selectionProvides } = useSelectionCapability();
   const { provides: annotationProvides } = useAnnotationCapability();
   const [rects, setRects] = useState([]);
@@ -775,9 +1659,8 @@ function TextMarkup({ pageIndex, scale }) {
       return null;
   }
 }
-const MAX_STROKE_WIDTH = 30;
 const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const { provides: annotationProvides } = useAnnotationCapability();
   const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
   useEffect(() => {
@@ -790,6 +1673,8 @@ const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
   const toolColor = ((_a = activeTool.defaults) == null ? void 0 : _a.color) ?? "#000000";
   const toolOpacity = ((_b = activeTool.defaults) == null ? void 0 : _b.opacity) ?? 1;
   const toolStrokeWidth = ((_c = activeTool.defaults) == null ? void 0 : _c.strokeWidth) ?? 2;
+  const toolBlendMode = ((_d = activeTool.defaults) == null ? void 0 : _d.blendMode) ?? PdfBlendMode.Normal;
+  const intent = (_e = activeTool.defaults) == null ? void 0 : _e.intent;
   const { register } = usePointerHandlers({ modeId: "ink", pageIndex });
   const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
   const [currentStrokes, setCurrentStrokes] = useState([]);
@@ -833,23 +1718,13 @@ const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
           if (currentStrokes.length && annotationProvides) {
             const allPoints2 = currentStrokes.flatMap((s) => s.points);
             if (!allPoints2.length) return;
-            const minX2 = Math.min(...allPoints2.map((p) => p.x));
-            const minY2 = Math.min(...allPoints2.map((p) => p.y));
-            const maxX2 = Math.max(...allPoints2.map((p) => p.x));
-            const maxY2 = Math.max(...allPoints2.map((p) => p.y));
-            const halfStroke2 = MAX_STROKE_WIDTH / 2;
-            const rectMinX = minX2 - halfStroke2;
-            const rectMinY = minY2 - halfStroke2;
-            const rectMaxX = maxX2 + halfStroke2;
-            const rectMaxY = maxY2 + halfStroke2;
-            if (rectMaxX - rectMinX < 1 || rectMaxY - rectMinY < 1) return;
-            const rect = {
-              origin: { x: rectMinX, y: rectMinY },
-              size: { width: rectMaxX - rectMinX, height: rectMaxY - rectMinY }
-            };
+            const rect2 = expandRect(rectFromPoints(allPoints2), toolStrokeWidth / 2);
+            if (rect2.size.width < 1 || rect2.size.height < 1) return;
             const anno = {
               type: PdfAnnotationSubtype.INK,
-              rect,
+              intent,
+              blendMode: toolBlendMode,
+              rect: rect2,
               inkList: currentStrokes,
               color: toolColor,
               opacity: toolOpacity,
@@ -900,22 +1775,12 @@ const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
   if (!currentStrokes.length) return null;
   const allPoints = currentStrokes.flatMap((s) => s.points);
   if (!allPoints.length) return null;
-  const minX = Math.min(...allPoints.map((p) => p.x));
-  const minY = Math.min(...allPoints.map((p) => p.y));
-  const maxX = Math.max(...allPoints.map((p) => p.x));
-  const maxY = Math.max(...allPoints.map((p) => p.y));
-  const halfStroke = MAX_STROKE_WIDTH / 2;
-  const svgMinX = minX - halfStroke;
-  const svgMinY = minY - halfStroke;
-  const svgMaxX = maxX + halfStroke;
-  const svgMaxY = maxY + halfStroke;
-  const dw = svgMaxX - svgMinX;
-  const dh = svgMaxY - svgMinY;
+  const rect = expandRect(rectFromPoints(allPoints), toolStrokeWidth / 2);
   const paths = currentStrokes.map(({ points }) => {
     let d = "";
     points.forEach(({ x, y }, i) => {
-      const lx = x - svgMinX;
-      const ly = y - svgMinY;
+      const lx = x - rect.origin.x;
+      const ly = y - rect.origin.y;
       d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
     });
     return d.trim();
@@ -925,42 +1790,763 @@ const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
     {
       style: {
         position: "absolute",
-        left: svgMinX * scale,
-        top: svgMinY * scale,
-        width: dw * scale,
-        height: dh * scale,
+        left: rect.origin.x * scale,
+        top: rect.origin.y * scale,
+        width: rect.size.width * scale,
+        height: rect.size.height * scale,
         pointerEvents: "none",
         zIndex: 2
       },
-      width: dw * scale,
-      height: dh * scale,
-      viewBox: `0 0 ${dw} ${dh}`,
+      width: rect.size.width * scale,
+      height: rect.size.height * scale,
+      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
       children: paths.map((d, i) => /* @__PURE__ */ jsx(
         "path",
         {
           d,
           fill: "none",
-          stroke: toolColor,
-          strokeWidth: toolStrokeWidth,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          opacity: toolOpacity
+          opacity: toolOpacity,
+          style: {
+            stroke: toolColor,
+            strokeWidth: toolStrokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
         },
         i
       ))
     }
   );
 };
-function AnnotationLayer({
+const CirclePaint = ({
   pageIndex,
   scale,
   pageWidth,
   pageHeight,
-  rotation,
-  style,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
+  cursor
+}) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!annotationProvides) return;
+    return annotationProvides.onActiveToolChange(setActiveTool);
+  }, [annotationProvides]);
+  if (!activeTool.defaults) return null;
+  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.CIRCLE) return null;
+  const toolColor = activeTool.defaults.color ?? "#000000";
+  const toolOpacity = activeTool.defaults.opacity ?? 1;
+  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
+  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
+  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
+  const toolStrokeDashArray = activeTool.defaults.strokeDashArray ?? [];
+  const { register } = usePointerHandlers({ modeId: "circle", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const [start, setStart] = useState(null);
+  const [current, setCurrent] = useState(null);
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        var _a, _b;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setStart({ x, y });
+        setCurrent({ x, y });
+        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+      },
+      onPointerMove: (pos) => {
+        if (!start) return;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setCurrent({ x, y });
+      },
+      onPointerUp: (_, evt) => {
+        var _a, _b;
+        if (start && current && annotationProvides) {
+          const minX2 = Math.min(start.x, current.x);
+          const minY2 = Math.min(start.y, current.y);
+          const maxX2 = Math.max(start.x, current.x);
+          const maxY2 = Math.max(start.y, current.y);
+          if (maxX2 - minX2 >= 1 && maxY2 - minY2 >= 1) {
+            const halfStroke2 = toolStrokeWidth / 2;
+            const rect = {
+              origin: { x: minX2 - halfStroke2, y: minY2 - halfStroke2 },
+              size: {
+                width: maxX2 - minX2 + toolStrokeWidth,
+                height: maxY2 - minY2 + toolStrokeWidth
+              }
+            };
+            const anno = {
+              type: PdfAnnotationSubtype.CIRCLE,
+              rect,
+              flags: ["print"],
+              color: toolColor,
+              opacity: toolOpacity,
+              strokeWidth: toolStrokeWidth,
+              strokeColor: toolStrokeColor,
+              strokeStyle: toolStrokeStyle,
+              strokeDashArray: toolStrokeDashArray,
+              pageIndex,
+              id: Date.now() + Math.random()
+            };
+            annotationProvides.createAnnotation(pageIndex, anno);
+            annotationProvides.setActiveVariant(null);
+            annotationProvides.selectAnnotation(pageIndex, anno.id);
+          }
+        }
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      },
+      onPointerCancel: (_, evt) => {
+        var _a, _b;
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      }
+    }),
+    [
+      start,
+      current,
+      annotationProvides,
+      pageIndex,
+      pageWidthPDF,
+      pageHeightPDF,
+      toolColor,
+      toolOpacity,
+      toolStrokeWidth
+    ]
+  );
+  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
+  if (!start || !current) return null;
+  const minX = Math.min(start.x, current.x);
+  const minY = Math.min(start.y, current.y);
+  const maxX = Math.max(start.x, current.x);
+  const maxY = Math.max(start.y, current.y);
+  const halfStroke = toolStrokeWidth / 2;
+  const svgMinX = minX - halfStroke;
+  const svgMinY = minY - halfStroke;
+  const width = maxX - minX;
+  const height = maxY - minY;
+  const dw = width + toolStrokeWidth;
+  const dh = height + toolStrokeWidth;
+  const cx = halfStroke + width / 2;
+  const cy = halfStroke + height / 2;
+  const rx = width / 2;
+  const ry = height / 2;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: svgMinX * scale,
+        top: svgMinY * scale,
+        width: dw * scale,
+        height: dh * scale,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: dw * scale,
+      height: dh * scale,
+      viewBox: `0 0 ${dw} ${dh}`,
+      children: /* @__PURE__ */ jsx(
+        "ellipse",
+        {
+          cx,
+          cy,
+          rx,
+          ry,
+          fill: toolColor,
+          opacity: toolOpacity,
+          style: {
+            cursor,
+            stroke: toolStrokeColor,
+            strokeWidth: toolStrokeWidth,
+            ...toolStrokeStyle === PdfAnnotationBorderStyle.DASHED && {
+              strokeDasharray: toolStrokeDashArray.join(",")
+            }
+          }
+        }
+      )
+    }
+  );
+};
+const SquarePaint = ({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  cursor
+}) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!annotationProvides) return;
+    return annotationProvides.onActiveToolChange(setActiveTool);
+  }, [annotationProvides]);
+  if (!activeTool.defaults) return null;
+  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.SQUARE) return null;
+  const toolColor = activeTool.defaults.color ?? "#000000";
+  const toolOpacity = activeTool.defaults.opacity ?? 1;
+  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
+  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
+  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
+  const toolStrokeDashArray = activeTool.defaults.strokeDashArray ?? [];
+  const { register } = usePointerHandlers({ modeId: "square", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const [start, setStart] = useState(null);
+  const [current, setCurrent] = useState(null);
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        var _a, _b;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setStart({ x, y });
+        setCurrent({ x, y });
+        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+      },
+      onPointerMove: (pos) => {
+        if (!start) return;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setCurrent({ x, y });
+      },
+      onPointerUp: (_, evt) => {
+        var _a, _b;
+        if (start && current && annotationProvides) {
+          const minX2 = Math.min(start.x, current.x);
+          const minY2 = Math.min(start.y, current.y);
+          const maxX2 = Math.max(start.x, current.x);
+          const maxY2 = Math.max(start.y, current.y);
+          if (maxX2 - minX2 >= 1 && maxY2 - minY2 >= 1) {
+            const halfStroke2 = toolStrokeWidth / 2;
+            const rect = {
+              origin: { x: minX2 - halfStroke2, y: minY2 - halfStroke2 },
+              size: {
+                width: maxX2 - minX2 + toolStrokeWidth,
+                height: maxY2 - minY2 + toolStrokeWidth
+              }
+            };
+            const anno = {
+              type: PdfAnnotationSubtype.SQUARE,
+              rect,
+              flags: ["print"],
+              color: toolColor,
+              opacity: toolOpacity,
+              strokeWidth: toolStrokeWidth,
+              strokeColor: toolStrokeColor,
+              strokeStyle: toolStrokeStyle,
+              strokeDashArray: toolStrokeDashArray,
+              pageIndex,
+              id: Date.now() + Math.random()
+            };
+            annotationProvides.createAnnotation(pageIndex, anno);
+            annotationProvides.setActiveVariant(null);
+            annotationProvides.selectAnnotation(pageIndex, anno.id);
+          }
+        }
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      },
+      onPointerCancel: (_, evt) => {
+        var _a, _b;
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      }
+    }),
+    [
+      start,
+      current,
+      annotationProvides,
+      pageIndex,
+      pageWidthPDF,
+      pageHeightPDF,
+      toolColor,
+      toolOpacity,
+      toolStrokeWidth
+    ]
+  );
+  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
+  if (!start || !current) return null;
+  const minX = Math.min(start.x, current.x);
+  const minY = Math.min(start.y, current.y);
+  const maxX = Math.max(start.x, current.x);
+  const maxY = Math.max(start.y, current.y);
+  const halfStroke = toolStrokeWidth / 2;
+  const svgMinX = minX - halfStroke;
+  const svgMinY = minY - halfStroke;
+  const width = maxX - minX;
+  const height = maxY - minY;
+  const dw = width + toolStrokeWidth;
+  const dh = height + toolStrokeWidth;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: svgMinX * scale,
+        top: svgMinY * scale,
+        width: dw * scale,
+        height: dh * scale,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: dw * scale,
+      height: dh * scale,
+      viewBox: `0 0 ${dw} ${dh}`,
+      children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: halfStroke,
+          y: halfStroke,
+          width,
+          height,
+          fill: toolColor,
+          opacity: toolOpacity,
+          style: {
+            cursor,
+            stroke: toolStrokeColor,
+            strokeWidth: toolStrokeWidth,
+            ...toolStrokeStyle === PdfAnnotationBorderStyle.DASHED && {
+              strokeDasharray: toolStrokeDashArray.join(",")
+            }
+          }
+        }
+      )
+    }
+  );
+};
+const PolylinePaint = ({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  cursor
+}) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!annotationProvides) return;
+    return annotationProvides.onActiveToolChange(setActiveTool);
+  }, [annotationProvides]);
+  if (!activeTool.defaults) return null;
+  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.POLYLINE) return null;
+  const toolColor = activeTool.defaults.color ?? "#000000";
+  const toolOpacity = activeTool.defaults.opacity ?? 1;
+  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
+  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
+  const toolLineEndings = activeTool.defaults.lineEndings;
+  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
+  const toolStrokeDashArray = activeTool.defaults.strokeDashArray;
+  const { register } = usePointerHandlers({ modeId: "polyline", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const [vertices, setVertices] = useState([]);
+  const [current, setCurrent] = useState(null);
+  const commitPolyline = (pts) => {
+    if (pts.length < 2) return;
+    const rect2 = patching.lineRectWithEndings(pts, toolStrokeWidth, toolLineEndings);
+    const anno = {
+      type: PdfAnnotationSubtype.POLYLINE,
+      rect: rect2,
+      vertices: pts,
+      color: toolColor,
+      opacity: toolOpacity,
+      strokeWidth: toolStrokeWidth,
+      strokeColor: toolStrokeColor,
+      strokeStyle: toolStrokeStyle,
+      strokeDashArray: toolStrokeDashArray,
+      lineEndings: toolLineEndings,
+      pageIndex,
+      id: Date.now() + Math.random()
+    };
+    annotationProvides.createAnnotation(pageIndex, anno);
+    annotationProvides.setActiveVariant(null);
+    annotationProvides.selectAnnotation(pageIndex, anno.id);
+  };
+  const handlers = useMemo(
+    () => ({
+      onClick: (pos) => {
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setVertices((prev) => [...prev, { x, y }]);
+        setCurrent({ x, y });
+      },
+      onDoubleClick: () => {
+        if (vertices.length >= 1 && annotationProvides) {
+          commitPolyline(vertices);
+        }
+        setVertices([]);
+        setCurrent(null);
+      },
+      onPointerMove: (pos) => {
+        if (!vertices.length) return;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setCurrent({ x, y });
+      },
+      onPointerCancel: () => {
+        setVertices([]);
+        setCurrent(null);
+      }
+    }),
+    [vertices, annotationProvides, pageWidthPDF, pageHeightPDF]
+  );
+  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
+  if (!vertices.length || !current) return null;
+  const allPts = [...vertices, current];
+  const rect = patching.lineRectWithEndings(allPts, toolStrokeWidth, toolLineEndings);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: rect.origin.x * scale,
+        top: rect.origin.y * scale,
+        width: rect.size.width * scale,
+        height: rect.size.height * scale,
+        pointerEvents: "none",
+        zIndex: 2,
+        overflow: "visible",
+        cursor
+      },
+      children: /* @__PURE__ */ jsx(
+        Polyline,
+        {
+          rect,
+          vertices: allPts,
+          strokeWidth: toolStrokeWidth,
+          scale,
+          isSelected: false,
+          color: toolColor,
+          strokeColor: toolStrokeColor,
+          opacity: toolOpacity,
+          lineEndings: toolLineEndings
+        }
+      )
+    }
+  );
+};
+const LinePaint = ({ pageIndex, scale, pageWidth, pageHeight, cursor }) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!annotationProvides) return;
+    return annotationProvides.onActiveToolChange(setActiveTool);
+  }, [annotationProvides]);
+  if (!activeTool.defaults) return null;
+  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.LINE) return null;
+  const toolColor = activeTool.defaults.color ?? "#000000";
+  const toolOpacity = activeTool.defaults.opacity ?? 1;
+  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
+  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
+  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
+  const toolStrokeDashArray = activeTool.defaults.strokeDashArray;
+  const toolLineEndings = activeTool.defaults.lineEndings;
+  const intent = activeTool.defaults.intent;
+  const { register } = usePointerHandlers({ modeId: ["line", "lineArrow"], pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const [start, setStart] = useState(null);
+  const [current, setCurrent] = useState(null);
+  const commitLine = (p1, p2) => {
+    if (Math.abs(p2.x - p1.x) < 1 && Math.abs(p2.y - p1.y) < 1) return;
+    const rect2 = patching.lineRectWithEndings([p1, p2], toolStrokeWidth, toolLineEndings);
+    const anno = {
+      type: PdfAnnotationSubtype.LINE,
+      rect: rect2,
+      linePoints: { start: p1, end: p2 },
+      color: toolColor,
+      opacity: toolOpacity,
+      strokeWidth: toolStrokeWidth,
+      strokeColor: toolStrokeColor,
+      strokeStyle: toolStrokeStyle,
+      strokeDashArray: toolStrokeDashArray,
+      lineEndings: toolLineEndings,
+      intent,
+      pageIndex,
+      id: Date.now() + Math.random()
+    };
+    annotationProvides.createAnnotation(pageIndex, anno);
+    annotationProvides.setActiveVariant(null);
+    annotationProvides.selectAnnotation(pageIndex, anno.id);
+  };
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        var _a, _b;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setStart({ x, y });
+        setCurrent({ x, y });
+        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+      },
+      onPointerMove: (pos) => {
+        if (!start) return;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setCurrent({ x, y });
+      },
+      onPointerUp: (_, evt) => {
+        var _a, _b;
+        if (start && current && annotationProvides) {
+          commitLine(start, current);
+        }
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      },
+      onPointerCancel: (_, evt) => {
+        var _a, _b;
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      }
+    }),
+    [start, current, annotationProvides, pageWidthPDF, pageHeightPDF]
+  );
+  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
+  if (!start || !current) return null;
+  const rect = patching.lineRectWithEndings([start, current], toolStrokeWidth, toolLineEndings);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: rect.origin.x * scale,
+        top: rect.origin.y * scale,
+        width: rect.size.width * scale,
+        height: rect.size.height * scale,
+        pointerEvents: "none",
+        zIndex: 2,
+        overflow: "visible",
+        cursor
+      },
+      children: /* @__PURE__ */ jsx(
+        Line,
+        {
+          rect,
+          linePoints: { start, end: current },
+          strokeWidth: toolStrokeWidth,
+          scale,
+          isSelected: false,
+          color: toolColor,
+          strokeColor: toolStrokeColor,
+          opacity: toolOpacity,
+          lineEndings: toolLineEndings,
+          strokeStyle: toolStrokeStyle,
+          strokeDashArray: toolStrokeDashArray
+        }
+      )
+    }
+  );
+};
+const HANDLE_SIZE_PX = 14;
+const PolygonPaint = ({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  cursor
+}) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => annotationProvides == null ? void 0 : annotationProvides.onActiveToolChange(setActiveTool), [annotationProvides]);
+  if (!activeTool.defaults || activeTool.defaults.subtype !== PdfAnnotationSubtype.POLYGON)
+    return null;
+  const toolColor = activeTool.defaults.color ?? "#000000";
+  const toolOpacity = activeTool.defaults.opacity ?? 1;
+  const toolStrokeWidth = activeTool.defaults.strokeWidth ?? 2;
+  const toolStrokeColor = activeTool.defaults.strokeColor ?? "#000000";
+  const toolStrokeStyle = activeTool.defaults.strokeStyle ?? PdfAnnotationBorderStyle.SOLID;
+  const toolStrokeDashArray = activeTool.defaults.strokeDashArray;
+  const { register } = usePointerHandlers({ modeId: "polygon", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const [vertices, setVertices] = useState([]);
+  const [current, setCurrent] = useState(null);
+  const commitPolygon = (pts) => {
+    const xs2 = pts.map((p) => p.x), ys2 = pts.map((p) => p.y);
+    const minX2 = Math.min(...xs2), minY2 = Math.min(...ys2);
+    const maxX2 = Math.max(...xs2), maxY2 = Math.max(...ys2);
+    if (maxX2 - minX2 < 1 || maxY2 - minY2 < 1) return;
+    const half2 = toolStrokeWidth / 2;
+    const rect = {
+      origin: { x: minX2 - half2, y: minY2 - half2 },
+      size: { width: maxX2 - minX2 + toolStrokeWidth, height: maxY2 - minY2 + toolStrokeWidth }
+    };
+    const anno = {
+      type: PdfAnnotationSubtype.POLYGON,
+      rect,
+      vertices: pts,
+      color: toolColor,
+      opacity: toolOpacity,
+      strokeWidth: toolStrokeWidth,
+      strokeColor: toolStrokeColor,
+      strokeStyle: toolStrokeStyle,
+      strokeDashArray: toolStrokeDashArray,
+      pageIndex,
+      id: Date.now() + Math.random()
+    };
+    annotationProvides.createAnnotation(pageIndex, anno);
+    annotationProvides.setActiveVariant(null);
+    annotationProvides.selectAnnotation(pageIndex, anno.id);
+  };
+  const isInsideStartHandle = (x, y) => {
+    if (vertices.length < 2) return false;
+    const sizePDF = HANDLE_SIZE_PX / scale;
+    const half2 = sizePDF / 2;
+    const v0 = vertices[0];
+    return x >= v0.x - half2 && x <= v0.x + half2 && y >= v0.y - half2 && y <= v0.y + half2;
+  };
+  const handlers = useMemo(
+    () => ({
+      onClick: (pos) => {
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        if (isInsideStartHandle(x, y) && vertices.length >= 3 && annotationProvides) {
+          commitPolygon(vertices);
+          setVertices([]);
+          setCurrent(null);
+          return;
+        }
+        setVertices((prev) => [...prev, { x, y }]);
+        setCurrent({ x, y });
+      },
+      onDoubleClick: () => {
+        if (vertices.length >= 3 && annotationProvides) {
+          commitPolygon(vertices);
+          setVertices([]);
+          setCurrent(null);
+        } else {
+          setVertices([]);
+          setCurrent(null);
+        }
+      },
+      onPointerMove: (pos) => {
+        if (!vertices.length) return;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setCurrent({ x, y });
+      },
+      onPointerCancel: () => {
+        setVertices([]);
+        setCurrent(null);
+      }
+    }),
+    [vertices, current, annotationProvides, pageWidthPDF, pageHeightPDF]
+  );
+  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
+  if (!vertices.length || !current) return null;
+  const allPts = [...vertices, current];
+  const xs = allPts.map((p) => p.x), ys = allPts.map((p) => p.y);
+  const minX = Math.min(...xs), minY = Math.min(...ys);
+  const maxX = Math.max(...xs), maxY = Math.max(...ys);
+  const half = toolStrokeWidth / 2;
+  const svgMinX = minX - half;
+  const svgMinY = minY - half;
+  const svgMaxX = maxX + half;
+  const svgMaxY = maxY + half;
+  const dw = svgMaxX - svgMinX;
+  const dh = svgMaxY - svgMinY;
+  const mainPath = useMemo(() => {
+    let d = "";
+    allPts.forEach(({ x, y }, i) => {
+      d += (i === 0 ? "M" : "L") + (x - svgMinX) + " " + (y - svgMinY) + " ";
+    });
+    return d.trim();
+  }, [allPts, svgMinX, svgMinY]);
+  const dottedPath = vertices.length >= 2 ? (() => {
+    const curLx = current.x - svgMinX;
+    const curLy = current.y - svgMinY;
+    const firstLx = vertices[0].x - svgMinX;
+    const firstLy = vertices[0].y - svgMinY;
+    return `M ${curLx} ${curLy} L ${firstLx} ${firstLy}`;
+  })() : null;
+  const handleSizePDF = HANDLE_SIZE_PX / scale;
+  const hHalf = handleSizePDF / 2;
+  const hx = vertices[0].x - hHalf - svgMinX;
+  const hy = vertices[0].y - hHalf - svgMinY;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: svgMinX * scale,
+        top: svgMinY * scale,
+        width: dw * scale,
+        height: dh * scale,
+        pointerEvents: "none",
+        // we handle clicks at the page layer
+        zIndex: 2,
+        overflow: "visible"
+      },
+      width: dw * scale,
+      height: dh * scale,
+      viewBox: `0 0 ${dw} ${dh}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: mainPath,
+            fill: toolColor,
+            opacity: toolOpacity,
+            style: {
+              cursor,
+              stroke: toolStrokeColor,
+              strokeWidth: toolStrokeWidth,
+              ...toolStrokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: toolStrokeDashArray == null ? void 0 : toolStrokeDashArray.join(",")
+              }
+            }
+          }
+        ),
+        dottedPath && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: dottedPath,
+            fill: "none",
+            style: { stroke: toolStrokeColor, strokeWidth: toolStrokeWidth, strokeDasharray: "4,4" }
+          }
+        ),
+        vertices.length >= 3 && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: hx,
+            y: hy,
+            width: handleSizePDF,
+            height: handleSizePDF,
+            fill: toolStrokeColor,
+            opacity: 0.4,
+            stroke: toolStrokeColor,
+            strokeWidth: toolStrokeWidth / 2,
+            style: { pointerEvents: "none" }
+          }
+        )
+      ]
+    }
+  );
+};
+function AnnotationLayer({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  rotation,
+  selectionMenu,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
@@ -968,9 +2554,64 @@ function AnnotationLayer({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx(Annotations, { pageIndex, scale, rotation }),
+        /* @__PURE__ */ jsx(
+          Annotations,
+          {
+            selectionMenu,
+            pageIndex,
+            scale,
+            rotation,
+            pageWidth,
+            pageHeight
+          }
+        ),
         /* @__PURE__ */ jsx(TextMarkup, { pageIndex, scale }),
-        /* @__PURE__ */ jsx(InkPaint, { pageIndex, scale, pageWidth, pageHeight })
+        /* @__PURE__ */ jsx(InkPaint, { pageIndex, scale, pageWidth, pageHeight }),
+        /* @__PURE__ */ jsx(
+          CirclePaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SquarePaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PolygonPaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PolylinePaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LinePaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
+        )
       ]
     }
   );