react-pdf-highlighter-plus 1.1.4 → 1.2.0

package/dist/esm/index.js

@@ -87,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) => {
@@ -292,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, {
@@ -1126,41 +1433,79 @@ var 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 findOrCreateNoteLayer = (textLayer) => {
-  const pageLayer = textLayer.closest(".page");
-  const container = pageLayer;
-  if (!container) return null;
-  const doc = getDocument(container);
-  let layer = Array.from(container.children).find(
-    (child) => child.classList.contains("PdfHighlighter__note-layer")
-  );
-  if (!layer && container.children.length) {
-    layer = doc.createElement("div");
-    layer.className = "PdfHighlighter__note-layer";
-    container.appendChild(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 layer;
+  return binding;
 };
 var isFreetextHighlight = (highlight) => "type" in highlight && highlight.type === "freetext";
 var disableTextSelection = (viewer, flag) => {
@@ -1170,6 +1515,9 @@ var PdfHighlighter = ({
   highlights,
   onScrollAway,
   pdfScaleValue = DEFAULT_SCALE_VALUE,
+  onZoomChange,
+  initialPage,
+  onPageChange,
   onSelection: onSelectionFinished,
   onCreateGhostHighlight,
   onRemoveGhostHighlight,
@@ -1189,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
 }) => {
@@ -1203,6 +1551,18 @@ 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);
@@ -1235,10 +1595,17 @@ var PdfHighlighter = ({
   );
   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 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
@@ -1251,11 +1618,51 @@ var PdfHighlighter = ({
       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]);
+  }, [pdfDocument, recolorKey]);
   useLayoutEffect2(() => {
     if (!containerNodeRef.current) return;
     resizeObserverRef.current = new ResizeObserver(handleScaleValue);
@@ -1282,6 +1689,222 @@ var PdfHighlighter = ({
       }
     };
   }, [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;
@@ -1449,34 +2072,25 @@ var PdfHighlighter = ({
       const { textLayer } = viewerRef.current.getPageView(pageNumber - 1) || {};
       if (!textLayer) continue;
       const textLayerDiv = textLayer.div;
-      const highlightLayer = findOrCreateHighlightLayer(textLayerDiv);
-      const noteLayer = findOrCreateNoteLayer(textLayerDiv);
-      if (highlightLayer) {
-        let highlightBindings = highlightBindingsRef.current[pageNumber];
-        if (!highlightBindings?.container?.isConnected) {
-          highlightBindings = {
-            reactRoot: createRoot(highlightLayer),
-            container: highlightLayer,
-            textLayer: textLayerDiv
-          };
-          highlightBindingsRef.current[pageNumber] = highlightBindings;
-        }
-        renderHighlightLayer(
-          highlightBindings,
+      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,
-          (highlight) => !isFreetextHighlight(highlight)
+          pageEl,
+          "PdfHighlighter__note-layer"
         );
-      }
-      if (noteLayer) {
-        let noteBindings = noteBindingsRef.current[pageNumber];
-        if (!noteBindings?.container?.isConnected) {
-          noteBindings = {
-            reactRoot: createRoot(noteLayer),
-            container: noteLayer,
-            textLayer: textLayerDiv
-          };
-          noteBindingsRef.current[pageNumber] = noteBindings;
-        }
         renderHighlightLayer(noteBindings, pageNumber, isFreetextHighlight);
       }
     }
@@ -1532,25 +2146,28 @@ 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
-      ]
-    });
+    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"
+      });
+    } else {
+      viewer.scrollPageIntoView({ pageNumber });
+    }
     scrolledToHighlightIdRef.current = highlight.id;
     scheduleRenderHighlightLayers();
     resumeScrollAwayListenerAfterNavigation();
@@ -1716,17 +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);
-          }
-          .PdfHighlighter--dark .PdfHighlighter__note-layer {
-            filter: invert(${resolvedTheme.darkModeInvertIntensity}) hue-rotate(180deg) brightness(0.95);
-          }
-          ` : ""}
         `),
     isViewerReady && /* @__PURE__ */ React6.createElement(
       TipContainer,
@@ -1965,7 +2571,7 @@ 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;
@@ -2286,7 +2892,7 @@ 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();
@@ -3586,7 +4192,40 @@ 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), "%");
+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}!`);
@@ -3595,44 +4234,138 @@ 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/extract-sentences.ts
@@ -4337,6 +5070,151 @@ var sentenceToHighlight = (sentence, options = {}) => {
     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];
+  }
+  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;
+      }
+    }
+    from = at + 1;
+  }
+  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";
@@ -4771,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 = {
@@ -4788,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"
@@ -4812,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 = {
@@ -4881,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";
@@ -4938,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",
@@ -4957,7 +5835,7 @@ var DocumentOutline = ({
     width: 56,
     height: 56,
     borderRadius: "50%",
-    backgroundColor: "#f1f5f9",
+    backgroundColor: "var(--lp-hover, #f1f5f9)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -4966,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 = {
@@ -5088,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)",
@@ -5098,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(
@@ -5130,7 +6008,7 @@ var ThumbnailItem = React19.memo(({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#f9fafb"
+          backgroundColor: "var(--lp-hover, #f9fafb)"
         }
       },
       /* @__PURE__ */ React19.createElement(
@@ -5139,7 +6017,7 @@ var ThumbnailItem = React19.memo(({
           style: {
             width: 24,
             height: 24,
-            color: "#9ca3af",
+            color: "var(--lp-muted, #9ca3af)",
             animation: "spin 1s linear infinite"
           }
         }
@@ -5180,7 +6058,7 @@ var ThumbnailItem = React19.memo(({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#f9fafb"
+          backgroundColor: "var(--lp-hover, #f9fafb)"
         }
       },
       /* @__PURE__ */ React19.createElement(
@@ -5189,7 +6067,7 @@ var ThumbnailItem = React19.memo(({
           style: {
             fontSize: 24,
             fontWeight: 300,
-            color: "#d1d5db"
+            color: "var(--lp-muted, #d1d5db)"
           }
         },
         pageNumber
@@ -5246,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(
@@ -5320,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,
@@ -5338,6 +6224,7 @@ var LeftPanel = ({
   onPageSelect,
   thumbnailWidth = 180,
   children,
+  mode = "light",
   theme: userTheme,
   showFooter = true,
   showToggleButton = true,
@@ -5352,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;
@@ -5692,6 +6585,7 @@ export {
   extractPageTextItems,
   extractSentences,
   extractTextUnits,
+  getTextPosition,
   scaledPositionToViewport,
   sentenceToHighlight,
   useDocumentOutline,