react-pdf-highlighter-plus 1.0.3 → 1.0.5

package/dist/esm/index.d.ts

@@ -1,19 +1,1348 @@
-import { PdfHighlighter, PdfHighlighterProps } from "./components/PdfHighlighter";
-import { TextHighlight, TextHighlightProps, TextHighlightStyle } from "./components/TextHighlight";
-import { MonitoredHighlightContainer, MonitoredHighlightContainerProps } from "./components/MonitoredHighlightContainer";
-import { AreaHighlight, AreaHighlightProps, AreaHighlightStyle } from "./components/AreaHighlight";
-import { FreetextHighlight, FreetextHighlightProps, FreetextStyle } from "./components/FreetextHighlight";
-import { ImageHighlight, ImageHighlightProps } from "./components/ImageHighlight";
-import { SignaturePad, SignaturePadProps } from "./components/SignaturePad";
-import { DrawingCanvas, DrawingCanvasProps } from "./components/DrawingCanvas";
-import { DrawingHighlight, DrawingHighlightProps } from "./components/DrawingHighlight";
-import { ShapeCanvas, ShapeCanvasProps } from "./components/ShapeCanvas";
-import { ShapeHighlight, ShapeHighlightProps, ShapeStyle } from "./components/ShapeHighlight";
-import { PdfLoader, PdfLoaderProps } from "./components/PdfLoader";
-import { HighlightContainerUtils, useHighlightContainerContext } from "./contexts/HighlightContext";
-import { viewportPositionToScaled, scaledPositionToViewport } from "./lib/coordinates";
-import { exportPdf, ExportPdfOptions, ExportableHighlight } from "./lib/export-pdf";
-import { PdfHighlighterUtils, usePdfHighlighterContext } from "./contexts/PdfHighlighterContext";
-export { PdfHighlighter, PdfLoader, TextHighlight, MonitoredHighlightContainer, AreaHighlight, FreetextHighlight, ImageHighlight, SignaturePad, DrawingCanvas, DrawingHighlight, ShapeCanvas, ShapeHighlight, useHighlightContainerContext, viewportPositionToScaled, scaledPositionToViewport, usePdfHighlighterContext, exportPdf, };
-export type { HighlightContainerUtils, PdfHighlighterUtils, PdfHighlighterProps, TextHighlightProps, TextHighlightStyle, MonitoredHighlightContainerProps, AreaHighlightProps, AreaHighlightStyle, FreetextHighlightProps, FreetextStyle, ImageHighlightProps, SignaturePadProps, DrawingCanvasProps, DrawingHighlightProps, ShapeCanvasProps, ShapeHighlightProps, ShapeStyle, PdfLoaderProps, ExportPdfOptions, ExportableHighlight, };
-export * from "./types";
+import { PDFDocumentProxy, OnProgressParameters } from 'pdfjs-dist';
+import React, { ReactNode, CSSProperties, MouseEvent as MouseEvent$1 } from 'react';
+import { Root } from 'react-dom/client';
+import { PDFViewer } from 'pdfjs-dist/types/web/pdf_viewer';
+import { PDFViewer as PDFViewer$1 } 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 <artem.tyurin@gmail.com>
+ */
+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<LTWHP>;
+};
+/**
+ * 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<Scaled>;
+    /** 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<Omit<Highlight, "id">> {
+    content: Content;
+}
+/**
+ * This represents a rendered highlight, with its position defined by the page
+ * viewport.
+ *
+ * @category Type
+ */
+type ViewportHighlight<T extends Highlight = Highlight> = Omit<T, "position"> & {
+    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;
+
+/**
+ * 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 | 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;
+};
+/**
+ * Custom hook for providing {@link PdfHighlighterUtils}. Must be used
+ * within a child of {@link PdfHighlighter}.
+ *
+ * @category Context
+ */
+declare const usePdfHighlighterContext: () => PdfHighlighterUtils;
+
+/**
+ * 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<Highlight>;
+    /**
+     * 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;
+}
+/**
+ * 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, }: 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<HTMLDivElement>): void;
+    /**
+     * Callback triggered whenever the user enters the area of a text highlight.
+     *
+     * @param event - Mouse event associated with movement.
+     */
+    onMouseOver?(event: MouseEvent$1<HTMLDivElement>): void;
+    /**
+     * Callback triggered whenever the user leaves  the area of a text highlight.
+     *
+     * @param event - Mouse event associated with movement.
+     */
+    onMouseOut?(event: MouseEvent$1<HTMLDivElement>): 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<HTMLDivElement>): 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;
+    /**
+     * 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, 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<HTMLDivElement>): 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;
+    /**
+     * 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, 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<HTMLDivElement>): 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;
+}
+declare const FreetextHighlight: ({ highlight, onChange, onTextChange, onStyleChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, color, backgroundColor, fontFamily, fontSize, dragIcon, editIcon, styleIcon, backgroundColorPresets, textColorPresets, onDelete, deleteIcon, }: 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<HTMLDivElement>): 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<typeof PDFViewer$1>;
+    /**
+     * 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<HTMLDivElement>): 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<typeof PDFViewer$1>;
+    /**
+     * 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<HTMLDivElement>): 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;
+    /**
+     * NOTE: This will be applied to all PdfLoader instances.
+     * If you want to only apply a source to this instance, use the document parameters.
+     */
+    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<T extends Highlight = Highlight> = {
+    /**
+     * The highlight being rendered at this component.
+     */
+    highlight: ViewportHighlight<T>;
+    /**
+     * 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: <T extends Highlight = Highlight>() => HighlightContainerUtils<T>;
+
+/** @category Utilities */
+declare const viewportPositionToScaled: ({ boundingRect, rects }: ViewportPosition, viewer: PDFViewer) => ScaledPosition;
+/** @category Utilities */
+declare const scaledPositionToViewport: ({ boundingRect, rects, usePdfCoordinates }: ScaledPosition, viewer: PDFViewer) => ViewportPosition;
+
+/**
+ * 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<Uint8Array> - 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(pdfSource: string | Uint8Array | ArrayBuffer, highlights: ExportableHighlight[], options?: ExportPdfOptions): Promise<Uint8Array>;
+
+export { AreaHighlight, type AreaHighlightProps, type AreaHighlightStyle, type Content, DrawingCanvas, type DrawingCanvasProps, DrawingHighlight, type DrawingHighlightProps, type DrawingPoint, type DrawingStroke, type ExportPdfOptions, type ExportableHighlight, FreetextHighlight, type FreetextHighlightProps, type FreetextStyle, type GhostHighlight, type Highlight, type HighlightBindings, type HighlightContainerUtils, type HighlightType, ImageHighlight, type ImageHighlightProps, type LTWH, type LTWHP, MonitoredHighlightContainer, type MonitoredHighlightContainerProps, type Page, PdfHighlighter, type PdfHighlighterProps, type PdfHighlighterUtils, PdfLoader, type PdfLoaderProps, type PdfScaleValue, type PdfSelection, type Scaled, type ScaledPosition, ShapeCanvas, type ShapeCanvasProps, type ShapeData, ShapeHighlight, type ShapeHighlightProps, type ShapeStyle, type ShapeType, SignaturePad, type SignaturePadProps, TextHighlight, type TextHighlightProps, type TextHighlightStyle, type Tip, type ViewportHighlight, type ViewportPosition, exportPdf, scaledPositionToViewport, useHighlightContainerContext, usePdfHighlighterContext, viewportPositionToScaled };