react-pdf-highlighter-plus 1.2.0 → 1.3.0

package/dist/esm/index.js

@@ -1,15 +1,12 @@
-// src/components/PdfHighlighter.tsx
-import React6, {
-  useEffect as useEffect4,
-  useLayoutEffect as useLayoutEffect2,
-  useMemo,
-  useRef as useRef5,
-  useState as useState5
-} from "react";
-import { createRoot } from "react-dom/client";
+import React11, { createContext, memo, useState, useRef, useEffect, useLayoutEffect, useContext, useCallback, useMemo } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createPortal } from 'react-dom';
+import { Loader2, AlertCircle, ChevronDown, Palette, Check, Copy, Trash2, Highlighter, Underline, Strikethrough, RotateCcw, RotateCw, Pencil, ChevronRight, FileQuestion, ChevronLeft, FileText, List, StickyNote, Minimize2 } from 'lucide-react';
+import { Rnd } from 'react-rnd';
+import { GlobalWorkerOptions, getDocument as getDocument$1 } from 'pdfjs-dist';
+import { useVirtualizer } from '@tanstack/react-virtual';
 
-// src/contexts/PdfHighlighterContext.ts
-import { createContext, useContext } from "react";
+// src/components/PdfHighlighter.tsx
 var PdfHighlighterContext = createContext(void 0);
 var usePdfHighlighterContext = () => {
   const pdfHighlighterUtils = useContext(PdfHighlighterContext);
@@ -20,6 +17,15 @@ var usePdfHighlighterContext = () => {
   }
   return pdfHighlighterUtils;
 };
