react-pdf-highlighter-plus 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2023 Daniel Arnould
+Copyright (c) 2017 Artem Tyurin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,411 @@
+# react-pdf-highlighter-plus
+
+<p align="center">
+  <a href="https://github.com/QuocVietHa08/react-pdf-highlighter-plus/stargazers">
+    <img src="https://img.shields.io/github/stars/QuocVietHa08/react-pdf-highlighter-plus?style=social" alt="GitHub stars">
+  </a>
+  <a href="https://github.com/QuocVietHa08/react-pdf-highlighter-plus/actions/workflows/node.js.yml">
+    <img src="https://github.com/QuocVietHa08/react-pdf-highlighter-plus/actions/workflows/node.js.yml/badge.svg" alt="Node.js CI">
+  </a>
+  <a href="https://badge.fury.io/js/react-pdf-highlighter-extended">
+    <img src="https://badge.fury.io/js/react-pdf-highlighter-extended.svg" alt="npm version">
+  </a>
+  <a href="https://www.npmjs.com/package/react-pdf-highlighter-extended">
+    <img src="https://img.shields.io/npm/dm/react-pdf-highlighter-extended.svg" alt="npm downloads">
+  </a>
+</p>
+
+<p align="center">
+  <strong>A powerful React library for annotating PDF documents</strong>
+</p>
+
+<p align="center">
+  Text highlights • Area highlights • Freetext notes • Images & signatures • Freehand drawing • PDF export
+</p>
+
+---
+
+## Overview
+
+`react-pdf-highlighter-plus` provides a highly customizable annotation experience for PDF documents in React applications. Built on [PDF.js](https://github.com/mozilla/pdf.js), it stores highlight positions in viewport-independent coordinates, making them portable across different screen sizes.
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| **Text Highlights** | Select and highlight text passages |
+| **Area Highlights** | Draw rectangular regions on PDFs |
+| **Freetext Notes** | Draggable, editable sticky notes with custom styling |
+| **Images & Signatures** | Upload images or draw signatures directly on PDFs |
+| **Freehand Drawing** | Draw freehand annotations with customizable stroke |
+| **PDF Export** | Export annotated PDF with all highlights embedded |
+| **Zoom Support** | Full zoom functionality with position-independent data |
+| **Fully Customizable** | Exposed styling on all components |
+
+## Quick Links
+
+| Resource | Link |
+|----------|------|
+| Live Demo | [View Demo](https://quocvietha08.github.io/react-pdf-highlighter-plus/example-app/) |
+| Documentation | [API Docs](https://quocvietha08.github.io/react-pdf-highlighter-plus/docs/) |
+| NPM Package | [npm](https://www.npmjs.com/package/react-pdf-highlighter-extended) |
+
+---
+
+## Installation (Coming soon)
+
+```bash
+npm install react-pdf-highlighter-extended
+```
+
+---
+
+## Quick Start
+
+### Basic Setup
+
+```tsx
+import {
+  PdfLoader,
+  PdfHighlighter,
+  TextHighlight,
+  AreaHighlight,
+  useHighlightContainerContext,
+} from "react-pdf-highlighter-extended";
+
+function App() {
+  const [highlights, setHighlights] = useState([]);
+
+  return (
+    <PdfLoader document="https://example.com/document.pdf">
+      {(pdfDocument) => (
+        <PdfHighlighter
+          pdfDocument={pdfDocument}
+          highlights={highlights}
+          enableAreaSelection={(e) => e.altKey}
+        >
+          <HighlightContainer />
+        </PdfHighlighter>
+      )}
+    </PdfLoader>
+  );
+}
+
+function HighlightContainer() {
+  const { highlight, isScrolledTo } = useHighlightContainerContext();
+
+  return highlight.type === "text" ? (
+    <TextHighlight highlight={highlight} isScrolledTo={isScrolledTo} />
+  ) : (
+    <AreaHighlight highlight={highlight} isScrolledTo={isScrolledTo} />
+  );
+}
+```
+
+---
+
+## Highlight Types
+
+### 1. Text Highlights
+
+Select text in the PDF to create highlights.
+
+```tsx
+<TextHighlight
+  highlight={highlight}
+  isScrolledTo={isScrolledTo}
+  style={{ background: "rgba(255, 226, 143, 1)" }}
+/>
+```
+
+### 2. Area Highlights
+
+Hold `Alt` and drag to create rectangular highlights.
+
+```tsx
+<PdfHighlighter
+  enableAreaSelection={(event) => event.altKey}
+  // ...
+>
+```
+
+### 3. Freetext Notes
+
+Create draggable, editable text annotations with customizable styling.
+
+```tsx
+import { FreetextHighlight } from "react-pdf-highlighter-extended";
+
+<PdfHighlighter
+  enableFreetextCreation={() => freetextMode}
+  onFreetextClick={(position) => {
+    addHighlight({ type: "freetext", position, content: { text: "Note" } });
+  }}
+>
+
+// In your highlight container:
+<FreetextHighlight
+  highlight={highlight}
+  onChange={handlePositionChange}
+  onTextChange={handleTextChange}
+  onStyleChange={handleStyleChange}
+  color="#333333"
+  backgroundColor="#ffffc8"
+  fontSize="14px"
+/>
+```
+
+**Features:**
+- Drag to reposition
+- Click to edit text
+- Built-in style panel (colors, font size, font family)
+- Toolbar appears on hover
+
+[Full Documentation →](docs/freetext-highlights.md)
+
+### 4. Images & Signatures
+
+Upload images or draw signatures and place them on PDFs.
+
+```tsx
+import { ImageHighlight, SignaturePad } from "react-pdf-highlighter-extended";
+
+// Signature pad modal
+<SignaturePad
+  isOpen={isOpen}
+  onComplete={(dataUrl) => setPendingImage(dataUrl)}
+  onClose={() => setIsOpen(false)}
+/>
+
+// In your highlight container:
+<ImageHighlight
+  highlight={highlight}
+  onChange={handlePositionChange}
+  onEditStart={() => toggleEditInProgress(true)}
+  onEditEnd={() => toggleEditInProgress(false)}
+/>
+```
+
+**Features:**
+- Upload any image format
+- Draw signatures with mouse or touch
+- Drag to reposition
+- Resize while maintaining aspect ratio
+- Toolbar appears on hover
+
+[Full Documentation →](docs/image-signature-highlights.md)
+
+### 5. Freehand Drawing
+
+Draw freehand annotations directly on PDFs.
+
+```tsx
+import { DrawingHighlight } from "react-pdf-highlighter-extended";
+
+<PdfHighlighter
+  enableDrawingCreation={() => drawingMode}
+  onDrawingComplete={(position, dataUrl) => {
+    addHighlight({ type: "drawing", position, content: { image: dataUrl } });
+  }}
+  drawingConfig={{
+    strokeColor: "#ff0000",
+    strokeWidth: 2,
+  }}
+>
+
+// In your highlight container:
+<DrawingHighlight
+  highlight={highlight}
+  onChange={handlePositionChange}
+/>
+```
+
+**Features:**
+- Freehand drawing with mouse or touch
+- Customizable stroke color and width
+- Stored as PNG for PDF export compatibility
+- Drag to reposition
+
+[Full Documentation →](docs/drawing-highlights.md)
+
+---
+
+## PDF Export
+
+Export your annotated PDF with all highlights embedded.
+
+```tsx
+import { exportPdf } from "react-pdf-highlighter-extended";
+
+const handleExport = async () => {
+  const pdfBytes = await exportPdf(pdfUrl, highlights, {
+    textHighlightColor: "rgba(255, 226, 143, 0.5)",
+    areaHighlightColor: "rgba(255, 226, 143, 0.5)",
+    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);
+};
+```
+
+**Supported highlight types:**
+- Text highlights (colored rectangles)
+- Area highlights (colored rectangles)
+- Freetext notes (background + wrapped text)
+- Images & signatures (embedded PNG/JPG)
+- Freehand drawings (embedded PNG)
+
+[Full Documentation →](docs/pdf-export.md)
+
+---
+
+## Component Architecture
+
+```
+┌─────────────────────────────────────────────────────┐
+│                    PdfLoader                         │
+│  Loads PDF document via PDF.js                       │
+│                                                      │
+│  ┌───────────────────────────────────────────────┐  │
+│  │               PdfHighlighter                   │  │
+│  │  Manages viewer, events, coordinate systems   │  │
+│  │                                               │  │
+│  │  ┌─────────────────────────────────────────┐  │  │
+│  │  │      User-defined HighlightContainer    │  │  │
+│  │  │  Renders highlights using context hooks │  │  │
+│  │  │                                         │  │  │
+│  │  │  • TextHighlight                        │  │  │
+│  │  │  • AreaHighlight                        │  │  │
+│  │  │  • FreetextHighlight                    │  │  │
+│  │  │  • ImageHighlight                       │  │  │
+│  │  │  • DrawingHighlight                     │  │  │
+│  │  └─────────────────────────────────────────┘  │  │
+│  └───────────────────────────────────────────────┘  │
+└─────────────────────────────────────────────────────┘
+```
+
+### Context Hooks
+
+| Hook | Purpose |
+|------|---------|
+| `usePdfHighlighterContext()` | Viewer utilities: `scrollToHighlight`, `setTip`, `getCurrentSelection` |
+| `useHighlightContainerContext()` | Per-highlight utilities: `highlight`, `viewportToScaled`, `screenshot` |
+
+---
+
+## Coordinate Systems
+
+The library uses two coordinate systems:
+
+| System | Description | Use Case |
+|--------|-------------|----------|
+| **Viewport** | Pixel coordinates relative to current zoom | Rendering on screen |
+| **Scaled** | Normalized (0-1) coordinates relative to page | Storage & retrieval |
+
+```tsx
+// Converting between systems
+const { viewportToScaled } = useHighlightContainerContext();
+
+// Save position (viewport → scaled)
+const scaledPosition = viewportToScaled(boundingRect);
+
+// Highlights are automatically converted to viewport when rendering
+```
+
+---
+
+## Customization
+
+### Custom Highlight Interface
+
+```tsx
+interface MyHighlight extends Highlight {
+  category: string;
+  comment?: string;
+  author?: string;
+}
+
+// Use the generic type
+const { highlight } = useHighlightContainerContext<MyHighlight>();
+```
+
+### Custom Styling
+
+```tsx
+// Via props
+<TextHighlight
+  highlight={highlight}
+  style={{ background: categoryColors[highlight.category] }}
+/>
+
+// Via CSS classes
+.TextHighlight { }
+.AreaHighlight { }
+.FreetextHighlight { }
+.ImageHighlight { }
+.DrawingHighlight { }
+```
+
+### Tips and Popups
+
+```tsx
+import { MonitoredHighlightContainer } from "react-pdf-highlighter-extended";
+
+<MonitoredHighlightContainer
+  highlightTip={{
+    position: highlight.position,
+    content: <MyPopup highlight={highlight} />,
+  }}
+>
+  <TextHighlight highlight={highlight} />
+</MonitoredHighlightContainer>
+```
+
+---
+
+## Running Locally
+
+```bash
+git clone https://github.com/QuocVietHa08/react-pdf-highlighter-plus.git
+cd react-pdf-highlighter-plus
+npm install
+npm run dev
+```
+
+---
+
+## API Reference
+
+See the full [API Reference](docs/api-reference.md) for detailed documentation on all components and types.
+
+---
+
+## Contributing
+
+Contributions are welcome! Please:
+
+1. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Submit a pull request
+
+For bugs, please [open an issue](https://github.com/QuocVietHa08/react-pdf-highlighter-plus/issues) with clear reproduction steps.
+
+---
+
+## License
+
+MIT
+
+---
+
+## Credits
+
+Originally forked from [`react-pdf-highlighter`](https://github.com/agentcooper/react-pdf-highlighter) with significant architectural changes including context-based APIs, zoom support, freetext/image/drawing highlights, and PDF export functionality.

package/dist/esm/components/AreaHighlight.d.ts

@@ -0,0 +1,82 @@
+import React, { CSSProperties, MouseEvent, ReactNode } from "react";
+import "../style/AreaHighlight.css";
+import type { LTWHP, ViewportHighlight } from "../types";
+/**
+ * Style options for area highlight appearance.
+ */
+export interface AreaHighlightStyle {
+    highlightColor?: string;
+}
+/**
+ * The props type for {@link AreaHighlight}.
+ *
+ * @category Component Properties
+ */
+export 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<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
+ */
+export declare const AreaHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, style, highlightColor, onStyleChange, onDelete, styleIcon, deleteIcon, colorPresets, }: AreaHighlightProps) => React.JSX.Element;

package/dist/esm/components/AreaHighlight.js

@@ -0,0 +1,109 @@
+import React, { useState, useRef, useEffect, } from "react";
+import { getPageFromElement } from "../lib/pdfjs-dom";
+import "../style/AreaHighlight.css";
+import { Rnd } from "react-rnd";
+// Default icons
+const DefaultStyleIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" })));
+const DefaultDeleteIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" })));
+// Default color presets
+const DEFAULT_COLOR_PRESETS = [
+    "rgba(255, 226, 143, 1)", // Yellow (default)
+    "#ffcdd2", // Light red
+    "#c8e6c9", // Light green
+    "#bbdefb", // Light blue
+    "#e1bee7", // Light purple
+];
+/**
+ * Renders a resizeable and interactive rectangular area for a highlight.
+ *
+ * @category Component
+ */
+export const AreaHighlight = ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, style, highlightColor = "rgba(255, 226, 143, 1)", onStyleChange, onDelete, styleIcon, deleteIcon, colorPresets = DEFAULT_COLOR_PRESETS, }) => {
+    const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const stylePanelRef = useRef(null);
+    // Close style panel when clicking outside
+    useEffect(() => {
+        if (!isStylePanelOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (stylePanelRef.current &&
+                !stylePanelRef.current.contains(e.target)) {
+                setIsStylePanelOpen(false);
+            }
+        };
+        // Delay adding listener to avoid immediate close
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isStylePanelOpen]);
+    const highlightClass = isScrolledTo ? "AreaHighlight--scrolledTo" : "";
+    // Generate key based on position. This forces a remount (and a defaultpos update)
+    // whenever highlight position changes (e.g., when updated, scale changes, etc.)
+    // We don't use position as state because when updating Rnd this would happen and cause flickering:
+    // User moves Rnd -> Rnd records new pos -> Rnd jumps back -> highlight updates -> Rnd re-renders at new pos
+    const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+    // Merge custom style with highlight color
+    const mergedStyle = {
+        ...style,
+        backgroundColor: highlightColor,
+    };
+    return (React.createElement("div", { className: `AreaHighlight ${highlightClass}`, onContextMenu: onContextMenu },
+        (onStyleChange || onDelete) && (React.createElement("div", { className: "AreaHighlight__toolbar-wrapper", style: {
+                position: "absolute",
+                left: highlight.position.boundingRect.left,
+                top: highlight.position.boundingRect.top - 28,
+                paddingBottom: 12,
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
+            React.createElement("div", { className: `AreaHighlight__toolbar ${isHovered || isStylePanelOpen ? "AreaHighlight__toolbar--visible" : ""}` },
+                onStyleChange && (React.createElement("button", { className: "AreaHighlight__style-button", onClick: (e) => {
+                        e.stopPropagation();
+                        setIsStylePanelOpen(!isStylePanelOpen);
+                    }, title: "Change color", type: "button" }, styleIcon || React.createElement(DefaultStyleIcon, null))),
+                onDelete && (React.createElement("button", { className: "AreaHighlight__delete-button", onClick: (e) => {
+                        e.stopPropagation();
+                        onDelete();
+                    }, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
+            isStylePanelOpen && onStyleChange && (React.createElement("div", { className: "AreaHighlight__style-panel", ref: stylePanelRef, onClick: (e) => e.stopPropagation() },
+                React.createElement("div", { className: "AreaHighlight__style-row" },
+                    React.createElement("label", null, "Color"),
+                    React.createElement("div", { className: "AreaHighlight__color-options" },
+                        React.createElement("div", { className: "AreaHighlight__color-presets" }, colorPresets.map((c) => (React.createElement("button", { key: c, type: "button", className: `AreaHighlight__color-preset ${highlightColor === c ? "active" : ""}`, style: { backgroundColor: c }, onClick: () => onStyleChange({ highlightColor: c }), title: c })))),
+                        React.createElement("input", { type: "color", value: highlightColor, onChange: (e) => {
+                                onStyleChange({ highlightColor: e.target.value });
+                            } }))))))),
+        React.createElement(Rnd, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), className: "AreaHighlight__part", onDragStop: (_, data) => {
+                const boundingRect = {
+                    ...highlight.position.boundingRect,
+                    top: data.y,
+                    left: data.x,
+                };
+                onChange && onChange(boundingRect);
+            }, onResizeStop: (_mouseEvent, _direction, ref, _delta, position) => {
+                const boundingRect = {
+                    top: position.y,
+                    left: position.x,
+                    width: ref.offsetWidth,
+                    height: ref.offsetHeight,
+                    pageNumber: getPageFromElement(ref)?.number || -1,
+                };
+                onChange && onChange(boundingRect);
+            }, onDragStart: onEditStart, onResizeStart: onEditStart, default: {
+                x: highlight.position.boundingRect.left,
+                y: highlight.position.boundingRect.top,
+                width: highlight.position.boundingRect.width,
+                height: highlight.position.boundingRect.height,
+            }, key: key, bounds: bounds, 
+            // Prevevent any event clicks as clicking is already used for movement
+            onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }, style: mergedStyle })));
+};
+//# sourceMappingURL=AreaHighlight.js.map

package/dist/esm/components/AreaHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaHighlight.js","sourceRoot":"","sources":["../../../src/components/AreaHighlight.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/DrawingCanvas.d.ts

@@ -0,0 +1,48 @@
+import React from "react";
+import { DrawingStroke, ScaledPosition } from "../types";
+import "../style/DrawingCanvas.css";
+import type { PDFViewer as TPDFViewer } from "pdfjs-dist/web/pdf_viewer.mjs";
+/**
+ * The props type for {@link DrawingCanvas}.
+ *
+ * @category Component Properties
+ */
+export 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 TPDFViewer>;
+    /**
+     * 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
+ */
+export declare const DrawingCanvas: ({ isActive, strokeColor, strokeWidth, viewer, onComplete, onCancel, }: DrawingCanvasProps) => React.JSX.Element | null;