@anaralabs/lector 3.15.0 → 3.15.2

package/dist/_tsup-dts-rollup.d.ts

@@ -177,6 +177,9 @@ declare interface AsyncSearchOptions extends SearchOptions {
 export { AsyncSearchOptions }
 export { AsyncSearchOptions as AsyncSearchOptions_alias_1 }
 
+/** One mouse-selection controller per viewer, shared by its mounted pages. */
+export declare function bindTextSelection(layer: HTMLDivElement, viewport: ViewportRef, isPersistent?: () => boolean): () => void;
+
 export declare function calculateHighlightRects(pageProxy: PDFPageProxy, textMatch: TextPosition): Promise<HighlightRect[]>;
 
 export declare const cancellable: <T extends Promise<unknown>>(promise: T) => {
@@ -195,6 +198,11 @@ export declare const CanvasLayer: MemoExoticComponent<({ style, background, ...p
 background?: string;
 }) => JSX.Element>;
 
+declare type Caret = {
+    node: Node;
+    offset: number;
+};
+
 export declare const clamp: (value: number, minimum: number, maximum: number) => number;
 
 export declare function clampScaleForPage(targetScale: number, pageWidth: number, pageHeight: number, maxPixels?: number): number;
@@ -569,6 +577,7 @@ export declare class PDFSelectionController {
     });
     getSnapshot: () => PDFTextSelection | null;
     subscribe: (listener: () => void) => () => void;
+    get isConnected(): boolean;
     get isDragging(): boolean;
     includesPage(page: number): boolean;
     private publish;
@@ -729,6 +738,8 @@ export declare interface RenderColorMapRef {
     current: RenderColorMap | null;
 }
 
+export declare function resolveTextSelectionCaret(viewport: HTMLElement, x: number, y: number): Caret | null | undefined;
+
 export declare const Root: ForwardRefExoticComponent<Omit<Omit<HTMLProps<HTMLDivElement>, "onError"> & usePDFDocumentParams & {
 loader?: ReactNode;
 }, "ref"> & RefAttributes<unknown>>;
@@ -1098,6 +1109,10 @@ export declare const useSelectionDimensions: () => {
 
 declare type ViewportCallback = () => void;
 
+declare type ViewportRef = {
+    current: HTMLDivElement | null;
+};
+
 /** Materialize one missing selected page as text only, never as a page canvas. */
 export declare function withSelectionPage<T>(proxy: PDFPageProxy, owner: Document, signal: AbortSignal, read: (page: SelectionPage) => T): Promise<T>;
 

package/dist/index.js

@@ -401,9 +401,19 @@ function normalizeUnicode(text, matchDiacritics = true) {
 }
 var segmenter;
 function* unicodeReplacements(text, matchDiacritics) {
-  segmenter ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
   for (const match of text.matchAll(/\p{ASCII}?\P{ASCII}+/gu)) {
     if (normalizeUnicode(match[0], matchDiacritics) === match[0]) continue;
+    const prefix = match[0].charCodeAt(0) < 128 ? 1 : 0;
+    const code = match[0].charCodeAt(prefix);
+    if (match[0].length === prefix + 1 && code >= 64256 && code <= 64262) {
+      yield {
+        index: match.index + prefix,
+        length: 1,
+        text: ligatures[code - 64256]
+      };
+      continue;
+    }
+    segmenter ??= new Intl.Segmenter(void 0, { granularity: "grapheme" });
     for (const { segment, index } of segmenter.segment(match[0])) {
       yield {
         index: match.index + index,
@@ -464,6 +474,467 @@ function originalTextRange(normalized, start, end) {
   return { start, end };
 }
 
+// src/lib/selection-rects.ts
+var getTextNodeClientRects = (range) => {
+  const root = range.commonAncestorContainer;
+  const ownerDoc = root.ownerDocument ?? document;
+  if (root.nodeType === Node.TEXT_NODE) {
+    const parentElement = root.parentElement;
+    return Array.from(range.getClientRects()).map((rect) => ({
+      rect,
+      element: parentElement
+    }));
+  }
+  const walker = ownerDoc.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+    acceptNode(node) {
+      if (!node.nodeValue || node.nodeValue.length === 0) {
+        return NodeFilter.FILTER_REJECT;
+      }
+      try {
+        return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      } catch {
+        return NodeFilter.FILTER_REJECT;
+      }
+    }
+  });
+  const results = [];
+  let current = walker.nextNode();
+  while (current) {
+    const textNode = current;
+    const parentElement = textNode.parentElement;
+    const length = textNode.nodeValue?.length ?? 0;
+    const isStartNode = textNode === range.startContainer;
+    const isEndNode = textNode === range.endContainer;
+    const start = isStartNode ? range.startOffset : 0;
+    const end = isEndNode ? range.endOffset : length;
+    if (end > start) {
+      const sub = ownerDoc.createRange();
+      try {
+        sub.setStart(textNode, start);
+        sub.setEnd(textNode, end);
+        const subRects = sub.getClientRects();
+        for (let i = 0; i < subRects.length; i++) {
+          const r2 = subRects[i];
+          if (r2) results.push({ rect: r2, element: parentElement });
+        }
+      } catch {
+      } finally {
+        sub.detach?.();
+      }
+    }
+    current = walker.nextNode();
+  }
+  return results;
+};
+var connected = (a, b) => {
+  const overlap = Math.min(a.top + a.height, b.top + b.height) - Math.max(a.top, b.top);
+  const gap = Math.max(a.left, b.left) - Math.min(a.left + a.width, b.left + b.width);
+  return overlap >= Math.min(a.height, b.height) / 2 && gap <= Math.min(a.height, b.height) * 0.5;
+};
+var mergeTextRuns = (rects) => {
+  const groups = [];
+  for (const rect of rects) {
+    const group = [rect];
+    for (let i = groups.length - 1; i >= 0; i--) {
+      if (groups[i].some((member) => connected(member, rect))) {
+        group.push(...groups[i]);
+        groups.splice(i, 1);
+      }
+    }
+    groups.push(group);
+  }
+  return groups.map((group) => {
+    const left = Math.min(...group.map((rect) => rect.left));
+    const top = Math.min(...group.map((rect) => rect.top));
+    return {
+      ...group[0],
+      left,
+      top,
+      width: Math.max(...group.map((rect) => rect.left + rect.width)) - left,
+      height: Math.max(...group.map((rect) => rect.top + rect.height)) - top
+    };
+  });
+};
+
+// src/lib/selection-background.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var createSelectionBackground = () => {
+  const overlays = /* @__PURE__ */ new Map();
+  let style;
+  const clear = (layer) => {
+    overlays.get(layer)?.remove();
+    overlays.delete(layer);
+    layer.removeAttribute("data-lector-selection-active");
+    if (overlays.size === 0) {
+      style?.remove();
+      style = void 0;
+    }
+  };
+  const update = (selection, layers) => {
+    const registered = new Set(layers);
+    const byLayer = /* @__PURE__ */ new Map();
+    if (selection && !selection.isCollapsed) {
+      for (let i = 0; i < selection.rangeCount; i++) {
+        for (const { rect, element } of getTextNodeClientRects(
+          selection.getRangeAt(i)
+        )) {
+          const layer = element?.closest(".textLayer");
+          if (!layer || !element || !registered.has(layer) || rect.width <= 0 || rect.height <= 0)
+            continue;
+          let entry = byLayer.get(layer);
+          if (!entry) {
+            entry = { rects: [], element };
+            byLayer.set(layer, entry);
+          }
+          entry.rects.push(rect);
+        }
+      }
+    }
+    for (const layer of registered) {
+      const entry = byLayer.get(layer);
+      if (!entry) {
+        clear(layer);
+        continue;
+      }
+      layer.removeAttribute("data-lector-selection-active");
+      const color = getComputedStyle(
+        entry.element,
+        "::selection"
+      ).backgroundColor;
+      if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)") {
+        clear(layer);
+        continue;
+      }
+      const bounds = layer.getBoundingClientRect();
+      if (!bounds.width || !bounds.height || !layer.clientWidth || !layer.clientHeight) {
+        clear(layer);
+        continue;
+      }
+      const scaleX = bounds.width / layer.clientWidth;
+      const scaleY = bounds.height / layer.clientHeight;
+      const rects = mergeTextRuns(
+        entry.rects.map((rect) => ({
+          left: (rect.left - bounds.left) / scaleX,
+          top: (rect.top - bounds.top) / scaleY,
+          width: rect.width / scaleX,
+          height: rect.height / scaleY
+        }))
+      );
+      let overlay = overlays.get(layer);
+      if (!overlay) {
+        overlay = document.createElementNS(SVG_NS, "svg");
+        overlay.dataset.lectorSelection = "";
+        overlay.setAttribute("aria-hidden", "true");
+        overlay.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;transform:none;z-index:0;overflow:visible";
+        overlay.append(document.createElementNS(SVG_NS, "path"));
+        layer.append(overlay);
+        overlays.set(layer, overlay);
+      }
+      const path = overlay.firstElementChild;
+      path.setAttribute(
+        "d",
+        rects.map(
+          (rect) => `M${rect.left} ${rect.top}h${rect.width}v${rect.height}h${-rect.width}Z`
+        ).join(" ")
+      );
+      path.setAttribute("fill", color);
+      if (!style) {
+        style = document.createElement("style");
+        style.textContent = ".textLayer[data-lector-selection-active] ::selection { background-color: transparent !important; }";
+        document.head.append(style);
+      }
+      layer.setAttribute("data-lector-selection-active", "");
+    }
+  };
+  return { update, clear };
+};
+
+// src/lib/text-selection.ts
+var interactive = 'a, button, input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [role="textbox"], [data-lector-selection-ignore]';
+var distance = (value, start, end) => Math.max(start - value, 0, value - end);
+function nearestBox(boxes, x, y) {
+  let nearest;
+  let best = Number.POSITIVE_INFINITY;
+  for (const box of boxes) {
+    const { rect } = box;
+    const dx = distance(x, rect.left, rect.right);
+    const dy = distance(y, rect.top, rect.bottom);
+    const score = dy * dy + Math.min(dx, 30) ** 2 / 100 + dx / 1e4;
+    if (score < best) {
+      best = score;
+      nearest = box;
+    }
+  }
+  return nearest;
+}
+function caretInBox({ node, rect }, x, y) {
+  const doc = node.ownerDocument;
+  const px = Math.min(Math.max(x, rect.left + 0.1), rect.right - 0.1);
+  const py = Math.min(Math.max(y, rect.top + 0.1), rect.bottom - 0.1);
+  const caretDoc = doc;
+  const position = caretDoc.caretPositionFromPoint?.(px, py);
+  if (position?.offsetNode === node) return { node, offset: position.offset };
+  const range = caretDoc.caretRangeFromPoint?.(px, py);
+  if (range?.startContainer === node)
+    return { node, offset: range.startOffset };
+  const probe = doc.createRange();
+  let offset3 = 0;
+  let best = Number.POSITIVE_INFINITY;
+  let previous;
+  for (let i = 0; i <= node.length; ) {
+    probe.setStart(node, i);
+    probe.collapse(true);
+    const rects = Array.from(probe.getClientRects());
+    if (!rects.length && i === node.length && previous) {
+      probe.setStart(node, previous.offset);
+      probe.setEnd(node, i);
+      const glyph = probe.getBoundingClientRect();
+      const prior = previous.rect;
+      rects.push(
+        new DOMRect(
+          glyph.left + glyph.right - prior.right,
+          glyph.top + glyph.bottom - prior.bottom,
+          prior.width,
+          prior.height
+        )
+      );
+    }
+    for (const r2 of rects) {
+      const score = distance(x, r2.left, r2.right) ** 2 + distance(y, r2.top, r2.bottom) ** 2;
+      if (score < best) {
+        best = score;
+        offset3 = i;
+      }
+    }
+    if (rects[0]) previous = { offset: i, rect: rects[0] };
+    i += (node.data.codePointAt(i) ?? 0) > 65535 ? 2 : 1;
+  }
+  return { node, offset: offset3 };
+}
+function createSelectionManager(viewport, doc, isPersistent) {
+  const layers = /* @__PURE__ */ new Set();
+  const background = createSelectionBackground();
+  const container = viewport.current;
+  const win = doc.defaultView;
+  const controller = new AbortController();
+  const { signal } = controller;
+  let drag = null;
+  let boxes = null;
+  let scrollLeft = container?.scrollLeft;
+  let scrollTop = container?.scrollTop;
+  let frame = 0;
+  let mousePointer = true;
+  const invalidate = () => {
+    boxes = null;
+    if (drag && !frame) frame = win.requestAnimationFrame(tick);
+  };
+  const contains = (node) => !!node && [...layers].some((layer) => layer.contains(node));
+  const reset = () => {
+    drag = null;
+    boxes = null;
+    win.cancelAnimationFrame(frame);
+    frame = 0;
+    for (const layer of layers) layer.classList.remove("selecting");
+  };
+  const readBoxes = () => {
+    if (boxes) return boxes;
+    boxes = [];
+    for (const layer of layers) {
+      const walker = doc.createTreeWalker(layer, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const parent = node.parentElement;
+        if (!node.textContent?.trim() || !parent || parent.closest('[role="img"], .endOfContent') || win.getComputedStyle(parent).userSelect === "none")
+          continue;
+        const range = doc.createRange();
+        range.selectNodeContents(node);
+        for (const rect of range.getClientRects()) {
+          if (rect.width > 0 && rect.height > 0)
+            boxes.push({ node, rect });
+        }
+      }
+    }
+    return boxes;
+  };
+  const resolve = (x, y) => {
+    if (scrollLeft !== container?.scrollLeft || scrollTop !== container?.scrollTop) {
+      boxes = null;
+      scrollLeft = container?.scrollLeft;
+      scrollTop = container?.scrollTop;
+    }
+    const box = nearestBox(readBoxes(), x, y);
+    return box ? caretInBox(box, x, y) : null;
+  };
+  const update = () => {
+    if (!drag) return;
+    if (!drag.anchor.node.isConnected) {
+      reset();
+      return;
+    }
+    const focus = resolve(drag.x, drag.y);
+    const selection = doc.getSelection();
+    if (!focus || !selection) return;
+    if (selection.anchorNode === drag.anchor.node && selection.anchorOffset === drag.anchor.offset && selection.focusNode === focus.node && selection.focusOffset === focus.offset)
+      return;
+    selection.setBaseAndExtent(
+      drag.anchor.node,
+      drag.anchor.offset,
+      focus.node,
+      focus.offset
+    );
+  };
+  const tick = () => {
+    frame = 0;
+    if (!drag) return;
+    let scrolled = false;
+    const container2 = viewport.current;
+    if (container2 && !isPersistent()) {
+      const r2 = container2.getBoundingClientRect();
+      const edge = 24;
+      const speed = (point, start, end) => point < start + edge ? -Math.min(18, (start + edge - point) / 2) : point > end - edge ? Math.min(18, (point - end + edge) / 2) : 0;
+      const dx = speed(drag.x, r2.left, r2.right);
+      const dy = speed(drag.y, r2.top, r2.bottom);
+      if (dx || dy) {
+        const left = container2.scrollLeft;
+        const top = container2.scrollTop;
+        container2.scrollBy(dx, dy);
+        if (container2.scrollLeft !== left || container2.scrollTop !== top) {
+          boxes = null;
+          scrolled = true;
+        }
+      }
+    }
+    update();
+    if (drag && scrolled && !frame) frame = win.requestAnimationFrame(tick);
+  };
+  doc.addEventListener(
+    "pointerdown",
+    (event) => {
+      mousePointer = event.pointerType === "mouse";
+      if (!mousePointer) reset();
+    },
+    { signal }
+  );
+  doc.addEventListener(
+    "mousedown",
+    (event) => {
+      reset();
+      if (!mousePointer || event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.altKey || event.detail > 1)
+        return;
+      const target = event.target;
+      if (!(target instanceof Element) || target.closest(interactive)) return;
+      const onPage = [...layers].some(
+        (layer) => layer.parentElement?.contains(target)
+      );
+      if (!onPage && !(viewport.current === target || viewport.current?.contains(target) && target.contains([...layers][0] ?? null)))
+        return;
+      if (target instanceof HTMLElement && /auto|scroll/.test(win.getComputedStyle(target).overflow)) {
+        const r2 = target.getBoundingClientRect();
+        const scrollbarX = (target.offsetWidth - target.clientWidth - target.clientLeft * 2) * r2.width / target.offsetWidth;
+        const scrollbarY = (target.offsetHeight - target.clientHeight - target.clientTop * 2) * r2.height / target.offsetHeight;
+        if (event.clientX >= r2.right - scrollbarX || event.clientY >= r2.bottom - scrollbarY)
+          return;
+      }
+      const focus = resolve(event.clientX, event.clientY);
+      const selection = doc.getSelection();
+      if (!focus || !selection) return;
+      const anchor = event.shiftKey && contains(selection.anchorNode) ? { node: selection.anchorNode, offset: selection.anchorOffset } : focus;
+      event.preventDefault();
+      if (viewport.current && viewport.current.tabIndex >= 0)
+        viewport.current.focus({ preventScroll: true });
+      drag = { anchor, x: event.clientX, y: event.clientY };
+      for (const layer of layers) layer.classList.add("selecting");
+      update();
+    },
+    { signal }
+  );
+  doc.addEventListener(
+    "mousemove",
+    (event) => {
+      if (!drag) return;
+      if (!(event.buttons & 1)) {
+        reset();
+        return;
+      }
+      event.preventDefault();
+      drag.x = event.clientX;
+      drag.y = event.clientY;
+      update();
+      if (!frame) frame = win.requestAnimationFrame(tick);
+    },
+    { signal }
+  );
+  doc.addEventListener(
+    "mouseup",
+    (event) => {
+      if (drag && event.button === 0) {
+        drag.x = event.clientX;
+        drag.y = event.clientY;
+        update();
+        reset();
+      }
+    },
+    { signal }
+  );
+  doc.addEventListener(
+    "selectionchange",
+    () => background.update(doc.getSelection(), layers),
+    { signal }
+  );
+  doc.addEventListener("scroll", invalidate, {
+    signal,
+    capture: true,
+    passive: true
+  });
+  win.addEventListener("resize", invalidate, { signal });
+  win.addEventListener("blur", reset, { signal });
+  doc.addEventListener("pointercancel", reset, { signal });
+  doc.addEventListener(
+    "keydown",
+    (event) => {
+      if (event.key === "Escape") reset();
+    },
+    { signal }
+  );
+  return {
+    resolve,
+    add(layer) {
+      layers.add(layer);
+      if (container) viewportManagers.set(container, { resolve });
+      invalidate();
+      return () => {
+        background.clear(layer);
+        layers.delete(layer);
+        layer.classList.remove("selecting");
+        invalidate();
+        if (drag && layer.contains(drag.anchor.node)) reset();
+        if (!layers.size) {
+          reset();
+          controller.abort();
+          managers.delete(viewport);
+          if (container) viewportManagers.delete(container);
+        }
+      };
+    }
+  };
+}
+var viewportManagers = /* @__PURE__ */ new WeakMap();
+function resolveTextSelectionCaret(viewport, x, y) {
+  return viewportManagers.get(viewport)?.resolve(x, y);
+}
+var managers = /* @__PURE__ */ new WeakMap();
+function bindTextSelection(layer, viewport, isPersistent = () => false) {
+  let manager = managers.get(viewport);
+  if (!manager) {
+    manager = createSelectionManager(
+      viewport,
+      layer.ownerDocument,
+      isPersistent
+    );
+    managers.set(viewport, manager);
+  }
+  return manager.add(layer);
+}
+
 // src/lib/pdf-selection.ts
 var sameAnchor = (a, b) => a.pageNumber === b.pageNumber && a.offset === b.offset;
 var compare = (a, b) => a.pageNumber - b.pageNumber || a.offset - b.offset;
@@ -494,6 +965,9 @@ var PDFSelectionController = class {
       this.listeners.delete(listener);
     };
   };