+var useClearTipWhileSelected = (isSelected) => {
+  const pdfHighlighterUtils = useContext(PdfHighlighterContext);
+  useEffect(() => {
+    if (!isSelected || !pdfHighlighterUtils) return;
+    pdfHighlighterUtils.setTip(null);
+    pdfHighlighterUtils.setHighlightSelected(true);
+    return () => pdfHighlighterUtils.setHighlightSelected(false);
+  }, [isSelected, pdfHighlighterUtils]);
+};
 
 // src/lib/coordinates.ts
 var viewportToScaled = (rect, { width, height }) => {
@@ -542,8 +548,10 @@ var groupHighlightsByPage = (highlights) => highlights.reduce((acc, highlight) =
     return acc;
   }
   const pageNumbers = [
-    highlight.position.boundingRect.pageNumber,
-    ...highlight.position.rects.map((rect) => rect.pageNumber || 0)
+    .../* @__PURE__ */ new Set([
+      highlight.position.boundingRect.pageNumber,
+      ...highlight.position.rects.map((rect) => rect.pageNumber || 0)
+    ])
   ];
   pageNumbers.forEach((pageNumber) => {
     acc[pageNumber] ||= [];
@@ -609,14 +617,6 @@ var getPagesFromRange = (range) => {
   }
   return pages;
 };
-
-// src/components/DrawingCanvas.tsx
-import React, {
-  useRef,
-  useEffect,
-  useCallback,
-  useState
-} from "react";
 var DrawingCanvas = ({
   isActive,
   strokeColor = "#000000",
@@ -631,6 +631,9 @@ var DrawingCanvas = ({
   const isDrawingRef = useRef(false);
   const [pageNumber, setPageNumber] = useState(null);
   const [pageElement, setPageElement] = useState(null);
+  const cancelledRef = useRef(false);
+  const commitRef = useRef(() => {
+  });
   const findPageFromPoint = useCallback(
     (clientX, clientY) => {
       if (!viewer) return null;
@@ -777,23 +780,16 @@ var DrawingCanvas = ({
     const handleKeyDown = (e) => {
       if (e.code === "Escape") {
         console.log("DrawingCanvas: Cancelled via Escape");
+        cancelledRef.current = true;
         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 = () => {
+  const commitDrawing = () => {
     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");
@@ -820,7 +816,6 @@ var DrawingCanvas = ({
     const outputCtx = outputCanvas.getContext("2d");
     if (!outputCtx) {
       console.error("DrawingCanvas: Could not get output canvas context");
-      onCancel();
       return;
     }
     strokes.forEach((stroke) => {
@@ -857,13 +852,15 @@ var DrawingCanvas = ({
     }));
     console.log("DrawingCanvas: Created drawing at position", scaledPosition);
     onComplete(dataUrl, scaledPosition, normalizedStrokes);
-    setStrokes([]);
-    setCurrentStroke(null);
-    setPageNumber(null);
-    setPageElement(null);
   };
+  commitRef.current = commitDrawing;
+  useEffect(() => {
+    return () => {
+      if (!cancelledRef.current) commitRef.current();
+    };
+  }, []);
   if (!isActive) return null;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "canvas",
     {
       ref: canvasRef,
@@ -881,41 +878,11 @@ var DrawingCanvas = ({
       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 HighlightContext = createContext(void 0);
 var useHighlightContainerContext = () => {
-  const highlightContainerUtils = useContext2(HighlightContext);
+  const highlightContainerUtils = useContext(HighlightContext);
   if (highlightContainerUtils === void 0) {
     throw new Error(
       "useHighlightContainerContext must be used within a child of PdfHighlighter!"
@@ -971,7 +938,7 @@ var HighlightLayer = ({
   const currentHighlights = (highlightsByPage[pageNumber] || []).filter(
     (highlight) => shouldRenderHighlight?.(highlight) ?? true
   );
-  return /* @__PURE__ */ React2.createElement("div", null, currentHighlights.map((highlight, index) => {
+  return /* @__PURE__ */ React11.createElement("div", null, currentHighlights.map((highlight, index) => {
     const viewportHighlight = {
       ...highlight,
       id: "id" in highlight ? highlight.id : EMPTY_ID,
@@ -994,12 +961,9 @@ var HighlightLayer = ({
       isScrolledTo,
       highlightBindings
     };
-    return /* @__PURE__ */ React2.createElement(HighlightContext.Provider, { value: highlightUtils, key: index }, children);
+    return /* @__PURE__ */ React11.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),
@@ -1024,18 +988,18 @@ var MouseSelection = ({
   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 [start, setStart] = useState(null);
+  const [end, setEnd] = useState(null);
+  const [locked, setLocked] = useState(false);
+  const rootRef = useRef(null);
+  const startTargetRef = useRef(null);
   const reset = () => {
     onReset && onReset();
     setStart(null);
     setEnd(null);
     setLocked(false);
   };
-  useEffect2(() => {
+  useEffect(() => {
     onChange && onChange(Boolean(start && end));
     if (!rootRef.current) return;
     const container = asElement(rootRef.current.parentElement);
@@ -1094,7 +1058,7 @@ var MouseSelection = ({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [start, end, enableAreaSelection]);
-  return /* @__PURE__ */ React3.createElement("div", { className: "MouseSelection-container", ref: rootRef }, start && end && /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: "MouseSelection-container", ref: rootRef }, start && end && /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: "MouseSelection",
@@ -1102,14 +1066,6 @@ var MouseSelection = ({
     }
   ));
 };
-
-// src/components/ShapeCanvas.tsx
-import React4, {
-  useRef as useRef3,
-  useEffect as useEffect3,
-  useCallback as useCallback2,
-  useState as useState3
-} from "react";
 var ShapeCanvas = ({
   isActive,
   shapeType,
@@ -1119,13 +1075,13 @@ var ShapeCanvas = ({
   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(
+  const containerRef = useRef(null);
+  const [startPoint, setStartPoint] = useState(null);
+  const [currentPoint, setCurrentPoint] = useState(null);
+  const [pageNumber, setPageNumber] = useState(null);
+  const [pageRect, setPageRect] = useState(null);
+  const isDrawingRef = useRef(false);
+  const findPageFromPoint = useCallback(
     (clientX, clientY) => {
       if (!viewer) return null;
       for (let i = 0; i < viewer.pagesCount; i++) {
@@ -1144,7 +1100,7 @@ var ShapeCanvas = ({
     },
     [viewer]
   );
-  const handleStart = useCallback2(
+  const handleStart = useCallback(
     (clientX, clientY) => {
       const pageInfo = findPageFromPoint(clientX, clientY);
       if (!pageInfo) return;
@@ -1161,7 +1117,7 @@ var ShapeCanvas = ({
     },
     [findPageFromPoint]
   );
-  const handleMove = useCallback2(
+  const handleMove = useCallback(
     (clientX, clientY) => {
       if (!isDrawingRef.current || !pageRect) return;
       const pos = {
@@ -1172,7 +1128,7 @@ var ShapeCanvas = ({
     },
     [pageRect]
   );
-  const handleEnd = useCallback2(() => {
+  const handleEnd = useCallback(() => {
     if (!isDrawingRef.current || !startPoint || !currentPoint || pageNumber === null || !viewer) {
       isDrawingRef.current = false;
       setStartPoint(null);
@@ -1227,23 +1183,23 @@ var ShapeCanvas = ({
     setPageNumber(null);
     setPageRect(null);
   }, [startPoint, currentPoint, pageNumber, viewer, shapeType, strokeColor, strokeWidth, onComplete]);
-  const handleMouseDown = useCallback2(
+  const handleMouseDown = useCallback(
     (e) => {
       e.preventDefault();
       handleStart(e.clientX, e.clientY);
     },
     [handleStart]
   );
-  const handleMouseMove = useCallback2(
+  const handleMouseMove = useCallback(
     (e) => {
       handleMove(e.clientX, e.clientY);
     },
     [handleMove]
   );
-  const handleMouseUp = useCallback2(() => {
+  const handleMouseUp = useCallback(() => {
     handleEnd();
   }, [handleEnd]);
-  const handleTouchStart = useCallback2(
+  const handleTouchStart = useCallback(
     (e) => {
       e.preventDefault();
       if (e.touches.length > 0) {
@@ -1252,7 +1208,7 @@ var ShapeCanvas = ({
     },
     [handleStart]
   );
-  const handleTouchMove = useCallback2(
+  const handleTouchMove = useCallback(
     (e) => {
       e.preventDefault();
       if (e.touches.length > 0) {
@@ -1261,10 +1217,10 @@ var ShapeCanvas = ({
     },
     [handleMove]
   );
-  const handleTouchEnd = useCallback2(() => {
+  const handleTouchEnd = useCallback(() => {
     handleEnd();
   }, [handleEnd]);
-  useEffect3(() => {
+  useEffect(() => {
     if (!isActive) return;
     const handleKeyDown = (e) => {
       if (e.code === "Escape") {
@@ -1290,7 +1246,7 @@ var ShapeCanvas = ({
       pointerEvents: "none",
       zIndex: 1001
     };
-    return /* @__PURE__ */ React4.createElement("svg", { style: svgStyle }, shapeType === "rectangle" && /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React11.createElement("svg", { style: svgStyle }, shapeType === "rectangle" && /* @__PURE__ */ React11.createElement(
       "rect",
       {
         x: minX,
@@ -1301,7 +1257,7 @@ var ShapeCanvas = ({
         strokeWidth,
         fill: "none"
       }
-    ), shapeType === "circle" && /* @__PURE__ */ React4.createElement(
+    ), shapeType === "circle" && /* @__PURE__ */ React11.createElement(
       "ellipse",
       {
         cx: minX + width / 2,
@@ -1312,7 +1268,7 @@ var ShapeCanvas = ({
         strokeWidth,
         fill: "none"
       }
-    ), shapeType === "arrow" && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement(
+    ), shapeType === "arrow" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement(
       "marker",
       {
         id: "shape-canvas-arrowhead",
@@ -1322,8 +1278,8 @@ var ShapeCanvas = ({
         refY: "3.5",
         orient: "auto"
       },
-      /* @__PURE__ */ React4.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor })
-    )), /* @__PURE__ */ React4.createElement(
+      /* @__PURE__ */ React11.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor })
+    )), /* @__PURE__ */ React11.createElement(
       "line",
       {
         x1: startPoint.x,
@@ -1337,7 +1293,7 @@ var ShapeCanvas = ({
     )));
   };
   if (!isActive) return null;
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
     "div",
     {
       ref: containerRef,
@@ -1350,32 +1306,17 @@ var ShapeCanvas = ({
       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"
-  )));
+  ), renderShapePreview());
 };
-
-// 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 [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+  const containerRef = useRef(null);
   const updatePosition = () => {
     if (!containerRef.current) return;
     const { offsetHeight, offsetWidth } = containerRef.current;
@@ -1402,7 +1343,7 @@ var TipContainer = ({
   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(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: "PdfHighlighter__tip-container",
@@ -1424,7 +1365,7 @@ var PDFFindController;
 var PDFLinkService;
 var PDFViewer;
 (async () => {
-  const pdfjs = await import("pdfjs-dist/web/pdf_viewer.mjs");
+  const pdfjs = await import('pdfjs-dist/web/pdf_viewer.mjs');
   EventBus = pdfjs.EventBus;
   PDFFindController = pdfjs.PDFFindController;
   PDFLinkService = pdfjs.PDFLinkService;
@@ -1432,18 +1373,20 @@ var PDFViewer;
 })();
 var SCROLL_MARGIN = 10;
 var DEFAULT_SCALE_VALUE = "auto";
-var DEFAULT_TEXT_SELECTION_COLOR = "rgba(153,193,218,255)";
+var DEFAULT_TEXT_SELECTION_COLOR = "rgba(216, 212, 250, 1)";
 var DEFAULT_DARK_MODE_COLORS2 = {
   background: "#141210",
   foreground: "#eae6e0"
 };
-var unmountReactRoot = (root) => {
-  if (!root) return;
+var unmountReactRoot = (binding) => {
+  if (!binding) return;
+  const { reactRoot, container } = binding;
   queueMicrotask(() => {
     try {
-      root.unmount();
+      reactRoot.unmount();
     } catch {
     }
+    container.remove();
   });
 };
 var RECOLOR_PATCHED = /* @__PURE__ */ Symbol("pdfRecolorPatched");
@@ -1473,24 +1416,25 @@ var patchPageRenderRecolor = (pdfDocument, getMap) => {
 };
 var defaultLightTheme = {
   mode: "light",
-  containerBackgroundColor: "#e5e5e5",
-  scrollbarThumbColor: "#9f9f9f",
-  scrollbarTrackColor: "#d1d1d1",
+  containerBackgroundColor: "#efece5",
+  scrollbarThumbColor: "#b7b3ab",
+  scrollbarTrackColor: "transparent",
   darkModeInvertIntensity: 0.9,
   darkModeColors: DEFAULT_DARK_MODE_COLORS2
 };
 var defaultDarkTheme = {
   mode: "dark",
-  containerBackgroundColor: "#3a3a3a",
+  containerBackgroundColor: "#2a2724",
   // Lighter than PDF page for contrast
-  scrollbarThumbColor: "#6b6b6b",
-  scrollbarTrackColor: "#2c2c2c",
+  scrollbarThumbColor: "#57544d",
+  scrollbarTrackColor: "transparent",
   darkModeInvertIntensity: 0.9,
   darkModeColors: DEFAULT_DARK_MODE_COLORS2
 };
 var ensurePersistentLayer = (bindings, pageNumber, parent, className) => {
   let binding = bindings[pageNumber];
   if (!binding) {
+    parent.querySelectorAll(`:scope > .${className}`).forEach((stray) => stray.remove());
     const doc = getDocument(parent);
     const layer = doc.createElement("div");
     layer.className = className;
@@ -1507,7 +1451,14 @@ var ensurePersistentLayer = (bindings, pageNumber, parent, className) => {
   }
   return binding;
 };
-var isFreetextHighlight = (highlight) => "type" in highlight && highlight.type === "freetext";
+var sanitizeCssColor = (value, fallback) => {
+  if (!value) return fallback;
+  if (typeof CSS !== "undefined" && typeof CSS.supports === "function") {
+    return CSS.supports("color", value) ? value : fallback;
+  }
+  return /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\([\d.,%\s/]+\)|[a-z]{1,25})$/i.test(value) ? value : fallback;
+};
+var needsOpaqueLayer = (highlight) => "type" in highlight && (highlight.type === "freetext" || highlight.type === "image" || highlight.type === "drawing" || highlight.type === "shape");
 var disableTextSelection = (viewer, flag) => {
   viewer.viewer?.classList.toggle("PdfHighlighter--disable-selection", flag);
 };
@@ -1558,48 +1509,50 @@ var PdfHighlighter = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [recolorKey]
   );
-  const recolorMapRef = useRef5(recolorMap);
+  const recolorMapRef = useRef(recolorMap);
   recolorMapRef.current = recolorMap;
   const defaultStrokeColor = resolvedTheme.mode === "dark" ? "#ffffff" : "#000000";
   const drawingStrokeColor = drawingStrokeColorProp ?? defaultStrokeColor;
   const shapeStrokeColor = shapeStrokeColorProp ?? defaultStrokeColor;
-  const [tip, setTip] = useState5(null);
-  const [isViewerReady, setIsViewerReady] = useState5(false);
-  const containerNodeRef = useRef5(null);
-  const highlightBindingsRef = useRef5(
+  const [tip, setTip] = useState(null);
+  const [isViewerReady, setIsViewerReady] = useState(false);
+  const containerNodeRef = useRef(null);
+  const highlightBindingsRef = useRef(
     {}
   );
-  const noteBindingsRef = useRef5({});
-  const highlightsRef = useRef5(highlights);
-  const childrenRef = useRef5(children);
-  const ghostHighlightRef = useRef5(null);
-  const selectionRef = useRef5(null);
-  const scrolledToHighlightIdRef = useRef5(null);
-  const isAreaSelectionInProgressRef = useRef5(false);
-  const isEditInProgressRef = useRef5(false);
-  const updateTipPositionRef = useRef5(() => {
+  const noteBindingsRef = useRef({});
+  const highlightsRef = useRef(highlights);
+  const childrenRef = useRef(children);
+  const ghostHighlightRef = useRef(null);
+  const selectionRef = useRef(null);
+  const scrolledToHighlightIdRef = useRef(null);
+  const isAreaSelectionInProgressRef = useRef(false);
+  const isEditInProgressRef = useRef(false);
+  const updateTipPositionRef = useRef(() => {
   });
-  const eventBusRef = useRef5(new EventBus());
-  const linkServiceRef = useRef5(
+  const eventBusRef = useRef(new EventBus());
+  const linkServiceRef = useRef(
     new PDFLinkService({
       eventBus: eventBusRef.current,
       externalLinkTarget: 2
     })
   );
-  const resizeObserverRef = useRef5(null);
-  const renderRetryTimeoutsRef = useRef5(
+  const resizeObserverRef = useRef(null);
+  const lastContainerSizeRef = useRef(null);
+  const renderRetryTimeoutsRef = useRef(
     []
   );
-  const resumeScrollAwayTimeoutRef = useRef5(
+  const resumeScrollAwayTimeoutRef = useRef(
     null
   );
-  const findControllerRef = useRef5(null);
-  const viewerRef = useRef5(null);
-  const prevDocRef = useRef5(null);
-  const lastRenderKeyRef = useRef5(null);
+  const findControllerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const selectedHighlightCountRef = useRef(0);
+  const prevDocRef = useRef(null);
+  const lastRenderKeyRef = useRef(null);
   highlightsRef.current = highlights;
   childrenRef.current = children;
-  useLayoutEffect2(() => {
+  useLayoutEffect(() => {
     if (!containerNodeRef.current) return;
     const renderKey = `${pdfDocument.fingerprints ?? pdfDocument.numPages}::${recolorKey}`;
     if (lastRenderKeyRef.current === renderKey) {
@@ -1663,21 +1616,29 @@ var PdfHighlighter = ({
     linkServiceRef.current.setViewer(viewerRef.current);
     setIsViewerReady(true);
   }, [pdfDocument, recolorKey]);
-  useLayoutEffect2(() => {
+  useLayoutEffect(() => {
     if (!containerNodeRef.current) return;
-    resizeObserverRef.current = new ResizeObserver(handleScaleValue);
+    resizeObserverRef.current = new ResizeObserver((entries) => {
+      const rect = entries[entries.length - 1]?.contentRect;
+      if (!rect) return;
+      const last = lastContainerSizeRef.current;
+      if (last && last.w === rect.width && last.h === rect.height) return;
+      lastContainerSizeRef.current = { w: rect.width, h: rect.height };
+      if (last) handleScaleValueRef.current();
+    });
     resizeObserverRef.current.observe(containerNodeRef.current);
     const doc = containerNodeRef.current.ownerDocument;
-    eventBusRef.current.on("textlayerrendered", scheduleRenderHighlightLayers);
-    eventBusRef.current.on("pagerendered", scheduleRenderHighlightLayers);
+    const handlePageRendered = () => renderHighlightLayers(true);
+    eventBusRef.current.on("textlayerrendered", handlePageRendered);
+    eventBusRef.current.on("pagerendered", handlePageRendered);
     eventBusRef.current.on("pagesinit", handleScaleValue);
     doc.addEventListener("keydown", handleKeyDown);
     doc.addEventListener("copy", handleCopy, true);
     scheduleRenderHighlightLayers();
     return () => {
       eventBusRef.current.off("pagesinit", handleScaleValue);
-      eventBusRef.current.off("pagerendered", scheduleRenderHighlightLayers);
-      eventBusRef.current.off("textlayerrendered", scheduleRenderHighlightLayers);
+      eventBusRef.current.off("pagerendered", handlePageRendered);
+      eventBusRef.current.off("textlayerrendered", handlePageRendered);
       doc.removeEventListener("keydown", handleKeyDown);
       doc.removeEventListener("copy", handleCopy, true);
       resizeObserverRef.current?.disconnect();
@@ -1689,21 +1650,21 @@ var PdfHighlighter = ({
       }
     };
   }, [selectionTip, highlights, onSelectionFinished]);
-  useEffect4(() => {
+  useEffect(() => {
     return () => {
       for (const binding of Object.values(highlightBindingsRef.current))
-        unmountReactRoot(binding?.reactRoot);
+        unmountReactRoot(binding);
       for (const binding of Object.values(noteBindingsRef.current))
-        unmountReactRoot(binding?.reactRoot);
+        unmountReactRoot(binding);
     };
   }, []);
-  const onPageChangeRef = useRef5(onPageChange);
+  const onPageChangeRef = useRef(onPageChange);
   onPageChangeRef.current = onPageChange;
-  const initialPageRef = useRef5(initialPage);
+  const initialPageRef = useRef(initialPage);
   initialPageRef.current = initialPage;
-  const initialPageAppliedRef = useRef5(false);
-  const pendingInitialPageRef = useRef5(null);
-  useEffect4(() => {
+  const initialPageAppliedRef = useRef(false);
+  const pendingInitialPageRef = useRef(null);
+  useEffect(() => {
     const eventBus = eventBusRef.current;
     const handlePageChanging = (evt) => {
       if (pendingInitialPageRef.current != null) return;
@@ -1755,14 +1716,14 @@ var PdfHighlighter = ({
       pendingInitialPageRef.current = null;
     };
   }, []);
-  const onZoomChangeRef = useRef5(onZoomChange);
+  const onZoomChangeRef = useRef(onZoomChange);
   onZoomChangeRef.current = onZoomChange;
-  useEffect4(() => {
+  useEffect(() => {
     const container = containerNodeRef.current;
     if (!container || !isViewerReady) return;
     const MIN_SCALE = 0.25;
     const MAX_SCALE = 10;
-    const COMMIT_DELAY = 140;
+    const COMMIT_DELAY = 280;
     const g = {
       active: false,
       startScale: 1,
@@ -1826,10 +1787,11 @@ var PdfHighlighter = ({
         Math.max(MIN_SCALE, g.startScale * g.k)
       );
       const ratio = finalScale / g.startScale;
+      if (Math.abs(ratio - 1) < 1e-3) return;
       viewer.currentScaleValue = String(finalScale);
       container.scrollLeft = g.originX * ratio - g.anchorX;
       container.scrollTop = g.originY * ratio - g.anchorY;
-      onZoomChangeRef.current?.(finalScale);
+      setTimeout(() => onZoomChangeRef.current?.(finalScale), 0);
       console.log("[PdfHighlighter] pinch commit", {
         from: g.startScale,
         to: finalScale
@@ -1842,11 +1804,12 @@ var PdfHighlighter = ({
     const handleWheel = (e) => {
       if (!e.ctrlKey && !e.metaKey) return;
       e.preventDefault();
-      const rect = container.getBoundingClientRect();
-      const ax = e.clientX - rect.left;
-      const ay = e.clientY - rect.top;
-      if (!g.active && !begin(ax, ay)) return;
-      g.k = clampK(g.k * Math.exp(-e.deltaY * 0.01));
+      if (!g.active) {
+        const rect = container.getBoundingClientRect();
+        if (!begin(e.clientX - rect.left, e.clientY - rect.top)) return;
+      }
+      const delta = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaMode === 2 ? e.deltaY * 100 : e.deltaY;
+      g.k = clampK(g.k * Math.exp(-delta * 0.01));
       preview();
       scheduleCommit();
     };
@@ -2042,20 +2005,26 @@ var PdfHighlighter = ({
     event.stopPropagation();
   };
   const handleScaleValue = () => {
-    if (viewerRef.current) {
-      viewerRef.current.currentScaleValue = pdfScaleValue.toString();
+    const viewer = viewerRef.current;
+    if (!viewer) return;
+    const target = parseFloat(String(pdfScaleValue));
+    if (!Number.isNaN(target) && Math.abs(viewer.currentScale - target) / target < 5e-3) {
+      return;
     }
+    viewer.currentScaleValue = pdfScaleValue.toString();
   };
-  const renderHighlightLayer = (highlightBindings, pageNumber, shouldRenderHighlight) => {
+  const handleScaleValueRef = useRef(handleScaleValue);
+  handleScaleValueRef.current = handleScaleValue;
+  useEffect(() => {
+    handleScaleValueRef.current();
+  }, [pdfScaleValue, isViewerReady]);
+  const renderHighlightLayer = (highlightBindings, pageNumber, highlightsByPage, shouldRenderHighlight) => {
     if (!viewerRef.current) return;
     highlightBindings.reactRoot.render(
-      /* @__PURE__ */ React6.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React6.createElement(
+      /* @__PURE__ */ React11.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React11.createElement(
         HighlightLayer,
         {
-          highlightsByPage: group_highlights_by_page_default([
-            ...highlightsRef.current,
-            ghostHighlightRef.current
-          ]),
+          highlightsByPage,
           pageNumber,
           scrolledToHighlightId: scrolledToHighlightIdRef.current,
           viewer: viewerRef.current,
@@ -2066,40 +2035,61 @@ var PdfHighlighter = ({
       ))
     );
   };
-  const renderHighlightLayers = () => {
+  const renderVersionRef = useRef(0);
+  const pageRenderedVersionRef = useRef({});
+  const renderHighlightLayers = (onlyStalePages = false) => {
     if (!viewerRef.current) return;
+    if (!onlyStalePages) renderVersionRef.current += 1;
+    const version = renderVersionRef.current;
+    const highlightsByPage = group_highlights_by_page_default([
+      ...highlightsRef.current,
+      ghostHighlightRef.current
+    ]);
     for (let pageNumber = 1; pageNumber <= pdfDocument.numPages; pageNumber++) {
       const { textLayer } = viewerRef.current.getPageView(pageNumber - 1) || {};
       if (!textLayer) continue;
       const textLayerDiv = textLayer.div;
+      const pageEl = textLayerDiv.closest(".page");
+      if (!pageEl) continue;
+      const existingBinding = highlightBindingsRef.current[pageNumber];
+      const layerRebuilt = !existingBinding || existingBinding.container.parentNode !== pageEl;
+      if (onlyStalePages && !layerRebuilt && pageRenderedVersionRef.current[pageNumber] === version) {
+        continue;
+      }
       const highlightBindings = ensurePersistentLayer(
         highlightBindingsRef.current,
         pageNumber,
-        textLayerDiv,
+        pageEl,
         "PdfHighlighter__highlight-layer"
       );
       renderHighlightLayer(
         highlightBindings,
         pageNumber,
-        (highlight) => !isFreetextHighlight(highlight)
+        highlightsByPage,
+        (highlight) => !needsOpaqueLayer(highlight)
       );
-      const pageEl = textLayerDiv.closest(".page");
-      if (pageEl) {
+      {
         const noteBindings = ensurePersistentLayer(
           noteBindingsRef.current,
           pageNumber,
           pageEl,
           "PdfHighlighter__note-layer"
         );
-        renderHighlightLayer(noteBindings, pageNumber, isFreetextHighlight);
+        renderHighlightLayer(
+          noteBindings,
+          pageNumber,
+          highlightsByPage,
+          needsOpaqueLayer
+        );
       }
+      pageRenderedVersionRef.current[pageNumber] = version;
     }
   };
   const scheduleRenderHighlightLayers = () => {
     renderHighlightLayers();
     renderRetryTimeoutsRef.current.forEach(clearTimeout);
-    renderRetryTimeoutsRef.current = [50, 150, 350, 750, 1200].map(
-      (delay) => setTimeout(renderHighlightLayers, delay)
+    renderRetryTimeoutsRef.current = [50, 250, 1200].map(
+      (delay) => setTimeout(() => renderHighlightLayers(true), delay)
     );
   };
   const resumeScrollAwayListenerAfterNavigation = () => {
@@ -2185,7 +2175,7 @@ var PdfHighlighter = ({
       matchDiacritics: options.matchDiacritics ?? false
     });
   };
-  const currentSearchRef = useRef5({
+  const currentSearchRef = useRef({
     query: "",
     options: {}
   });
@@ -2213,8 +2203,15 @@ var PdfHighlighter = ({
       source: findControllerRef.current || viewerRef.current
     });
   };
-  const pdfHighlighterUtils = {
+  const latestUtils = {
     isEditingOrHighlighting,
+    setHighlightSelected: (selected) => {
+      selectedHighlightCountRef.current = Math.max(
+        0,
+        selectedHighlightCountRef.current + (selected ? 1 : -1)
+      );
+    },
+    isHighlightSelected: () => selectedHighlightCountRef.current > 0,
     getCurrentSelection: () => selectionRef.current,
     getGhostHighlight: () => ghostHighlightRef.current,
     removeGhostHighlight,
@@ -2292,8 +2289,19 @@ var PdfHighlighter = ({
       }
     }
   };
-  const utilsRefCalledRef = useRef5(false);
-  useEffect4(() => {
+  const latestUtilsRef = useRef(latestUtils);
+  latestUtilsRef.current = latestUtils;
+  const stableUtilsRef = useRef(null);
+  if (!stableUtilsRef.current) {
+    const facade = {};
+    for (const key of Object.keys(latestUtils)) {
+      facade[key] = (...args) => latestUtilsRef.current[key](...args);
+    }
+    stableUtilsRef.current = facade;
+  }
+  const pdfHighlighterUtils = stableUtilsRef.current;
+  const utilsRefCalledRef = useRef(false);
+  useEffect(() => {
     if (viewerRef.current && !utilsRefCalledRef.current) {
       utilsRefCalledRef.current = true;
       utilsRef(pdfHighlighterUtils);
@@ -2312,7 +2320,7 @@ var PdfHighlighter = ({
     ...style,
     backgroundColor: resolvedTheme.containerBackgroundColor
   };
-  return /* @__PURE__ */ React6.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React11.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React11.createElement(
     "div",
     {
       ref: containerNodeRef,
@@ -2321,27 +2329,27 @@ var PdfHighlighter = ({
       onPointerUp: handleMouseUp,
       style: containerStyle
     },
-    /* @__PURE__ */ React6.createElement("div", { className: "pdfViewer" }),
-    /* @__PURE__ */ React6.createElement("style", null, `
+    /* @__PURE__ */ React11.createElement("div", { className: "pdfViewer" }),
+    /* @__PURE__ */ React11.createElement("style", null, `
           .textLayer ::selection {
-            background: ${textSelectionColor};
+            background: ${sanitizeCssColor(textSelectionColor, DEFAULT_TEXT_SELECTION_COLOR)};
           }
           .PdfHighlighter::-webkit-scrollbar-thumb {
-            background-color: ${resolvedTheme.scrollbarThumbColor};
+            background-color: ${sanitizeCssColor(resolvedTheme.scrollbarThumbColor, "#9f9f9f")};
           }
           .PdfHighlighter::-webkit-scrollbar-track,
           .PdfHighlighter::-webkit-scrollbar-track-piece {
-            background-color: ${resolvedTheme.scrollbarTrackColor};
+            background-color: ${sanitizeCssColor(resolvedTheme.scrollbarTrackColor, "#d1d1d1")};
           }
         `),
-    isViewerReady && /* @__PURE__ */ React6.createElement(
+    isViewerReady && /* @__PURE__ */ React11.createElement(
       TipContainer,
       {
         viewer: viewerRef.current,
         updateTipPositionRef
       }
     ),
-    isViewerReady && enableAreaSelection && /* @__PURE__ */ React6.createElement(
+    isViewerReady && enableAreaSelection && /* @__PURE__ */ React11.createElement(
       MouseSelection,
       {
         viewer: viewerRef.current,
@@ -2375,7 +2383,7 @@ var PdfHighlighter = ({
         }
       }
     ),
-    isViewerReady && enableDrawingMode && /* @__PURE__ */ React6.createElement(
+    isViewerReady && enableDrawingMode && /* @__PURE__ */ React11.createElement(
       DrawingCanvas,
       {
         isActive: enableDrawingMode,
@@ -2392,7 +2400,7 @@ var PdfHighlighter = ({
         }
       }
     ),
-    isViewerReady && enableShapeMode && /* @__PURE__ */ React6.createElement(
+    isViewerReady && enableShapeMode && /* @__PURE__ */ React11.createElement(
       ShapeCanvas,
       {
         isActive: !!enableShapeMode,
@@ -2413,15 +2421,6 @@ var PdfHighlighter = ({
   ));
 };
 
-// src/components/TextHighlight.tsx
-import React7, {
-  useState as useState6,
-  useRef as useRef6,
-  useEffect as useEffect5,
-  useLayoutEffect as useLayoutEffect3
-} from "react";
-import { createPortal } from "react-dom";
-
 // src/lib/copy-highlight-content.ts
 var intersects = (a, b) => a.left < b.left + b.width && a.left + a.width > b.left && a.top < b.top + b.height && a.top + a.height > b.top;
 var copyTextToClipboard = async (text) => {
@@ -2485,13 +2484,15 @@ var findOrCreateHighlightConfigLayer = (anchor) => {
 };
 
 // src/components/TextHighlight.tsx
-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 DefaultCopyIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
-var DefaultCopiedIcon = () => /* @__PURE__ */ React7.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }));
-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 DefaultStyleIcon = () => /* @__PURE__ */ React11.createElement(Palette, { width: 14, height: 14 });
+var DefaultDeleteIcon = () => /* @__PURE__ */ React11.createElement(Trash2, { width: 14, height: 14 });
+var DefaultCopyIcon = () => /* @__PURE__ */ React11.createElement(Copy, { width: 14, height: 14 });
+var DefaultCopiedIcon = () => /* @__PURE__ */ React11.createElement(Check, { width: 14, height: 14, strokeWidth: 2.5 });
+var ChevronDownIcon = () => /* @__PURE__ */ React11.createElement(ChevronDown, { width: 12, height: 12, strokeWidth: 2.5 });
+var CheckIcon = () => /* @__PURE__ */ React11.createElement(Check, { width: 14, height: 14, strokeWidth: 2.5 });
+var HighlightIcon = () => /* @__PURE__ */ React11.createElement(Highlighter, { width: 16, height: 16 });
+var UnderlineIcon = () => /* @__PURE__ */ React11.createElement(Underline, { width: 16, height: 16 });
+var StrikethroughIcon = () => /* @__PURE__ */ React11.createElement(Strikethrough, { width: 16, height: 16 });
 var DEFAULT_COLOR_PRESETS = [
   "rgba(255, 226, 143, 1)",
   // Yellow (default)
@@ -2504,7 +2505,14 @@ var DEFAULT_COLOR_PRESETS = [
   "#e1bee7"
   // Light purple
 ];
-var TextHighlight = ({
+var COLOR_NAMES = {
+  "rgba(255, 226, 143, 1)": "Yellow",
+  "#ffcdd2": "Red",
+  "#c8e6c9": "Green",
+  "#bbdefb": "Blue",
+  "#e1bee7": "Purple"
+};
+var TextHighlight = memo(({
   highlight,
   onClick,
   onMouseOver,
@@ -2519,28 +2527,60 @@ var TextHighlight = ({
   styleIcon,
   deleteIcon,
   copyText,
-  colorPresets = DEFAULT_COLOR_PRESETS
+  colorPresets = DEFAULT_COLOR_PRESETS,
+  extraButtons,
+  extraPanel
 }) => {
-  const [isStylePanelOpen, setIsStylePanelOpen] = useState6(false);
-  const [isHovered, setIsHovered] = useState6(false);
-  const [isCopied, setIsCopied] = useState6(false);
-  const [configLayer, setConfigLayer] = useState6(null);
-  const stylePanelRef = useRef6(null);
-  const containerRef = useRef6(null);
-  const copyResetTimeoutRef = useRef6(null);
-  useLayoutEffect3(() => {
+  const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
+  const [isColorMenuOpen, setIsColorMenuOpen] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+  const [configLayer, setConfigLayer] = useState(null);
+  const stylePanelRef = useRef(null);
+  const colorMenuRef = useRef(null);
+  const containerRef = useRef(null);
+  const toolbarWrapperRef = useRef(null);
+  const copyResetTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (!isSelected) return;
+    const handlePointerDown = (e) => {
+      const target = e.target;
+      const insideRoot = containerRef.current?.contains(target);
+      const insideToolbar = toolbarWrapperRef.current?.contains(target);
+      if (!insideRoot && !insideToolbar) {
+        setIsSelected(false);
+        setIsStylePanelOpen(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setIsSelected(false);
+        setIsStylePanelOpen(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isSelected]);
+  useLayoutEffect(() => {
     if (containerRef.current) {
-      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+      const layer = findOrCreateHighlightConfigLayer(containerRef.current);
+      setConfigLayer((prev) => prev === layer ? prev : layer);
     }
-  }, []);
-  useEffect5(() => {
+  });
+  useEffect(() => {
     return () => {
       if (copyResetTimeoutRef.current) {
         window.clearTimeout(copyResetTimeoutRef.current);
       }
     };
   }, []);
-  useEffect5(() => {
+  useEffect(() => {
     if (!isStylePanelOpen) return;
     const handleClickOutside = (e) => {
       if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
@@ -2555,9 +2595,26 @@ var TextHighlight = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isStylePanelOpen]);
+  useEffect(() => {
+    if (!isColorMenuOpen) return;
+    const handleClickOutside = (e) => {
+      if (colorMenuRef.current && !colorMenuRef.current.contains(e.target)) {
+        setIsColorMenuOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isColorMenuOpen]);
   const highlightClass = isScrolledTo ? "TextHighlight--scrolledTo" : "";
+  const selectedClass = isSelected ? "TextHighlight--selected" : "";
   const { rects } = highlight.position;
   const firstRect = rects[0];
+  const flipToolbar = !!firstRect && firstRect.top < 40;
   const getPartStyleClass = () => {
     switch (highlightStyle) {
       case "underline":
@@ -2591,46 +2648,68 @@ var TextHighlight = ({
       copyResetTimeoutRef.current = null;
     }, 1500);
   };
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
-      className: `TextHighlight ${highlightClass}`,
+      className: `TextHighlight ${highlightClass} ${selectedClass}`,
       onContextMenu,
       ref: containerRef
     },
     configLayer && (onStyleChange || onDelete) && firstRect && createPortal(
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React11.createElement(
         "div",
         {
           className: "TextHighlight__toolbar-wrapper",
+          ref: toolbarWrapperRef,
           style: {
             position: "absolute",
             left: firstRect.left,
-            top: firstRect.top - 28,
-            paddingBottom: 12
-          },
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false)
+            top: firstRect.top
+          }
         },
-        /* @__PURE__ */ React7.createElement(
+        /* @__PURE__ */ React11.createElement(
           "div",
           {
-            className: `TextHighlight__toolbar ${isHovered || isScrolledTo || isStylePanelOpen ? "TextHighlight__toolbar--visible" : ""}`
+            className: `TextHighlight__toolbar ${flipToolbar ? "TextHighlight__toolbar--below" : ""} ${isSelected || isScrolledTo || isStylePanelOpen || isColorMenuOpen ? "TextHighlight__toolbar--visible" : ""}`
           },
-          onStyleChange && /* @__PURE__ */ React7.createElement(
+          onStyleChange && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              type: "button",
+              className: "TextHighlight__color-trigger",
+              "aria-label": "Highlight color",
+              "aria-expanded": isColorMenuOpen,
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsStylePanelOpen(false);
+                setIsColorMenuOpen((v) => !v);
+              },
+              title: "Highlight color"
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "TextHighlight__color-trigger-dot",
+                style: { backgroundColor: highlightColor }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement(ChevronDownIcon, null)
+          ), /* @__PURE__ */ React11.createElement("div", { className: "TextHighlight__toolbar-divider" })),
+          onStyleChange && /* @__PURE__ */ React11.createElement(
             "button",
             {
               className: "TextHighlight__style-button",
               onClick: (e) => {
                 e.stopPropagation();
+                setIsColorMenuOpen(false);
                 setIsStylePanelOpen(!isStylePanelOpen);
               },
               title: "Change style",
               type: "button"
             },
-            styleIcon || /* @__PURE__ */ React7.createElement(DefaultStyleIcon, null)
+            styleIcon || /* @__PURE__ */ React11.createElement(DefaultStyleIcon, null)
           ),
-          /* @__PURE__ */ React7.createElement(
+          /* @__PURE__ */ React11.createElement(
             "button",
             {
               className: "TextHighlight__copy-button",
@@ -2638,9 +2717,10 @@ var TextHighlight = ({
               title: isCopied ? "Copied" : "Copy text",
               type: "button"
             },
-            isCopied ? /* @__PURE__ */ React7.createElement(DefaultCopiedIcon, null) : /* @__PURE__ */ React7.createElement(DefaultCopyIcon, null)
+            isCopied ? /* @__PURE__ */ React11.createElement(DefaultCopiedIcon, null) : /* @__PURE__ */ React11.createElement(DefaultCopyIcon, null)
           ),
-          onDelete && /* @__PURE__ */ React7.createElement(
+          extraButtons,
+          onDelete && /* @__PURE__ */ React11.createElement(
             "button",
             {
               className: "TextHighlight__delete-button",
@@ -2651,17 +2731,17 @@ var TextHighlight = ({
               title: "Delete",
               type: "button"
             },
-            deleteIcon || /* @__PURE__ */ React7.createElement(DefaultDeleteIcon, null)
+            deleteIcon || /* @__PURE__ */ React11.createElement(DefaultDeleteIcon, null)
           )
         ),
-        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React7.createElement(
+        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React11.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(
+          /* @__PURE__ */ React11.createElement("div", { className: "TextHighlight__style-row" }, /* @__PURE__ */ React11.createElement("label", null, "Style"), /* @__PURE__ */ React11.createElement("div", { className: "TextHighlight__style-buttons" }, /* @__PURE__ */ React11.createElement(
             "button",
             {
               type: "button",
@@ -2669,8 +2749,8 @@ var TextHighlight = ({
               onClick: () => onStyleChange({ highlightStyle: "highlight" }),
               title: "Highlight"
             },
-            /* @__PURE__ */ React7.createElement(HighlightIcon, null)
-          ), /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(HighlightIcon, null)
+          ), /* @__PURE__ */ React11.createElement(
             "button",
             {
               type: "button",
@@ -2678,8 +2758,8 @@ var TextHighlight = ({
               onClick: () => onStyleChange({ highlightStyle: "underline" }),
               title: "Underline"
             },
-            /* @__PURE__ */ React7.createElement(UnderlineIcon, null)
-          ), /* @__PURE__ */ React7.createElement(
+            /* @__PURE__ */ React11.createElement(UnderlineIcon, null)
+          ), /* @__PURE__ */ React11.createElement(
             "button",
             {
               type: "button",
@@ -2687,45 +2767,56 @@ var TextHighlight = ({
               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(
+            /* @__PURE__ */ React11.createElement(StrikethroughIcon, null)
+          )))
+        ),
+        isColorMenuOpen && onStyleChange && /* @__PURE__ */ React11.createElement(
+          "div",
+          {
+            className: "TextHighlight__color-menu",
+            ref: colorMenuRef,
+            onClick: (e) => e.stopPropagation()
+          },
+          colorPresets.map((c) => /* @__PURE__ */ React11.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 });
+              className: "TextHighlight__color-menu-item",
+              onClick: () => {
+                onStyleChange({ highlightColor: c });
+                setIsColorMenuOpen(false);
               }
-            }
-          )))
-        )
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "TextHighlight__color-menu-dot",
+                style: { backgroundColor: c }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement("span", { className: "TextHighlight__color-menu-label" }, COLOR_NAMES[c] || c),
+            highlightColor === c && /* @__PURE__ */ React11.createElement("span", { className: "TextHighlight__color-menu-check" }, /* @__PURE__ */ React11.createElement(CheckIcon, null))
+          ))
+        ),
+        extraPanel
       ),
       configLayer
     ),
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React11.createElement(
       "div",
       {
-        className: "TextHighlight__parts",
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false)
+        className: "TextHighlight__parts"
       },
-      rects.map((rect, index) => /* @__PURE__ */ React7.createElement(
+      rects.map((rect, index) => /* @__PURE__ */ React11.createElement(
         "div",
         {
           onMouseOver,
           onMouseOut,
-          onClick,
+          onClick: (event) => {
+            setIsSelected(true);
+            onClick?.(event);
+          },
           key: index,
           style: getPartStyle(rect),
           className: `TextHighlight__part ${getPartStyleClass()}`
@@ -2733,22 +2824,20 @@ var TextHighlight = ({
       ))
     )
   );
-};
-
-// src/components/MonitoredHighlightContainer.tsx
-import React9, { useRef as useRef8 } from "react";
-
-// src/components/MouseMonitor.tsx
-import React8, { useEffect as useEffect6, useRef as useRef7 } from "react";
+});
+TextHighlight.displayName = "TextHighlight";
 var MouseMonitor = ({
   onMoveAway,
   paddingX,
   paddingY,
   children
 }) => {
-  const containerRef = useRef7(null);
+  const containerRef = useRef(null);
   const onMouseMove = (event) => {
     if (!containerRef.current) return;
+    if (containerRef.current.contains(document.activeElement)) {
+      return;
+    }
     const { clientX, clientY } = event;
     const { left, top, width, height } = containerRef.current.getBoundingClientRect();
     const inBoundsX = clientX > left - paddingX && clientX < left + width + paddingX;
@@ -2757,13 +2846,13 @@ var MouseMonitor = ({
       onMoveAway();
     }
   };
-  useEffect6(() => {
+  useEffect(() => {
     document.addEventListener("mousemove", onMouseMove);
     return () => {
       document.removeEventListener("mousemove", onMouseMove);
     };
   }, []);
-  return /* @__PURE__ */ React8.createElement("div", { ref: containerRef }, children);
+  return /* @__PURE__ */ React11.createElement("div", { ref: containerRef }, children);
 };
 
 // src/components/MonitoredHighlightContainer.tsx
@@ -2773,17 +2862,18 @@ var MonitoredHighlightContainer = ({
   onMouseLeave,
   children
 }) => {
-  const mouseInRef = useRef8(false);
-  const { setTip, isEditingOrHighlighting } = usePdfHighlighterContext();
-  return /* @__PURE__ */ React9.createElement(
+  const mouseInRef = useRef(false);
+  const { setTip, isEditingOrHighlighting, isHighlightSelected } = usePdfHighlighterContext();
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       onMouseEnter: () => {
         mouseInRef.current = true;
         onMouseEnter && onMouseEnter();
         if (isEditingOrHighlighting()) return;
+        if (isHighlightSelected()) return;
         if (highlightTip) {
-          const monitoredHighlightTip = /* @__PURE__ */ React9.createElement(
+          const monitoredHighlightTip = /* @__PURE__ */ React11.createElement(
             MouseMonitor,
             {
               onMoveAway: () => {
@@ -2812,20 +2902,11 @@ var MonitoredHighlightContainer = ({
     children
   );
 };
-
-// src/components/AreaHighlight.tsx
-import React10, {
-  useState as useState7,
-  useRef as useRef9,
-  useEffect as useEffect7,
-  useLayoutEffect as useLayoutEffect4
-} from "react";
-import { createPortal as createPortal2 } from "react-dom";
-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 DefaultCopyIcon2 = () => /* @__PURE__ */ React10.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React10.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
-var DefaultCopiedIcon2 = () => /* @__PURE__ */ React10.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React10.createElement("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }));
+var DefaultDeleteIcon2 = () => /* @__PURE__ */ React11.createElement(Trash2, { width: 14, height: 14 });
+var DefaultCopyIcon2 = () => /* @__PURE__ */ React11.createElement(Copy, { width: 14, height: 14 });
+var DefaultCopiedIcon2 = () => /* @__PURE__ */ React11.createElement(Check, { width: 14, height: 14, strokeWidth: 2.5 });
+var ChevronDownIcon2 = () => /* @__PURE__ */ React11.createElement(ChevronDown, { width: 12, height: 12, strokeWidth: 2.5 });
+var CheckIcon2 = () => /* @__PURE__ */ React11.createElement(Check, { width: 14, height: 14, strokeWidth: 2.5 });
 var DEFAULT_COLOR_PRESETS2 = [
   "rgba(255, 226, 143, 1)",
   // Yellow (default)
@@ -2838,7 +2919,14 @@ var DEFAULT_COLOR_PRESETS2 = [
   "#e1bee7"
   // Light purple
 ];
-var AreaHighlight = ({
+var COLOR_NAMES2 = {
+  "rgba(255, 226, 143, 1)": "Yellow",
+  "#ffcdd2": "Red",
+  "#c8e6c9": "Green",
+  "#bbdefb": "Blue",
+  "#e1bee7": "Purple"
+};
+var AreaHighlight = memo(({
   highlight,
   onChange,
   isScrolledTo,
@@ -2849,35 +2937,62 @@ var AreaHighlight = ({
   highlightColor = "rgba(255, 226, 143, 1)",
   onStyleChange,
   onDelete,
-  styleIcon,
   deleteIcon,
   copyText,
-  colorPresets = DEFAULT_COLOR_PRESETS2
+  colorPresets = DEFAULT_COLOR_PRESETS2,
+  extraButtons,
+  extraPanel
 }) => {
-  const [isStylePanelOpen, setIsStylePanelOpen] = useState7(false);
-  const [isHovered, setIsHovered] = useState7(false);
-  const [isCopied, setIsCopied] = useState7(false);
-  const [configLayer, setConfigLayer] = useState7(null);
-  const stylePanelRef = useRef9(null);
-  const containerRef = useRef9(null);
-  const copyResetTimeoutRef = useRef9(null);
-  useLayoutEffect4(() => {
+  const [isColorMenuOpen, setIsColorMenuOpen] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
+  const [isCopied, setIsCopied] = useState(false);
+  const [configLayer, setConfigLayer] = useState(null);
+  const colorMenuRef = useRef(null);
+  const containerRef = useRef(null);
+  const toolbarWrapperRef = useRef(null);
+  const copyResetTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (!isSelected) return;
+    const handlePointerDown = (e) => {
+      const target = e.target;
+      const insideRoot = containerRef.current?.contains(target);
+      const insideToolbar = toolbarWrapperRef.current?.contains(target);
+      if (!insideRoot && !insideToolbar) {
+        setIsSelected(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setIsSelected(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isSelected]);
+  useLayoutEffect(() => {
     if (containerRef.current) {
-      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+      const layer = findOrCreateHighlightConfigLayer(containerRef.current);
+      setConfigLayer((prev) => prev === layer ? prev : layer);
     }
-  }, []);
-  useEffect7(() => {
+  });
+  useEffect(() => {
     return () => {
       if (copyResetTimeoutRef.current) {
         window.clearTimeout(copyResetTimeoutRef.current);
       }
     };
   }, []);
-  useEffect7(() => {
-    if (!isStylePanelOpen) return;
+  useEffect(() => {
+    if (!isColorMenuOpen) return;
     const handleClickOutside = (e) => {
-      if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
-        setIsStylePanelOpen(false);
+      if (colorMenuRef.current && !colorMenuRef.current.contains(e.target)) {
+        setIsColorMenuOpen(false);
       }
     };
     const timeoutId = setTimeout(() => {
@@ -2887,8 +3002,10 @@ var AreaHighlight = ({
       clearTimeout(timeoutId);
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [isStylePanelOpen]);
+  }, [isColorMenuOpen]);
   const highlightClass = isScrolledTo ? "AreaHighlight--scrolledTo" : "";
+  const selectedClass = isSelected ? "AreaHighlight--selected" : "";
+  const flipToolbar = highlight.position.boundingRect.top < 40;
   const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
   const mergedStyle = {
     ...style,
@@ -2910,46 +3027,53 @@ var AreaHighlight = ({
       copyResetTimeoutRef.current = null;
     }, 1500);
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
-      className: `AreaHighlight ${highlightClass}`,
+      className: `AreaHighlight ${highlightClass} ${selectedClass}`,
       onContextMenu,
       ref: containerRef
     },
-    configLayer && (onStyleChange || onDelete) && createPortal2(
-      /* @__PURE__ */ React10.createElement(
+    configLayer && (onStyleChange || onDelete) && createPortal(
+      /* @__PURE__ */ React11.createElement(
         "div",
         {
           className: "AreaHighlight__toolbar-wrapper",
+          ref: toolbarWrapperRef,
           style: {
             position: "absolute",
             left: highlight.position.boundingRect.left,
-            top: highlight.position.boundingRect.top - 28,
-            paddingBottom: 12
-          },
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false)
+            top: highlight.position.boundingRect.top
+          }
         },
-        /* @__PURE__ */ React10.createElement(
+        /* @__PURE__ */ React11.createElement(
           "div",
           {
-            className: `AreaHighlight__toolbar ${isHovered || isScrolledTo || isStylePanelOpen ? "AreaHighlight__toolbar--visible" : ""}`
+            className: `AreaHighlight__toolbar ${flipToolbar ? "AreaHighlight__toolbar--below" : ""} ${isSelected || isScrolledTo || isColorMenuOpen ? "AreaHighlight__toolbar--visible" : ""}`
           },
-          onStyleChange && /* @__PURE__ */ React10.createElement(
+          onStyleChange && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
             "button",
             {
-              className: "AreaHighlight__style-button",
+              type: "button",
+              className: "AreaHighlight__color-trigger",
+              "aria-label": "Highlight color",
+              "aria-expanded": isColorMenuOpen,
               onClick: (e) => {
                 e.stopPropagation();
-                setIsStylePanelOpen(!isStylePanelOpen);
+                setIsColorMenuOpen((v) => !v);
               },
-              title: "Change color",
-              type: "button"
+              title: "Highlight color"
             },
-            styleIcon || /* @__PURE__ */ React10.createElement(DefaultStyleIcon2, null)
-          ),
-          /* @__PURE__ */ React10.createElement(
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "AreaHighlight__color-trigger-dot",
+                style: { backgroundColor: highlightColor }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement(ChevronDownIcon2, null)
+          ), /* @__PURE__ */ React11.createElement("div", { className: "AreaHighlight__toolbar-divider" })),
+          /* @__PURE__ */ React11.createElement(
             "button",
             {
               className: "AreaHighlight__copy-button",
@@ -2957,9 +3081,10 @@ var AreaHighlight = ({
               title: isCopied ? "Copied" : "Copy text",
               type: "button"
             },
-            isCopied ? /* @__PURE__ */ React10.createElement(DefaultCopiedIcon2, null) : /* @__PURE__ */ React10.createElement(DefaultCopyIcon2, null)
+            isCopied ? /* @__PURE__ */ React11.createElement(DefaultCopiedIcon2, null) : /* @__PURE__ */ React11.createElement(DefaultCopyIcon2, null)
           ),
-          onDelete && /* @__PURE__ */ React10.createElement(
+          extraButtons,
+          onDelete && /* @__PURE__ */ React11.createElement(
             "button",
             {
               className: "AreaHighlight__delete-button",
@@ -2970,45 +3095,45 @@ var AreaHighlight = ({
               title: "Delete",
               type: "button"
             },
-            deleteIcon || /* @__PURE__ */ React10.createElement(DefaultDeleteIcon2, null)
+            deleteIcon || /* @__PURE__ */ React11.createElement(DefaultDeleteIcon2, null)
           )
         ),
-        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React10.createElement(
+        isColorMenuOpen && onStyleChange && /* @__PURE__ */ React11.createElement(
           "div",
           {
-            className: "AreaHighlight__style-panel",
-            ref: stylePanelRef,
+            className: "AreaHighlight__color-menu",
+            ref: colorMenuRef,
             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(
+          colorPresets.map((c) => /* @__PURE__ */ React11.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 });
+              className: "AreaHighlight__color-menu-item",
+              onClick: () => {
+                onStyleChange({ highlightColor: c });
+                setIsColorMenuOpen(false);
               }
-            }
-          )))
-        )
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "AreaHighlight__color-menu-dot",
+                style: { backgroundColor: c }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement("span", { className: "AreaHighlight__color-menu-label" }, COLOR_NAMES2[c] || c),
+            highlightColor === c && /* @__PURE__ */ React11.createElement("span", { className: "AreaHighlight__color-menu-check" }, /* @__PURE__ */ React11.createElement(CheckIcon2, null))
+          ))
+        ),
+        extraPanel
       ),
       configLayer
     ),
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement(
       Rnd,
       {
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
         className: "AreaHighlight__part",
         onDragStop: (_, data) => {
           const boundingRect = {
@@ -3028,7 +3153,10 @@ var AreaHighlight = ({
           };
           onChange && onChange(boundingRect);
         },
-        onDragStart: onEditStart,
+        onDragStart: () => {
+          setIsSelected(true);
+          onEditStart?.();
+        },
         onResizeStart: onEditStart,
         default: {
           x: highlight.position.boundingRect.left,
@@ -3041,28 +3169,31 @@ var AreaHighlight = ({
         onClick: (event) => {
           event.stopPropagation();
           event.preventDefault();
+          setIsSelected(true);
         },
         style: mergedStyle
       }
     )
   );
-};
-
-// src/components/FreetextHighlight.tsx
-import React11, {
-  useState as useState8,
-  useRef as useRef10,
-  useEffect as useEffect8
-} 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 DefaultCompactIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { d: "M6 3h9l5 5v13H6V3zm8 1.5V9h4.5L14 4.5zM8 12h8v1.5H8V12zm0 3h8v1.5H8V15zm0 3h5v1.5H8V18z" }));
-var DefaultCollapseIcon = () => /* @__PURE__ */ React11.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React11.createElement("path", { d: "M7 10v2h10v-2H7zm-2-7h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5z" }));
+});
+AreaHighlight.displayName = "AreaHighlight";
+var DefaultEditIcon = () => /* @__PURE__ */ React11.createElement(Pencil, { width: 14, height: 14 });
+var DefaultStyleIcon2 = () => /* @__PURE__ */ React11.createElement(Palette, { width: 14, height: 14 });
+var DefaultDeleteIcon3 = () => /* @__PURE__ */ React11.createElement(Trash2, { width: 14, height: 14 });
+var DefaultCompactIcon = () => /* @__PURE__ */ React11.createElement(StickyNote, { width: 16, height: 16 });
+var DefaultCollapseIcon = () => /* @__PURE__ */ React11.createElement(Minimize2, { width: 14, height: 14 });
+var ChevronDownIcon3 = () => /* @__PURE__ */ React11.createElement(ChevronDown, { width: 12, height: 12, strokeWidth: 2.5 });
+var CheckIcon3 = () => /* @__PURE__ */ React11.createElement(Check, { width: 14, height: 14, strokeWidth: 2.5 });
 var DEFAULT_BACKGROUND_PRESETS = ["transparent", "#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"];
 var DEFAULT_TEXT_PRESETS = ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"];
+var BACKGROUND_COLOR_NAMES = {
+  transparent: "None",
+  "#ffffc8": "Yellow",
+  "#ffcdd2": "Red",
+  "#c8e6c9": "Green",
+  "#bbdefb": "Blue",
+  "#e1bee7": "Purple"
+};
 var FreetextHighlight = ({
   highlight,
   onChange,
@@ -3089,29 +3220,58 @@ var FreetextHighlight = ({
   compactSize = 32,
   compactIcon
 }) => {
-  const [isEditing, setIsEditing] = useState8(false);
-  const [isExpanded, setIsExpanded] = useState8(!compact);
-  const [isStylePanelOpen, setIsStylePanelOpen] = useState8(false);
-  const [text, setText] = useState8(highlight.content?.text || "");
-  const textareaRef = useRef10(null);
-  const stylePanelRef = useRef10(null);
-  useEffect8(() => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
+  useClearTipWhileSelected(isSelected);
+  const [isExpanded, setIsExpanded] = useState(!compact);
+  const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
+  const [isColorMenuOpen, setIsColorMenuOpen] = useState(false);
+  const [text, setText] = useState(highlight.content?.text || "");
+  const textareaRef = useRef(null);
+  const stylePanelRef = useRef(null);
+  const colorMenuRef = useRef(null);
+  const rootRef = useRef(null);
+  useEffect(() => {
+    if (!isSelected) return;
+    const handlePointerDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setIsSelected(false);
+        setIsStylePanelOpen(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape" && !isEditing) {
+        setIsSelected(false);
+        setIsStylePanelOpen(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isSelected, isEditing]);
+  useEffect(() => {
     setText(highlight.content?.text || "");
   }, [highlight.content?.text]);
-  useEffect8(() => {
+  useEffect(() => {
     setIsExpanded(!compact);
     setIsStylePanelOpen(false);
+    setIsColorMenuOpen(false);
     if (!compact) {
       setIsEditing(false);
     }
   }, [compact]);
-  useEffect8(() => {
+  useEffect(() => {
     if (isEditing && textareaRef.current) {
       textareaRef.current.focus();
       textareaRef.current.select();
     }
   }, [isEditing]);
-  useEffect8(() => {
+  useEffect(() => {
     if (!isStylePanelOpen) return;
     const handleClickOutside = (e) => {
       if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
@@ -3126,16 +3286,38 @@ var FreetextHighlight = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isStylePanelOpen]);
+  useEffect(() => {
+    if (!isColorMenuOpen) return;
+    const handleClickOutside = (e) => {
+      if (colorMenuRef.current && !colorMenuRef.current.contains(e.target)) {
+        setIsColorMenuOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isColorMenuOpen]);
   const highlightClass = isScrolledTo ? "FreetextHighlight--scrolledTo" : "";
   const editingClass = isEditing ? "FreetextHighlight--editing" : "";
+  const selectedClass = isSelected ? "FreetextHighlight--selected" : "";
   const compactClass = compact ? "FreetextHighlight--compact" : "";
-  const isCompactCollapsed = compact && !isExpanded && !isEditing && !isStylePanelOpen;
+  const isCompactCollapsed = compact && !isExpanded && !isEditing && !isStylePanelOpen && !isColorMenuOpen;
   const collapsedClass = isCompactCollapsed ? "FreetextHighlight--collapsed" : "";
+  const flipToolbar = highlight.position.boundingRect.top < 40;
   const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}${isCompactCollapsed ? "collapsed" : "expanded"}`;
-  const handleTextClick = (e) => {
+  const handleNoteClick = (e) => {
     e.stopPropagation();
+    if (!isEditing) setIsSelected(true);
+  };
+  const enterEditMode = (e) => {
+    e?.stopPropagation();
     if (!isEditing) {
       setIsExpanded(true);
+      setIsSelected(true);
       setIsEditing(true);
       onEditStart?.();
     }
@@ -3170,11 +3352,12 @@ var FreetextHighlight = ({
   return /* @__PURE__ */ React11.createElement(
     "div",
     {
-      className: `FreetextHighlight ${highlightClass} ${editingClass} ${compactClass} ${collapsedClass}`,
+      ref: rootRef,
+      className: `FreetextHighlight ${highlightClass} ${editingClass} ${selectedClass} ${compactClass} ${collapsedClass}`,
       onContextMenu
     },
     /* @__PURE__ */ React11.createElement(
-      Rnd2,
+      Rnd,
       {
         className: "FreetextHighlight__rnd",
         onDragStop: (_, data) => {
@@ -3187,9 +3370,11 @@ var FreetextHighlight = ({
         },
         onDragStart: () => {
           if (!isEditing) {
+            setIsSelected(true);
             onEditStart?.();
           }
         },
+        disableDragging: isEditing,
         default: {
           x: highlight.position.boundingRect.left,
           y: highlight.position.boundingRect.top,
@@ -3225,168 +3410,236 @@ var FreetextHighlight = ({
             onEditStart?.();
           }
         },
-        cancel: ".FreetextHighlight__text, .FreetextHighlight__input, .FreetextHighlight__edit-button, .FreetextHighlight__style-button, .FreetextHighlight__style-panel, .FreetextHighlight__delete-button, .FreetextHighlight__collapse-button, .FreetextHighlight__compact-button"
+        cancel: ".FreetextHighlight__input, .FreetextHighlight__toolbar, .FreetextHighlight__style-panel, .FreetextHighlight__color-menu, .FreetextHighlight__compact-button"
       },
-      /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__container", style: containerStyle }, isCompactCollapsed ? /* @__PURE__ */ React11.createElement(
-        "button",
-        {
-          className: "FreetextHighlight__compact-button",
-          type: "button",
-          title: text || "Open note",
-          onClick: (event) => {
-            event.stopPropagation();
-            setIsExpanded(true);
-          }
-        },
-        compactIcon || /* @__PURE__ */ React11.createElement(DefaultCompactIcon, null)
-      ) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__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)
-      ), compact && /* @__PURE__ */ React11.createElement(
-        "button",
-        {
-          className: "FreetextHighlight__collapse-button",
-          onClick: (e) => {
-            e.stopPropagation();
-            setIsExpanded(false);
-            setIsStylePanelOpen(false);
-          },
-          title: "Collapse note",
-          type: "button"
-        },
-        /* @__PURE__ */ React11.createElement(DefaultCollapseIcon, 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(
+      /* @__PURE__ */ React11.createElement(
         "div",
         {
-          className: "FreetextHighlight__style-panel",
-          ref: stylePanelRef,
-          onClick: (e) => e.stopPropagation()
+          className: "FreetextHighlight__container",
+          style: containerStyle,
+          onClick: handleNoteClick,
+          onDoubleClick: enterEditMode
         },
-        /* @__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(
+        isCompactCollapsed ? /* @__PURE__ */ React11.createElement(
           "button",
           {
-            key: c,
+            className: "FreetextHighlight__compact-button",
             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 });
+            title: text || "Open note",
+            onClick: (event) => {
+              event.stopPropagation();
+              setIsExpanded(true);
             }
           },
-          /* @__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",
+          compactIcon || /* @__PURE__ */ React11.createElement(DefaultCompactIcon, null)
+        ) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+          "div",
           {
-            value: fontFamily,
-            onChange: (e) => {
-              onStyleChange?.({ fontFamily: e.target.value });
-            }
+            className: `FreetextHighlight__toolbar ${flipToolbar ? "FreetextHighlight__toolbar--below" : ""}`
           },
-          /* @__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"))))
+          /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              type: "button",
+              className: "FreetextHighlight__color-trigger",
+              "aria-label": "Background color",
+              "aria-expanded": isColorMenuOpen,
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsStylePanelOpen(false);
+                setIsColorMenuOpen((v) => !v);
+              },
+              title: "Background color"
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "FreetextHighlight__color-trigger-dot",
+                style: {
+                  backgroundColor: backgroundColor === "transparent" ? void 0 : backgroundColor
+                }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement(ChevronDownIcon3, null)
+          ),
+          /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__toolbar-divider" }),
+          /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              className: "FreetextHighlight__edit-button",
+              onClick: enterEditMode,
+              title: "Edit text (or double-click the note)",
+              type: "button"
+            },
+            editIcon || /* @__PURE__ */ React11.createElement(DefaultEditIcon, null)
+          ),
+          /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              className: "FreetextHighlight__style-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsColorMenuOpen(false);
+                setIsStylePanelOpen(!isStylePanelOpen);
+              },
+              title: "Change style",
+              type: "button"
+            },
+            styleIcon || /* @__PURE__ */ React11.createElement(DefaultStyleIcon2, null)
+          ),
+          compact && /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              className: "FreetextHighlight__collapse-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsExpanded(false);
+                setIsStylePanelOpen(false);
+                setIsColorMenuOpen(false);
+              },
+              title: "Collapse note",
+              type: "button"
+            },
+            /* @__PURE__ */ React11.createElement(DefaultCollapseIcon, 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)
+          )
+        ), isColorMenuOpen && /* @__PURE__ */ React11.createElement(
+          "div",
+          {
+            className: `FreetextHighlight__color-menu ${flipToolbar ? "FreetextHighlight__color-menu--below-toolbar" : ""}`,
+            ref: colorMenuRef,
+            onClick: (e) => e.stopPropagation()
+          },
+          backgroundColorPresets.map((c) => /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              key: c,
+              type: "button",
+              className: "FreetextHighlight__color-menu-item",
+              onClick: () => {
+                onStyleChange?.({ backgroundColor: c });
+                setIsColorMenuOpen(false);
+              }
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: `FreetextHighlight__color-menu-dot ${c === "transparent" ? "FreetextHighlight__color-menu-dot--transparent" : ""}`,
+                style: c !== "transparent" ? { backgroundColor: c } : void 0
+              }
+            ),
+            /* @__PURE__ */ React11.createElement("span", { className: "FreetextHighlight__color-menu-label" }, BACKGROUND_COLOR_NAMES[c] || c),
+            backgroundColor === c && /* @__PURE__ */ React11.createElement("span", { className: "FreetextHighlight__color-menu-check" }, /* @__PURE__ */ React11.createElement(CheckIcon3, null))
+          ))
+        ), isStylePanelOpen && /* @__PURE__ */ React11.createElement(
+          "div",
+          {
+            className: `FreetextHighlight__style-panel ${flipToolbar ? "FreetextHighlight__style-panel--below-toolbar" : ""}`,
+            ref: stylePanelRef,
+            onClick: (e) => e.stopPropagation()
+          },
+          /* @__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 DefaultDeleteIcon4 = () => /* @__PURE__ */ React11.createElement(Trash2, { width: 14, height: 14 });
+var rotateImageDataUrl = (dataUrl, width, height, clockwise) => new Promise((resolve, reject) => {
+  const img = new Image();
+  img.onload = () => {
+    const canvas = document.createElement("canvas");
+    canvas.width = height;
+    canvas.height = width;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      reject(new Error("Canvas 2D context unavailable"));
+      return;
+    }
+    ctx.translate(height / 2, width / 2);
+    ctx.rotate((clockwise ? 90 : -90) * Math.PI / 180);
+    ctx.drawImage(img, -width / 2, -height / 2, width, height);
+    resolve(canvas.toDataURL("image/png"));
+  };
+  img.onerror = () => reject(new Error("Failed to load image for rotation"));
+  img.src = dataUrl;
+});
 var ImageHighlight = ({
   highlight,
   onChange,
@@ -3398,19 +3651,60 @@ var ImageHighlight = ({
   style,
   dragIcon,
   onDelete,
-  deleteIcon
+  deleteIcon,
+  onImageChange
 }) => {
+  const [isSelected, setIsSelected] = useState(false);
+  useClearTipWhileSelected(isSelected);
+  const rootRef = useRef(null);
   const highlightClass = isScrolledTo ? "ImageHighlight--scrolledTo" : "";
+  const selectedClass = isSelected ? "ImageHighlight--selected" : "";
+  useEffect(() => {
+    if (!isSelected) return;
+    const handlePointerDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setIsSelected(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setIsSelected(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isSelected]);
   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(
+  const flipToolbar = highlight.position.boundingRect.top < 40;
+  const handleRotate = async (clockwise) => {
+    if (!imageUrl) return;
+    const { width, height, left, top, pageNumber } = highlight.position.boundingRect;
+    const newImage = await rotateImageDataUrl(imageUrl, width, height, clockwise);
+    onImageChange?.(newImage);
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    onChange?.({
+      left: centerX - height / 2,
+      top: centerY - width / 2,
+      width: height,
+      height: width,
+      pageNumber
+    });
+  };
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
-      className: `ImageHighlight ${highlightClass}`,
-      onContextMenu
+      className: `ImageHighlight ${highlightClass} ${selectedClass}`,
+      onContextMenu,
+      ref: rootRef
     },
-    /* @__PURE__ */ React12.createElement(
-      Rnd3,
+    /* @__PURE__ */ React11.createElement(
+      Rnd,
       {
         className: "ImageHighlight__rnd",
         onDragStop: (_, data) => {
@@ -3422,7 +3716,10 @@ var ImageHighlight = ({
           onChange?.(boundingRect);
           onEditEnd?.();
         },
-        onDragStart: onEditStart,
+        onDragStart: () => {
+          setIsSelected(true);
+          onEditStart?.();
+        },
         onResizeStop: (_e, _direction, ref, _delta, position) => {
           const boundingRect = {
             top: position.y,
@@ -3446,26 +3743,58 @@ var ImageHighlight = ({
         key,
         bounds,
         lockAspectRatio: true,
-        dragHandleClassName: "ImageHighlight__drag-handle",
+        cancel: ".ImageHighlight__toolbar",
         onClick: (event) => {
           event.stopPropagation();
           event.preventDefault();
+          setIsSelected(true);
         },
         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",
+      /* @__PURE__ */ React11.createElement("div", { className: "ImageHighlight__container" }, (onDelete || onImageChange) && /* @__PURE__ */ React11.createElement(
+        "div",
         {
-          className: "ImageHighlight__delete-button",
-          onClick: (e) => {
-            e.stopPropagation();
-            onDelete();
-          },
-          title: "Delete",
-          type: "button"
+          className: `ImageHighlight__toolbar ${flipToolbar ? "ImageHighlight__toolbar--below" : ""}`
         },
-        deleteIcon || /* @__PURE__ */ React12.createElement(DefaultDeleteIcon4, null)
-      )), /* @__PURE__ */ React12.createElement("div", { className: "ImageHighlight__content" }, imageUrl ? /* @__PURE__ */ React12.createElement(
+        onImageChange && imageUrl && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+          "button",
+          {
+            className: "ImageHighlight__rotate-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              handleRotate(false);
+            },
+            title: "Rotate left",
+            type: "button"
+          },
+          /* @__PURE__ */ React11.createElement(RotateCcw, { width: 14, height: 14 })
+        ), /* @__PURE__ */ React11.createElement(
+          "button",
+          {
+            className: "ImageHighlight__rotate-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              handleRotate(true);
+            },
+            title: "Rotate right",
+            type: "button"
+          },
+          /* @__PURE__ */ React11.createElement(RotateCw, { width: 14, height: 14 })
+        ), /* @__PURE__ */ React11.createElement("div", { className: "ImageHighlight__toolbar-divider" })),
+        onDelete && /* @__PURE__ */ React11.createElement(
+          "button",
+          {
+            className: "ImageHighlight__delete-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            title: "Delete",
+            type: "button"
+          },
+          deleteIcon || /* @__PURE__ */ React11.createElement(DefaultDeleteIcon4, null)
+        )
+      ), /* @__PURE__ */ React11.createElement("div", { className: "ImageHighlight__content" }, imageUrl ? /* @__PURE__ */ React11.createElement(
         "img",
         {
           src: imageUrl,
@@ -3473,13 +3802,10 @@ var ImageHighlight = ({
           className: "ImageHighlight__image",
           draggable: false
         }
-      ) : /* @__PURE__ */ React12.createElement("div", { className: "ImageHighlight__placeholder" }, "No image")))
+      ) : /* @__PURE__ */ React11.createElement("div", { className: "ImageHighlight__placeholder" }, "No image")))
     )
   );
 };
-
-// src/components/SignaturePad.tsx
-import React13, { useRef as useRef11, useEffect as useEffect9, useCallback as useCallback3 } from "react";
 var SignaturePad = ({
   isOpen,
   onComplete,
@@ -3487,10 +3813,10 @@ var SignaturePad = ({
   width = 400,
   height = 200
 }) => {
-  const canvasRef = useRef11(null);
-  const isDrawingRef = useRef11(false);
-  const lastPosRef = useRef11({ x: 0, y: 0 });
-  useEffect9(() => {
+  const canvasRef = useRef(null);
+  const isDrawingRef = useRef(false);
+  const lastPosRef = useRef({ x: 0, y: 0 });
+  useEffect(() => {
     if (!isOpen || !canvasRef.current) return;
     const canvas = canvasRef.current;
     const ctx = canvas.getContext("2d");
@@ -3501,7 +3827,7 @@ var SignaturePad = ({
     ctx.lineJoin = "round";
     ctx.clearRect(0, 0, width, height);
   }, [isOpen, width, height]);
-  const getPosition = useCallback3(
+  const getPosition = useCallback(
     (e) => {
       const canvas = canvasRef.current;
       if (!canvas) return { x: 0, y: 0 };
@@ -3522,7 +3848,7 @@ var SignaturePad = ({
     },
     []
   );
-  const startDrawing = useCallback3(
+  const startDrawing = useCallback(
     (e) => {
       e.preventDefault();
       isDrawingRef.current = true;
@@ -3530,7 +3856,7 @@ var SignaturePad = ({
     },
     [getPosition]
   );
-  const draw = useCallback3(
+  const draw = useCallback(
     (e) => {
       if (!isDrawingRef.current) return;
       e.preventDefault();
@@ -3546,10 +3872,10 @@ var SignaturePad = ({
     },
     [getPosition]
   );
-  const stopDrawing = useCallback3(() => {
+  const stopDrawing = useCallback(() => {
     isDrawingRef.current = false;
   }, []);
-  useEffect9(() => {
+  useEffect(() => {
     if (!isOpen) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -3594,54 +3920,96 @@ var SignaturePad = ({
       onClose();
     }
   };
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isOpen, 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",
+  return /* @__PURE__ */ React11.createElement("div", { className: "SignaturePad__overlay", onClick: handleOverlayClick }, /* @__PURE__ */ React11.createElement(
+    "div",
     {
-      type: "button",
-      className: "SignaturePad__button SignaturePad__button--done",
-      onClick: handleDone
+      className: "SignaturePad__modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "signaturepad-title"
     },
-    "Done"
-  ))));
+    /* @__PURE__ */ React11.createElement("div", { className: "SignaturePad__header" }, /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("h3", { id: "signaturepad-title", className: "SignaturePad__title" }, "Add your signature"), /* @__PURE__ */ React11.createElement("p", { className: "SignaturePad__subtitle" }, "Draw with your mouse or finger")), /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        type: "button",
+        className: "SignaturePad__close",
+        onClick: onClose,
+        "aria-label": "Close"
+      },
+      /* @__PURE__ */ React11.createElement(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          "aria-hidden": "true"
+        },
+        /* @__PURE__ */ React11.createElement("path", { d: "M18 6 6 18M6 6l12 12" })
+      )
+    )),
+    /* @__PURE__ */ React11.createElement("div", { className: "SignaturePad__canvas-wrap" }, /* @__PURE__ */ React11.createElement(
+      "canvas",
+      {
+        ref: canvasRef,
+        className: "SignaturePad__canvas",
+        width,
+        height
+      }
+    ), /* @__PURE__ */ React11.createElement("div", { className: "SignaturePad__baseline", "aria-hidden": "true" }, /* @__PURE__ */ React11.createElement("span", { className: "SignaturePad__baseline-x" }, "\u2715"))),
+    /* @__PURE__ */ React11.createElement("div", { className: "SignaturePad__buttons" }, /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        type: "button",
+        className: "SignaturePad__button SignaturePad__button--clear",
+        onClick: handleClear
+      },
+      "Clear"
+    ), /* @__PURE__ */ React11.createElement("div", { className: "SignaturePad__buttons-right" }, /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        type: "button",
+        className: "SignaturePad__button SignaturePad__button--cancel",
+        onClick: onClose
+      },
+      "Cancel"
+    ), /* @__PURE__ */ React11.createElement(
+      "button",
+      {
+        type: "button",
+        className: "SignaturePad__button SignaturePad__button--done",
+        onClick: handleDone
+      },
+      "Add signature"
+    )))
+  ));
 };
-
-// src/components/DrawingHighlight.tsx
-import React14, { useState as useState9, useCallback as useCallback4, useEffect as useEffect10, useLayoutEffect as useLayoutEffect5, useRef as useRef12 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
-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 COLOR_NAMES3 = {
+  "#000000": "Black",
+  "#FF0000": "Red",
+  "#0000FF": "Blue",
+  "#00FF00": "Green",
+  "#FFFF00": "Yellow"
+};
+var DefaultDeleteIcon5 = () => /* @__PURE__ */ React11.createElement(Trash2, { width: 14, height: 14 });
 var renderStrokesToImage = (strokes, width, height) => {
   const canvas = document.createElement("canvas");
   canvas.width = width;
@@ -3677,18 +4045,50 @@ var DrawingHighlight = ({
   onDelete,
   deleteIcon
 }) => {
+  const [showStyleControls, setShowStyleControls] = useState(false);
+  const [isColorMenuOpen, setIsColorMenuOpen] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
+  useClearTipWhileSelected(isSelected);
+  const [configLayer, setConfigLayer] = useState(null);
+  const styleControlsRef = useRef(null);
+  const colorMenuRef = useRef(null);
+  const containerRef = useRef(null);
+  const toolbarWrapperRef = useRef(null);
   const highlightClass = isScrolledTo ? "DrawingHighlight--scrolledTo" : "";
-  const [showStyleControls, setShowStyleControls] = useState9(false);
-  const [isHovered, setIsHovered] = useState9(false);
-  const [configLayer, setConfigLayer] = useState9(null);
-  const styleControlsRef = useRef12(null);
-  const containerRef = useRef12(null);
-  useLayoutEffect5(() => {
+  const selectedClass = isSelected ? "DrawingHighlight--selected" : "";
+  useEffect(() => {
+    if (!isSelected) return;
+    const handlePointerDown = (e) => {
+      const target = e.target;
+      const insideRoot = containerRef.current?.contains(target);
+      const insideToolbar = toolbarWrapperRef.current?.contains(target);
+      if (!insideRoot && !insideToolbar) {
+        setIsSelected(false);
+        setShowStyleControls(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setIsSelected(false);
+        setShowStyleControls(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isSelected]);
+  useLayoutEffect(() => {
     if (containerRef.current) {
-      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+      const layer = findOrCreateHighlightConfigLayer(containerRef.current);
+      setConfigLayer((prev) => prev === layer ? prev : layer);
     }
-  }, []);
-  useEffect10(() => {
+  });
+  useEffect(() => {
     if (!showStyleControls) return;
     const handleClickOutside = (e) => {
       if (styleControlsRef.current && !styleControlsRef.current.contains(e.target)) {
@@ -3703,10 +4103,25 @@ var DrawingHighlight = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [showStyleControls]);
+  useEffect(() => {
+    if (!isColorMenuOpen) return;
+    const handleClickOutside = (e) => {
+      if (colorMenuRef.current && !colorMenuRef.current.contains(e.target)) {
+        setIsColorMenuOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isColorMenuOpen]);
   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) => {
+  const handleColorChange = useCallback((newColor) => {
     if (!strokes || !onStyleChange) return;
     console.log("DrawingHighlight: Changing color to", newColor);
     const newStrokes = strokes.map((stroke) => ({
@@ -3720,7 +4135,7 @@ var DrawingHighlight = ({
     );
     onStyleChange(newImage, newStrokes);
   }, [strokes, onStyleChange, highlight.position.boundingRect.width, highlight.position.boundingRect.height]);
-  const handleWidthChange = useCallback4((newWidth) => {
+  const handleWidthChange = useCallback((newWidth) => {
     if (!strokes || !onStyleChange) return;
     console.log("DrawingHighlight: Changing width to", newWidth);
     const newStrokes = strokes.map((stroke) => ({
@@ -3736,84 +4151,169 @@ var DrawingHighlight = ({
   }, [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(
+  const handleRotate = useCallback((clockwise) => {
+    if (!strokes || !onStyleChange) return;
+    const { width, height, left, top, pageNumber } = highlight.position.boundingRect;
+    const newStrokes = strokes.map((stroke) => ({
+      ...stroke,
+      points: stroke.points.map(
+        (p) => clockwise ? { x: height - p.y, y: p.x } : { x: p.y, y: width - p.x }
+      )
+    }));
+    const newImage = renderStrokesToImage(newStrokes, height, width);
+    onStyleChange(newImage, newStrokes);
+    const centerX = left + width / 2;
+    const centerY = top + height / 2;
+    onChange?.({
+      left: centerX - height / 2,
+      top: centerY - width / 2,
+      width: height,
+      height: width,
+      pageNumber
+    });
+  }, [strokes, onStyleChange, onChange, highlight.position.boundingRect]);
+  const flipToolbar = highlight.position.boundingRect.top < 40;
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
-      className: `DrawingHighlight ${highlightClass}`,
+      className: `DrawingHighlight ${highlightClass} ${selectedClass}`,
       onContextMenu,
       ref: containerRef
     },
-    configLayer && createPortal3(
-      /* @__PURE__ */ React14.createElement(
+    configLayer && createPortal(
+      /* @__PURE__ */ React11.createElement(
         "div",
         {
-          className: `DrawingHighlight__toolbar DrawingHighlight__toolbar--floating ${isHovered || isScrolledTo || showStyleControls ? "DrawingHighlight__toolbar--visible" : ""}`,
+          className: "DrawingHighlight__toolbar-wrapper",
+          ref: toolbarWrapperRef,
           style: {
-            left: highlight.position.boundingRect.left + 4,
-            top: highlight.position.boundingRect.top + 4
-          },
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false)
+            position: "absolute",
+            left: highlight.position.boundingRect.left,
+            top: highlight.position.boundingRect.top
+          }
         },
-        /* @__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",
+        /* @__PURE__ */ React11.createElement(
+          "div",
           {
-            type: "button",
-            className: "DrawingHighlight__style-button",
-            title: "Edit style",
-            onClick: (e) => {
-              e.stopPropagation();
-              setShowStyleControls(!showStyleControls);
-            }
+            className: `DrawingHighlight__toolbar DrawingHighlight__toolbar--floating ${flipToolbar ? "DrawingHighlight__toolbar--below" : ""} ${isSelected || isScrolledTo || showStyleControls ? "DrawingHighlight__toolbar--visible" : ""}`
           },
-          /* @__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();
+          strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              type: "button",
+              className: "DrawingHighlight__color-trigger",
+              "aria-label": "Stroke color",
+              "aria-expanded": isColorMenuOpen,
+              onClick: (e) => {
+                e.stopPropagation();
+                setShowStyleControls(false);
+                setIsColorMenuOpen((v) => !v);
+              },
+              title: "Stroke color"
             },
-            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);
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "DrawingHighlight__color-trigger-dot",
+                style: { backgroundColor: currentColor }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement(ChevronDown, { width: 12, height: 12, strokeWidth: 2.5 })
+          ), /* @__PURE__ */ React11.createElement("div", { className: "DrawingHighlight__toolbar-divider" })),
+          strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              type: "button",
+              className: "DrawingHighlight__style-button",
+              title: "Stroke width",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsColorMenuOpen(false);
+                setShowStyleControls(!showStyleControls);
+              }
             },
-            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);
+            /* @__PURE__ */ React11.createElement(Pencil, { width: 14, height: 14 })
+          ),
+          strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              type: "button",
+              className: "DrawingHighlight__rotate-button",
+              title: "Rotate left",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRotate(false);
+              }
             },
-            title: w.label
-          },
-          w.label
-        ))))
+            /* @__PURE__ */ React11.createElement(RotateCcw, { width: 14, height: 14 })
+          ), /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              type: "button",
+              className: "DrawingHighlight__rotate-button",
+              title: "Rotate right",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleRotate(true);
+              }
+            },
+            /* @__PURE__ */ React11.createElement(RotateCw, { width: 14, height: 14 })
+          )),
+          onDelete && /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              className: "DrawingHighlight__delete-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete();
+              },
+              title: "Delete",
+              type: "button"
+            },
+            deleteIcon || /* @__PURE__ */ React11.createElement(DefaultDeleteIcon5, null)
+          ),
+          showStyleControls && strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React11.createElement("div", { className: "DrawingHighlight__style-controls", ref: styleControlsRef }, /* @__PURE__ */ React11.createElement("div", { className: "DrawingHighlight__width-picker" }, STROKE_WIDTHS.map((w) => /* @__PURE__ */ React11.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
+          )))),
+          isColorMenuOpen && strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React11.createElement("div", { className: "DrawingHighlight__color-menu", ref: colorMenuRef }, DRAWING_COLORS.map((color) => /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              key: color,
+              type: "button",
+              className: "DrawingHighlight__color-menu-item",
+              onClick: (e) => {
+                e.stopPropagation();
+                handleColorChange(color);
+                setIsColorMenuOpen(false);
+              }
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "DrawingHighlight__color-menu-dot",
+                style: { backgroundColor: color }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement("span", { className: "DrawingHighlight__color-menu-label" }, COLOR_NAMES3[color] || color),
+            currentColor === color && /* @__PURE__ */ React11.createElement("span", { className: "DrawingHighlight__color-menu-check" }, /* @__PURE__ */ React11.createElement(Check, { width: 14, height: 14, strokeWidth: 2.5 }))
+          )))
+        )
       ),
       configLayer
     ),
-    /* @__PURE__ */ React14.createElement(
-      Rnd4,
+    /* @__PURE__ */ React11.createElement(
+      Rnd,
       {
         className: "DrawingHighlight__rnd",
         onDragStop: (_, data) => {
@@ -3825,7 +4325,10 @@ var DrawingHighlight = ({
           onChange?.(boundingRect);
           onEditEnd?.();
         },
-        onDragStart: onEditStart,
+        onDragStart: () => {
+          setIsSelected(true);
+          onEditStart?.();
+        },
         onResizeStop: (_e, _direction, ref, _delta, position) => {
           const boundingRect = {
             top: position.y,
@@ -3852,17 +4355,16 @@ var DrawingHighlight = ({
         onClick: (event) => {
           event.stopPropagation();
           event.preventDefault();
+          setIsSelected(true);
         },
         style
       },
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React11.createElement(
         "div",
         {
-          className: "DrawingHighlight__container",
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false)
+          className: "DrawingHighlight__container"
         },
-        /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__content" }, imageUrl ? /* @__PURE__ */ React14.createElement(
+        /* @__PURE__ */ React11.createElement("div", { className: "DrawingHighlight__content" }, imageUrl ? /* @__PURE__ */ React11.createElement(
           "img",
           {
             src: imageUrl,
@@ -3870,23 +4372,13 @@ var DrawingHighlight = ({
             className: "DrawingHighlight__image",
             draggable: false
           }
-        ) : /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__placeholder" }, "No drawing"))
+        ) : /* @__PURE__ */ React11.createElement("div", { className: "DrawingHighlight__placeholder" }, "No drawing"))
       )
     )
   );
 };
-
-// src/components/ShapeHighlight.tsx
-import React15, {
-  useState as useState10,
-  useRef as useRef13,
-  useEffect as useEffect11,
-  useLayoutEffect as useLayoutEffect6
-} from "react";
-import { createPortal as createPortal4 } from "react-dom";
-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 DefaultStyleIcon3 = () => /* @__PURE__ */ React11.createElement(Palette, { width: 14, height: 14 });
+var DefaultDeleteIcon6 = () => /* @__PURE__ */ React11.createElement(Trash2, { width: 14, height: 14 });
 var DEFAULT_COLOR_PRESETS3 = [
   "#000000",
   // Black
@@ -3899,6 +4391,13 @@ var DEFAULT_COLOR_PRESETS3 = [
   "#FF6600"
   // Orange
 ];
+var COLOR_NAMES4 = {
+  "#000000": "Black",
+  "#FF0000": "Red",
+  "#0000FF": "Blue",
+  "#00AA00": "Green",
+  "#FF6600": "Orange"
+};
 var STROKE_WIDTHS2 = [
   { label: "Thin", value: 1 },
   { label: "Medium", value: 2 },
@@ -3924,17 +4423,48 @@ var ShapeHighlight = ({
   startPoint,
   endPoint
 }) => {
-  const [isStylePanelOpen, setIsStylePanelOpen] = useState10(false);
-  const [isHovered, setIsHovered] = useState10(false);
-  const [configLayer, setConfigLayer] = useState10(null);
-  const stylePanelRef = useRef13(null);
-  const containerRef = useRef13(null);
-  useLayoutEffect6(() => {
+  const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
+  const [isColorMenuOpen, setIsColorMenuOpen] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
+  useClearTipWhileSelected(isSelected);
+  const [configLayer, setConfigLayer] = useState(null);
+  const stylePanelRef = useRef(null);
+  const colorMenuRef = useRef(null);
+  const containerRef = useRef(null);
+  const toolbarWrapperRef = useRef(null);
+  useEffect(() => {
+    if (!isSelected) return;
+    const handlePointerDown = (e) => {
+      const target = e.target;
+      const insideRoot = containerRef.current?.contains(target);
+      const insideToolbar = toolbarWrapperRef.current?.contains(target);
+      if (!insideRoot && !insideToolbar) {
+        setIsSelected(false);
+        setIsStylePanelOpen(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        setIsSelected(false);
+        setIsStylePanelOpen(false);
+        setIsColorMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isSelected]);
+  useLayoutEffect(() => {
     if (containerRef.current) {
-      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+      const layer = findOrCreateHighlightConfigLayer(containerRef.current);
+      setConfigLayer((prev) => prev === layer ? prev : layer);
     }
-  }, []);
-  useEffect11(() => {
+  });
+  useEffect(() => {
     if (!isStylePanelOpen) return;
     const handleClickOutside = (e) => {
       if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
@@ -3949,13 +4479,29 @@ var ShapeHighlight = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isStylePanelOpen]);
+  useEffect(() => {
+    if (!isColorMenuOpen) return;
+    const handleClickOutside = (e) => {
+      if (colorMenuRef.current && !colorMenuRef.current.contains(e.target)) {
+        setIsColorMenuOpen(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isColorMenuOpen]);
   const highlightClass = isScrolledTo ? "ShapeHighlight--scrolledTo" : "";
+  const selectedClass = isSelected ? "ShapeHighlight--selected" : "";
   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(
+        return /* @__PURE__ */ React11.createElement(
           "svg",
           {
             className: "ShapeHighlight__svg",
@@ -3963,7 +4509,7 @@ var ShapeHighlight = ({
             height,
             viewBox: `0 0 ${width} ${height}`
           },
-          /* @__PURE__ */ React15.createElement(
+          /* @__PURE__ */ React11.createElement(
             "rect",
             {
               x: strokeWidth / 2,
@@ -3977,7 +4523,7 @@ var ShapeHighlight = ({
           )
         );
       case "circle":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React11.createElement(
           "svg",
           {
             className: "ShapeHighlight__svg",
@@ -3985,7 +4531,7 @@ var ShapeHighlight = ({
             height,
             viewBox: `0 0 ${width} ${height}`
           },
-          /* @__PURE__ */ React15.createElement(
+          /* @__PURE__ */ React11.createElement(
             "ellipse",
             {
               cx: width / 2,
@@ -4003,7 +4549,7 @@ var ShapeHighlight = ({
         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(
+        return /* @__PURE__ */ React11.createElement(
           "svg",
           {
             className: "ShapeHighlight__svg",
@@ -4011,7 +4557,7 @@ var ShapeHighlight = ({
             height,
             viewBox: `0 0 ${width} ${height}`
           },
-          /* @__PURE__ */ React15.createElement("defs", null, /* @__PURE__ */ React15.createElement(
+          /* @__PURE__ */ React11.createElement("defs", null, /* @__PURE__ */ React11.createElement(
             "marker",
             {
               id: markerId,
@@ -4021,9 +4567,9 @@ var ShapeHighlight = ({
               refY: "3.5",
               orient: "auto"
             },
-            /* @__PURE__ */ React15.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor })
+            /* @__PURE__ */ React11.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor })
           )),
-          /* @__PURE__ */ React15.createElement(
+          /* @__PURE__ */ React11.createElement(
             "line",
             {
               x1,
@@ -4041,46 +4587,68 @@ var ShapeHighlight = ({
         return null;
     }
   };
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
-      className: `ShapeHighlight ${highlightClass}`,
+      className: `ShapeHighlight ${highlightClass} ${selectedClass}`,
       onContextMenu,
       ref: containerRef
     },
-    configLayer && (onStyleChange || onDelete) && createPortal4(
-      /* @__PURE__ */ React15.createElement(
+    configLayer && (onStyleChange || onDelete) && createPortal(
+      /* @__PURE__ */ React11.createElement(
         "div",
         {
           className: "ShapeHighlight__toolbar-wrapper",
+          ref: toolbarWrapperRef,
           style: {
             position: "absolute",
             left: highlight.position.boundingRect.left,
-            top: highlight.position.boundingRect.top - 28,
-            paddingBottom: 12
-          },
-          onMouseEnter: () => setIsHovered(true),
-          onMouseLeave: () => setIsHovered(false)
+            top: highlight.position.boundingRect.top
+          }
         },
-        /* @__PURE__ */ React15.createElement(
+        /* @__PURE__ */ React11.createElement(
           "div",
           {
-            className: `ShapeHighlight__toolbar ${isHovered || isScrolledTo || isStylePanelOpen ? "ShapeHighlight__toolbar--visible" : ""}`
+            className: `ShapeHighlight__toolbar ${isSelected || isScrolledTo || isStylePanelOpen || isColorMenuOpen ? "ShapeHighlight__toolbar--visible" : ""}`
           },
-          onStyleChange && /* @__PURE__ */ React15.createElement(
+          onStyleChange && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+            "button",
+            {
+              type: "button",
+              className: "ShapeHighlight__color-trigger",
+              "aria-label": "Stroke color",
+              "aria-expanded": isColorMenuOpen,
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsStylePanelOpen(false);
+                setIsColorMenuOpen((v) => !v);
+              },
+              title: "Stroke color"
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "ShapeHighlight__color-trigger-dot",
+                style: { backgroundColor: strokeColor }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement(ChevronDown, { width: 12, height: 12, strokeWidth: 2.5 })
+          ), /* @__PURE__ */ React11.createElement("div", { className: "ShapeHighlight__toolbar-divider" })),
+          onStyleChange && /* @__PURE__ */ React11.createElement(
             "button",
             {
               className: "ShapeHighlight__style-button",
               onClick: (e) => {
                 e.stopPropagation();
+                setIsColorMenuOpen(false);
                 setIsStylePanelOpen(!isStylePanelOpen);
               },
-              title: "Change style",
+              title: "Stroke width",
               type: "button"
             },
-            styleIcon || /* @__PURE__ */ React15.createElement(DefaultStyleIcon4, null)
+            styleIcon || /* @__PURE__ */ React11.createElement(DefaultStyleIcon3, null)
           ),
-          onDelete && /* @__PURE__ */ React15.createElement(
+          onDelete && /* @__PURE__ */ React11.createElement(
             "button",
             {
               className: "ShapeHighlight__delete-button",
@@ -4091,37 +4659,46 @@ var ShapeHighlight = ({
               title: "Delete",
               type: "button"
             },
-            deleteIcon || /* @__PURE__ */ React15.createElement(DefaultDeleteIcon6, null)
+            deleteIcon || /* @__PURE__ */ React11.createElement(DefaultDeleteIcon6, null)
           )
         ),
-        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React15.createElement(
+        isColorMenuOpen && onStyleChange && /* @__PURE__ */ React11.createElement(
           "div",
           {
-            className: "ShapeHighlight__style-panel",
-            ref: stylePanelRef,
+            className: "ShapeHighlight__color-menu",
+            ref: colorMenuRef,
             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(
+          colorPresets.map((c) => /* @__PURE__ */ React11.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 });
+              className: "ShapeHighlight__color-menu-item",
+              onClick: () => {
+                onStyleChange({ strokeColor: c });
+                setIsColorMenuOpen(false);
               }
-            }
-          ))),
-          /* @__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(
+            },
+            /* @__PURE__ */ React11.createElement(
+              "span",
+              {
+                className: "ShapeHighlight__color-menu-dot",
+                style: { backgroundColor: c }
+              }
+            ),
+            /* @__PURE__ */ React11.createElement("span", { className: "ShapeHighlight__color-menu-label" }, COLOR_NAMES4[c] || c),
+            strokeColor === c && /* @__PURE__ */ React11.createElement("span", { className: "ShapeHighlight__color-menu-check" }, /* @__PURE__ */ React11.createElement(Check, { width: 14, height: 14, strokeWidth: 2.5 }))
+          ))
+        ),
+        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React11.createElement(
+          "div",
+          {
+            className: "ShapeHighlight__style-panel",
+            ref: stylePanelRef,
+            onClick: (e) => e.stopPropagation()
+          },
+          /* @__PURE__ */ React11.createElement("div", { className: "ShapeHighlight__style-row" }, /* @__PURE__ */ React11.createElement("label", null, "Width"), /* @__PURE__ */ React11.createElement("div", { className: "ShapeHighlight__width-options" }, STROKE_WIDTHS2.map((w) => /* @__PURE__ */ React11.createElement(
             "button",
             {
               key: w.value,
@@ -4136,11 +4713,9 @@ var ShapeHighlight = ({
       ),
       configLayer
     ),
-    /* @__PURE__ */ React15.createElement(
-      Rnd5,
+    /* @__PURE__ */ React11.createElement(
+      Rnd,
       {
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
         className: "ShapeHighlight__rnd",
         onDragStop: (_, data) => {
           const boundingRect = {
@@ -4151,7 +4726,10 @@ var ShapeHighlight = ({
           onChange?.(boundingRect);
           onEditEnd?.();
         },
-        onDragStart: onEditStart,
+        onDragStart: () => {
+          setIsSelected(true);
+          onEditStart?.();
+        },
         onResizeStop: (_e, _direction, ref, _delta, position) => {
           const boundingRect = {
             top: position.y,
@@ -4178,23 +4756,20 @@ var ShapeHighlight = ({
         onClick: (event) => {
           event.stopPropagation();
           event.preventDefault();
+          setIsSelected(true);
         },
         style
       },
-      /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__container" }, renderShape(
+      /* @__PURE__ */ React11.createElement("div", { className: "ShapeHighlight__container" }, renderShape(
         highlight.position.boundingRect.width || 100,
         highlight.position.boundingRect.height || 100
       ))
     )
   );
 };
-
-// src/components/PdfLoader.tsx
-import React16, { useEffect as useEffect12, useRef as useRef14, useState as useState11 } from "react";
-import { GlobalWorkerOptions, getDocument as getDocument2 } from "pdfjs-dist";
 var DEFAULT_BEFORE_LOAD = (progress) => {
   const pct = progress && progress.total ? Math.min(100, Math.floor(progress.loaded / progress.total * 100)) : null;
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       style: {
@@ -4209,7 +4784,7 @@ var DEFAULT_BEFORE_LOAD = (progress) => {
         fontSize: 13
       }
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React11.createElement(
       "div",
       {
         style: {
@@ -4222,11 +4797,11 @@ var DEFAULT_BEFORE_LOAD = (progress) => {
         }
       }
     ),
-    /* @__PURE__ */ React16.createElement("div", null, pct !== null ? `Loading ${pct}%` : "Loading\u2026"),
-    /* @__PURE__ */ React16.createElement("style", null, "@keyframes pdfloader-spin{to{transform:rotate(360deg)}}")
+    /* @__PURE__ */ React11.createElement("div", null, pct !== null ? `Loading ${pct}%` : "Loading\u2026"),
+    /* @__PURE__ */ React11.createElement("style", null, "@keyframes pdfloader-spin{to{transform:rotate(360deg)}}")
   );
 };
-var DEFAULT_ERROR_MESSAGE = (error) => /* @__PURE__ */ React16.createElement("div", { style: { color: "black" } }, error.message);
+var DEFAULT_ERROR_MESSAGE = (error) => /* @__PURE__ */ React11.createElement("div", { style: { color: "black" } }, error.message);
 var DEFAULT_ON_ERROR = (error) => {
   throw new Error(`Error loading PDF document: ${error.message}!`);
 };
@@ -4267,13 +4842,17 @@ var stripUndefined = (obj) => {
     if (v !== void 0) out[k] = v;
   return out;
 };
+var SECURE_DEFAULTS = {
+  enableScripting: false,
+  isEvalSupported: false
+};
 var buildSource = (document2, perf) => {
-  const cleaned = stripUndefined(perf);
+  const cleaned = { ...SECURE_DEFAULTS, ...stripUndefined(perf) };
   if (typeof document2 === "string" || document2 instanceof URL) {
     return { url: document2, ...cleaned };
   }
   if (ArrayBuffer.isView(document2)) {
-    return document2;
+    return { ...SECURE_DEFAULTS, data: document2 };
   }
   return { ...cleaned, ...document2 };
 };
@@ -4291,13 +4870,13 @@ var PdfLoader = ({
   httpHeaders,
   enableCache = true
 }) => {
-  const [pdfDocument, setPdfDocument] = useState11(null);
-  const [error, setError] = useState11(null);
-  const [loadingProgress, setLoadingProgress] = useState11(null);
-  const onErrorRef = useRef14(onError);
+  const [pdfDocument, setPdfDocument] = useState(null);
+  const [error, setError] = useState(null);
+  const [loadingProgress, setLoadingProgress] = useState(null);
+  const onErrorRef = useRef(onError);
   onErrorRef.current = onError;
   const httpHeadersKey = httpHeaders ? JSON.stringify(httpHeaders) : "";
-  useEffect12(() => {
+  useEffect(() => {
     GlobalWorkerOptions.workerSrc = workerSrc;
     let cancelled = false;
     setPdfDocument(null);
@@ -4315,7 +4894,7 @@ var PdfLoader = ({
       console.log("[PdfLoader] loading", key ?? "(bytes)", {
         disableAutoFetch
       });
-      const task = getDocument2(
+      const task = getDocument$1(
         buildSource(document2, {
           disableAutoFetch,
           disableStream,
@@ -4605,7 +5184,6 @@ var getTextItemsBoundingRect = (textItems) => {
   return rects.length > 0 ? get_bounding_rect_default(rects) : void 0;
 };
 var getOrderedTextItems = (textItems, readingOrder) => {
-  if (readingOrder === "document") return [...textItems];
   const averageHeight = getAverageItemHeight(textItems);
   return [...textItems].sort((a, b) => {
     const topDelta = a.rect.top - b.rect.top;
@@ -4617,7 +5195,7 @@ var getOrderedTextItems = (textItems, readingOrder) => {
 };
 var groupTextItemsIntoLines = (textItems) => {
   const averageHeight = getAverageItemHeight(textItems);
-  const sortedItems = getOrderedTextItems(textItems, "position");
+  const sortedItems = getOrderedTextItems(textItems);
   const lines = [];
   sortedItems.forEach((item) => {
     const currentLine = lines[lines.length - 1];
@@ -4900,10 +5478,17 @@ var classifyTextUnit = (rawText, textItemIndexes, page) => {
   if (isLikelyFootnoteOrReference(text) || isBottomOfPage && /^\d+\s/.test(text)) {
     return text.includes("://") || /^\d+\s*https?:\/\//i.test(text) ? "footnote" : "reference";
   }
+  if (/^(figure|fig\.?|table|chart|diagram|listing|algorithm)\s*\d/i.test(text)) {
+    return "caption";
+  }
   if (isLikelySectionHeading(text)) return "heading";
   if (isTopOfFirstPage && isLargeText && isCentered) return "title";
   if (isTopOfFirstPage && isLikelyAuthor(text)) return "author";
   if (isTopOfFirstPage && isLikelyAffiliation(text)) return "affiliation";
+  const wordCount = text.split(/\s+/).filter(Boolean).length;
+  if (wordCount <= 6 && text.length <= 60 && !/[.!?…:]\s*$/.test(text)) {
+    return "figureLabel";
+  }
   return "paragraph";
 };
 var extractTextUnitsFromPages = (pages, options = {}) => {
@@ -4981,7 +5566,30 @@ var extractTextUnits = async (pdfDocument, options = {}) => {
   });
   return extractTextUnitsFromPages(pages, resolvedOptions);
 };
-var extractPageTextItems = async (pdfDocument, options = {}) => {
+var pageTextItemsCache = /* @__PURE__ */ new WeakMap();
+var pageTextItemsCacheKey = (options) => {
+  const pages = options.pages === void 0 || options.pages === "all" ? "all" : options.pages.join(",");
+  return `${pages}|${options.columnDetection ?? DEFAULT_OPTIONS.columnDetection}`;
+};
+var extractPageTextItems = (pdfDocument, options = {}) => {
+  let byOptions = pageTextItemsCache.get(pdfDocument);
+  if (!byOptions) {
+    byOptions = /* @__PURE__ */ new Map();
+    pageTextItemsCache.set(pdfDocument, byOptions);
+  }
+  const key = pageTextItemsCacheKey(options);
+  const cached = byOptions.get(key);
+  if (cached) return cached;
+  const promise = extractPageTextItemsUncached(pdfDocument, options).catch(
+    (error) => {
+      byOptions.delete(key);
+      throw error;
+    }
+  );
+  byOptions.set(key, promise);
+  return promise;
+};
+var extractPageTextItemsUncached = async (pdfDocument, options = {}) => {
   const pageNumbers = resolvePageNumbers(pdfDocument, options.pages);
   const columnDetection = options.columnDetection ?? DEFAULT_OPTIONS.columnDetection;
   const extractedPages = [];
@@ -5215,26 +5823,16 @@ var getTextPosition = async (pdfDocument, query, options = {}) => {
   }
   return null;
 };
-
-// src/components/leftpanel/LeftPanel.tsx
-import React21, { useState as useState17, useMemo as useMemo3, useCallback as useCallback8, useRef as useRef19, useEffect as useEffect18 } from "react";
-import { List, FileText, ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
-
-// src/contexts/LeftPanelContext.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var LeftPanelContext = createContext3(
+var LeftPanelContext = createContext(
   void 0
 );
 var useLeftPanelContext = () => {
-  const context = useContext3(LeftPanelContext);
+  const context = useContext(LeftPanelContext);
   if (context === void 0) {
     throw new Error("useLeftPanelContext must be used within LeftPanel");
   }
   return context;
 };
-
-// src/hooks/useDocumentOutline.ts
-import { useState as useState12, useEffect as useEffect13, useCallback as useCallback5, useMemo as useMemo2 } from "react";
 async function processOutlineItems(pdfDocument, items, level) {
   const processed = [];
   for (let i = 0; i < items.length; i++) {
@@ -5276,10 +5874,10 @@ function flattenOutline(items) {
 }
 function useDocumentOutline(options) {
   const { pdfDocument, goToPage } = options;
-  const [outline, setOutline] = useState12(null);
-  const [isLoading, setIsLoading] = useState12(true);
-  const [error, setError] = useState12(null);
-  useEffect13(() => {
+  const [outline, setOutline] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
     let cancelled = false;
     async function fetchOutline() {
       try {
@@ -5312,7 +5910,7 @@ function useDocumentOutline(options) {
       cancelled = true;
     };
   }, [pdfDocument]);
-  const navigateToItem = useCallback5(
+  const navigateToItem = useCallback(
     (item) => {
       if (goToPage && item.pageNumber) {
         goToPage(item.pageNumber);
@@ -5320,18 +5918,15 @@ function useDocumentOutline(options) {
     },
     [goToPage]
   );
-  const flatOutline = useMemo2(() => {
+  const flatOutline = useMemo(() => {
     if (!outline) return [];
     return flattenOutline(outline);
   }, [outline]);
-  const hasOutline = useMemo2(() => {
+  const hasOutline = useMemo(() => {
     return outline !== null && outline.length > 0;
   }, [outline]);
   return { outline, isLoading, error, navigateToItem, flatOutline, hasOutline };
 }
-
-// src/hooks/useThumbnails.ts
-import { useState as useState13, useCallback as useCallback6, useRef as useRef15, useEffect as useEffect14 } from "react";
 var MAX_CONCURRENT_RENDERS = 3;
 function useThumbnails(options) {
   const {
@@ -5343,21 +5938,21 @@ function useThumbnails(options) {
     // Changed to false - let virtualization control loading
     imageQuality = 0.8
   } = options;
-  const [thumbnails, setThumbnails] = useState13(
+  const [thumbnails, setThumbnails] = useState(
     /* @__PURE__ */ new Map()
   );
-  const loadingRef = useRef15(/* @__PURE__ */ new Set());
-  const loadedRef = useRef15(/* @__PURE__ */ new Set());
-  const cacheOrderRef = useRef15([]);
-  const renderQueueRef = useRef15([]);
-  const activeRendersRef = useRef15(0);
-  const isProcessingRef = useRef15(false);
-  const thumbnailsRef = useRef15(thumbnails);
+  const loadingRef = useRef(/* @__PURE__ */ new Set());
+  const loadedRef = useRef(/* @__PURE__ */ new Set());
+  const cacheOrderRef = useRef([]);
+  const renderQueueRef = useRef([]);
+  const activeRendersRef = useRef(0);
+  const isProcessingRef = useRef(false);
+  const thumbnailsRef = useRef(thumbnails);
   thumbnailsRef.current = thumbnails;
-  const pendingUpdatesRef = useRef15(/* @__PURE__ */ new Map());
-  const flushTimeoutRef = useRef15(null);
+  const pendingUpdatesRef = useRef(/* @__PURE__ */ new Map());
+  const flushTimeoutRef = useRef(null);
   const totalPages = pdfDocument.numPages;
-  const flushUpdates = useCallback6(() => {
+  const flushUpdates = useCallback(() => {
     if (pendingUpdatesRef.current.size === 0) return;
     setThumbnails((prev) => {
       const next = new Map(prev);
@@ -5377,7 +5972,7 @@ function useThumbnails(options) {
       return next;
     });
   }, [cacheSize]);
-  const queueUpdate = useCallback6((pageNumber, data) => {
+  const queueUpdate = useCallback((pageNumber, data) => {
     pendingUpdatesRef.current.set(pageNumber, data);
     if (!flushTimeoutRef.current) {
       flushTimeoutRef.current = setTimeout(() => {
@@ -5386,7 +5981,7 @@ function useThumbnails(options) {
       }, 50);
     }
   }, [flushUpdates]);
-  const renderThumbnail = useCallback6(
+  const renderThumbnail = useCallback(
     async (pageNumber) => {
       try {
         const page = await pdfDocument.getPage(pageNumber);
@@ -5424,7 +6019,7 @@ function useThumbnails(options) {
     },
     [pdfDocument, thumbnailWidth, imageQuality, queueUpdate]
   );
-  const processQueue = useCallback6(async () => {
+  const processQueue = useCallback(async () => {
     if (isProcessingRef.current) return;
     isProcessingRef.current = true;
     while (renderQueueRef.current.length > 0 && activeRendersRef.current < MAX_CONCURRENT_RENDERS) {
@@ -5440,7 +6035,7 @@ function useThumbnails(options) {
     }
     isProcessingRef.current = false;
   }, [renderThumbnail]);
-  const loadThumbnail = useCallback6(
+  const loadThumbnail = useCallback(
     async (pageNumber) => {
       if (loadingRef.current.has(pageNumber) || loadedRef.current.has(pageNumber)) {
         return;
@@ -5459,7 +6054,7 @@ function useThumbnails(options) {
     },
     [processQueue, queueUpdate]
   );
-  const getThumbnail = useCallback6(
+  const getThumbnail = useCallback(
     (pageNumber) => {
       return thumbnailsRef.current.get(pageNumber) || {
         pageNumber,
@@ -5470,7 +6065,7 @@ function useThumbnails(options) {
     []
     // No dependencies - always stable
   );
-  const preloadThumbnails = useCallback6(
+  const preloadThumbnails = useCallback(
     (pageNumbers) => {
       pageNumbers.forEach((pageNumber) => {
         loadThumbnail(pageNumber);
@@ -5478,13 +6073,13 @@ function useThumbnails(options) {
     },
     [loadThumbnail]
   );
-  const clearCache = useCallback6(() => {
+  const clearCache = useCallback(() => {
     setThumbnails(/* @__PURE__ */ new Map());
     cacheOrderRef.current = [];
     loadingRef.current.clear();
     loadedRef.current.clear();
   }, []);
-  useEffect14(() => {
+  useEffect(() => {
     if (preloadAll && totalPages > 0) {
       const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
       pageNumbers.forEach((pageNumber) => {
@@ -5492,7 +6087,7 @@ function useThumbnails(options) {
       });
     }
   }, [preloadAll, totalPages, loadThumbnail]);
-  useEffect14(() => {
+  useEffect(() => {
     return () => {
       loadingRef.current.clear();
       if (flushTimeoutRef.current) {
@@ -5510,9 +6105,6 @@ function useThumbnails(options) {
     thumbnails
   };
 }
-
-// src/hooks/usePageNavigation.ts
-import { useState as useState14, useEffect as useEffect15, useCallback as useCallback7, useRef as useRef16 } from "react";
 var isEventBus = (obj) => {
   return obj !== null && typeof obj === "object" && "on" in obj && "off" in obj;
 };
@@ -5521,10 +6113,10 @@ var isViewer = (obj) => {
 };
 function usePageNavigation(options) {
   const { viewer, eventBus } = options;
-  const [currentPage, setCurrentPage] = useState14(1);
-  const viewerRef = useRef16(viewer);
+  const [currentPage, setCurrentPage] = useState(1);
+  const viewerRef = useRef(viewer);
   viewerRef.current = viewer;
-  useEffect15(() => {
+  useEffect(() => {
     if (!eventBus || !isEventBus(eventBus)) {
       return;
     }
@@ -5536,14 +6128,14 @@ function usePageNavigation(options) {
       eventBus.off("pagechanging", handlePageChange);
     };
   }, [eventBus]);
-  const prevViewerRef = useRef16(viewer);
-  useEffect15(() => {
+  const prevViewerRef = useRef(viewer);
+  useEffect(() => {
     if (viewer !== prevViewerRef.current) {
       setCurrentPage(1);
       prevViewerRef.current = viewer;
     }
   }, [viewer]);
-  const goToPage = useCallback7(
+  const goToPage = useCallback(
     (pageNumber) => {
       const v = viewerRef.current;
       if (v && isViewer(v)) {
@@ -5577,14 +6169,6 @@ function usePageNavigation(options) {
     goToPage
   };
 }
-
-// src/components/leftpanel/DocumentOutline.tsx
-import React18 from "react";
-import { Loader2, FileQuestion } from "lucide-react";
-
-// src/components/leftpanel/OutlineItem.tsx
-import React17, { useState as useState15 } from "react";
-import { ChevronRight, ChevronDown } from "lucide-react";
 var OutlineItem = ({
   item,
   currentPage,
@@ -5596,8 +6180,8 @@ var OutlineItem = ({
   classNames,
   renderItem
 }) => {
-  const [isExpanded, setIsExpanded] = useState15(defaultExpanded);
-  const [isHovered, setIsHovered] = useState15(false);
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isHovered, setIsHovered] = useState(false);
   const hasChildren = item.children && item.children.length > 0;
   const isActive = currentPage === item.pageNumber;
   const canShowChildren = item.level < maxDepth;
@@ -5618,7 +6202,7 @@ var OutlineItem = ({
     onNavigate: handleNavigate
   };
   if (renderItem) {
-    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, renderItem(item, renderProps));
+    return /* @__PURE__ */ React11.createElement(React11.Fragment, null, renderItem(item, renderProps));
   }
   const indent = 12 + item.level * 16;
   const defaultContainerStyle = {
@@ -5732,7 +6316,7 @@ var OutlineItem = ({
     classNames?.pageNumber,
     isActive ? classNames?.pageNumberActive : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React17.createElement("div", { className: "outline-item" }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: "outline-item" }, /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: containerClassName || void 0,
@@ -5749,7 +6333,7 @@ var OutlineItem = ({
         }
       }
     },
-    showExpandIcons && hasChildren && canShowChildren ? /* @__PURE__ */ React17.createElement(
+    showExpandIcons && hasChildren && canShowChildren ? /* @__PURE__ */ React11.createElement(
       "button",
       {
         className: classNames?.expandButton,
@@ -5766,12 +6350,12 @@ var OutlineItem = ({
         },
         "aria-label": isExpanded ? "Collapse" : "Expand"
       },
-      isExpanded ? /* @__PURE__ */ React17.createElement(ChevronDown, { className: classNames?.expandIcon, style: expandIconStyle }) : /* @__PURE__ */ React17.createElement(ChevronRight, { className: classNames?.expandIcon, style: expandIconStyle })
-    ) : /* @__PURE__ */ React17.createElement("div", { style: { width: 16, flexShrink: 0 } }),
-    isActive && /* @__PURE__ */ React17.createElement("div", { className: classNames?.activeIndicator, style: activeIndicatorStyle }),
-    /* @__PURE__ */ React17.createElement("span", { className: titleClassName || void 0, style: titleStyle, title: item.title }, item.title),
-    /* @__PURE__ */ React17.createElement("span", { className: pageNumberClassName || void 0, style: pageNumberStyle }, item.pageNumber)
-  ), hasChildren && isExpanded && canShowChildren && /* @__PURE__ */ React17.createElement("div", { className: classNames?.childrenContainer, style: childrenContainerStyle }, item.children.map((child) => /* @__PURE__ */ React17.createElement(
+      isExpanded ? /* @__PURE__ */ React11.createElement(ChevronDown, { className: classNames?.expandIcon, style: expandIconStyle }) : /* @__PURE__ */ React11.createElement(ChevronRight, { className: classNames?.expandIcon, style: expandIconStyle })
+    ) : /* @__PURE__ */ React11.createElement("div", { style: { width: 16, flexShrink: 0 } }),
+    isActive && /* @__PURE__ */ React11.createElement("div", { className: classNames?.activeIndicator, style: activeIndicatorStyle }),
+    /* @__PURE__ */ React11.createElement("span", { className: titleClassName || void 0, style: titleStyle, title: item.title }, item.title),
+    /* @__PURE__ */ React11.createElement("span", { className: pageNumberClassName || void 0, style: pageNumberStyle }, item.pageNumber)
+  ), hasChildren && isExpanded && canShowChildren && /* @__PURE__ */ React11.createElement("div", { className: classNames?.childrenContainer, style: childrenContainerStyle }, item.children.map((child) => /* @__PURE__ */ React11.createElement(
     OutlineItem,
     {
       key: child.id,
@@ -5862,32 +6446,32 @@ var DocumentOutline = ({
     paddingBottom: "8px"
   };
   if (isLoading) {
-    return /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React11.createElement(
       "div",
       {
         className: [className, classNames?.loadingContainer].filter(Boolean).join(" ") || void 0,
         style: { ...defaultLoadingContainerStyle, ...styles?.loadingContainer }
       },
-      loadingContent || /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Loader2, { className: classNames?.loadingSpinner, style: { ...defaultLoadingSpinnerStyle, ...styles?.loadingSpinner } }), /* @__PURE__ */ React18.createElement("p", { className: classNames?.loadingText, style: { ...defaultLoadingTextStyle, ...styles?.loadingText } }, "Loading outline..."))
+      loadingContent || /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Loader2, { className: classNames?.loadingSpinner, style: { ...defaultLoadingSpinnerStyle, ...styles?.loadingSpinner } }), /* @__PURE__ */ React11.createElement("p", { className: classNames?.loadingText, style: { ...defaultLoadingTextStyle, ...styles?.loadingText } }, "Loading outline..."))
     );
   }
   if (!outline || outline.length === 0) {
-    return /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React11.createElement(
       "div",
       {
         className: [className, classNames?.emptyContainer].filter(Boolean).join(" ") || void 0,
         style: { ...defaultEmptyContainerStyle, ...styles?.emptyContainer }
       },
-      emptyContent || /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("div", { className: classNames?.emptyIconContainer, style: { ...defaultEmptyIconContainerStyle, ...styles?.emptyIconContainer } }, /* @__PURE__ */ React18.createElement(FileQuestion, { className: classNames?.emptyIcon, style: { ...defaultEmptyIconStyle, ...styles?.emptyIcon } })), /* @__PURE__ */ React18.createElement("p", { className: classNames?.emptyTitle, style: { ...defaultEmptyTitleStyle, ...styles?.emptyTitle } }, "No outline available"), /* @__PURE__ */ React18.createElement("p", { className: classNames?.emptyDescription, style: { ...defaultEmptyDescriptionStyle, ...styles?.emptyDescription } }, "This document doesn't have a table of contents"))
+      emptyContent || /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("div", { className: classNames?.emptyIconContainer, style: { ...defaultEmptyIconContainerStyle, ...styles?.emptyIconContainer } }, /* @__PURE__ */ React11.createElement(FileQuestion, { className: classNames?.emptyIcon, style: { ...defaultEmptyIconStyle, ...styles?.emptyIcon } })), /* @__PURE__ */ React11.createElement("p", { className: classNames?.emptyTitle, style: { ...defaultEmptyTitleStyle, ...styles?.emptyTitle } }, "No outline available"), /* @__PURE__ */ React11.createElement("p", { className: classNames?.emptyDescription, style: { ...defaultEmptyDescriptionStyle, ...styles?.emptyDescription } }, "This document doesn't have a table of contents"))
     );
   }
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: ["document-outline", className, classNames?.container].filter(Boolean).join(" "),
       style: { ...defaultContainerStyle, ...styles?.container }
     },
-    outline.map((item) => /* @__PURE__ */ React18.createElement(
+    outline.map((item) => /* @__PURE__ */ React11.createElement(
       OutlineItem,
       {
         key: item.id,
@@ -5904,15 +6488,7 @@ var DocumentOutline = ({
     ))
   );
 };
-
-// src/components/leftpanel/ThumbnailPanel.tsx
-import React20, { useRef as useRef18, useEffect as useEffect17 } from "react";
-import { useVirtualizer } from "@tanstack/react-virtual";
-
-// src/components/leftpanel/ThumbnailItem.tsx
-import React19, { useEffect as useEffect16, useRef as useRef17, useState as useState16 } from "react";
-import { Loader2 as Loader22, AlertCircle } from "lucide-react";
-var ThumbnailItem = React19.memo(({
+var ThumbnailItem = React11.memo(({
   pageNumber,
   thumbnail,
   isActive,
@@ -5921,10 +6497,10 @@ var ThumbnailItem = React19.memo(({
   showPageNumber = true,
   className = ""
 }) => {
-  const containerRef = useRef17(null);
-  const hasLoadedRef = useRef17(false);
-  const [isHovered, setIsHovered] = useState16(false);
-  useEffect16(() => {
+  const containerRef = useRef(null);
+  const hasLoadedRef = useRef(false);
+  const [isHovered, setIsHovered] = useState(false);
+  useEffect(() => {
     const element = containerRef.current;
     if (!element || hasLoadedRef.current) return;
     const observer = new IntersectionObserver(
@@ -5979,7 +6555,7 @@ var ThumbnailItem = React19.memo(({
     color: isActive ? "var(--lp-accent, #3b82f6)" : "var(--lp-muted, #6b7280)",
     transition: "color 0.15s ease"
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       ref: containerRef,
@@ -5999,7 +6575,7 @@ var ThumbnailItem = React19.memo(({
       "aria-label": `Page ${pageNumber}${isActive ? " (current)" : ""}`,
       "aria-current": isActive ? "page" : void 0
     },
-    /* @__PURE__ */ React19.createElement("div", { style: imageContainerStyle }, thumbnail.isLoading && /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React11.createElement("div", { style: imageContainerStyle }, thumbnail.isLoading && /* @__PURE__ */ React11.createElement(
       "div",
       {
         style: {
@@ -6011,8 +6587,8 @@ var ThumbnailItem = React19.memo(({
           backgroundColor: "var(--lp-hover, #f9fafb)"
         }
       },
-      /* @__PURE__ */ React19.createElement(
-        Loader22,
+      /* @__PURE__ */ React11.createElement(
+        Loader2,
         {
           style: {
             width: 24,
@@ -6022,7 +6598,7 @@ var ThumbnailItem = React19.memo(({
           }
         }
       )
-    ), thumbnail.error && !thumbnail.isLoading && /* @__PURE__ */ React19.createElement(
+    ), thumbnail.error && !thumbnail.isLoading && /* @__PURE__ */ React11.createElement(
       "div",
       {
         style: {
@@ -6035,9 +6611,9 @@ var ThumbnailItem = React19.memo(({
           backgroundColor: "#fef2f2"
         }
       },
-      /* @__PURE__ */ React19.createElement(AlertCircle, { style: { width: 20, height: 20, color: "#f87171", marginBottom: 4 } }),
-      /* @__PURE__ */ React19.createElement("span", { style: { fontSize: 10, color: "#9ca3af" } }, "Failed")
-    ), thumbnail.dataUrl && !thumbnail.isLoading && /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React11.createElement(AlertCircle, { style: { width: 20, height: 20, color: "#f87171", marginBottom: 4 } }),
+      /* @__PURE__ */ React11.createElement("span", { style: { fontSize: 10, color: "#9ca3af" } }, "Failed")
+    ), thumbnail.dataUrl && !thumbnail.isLoading && /* @__PURE__ */ React11.createElement(
       "img",
       {
         src: thumbnail.dataUrl,
@@ -6049,7 +6625,7 @@ var ThumbnailItem = React19.memo(({
         },
         draggable: false
       }
-    ), !thumbnail.dataUrl && !thumbnail.isLoading && !thumbnail.error && /* @__PURE__ */ React19.createElement(
+    ), !thumbnail.dataUrl && !thumbnail.isLoading && !thumbnail.error && /* @__PURE__ */ React11.createElement(
       "div",
       {
         style: {
@@ -6061,7 +6637,7 @@ var ThumbnailItem = React19.memo(({
           backgroundColor: "var(--lp-hover, #f9fafb)"
         }
       },
-      /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React11.createElement(
         "span",
         {
           style: {
@@ -6073,7 +6649,7 @@ var ThumbnailItem = React19.memo(({
         pageNumber
       )
     )),
-    showPageNumber && /* @__PURE__ */ React19.createElement("div", { style: pageNumberStyle }, pageNumber)
+    showPageNumber && /* @__PURE__ */ React11.createElement("div", { style: pageNumberStyle }, pageNumber)
   );
 });
 
@@ -6098,22 +6674,22 @@ var ThumbnailPanel = ({
       isLoading: false
     };
   };
-  const parentRef = useRef18(null);
+  const parentRef = useRef(null);
   const virtualizer = useVirtualizer({
     count: totalPages,
     getScrollElement: () => parentRef.current,
     estimateSize: () => estimatedItemHeight + gap,
     overscan
   });
-  const scrollToIndexRef = useRef18(virtualizer.scrollToIndex);
+  const scrollToIndexRef = useRef(virtualizer.scrollToIndex);
   scrollToIndexRef.current = virtualizer.scrollToIndex;
-  useEffect17(() => {
+  useEffect(() => {
     if (currentPage > 0 && currentPage <= totalPages) {
       scrollToIndexRef.current(currentPage - 1, { align: "center" });
     }
   }, [currentPage, totalPages]);
   if (totalPages === 0) {
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React11.createElement(
       "div",
       {
         className,
@@ -6124,10 +6700,10 @@ var ThumbnailPanel = ({
           padding: "48px 16px"
         }
       },
-      /* @__PURE__ */ React20.createElement("p", { style: { fontSize: 13, color: "var(--lp-muted, #9ca3af)" } }, "No pages to display")
+      /* @__PURE__ */ React11.createElement("p", { style: { fontSize: 13, color: "var(--lp-muted, #9ca3af)" } }, "No pages to display")
     );
   }
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "div",
     {
       ref: parentRef,
@@ -6138,7 +6714,7 @@ var ThumbnailPanel = ({
         padding: "12px"
       }
     },
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React11.createElement(
       "div",
       {
         style: {
@@ -6151,7 +6727,7 @@ var ThumbnailPanel = ({
         const pageNumber = virtualItem.index + 1;
         const thumbnail = getThumbnail(pageNumber);
         const isActive = currentPage === pageNumber;
-        return /* @__PURE__ */ React20.createElement(
+        return /* @__PURE__ */ React11.createElement(
           "div",
           {
             key: virtualItem.key,
@@ -6165,14 +6741,14 @@ var ThumbnailPanel = ({
               paddingBottom: `${gap}px`
             }
           },
-          renderThumbnail ? /* @__PURE__ */ React20.createElement(
+          renderThumbnail ? /* @__PURE__ */ React11.createElement(
             "div",
             {
               onClick: () => onPageSelect(pageNumber),
               style: { cursor: "pointer", height: "100%" }
             },
             renderThumbnail(pageNumber, thumbnail, isActive)
-          ) : /* @__PURE__ */ React20.createElement(
+          ) : /* @__PURE__ */ React11.createElement(
             ThumbnailItem,
             {
               pageNumber,
@@ -6192,18 +6768,18 @@ var ThumbnailPanel = ({
 // src/components/leftpanel/LeftPanel.tsx
 var defaultTheme = {
   backgroundColor: "#ffffff",
-  borderColor: "#e5e7eb",
-  accentColor: "#3b82f6",
-  textColor: "#374151",
-  mutedTextColor: "#6b7280",
-  hoverBackgroundColor: "#f9fafb"
+  borderColor: "#e6e2da",
+  accentColor: "#5b50e6",
+  textColor: "#1c1b18",
+  mutedTextColor: "#8b8880",
+  hoverBackgroundColor: "#f4f2ee"
 };
 var defaultDarkTheme2 = {
-  backgroundColor: "#1f1d1b",
+  backgroundColor: "#211f1c",
   borderColor: "#3a3733",
-  accentColor: "#7aa2f7",
+  accentColor: "#7b71f0",
   textColor: "#eae6e0",
-  mutedTextColor: "#a8a29a",
+  mutedTextColor: "#8b8880",
   hoverBackgroundColor: "#2a2724"
 };
 var LeftPanel = ({
@@ -6239,17 +6815,17 @@ var LeftPanel = ({
   outlineItemStyles,
   outlineItemClassNames
 }) => {
-  const theme = useMemo3(
+  const theme = useMemo(
     () => ({
       ...mode === "dark" ? defaultDarkTheme2 : defaultTheme,
       ...userTheme
     }),
     [mode, userTheme]
   );
-  const [internalIsOpen, setInternalIsOpen] = useState17(true);
-  const [activeTab, setActiveTab] = useState17(defaultTab);
+  const [internalIsOpen, setInternalIsOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState(defaultTab);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
-  const setIsOpen = useCallback8(
+  const setIsOpen = useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -6267,11 +6843,11 @@ var LeftPanel = ({
     viewer,
     eventBus
   });
-  const goToPagePropRef = useRef19(goToPageProp);
-  useEffect18(() => {
+  const goToPagePropRef = useRef(goToPageProp);
+  useEffect(() => {
     goToPagePropRef.current = goToPageProp;
   }, [goToPageProp]);
-  const handlePageSelect = useCallback8(
+  const handlePageSelect = useCallback(
     (pageNumber) => {
       if (goToPagePropRef.current) {
         goToPagePropRef.current(pageNumber);
@@ -6291,14 +6867,14 @@ var LeftPanel = ({
     pdfDocument,
     goToPage: handlePageSelect
   });
-  const handleOutlineNavigate = useCallback8(
+  const handleOutlineNavigate = useCallback(
     (item) => {
       navigateToItem(item);
       onPageSelect?.(item.pageNumber);
     },
     [navigateToItem, onPageSelect]
   );
-  const contextValue = useMemo3(
+  const contextValue = useMemo(
     () => ({
       currentPage,
       totalPages,
@@ -6340,7 +6916,7 @@ var LeftPanel = ({
     "--lp-muted": theme.mutedTextColor,
     "--lp-hover": theme.hoverBackgroundColor
   };
-  return /* @__PURE__ */ React21.createElement(LeftPanelContext.Provider, { value: contextValue }, showToggleButton && /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React11.createElement(LeftPanelContext.Provider, { value: contextValue }, showToggleButton && /* @__PURE__ */ React11.createElement(
     "button",
     {
       className: toggleButtonClassNames?.button,
@@ -6373,8 +6949,8 @@ var LeftPanel = ({
       },
       "aria-label": isOpen ? "Close panel" : "Open panel"
     },
-    isOpen ? /* @__PURE__ */ React21.createElement(ChevronLeft, { className: toggleButtonClassNames?.icon, style: { width: 14, height: 14, color: theme.mutedTextColor, ...toggleButtonStyles?.icon } }) : /* @__PURE__ */ React21.createElement(ChevronRight2, { className: toggleButtonClassNames?.icon, style: { width: 14, height: 14, color: theme.mutedTextColor, ...toggleButtonStyles?.icon } })
-  ), /* @__PURE__ */ React21.createElement(
+    isOpen ? /* @__PURE__ */ React11.createElement(ChevronLeft, { className: toggleButtonClassNames?.icon, style: { width: 14, height: 14, color: theme.mutedTextColor, ...toggleButtonStyles?.icon } }) : /* @__PURE__ */ React11.createElement(ChevronRight, { className: toggleButtonClassNames?.icon, style: { width: 14, height: 14, color: theme.mutedTextColor, ...toggleButtonStyles?.icon } })
+  ), /* @__PURE__ */ React11.createElement(
     "div",
     {
       className: `left-panel ${className}`,
@@ -6393,7 +6969,7 @@ var LeftPanel = ({
         ...style
       }
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React11.createElement(
       "div",
       {
         style: {
@@ -6405,7 +6981,7 @@ var LeftPanel = ({
           minWidth: panelWidth
         }
       },
-      tabs.length > 1 && /* @__PURE__ */ React21.createElement(
+      tabs.length > 1 && /* @__PURE__ */ React11.createElement(
         "div",
         {
           className: tabClassNames?.container,
@@ -6416,7 +6992,7 @@ var LeftPanel = ({
             ...tabStyles?.container
           }
         },
-        tabs.includes("outline") && /* @__PURE__ */ React21.createElement(
+        tabs.includes("outline") && /* @__PURE__ */ React11.createElement(
           "button",
           {
             className: [tabClassNames?.tab, activeTab === "outline" ? tabClassNames?.tabActive : ""].filter(Boolean).join(" ") || void 0,
@@ -6440,10 +7016,10 @@ var LeftPanel = ({
               ...activeTab === "outline" ? tabStyles?.tabActive : {}
             }
           },
-          /* @__PURE__ */ React21.createElement(FileText, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, ...tabStyles?.tabIcon } }),
-          /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: tabStyles?.tabText }, "Outline")
+          /* @__PURE__ */ React11.createElement(FileText, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, ...tabStyles?.tabIcon } }),
+          /* @__PURE__ */ React11.createElement("span", { className: tabClassNames?.tabText, style: tabStyles?.tabText }, "Outline")
         ),
-        tabs.includes("thumbnails") && /* @__PURE__ */ React21.createElement(
+        tabs.includes("thumbnails") && /* @__PURE__ */ React11.createElement(
           "button",
           {
             className: [tabClassNames?.tab, activeTab === "thumbnails" ? tabClassNames?.tabActive : ""].filter(Boolean).join(" ") || void 0,
@@ -6467,11 +7043,11 @@ var LeftPanel = ({
               ...activeTab === "thumbnails" ? tabStyles?.tabActive : {}
             }
           },
-          /* @__PURE__ */ React21.createElement(List, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, ...tabStyles?.tabIcon } }),
-          /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: tabStyles?.tabText }, "Pages")
+          /* @__PURE__ */ React11.createElement(List, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, ...tabStyles?.tabIcon } }),
+          /* @__PURE__ */ React11.createElement("span", { className: tabClassNames?.tabText, style: tabStyles?.tabText }, "Pages")
         )
       ),
-      tabs.length === 1 && /* @__PURE__ */ React21.createElement(
+      tabs.length === 1 && /* @__PURE__ */ React11.createElement(
         "div",
         {
           className: tabClassNames?.container,
@@ -6485,9 +7061,9 @@ var LeftPanel = ({
             ...tabStyles?.container
           }
         },
-        tabs[0] === "outline" ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(FileText, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, color: theme.mutedTextColor, ...tabStyles?.tabIcon } }), /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: { fontSize: "13px", fontWeight: 500, color: theme.textColor, ...tabStyles?.tabText } }, "Outline")) : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(List, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, color: theme.mutedTextColor, ...tabStyles?.tabIcon } }), /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: { fontSize: "13px", fontWeight: 500, color: theme.textColor, ...tabStyles?.tabText } }, "Pages"))
+        tabs[0] === "outline" ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(FileText, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, color: theme.mutedTextColor, ...tabStyles?.tabIcon } }), /* @__PURE__ */ React11.createElement("span", { className: tabClassNames?.tabText, style: { fontSize: "13px", fontWeight: 500, color: theme.textColor, ...tabStyles?.tabText } }, "Outline")) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(List, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, color: theme.mutedTextColor, ...tabStyles?.tabIcon } }), /* @__PURE__ */ React11.createElement("span", { className: tabClassNames?.tabText, style: { fontSize: "13px", fontWeight: 500, color: theme.textColor, ...tabStyles?.tabText } }, "Pages"))
       ),
-      /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React11.createElement(
         "div",
         {
           style: {
@@ -6497,7 +7073,7 @@ var LeftPanel = ({
             overflowX: "hidden"
           }
         },
-        activeTab === "outline" && tabs.includes("outline") && /* @__PURE__ */ React21.createElement(
+        activeTab === "outline" && tabs.includes("outline") && /* @__PURE__ */ React11.createElement(
           DocumentOutline,
           {
             outline,
@@ -6511,7 +7087,7 @@ var LeftPanel = ({
             itemClassNames: outlineItemClassNames
           }
         ),
-        activeTab === "thumbnails" && tabs.includes("thumbnails") && /* @__PURE__ */ React21.createElement(
+        activeTab === "thumbnails" && tabs.includes("thumbnails") && /* @__PURE__ */ React11.createElement(
           ThumbnailPanel,
           {
             totalPages,
@@ -6524,7 +7100,7 @@ var LeftPanel = ({
         ),
         children
       ),
-      showFooter && /* @__PURE__ */ React21.createElement(
+      showFooter && /* @__PURE__ */ React11.createElement(
         "div",
         {
           className: footerClassNames?.container,
@@ -6536,7 +7112,7 @@ var LeftPanel = ({
             ...footerStyles?.container
           }
         },
-        /* @__PURE__ */ React21.createElement(
+        /* @__PURE__ */ React11.createElement(
           "div",
           {
             className: footerClassNames?.text,
@@ -6560,40 +7136,10 @@ var LeftPanel = ({
 
 // src/index.ts
 var exportPdf = async (...args) => {
-  const { exportPdf: exportPdf2 } = await import("./export-pdf-W2QGWADM.js");
+  const { exportPdf: exportPdf2 } = await import('./export-pdf-DD7J5UHW.js');
   return exportPdf2(...args);
 };
-export {
-  AreaHighlight,
-  DocumentOutline,
-  DrawingCanvas,
-  DrawingHighlight,
-  FreetextHighlight,
-  ImageHighlight,
-  LeftPanel,
-  MonitoredHighlightContainer,
-  OutlineItem,
-  PdfHighlighter,
-  PdfLoader,
-  ShapeCanvas,
-  ShapeHighlight,
-  SignaturePad,
-  TextHighlight,
-  ThumbnailItem,
-  ThumbnailPanel,
-  exportPdf,
-  extractPageTextItems,
-  extractSentences,
-  extractTextUnits,
-  getTextPosition,
-  scaledPositionToViewport,
-  sentenceToHighlight,
-  useDocumentOutline,
-  useHighlightContainerContext,
-  useLeftPanelContext,
-  usePageNavigation,
-  usePdfHighlighterContext,
-  useThumbnails,
-  viewportPositionToScaled
-};
+
+export { AreaHighlight, DocumentOutline, DrawingCanvas, DrawingHighlight, FreetextHighlight, ImageHighlight, LeftPanel, MonitoredHighlightContainer, OutlineItem, PdfHighlighter, PdfLoader, ShapeCanvas, ShapeHighlight, SignaturePad, TextHighlight, ThumbnailItem, ThumbnailPanel, exportPdf, extractPageTextItems, extractSentences, extractTextUnits, getTextPosition, scaledPositionToViewport, sentenceToHighlight, useDocumentOutline, useHighlightContainerContext, useLeftPanelContext, usePageNavigation, usePdfHighlighterContext, useThumbnails, viewportPositionToScaled };
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map