@react-pdf-kit/viewer 2.0.0-beta.0 → 2.0.0-beta.10

package/dist/components/layout/RPLayout.js

@@ -2,58 +2,160 @@ import { jsx as o, jsxs as m } from "react/jsx-runtime";
 import { useEffect as h } from "react";
 import { useLayoutContainer as u } from "../../contexts/LayoutContainerContext.js";
 import { Container as y } from "./Container.js";
-import { ViewportProvider as L } from "../../contexts/ViewportContext.js";
-import { ToolbarLayout as C } from "./toolbar/ToolbarLayout.js";
+import { ViewportProvider as C } from "../../contexts/ViewportContext.js";
+import { ToolbarLayout as L } from "./toolbar/ToolbarLayout.js";
 import { WrapperLayout as g } from "./WrapperLayout.js";
 import { useDocumentContext as x } from "../../contexts/RPDocumentContext.js";
-import "../../contexts/DocumentPasswordContext.js";
-import { L as b } from "../../ToolbarLayout.module-c588d36b.js";
-import "../../contexts/DarkModeContext.js";
-import "../../contexts/RotationContext.js";
-import "../../contexts/LayerContext.js";
-import "../../contexts/ZoomContext.js";
-import "../../contexts/ViewModeContext.js";
+import { RPDropFileZone as b } from "../RPDropFileZone.js";
+import { c as j } from "../../RPLayout.module-967bf4bc.js";
+import { useLoaderContext as v } from "../../contexts/LoaderContext.js";
+import { LayoutContainer as w } from "./LayoutContainer.js";
+import "../../clsx-0c6e471a.js";
+import "./toolbar/ToolbarDefault.js";
+import "../../ToolbarLayout.module-1fee0a18.js";
+import "./sidebar/Thumbnails.js";
+import "./sidebar/Thumbnail.js";
+import "../icons/LoaderIcon.js";
+import "../../PaginationContext-9217cab4.js";
+import "../../utils/types.js";
+import "../../th_TH-d627cd51.js";
 import "../../contexts/ScrollModeContext.js";
+import "../../utils/appConsole.js";
+import "../../contexts/InitialStateContext.js";
+import "../../contexts/GlobalCurrentPage.js";
+import "../../contexts/EventCallbackContext.js";
+import "../../contexts/ViewModeContext.js";
 import "../../contexts/VirtualScrollContext.js";
 import "../../contexts/VirtualGridContext.js";
-import "../../contexts/SelectionModeContext.js";
-import "../../contexts/InitialStateContext.js";
-import "../../contexts/FullScreenContext.js";
-import "../../contexts/FileInputContext.js";
-import "../../contexts/DropFileZoneContext.js";
+import "../../utils/smoothScrollTo.js";
 import "../../contexts/DimensionPagesContext.js";
-import "../../contexts/LocalizationContext.js";
-import "../../contexts/HighlightContext.js";
-import "../../contexts/LicenseContext.js";
-import "../../contexts/DownloadContext.js";
-import "../../contexts/SmoothScrollContext.js";
-import "../../contexts/ElementPageContext.js";
+import "../../contexts/ZoomContext.js";
+import "../../utils/constants.js";
+import "../../utils/getZoomLevel.js";
+import "../../contexts/RotationContext.js";
+import "../../utils/hooks/useDebounce.js";
 import "../../contexts/PagesRotateContext.js";
-import "../../contexts/GlobalCurrentPage.js";
-import { useLoaderContext as j } from "../../contexts/LoaderContext.js";
-import "../../contexts/ToolComponentContext.js";
+import "../../contexts/SmoothScrollContext.js";
+import "../../utils/getScrollDistance.js";
+import "../../utils/calculatePage.js";
+import "../../contexts/RenderQueueProvider.js";
+import "../../utils/Queue.js";
+import "../../utils/renderPage.js";
+import "pdfjs-dist";
+import "../../contexts/ThumbnailsContext.js";
+import "../../utils/hooks/useThumbnail.js";
+import "../../utils/getThumbnailViewport.js";
+import "../../utils/hooks/useInfiniteScroll.js";
+import "../../utils/withRef.js";
+import "../../contexts/ToolbarComponentContext.js";
+import "./toolbar/tools/defaults/RPVerticalBar.js";
 import "../../contexts/IconToolContext.js";