+  get isConnected() {
+    return this.container !== null;
+  }
   get isDragging() {
     return this.drag !== null;
   }
@@ -838,6 +1312,8 @@ var PDFSelectionController = class {
     });
   }
   caret(x, y) {
+    const geometry = resolveTextSelectionCaret(this.container, x, y);
+    if (geometry) return this.anchorFor(geometry.node, geometry.offset);
     const owner = this.container.ownerDocument;
     const doc = owner;
     const position = doc.caretPositionFromPoint?.(x, y);
@@ -926,13 +1402,15 @@ var PDFSelectionController = class {
     const down = (event) => {
       if (event.defaultPrevented) return;
       const target = event.target instanceof Element ? event.target : null;
-      if (target?.closest("button, a, [role=button], [data-selection-tooltip]"))
+      if (target?.closest(
+        'button, a, input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role=button], [role=link], [role=textbox], [data-selection-tooltip], [data-lector-selection-ignore]'
+      ))
         return;
       if (!container.contains(event.target)) {
         this.clear();
         return;
       }
-      if (event.defaultPrevented || event.button !== 0 || event.pointerType === "touch" || !container.contains(event.target))
+      if (event.defaultPrevented || event.button !== 0 || event.pointerType === "touch" || event.ctrlKey || event.metaKey || event.altKey || !container.contains(event.target))
         return;
       const point = this.caret(event.clientX, event.clientY);
       if (!point) return;
@@ -3836,88 +4314,6 @@ var CanvasLayer = memo(
 );
 CanvasLayer.displayName = "CanvasLayer";
 
-// src/lib/selection-rects.ts
-var getTextNodeClientRects = (range) => {
-  const root = range.commonAncestorContainer;
-  const ownerDoc = root.ownerDocument ?? document;
-  if (root.nodeType === Node.TEXT_NODE) {
-    const parentElement = root.parentElement;
-    return Array.from(range.getClientRects()).map((rect) => ({
-      rect,
-      element: parentElement
-    }));
-  }
-  const walker = ownerDoc.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
-    acceptNode(node) {
-      if (!node.nodeValue || node.nodeValue.length === 0) {
-        return NodeFilter.FILTER_REJECT;
-      }
-      try {
-        return range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
-      } catch {
-        return NodeFilter.FILTER_REJECT;
-      }
-    }
-  });
-  const results = [];
-  let current = walker.nextNode();
-  while (current) {
-    const textNode = current;
-    const parentElement = textNode.parentElement;
-    const length = textNode.nodeValue?.length ?? 0;
-    const isStartNode = textNode === range.startContainer;
-    const isEndNode = textNode === range.endContainer;
-    const start = isStartNode ? range.startOffset : 0;
-    const end = isEndNode ? range.endOffset : length;
-    if (end > start) {
-      const sub = ownerDoc.createRange();
-      try {
-        sub.setStart(textNode, start);
-        sub.setEnd(textNode, end);
-        const subRects = sub.getClientRects();
-        for (let i = 0; i < subRects.length; i++) {
-          const r2 = subRects[i];
-          if (r2) results.push({ rect: r2, element: parentElement });
-        }
-      } catch {
-      } finally {
-        sub.detach?.();
-      }
-    }
-    current = walker.nextNode();
-  }
-  return results;
-};
-var connected = (a, b) => {
-  const overlap = Math.min(a.top + a.height, b.top + b.height) - Math.max(a.top, b.top);
-  const gap = Math.max(a.left, b.left) - Math.min(a.left + a.width, b.left + b.width);
-  return overlap >= Math.min(a.height, b.height) / 2 && gap <= Math.min(a.height, b.height) * 0.5;
-};
-var mergeTextRuns = (rects) => {
-  const groups = [];
-  for (const rect of rects) {
-    const group = [rect];
-    for (let i = groups.length - 1; i >= 0; i--) {
-      if (groups[i].some((member) => connected(member, rect))) {
-        group.push(...groups[i]);
-        groups.splice(i, 1);
-      }
-    }
-    groups.push(group);
-  }
-  return groups.map((group) => {
-    const left = Math.min(...group.map((rect) => rect.left));
-    const top = Math.min(...group.map((rect) => rect.top));
-    return {
-      ...group[0],
-      left,
-      top,
-      width: Math.max(...group.map((rect) => rect.left + rect.width)) - left,
-      height: Math.max(...group.map((rect) => rect.top + rect.height)) - top
-    };
-  });
-};
-
 // src/lib/selection-text.ts
 function textLayer(node) {
   const element = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
@@ -4750,244 +5146,6 @@ var HighlightLayer = forwardRef(({ asChild, className, style, ...props }, ref) =
   }) });
 });
 HighlightLayer.displayName = "HighlightLayer";
