@anaralabs/lector 3.13.4 → 3.14.1

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

@@ -138,16 +138,20 @@ declare interface AnnotationTooltipProps {
  * right after, so pdf.js readbacks (`ctx.fillStyle`, `copyCtxState`,
  * save/restore) always observe original-document colors and nothing is ever
  * mapped twice. Gradients are recolored per stop at creation. `drawImage`
- * and `putImageData` are deliberately untouched — photos keep their pixels —
- * with one exception: a drawImage that composes a luminosity soft mask
+ * and `putImageData` keep image pixels untouched — photos stay photos — with
+ * two exceptions: a drawImage that composes a luminosity soft mask
  * (destination-in through a pdf.js `*_luminosity_map_*` filter) draws a
  * luma-corrected copy of the mask so the recoloring doesn't invert the
- * mask's alpha.
+ * mask's alpha, and a drawImage that papers the page with near-white pixels
+ * (a scanned page) is inverted toward the palette poles right after painting
+ * (policy in ./scan-invert.ts).
  *
  * Wrapping installs own properties on the context instance (the prototype is
- * never modified). Returns a cleanup that restores the pristine context.
+ * never modified). Returns a cleanup that restores the pristine context; pass
+ * finalizeRender=true only when the render completed naturally, which lets a
+ * papered-but-inkless page finalize as a genuinely blank scanned page.
  */