-import "../../contexts/OtherToolContext.js";
-import "../RPConfig.js";
-import "../../contexts/ThemeContext.js";
-import { RPDropFileZone as v } from "../RPDropFileZone.js";
+import "../../contexts/ToolComponentContext.js";
+import "./toolbar/ThumbnailTool.js";
+import "../icons/Thumbnail.js";
 import "../ui/Button.js";
-import "../../SearchCloseButton-cbf182aa.js";
+import "../ui/RPTooltip.js";
+import "../../index-c0faa594.js";
+import "react-dom";
+import "../../index-e3ee9457.js";
+import "../../floating-ui.react-dom-5ec29bd6.js";
+import "../../index-655864a7.js";
+import "../../contexts/LocalizationContext.js";
+import "../../utils/hooks/useLocalization.js";
+import "./toolbar/tools/defaults/RPHorizontalBar.js";
+import "./toolbar/SearchTool.js";
+import "../icons/SearchIcon.js";
+import "../../SearchTool.module-99f60dc7.js";
 import "../ui/Input.js";
 import "../ui/Checkbox.js";
-import "../icons/LoaderIcon.js";
+import "../icons/CheckIcon.js";
+import "../icons/ClearIcon.js";
+import "../../contexts/SearchContext.js";
+import "../../utils/hooks/useSearch.js";
+import "../../utils/highlight.js";
+import "../../utils/charators.js";
+import "../../utils/getWordPositionInPage.js";
 import "../../contexts/IconContext.js";
-import "../ui/RPTooltip.js";
-import "../../contexts/ToolbarComponentContext.js";
+import "../icons/InfoIcon.js";
+import "./toolbar/SearchResultNavigator.js";
+import "../icons/ChevronUpIcon.js";
+import "./toolbar/SearchCloseButton.js";
+import "../icons/CloseIcon.js";
 import "../ui/DropDown.js";
-import "../../ZoomTool.module-6c5eabbb.js";
+import "../../index-4baea9b5.js";
+import "../../Combination-54a77a7a.js";
+import "./toolbar/Paginate.js";
+import "../../Paginate.module-206a7d7d.js";
+import "./toolbar/ZoomTool.js";
+import "../icons/ZoomInIcon.js";
+import "../icons/ZoomOutIcon.js";
+import "../../ZoomTool.module-7082af8c.js";
 import "./toolbar/MenuItem.js";
 import "./toolbar/MenuSeparator.js";
+import "./toolbar/tools/ZoomLevelDisplay.js";
+import "../../utils/zoom.js";
+import "./toolbar/RPToolbarEnd.js";
+import "./toolbar/FileUploadTool.js";
+import "../icons/FileUploadDefaultIcon.js";
+import "../../contexts/FileInputContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "./toolbar/DarkModeTool.js";
+import "../icons/MoonIcon.js";
+import "../icons/SunIcon.js";
+import "../../contexts/DarkModeContext.js";
+import "../../utils/hooks/useDarkMode.js";
+import "./toolbar/OtherTool.js";
+import "../icons/ThreeDotIcon.js";
+import "./toolbar/DocumentDialog.js";
 import "../../utils/dateFormatter.js";
 import "./toolbar/PropertyItem.js";
