@embedpdf/plugin-annotation 1.0.11 → 1.0.13

package/dist/react/index.js

@@ -0,0 +1,2624 @@
+import { usePlugin, useCapability } from "@embedpdf/core/react";
+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 { 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,
+  outlineOffset = 1,
+  isSelected = false,
+  isDraggable = true,
+  isResizable = true,
+  computeVertices,
+  computePatch,
+  selectionMenu,
+  ...props
+}) {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [currentRect, setCurrentRect] = useState(trackedAnnotation.object.rect);
+  const [currentVertices, setCurrentVertices] = useState(
+    (computeVertices == null ? void 0 : computeVertices(trackedAnnotation.object)) ?? []
+  );
+  const [previewObject, setPreviewObject] = useState(null);
+  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)) ?? []);
+    }
+  }, [trackedAnnotation]);
+  const currentObject = previewObject ? { ...trackedAnnotation.object, ...previewObject } : trackedAnnotation.object;
+  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,
+            {
+              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);
+                }
+              }
+            }
+          ),
+          isSelected && isResizable && /* @__PURE__ */ jsx(
+            ResizeHandles,
+            {
+              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",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
+        top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
+        width: b.size.width * scale,
+        height: b.size.height * scale,
+        background: color,
+        opacity,
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : void 0,
+        ...style
+      },
+      ...props
+    },
+    i
+  )) });
+}
+function Underline({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Strikeout({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            transform: "translateY(-50%)",
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Squiggly({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  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"/>
+    </svg>`;
+  const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+  return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: amplitude * 2,
+            backgroundImage: svgDataUri,
+            backgroundRepeat: "repeat-x",
+            backgroundSize: `${period}px ${amplitude * 2}px`,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Ink({
+  color = "#000000",
+  opacity = 1,
+  strokeWidth,
+  inkList,
+  rect,
+  scale,
+  onClick,
+  cursor
+}) {
+  const paths = useMemo(() => {
+    return inkList.map(({ points }) => {
+      let d = "";
+      points.forEach(({ x, y }, i) => {
+        const lx = x - rect.origin.x;
+        const ly = y - rect.origin.y;
+        d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
+      });
+      return d.trim();
+    });
+  }, [inkList, rect]);
+  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: paths.map((d, i) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          opacity,
+          onMouseDown: onClick,
+          style: {
+            cursor,
+            pointerEvents: "visibleStroke",
+            stroke: color,
+            strokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+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 = ctx.rect.size.width / oldRect.size.width;
+  let scaleY = ctx.rect.size.height / oldRect.size.height;
+  const minSize = 10;
+  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);
+    ctx.rect = {
+      origin: ctx.rect.origin,
+      size: {
+        width: oldRect.size.width * scaleX,
+        height: oldRect.size.height * scaleY
+      }
+    };
+  }
+  if (ctx.uniform) {
+    const minScale = Math.min(scaleX, scaleY);
+    scaleX = minScale;
+    scaleY = minScale;
+    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: 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 = Math.round(original.strokeWidth * avgScale);
+  return {
+    rect: ctx.rect,
+    inkList: newInkList,
+    strokeWidth: newStrokeWidth
+  };
+};
+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",
+          {
+            x1,
+            y1,
+            x2,
+            y2,
+            opacity,
+            onMouseDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: "visibleStroke",
+              stroke: strokeColor,
+              strokeWidth,
+              strokeLinecap: "butt",
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+              }
+            }
+          }
+        ),
+        endings.start && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: endings.start.d,
+            transform: endings.start.transform,
+            onMouseDown: onClick,
+            stroke: strokeColor,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              strokeWidth,
+              strokeLinecap: "butt",
+              pointerEvents: endings.start.filled ? "visible" : "visibleStroke",
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+              }
+            },
+            fill: endings.start.filled ? color : "none"
+          }
+        ),
+        endings.end && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: endings.end.d,
+            transform: endings.end.transform,
+            stroke: strokeColor,
+            onMouseDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              strokeWidth,
+              strokeLinecap: "butt",
+              pointerEvents: endings.end.filled ? "visible" : "visibleStroke",
+              ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+              }
+            },
+            fill: endings.end.filled ? color : "none"
+          }
+        )
+      ]
+    }
+  );
+}
+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([]);
+  const [boundingRect, setBoundingRect] = useState(null);
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!selectionProvides) return;
+    const off = selectionProvides.onSelectionChange(() => {
+      setRects(selectionProvides.getHighlightRectsForPage(pageIndex));
+      setBoundingRect(selectionProvides.getBoundingRectForPage(pageIndex));
+    });
+    return off;
+  }, [selectionProvides, pageIndex]);
+  useEffect(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  if (!boundingRect) return null;
+  switch (activeTool.variantKey) {
+    case makeVariantKey(PdfAnnotationSubtype.UNDERLINE):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_a = activeTool.defaults) == null ? void 0 : _a.blendMode) ?? PdfBlendMode.Normal),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Underline,
+            {
+              color: (_b = activeTool.defaults) == null ? void 0 : _b.color,
+              opacity: (_c = activeTool.defaults) == null ? void 0 : _c.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case makeVariantKey(PdfAnnotationSubtype.HIGHLIGHT):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_d = activeTool.defaults) == null ? void 0 : _d.blendMode) ?? PdfBlendMode.Multiply),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Highlight,
+            {
+              color: (_e = activeTool.defaults) == null ? void 0 : _e.color,
+              opacity: (_f = activeTool.defaults) == null ? void 0 : _f.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case makeVariantKey(PdfAnnotationSubtype.STRIKEOUT):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_g = activeTool.defaults) == null ? void 0 : _g.blendMode) ?? PdfBlendMode.Normal),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Strikeout,
+            {
+              color: (_h = activeTool.defaults) == null ? void 0 : _h.color,
+              opacity: (_i = activeTool.defaults) == null ? void 0 : _i.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case makeVariantKey(PdfAnnotationSubtype.SQUIGGLY):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_j = activeTool.defaults) == null ? void 0 : _j.blendMode) ?? PdfBlendMode.Normal),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Squiggly,
+            {
+              color: (_k = activeTool.defaults) == null ? void 0 : _k.color,
+              opacity: (_l = activeTool.defaults) == null ? void 0 : _l.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    default:
+      return null;
+  }
+}
+const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
+  var _a, _b, _c, _d, _e;
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  if (!activeTool.defaults) return null;
+  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.INK) return null;
+  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([]);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const timerRef = useRef(null);
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        var _a2, _b2;
+        const curX = clamp(pos.x, 0, pageWidthPDF);
+        const curY = clamp(pos.y, 0, pageHeightPDF);
+        setIsDrawing(true);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+          setCurrentStrokes((prev) => [...prev, { points: [{ x: curX, y: curY }] }]);
+        } else {
+          setCurrentStrokes([{ points: [{ x: curX, y: curY }] }]);
+        }
+        (_b2 = (_a2 = evt.target) == null ? void 0 : _a2.setPointerCapture) == null ? void 0 : _b2.call(_a2, evt.pointerId);
+      },
+      onPointerMove: (pos) => {
+        if (!isDrawing) return;
+        const curX = clamp(pos.x, 0, pageWidthPDF);
+        const curY = clamp(pos.y, 0, pageHeightPDF);
+        setCurrentStrokes((prev) => {
+          if (!prev.length) return prev;
+          const last = prev[prev.length - 1];
+          const newLast = { points: [...last.points, { x: curX, y: curY }] };
+          return [...prev.slice(0, -1), newLast];
+        });
+      },
+      onPointerUp: (_, evt) => {
+        var _a2, _b2;
+        setIsDrawing(false);
+        (_b2 = (_a2 = evt.target) == null ? void 0 : _a2.releasePointerCapture) == null ? void 0 : _b2.call(_a2, evt.pointerId);
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          if (currentStrokes.length && annotationProvides) {
+            const allPoints2 = currentStrokes.flatMap((s) => s.points);
+            if (!allPoints2.length) return;
+            const rect2 = expandRect(rectFromPoints(allPoints2), toolStrokeWidth / 2);
+            if (rect2.size.width < 1 || rect2.size.height < 1) return;
+            const anno = {
+              type: PdfAnnotationSubtype.INK,
+              intent,
+              blendMode: toolBlendMode,
+              rect: rect2,
+              inkList: currentStrokes,
+              color: toolColor,
+              opacity: toolOpacity,
+              strokeWidth: toolStrokeWidth,
+              pageIndex,
+              id: Date.now() + Math.random()
+            };
+            annotationProvides.createAnnotation(pageIndex, anno);
+            annotationProvides.setActiveVariant(null);
+            annotationProvides.selectAnnotation(pageIndex, anno.id);
+          }
+          setCurrentStrokes([]);
+          timerRef.current = null;
+        }, 3e3);
+      },
+      onPointerCancel: (_, evt) => {
+        var _a2, _b2;
+        setIsDrawing(false);
+        (_b2 = (_a2 = evt.target) == null ? void 0 : _a2.releasePointerCapture) == null ? void 0 : _b2.call(_a2, evt.pointerId);
+        setCurrentStrokes([]);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      }
+    }),
+    [
+      pageWidthPDF,
+      pageHeightPDF,
+      currentStrokes,
+      annotationProvides,
+      pageIndex,
+      toolColor,
+      toolOpacity,
+      toolStrokeWidth,
+      isDrawing
+    ]
+  );
+  useEffect(() => {
+    if (!register) return;
+    return register(handlers);
+  }, [register, handlers]);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  if (!currentStrokes.length) return null;
+  const allPoints = currentStrokes.flatMap((s) => s.points);
+  if (!allPoints.length) return null;
+  const rect = expandRect(rectFromPoints(allPoints), toolStrokeWidth / 2);
+  const paths = currentStrokes.map(({ points }) => {
+    let d = "";
+    points.forEach(({ x, y }, i) => {
+      const lx = x - rect.origin.x;
+      const ly = y - rect.origin.y;
+      d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
+    });
+    return d.trim();
+  });
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      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
+      },
+      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",
+          opacity: toolOpacity,
+          style: {
+            stroke: toolColor,
+            strokeWidth: toolStrokeWidth,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        },
+        i
+      ))
+    }
+  );
+};
+const CirclePaint = ({
+  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.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: {
+        ...style
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Annotations,
+          {
+            selectionMenu,
+            pageIndex,
+            scale,
+            rotation,
+            pageWidth,
+            pageHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(TextMarkup, { pageIndex, scale }),
+        /* @__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
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AnnotationLayer,
+  useAnnotationCapability,
+  useAnnotationPlugin
+};
+//# sourceMappingURL=index.js.map