-
-// src/lib/selection-background.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var createSelectionBackground = () => {
-  const overlays = /* @__PURE__ */ new Map();
-  let style;
-  const clear = (layer) => {
-    overlays.get(layer)?.remove();
-    overlays.delete(layer);
-    layer.removeAttribute("data-lector-selection-active");
-    if (overlays.size === 0) {
-      style?.remove();
-      style = void 0;
-    }
-  };
-  const update = (selection, layers) => {
-    const registered = new Set(layers);
-    const byLayer = /* @__PURE__ */ new Map();
-    if (selection && !selection.isCollapsed) {
-      for (let i = 0; i < selection.rangeCount; i++) {
-        for (const { rect, element } of getTextNodeClientRects(
-          selection.getRangeAt(i)
-        )) {
-          const layer = element?.closest(".textLayer");
-          if (!layer || !element || !registered.has(layer) || rect.width <= 0 || rect.height <= 0)
-            continue;
-          let entry = byLayer.get(layer);
-          if (!entry) {
-            entry = { rects: [], element };
-            byLayer.set(layer, entry);
-          }
-          entry.rects.push(rect);
-        }
-      }
-    }
-    for (const layer of registered) {
-      const entry = byLayer.get(layer);
-      if (!entry) {
-        clear(layer);
-        continue;
-      }
-      layer.removeAttribute("data-lector-selection-active");
-      const color = getComputedStyle(
-        entry.element,
-        "::selection"
-      ).backgroundColor;
-      if (!color || color === "transparent" || color === "rgba(0, 0, 0, 0)") {
-        clear(layer);
-        continue;
-      }
-      const bounds = layer.getBoundingClientRect();
-      if (!bounds.width || !bounds.height || !layer.clientWidth || !layer.clientHeight) {
-        clear(layer);
-        continue;
-      }
-      const scaleX = bounds.width / layer.clientWidth;
-      const scaleY = bounds.height / layer.clientHeight;
-      const rects = mergeTextRuns(
-        entry.rects.map((rect) => ({
-          left: (rect.left - bounds.left) / scaleX,
-          top: (rect.top - bounds.top) / scaleY,
-          width: rect.width / scaleX,
-          height: rect.height / scaleY
-        }))
-      );
-      let overlay = overlays.get(layer);
-      if (!overlay) {
-        overlay = document.createElementNS(SVG_NS, "svg");
-        overlay.dataset.lectorSelection = "";
-        overlay.setAttribute("aria-hidden", "true");
-        overlay.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;transform:none;z-index:0;overflow:visible";
-        overlay.append(document.createElementNS(SVG_NS, "path"));
-        layer.append(overlay);
-        overlays.set(layer, overlay);
-      }
-      const path = overlay.firstElementChild;
-      path.setAttribute(
-        "d",
-        rects.map(
-          (rect) => `M${rect.left} ${rect.top}h${rect.width}v${rect.height}h${-rect.width}Z`
-        ).join(" ")
-      );
-      path.setAttribute("fill", color);
-      if (!style) {
-        style = document.createElement("style");
-        style.textContent = ".textLayer[data-lector-selection-active] ::selection { background-color: transparent !important; }";
-        document.head.append(style);
-      }
-      layer.setAttribute("data-lector-selection-active", "");
-    }
-  };
-  return { update, clear };
-};
-
-// src/hooks/layers/useTextLayer.tsx
-var createTextSelectionManager = () => {
-  const textLayers = /* @__PURE__ */ new Map();
-  const selectionBackground = createSelectionBackground();
-  let selectionChangeAbortController = null;
-  let isPointerDown = false;
-  let prevRange = null;
-  let isFirefox;
-  const removeGlobalSelectionListener = (textLayerDiv) => {
-    selectionBackground.clear(textLayerDiv);
-    textLayers.delete(textLayerDiv);
-    if (textLayers.size === 0) {
-      selectionChangeAbortController?.abort();
-      selectionChangeAbortController = null;
-    }
-  };
-  const enableGlobalSelectionListener = () => {
-    if (selectionChangeAbortController) {
-      return;
-    }
-    selectionChangeAbortController = new AbortController();
-    const { signal } = selectionChangeAbortController;
-    const reset = (endDiv, textLayer2) => {
-      if (endDiv.parentNode !== textLayer2) {
-        textLayer2.appendChild(endDiv);
-      }
-      endDiv.style.width = "";
-      endDiv.style.height = "";
-      textLayer2.classList.remove("selecting");
-    };
-    document.addEventListener(
-      "pointerdown",
-      () => {
-        isPointerDown = true;
-      },
-      { signal }
-    );
-    document.addEventListener(
-      "pointerup",
-      () => {
-        isPointerDown = false;
-        textLayers.forEach(reset);
-      },
-      { signal }
-    );
-    window.addEventListener(
-      "blur",
-      () => {
-        isPointerDown = false;
-        textLayers.forEach(reset);
-      },
-      { signal }
-    );
-    document.addEventListener(
-      "keyup",
-      () => {
-        if (!isPointerDown) {
-          textLayers.forEach(reset);
-        }
-      },
-      { signal }
-    );
-    document.addEventListener(
-      "selectionchange",
-      () => {
-        const selection = document.getSelection();
-        selectionBackground.update(selection, textLayers.keys());
-        if (!selection || selection.rangeCount === 0) {
-          textLayers.forEach(reset);
-          return;
-        }
-        const activeTextLayers = /* @__PURE__ */ new Set();
-        for (let i = 0; i < selection.rangeCount; i++) {
-          const range = selection.getRangeAt(i);
-          for (const textLayerDiv of textLayers.keys()) {
-            if (!activeTextLayers.has(textLayerDiv) && range.intersectsNode(textLayerDiv)) {
-              activeTextLayers.add(textLayerDiv);
-            }
-          }
-        }
-        for (const [textLayerDiv, endDiv] of textLayers) {
-          if (activeTextLayers.has(textLayerDiv)) {
-            textLayerDiv.classList.add("selecting");
-          } else {
-            reset(endDiv, textLayerDiv);
-          }
-        }
-        if (isFirefox === void 0) {
-          const firstTextLayer = textLayers.keys().next().value;
-          if (firstTextLayer) {
-            isFirefox = getComputedStyle(firstTextLayer).getPropertyValue(
-              "-moz-user-select"
-            ) === "none";
-          }
-        }
-        if (isFirefox) {
-          return;
-        }
-        try {
-          const range = selection.getRangeAt(0);
-          const modifyStart = prevRange && (range.compareBoundaryPoints(Range.END_TO_END, prevRange) === 0 || range.compareBoundaryPoints(Range.START_TO_END, prevRange) === 0);
-          let anchor = modifyStart ? range.startContainer : range.endContainer;
-          if (anchor.nodeType === Node.TEXT_NODE) {
-            anchor = anchor.parentNode;
-          }
-          const parentTextLayer = anchor.parentElement?.closest(
-            ".textLayer"
-          );
-          const endDiv = textLayers.get(parentTextLayer);
-          if (endDiv && parentTextLayer) {
-            endDiv.style.width = parentTextLayer.style.width;
-            endDiv.style.height = parentTextLayer.style.height;
-            const insertTarget = modifyStart ? anchor : anchor.nextSibling;
-            if (anchor.parentElement && insertTarget) {
-              anchor.parentElement.insertBefore(endDiv, insertTarget);
-            }
-          }
-          prevRange = range.cloneRange();
-        } catch {
-        }
-      },
-      { signal }
-    );
-  };
-  const bindMouseEvents2 = (textLayerDiv, endOfContent) => {
-    if (textLayerDiv._textSelectionBound) {
-      return;
-    }
-    textLayerDiv._textSelectionBound = true;
-    textLayers.set(textLayerDiv, endOfContent);
-    enableGlobalSelectionListener();
-    const handleMouseDown = () => {
-      textLayerDiv.classList.add("selecting");
-    };
-    textLayerDiv.addEventListener("mousedown", handleMouseDown);
-    textLayerDiv._cleanupTextSelection = () => {
-      textLayerDiv.removeEventListener("mousedown", handleMouseDown);
-      removeGlobalSelectionListener(textLayerDiv);
-      delete textLayerDiv._textSelectionBound;
-    };
-  };
-  return bindMouseEvents2;
-};
-var bindMouseEvents = createTextSelectionManager();
 var TEXT_BUILD_IDLE_MS = 300;
 var TEXT_SCROLL_SETTLE_MS = 160;
 var VIEWPORT_ATTACH_MAX_FRAMES = 300;