-import "../../RotateTool.module-03987eba.js";
-import { c as w } from "../../LayoutWrapper-a871c161.js";
-const Wo = (p) => {
+import "../../contexts/OtherToolContext.js";
+import "../../OtherTool.module-a4be5f1f.js";
+import "./toolbar/DocumentProperties.js";
+import "./toolbar/RotateTool.js";
+import "../icons/ClockwiseIcon.js";
+import "../../RotateTool.module-67946714.js";
+import "../../utils/hooks/useRotate.js";
+import "./toolbar/ViewModeTool.js";
+import "../icons/DualPageIcon.js";
+import "../icons/SinglePageIcon.js";
+import "./toolbar/ScrollModeTool.js";
+import "../icons/PageScrollingIcon.js";
+import "../icons/VerticalScrollingIcon.js";
+import "../icons/HorizontalScrollingIcon.js";
+import "./toolbar/FileDownloadTool.js";
+import "../icons/FileDownloadDefaultIcon.js";
+import "../../utils/hooks/useFileDownload.js";
+import "../../contexts/DownloadContext.js";
+import "./toolbar/PrintTool.js";
+import "../icons/PrintDefaultIcon.js";
+import "../../contexts/PrintContext.js";
+import "../../utils/hooks/usePrint.js";
+import "./toolbar/FullScreenTool.js";
+import "../../contexts/FullScreenContext.js";
+import "../../utils/hooks/useFullScreen.js";
+import "../icons/FullScreenIcon.js";
+import "./toolbar/MostPageTool.js";
+import "../icons/GoToDownIcon.js";
+import "../../MostPageTool.module-13578ad6.js";
+import "./toolbar/SelectionModeTool.js";
+import "../icons/TextSelectionDefaultIcon.js";
+import "../icons/HandModeDefaultIcon.js";
+import "../../contexts/SelectionModeContext.js";
+import "../../RPToolbar.module-27d7fe77.js";
+import "../ui/LoadingIndicator.js";
+import "./sidebar/RPSplitter.js";
+import "./toolbar/ToolbarCustom.js";
+import "../../contexts/DropFileZoneContext.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "../../contexts/ConfigContext.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+import "../icons/LightPdfIcon.js";
+import "../icons/DarkPdfIcon.js";
+import "../../contexts/ThemeContext.js";
+const br = (p) => {
   const {
     children: e,
     style: n,
@@ -63,19 +165,19 @@ const Wo = (p) => {
     cleanupOnLoaded: r,
     onLayoutWidthChange: l,
     toolbar: d
-  } = p, { setContainer: c } = u(), { loading: f } = x(), { LoaderImageComponent: i } = j();
+  } = p, { setContainer: c } = u(), { loading: f } = x(), { LoaderImageComponent: i } = v();
   return h(() => (t && t(), () => {
     r && r();
   }), [t, r]), // TODO: deprecated in v2.0.0, remove later ("LayoutContainer") ~
-  /* @__PURE__ */ o(b, { children: /* @__PURE__ */ o(L, { mobileWidth: s, onLayoutWidthChange: l, children: /* @__PURE__ */ m(y, { getContainerRef: c, style: n, className: a, children: [
+  /* @__PURE__ */ o(w, { children: /* @__PURE__ */ o(C, { mobileWidth: s, onLayoutWidthChange: l, children: /* @__PURE__ */ m(y, { getContainerRef: c, style: n, className: a, children: [
     /* @__PURE__ */ m(g, { children: [
-      /* @__PURE__ */ o(C, { toolbar: d, children: e }),
-      /* @__PURE__ */ o(v, {})
+      /* @__PURE__ */ o(L, { toolbar: d, children: e }),
+      /* @__PURE__ */ o(b, {})
     ] }),
     f ? /* @__PURE__ */ o(
       "div",
       {
-        className: w["rp-loader"],
+        className: j["rp-loader"],
         style: {
           position: "absolute",
           top: 0,
@@ -103,5 +205,5 @@ const Wo = (p) => {
   ] }) }) });
 };
 export {
-  Wo as RPLayout
+  br as RPLayout
 };

package/dist/components/layout/WrapperLayout.js

@@ -1,13 +1,26 @@
-import { jsx as r, Fragment as n } from "react/jsx-runtime";
-import { useDropFileZoneContext as a } from "../../contexts/DropFileZoneContext.js";
-import { useToolbarComponentContext as s } from "../../contexts/ToolbarComponentContext.js";
-import { useToolComponentContext as l } from "../../contexts/ToolComponentContext.js";
-import '../../assets/WrapperLayout.css';const m = {
+import { jsx as r, Fragment as e } from "react/jsx-runtime";
+import { useDropFileZoneContext as n } from "../../contexts/DropFileZoneContext.js";
+import { useToolbarComponentContext as i } from "../../contexts/ToolbarComponentContext.js";
+import { useToolComponentContext as a } from "../../contexts/ToolComponentContext.js";
+import "react";
+import "../../contexts/RPDocumentContext.js";
+import "../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../utils/types.js";
+import "../../th_TH-d627cd51.js";
+import "../../utils/getThumbnailViewport.js";
+import "../../contexts/ConfigContext.js";
+import "../../contexts/DocumentPasswordContext.js";
+import "../../utils/appConsole.js";
+import "../../utils/hooks/usePdfProperties.js";
+import "../../utils/convertPdfDate.js";
+import "../../utils/formatFileSize.js";
+const s = {
   "rp-wrapper-layout": "_rp-wrapper-layout_2cghq_1"
-}, y = ({ children: o }) => {
-  const { handleDragEnter: p } = a(), { dropFileZone: e } = s(), { dropFileZone: t } = l();
-  return typeof e == "boolean" && !e ? /* @__PURE__ */ r(n, { children: o }) : typeof t == "boolean" && !t ? /* @__PURE__ */ r(n, { children: o }) : /* @__PURE__ */ r("div", { className: m["rp-wrapper-layout"], onDragEnter: p, children: o });
+}, j = ({ children: o }) => {
+  const { handleDragEnter: m } = n(), { dropFileZone: t } = i(), { dropFileZone: p } = a();
+  return typeof t == "boolean" && !t ? /* @__PURE__ */ r(e, { children: o }) : typeof p == "boolean" && !p ? /* @__PURE__ */ r(e, { children: o }) : /* @__PURE__ */ r("div", { className: s["rp-wrapper-layout"], onDragEnter: m, children: o });
 };
 export {
-  y as WrapperLayout
+  j as WrapperLayout
 };

package/dist/components/layout/sidebar/RPSidebar.js

@@ -1,15 +1,112 @@
-import "react/jsx-runtime";
-import "react";
-import "../../icons/Thumbnail.js";
-import "../../ui/Button.js";
-import { Z as P } from "../../../ToolbarLayout.module-c588d36b.js";
-import "./RPSplitter.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "../../../contexts/IconContext.js";
-import "../../ui/RPTooltip.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../utils/constants.js";
+import { jsx as t, Fragment as f, jsxs as l } from "react/jsx-runtime";
+import { useState as T, useRef as s, useCallback as C, useMemo as I } from "react";
+import { ThumbnailIcon as _ } from "../../icons/Thumbnail.js";
+import { UIButton as w } from "../../ui/Button.js";
+import { Thumbnails as x } from "./Thumbnails.js";
+import { RPSplitter as R } from "./RPSplitter.js";
+import { useThumbnailContext as v } from "../../../contexts/ThumbnailsContext.js";
+import { useToolbarComponentContext as N } from "../../../contexts/ToolbarComponentContext.js";
+import { useIconContext as S } from "../../../contexts/IconContext.js";
+import k from "../../ui/RPTooltip.js";
+import { useLocalizationContext as z } from "../../../contexts/LocalizationContext.js";
+import { useIconToolContext as q } from "../../../contexts/IconToolContext.js";
+import { THUMBNAIL_MIN_WIDTH as y } from "../../../utils/constants.js";
+import "../../../clsx-0c6e471a.js";
+import "../../../utils/withRef.js";
+import "./Thumbnail.js";
+import "../../icons/LoaderIcon.js";
+import "../../../PaginationContext-9217cab4.js";
+import "../../../utils/types.js";
+import "../../../th_TH-d627cd51.js";
+import "../../../contexts/ScrollModeContext.js";
+import "../../../utils/appConsole.js";
+import "../../../contexts/InitialStateContext.js";
+import "../../../contexts/RPDocumentContext.js";
+import "../../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../../utils/getThumbnailViewport.js";
+import "../../../contexts/ConfigContext.js";
+import "../../../contexts/DocumentPasswordContext.js";
+import "../../../utils/hooks/usePdfProperties.js";
+import "../../../utils/convertPdfDate.js";
+import "../../../utils/formatFileSize.js";
+import "../../../contexts/GlobalCurrentPage.js";
+import "../../../contexts/EventCallbackContext.js";
+import "../../../contexts/ViewModeContext.js";
+import "../../../contexts/VirtualScrollContext.js";
+import "../../../contexts/VirtualGridContext.js";
+import "../../../utils/smoothScrollTo.js";
+import "../../../contexts/DimensionPagesContext.js";
+import "../../../contexts/ZoomContext.js";
+import "../../../utils/getZoomLevel.js";
+import "../../../contexts/LayoutContainerContext.js";
+import "../../../contexts/RotationContext.js";
+import "../../../utils/hooks/useDebounce.js";
+import "../../../contexts/PagesRotateContext.js";
+import "../../../contexts/SmoothScrollContext.js";
+import "../../../utils/getScrollDistance.js";
+import "../../../utils/calculatePage.js";
+import "../../../contexts/RenderQueueProvider.js";
+import "../../../utils/Queue.js";
+import "../../../utils/renderPage.js";
+import "../../../utils/hooks/useInfiniteScroll.js";
+import "../../../utils/hooks/useThumbnail.js";
+import "../../../index-c0faa594.js";
+import "react-dom";
+import "../../../index-e3ee9457.js";
+import "../../../floating-ui.react-dom-5ec29bd6.js";
+import "../../../index-655864a7.js";
+import "../../../utils/hooks/useLocalization.js";
+const n = {
+  "rp-sidebar-content-wrapper": "_rp-sidebar-content-wrapper_1bqgz_1",
+  "rp-sidebar-content": "_rp-sidebar-content_1bqgz_1",
+  "rp-thumbnails-wrapper": "_rp-thumbnails-wrapper_1bqgz_16"
+}, B = () => {
+  const { thumbnailIcon: o } = S(), { thumbnailIcon: m } = q();
+  return o || m || /* @__PURE__ */ t(_, {});
+}, Dt = () => {
+  const { active: o, setActive: m } = v(), [c, b] = T(y), e = s(null), a = s(null), { thumbnailTool: i, sidebarEnable: u } = N(), { localeMessages: r } = z(), p = C(() => {
+    m((d) => !d);
+  }, []), h = I(() => typeof i != "boolean" && i ? /* @__PURE__ */ t(i, { onClick: p, active: o }) : i ? /* @__PURE__ */ t(k, { content: r == null ? void 0 : r.thumbnailTooltip, children: /* @__PURE__ */ t(
+    w,
+    {
+      onClick: p,
+      active: o,
+      "aria-label": r == null ? void 0 : r.thumbnailTooltip,
+      children: /* @__PURE__ */ t(B, {})
+    }
+  ) }) : null, [i, o, p, r]);
+  return /* @__PURE__ */ t(f, { children: u && /* @__PURE__ */ l(
+    "div",
+    {
+      style: { "--rp-thumbnail-width": `${c}px` },
+      className: n["rp-sidebar-content-wrapper"],
+      "data-rp": "sidebar",
+      children: [
+        /* @__PURE__ */ t("div", { ref: a, className: n["rp-sidebar-content"], children: h }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            "data-rp": "thumbnailSidebar",
+            hidden: !o,
+            className: n["rp-thumbnails-wrapper"],
+            children: [
+              /* @__PURE__ */ t(x, { show: o, ref: e }),
+              /* @__PURE__ */ t(
+                R,
+                {
+                  onWidthChange: b,
+                  thumbnailRef: e,
+                  leftSidebarRef: a
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
 export {
-  P as RPSidebar
+  Dt as RPSidebar
 };

package/dist/components/layout/sidebar/RPSplitter.js

@@ -2,7 +2,7 @@ import { jsx as y } from "react/jsx-runtime";
 import { useRef as f, useState as B, useCallback as v, useEffect as w } from "react";
 import { THUMBNAIL_MIN_WIDTH as _ } from "../../../utils/constants.js";
 import { useLayoutContainer as I } from "../../../contexts/LayoutContainerContext.js";
-import '../../../assets/RPSplitter.css';const L = {
+const L = {
   "rp-thumbnail-dragger": "_rp-thumbnail-dragger_wfl8g_2",
   "rp-thumbnail-dragger-dragging": "_rp-thumbnail-dragger-dragging_wfl8g_19"
 }, R = {

package/dist/components/layout/sidebar/Thumbnail.js

@@ -1,59 +1,136 @@
-import "react/jsx-runtime";
-import "react";
-import { Y as im } from "../../../ToolbarLayout.module-c588d36b.js";
-import "../../../clsx-0c6e471a.js";
-import "../../icons/LoaderIcon.js";
-import "../../../contexts/PagesRotateContext.js";
-import "../../../contexts/RPDocumentContext.js";
-import "../../../contexts/DocumentPasswordContext.js";
-import "../../../contexts/DarkModeContext.js";
-import "../../../contexts/RotationContext.js";
-import "../../../contexts/LayerContext.js";
-import "../../../contexts/ZoomContext.js";
-import "../../../contexts/ViewModeContext.js";
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import { useRef as l, useState as y, useMemo as _, useCallback as L, useEffect as x } from "react";
+import { c as j } from "../../../clsx-0c6e471a.js";
+import { LoaderIcon as k } from "../../icons/LoaderIcon.js";
+import { u as q } from "../../../PaginationContext-9217cab4.js";
+import { usePagesRotateContext as I } from "../../../contexts/PagesRotateContext.js";
+import { useRenderQueue as M } from "../../../contexts/RenderQueueProvider.js";
+import { useDocumentContext as Q } from "../../../contexts/RPDocumentContext.js";
+import "../../../utils/types.js";
+import "../../../th_TH-d627cd51.js";
 import "../../../contexts/ScrollModeContext.js";
+import "../../../utils/appConsole.js";
+import "../../../contexts/InitialStateContext.js";
+import "../../../contexts/GlobalCurrentPage.js";
+import "../../../contexts/EventCallbackContext.js";
+import "../../../contexts/ViewModeContext.js";
 import "../../../contexts/VirtualScrollContext.js";
 import "../../../contexts/VirtualGridContext.js";
-import "../../../contexts/SelectionModeContext.js";
-import "../../../contexts/InitialStateContext.js";
-import "../../../contexts/FullScreenContext.js";
-import "../../../contexts/FileInputContext.js";
-import "../../../contexts/DropFileZoneContext.js";
-import "../../../contexts/LayoutContainerContext.js";
+import "../../../utils/smoothScrollTo.js";
 import "../../../contexts/DimensionPagesContext.js";
-import "../../../contexts/LocalizationContext.js";
-import "../../../contexts/HighlightContext.js";
-import "../../../contexts/LicenseContext.js";
-import "../../../contexts/DownloadContext.js";
+import "../../../contexts/ZoomContext.js";
+import "../../../utils/constants.js";
+import "../../../utils/getZoomLevel.js";
+import "../../../contexts/LayoutContainerContext.js";
+import "../../../contexts/RotationContext.js";
+import "../../../utils/hooks/useLoadPdf.js";
+import "pdfjs-dist";
+import "../../../utils/getThumbnailViewport.js";
+import "../../../contexts/ConfigContext.js";
+import "../../../contexts/DocumentPasswordContext.js";
+import "../../../utils/hooks/usePdfProperties.js";
+import "../../../utils/convertPdfDate.js";
+import "../../../utils/formatFileSize.js";
+import "../../../utils/hooks/useDebounce.js";
 import "../../../contexts/SmoothScrollContext.js";
-import "../../../contexts/ElementPageContext.js";
-import "../../../contexts/GlobalCurrentPage.js";
-import "../../../contexts/LoaderContext.js";
-import "../../../contexts/ToolComponentContext.js";
-import "../../../contexts/IconToolContext.js";
-import "../../../contexts/OtherToolContext.js";
-import "../../RPConfig.js";
-import "../Container.js";
-import "../../../contexts/ViewportContext.js";
-import "../../../contexts/ToolbarComponentContext.js";
-import "./RPSplitter.js";
-import "../WrapperLayout.js";
-import "../../../LayoutWrapper-a871c161.js";
-import "../../../contexts/ThemeContext.js";
-import "../../RPDropFileZone.js";
-import "../../ui/Button.js";
-import "../../../SearchCloseButton-cbf182aa.js";
-import "../../ui/Input.js";
-import "../../ui/Checkbox.js";
-import "../../../contexts/IconContext.js";
-import "../../ui/RPTooltip.js";
-import "../../ui/DropDown.js";
-import "../../../ZoomTool.module-6c5eabbb.js";
-import "../toolbar/MenuItem.js";
-import "../toolbar/MenuSeparator.js";
-import "../../../utils/dateFormatter.js";
-import "../toolbar/PropertyItem.js";
-import "../../../RotateTool.module-03987eba.js";
+import "../../../utils/getScrollDistance.js";
+import "../../../utils/calculatePage.js";
+import "../../../utils/Queue.js";
+import "../../../utils/renderPage.js";
+const i = {
+  "rp-thumbnail-wrapper": "_rp-thumbnail-wrapper_3fenb_1",
+  "rp-thumbnail-text": "_rp-thumbnail-text_3fenb_10",
+  "rp-thumbnail": "_rp-thumbnail_3fenb_1",
+  "rp-thumbnail-active": "_rp-thumbnail-active_3fenb_22",
+  "rp-thumbnail-loader": "_rp-thumbnail-loader_3fenb_31"
+}, Rt = (w) => {
+  const { pageNumber: t, isFocused: h, viewport: s } = w, { goToPage: b } = q(), { pageRotate: R } = I(), o = l(null), n = M(), { pages: m } = Q(), [a, f] = y(null), u = l(!1), d = l(), C = _(() => h ? i["rp-thumbnail-active"] : "", [h]), p = _(() => ({
+    width: Math.round(s.width),
+    height: Math.round(s.height)
+  }), [s]), P = L(() => {
+    t && b(t);
+  }, [b, t]);
+  return x(() => {
+    const e = m.get(t);
+    d.current === e || (f(null), d.current = e);
+  }, [m, t]), x(() => {
+    const e = m.get(t);
+    if (!o.current || !t || !e || a)
+      return;
+    const c = new IntersectionObserver(($) => {
+      $.forEach((E) => {
+        if (u.current) {
+          u.current = !1, n.removeQueue(`thumbnail-${t}`);
+          return;
+        }
+        if (E.isIntersecting) {
+          const g = document.createElement("canvas");
+          u.current = !0, n.enqueue(
+            `thumbnail-${t}`,
+            {
+              page: e.page,
+              canvasElem: g,
+              options: {
+                scale: 1
+              },
+              onLoaded: () => {
+                g.toBlob((v) => {
+                  if (!v)
+                    return;
+                  const N = URL.createObjectURL(v);
+                  f(N);
+                });
+              }
+            },
+            2
+          );
+        }
+      });
+    });
+    return o.current && c.observe(o.current), () => {
+      c.disconnect(), n.removeQueue(`thumbnail-${t}`);
+    };
+  }, [n, t, m, a]), /* @__PURE__ */ S(
+    "div",
+    {
+      onClick: P,
+      id: `page-${t}`,
+      className: i["rp-thumbnail-wrapper"],
+      ref: o,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              transform: `rotate(${R[t || 0]}deg)`
+            },
+            className: j(C, i["rp-thumbnail"]),
+            children: a ? /* @__PURE__ */ r(
+              "img",
+              {
+                src: a,
+                width: p.width,
+                height: p.height,
+                alt: "thumbnail"
+              }
+            ) : /* @__PURE__ */ r(
+              "div",
+              {
+                className: i["rp-thumbnail-loader"],
+                style: {
+                  width: `${p.width}px`,
+                  height: `${p.height}px`
+                },
+                children: /* @__PURE__ */ r(k, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: i["rp-thumbnail-text"], children: t })
+      ]
+    }
+  );
+};
 export {
-  im as Thumbnail
+  Rt as Thumbnail
 };