react-pdf-highlighter-plus 1.0.8 → 1.1.0

package/dist/esm/index.js

@@ -2,6 +2,7 @@
 import debounce from "lodash.debounce";
 import React6, {
   useLayoutEffect as useLayoutEffect2,
+  useMemo,
   useRef as useRef5,
   useState as useState5
 } from "react";
@@ -1120,6 +1121,21 @@ var PDFViewer;
 var SCROLL_MARGIN = 10;
 var DEFAULT_SCALE_VALUE = "auto";
 var DEFAULT_TEXT_SELECTION_COLOR = "rgba(153,193,218,255)";
+var defaultLightTheme = {
+  mode: "light",
+  containerBackgroundColor: "#e5e5e5",
+  scrollbarThumbColor: "#9f9f9f",
+  scrollbarTrackColor: "#d1d1d1",
+  darkModeInvertIntensity: 0.9
+};
+var defaultDarkTheme = {
+  mode: "dark",
+  containerBackgroundColor: "#3a3a3a",
+  // Lighter than PDF page (~#1a1a1a) for contrast
+  scrollbarThumbColor: "#6b6b6b",
+  scrollbarTrackColor: "#2c2c2c",
+  darkModeInvertIntensity: 0.9
+};
 var findOrCreateHighlightLayer = (textLayer) => {
   return findOrCreateContainerLayer(
     textLayer,
@@ -1158,8 +1174,14 @@ var PdfHighlighter = ({
   onShapeComplete,
   onShapeCancel,
   shapeStrokeColor = "#000000",
-  shapeStrokeWidth = 2
+  shapeStrokeWidth = 2,
+  theme: userTheme
 }) => {
+  const resolvedTheme = useMemo(() => {
+    const mode = userTheme?.mode ?? "light";
+    const defaults = mode === "light" ? defaultLightTheme : defaultDarkTheme;
+    return { ...defaults, ...userTheme, mode };
+  }, [userTheme]);
   const [tip, setTip] = useState5(null);
   const [isViewerReady, setIsViewerReady] = useState5(false);
   const containerNodeRef = useRef5(null);
@@ -1457,17 +1479,27 @@ var PdfHighlighter = ({
     getViewer: () => viewerRef.current,
     getTip: () => tip,
     setTip,
-    updateTipPosition: updateTipPositionRef.current
+    updateTipPosition: updateTipPositionRef.current,
+    getLinkService: () => linkServiceRef.current,
+    getEventBus: () => eventBusRef.current,
+    goToPage: (pageNumber) => {
+      viewerRef.current?.scrollPageIntoView({ pageNumber });
+    }
   };
   utilsRef(pdfHighlighterUtils);
   const isFreetextMode = enableFreetextCreation?.({}) ?? false;
   const isImageMode = enableImageCreation?.({}) ?? false;
   let containerClassName = "PdfHighlighter";
+  if (resolvedTheme.mode === "dark") containerClassName += " PdfHighlighter--dark";
   if (isFreetextMode) containerClassName += " PdfHighlighter--freetext-mode";
   if (isImageMode) containerClassName += " PdfHighlighter--image-mode";
   if (enableDrawingMode) containerClassName += " PdfHighlighter--drawing-mode";
   if (enableShapeMode) containerClassName += " PdfHighlighter--shape-mode";
   if (areaSelectionMode) containerClassName += " PdfHighlighter--area-mode";
+  const containerStyle = {
+    ...style,
+    backgroundColor: resolvedTheme.containerBackgroundColor
+  };
   return /* @__PURE__ */ React6.createElement(PdfHighlighterContext.Provider, { value: pdfHighlighterUtils }, /* @__PURE__ */ React6.createElement(
     "div",
     {
@@ -1475,13 +1507,28 @@ var PdfHighlighter = ({
       className: containerClassName,
       onPointerDown: handleMouseDown,
       onPointerUp: handleMouseUp,
-      style
+      style: containerStyle
     },
     /* @__PURE__ */ React6.createElement("div", { className: "pdfViewer" }),
     /* @__PURE__ */ React6.createElement("style", null, `
           .textLayer ::selection {
             background: ${textSelectionColor};
           }
+          .PdfHighlighter::-webkit-scrollbar-thumb {
+            background-color: ${resolvedTheme.scrollbarThumbColor};
+          }
+          .PdfHighlighter::-webkit-scrollbar-track,
+          .PdfHighlighter::-webkit-scrollbar-track-piece {
+            background-color: ${resolvedTheme.scrollbarTrackColor};
+          }
+          ${resolvedTheme.mode === "dark" ? `
+          .PdfHighlighter--dark .page {
+            filter: invert(${resolvedTheme.darkModeInvertIntensity}) hue-rotate(180deg) brightness(1.05);
+          }
+          .PdfHighlighter--dark .PdfHighlighter__highlight-layer {
+            filter: invert(${resolvedTheme.darkModeInvertIntensity}) hue-rotate(180deg) brightness(0.95);
+          }
+          ` : ""}
         `),
     isViewerReady && /* @__PURE__ */ React6.createElement(
       TipContainer,
@@ -2445,8 +2492,7 @@ var SignaturePad = ({
     ctx.lineWidth = 2;
     ctx.lineCap = "round";
     ctx.lineJoin = "round";
-    ctx.fillStyle = "white";
-    ctx.fillRect(0, 0, width, height);
+    ctx.clearRect(0, 0, width, height);
   }, [isOpen, width, height]);
   const getPosition = useCallback3(
     (e) => {
@@ -2528,8 +2574,7 @@ var SignaturePad = ({
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!ctx || !canvas) return;
-    ctx.fillStyle = "white";
-    ctx.fillRect(0, 0, width, height);
+    ctx.clearRect(0, 0, width, height);
   };
   const handleDone = () => {
     const canvas = canvasRef.current;
@@ -3536,23 +3581,1250 @@ async function exportPdf(pdfSource, highlights, options = {}) {
   }
   return pdfDoc.save();
 }
+
+// src/components/leftpanel/LeftPanel.tsx
+import React21, { useState as useState17, useMemo as useMemo4, useCallback as useCallback8 } from "react";
+import { List, FileText, ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
+
+// src/contexts/LeftPanelContext.ts
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var LeftPanelContext = createContext3(
+  void 0
+);
+var useLeftPanelContext = () => {
+  const context = useContext3(LeftPanelContext);
+  if (context === void 0) {
+    throw new Error("useLeftPanelContext must be used within LeftPanel");
+  }
+  return context;
+};
+
+// src/hooks/useDocumentOutline.ts
+import { useState as useState12, useEffect as useEffect12, useCallback as useCallback5, useMemo as useMemo2 } from "react";
+async function processOutlineItems(pdfDocument, items, level) {
+  const processed = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    let pageNumber = 1;
+    if (item.dest) {
+      try {
+        const dest = typeof item.dest === "string" ? await pdfDocument.getDestination(item.dest) : item.dest;
+        if (dest && Array.isArray(dest) && dest[0]) {
+          const pageIndex = await pdfDocument.getPageIndex(dest[0]);
+          pageNumber = pageIndex + 1;
+        }
+      } catch {
+        console.log(`Failed to resolve destination for outline item: ${item.title}`);
+      }
+    }
+    const children = item.items?.length ? await processOutlineItems(pdfDocument, item.items, level + 1) : [];
+    processed.push({
+      id: `outline-${level}-${i}`,
+      title: item.title,
+      pageNumber,
+      dest: item.dest,
+      level,
+      bold: item.bold,
+      italic: item.italic,
+      children
+    });
+  }
+  return processed;
+}
+function flattenOutline(items) {
+  const result = [];
+  for (const item of items) {
+    result.push(item);
+    if (item.children.length) {
+      result.push(...flattenOutline(item.children));
+    }
+  }
+  return result;
+}
+function useDocumentOutline(options) {
+  const { pdfDocument, linkService } = options;
+  const [outline, setOutline] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(true);
+  const [error, setError] = useState12(null);
+  useEffect12(() => {
+    let cancelled = false;
+    async function fetchOutline() {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const rawOutline = await pdfDocument.getOutline();
+        console.log("Raw outline from PDF:", rawOutline);
+        if (cancelled) return;
+        if (!rawOutline || rawOutline.length === 0) {
+          setOutline([]);
+          return;
+        }
+        const processedOutline = await processOutlineItems(
+          pdfDocument,
+          rawOutline,
+          0
+        );
+        if (cancelled) return;
+        console.log("Processed outline:", processedOutline);
+        setOutline(processedOutline);
+      } catch (err) {
+        if (cancelled) return;
+        console.error("Failed to load outline:", err);
+        setError(err instanceof Error ? err : new Error("Failed to load outline"));
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+    fetchOutline();
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfDocument]);
+  const navigateToItem = useCallback5(
+    (item) => {
+      console.log("Navigating to outline item:", item);
+      if (linkService && item.dest && typeof linkService === "object" && "goToDestination" in linkService) {
+        linkService.goToDestination(item.dest);
+      }
+    },
+    [linkService]
+  );
+  const flatOutline = useMemo2(() => {
+    if (!outline) return [];
+    return flattenOutline(outline);
+  }, [outline]);
+  const hasOutline = useMemo2(() => {
+    return outline !== null && outline.length > 0;
+  }, [outline]);
+  return { outline, isLoading, error, navigateToItem, flatOutline, hasOutline };
+}
+
+// src/hooks/useThumbnails.ts
+import { useState as useState13, useCallback as useCallback6, useRef as useRef15, useEffect as useEffect13 } from "react";
+function useThumbnails(options) {
+  const { pdfDocument, thumbnailWidth = 200, cacheSize = 50, preloadAll = true } = options;
+  const [thumbnails, setThumbnails] = useState13(
+    /* @__PURE__ */ new Map()
+  );
+  const loadingRef = useRef15(/* @__PURE__ */ new Set());
+  const loadedRef = useRef15(/* @__PURE__ */ new Set());
+  const cacheOrderRef = useRef15([]);
+  const totalPages = pdfDocument.numPages;
+  const loadThumbnail = useCallback6(
+    async (pageNumber) => {
+      if (loadingRef.current.has(pageNumber) || loadedRef.current.has(pageNumber)) {
+        return;
+      }
+      loadingRef.current.add(pageNumber);
+      setThumbnails((prev) => {
+        const next = new Map(prev);
+        next.set(pageNumber, {
+          pageNumber,
+          dataUrl: null,
+          isLoading: true
+        });
+        return next;
+      });
+      try {
+        const page = await pdfDocument.getPage(pageNumber);
+        const viewport = page.getViewport({ scale: 1 });
+        const scale = thumbnailWidth / viewport.width;
+        const scaledViewport = page.getViewport({ scale });
+        const canvas = document.createElement("canvas");
+        canvas.width = scaledViewport.width;
+        canvas.height = scaledViewport.height;
+        const context = canvas.getContext("2d");
+        await page.render({
+          canvasContext: context,
+          viewport: scaledViewport
+        }).promise;
+        const dataUrl = canvas.toDataURL("image/png");
+        cacheOrderRef.current = cacheOrderRef.current.filter(
+          (p) => p !== pageNumber
+        );
+        cacheOrderRef.current.push(pageNumber);
+        if (cacheOrderRef.current.length > cacheSize) {
+          const toEvict = cacheOrderRef.current.shift();
+          setThumbnails((prev) => {
+            const next = new Map(prev);
+            next.delete(toEvict);
+            return next;
+          });
+        }
+        loadedRef.current.add(pageNumber);
+        setThumbnails((prev) => {
+          const next = new Map(prev);
+          next.set(pageNumber, {
+            pageNumber,
+            dataUrl,
+            isLoading: false
+          });
+          return next;
+        });
+      } catch (error) {
+        console.error(`Failed to load thumbnail for page ${pageNumber}:`, error);
+        setThumbnails((prev) => {
+          const next = new Map(prev);
+          next.set(pageNumber, {
+            pageNumber,
+            dataUrl: null,
+            isLoading: false,
+            error: error instanceof Error ? error.message : "Failed to load"
+          });
+          return next;
+        });
+      } finally {
+        loadingRef.current.delete(pageNumber);
+      }
+    },
+    [pdfDocument, thumbnailWidth, cacheSize]
+  );
+  const getThumbnail = useCallback6(
+    (pageNumber) => {
+      return thumbnails.get(pageNumber) || {
+        pageNumber,
+        dataUrl: null,
+        isLoading: false
+      };
+    },
+    [thumbnails]
+  );
+  const preloadThumbnails = useCallback6(
+    (pageNumbers) => {
+      pageNumbers.forEach((pageNumber) => {
+        loadThumbnail(pageNumber);
+      });
+    },
+    [loadThumbnail]
+  );
+  const clearCache = useCallback6(() => {
+    setThumbnails(/* @__PURE__ */ new Map());
+    cacheOrderRef.current = [];
+    loadingRef.current.clear();
+    loadedRef.current.clear();
+  }, []);
+  useEffect13(() => {
+    if (preloadAll && totalPages > 0) {
+      const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
+      pageNumbers.forEach((pageNumber) => {
+        loadThumbnail(pageNumber);
+      });
+    }
+  }, [preloadAll, totalPages, loadThumbnail]);
+  useEffect13(() => {
+    return () => {
+      loadingRef.current.clear();
+    };
+  }, []);
+  return {
+    getThumbnail,
+    loadThumbnail,
+    preloadThumbnails,
+    clearCache,
+    totalPages,
+    thumbnails
+  };
+}
+
+// src/hooks/usePageNavigation.ts
+import { useState as useState14, useEffect as useEffect14, useCallback as useCallback7 } from "react";
+function usePageNavigation(options) {
+  const { viewer, eventBus } = options;
+  const [currentPage, setCurrentPage] = useState14(1);
+  const isEventBus = (obj) => {
+    return obj !== null && typeof obj === "object" && "on" in obj && "off" in obj;
+  };
+  const isViewer = (obj) => {
+    return obj !== null && typeof obj === "object" && "scrollPageIntoView" in obj;
+  };
+  useEffect14(() => {
+    if (!eventBus || !isEventBus(eventBus)) return;
+    const handlePageChange = (evt) => {
+      setCurrentPage(evt.pageNumber);
+    };
+    eventBus.on("pagechanging", handlePageChange);
+    return () => {
+      eventBus.off("pagechanging", handlePageChange);
+    };
+  }, [eventBus]);
+  useEffect14(() => {
+    if (viewer && isViewer(viewer) && viewer.currentPageNumber) {
+      setCurrentPage(viewer.currentPageNumber);
+    }
+  }, [viewer]);
+  const goToPage = useCallback7(
+    (pageNumber) => {
+      if (viewer && isViewer(viewer)) {
+        const totalPages2 = viewer.pagesCount || 0;
+        if (pageNumber >= 1 && pageNumber <= totalPages2) {
+          viewer.scrollPageIntoView({ pageNumber });
+          return;
+        }
+      }
+      const pageElement = document.querySelector(
+        `.page[data-page-number="${pageNumber}"]`
+      );
+      if (pageElement) {
+        pageElement.scrollIntoView({ behavior: "smooth", block: "start" });
+        setCurrentPage(pageNumber);
+      }
+    },
+    [viewer]
+  );
+  const totalPages = viewer && isViewer(viewer) ? viewer.pagesCount || 0 : 0;
+  return {
+    currentPage,
+    totalPages,
+    goToPage
+  };
+}
+
+// src/components/leftpanel/DocumentOutline.tsx
+import React18 from "react";
+import { Loader2, FileQuestion } from "lucide-react";
+
+// src/components/leftpanel/OutlineItem.tsx
+import React17, { useState as useState15 } from "react";
+import { ChevronRight, ChevronDown } from "lucide-react";
+var OutlineItem = ({
+  item,
+  currentPage,
+  onNavigate,
+  defaultExpanded = true,
+  showExpandIcons = true,
+  maxDepth = 10,
+  styles,
+  classNames,
+  renderItem
+}) => {
+  const [isExpanded, setIsExpanded] = useState15(defaultExpanded);
+  const [isHovered, setIsHovered] = useState15(false);
+  const hasChildren = item.children && item.children.length > 0;
+  const isActive = currentPage === item.pageNumber;
+  const canShowChildren = item.level < maxDepth;
+  const handleToggle = () => {
+    if (hasChildren) {
+      setIsExpanded(!isExpanded);
+    }
+  };
+  const handleNavigate = () => {
+    onNavigate(item);
+  };
+  const renderProps = {
+    isExpanded,
+    isActive,
+    level: item.level,
+    hasChildren,
+    onToggle: handleToggle,
+    onNavigate: handleNavigate
+  };
+  if (renderItem) {
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, renderItem(item, renderProps));
+  }
+  const indent = 12 + item.level * 16;
+  const defaultContainerStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    padding: "6px 12px",
+    paddingLeft: `${indent}px`,
+    cursor: "pointer",
+    position: "relative",
+    transition: "background-color 0.15s ease",
+    backgroundColor: "transparent",
+    borderRadius: "4px",
+    margin: "1px 4px"
+  };
+  const defaultExpandButtonStyle = {
+    padding: "2px",
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "3px",
+    flexShrink: 0,
+    transition: "background-color 0.15s ease"
+  };
+  const defaultExpandIconStyle = {
+    width: 12,
+    height: 12,
+    color: "#64748b"
+  };
+  const defaultActiveIndicatorStyle = {
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    backgroundColor: "#3b82f6",
+    flexShrink: 0
+  };
+  const defaultTitleStyle = {
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: "13px",
+    fontWeight: 400,
+    fontStyle: item.italic ? "italic" : "normal",
+    color: "#475569",
+    lineHeight: 1.4
+  };
+  const defaultTitleActiveStyle = {
+    fontWeight: 500,
+    color: "#1e40af"
+  };
+  const defaultPageNumberStyle = {
+    fontSize: "11px",
+    color: "#94a3b8",
+    flexShrink: 0,
+    fontVariantNumeric: "tabular-nums",
+    minWidth: "20px",
+    textAlign: "right"
+  };
+  const defaultPageNumberActiveStyle = {
+    color: "#3b82f6"
+  };
+  const defaultChildrenContainerStyle = {
+    position: "relative"
+  };
+  const containerStyle = {
+    ...defaultContainerStyle,
+    ...styles?.container,
+    ...isHovered && !isActive ? { backgroundColor: "#f8fafc", ...styles?.containerHover } : {},
+    ...isActive ? styles?.containerActive : {}
+  };
+  const expandButtonStyle = {
+    ...defaultExpandButtonStyle,
+    ...styles?.expandButton
+  };
+  const expandIconStyle = {
+    ...defaultExpandIconStyle,
+    ...styles?.expandIcon
+  };
+  const activeIndicatorStyle = {
+    ...defaultActiveIndicatorStyle,
+    ...styles?.activeIndicator
+  };
+  const titleStyle = {
+    ...defaultTitleStyle,
+    ...styles?.title,
+    ...isActive ? { ...defaultTitleActiveStyle, ...styles?.titleActive } : {}
+  };
+  const pageNumberStyle = {
+    ...defaultPageNumberStyle,
+    ...styles?.pageNumber,
+    ...isActive ? { ...defaultPageNumberActiveStyle, ...styles?.pageNumberActive } : {}
+  };
+  const childrenContainerStyle = {
+    ...defaultChildrenContainerStyle,
+    ...styles?.childrenContainer
+  };
+  const containerClassName = [
+    classNames?.container,
+    isHovered && !isActive ? classNames?.containerHover : "",
+    isActive ? classNames?.containerActive : ""
+  ].filter(Boolean).join(" ");
+  const titleClassName = [
+    classNames?.title,
+    isActive ? classNames?.titleActive : ""
+  ].filter(Boolean).join(" ");
+  const pageNumberClassName = [
+    classNames?.pageNumber,
+    isActive ? classNames?.pageNumberActive : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React17.createElement("div", { className: "outline-item" }, /* @__PURE__ */ React17.createElement(
+    "div",
+    {
+      className: containerClassName || void 0,
+      style: containerStyle,
+      onClick: handleNavigate,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleNavigate();
+        }
+      }
+    },
+    showExpandIcons && hasChildren && canShowChildren ? /* @__PURE__ */ React17.createElement(
+      "button",
+      {
+        className: classNames?.expandButton,
+        onClick: (e) => {
+          e.stopPropagation();
+          handleToggle();
+        },
+        style: expandButtonStyle,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#e5e7eb";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        },
+        "aria-label": isExpanded ? "Collapse" : "Expand"
+      },
+      isExpanded ? /* @__PURE__ */ React17.createElement(ChevronDown, { className: classNames?.expandIcon, style: expandIconStyle }) : /* @__PURE__ */ React17.createElement(ChevronRight, { className: classNames?.expandIcon, style: expandIconStyle })
+    ) : /* @__PURE__ */ React17.createElement("div", { style: { width: 16, flexShrink: 0 } }),
+    isActive && /* @__PURE__ */ React17.createElement("div", { className: classNames?.activeIndicator, style: activeIndicatorStyle }),
+    /* @__PURE__ */ React17.createElement("span", { className: titleClassName || void 0, style: titleStyle, title: item.title }, item.title),
+    /* @__PURE__ */ React17.createElement("span", { className: pageNumberClassName || void 0, style: pageNumberStyle }, item.pageNumber)
+  ), hasChildren && isExpanded && canShowChildren && /* @__PURE__ */ React17.createElement("div", { className: classNames?.childrenContainer, style: childrenContainerStyle }, item.children.map((child) => /* @__PURE__ */ React17.createElement(
+    OutlineItem,
+    {
+      key: child.id,
+      item: child,
+      currentPage,
+      onNavigate,
+      defaultExpanded,
+      showExpandIcons,
+      maxDepth,
+      styles,
+      classNames,
+      renderItem
+    }
+  ))));
+};
+
+// src/components/leftpanel/DocumentOutline.tsx
+var DocumentOutline = ({
+  outline,
+  isLoading = false,
+  currentPage = 1,
+  onNavigate,
+  showExpandIcons = true,
+  defaultExpanded = true,
+  maxDepth = 10,
+  className = "",
+  styles,
+  classNames,
+  itemStyles,
+  itemClassNames,
+  renderItem,
+  emptyContent,
+  loadingContent
+}) => {
+  const defaultLoadingContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 16px"
+  };
+  const defaultLoadingSpinnerStyle = {
+    width: 28,
+    height: 28,
+    color: "#94a3b8",
+    marginBottom: 12,
+    animation: "spin 1s linear infinite"
+  };
+  const defaultLoadingTextStyle = {
+    fontSize: 13,
+    color: "#64748b"
+  };
+  const defaultEmptyContainerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "48px 20px"
+  };
+  const defaultEmptyIconContainerStyle = {
+    width: 56,
+    height: 56,
+    borderRadius: "50%",
+    backgroundColor: "#f1f5f9",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 16
+  };
+  const defaultEmptyIconStyle = {
+    width: 28,
+    height: 28,
+    color: "#94a3b8"
+  };
+  const defaultEmptyTitleStyle = {
+    fontSize: 14,
+    fontWeight: 500,
+    color: "#475569",
+    marginBottom: 4
+  };
+  const defaultEmptyDescriptionStyle = {
+    fontSize: 13,
+    color: "#94a3b8",
+    textAlign: "center"
+  };
+  const defaultContainerStyle = {
+    paddingTop: "8px",
+    paddingBottom: "8px"
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ React18.createElement(
+      "div",
+      {
+        className: [className, classNames?.loadingContainer].filter(Boolean).join(" ") || void 0,
+        style: { ...defaultLoadingContainerStyle, ...styles?.loadingContainer }
+      },
+      loadingContent || /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Loader2, { className: classNames?.loadingSpinner, style: { ...defaultLoadingSpinnerStyle, ...styles?.loadingSpinner } }), /* @__PURE__ */ React18.createElement("p", { className: classNames?.loadingText, style: { ...defaultLoadingTextStyle, ...styles?.loadingText } }, "Loading outline..."))
+    );
+  }
+  if (!outline || outline.length === 0) {
+    return /* @__PURE__ */ React18.createElement(
+      "div",
+      {
+        className: [className, classNames?.emptyContainer].filter(Boolean).join(" ") || void 0,
+        style: { ...defaultEmptyContainerStyle, ...styles?.emptyContainer }
+      },
+      emptyContent || /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("div", { className: classNames?.emptyIconContainer, style: { ...defaultEmptyIconContainerStyle, ...styles?.emptyIconContainer } }, /* @__PURE__ */ React18.createElement(FileQuestion, { className: classNames?.emptyIcon, style: { ...defaultEmptyIconStyle, ...styles?.emptyIcon } })), /* @__PURE__ */ React18.createElement("p", { className: classNames?.emptyTitle, style: { ...defaultEmptyTitleStyle, ...styles?.emptyTitle } }, "No outline available"), /* @__PURE__ */ React18.createElement("p", { className: classNames?.emptyDescription, style: { ...defaultEmptyDescriptionStyle, ...styles?.emptyDescription } }, "This document doesn't have a table of contents"))
+    );
+  }
+  return /* @__PURE__ */ React18.createElement(
+    "div",
+    {
+      className: ["document-outline", className, classNames?.container].filter(Boolean).join(" "),
+      style: { ...defaultContainerStyle, ...styles?.container }
+    },
+    outline.map((item) => /* @__PURE__ */ React18.createElement(
+      OutlineItem,
+      {
+        key: item.id,
+        item,
+        currentPage,
+        onNavigate,
+        defaultExpanded,
+        showExpandIcons,
+        maxDepth,
+        styles: itemStyles,
+        classNames: itemClassNames,
+        renderItem
+      }
+    ))
+  );
+};
+
+// src/components/leftpanel/ThumbnailPanel.tsx
+import React20, { useMemo as useMemo3 } from "react";
+
+// src/components/leftpanel/ThumbnailItem.tsx
+import React19, { useEffect as useEffect15, useRef as useRef16, useState as useState16 } from "react";
+import { Loader2 as Loader22, AlertCircle } from "lucide-react";
+var ThumbnailItem = ({
+  pageNumber,
+  thumbnail,
+  isActive,
+  onLoad,
+  onClick,
+  showPageNumber = true,
+  className = ""
+}) => {
+  const containerRef = useRef16(null);
+  const hasLoadedRef = useRef16(false);
+  const [isHovered, setIsHovered] = useState16(false);
+  useEffect15(() => {
+    const element = containerRef.current;
+    if (!element || hasLoadedRef.current) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !hasLoadedRef.current) {
+            hasLoadedRef.current = true;
+            onLoad(pageNumber);
+            observer.disconnect();
+          }
+        });
+      },
+      {
+        rootMargin: "200px",
+        threshold: 0.1
+      }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [pageNumber, onLoad]);
+  const handleClick = () => {
+    onClick(pageNumber);
+  };
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "8px",
+    cursor: "pointer",
+    borderRadius: "8px",
+    transition: "all 0.15s ease",
+    backgroundColor: isActive ? "rgba(59, 130, 246, 0.08)" : isHovered ? "rgba(0, 0, 0, 0.03)" : "transparent",
+    border: isActive ? "2px solid #3b82f6" : "2px solid transparent"
+  };
+  const imageContainerStyle = {
+    position: "relative",
+    width: "100%",
+    backgroundColor: "#ffffff",
+    borderRadius: "4px",
+    overflow: "hidden",
+    boxShadow: isActive ? "0 4px 12px rgba(59, 130, 246, 0.25)" : isHovered ? "0 4px 12px rgba(0, 0, 0, 0.12)" : "0 1px 3px rgba(0, 0, 0, 0.08)",
+    aspectRatio: "8.5 / 11",
+    transition: "box-shadow 0.15s ease"
+  };
+  const pageNumberStyle = {
+    marginTop: "8px",
+    fontSize: "12px",
+    fontWeight: 500,
+    color: isActive ? "#3b82f6" : "#6b7280",
+    transition: "color 0.15s ease"
+  };
+  return /* @__PURE__ */ React19.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: `thumbnail-item ${className}`,
+      style: containerStyle,
+      onClick: handleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      "aria-label": `Page ${pageNumber}${isActive ? " (current)" : ""}`,
+      "aria-current": isActive ? "page" : void 0
+    },
+    /* @__PURE__ */ React19.createElement("div", { style: imageContainerStyle }, thumbnail.isLoading && /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f9fafb"
+        }
+      },
+      /* @__PURE__ */ React19.createElement(
+        Loader22,
+        {
+          style: {
+            width: 24,
+            height: 24,
+            color: "#9ca3af",
+            animation: "spin 1s linear infinite"
+          }
+        }
+      )
+    ), thumbnail.error && !thumbnail.isLoading && /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#fef2f2"
+        }
+      },
+      /* @__PURE__ */ React19.createElement(AlertCircle, { style: { width: 20, height: 20, color: "#f87171", marginBottom: 4 } }),
+      /* @__PURE__ */ React19.createElement("span", { style: { fontSize: 10, color: "#9ca3af" } }, "Failed")
+    ), thumbnail.dataUrl && !thumbnail.isLoading && /* @__PURE__ */ React19.createElement(
+      "img",
+      {
+        src: thumbnail.dataUrl,
+        alt: `Page ${pageNumber}`,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain"
+        },
+        draggable: false
+      }
+    ), !thumbnail.dataUrl && !thumbnail.isLoading && !thumbnail.error && /* @__PURE__ */ React19.createElement(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "#f9fafb"
+        }
+      },
+      /* @__PURE__ */ React19.createElement(
+        "span",
+        {
+          style: {
+            fontSize: 24,
+            fontWeight: 300,
+            color: "#d1d5db"
+          }
+        },
+        pageNumber
+      )
+    )),
+    showPageNumber && /* @__PURE__ */ React19.createElement("div", { style: pageNumberStyle }, pageNumber)
+  );
+};
+
+// src/components/leftpanel/ThumbnailPanel.tsx
+var ThumbnailPanel = ({
+  totalPages,
+  currentPage,
+  getThumbnail,
+  loadThumbnail,
+  onPageSelect,
+  showPageNumbers = true,
+  className = "",
+  renderThumbnail
+}) => {
+  const pageNumbers = useMemo3(() => {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }, [totalPages]);
+  if (totalPages === 0) {
+    return /* @__PURE__ */ React20.createElement(
+      "div",
+      {
+        className,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "48px 16px"
+        }
+      },
+      /* @__PURE__ */ React20.createElement("p", { style: { fontSize: 13, color: "#9ca3af" } }, "No pages to display")
+    );
+  }
+  return /* @__PURE__ */ React20.createElement(
+    "div",
+    {
+      className: `thumbnail-panel ${className}`,
+      style: {
+        padding: "12px"
+      }
+    },
+    /* @__PURE__ */ React20.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "8px"
+        }
+      },
+      pageNumbers.map((pageNumber) => {
+        const thumbnail = getThumbnail(pageNumber);
+        const isActive = currentPage === pageNumber;
+        if (renderThumbnail) {
+          return /* @__PURE__ */ React20.createElement(
+            "div",
+            {
+              key: pageNumber,
+              onClick: () => onPageSelect(pageNumber),
+              style: { cursor: "pointer" }
+            },
+            renderThumbnail(pageNumber, thumbnail, isActive)
+          );
+        }
+        return /* @__PURE__ */ React20.createElement(
+          ThumbnailItem,
+          {
+            key: pageNumber,
+            pageNumber,
+            thumbnail,
+            isActive,
+            onLoad: loadThumbnail,
+            onClick: onPageSelect,
+            showPageNumber: showPageNumbers
+          }
+        );
+      })
+    )
+  );
+};
+
+// src/components/leftpanel/LeftPanel.tsx
+var defaultTheme = {
+  backgroundColor: "#ffffff",
+  borderColor: "#e5e7eb",
+  accentColor: "#3b82f6",
+  textColor: "#374151",
+  mutedTextColor: "#6b7280",
+  hoverBackgroundColor: "#f9fafb"
+};
+var LeftPanel = ({
+  pdfDocument,
+  viewer = null,
+  linkService = null,
+  eventBus = null,
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  defaultTab = "thumbnails",
+  tabs = ["outline", "thumbnails"],
+  width = 260,
+  className = "",
+  style,
+  renderOutlineItem,
+  renderThumbnail,
+  onPageSelect,
+  thumbnailWidth = 180,
+  children,
+  theme: userTheme,
+  showFooter = true,
+  showToggleButton = true,
+  tabStyles,
+  tabClassNames,
+  footerStyles,
+  footerClassNames,
+  toggleButtonStyles,
+  toggleButtonClassNames,
+  outlineStyles,
+  outlineClassNames,
+  outlineItemStyles,
+  outlineItemClassNames
+}) => {
+  const theme = useMemo4(() => ({ ...defaultTheme, ...userTheme }), [userTheme]);
+  const [internalIsOpen, setInternalIsOpen] = useState17(true);
+  const [activeTab, setActiveTab] = useState17(defaultTab);
+  const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
+  const setIsOpen = useCallback8(
+    (open) => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      } else {
+        setInternalIsOpen(open);
+      }
+    },
+    [onOpenChange]
+  );
+  const {
+    outline,
+    isLoading: isOutlineLoading,
+    hasOutline,
+    navigateToItem
+  } = useDocumentOutline({
+    pdfDocument,
+    linkService
+  });
+  const { getThumbnail, loadThumbnail, totalPages } = useThumbnails({
+    pdfDocument,
+    thumbnailWidth
+  });
+  const { currentPage, goToPage } = usePageNavigation({
+    viewer,
+    eventBus
+  });
+  const handlePageSelect = useCallback8(
+    (pageNumber) => {
+      goToPage(pageNumber);
+      onPageSelect?.(pageNumber);
+    },
+    [goToPage, onPageSelect]
+  );
+  const handleOutlineNavigate = useCallback8(
+    (item) => {
+      navigateToItem(item);
+      onPageSelect?.(item.pageNumber);
+    },
+    [navigateToItem, onPageSelect]
+  );
+  const contextValue = useMemo4(
+    () => ({
+      currentPage,
+      totalPages,
+      goToPage: handlePageSelect,
+      goToOutlineItem: handleOutlineNavigate,
+      pdfDocument,
+      outline,
+      hasOutline,
+      isOutlineLoading,
+      getThumbnail,
+      loadThumbnail,
+      activeTab,
+      setActiveTab,
+      isOpen,
+      setIsOpen
+    }),
+    [
+      currentPage,
+      totalPages,
+      handlePageSelect,
+      handleOutlineNavigate,
+      pdfDocument,
+      outline,
+      hasOutline,
+      isOutlineLoading,
+      getThumbnail,
+      loadThumbnail,
+      activeTab,
+      isOpen,
+      setIsOpen
+    ]
+  );
+  const panelWidth = typeof width === "number" ? `${width}px` : width;
+  const cssVars = {
+    "--lp-bg": theme.backgroundColor,
+    "--lp-border": theme.borderColor,
+    "--lp-accent": theme.accentColor,
+    "--lp-text": theme.textColor,
+    "--lp-muted": theme.mutedTextColor,
+    "--lp-hover": theme.hoverBackgroundColor
+  };
+  return /* @__PURE__ */ React21.createElement(LeftPanelContext.Provider, { value: contextValue }, showToggleButton && /* @__PURE__ */ React21.createElement(
+    "button",
+    {
+      className: toggleButtonClassNames?.button,
+      onClick: () => setIsOpen(!isOpen),
+      style: {
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        left: isOpen ? `calc(${panelWidth} - 1px)` : "0",
+        zIndex: 20,
+        width: "24px",
+        height: "48px",
+        backgroundColor: theme.backgroundColor,
+        border: `1px solid ${theme.borderColor}`,
+        borderLeft: "none",
+        borderRadius: "0 6px 6px 0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        boxShadow: "2px 0 8px rgba(0,0,0,0.08)",
+        transition: "left 0.2s ease-in-out, background-color 0.15s ease",
+        ...toggleButtonStyles?.button
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.backgroundColor = theme.hoverBackgroundColor || "#f9fafb";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = theme.backgroundColor || "#ffffff";
+      },
+      "aria-label": isOpen ? "Close panel" : "Open panel"
+    },
+    isOpen ? /* @__PURE__ */ React21.createElement(ChevronLeft, { className: toggleButtonClassNames?.icon, style: { width: 14, height: 14, color: theme.mutedTextColor, ...toggleButtonStyles?.icon } }) : /* @__PURE__ */ React21.createElement(ChevronRight2, { className: toggleButtonClassNames?.icon, style: { width: 14, height: 14, color: theme.mutedTextColor, ...toggleButtonStyles?.icon } })
+  ), /* @__PURE__ */ React21.createElement(
+    "div",
+    {
+      className: `left-panel ${className}`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        backgroundColor: theme.backgroundColor,
+        borderRight: `1px solid ${theme.borderColor}`,
+        transition: "width 0.2s ease-in-out, min-width 0.2s ease-in-out",
+        position: "relative",
+        width: isOpen ? panelWidth : "0px",
+        minWidth: isOpen ? panelWidth : "0px",
+        overflow: "hidden",
+        ...cssVars,
+        ...style
+      }
+    },
+    /* @__PURE__ */ React21.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          overflow: "hidden",
+          width: panelWidth,
+          minWidth: panelWidth
+        }
+      },
+      tabs.length > 1 && /* @__PURE__ */ React21.createElement(
+        "div",
+        {
+          className: tabClassNames?.container,
+          style: {
+            display: "flex",
+            borderBottom: `1px solid ${theme.borderColor}`,
+            flexShrink: 0,
+            ...tabStyles?.container
+          }
+        },
+        tabs.includes("outline") && /* @__PURE__ */ React21.createElement(
+          "button",
+          {
+            className: [tabClassNames?.tab, activeTab === "outline" ? tabClassNames?.tabActive : ""].filter(Boolean).join(" ") || void 0,
+            onClick: () => setActiveTab("outline"),
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "6px",
+              padding: "12px 16px",
+              fontSize: "13px",
+              fontWeight: 500,
+              color: activeTab === "outline" ? theme.accentColor : theme.mutedTextColor,
+              backgroundColor: activeTab === "outline" ? `${theme.accentColor}08` : "transparent",
+              borderBottom: activeTab === "outline" ? `2px solid ${theme.accentColor}` : "2px solid transparent",
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.15s ease",
+              ...tabStyles?.tab,
+              ...activeTab === "outline" ? tabStyles?.tabActive : {}
+            }
+          },
+          /* @__PURE__ */ React21.createElement(FileText, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, ...tabStyles?.tabIcon } }),
+          /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: tabStyles?.tabText }, "Outline")
+        ),
+        tabs.includes("thumbnails") && /* @__PURE__ */ React21.createElement(
+          "button",
+          {
+            className: [tabClassNames?.tab, activeTab === "thumbnails" ? tabClassNames?.tabActive : ""].filter(Boolean).join(" ") || void 0,
+            onClick: () => setActiveTab("thumbnails"),
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "6px",
+              padding: "12px 16px",
+              fontSize: "13px",
+              fontWeight: 500,
+              color: activeTab === "thumbnails" ? theme.accentColor : theme.mutedTextColor,
+              backgroundColor: activeTab === "thumbnails" ? `${theme.accentColor}08` : "transparent",
+              borderBottom: activeTab === "thumbnails" ? `2px solid ${theme.accentColor}` : "2px solid transparent",
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.15s ease",
+              ...tabStyles?.tab,
+              ...activeTab === "thumbnails" ? tabStyles?.tabActive : {}
+            }
+          },
+          /* @__PURE__ */ React21.createElement(List, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, ...tabStyles?.tabIcon } }),
+          /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: tabStyles?.tabText }, "Pages")
+        )
+      ),
+      tabs.length === 1 && /* @__PURE__ */ React21.createElement(
+        "div",
+        {
+          className: tabClassNames?.container,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            padding: "12px 16px",
+            borderBottom: `1px solid ${theme.borderColor}`,
+            flexShrink: 0,
+            ...tabStyles?.container
+          }
+        },
+        tabs[0] === "outline" ? /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(FileText, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, color: theme.mutedTextColor, ...tabStyles?.tabIcon } }), /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: { fontSize: "13px", fontWeight: 500, color: theme.textColor, ...tabStyles?.tabText } }, "Outline")) : /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(List, { className: tabClassNames?.tabIcon, style: { width: 15, height: 15, color: theme.mutedTextColor, ...tabStyles?.tabIcon } }), /* @__PURE__ */ React21.createElement("span", { className: tabClassNames?.tabText, style: { fontSize: "13px", fontWeight: 500, color: theme.textColor, ...tabStyles?.tabText } }, "Pages"))
+      ),
+      /* @__PURE__ */ React21.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            minHeight: 0,
+            overflowY: "auto",
+            overflowX: "hidden"
+          }
+        },
+        activeTab === "outline" && tabs.includes("outline") && /* @__PURE__ */ React21.createElement(
+          DocumentOutline,
+          {
+            outline,
+            isLoading: isOutlineLoading,
+            currentPage,
+            onNavigate: handleOutlineNavigate,
+            renderItem: renderOutlineItem,
+            styles: outlineStyles,
+            classNames: outlineClassNames,
+            itemStyles: outlineItemStyles,
+            itemClassNames: outlineItemClassNames
+          }
+        ),
+        activeTab === "thumbnails" && tabs.includes("thumbnails") && /* @__PURE__ */ React21.createElement(
+          ThumbnailPanel,
+          {
+            totalPages,
+            currentPage,
+            getThumbnail,
+            loadThumbnail,
+            onPageSelect: handlePageSelect,
+            renderThumbnail
+          }
+        ),
+        children
+      ),
+      showFooter && /* @__PURE__ */ React21.createElement(
+        "div",
+        {
+          className: footerClassNames?.container,
+          style: {
+            flexShrink: 0,
+            borderTop: `1px solid ${theme.borderColor}`,
+            padding: "10px 16px",
+            backgroundColor: theme.hoverBackgroundColor,
+            ...footerStyles?.container
+          }
+        },
+        /* @__PURE__ */ React21.createElement(
+          "div",
+          {
+            className: footerClassNames?.text,
+            style: {
+              fontSize: "12px",
+              color: theme.mutedTextColor,
+              textAlign: "center",
+              fontWeight: 500,
+              ...footerStyles?.text
+            }
+          },
+          "Page ",
+          currentPage,
+          " of ",
+          totalPages
+        )
+      )
+    )
+  ));
+};
 export {
   AreaHighlight,
+  DocumentOutline,
   DrawingCanvas,
   DrawingHighlight,
   FreetextHighlight,
   ImageHighlight,
+  LeftPanel,
   MonitoredHighlightContainer,
+  OutlineItem,
   PdfHighlighter,
   PdfLoader,
   ShapeCanvas,
   ShapeHighlight,
   SignaturePad,
   TextHighlight,
+  ThumbnailItem,
+  ThumbnailPanel,
   exportPdf,
   scaledPositionToViewport,
+  useDocumentOutline,
   useHighlightContainerContext,
+  useLeftPanelContext,
+  usePageNavigation,
   usePdfHighlighterContext,
+  useThumbnails,
   viewportPositionToScaled
 };
 //# sourceMappingURL=index.js.map