react-pdf-highlighter-plus 1.1.3 → 1.2.0

package/dist/esm/index.js

@@ -1,5 +1,4 @@
 // src/components/PdfHighlighter.tsx
-import debounce from "lodash.debounce";
 import React6, {
   useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect2,
@@ -88,6 +87,323 @@ var scaledPositionToViewport = ({ boundingRect, rects, usePdfCoordinates }, view
   };
 };
 
+// src/lib/dark-mode.ts
+var DEFAULT_DARK_MODE_COLORS = {
+  background: "#141210",
+  foreground: "#eae6e0"
+};
+var NAMED_COLORS = {
+  white: [1, 1, 1, 1],
+  black: [0, 0, 0, 1],
+  transparent: [0, 0, 0, 0]
+};
+function clamp01(value) {
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function parseColor(input) {
+  const str = input.trim().toLowerCase();
+  const named = Object.hasOwn(NAMED_COLORS, str) ? NAMED_COLORS[str] : void 0;
+  if (named) return named;
+  if (str.startsWith("#")) {
+    const hex = str.slice(1);
+    if (!/^[0-9a-f]{3,8}$/.test(hex)) return null;
+    if (hex.length === 3 || hex.length === 4) {
+      const r = Number.parseInt(hex[0], 16) / 15;
+      const g = Number.parseInt(hex[1], 16) / 15;
+      const b = Number.parseInt(hex[2], 16) / 15;
+      const a = hex.length === 4 ? Number.parseInt(hex[3], 16) / 15 : 1;
+      return [r, g, b, a];
+    }
+    if (hex.length === 6 || hex.length === 8) {
+      const r = Number.parseInt(hex.slice(0, 2), 16) / 255;
+      const g = Number.parseInt(hex.slice(2, 4), 16) / 255;
+      const b = Number.parseInt(hex.slice(4, 6), 16) / 255;
+      const a = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1;
+      return [r, g, b, a];
+    }
+    return null;
+  }
+  const fn = /^rgba?\(([^)]+)\)$/.exec(str);
+  if (fn) {
+    const parts = fn[1].split(/[,\s/]+/).filter(Boolean);
+    if (parts.length < 3) return null;
+    const channel = (part) => part.endsWith("%") ? Number.parseFloat(part) / 100 : Number.parseFloat(part) / 255;
+    const alpha = (part) => part.endsWith("%") ? Number.parseFloat(part) / 100 : Number.parseFloat(part);
+    const r = channel(parts[0]);
+    const g = channel(parts[1]);
+    const b = channel(parts[2]);
+    const a = parts[3] !== void 0 ? alpha(parts[3]) : 1;
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b) || Number.isNaN(a))
+      return null;
+    return [clamp01(r), clamp01(g), clamp01(b), clamp01(a)];
+  }
+  const normalized = normalizeCssColor(str);
+  if (normalized !== null && normalized !== str) return parseColor(normalized);
+  return null;
+}
+var normalizeCtx;
+function normalizeCssColor(input) {
+  if (normalizeCtx === void 0) {
+    normalizeCtx = typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d", {
+      willReadFrequently: true
+    });
+  }
+  const ctx = normalizeCtx;
+  if (!ctx) return null;
+  ctx.fillStyle = "#000000";
+  ctx.fillStyle = input;
+  const first = ctx.fillStyle;
+  ctx.fillStyle = "#ffffff";
+  ctx.fillStyle = input;
+  return first === ctx.fillStyle ? first : null;
+}
+function srgbToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function linearToSrgb(c) {
+  return c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+}
+function rgbToOklab(r, g, b) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklabToLinearRgb(L, a, b) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var GAMUT_EPSILON = 5e-4;
+function oklabToSrgbExact(L, a, b) {
+  const [lr, lg, lb] = oklabToLinearRgb(L, a, b);
+  if (lr < -GAMUT_EPSILON || lr > 1 + GAMUT_EPSILON || lg < -GAMUT_EPSILON || lg > 1 + GAMUT_EPSILON || lb < -GAMUT_EPSILON || lb > 1 + GAMUT_EPSILON) {
+    return null;
+  }
+  return [
+    linearToSrgb(clamp01(lr)),
+    linearToSrgb(clamp01(lg)),
+    linearToSrgb(clamp01(lb))
+  ];
+}
+function oklabToSrgbGamutMapped(L, a, b) {
+  const exact = oklabToSrgbExact(L, a, b);
+  if (exact) return exact;
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 12; i++) {
+    const mid = (lo + hi) / 2;
+    if (oklabToSrgbExact(L, a * mid, b * mid)) lo = mid;
+    else hi = mid;
+  }
+  const [lr, lg, lb] = oklabToLinearRgb(L, a * lo, b * lo);
+  return [
+    linearToSrgb(clamp01(lr)),
+    linearToSrgb(clamp01(lg)),
+    linearToSrgb(clamp01(lb))
+  ];
+}
+function toHexByte(channel) {
+  return Math.round(clamp01(channel) * 255).toString(16).padStart(2, "0");
+}
+function toCssColor(r, g, b, a) {
+  const rgb = `#${toHexByte(r)}${toHexByte(g)}${toHexByte(b)}`;
+  return a >= 1 ? rgb : `${rgb}${toHexByte(a)}`;
+}
+var NEUTRAL_CHROMA_THRESHOLD = 0.04;
+var COLOR_CACHE_MAX = 4096;
+var mapInstances = /* @__PURE__ */ new Map();
+function createDarkModeColorMap(colors) {
+  const background = colors?.background ?? DEFAULT_DARK_MODE_COLORS.background;
+  const foreground = colors?.foreground ?? DEFAULT_DARK_MODE_COLORS.foreground;
+  const instanceKey = `${background}|${foreground}`;
+  const existing = mapInstances.get(instanceKey);
+  if (existing) {
+    mapInstances.delete(instanceKey);
+    mapInstances.set(instanceKey, existing);
+    return existing;
+  }
+  const bgRgba = parseColor(background) ?? parseColor(DEFAULT_DARK_MODE_COLORS.background);
+  const fgRgba = parseColor(foreground) ?? parseColor(DEFAULT_DARK_MODE_COLORS.foreground);
+  const bgLab = rgbToOklab(bgRgba[0], bgRgba[1], bgRgba[2]);
+  const fgLab = rgbToOklab(fgRgba[0], fgRgba[1], fgRgba[2]);
+  const cache = /* @__PURE__ */ new Map();
+  const backgroundCss = toCssColor(bgRgba[0], bgRgba[1], bgRgba[2], 1);
+  const foregroundCss = toCssColor(fgRgba[0], fgRgba[1], fgRgba[2], 1);
+  const seedPoles = () => {
+    for (const white of ["#ffffff", "#fff", "white"])
+      cache.set(white, backgroundCss);
+    for (const black of ["#000000", "#000", "black"])
+      cache.set(black, foregroundCss);
+  };
+  seedPoles();
+  const transform = (input) => {
+    const parsed = parseColor(input);
+    if (!parsed || parsed[3] === 0) return input;
+    const [r, g, b, alpha] = parsed;
+    const [, labA, labB] = rgbToOklab(r, g, b);
+    const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    const rampL = fgLab[0] + (bgLab[0] - fgLab[0]) * luma;
+    const rampA = fgLab[1] + (bgLab[1] - fgLab[1]) * luma;
+    const rampB = fgLab[2] + (bgLab[2] - fgLab[2]) * luma;
+    const chroma = Math.hypot(labA, labB);
+    const hueWeight = Math.min(1, chroma / NEUTRAL_CHROMA_THRESHOLD);
+    const outA = rampA + (labA - rampA) * hueWeight;
+    const outB = rampB + (labB - rampB) * hueWeight;
+    const [sr, sg, sb] = oklabToSrgbGamutMapped(rampL, outA, outB);
+    return toCssColor(sr, sg, sb, alpha);
+  };
+  const map = (input) => {
+    const hit = cache.get(input);
+    if (hit !== void 0) return hit;
+    const out = transform(input);
+    if (cache.size >= COLOR_CACHE_MAX) {
+      cache.clear();
+      seedPoles();
+    }
+    cache.set(input, out);
+    return out;
+  };
+  if (mapInstances.size >= 16) {
+    const oldest = mapInstances.keys().next().value;
+    if (oldest !== void 0) mapInstances.delete(oldest);
+  }
+  mapInstances.set(instanceKey, map);
+  return map;
+}
+
+// src/lib/recolor-context.ts
+var RECOLOR_CLEANUP = /* @__PURE__ */ Symbol("recolorCleanup");
+var RECOLOR_PAINTED = /* @__PURE__ */ Symbol("recolorPainted");
+var FILL_METHODS = ["fill", "fillRect", "fillText"];
+var STROKE_METHODS = ["stroke", "strokeRect", "strokeText"];
+var GRADIENT_METHODS = [
+  "createLinearGradient",
+  "createRadialGradient"
+];
+function ntscLuma(r, g, b) {
+  return 0.3 * r + 0.59 * g + 0.11 * b;
+}
+function parseHexLuma(color) {
+  if (!/^#[0-9a-f]{6}$/i.test(color)) return null;
+  return ntscLuma(
+    Number.parseInt(color.slice(1, 3), 16),
+    Number.parseInt(color.slice(3, 5), 16),
+    Number.parseInt(color.slice(5, 7), 16)
+  );
+}
+function correctLuminosityMask(source, mappedWhiteLuma, mappedBlackLuma) {
+  if (typeof document === "undefined") return null;
+  if (!(typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement) && !(typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas)) {
+    return null;
+  }
+  const width = source.width;
+  const height = source.height;
+  if (!width || !height) return null;
+  const span = mappedWhiteLuma - mappedBlackLuma;
+  if (Math.abs(span) < 1) return null;
+  const tmp = document.createElement("canvas");
+  tmp.width = width;
+  tmp.height = height;
+  const tmpCtx = tmp.getContext("2d", { willReadFrequently: true });
+  if (!tmpCtx) return null;
+  tmpCtx.drawImage(source, 0, 0);
+  let image;
+  try {
+    image = tmpCtx.getImageData(0, 0, width, height);
+  } catch {
+    return null;
+  }
+  const data = image.data;
+  for (let i = 0; i < data.length; i += 4) {
+    const luma = ntscLuma(data[i], data[i + 1], data[i + 2]);
+    const t = (luma - mappedBlackLuma) / span;
+    const gray = t <= 0 ? 0 : t >= 1 ? 255 : Math.round(t * 255);
+    data[i] = data[i + 1] = data[i + 2] = gray;
+  }
+  tmpCtx.putImageData(image, 0, 0);
+  return tmp;
+}
+function applyContextRecolor(ctx, map) {
+  const target = ctx;
+  target[RECOLOR_CLEANUP]?.();
+  const mappedWhiteLuma = parseHexLuma(map("#ffffff"));
+  const mappedBlackLuma = parseHexLuma(map("#000000"));
+  const withMaskCorrection = (original) => function(...args) {
+    if (mappedWhiteLuma !== null && mappedBlackLuma !== null && this.globalCompositeOperation === "destination-in" && typeof this.filter === "string" && this.filter.includes("luminosity")) {
+      const source = args[0];
+      const sourcePainted = (typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement || typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas) && source.getContext("2d")?.[RECOLOR_PAINTED] === true;
+      const corrected = sourcePainted ? correctLuminosityMask(source, mappedWhiteLuma, mappedBlackLuma) : null;
+      if (corrected) {
+        const next = [corrected, ...args.slice(1)];
+        return original.apply(this, next);
+      }
+    }
+    return original.apply(this, args);
+  };
+  const withMappedStyle = (original, styleProp) => function(...args) {
+    const style = this[styleProp];
+    if (typeof style === "string") {
+      const mapped = map(style);
+      if (mapped !== style) {
+        this[RECOLOR_PAINTED] = true;
+        this[styleProp] = mapped;
+        try {
+          return original.apply(this, args);
+        } finally {
+          this[styleProp] = style;
+        }
+      }
+    }
+    return original.apply(this, args);
+  };
+  const withMappedStops = (original) => function(...args) {
+    const gradient = original.apply(this, args);
+    const addColorStop = gradient.addColorStop.bind(gradient);
+    const context = this;
+    gradient.addColorStop = (offset, color) => {
+      const mapped = map(color);
+      if (mapped !== color) context[RECOLOR_PAINTED] = true;
+      addColorStop(offset, mapped);
+    };
+    return gradient;
+  };
+  const record = target;
+  for (const name of FILL_METHODS)
+    record[name] = withMappedStyle(target[name], "fillStyle");
+  for (const name of STROKE_METHODS)
+    record[name] = withMappedStyle(target[name], "strokeStyle");
+  for (const name of GRADIENT_METHODS)
+    record[name] = withMappedStops(target[name]);
+  record.drawImage = withMaskCorrection(target.drawImage);
+  const cleanup = () => {
+    if (target[RECOLOR_CLEANUP] !== cleanup) return;
+    for (const name of [
+      ...FILL_METHODS,
+      ...STROKE_METHODS,
+      ...GRADIENT_METHODS,
+      "drawImage"
+    ])
+      delete record[name];
+    delete target[RECOLOR_CLEANUP];
+    delete target[RECOLOR_PAINTED];
+  };
+  target[RECOLOR_CLEANUP] = cleanup;
+  return cleanup;
+}
+
 // src/lib/get-bounding-rect.ts
 var getBoundingRect = (clientRects) => {
   const rects = Array.from(clientRects).map((rect) => {
@@ -293,16 +609,6 @@ var getPagesFromRange = (range) => {
   }
   return pages;
 };
-var findOrCreateContainerLayer = (container, className) => {
-  const doc = getDocument(container);
-  let layer = container.querySelector(`.${className}`);
-  if (!layer && container.children.length) {
-    layer = doc.createElement("div");
-    layer.className = className;
-    container.appendChild(layer);
-  }
-  return layer;
-};
 
 // src/components/DrawingCanvas.tsx
 import React, {
@@ -659,9 +965,12 @@ var HighlightLayer = ({
   scrolledToHighlightId,
   viewer,
   highlightBindings,
-  children
+  children,
+  shouldRenderHighlight
 }) => {
-  const currentHighlights = highlightsByPage[pageNumber] || [];
+  const currentHighlights = (highlightsByPage[pageNumber] || []).filter(
+    (highlight) => shouldRenderHighlight?.(highlight) ?? true
+  );
   return /* @__PURE__ */ React2.createElement("div", null, currentHighlights.map((highlight, index) => {
     const viewportHighlight = {
       ...highlight,
@@ -1111,38 +1420,94 @@ var TipContainer = ({
 
 // src/components/PdfHighlighter.tsx
 var EventBus;
+var PDFFindController;
 var PDFLinkService;
 var PDFViewer;
 (async () => {
   const pdfjs = await import("pdfjs-dist/web/pdf_viewer.mjs");
   EventBus = pdfjs.EventBus;
+  PDFFindController = pdfjs.PDFFindController;
   PDFLinkService = pdfjs.PDFLinkService;
   PDFViewer = pdfjs.PDFViewer;
 })();
 var SCROLL_MARGIN = 10;
 var DEFAULT_SCALE_VALUE = "auto";
 var DEFAULT_TEXT_SELECTION_COLOR = "rgba(153,193,218,255)";
+var DEFAULT_DARK_MODE_COLORS2 = {
+  background: "#141210",
+  foreground: "#eae6e0"
+};
+var unmountReactRoot = (root) => {
+  if (!root) return;
+  queueMicrotask(() => {
+    try {
+      root.unmount();
+    } catch {
+    }
+  });
+};
+var RECOLOR_PATCHED = /* @__PURE__ */ Symbol("pdfRecolorPatched");
+var patchPageRenderRecolor = (pdfDocument, getMap) => {
+  const doc = pdfDocument;
+  if (doc[RECOLOR_PATCHED]) return;
+  doc[RECOLOR_PATCHED] = true;
+  const origGetPage = doc.getPage.bind(doc);
+  doc.getPage = (pageNumber) => origGetPage(pageNumber).then((page) => {
+    const p = page;
+    if (p[RECOLOR_PATCHED]) return p;
+    p[RECOLOR_PATCHED] = true;
+    const origRender = p.render.bind(p);
+    p.render = ((params) => {
+      const map = getMap();
+      const ctx = params?.canvasContext;
+      if (map && ctx) {
+        const cleanup = applyContextRecolor(ctx, map);
+        const task = origRender(params);
+        task.promise.then(cleanup, cleanup);
+        return task;
+      }
+      return origRender(params);
+    });
+    return p;
+  });
+};
 var defaultLightTheme = {
   mode: "light",
   containerBackgroundColor: "#e5e5e5",
   scrollbarThumbColor: "#9f9f9f",
   scrollbarTrackColor: "#d1d1d1",
-  darkModeInvertIntensity: 0.9
+  darkModeInvertIntensity: 0.9,
+  darkModeColors: DEFAULT_DARK_MODE_COLORS2
 };
 var defaultDarkTheme = {
   mode: "dark",
   containerBackgroundColor: "#3a3a3a",
-  // Lighter than PDF page (~#1a1a1a) for contrast
+  // Lighter than PDF page for contrast
   scrollbarThumbColor: "#6b6b6b",
   scrollbarTrackColor: "#2c2c2c",
-  darkModeInvertIntensity: 0.9
+  darkModeInvertIntensity: 0.9,
+  darkModeColors: DEFAULT_DARK_MODE_COLORS2
 };
-var findOrCreateHighlightLayer = (textLayer) => {
-  return findOrCreateContainerLayer(
-    textLayer,
-    "PdfHighlighter__highlight-layer"
-  );
+var ensurePersistentLayer = (bindings, pageNumber, parent, className) => {
+  let binding = bindings[pageNumber];
+  if (!binding) {
+    const doc = getDocument(parent);
+    const layer = doc.createElement("div");
+    layer.className = className;
+    parent.appendChild(layer);
+    binding = {
+      reactRoot: createRoot(layer),
+      container: layer,
+      textLayer: parent
+    };
+    bindings[pageNumber] = binding;
+  } else if (binding.container.parentNode !== parent) {
+    parent.appendChild(binding.container);
+    binding.textLayer = parent;
+  }
+  return binding;
 };
+var isFreetextHighlight = (highlight) => "type" in highlight && highlight.type === "freetext";
 var disableTextSelection = (viewer, flag) => {
   viewer.viewer?.classList.toggle("PdfHighlighter--disable-selection", flag);
 };
@@ -1150,6 +1515,9 @@ var PdfHighlighter = ({
   highlights,
   onScrollAway,
   pdfScaleValue = DEFAULT_SCALE_VALUE,
+  onZoomChange,
+  initialPage,
+  onPageChange,
   onSelection: onSelectionFinished,
   onCreateGhostHighlight,
   onRemoveGhostHighlight,
@@ -1169,12 +1537,12 @@ var PdfHighlighter = ({
   enableDrawingMode,
   onDrawingComplete,
   onDrawingCancel,
-  drawingStrokeColor = "#000000",
+  drawingStrokeColor: drawingStrokeColorProp,
   drawingStrokeWidth = 3,
   enableShapeMode,
   onShapeComplete,
   onShapeCancel,
-  shapeStrokeColor = "#000000",
+  shapeStrokeColor: shapeStrokeColorProp,
   shapeStrokeWidth = 2,
   theme: userTheme
 }) => {
@@ -1183,12 +1551,27 @@ var PdfHighlighter = ({
     const defaults = mode === "light" ? defaultLightTheme : defaultDarkTheme;
     return { ...defaults, ...userTheme, mode };
   }, [userTheme]);
+  const recolorKey = resolvedTheme.mode === "dark" ? `${resolvedTheme.darkModeColors.background}|${resolvedTheme.darkModeColors.foreground}` : "light";
+  const recolorMap = useMemo(
+    () => resolvedTheme.mode === "dark" ? createDarkModeColorMap(resolvedTheme.darkModeColors) : null,
+    // recolorKey captures the palette + mode; map identity is stable per key.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [recolorKey]
+  );
+  const recolorMapRef = useRef5(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 noteBindingsRef = useRef5({});
+  const highlightsRef = useRef5(highlights);
+  const childrenRef = useRef5(children);
   const ghostHighlightRef = useRef5(null);
   const selectionRef = useRef5(null);
   const scrolledToHighlightIdRef = useRef5(null);
@@ -1204,43 +1587,324 @@ var PdfHighlighter = ({
     })
   );
   const resizeObserverRef = useRef5(null);
+  const renderRetryTimeoutsRef = useRef5(
+    []
+  );
+  const resumeScrollAwayTimeoutRef = useRef5(
+    null
+  );
+  const findControllerRef = useRef5(null);
   const viewerRef = useRef5(null);
+  const prevDocRef = useRef5(null);
+  const lastRenderKeyRef = useRef5(null);
+  highlightsRef.current = highlights;
+  childrenRef.current = children;
   useLayoutEffect2(() => {
     if (!containerNodeRef.current) return;
-    const debouncedDocumentInit = debounce(() => {
-      viewerRef.current = viewerRef.current || new PDFViewer({
-        container: containerNodeRef.current,
-        eventBus: eventBusRef.current,
-        textLayerMode: 2,
-        removePageBorders: true,
-        linkService: linkServiceRef.current
-      });
-      viewerRef.current.setDocument(pdfDocument);
-      linkServiceRef.current.setDocument(pdfDocument);
-      linkServiceRef.current.setViewer(viewerRef.current);
-      setIsViewerReady(true);
-    }, 100);
-    debouncedDocumentInit();
-    return () => {
-      debouncedDocumentInit.cancel();
-    };
-  }, [document]);
+    const renderKey = `${pdfDocument.fingerprints ?? pdfDocument.numPages}::${recolorKey}`;
+    if (lastRenderKeyRef.current === renderKey) {
+      console.log("[PdfHighlighter] skip duplicate setDocument", renderKey);
+      return;
+    }
+    findControllerRef.current = findControllerRef.current || new PDFFindController({
+      eventBus: eventBusRef.current,
+      linkService: linkServiceRef.current
+    });
+    viewerRef.current = viewerRef.current || new PDFViewer({
+      container: containerNodeRef.current,
+      eventBus: eventBusRef.current,
+      findController: findControllerRef.current,
+      textLayerMode: 2,
+      removePageBorders: true,
+      linkService: linkServiceRef.current
+    });
+    patchPageRenderRecolor(pdfDocument, () => recolorMapRef.current);
+    const isToggle = prevDocRef.current === pdfDocument;
+    prevDocRef.current = pdfDocument;
+    let scrollFraction = 0;
+    let savedScaleValue;
+    if (isToggle && viewerRef.current.container) {
+      const c = viewerRef.current.container;
+      const range = c.scrollHeight - c.clientHeight;
+      scrollFraction = range > 0 ? c.scrollTop / range : 0;
+      savedScaleValue = viewerRef.current.currentScaleValue ?? viewerRef.current.currentScale;
+    }
+    console.log("[PdfHighlighter] recolor active?", {
+      mode: resolvedTheme.mode,
+      hasMap: !!recolorMapRef.current,
+      palette: resolvedTheme.darkModeColors,
+      isToggle,
+      scrollFraction,
+      savedScaleValue
+    });
+    if (isToggle) {
+      const restoreView = () => {
+        eventBusRef.current.off("pagesinit", restoreView);
+        if (savedScaleValue != null && viewerRef.current) {
+          viewerRef.current.currentScaleValue = String(savedScaleValue);
+        }
+        requestAnimationFrame(() => {
+          const c = viewerRef.current?.container;
+          if (!c) return;
+          const range = c.scrollHeight - c.clientHeight;
+          c.scrollTop = scrollFraction * Math.max(0, range);
+          console.log("[PdfHighlighter] restored view after toggle", {
+            scrollFraction,
+            scrollTop: c.scrollTop,
+            scaleValue: viewerRef.current?.currentScaleValue
+          });
+        });
+      };
+      eventBusRef.current.on("pagesinit", restoreView);
+    }
+    lastRenderKeyRef.current = renderKey;
+    viewerRef.current.setDocument(pdfDocument);
+    linkServiceRef.current.setDocument(pdfDocument);
+    linkServiceRef.current.setViewer(viewerRef.current);
+    setIsViewerReady(true);
+  }, [pdfDocument, recolorKey]);
   useLayoutEffect2(() => {
     if (!containerNodeRef.current) return;
     resizeObserverRef.current = new ResizeObserver(handleScaleValue);
     resizeObserverRef.current.observe(containerNodeRef.current);
     const doc = containerNodeRef.current.ownerDocument;
-    eventBusRef.current.on("textlayerrendered", renderHighlightLayers);
+    eventBusRef.current.on("textlayerrendered", scheduleRenderHighlightLayers);
+    eventBusRef.current.on("pagerendered", scheduleRenderHighlightLayers);
     eventBusRef.current.on("pagesinit", handleScaleValue);
     doc.addEventListener("keydown", handleKeyDown);
-    renderHighlightLayers();
+    doc.addEventListener("copy", handleCopy, true);
+    scheduleRenderHighlightLayers();
     return () => {
       eventBusRef.current.off("pagesinit", handleScaleValue);
-      eventBusRef.current.off("textlayerrendered", renderHighlightLayers);
+      eventBusRef.current.off("pagerendered", scheduleRenderHighlightLayers);
+      eventBusRef.current.off("textlayerrendered", scheduleRenderHighlightLayers);
       doc.removeEventListener("keydown", handleKeyDown);
+      doc.removeEventListener("copy", handleCopy, true);
       resizeObserverRef.current?.disconnect();
+      renderRetryTimeoutsRef.current.forEach(clearTimeout);
+      renderRetryTimeoutsRef.current = [];
+      if (resumeScrollAwayTimeoutRef.current) {
+        clearTimeout(resumeScrollAwayTimeoutRef.current);
+        resumeScrollAwayTimeoutRef.current = null;
+      }
     };
   }, [selectionTip, highlights, onSelectionFinished]);
+  useEffect4(() => {
+    return () => {
+      for (const binding of Object.values(highlightBindingsRef.current))
+        unmountReactRoot(binding?.reactRoot);
+      for (const binding of Object.values(noteBindingsRef.current))
+        unmountReactRoot(binding?.reactRoot);
+    };
+  }, []);
+  const onPageChangeRef = useRef5(onPageChange);
+  onPageChangeRef.current = onPageChange;
+  const initialPageRef = useRef5(initialPage);
+  initialPageRef.current = initialPage;
+  const initialPageAppliedRef = useRef5(false);
+  const pendingInitialPageRef = useRef5(null);
+  useEffect4(() => {
+    const eventBus = eventBusRef.current;
+    const handlePageChanging = (evt) => {
+      if (pendingInitialPageRef.current != null) return;
+      onPageChangeRef.current?.(evt.pageNumber);
+    };
+    eventBus.on("pagechanging", handlePageChanging);
+    const handlePagesInit = () => {
+      if (initialPageAppliedRef.current) return;
+      initialPageAppliedRef.current = true;
+      const page = initialPageRef.current;
+      console.log("[PdfHighlighter] pagesinit, initialPage =", page);
+      if (!page || page <= 1) return;
+      pendingInitialPageRef.current = page;
+      let tries = 0;
+      let matches = 0;
+      const tick = () => {
+        const viewer = viewerRef.current;
+        if (!viewer || pendingInitialPageRef.current == null) return;
+        tries++;
+        if (viewer.currentPageNumber === page) {
+          matches++;
+        } else {
+          matches = 0;
+          try {
+            viewer.scrollPageIntoView({ pageNumber: page });
+          } catch (e) {
+            console.log("[PdfHighlighter] scrollPageIntoView threw", e);
+          }
+        }
+        if (matches >= 3) {
+          pendingInitialPageRef.current = null;
+          onPageChangeRef.current?.(page);
+          console.log("[PdfHighlighter] initialPage settled at", page);
+          return;
+        }
+        if (tries > 40) {
+          pendingInitialPageRef.current = null;
+          console.log("[PdfHighlighter] initialPage gave up at", page);
+          return;
+        }
+        setTimeout(tick, 50);
+      };
+      setTimeout(tick, 0);
+    };
+    eventBus.on("pagesinit", handlePagesInit);
+    return () => {
+      eventBus.off("pagechanging", handlePageChanging);
+      eventBus.off("pagesinit", handlePagesInit);
+      pendingInitialPageRef.current = null;
+    };
+  }, []);
+  const onZoomChangeRef = useRef5(onZoomChange);
+  onZoomChangeRef.current = onZoomChange;
+  useEffect4(() => {
+    const container = containerNodeRef.current;
+    if (!container || !isViewerReady) return;
+    const MIN_SCALE = 0.25;
+    const MAX_SCALE = 10;
+    const COMMIT_DELAY = 140;
+    const g = {
+      active: false,
+      startScale: 1,
+      startScrollLeft: 0,
+      startScrollTop: 0,
+      anchorX: 0,
+      anchorY: 0,
+      originX: 0,
+      originY: 0,
+      k: 1,
+      raf: 0,
+      commitTimer: 0
+    };
+    const pdfViewerEl = () => container.querySelector(".pdfViewer");
+    const clampK = (k) => Math.min(
+      MAX_SCALE / g.startScale,
+      Math.max(MIN_SCALE / g.startScale, k)
+    );
+    const begin = (anchorX, anchorY) => {
+      const viewer = viewerRef.current;
+      const el = pdfViewerEl();
+      if (!viewer || !el) return false;
+      g.active = true;
+      g.startScale = viewer.currentScale;
+      g.startScrollLeft = container.scrollLeft;
+      g.startScrollTop = container.scrollTop;
+      g.anchorX = anchorX;
+      g.anchorY = anchorY;
+      g.originX = container.scrollLeft + anchorX;
+      g.originY = container.scrollTop + anchorY;
+      g.k = 1;
+      el.style.transformOrigin = `${g.originX}px ${g.originY}px`;
+      el.style.willChange = "transform";
+      return true;
+    };
+    const previewRaf = () => {
+      g.raf = 0;
+      const el = pdfViewerEl();
+      if (el) el.style.transform = `scale(${g.k})`;
+    };
+    const preview = () => {
+      if (!g.raf) g.raf = requestAnimationFrame(previewRaf);
+    };
+    const commit = () => {
+      if (!g.active) return;
+      g.active = false;
+      if (g.raf) {
+        cancelAnimationFrame(g.raf);
+        g.raf = 0;
+      }
+      const viewer = viewerRef.current;
+      const el = pdfViewerEl();
+      if (el) {
+        el.style.transform = "";
+        el.style.transformOrigin = "";
+        el.style.willChange = "";
+      }
+      if (!viewer) return;
+      const finalScale = Math.min(
+        MAX_SCALE,
+        Math.max(MIN_SCALE, g.startScale * g.k)
+      );
+      const ratio = finalScale / g.startScale;
+      viewer.currentScaleValue = String(finalScale);
+      container.scrollLeft = g.originX * ratio - g.anchorX;
+      container.scrollTop = g.originY * ratio - g.anchorY;
+      onZoomChangeRef.current?.(finalScale);
+      console.log("[PdfHighlighter] pinch commit", {
+        from: g.startScale,
+        to: finalScale
+      });
+    };
+    const scheduleCommit = () => {
+      clearTimeout(g.commitTimer);
+      g.commitTimer = setTimeout(commit, COMMIT_DELAY);
+    };
+    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));
+      preview();
+      scheduleCommit();
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    const pointers = /* @__PURE__ */ new Map();
+    let startDist = 0;
+    const spread = () => {
+      const [a, b] = [...pointers.values()];
+      return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+    };
+    const onPointerDown = (e) => {
+      if (e.pointerType === "touch") pointers.set(e.pointerId, e);
+    };
+    const onPointerMove = (e) => {
+      if (!pointers.has(e.pointerId)) return;
+      pointers.set(e.pointerId, e);
+      if (pointers.size !== 2) return;
+      e.preventDefault();
+      const d = spread();
+      const [a, b] = [...pointers.values()];
+      const rect = container.getBoundingClientRect();
+      const cx = (a.clientX + b.clientX) / 2 - rect.left;
+      const cy = (a.clientY + b.clientY) / 2 - rect.top;
+      if (!g.active) {
+        startDist = d;
+        if (!begin(cx, cy)) return;
+        return;
+      }
+      g.k = clampK(d / startDist);
+      preview();
+    };
+    const onPointerUp = (e) => {
+      pointers.delete(e.pointerId);
+      if (pointers.size < 2 && g.active) {
+        startDist = 0;
+        commit();
+      }
+    };
+    container.addEventListener("pointerdown", onPointerDown);
+    container.addEventListener("pointermove", onPointerMove, { passive: false });
+    container.addEventListener("pointerup", onPointerUp);
+    container.addEventListener("pointercancel", onPointerUp);
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+      container.removeEventListener("pointerdown", onPointerDown);
+      container.removeEventListener("pointermove", onPointerMove);
+      container.removeEventListener("pointerup", onPointerUp);
+      container.removeEventListener("pointercancel", onPointerUp);
+      clearTimeout(g.commitTimer);
+      if (g.raf) cancelAnimationFrame(g.raf);
+      const el = pdfViewerEl();
+      if (el) {
+        el.style.transform = "";
+        el.style.transformOrigin = "";
+        el.style.willChange = "";
+      }
+    };
+  }, [isViewerReady]);
   const handleScroll = () => {
     onScrollAway && onScrollAway();
     scrolledToHighlightIdRef.current = null;
@@ -1358,26 +2022,46 @@ var PdfHighlighter = ({
       setTip(null);
     }
   };
+  const handleCopy = (event) => {
+    const container = containerNodeRef.current;
+    if (!container || !event.clipboardData) return;
+    const target = event.target;
+    const targetElement = target instanceof HTMLElement ? target : target instanceof Node ? target.parentElement : null;
+    if (targetElement && (targetElement.closest("input, textarea, [contenteditable='true']") || targetElement.closest(".PdfHighlighter__tip-container"))) {
+      return;
+    }
+    const selection = getWindow(container).getSelection();
+    const range = selection?.rangeCount ? selection.getRangeAt(0) : null;
+    if (!selection || selection.isCollapsed || !range || !container.contains(range.commonAncestorContainer)) {
+      return;
+    }
+    const text = selectionRef.current?.content.text?.trim() || selection.toString().split("\n").join(" ").trim();
+    if (!text) return;
+    event.clipboardData.setData("text/plain", text);
+    event.preventDefault();
+    event.stopPropagation();
+  };
   const handleScaleValue = () => {
     if (viewerRef.current) {
       viewerRef.current.currentScaleValue = pdfScaleValue.toString();
     }
   };
-  const renderHighlightLayer = (highlightBindings, pageNumber) => {
+  const renderHighlightLayer = (highlightBindings, pageNumber, shouldRenderHighlight) => {
     if (!viewerRef.current) return;
     highlightBindings.reactRoot.render(
       /* @__PURE__ */ React6.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React6.createElement(
         HighlightLayer,
         {
           highlightsByPage: group_highlights_by_page_default([
-            ...highlights,
+            ...highlightsRef.current,
             ghostHighlightRef.current
           ]),
           pageNumber,
           scrolledToHighlightId: scrolledToHighlightIdRef.current,
           viewer: viewerRef.current,
           highlightBindings,
-          children
+          shouldRenderHighlight,
+          children: childrenRef.current
         }
       ))
     );
@@ -1385,31 +2069,52 @@ var PdfHighlighter = ({
   const renderHighlightLayers = () => {
     if (!viewerRef.current) return;
     for (let pageNumber = 1; pageNumber <= pdfDocument.numPages; pageNumber++) {
-      const highlightBindings = highlightBindingsRef.current[pageNumber];
-      if (highlightBindings?.container?.isConnected) {
-        renderHighlightLayer(highlightBindings, pageNumber);
-      } else {
-        const { textLayer } = viewerRef.current.getPageView(pageNumber - 1) || {};
-        if (!textLayer) continue;
-        const highlightLayer = findOrCreateHighlightLayer(
-          textLayer.div
+      const { textLayer } = viewerRef.current.getPageView(pageNumber - 1) || {};
+      if (!textLayer) continue;
+      const textLayerDiv = textLayer.div;
+      const highlightBindings = ensurePersistentLayer(
+        highlightBindingsRef.current,
+        pageNumber,
+        textLayerDiv,
+        "PdfHighlighter__highlight-layer"
+      );
+      renderHighlightLayer(
+        highlightBindings,
+        pageNumber,
+        (highlight) => !isFreetextHighlight(highlight)
+      );
+      const pageEl = textLayerDiv.closest(".page");
+      if (pageEl) {
+        const noteBindings = ensurePersistentLayer(
+          noteBindingsRef.current,
+          pageNumber,
+          pageEl,
+          "PdfHighlighter__note-layer"
         );
-        if (highlightLayer) {
-          const reactRoot = createRoot(highlightLayer);
-          highlightBindingsRef.current[pageNumber] = {
-            reactRoot,
-            container: highlightLayer,
-            textLayer: textLayer.div
-            // textLayer.div for version >=3.0 and textLayer.textLayerDiv otherwise.
-          };
-          renderHighlightLayer(
-            highlightBindingsRef.current[pageNumber],
-            pageNumber
-          );
-        }
+        renderHighlightLayer(noteBindings, pageNumber, isFreetextHighlight);
       }
     }
   };
+  const scheduleRenderHighlightLayers = () => {
+    renderHighlightLayers();
+    renderRetryTimeoutsRef.current.forEach(clearTimeout);
+    renderRetryTimeoutsRef.current = [50, 150, 350, 750, 1200].map(
+      (delay) => setTimeout(renderHighlightLayers, delay)
+    );
+  };
+  const resumeScrollAwayListenerAfterNavigation = () => {
+    const container = viewerRef.current?.container;
+    if (!container) return;
+    if (resumeScrollAwayTimeoutRef.current) {
+      clearTimeout(resumeScrollAwayTimeoutRef.current);
+    }
+    resumeScrollAwayTimeoutRef.current = setTimeout(() => {
+      container.addEventListener("scroll", handleScroll, {
+        once: true
+      });
+      resumeScrollAwayTimeoutRef.current = null;
+    }, 1200);
+  };
   const isEditingOrHighlighting = () => {
     return Boolean(selectionRef.current) || Boolean(ghostHighlightRef.current) || isAreaSelectionInProgressRef.current || isEditInProgressRef.current;
   };
@@ -1441,32 +2146,72 @@ var PdfHighlighter = ({
   const scrollToHighlight = (highlight) => {
     const { boundingRect, usePdfCoordinates } = highlight.position;
     const pageNumber = boundingRect.pageNumber;
-    viewerRef.current.container.removeEventListener("scroll", handleScroll);
-    const pageViewport = viewerRef.current.getPageView(
-      pageNumber - 1
-    ).viewport;
-    viewerRef.current.scrollPageIntoView({
-      pageNumber,
-      destArray: [
-        null,
-        // null since we pass pageNumber already as an arg
-        { name: "XYZ" },
-        ...pageViewport.convertToPdfPoint(
-          0,
-          // Default x coord
-          scaledToViewport(boundingRect, pageViewport, usePdfCoordinates).top - SCROLL_MARGIN
-        ),
-        0
-        // Default z coord
-      ]
-    });
-    scrolledToHighlightIdRef.current = highlight.id;
-    renderHighlightLayers();
-    setTimeout(() => {
-      viewerRef.current.container.addEventListener("scroll", handleScroll, {
-        once: true
+    const viewer = viewerRef.current;
+    if (!viewer) return;
+    viewer.container.removeEventListener("scroll", handleScroll);
+    const pageView = viewer.getPageView(pageNumber - 1);
+    const container = viewer.container;
+    if (pageView?.div && pageView.viewport) {
+      const topInPage = scaledToViewport(
+        boundingRect,
+        pageView.viewport,
+        usePdfCoordinates
+      ).top;
+      const pageRect = pageView.div.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const target = container.scrollTop + (pageRect.top - containerRect.top) + topInPage - SCROLL_MARGIN;
+      const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      container.scrollTo({
+        top: Math.max(0, target),
+        behavior: prefersReducedMotion ? "auto" : "smooth"
       });
-    }, 100);
+    } else {
+      viewer.scrollPageIntoView({ pageNumber });
+    }
+    scrolledToHighlightIdRef.current = highlight.id;
+    scheduleRenderHighlightLayers();
+    resumeScrollAwayListenerAfterNavigation();
+  };
+  const dispatchFind = (query, findPrevious2, options = {}, type) => {
+    eventBusRef.current.dispatch("find", {
+      source: findControllerRef.current || viewerRef.current,
+      type,
+      query,
+      phraseSearch: true,
+      caseSensitive: options.caseSensitive ?? false,
+      entireWord: options.entireWord ?? false,
+      highlightAll: options.highlightAll ?? true,
+      findPrevious: findPrevious2,
+      matchDiacritics: options.matchDiacritics ?? false
+    });
+  };
+  const currentSearchRef = useRef5({
+    query: "",
+    options: {}
+  });
+  const search = (query, options = {}) => {
+    currentSearchRef.current = { query, options };
+    if (!query.trim()) {
+      clearSearch();
+      return;
+    }
+    dispatchFind(query, false, options);
+  };
+  const findNext = () => {
+    const { query, options } = currentSearchRef.current;
+    if (!query.trim()) return;
+    dispatchFind(query, false, options, "again");
+  };
+  const findPrevious = () => {
+    const { query, options } = currentSearchRef.current;
+    if (!query.trim()) return;
+    dispatchFind(query, true, options, "again");
+  };
+  const clearSearch = () => {
+    currentSearchRef.current = { query: "", options: {} };
+    eventBusRef.current.dispatch("findbarclose", {
+      source: findControllerRef.current || viewerRef.current
+    });
   };
   const pdfHighlighterUtils = {
     isEditingOrHighlighting,
@@ -1483,6 +2228,10 @@ var PdfHighlighter = ({
     updateTipPosition: updateTipPositionRef.current,
     getLinkService: () => linkServiceRef.current,
     getEventBus: () => eventBusRef.current,
+    search,
+    findNext,
+    findPrevious,
+    clearSearch,
     goToPage: (pageNumber) => {
       console.log("[PdfHighlighter] goToPage called with page:", pageNumber);
       const viewer = viewerRef.current;
@@ -1584,14 +2333,6 @@ var PdfHighlighter = ({
           .PdfHighlighter::-webkit-scrollbar-track-piece {
             background-color: ${resolvedTheme.scrollbarTrackColor};
           }
-          ${resolvedTheme.mode === "dark" ? `
-          .PdfHighlighter--dark .page {
-            filter: invert(${resolvedTheme.darkModeInvertIntensity}) hue-rotate(180deg) brightness(1.05);
-          }
-          .PdfHighlighter--dark .PdfHighlighter__highlight-layer {
-            filter: invert(${resolvedTheme.darkModeInvertIntensity}) hue-rotate(180deg) brightness(0.95);
-          }
-          ` : ""}
         `),
     isViewerReady && /* @__PURE__ */ React6.createElement(
       TipContainer,
@@ -1676,10 +2417,78 @@ var PdfHighlighter = ({
 import React7, {
   useState as useState6,
   useRef as useRef6,
-  useEffect as useEffect5
+  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) => {
+  if (!text) return;
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  document.execCommand("copy");
+  textarea.remove();
+};
+var extractTextFromHighlightRect = (anchor, rect) => {
+  const page = anchor.closest(".page");
+  const textLayer = page?.querySelector(".textLayer");
+  if (!page || !textLayer) return "";
+  const pageRect = page.getBoundingClientRect();
+  const targetRect = {
+    left: pageRect.left + rect.left,
+    top: pageRect.top + rect.top,
+    width: rect.width,
+    height: rect.height
+  };
+  const matches = Array.from(textLayer.querySelectorAll("span")).map((span) => {
+    const spanRect = span.getBoundingClientRect();
+    return {
+      text: span.textContent || "",
+      rect: {
+        left: spanRect.left,
+        top: spanRect.top,
+        width: spanRect.width,
+        height: spanRect.height
+      }
+    };
+  }).filter(({ text, rect: rect2 }) => text.trim() && intersects(rect2, targetRect)).sort((a, b) => {
+    const lineDelta = a.rect.top - b.rect.top;
+    return Math.abs(lineDelta) > 4 ? lineDelta : a.rect.left - b.rect.left;
+  });
+  return matches.map(({ text }) => text).join(" ").replace(/\s+/g, " ").trim();
+};
+
+// src/lib/highlight-config-layer.ts
+var findOrCreateHighlightConfigLayer = (anchor) => {
+  const pageLayer = anchor.closest(".page");
+  if (!pageLayer) return null;
+  const doc = getDocument(pageLayer);
+  let layer = Array.from(pageLayer.children).find(
+    (child) => child.classList.contains("PdfHighlighter__config-layer")
+  );
+  if (!layer) {
+    layer = doc.createElement("div");
+    layer.className = "PdfHighlighter__config-layer";
+    pageLayer.appendChild(layer);
+  }
+  return layer;
+};
+
+// 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" }));
@@ -1709,12 +2518,28 @@ var TextHighlight = ({
   onDelete,
   styleIcon,
   deleteIcon,
+  copyText,
   colorPresets = DEFAULT_COLOR_PRESETS
 }) => {
   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(() => {
+    if (containerRef.current) {
+      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+    }
+  }, []);
+  useEffect5(() => {
+    return () => {
+      if (copyResetTimeoutRef.current) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+    };
+  }, []);
   useEffect5(() => {
     if (!isStylePanelOpen) return;
     const handleClickOutside = (e) => {
@@ -1746,13 +2571,26 @@ var TextHighlight = ({
   const getPartStyle = (rect) => {
     const baseStyle = { ...rect, ...style };
     if (highlightStyle === "highlight") {
-      baseStyle.backgroundColor = highlightColor;
+      baseStyle.backgroundColor = `color-mix(in srgb, ${highlightColor} var(--hl-fill-alpha, 100%), transparent)`;
     } else {
       baseStyle.backgroundColor = "transparent";
       baseStyle.color = highlightColor;
     }
     return baseStyle;
   };
+  const handleCopy = async (event) => {
+    event.stopPropagation();
+    const text = copyText || highlight.content?.text || (containerRef.current && firstRect ? extractTextFromHighlightRect(containerRef.current, firstRect) : "");
+    await copyTextToClipboard(text);
+    setIsCopied(true);
+    if (copyResetTimeoutRef.current) {
+      window.clearTimeout(copyResetTimeoutRef.current);
+    }
+    copyResetTimeoutRef.current = window.setTimeout(() => {
+      setIsCopied(false);
+      copyResetTimeoutRef.current = null;
+    }, 1500);
+  };
   return /* @__PURE__ */ React7.createElement(
     "div",
     {
@@ -1760,107 +2598,120 @@ var TextHighlight = ({
       onContextMenu,
       ref: containerRef
     },
-    (onStyleChange || onDelete) && firstRect && /* @__PURE__ */ React7.createElement(
-      "div",
-      {
-        className: "TextHighlight__toolbar-wrapper",
-        style: {
-          position: "absolute",
-          left: firstRect.left,
-          top: firstRect.top - 28,
-          paddingBottom: 12
-        },
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false)
-      },
+    configLayer && (onStyleChange || onDelete) && firstRect && createPortal(
       /* @__PURE__ */ React7.createElement(
         "div",
         {
-          className: `TextHighlight__toolbar ${isHovered || isStylePanelOpen ? "TextHighlight__toolbar--visible" : ""}`
+          className: "TextHighlight__toolbar-wrapper",
+          style: {
+            position: "absolute",
+            left: firstRect.left,
+            top: firstRect.top - 28,
+            paddingBottom: 12
+          },
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false)
         },
-        onStyleChange && /* @__PURE__ */ React7.createElement(
-          "button",
+        /* @__PURE__ */ React7.createElement(
+          "div",
           {
-            className: "TextHighlight__style-button",
-            onClick: (e) => {
-              e.stopPropagation();
-              setIsStylePanelOpen(!isStylePanelOpen);
-            },
-            title: "Change style",
-            type: "button"
+            className: `TextHighlight__toolbar ${isHovered || isScrolledTo || isStylePanelOpen ? "TextHighlight__toolbar--visible" : ""}`
           },
-          styleIcon || /* @__PURE__ */ React7.createElement(DefaultStyleIcon, null)
+          onStyleChange && /* @__PURE__ */ React7.createElement(
+            "button",
+            {
+              className: "TextHighlight__style-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsStylePanelOpen(!isStylePanelOpen);
+              },
+              title: "Change style",
+              type: "button"
+            },
+            styleIcon || /* @__PURE__ */ React7.createElement(DefaultStyleIcon, null)
+          ),
+          /* @__PURE__ */ React7.createElement(
+            "button",
+            {
+              className: "TextHighlight__copy-button",
+              onClick: handleCopy,
+              title: isCopied ? "Copied" : "Copy text",
+              type: "button"
+            },
+            isCopied ? /* @__PURE__ */ React7.createElement(DefaultCopiedIcon, null) : /* @__PURE__ */ React7.createElement(DefaultCopyIcon, null)
+          ),
+          onDelete && /* @__PURE__ */ React7.createElement(
+            "button",
+            {
+              className: "TextHighlight__delete-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete();
+              },
+              title: "Delete",
+              type: "button"
+            },
+            deleteIcon || /* @__PURE__ */ React7.createElement(DefaultDeleteIcon, null)
+          )
         ),
-        onDelete && /* @__PURE__ */ React7.createElement(
-          "button",
+        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React7.createElement(
+          "div",
           {
-            className: "TextHighlight__delete-button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete();
-            },
-            title: "Delete",
-            type: "button"
+            className: "TextHighlight__style-panel",
+            ref: stylePanelRef,
+            onClick: (e) => e.stopPropagation()
           },
-          deleteIcon || /* @__PURE__ */ React7.createElement(DefaultDeleteIcon, null)
-        )
-      ),
-      isStylePanelOpen && onStyleChange && /* @__PURE__ */ React7.createElement(
-        "div",
-        {
-          className: "TextHighlight__style-panel",
-          ref: stylePanelRef,
-          onClick: (e) => e.stopPropagation()
-        },
-        /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-row" }, /* @__PURE__ */ React7.createElement("label", null, "Style"), /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-buttons" }, /* @__PURE__ */ React7.createElement(
-          "button",
-          {
-            type: "button",
-            className: `TextHighlight__style-type-button ${highlightStyle === "highlight" ? "active" : ""}`,
-            onClick: () => onStyleChange({ highlightStyle: "highlight" }),
-            title: "Highlight"
-          },
-          /* @__PURE__ */ React7.createElement(HighlightIcon, null)
-        ), /* @__PURE__ */ React7.createElement(
-          "button",
-          {
-            type: "button",
-            className: `TextHighlight__style-type-button ${highlightStyle === "underline" ? "active" : ""}`,
-            onClick: () => onStyleChange({ highlightStyle: "underline" }),
-            title: "Underline"
-          },
-          /* @__PURE__ */ React7.createElement(UnderlineIcon, null)
-        ), /* @__PURE__ */ React7.createElement(
-          "button",
-          {
-            type: "button",
-            className: `TextHighlight__style-type-button ${highlightStyle === "strikethrough" ? "active" : ""}`,
-            onClick: () => onStyleChange({ highlightStyle: "strikethrough" }),
-            title: "Strikethrough"
-          },
-          /* @__PURE__ */ React7.createElement(StrikethroughIcon, null)
-        ))),
-        /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-row" }, /* @__PURE__ */ React7.createElement("label", null, "Color"), /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__color-options" }, /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React7.createElement(
-          "button",
-          {
-            key: c,
-            type: "button",
-            className: `TextHighlight__color-preset ${highlightColor === c ? "active" : ""}`,
-            style: { backgroundColor: c },
-            onClick: () => onStyleChange({ highlightColor: c }),
-            title: c
-          }
-        ))), /* @__PURE__ */ React7.createElement(
-          "input",
-          {
-            type: "color",
-            value: highlightColor,
-            onChange: (e) => {
-              onStyleChange({ highlightColor: e.target.value });
+          /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-row" }, /* @__PURE__ */ React7.createElement("label", null, "Style"), /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-buttons" }, /* @__PURE__ */ React7.createElement(
+            "button",
+            {
+              type: "button",
+              className: `TextHighlight__style-type-button ${highlightStyle === "highlight" ? "active" : ""}`,
+              onClick: () => onStyleChange({ highlightStyle: "highlight" }),
+              title: "Highlight"
+            },
+            /* @__PURE__ */ React7.createElement(HighlightIcon, null)
+          ), /* @__PURE__ */ React7.createElement(
+            "button",
+            {
+              type: "button",
+              className: `TextHighlight__style-type-button ${highlightStyle === "underline" ? "active" : ""}`,
+              onClick: () => onStyleChange({ highlightStyle: "underline" }),
+              title: "Underline"
+            },
+            /* @__PURE__ */ React7.createElement(UnderlineIcon, null)
+          ), /* @__PURE__ */ React7.createElement(
+            "button",
+            {
+              type: "button",
+              className: `TextHighlight__style-type-button ${highlightStyle === "strikethrough" ? "active" : ""}`,
+              onClick: () => onStyleChange({ highlightStyle: "strikethrough" }),
+              title: "Strikethrough"
+            },
+            /* @__PURE__ */ React7.createElement(StrikethroughIcon, null)
+          ))),
+          /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__style-row" }, /* @__PURE__ */ React7.createElement("label", null, "Color"), /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__color-options" }, /* @__PURE__ */ React7.createElement("div", { className: "TextHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React7.createElement(
+            "button",
+            {
+              key: c,
+              type: "button",
+              className: `TextHighlight__color-preset ${highlightColor === c ? "active" : ""}`,
+              style: { backgroundColor: c },
+              onClick: () => onStyleChange({ highlightColor: c }),
+              title: c
             }
-          }
-        )))
-      )
+          ))), /* @__PURE__ */ React7.createElement(
+            "input",
+            {
+              type: "color",
+              value: highlightColor,
+              onChange: (e) => {
+                onStyleChange({ highlightColor: e.target.value });
+              }
+            }
+          )))
+        )
+      ),
+      configLayer
     ),
     /* @__PURE__ */ React7.createElement(
       "div",
@@ -1966,11 +2817,15 @@ var MonitoredHighlightContainer = ({
 import React10, {
   useState as useState7,
   useRef as useRef9,
-  useEffect as useEffect7
+  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 DEFAULT_COLOR_PRESETS2 = [
   "rgba(255, 226, 143, 1)",
   // Yellow (default)
@@ -1996,11 +2851,28 @@ var AreaHighlight = ({
   onDelete,
   styleIcon,
   deleteIcon,
+  copyText,
   colorPresets = DEFAULT_COLOR_PRESETS2
 }) => {
   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(() => {
+    if (containerRef.current) {
+      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+    }
+  }, []);
+  useEffect7(() => {
+    return () => {
+      if (copyResetTimeoutRef.current) {
+        window.clearTimeout(copyResetTimeoutRef.current);
+      }
+    };
+  }, []);
   useEffect7(() => {
     if (!isStylePanelOpen) return;
     const handleClickOutside = (e) => {
@@ -2020,87 +2892,117 @@ var AreaHighlight = ({
   const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
   const mergedStyle = {
     ...style,
-    backgroundColor: highlightColor
+    backgroundColor: `color-mix(in srgb, ${highlightColor} var(--hl-fill-alpha, 100%), transparent)`
+  };
+  const handleCopy = async (event) => {
+    event.stopPropagation();
+    const text = copyText || highlight.content?.text || (containerRef.current ? extractTextFromHighlightRect(
+      containerRef.current,
+      highlight.position.boundingRect
+    ) : "");
+    await copyTextToClipboard(text);
+    setIsCopied(true);
+    if (copyResetTimeoutRef.current) {
+      window.clearTimeout(copyResetTimeoutRef.current);
+    }
+    copyResetTimeoutRef.current = window.setTimeout(() => {
+      setIsCopied(false);
+      copyResetTimeoutRef.current = null;
+    }, 1500);
   };
   return /* @__PURE__ */ React10.createElement(
     "div",
     {
       className: `AreaHighlight ${highlightClass}`,
-      onContextMenu
+      onContextMenu,
+      ref: containerRef
     },
-    (onStyleChange || onDelete) && /* @__PURE__ */ React10.createElement(
-      "div",
-      {
-        className: "AreaHighlight__toolbar-wrapper",
-        style: {
-          position: "absolute",
-          left: highlight.position.boundingRect.left,
-          top: highlight.position.boundingRect.top - 28,
-          paddingBottom: 12
-        },
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false)
-      },
+    configLayer && (onStyleChange || onDelete) && createPortal2(
       /* @__PURE__ */ React10.createElement(
         "div",
         {
-          className: `AreaHighlight__toolbar ${isHovered || isStylePanelOpen ? "AreaHighlight__toolbar--visible" : ""}`
+          className: "AreaHighlight__toolbar-wrapper",
+          style: {
+            position: "absolute",
+            left: highlight.position.boundingRect.left,
+            top: highlight.position.boundingRect.top - 28,
+            paddingBottom: 12
+          },
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false)
         },
-        onStyleChange && /* @__PURE__ */ React10.createElement(
-          "button",
+        /* @__PURE__ */ React10.createElement(
+          "div",
           {
-            className: "AreaHighlight__style-button",
-            onClick: (e) => {
-              e.stopPropagation();
-              setIsStylePanelOpen(!isStylePanelOpen);
-            },
-            title: "Change color",
-            type: "button"
+            className: `AreaHighlight__toolbar ${isHovered || isScrolledTo || isStylePanelOpen ? "AreaHighlight__toolbar--visible" : ""}`
           },
-          styleIcon || /* @__PURE__ */ React10.createElement(DefaultStyleIcon2, null)
+          onStyleChange && /* @__PURE__ */ React10.createElement(
+            "button",
+            {
+              className: "AreaHighlight__style-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsStylePanelOpen(!isStylePanelOpen);
+              },
+              title: "Change color",
+              type: "button"
+            },
+            styleIcon || /* @__PURE__ */ React10.createElement(DefaultStyleIcon2, null)
+          ),
+          /* @__PURE__ */ React10.createElement(
+            "button",
+            {
+              className: "AreaHighlight__copy-button",
+              onClick: handleCopy,
+              title: isCopied ? "Copied" : "Copy text",
+              type: "button"
+            },
+            isCopied ? /* @__PURE__ */ React10.createElement(DefaultCopiedIcon2, null) : /* @__PURE__ */ React10.createElement(DefaultCopyIcon2, null)
+          ),
+          onDelete && /* @__PURE__ */ React10.createElement(
+            "button",
+            {
+              className: "AreaHighlight__delete-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete();
+              },
+              title: "Delete",
+              type: "button"
+            },
+            deleteIcon || /* @__PURE__ */ React10.createElement(DefaultDeleteIcon2, null)
+          )
         ),
-        onDelete && /* @__PURE__ */ React10.createElement(
-          "button",
+        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React10.createElement(
+          "div",
           {
-            className: "AreaHighlight__delete-button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete();
-            },
-            title: "Delete",
-            type: "button"
+            className: "AreaHighlight__style-panel",
+            ref: stylePanelRef,
+            onClick: (e) => e.stopPropagation()
           },
-          deleteIcon || /* @__PURE__ */ React10.createElement(DefaultDeleteIcon2, null)
+          /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__style-row" }, /* @__PURE__ */ React10.createElement("label", null, "Color"), /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__color-options" }, /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React10.createElement(
+            "button",
+            {
+              key: c,
+              type: "button",
+              className: `AreaHighlight__color-preset ${highlightColor === c ? "active" : ""}`,
+              style: { backgroundColor: c },
+              onClick: () => onStyleChange({ highlightColor: c }),
+              title: c
+            }
+          ))), /* @__PURE__ */ React10.createElement(
+            "input",
+            {
+              type: "color",
+              value: highlightColor,
+              onChange: (e) => {
+                onStyleChange({ highlightColor: e.target.value });
+              }
+            }
+          )))
         )
       ),
-      isStylePanelOpen && onStyleChange && /* @__PURE__ */ React10.createElement(
-        "div",
-        {
-          className: "AreaHighlight__style-panel",
-          ref: stylePanelRef,
-          onClick: (e) => e.stopPropagation()
-        },
-        /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__style-row" }, /* @__PURE__ */ React10.createElement("label", null, "Color"), /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__color-options" }, /* @__PURE__ */ React10.createElement("div", { className: "AreaHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React10.createElement(
-          "button",
-          {
-            key: c,
-            type: "button",
-            className: `AreaHighlight__color-preset ${highlightColor === c ? "active" : ""}`,
-            style: { backgroundColor: c },
-            onClick: () => onStyleChange({ highlightColor: c }),
-            title: c
-          }
-        ))), /* @__PURE__ */ React10.createElement(
-          "input",
-          {
-            type: "color",
-            value: highlightColor,
-            onChange: (e) => {
-              onStyleChange({ highlightColor: e.target.value });
-            }
-          }
-        )))
-      )
+      configLayer
     ),
     /* @__PURE__ */ React10.createElement(
       Rnd,
@@ -2157,6 +3059,8 @@ var DefaultDragIcon = () => /* @__PURE__ */ React11.createElement("svg", { width
 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" }));
 var DEFAULT_BACKGROUND_PRESETS = ["transparent", "#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"];
 var DEFAULT_TEXT_PRESETS = ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"];
 var FreetextHighlight = ({
@@ -2180,9 +3084,13 @@ var FreetextHighlight = ({
   backgroundColorPresets = DEFAULT_BACKGROUND_PRESETS,
   textColorPresets = DEFAULT_TEXT_PRESETS,
   onDelete,
-  deleteIcon
+  deleteIcon,
+  compact = false,
+  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);
@@ -2190,6 +3098,13 @@ var FreetextHighlight = ({
   useEffect8(() => {
     setText(highlight.content?.text || "");
   }, [highlight.content?.text]);
+  useEffect8(() => {
+    setIsExpanded(!compact);
+    setIsStylePanelOpen(false);
+    if (!compact) {
+      setIsEditing(false);
+    }
+  }, [compact]);
   useEffect8(() => {
     if (isEditing && textareaRef.current) {
       textareaRef.current.focus();
@@ -2213,10 +3128,14 @@ var FreetextHighlight = ({
   }, [isStylePanelOpen]);
   const highlightClass = isScrolledTo ? "FreetextHighlight--scrolledTo" : "";
   const editingClass = isEditing ? "FreetextHighlight--editing" : "";
-  const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+  const compactClass = compact ? "FreetextHighlight--compact" : "";
+  const isCompactCollapsed = compact && !isExpanded && !isEditing && !isStylePanelOpen;
+  const collapsedClass = isCompactCollapsed ? "FreetextHighlight--collapsed" : "";
+  const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}${isCompactCollapsed ? "collapsed" : "expanded"}`;
   const handleTextClick = (e) => {
     e.stopPropagation();
     if (!isEditing) {
+      setIsExpanded(true);
       setIsEditing(true);
       onEditStart?.();
     }
@@ -2251,7 +3170,7 @@ var FreetextHighlight = ({
   return /* @__PURE__ */ React11.createElement(
     "div",
     {
-      className: `FreetextHighlight ${highlightClass} ${editingClass}`,
+      className: `FreetextHighlight ${highlightClass} ${editingClass} ${compactClass} ${collapsedClass}`,
       onContextMenu
     },
     /* @__PURE__ */ React11.createElement(
@@ -2274,14 +3193,14 @@ var FreetextHighlight = ({
         default: {
           x: highlight.position.boundingRect.left,
           y: highlight.position.boundingRect.top,
-          width: highlight.position.boundingRect.width || 150,
-          height: highlight.position.boundingRect.height || 80
+          width: isCompactCollapsed ? compactSize : highlight.position.boundingRect.width || 150,
+          height: isCompactCollapsed ? compactSize : highlight.position.boundingRect.height || 80
         },
-        minWidth: 100,
-        minHeight: 50,
+        minWidth: isCompactCollapsed ? compactSize : 100,
+        minHeight: isCompactCollapsed ? compactSize : 50,
         key,
         bounds,
-        enableResizing: {
+        enableResizing: isCompactCollapsed ? false : {
           top: false,
           right: true,
           bottom: true,
@@ -2306,9 +3225,21 @@ var FreetextHighlight = ({
             onEditStart?.();
           }
         },
-        cancel: ".FreetextHighlight__text, .FreetextHighlight__input, .FreetextHighlight__edit-button, .FreetextHighlight__style-button, .FreetextHighlight__style-panel, .FreetextHighlight__delete-button"
+        cancel: ".FreetextHighlight__text, .FreetextHighlight__input, .FreetextHighlight__edit-button, .FreetextHighlight__style-button, .FreetextHighlight__style-panel, .FreetextHighlight__delete-button, .FreetextHighlight__collapse-button, .FreetextHighlight__compact-button"
       },
-      /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__container", style: containerStyle }, /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__toolbar" }, /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__drag-handle", title: "Drag to move" }, dragIcon || /* @__PURE__ */ React11.createElement(DefaultDragIcon, null)), /* @__PURE__ */ React11.createElement(
+      /* @__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",
@@ -2329,6 +3260,19 @@ var FreetextHighlight = ({
           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",
         {
@@ -2433,7 +3377,7 @@ var FreetextHighlight = ({
           onKeyDown: handleKeyDown,
           onClick: (e) => e.stopPropagation()
         }
-      ) : /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__text" }, text || "New note")))
+      ) : /* @__PURE__ */ React11.createElement("div", { className: "FreetextHighlight__text" }, text || "New note"))))
     )
   );
 };
@@ -2687,7 +3631,8 @@ var SignaturePad = ({
 };
 
 // src/components/DrawingHighlight.tsx
-import React14, { useState as useState9, useCallback as useCallback4, useEffect as useEffect10, useRef as useRef12 } from "react";
+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 = [
@@ -2734,7 +3679,15 @@ var DrawingHighlight = ({
 }) => {
   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(() => {
+    if (containerRef.current) {
+      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+    }
+  }, []);
   useEffect10(() => {
     if (!showStyleControls) return;
     const handleClickOutside = (e) => {
@@ -2787,8 +3740,78 @@ var DrawingHighlight = ({
     "div",
     {
       className: `DrawingHighlight ${highlightClass}`,
-      onContextMenu
+      onContextMenu,
+      ref: containerRef
     },
+    configLayer && createPortal3(
+      /* @__PURE__ */ React14.createElement(
+        "div",
+        {
+          className: `DrawingHighlight__toolbar DrawingHighlight__toolbar--floating ${isHovered || isScrolledTo || showStyleControls ? "DrawingHighlight__toolbar--visible" : ""}`,
+          style: {
+            left: highlight.position.boundingRect.left + 4,
+            top: highlight.position.boundingRect.top + 4
+          },
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false)
+        },
+        /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__drag-handle", title: "Drag to move" }, dragIcon || /* @__PURE__ */ React14.createElement(DefaultDragIcon3, null)),
+        strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React14.createElement(
+          "button",
+          {
+            type: "button",
+            className: "DrawingHighlight__style-button",
+            title: "Edit style",
+            onClick: (e) => {
+              e.stopPropagation();
+              setShowStyleControls(!showStyleControls);
+            }
+          },
+          /* @__PURE__ */ React14.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React14.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }))
+        ),
+        onDelete && /* @__PURE__ */ React14.createElement(
+          "button",
+          {
+            className: "DrawingHighlight__delete-button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            title: "Delete",
+            type: "button"
+          },
+          deleteIcon || /* @__PURE__ */ React14.createElement(DefaultDeleteIcon5, null)
+        ),
+        showStyleControls && strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__style-controls", ref: styleControlsRef }, /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__color-picker" }, DRAWING_COLORS.map((color) => /* @__PURE__ */ React14.createElement(
+          "button",
+          {
+            key: color,
+            type: "button",
+            className: `DrawingHighlight__color-button ${currentColor === color ? "active" : ""}`,
+            style: { backgroundColor: color },
+            onClick: (e) => {
+              e.stopPropagation();
+              handleColorChange(color);
+            },
+            title: `Color: ${color}`
+          }
+        ))), /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__width-picker" }, STROKE_WIDTHS.map((w) => /* @__PURE__ */ React14.createElement(
+          "button",
+          {
+            key: w.value,
+            type: "button",
+            className: `DrawingHighlight__width-button ${currentWidth === w.value ? "active" : ""}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              handleWidthChange(w.value);
+            },
+            title: w.label
+          },
+          w.label
+        ))))
+      ),
+      configLayer
+    ),
     /* @__PURE__ */ React14.createElement(
       Rnd4,
       {
@@ -2826,72 +3849,29 @@ var DrawingHighlight = ({
         key,
         bounds,
         lockAspectRatio: false,
-        dragHandleClassName: "DrawingHighlight__drag-handle",
         onClick: (event) => {
           event.stopPropagation();
           event.preventDefault();
         },
         style
       },
-      /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__container" }, /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__toolbar" }, /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__drag-handle", title: "Drag to move" }, dragIcon || /* @__PURE__ */ React14.createElement(DefaultDragIcon3, null)), strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React14.createElement(
-        "button",
-        {
-          type: "button",
-          className: "DrawingHighlight__style-button",
-          title: "Edit style",
-          onClick: (e) => {
-            e.stopPropagation();
-            setShowStyleControls(!showStyleControls);
-          }
-        },
-        /* @__PURE__ */ React14.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React14.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }))
-      ), onDelete && /* @__PURE__ */ React14.createElement(
-        "button",
-        {
-          className: "DrawingHighlight__delete-button",
-          onClick: (e) => {
-            e.stopPropagation();
-            onDelete();
-          },
-          title: "Delete",
-          type: "button"
-        },
-        deleteIcon || /* @__PURE__ */ React14.createElement(DefaultDeleteIcon5, null)
-      )), showStyleControls && strokes && strokes.length > 0 && onStyleChange && /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__style-controls", ref: styleControlsRef }, /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__color-picker" }, DRAWING_COLORS.map((color) => /* @__PURE__ */ React14.createElement(
-        "button",
-        {
-          key: color,
-          type: "button",
-          className: `DrawingHighlight__color-button ${currentColor === color ? "active" : ""}`,
-          style: { backgroundColor: color },
-          onClick: (e) => {
-            e.stopPropagation();
-            handleColorChange(color);
-          },
-          title: `Color: ${color}`
-        }
-      ))), /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__width-picker" }, STROKE_WIDTHS.map((w) => /* @__PURE__ */ React14.createElement(
-        "button",
+      /* @__PURE__ */ React14.createElement(
+        "div",
         {
-          key: w.value,
-          type: "button",
-          className: `DrawingHighlight__width-button ${currentWidth === w.value ? "active" : ""}`,
-          onClick: (e) => {
-            e.stopPropagation();
-            handleWidthChange(w.value);
-          },
-          title: w.label
+          className: "DrawingHighlight__container",
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false)
         },
-        w.label
-      )))), /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__content" }, imageUrl ? /* @__PURE__ */ React14.createElement(
-        "img",
-        {
-          src: imageUrl,
-          alt: "Drawing",
-          className: "DrawingHighlight__image",
-          draggable: false
-        }
-      ) : /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__placeholder" }, "No drawing")))
+        /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__content" }, imageUrl ? /* @__PURE__ */ React14.createElement(
+          "img",
+          {
+            src: imageUrl,
+            alt: "Drawing",
+            className: "DrawingHighlight__image",
+            draggable: false
+          }
+        ) : /* @__PURE__ */ React14.createElement("div", { className: "DrawingHighlight__placeholder" }, "No drawing"))
+      )
     )
   );
 };
@@ -2900,8 +3880,10 @@ var DrawingHighlight = ({
 import React15, {
   useState as useState10,
   useRef as useRef13,
-  useEffect as useEffect11
+  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" }));
@@ -2944,7 +3926,14 @@ var ShapeHighlight = ({
 }) => {
   const [isStylePanelOpen, setIsStylePanelOpen] = useState10(false);
   const [isHovered, setIsHovered] = useState10(false);
+  const [configLayer, setConfigLayer] = useState10(null);
   const stylePanelRef = useRef13(null);
+  const containerRef = useRef13(null);
+  useLayoutEffect6(() => {
+    if (containerRef.current) {
+      setConfigLayer(findOrCreateHighlightConfigLayer(containerRef.current));
+    }
+  }, []);
   useEffect11(() => {
     if (!isStylePanelOpen) return;
     const handleClickOutside = (e) => {
@@ -3056,92 +4045,96 @@ var ShapeHighlight = ({
     "div",
     {
       className: `ShapeHighlight ${highlightClass}`,
-      onContextMenu
+      onContextMenu,
+      ref: containerRef
     },
-    (onStyleChange || onDelete) && /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        className: "ShapeHighlight__toolbar-wrapper",
-        style: {
-          position: "absolute",
-          left: highlight.position.boundingRect.left,
-          top: highlight.position.boundingRect.top - 28,
-          paddingBottom: 12
-        },
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false)
-      },
+    configLayer && (onStyleChange || onDelete) && createPortal4(
       /* @__PURE__ */ React15.createElement(
         "div",
         {
-          className: `ShapeHighlight__toolbar ${isHovered || isStylePanelOpen ? "ShapeHighlight__toolbar--visible" : ""}`
+          className: "ShapeHighlight__toolbar-wrapper",
+          style: {
+            position: "absolute",
+            left: highlight.position.boundingRect.left,
+            top: highlight.position.boundingRect.top - 28,
+            paddingBottom: 12
+          },
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false)
         },
-        onStyleChange && /* @__PURE__ */ React15.createElement(
-          "button",
+        /* @__PURE__ */ React15.createElement(
+          "div",
           {
-            className: "ShapeHighlight__style-button",
-            onClick: (e) => {
-              e.stopPropagation();
-              setIsStylePanelOpen(!isStylePanelOpen);
-            },
-            title: "Change style",
-            type: "button"
+            className: `ShapeHighlight__toolbar ${isHovered || isScrolledTo || isStylePanelOpen ? "ShapeHighlight__toolbar--visible" : ""}`
           },
-          styleIcon || /* @__PURE__ */ React15.createElement(DefaultStyleIcon4, null)
+          onStyleChange && /* @__PURE__ */ React15.createElement(
+            "button",
+            {
+              className: "ShapeHighlight__style-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsStylePanelOpen(!isStylePanelOpen);
+              },
+              title: "Change style",
+              type: "button"
+            },
+            styleIcon || /* @__PURE__ */ React15.createElement(DefaultStyleIcon4, null)
+          ),
+          onDelete && /* @__PURE__ */ React15.createElement(
+            "button",
+            {
+              className: "ShapeHighlight__delete-button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete();
+              },
+              title: "Delete",
+              type: "button"
+            },
+            deleteIcon || /* @__PURE__ */ React15.createElement(DefaultDeleteIcon6, null)
+          )
         ),
-        onDelete && /* @__PURE__ */ React15.createElement(
-          "button",
+        isStylePanelOpen && onStyleChange && /* @__PURE__ */ React15.createElement(
+          "div",
           {
-            className: "ShapeHighlight__delete-button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onDelete();
-            },
-            title: "Delete",
-            type: "button"
+            className: "ShapeHighlight__style-panel",
+            ref: stylePanelRef,
+            onClick: (e) => e.stopPropagation()
           },
-          deleteIcon || /* @__PURE__ */ React15.createElement(DefaultDeleteIcon6, null)
+          /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__style-row" }, /* @__PURE__ */ React15.createElement("label", null, "Color"), /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__color-options" }, /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React15.createElement(
+            "button",
+            {
+              key: c,
+              type: "button",
+              className: `ShapeHighlight__color-preset ${strokeColor === c ? "active" : ""}`,
+              style: { backgroundColor: c },
+              onClick: () => onStyleChange({ strokeColor: c }),
+              title: c
+            }
+          ))), /* @__PURE__ */ React15.createElement(
+            "input",
+            {
+              type: "color",
+              value: strokeColor,
+              onChange: (e) => {
+                onStyleChange({ strokeColor: e.target.value });
+              }
+            }
+          ))),
+          /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__style-row" }, /* @__PURE__ */ React15.createElement("label", null, "Width"), /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__width-options" }, STROKE_WIDTHS2.map((w) => /* @__PURE__ */ React15.createElement(
+            "button",
+            {
+              key: w.value,
+              type: "button",
+              className: `ShapeHighlight__width-button ${strokeWidth === w.value ? "active" : ""}`,
+              onClick: () => onStyleChange({ strokeWidth: w.value }),
+              title: w.label
+            },
+            w.label
+          ))))
         )
       ),
-      isStylePanelOpen && onStyleChange && /* @__PURE__ */ React15.createElement(
-        "div",
-        {
-          className: "ShapeHighlight__style-panel",
-          ref: stylePanelRef,
-          onClick: (e) => e.stopPropagation()
-        },
-        /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__style-row" }, /* @__PURE__ */ React15.createElement("label", null, "Color"), /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__color-options" }, /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__color-presets" }, colorPresets.map((c) => /* @__PURE__ */ React15.createElement(
-          "button",
-          {
-            key: c,
-            type: "button",
-            className: `ShapeHighlight__color-preset ${strokeColor === c ? "active" : ""}`,
-            style: { backgroundColor: c },
-            onClick: () => onStyleChange({ strokeColor: c }),
-            title: c
-          }
-        ))), /* @__PURE__ */ React15.createElement(
-          "input",
-          {
-            type: "color",
-            value: strokeColor,
-            onChange: (e) => {
-              onStyleChange({ strokeColor: e.target.value });
-            }
-          }
-        ))),
-        /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__style-row" }, /* @__PURE__ */ React15.createElement("label", null, "Width"), /* @__PURE__ */ React15.createElement("div", { className: "ShapeHighlight__width-options" }, STROKE_WIDTHS2.map((w) => /* @__PURE__ */ React15.createElement(
-          "button",
-          {
-            key: w.value,
-            type: "button",
-            className: `ShapeHighlight__width-button ${strokeWidth === w.value ? "active" : ""}`,
-            onClick: () => onStyleChange({ strokeWidth: w.value }),
-            title: w.label
-          },
-          w.label
-        ))))
-      )
+      configLayer
     ),
     /* @__PURE__ */ React15.createElement(
       Rnd5,
@@ -3195,455 +4188,1033 @@ var ShapeHighlight = ({
     )
   );
 };
-
-// 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) => /* @__PURE__ */ React16.createElement("div", { style: { color: "black" } }, "Loading ", Math.floor(progress.loaded / progress.total * 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(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 12,
+        height: "100%",
+        color: "currentColor",
+        opacity: 0.7,
+        fontSize: 13
+      }
+    },
+    /* @__PURE__ */ React16.createElement(
+      "div",
+      {
+        style: {
+          width: 28,
+          height: 28,
+          border: "3px solid currentColor",
+          borderTopColor: "transparent",
+          borderRadius: "50%",
+          animation: "pdfloader-spin 0.8s linear infinite"
+        }
+      }
+    ),
+    /* @__PURE__ */ React16.createElement("div", null, pct !== null ? `Loading ${pct}%` : "Loading\u2026"),
+    /* @__PURE__ */ React16.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_ON_ERROR = (error) => {
   throw new Error(`Error loading PDF document: ${error.message}!`);
 };
-var DEFAULT_WORKER_SRC = "https://unpkg.com/pdfjs-dist@4.4.168/build/pdf.worker.min.mjs";
+var DEFAULT_WORKER_SRC = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url
+).toString();
+var CACHE_MAX = 3;
+var lruTick = 0;
+var docCache = /* @__PURE__ */ new Map();
+var evictIfNeeded = () => {
+  if (docCache.size <= CACHE_MAX) return;
+  let victimKey;
+  let oldest = Infinity;
+  for (const [key, entry] of docCache) {
+    if (entry.refs === 0 && entry.used < oldest) {
+      oldest = entry.used;
+      victimKey = key;
+    }
+  }
+  if (victimKey !== void 0) {
+    const victim = docCache.get(victimKey);
+    docCache.delete(victimKey);
+    victim.task.destroy();
+  }
+};
+var cacheKeyOf = (document2) => {
+  if (typeof document2 === "string") return document2;
+  if (document2 instanceof URL) return document2.href;
+  if (document2 && typeof document2 === "object" && !ArrayBuffer.isView(document2) && typeof document2.url === "string") {
+    return document2.url;
+  }
+  return null;
+};
+var stripUndefined = (obj) => {
+  const out = {};
+  for (const [k, v] of Object.entries(obj))
+    if (v !== void 0) out[k] = v;
+  return out;
+};
+var buildSource = (document2, perf) => {
+  const cleaned = stripUndefined(perf);
+  if (typeof document2 === "string" || document2 instanceof URL) {
+    return { url: document2, ...cleaned };
+  }
+  if (ArrayBuffer.isView(document2)) {
+    return document2;
+  }
+  return { ...cleaned, ...document2 };
+};
 var PdfLoader = ({
   document: document2,
   beforeLoad = DEFAULT_BEFORE_LOAD,
   errorMessage = DEFAULT_ERROR_MESSAGE,
   children,
   onError = DEFAULT_ON_ERROR,
-  workerSrc = DEFAULT_WORKER_SRC
+  workerSrc = DEFAULT_WORKER_SRC,
+  disableAutoFetch = true,
+  disableStream,
+  rangeChunkSize,
+  withCredentials,
+  httpHeaders,
+  enableCache = true
 }) => {
-  const pdfLoadingTaskRef = useRef14(null);
-  const pdfDocumentRef = useRef14(null);
+  const [pdfDocument, setPdfDocument] = useState11(null);
   const [error, setError] = useState11(null);
   const [loadingProgress, setLoadingProgress] = useState11(null);
+  const onErrorRef = useRef14(onError);
+  onErrorRef.current = onError;
+  const httpHeadersKey = httpHeaders ? JSON.stringify(httpHeaders) : "";
   useEffect12(() => {
     GlobalWorkerOptions.workerSrc = workerSrc;
-    pdfLoadingTaskRef.current = getDocument2(document2);
-    pdfLoadingTaskRef.current.onProgress = (progress) => {
-      setLoadingProgress(progress.loaded > progress.total ? null : progress);
-    };
-    pdfLoadingTaskRef.current.promise.then((pdfDocument) => {
-      pdfDocumentRef.current = pdfDocument;
-    }).catch((error2) => {
-      if (error2.message != "Worker was destroyed") {
-        setError(error2);
-        onError(error2);
+    let cancelled = false;
+    setPdfDocument(null);
+    setError(null);
+    setLoadingProgress(null);
+    const key = enableCache ? cacheKeyOf(document2) : null;
+    let entry;
+    const cached = key ? docCache.get(key) : void 0;
+    if (cached) {
+      console.log("[PdfLoader] cache hit", key);
+      entry = cached;
+      entry.refs += 1;
+      entry.used = ++lruTick;
+    } else {
+      console.log("[PdfLoader] loading", key ?? "(bytes)", {
+        disableAutoFetch
+      });
+      const task = getDocument2(
+        buildSource(document2, {
+          disableAutoFetch,
+          disableStream,
+          rangeChunkSize,
+          withCredentials,
+          httpHeaders
+        })
+      );
+      task.onProgress = (progress) => {
+        if (!cancelled)
+          setLoadingProgress(progress.loaded > progress.total ? null : progress);
+      };
+      entry = { task, promise: task.promise, refs: 1, used: ++lruTick };
+      if (key) {
+        docCache.set(key, entry);
+        evictIfNeeded();
       }
+    }
+    entry.promise.then((proxy) => {
+      if (!cancelled) setPdfDocument(proxy);
+    }).catch((err) => {
+      if (cancelled || err.message === "Worker was destroyed") return;
+      setError(err);
+      onErrorRef.current(err);
     }).finally(() => {
-      setLoadingProgress(null);
+      if (!cancelled) setLoadingProgress(null);
     });
     return () => {
-      if (pdfLoadingTaskRef.current) {
-        pdfLoadingTaskRef.current.destroy();
-      }
-      if (pdfDocumentRef.current) {
-        pdfDocumentRef.current.destroy();
+      cancelled = true;
+      entry.refs -= 1;
+      if (key && docCache.has(key)) {
+        entry.used = ++lruTick;
+        evictIfNeeded();
+      } else {
+        entry.task.destroy();
       }
     };
-  }, [document2]);
-  return error ? errorMessage(error) : loadingProgress ? beforeLoad(loadingProgress) : pdfDocumentRef.current && children(pdfDocumentRef.current);
+  }, [
+    document2,
+    workerSrc,
+    disableAutoFetch,
+    disableStream,
+    rangeChunkSize,
+    withCredentials,
+    httpHeadersKey,
+    enableCache
+  ]);
+  if (error) return errorMessage(error);
+  if (pdfDocument) return children(pdfDocument);
+  return beforeLoad(loadingProgress);
 };
 
-// src/lib/export-pdf.ts
-import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
-function parseColor(color) {
-  const rgbaMatch = color.match(
-    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
-  );
-  if (rgbaMatch) {
-    return {
-      r: parseInt(rgbaMatch[1]) / 255,
-      g: parseInt(rgbaMatch[2]) / 255,
-      b: parseInt(rgbaMatch[3]) / 255,
-      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
-    };
+// src/lib/extract-sentences.ts
+var DEFAULT_OPTIONS = {
+  pages: "all",
+  includePositions: false,
+  includeSources: false,
+  normalize: true,
+  locale: "en",
+  idPrefix: "",
+  includeTextUnitTypes: ["paragraph"],
+  readingOrder: "auto",
+  columnDetection: "auto"
+};
+var isTextItem = (item) => {
+  return typeof item === "object" && item !== null && "str" in item && typeof item.str === "string" && "transform" in item && Array.isArray(item.transform);
+};
+var shouldInsertSpace = (previous, next) => {
+  if (!previous || !next) return false;
+  if (/\s$/.test(previous) || /^\s/.test(next)) return false;
+  if (/^[,.;:!?)]/.test(next)) return false;
+  if (/[([{]$/.test(previous)) return false;
+  return true;
+};
+var getLastNonWhitespace = (text) => {
+  const match = text.match(/\S(?=\s*$)/);
+  return match?.[0] ?? "";
+};
+var getTrimmedChars = (text) => Array.from(text.trim());
+var getItemTextKind = (text) => {
+  if (!text.trim()) return "space";
+  if (/^[,.;:!?)\]}]+$/.test(text.trim())) return "punctuation";
+  const chars = getTrimmedChars(text);
+  if (chars.length === 1 && /[\p{L}\p{N}]/u.test(chars[0])) {
+    return "singleGlyph";
   }
-  const hex = color.replace("#", "");
-  if (hex.length === 3) {
-    return {
-      r: parseInt(hex[0] + hex[0], 16) / 255,
-      g: parseInt(hex[1] + hex[1], 16) / 255,
-      b: parseInt(hex[2] + hex[2], 16) / 255,
-      a: 1
-    };
+  if (/[\p{L}\p{N}]/u.test(text)) return "wordLike";
+  return "other";
+};
+var getMedianGlyphWidth = (textItems) => {
+  const glyphWidths = textItems.map((item) => {
+    const textLength = Math.max(getTrimmedChars(item.text).length, 1);
+    return item.rect.width / textLength;
+  }).filter((width) => Number.isFinite(width) && width > 0).sort((a, b) => a - b);
+  if (glyphWidths.length === 0) return 0;
+  return glyphWidths[Math.floor(glyphWidths.length / 2)];
+};
+var getHorizontalGap = (previousItem, nextItem, medianGlyphWidth) => {
+  const previousRight = previousItem.rect.left + previousItem.rect.width;
+  const gap = nextItem.rect.left - previousRight;
+  const zeroTolerance = Math.max(medianGlyphWidth * 0.08, 0.35);
+  return Math.abs(gap) <= zeroTolerance ? 0 : gap;
+};
+var shouldInsertSpaceBetweenItems = (previousItem, nextItem, currentText, averageHeight, medianGlyphWidth) => {
+  if (!previousItem || !currentText || !nextItem.text) return false;
+  if (/\s$/.test(currentText) || /^\s/.test(nextItem.text)) return false;
+  const previousChar = getLastNonWhitespace(currentText);
+  const nextChar = Array.from(nextItem.text.trim())[0] ?? "";
+  const previousKind = getItemTextKind(previousItem.text);
+  const nextKind = getItemTextKind(nextItem.text);
+  if (!nextChar) return false;
+  if (nextKind === "punctuation" || /^[,.;:!?)]/.test(nextChar)) return false;
+  if (/[([{]$/.test(previousChar)) return false;
+  const gap = getHorizontalGap(previousItem, nextItem, medianGlyphWidth);
+  if (gap < 0) return false;
+  const glyphWidth = Math.max(
+    medianGlyphWidth,
+    averageHeight * 0.18,
+    1
+  );
+  const singleGlyphPair = previousKind === "singleGlyph" && nextKind === "singleGlyph";
+  if (singleGlyphPair) {
+    return gap > Math.max(glyphWidth * 0.35, 1);
   }
-  if (hex.length === 6) {
-    return {
-      r: parseInt(hex.slice(0, 2), 16) / 255,
-      g: parseInt(hex.slice(2, 4), 16) / 255,
-      b: parseInt(hex.slice(4, 6), 16) / 255,
-      a: 1
-    };
+  if ((previousKind === "wordLike" || previousKind === "singleGlyph") && (nextKind === "wordLike" || nextKind === "singleGlyph")) {
+    return gap > Math.max(glyphWidth * 0.08, 0.35);
   }
-  return { r: 1, g: 0.89, b: 0.56, a: 0.5 };
-}
-function scaledToPdfPoints(scaled, page) {
-  const pdfWidth = page.getWidth();
-  const pdfHeight = page.getHeight();
-  const xRatio = pdfWidth / scaled.width;
-  const yRatio = pdfHeight / scaled.height;
-  const x = scaled.x1 * xRatio;
-  const width = (scaled.x2 - scaled.x1) * xRatio;
-  const height = (scaled.y2 - scaled.y1) * yRatio;
-  const y = pdfHeight - scaled.y1 * yRatio - height;
-  return { x, y, width, height };
-}
-function dataUrlToBytes(dataUrl) {
-  const base64 = dataUrl.split(",")[1];
-  const byteString = atob(base64);
-  const bytes = new Uint8Array(byteString.length);
-  for (let i = 0; i < byteString.length; i++) {
-    bytes[i] = byteString.charCodeAt(i);
+  return shouldInsertSpace(currentText, nextItem.text);
+};
+var appendTextItem = (currentText, item, previousItem, averageHeight, medianGlyphWidth) => {
+  return `${currentText}${shouldInsertSpaceBetweenItems(
+    previousItem,
+    item,
+    currentText,
+    averageHeight,
+    medianGlyphWidth
+  ) ? " " : ""}${item.text}`;
+};
+var getAverageItemHeight = (textItems) => {
+  const heights = textItems.map((item) => item.rect.height).filter((height) => height > 0).sort((a, b) => a - b);
+  if (heights.length === 0) return 0;
+  return heights[Math.floor(heights.length / 2)];
+};
+var areTextItemsOnSameLine = (previous, next, averageHeight) => {
+  const previousMiddle = previous.rect.top + previous.rect.height / 2;
+  const nextMiddle = next.rect.top + next.rect.height / 2;
+  const tolerance = Math.max(averageHeight * 0.45, 2);
+  return Math.abs(previousMiddle - nextMiddle) <= tolerance;
+};
+var getTextItemRect = (item, viewport, pageNumber) => {
+  const [, , , , x, y] = item.transform;
+  const width = Math.abs(item.width ?? 0);
+  const height = Math.abs(item.height ?? 0);
+  const [x1, y1, x2, y2] = viewport.convertToViewportRectangle([
+    x,
+    y,
+    x + width,
+    y + height
+  ]);
+  return {
+    left: Math.min(x1, x2),
+    top: Math.min(y1, y2),
+    width: Math.abs(x2 - x1),
+    height: Math.abs(y2 - y1),
+    pageNumber
+  };
+};
+var resolvePageNumbers = (pdfDocument, pages) => {
+  if (pages === "all" || pages === void 0) {
+    return Array.from({ length: pdfDocument.numPages }, (_, index) => index + 1);
   }
-  const type = dataUrl.includes("image/png") ? "png" : "jpg";
-  return { bytes, type };
-}
-function wrapText(text, font, fontSize, maxWidth) {
-  if (!text || maxWidth <= 0) return [];
-  const lines = [];
-  const paragraphs = text.split(/\n/);
-  for (const paragraph of paragraphs) {
-    if (!paragraph.trim()) {
-      lines.push("");
-      continue;
+  return [...new Set(pages)].filter((pageNumber) => pageNumber >= 1 && pageNumber <= pdfDocument.numPages).sort((a, b) => a - b);
+};
+var buildPageTextStream = (textItems) => {
+  let text = "";
+  const charItemIndexes = [];
+  const averageHeight = getAverageItemHeight(textItems);
+  const medianGlyphWidth = getMedianGlyphWidth(textItems);
+  let previousItem;
+  textItems.forEach((item) => {
+    if (!item.text) return;
+    if (shouldInsertSpaceBetweenItems(
+      previousItem,
+      item,
+      text,
+      averageHeight,
+      medianGlyphWidth
+    )) {
+      text += " ";
+      charItemIndexes.push(null);
     }
-    const words = paragraph.split(/\s+/);
-    let currentLine = "";
-    for (const word of words) {
-      const testLine = currentLine ? `${currentLine} ${word}` : word;
-      const testWidth = font.widthOfTextAtSize(testLine, fontSize);
-      if (testWidth <= maxWidth) {
-        currentLine = testLine;
-      } else {
-        if (currentLine) {
-          lines.push(currentLine);
-          currentLine = "";
-        }
-        if (font.widthOfTextAtSize(word, fontSize) > maxWidth) {
-          let remaining = word;
-          while (remaining.length > 0) {
-            let charCount = 1;
-            while (charCount < remaining.length && font.widthOfTextAtSize(remaining.substring(0, charCount + 1), fontSize) <= maxWidth) {
-              charCount++;
-            }
-            const chunk = remaining.substring(0, charCount);
-            remaining = remaining.substring(charCount);
-            if (remaining.length > 0) {
-              lines.push(chunk);
-            } else {
-              currentLine = chunk;
-            }
-          }
-        } else {
-          currentLine = word;
-        }
-      }
+    for (const char of item.text) {
+      text += char;
+      charItemIndexes.push(item.index);
     }
-    if (currentLine) lines.push(currentLine);
-  }
-  return lines;
-}
-function groupByPage(highlights) {
-  const map = /* @__PURE__ */ new Map();
-  for (const h of highlights) {
-    const pageNum = h.position.boundingRect.pageNumber;
-    if (!map.has(pageNum)) map.set(pageNum, []);
-    map.get(pageNum).push(h);
+    previousItem = item;
+  });
+  return { text, charItemIndexes };
+};
+var normalizePdfLigatures = (text) => {
+  return text.replace(/ffi/g, "ffi").replace(/ffl/g, "ffl").replace(/fi/g, "fi").replace(/fl/g, "fl").replace(/ff/g, "ff");
+};
+var cleanupPdfHyphenSpacing = (text) => {
+  return text.replace(
+    /\b([\p{L}\p{N}]{2,})\s+-\s+([\p{L}\p{N}]{2,})\b/gu,
+    "$1-$2"
+  );
+};
+var normalizePdfSentenceText = (text) => {
+  return cleanupPdfHyphenSpacing(normalizePdfLigatures(text)).replace(/(\p{L}+)-\s+(\p{L}+)/gu, "$1-$2").replace(/\[\s*([^\]]*?)\s*\]/g, (_, citation) => {
+    const normalizedCitation = citation.replace(/\s*,\s*/g, ", ").replace(/\s+/g, " ").trim();
+    return `[${normalizedCitation}]`;
+  }).replace(/\s+/g, " ").trim();
+};
+var splitPdfSentences = (text, locale = DEFAULT_OPTIONS.locale) => {
+  const segmenterConstructor = Intl.Segmenter;
+  if (segmenterConstructor) {
+    const segmenter = new segmenterConstructor(locale, {
+      granularity: "sentence"
+    });
+    return Array.from(segmenter.segment(text)).map((segment) => ({
+      text: segment.segment.trim(),
+      start: segment.index + segment.segment.search(/\S/),
+      end: segment.index + segment.segment.trimEnd().length
+    })).filter((sentence) => sentence.text.length > 0 && sentence.start >= 0);
   }
-  return map;
-}
-async function renderTextHighlight(page, highlight, options) {
-  const colorStr = highlight.highlightColor || options.textHighlightColor || "rgba(255, 226, 143, 0.5)";
-  const color = parseColor(colorStr);
-  const highlightStyle = highlight.highlightStyle || "highlight";
-  const rects = highlight.position.rects.length > 0 ? highlight.position.rects : [highlight.position.boundingRect];
-  for (const rect of rects) {
-    const { x, y, width, height } = scaledToPdfPoints(rect, page);
-    if (highlightStyle === "highlight") {
-      page.drawRectangle({
-        x,
-        y,
-        width,
-        height,
-        color: rgb(color.r, color.g, color.b),
-        opacity: color.a
-      });
-    } else if (highlightStyle === "underline") {
-      const lineThickness = Math.max(1, height * 0.1);
-      page.drawRectangle({
-        x,
-        y,
-        width,
-        height: lineThickness,
-        color: rgb(color.r, color.g, color.b),
-        opacity: color.a
-      });
-    } else if (highlightStyle === "strikethrough") {
-      const lineThickness = Math.max(1, height * 0.1);
-      const lineY = y + height / 2 - lineThickness / 2;
-      page.drawRectangle({
-        x,
-        y: lineY,
-        width,
-        height: lineThickness,
-        color: rgb(color.r, color.g, color.b),
-        opacity: color.a
+  const ranges = [];
+  let start = 0;
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (!/[.!?]/.test(char)) continue;
+    const nextText = text.slice(index + 1);
+    const nextNonSpace = nextText.match(/\S/);
+    const nextChar = nextNonSpace?.[0] ?? "";
+    const shouldSplit = nextChar === "" || /[A-Z([{"']/.test(nextChar);
+    if (!shouldSplit) continue;
+    const rawSentence = text.slice(start, index + 1);
+    const leadingWhitespace2 = rawSentence.search(/\S/);
+    const sentenceStart = start + Math.max(leadingWhitespace2, 0);
+    const sentenceText = rawSentence.trim();
+    if (sentenceText) {
+      ranges.push({
+        text: sentenceText,
+        start: sentenceStart,
+        end: start + rawSentence.trimEnd().length
       });
     }
+    start = index + 1;
   }
-}
-async function renderAreaHighlight(page, highlight, options) {
-  const colorStr = highlight.highlightColor || options.areaHighlightColor || "rgba(255, 226, 143, 0.5)";
-  const color = parseColor(colorStr);
-  const { x, y, width, height } = scaledToPdfPoints(
-    highlight.position.boundingRect,
-    page
-  );
-  page.drawRectangle({
-    x,
-    y,
-    width,
-    height,
-    color: rgb(color.r, color.g, color.b),
-    opacity: color.a
+  const finalRawSentence = text.slice(start);
+  const leadingWhitespace = finalRawSentence.search(/\S/);
+  const finalText = finalRawSentence.trim();
+  if (finalText) {
+    ranges.push({
+      text: finalText,
+      start: start + Math.max(leadingWhitespace, 0),
+      end: start + finalRawSentence.trimEnd().length
+    });
+  }
+  return ranges;
+};
+var getSentenceTextItemIndexes = (charItemIndexes, start, end) => {
+  const indexes = /* @__PURE__ */ new Set();
+  for (let index = start; index < end; index += 1) {
+    const itemIndex = charItemIndexes[index];
+    if (itemIndex !== null && itemIndex !== void 0) {
+      indexes.add(itemIndex);
+    }
+  }
+  return Array.from(indexes).sort((a, b) => a - b);
+};
+var getScaledPosition = (textItems, textItemIndexes, page) => {
+  const indexSet = new Set(textItemIndexes);
+  const rects = textItems.filter((item) => indexSet.has(item.index)).map((item) => item.rect).filter((rect) => rect.width > 0 && rect.height > 0);
+  if (rects.length === 0) return void 0;
+  const boundingRect = get_bounding_rect_default(rects);
+  return {
+    boundingRect: viewportToScaled(boundingRect, page),
+    rects: rects.map((rect) => viewportToScaled(rect, page))
+  };
+};
+var getTextItemsPosition = (textItems, textItemIndexes, page, includePositions) => {
+  return includePositions ? getScaledPosition(textItems, textItemIndexes, page) : void 0;
+};
+var getTextItemsBoundingRect = (textItems) => {
+  const rects = textItems.map((item) => item.rect).filter((rect) => rect.width > 0 && rect.height > 0);
+  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;
+    if (Math.abs(topDelta) > Math.max(averageHeight * 0.45, 2)) {
+      return topDelta;
+    }
+    return a.rect.left - b.rect.left;
   });
-}
-async function renderFreetextHighlight(page, highlight, options, font) {
-  const text = highlight.content?.text || "";
-  const textColor = parseColor(
-    highlight.color || options.defaultFreetextColor || "#333333"
-  );
-  const { x, y, width, height } = scaledToPdfPoints(
-    highlight.position.boundingRect,
-    page
-  );
-  const pdfHeight = page.getHeight();
-  const yRatio = pdfHeight / highlight.position.boundingRect.height;
-  const storedFontSize = parseInt(highlight.fontSize || "") || options.defaultFreetextFontSize || 14;
-  const fontSize = storedFontSize * yRatio;
-  console.log("Freetext export:", {
-    storedFontSize,
-    yRatio,
-    fontSize,
-    boxDimensions: { x, y, width, height },
-    text: text.substring(0, 50)
+};
+var groupTextItemsIntoLines = (textItems) => {
+  const averageHeight = getAverageItemHeight(textItems);
+  const sortedItems = getOrderedTextItems(textItems, "position");
+  const lines = [];
+  sortedItems.forEach((item) => {
+    const currentLine = lines[lines.length - 1];
+    const previousItem = currentLine?.[currentLine.length - 1];
+    if (currentLine && previousItem && areTextItemsOnSameLine(previousItem, item, averageHeight)) {
+      currentLine.push(item);
+      currentLine.sort((a, b) => a.rect.left - b.rect.left);
+      return;
+    }
+    lines.push([item]);
   });
-  const bgColorValue = highlight.backgroundColor || options.defaultFreetextBgColor || "#ffffc8";
-  if (bgColorValue !== "transparent") {
-    const bgColor = parseColor(bgColorValue);
-    page.drawRectangle({
-      x,
-      y,
-      width,
-      height,
-      color: rgb(bgColor.r, bgColor.g, bgColor.b),
-      opacity: bgColor.a
-    });
+  return lines;
+};
+var isLikelyBodyTextItem = (item, page) => {
+  const text = item.text.trim();
+  if (!text) return false;
+  if (item.rect.top < page.height * 0.12 && page.pageNumber === 1 || item.rect.top > page.height * 0.88) {
+    return false;
   }
-  const padding = 4 * yRatio;
-  const maxWidth = width - padding * 2;
-  const lineHeight = fontSize * 1.3;
-  if (maxWidth > 0 && text) {
-    const lines = wrapText(text, font, fontSize, maxWidth);
-    let currentY = y + height - fontSize - padding;
-    for (const line of lines) {
-      if (currentY < y + padding) break;
-      if (line.trim()) {
-        page.drawText(line, {
-          x: x + padding,
-          y: currentY,
-          size: fontSize,
-          font,
-          color: rgb(textColor.r, textColor.g, textColor.b)
-        });
-      }
-      currentY -= lineHeight;
+  if (isLikelyFootnoteOrReference(text)) return false;
+  return true;
+};
+var getColumnRanges = (textItems, page) => {
+  if (textItems.length < 24) return void 0;
+  const minLeft = Math.min(...textItems.map((item) => item.rect.left));
+  const maxRight = Math.max(
+    ...textItems.map((item) => item.rect.left + item.rect.width)
+  );
+  const pageSpan = maxRight - minLeft;
+  const binCount = 80;
+  const bins = Array.from({ length: binCount }, () => 0);
+  textItems.forEach((item) => {
+    const left = item.rect.left;
+    const right = item.rect.left + item.rect.width;
+    const startBin = Math.max(
+      0,
+      Math.floor((left - minLeft) / pageSpan * binCount)
+    );
+    const endBin = Math.min(
+      binCount - 1,
+      Math.ceil((right - minLeft) / pageSpan * binCount)
+    );
+    for (let index = startBin; index <= endBin; index += 1) {
+      bins[index] += 1;
+    }
+  });
+  const centerStart = Math.floor(binCount * 0.35);
+  const centerEnd = Math.ceil(binCount * 0.65);
+  let bestGapStart = -1;
+  let bestGapEnd = -1;
+  let currentGapStart = -1;
+  for (let index = centerStart; index <= centerEnd; index += 1) {
+    if (bins[index] === 0) {
+      if (currentGapStart === -1) currentGapStart = index;
+      continue;
+    }
+    if (currentGapStart !== -1 && index - currentGapStart > bestGapEnd - bestGapStart) {
+      bestGapStart = currentGapStart;
+      bestGapEnd = index;
     }
+    currentGapStart = -1;
   }
-}
-function transformToRawCoordinates(page, x, y, width, height) {
-  const rotation = page.getRotation().angle;
-  const pageWidth = page.getWidth();
-  const pageHeight = page.getHeight();
-  if (rotation === 90) {
+  if (currentGapStart !== -1 && centerEnd + 1 - currentGapStart > bestGapEnd - bestGapStart) {
+    bestGapStart = currentGapStart;
+    bestGapEnd = centerEnd + 1;
+  }
+  const gapBins = bestGapEnd - bestGapStart;
+  const gapWidth = gapBins / binCount * pageSpan;
+  const minGapWidth = Math.max(page.width * 0.035, 14);
+  if (bestGapStart < 0 || gapWidth < minGapWidth) return void 0;
+  const gapLeft = minLeft + bestGapStart / binCount * pageSpan;
+  const gapRight = minLeft + bestGapEnd / binCount * pageSpan;
+  const splitX = (gapLeft + gapRight) / 2;
+  const leftItems = textItems.filter(
+    (item) => item.rect.left + item.rect.width / 2 < splitX
+  );
+  const rightItems = textItems.filter(
+    (item) => item.rect.left + item.rect.width / 2 >= splitX
+  );
+  if (leftItems.length < 10 || rightItems.length < 10) return void 0;
+  const leftRange = {
+    left: Math.min(...leftItems.map((item) => item.rect.left)),
+    right: Math.max(...leftItems.map((item) => item.rect.left + item.rect.width))
+  };
+  const rightRange = {
+    left: Math.min(...rightItems.map((item) => item.rect.left)),
+    right: Math.max(...rightItems.map((item) => item.rect.left + item.rect.width))
+  };
+  const leftHeight = getAverageItemHeight(leftItems);
+  const rightHeight = getAverageItemHeight(rightItems);
+  if (leftHeight > 0 && rightHeight > 0 && Math.max(leftHeight, rightHeight) / Math.min(leftHeight, rightHeight) > 1.45) {
+    return void 0;
+  }
+  return [leftRange, rightRange];
+};
+var assignColumnsToPage = (page, columnDetection) => {
+  if (columnDetection === "none") {
     return {
-      x: y,
-      y: pageWidth - x - width,
-      width: height,
-      height: width
+      ...page,
+      textItems: page.textItems.map((item) => ({ ...item, columnIndex: 0 })),
+      columns: [
+        {
+          index: 0,
+          left: 0,
+          right: page.width,
+          width: page.width,
+          textItemIndexes: page.textItems.map((item) => item.index)
+        }
+      ]
     };
-  } else if (rotation === 180) {
+  }
+  const bodyItems = page.textItems.filter(
+    (item) => isLikelyBodyTextItem(item, page)
+  );
+  const ranges = getColumnRanges(bodyItems, page);
+  if (!ranges) {
     return {
-      x: pageWidth - x - width,
-      y: pageHeight - y - height,
-      width,
-      height
+      ...page,
+      textItems: page.textItems.map((item) => ({ ...item, columnIndex: 0 })),
+      columns: [
+        {
+          index: 0,
+          left: 0,
+          right: page.width,
+          width: page.width,
+          textItemIndexes: page.textItems.map((item) => item.index)
+        }
+      ]
     };
-  } else if (rotation === 270) {
+  }
+  const splitX = (ranges[0].right + ranges[1].left) / 2;
+  const textItems = page.textItems.map((item) => {
+    const centerX = item.rect.left + item.rect.width / 2;
     return {
-      x: pageHeight - y - height,
-      y: x,
-      width: height,
-      height: width
+      ...item,
+      columnIndex: centerX < splitX ? 0 : 1
     };
-  }
-  return { x, y, width, height };
-}
-async function renderImageHighlight(pdfDoc, page, highlight) {
-  const imageDataUrl = highlight.content?.image;
-  if (!imageDataUrl) return;
-  try {
-    const { bytes, type } = dataUrlToBytes(imageDataUrl);
-    const image = type === "png" ? await pdfDoc.embedPng(bytes) : await pdfDoc.embedJpg(bytes);
-    const visualCoords = scaledToPdfPoints(
-      highlight.position.boundingRect,
-      page
-    );
-    const rawCoords = transformToRawCoordinates(
-      page,
-      visualCoords.x,
-      visualCoords.y,
-      visualCoords.width,
-      visualCoords.height
+  });
+  const columns = ranges.map((range, index) => ({
+    index,
+    left: range.left,
+    right: range.right,
+    width: range.right - range.left,
+    textItemIndexes: textItems.filter((item) => item.columnIndex === index).map((item) => item.index)
+  }));
+  return { ...page, textItems, columns };
+};
+var isFullWidthBlock = (block, page, detectedColumnCount) => {
+  if (detectedColumnCount < 2) return false;
+  const textItems = block.flat();
+  const boundingRect = getTextItemsBoundingRect(textItems);
+  if (!boundingRect) return false;
+  return boundingRect.width > page.width * 0.72;
+};
+var buildBlocksForItems = (textItems, page) => {
+  const lines = groupTextItemsIntoLines(textItems);
+  const averageHeight = getAverageItemHeight(textItems);
+  const blocks = [];
+  lines.forEach((line) => {
+    const currentBlock = blocks[blocks.length - 1];
+    const previousLine = currentBlock?.[currentBlock.length - 1];
+    if (currentBlock && previousLine && !shouldStartNewBlock(previousLine, line, page, averageHeight)) {
+      currentBlock.push(line);
+      return;
+    }
+    blocks.push([line]);
+  });
+  return blocks;
+};
+var compareBlocksByPosition = (left, right) => {
+  const leftRect = getTextItemsBoundingRect(left.block.flat());
+  const rightRect = getTextItemsBoundingRect(right.block.flat());
+  return (leftRect?.top ?? 0) - (rightRect?.top ?? 0);
+};
+var compareBlocksByColumnReadingOrder = (left, right) => {
+  const columnDelta = (left.columnIndex ?? 0) - (right.columnIndex ?? 0);
+  if (columnDelta !== 0) return columnDelta;
+  return compareBlocksByPosition(left, right);
+};
+var buildTextUnit = ({
+  block,
+  columnIndex,
+  indexInPage,
+  includePositions,
+  idPrefix,
+  page,
+  shouldNormalize
+}) => {
+  const textItems = block.flat();
+  const rawText = block.map(getLineText).join(" ");
+  const textItemIndexes = textItems.map((item) => item.index);
+  const type = classifyTextUnit(rawText, textItemIndexes, page);
+  const position = getTextItemsPosition(
+    page.textItems,
+    textItemIndexes,
+    page,
+    includePositions
+  );
+  return {
+    id: `${idPrefix}p${page.pageNumber}-u${indexInPage}`,
+    type,
+    text: shouldNormalize ? normalizePdfSentenceText(rawText) : rawText.trim(),
+    rawText: rawText.trim(),
+    pageNumber: page.pageNumber,
+    indexInPage,
+    ...columnIndex !== void 0 ? { columnIndex } : {},
+    ...position ? { position } : {},
+    source: {
+      textItemIndexes
+    }
+  };
+};
+var getLineText = (line) => {
+  const averageHeight = getAverageItemHeight(line);
+  const medianGlyphWidth = getMedianGlyphWidth(line);
+  return line.reduce((text, item, index) => {
+    return appendTextItem(
+      text,
+      item,
+      line[index - 1],
+      averageHeight,
+      medianGlyphWidth
     );
-    console.log("Image export:", {
-      rotation: page.getRotation().angle,
-      visualCoords,
-      rawCoords
-    });
-    page.drawImage(image, {
-      x: rawCoords.x,
-      y: rawCoords.y,
-      width: rawCoords.width,
-      height: rawCoords.height
-    });
-  } catch (error) {
-    console.error("Failed to embed image:", error);
+  }, "");
+};
+var getLineRect = (line) => get_bounding_rect_default(line.map((item) => item.rect));
+var shouldStartNewBlock = (previousLine, nextLine, page, averageHeight) => {
+  const previousRect = getLineRect(previousLine);
+  const nextRect = getLineRect(nextLine);
+  const verticalGap = nextRect.top - (previousRect.top + previousRect.height);
+  const leftDelta = Math.abs(nextRect.left - previousRect.left);
+  const previousText = getLineText(previousLine).trim();
+  const nextText = getLineText(nextLine).trim();
+  if (verticalGap > Math.max(averageHeight * 1.15, 7)) return true;
+  if (leftDelta > page.width * 0.18) return true;
+  if (isLikelyStandaloneBlock(previousText) || isLikelyStandaloneBlock(nextText)) {
+    return true;
   }
-}
-async function renderShapeHighlight(page, highlight) {
-  const shapeType = highlight.content?.shape?.shapeType || highlight.shapeType || "rectangle";
-  const strokeColorStr = highlight.content?.shape?.strokeColor || highlight.strokeColor || "#000000";
-  const strokeWidth = highlight.content?.shape?.strokeWidth || highlight.strokeWidth || 2;
-  const color = parseColor(strokeColorStr);
-  const { x, y, width, height } = scaledToPdfPoints(
-    highlight.position.boundingRect,
-    page
+  return false;
+};
+var isLikelyStandaloneBlock = (text) => {
+  const normalizedText = normalizePdfSentenceText(text);
+  if (!normalizedText) return false;
+  if (isLikelySectionHeading(normalizedText)) return true;
+  if (isLikelyFootnoteOrReference(normalizedText)) return true;
+  return false;
+};
+var isLikelySectionHeading = (text) => {
+  if (text.length > 80) return false;
+  if (/^\d+(\.\d+)*\.?\s+[A-Z]/.test(text)) return true;
+  const letters = text.replace(/[^A-Za-z]/g, "");
+  if (letters.length < 3) return false;
+  const uppercaseLetters = text.replace(/[^A-Z]/g, "");
+  return uppercaseLetters.length / letters.length > 0.75;
+};
+var isLikelyFootnoteOrReference = (text) => {
+  return /^\d+\s*https?:\/\//i.test(text) || /^\[\d+\]/.test(text) || /https?:\/\/|doi\.org|arxiv\.org/i.test(text);
+};
+var isLikelyAuthor = (text) => {
+  return text.length <= 80 && !/[.!?]$/.test(text) && /^[A-Z][A-Za-z'.-]+(?:\s+[A-Z][A-Za-z'.-]+){1,4}$/.test(text);
+};
+var isLikelyAffiliation = (text) => {
+  return text.length <= 160 && /university|institute|department|school|college|faculty|laboratory|germany|usa|china|france|italy|spain|canada|japan|korea/i.test(
+    text
   );
-  switch (shapeType) {
-    case "rectangle":
-      page.drawRectangle({
-        x,
-        y,
-        width,
-        height,
-        borderColor: rgb(color.r, color.g, color.b),
-        borderWidth: strokeWidth,
-        opacity: color.a
-      });
-      break;
-    case "circle":
-      page.drawEllipse({
-        x: x + width / 2,
-        y: y + height / 2,
-        xScale: width / 2,
-        yScale: height / 2,
-        borderColor: rgb(color.r, color.g, color.b),
-        borderWidth: strokeWidth,
-        opacity: color.a
+};
+var classifyTextUnit = (rawText, textItemIndexes, page) => {
+  const text = normalizePdfSentenceText(rawText);
+  const textItems = page.textItems.filter(
+    (item) => textItemIndexes.includes(item.index)
+  );
+  const rects = textItems.map((item) => item.rect);
+  const boundingRect = rects.length > 0 ? get_bounding_rect_default(rects) : void 0;
+  const averagePageHeight = getAverageItemHeight(page.textItems);
+  const averageUnitHeight = getAverageItemHeight(textItems);
+  const isTopOfFirstPage = page.pageNumber === 1 && (boundingRect?.top ?? page.height) < page.height * 0.2;
+  const isBottomOfPage = (boundingRect?.top ?? 0) > page.height * 0.78;
+  const isLargeText = averagePageHeight > 0 && averageUnitHeight > averagePageHeight * 1.25;
+  const isCentered = boundingRect !== void 0 && Math.abs(boundingRect.left + boundingRect.width / 2 - page.width / 2) < page.width * 0.16;
+  if (isLikelyFootnoteOrReference(text) || isBottomOfPage && /^\d+\s/.test(text)) {
+    return text.includes("://") || /^\d+\s*https?:\/\//i.test(text) ? "footnote" : "reference";
+  }
+  if (isLikelySectionHeading(text)) return "heading";
+  if (isTopOfFirstPage && isLargeText && isCentered) return "title";
+  if (isTopOfFirstPage && isLikelyAuthor(text)) return "author";
+  if (isTopOfFirstPage && isLikelyAffiliation(text)) return "affiliation";
+  return "paragraph";
+};
+var extractTextUnitsFromPages = (pages, options = {}) => {
+  const includePositions = options.includePositions ?? DEFAULT_OPTIONS.includePositions;
+  const includeSources = options.includeSources ?? DEFAULT_OPTIONS.includeSources;
+  const shouldNormalize = options.normalize ?? DEFAULT_OPTIONS.normalize;
+  const idPrefix = options.idPrefix ?? DEFAULT_OPTIONS.idPrefix;
+  const readingOrder = options.readingOrder ?? DEFAULT_OPTIONS.readingOrder;
+  const columnDetection = options.columnDetection ?? DEFAULT_OPTIONS.columnDetection;
+  const units = [];
+  pages.forEach((page) => {
+    const pageWithColumns = assignColumnsToPage(page, columnDetection);
+    const detectedColumnCount = pageWithColumns.columns?.length ?? 1;
+    const columnIndexes = detectedColumnCount > 1 && readingOrder !== "document" ? pageWithColumns.columns?.map((column) => column.index) ?? [0] : [0];
+    const blocks = [];
+    if (readingOrder === "document") {
+      blocks.push(
+        ...buildBlocksForItems(pageWithColumns.textItems, pageWithColumns).map(
+          (block) => ({ block })
+        )
+      );
+    } else {
+      const allBlocks = columnIndexes.flatMap(
+        (columnIndex) => buildBlocksForItems(
+          pageWithColumns.textItems.filter(
+            (item) => item.columnIndex === columnIndex
+          ),
+          pageWithColumns
+        ).map((block) => ({ block, columnIndex }))
+      );
+      const fullWidthBlocks = allBlocks.filter(
+        ({ block }) => isFullWidthBlock(block, pageWithColumns, detectedColumnCount)
+      );
+      const columnBlocks = allBlocks.filter(
+        ({ block }) => !isFullWidthBlock(block, pageWithColumns, detectedColumnCount)
+      );
+      const topFullWidthBlocks = fullWidthBlocks.filter(({ block }) => {
+        const rect = getTextItemsBoundingRect(block.flat());
+        return (rect?.top ?? 0) < pageWithColumns.height * 0.3;
       });
-      break;
-    case "arrow": {
-      const startPt = highlight.content?.shape?.startPoint;
-      const endPt = highlight.content?.shape?.endPoint;
-      const startX = startPt ? x + startPt.x * width : x;
-      const startY = startPt ? y + (1 - startPt.y) * height : y + height / 2;
-      const endX = endPt ? x + endPt.x * width : x + width;
-      const endY = endPt ? y + (1 - endPt.y) * height : y + height / 2;
-      page.drawLine({
-        start: { x: startX, y: startY },
-        end: { x: endX, y: endY },
-        color: rgb(color.r, color.g, color.b),
-        thickness: strokeWidth,
-        opacity: color.a
+      const bottomFullWidthBlocks = fullWidthBlocks.filter(({ block }) => {
+        const rect = getTextItemsBoundingRect(block.flat());
+        return (rect?.top ?? 0) >= pageWithColumns.height * 0.3;
       });
-      const angle = Math.atan2(endY - startY, endX - startX);
-      const arrowSize = Math.min(15, width * 0.2, height * 0.4);
-      const arrowAngle = Math.PI / 6;
-      page.drawLine({
-        start: {
-          x: endX - arrowSize * Math.cos(angle - arrowAngle),
-          y: endY - arrowSize * Math.sin(angle - arrowAngle)
-        },
-        end: { x: endX, y: endY },
-        color: rgb(color.r, color.g, color.b),
-        thickness: strokeWidth,
-        opacity: color.a
+      blocks.push(
+        ...topFullWidthBlocks.sort(compareBlocksByPosition),
+        ...columnBlocks.sort(compareBlocksByColumnReadingOrder),
+        ...bottomFullWidthBlocks.sort(compareBlocksByPosition)
+      );
+    }
+    blocks.forEach(({ block, columnIndex }, indexInPage) => {
+      units.push(
+        buildTextUnit({
+          block,
+          columnIndex,
+          indexInPage,
+          includePositions,
+          idPrefix,
+          page: pageWithColumns,
+          shouldNormalize
+        })
+      );
+    });
+  });
+  if (!includeSources) {
+    return units.map(({ source: _source, ...rest }) => rest);
+  }
+  return units;
+};
+var extractTextUnits = async (pdfDocument, options = {}) => {
+  const resolvedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const pages = await extractPageTextItems(pdfDocument, {
+    pages: resolvedOptions.pages,
+    columnDetection: resolvedOptions.columnDetection
+  });
+  return extractTextUnitsFromPages(pages, resolvedOptions);
+};
+var extractPageTextItems = async (pdfDocument, options = {}) => {
+  const pageNumbers = resolvePageNumbers(pdfDocument, options.pages);
+  const columnDetection = options.columnDetection ?? DEFAULT_OPTIONS.columnDetection;
+  const extractedPages = [];
+  for (const pageNumber of pageNumbers) {
+    const page = await pdfDocument.getPage(pageNumber);
+    const viewport = page.getViewport({ scale: 1 });
+    const textContent = await page.getTextContent();
+    const textItems = [];
+    textContent.items.forEach((item, index) => {
+      if (!isTextItem(item) || item.str.length === 0) return;
+      textItems.push({
+        text: item.str,
+        index,
+        pageNumber,
+        rect: getTextItemRect(item, viewport, pageNumber)
       });
-      page.drawLine({
-        start: {
-          x: endX - arrowSize * Math.cos(angle + arrowAngle),
-          y: endY - arrowSize * Math.sin(angle + arrowAngle)
-        },
-        end: { x: endX, y: endY },
-        color: rgb(color.r, color.g, color.b),
-        thickness: strokeWidth,
-        opacity: color.a
+    });
+    extractedPages.push(assignColumnsToPage({
+      pageNumber,
+      width: viewport.width,
+      height: viewport.height,
+      textItems
+    }, columnDetection));
+  }
+  return extractedPages;
+};
+var extractSentences = async (pdfDocument, options = {}) => {
+  const resolvedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const pages = await extractPageTextItems(pdfDocument, {
+    pages: resolvedOptions.pages,
+    columnDetection: resolvedOptions.columnDetection
+  });
+  const textUnits = extractTextUnitsFromPages(pages, { ...resolvedOptions, includeSources: true });
+  const sentences = [];
+  let globalIndex = 0;
+  textUnits.filter((unit) => resolvedOptions.includeTextUnitTypes.includes(unit.type)).forEach((unit) => {
+    const page = pages.find((candidatePage) => candidatePage.pageNumber === unit.pageNumber);
+    if (!page) return;
+    const pageTextItemsByIndex = new Map(
+      page.textItems.map((item) => [item.index, item])
+    );
+    const stream = buildPageTextStream(
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      unit.source.textItemIndexes.map((textItemIndex) => pageTextItemsByIndex.get(textItemIndex)).filter((item) => item !== void 0)
+    );
+    if (!stream.text.trim()) return;
+    const sentenceRanges = splitPdfSentences(
+      stream.text,
+      resolvedOptions.locale
+    );
+    sentenceRanges.forEach((sentenceRange, indexInPage) => {
+      const textItemIndexes = getSentenceTextItemIndexes(
+        stream.charItemIndexes,
+        sentenceRange.start,
+        sentenceRange.end
+      );
+      const position = resolvedOptions.includePositions ? getScaledPosition(page.textItems, textItemIndexes, page) : void 0;
+      const id = `${resolvedOptions.idPrefix}p${page.pageNumber}-u${unit.indexInPage}-s${indexInPage}`;
+      const rawText = sentenceRange.text;
+      sentences.push({
+        id,
+        text: resolvedOptions.normalize ? normalizePdfSentenceText(rawText) : rawText,
+        rawText,
+        pageNumber: page.pageNumber,
+        indexInPage,
+        globalIndex,
+        ...unit.columnIndex !== void 0 ? { columnIndex: unit.columnIndex } : {},
+        ...position ? { position } : {},
+        ...resolvedOptions.includeSources ? { source: { startOffset: sentenceRange.start, endOffset: sentenceRange.end, textItemIndexes } } : {}
       });
-      break;
-    }
+      globalIndex += 1;
+    });
+  });
+  return sentences;
+};
+var sentenceToHighlight = (sentence, options = {}) => {
+  if (!sentence.position) {
+    throw new Error(
+      "Cannot convert sentence to highlight because it has no position. Call extractSentences with includePositions: true."
+    );
   }
-}
-async function exportPdf(pdfSource, highlights, options = {}) {
-  let pdfBytes;
-  if (typeof pdfSource === "string") {
-    const response = await fetch(pdfSource);
-    pdfBytes = await response.arrayBuffer();
-  } else {
-    pdfBytes = pdfSource instanceof Uint8Array ? pdfSource.buffer.slice(
-      pdfSource.byteOffset,
-      pdfSource.byteOffset + pdfSource.byteLength
-    ) : pdfSource;
+  return {
+    id: options.id ?? sentence.id,
+    type: "text",
+    content: { text: sentence.text },
+    position: sentence.position
+  };
+};
+var stripWhitespaceWithMap = (raw) => {
+  let stripped = "";
+  const map = [];
+  for (let i = 0; i < raw.length; i += 1) {
+    const c = raw[i];
+    if (/\s/.test(c)) continue;
+    let ch = c.toLowerCase();
+    if (ch === "\u2018" || ch === "\u2019") ch = "'";
+    else if (ch === "\u201C" || ch === "\u201D") ch = '"';
+    stripped += ch;
+    map.push(i);
+  }
+  return { stripped, map };
+};
+var boundedLevenshtein = (a, b, max) => {
+  const al = a.length;
+  const bl = b.length;
+  if (Math.abs(al - bl) > max) return max + 1;
+  let prev = new Array(bl + 1);
+  let curr = new Array(bl + 1);
+  for (let j = 0; j <= bl; j++) prev[j] = j;
+  for (let i = 1; i <= al; i++) {
+    curr[0] = i;
+    let rowMin = curr[0];
+    for (let j = 1; j <= bl; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      curr[j] = Math.min(prev[j] + 1, curr[j - 1] + 1, prev[j - 1] + cost);
+      if (curr[j] < rowMin) rowMin = curr[j];
+    }
+    if (rowMin > max) return max + 1;
+    [prev, curr] = [curr, prev];
   }
-  const pdfDoc = await PDFDocument.load(pdfBytes);
-  const pages = pdfDoc.getPages();
-  const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
-  const byPage = groupByPage(highlights);
-  const totalPages = byPage.size;
-  let currentPage = 0;
-  for (const [pageNum, pageHighlights] of byPage) {
-    const page = pages[pageNum - 1];
-    if (!page) continue;
-    for (const highlight of pageHighlights) {
-      switch (highlight.type) {
-        case "text":
-          await renderTextHighlight(page, highlight, options);
-          break;
-        case "area":
-          await renderAreaHighlight(page, highlight, options);
-          break;
-        case "freetext":
-          await renderFreetextHighlight(page, highlight, options, font);
-          break;
-        case "image":
-          await renderImageHighlight(pdfDoc, page, highlight);
-          break;
-        case "drawing":
-          await renderImageHighlight(pdfDoc, page, highlight);
-          break;
-        case "shape":
-          await renderShapeHighlight(page, highlight);
-          break;
-        default:
-          await renderAreaHighlight(page, highlight, options);
+  return prev[bl];
+};
+var fuzzyFind = (haystack, needle, maxDistance) => {
+  const len = needle.length;
+  if (len === 0) return -1;
+  const anchor = needle.slice(0, Math.min(8, len));
+  let best = -1;
+  let bestDist = maxDistance + 1;
+  let from = 0;
+  while (true) {
+    const at = haystack.indexOf(anchor, from);
+    if (at === -1) break;
+    for (let offset = -2; offset <= 2; offset++) {
+      const start = at + offset;
+      if (start < 0 || start + len > haystack.length) continue;
+      const window2 = haystack.slice(start, start + len);
+      const dist = boundedLevenshtein(needle, window2, bestDist - 1);
+      if (dist < bestDist) {
+        bestDist = dist;
+        best = start;
+        if (dist === 0) return best;
       }
     }
-    currentPage++;
-    options.onProgress?.(currentPage, totalPages);
+    from = at + 1;
   }
-  return pdfDoc.save();
-}
+  return bestDist <= maxDistance ? best : -1;
+};
+var rectsForRange = (items, itemStarts, start, end, pageNumber) => {
+  const rects = [];
+  for (let k = 0; k < items.length; k++) {
+    const itemStart = itemStarts[k];
+    const item = items[k];
+    const len = item.text.length;
+    if (len === 0) continue;
+    const itemEnd = itemStart + len;
+    const a = Math.max(start, itemStart);
+    const b = Math.min(end, itemEnd);
+    if (b <= a) continue;
+    const { left, top, width, height } = item.rect;
+    if (!(width > 0) || !(height > 0)) continue;
+    const s = (a - itemStart) / len;
+    const e = (b - itemStart) / len;
+    rects.push({
+      left: left + s * width,
+      top,
+      width: (e - s) * width,
+      height,
+      pageNumber
+    });
+  }
+  rects.sort((p, q) => p.top - q.top || p.left - q.left);
+  const merged = [];
+  for (const r of rects) {
+    const last = merged[merged.length - 1];
+    if (last && Math.abs(last.top - r.top) < Math.max(2, r.height * 0.4) && r.left - (last.left + last.width) < Math.max(4, r.height * 0.6)) {
+      const right = Math.max(last.left + last.width, r.left + r.width);
+      last.left = Math.min(last.left, r.left);
+      last.width = right - last.left;
+      last.height = Math.max(last.height, r.height);
+    } else {
+      merged.push({ ...r });
+    }
+  }
+  return merged;
+};
+var getTextPosition = async (pdfDocument, query, options = {}) => {
+  const { stripped: needle } = stripWhitespaceWithMap(query);
+  if (!needle) return null;
+  const allowFuzzy = options.fuzzy ?? true;
+  const maxDistance = Math.max(2, Math.floor(needle.length * 0.15));
+  const pages = await extractPageTextItems(pdfDocument, {
+    pages: options.pages ?? "all"
+  });
+  for (const page of pages) {
+    const items = page.textItems.filter((it) => it.text).map((it) => ({ text: it.text, rect: it.rect }));
+    if (items.length === 0) continue;
+    const itemStarts = [];
+    let raw = "";
+    for (const it of items) {
+      itemStarts.push(raw.length);
+      raw += it.text;
+    }
+    const { stripped, map } = stripWhitespaceWithMap(raw);
+    let at = stripped.indexOf(needle);
+    let confidence = "exact";
+    if (at === -1 && allowFuzzy) {
+      at = fuzzyFind(stripped, needle, maxDistance);
+      confidence = "fuzzy";
+    }
+    if (at === -1) continue;
+    const rawStart = map[at];
+    const rawEnd = map[Math.min(at + needle.length - 1, map.length - 1)] + 1;
+    const rects = rectsForRange(
+      items,
+      itemStarts,
+      rawStart,
+      rawEnd,
+      page.pageNumber
+    );
+    if (rects.length === 0) continue;
+    const boundingRect = get_bounding_rect_default(rects);
+    return {
+      position: {
+        boundingRect: viewportToScaled(boundingRect, page),
+        rects: rects.map((r) => viewportToScaled(r, page))
+      },
+      pageNumber: page.pageNumber,
+      matchedText: raw.slice(rawStart, rawEnd),
+      confidence
+    };
+  }
+  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";
@@ -4078,13 +5649,13 @@ var OutlineItem = ({
   const defaultExpandIconStyle = {
     width: 12,
     height: 12,
-    color: "#64748b"
+    color: "var(--lp-muted, #64748b)"
   };
   const defaultActiveIndicatorStyle = {
     width: 6,
     height: 6,
     borderRadius: "50%",
-    backgroundColor: "#3b82f6",
+    backgroundColor: "var(--lp-accent, #3b82f6)",
     flexShrink: 0
   };
   const defaultTitleStyle = {
@@ -4095,23 +5666,23 @@ var OutlineItem = ({
     fontSize: "13px",
     fontWeight: 400,
     fontStyle: item.italic ? "italic" : "normal",
-    color: "#475569",
+    color: "var(--lp-text, #475569)",
     lineHeight: 1.4
   };
   const defaultTitleActiveStyle = {
     fontWeight: 500,
-    color: "#1e40af"
+    color: "var(--lp-accent, #1e40af)"
   };
   const defaultPageNumberStyle = {
     fontSize: "11px",
-    color: "#94a3b8",
+    color: "var(--lp-muted, #94a3b8)",
     flexShrink: 0,
     fontVariantNumeric: "tabular-nums",
     minWidth: "20px",
     textAlign: "right"
   };
   const defaultPageNumberActiveStyle = {
-    color: "#3b82f6"
+    color: "var(--lp-accent, #3b82f6)"
   };
   const defaultChildrenContainerStyle = {
     position: "relative"
@@ -4119,7 +5690,7 @@ var OutlineItem = ({
   const containerStyle = {
     ...defaultContainerStyle,
     ...styles?.container,
-    ...isHovered && !isActive ? { backgroundColor: "#f8fafc", ...styles?.containerHover } : {},
+    ...isHovered && !isActive ? { backgroundColor: "var(--lp-hover, #f8fafc)", ...styles?.containerHover } : {},
     ...isActive ? styles?.containerActive : {}
   };
   const expandButtonStyle = {
@@ -4188,7 +5759,7 @@ var OutlineItem = ({
         },
         style: expandButtonStyle,
         onMouseEnter: (e) => {
-          e.currentTarget.style.backgroundColor = "#e5e7eb";
+          e.currentTarget.style.backgroundColor = "var(--lp-hover, #e5e7eb)";
         },
         onMouseLeave: (e) => {
           e.currentTarget.style.backgroundColor = "transparent";
@@ -4245,13 +5816,13 @@ var DocumentOutline = ({
   const defaultLoadingSpinnerStyle = {
     width: 28,
     height: 28,
-    color: "#94a3b8",
+    color: "var(--lp-muted, #94a3b8)",
     marginBottom: 12,
     animation: "spin 1s linear infinite"
   };
   const defaultLoadingTextStyle = {
     fontSize: 13,
-    color: "#64748b"
+    color: "var(--lp-muted, #64748b)"
   };
   const defaultEmptyContainerStyle = {
     display: "flex",
@@ -4264,7 +5835,7 @@ var DocumentOutline = ({
     width: 56,
     height: 56,
     borderRadius: "50%",
-    backgroundColor: "#f1f5f9",
+    backgroundColor: "var(--lp-hover, #f1f5f9)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -4273,17 +5844,17 @@ var DocumentOutline = ({
   const defaultEmptyIconStyle = {
     width: 28,
     height: 28,
-    color: "#94a3b8"
+    color: "var(--lp-muted, #94a3b8)"
   };
   const defaultEmptyTitleStyle = {
     fontSize: 14,
     fontWeight: 500,
-    color: "#475569",
+    color: "var(--lp-text, #475569)",
     marginBottom: 4
   };
   const defaultEmptyDescriptionStyle = {
     fontSize: 13,
-    color: "#94a3b8",
+    color: "var(--lp-muted, #94a3b8)",
     textAlign: "center"
   };
   const defaultContainerStyle = {
@@ -4395,7 +5966,7 @@ var ThumbnailItem = React19.memo(({
     width: "85%",
     aspectRatio: "8.5 / 11",
     // Standard page aspect ratio
-    backgroundColor: "#ffffff",
+    backgroundColor: "var(--lp-bg, #ffffff)",
     borderRadius: "4px",
     overflow: "hidden",
     boxShadow: isActive ? "0 4px 12px rgba(59, 130, 246, 0.25)" : isHovered ? "0 4px 12px rgba(0, 0, 0, 0.12)" : "0 1px 3px rgba(0, 0, 0, 0.08)",
@@ -4405,7 +5976,7 @@ var ThumbnailItem = React19.memo(({
     marginTop: "6px",
     fontSize: "11px",
     fontWeight: 500,
-    color: isActive ? "#3b82f6" : "#6b7280",
+    color: isActive ? "var(--lp-accent, #3b82f6)" : "var(--lp-muted, #6b7280)",
     transition: "color 0.15s ease"
   };
   return /* @__PURE__ */ React19.createElement(
@@ -4437,7 +6008,7 @@ var ThumbnailItem = React19.memo(({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#f9fafb"
+          backgroundColor: "var(--lp-hover, #f9fafb)"
         }
       },
       /* @__PURE__ */ React19.createElement(
@@ -4446,7 +6017,7 @@ var ThumbnailItem = React19.memo(({
           style: {
             width: 24,
             height: 24,
-            color: "#9ca3af",
+            color: "var(--lp-muted, #9ca3af)",
             animation: "spin 1s linear infinite"
           }
         }
@@ -4487,7 +6058,7 @@ var ThumbnailItem = React19.memo(({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#f9fafb"
+          backgroundColor: "var(--lp-hover, #f9fafb)"
         }
       },
       /* @__PURE__ */ React19.createElement(
@@ -4496,7 +6067,7 @@ var ThumbnailItem = React19.memo(({
           style: {
             fontSize: 24,
             fontWeight: 300,
-            color: "#d1d5db"
+            color: "var(--lp-muted, #d1d5db)"
           }
         },
         pageNumber
@@ -4553,7 +6124,7 @@ var ThumbnailPanel = ({
           padding: "48px 16px"
         }
       },
-      /* @__PURE__ */ React20.createElement("p", { style: { fontSize: 13, color: "#9ca3af" } }, "No pages to display")
+      /* @__PURE__ */ React20.createElement("p", { style: { fontSize: 13, color: "var(--lp-muted, #9ca3af)" } }, "No pages to display")
     );
   }
   return /* @__PURE__ */ React20.createElement(
@@ -4627,6 +6198,14 @@ var defaultTheme = {
   mutedTextColor: "#6b7280",
   hoverBackgroundColor: "#f9fafb"
 };
+var defaultDarkTheme2 = {
+  backgroundColor: "#1f1d1b",
+  borderColor: "#3a3733",
+  accentColor: "#7aa2f7",
+  textColor: "#eae6e0",
+  mutedTextColor: "#a8a29a",
+  hoverBackgroundColor: "#2a2724"
+};
 var LeftPanel = ({
   pdfDocument,
   viewer = null,
@@ -4645,6 +6224,7 @@ var LeftPanel = ({
   onPageSelect,
   thumbnailWidth = 180,
   children,
+  mode = "light",
   theme: userTheme,
   showFooter = true,
   showToggleButton = true,
@@ -4659,7 +6239,13 @@ var LeftPanel = ({
   outlineItemStyles,
   outlineItemClassNames
 }) => {
-  const theme = useMemo3(() => ({ ...defaultTheme, ...userTheme }), [userTheme]);
+  const theme = useMemo3(
+    () => ({
+      ...mode === "dark" ? defaultDarkTheme2 : defaultTheme,
+      ...userTheme
+    }),
+    [mode, userTheme]
+  );
   const [internalIsOpen, setInternalIsOpen] = useState17(true);
   const [activeTab, setActiveTab] = useState17(defaultTab);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -4971,6 +6557,12 @@ var LeftPanel = ({
     )
   ));
 };
+
+// src/index.ts
+var exportPdf = async (...args) => {
+  const { exportPdf: exportPdf2 } = await import("./export-pdf-W2QGWADM.js");
+  return exportPdf2(...args);
+};
 export {
   AreaHighlight,
   DocumentOutline,
@@ -4990,7 +6582,12 @@ export {
   ThumbnailItem,
   ThumbnailPanel,
   exportPdf,
+  extractPageTextItems,
+  extractSentences,
+  extractTextUnits,
+  getTextPosition,
   scaledPositionToViewport,
+  sentenceToHighlight,
   useDocumentOutline,
   useHighlightContainerContext,
   useLeftPanelContext,