-export declare function applyContextRecolor(ctx: CanvasRenderingContext2D, map: RenderColorMap): () => void;
+export declare function applyContextRecolor(ctx: CanvasRenderingContext2D, map: RenderColorMap, options?: RecolorContextOptions): (finalizeRender?: boolean) => void;
 
 /**
  * Calculates the highlight rectangles for a given text match.
@@ -183,6 +187,8 @@ export declare const clamp: (value: number, minimum: number, maximum: number) =>
 
 export declare function clampScaleForPage(targetScale: number, pageWidth: number, pageHeight: number, maxPixels?: number): number;
 
+export declare function classifyScanPaper(source: CanvasImageSource, crop?: SourceCrop): ScanPaperClass | null;
+
 declare type CollapsibleSelection = {
     highlights: HighlightRect[];
     underlines?: HighlightRect[];
@@ -331,6 +337,8 @@ export declare interface InitialPDFState {
 
 export declare const IS_MOBILE_DEVICE: boolean;
 
+export declare function isScanPaperSource(source: CanvasImageSource, crop?: SourceCrop): boolean;
+
 export declare class LinkService {
     _pdfDocumentProxy?: PDFDocumentProxy;
     externalLinkEnabled: boolean;
@@ -463,6 +471,18 @@ export declare type PDFVirtualizer = Virtualizer<any, any>;
 
 export declare const PreviousPage: () => void;
 
+export declare interface RecolorContextOptions {
+    /**
+     * Full-page area in the context's device space (viewport.width × height).
+     * When provided, image draws that paper the page (≥ SCAN_COVERAGE_MIN of
+     * this area) with near-white pixels — scanned pages — are inverted toward
+     * the palette poles. Omit on pdf.js scratch canvases, whose device space
+     * is not the page; a page-covering scan painted through one is still
+     * caught when the scratch canvas is composed back onto a page context.
+     */
+    pageArea?: number;
+}
+
 /**
  * Removes any recolor wrapper installed on the context. For long-lived
  * contexts (the visible canvas in the no-buffer fallback, thumbnails) that
@@ -488,6 +508,60 @@ export declare const Root: ForwardRefExoticComponent<Omit<Omit<HTMLProps<HTMLDiv
 loader?: ReactNode;
 }, "ref"> & RefAttributes<unknown>>;
 
+/** Painted area relative to the page above which a draw "papers the page". */
+export declare const SCAN_COVERAGE_MIN = 0.7;
+
+/**
+ * Minimum count of dark "ink" pixels in the downsample. A pure-white raster
+ * is an MRC background layer (its ink lives in a separate dark layer that
+ * must stay un-inverted to remain readable) or a blank page — skip both.
+ * A single genuine dark sample suffices so sparse pages (a signature, a few
+ * lines) still qualify; downsample averaging already erases isolated noise.
+ */
+export declare const SCAN_INK_MIN_PIXELS = 1;
+
+/**
+ * Minimum opaque fraction: scans are fully opaque; a cut-out PNG would let
+ * the inversion fill bleed into its transparent holes.
+ */
+export declare const SCAN_OPAQUE_MIN_FRACTION = 0.99;
+
+/**
+ * Maximum saturated fraction. Stamps and seals on real scans measure a few
+ * percent saturated; a rasterized slide with a colored chart measures far
+ * more — inverting it would render the chart as a negative.
+ */
+export declare const SCAN_SATURATED_MAX_FRACTION = 0.15;
+
+/**
+ * Minimum density (summed tile area / union bounding box area) for pending
+ * tiles to read as one contiguous scan: strips partitioning a page are dense,
+ * scattered white screenshots on a text page are not.
+ */
+export declare const SCAN_TILE_DENSITY_MIN = 0.85;
+
+/**
+ * Minimum painted fraction for a draw to count as a scan tile: some raster
+ * PDFs encode a page as strips or grids (8×8 grids put single tiles under
+ * 2%) whose areas only paper the page in sum. The floor only excludes
+ * degenerate sliver spam — the density, saturation, page-level ink and
+ * paint-serial guards do the real false-positive filtering.
+ */
+export declare const SCAN_TILE_MIN_FRACTION = 0.005;
+
+/** Fraction of near-white opaque pixels above which a source is scan paper. */
+export declare const SCAN_WHITE_MIN_FRACTION = 0.6;
+
+export declare interface ScanPaperClass {
+    /**
+     * Whether the paper carries dark ink pixels. A pure-white raster is an
+     * MRC background layer (its ink lives in a separate dark layer that must
+     * stay readable) or a blank margin tile — pages only invert when ink is
+     * present somewhere, but blank tiles still count toward tiled coverage.
+     */
+    inked: boolean;
+}
+
 export declare const Search: ({ children, loading }: SearchProps) => ReactNode;
 
 declare interface SearchOptions {
@@ -524,6 +598,18 @@ declare interface SelectionTooltipProps {
 
 export declare type Source = string | URL | TypedArray | ArrayBuffer | DocumentInitParameters;
 
+export declare interface SourceCrop {
+    sx: number;
+    sy: number;
+    sw: number;
+    sh: number;
+}
+
+export declare function sourceSize(source: CanvasImageSource): {
+    width: number;
+    height: number;
+} | null;
+
 export declare const subscribeToViewportInvalidation: (viewport: HTMLDivElement, callback: ViewportCallback) => () => void;
 
 declare type TextContent = {

package/dist/index.js

@@ -1417,6 +1417,96 @@ function computeBaseScale(dpr, zoom, pageWidth, pageHeight) {
   );
 }
 
+// src/lib/scan-invert.ts
+var SCAN_COVERAGE_MIN = 0.7;
+var SCAN_TILE_MIN_FRACTION = 5e-3;
+var SCAN_TILE_DENSITY_MIN = 0.85;
+var SCAN_WHITE_MIN_FRACTION = 0.6;
+var SCAN_INK_MIN_PIXELS = 1;
+var SCAN_OPAQUE_MIN_FRACTION = 0.99;
+var SCAN_SATURATED_MAX_FRACTION = 0.15;
+var SAMPLE_TARGET_PX = 64;
+var bitmapVerdicts = /* @__PURE__ */ new WeakMap();
+var scratchCanvas = null;
+function getScratchContext(width, height) {
+  if (typeof document === "undefined") return null;
+  scratchCanvas ??= document.createElement("canvas");
+  scratchCanvas.width = width;
+  scratchCanvas.height = height;
+  return scratchCanvas.getContext("2d", { willReadFrequently: true });
+}
+function sourceSize(source) {
+  if (typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap) {
+    return { width: source.width, height: source.height };
+  }
+  if (typeof HTMLCanvasElement !== "undefined" && source instanceof HTMLCanvasElement) {
+    return { width: source.width, height: source.height };
+  }
+  if (typeof OffscreenCanvas !== "undefined" && source instanceof OffscreenCanvas) {
+    return { width: source.width, height: source.height };
+  }
+  if (typeof HTMLImageElement !== "undefined" && source instanceof HTMLImageElement) {
+    return { width: source.naturalWidth, height: source.naturalHeight };
+  }
+  return null;
+}
+function sampleScanPaper(source, crop) {
+  const scale = Math.min(1, SAMPLE_TARGET_PX / Math.max(crop.sw, crop.sh));
+  const w = Math.max(1, Math.round(crop.sw * scale));
+  const h = Math.max(1, Math.round(crop.sh * scale));
+  const ctx = getScratchContext(w, h);
+  if (!ctx) return void 0;
+  try {
+    ctx.drawImage(source, crop.sx, crop.sy, crop.sw, crop.sh, 0, 0, w, h);
+    const { data } = ctx.getImageData(0, 0, w, h);
+    const total = data.length / 4;
+    let white = 0;
+    let opaque = 0;
+    let saturated = 0;
+    let ink = 0;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] < 250) continue;
+      opaque++;
+      const max = Math.max(data[i], data[i + 1], data[i + 2]);
+      const min = Math.min(data[i], data[i + 1], data[i + 2]);
+      if (min > 200 && max - min < 32) white++;
+      else if (max > 60 && (max - min) / max > 0.35) saturated++;
+      if (max < 100) ink++;
+    }
+    const isPaper = opaque / total >= SCAN_OPAQUE_MIN_FRACTION && white / total >= SCAN_WHITE_MIN_FRACTION && saturated / total <= SCAN_SATURATED_MAX_FRACTION;
+    if (!isPaper) return null;
+    return { inked: ink >= SCAN_INK_MIN_PIXELS };
+  } catch {
+    return void 0;
+  }
+}
+function classifyScanPaper(source, crop) {
+  const size = sourceSize(source);
+  if (!size || size.width <= 0 || size.height <= 0) return null;
+  const fullSource = !crop || crop.sx === 0 && crop.sy === 0 && crop.sw === size.width && crop.sh === size.height;
+  const bitmap = fullSource && typeof ImageBitmap !== "undefined" && source instanceof ImageBitmap ? source : null;
+  if (bitmap) {
+    const cached = bitmapVerdicts.get(bitmap);
+    if (cached !== void 0) return cached;
+  }
+  const region = {
+    ...crop ?? { sx: 0, sy: 0, sw: size.width, sh: size.height }
+  };
+  if (region.sw < 0) {
+    region.sx += region.sw;
+    region.sw = -region.sw;
+  }
+  if (region.sh < 0) {
+    region.sy += region.sh;
+    region.sh = -region.sh;
+  }
+  if (region.sw === 0 || region.sh === 0) return null;
+  const verdict = sampleScanPaper(source, region);
+  if (verdict === void 0) return null;
+  if (bitmap) bitmapVerdicts.set(bitmap, verdict);
+  return verdict;
+}
+
 // src/lib/recolor-context.ts
 var RECOLOR_CLEANUP = Symbol("lectorRecolorCleanup");
 var RECOLOR_PAINTED = Symbol("lectorRecolorPainted");
