react-pdf-highlighter-plus 1.0.3 → 1.0.5

package/dist/esm/index.js

@@ -1,19 +1,3558 @@
-import { PdfHighlighter, } from "./components/PdfHighlighter";
-import { TextHighlight, } from "./components/TextHighlight";
-import { MonitoredHighlightContainer, } from "./components/MonitoredHighlightContainer";
-import { AreaHighlight, } from "./components/AreaHighlight";
-import { FreetextHighlight, } from "./components/FreetextHighlight";
-import { ImageHighlight, } from "./components/ImageHighlight";
-import { SignaturePad, } from "./components/SignaturePad";
-import { DrawingCanvas, } from "./components/DrawingCanvas";
-import { DrawingHighlight, } from "./components/DrawingHighlight";
-import { ShapeCanvas, } from "./components/ShapeCanvas";
-import { ShapeHighlight, } from "./components/ShapeHighlight";
-import { PdfLoader } from "./components/PdfLoader";
-import { useHighlightContainerContext, } from "./contexts/HighlightContext";
-import { viewportPositionToScaled, scaledPositionToViewport, } from "./lib/coordinates";
-import { exportPdf, } from "./lib/export-pdf";
-import { usePdfHighlighterContext, } from "./contexts/PdfHighlighterContext";
-export { PdfHighlighter, PdfLoader, TextHighlight, MonitoredHighlightContainer, AreaHighlight, FreetextHighlight, ImageHighlight, SignaturePad, DrawingCanvas, DrawingHighlight, ShapeCanvas, ShapeHighlight, useHighlightContainerContext, viewportPositionToScaled, scaledPositionToViewport, usePdfHighlighterContext, exportPdf, };
-export * from "./types";
+// src/components/PdfHighlighter.tsx
+import debounce from "lodash.debounce";
+import React6, {
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef5,
+  useState as useState5
+} from "react";
+import { createRoot } from "react-dom/client";
+
+// src/contexts/PdfHighlighterContext.ts
+import { createContext, useContext } from "react";
+var PdfHighlighterContext = createContext(void 0);
+var usePdfHighlighterContext = () => {
+  const pdfHighlighterUtils = useContext(PdfHighlighterContext);
+  if (pdfHighlighterUtils === void 0) {
+    throw new Error(
+      "usePdfHighlighterContext must be used within PdfHighlighter!"
+    );
+  }
+  return pdfHighlighterUtils;
+};
+
+// src/lib/coordinates.ts
+var viewportToScaled = (rect, { width, height }) => {
+  return {
+    x1: rect.left,
+    y1: rect.top,
+    x2: rect.left + rect.width,
+    y2: rect.top + rect.height,
+    width,
+    height,
+    pageNumber: rect.pageNumber
+  };
+};
+var viewportPositionToScaled = ({ boundingRect, rects }, viewer) => {
+  const pageNumber = boundingRect.pageNumber;
+  const viewport = viewer.getPageView(pageNumber - 1).viewport;
+  const scale = (obj) => viewportToScaled(obj, viewport);
+  return {
+    boundingRect: scale(boundingRect),
+    rects: (rects || []).map(scale)
+  };
+};
+var pdfToViewport = (pdf, viewport) => {
+  const [x1, y1, x2, y2] = viewport.convertToViewportRectangle([
+    pdf.x1,
+    pdf.y1,
+    pdf.x2,
+    pdf.y2
+  ]);
+  return {
+    left: Math.min(x1, x2),
+    top: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y1 - y2),
+    pageNumber: pdf.pageNumber
+  };
+};
+var scaledToViewport = (scaled, viewport, usePdfCoordinates = false) => {
+  const { width, height } = viewport;
+  if (usePdfCoordinates) {
+    return pdfToViewport(scaled, viewport);
+  }
+  if (scaled.x1 === void 0) {
+    throw new Error("You are using old position format, please update");
+  }
+  const x1 = width * scaled.x1 / scaled.width;
+  const y1 = height * scaled.y1 / scaled.height;
+  const x2 = width * scaled.x2 / scaled.width;
+  const y2 = height * scaled.y2 / scaled.height;
+  return {
+    left: x1,
+    top: y1,
+    width: x2 - x1,
+    height: y2 - y1,
+    pageNumber: scaled.pageNumber
+  };
+};
+var scaledPositionToViewport = ({ boundingRect, rects, usePdfCoordinates }, viewer) => {
+  const pageNumber = boundingRect.pageNumber;
+  const viewport = viewer.getPageView(pageNumber - 1).viewport;
+  const scale = (obj) => scaledToViewport(obj, viewport, usePdfCoordinates);
+  return {
+    boundingRect: scale(boundingRect),
+    rects: (rects || []).map(scale)
+  };
+};
+
+// src/lib/get-bounding-rect.ts
+var getBoundingRect = (clientRects) => {
+  const rects = Array.from(clientRects).map((rect) => {
+    const { left, top, width, height, pageNumber: pageNumber2 } = rect;
+    const X02 = left;
+    const X12 = left + width;
+    const Y02 = top;
+    const Y12 = top + height;
+    return { X0: X02, X1: X12, Y0: Y02, Y1: Y12, pageNumber: pageNumber2 };
+  });
+  let firstPageNumber = Number.MAX_SAFE_INTEGER;
+  rects.forEach((rect) => {
+    firstPageNumber = Math.min(
+      firstPageNumber,
+      rect.pageNumber ?? firstPageNumber
+    );
+  });
+  const rectsWithSizeOnFirstPage = rects.filter(
+    (rect) => (rect.X0 > 0 || rect.X1 > 0 || rect.Y0 > 0 || rect.Y1 > 0) && rect.pageNumber === firstPageNumber
+  );
+  const optimal = rectsWithSizeOnFirstPage.reduce((res, rect) => {
+    return {
+      X0: Math.min(res.X0, rect.X0),
+      X1: Math.max(res.X1, rect.X1),
+      Y0: Math.min(res.Y0, rect.Y0),
+      Y1: Math.max(res.Y1, rect.Y1),
+      pageNumber: firstPageNumber
+    };
+  }, rectsWithSizeOnFirstPage[0]);
+  const { X0, X1, Y0, Y1, pageNumber } = optimal;
+  return {
+    left: X0,
+    top: Y0,
+    width: X1 - X0,
+    height: Y1 - Y0,
+    pageNumber
+  };
+};
+var get_bounding_rect_default = getBoundingRect;
+
+// src/lib/optimize-client-rects.ts
+var sort = (rects) => rects.sort((A, B) => {
+  const top = (A.pageNumber || 0) * A.top - (B.pageNumber || 0) * B.top;
+  if (top === 0) {
+    return A.left - B.left;
+  }
+  return top;
+});
+var overlaps = (A, B) => A.pageNumber === B.pageNumber && A.left <= B.left && B.left <= A.left + A.width;
+var sameLine = (A, B, yMargin = 5) => A.pageNumber === B.pageNumber && Math.abs(A.top - B.top) < yMargin && Math.abs(A.height - B.height) < yMargin;
+var inside = (A, B) => A.pageNumber === B.pageNumber && A.top > B.top && A.left > B.left && A.top + A.height < B.top + B.height && A.left + A.width < B.left + B.width;
+var nextTo = (A, B, xMargin = 10) => {
+  const Aright = A.left + A.width;
+  const Bright = B.left + B.width;
+  return A.pageNumber === B.pageNumber && A.left <= B.left && Aright <= Bright && B.left - Aright <= xMargin;
+};
+var extendWidth = (A, B) => {
+  A.width = Math.max(B.width - A.left + B.left, A.width);
+};
+var optimizeClientRects = (clientRects) => {
+  const rects = sort(clientRects);
+  const toRemove = /* @__PURE__ */ new Set();
+  const firstPass = rects.filter((rect) => {
+    return rects.every((otherRect) => {
+      return !inside(rect, otherRect);
+    });
+  });
+  let passCount = 0;
+  while (passCount <= 2) {
+    firstPass.forEach((A) => {
+      firstPass.forEach((B) => {
+        if (A === B || toRemove.has(A) || toRemove.has(B)) {
+          return;
+        }
+        if (!sameLine(A, B)) {
+          return;
+        }
+        if (overlaps(A, B)) {
+          extendWidth(A, B);
+          A.height = Math.max(A.height, B.height);
+          toRemove.add(B);
+        }
+        if (nextTo(A, B)) {
+          extendWidth(A, B);
+          toRemove.add(B);
+        }
+      });
+    });
+    passCount += 1;
+  }
+  return firstPass.filter((rect) => !toRemove.has(rect));
+};
+var optimize_client_rects_default = optimizeClientRects;
+
+// src/lib/get-client-rects.ts
+var isClientRectInsidePageRect = (clientRect, pageRect) => {
+  if (clientRect.top < pageRect.top) {
+    return false;
+  }
+  if (clientRect.bottom > pageRect.bottom) {
+    return false;
+  }
+  if (clientRect.right > pageRect.right) {
+    return false;
+  }
+  if (clientRect.left < pageRect.left) {
+    return false;
+  }
+  return true;
+};
+var getClientRects = (range, pages, shouldOptimize = true) => {
+  const clientRects = Array.from(range.getClientRects());
+  const rects = [];
+  for (const clientRect of clientRects) {
+    for (const page of pages) {
+      const pageRect = page.node.getBoundingClientRect();
+      if (isClientRectInsidePageRect(clientRect, pageRect) && clientRect.width > 0 && clientRect.height > 0 && clientRect.width < pageRect.width && clientRect.left > pageRect.left && clientRect.height < pageRect.height) {
+        const highlightedRect = {
+          top: clientRect.top + page.node.scrollTop - pageRect.top,
+          left: clientRect.left + page.node.scrollLeft - pageRect.left,
+          width: clientRect.width,
+          height: clientRect.height,
+          pageNumber: page.number
+        };
+        rects.push(highlightedRect);
+      }
+    }
+  }
+  return shouldOptimize ? optimize_client_rects_default(rects) : rects;
+};
+var get_client_rects_default = getClientRects;
+
+// src/lib/group-highlights-by-page.ts
+var groupHighlightsByPage = (highlights) => highlights.reduce((acc, highlight) => {
+  if (!highlight) {
+    return acc;
+  }
+  const pageNumbers = [
+    highlight.position.boundingRect.pageNumber,
+    ...highlight.position.rects.map((rect) => rect.pageNumber || 0)
+  ];
+  pageNumbers.forEach((pageNumber) => {
+    acc[pageNumber] ||= [];
+    const pageSpecificHighlight = {
+      ...highlight,
+      position: {
+        ...highlight.position,
+        rects: highlight.position.rects.filter(
+          (rect) => pageNumber === rect.pageNumber
+        )
+      }
+    };
+    acc[pageNumber].push(pageSpecificHighlight);
+  });
+  return acc;
+}, {});
+var group_highlights_by_page_default = groupHighlightsByPage;
+
+// src/lib/pdfjs-dom.ts
+var getDocument = (elm) => (elm || {}).ownerDocument || document;
+var getWindow = (elm) => (getDocument(elm) || {}).defaultView || window;
+var isHTMLElement = (elm) => elm instanceof HTMLElement || elm instanceof getWindow(elm).HTMLElement;
+var isHTMLCanvasElement = (elm) => elm instanceof HTMLCanvasElement || elm instanceof getWindow(elm).HTMLCanvasElement;
+var asElement = (x) => x;
+var getPageFromElement = (target) => {
+  const node = asElement(target.closest(".page"));
+  if (!node || !isHTMLElement(node)) {
+    return null;
+  }
+  const number = Number(asElement(node).dataset.pageNumber);
+  return { node, number };
+};
+var getPagesFromRange = (range) => {
+  const startParentElement = range.startContainer.parentElement;
+  const endParentElement = range.endContainer.parentElement;
+  if (!isHTMLElement(startParentElement) || !isHTMLElement(endParentElement)) {
+    return [];
+  }
+  const startPage = getPageFromElement(asElement(startParentElement));
+  const endPage = getPageFromElement(asElement(endParentElement));
+  if (!startPage?.number || !endPage?.number) {
+    return [];
+  }
+  if (startPage.number === endPage.number) {
+    return [startPage];
+  }
+  if (startPage.number === endPage.number - 1) {
+    return [startPage, endPage];
+  }
+  const pages = [];
+  let currentPageNumber = startPage.number;
+  const document2 = startPage.node.ownerDocument;
+  while (currentPageNumber <= endPage.number) {
+    const currentPage = getPageFromElement(
+      document2.querySelector(
+        `[data-page-number='${currentPageNumber}'`
+      )
+    );
+    if (currentPage) {
+      pages.push(currentPage);
+    }
+    currentPageNumber++;
+  }
+  return pages;
+};
+var findOrCreateContainerLayer = (container, className) => {
+  const doc = getDocument(container);
+  let layer = container.querySelector(`.${className}`);
+  if (!layer && container.children.length) {
+    layer = doc.createElement("div");
+    layer.className = className;
+    container.appendChild(layer);
+  }
+  return layer;
+};
+
+// src/components/DrawingCanvas.tsx
+import React, {
+  useRef,
+  useEffect,
+  useCallback,
+  useState
+} from "react";
+var DrawingCanvas = ({
+  isActive,
+  strokeColor = "#000000",
+  strokeWidth = 3,
+  viewer,
+  onComplete,
+  onCancel
+}) => {
+  const canvasRef = useRef(null);
+  const [strokes, setStrokes] = useState([]);
+  const [currentStroke, setCurrentStroke] = useState(null);
+  const isDrawingRef = useRef(false);
+  const [pageNumber, setPageNumber] = useState(null);
+  const [pageElement, setPageElement] = useState(null);
+  const findPageFromPoint = useCallback(
+    (clientX, clientY) => {
+      if (!viewer) return null;
+      for (let i = 0; i < viewer.pagesCount; i++) {
+        const pageView = viewer.getPageView(i);
+        if (!pageView?.div) continue;
+        const rect = pageView.div.getBoundingClientRect();
+        if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
+          return {
+            pageNumber: i + 1,
+            element: pageView.div,
+            rect
+          };
+        }
+      }
+      return null;
+    },
+    [viewer]
+  );
+  const redrawCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!ctx || !canvas) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    strokes.forEach((stroke) => {
+      if (stroke.points.length < 2) return;
+      ctx.strokeStyle = stroke.color;
+      ctx.lineWidth = stroke.width;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.beginPath();
+      ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+      stroke.points.slice(1).forEach((point) => {
+        ctx.lineTo(point.x, point.y);
+      });
+      ctx.stroke();
+    });
+    if (currentStroke && currentStroke.points.length >= 2) {
+      ctx.strokeStyle = currentStroke.color;
+      ctx.lineWidth = currentStroke.width;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.beginPath();
+      ctx.moveTo(currentStroke.points[0].x, currentStroke.points[0].y);
+      currentStroke.points.slice(1).forEach((point) => {
+        ctx.lineTo(point.x, point.y);
+      });
+      ctx.stroke();
+    }
+  }, [strokes, currentStroke]);
+  useEffect(() => {
+    redrawCanvas();
+  }, [redrawCanvas]);
+  const handleStart = useCallback(
+    (clientX, clientY) => {
+      const pageInfo = findPageFromPoint(clientX, clientY);
+      if (!pageInfo) return;
+      console.log("DrawingCanvas: Started drawing on page", pageInfo.pageNumber);
+      if (pageNumber === null) {
+        setPageNumber(pageInfo.pageNumber);
+        setPageElement(pageInfo.element);
+        const canvas = canvasRef.current;
+        if (canvas) {
+          canvas.width = pageInfo.rect.width;
+          canvas.height = pageInfo.rect.height;
+          canvas.style.left = `${pageInfo.rect.left}px`;
+          canvas.style.top = `${pageInfo.rect.top}px`;
+        }
+      } else if (pageInfo.pageNumber !== pageNumber) {
+        console.log("DrawingCanvas: Ignoring - different page");
+        return;
+      }
+      isDrawingRef.current = true;
+      const pos = {
+        x: clientX - pageInfo.rect.left,
+        y: clientY - pageInfo.rect.top
+      };
+      setCurrentStroke({ points: [pos], color: strokeColor, width: strokeWidth });
+    },
+    [pageNumber, findPageFromPoint, strokeColor, strokeWidth]
+  );
+  const handleMove = useCallback(
+    (clientX, clientY) => {
+      if (!isDrawingRef.current || !pageElement) return;
+      const rect = pageElement.getBoundingClientRect();
+      const pos = {
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      };
+      setCurrentStroke((prev) => {
+        if (!prev) return null;
+        return { ...prev, points: [...prev.points, pos] };
+      });
+    },
+    [pageElement]
+  );
+  const handleEnd = useCallback(() => {
+    if (!isDrawingRef.current) return;
+    isDrawingRef.current = false;
+    if (currentStroke && currentStroke.points.length >= 2) {
+      setStrokes((prev) => [...prev, currentStroke]);
+    }
+    setCurrentStroke(null);
+  }, [currentStroke]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      handleStart(e.clientX, e.clientY);
+    },
+    [handleStart]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      handleMove(e.clientX, e.clientY);
+    },
+    [handleMove]
+  );
+  const handleMouseUp = useCallback(() => {
+    handleEnd();
+  }, [handleEnd]);
+  const handleTouchStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (e.touches.length > 0) {
+        handleStart(e.touches[0].clientX, e.touches[0].clientY);
+      }
+    },
+    [handleStart]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (e.touches.length > 0) {
+        handleMove(e.touches[0].clientX, e.touches[0].clientY);
+      }
+    },
+    [handleMove]
+  );
+  const handleTouchEnd = useCallback(() => {
+    handleEnd();
+  }, [handleEnd]);
+  useEffect(() => {
+    if (!isActive) return;
+    const handleKeyDown = (e) => {
+      if (e.code === "Escape") {
+        console.log("DrawingCanvas: Cancelled via Escape");
+        onCancel();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive, onCancel]);
+  const handleClear = () => {
+    console.log("DrawingCanvas: Cleared strokes");
+    setStrokes([]);
+    setCurrentStroke(null);
+    setPageNumber(null);
+    setPageElement(null);
+  };
+  const handleDone = () => {
+    if (strokes.length === 0 || pageNumber === null || !pageElement || !viewer) {
+      console.log("DrawingCanvas: No strokes to save");
+      onCancel();
+      return;
+    }
+    console.log("DrawingCanvas: Completing drawing with", strokes.length, "strokes");
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    strokes.forEach((stroke) => {
+      stroke.points.forEach((point) => {
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+      });
+    });
+    const maxStrokeWidth = Math.max(...strokes.map((s) => s.width));
+    const padding = maxStrokeWidth * 2;
+    minX = Math.max(0, minX - padding);
+    minY = Math.max(0, minY - padding);
+    maxX = maxX + padding;
+    maxY = maxY + padding;
+    const width = maxX - minX;
+    const height = maxY - minY;
+    const outputCanvas = document.createElement("canvas");
+    outputCanvas.width = width;
+    outputCanvas.height = height;
+    const outputCtx = outputCanvas.getContext("2d");
+    if (!outputCtx) {
+      console.error("DrawingCanvas: Could not get output canvas context");
+      onCancel();
+      return;
+    }
+    strokes.forEach((stroke) => {
+      if (stroke.points.length < 2) return;
+      outputCtx.strokeStyle = stroke.color;
+      outputCtx.lineWidth = stroke.width;
+      outputCtx.lineCap = "round";
+      outputCtx.lineJoin = "round";
+      outputCtx.beginPath();
+      outputCtx.moveTo(stroke.points[0].x - minX, stroke.points[0].y - minY);
+      stroke.points.slice(1).forEach((point) => {
+        outputCtx.lineTo(point.x - minX, point.y - minY);
+      });
+      outputCtx.stroke();
+    });
+    const dataUrl = outputCanvas.toDataURL("image/png");
+    const viewportPosition = {
+      boundingRect: {
+        left: minX,
+        top: minY,
+        width,
+        height,
+        pageNumber
+      },
+      rects: []
+    };
+    const scaledPosition = viewportPositionToScaled(viewportPosition, viewer);
+    const normalizedStrokes = strokes.map((stroke) => ({
+      ...stroke,
+      points: stroke.points.map((point) => ({
+        x: point.x - minX,
+        y: point.y - minY
+      }))
+    }));
+    console.log("DrawingCanvas: Created drawing at position", scaledPosition);
+    onComplete(dataUrl, scaledPosition, normalizedStrokes);
+    setStrokes([]);
+    setCurrentStroke(null);
+    setPageNumber(null);
+    setPageElement(null);
+  };
+  if (!isActive) return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "DrawingCanvas",
+      style: {
+        width: pageElement ? pageElement.getBoundingClientRect().width : "100%",
+        height: pageElement ? pageElement.getBoundingClientRect().height : "100%",
+        position: "fixed"
+      },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseUp,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "DrawingCanvas__controls" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "DrawingCanvas__clearButton",
+      onClick: handleClear
+    },
+    "Clear"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "DrawingCanvas__cancelButton",
+      onClick: onCancel
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "DrawingCanvas__doneButton",
+      onClick: handleDone
+    },
+    "Done"
+  )));
+};
+
+// src/components/HighlightLayer.tsx
+import React2 from "react";
+
+// src/contexts/HighlightContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var HighlightContext = createContext2(void 0);
+var useHighlightContainerContext = () => {
+  const highlightContainerUtils = useContext2(HighlightContext);
+  if (highlightContainerUtils === void 0) {
+    throw new Error(
+      "useHighlightContainerContext must be used within a child of PdfHighlighter!"
+    );
+  }
+  return highlightContainerUtils;
+};
+
+// src/lib/screenshot.ts
+var getAreaAsPng = (canvas, position) => {
+  const { left, top, width, height } = position;
+  const doc = canvas ? canvas.ownerDocument : null;
+  const newCanvas = doc && doc.createElement("canvas");
+  if (!newCanvas || !isHTMLCanvasElement(newCanvas)) {
+    return "";
+  }
+  newCanvas.width = width;
+  newCanvas.height = height;
+  const newCanvasContext = newCanvas.getContext("2d");
+  if (!newCanvasContext || !canvas) {
+    return "";
+  }
+  const dpr = window.devicePixelRatio;
+  newCanvasContext.drawImage(
+    canvas,
+    left * dpr,
+    top * dpr,
+    width * dpr,
+    height * dpr,
+    0,
+    0,
+    width,
+    height
+  );
+  return newCanvas.toDataURL("image/png");
+};
+var screenshot = (position, pageNumber, viewer) => {
+  return getAreaAsPng(viewer.getPageView(pageNumber - 1).canvas, position);
+};
+var screenshot_default = screenshot;
+
+// src/components/HighlightLayer.tsx
+var EMPTY_ID = "empty-id";
+var HighlightLayer = ({
+  highlightsByPage,
+  pageNumber,
+  scrolledToHighlightId,
+  viewer,
+  highlightBindings,
+  children
+}) => {
+  const currentHighlights = highlightsByPage[pageNumber] || [];
+  return /* @__PURE__ */ React2.createElement("div", null, currentHighlights.map((highlight, index) => {
+    const viewportHighlight = {
+      ...highlight,
+      id: "id" in highlight ? highlight.id : EMPTY_ID,
+      // Give Empty ID to GhostHighlight
+      position: scaledPositionToViewport(highlight.position, viewer)
+    };
+    const isScrolledTo = Boolean(
+      scrolledToHighlightId === viewportHighlight.id
+    );
+    const highlightUtils = {
+      highlight: viewportHighlight,
+      viewportToScaled: (rect) => {
+        const viewport = viewer.getPageView(
+          (rect.pageNumber || pageNumber) - 1
+          // Convert to 0 index
+        ).viewport;
+        return viewportToScaled(rect, viewport);
+      },
+      screenshot: (boundingRect) => screenshot_default(boundingRect, pageNumber, viewer),
+      isScrolledTo,
+      highlightBindings
+    };
+    return /* @__PURE__ */ React2.createElement(HighlightContext.Provider, { value: highlightUtils, key: index }, children);
+  }));
+};
+
+// src/components/MouseSelection.tsx
+import React3, { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var getBoundingRect2 = (start, end) => {
+  return {
+    left: Math.min(end.x, start.x),
+    top: Math.min(end.y, start.y),
+    width: Math.abs(end.x - start.x),
+    height: Math.abs(end.y - start.y)
+  };
+};
+var getContainerCoords = (container, pageX, pageY) => {
+  const containerBoundingRect = container.getBoundingClientRect();
+  return {
+    x: pageX - containerBoundingRect.left + container.scrollLeft,
+    y: pageY - containerBoundingRect.top + container.scrollTop - window.scrollY
+  };
+};
+var MouseSelection = ({
+  viewer,
+  onSelection,
+  onReset,
+  onDragStart,
+  enableAreaSelection,
+  onChange,
+  style
+}) => {
+  const [start, setStart] = useState2(null);
+  const [end, setEnd] = useState2(null);
+  const [locked, setLocked] = useState2(false);
+  const rootRef = useRef2(null);
+  const startTargetRef = useRef2(null);
+  const reset = () => {
+    onReset && onReset();
+    setStart(null);
+    setEnd(null);
+    setLocked(false);
+  };
+  useEffect2(() => {
+    onChange && onChange(Boolean(start && end));
+    if (!rootRef.current) return;
+    const container = asElement(rootRef.current.parentElement);
+    const handleMouseUp = (event) => {
+      if (!start || !end || !startTargetRef.current) return;
+      const boundingRect = getBoundingRect2(start, end);
+      const shouldEnd = boundingRect.width >= 1 && boundingRect.height >= 1;
+      if (!container.contains(asElement(event.target)) || !shouldEnd) {
+        reset();
+        return;
+      }
+      setLocked(true);
+      const page = getPageFromElement(startTargetRef.current);
+      if (!page) return;
+      const pageBoundingRect = {
+        ...boundingRect,
+        top: boundingRect.top - page.node.offsetTop,
+        left: boundingRect.left - page.node.offsetLeft,
+        pageNumber: page.number
+      };
+      const viewportPosition = {
+        boundingRect: pageBoundingRect,
+        rects: []
+      };
+      const scaledPosition = viewportPositionToScaled(viewportPosition, viewer);
+      const image = screenshot_default(
+        pageBoundingRect,
+        pageBoundingRect.pageNumber,
+        viewer
+      );
+      onSelection && onSelection(viewportPosition, scaledPosition, image, reset, event);
+    };
+    const handleMouseMove = (event) => {
+      if (!rootRef.current || !start || locked) return;
+      setEnd(getContainerCoords(container, event.pageX, event.pageY));
+    };
+    const handleMouseDown = (event) => {
+      const shouldStart = (event2) => enableAreaSelection(event2) && isHTMLElement(event2.target) && Boolean(asElement(event2.target).closest(".page"));
+      const shouldReset = (event2) => start && !asElement(event2.target).closest(".PdfHighlighter__tip-container");
+      if (!shouldStart(event)) {
+        if (shouldReset(event)) reset();
+        return;
+      }
+      startTargetRef.current = asElement(event.target);
+      onDragStart && onDragStart(event);
+      setStart(getContainerCoords(container, event.pageX, event.pageY));
+      setEnd(null);
+      setLocked(false);
+    };
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [start, end, enableAreaSelection]);
+  return /* @__PURE__ */ React3.createElement("div", { className: "MouseSelection-container", ref: rootRef }, start && end && /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      className: "MouseSelection",
+      style: { ...getBoundingRect2(start, end), ...style }
+    }
+  ));
+};
+
+// src/components/ShapeCanvas.tsx
+import React4, {
+  useRef as useRef3,
+  useEffect as useEffect3,
+  useCallback as useCallback2,
+  useState as useState3
+} from "react";
+var ShapeCanvas = ({
+  isActive,
+  shapeType,
+  strokeColor = "#000000",
+  strokeWidth = 2,
+  viewer,
+  onComplete,
+  onCancel
+}) => {
+  const containerRef = useRef3(null);
+  const [startPoint, setStartPoint] = useState3(null);
+  const [currentPoint, setCurrentPoint] = useState3(null);
+  const [pageNumber, setPageNumber] = useState3(null);
+  const [pageRect, setPageRect] = useState3(null);
+  const isDrawingRef = useRef3(false);
+  const findPageFromPoint = useCallback2(
+    (clientX, clientY) => {
+      if (!viewer) return null;
+      for (let i = 0; i < viewer.pagesCount; i++) {
+        const pageView = viewer.getPageView(i);
+        if (!pageView?.div) continue;
+        const rect = pageView.div.getBoundingClientRect();
+        if (clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom) {
+          return {
+            pageNumber: i + 1,
+            element: pageView.div,
+            rect
+          };
+        }
+      }
+      return null;
+    },
+    [viewer]
+  );
+  const handleStart = useCallback2(
+    (clientX, clientY) => {
+      const pageInfo = findPageFromPoint(clientX, clientY);
+      if (!pageInfo) return;
+      console.log("ShapeCanvas: Started drawing on page", pageInfo.pageNumber);
+      setPageNumber(pageInfo.pageNumber);
+      setPageRect(pageInfo.rect);
+      isDrawingRef.current = true;
+      const pos = {
+        x: clientX - pageInfo.rect.left,
+        y: clientY - pageInfo.rect.top
+      };
+      setStartPoint(pos);
+      setCurrentPoint(pos);
+    },
+    [findPageFromPoint]
+  );
+  const handleMove = useCallback2(
+    (clientX, clientY) => {
+      if (!isDrawingRef.current || !pageRect) return;
+      const pos = {
+        x: clientX - pageRect.left,
+        y: clientY - pageRect.top
+      };
+      setCurrentPoint(pos);
+    },
+    [pageRect]
+  );
+  const handleEnd = useCallback2(() => {
+    if (!isDrawingRef.current || !startPoint || !currentPoint || pageNumber === null || !viewer) {
+      isDrawingRef.current = false;
+      setStartPoint(null);
+      setCurrentPoint(null);
+      return;
+    }
+    isDrawingRef.current = false;
+    const minX = Math.min(startPoint.x, currentPoint.x);
+    const minY = Math.min(startPoint.y, currentPoint.y);
+    const maxX = Math.max(startPoint.x, currentPoint.x);
+    const maxY = Math.max(startPoint.y, currentPoint.y);
+    const width = maxX - minX;
+    const height = maxY - minY;
+    if (width < 10 || height < 10) {
+      console.log("ShapeCanvas: Shape too small, ignoring");
+      setStartPoint(null);
+      setCurrentPoint(null);
+      return;
+    }
+    console.log("ShapeCanvas: Creating shape", shapeType, "at", { minX, minY, width, height });
+    const viewportPosition = {
+      boundingRect: {
+        left: minX,
+        top: minY,
+        width,
+        height,
+        pageNumber
+      },
+      rects: []
+    };
+    const scaledPosition = viewportPositionToScaled(viewportPosition, viewer);
+    let shapeData = {
+      shapeType,
+      strokeColor,
+      strokeWidth
+    };
+    if (shapeType === "arrow") {
+      shapeData.startPoint = {
+        x: (startPoint.x - minX) / width,
+        y: (startPoint.y - minY) / height
+      };
+      shapeData.endPoint = {
+        x: (currentPoint.x - minX) / width,
+        y: (currentPoint.y - minY) / height
+      };
+      console.log("ShapeCanvas: Arrow points", shapeData.startPoint, "->", shapeData.endPoint);
+    }
+    console.log("ShapeCanvas: Created shape at position", scaledPosition);
+    onComplete(scaledPosition, shapeData);
+    setStartPoint(null);
+    setCurrentPoint(null);
+    setPageNumber(null);
+    setPageRect(null);
+  }, [startPoint, currentPoint, pageNumber, viewer, shapeType, strokeColor, strokeWidth, onComplete]);
+  const handleMouseDown = useCallback2(
+    (e) => {
+      e.preventDefault();
+      handleStart(e.clientX, e.clientY);
+    },
+    [handleStart]
+  );
+  const handleMouseMove = useCallback2(
+    (e) => {
+      handleMove(e.clientX, e.clientY);
+    },
+    [handleMove]
+  );
+  const handleMouseUp = useCallback2(() => {
+    handleEnd();
+  }, [handleEnd]);
+  const handleTouchStart = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (e.touches.length > 0) {
+        handleStart(e.touches[0].clientX, e.touches[0].clientY);
+      }
+    },
+    [handleStart]
+  );
+  const handleTouchMove = useCallback2(
+    (e) => {
+      e.preventDefault();
+      if (e.touches.length > 0) {
+        handleMove(e.touches[0].clientX, e.touches[0].clientY);
+      }
+    },
+    [handleMove]
+  );
+  const handleTouchEnd = useCallback2(() => {
+    handleEnd();
+  }, [handleEnd]);
+  useEffect3(() => {
+    if (!isActive) return;
+    const handleKeyDown = (e) => {
+      if (e.code === "Escape") {
+        console.log("ShapeCanvas: Cancelled via Escape");
+        onCancel();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isActive, onCancel]);
+  const renderShapePreview = () => {
+    if (!startPoint || !currentPoint || !pageRect) return null;
+    const minX = Math.min(startPoint.x, currentPoint.x);
+    const minY = Math.min(startPoint.y, currentPoint.y);
+    const width = Math.abs(currentPoint.x - startPoint.x);
+    const height = Math.abs(currentPoint.y - startPoint.y);
+    const svgStyle = {
+      position: "fixed",
+      left: pageRect.left,
+      top: pageRect.top,
+      width: pageRect.width,
+      height: pageRect.height,
+      pointerEvents: "none",
+      zIndex: 1001
+    };
+    return /* @__PURE__ */ React4.createElement("svg", { style: svgStyle }, shapeType === "rectangle" && /* @__PURE__ */ React4.createElement(
+      "rect",
+      {
+        x: minX,
+        y: minY,
+        width,
+        height,
+        stroke: strokeColor,
+        strokeWidth,
+        fill: "none"
+      }
+    ), shapeType === "circle" && /* @__PURE__ */ React4.createElement(
+      "ellipse",
+      {
+        cx: minX + width / 2,
+        cy: minY + height / 2,
+        rx: width / 2,
+        ry: height / 2,
+        stroke: strokeColor,
+        strokeWidth,
+        fill: "none"
+      }
+    ), shapeType === "arrow" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement(
+      "marker",
+      {
+        id: "shape-canvas-arrowhead",
+        markerWidth: "10",
+        markerHeight: "7",
+        refX: "9",
+        refY: "3.5",
+        orient: "auto"
+      },
+      /* @__PURE__ */ React4.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor })
+    )), /* @__PURE__ */ React4.createElement(
+      "line",
+      {
+        x1: startPoint.x,
+        y1: startPoint.y,
+        x2: currentPoint.x,
+        y2: currentPoint.y,
+        stroke: strokeColor,
+        strokeWidth,
+        markerEnd: "url(#shape-canvas-arrowhead)"
+      }
+    )));
+  };
+  if (!isActive) return null;
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: "ShapeCanvas",
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseUp,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd
+    }
+  ), renderShapePreview(), /* @__PURE__ */ React4.createElement("div", { className: "ShapeCanvas__controls" }, /* @__PURE__ */ React4.createElement("div", { className: "ShapeCanvas__hint" }, "Click and drag to draw a ", shapeType, ". Press Escape to cancel."), /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      type: "button",
+      className: "ShapeCanvas__cancelButton",
+      onClick: onCancel
+    },
+    "Cancel"
+  )));
+};
+
+// src/components/TipContainer.tsx
+import React5, {
+  useLayoutEffect,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+var clamp = (value, left, right) => Math.min(Math.max(value, left), right);
+var VERTICAL_PADDING = 5;
+var TipContainer = ({
+  viewer,
+  updateTipPositionRef
+}) => {
+  const [height, setHeight] = useState4(0);
+  const [width, setWidth] = useState4(0);
+  const containerRef = useRef4(null);
+  const updatePosition = () => {
+    if (!containerRef.current) return;
+    const { offsetHeight, offsetWidth } = containerRef.current;
+    setHeight(offsetHeight);
+    setWidth(offsetWidth);
+  };
+  updateTipPositionRef.current = updatePosition;
+  useLayoutEffect(() => {
+    updatePosition();
+  }, [updatePosition]);
+  const { getTip } = usePdfHighlighterContext();
+  const currentTip = getTip();
+  if (!currentTip) return null;
+  const { position, content } = currentTip;
+  const { boundingRect } = position;
+  const pageNumber = boundingRect.pageNumber;
+  const pageNode = viewer.getPageView(pageNumber - 1).div;
+  const pageBoundingClientRect = pageNode.getBoundingClientRect();
+  const { left: pageLeft, width: pageWidth } = pageBoundingClientRect;
+  const scrollTop = viewer.container.scrollTop;
+  const left = pageNode.offsetLeft + boundingRect.left + boundingRect.width / 2;
+  const highlightTop = boundingRect.top + pageNode.offsetTop;
+  const highlightBottom = highlightTop + boundingRect.height;
+  const shouldMove = highlightTop - height - VERTICAL_PADDING < scrollTop;
+  const top = shouldMove ? highlightBottom + VERTICAL_PADDING : highlightTop - height - VERTICAL_PADDING;
+  const clampedLeft = clamp(left - width / 2, 0, pageLeft + pageWidth - width);
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: "PdfHighlighter__tip-container",
+      style: {
+        top,
+        left: clampedLeft,
+        height: "max-content",
+        width: "max-content"
+      },
+      ref: containerRef
+    },
+    content
+  );
+};
+
+// src/components/PdfHighlighter.tsx
+var EventBus;
+var PDFLinkService;
+var PDFViewer;
+(async () => {
+  const pdfjs = await import("pdfjs-dist/web/pdf_viewer.mjs");
+  EventBus = pdfjs.EventBus;
+  PDFLinkService = pdfjs.PDFLinkService;
+  PDFViewer = pdfjs.PDFViewer;
+})();
+var SCROLL_MARGIN = 10;
+var DEFAULT_SCALE_VALUE = "auto";
+var DEFAULT_TEXT_SELECTION_COLOR = "rgba(153,193,218,255)";
+var findOrCreateHighlightLayer = (textLayer) => {
+  return findOrCreateContainerLayer(
+    textLayer,
+    "PdfHighlighter__highlight-layer"
+  );
+};
+var disableTextSelection = (viewer, flag) => {
+  viewer.viewer?.classList.toggle("PdfHighlighter--disable-selection", flag);
+};
+var PdfHighlighter = ({
+  highlights,
+  onScrollAway,
+  pdfScaleValue = DEFAULT_SCALE_VALUE,
+  onSelection: onSelectionFinished,
+  onCreateGhostHighlight,
+  onRemoveGhostHighlight,
+  selectionTip,
+  enableAreaSelection,
+  areaSelectionMode,
+  mouseSelectionStyle,
+  pdfDocument,
+  children,
+  textSelectionColor = DEFAULT_TEXT_SELECTION_COLOR,
+  utilsRef,
+  style,
+  enableFreetextCreation,
+  onFreetextClick,
+  enableImageCreation,
+  onImageClick,
+  enableDrawingMode,
+  onDrawingComplete,
+  onDrawingCancel,
+  drawingStrokeColor = "#000000",
+  drawingStrokeWidth = 3,
+  enableShapeMode,
+  onShapeComplete,
+  onShapeCancel,
+  shapeStrokeColor = "#000000",
+  shapeStrokeWidth = 2
+}) => {
+  const [tip, setTip] = useState5(null);
+  const [isViewerReady, setIsViewerReady] = useState5(false);
+  const containerNodeRef = useRef5(null);
+  const highlightBindingsRef = useRef5(
+    {}
+  );
+  const ghostHighlightRef = useRef5(null);
+  const selectionRef = useRef5(null);
+  const scrolledToHighlightIdRef = useRef5(null);
+  const isAreaSelectionInProgressRef = useRef5(false);
+  const isEditInProgressRef = useRef5(false);
+  const updateTipPositionRef = useRef5(() => {
+  });
+  const eventBusRef = useRef5(new EventBus());
+  const linkServiceRef = useRef5(
+    new PDFLinkService({
+      eventBus: eventBusRef.current,
+      externalLinkTarget: 2
+    })
+  );
+  const resizeObserverRef = useRef5(null);
+  const viewerRef = useRef5(null);
+  useLayoutEffect2(() => {
+    if (!containerNodeRef.current) return;
+    const debouncedDocumentInit = debounce(() => {
+      viewerRef.current = viewerRef.current || new PDFViewer({
+        container: containerNodeRef.current,
+        eventBus: eventBusRef.current,
+        textLayerMode: 2,
+        removePageBorders: true,
+        linkService: linkServiceRef.current
+      });
+      viewerRef.current.setDocument(pdfDocument);
+      linkServiceRef.current.setDocument(pdfDocument);
+      linkServiceRef.current.setViewer(viewerRef.current);
+      setIsViewerReady(true);
+    }, 100);
+    debouncedDocumentInit();
+    return () => {
+      debouncedDocumentInit.cancel();
+    };
+  }, [document]);
+  useLayoutEffect2(() => {
+    if (!containerNodeRef.current) return;
+    resizeObserverRef.current = new ResizeObserver(handleScaleValue);
+    resizeObserverRef.current.observe(containerNodeRef.current);
+    const doc = containerNodeRef.current.ownerDocument;
+    eventBusRef.current.on("textlayerrendered", renderHighlightLayers);
+    eventBusRef.current.on("pagesinit", handleScaleValue);
+    doc.addEventListener("keydown", handleKeyDown);
+    renderHighlightLayers();
+    return () => {
+      eventBusRef.current.off("pagesinit", handleScaleValue);
+      eventBusRef.current.off("textlayerrendered", renderHighlightLayers);
+      doc.removeEventListener("keydown", handleKeyDown);
+      resizeObserverRef.current?.disconnect();
+    };
+  }, [selectionTip, highlights, onSelectionFinished]);
+  const handleScroll = () => {
+    onScrollAway && onScrollAway();
+    scrolledToHighlightIdRef.current = null;
+    renderHighlightLayers();
+  };
+  const handleMouseUp = () => {
+    const container = containerNodeRef.current;
+    const selection = getWindow(container).getSelection();
+    if (!container || !selection || selection.isCollapsed || !viewerRef.current)
+      return;
+    const range = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+    if (!range || !container.contains(range.commonAncestorContainer)) return;
+    const pages = getPagesFromRange(range);
+    if (!pages || pages.length === 0) return;
+    const rects = get_client_rects_default(range, pages);
+    if (rects.length === 0) return;
+    const viewportPosition = {
+      boundingRect: get_bounding_rect_default(rects),
+      rects
+    };
+    const scaledPosition = viewportPositionToScaled(
+      viewportPosition,
+      viewerRef.current
+    );
+    const content = {
+      text: selection.toString().split("\n").join(" ")
+      // Make all line breaks spaces
+    };
+    selectionRef.current = {
+      content,
+      type: "text",
+      position: scaledPosition,
+      makeGhostHighlight: () => {
+        ghostHighlightRef.current = {
+          content,
+          type: "text",
+          position: scaledPosition
+        };
+        onCreateGhostHighlight && onCreateGhostHighlight(ghostHighlightRef.current);
+        clearTextSelection();
+        renderHighlightLayers();
+        return ghostHighlightRef.current;
+      }
+    };
+    onSelectionFinished && onSelectionFinished(selectionRef.current);
+    selectionTip && setTip({ position: viewportPosition, content: selectionTip });
+  };
+  const handleMouseDown = (event) => {
+    if (!isHTMLElement(event.target) || asElement(event.target).closest(".PdfHighlighter__tip-container")) {
+      return;
+    }
+    if (enableFreetextCreation?.(event.nativeEvent) && onFreetextClick && !isEditInProgressRef.current) {
+      const target = asElement(event.target);
+      const page = getPageFromElement(target);
+      if (page && viewerRef.current) {
+        const pageRect = page.node.getBoundingClientRect();
+        const clickX = event.clientX - pageRect.left;
+        const clickY = event.clientY - pageRect.top;
+        const defaultWidth = 150;
+        const defaultHeight = 80;
+        const viewportPosition = {
+          boundingRect: {
+            left: clickX,
+            top: clickY,
+            width: defaultWidth,
+            height: defaultHeight,
+            pageNumber: page.number
+          },
+          rects: []
+        };
+        const scaledPosition = viewportPositionToScaled(
+          viewportPosition,
+          viewerRef.current
+        );
+        onFreetextClick(scaledPosition);
+        return;
+      }
+    }
+    if (enableImageCreation?.(event.nativeEvent) && onImageClick && !isEditInProgressRef.current) {
+      const target = asElement(event.target);
+      const page = getPageFromElement(target);
+      if (page && viewerRef.current) {
+        const pageRect = page.node.getBoundingClientRect();
+        const clickX = event.clientX - pageRect.left;
+        const clickY = event.clientY - pageRect.top;
+        const defaultWidth = 150;
+        const defaultHeight = 100;
+        const viewportPosition = {
+          boundingRect: {
+            left: clickX,
+            top: clickY,
+            width: defaultWidth,
+            height: defaultHeight,
+            pageNumber: page.number
+          },
+          rects: []
+        };
+        const scaledPosition = viewportPositionToScaled(
+          viewportPosition,
+          viewerRef.current
+        );
+        onImageClick(scaledPosition);
+        return;
+      }
+    }
+    setTip(null);
+    clearTextSelection();
+    removeGhostHighlight();
+    toggleEditInProgress(false);
+  };
+  const handleKeyDown = (event) => {
+    if (event.code === "Escape") {
+      clearTextSelection();
+      removeGhostHighlight();
+      setTip(null);
+    }
+  };
+  const handleScaleValue = () => {
+    if (viewerRef.current) {
+      viewerRef.current.currentScaleValue = pdfScaleValue.toString();
+    }
+  };
+  const renderHighlightLayer = (highlightBindings, pageNumber) => {
+    if (!viewerRef.current) return;
+    highlightBindings.reactRoot.render(
+      /* @__PURE__ */ React6.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React6.createElement(
+        HighlightLayer,
+        {
+          highlightsByPage: group_highlights_by_page_default([
+            ...highlights,
+            ghostHighlightRef.current
+          ]),
+          pageNumber,
+          scrolledToHighlightId: scrolledToHighlightIdRef.current,
+          viewer: viewerRef.current,
+          highlightBindings,
+          children
+        }
+      ))
+    );
+  };
+  const renderHighlightLayers = () => {
+    if (!viewerRef.current) return;
+    for (let pageNumber = 1; pageNumber <= pdfDocument.numPages; pageNumber++) {
+      const highlightBindings = highlightBindingsRef.current[pageNumber];
+      if (highlightBindings?.container?.isConnected) {
+        renderHighlightLayer(highlightBindings, pageNumber);
+      } else {
+        const { textLayer } = viewerRef.current.getPageView(pageNumber - 1) || {};
+        if (!textLayer) continue;
+        const highlightLayer = findOrCreateHighlightLayer(
+          textLayer.div
+        );
+        if (highlightLayer) {
+          const reactRoot = createRoot(highlightLayer);
+          highlightBindingsRef.current[pageNumber] = {
+            reactRoot,
+            container: highlightLayer,
+            textLayer: textLayer.div
+            // textLayer.div for version >=3.0 and textLayer.textLayerDiv otherwise.
+          };
+          renderHighlightLayer(
+            highlightBindingsRef.current[pageNumber],
+            pageNumber
+          );
+        }
+      }
+    }
+  };
+  const isEditingOrHighlighting = () => {
+    return Boolean(selectionRef.current) || Boolean(ghostHighlightRef.current) || isAreaSelectionInProgressRef.current || isEditInProgressRef.current;
+  };
+  const toggleEditInProgress = (flag) => {
+    if (flag !== void 0) {
+      isEditInProgressRef.current = flag;
+    } else {
+      isEditInProgressRef.current = !isEditInProgressRef.current;
+    }
+    if (viewerRef.current)
+      viewerRef.current.viewer?.classList.toggle(
+        "PdfHighlighter--disable-selection",
+        isEditInProgressRef.current
+      );
+  };
+  const removeGhostHighlight = () => {
+    if (onRemoveGhostHighlight && ghostHighlightRef.current)
+      onRemoveGhostHighlight(ghostHighlightRef.current);
+    ghostHighlightRef.current = null;
+    renderHighlightLayers();
+  };
+  const clearTextSelection = () => {
+    selectionRef.current = null;
+    const container = containerNodeRef.current;
+    const selection = getWindow(container).getSelection();
+    if (!container || !selection) return;
+    selection.removeAllRanges();
+  };
+  const scrollToHighlight = (highlight) => {
+    const { boundingRect, usePdfCoordinates } = highlight.position;
+    const pageNumber = boundingRect.pageNumber;
+    viewerRef.current.container.removeEventListener("scroll", handleScroll);
+    const pageViewport = viewerRef.current.getPageView(
+      pageNumber - 1
+    ).viewport;
+    viewerRef.current.scrollPageIntoView({
+      pageNumber,
+      destArray: [
+        null,
+        // null since we pass pageNumber already as an arg
+        { name: "XYZ" },
+        ...pageViewport.convertToPdfPoint(
+          0,
+          // Default x coord
+          scaledToViewport(boundingRect, pageViewport, usePdfCoordinates).top - SCROLL_MARGIN
+        ),
+        0
+        // Default z coord
+      ]
+    });
+    scrolledToHighlightIdRef.current = highlight.id;
+    renderHighlightLayers();
+    setTimeout(() => {
+      viewerRef.current.container.addEventListener("scroll", handleScroll, {
+        once: true
+      });
+    }, 100);
+  };
+  const pdfHighlighterUtils = {
+    isEditingOrHighlighting,
+    getCurrentSelection: () => selectionRef.current,
+    getGhostHighlight: () => ghostHighlightRef.current,
+    removeGhostHighlight,
+    toggleEditInProgress,
+    isEditInProgress: () => isEditInProgressRef.current,
+    isSelectionInProgress: () => Boolean(selectionRef.current) || isAreaSelectionInProgressRef.current,
+    scrollToHighlight,
+    getViewer: () => viewerRef.current,
+    getTip: () => tip,
+    setTip,
+    updateTipPosition: updateTipPositionRef.current
+  };
+  utilsRef(pdfHighlighterUtils);
+  const isFreetextMode = enableFreetextCreation?.({}) ?? false;
+  const isImageMode = enableImageCreation?.({}) ?? false;
+  let containerClassName = "PdfHighlighter";
+  if (isFreetextMode) containerClassName += " PdfHighlighter--freetext-mode";
+  if (isImageMode) containerClassName += " PdfHighlighter--image-mode";
+  if (enableDrawingMode) containerClassName += " PdfHighlighter--drawing-mode";
+  if (enableShapeMode) containerClassName += " PdfHighlighter--shape-mode";
+  if (areaSelectionMode) containerClassName += " PdfHighlighter--area-mode";
+  return /* @__PURE__ */ React6.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      ref: containerNodeRef,
+      className: containerClassName,
+      onPointerDown: handleMouseDown,
+      onPointerUp: handleMouseUp,
+      style
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "pdfViewer" }),
+    /* @__PURE__ */ React6.createElement("style", null, `
+          .textLayer ::selection {
+            background: ${textSelectionColor};
+          }
+        `),
+    isViewerReady && /* @__PURE__ */ React6.createElement(
+      TipContainer,
+      {
+        viewer: viewerRef.current,
+        updateTipPositionRef
+      }
+    ),
+    isViewerReady && enableAreaSelection && /* @__PURE__ */ React6.createElement(
+      MouseSelection,
+      {
+        viewer: viewerRef.current,
+        onChange: (isVisible) => isAreaSelectionInProgressRef.current = isVisible,
+        enableAreaSelection,
+        style: mouseSelectionStyle,
+        onDragStart: () => disableTextSelection(viewerRef.current, true),
+        onReset: () => {
+          selectionRef.current = null;
+          disableTextSelection(viewerRef.current, false);
+        },
+        onSelection: (viewportPosition, scaledPosition, image, resetSelection) => {
+          selectionRef.current = {
+            content: { image },
+            type: "area",
+            position: scaledPosition,
+            makeGhostHighlight: () => {
+              ghostHighlightRef.current = {
+                position: scaledPosition,
+                type: "area",
+                content: { image }
+              };
+              onCreateGhostHighlight && onCreateGhostHighlight(ghostHighlightRef.current);
+              resetSelection();
+              renderHighlightLayers();
+              return ghostHighlightRef.current;
+            }
+          };
+          onSelectionFinished && onSelectionFinished(selectionRef.current);
+          selectionTip && setTip({ position: viewportPosition, content: selectionTip });
+        }
+      }
+    ),
+    isViewerReady && enableDrawingMode && /* @__PURE__ */ React6.createElement(
+      DrawingCanvas,
+      {
+        isActive: enableDrawingMode,
+        strokeColor: drawingStrokeColor,
+        strokeWidth: drawingStrokeWidth,
+        viewer: viewerRef.current,
+        onComplete: (dataUrl, position, strokes) => {
+          console.log("PdfHighlighter: Drawing complete");
+          onDrawingComplete?.(dataUrl, position, strokes);
+        },
+        onCancel: () => {
+          console.log("PdfHighlighter: Drawing cancelled");
+          onDrawingCancel?.();
+        }
+      }
+    ),
+    isViewerReady && enableShapeMode && /* @__PURE__ */ React6.createElement(
+      ShapeCanvas,
+      {
+        isActive: !!enableShapeMode,
+        shapeType: enableShapeMode,
+        strokeColor: shapeStrokeColor,
+        strokeWidth: shapeStrokeWidth,
+        viewer: viewerRef.current,
+        onComplete: (position, shape) => {
+          console.log("PdfHighlighter: Shape complete", shape.shapeType);
+          onShapeComplete?.(position, shape);
+        },
+        onCancel: () => {
+          console.log("PdfHighlighter: Shape cancelled");
+          onShapeCancel?.();
+        }
+      }
+    )
+  ));
+};
+
+// src/components/TextHighlight.tsx
+import React7, {
+  useState as useState6,
+  useRef as useRef6,
+  useEffect as useEffect4
+} from "react";
+var DefaultStyleIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }));
+var DefaultDeleteIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }));
+var HighlightIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M6 14l3 3v5h6v-5l3-3V9H6v5zm5-12h2v3h-2V2zM3.5 5.875L4.914 4.46l2.12 2.122L5.622 8 3.5 5.875zm13.46.71l2.123-2.12 1.414 1.414L18.375 8l-1.414-1.414z" }));
+var UnderlineIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }));
+var StrikethroughIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }));
+var DEFAULT_COLOR_PRESETS = [
+  "rgba(255, 226, 143, 1)",
+  // Yellow (default)
+  "#ffcdd2",
+  // Light red
+  "#c8e6c9",
+  // Light green
+  "#bbdefb",
+  // Light blue
+  "#e1bee7"
+  // Light purple
+];
+var TextHighlight = ({
+  highlight,
+  onClick,
+  onMouseOver,
+  onMouseOut,
+  isScrolledTo,
+  onContextMenu,
+  style,
+  highlightColor = "rgba(255, 226, 143, 1)",
+  highlightStyle = "highlight",
+  onStyleChange,
+  onDelete,
+  styleIcon,
+  deleteIcon,
+  colorPresets = DEFAULT_COLOR_PRESETS
+}) => {
+  const [isStylePanelOpen, setIsStylePanelOpen] = useState6(false);
+  const [isHovered, setIsHovered] = useState6(false);
+  const stylePanelRef = useRef6(null);
+  const containerRef = useRef6(null);
+  useEffect4(() => {
+    if (!isStylePanelOpen) return;
+    const handleClickOutside = (e) => {
+      if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
+        setIsStylePanelOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isStylePanelOpen]);
+  const highlightClass = isScrolledTo ? "TextHighlight--scrolledTo" : "";
+  const { rects } = highlight.position;
+  const firstRect = rects[0];
+  const getPartStyleClass = () => {
+    switch (highlightStyle) {
+      case "underline":
+        return "TextHighlight__part--underline";
+      case "strikethrough":
+        return "TextHighlight__part--strikethrough";
+      default:
+        return "";
+    }
+  };
+  const getPartStyle = (rect) => {
+    const baseStyle = { ...rect, ...style };
+    if (highlightStyle === "highlight") {
+      baseStyle.backgroundColor = highlightColor;
+    } else {
+      baseStyle.backgroundColor = "transparent";
+      baseStyle.color = highlightColor;
+    }
+    return baseStyle;
+  };
+  return /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: `TextHighlight ${highlightClass}`,
+      onContextMenu,
+      ref: containerRef
+    },
+    (onStyleChange || onDelete) && firstRect && /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: "TextHighlight__toolbar-wrapper",
+        style: {
+          position: "absolute",
+          left: firstRect.left,
+          top: firstRect.top - 28,
+          paddingBottom: 12
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      },
+      /* @__PURE__ */ React7.createElement(
+        "div",
+        {
+          className: `TextHighlight__toolbar ${isHovered || isStylePanelOpen ? "TextHighlight__toolbar--visible" : ""}`
+        },
+        onStyleChange && /* @__PURE__ */ React7.createElement(
+          "button",
+          {
+            className: "TextHighlight__style-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setIsStylePanelOpen(!isStylePanelOpen);
+            },
+            title: "Change style",
+            type: "button"
+          },
+          styleIcon || /* @__PURE__ */ React7.createElement(DefaultStyleIcon, null)
+        ),
+        onDelete && /* @__PURE__ */ React7.createElement(
+          "button",
+          {
+            className: "TextHighlight__delete-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            title: "Delete",
+            type: "button"
+          },
+          deleteIcon || /* @__PURE__ */ React7.createElement(DefaultDeleteIcon, null)
+        )
+      ),
+      isStylePanelOpen && onStyleChange && /* @__PURE__ */ React7.createElement(
+        "div",
+        {
+          className: "TextHighlight__style-panel",
+          ref: stylePanelRef,
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-row" }, /* @__PURE__ */ React7.createElement("label", null, "Style"), /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-buttons" }, /* @__PURE__ */ React7.createElement(
+          "button",
+          {
+            type: "button",
+            className: `TextHighlight__style-type-button ${highlightStyle === "highlight" ? "active" : ""}`,
+            onClick: () => onStyleChange({ highlightStyle: "highlight" }),
+            title: "Highlight"
+          },
+          /* @__PURE__ */ React7.createElement(HighlightIcon, null)
+        ), /* @__PURE__ */ React7.createElement(
+          "button",
+          {
+            type: "button",
+            className: `TextHighlight__style-type-button ${highlightStyle === "underline" ? "active" : ""}`,
+            onClick: () => onStyleChange({ highlightStyle: "underline" }),
+            title: "Underline"
+          },
+          /* @__PURE__ */ React7.createElement(UnderlineIcon, null)
+        ), /* @__PURE__ */ React7.createElement(
+          "button",
+          {
+            type: "button",
+            className: `TextHighlight__style-type-button ${highlightStyle === "strikethrough" ? "active" : ""}`,
+            onClick: () => onStyleChange({ highlightStyle: "strikethrough" }),
+            title: "Strikethrough"
+          },
+          /* @__PURE__ */ React7.createElement(StrikethroughIcon, null)
+        ))),
+        /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-row" }, /* @__PURE__ */ React7.createElement("label", null, "Color"), /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__color-options" }, /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React7.createElement(
+          "button",
+          {
+            key: c,
+            type: "button",
+            className: `TextHighlight__color-preset ${highlightColor === c ? "active" : ""}`,
+            style: { backgroundColor: c },
+            onClick: () => onStyleChange({ highlightColor: c }),
+            title: c
+          }
+        ))), /* @__PURE__ */ React7.createElement(
+          "input",
+          {
+            type: "color",
+            value: highlightColor,
+            onChange: (e) => {
+              onStyleChange({ highlightColor: e.target.value });
+            }
+          }
+        )))
+      )
+    ),
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        className: "TextHighlight__parts",
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      },
+      rects.map((rect, index) => /* @__PURE__ */ React7.createElement(
+        "div",
+        {
+          onMouseOver,
+          onMouseOut,
+          onClick,
+          key: index,
+          style: getPartStyle(rect),
+          className: `TextHighlight__part ${getPartStyleClass()}`
+        }
+      ))
+    )
+  );
+};
+
+// src/components/MonitoredHighlightContainer.tsx
+import React9, { useRef as useRef8 } from "react";
+
+// src/components/MouseMonitor.tsx
+import React8, { useEffect as useEffect5, useRef as useRef7 } from "react";
+var MouseMonitor = ({
+  onMoveAway,
+  paddingX,
+  paddingY,
+  children
+}) => {
+  const containerRef = useRef7(null);
+  const onMouseMove = (event) => {
+    if (!containerRef.current) return;
+    const { clientX, clientY } = event;
+    const { left, top, width, height } = containerRef.current.getBoundingClientRect();
+    const inBoundsX = clientX > left - paddingX && clientX < left + width + paddingX;
+    const inBoundsY = clientY > top - paddingY && clientY < top + height + paddingY;
+    if (!(inBoundsX && inBoundsY)) {
+      onMoveAway();
+    }
+  };
+  useEffect5(() => {
+    document.addEventListener("mousemove", onMouseMove);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+    };
+  }, []);
+  return /* @__PURE__ */ React8.createElement("div", { ref: containerRef }, children);
+};
+
+// src/components/MonitoredHighlightContainer.tsx
+var MonitoredHighlightContainer = ({
+  onMouseEnter,
+  highlightTip,
+  onMouseLeave,
+  children
+}) => {
+  const mouseInRef = useRef8(false);
+  const { setTip, isEditingOrHighlighting } = usePdfHighlighterContext();
+  return /* @__PURE__ */ React9.createElement(
+    "div",
+    {
+      onMouseEnter: () => {
+        mouseInRef.current = true;
+        onMouseEnter && onMouseEnter();
+        if (isEditingOrHighlighting()) return;
+        if (highlightTip) {
+          const monitoredHighlightTip = /* @__PURE__ */ React9.createElement(
+            MouseMonitor,
+            {
+              onMoveAway: () => {
+                if (mouseInRef.current) {
+                  return;
+                }
+                setTip(null);
+                onMouseLeave && onMouseLeave();
+              },
+              paddingX: 60,
+              paddingY: 30
+            },
+            highlightTip.content
+          );
+          setTip({
+            position: highlightTip.position,
+            content: monitoredHighlightTip
+          });
+        }
+      },
+      onMouseLeave: () => {
+        mouseInRef.current = false;
+        !highlightTip && onMouseLeave && onMouseLeave();
+      }
+    },
+    children
+  );
+};
+
+// src/components/AreaHighlight.tsx
+import React10, {
+  useState as useState7,
+  useRef as useRef9,
+  useEffect as useEffect6
+} from "react";
+import { Rnd } from "react-rnd";
+var DefaultStyleIcon2 = () => /* @__PURE__ */ React10.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React10.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }));
+var DefaultDeleteIcon2 = () => /* @__PURE__ */ React10.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React10.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }));
+var DEFAULT_COLOR_PRESETS2 = [
+  "rgba(255, 226, 143, 1)",
+  // Yellow (default)
+  "#ffcdd2",
+  // Light red
+  "#c8e6c9",
+  // Light green
+  "#bbdefb",
+  // Light blue
+  "#e1bee7"
+  // Light purple
+];
+var AreaHighlight = ({
+  highlight,
+  onChange,
+  isScrolledTo,
+  bounds,
+  onContextMenu,
+  onEditStart,
+  style,
+  highlightColor = "rgba(255, 226, 143, 1)",
+  onStyleChange,
+  onDelete,
+  styleIcon,
+  deleteIcon,
+  colorPresets = DEFAULT_COLOR_PRESETS2
+}) => {
+  const [isStylePanelOpen, setIsStylePanelOpen] = useState7(false);
+  const [isHovered, setIsHovered] = useState7(false);
+  const stylePanelRef = useRef9(null);
+  useEffect6(() => {
+    if (!isStylePanelOpen) return;
+    const handleClickOutside = (e) => {
+      if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
+        setIsStylePanelOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isStylePanelOpen]);
+  const highlightClass = isScrolledTo ? "AreaHighlight--scrolledTo" : "";
+  const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+  const mergedStyle = {
+    ...style,
+    backgroundColor: highlightColor
+  };
+  return /* @__PURE__ */ React10.createElement(
+    "div",
+    {
+      className: `AreaHighlight ${highlightClass}`,
+      onContextMenu
+    },
+    (onStyleChange || onDelete) && /* @__PURE__ */ React10.createElement(
+      "div",
+      {
+        className: "AreaHighlight__toolbar-wrapper",
+        style: {
+          position: "absolute",
+          left: highlight.position.boundingRect.left,
+          top: highlight.position.boundingRect.top - 28,
+          paddingBottom: 12
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      },
+      /* @__PURE__ */ React10.createElement(
+        "div",
+        {
+          className: `AreaHighlight__toolbar ${isHovered || isStylePanelOpen ? "AreaHighlight__toolbar--visible" : ""}`
+        },
+        onStyleChange && /* @__PURE__ */ React10.createElement(
+          "button",
+          {
+            className: "AreaHighlight__style-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setIsStylePanelOpen(!isStylePanelOpen);
+            },
+            title: "Change color",
+            type: "button"
+          },
+          styleIcon || /* @__PURE__ */ React10.createElement(DefaultStyleIcon2, null)
+        ),
+        onDelete && /* @__PURE__ */ React10.createElement(
+          "button",
+          {
+            className: "AreaHighlight__delete-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            title: "Delete",
+            type: "button"
+          },
+          deleteIcon || /* @__PURE__ */ React10.createElement(DefaultDeleteIcon2, null)
+        )
+      ),
+      isStylePanelOpen && onStyleChange && /* @__PURE__ */ React10.createElement(
+        "div",
+        {
+          className: "AreaHighlight__style-panel",
+          ref: stylePanelRef,
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__style-row" }, /* @__PURE__ */ React10.createElement("label", null, "Color"), /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__color-options" }, /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React10.createElement(
+          "button",
+          {
+            key: c,
+            type: "button",
+            className: `AreaHighlight__color-preset ${highlightColor === c ? "active" : ""}`,
+            style: { backgroundColor: c },
+            onClick: () => onStyleChange({ highlightColor: c }),
+            title: c
+          }
+        ))), /* @__PURE__ */ React10.createElement(
+          "input",
+          {
+            type: "color",
+            value: highlightColor,
+            onChange: (e) => {
+              onStyleChange({ highlightColor: e.target.value });
+            }
+          }
+        )))
+      )
+    ),
+    /* @__PURE__ */ React10.createElement(
+      Rnd,
+      {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        className: "AreaHighlight__part",
+        onDragStop: (_, data) => {
+          const boundingRect = {
+            ...highlight.position.boundingRect,
+            top: data.y,
+            left: data.x
+          };
+          onChange && onChange(boundingRect);
+        },
+        onResizeStop: (_mouseEvent, _direction, ref, _delta, position) => {
+          const boundingRect = {
+            top: position.y,
+            left: position.x,
+            width: ref.offsetWidth,
+            height: ref.offsetHeight,
+            pageNumber: getPageFromElement(ref)?.number || -1
+          };
+          onChange && onChange(boundingRect);
+        },
+        onDragStart: onEditStart,
+        onResizeStart: onEditStart,
+        default: {
+          x: highlight.position.boundingRect.left,
+          y: highlight.position.boundingRect.top,
+          width: highlight.position.boundingRect.width,
+          height: highlight.position.boundingRect.height
+        },
+        key,
+        bounds,
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        },
+        style: mergedStyle
+      }
+    )
+  );
+};
+
+// src/components/FreetextHighlight.tsx
+import React11, {
+  useState as useState8,
+  useRef as useRef10,
+  useEffect as useEffect7
+} from "react";
+import { Rnd as Rnd2 } from "react-rnd";
+var DefaultDragIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("circle", { cx: "8", cy: "6", r: "2" }), /* @__PURE__ */ React11.createElement("circle", { cx: "16", cy: "6", r: "2" }), /* @__PURE__ */ React11.createElement("circle", { cx: "8", cy: "12", r: "2" }), /* @__PURE__ */ React11.createElement("circle", { cx: "16", cy: "12", r: "2" }), /* @__PURE__ */ React11.createElement("circle", { cx: "8", cy: "18", r: "2" }), /* @__PURE__ */ React11.createElement("circle", { cx: "16", cy: "18", r: "2" }));
+var DefaultEditIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }));
+var DefaultStyleIcon3 = () => /* @__PURE__ */ React11.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }));
+var DefaultDeleteIcon3 = () => /* @__PURE__ */ React11.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }));
+var DEFAULT_BACKGROUND_PRESETS = ["transparent", "#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"];
+var DEFAULT_TEXT_PRESETS = ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"];
+var FreetextHighlight = ({
+  highlight,
+  onChange,
+  onTextChange,
+  onStyleChange,
+  isScrolledTo,
+  bounds,
+  onContextMenu,
+  onEditStart,
+  onEditEnd,
+  style,
+  color = "#333333",
+  backgroundColor = "#ffffc8",
+  fontFamily = "inherit",
+  fontSize = "14px",
+  dragIcon,
+  editIcon,
+  styleIcon,
+  backgroundColorPresets = DEFAULT_BACKGROUND_PRESETS,
+  textColorPresets = DEFAULT_TEXT_PRESETS,
+  onDelete,
+  deleteIcon
+}) => {
+  const [isEditing, setIsEditing] = useState8(false);
+  const [isStylePanelOpen, setIsStylePanelOpen] = useState8(false);
+  const [text, setText] = useState8(highlight.content?.text || "");
+  const textareaRef = useRef10(null);
+  const stylePanelRef = useRef10(null);
+  useEffect7(() => {
+    setText(highlight.content?.text || "");
+  }, [highlight.content?.text]);
+  useEffect7(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus();
+      textareaRef.current.select();
+    }
+  }, [isEditing]);
+  useEffect7(() => {
+    if (!isStylePanelOpen) return;
+    const handleClickOutside = (e) => {
+      if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
+        setIsStylePanelOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isStylePanelOpen]);
+  const highlightClass = isScrolledTo ? "FreetextHighlight--scrolledTo" : "";
+  const editingClass = isEditing ? "FreetextHighlight--editing" : "";
+  const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+  const handleTextClick = (e) => {
+    e.stopPropagation();
+    if (!isEditing) {
+      setIsEditing(true);
+      onEditStart?.();
+    }
+  };
+  const handleTextBlur = () => {
+    if (isEditing) {
+      setIsEditing(false);
+      onTextChange?.(text);
+      onEditEnd?.();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setText(highlight.content?.text || "");
+      setIsEditing(false);
+      onEditEnd?.();
+    } else if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      setIsEditing(false);
+      onTextChange?.(text);
+      onEditEnd?.();
+    }
+  };
+  const containerStyle = {
+    backgroundColor,
+    color,
+    fontFamily,
+    fontSize,
+    ...style
+  };
+  return /* @__PURE__ */ React11.createElement(
+    "div",
+    {
+      className: `FreetextHighlight ${highlightClass} ${editingClass}`,
+      onContextMenu
+    },
+    /* @__PURE__ */ React11.createElement(
+      Rnd2,
+      {
+        className: "FreetextHighlight__rnd",
+        onDragStop: (_, data) => {
+          const boundingRect = {
+            ...highlight.position.boundingRect,
+            top: data.y,
+            left: data.x
+          };
+          onChange?.(boundingRect);
+        },
+        onDragStart: () => {
+          if (!isEditing) {
+            onEditStart?.();
+          }
+        },
+        default: {
+          x: highlight.position.boundingRect.left,
+          y: highlight.position.boundingRect.top,
+          width: highlight.position.boundingRect.width || 150,
+          height: highlight.position.boundingRect.height || 80
+        },
+        minWidth: 100,
+        minHeight: 50,
+        key,
+        bounds,
+        enableResizing: {
+          top: false,
+          right: true,
+          bottom: true,
+          left: false,
+          topRight: false,
+          bottomRight: true,
+          bottomLeft: false,
+          topLeft: false
+        },
+        onResizeStop: (_e, _direction, ref, _delta, position) => {
+          const boundingRect = {
+            top: position.y,
+            left: position.x,
+            width: ref.offsetWidth,
+            height: ref.offsetHeight,
+            pageNumber: getPageFromElement(ref)?.number || highlight.position.boundingRect.pageNumber
+          };
+          onChange?.(boundingRect);
+        },
+        onResizeStart: () => {
+          if (!isEditing) {
+            onEditStart?.();
+          }
+        },
+        cancel: ".FreetextHighlight__text, .FreetextHighlight__input, .FreetextHighlight__edit-button, .FreetextHighlight__style-button, .FreetextHighlight__style-panel, .FreetextHighlight__delete-button"
+      },
+      /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__container", style: containerStyle }, /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__toolbar" }, /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__drag-handle", title: "Drag to move" }, dragIcon || /* @__PURE__ */ React11.createElement(DefaultDragIcon, null)), /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          className: "FreetextHighlight__edit-button",
+          onClick: handleTextClick,
+          title: "Edit text",
+          type: "button"
+        },
+        editIcon || /* @__PURE__ */ React11.createElement(DefaultEditIcon, null)
+      ), /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          className: "FreetextHighlight__style-button",
+          onClick: (e) => {
+            e.stopPropagation();
+            setIsStylePanelOpen(!isStylePanelOpen);
+          },
+          title: "Change style",
+          type: "button"
+        },
+        styleIcon || /* @__PURE__ */ React11.createElement(DefaultStyleIcon3, null)
+      ), onDelete && /* @__PURE__ */ React11.createElement(
+        "button",
+        {
+          className: "FreetextHighlight__delete-button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onDelete();
+          },
+          title: "Delete",
+          type: "button"
+        },
+        deleteIcon || /* @__PURE__ */ React11.createElement(DefaultDeleteIcon3, null)
+      )), isStylePanelOpen && /* @__PURE__ */ React11.createElement(
+        "div",
+        {
+          className: "FreetextHighlight__style-panel",
+          ref: stylePanelRef,
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__style-row" }, /* @__PURE__ */ React11.createElement("label", null, "Background"), /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__color-options" }, /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__color-presets" }, backgroundColorPresets.map((c) => /* @__PURE__ */ React11.createElement(
+          "button",
+          {
+            key: c,
+            type: "button",
+            className: `FreetextHighlight__color-preset ${c === "transparent" ? "FreetextHighlight__color-preset--transparent" : ""} ${backgroundColor === c ? "active" : ""}`,
+            style: c !== "transparent" ? { backgroundColor: c } : void 0,
+            onClick: () => onStyleChange?.({ backgroundColor: c }),
+            title: c === "transparent" ? "No background" : c
+          }
+        ))), /* @__PURE__ */ React11.createElement(
+          "input",
+          {
+            type: "color",
+            value: backgroundColor === "transparent" ? "#ffffff" : backgroundColor,
+            onChange: (e) => {
+              onStyleChange?.({ backgroundColor: e.target.value });
+            }
+          }
+        ))),
+        /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__style-row" }, /* @__PURE__ */ React11.createElement(
+          "label",
+          null,
+          "Text Color"
+        ), /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__color-options" }, /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__color-presets" }, textColorPresets.map((c) => /* @__PURE__ */ React11.createElement(
+          "button",
+          {
+            key: c,
+            type: "button",
+            className: `FreetextHighlight__color-preset ${color === c ? "active" : ""}`,
+            style: { backgroundColor: c },
+            onClick: () => onStyleChange?.({ color: c }),
+            title: c
+          }
+        ))), /* @__PURE__ */ React11.createElement(
+          "input",
+          {
+            type: "color",
+            value: color,
+            onChange: (e) => {
+              onStyleChange?.({ color: e.target.value });
+            }
+          }
+        ))),
+        /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__style-row" }, /* @__PURE__ */ React11.createElement("label", null, "Font Size"), /* @__PURE__ */ React11.createElement(
+          "select",
+          {
+            value: fontSize,
+            onChange: (e) => {
+              onStyleChange?.({ fontSize: e.target.value });
+            }
+          },
+          /* @__PURE__ */ React11.createElement("option", { value: "10px" }, "10px"),
+          /* @__PURE__ */ React11.createElement("option", { value: "12px" }, "12px"),
+          /* @__PURE__ */ React11.createElement("option", { value: "14px" }, "14px"),
+          /* @__PURE__ */ React11.createElement("option", { value: "16px" }, "16px"),
+          /* @__PURE__ */ React11.createElement("option", { value: "18px" }, "18px"),
+          /* @__PURE__ */ React11.createElement("option", { value: "20px" }, "20px"),
+          /* @__PURE__ */ React11.createElement("option", { value: "24px" }, "24px")
+        )),
+        /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__style-row" }, /* @__PURE__ */ React11.createElement("label", null, "Font"), /* @__PURE__ */ React11.createElement(
+          "select",
+          {
+            value: fontFamily,
+            onChange: (e) => {
+              onStyleChange?.({ fontFamily: e.target.value });
+            }
+          },
+          /* @__PURE__ */ React11.createElement("option", { value: "inherit" }, "Default"),
+          /* @__PURE__ */ React11.createElement("option", { value: "Arial, sans-serif" }, "Arial"),
+          /* @__PURE__ */ React11.createElement("option", { value: "Georgia, serif" }, "Georgia"),
+          /* @__PURE__ */ React11.createElement("option", { value: "'Courier New', monospace" }, "Courier"),
+          /* @__PURE__ */ React11.createElement("option", { value: "'Times New Roman', serif" }, "Times")
+        ))
+      ), /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__content" }, isEditing ? /* @__PURE__ */ React11.createElement(
+        "textarea",
+        {
+          ref: textareaRef,
+          className: "FreetextHighlight__input",
+          value: text,
+          onChange: (e) => setText(e.target.value),
+          onBlur: handleTextBlur,
+          onKeyDown: handleKeyDown,
+          onClick: (e) => e.stopPropagation()
+        }
+      ) : /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__text" }, text || "New note")))
+    )
+  );
+};
+
+// src/components/ImageHighlight.tsx
+import React12 from "react";
+import { Rnd as Rnd3 } from "react-rnd";
+var DefaultDragIcon2 = () => /* @__PURE__ */ React12.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React12.createElement("circle", { cx: "8", cy: "6", r: "2" }), /* @__PURE__ */ React12.createElement("circle", { cx: "16", cy: "6", r: "2" }), /* @__PURE__ */ React12.createElement("circle", { cx: "8", cy: "12", r: "2" }), /* @__PURE__ */ React12.createElement("circle", { cx: "16", cy: "12", r: "2" }), /* @__PURE__ */ React12.createElement("circle", { cx: "8", cy: "18", r: "2" }), /* @__PURE__ */ React12.createElement("circle", { cx: "16", cy: "18", r: "2" }));
+var DefaultDeleteIcon4 = () => /* @__PURE__ */ React12.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React12.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }));
+var ImageHighlight = ({
+  highlight,
+  onChange,
+  isScrolledTo,
+  bounds,
+  onContextMenu,
+  onEditStart,
+  onEditEnd,
+  style,
+  dragIcon,
+  onDelete,
+  deleteIcon
+}) => {
+  const highlightClass = isScrolledTo ? "ImageHighlight--scrolledTo" : "";
+  const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+  const imageUrl = highlight.content?.image;
+  return /* @__PURE__ */ React12.createElement(
+    "div",
+    {
+      className: `ImageHighlight ${highlightClass}`,
+      onContextMenu
+    },
+    /* @__PURE__ */ React12.createElement(
+      Rnd3,
+      {
+        className: "ImageHighlight__rnd",
+        onDragStop: (_, data) => {
+          const boundingRect = {
+            ...highlight.position.boundingRect,
+            top: data.y,
+            left: data.x
+          };
+          onChange?.(boundingRect);
+          onEditEnd?.();
+        },
+        onDragStart: onEditStart,
+        onResizeStop: (_e, _direction, ref, _delta, position) => {
+          const boundingRect = {
+            top: position.y,
+            left: position.x,
+            width: ref.offsetWidth,
+            height: ref.offsetHeight,
+            pageNumber: getPageFromElement(ref)?.number || highlight.position.boundingRect.pageNumber
+          };
+          onChange?.(boundingRect);
+          onEditEnd?.();
+        },
+        onResizeStart: onEditStart,
+        default: {
+          x: highlight.position.boundingRect.left,
+          y: highlight.position.boundingRect.top,
+          width: highlight.position.boundingRect.width || 150,
+          height: highlight.position.boundingRect.height || 100
+        },
+        minWidth: 50,
+        minHeight: 50,
+        key,
+        bounds,
+        lockAspectRatio: true,
+        dragHandleClassName: "ImageHighlight__drag-handle",
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        },
+        style
+      },
+      /* @__PURE__ */ React12.createElement("div", { className: "ImageHighlight__container" }, /* @__PURE__ */ React12.createElement("div", { className: "ImageHighlight__toolbar" }, /* @__PURE__ */ React12.createElement("div", { className: "ImageHighlight__drag-handle", title: "Drag to move" }, dragIcon || /* @__PURE__ */ React12.createElement(DefaultDragIcon2, null)), onDelete && /* @__PURE__ */ React12.createElement(
+        "button",
+        {
+          className: "ImageHighlight__delete-button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onDelete();
+          },
+          title: "Delete",
+          type: "button"
+        },
+        deleteIcon || /* @__PURE__ */ React12.createElement(DefaultDeleteIcon4, null)
+      )), /* @__PURE__ */ React12.createElement("div", { className: "ImageHighlight__content" }, imageUrl ? /* @__PURE__ */ React12.createElement(
+        "img",
+        {
+          src: imageUrl,
+          alt: "Highlight",
+          className: "ImageHighlight__image",
+          draggable: false
+        }
+      ) : /* @__PURE__ */ React12.createElement("div", { className: "ImageHighlight__placeholder" }, "No image")))
+    )
+  );
+};
+
+// src/components/SignaturePad.tsx
+import React13, { useRef as useRef11, useEffect as useEffect8, useCallback as useCallback3 } from "react";
+var SignaturePad = ({
+  isOpen,
+  onComplete,
+  onClose,
+  width = 400,
+  height = 200
+}) => {
+  const canvasRef = useRef11(null);
+  const isDrawingRef = useRef11(false);
+  const lastPosRef = useRef11({ x: 0, y: 0 });
+  useEffect8(() => {
+    if (!isOpen || !canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.strokeStyle = "#000000";
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, width, height);
+  }, [isOpen, width, height]);
+  const getPosition = useCallback3(
+    (e) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return { x: 0, y: 0 };
+      const rect = canvas.getBoundingClientRect();
+      let clientX;
+      let clientY;
+      if ("touches" in e) {
+        clientX = e.touches[0].clientX;
+        clientY = e.touches[0].clientY;
+      } else {
+        clientX = e.clientX;
+        clientY = e.clientY;
+      }
+      return {
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      };
+    },
+    []
+  );
+  const startDrawing = useCallback3(
+    (e) => {
+      e.preventDefault();
+      isDrawingRef.current = true;
+      lastPosRef.current = getPosition(e);
+    },
+    [getPosition]
+  );
+  const draw = useCallback3(
+    (e) => {
+      if (!isDrawingRef.current) return;
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!ctx) return;
+      const currentPos = getPosition(e);
+      ctx.beginPath();
+      ctx.moveTo(lastPosRef.current.x, lastPosRef.current.y);
+      ctx.lineTo(currentPos.x, currentPos.y);
+      ctx.stroke();
+      lastPosRef.current = currentPos;
+    },
+    [getPosition]
+  );
+  const stopDrawing = useCallback3(() => {
+    isDrawingRef.current = false;
+  }, []);
+  useEffect8(() => {
+    if (!isOpen) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const handleMouseDown = (e) => startDrawing(e);
+    const handleMouseMove = (e) => draw(e);
+    const handleMouseUp = () => stopDrawing();
+    const handleMouseLeave = () => stopDrawing();
+    const handleTouchStart = (e) => startDrawing(e);
+    const handleTouchMove = (e) => draw(e);
+    const handleTouchEnd = () => stopDrawing();
+    canvas.addEventListener("mousedown", handleMouseDown);
+    canvas.addEventListener("mousemove", handleMouseMove);
+    canvas.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("mouseleave", handleMouseLeave);
+    canvas.addEventListener("touchstart", handleTouchStart, { passive: false });
+    canvas.addEventListener("touchmove", handleTouchMove, { passive: false });
+    canvas.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      canvas.removeEventListener("mousedown", handleMouseDown);
+      canvas.removeEventListener("mousemove", handleMouseMove);
+      canvas.removeEventListener("mouseup", handleMouseUp);
+      canvas.removeEventListener("mouseleave", handleMouseLeave);
+      canvas.removeEventListener("touchstart", handleTouchStart);
+      canvas.removeEventListener("touchmove", handleTouchMove);
+      canvas.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isOpen, startDrawing, draw, stopDrawing]);
+  const handleClear = () => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext("2d");
+    if (!ctx || !canvas) return;
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, width, height);
+  };
+  const handleDone = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const dataUrl = canvas.toDataURL("image/png");
+    onComplete(dataUrl);
+  };
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React13.createElement("div", { className: "SignaturePad__overlay", onClick: handleOverlayClick }, /* @__PURE__ */ React13.createElement("div", { className: "SignaturePad__modal" }, /* @__PURE__ */ React13.createElement("h3", { className: "SignaturePad__title" }, "Draw your signature"), /* @__PURE__ */ React13.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "SignaturePad__canvas",
+      width,
+      height
+    }
+  ), /* @__PURE__ */ React13.createElement("div", { className: "SignaturePad__buttons" }, /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      className: "SignaturePad__button SignaturePad__button--clear",
+      onClick: handleClear
+    },
+    "Clear"
+  ), /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      className: "SignaturePad__button SignaturePad__button--cancel",
+      onClick: onClose
+    },
+    "Cancel"
+  ), /* @__PURE__ */ React13.createElement(
+    "button",
+    {
+      type: "button",
+      className: "SignaturePad__button SignaturePad__button--done",
+      onClick: handleDone
+    },
+    "Done"
+  ))));
+};
+
+// src/components/DrawingHighlight.tsx
+import React14, { useState as useState9, useCallback as useCallback4, useEffect as useEffect9, useRef as useRef12 } from "react";
+import { Rnd as Rnd4 } from "react-rnd";
+var DRAWING_COLORS = ["#000000", "#FF0000", "#0000FF", "#00FF00", "#FFFF00"];
+var STROKE_WIDTHS = [
+  { label: "Thin", value: 1 },
+  { label: "Medium", value: 3 },
+  { label: "Thick", value: 5 }
+];
+var DefaultDragIcon3 = () => /* @__PURE__ */ React14.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React14.createElement("circle", { cx: "8", cy: "6", r: "2" }), /* @__PURE__ */ React14.createElement("circle", { cx: "16", cy: "6", r: "2" }), /* @__PURE__ */ React14.createElement("circle", { cx: "8", cy: "12", r: "2" }), /* @__PURE__ */ React14.createElement("circle", { cx: "16", cy: "12", r: "2" }), /* @__PURE__ */ React14.createElement("circle", { cx: "8", cy: "18", r: "2" }), /* @__PURE__ */ React14.createElement("circle", { cx: "16", cy: "18", r: "2" }));
+var DefaultDeleteIcon5 = () => /* @__PURE__ */ React14.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React14.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }));
+var renderStrokesToImage = (strokes, width, height) => {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  strokes.forEach((stroke) => {
+    if (stroke.points.length < 2) return;
+    ctx.strokeStyle = stroke.color;
+    ctx.lineWidth = stroke.width;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
+    stroke.points.slice(1).forEach((point) => {
+      ctx.lineTo(point.x, point.y);
+    });
+    ctx.stroke();
+  });
+  return canvas.toDataURL("image/png");
+};
+var DrawingHighlight = ({
+  highlight,
+  onChange,
+  isScrolledTo,
+  bounds,
+  onContextMenu,
+  onEditStart,
+  onEditEnd,
+  style,
+  dragIcon,
+  onStyleChange,
+  onDelete,
+  deleteIcon
+}) => {
+  const highlightClass = isScrolledTo ? "DrawingHighlight--scrolledTo" : "";
+  const [showStyleControls, setShowStyleControls] = useState9(false);
+  const styleControlsRef = useRef12(null);
+  useEffect9(() => {
+    if (!showStyleControls) return;
+    const handleClickOutside = (e) => {
+      if (styleControlsRef.current && !styleControlsRef.current.contains(e.target)) {
+        setShowStyleControls(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showStyleControls]);
+  const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+  const imageUrl = highlight.content?.image;
+  const strokes = highlight.content?.strokes;
+  const handleColorChange = useCallback4((newColor) => {
+    if (!strokes || !onStyleChange) return;
+    console.log("DrawingHighlight: Changing color to", newColor);
+    const newStrokes = strokes.map((stroke) => ({
+      ...stroke,
+      color: newColor
+    }));
+    const newImage = renderStrokesToImage(
+      newStrokes,
+      highlight.position.boundingRect.width,
+      highlight.position.boundingRect.height
+    );
+    onStyleChange(newImage, newStrokes);
+  }, [strokes, onStyleChange, highlight.position.boundingRect.width, highlight.position.boundingRect.height]);
+  const handleWidthChange = useCallback4((newWidth) => {
+    if (!strokes || !onStyleChange) return;
+    console.log("DrawingHighlight: Changing width to", newWidth);
+    const newStrokes = strokes.map((stroke) => ({
+      ...stroke,
+      width: newWidth
+    }));
+    const newImage = renderStrokesToImage(
+      newStrokes,
+      highlight.position.boundingRect.width,
+      highlight.position.boundingRect.height
+    );
+    onStyleChange(newImage, newStrokes);
+  }, [strokes, onStyleChange, highlight.position.boundingRect.width, highlight.position.boundingRect.height]);
+  const currentColor = strokes?.[0]?.color || "#000000";
+  const currentWidth = strokes?.[0]?.width || 3;
+  return /* @__PURE__ */ React14.createElement(
+    "div",
+    {
+      className: `DrawingHighlight ${highlightClass}`,
+      onContextMenu
+    },
+    /* @__PURE__ */ React14.createElement(
+      Rnd4,
+      {
+        className: "DrawingHighlight__rnd",
+        onDragStop: (_, data) => {
+          const boundingRect = {
+            ...highlight.position.boundingRect,
+            top: data.y,
+            left: data.x
+          };
+          onChange?.(boundingRect);
+          onEditEnd?.();
+        },
+        onDragStart: onEditStart,
+        onResizeStop: (_e, _direction, ref, _delta, position) => {
+          const boundingRect = {
+            top: position.y,
+            left: position.x,
+            width: ref.offsetWidth,
+            height: ref.offsetHeight,
+            pageNumber: getPageFromElement(ref)?.number || highlight.position.boundingRect.pageNumber
+          };
+          onChange?.(boundingRect);
+          onEditEnd?.();
+        },
+        onResizeStart: onEditStart,
+        default: {
+          x: highlight.position.boundingRect.left,
+          y: highlight.position.boundingRect.top,
+          width: highlight.position.boundingRect.width || 150,
+          height: highlight.position.boundingRect.height || 100
+        },
+        minWidth: 30,
+        minHeight: 30,
+        key,
+        bounds,
+        lockAspectRatio: false,
+        dragHandleClassName: "DrawingHighlight__drag-handle",
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        },
+        style
+      },
+      /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__container" }, /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__toolbar" }, /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__drag-handle", title: "Drag to move" }, dragIcon || /* @__PURE__ */ React14.createElement(DefaultDragIcon3, null)), strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React14.createElement(
+        "button",
+        {
+          type: "button",
+          className: "DrawingHighlight__style-button",
+          title: "Edit style",
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowStyleControls(!showStyleControls);
+          }
+        },
+        /* @__PURE__ */ React14.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React14.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }))
+      ), onDelete && /* @__PURE__ */ React14.createElement(
+        "button",
+        {
+          className: "DrawingHighlight__delete-button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onDelete();
+          },
+          title: "Delete",
+          type: "button"
+        },
+        deleteIcon || /* @__PURE__ */ React14.createElement(DefaultDeleteIcon5, null)
+      )), showStyleControls && strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__style-controls", ref: styleControlsRef }, /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__color-picker" }, DRAWING_COLORS.map((color) => /* @__PURE__ */ React14.createElement(
+        "button",
+        {
+          key: color,
+          type: "button",
+          className: `DrawingHighlight__color-button ${currentColor === color ? "active" : ""}`,
+          style: { backgroundColor: color },
+          onClick: (e) => {
+            e.stopPropagation();
+            handleColorChange(color);
+          },
+          title: `Color: ${color}`
+        }
+      ))), /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__width-picker" }, STROKE_WIDTHS.map((w) => /* @__PURE__ */ React14.createElement(
+        "button",
+        {
+          key: w.value,
+          type: "button",
+          className: `DrawingHighlight__width-button ${currentWidth === w.value ? "active" : ""}`,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleWidthChange(w.value);
+          },
+          title: w.label
+        },
+        w.label
+      )))), /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__content" }, imageUrl ? /* @__PURE__ */ React14.createElement(
+        "img",
+        {
+          src: imageUrl,
+          alt: "Drawing",
+          className: "DrawingHighlight__image",
+          draggable: false
+        }
+      ) : /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__placeholder" }, "No drawing")))
+    )
+  );
+};
+
+// src/components/ShapeHighlight.tsx
+import React15, {
+  useState as useState10,
+  useRef as useRef13,
+  useEffect as useEffect10
+} from "react";
+import { Rnd as Rnd5 } from "react-rnd";
+var DefaultStyleIcon4 = () => /* @__PURE__ */ React15.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React15.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }));
+var DefaultDeleteIcon6 = () => /* @__PURE__ */ React15.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React15.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }));
+var DEFAULT_COLOR_PRESETS3 = [
+  "#000000",
+  // Black
+  "#FF0000",
+  // Red
+  "#0000FF",
+  // Blue
+  "#00AA00",
+  // Green
+  "#FF6600"
+  // Orange
+];
+var STROKE_WIDTHS2 = [
+  { label: "Thin", value: 1 },
+  { label: "Medium", value: 2 },
+  { label: "Thick", value: 4 }
+];
+var ShapeHighlight = ({
+  highlight,
+  onChange,
+  isScrolledTo,
+  bounds,
+  onContextMenu,
+  onEditStart,
+  onEditEnd,
+  style,
+  shapeType = "rectangle",
+  strokeColor = "#000000",
+  strokeWidth = 2,
+  onStyleChange,
+  onDelete,
+  styleIcon,
+  deleteIcon,
+  colorPresets = DEFAULT_COLOR_PRESETS3,
+  startPoint,
+  endPoint
+}) => {
+  const [isStylePanelOpen, setIsStylePanelOpen] = useState10(false);
+  const [isHovered, setIsHovered] = useState10(false);
+  const stylePanelRef = useRef13(null);
+  useEffect10(() => {
+    if (!isStylePanelOpen) return;
+    const handleClickOutside = (e) => {
+      if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
+        setIsStylePanelOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isStylePanelOpen]);
+  const highlightClass = isScrolledTo ? "ShapeHighlight--scrolledTo" : "";
+  const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+  const markerId = `arrowhead-${highlight.id}`;
+  const renderShape = (width, height) => {
+    switch (shapeType) {
+      case "rectangle":
+        return /* @__PURE__ */ React15.createElement(
+          "svg",
+          {
+            className: "ShapeHighlight__svg",
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`
+          },
+          /* @__PURE__ */ React15.createElement(
+            "rect",
+            {
+              x: strokeWidth / 2,
+              y: strokeWidth / 2,
+              width: width - strokeWidth,
+              height: height - strokeWidth,
+              stroke: strokeColor,
+              strokeWidth,
+              fill: "none"
+            }
+          )
+        );
+      case "circle":
+        return /* @__PURE__ */ React15.createElement(
+          "svg",
+          {
+            className: "ShapeHighlight__svg",
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`
+          },
+          /* @__PURE__ */ React15.createElement(
+            "ellipse",
+            {
+              cx: width / 2,
+              cy: height / 2,
+              rx: width / 2 - strokeWidth / 2,
+              ry: height / 2 - strokeWidth / 2,
+              stroke: strokeColor,
+              strokeWidth,
+              fill: "none"
+            }
+          )
+        );
+      case "arrow": {
+        const x1 = startPoint ? startPoint.x * width : strokeWidth;
+        const y1 = startPoint ? startPoint.y * height : height / 2;
+        const x2 = endPoint ? endPoint.x * width : width - strokeWidth - 10;
+        const y2 = endPoint ? endPoint.y * height : height / 2;
+        return /* @__PURE__ */ React15.createElement(
+          "svg",
+          {
+            className: "ShapeHighlight__svg",
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`
+          },
+          /* @__PURE__ */ React15.createElement("defs", null, /* @__PURE__ */ React15.createElement(
+            "marker",
+            {
+              id: markerId,
+              markerWidth: "10",
+              markerHeight: "7",
+              refX: "9",
+              refY: "3.5",
+              orient: "auto"
+            },
+            /* @__PURE__ */ React15.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor })
+          )),
+          /* @__PURE__ */ React15.createElement(
+            "line",
+            {
+              x1,
+              y1,
+              x2,
+              y2,
+              stroke: strokeColor,
+              strokeWidth,
+              markerEnd: `url(#${markerId})`
+            }
+          )
+        );
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ React15.createElement(
+    "div",
+    {
+      className: `ShapeHighlight ${highlightClass}`,
+      onContextMenu
+    },
+    (onStyleChange || onDelete) && /* @__PURE__ */ React15.createElement(
+      "div",
+      {
+        className: "ShapeHighlight__toolbar-wrapper",
+        style: {
+          position: "absolute",
+          left: highlight.position.boundingRect.left,
+          top: highlight.position.boundingRect.top - 28,
+          paddingBottom: 12
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      },
+      /* @__PURE__ */ React15.createElement(
+        "div",
+        {
+          className: `ShapeHighlight__toolbar ${isHovered || isStylePanelOpen ? "ShapeHighlight__toolbar--visible" : ""}`
+        },
+        onStyleChange && /* @__PURE__ */ React15.createElement(
+          "button",
+          {
+            className: "ShapeHighlight__style-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              setIsStylePanelOpen(!isStylePanelOpen);
+            },
+            title: "Change style",
+            type: "button"
+          },
+          styleIcon || /* @__PURE__ */ React15.createElement(DefaultStyleIcon4, null)
+        ),
+        onDelete && /* @__PURE__ */ React15.createElement(
+          "button",
+          {
+            className: "ShapeHighlight__delete-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            title: "Delete",
+            type: "button"
+          },
+          deleteIcon || /* @__PURE__ */ React15.createElement(DefaultDeleteIcon6, null)
+        )
+      ),
+      isStylePanelOpen && onStyleChange && /* @__PURE__ */ React15.createElement(
+        "div",
+        {
+          className: "ShapeHighlight__style-panel",
+          ref: stylePanelRef,
+          onClick: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__style-row" }, /* @__PURE__ */ React15.createElement("label", null, "Color"), /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__color-options" }, /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React15.createElement(
+          "button",
+          {
+            key: c,
+            type: "button",
+            className: `ShapeHighlight__color-preset ${strokeColor === c ? "active" : ""}`,
+            style: { backgroundColor: c },
+            onClick: () => onStyleChange({ strokeColor: c }),
+            title: c
+          }
+        ))), /* @__PURE__ */ React15.createElement(
+          "input",
+          {
+            type: "color",
+            value: strokeColor,
+            onChange: (e) => {
+              onStyleChange({ strokeColor: e.target.value });
+            }
+          }
+        ))),
+        /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__style-row" }, /* @__PURE__ */ React15.createElement("label", null, "Width"), /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__width-options" }, STROKE_WIDTHS2.map((w) => /* @__PURE__ */ React15.createElement(
+          "button",
+          {
+            key: w.value,
+            type: "button",
+            className: `ShapeHighlight__width-button ${strokeWidth === w.value ? "active" : ""}`,
+            onClick: () => onStyleChange({ strokeWidth: w.value }),
+            title: w.label
+          },
+          w.label
+        ))))
+      )
+    ),
+    /* @__PURE__ */ React15.createElement(
+      Rnd5,
+      {
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        className: "ShapeHighlight__rnd",
+        onDragStop: (_, data) => {
+          const boundingRect = {
+            ...highlight.position.boundingRect,
+            top: data.y,
+            left: data.x
+          };
+          onChange?.(boundingRect);
+          onEditEnd?.();
+        },
+        onDragStart: onEditStart,
+        onResizeStop: (_e, _direction, ref, _delta, position) => {
+          const boundingRect = {
+            top: position.y,
+            left: position.x,
+            width: ref.offsetWidth,
+            height: ref.offsetHeight,
+            pageNumber: getPageFromElement(ref)?.number || highlight.position.boundingRect.pageNumber
+          };
+          onChange?.(boundingRect);
+          onEditEnd?.();
+        },
+        onResizeStart: onEditStart,
+        default: {
+          x: highlight.position.boundingRect.left,
+          y: highlight.position.boundingRect.top,
+          width: highlight.position.boundingRect.width || 100,
+          height: highlight.position.boundingRect.height || 100
+        },
+        minWidth: 20,
+        minHeight: 20,
+        key,
+        bounds,
+        lockAspectRatio: shapeType === "circle",
+        onClick: (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        },
+        style
+      },
+      /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__container" }, renderShape(
+        highlight.position.boundingRect.width || 100,
+        highlight.position.boundingRect.height || 100
+      ))
+    )
+  );
+};
+
+// src/components/PdfLoader.tsx
+import React16, { useEffect as useEffect11, useRef as useRef14, useState as useState11 } from "react";
+import { GlobalWorkerOptions, getDocument as getDocument2 } from "pdfjs-dist";
+var DEFAULT_BEFORE_LOAD = (progress) => /* @__PURE__ */ React16.createElement("div", { style: { color: "black" } }, "Loading ", Math.floor(progress.loaded / progress.total * 100), "%");
+var DEFAULT_ERROR_MESSAGE = (error) => /* @__PURE__ */ React16.createElement("div", { style: { color: "black" } }, error.message);
+var DEFAULT_ON_ERROR = (error) => {
+  throw new Error(`Error loading PDF document: ${error.message}!`);
+};
+var DEFAULT_WORKER_SRC = "https://unpkg.com/pdfjs-dist@4.4.168/build/pdf.worker.min.mjs";
+var PdfLoader = ({
+  document: document2,
+  beforeLoad = DEFAULT_BEFORE_LOAD,
+  errorMessage = DEFAULT_ERROR_MESSAGE,
+  children,
+  onError = DEFAULT_ON_ERROR,
+  workerSrc = DEFAULT_WORKER_SRC
+}) => {
+  const pdfLoadingTaskRef = useRef14(null);
+  const pdfDocumentRef = useRef14(null);
+  const [error, setError] = useState11(null);
+  const [loadingProgress, setLoadingProgress] = useState11(null);
+  useEffect11(() => {
+    GlobalWorkerOptions.workerSrc = workerSrc;
+    pdfLoadingTaskRef.current = getDocument2(document2);
+    pdfLoadingTaskRef.current.onProgress = (progress) => {
+      setLoadingProgress(progress.loaded > progress.total ? null : progress);
+    };
+    pdfLoadingTaskRef.current.promise.then((pdfDocument) => {
+      pdfDocumentRef.current = pdfDocument;
+    }).catch((error2) => {
+      if (error2.message != "Worker was destroyed") {
+        setError(error2);
+        onError(error2);
+      }
+    }).finally(() => {
+      setLoadingProgress(null);
+    });
+    return () => {
+      if (pdfLoadingTaskRef.current) {
+        pdfLoadingTaskRef.current.destroy();
+      }
+      if (pdfDocumentRef.current) {
+        pdfDocumentRef.current.destroy();
+      }
+    };
+  }, [document2]);
+  return error ? errorMessage(error) : loadingProgress ? beforeLoad(loadingProgress) : pdfDocumentRef.current && children(pdfDocumentRef.current);
+};
+
+// src/lib/export-pdf.ts
+import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
+function parseColor(color) {
+  const rgbaMatch = color.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+  );
+  if (rgbaMatch) {
+    return {
+      r: parseInt(rgbaMatch[1]) / 255,
+      g: parseInt(rgbaMatch[2]) / 255,
+      b: parseInt(rgbaMatch[3]) / 255,
+      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+    };
+  }
+  const hex = color.replace("#", "");
+  if (hex.length === 3) {
+    return {
+      r: parseInt(hex[0] + hex[0], 16) / 255,
+      g: parseInt(hex[1] + hex[1], 16) / 255,
+      b: parseInt(hex[2] + hex[2], 16) / 255,
+      a: 1
+    };
+  }
+  if (hex.length === 6) {
+    return {
+      r: parseInt(hex.slice(0, 2), 16) / 255,
+      g: parseInt(hex.slice(2, 4), 16) / 255,
+      b: parseInt(hex.slice(4, 6), 16) / 255,
+      a: 1
+    };
+  }
+  return { r: 1, g: 0.89, b: 0.56, a: 0.5 };
+}
+function scaledToPdfPoints(scaled, page) {
+  const pdfWidth = page.getWidth();
+  const pdfHeight = page.getHeight();
+  const xRatio = pdfWidth / scaled.width;
+  const yRatio = pdfHeight / scaled.height;
+  const x = scaled.x1 * xRatio;
+  const width = (scaled.x2 - scaled.x1) * xRatio;
+  const height = (scaled.y2 - scaled.y1) * yRatio;
+  const y = pdfHeight - scaled.y1 * yRatio - height;
+  return { x, y, width, height };
+}
+function dataUrlToBytes(dataUrl) {
+  const base64 = dataUrl.split(",")[1];
+  const byteString = atob(base64);
+  const bytes = new Uint8Array(byteString.length);
+  for (let i = 0; i < byteString.length; i++) {
+    bytes[i] = byteString.charCodeAt(i);
+  }
+  const type = dataUrl.includes("image/png") ? "png" : "jpg";
+  return { bytes, type };
+}
+function wrapText(text, font, fontSize, maxWidth) {
+  if (!text || maxWidth <= 0) return [];
+  const lines = [];
+  const paragraphs = text.split(/\n/);
+  for (const paragraph of paragraphs) {
+    if (!paragraph.trim()) {
+      lines.push("");
+      continue;
+    }
+    const words = paragraph.split(/\s+/);
+    let currentLine = "";
+    for (const word of words) {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      const testWidth = font.widthOfTextAtSize(testLine, fontSize);
+      if (testWidth <= maxWidth) {
+        currentLine = testLine;
+      } else {
+        if (currentLine) {
+          lines.push(currentLine);
+          currentLine = "";
+        }
+        if (font.widthOfTextAtSize(word, fontSize) > maxWidth) {
+          let remaining = word;
+          while (remaining.length > 0) {
+            let charCount = 1;
+            while (charCount < remaining.length && font.widthOfTextAtSize(remaining.substring(0, charCount + 1), fontSize) <= maxWidth) {
+              charCount++;
+            }
+            const chunk = remaining.substring(0, charCount);
+            remaining = remaining.substring(charCount);
+            if (remaining.length > 0) {
+              lines.push(chunk);
+            } else {
+              currentLine = chunk;
+            }
+          }
+        } else {
+          currentLine = word;
+        }
+      }
+    }
+    if (currentLine) lines.push(currentLine);
+  }
+  return lines;
+}
+function groupByPage(highlights) {
+  const map = /* @__PURE__ */ new Map();
+  for (const h of highlights) {
+    const pageNum = h.position.boundingRect.pageNumber;
+    if (!map.has(pageNum)) map.set(pageNum, []);
+    map.get(pageNum).push(h);
+  }
+  return map;
+}
+async function renderTextHighlight(page, highlight, options) {
+  const colorStr = highlight.highlightColor || options.textHighlightColor || "rgba(255, 226, 143, 0.5)";
+  const color = parseColor(colorStr);
+  const highlightStyle = highlight.highlightStyle || "highlight";
+  const rects = highlight.position.rects.length > 0 ? highlight.position.rects : [highlight.position.boundingRect];
+  for (const rect of rects) {
+    const { x, y, width, height } = scaledToPdfPoints(rect, page);
+    if (highlightStyle === "highlight") {
+      page.drawRectangle({
+        x,
+        y,
+        width,
+        height,
+        color: rgb(color.r, color.g, color.b),
+        opacity: color.a
+      });
+    } else if (highlightStyle === "underline") {
+      const lineThickness = Math.max(1, height * 0.1);
+      page.drawRectangle({
+        x,
+        y,
+        width,
+        height: lineThickness,
+        color: rgb(color.r, color.g, color.b),
+        opacity: color.a
+      });
+    } else if (highlightStyle === "strikethrough") {
+      const lineThickness = Math.max(1, height * 0.1);
+      const lineY = y + height / 2 - lineThickness / 2;
+      page.drawRectangle({
+        x,
+        y: lineY,
+        width,
+        height: lineThickness,
+        color: rgb(color.r, color.g, color.b),
+        opacity: color.a
+      });
+    }
+  }
+}
+async function renderAreaHighlight(page, highlight, options) {
+  const colorStr = highlight.highlightColor || options.areaHighlightColor || "rgba(255, 226, 143, 0.5)";
+  const color = parseColor(colorStr);
+  const { x, y, width, height } = scaledToPdfPoints(
+    highlight.position.boundingRect,
+    page
+  );
+  page.drawRectangle({
+    x,
+    y,
+    width,
+    height,
+    color: rgb(color.r, color.g, color.b),
+    opacity: color.a
+  });
+}
+async function renderFreetextHighlight(page, highlight, options, font) {
+  const text = highlight.content?.text || "";
+  const textColor = parseColor(
+    highlight.color || options.defaultFreetextColor || "#333333"
+  );
+  const { x, y, width, height } = scaledToPdfPoints(
+    highlight.position.boundingRect,
+    page
+  );
+  const pdfHeight = page.getHeight();
+  const yRatio = pdfHeight / highlight.position.boundingRect.height;
+  const storedFontSize = parseInt(highlight.fontSize || "") || options.defaultFreetextFontSize || 14;
+  const fontSize = storedFontSize * yRatio;
+  console.log("Freetext export:", {
+    storedFontSize,
+    yRatio,
+    fontSize,
+    boxDimensions: { x, y, width, height },
+    text: text.substring(0, 50)
+  });
+  const bgColorValue = highlight.backgroundColor || options.defaultFreetextBgColor || "#ffffc8";
+  if (bgColorValue !== "transparent") {
+    const bgColor = parseColor(bgColorValue);
+    page.drawRectangle({
+      x,
+      y,
+      width,
+      height,
+      color: rgb(bgColor.r, bgColor.g, bgColor.b),
+      opacity: bgColor.a
+    });
+  }
+  const padding = 4 * yRatio;
+  const maxWidth = width - padding * 2;
+  const lineHeight = fontSize * 1.3;
+  if (maxWidth > 0 && text) {
+    const lines = wrapText(text, font, fontSize, maxWidth);
+    let currentY = y + height - fontSize - padding;
+    for (const line of lines) {
+      if (currentY < y + padding) break;
+      if (line.trim()) {
+        page.drawText(line, {
+          x: x + padding,
+          y: currentY,
+          size: fontSize,
+          font,
+          color: rgb(textColor.r, textColor.g, textColor.b)
+        });
+      }
+      currentY -= lineHeight;
+    }
+  }
+}
+function transformToRawCoordinates(page, x, y, width, height) {
+  const rotation = page.getRotation().angle;
+  const pageWidth = page.getWidth();
+  const pageHeight = page.getHeight();
+  if (rotation === 90) {
+    return {
+      x: y,
+      y: pageWidth - x - width,
+      width: height,
+      height: width
+    };
+  } else if (rotation === 180) {
+    return {
+      x: pageWidth - x - width,
+      y: pageHeight - y - height,
+      width,
+      height
+    };
+  } else if (rotation === 270) {
+    return {
+      x: pageHeight - y - height,
+      y: x,
+      width: height,
+      height: width
+    };
+  }
+  return { x, y, width, height };
+}
+async function renderImageHighlight(pdfDoc, page, highlight) {
+  const imageDataUrl = highlight.content?.image;
+  if (!imageDataUrl) return;
+  try {
+    const { bytes, type } = dataUrlToBytes(imageDataUrl);
+    const image = type === "png" ? await pdfDoc.embedPng(bytes) : await pdfDoc.embedJpg(bytes);
+    const visualCoords = scaledToPdfPoints(
+      highlight.position.boundingRect,
+      page
+    );
+    const rawCoords = transformToRawCoordinates(
+      page,
+      visualCoords.x,
+      visualCoords.y,
+      visualCoords.width,
+      visualCoords.height
+    );
+    console.log("Image export:", {
+      rotation: page.getRotation().angle,
+      visualCoords,
+      rawCoords
+    });
+    page.drawImage(image, {
+      x: rawCoords.x,
+      y: rawCoords.y,
+      width: rawCoords.width,
+      height: rawCoords.height
+    });
+  } catch (error) {
+    console.error("Failed to embed image:", error);
+  }
+}
+async function renderShapeHighlight(page, highlight) {
+  const shapeType = highlight.content?.shape?.shapeType || highlight.shapeType || "rectangle";
+  const strokeColorStr = highlight.content?.shape?.strokeColor || highlight.strokeColor || "#000000";
+  const strokeWidth = highlight.content?.shape?.strokeWidth || highlight.strokeWidth || 2;
+  const color = parseColor(strokeColorStr);
+  const { x, y, width, height } = scaledToPdfPoints(
+    highlight.position.boundingRect,
+    page
+  );
+  switch (shapeType) {
+    case "rectangle":
+      page.drawRectangle({
+        x,
+        y,
+        width,
+        height,
+        borderColor: rgb(color.r, color.g, color.b),
+        borderWidth: strokeWidth,
+        opacity: color.a
+      });
+      break;
+    case "circle":
+      page.drawEllipse({
+        x: x + width / 2,
+        y: y + height / 2,
+        xScale: width / 2,
+        yScale: height / 2,
+        borderColor: rgb(color.r, color.g, color.b),
+        borderWidth: strokeWidth,
+        opacity: color.a
+      });
+      break;
+    case "arrow": {
+      const startPt = highlight.content?.shape?.startPoint;
+      const endPt = highlight.content?.shape?.endPoint;
+      const startX = startPt ? x + startPt.x * width : x;
+      const startY = startPt ? y + (1 - startPt.y) * height : y + height / 2;
+      const endX = endPt ? x + endPt.x * width : x + width;
+      const endY = endPt ? y + (1 - endPt.y) * height : y + height / 2;
+      page.drawLine({
+        start: { x: startX, y: startY },
+        end: { x: endX, y: endY },
+        color: rgb(color.r, color.g, color.b),
+        thickness: strokeWidth,
+        opacity: color.a
+      });
+      const angle = Math.atan2(endY - startY, endX - startX);
+      const arrowSize = Math.min(15, width * 0.2, height * 0.4);
+      const arrowAngle = Math.PI / 6;
+      page.drawLine({
+        start: {
+          x: endX - arrowSize * Math.cos(angle - arrowAngle),
+          y: endY - arrowSize * Math.sin(angle - arrowAngle)
+        },
+        end: { x: endX, y: endY },
+        color: rgb(color.r, color.g, color.b),
+        thickness: strokeWidth,
+        opacity: color.a
+      });
+      page.drawLine({
+        start: {
+          x: endX - arrowSize * Math.cos(angle + arrowAngle),
+          y: endY - arrowSize * Math.sin(angle + arrowAngle)
+        },
+        end: { x: endX, y: endY },
+        color: rgb(color.r, color.g, color.b),
+        thickness: strokeWidth,
+        opacity: color.a
+      });
+      break;
+    }
+  }
+}
+async function exportPdf(pdfSource, highlights, options = {}) {
+  let pdfBytes;
+  if (typeof pdfSource === "string") {
+    const response = await fetch(pdfSource);
+    pdfBytes = await response.arrayBuffer();
+  } else {
+    pdfBytes = pdfSource instanceof Uint8Array ? pdfSource.buffer.slice(
+      pdfSource.byteOffset,
+      pdfSource.byteOffset + pdfSource.byteLength
+    ) : pdfSource;
+  }
+  const pdfDoc = await PDFDocument.load(pdfBytes);
+  const pages = pdfDoc.getPages();
+  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
+  const byPage = groupByPage(highlights);
+  const totalPages = byPage.size;
+  let currentPage = 0;
+  for (const [pageNum, pageHighlights] of byPage) {
+    const page = pages[pageNum - 1];
+    if (!page) continue;
+    for (const highlight of pageHighlights) {
+      switch (highlight.type) {
+        case "text":
+          await renderTextHighlight(page, highlight, options);
+          break;
+        case "area":
+          await renderAreaHighlight(page, highlight, options);
+          break;
+        case "freetext":
+          await renderFreetextHighlight(page, highlight, options, font);
+          break;
+        case "image":
+          await renderImageHighlight(pdfDoc, page, highlight);
+          break;
+        case "drawing":
+          await renderImageHighlight(pdfDoc, page, highlight);
+          break;
+        case "shape":
+          await renderShapeHighlight(page, highlight);
+          break;
+        default:
+          await renderAreaHighlight(page, highlight, options);
+      }
+    }
+    currentPage++;
+    options.onProgress?.(currentPage, totalPages);
+  }
+  return pdfDoc.save();
+}
+export {
+  AreaHighlight,
+  DrawingCanvas,
+  DrawingHighlight,
+  FreetextHighlight,
+  ImageHighlight,
+  MonitoredHighlightContainer,
+  PdfHighlighter,
+  PdfLoader,
+  ShapeCanvas,
+  ShapeHighlight,
+  SignaturePad,
+  TextHighlight,
+  exportPdf,
+  scaledPositionToViewport,
+  useHighlightContainerContext,
+  usePdfHighlighterContext,
+  viewportPositionToScaled
+};
 //# sourceMappingURL=index.js.map