import React, { ReactNode, CSSProperties, MouseEvent as MouseEvent$1 } from 'react'; import { Root } from 'react-dom/client'; import { PDFDocumentProxy, OnProgressParameters } from 'pdfjs-dist'; import { PDFViewer as PDFViewer$2 } from 'pdfjs-dist/types/web/pdf_viewer'; import { PDFViewer as PDFViewer$3 } from 'pdfjs-dist/web/pdf_viewer.mjs'; import { TypedArray, DocumentInitParameters } from 'pdfjs-dist/types/src/display/api'; /** * A rectangle as measured by the viewport. * * @category Type */ type LTWH = { /** The x coordinate of the top-left of the rectangle. */ left: number; /** The y coordinate of the top-left of the rectangle. */ top: number; /** Width of the rectangle, relative to top left of the viewport. */ width: number; /** Height of the rectangle, relative to top left of the viewport. */ height: number; }; /** @category Type */ type LTWHP = LTWH & { /** 1-Indexed page number */ pageNumber: number; }; /** * "scaled" means that data structure stores (0, 1) coordinates. * for clarity reasons I decided not to store actual (0, 1) coordinates but * provide width and height, so user can compute ratio himself if needed * * @category Type * @author Artem Tyurin */ type Scaled = { x1: number; y1: number; x2: number; y2: number; width: number; height: number; /** 1-Indexed page number */ pageNumber: number; }; /** * Position of a Highlight relative to the viewport. * * @category Type */ type ViewportPosition = { /** Bounding rectangle for the entire highlight. */ boundingRect: LTWHP; /** For text highlights, the rectangular highlights for each block of text. */ rects: Array; }; /** * Position of a Highlight with normalised coordinates. * * @category Type */ type ScaledPosition = { /** Bounding rectangle for the entire highlight. */ boundingRect: Scaled; /** For text highlights, the rectangular highlights for each block of text. */ rects: Array; /** Rarely applicable property of whether coordinates should be in PDF coordinate space. */ usePdfCoordinates?: boolean; }; /** * A point in a drawing stroke. * * @category Type */ type DrawingPoint = { x: number; y: number; }; /** * A stroke in a drawing, with its own color and width. * * @category Type */ type DrawingStroke = { points: DrawingPoint[]; color: string; width: number; }; /** * Shape types for shape annotations. * * @category Type */ type ShapeType = "rectangle" | "circle" | "arrow"; /** * Shape data for shape highlights. * * @category Type */ type ShapeData = { shapeType: ShapeType; strokeColor: string; strokeWidth: number; /** For arrows: start point as percentage of bounding box (0-1) */ startPoint?: { x: number; y: number; }; /** For arrows: end point as percentage of bounding box (0-1) */ endPoint?: { x: number; y: number; }; }; /** * The content of a highlight * * @category Type */ type Content = { text?: string; image?: string; /** For drawing highlights, store the stroke data for later editing */ strokes?: DrawingStroke[]; /** For shape highlights, store the shape data */ shape?: ShapeData; }; /** * What type the highlight is. This is the ideal way to determine whether to * render it in an AreaHighlight or TextHighlight. * * @category Type */ type HighlightType = "text" | "area" | "freetext" | "image" | "drawing" | "shape"; /** * This represents a selected (text/mouse) area that has been turned into a * highlight. If you are storing highlights, they should be stored as this type. * * @category Type */ interface Highlight { id: string; /** * This property is planned to be non-optional in future. */ type?: HighlightType; /** * @deprecated If you want your highlight to store content after being a * GhostHighlight, you should create your own interface extended off this. If * you are currently using this property to determine what kind of highlight * to render, please use {@link type}. */ content?: Content; position: ScaledPosition; } /** * This represents a temporary highlight and is ideal as an intermediary between * a selection and a highlight. * * @category Type */ interface GhostHighlight extends Required> { content: Content; } /** * This represents a rendered highlight, with its position defined by the page * viewport. * * @category Type */ type ViewportHighlight = Omit & { position: ViewportPosition; }; /** * An area or text selection in a PDF Document. * * @category Type */ type PdfSelection = GhostHighlight & { /** Convert the current selection into a temporary highlight */ makeGhostHighlight(): GhostHighlight; }; /** * A PDF.js page representation. This is the reference type for every page in the PdfHighlighter. * * @category Type */ type Page = { node: HTMLElement; /** 1-Index page number */ number: number; }; /** * All the DOM refs for a group of highlights on one page * * @category Type */ type HighlightBindings = { reactRoot: Root; container: Element; textLayer: HTMLElement; }; /** * A popup that can be viewed inside a PdfHighlighter. * * @category Type */ type Tip = { position: ViewportPosition; content: ReactNode; }; /** * The accepted scale values by the PDF.js viewer. * Numeric entries accept floats, e.g. 1.2 = 120% * * @category Type */ type PdfScaleValue = "page-actual" | "page-width" | "page-height" | "page-fit" | "auto" | number; /** * Processed outline item with page number resolved * * @category Type */ interface ProcessedOutlineItem { id: string; title: string; pageNumber: number; dest: string | unknown[] | null; level: number; bold: boolean; italic: boolean; children: ProcessedOutlineItem[]; } /** * Thumbnail data for a single page * * @category Type */ interface ThumbnailData { pageNumber: number; dataUrl: string | null; isLoading: boolean; error?: string; } /** * Left panel tab options * * @category Type */ type LeftPanelTab = 'outline' | 'thumbnails'; /** * Options for the PDF export function. * * @category Type */ interface ExportPdfOptions { /** Default color for text highlights. Default: "rgba(255, 226, 143, 0.5)" */ textHighlightColor?: string; /** Default color for area highlights. Default: "rgba(255, 226, 143, 0.5)" */ areaHighlightColor?: string; /** Default text color for freetext. Default: "#333333" */ defaultFreetextColor?: string; /** Default background for freetext. Default: "#ffffc8" */ defaultFreetextBgColor?: string; /** Default font size for freetext. Default: 14 */ defaultFreetextFontSize?: number; /** Progress callback for large PDFs */ onProgress?: (current: number, total: number) => void; } /** * A highlight that can be exported to PDF. * * @category Type */ interface ExportableHighlight { id: string; type?: "text" | "area" | "freetext" | "image" | "drawing" | "shape"; content?: { text?: string; image?: string; shape?: ShapeData; }; position: ScaledPosition; /** Per-highlight color override (for text/area highlights) */ highlightColor?: string; /** Style mode for text highlights: "highlight" (default), "underline", or "strikethrough" */ highlightStyle?: "highlight" | "underline" | "strikethrough"; /** Text color for freetext highlights */ color?: string; /** Background color for freetext highlights */ backgroundColor?: string; /** Font size for freetext highlights */ fontSize?: string; /** Font family for freetext highlights (not used in export, Helvetica is always used) */ fontFamily?: string; /** Shape type for shape highlights */ shapeType?: "rectangle" | "circle" | "arrow"; /** Stroke color for shape highlights */ strokeColor?: string; /** Stroke width for shape highlights */ strokeWidth?: number; } /** * Export a PDF with annotations embedded. * * @param pdfSource - The source PDF as a URL string, Uint8Array, or ArrayBuffer * @param highlights - Array of highlights to embed in the PDF * @param options - Export options for customizing colors and behavior * @returns Promise - The modified PDF as bytes * * @example * ```typescript * const pdfBytes = await exportPdf(pdfUrl, highlights, { * textHighlightColor: "rgba(255, 255, 0, 0.4)", * onProgress: (current, total) => console.log(`${current}/${total} pages`) * }); * * // Download the file * const blob = new Blob([pdfBytes], { type: "application/pdf" }); * const url = URL.createObjectURL(blob); * const a = document.createElement("a"); * a.href = url; * a.download = "annotated.pdf"; * a.click(); * URL.revokeObjectURL(url); * ``` * * @category Function */ declare function exportPdf$1(pdfSource: string | Uint8Array | ArrayBuffer, highlights: ExportableHighlight[], options?: ExportPdfOptions): Promise; /** * Options for searching text in the PDF document. * * @category Type */ type PdfSearchOptions = { /** If true, search is case-sensitive. */ caseSensitive?: boolean; /** If true, only whole-word matches are returned. */ entireWord?: boolean; /** If true, all matches are highlighted, not just the selected match. */ highlightAll?: boolean; /** If true, diacritics must match exactly. */ matchDiacritics?: boolean; }; /** * A set of utilities for to control the behaviour of {@link PdfHighlighter}. * * @category Context */ type PdfHighlighterUtils = { /** * Checks whether a selection is progress, a ghost highlight, or an edit. * * @returns - `true` if editing, ghost highlighting, or selecting. */ isEditingOrHighlighting(): boolean; /** * Get currently selected area or text selection. * * @returns - current selection or `null` if no selection is being made. */ getCurrentSelection(): PdfSelection | null; /** * Get the currently present ghost highlight. * * @return - currently present ghost highlight or `null` if non-existent. */ getGhostHighlight(): GhostHighlight | null; /** * Cancel any ghost highlight. * The selected area will stay selected until the user clicks away. */ removeGhostHighlight(): void; /** * If enabled, automatic tips/popups inside of a PdfHighlighter will be disabled. * Additional niceties will also be provided to prevent new highlights being made. */ toggleEditInProgress(flag?: boolean): void; /** * Whether an AreaHighlight is being moved/resized, or a manual highlight edit has * been toggled. * * @returns - `true` if AreaHighlight is being edited or edit mode was set. */ isEditInProgress(): boolean; /** * Whether a mouse selection or text selection is currently being performed. * * @returns - `true` if mouse selection or text selection is being performed. */ isSelectionInProgress(): boolean; /** * Scroll to a highlight in this viewer. * * @param highlight - A highlight provided to the {@link PdfHighlighter} to * scroll to. */ scrollToHighlight(highlight: Highlight): void; /** * Get a reference to the currently used instance of a PDF Viewer. * * @returns - The currently active PDF Viewer. */ getViewer(): PDFViewer$2 | null; /** * Get the currently active tip, if any. * * @returns - the currently active tip or `null` if inactive. */ getTip(): Tip | null; /** * Set a tip to be displayed in the current PDF Viewer. * * @param tip - tip to be displayed, or `null` to hide any tip. */ setTip(tip: Tip | null): void; /** * Callback to update any currently active tip's position. This will make sure * the tip is visible above/below its highlight. */ updateTipPosition(): void; /** * Get the PDF link service instance for navigation. * * @returns - The currently active PDF link service or null. */ getLinkService(): unknown | null; /** * Get the event bus instance for page events. * * @returns - The currently active event bus or null. */ getEventBus(): unknown | null; /** * Navigate to a specific page number. * * @param pageNumber - 1-indexed page number to navigate to. */ goToPage(pageNumber: number): void; /** * Search for text in the PDF document. * * @param query - Search text. * @param options - Search options. */ search(query: string, options?: PdfSearchOptions): void; /** * Move to the next search result. */ findNext(): void; /** * Move to the previous search result. */ findPrevious(): void; /** * Clear active search highlights. */ clearSearch(): void; }; /** * Custom hook for providing {@link PdfHighlighterUtils}. Must be used * within a child of {@link PdfHighlighter}. * * @category Context */ declare const usePdfHighlighterContext: () => PdfHighlighterUtils; /** * Theme configuration for PdfHighlighter styling. * Controls the appearance of the PDF viewer including dark mode support. * * @category Type */ interface PdfHighlighterTheme { /** * Theme mode - controls PDF page color inversion. * In dark mode, PDF pages are inverted for comfortable reading. * @default "light" */ mode?: "light" | "dark"; /** * Background color of the viewer container. * @default "#e5e5e5" for light mode, "#1e1e1e" for dark mode */ containerBackgroundColor?: string; /** * Scrollbar thumb color. * @default "#9f9f9f" for light mode, "#6b6b6b" for dark mode */ scrollbarThumbColor?: string; /** * Scrollbar track color. * @default "#d1d1d1" for light mode, "#2c2c2c" for dark mode */ scrollbarTrackColor?: string; /** * Inversion intensity for dark mode (0-1). * Lower values create softer dark backgrounds that are easier on the eyes. * - 1.0 = Pure black background (harsh) * - 0.9 = Dark gray ~#1a1a1a (recommended) * - 0.85 = Softer gray ~#262626 (very comfortable) * - 0.8 = Medium gray ~#333333 (maximum softness) * @default 0.9 */ darkModeInvertIntensity?: number; } /** * The props type for {@link PdfHighlighter}. * * @category Component Properties */ interface PdfHighlighterProps { /** * Array of all highlights to be organised and fed through to the child * highlight container. */ highlights: Array; /** * Event is called only once whenever the user changes scroll after * the autoscroll function, scrollToHighlight, has been called. */ onScrollAway?(): void; /** * What scale to render the PDF at inside the viewer. */ pdfScaleValue?: PdfScaleValue; /** * Callback triggered whenever a user finishes making a mouse selection or has * selected text. * * @param PdfSelection - Content and positioning of the selection. NOTE: * `makeGhostHighlight` will not work if the selection disappears. */ onSelection?(PdfSelection: PdfSelection): void; /** * Callback triggered whenever a ghost (non-permanent) highlight is created. * * @param ghostHighlight - Ghost Highlight that has been created. */ onCreateGhostHighlight?(ghostHighlight: GhostHighlight): void; /** * Callback triggered whenever a ghost (non-permanent) highlight is removed. * * @param ghostHighlight - Ghost Highlight that has been removed. */ onRemoveGhostHighlight?(ghostHighlight: GhostHighlight): void; /** * Optional element that can be displayed as a tip whenever a user makes a * selection. */ selectionTip?: ReactNode; /** * Condition to check before any mouse selection starts. * * @param event - mouse event associated with the new selection. * @returns - `True` if mouse selection should start. */ enableAreaSelection?(event: MouseEvent): boolean; /** * When true, shows crosshair cursor indicating area selection mode is active. * Use this when area selection should be persistently enabled (not just on modifier key). */ areaSelectionMode?: boolean; /** * Optional CSS styling for the rectangular mouse selection. */ mouseSelectionStyle?: CSSProperties; /** * PDF document to view and overlay highlights. */ pdfDocument: PDFDocumentProxy; /** * This should be a highlight container/renderer of some sorts. It will be * given appropriate context for a single highlight which it can then use to * render a TextHighlight, AreaHighlight, etc. in the correct place. */ children: ReactNode; /** * Coloring for unhighlighted, selected text. */ textSelectionColor?: string; /** * Creates a reference to the PdfHighlighterContext above the component. * * @param pdfHighlighterUtils - various useful tools with a PdfHighlighter. * See {@link PdfHighlighterContext} for more description. */ utilsRef(pdfHighlighterUtils: PdfHighlighterUtils): void; /** * Style properties for the PdfHighlighter (scrollbar, background, etc.), NOT * the PDF.js viewer it encloses. If you want to edit the latter, use the * other style props like `textSelectionColor` or overwrite pdf_viewer.css */ style?: CSSProperties; /** * Condition to check before freetext creation starts. * * @param event - mouse event associated with the click. * @returns - `True` if freetext creation should occur. */ enableFreetextCreation?(event: MouseEvent): boolean; /** * Callback triggered when user clicks to create a freetext annotation. * * @param position - Scaled position where the click occurred. */ onFreetextClick?(position: ScaledPosition): void; /** * Condition to check before image creation starts. * * @param event - mouse event associated with the click. * @returns - `True` if image creation should occur. */ enableImageCreation?(event: MouseEvent): boolean; /** * Callback triggered when user clicks to create an image annotation. * * @param position - Scaled position where the click occurred. */ onImageClick?(position: ScaledPosition): void; /** * Whether drawing mode is enabled. */ enableDrawingMode?: boolean; /** * Callback triggered when a drawing is completed. * * @param dataUrl - The drawing as a PNG data URL. * @param position - Scaled position of the drawing on the page. * @param strokes - The stroke data for later editing. */ onDrawingComplete?(dataUrl: string, position: ScaledPosition, strokes: DrawingStroke[]): void; /** * Callback triggered when drawing is cancelled. */ onDrawingCancel?(): void; /** * Stroke color for drawing mode. * @default "#000000" */ drawingStrokeColor?: string; /** * Stroke width for drawing mode. * @default 3 */ drawingStrokeWidth?: number; /** * The type of shape to create, or null if shape mode is not active. */ enableShapeMode?: ShapeType | null; /** * Callback triggered when a shape is completed. * * @param position - Scaled position of the shape on the page. * @param shape - The shape data (type, color, width). */ onShapeComplete?(position: ScaledPosition, shape: ShapeData): void; /** * Callback triggered when shape creation is cancelled. */ onShapeCancel?(): void; /** * Stroke color for shape mode. * @default "#000000" */ shapeStrokeColor?: string; /** * Stroke width for shape mode. * @default 2 */ shapeStrokeWidth?: number; /** * Theme configuration for the PDF viewer. * Controls container background color and PDF page color inversion for dark mode. * * @default { mode: "light" } */ theme?: PdfHighlighterTheme; } /** * This is a large-scale PDF viewer component designed to facilitate * highlighting. It should be used as a child to a {@link PdfLoader} to ensure * proper document loading. This does not itself render any highlights, but * instead its child should be the container component for each individual * highlight. This component will be provided appropriate HighlightContext for * rendering. * * @category Component */ declare const PdfHighlighter: ({ highlights, onScrollAway, pdfScaleValue, onSelection: onSelectionFinished, onCreateGhostHighlight, onRemoveGhostHighlight, selectionTip, enableAreaSelection, areaSelectionMode, mouseSelectionStyle, pdfDocument, children, textSelectionColor, utilsRef, style, enableFreetextCreation, onFreetextClick, enableImageCreation, onImageClick, enableDrawingMode, onDrawingComplete, onDrawingCancel, drawingStrokeColor, drawingStrokeWidth, enableShapeMode, onShapeComplete, onShapeCancel, shapeStrokeColor, shapeStrokeWidth, theme: userTheme, }: PdfHighlighterProps) => React.JSX.Element; /** * Style options for text highlight appearance. */ interface TextHighlightStyle { highlightColor?: string; highlightStyle?: "highlight" | "underline" | "strikethrough"; } /** * The props type for {@link TextHighlight}. * * @category Component Properties */ interface TextHighlightProps { /** * Highlight to render over text. */ highlight: ViewportHighlight; /** * Callback triggered whenever the user clicks on the part of a highlight. * * @param event - Mouse event associated with click. */ onClick?(event: MouseEvent$1): void; /** * Callback triggered whenever the user enters the area of a text highlight. * * @param event - Mouse event associated with movement. */ onMouseOver?(event: MouseEvent$1): void; /** * Callback triggered whenever the user leaves the area of a text highlight. * * @param event - Mouse event associated with movement. */ onMouseOut?(event: MouseEvent$1): void; /** * Indicates whether the component is autoscrolled into view, affecting * default theming. */ isScrolledTo: boolean; /** * Callback triggered whenever the user tries to open context menu on highlight. * * @param event - Mouse event associated with click. */ onContextMenu?(event: MouseEvent$1): void; /** * Optional CSS styling applied to each TextHighlight part. */ style?: CSSProperties; /** * Background/line color for the highlight. * Default: "rgba(255, 226, 143, 1)" (yellow) */ highlightColor?: string; /** * Style mode for the highlight. * - "highlight": Solid background color (default) * - "underline": Line under the text * - "strikethrough": Line through the text */ highlightStyle?: "highlight" | "underline" | "strikethrough"; /** * Callback triggered when the style changes. */ onStyleChange?(style: TextHighlightStyle): void; /** * Text to copy for this highlight. */ copyText?: string; /** * Callback triggered when the delete button is clicked. */ onDelete?(): void; /** * Custom style icon. Replaces the default palette icon. */ styleIcon?: ReactNode; /** * Custom delete icon. Replaces the default trash icon. */ deleteIcon?: ReactNode; /** * Custom color presets for the style panel. * Default: ["rgba(255, 226, 143, 1)", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"] */ colorPresets?: string[]; } /** * A component for displaying a highlighted text area. * * @category Component */ declare const TextHighlight: ({ highlight, onClick, onMouseOver, onMouseOut, isScrolledTo, onContextMenu, style, highlightColor, highlightStyle, onStyleChange, onDelete, styleIcon, deleteIcon, copyText, colorPresets, }: TextHighlightProps) => React.JSX.Element; /** * The props type for {@link MonitoredHighlightContainer}. * * @category Component Properties */ interface MonitoredHighlightContainerProps { /** * A callback triggered whenever the mouse hovers over a highlight. */ onMouseEnter?(): void; /** * What tip to automatically display whenever a mouse hovers over a highlight. * The tip will persist even as the user puts their mouse over it and not the * highlight, but will disappear once it no longer hovers both. */ highlightTip?: Tip; /** * A callback triggered whenever the mouse completely moves out from both the * highlight (children) and any highlightTip. */ onMouseLeave?(): void; /** * Component to monitor mouse activity over. This should be a highlight within the {@link PdfHighlighter}. */ children: ReactNode; } /** * A container for a highlight component that monitors whether a mouse is over a * highlight and over some secondary highlight tip. It will display the tip * whenever the mouse is over the highlight and it will hide the tip only when * the mouse has left the highlight AND the tip. * * @category Component */ declare const MonitoredHighlightContainer: ({ onMouseEnter, highlightTip, onMouseLeave, children, }: MonitoredHighlightContainerProps) => React.JSX.Element; /** * Style options for area highlight appearance. */ interface AreaHighlightStyle { highlightColor?: string; } /** * The props type for {@link AreaHighlight}. * * @category Component Properties */ interface AreaHighlightProps { /** * The highlight to be rendered as an {@link AreaHighlight}. */ highlight: ViewportHighlight; /** * A callback triggered whenever the highlight area is either finished * being moved or resized. * * @param rect - The updated highlight area. */ onChange?(rect: LTWHP): void; /** * Has the highlight been auto-scrolled into view? By default, this will render the highlight red. */ isScrolledTo?: boolean; /** * react-rnd bounds on the highlight area. This is useful for preventing the user * moving the highlight off the viewer/page. See [react-rnd docs](https://github.com/bokuweb/react-rnd). */ bounds?: string | Element; /** * A callback triggered whenever a context menu is opened on the highlight area. * * @param event - The mouse event associated with the context menu. */ onContextMenu?(event: MouseEvent$1): void; /** * Event called whenever the user tries to move or resize an {@link AreaHighlight}. */ onEditStart?(): void; /** * Custom styling to be applied to the {@link AreaHighlight} component. */ style?: CSSProperties; /** * Background color for the highlight. * Default: "rgba(255, 226, 143, 1)" (yellow) */ highlightColor?: string; /** * Callback triggered when the style changes. */ onStyleChange?(style: AreaHighlightStyle): void; /** * Text to copy for this area highlight. */ copyText?: string; /** * Callback triggered when the delete button is clicked. */ onDelete?(): void; /** * Custom style icon. Replaces the default palette icon. */ styleIcon?: ReactNode; /** * Custom delete icon. Replaces the default trash icon. */ deleteIcon?: ReactNode; /** * Custom color presets for the style panel. * Default: ["rgba(255, 226, 143, 1)", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"] */ colorPresets?: string[]; } /** * Renders a resizeable and interactive rectangular area for a highlight. * * @category Component */ declare const AreaHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, style, highlightColor, onStyleChange, onDelete, styleIcon, deleteIcon, copyText, colorPresets, }: AreaHighlightProps) => React.JSX.Element; /** * Style options for freetext highlight appearance. */ interface FreetextStyle { color?: string; backgroundColor?: string; fontFamily?: string; fontSize?: string; } /** * The props type for {@link FreetextHighlight}. * * @category Component Properties */ interface FreetextHighlightProps { /** * The highlight to be rendered as a {@link FreetextHighlight}. */ highlight: ViewportHighlight; /** * A callback triggered whenever the highlight position changes (drag). * * @param rect - The updated highlight area. */ onChange?(rect: LTWHP): void; /** * A callback triggered whenever the text content changes. * * @param text - The new text content. */ onTextChange?(text: string): void; /** * A callback triggered whenever the style changes. * * @param style - The new style options. */ onStyleChange?(style: FreetextStyle): void; /** * Has the highlight been auto-scrolled into view? */ isScrolledTo?: boolean; /** * react-rnd bounds on the highlight area. */ bounds?: string | Element; /** * A callback triggered on context menu. */ onContextMenu?(event: MouseEvent$1): void; /** * Event called when editing begins (drag or text edit). */ onEditStart?(): void; /** * Event called when editing ends. */ onEditEnd?(): void; /** * Custom styling for the container. */ style?: CSSProperties; /** * Text color. */ color?: string; /** * Background color. */ backgroundColor?: string; /** * Font family. */ fontFamily?: string; /** * Font size (e.g., "14px"). */ fontSize?: string; /** * Custom drag icon. Receives default icon as child if not provided. */ dragIcon?: ReactNode; /** * Custom edit icon. Receives default icon as child if not provided. */ editIcon?: ReactNode; /** * Custom style/settings icon. Receives default icon as child if not provided. */ styleIcon?: ReactNode; /** * Custom background color presets for the style panel. * Default: ["#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"] */ backgroundColorPresets?: string[]; /** * Custom text color presets for the style panel. * Default: ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"] */ textColorPresets?: string[]; /** * Callback triggered when the delete button is clicked. */ onDelete?(): void; /** * Custom delete icon. Replaces the default trash icon. */ deleteIcon?: ReactNode; /** * Render the note as a compact marker until opened. */ compact?: boolean; /** * Size of the compact marker in pixels. */ compactSize?: number; /** * Custom compact marker icon. */ compactIcon?: ReactNode; } declare const FreetextHighlight: ({ highlight, onChange, onTextChange, onStyleChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, color, backgroundColor, fontFamily, fontSize, dragIcon, editIcon, styleIcon, backgroundColorPresets, textColorPresets, onDelete, deleteIcon, compact, compactSize, compactIcon, }: FreetextHighlightProps) => React.JSX.Element; /** * The props type for {@link ImageHighlight}. * * @category Component Properties */ interface ImageHighlightProps { /** * The highlight to be rendered as an {@link ImageHighlight}. * The highlight.content.image should contain the image data URL. */ highlight: ViewportHighlight; /** * A callback triggered whenever the highlight position or size changes. * * @param rect - The updated highlight area. */ onChange?(rect: LTWHP): void; /** * Has the highlight been auto-scrolled into view? */ isScrolledTo?: boolean; /** * react-rnd bounds on the highlight area. */ bounds?: string | Element; /** * A callback triggered on context menu. */ onContextMenu?(event: MouseEvent$1): void; /** * Event called when editing begins (drag or resize). */ onEditStart?(): void; /** * Event called when editing ends. */ onEditEnd?(): void; /** * Custom styling for the container. */ style?: CSSProperties; /** * Custom drag icon. Replaces the default 6-dot grid icon. */ dragIcon?: ReactNode; /** * Callback triggered when the delete button is clicked. */ onDelete?(): void; /** * Custom delete icon. Replaces the default trash icon. */ deleteIcon?: ReactNode; } /** * Renders a draggable, resizable image/signature annotation. * * @category Component */ declare const ImageHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onDelete, deleteIcon, }: ImageHighlightProps) => React.JSX.Element; /** * The props type for {@link SignaturePad}. * * @category Component Properties */ interface SignaturePadProps { /** * Whether the signature pad modal is open. */ isOpen: boolean; /** * Callback when signature is completed. * * @param dataUrl - The signature as a PNG data URL. */ onComplete: (dataUrl: string) => void; /** * Callback when the modal is closed/cancelled. */ onClose: () => void; /** * Canvas width in pixels. * @default 400 */ width?: number; /** * Canvas height in pixels. * @default 200 */ height?: number; } /** * A modal component with a canvas for drawing signatures. * Supports both mouse and touch input. * * @category Component */ declare const SignaturePad: ({ isOpen, onComplete, onClose, width, height, }: SignaturePadProps) => React.JSX.Element | null; /** * The props type for {@link DrawingCanvas}. * * @category Component Properties */ interface DrawingCanvasProps { /** * Whether drawing mode is active. */ isActive: boolean; /** * Stroke color for drawing. * @default "#000000" */ strokeColor?: string; /** * Stroke width for drawing. * @default 3 */ strokeWidth?: number; /** * The PDF viewer instance. */ viewer: InstanceType; /** * Callback when drawing is complete. * * @param dataUrl - The drawing as a PNG data URL. * @param position - Scaled position of the drawing on the page. * @param strokes - The stroke data for later editing. */ onComplete: (dataUrl: string, position: ScaledPosition, strokes: DrawingStroke[]) => void; /** * Callback when drawing is cancelled. */ onCancel: () => void; } /** * A transparent overlay canvas for freehand drawing on PDF pages. * Supports mouse and touch input. * * @category Component */ declare const DrawingCanvas: ({ isActive, strokeColor, strokeWidth, viewer, onComplete, onCancel, }: DrawingCanvasProps) => React.JSX.Element | null; /** * The props type for {@link DrawingHighlight}. * * @category Component Properties */ interface DrawingHighlightProps { /** * The highlight to be rendered as a {@link DrawingHighlight}. * The highlight.content.image should contain the drawing as a PNG data URL. */ highlight: ViewportHighlight; /** * A callback triggered whenever the highlight position or size changes. * * @param rect - The updated highlight area. */ onChange?(rect: LTWHP): void; /** * Has the highlight been auto-scrolled into view? */ isScrolledTo?: boolean; /** * react-rnd bounds on the highlight area. */ bounds?: string | Element; /** * A callback triggered on context menu. */ onContextMenu?(event: MouseEvent$1): void; /** * Event called when editing begins (drag or resize). */ onEditStart?(): void; /** * Event called when editing ends. */ onEditEnd?(): void; /** * Custom styling for the container. */ style?: CSSProperties; /** * Custom drag icon. Replaces the default 6-dot grid icon. */ dragIcon?: ReactNode; /** * Callback when drawing style changes (color or stroke width). * The newImage is the re-rendered PNG data URL with updated styles. * The newStrokes contain the updated stroke data. */ onStyleChange?(newImage: string, newStrokes: DrawingStroke[]): void; /** * Callback triggered when the delete button is clicked. */ onDelete?(): void; /** * Custom delete icon. Replaces the default trash icon. */ deleteIcon?: ReactNode; } /** * Renders a draggable, resizable freehand drawing annotation. * Drawings are stored as PNG images with transparent backgrounds. * * @category Component */ declare const DrawingHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onStyleChange, onDelete, deleteIcon, }: DrawingHighlightProps) => React.JSX.Element; /** * The props type for {@link ShapeCanvas}. * * @category Component Properties */ interface ShapeCanvasProps { /** * Whether shape mode is active. */ isActive: boolean; /** * The type of shape to create. */ shapeType: ShapeType; /** * Stroke color for the shape. * @default "#000000" */ strokeColor?: string; /** * Stroke width for the shape. * @default 2 */ strokeWidth?: number; /** * The PDF viewer instance. */ viewer: InstanceType; /** * Callback when shape creation is complete. * * @param position - Scaled position of the shape on the page. * @param shape - The shape data. */ onComplete: (position: ScaledPosition, shape: ShapeData) => void; /** * Callback when shape creation is cancelled. */ onCancel: () => void; } /** * A transparent overlay for creating shape annotations on PDF pages. * Supports mouse and touch input with click-and-drag to define shape bounds. * * @category Component */ declare const ShapeCanvas: ({ isActive, shapeType, strokeColor, strokeWidth, viewer, onComplete, onCancel, }: ShapeCanvasProps) => React.JSX.Element | null; /** * Style options for shape highlight appearance. */ interface ShapeStyle { strokeColor?: string; strokeWidth?: number; } /** * The props type for {@link ShapeHighlight}. * * @category Component Properties */ interface ShapeHighlightProps { /** * The highlight to be rendered as a {@link ShapeHighlight}. */ highlight: ViewportHighlight; /** * A callback triggered whenever the highlight position or size changes. * * @param rect - The updated highlight area. */ onChange?(rect: LTWHP): void; /** * Has the highlight been auto-scrolled into view? */ isScrolledTo?: boolean; /** * react-rnd bounds on the highlight area. */ bounds?: string | Element; /** * A callback triggered on context menu. */ onContextMenu?(event: MouseEvent$1): void; /** * Event called when editing begins (drag or resize). */ onEditStart?(): void; /** * Event called when editing ends. */ onEditEnd?(): void; /** * Custom styling for the container. */ style?: CSSProperties; /** * The type of shape to render. * @default "rectangle" */ shapeType?: ShapeType; /** * Stroke color for the shape. * @default "#000000" */ strokeColor?: string; /** * Stroke width for the shape. * @default 2 */ strokeWidth?: number; /** * Callback triggered when the style changes. */ onStyleChange?(style: ShapeStyle): void; /** * Callback triggered when the delete button is clicked. */ onDelete?(): void; /** * Custom style icon. Replaces the default palette icon. */ styleIcon?: ReactNode; /** * Custom delete icon. Replaces the default trash icon. */ deleteIcon?: ReactNode; /** * Custom color presets for the style panel. */ colorPresets?: string[]; /** * For arrows: start point as percentage of bounding box (0-1). */ startPoint?: { x: number; y: number; }; /** * For arrows: end point as percentage of bounding box (0-1). */ endPoint?: { x: number; y: number; }; } /** * Renders a draggable, resizable shape annotation. * Supports rectangle, circle/ellipse, and arrow shapes. * * @category Component */ declare const ShapeHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, shapeType, strokeColor, strokeWidth, onStyleChange, onDelete, styleIcon, deleteIcon, colorPresets, startPoint, endPoint, }: ShapeHighlightProps) => React.JSX.Element; /** * The props type for {@link PdfLoader}. * * @category Component Properties */ interface PdfLoaderProps { /** * The document to be loaded by PDF.js. * If you need to pass HTTP headers, auth parameters, * or other pdf settings, do it through here. */ document: string | URL | TypedArray | DocumentInitParameters; /** * Callback to render content before the PDF document is loaded. * * @param progress - PDF.js progress status. * @returns - Component to be rendered in space of the PDF document while loading. */ beforeLoad?(progress: OnProgressParameters): ReactNode; /** * Component to render in the case of any PDF loading errors. * * @param error - PDF loading error. * @returns - Component to be rendered in space of the PDF document. */ errorMessage?(error: Error): ReactNode; /** * Child components to use/render the loaded PDF document. * * @param pdfDocument - The loaded PDF document. * @returns - Component to render once PDF document is loaded. */ children(pdfDocument: PDFDocumentProxy): ReactNode; /** * Callback triggered whenever an error occurs. * * @param error - PDF Loading error triggering the event. * @returns - Component to be rendered in space of the PDF document. */ onError?(error: Error): void; /** * Optional PDF.js worker source override. By default, PdfLoader resolves the * worker from the installed pdfjs-dist package so bundlers can emit it locally. */ workerSrc?: string; } /** * A component for loading a PDF document and passing it to a child. * * @category Component */ declare const PdfLoader: ({ document, beforeLoad, errorMessage, children, onError, workerSrc, }: PdfLoaderProps) => React.ReactNode; /** * A set of utilities for rendering highlights. Designed to be used within a * highlight container. * * @category Context */ type HighlightContainerUtils = { /** * The highlight being rendered at this component. */ highlight: ViewportHighlight; /** * Convert a Viewport rectangle to a scaled rectangle. Can be used * for storing and updating area selection highlights, for example. * * @returns - Scaled/display agnostic rectangle. */ viewportToScaled(rect: LTWHP): Scaled; /** * Capture a PNG data url of a viewport rectangle. * * @returns - PNG data url. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs */ screenshot(position: LTWH): string; /** * Whether the highlight has been autoscrolled to. */ isScrolledTo: boolean; /** * All the DOM refs for the highlights shared on the same page * as `highlight` */ highlightBindings: HighlightBindings; }; /** * Custom hook for providing {@link HighlightContainerUtils}. Must be used * within a child of {@link PdfHighlighter}. * * @category Context */ declare const useHighlightContainerContext: () => HighlightContainerUtils; /** @category Utilities */ declare const viewportPositionToScaled: ({ boundingRect, rects }: ViewportPosition, viewer: PDFViewer$2) => ScaledPosition; /** @category Utilities */ declare const scaledPositionToViewport: ({ boundingRect, rects, usePdfCoordinates }: ScaledPosition, viewer: PDFViewer$2) => ViewportPosition; type PdfTextItem = { text: string; index: number; pageNumber: number; rect: LTWHP; fontName?: string; columnIndex?: number; }; type PdfTextColumn = { index: number; left: number; right: number; width: number; textItemIndexes: number[]; }; type PdfExtractedPage = { pageNumber: number; width: number; height: number; textItems: PdfTextItem[]; columns?: PdfTextColumn[]; }; type PdfTextUnitType = "paragraph" | "title" | "heading" | "author" | "affiliation" | "footnote" | "reference" | "unknown"; type PdfTextUnit = { id: string; type: PdfTextUnitType; text: string; rawText: string; pageNumber: number; indexInPage: number; columnIndex?: number; position?: ScaledPosition; source?: { textItemIndexes: number[]; }; }; type PdfSentenceSource = { startOffset: number; endOffset: number; textItemIndexes: number[]; }; type PdfSentence = { id: string; text: string; rawText: string; pageNumber: number; indexInPage: number; globalIndex: number; columnIndex?: number; position?: ScaledPosition; source?: PdfSentenceSource; }; type PdfReadingOrder = "auto" | "document" | "position"; type PdfColumnDetection = "auto" | "none"; type ExtractSentencesOptions = { pages?: "all" | number[]; includePositions?: boolean; includeSources?: boolean; normalize?: boolean; locale?: string; idPrefix?: string; includeTextUnitTypes?: PdfTextUnitType[]; readingOrder?: PdfReadingOrder; columnDetection?: PdfColumnDetection; }; declare const extractTextUnits: (pdfDocument: PDFDocumentProxy, options?: ExtractSentencesOptions) => Promise; declare const extractPageTextItems: (pdfDocument: PDFDocumentProxy, options?: Pick) => Promise; declare const extractSentences: (pdfDocument: PDFDocumentProxy, options?: ExtractSentencesOptions) => Promise; declare const sentenceToHighlight: (sentence: PdfSentence, options?: { id?: string; }) => Highlight; /** Style configuration for outline items */ interface OutlineItemStyles { /** Container styles for the item row */ container?: React.CSSProperties; /** Container styles when item is hovered */ containerHover?: React.CSSProperties; /** Container styles when item is active */ containerActive?: React.CSSProperties; /** Expand/collapse button styles */ expandButton?: React.CSSProperties; /** Expand/collapse icon styles */ expandIcon?: React.CSSProperties; /** Active indicator dot styles */ activeIndicator?: React.CSSProperties; /** Title text styles */ title?: React.CSSProperties; /** Title text styles when active */ titleActive?: React.CSSProperties; /** Page number styles */ pageNumber?: React.CSSProperties; /** Page number styles when active */ pageNumberActive?: React.CSSProperties; /** Children container styles */ childrenContainer?: React.CSSProperties; } /** Class name configuration for outline items (Tailwind-friendly) */ interface OutlineItemClassNames { /** Container class for the item row */ container?: string; /** Container class when item is hovered */ containerHover?: string; /** Container class when item is active */ containerActive?: string; /** Expand/collapse button class */ expandButton?: string; /** Expand/collapse icon class */ expandIcon?: string; /** Active indicator dot class */ activeIndicator?: string; /** Title text class */ title?: string; /** Title text class when active */ titleActive?: string; /** Page number class */ pageNumber?: string; /** Page number class when active */ pageNumberActive?: string; /** Children container class */ childrenContainer?: string; } interface OutlineItemProps { item: ProcessedOutlineItem; currentPage: number; onNavigate: (item: ProcessedOutlineItem) => void; defaultExpanded?: boolean; showExpandIcons?: boolean; maxDepth?: number; /** Custom styles for the item */ styles?: OutlineItemStyles; /** Custom class names for the item (Tailwind-friendly) */ classNames?: OutlineItemClassNames; renderItem?: (item: ProcessedOutlineItem, props: OutlineItemRenderProps) => React.ReactNode; } interface OutlineItemRenderProps { isExpanded: boolean; isActive: boolean; level: number; hasChildren: boolean; onToggle: () => void; onNavigate: () => void; } /** * Recursive outline item component with collapsible children. * Clean, modern design with visual hierarchy and smooth interactions. */ declare const OutlineItem: React.FC; /** Style configuration for DocumentOutline */ interface DocumentOutlineStyles { /** Container styles */ container?: React.CSSProperties; /** Loading state container styles */ loadingContainer?: React.CSSProperties; /** Loading spinner styles */ loadingSpinner?: React.CSSProperties; /** Loading text styles */ loadingText?: React.CSSProperties; /** Empty state container styles */ emptyContainer?: React.CSSProperties; /** Empty state icon container styles */ emptyIconContainer?: React.CSSProperties; /** Empty state icon styles */ emptyIcon?: React.CSSProperties; /** Empty state title styles */ emptyTitle?: React.CSSProperties; /** Empty state description styles */ emptyDescription?: React.CSSProperties; } /** Class name configuration for DocumentOutline (Tailwind-friendly) */ interface DocumentOutlineClassNames { /** Container class */ container?: string; /** Loading state container class */ loadingContainer?: string; /** Loading spinner class */ loadingSpinner?: string; /** Loading text class */ loadingText?: string; /** Empty state container class */ emptyContainer?: string; /** Empty state icon container class */ emptyIconContainer?: string; /** Empty state icon class */ emptyIcon?: string; /** Empty state title class */ emptyTitle?: string; /** Empty state description class */ emptyDescription?: string; } interface DocumentOutlineProps { /** Processed outline data */ outline: ProcessedOutlineItem[] | null; /** Whether outline is still loading */ isLoading?: boolean; /** Current page number for highlighting */ currentPage?: number; /** Callback when outline item is clicked */ onNavigate: (item: ProcessedOutlineItem) => void; /** Show expand/collapse icons */ showExpandIcons?: boolean; /** Default expanded state for all items */ defaultExpanded?: boolean; /** Maximum depth to render */ maxDepth?: number; /** Custom class name */ className?: string; /** Custom styles for the outline */ styles?: DocumentOutlineStyles; /** Custom class names for the outline (Tailwind-friendly) */ classNames?: DocumentOutlineClassNames; /** Custom styles for outline items */ itemStyles?: OutlineItemStyles; /** Custom class names for outline items (Tailwind-friendly) */ itemClassNames?: OutlineItemClassNames; /** Custom item renderer */ renderItem?: (item: ProcessedOutlineItem, props: OutlineItemRenderProps) => React.ReactNode; /** Empty state content */ emptyContent?: React.ReactNode; /** Loading content */ loadingContent?: React.ReactNode; } /** * Document outline (table of contents) component. * Displays a hierarchical, navigable table of contents for the PDF. */ declare const DocumentOutline: React.FC; interface PDFViewer$1 { scrollPageIntoView: (params: { pageNumber: number; }) => void; pagesCount: number; currentPageNumber?: number; } interface PDFLinkService { goToDestination: (dest: unknown) => void; } interface EventBus$1 { on: (event: string, callback: (evt: { pageNumber: number; }) => void) => void; off: (event: string, callback: (evt: { pageNumber: number; }) => void) => void; } /** Theme configuration for LeftPanel styling */ interface LeftPanelTheme { /** Background color of the panel */ backgroundColor?: string; /** Border color */ borderColor?: string; /** Active tab/item accent color */ accentColor?: string; /** Text color */ textColor?: string; /** Muted text color */ mutedTextColor?: string; /** Hover background color */ hoverBackgroundColor?: string; } /** Style configuration for tab buttons */ interface TabStyles { /** Container styles for the tab bar */ container?: React.CSSProperties; /** Tab button styles */ tab?: React.CSSProperties; /** Tab button styles when active */ tabActive?: React.CSSProperties; /** Tab icon styles */ tabIcon?: React.CSSProperties; /** Tab text styles */ tabText?: React.CSSProperties; } /** Class name configuration for tab buttons (Tailwind-friendly) */ interface TabClassNames { /** Container class for the tab bar */ container?: string; /** Tab button class */ tab?: string; /** Tab button class when active */ tabActive?: string; /** Tab icon class */ tabIcon?: string; /** Tab text class */ tabText?: string; } /** Style configuration for the footer */ interface FooterStyles { /** Footer container styles */ container?: React.CSSProperties; /** Footer text styles */ text?: React.CSSProperties; } /** Class name configuration for the footer (Tailwind-friendly) */ interface FooterClassNames { /** Footer container class */ container?: string; /** Footer text class */ text?: string; } /** Style configuration for the toggle button */ interface ToggleButtonStyles { /** Button container styles */ button?: React.CSSProperties; /** Button icon styles */ icon?: React.CSSProperties; } /** Class name configuration for the toggle button (Tailwind-friendly) */ interface ToggleButtonClassNames { /** Button container class */ button?: string; /** Button icon class */ icon?: string; } interface LeftPanelProps { /** PDF document from PdfLoader */ pdfDocument: PDFDocumentProxy; /** PDF viewer instance */ viewer?: PDFViewer$1 | unknown | null; /** PDF link service for navigation */ linkService?: PDFLinkService | unknown | null; /** Event bus for page change events */ eventBus?: EventBus$1 | unknown | null; /** Function to navigate to a page (from pdfHighlighterUtils.goToPage) */ goToPage?: (pageNumber: number) => void; /** Whether panel is open */ isOpen?: boolean; /** Callback when open state changes */ onOpenChange?: (isOpen: boolean) => void; /** Initial active tab */ defaultTab?: LeftPanelTab; /** Which tabs to show */ tabs?: LeftPanelTab[]; /** Panel width when open */ width?: number | string; /** Custom class name */ className?: string; /** Custom styles */ style?: React.CSSProperties; /** Custom outline item renderer */ renderOutlineItem?: (item: ProcessedOutlineItem, props: OutlineItemRenderProps) => React.ReactNode; /** Custom thumbnail renderer */ renderThumbnail?: (pageNumber: number, thumbnail: ThumbnailData, isActive: boolean) => React.ReactNode; /** Callback when page is selected */ onPageSelect?: (pageNumber: number) => void; /** Thumbnail width */ thumbnailWidth?: number; /** Children for custom content */ children?: React.ReactNode; /** Theme customization */ theme?: LeftPanelTheme; /** Show page count in footer */ showFooter?: boolean; /** Show toggle button */ showToggleButton?: boolean; /** Custom styles for tabs */ tabStyles?: TabStyles; /** Custom class names for tabs (Tailwind-friendly) */ tabClassNames?: TabClassNames; /** Custom styles for footer */ footerStyles?: FooterStyles; /** Custom class names for footer (Tailwind-friendly) */ footerClassNames?: FooterClassNames; /** Custom styles for toggle button */ toggleButtonStyles?: ToggleButtonStyles; /** Custom class names for toggle button (Tailwind-friendly) */ toggleButtonClassNames?: ToggleButtonClassNames; /** Custom styles for document outline */ outlineStyles?: DocumentOutlineStyles; /** Custom class names for document outline (Tailwind-friendly) */ outlineClassNames?: DocumentOutlineClassNames; /** Custom styles for outline items */ outlineItemStyles?: OutlineItemStyles; /** Custom class names for outline items (Tailwind-friendly) */ outlineItemClassNames?: OutlineItemClassNames; } /** * Left panel component with Outline and Thumbnails tabs. * Provides a customizable sidebar for PDF navigation with page thumbnails and document outline. */ declare const LeftPanel: React.FC; interface ThumbnailPanelProps { /** Total number of pages */ totalPages: number; /** Current page number for highlighting */ currentPage: number; /** Thumbnails map for reactive updates (when thumbnails load, this changes) */ thumbnails: Map; /** Function to load a thumbnail */ loadThumbnail: (pageNumber: number) => Promise; /** Callback when thumbnail is clicked */ onPageSelect: (pageNumber: number) => void; /** Show page numbers under thumbnails */ showPageNumbers?: boolean; /** Custom class name */ className?: string; /** Custom thumbnail renderer */ renderThumbnail?: (pageNumber: number, thumbnail: ThumbnailData, isActive: boolean) => React.ReactNode; /** Estimated height of each thumbnail item (including gap) */ estimatedItemHeight?: number; /** Number of items to render outside visible area */ overscan?: number; /** Gap between thumbnail items in pixels */ gap?: number; } /** * Panel displaying page thumbnails with virtual scrolling. * Optimized for large PDFs (500+ pages) with only visible items rendered in DOM. */ declare const ThumbnailPanel: React.FC; interface ThumbnailItemProps { pageNumber: number; thumbnail: ThumbnailData; isActive: boolean; onLoad: (pageNumber: number) => void; onClick: (pageNumber: number) => void; showPageNumber?: boolean; className?: string; } /** * Single thumbnail item with lazy loading via IntersectionObserver. * Clean, minimal design with smooth hover and active states. * Memoized to prevent unnecessary re-renders in virtualized lists. */ declare const ThumbnailItem: React.NamedExoticComponent; /** * Utilities and state available within the LeftPanel context */ interface LeftPanelUtils { currentPage: number; totalPages: number; goToPage: (pageNumber: number) => void; goToOutlineItem: (item: ProcessedOutlineItem) => void; pdfDocument: PDFDocumentProxy | null; outline: ProcessedOutlineItem[] | null; hasOutline: boolean; isOutlineLoading: boolean; thumbnails: Map; loadThumbnail: (pageNumber: number) => Promise; activeTab: LeftPanelTab; setActiveTab: (tab: LeftPanelTab) => void; isOpen: boolean; setIsOpen: (open: boolean) => void; } /** * Hook to access LeftPanel context utilities * * @throws Error if used outside of LeftPanel * @returns LeftPanel utilities */ declare const useLeftPanelContext: () => LeftPanelUtils; interface UseDocumentOutlineOptions { pdfDocument: PDFDocumentProxy; linkService?: { goToDestination: (dest: unknown) => void; } | unknown | null; goToPage?: (pageNumber: number) => void; } interface UseDocumentOutlineResult { outline: ProcessedOutlineItem[] | null; isLoading: boolean; error: Error | null; navigateToItem: (item: ProcessedOutlineItem) => void; flatOutline: ProcessedOutlineItem[]; hasOutline: boolean; } /** * Hook to fetch and process PDF document outline (table of contents) * * @param options - Configuration options * @returns Outline data and navigation utilities */ declare function useDocumentOutline(options: UseDocumentOutlineOptions): UseDocumentOutlineResult; interface UseThumbnailsOptions { pdfDocument: PDFDocumentProxy; /** Width of generated thumbnails in pixels @default 200 */ thumbnailWidth?: number; /** Maximum number of thumbnails to cache @default 150 */ cacheSize?: number; /** If true, preload all thumbnails on mount. Set to false for large PDFs @default false */ preloadAll?: boolean; /** JPEG quality for thumbnail images (0-1) @default 0.8 */ imageQuality?: number; } interface UseThumbnailsResult { getThumbnail: (pageNumber: number) => ThumbnailData; loadThumbnail: (pageNumber: number) => Promise; preloadThumbnails: (pageNumbers: number[]) => void; clearCache: () => void; totalPages: number; thumbnails: Map; } declare function useThumbnails(options: UseThumbnailsOptions): UseThumbnailsResult; interface PDFViewer { scrollPageIntoView: (params: { pageNumber: number; }) => void; pagesCount: number; currentPageNumber?: number; } interface EventBus { on: (event: string, callback: (evt: { pageNumber: number; }) => void) => void; off: (event: string, callback: (evt: { pageNumber: number; }) => void) => void; } interface UsePageNavigationOptions { viewer: PDFViewer | unknown | null; eventBus?: EventBus | unknown | null; } interface UsePageNavigationResult { currentPage: number; totalPages: number; goToPage: (pageNumber: number) => void; } /** * Hook for tracking current page and navigating to pages * * @param options - Configuration options * @returns Page navigation utilities */ declare function usePageNavigation(options: UsePageNavigationOptions): UsePageNavigationResult; declare const exportPdf: typeof exportPdf$1; export { AreaHighlight, type AreaHighlightProps, type AreaHighlightStyle, type Content, DocumentOutline, type DocumentOutlineClassNames, type DocumentOutlineProps, type DocumentOutlineStyles, DrawingCanvas, type DrawingCanvasProps, DrawingHighlight, type DrawingHighlightProps, type DrawingPoint, type DrawingStroke, type ExportPdfOptions, type ExportableHighlight, type ExtractSentencesOptions, type FooterClassNames, type FooterStyles, FreetextHighlight, type FreetextHighlightProps, type FreetextStyle, type GhostHighlight, type Highlight, type HighlightBindings, type HighlightContainerUtils, type HighlightType, ImageHighlight, type ImageHighlightProps, type LTWH, type LTWHP, LeftPanel, type LeftPanelProps, type LeftPanelTab, type LeftPanelTheme, type LeftPanelUtils, MonitoredHighlightContainer, type MonitoredHighlightContainerProps, OutlineItem, type OutlineItemClassNames, type OutlineItemProps, type OutlineItemRenderProps, type OutlineItemStyles, type Page, type PdfColumnDetection, type PdfExtractedPage, PdfHighlighter, type PdfHighlighterProps, type PdfHighlighterTheme, type PdfHighlighterUtils, PdfLoader, type PdfLoaderProps, type PdfReadingOrder, type PdfScaleValue, type PdfSearchOptions, type PdfSelection, type PdfSentence, type PdfSentenceSource, type PdfTextColumn, type PdfTextItem, type PdfTextUnit, type PdfTextUnitType, type ProcessedOutlineItem, type Scaled, type ScaledPosition, ShapeCanvas, type ShapeCanvasProps, type ShapeData, ShapeHighlight, type ShapeHighlightProps, type ShapeStyle, type ShapeType, SignaturePad, type SignaturePadProps, type TabClassNames, type TabStyles, TextHighlight, type TextHighlightProps, type TextHighlightStyle, type ThumbnailData, ThumbnailItem, type ThumbnailItemProps, ThumbnailPanel, type ThumbnailPanelProps, type Tip, type ToggleButtonClassNames, type ToggleButtonStyles, type ViewportHighlight, type ViewportPosition, exportPdf, extractPageTextItems, extractSentences, extractTextUnits, scaledPositionToViewport, sentenceToHighlight, useDocumentOutline, useHighlightContainerContext, useLeftPanelContext, usePageNavigation, usePdfHighlighterContext, useThumbnails, viewportPositionToScaled };