react-pdf-highlighter-plus 1.0.7 → 1.1.0

package/README.md

@@ -39,6 +39,7 @@
 | **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 |
+| **Light/Dark Theme** | Eye-friendly dark mode with customizable intensity |
 | **Zoom Support** | Full zoom functionality with position-independent data |
 | **Fully Customizable** | Exposed styling on all components |
 
@@ -237,6 +238,55 @@ import { DrawingHighlight } from "react-pdf-highlighter-plus";
 
 ---
 
+## Light/Dark Theme
+
+Toggle between light and dark modes with customizable styling for comfortable reading.
+
+```tsx
+// Enable dark mode
+<PdfHighlighter
+  pdfDocument={pdfDocument}
+  theme={{ mode: "dark" }}
+  highlights={highlights}
+>
+  <HighlightContainer />
+</PdfHighlighter>
+
+// Customize dark mode intensity and colors
+<PdfHighlighter
+  pdfDocument={pdfDocument}
+  theme={{
+    mode: "dark",
+    darkModeInvertIntensity: 0.85,  // Softer (0.8-1.0)
+    containerBackgroundColor: "#3a3a3a",
+    scrollbarThumbColor: "#6b6b6b",
+    scrollbarTrackColor: "#2c2c2c",
+  }}
+  highlights={highlights}
+>
+  <HighlightContainer />
+</PdfHighlighter>
+```
+
+**Features:**
+- Eye-friendly dark mode using CSS filter inversion
+- Customizable inversion intensity (0.8-1.0)
+- Preserve original highlight colors in dark mode
+- Custom scrollbar styling
+- Full theming control for container background
+
+**Inversion Intensity Guide:**
+| Value | Result | Use Case |
+|-------|--------|----------|
+| `1.0` | Pure black | High contrast |
+| `0.9` | Dark gray (~#1a1a1a) | **Recommended** |
+| `0.85` | Softer gray (~#262626) | Long reading sessions |
+| `0.8` | Medium gray (~#333333) | Maximum comfort |
+
+[Full Documentation →](docs/theming.md)
+
+---
+
 ## PDF Export
 
 Export your annotated PDF with all highlights embedded.

package/dist/esm/index.d.ts

@@ -1,8 +1,8 @@
 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 { 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';
 
 /**
@@ -216,6 +216,38 @@ type Tip = {
  * @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';
 
 /**
  * A set of utilities for to control the behaviour of {@link PdfHighlighter}.
@@ -276,7 +308,7 @@ type PdfHighlighterUtils = {
      *
      * @returns - The currently active PDF Viewer.
      */
-    getViewer(): PDFViewer | null;
+    getViewer(): PDFViewer$2 | null;
     /**
      * Get the currently active tip, if any.
      *
@@ -294,6 +326,24 @@ type PdfHighlighterUtils = {
      * 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;
 };
 /**
  * Custom hook for providing {@link PdfHighlighterUtils}. Must be used
@@ -303,6 +353,45 @@ type PdfHighlighterUtils = {
  */
 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}.
  *
@@ -468,6 +557,13 @@ interface PdfHighlighterProps {
      * @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
@@ -479,7 +575,7 @@ interface PdfHighlighterProps {
  *
  * @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;
+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.
@@ -921,7 +1017,7 @@ interface DrawingCanvasProps {
     /**
      * The PDF viewer instance.
      */
-    viewer: InstanceType<typeof PDFViewer$1>;
+    viewer: InstanceType<typeof PDFViewer$3>;
     /**
      * Callback when drawing is complete.
      *
@@ -1038,7 +1134,7 @@ interface ShapeCanvasProps {
     /**
      * The PDF viewer instance.
      */
-    viewer: InstanceType<typeof PDFViewer$1>;
+    viewer: InstanceType<typeof PDFViewer$3>;
     /**
      * Callback when shape creation is complete.
      *
@@ -1260,9 +1356,9 @@ type HighlightContainerUtils<T extends Highlight = Highlight> = {
 declare const useHighlightContainerContext: <T extends Highlight = Highlight>() => HighlightContainerUtils<T>;
 
 /** @category Utilities */
-declare const viewportPositionToScaled: ({ boundingRect, rects }: ViewportPosition, viewer: PDFViewer) => ScaledPosition;
+declare const viewportPositionToScaled: ({ boundingRect, rects }: ViewportPosition, viewer: PDFViewer$2) => ScaledPosition;
 /** @category Utilities */
-declare const scaledPositionToViewport: ({ boundingRect, rects, usePdfCoordinates }: ScaledPosition, viewer: PDFViewer) => ViewportPosition;
+declare const scaledPositionToViewport: ({ boundingRect, rects, usePdfCoordinates }: ScaledPosition, viewer: PDFViewer$2) => ViewportPosition;
 
 /**
  * Options for the PDF export function.
@@ -1345,4 +1441,457 @@ interface ExportableHighlight {
  */
 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 };
+/** 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<OutlineItemProps>;
+
+/** 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<DocumentOutlineProps>;
+
+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;
+    /** 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<LeftPanelProps>;
+
+interface ThumbnailPanelProps {
+    /** Total number of pages */
+    totalPages: number;
+    /** Current page number for highlighting */
+    currentPage: number;
+    /** Function to get thumbnail data for a page */
+    getThumbnail: (pageNumber: number) => ThumbnailData;
+    /** Function to load a thumbnail */
+    loadThumbnail: (pageNumber: number) => Promise<void>;
+    /** 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;
+}
+/**
+ * Panel displaying page thumbnails in a clean, single-column grid layout.
+ * Optimized for easy page navigation with visual feedback.
+ */
+declare const ThumbnailPanel: React.FC<ThumbnailPanelProps>;
+
+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.
+ */
+declare const ThumbnailItem: React.FC<ThumbnailItemProps>;
+
+/**
+ * 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;
+    getThumbnail: (pageNumber: number) => ThumbnailData;
+    loadThumbnail: (pageNumber: number) => Promise<void>;
+    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;
+}
+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;
+    thumbnailWidth?: number;
+    cacheSize?: number;
+    /** If true, preload all thumbnails on mount */
+    preloadAll?: boolean;
+}
+interface UseThumbnailsResult {
+    getThumbnail: (pageNumber: number) => ThumbnailData;
+    loadThumbnail: (pageNumber: number) => Promise<void>;
+    preloadThumbnails: (pageNumbers: number[]) => void;
+    clearCache: () => void;
+    totalPages: number;
+    thumbnails: Map<number, ThumbnailData>;
+}
+/**
+ * Hook for generating and caching PDF page thumbnails
+ *
+ * @param options - Configuration options
+ * @returns Thumbnail utilities and data
+ */
+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;
+
+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 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, PdfHighlighter, type PdfHighlighterProps, type PdfHighlighterTheme, type PdfHighlighterUtils, PdfLoader, type PdfLoaderProps, type PdfScaleValue, type PdfSelection, 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, scaledPositionToViewport, useDocumentOutline, useHighlightContainerContext, useLeftPanelContext, usePageNavigation, usePdfHighlighterContext, useThumbnails, viewportPositionToScaled };