@@ -5006,6 +5164,7 @@ var useTextLayer = () => {
     }
     let isCancelled = false;
     let unregisterSelection;
+    let cleanupMouseSelection;
     let buildTimer = null;
     let unsubscribe = null;
     let built = false;
@@ -5033,10 +5192,11 @@ var useTextLayer = () => {
         if (isCancelled || gen !== buildGen || textContainerRef.current !== textContainer) {
           return;
         }
-        const endOfContent = document.createElement("div");
-        endOfContent.className = "endOfContent";
-        textContainer.appendChild(endOfContent);
-        bindMouseEvents(textContainer, endOfContent);
+        cleanupMouseSelection = bindTextSelection(
+          textContainer,
+          viewportRef,
+          () => selection?.isConnected ?? false
+        );
         const viewport = pdfPageProxy.getViewport({ scale: 1 });
         const unrotated = pdfPageProxy.getViewport({ scale: 1, rotation: 0 });
         textContainer.style.width = `${unrotated.width}px`;
@@ -5111,10 +5271,7 @@ var useTextLayer = () => {
         textLayerRef.current.cancel();
         textLayerRef.current = null;
       }
-      if (textContainer?._cleanupTextSelection) {
-        textContainer._cleanupTextSelection();
-        delete textContainer._cleanupTextSelection;
-      }
+      cleanupMouseSelection?.();
     };
   }, [
     pdfPageProxy.streamTextContent,
@@ -5717,9 +5874,9 @@ var useVisiblePage = ({
       let smallestDistance = Infinity;
       for (const item of virtualItems) {
         const itemCenter = item.start + item.size / 2;
-        const distance = Math.abs(itemCenter - viewportCenter);
-        if (distance < smallestDistance * 0.8) {
-          smallestDistance = distance;
+        const distance2 = Math.abs(itemCenter - viewportCenter);
+        if (distance2 < smallestDistance * 0.8) {
+          smallestDistance = distance2;
           closestIndex = item.index;
         }
       }
@@ -5779,9 +5936,9 @@ var V = {
     v1[1] -= v2[1];
   }
 };
-function rubberband(distance, dimension, constant) {
-  if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5);
-  return distance * dimension * constant / (dimension + constant * distance);
+function rubberband(distance2, dimension, constant) {
+  if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance2, constant * 5);
+  return distance2 * dimension * constant / (dimension + constant * distance2);
 }
 function rubberbandIfOutOfBounds(position, min, max, constant = 0.15) {
   if (constant === 0) return clamp2(position, min, max);
@@ -5924,12 +6081,12 @@ function distanceAngle(P1, P2) {
     const dy = P2.clientY - P1.clientY;
     const cx = (P2.clientX + P1.clientX) / 2;
     const cy = (P2.clientY + P1.clientY) / 2;
-    const distance = Math.hypot(dx, dy);
+    const distance2 = Math.hypot(dx, dy);
     const angle = -(Math.atan2(dx, dy) * 180) / Math.PI;
     const origin = [cx, cy];
     return {
       angle,
-      distance,
+      distance: distance2,
       origin
     };
   } catch (_unused) {
@@ -6723,12 +6880,12 @@ var dragConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigReso
   },
   swipe({
     velocity = DEFAULT_SWIPE_VELOCITY,
-    distance = DEFAULT_SWIPE_DISTANCE,
+    distance: distance2 = DEFAULT_SWIPE_DISTANCE,
     duration = DEFAULT_SWIPE_DURATION
   } = {}) {
     return {
       velocity: this.transform(V.toVector(velocity)),
-      distance: this.transform(V.toVector(distance)),
+      distance: this.transform(V.toVector(distance2)),
       duration
     };
   },
@@ -7799,6 +7956,10 @@ var useViewportContainer = ({
       if (!st.active) {
         return;
       }
+      if (Math.abs(event.deltaX) > abs) {
+        st.active = false;
+        return;
+      }
       if (now - st.lastTime > WHEEL_INERTIA_GAP_MS) {
         st.active = false;
         return;
@@ -7858,12 +8019,11 @@ var useViewportContainer = ({
             contentPosition,
             containerPosition,
             originZoom: currentZoom,
+            origin: [...origin],
             lastZoom: currentZoom
           };
         });
-        if (first) {
-          return newMemo;
-        }
+        if (first && ms === 1) return newMemo;
         const gestureValuesValid = Number.isFinite(ms) && ms > 0;
         let effectiveScale = ms;
         if (!gestureValuesValid) {
@@ -7882,9 +8042,18 @@ var useViewportContainer = ({
           minZoom,
           maxZoom
         );
+        if (event.type === "wheel") {
+          const previousScale = newMemo.lastZoom / newMemo.originZoom;
+          for (const axis of [0, 1]) {
+            const movement2 = origin[axis] - newMemo.origin[axis];
+            newMemo.contentPosition[axis] += movement2 / previousScale;
+            newMemo.containerPosition[axis] += movement2;
+            newMemo.origin[axis] = origin[axis];
+          }
+        }
         const realMs = newZoom / newMemo.originZoom;
-        const newTranslateX = newMemo.contentPosition[0] * realMs - newMemo.containerPosition[0];
-        const newTranslateY = newMemo.contentPosition[1] * realMs - newMemo.containerPosition[1];
+        const newTranslateX = newMemo.contentPosition[0] * realMs - newMemo.containerPosition[0] - (origin[0] - newMemo.origin[0]);
+        const newTranslateY = newMemo.contentPosition[1] * realMs - newMemo.containerPosition[1] - (origin[1] - newMemo.origin[1]);
         transformations.current = {
           zoom: newZoom,
           translateX: newTranslateX,
@@ -8066,7 +8235,14 @@ var Pages = ({
     };
   }, [isPinching, virtualizer?.measure, virtualizer?.getVirtualItems]);
   const virtualizerItems = virtualizer?.getVirtualItems() ?? [];
-  const items = tempItems.length ? tempItems : virtualizerItems;
+  const items = useMemo(() => {
+    if (!tempItems.length) return virtualizerItems;
+    const combined = new Map(
+      virtualizerItems.map((item) => [item.index, item])
+    );
+    for (const item of tempItems) combined.set(item.index, item);
+    return [...combined.values()].sort((a, b) => a.index - b.index);
+  }, [tempItems, virtualizerItems]);
   useVisiblePage({
     items,
     // Pass through nullish (pre-measure) rather than coercing to 0, so the
@@ -9276,7 +9452,7 @@ function* runSearch(pages, searchText, options = {}, cooperative = false, budget
   const query = normalizeSearchText(searchText, options).text;
   if (!query.trim()) return empty;
   const maxDistance = Math.floor(query.length * (1 - threshold));
-  const distance = maxDistance > 0 ? createBoundedDistance(query, maxDistance) : null;
+  const distance2 = maxDistance > 0 ? createBoundedDistance(query, maxDistance) : null;
   const exactMatches = [];
   const fuzzyMatches = [];
   let exactCount = 0;
@@ -9284,6 +9460,10 @@ function* runSearch(pages, searchText, options = {}, cooperative = false, budget
   let steps = 0;
   let deadline = cooperative ? performance.now() + budget : 0;
   for (const page of pages) {
+    if (cooperative && performance.now() >= deadline) {
+      yield;
+      deadline = performance.now() + budget;
+    }
     const normalized = normalize(page, options);
     const lower = normalized.text;
     const exactStarts = [];
@@ -9308,6 +9488,9 @@ function* runSearch(pages, searchText, options = {}, cooperative = false, budget
       lastStart = span.start;
       lastEnd = span.end;
       exactCount++;
+      if (maxDistance === 0 && exactCount > limit) {
+        return { exactMatches, fuzzyMatches, hasMoreResults: true };
+      }
       if (exactMatches.length < limit) {
         exactMatches.push(
           createMatch(
@@ -9338,7 +9521,7 @@ function* runSearch(pages, searchText, options = {}, cooperative = false, budget
         index = exactStart + query.length;
         continue;
       }
-      const edits = distance(lower, index);
+      const edits = distance2(lower, index);
       if (edits > 0 && edits <= maxDistance) {
         fuzzyCount++;
         const score = 1 - edits / query.length;
@@ -9382,7 +9565,19 @@ async function searchDocumentAsync(pages, searchText, options = {}) {
       throw new DOMException("Search aborted", "AbortError");
     const result = iterator.next();
     if (result.done) return result.value;
-    await new Promise((resolve) => setTimeout(resolve, 0));
+    await new Promise((resolve) => {
+      if (typeof MessageChannel === "undefined") {
+        setTimeout(resolve, 0);
+        return;
+      }
+      const channel = new MessageChannel();
+      channel.port1.onmessage = () => {
+        channel.port1.close();
+        channel.port2.close();
+        resolve();
+      };
+      channel.port2.postMessage(null);
+    });
   }
 }
 
@@ -9480,10 +9675,16 @@ async function calculateHighlightRects(pageProxy, textMatch) {
         const start = Math.max(0, textMatch.matchIndex - offset3);
         const end = Math.min(length, matchEnd - offset3);
         if (end > start && item.str.slice(start, end).trim()) {
+          let style = styles[item.fontName];
+          if (style?.fontFamily && !style.vertical && (start > 0 || end < length)) {
+            const { TextLayer: TextLayer2 } = await loadPdfJs();
+            const fontFamily = TextLayer2.fontFamilyMap.get(style.fontFamily);
+            if (fontFamily) style = { ...style, fontFamily };
+          }
           matchRects.push(
             getItemRect(
               item,
-              styles[item.fontName],
+              style,
               viewport,
               start,
               end,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anaralabs/lector",
-	"version": "3.15.0",
+	"version": "3.15.2",
 	"description": "A headless PDF viewer for React",
 	"author": "andrewdr (https://github.com/andrewdoro)",
 	"license": "MIT",