@@ -1469,25 +1559,330 @@ function correctLuminosityMask(source, mappedWhiteLuma, mappedBlackLuma) {
   tmpCtx.putImageData(image, 0, 0);
   return tmp;
 }
-function applyContextRecolor(ctx, map) {
+function applyContextRecolor(ctx, map, options) {
   const target = ctx;
   target[RECOLOR_CLEANUP]?.();
   const mappedWhiteLuma = parseHexLuma(map("#ffffff"));
   const mappedBlackLuma = parseHexLuma(map("#000000"));
-  const withMaskCorrection = (original) => function(...args) {
+  const pageArea = options?.pageArea;
+  const scanEnabled = !!pageArea && pageArea > 0 && mappedWhiteLuma !== null && mappedBlackLuma !== null;
+  const scanInvertGray = scanEnabled ? 255 - Math.round(mappedWhiteLuma) : null;
+  const scanTintCss = scanEnabled ? map("#ffffff") : null;
+  let inkScaleGray = 255;
+  let inkOffsetGray = 0;
+  if (scanEnabled) {
+    const inkLuma = 255 - mappedWhiteLuma;
+    const span = inkLuma - mappedWhiteLuma;
+    if (span > 8) {
+      const scale = Math.min(
+        1,
+        Math.max(0, (mappedBlackLuma - mappedWhiteLuma) / span)
+      );
+      inkScaleGray = Math.round(scale * 255);
+      inkOffsetGray = Math.round(mappedWhiteLuma * (1 - scale));
+    }
+  }
+  const needsInkRemap = inkScaleGray < 253 || inkOffsetGray > 2;
+  const pristineFillRect = target.fillRect;
+  const destRect = (args) => {
+    if (args.length >= 9) {
+      return [args[5], args[6], args[7], args[8]];
+    }
+    if (args.length >= 5) {
+      return [args[1], args[2], args[3], args[4]];
+    }
+    const size = sourceSize(args[0]);
+    if (!size) return null;
+    return [
+      args[1] ?? 0,
+      args[2] ?? 0,
+      size.width,
+      size.height
+    ];
+  };
+  const scanCandidate = (self, args) => {
+    if (!scanEnabled || !pageArea) return null;
+    if (self.globalCompositeOperation !== "source-over") return null;
+    if (self.globalAlpha < 0.99) return null;
+    const filter = self.filter;
+    if (typeof filter === "string" && filter !== "none" && filter !== "")
+      return null;
+    const rect = destRect(args);
+    if (!rect) return null;
+    const t = self.getTransform();
+    const painted = Math.abs(t.a * t.d - t.b * t.c) * Math.abs(rect[2] * rect[3]);
+    const areaFraction = painted / pageArea;
+    if (areaFraction < SCAN_TILE_MIN_FRACTION) return null;
+    const crop = args.length >= 9 ? {
+      sx: args[1],
+      sy: args[2],
+      sw: args[3],
+      sh: args[4]
+    } : void 0;
+    const paper = classifyScanPaper(args[0], crop);
+    if (!paper) return null;
+    return { rect, areaFraction, clipped: clipActive(), inked: paper.inked };
+  };
+  const grayCss = (value) => `rgb(${value}, ${value}, ${value})`;
+  const clipFlags = [false];
+  const clipActive = () => clipFlags[clipFlags.length - 1] === true;
+  const pristineSave = target.save;
+  const pristineRestore = target.restore;
+  const pristineClip = target.clip;
+  const invertScanRect = (self, rect, matrix) => {
+    self.save();
+    self.setTransform(matrix);
+    self.globalAlpha = 1;
+    self.shadowColor = "rgba(0, 0, 0, 0)";
+    self.shadowBlur = 0;
+    self.shadowOffsetX = 0;
+    self.shadowOffsetY = 0;
+    self.globalCompositeOperation = "difference";
+    self.fillStyle = grayCss(scanInvertGray ?? 0);
+    pristineFillRect.call(self, rect[0], rect[1], rect[2], rect[3]);
+    if (needsInkRemap) {
+      self.globalCompositeOperation = "multiply";
+      self.fillStyle = grayCss(inkScaleGray);
+      pristineFillRect.call(self, rect[0], rect[1], rect[2], rect[3]);
+      if (inkOffsetGray > 0) {
+        self.globalCompositeOperation = "lighter";
+        self.fillStyle = grayCss(inkOffsetGray);
+        pristineFillRect.call(self, rect[0], rect[1], rect[2], rect[3]);
+      }
+    }
+    if (scanTintCss) {
+      self.globalCompositeOperation = "color";
+      self.fillStyle = scanTintCss;
+      pristineFillRect.call(self, rect[0], rect[1], rect[2], rect[3]);
+    }
+    self.restore();
+  };
+  const OVERLAP_TOLERANCE = 0.2;
+  let pendingTileArea = 0;
+  let pendingHasInk = false;
+  const pendingTiles = [];
+  const coveredBounds = [];
+  let paintSerial = 0;
+  let pendingBaselineSerial = 0;
+  const tileBounds = (matrix, rect) => {
+    const corners = [
+      matrix.transformPoint({ x: rect[0], y: rect[1] }),
+      matrix.transformPoint({ x: rect[0] + rect[2], y: rect[1] }),
+      matrix.transformPoint({ x: rect[0], y: rect[1] + rect[3] }),
+      matrix.transformPoint({ x: rect[0] + rect[2], y: rect[1] + rect[3] })
+    ];
+    return [
+      Math.min(...corners.map((c) => c.x)),
+      Math.min(...corners.map((c) => c.y)),
+      Math.max(...corners.map((c) => c.x)),
+      Math.max(...corners.map((c) => c.y))
+    ];
+  };
+  const boundsArea = (b) => Math.max(0, b[2] - b[0]) * Math.max(0, b[3] - b[1]);
+  const overlapsAny = (bounds, others) => others.some((other) => {
+    const intersection = [
+      Math.max(bounds[0], other[0]),
+      Math.max(bounds[1], other[1]),
+      Math.min(bounds[2], other[2]),
+      Math.min(bounds[3], other[3])
+    ];
+    const smaller = Math.min(boundsArea(bounds), boundsArea(other));
+    return smaller > 0 && boundsArea(intersection) > OVERLAP_TOLERANCE * smaller;
+  });
+  const AXIS_EPS = 1e-6;
+  const isAxisAligned = (m) => Math.abs(m.b) < AXIS_EPS && Math.abs(m.c) < AXIS_EPS;
+  const IDENTITY_MATRIX = typeof DOMMatrix !== "undefined" ? new DOMMatrix() : null;
+  const subtractBounds = (rects, hole) => {
+    const out = [];
+    for (const r2 of rects) {
+      const ix0 = Math.max(r2[0], hole[0]);
+      const iy0 = Math.max(r2[1], hole[1]);
+      const ix1 = Math.min(r2[2], hole[2]);
+      const iy1 = Math.min(r2[3], hole[3]);
+      if (ix0 >= ix1 || iy0 >= iy1) {
+        out.push(r2);
+        continue;
+      }
+      if (r2[1] < iy0) out.push([r2[0], r2[1], r2[2], iy0]);
+      if (iy1 < r2[3]) out.push([r2[0], iy1, r2[2], r2[3]]);
+      if (r2[0] < ix0) out.push([r2[0], iy0, ix0, iy1]);
+      if (ix1 < r2[2]) out.push([ix1, iy0, r2[2], iy1]);
+    }
+    return out;
+  };
+  const invertTileRemainder = (self, tile, holes) => {
+    if (!isAxisAligned(tile.matrix) || !IDENTITY_MATRIX) {
+      invertScanRect(self, tile.rect, tile.matrix);
+      return;
+    }
+    let pieces = [tile.bounds];
+    for (const hole of holes) pieces = subtractBounds(pieces, hole);
+    for (const piece of pieces) {
+      if (piece[2] - piece[0] < 0.5 || piece[3] - piece[1] < 0.5) continue;
+      invertScanRect(
+        self,
+        [piece[0], piece[1], piece[2] - piece[0], piece[3] - piece[1]],
+        IDENTITY_MATRIX
+      );
+    }
+  };
+  const pendingTriggerReady = (requireInk = true) => {
+    if (pendingTileArea < SCAN_COVERAGE_MIN) return false;
+    if (requireInk && !pendingHasInk) return false;
+    const union = [
+      Math.min(...pendingTiles.map((t) => t.bounds[0])),
+      Math.min(...pendingTiles.map((t) => t.bounds[1])),
+      Math.max(...pendingTiles.map((t) => t.bounds[2])),
+      Math.max(...pendingTiles.map((t) => t.bounds[3]))
+    ];
+    const unionArea = boundsArea(union);
+    if (unionArea <= 0) return false;
+    return pendingTileArea * (pageArea ?? 0) / unionArea >= SCAN_TILE_DENSITY_MIN;
+  };
+  const prunePendingToCleanSuffix = () => {
+    if (paintSerial === pendingBaselineSerial) return;
+    const kept = pendingTiles.filter((t) => t.serial === paintSerial);
+    pendingTiles.length = 0;
+    pendingTiles.push(...kept);
+    pendingTileArea = kept.reduce((sum, t) => sum + t.area, 0);
+    pendingHasInk = kept.some((t) => t.inked);
+    pendingBaselineSerial = paintSerial;
+  };
+  const flushPendingTiles = (self) => {
+    if (paintSerial !== pendingBaselineSerial) {
+      prunePendingToCleanSuffix();
+      if (pendingTiles.length === 0 || !pendingTriggerReady()) return;
+    }
+    for (const pending of pendingTiles) {
+      invertTileRemainder(self, pending, coveredBounds);
+      coveredBounds.push(pending.bounds);
+    }
+    pendingTiles.length = 0;
+    pendingTileArea = 0;
+    pendingHasInk = false;
+  };
+  const handleScanCandidate = (self, candidate) => {
+    const matrix = self.getTransform();
+    const bounds = tileBounds(matrix, candidate.rect);
+    if (candidate.areaFraction >= SCAN_COVERAGE_MIN && !candidate.clipped) {
+      for (let i = coveredBounds.length - 1; i >= 0; i--) {
+        const covered = coveredBounds[i];
+        const intersection = [
+          Math.max(bounds[0], covered[0]),
+          Math.max(bounds[1], covered[1]),
+          Math.min(bounds[2], covered[2]),
+          Math.min(bounds[3], covered[3])
+        ];
+        const coveredArea = boundsArea(covered);
+        if (coveredArea > 0 && boundsArea(intersection) >= 0.8 * coveredArea) {
+          coveredBounds.splice(i, 1);
+        }
+      }
+    }
+    if (candidate.areaFraction >= SCAN_COVERAGE_MIN && candidate.clipped) {
+      if (candidate.inked) {
+        invertScanRect(self, candidate.rect, matrix);
+      }
+      pendingTiles.length = 0;
+      pendingTileArea = 0;
+      pendingHasInk = false;
+      return;
+    }
+    if (coveredBounds.length > 0 && candidate.areaFraction <= 0.2) {
+      const candidateArea = boundsArea(bounds);
+      let insideArea = 0;
+      for (const covered of coveredBounds) {
+        const intersection = [
+          Math.max(bounds[0], covered[0]),
+          Math.max(bounds[1], covered[1]),
+          Math.min(bounds[2], covered[2]),
+          Math.min(bounds[3], covered[3])
+        ];
+        insideArea += boundsArea(intersection);
+      }
+      if (candidateArea > 0 && insideArea >= 0.8 * candidateArea) return;
+    }
+    if (coveredBounds.length > 0 && !candidate.clipped) {
+      invertScanRect(self, candidate.rect, matrix);
+      coveredBounds.push(bounds);
+      return;
+    }
+    if (candidate.areaFraction >= SCAN_COVERAGE_MIN && candidate.inked) {
+      invertScanRect(self, candidate.rect, matrix);
+      coveredBounds.push(bounds);
+      flushPendingTiles(self);
+      return;
+    }
+    if (candidate.clipped) {
+      paintSerial++;
+      return;
+    }
+    if (candidate.areaFraction >= SCAN_COVERAGE_MIN) {
+      for (let i = pendingTiles.length - 1; i >= 0; i--) {
+        const pending = pendingTiles[i];
+        const intersection = [
+          Math.max(bounds[0], pending.bounds[0]),
+          Math.max(bounds[1], pending.bounds[1]),
+          Math.min(bounds[2], pending.bounds[2]),
+          Math.min(bounds[3], pending.bounds[3])
+        ];
+        const pendingArea = boundsArea(pending.bounds);
+        if (pendingArea > 0 && boundsArea(intersection) >= 0.8 * pendingArea) {
+          pendingTiles.splice(i, 1);
+        }
+      }
+      pendingTileArea = pendingTiles.reduce((sum, t) => sum + t.area, 0);
+      pendingHasInk = pendingTiles.some((t) => t.inked);
+    }
+    let contributedArea = candidate.areaFraction;
+    if (isAxisAligned(matrix) && pageArea) {
+      let pieces = [bounds];
+      for (const pending of pendingTiles) {
+        pieces = subtractBounds(pieces, pending.bounds);
+      }
+      contributedArea = pieces.reduce((sum, piece) => sum + boundsArea(piece), 0) / pageArea;
+    } else if (overlapsAny(
+      bounds,
+      pendingTiles.map((t) => t.bounds)
+    )) {
+      return;
+    }
+    if (pendingTiles.length === 0) pendingBaselineSerial = paintSerial;
+    pendingTiles.push({
+      rect: candidate.rect,
+      matrix,
+      bounds,
+      area: contributedArea,
+      inked: candidate.inked,
+      serial: paintSerial
+    });
+    pendingTileArea += contributedArea;
+    pendingHasInk ||= candidate.inked;
+    if (!pendingTriggerReady()) return;
+    flushPendingTiles(self);
+  };
+  const withImageHandling = (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;
+      paintSerial++;
       if (corrected) {
         const next = [corrected, ...args.slice(1)];
         return original.apply(this, next);
       }
+      return original.apply(this, args);
     }
-    return original.apply(this, args);
+    const candidate = scanCandidate(this, args);
+    if (!candidate) paintSerial++;
+    const result = original.apply(this, args);
+    if (candidate) handleScanCandidate(this, candidate);
+    return result;
   };
   const withMappedStyle = (original, styleProp) => function(...args) {
     const style = this[styleProp];
+    const invisible = this.globalCompositeOperation === "source-over" && (this.globalAlpha === 0 || style === "transparent" || typeof style === "string" && style.startsWith("rgba(") && style.endsWith(", 0)"));
+    if (!invisible) paintSerial++;
     if (typeof style === "string") {
       const mapped = map(style);
       if (mapped !== style) {
@@ -1520,14 +1915,55 @@ function applyContextRecolor(ctx, map) {
     record[name] = withMappedStyle(target[name], "strokeStyle");
   for (const name of GRADIENT_METHODS)
     record[name] = withMappedStops(target[name]);
-  record.drawImage = withMaskCorrection(target.drawImage);
-  const cleanup = () => {
+  record.drawImage = withImageHandling(target.drawImage);
+  const pristinePutImageData = target.putImageData;
+  record.putImageData = function(...args) {
+    paintSerial++;
+    return pristinePutImageData.apply(this, args);
+  };
+  const pristineClearRect = target.clearRect;
+  record.clearRect = function(...args) {
+    paintSerial++;
+    return pristineClearRect.apply(this, args);
+  };
+  record.save = function() {
+    clipFlags.push(clipFlags[clipFlags.length - 1]);
+    return pristineSave.call(this);
+  };
+  record.restore = function() {
+    if (clipFlags.length > 1) clipFlags.pop();
+    return pristineRestore.call(this);
+  };
+  record.clip = function(...args) {
+    clipFlags[clipFlags.length - 1] = true;
+    return pristineClip.apply(this, args);
+  };
+  const finalizeBlankScanPage = () => {
+    if (pendingTiles.length === 0) return;
+    prunePendingToCleanSuffix();
+    if (pendingTiles.length === 0) return;
+    if (!pendingTriggerReady(false)) return;
+    for (const pending of pendingTiles) {
+      invertTileRemainder(target, pending, coveredBounds);
+      coveredBounds.push(pending.bounds);
+    }
+    pendingTiles.length = 0;
+    pendingTileArea = 0;
+    pendingHasInk = false;
+  };
+  const cleanup = (finalizeRender = false) => {
     if (target[RECOLOR_CLEANUP] !== cleanup) return;
+    if (finalizeRender) finalizeBlankScanPage();
     for (const name of [
       ...FILL_METHODS,
       ...STROKE_METHODS,
       ...GRADIENT_METHODS,
-      "drawImage"
+      "drawImage",
+      "putImageData",
+      "clearRect",
+      "save",
+      "restore",
+      "clip"
     ])
       delete record[name];
     delete target[RECOLOR_CLEANUP];
@@ -1792,7 +2228,9 @@ var useCanvasLayer = ({ background }) => {
     };
     let restoreRecolor = null;
     if (recolor) {
-      restoreRecolor = applyContextRecolor(renderCtx, recolor);
+      restoreRecolor = applyContextRecolor(renderCtx, recolor, {
+        pageArea: viewport.width * viewport.height
+      });
     } else {
       removeContextRecolor(renderCtx);
     }
@@ -1809,19 +2247,20 @@ var useCanvasLayer = ({ background }) => {
       releaseBuffer();
       throw error;
     }
-    renderingTask.promise.finally(() => {
-      restoreRecolor?.();
-    }).then(() => {
+    renderingTask.promise.then(() => {
       if (cancelled) {
+        restoreRecolor?.();
         releaseBuffer();
         return;
       }
       const state = store.getState();
       const currentRecolorKey = state.colorScheme === "dark" ? `dark:${state.darkModeColors.background},${state.darkModeColors.foreground}` : void 0;
       if (currentRecolorKey !== recolorKey) {
+        restoreRecolor?.();
         releaseBuffer();
         return;
       }
+      restoreRecolor?.(true);
       if (useBuffer) {
         applyBackingSize();
         context.drawImage(buffer, 0, 0);
@@ -1853,6 +2292,7 @@ var useCanvasLayer = ({ background }) => {
         releaseBuffer();
       }
     }).catch((error) => {
+      restoreRecolor?.();
       releaseBuffer();
       if (cancelled) return;
       if (error?.name === "RenderingCancelledException") return;
@@ -2165,7 +2605,9 @@ var useDetailCanvasLayer = ({
       const detailViewport = pdfPageProxy.getViewport({
         scale: effectiveScale
       });
-      if (recolor) applyContextRecolor(bufferCtx, recolor);
+      const restoreRecolor = recolor ? applyContextRecolor(bufferCtx, recolor, {
+        pageArea: detailViewport.width * detailViewport.height
+      }) : null;
       const releaseBuffer = () => {
         buffer.width = 0;
         buffer.height = 0;
@@ -2193,6 +2635,7 @@ var useDetailCanvasLayer = ({
         const state = store.getState();
         const currentRecolorKey = state.colorScheme === "dark" ? `dark:${state.darkModeColors.background},${state.darkModeColors.foreground}` : "light";
         if (currentRecolorKey !== recolorKey) return;
+        restoreRecolor?.(true);
         detailCanvas.width = actualWidth;
         detailCanvas.height = actualHeight;
         detailCanvas.style.cssText = `${detailBaseStyle};display:block;opacity:1;width:${cssWidth}px;height:${cssHeight}px;transform-origin:center center;transform:translate(${rectLeft * zoom}px,${rectTop * zoom}px)`;
@@ -2264,6 +2707,7 @@ var useDetailCanvasLayer = ({
         clearTimeout(renderTimeoutId);
       }
       void renderingTask?.cancel();
+      renderingTask = null;
     };
   }, [
     pdfPageProxy,
@@ -6651,6 +7095,7 @@ var useThumbnail = (pageNumber, config = {}) => {
   useEffect(() => {
     if (!isVisible && renderedProxyRef.current !== pageProxy) return;
     renderedProxyRef.current = pageProxy;
+    let stale = false;
     const renderThumbnail = async () => {
       const canvas2 = canvasRef.current;
       if (!canvas2 || !pageProxy) return;
@@ -6671,7 +7116,9 @@ var useThumbnail = (pageNumber, config = {}) => {
         if (!context) return;
         let restoreRecolor = null;
         if (recolor) {
-          restoreRecolor = applyContextRecolor(context, recolor);
+          restoreRecolor = applyContextRecolor(context, recolor, {
+            pageArea: scaledViewport.width * scaledViewport.height
+          });
         } else {
           removeContextRecolor(context);
         }
@@ -6683,6 +7130,7 @@ var useThumbnail = (pageNumber, config = {}) => {
           });
           renderTaskRef.current = renderTask;
           await renderTask.promise;
+          restoreRecolor?.(!stale);
         } finally {
           restoreRecolor?.();
         }
@@ -6697,6 +7145,7 @@ var useThumbnail = (pageNumber, config = {}) => {
     renderThumbnail();
     const canvas = canvasRef.current;
     return () => {
+      stale = true;
       renderTaskRef.current?.cancel();
       if (canvas) {
         canvas.width = 1;

package/package.json

@@ -1,103 +1,104 @@
 {
-  "name": "@anaralabs/lector",
-  "version": "3.13.4",
-  "description": "A headless PDF viewer for React",
-  "author": "andrewdr (https://github.com/andrewdoro)",
-  "license": "MIT",
-  "type": "module",
-  "sideEffects": false,
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./esm-only.cjs"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev": "tsup --watch --onSuccess 'yalc push'",
-    "prebuild": "rm -rf dist",
-    "build": "tsup",
-    "lint": "biome check .",
-    "format": "biome format --write .",
-    "postbuild": "size-limit --json > size.json",
-    "test": "pnpm run '/^test:/'",
-    "test:unit": "vitest run",
-    "test:size": "size-limit",
-    "prepack": "./scripts/prepack.sh"
-  },
-  "devDependencies": {
-    "@microsoft/api-extractor": "^7.48.1",
-    "@size-limit/preset-small-lib": "^11.1.6",
-    "@testing-library/react": "^16.0.0",
-    "@types/node": "^22.9.0",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.2",
-    "@use-gesture/react": "^10.3.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.2.6",
-    "clsx": "^2.1.1",
-    "pdfjs-dist": "^5.5.207",
-    "playwright": "^1.45.3",
-    "react": "^19.1.1",
-    "size-limit": "^11.1.6",
-    "tsc-alias": "^1.8.10",
-    "tslib": "^2.6.3",
-    "tsup": "^8.3.5",
-    "typescript": "^5.5.3",
-    "vite": "^6.4.3",
-    "vitest": "^3.2.6",
-    "webdriverio": "^8.39.1"
-  },
-  "peerDependencies": {
-    "pdfjs-dist": "^5.5.207",
-    "react": ">=19"
-  },
-  "dependencies": {
-    "@floating-ui/react": "^0.26.28",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@tanstack/react-virtual": "^3.10.9",
-    "react-dom": "^19.1.1",
-    "use-debounce": "^10.0.4",
-    "uuid": "^11.1.1",
-    "zustand": "^5.0.2"
-  },
-  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-gnu": "^4.28.1"
-  },
-  "keywords": [
-    "pdf",
-    "react",
-    "headless",
-    "viewer",
-    "react-pdf",
-    "anaralabs",
-    "typescript"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/anaralabs/lector.git",
-    "directory": "packages/lector"
-  },
-  "bugs": {
-    "url": "https://github.com/anaralabs/lector/issues"
-  },
-  "homepage": "https://github.com/anaralabs/lector",
-  "size-limit": [
-    {
-      "name": "Client",
-      "path": "dist/index.js",
-      "limit": "150 kB",
-      "ignore": [
-        "react"
-      ]
-    }
-  ]
+	"name": "@anaralabs/lector",
+	"version": "3.14.1",
+	"description": "A headless PDF viewer for React",
+	"author": "andrewdr (https://github.com/andrewdoro)",
+	"license": "MIT",
+	"type": "module",
+	"sideEffects": false,
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./esm-only.cjs"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"dev": "tsup --watch --onSuccess 'yalc push'",
+		"prebuild": "rm -rf dist",
+		"build": "tsup",
+		"lint": "biome check .",
+		"format": "biome format --write .",
+		"postbuild": "size-limit --json > size.json",
+		"test": "pnpm run '/^test:/'",
+		"test:unit": "vitest run",
+		"test:size": "size-limit",
+		"prepack": "./scripts/prepack.sh",
+		"prepare": "tsup"
+	},
+	"devDependencies": {
+		"@microsoft/api-extractor": "^7.48.1",
+		"@size-limit/preset-small-lib": "^11.1.6",
+		"@testing-library/react": "^16.0.0",
+		"@types/node": "^22.9.0",
+		"@types/react": "^19.0.1",
+		"@types/react-dom": "^19.0.2",
+		"@use-gesture/react": "^10.3.1",
+		"@vitejs/plugin-react": "^4.3.4",
+		"@vitest/browser": "^3.2.6",
+		"clsx": "^2.1.1",
+		"pdfjs-dist": "^5.5.207",
+		"playwright": "^1.45.3",
+		"react": "^19.1.1",
+		"size-limit": "^11.1.6",
+		"tsc-alias": "^1.8.10",
+		"tslib": "^2.6.3",
+		"tsup": "^8.3.5",
+		"typescript": "^5.5.3",
+		"vite": "^6.4.3",
+		"vitest": "^3.2.6",
+		"webdriverio": "^8.39.1"
+	},
+	"peerDependencies": {
+		"pdfjs-dist": "^5.5.207",
+		"react": ">=19"
+	},
+	"dependencies": {
+		"@floating-ui/react": "^0.26.28",
+		"@radix-ui/react-slot": "^1.1.0",
+		"@tanstack/react-virtual": "^3.10.9",
+		"react-dom": "^19.1.1",
+		"use-debounce": "^10.0.4",
+		"uuid": "^11.1.1",
+		"zustand": "^5.0.2"
+	},
+	"optionalDependencies": {
+		"@rollup/rollup-linux-x64-gnu": "^4.28.1"
+	},
+	"keywords": [
+		"pdf",
+		"react",
+		"headless",
+		"viewer",
+		"react-pdf",
+		"anaralabs",
+		"typescript"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/anaralabs/lector.git",
+		"directory": "packages/lector"
+	},
+	"bugs": {
+		"url": "https://github.com/anaralabs/lector/issues"
+	},
+	"homepage": "https://github.com/anaralabs/lector",
+	"size-limit": [
+		{
+			"name": "Client",
+			"path": "dist/index.js",
+			"limit": "150 kB",
+			"ignore": [
+				"react"
+			]
+		}
+	]
 }