@papyrus-sdk/ui-react 0.2.22 → 0.2.23

package/dist/index.js

@@ -72,6 +72,8 @@ var Topbar = ({
   const [isMobileViewport, setIsMobileViewport] = (0, import_react.useState)(false);
   const pageDigits = Math.max(2, String(pageCount || 1).length);
   const isDark = uiTheme === "dark";
+  const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
+  const isSingleViewportMode = renderTargetType === "element" || renderTargetType === "webview";
   const canUseDOM = typeof document !== "undefined";
   const hasMobileMenu = showZoomControls || showPageThemeSelector || showUIToggle || showUpload;
   (0, import_react.useEffect)(() => {
@@ -153,6 +155,10 @@ var Topbar = ({
     if (pageCount <= 0) return;
     const nextPage = Math.max(1, Math.min(pageCount, isNaN(page) ? 1 : page));
     engine.goToPage(nextPage);
+    if (isSingleViewportMode) {
+      setDocumentState({ currentPage: nextPage, scrollToPageSignal: null });
+      return;
+    }
     triggerScrollToPage(nextPage - 1);
   };
   const handleFileUpload = async (event) => {
@@ -788,12 +794,20 @@ var withAlpha = (hex, alpha) => {
   const b = parseInt(value.slice(4, 6), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
+var isEpubDebugEnabled = () => {
+  try {
+    return Boolean(globalThis?.__PAPYRUS_EPUB_DEBUG__);
+  } catch {
+    return false;
+  }
+};
 var Thumbnail = ({ engine, pageIndex, active, isDark, accentColor, onClick }) => {
   const wrapperRef = (0, import_react2.useRef)(null);
   const canvasRef = (0, import_react2.useRef)(null);
   const htmlRef = (0, import_react2.useRef)(null);
   const accentSoft = withAlpha(accentColor, 0.12);
   const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
+  const isElementRender = renderTargetType === "element";
   const [isVisible, setIsVisible] = (0, import_react2.useState)(false);
   (0, import_react2.useEffect)(() => {
     const target = wrapperRef.current;
@@ -818,14 +832,14 @@ var Thumbnail = ({ engine, pageIndex, active, isDark, accentColor, onClick }) =>
     return () => observer.disconnect();
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (renderTargetType === "element" || !isVisible) return;
-    const target = canvasRef.current;
+    if (!isVisible || isElementRender) return;
+    const target = renderTargetType === "element" ? htmlRef.current : canvasRef.current;
     if (target) {
       engine.renderPage(pageIndex, target, 0.15).catch((err) => {
         console.error("[Papyrus] Thumbnail render failed:", err);
       });
     }
-  }, [engine, pageIndex, renderTargetType, isVisible]);
+  }, [engine, pageIndex, renderTargetType, isVisible, isElementRender]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
@@ -839,13 +853,20 @@ var Thumbnail = ({ engine, pageIndex, active, isDark, accentColor, onClick }) =>
           {
             className: `shadow-lg rounded overflow-hidden mb-2 border ${isDark ? "border-[#333]" : "border-gray-200"}`,
             children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  className: `w-[90px] h-[120px] items-center justify-center text-[10px] font-black tracking-wider ${isElementRender ? "flex" : "hidden"} ${isDark ? "bg-[#1f1f1f] text-gray-300" : "bg-gray-100 text-gray-500"}`,
+                  children: "CAP"
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "canvas",
                 {
                   ref: canvasRef,
                   className: "max-w-full h-auto bg-white",
                   style: {
-                    display: renderTargetType === "element" ? "none" : "block"
+                    display: isElementRender ? "none" : "block"
                   }
                 }
               ),
@@ -857,10 +878,9 @@ var Thumbnail = ({ engine, pageIndex, active, isDark, accentColor, onClick }) =>
                   style: {
                     width: 90,
                     height: 120,
-                    display: renderTargetType === "element" ? "block" : "none",
+                    display: "none",
                     overflow: "hidden"
-                  },
-                  children: renderTargetType === "element" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-full h-full flex items-center justify-center text-[10px] font-semibold text-gray-500", children: "HTML" })
+                  }
                 }
               )
             ]
@@ -879,9 +899,11 @@ var Thumbnail = ({ engine, pageIndex, active, isDark, accentColor, onClick }) =>
   );
 };
 var OutlineNode = ({ item, engine, isDark, accentColor, depth = 0 }) => {
-  const { triggerScrollToPage, outlineSearchQuery } = (0, import_core2.useViewerStore)();
+  const { triggerScrollToPage, outlineSearchQuery, setDocumentState } = (0, import_core2.useViewerStore)();
   const [expanded, setExpanded] = (0, import_react2.useState)(true);
   const accentSoft = withAlpha(accentColor, 0.2);
+  const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
+  const isSingleViewportMode = renderTargetType === "element" || renderTargetType === "webview";
   const matchesSearch = outlineSearchQuery === "" || item.title.toLowerCase().includes(outlineSearchQuery.toLowerCase());
   const hasMatchingChildren = item.children?.some(
     (child) => child.title.toLowerCase().includes(outlineSearchQuery.toLowerCase())
@@ -889,10 +911,53 @@ var OutlineNode = ({ item, engine, isDark, accentColor, depth = 0 }) => {
   if (!matchesSearch && !hasMatchingChildren && outlineSearchQuery !== "")
     return null;
   const handleClick = () => {
-    if (item.pageIndex >= 0) {
-      engine.goToPage(item.pageIndex + 1);
-      triggerScrollToPage(item.pageIndex);
-    }
+    void (async () => {
+      if (item.pageIndex < 0 && !item.dest) return;
+      let targetPageIndex = item.pageIndex;
+      let navigatedByDestination = false;
+      const destinationEngine = engine;
+      if (isSingleViewportMode && item.dest && typeof destinationEngine.goToDestination === "function") {
+        try {
+          if (isEpubDebugEnabled()) {
+            console.log("[EPUBUI] toc-click", {
+              title: item.title,
+              dest: item.dest,
+              pageIndex: item.pageIndex
+            });
+          }
+          const resolved = await destinationEngine.goToDestination(item.dest);
+          if (isEpubDebugEnabled()) {
+            console.log("[EPUBUI] toc-resolved", {
+              title: item.title,
+              resolved
+            });
+          }
+          if (resolved != null) targetPageIndex = resolved;
+          navigatedByDestination = true;
+        } catch {
+        }
+      }
+      if (item.dest && (!navigatedByDestination || targetPageIndex < 0)) {
+        try {
+          const resolved = await engine.getPageIndex(item.dest);
+          if (resolved != null) targetPageIndex = resolved;
+        } catch {
+        }
+      }
+      if (navigatedByDestination && isSingleViewportMode) {
+        const page2 = targetPageIndex >= 0 ? targetPageIndex + 1 : engine.getCurrentPage();
+        setDocumentState({ currentPage: page2, scrollToPageSignal: null });
+        return;
+      }
+      if (targetPageIndex < 0) return;
+      const page = targetPageIndex + 1;
+      engine.goToPage(page);
+      if (isSingleViewportMode) {
+        setDocumentState({ currentPage: page, scrollToPageSignal: null });
+      } else {
+        triggerScrollToPage(targetPageIndex);
+      }
+    })();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -974,6 +1039,24 @@ var SidebarLeft = ({ engine, style }) => {
     accentColor
   } = (0, import_core2.useViewerStore)();
   const isDark = uiTheme === "dark";
+  const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
+  const prefersSummaryByDefault = renderTargetType === "element" || renderTargetType === "webview";
+  const autoSummaryKeyRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    if (!prefersSummaryByDefault) return;
+    if (sidebarLeftTab !== "thumbnails") return;
+    if (pageCount <= 0) return;
+    const docKey = `${pageCount}:${outline.length}`;
+    if (autoSummaryKeyRef.current === docKey) return;
+    autoSummaryKeyRef.current = docKey;
+    setSidebarLeftTab("summary");
+  }, [
+    prefersSummaryByDefault,
+    sidebarLeftTab,
+    pageCount,
+    outline.length,
+    setSidebarLeftTab
+  ]);
   if (!sidebarLeftOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
@@ -1087,8 +1170,16 @@ var SidebarLeft = ({ engine, style }) => {
             accentColor,
             active: currentPage === idx + 1,
             onClick: () => {
-              engine.goToPage(idx + 1);
-              triggerScrollToPage(idx);
+              const page = idx + 1;
+              engine.goToPage(page);
+              if (prefersSummaryByDefault) {
+                setDocumentState({
+                  currentPage: page,
+                  scrollToPageSignal: null
+                });
+              } else {
+                triggerScrollToPage(idx);
+              }
             }
           },
           idx
@@ -1140,10 +1231,14 @@ var SidebarRight = ({ engine, style }) => {
   } = (0, import_core3.useViewerStore)();
   const [query, setQuery] = (0, import_react3.useState)("");
   const [isSearching, setIsSearching] = (0, import_react3.useState)(false);
-  const [contentDrafts, setContentDrafts] = (0, import_react3.useState)({});
+  const [contentDrafts, setContentDrafts] = (0, import_react3.useState)(
+    {}
+  );
   const [replyDrafts, setReplyDrafts] = (0, import_react3.useState)({});
   const searchService = new import_core3.SearchService(engine);
   const isDark = uiTheme === "dark";
+  const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
+  const isSingleViewportMode = renderTargetType === "element" || renderTargetType === "webview";
   const accentSoft = withAlpha2(accentColor, 0.12);
   const resultsCount = searchResults.length;
   const handleSearch = async (e) => {
@@ -1160,9 +1255,13 @@ var SidebarRight = ({ engine, style }) => {
   const jumpToAnnotation = (annotation) => {
     const page = annotation.pageIndex + 1;
     engine.goToPage(page);
-    setDocumentState({ currentPage: page });
+    if (isSingleViewportMode) {
+      setDocumentState({ currentPage: page, scrollToPageSignal: null });
+    } else {
+      setDocumentState({ currentPage: page });
+      triggerScrollToPage(annotation.pageIndex);
+    }
     setSelectedAnnotation(annotation.id);
-    triggerScrollToPage(annotation.pageIndex);
   };
   const getContentDraft = (annotation) => {
     if (Object.prototype.hasOwnProperty.call(contentDrafts, annotation.id)) {
@@ -1309,11 +1408,19 @@ var SidebarRight = ({ engine, style }) => {
               onClick: () => {
                 const page = res.pageIndex + 1;
                 engine.goToPage(page);
-                setDocumentState({
-                  activeSearchIndex: idx,
-                  currentPage: page
-                });
-                triggerScrollToPage(res.pageIndex);
+                if (isSingleViewportMode) {
+                  setDocumentState({
+                    activeSearchIndex: idx,
+                    currentPage: page,
+                    scrollToPageSignal: null
+                  });
+                } else {
+                  setDocumentState({
+                    activeSearchIndex: idx,
+                    currentPage: page
+                  });
+                  triggerScrollToPage(res.pageIndex);
+                }
               },
               className: `p-4 rounded-xl border-2 cursor-pointer transition-all group hover:scale-[1.02] ${idx === activeSearchIndex ? "shadow-lg" : isDark ? "border-[#333] hover:border-[#555] bg-[#222]" : "border-gray-50 hover:border-gray-200 bg-gray-50/50 hover:bg-white"}`,
               style: idx === activeSearchIndex ? {
@@ -1400,7 +1507,9 @@ var SidebarRight = ({ engine, style }) => {
             const replies = ann.replies ?? [];
             const contentDraft = getContentDraft(ann);
             const replyDraft = getReplyDraft(ann.id);
-            const hasExistingContent = Boolean((ann.content ?? "").trim());
+            const hasExistingContent = Boolean(
+              (ann.content ?? "").trim()
+            );
             return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
@@ -1560,6 +1669,7 @@ var PageRenderer = ({
   engine,
   pageIndex,
   availableWidth,
+  availableHeight,
   onMeasuredSize
 }) => {
   const containerRef = (0, import_react4.useRef)(null);
@@ -1601,6 +1711,11 @@ var PageRenderer = ({
   } = (0, import_core4.useViewerStore)();
   const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
   const isElementRender = renderTargetType === "element";
+  const isLandscape = typeof availableWidth === "number" && typeof availableHeight === "number" && availableWidth > availableHeight;
+  const isLandscapeShort = isLandscape && typeof availableHeight === "number" && availableHeight <= 500;
+  const isMobileElementViewport = isElementRender && typeof availableWidth === "number" && (availableWidth <= 768 || isLandscapeShort);
+  const renderZoomDependency = isElementRender ? 1 : zoom;
+  const renderRotationDependency = isElementRender ? 0 : rotation;
   const textMarkupTools = /* @__PURE__ */ new Set([
     "highlight",
     "underline",
@@ -1630,6 +1745,10 @@ var PageRenderer = ({
     },
     []
   );
+  (0, import_react4.useEffect)(() => {
+    if (!isElementRender) return;
+    setPageSize(null);
+  }, [isElementRender, pageIndex]);
   (0, import_react4.useEffect)(() => {
     let active = true;
     const loadSize = async () => {
@@ -1648,12 +1767,13 @@ var PageRenderer = ({
     };
   }, [engine, pageIndex]);
   const fitScale = (0, import_react4.useMemo)(() => {
+    if (isElementRender && isMobileElementViewport) return 1;
     if (!availableWidth || !pageSize?.width) return 1;
     const targetWidth = Math.max(0, availableWidth - 48);
     if (!targetWidth) return 1;
     const rawScale = Math.min(1, targetWidth / pageSize.width);
     return Math.round(rawScale * SCALE_PRECISION) / SCALE_PRECISION;
-  }, [availableWidth, pageSize]);
+  }, [isElementRender, isMobileElementViewport, availableWidth, pageSize]);
   const displaySize = (0, import_react4.useMemo)(() => {
     if (!pageSize) return null;
     const scale = zoom * fitScale;
@@ -1689,6 +1809,15 @@ var PageRenderer = ({
           canvasRef.current.style.height = `${displaySize.height}px`;
         }
         await engine.renderPage(pageIndex, renderTarget, canvasRenderScale);
+        const measuredSize = await engine.getPageDimensions(pageIndex);
+        if (measuredSize.width > 0 && measuredSize.height > 0 && active) {
+          setPageSize((prev) => {
+            if (prev && prev.width === measuredSize.width && prev.height === measuredSize.height) {
+              return prev;
+            }
+            return measuredSize;
+          });
+        }
         if (!isElementRender && !pageSize && canvasRef.current) {
           const denom = canvasRenderScale * Math.max(zoom, 0.01);
           if (denom > 0) {
@@ -1731,13 +1860,24 @@ var PageRenderer = ({
   }, [
     engine,
     pageIndex,
-    zoom,
-    rotation,
     isElementRender,
+    availableWidth,
     fitScale,
     displaySize,
-    pageSize
+    pageSize,
+    renderZoomDependency,
+    renderRotationDependency
   ]);
+  (0, import_react4.useEffect)(() => {
+    if (!isElementRender || pageSize) return;
+    const target = htmlLayerRef.current;
+    if (!target) return;
+    const measuredWidth = target.clientWidth || target.scrollWidth || 0;
+    const measuredHeight = target.clientHeight || target.scrollHeight || 0;
+    if (measuredWidth > 0 && measuredHeight > 0) {
+      setPageSize({ width: measuredWidth, height: measuredHeight });
+    }
+  }, [isElementRender, pageSize, textLayerVersion]);
   (0, import_react4.useEffect)(() => {
     if (isElementRender) return;
     const layer = textLayerRef.current;
@@ -2062,14 +2202,26 @@ var PageRenderer = ({
         return "none";
     }
   };
+  const elementScale = zoom * fitScale;
+  const elementBaseWidth = isElementRender ? isMobileElementViewport && availableWidth != null ? Math.max(260, Math.round(availableWidth)) : pageSize?.width ?? 640 : pageSize?.width ?? 640;
+  const elementBaseHeight = pageSize?.height ?? (isElementRender ? 700 : 900);
+  const elementContainerStyle = isElementRender ? {
+    width: `${Math.max(1, Math.round(elementBaseWidth * elementScale))}px`,
+    height: `${Math.max(
+      1,
+      Math.round(elementBaseHeight * elementScale)
+    )}px`
+  } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref: containerRef,
-      className: `relative inline-block shadow-2xl bg-white mb-10 ${canSelectText ? "" : "no-select cursor-crosshair"}`,
+      className: `relative inline-block shadow-2xl bg-white ${isMobileElementViewport ? "mb-0" : "mb-10"} ${canSelectText ? "" : "no-select cursor-crosshair"}`,
       style: {
         scrollMarginTop: "20px",
         minHeight: "100px",
+        overflow: "hidden",
+        ...elementContainerStyle,
         touchAction: activeTool === "ink" || activeTool === "text" || activeTool === "comment" ? "none" : "auto"
       },
       onMouseDown: handleMouseDown,
@@ -2099,7 +2251,11 @@ var PageRenderer = ({
             className: "block",
             style: {
               filter: getPageFilter(),
-              display: isElementRender ? "block" : "none"
+              display: isElementRender ? "block" : "none",
+              width: `${elementBaseWidth}px`,
+              height: `${elementBaseHeight}px`,
+              transform: `scale(${elementScale})`,
+              transformOrigin: "top left"
             }
           }
         ),
@@ -2549,6 +2705,15 @@ var PageRenderer_default = PageRenderer;
 
 // components/Viewer.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var withAlpha3 = (hex, alpha) => {
+  const normalized = hex.replace("#", "").trim();
+  const value = normalized.length === 3 ? normalized.split("").map((c) => c + c).join("") : normalized;
+  if (value.length !== 6) return hex;
+  const r = parseInt(value.slice(0, 2), 16);
+  const g = parseInt(value.slice(2, 4), 16);
+  const b = parseInt(value.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
 var BASE_OVERSCAN = 6;
 var MIN_ZOOM = 0.2;
 var MAX_ZOOM = 5;
@@ -2570,6 +2735,7 @@ var Viewer = ({ engine, style }) => {
     uiTheme,
     scrollToPageSignal,
     setDocumentState,
+    triggerScrollToPage,
     accentColor,
     annotationColor,
     setAnnotationColor,
@@ -2577,7 +2743,10 @@ var Viewer = ({ engine, style }) => {
   } = viewerState;
   const mobileTopbarVisible = viewerState.mobileTopbarVisible ?? true;
   const isDark = uiTheme === "dark";
+  const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
+  const isSingleViewportMode = renderTargetType === "element" || renderTargetType === "webview";
   const viewerRef = (0, import_react5.useRef)(null);
+  const singleNavInFlightRef = (0, import_react5.useRef)(false);
   const colorPickerRef = (0, import_react5.useRef)(null);
   const pageRefs = (0, import_react5.useRef)([]);
   const intersectionRatiosRef = (0, import_react5.useRef)({});
@@ -2600,6 +2769,7 @@ var Viewer = ({ engine, style }) => {
   });
   const [availableWidth, setAvailableWidth] = (0, import_react5.useState)(null);
   const [availableHeight, setAvailableHeight] = (0, import_react5.useState)(null);
+  const [viewerBounds, setViewerBounds] = (0, import_react5.useState)(null);
   const [basePageSize, setBasePageSize] = (0, import_react5.useState)(null);
   const [pageSizes, setPageSizes] = (0, import_react5.useState)({});
   const [colorPickerOpen, setColorPickerOpen] = (0, import_react5.useState)(false);
@@ -2607,7 +2777,7 @@ var Viewer = ({ engine, style }) => {
   const isLandscapeShort = isLandscape && availableHeight !== null && availableHeight <= MOBILE_LANDSCAPE_MAX_HEIGHT_PX2;
   const isCompact = availableWidth !== null && (availableWidth < 820 || isLandscapeShort);
   const isMobileViewport = availableWidth !== null && (availableWidth < 640 || isLandscapeShort);
-  const paddingY = isCompact ? "py-10" : "py-16";
+  const paddingY = isSingleViewportMode && isMobileViewport ? "py-0" : isCompact ? "py-10" : "py-16";
   const toolDockPosition = isCompact ? "bottom-4" : "bottom-8";
   const colorPalette = [
     "#fbbf24",
@@ -2619,6 +2789,45 @@ var Viewer = ({ engine, style }) => {
     "#8b5cf6",
     "#111827"
   ];
+  const destinationNavEngine = engine;
+  const canUseDestinationNavigation = isSingleViewportMode && typeof destinationNavEngine.goToAdjacentDestination === "function";
+  const destinationNavigationState = isSingleViewportMode && typeof destinationNavEngine.getDestinationNavigationState === "function" ? destinationNavEngine.getDestinationNavigationState() : null;
+  const canGoPrev = destinationNavigationState?.hasPrev ?? currentPage > 1;
+  const canGoNext = destinationNavigationState?.hasNext ?? currentPage < pageCount;
+  const viewerOverflowClass = isSingleViewportMode ? "overflow-hidden" : "overflow-y-scroll overflow-x-hidden";
+  const navigateBy = (delta) => {
+    if (pageCount <= 0) return;
+    if (canUseDestinationNavigation) {
+      if (singleNavInFlightRef.current) return;
+      singleNavInFlightRef.current = true;
+      void (async () => {
+        try {
+          const resolved = await destinationNavEngine.goToAdjacentDestination(
+            delta
+          );
+          if (resolved == null) return;
+          setDocumentState({
+            currentPage: resolved + 1,
+            scrollToPageSignal: null
+          });
+        } finally {
+          singleNavInFlightRef.current = false;
+        }
+      })();
+      return;
+    }
+    const enginePage = Number(engine.getCurrentPage?.());
+    const normalizedEnginePage = Number.isFinite(enginePage) && enginePage >= 1 ? Math.floor(enginePage) : null;
+    const basePage = normalizedEnginePage != null && Math.abs(normalizedEnginePage - currentPage) <= 1 ? normalizedEnginePage : currentPage;
+    const clampedPage = Math.max(1, Math.min(pageCount, basePage + delta));
+    if (clampedPage === basePage) return;
+    engine.goToPage(clampedPage);
+    if (isSingleViewportMode) {
+      setDocumentState({ currentPage: clampedPage, scrollToPageSignal: null });
+      return;
+    }
+    triggerScrollToPage(clampedPage - 1);
+  };
   const setMobileTopbarVisibility = (visible) => {
     if (mobileTopbarVisibleRef.current === visible) return;
     mobileTopbarVisibleRef.current = visible;
@@ -2705,10 +2914,48 @@ var Viewer = ({ engine, style }) => {
       observer.disconnect();
     };
   }, []);
+  (0, import_react5.useEffect)(() => {
+    if (!isSingleViewportMode) return;
+    const viewerElement = viewerRef.current;
+    if (!viewerElement) return;
+    let rafId = null;
+    const updateBounds = () => {
+      const rect = viewerElement.getBoundingClientRect();
+      setViewerBounds({
+        left: rect.left,
+        width: rect.width,
+        top: rect.top,
+        height: rect.height
+      });
+    };
+    const scheduleUpdate = () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        updateBounds();
+      });
+    };
+    updateBounds();
+    viewerElement.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    let observer = null;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(() => scheduleUpdate());
+      observer.observe(viewerElement);
+    }
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      viewerElement.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      window.removeEventListener("scroll", scheduleUpdate);
+      observer?.disconnect();
+    };
+  }, [isSingleViewportMode]);
   (0, import_react5.useEffect)(() => {
     const root = viewerRef.current;
     if (!root) return;
-    if (!isMobileViewport) {
+    if (isSingleViewportMode || !isMobileViewport) {
       lastScrollTopRef.current = root.scrollTop;
       scrollDownAccumulatorRef.current = 0;
       scrollUpAccumulatorRef.current = 0;
@@ -2752,7 +2999,7 @@ var Viewer = ({ engine, style }) => {
     return () => {
       root.removeEventListener("scroll", handleScroll);
     };
-  }, [isMobileViewport, setDocumentState]);
+  }, [isSingleViewportMode, isMobileViewport, setDocumentState]);
   (0, import_react5.useEffect)(() => {
     const previousPage = previousCurrentPageRef.current;
     previousCurrentPageRef.current = currentPage;
@@ -2781,6 +3028,19 @@ var Viewer = ({ engine, style }) => {
   }, [engine, pageCount]);
   (0, import_react5.useEffect)(() => {
     if (scrollToPageSignal == null) return;
+    if (isSingleViewportMode) {
+      const nextPageIndex = Math.max(
+        0,
+        Math.min(Math.max(pageCount - 1, 0), scrollToPageSignal)
+      );
+      const root2 = viewerRef.current;
+      if (root2) root2.scrollTop = 0;
+      setDocumentState({
+        currentPage: nextPageIndex + 1,
+        scrollToPageSignal: null
+      });
+      return;
+    }
     const root = viewerRef.current;
     const target = pageRefs.current[scrollToPageSignal];
     if (root) {
@@ -2817,16 +3077,57 @@ var Viewer = ({ engine, style }) => {
     setDocumentState({ scrollToPageSignal: null });
   }, [
     scrollToPageSignal,
+    isSingleViewportMode,
     setDocumentState,
     basePageSize,
     availableWidth,
     zoom,
     pageCount
   ]);
+  (0, import_react5.useEffect)(() => {
+    if (!isSingleViewportMode) return;
+    const root = viewerRef.current;
+    if (!root) return;
+    root.scrollTop = 0;
+  }, [isSingleViewportMode, currentPage]);
   (0, import_react5.useEffect)(() => {
     setPageSizes({});
   }, [zoom]);
   (0, import_react5.useEffect)(() => {
+    if (pageCount <= 1) return;
+    const handleKeyNavigation = (event) => {
+      if (event.defaultPrevented) return;
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const target = event.target;
+      if (target) {
+        const tag = target.tagName;
+        const isEditable = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable || target.getAttribute("contenteditable") === "true";
+        if (isEditable) return;
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        if (!canGoPrev) return;
+        navigateBy(-1);
+        return;
+      }
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        if (!canGoNext) return;
+        navigateBy(1);
+      }
+    };
+    window.addEventListener("keydown", handleKeyNavigation);
+    return () => window.removeEventListener("keydown", handleKeyNavigation);
+  }, [
+    currentPage,
+    pageCount,
+    triggerScrollToPage,
+    engine,
+    canGoPrev,
+    canGoNext
+  ]);
+  (0, import_react5.useEffect)(() => {
+    if (isSingleViewportMode) return;
     const root = viewerRef.current;
     if (!root) return;
     const flushCurrentPage = () => {
@@ -2872,11 +3173,15 @@ var Viewer = ({ engine, style }) => {
       pageElements.forEach((el) => observer.unobserve(el));
       observer.disconnect();
     };
-  }, [pageCount, setDocumentState, currentPage]);
+  }, [pageCount, setDocumentState, currentPage, isSingleViewportMode]);
+  const safeCurrentPageIndex = Math.max(
+    0,
+    Math.min(Math.max(pageCount - 1, 0), currentPage - 1)
+  );
   const virtualOverscan = zoom > 1.35 ? 4 : BASE_OVERSCAN;
-  const virtualAnchor = currentPage - 1;
-  const virtualStart = Math.max(0, virtualAnchor - virtualOverscan);
-  const virtualEnd = Math.min(pageCount - 1, virtualAnchor + virtualOverscan);
+  const virtualAnchor = safeCurrentPageIndex;
+  const virtualStart = isSingleViewportMode ? safeCurrentPageIndex : Math.max(0, virtualAnchor - virtualOverscan);
+  const virtualEnd = isSingleViewportMode ? safeCurrentPageIndex : Math.min(pageCount - 1, virtualAnchor + virtualOverscan);
   const fallbackSize = (0, import_react5.useMemo)(() => {
     if (basePageSize && availableWidth) {
       const fitScale = Math.min(
@@ -2900,7 +3205,17 @@ var Viewer = ({ engine, style }) => {
       return availableWidth ? Math.max(680, availableWidth * 1.3) : 1100;
     return Math.round(heights.reduce((sum, h) => sum + h, 0) / heights.length);
   }, [pageSizes, availableWidth]);
-  const pages = Array.from({ length: pageCount }).map((_, i) => i);
+  const pages = isSingleViewportMode ? pageCount > 0 ? [safeCurrentPageIndex] : [] : Array.from({ length: pageCount }).map((_, i) => i);
+  const viewerStyle = (0, import_react5.useMemo)(
+    () => isSingleViewportMode ? {
+      ...style ?? {},
+      overflow: "hidden",
+      overflowY: "hidden",
+      overflowX: "hidden",
+      overscrollBehavior: "none"
+    } : style ?? {},
+    [isSingleViewportMode, style]
+  );
   const handlePageMeasured = (pageIndex, size) => {
     setPageSizes((prev) => {
       const current = prev[pageIndex];
@@ -2993,8 +3308,8 @@ var Viewer = ({ engine, style }) => {
       onTouchMove: handleTouchMove,
       onTouchEnd: handleTouchEnd,
       onTouchCancel: handleTouchEnd,
-      className: `papyrus-viewer papyrus-theme min-w-0 w-full flex-1 overflow-y-scroll overflow-x-hidden flex flex-col items-center ${paddingY} relative custom-scrollbar scroll-smooth ${isDark ? "bg-[#121212]" : "bg-[#e9ecef]"}`,
-      style,
+      className: `papyrus-viewer papyrus-theme min-h-0 min-w-0 w-full flex-1 ${viewerOverflowClass} flex flex-col items-center ${paddingY} relative custom-scrollbar scroll-smooth ${isDark ? "bg-[#121212]" : "bg-[#e9ecef]"}`,
+      style: viewerStyle,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col items-center gap-6 w-full min-w-0", children: pages.map((idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
@@ -3003,13 +3318,14 @@ var Viewer = ({ engine, style }) => {
               pageRefs.current[idx] = element;
             },
             "data-page-index": idx,
-            className: "page-container",
+            className: `page-container ${isSingleViewportMode ? "relative" : ""}`,
             children: idx >= virtualStart && idx <= virtualEnd ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               PageRenderer_default,
               {
                 engine,
                 pageIndex: idx,
                 availableWidth: availableWidth ?? void 0,
+                availableHeight: availableHeight ?? void 0,
                 onMeasuredSize: handlePageMeasured
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -3023,8 +3339,94 @@ var Viewer = ({ engine, style }) => {
               }
             )
           },
-          idx
+          isSingleViewportMode ? "single-viewport" : idx
         )) }),
+        isSingleViewportMode && pageCount > 1 && viewerBounds && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            className: "pointer-events-none fixed z-[75] flex items-center justify-between px-1.5 sm:px-2.5",
+            style: {
+              left: viewerBounds.left,
+              width: viewerBounds.width,
+              top: viewerBounds.top + viewerBounds.height / 2,
+              transform: "translateY(-50%)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => navigateBy(-1),
+                  disabled: !canGoPrev,
+                  className: `pointer-events-auto h-12 w-9 sm:h-14 sm:w-10 rounded-lg border backdrop-blur-md transition-all ${!canGoPrev ? "opacity-40 cursor-not-allowed" : "hover:scale-[1.03] active:scale-95"} ${isDark ? "bg-[#111827]/85 text-gray-100" : "bg-white/90 text-gray-700"}`,
+                  style: {
+                    borderColor: withAlpha3(accentColor, isDark ? 0.45 : 0.3),
+                    color: !canGoPrev ? void 0 : accentColor,
+                    boxShadow: `0 10px 24px ${withAlpha3(
+                      accentColor,
+                      isDark ? 0.18 : 0.12
+                    )}`
+                  },
+                  "aria-label": "Cap\xEDtulo anterior",
+                  title: "Cap\xEDtulo anterior",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "svg",
+                    {
+                      className: "w-5 h-5 mx-auto",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M15 19l-7-7 7-7"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => navigateBy(1),
+                  disabled: !canGoNext,
+                  className: `pointer-events-auto h-12 w-9 sm:h-14 sm:w-10 rounded-lg border backdrop-blur-md transition-all ${!canGoNext ? "opacity-40 cursor-not-allowed" : "hover:scale-[1.03] active:scale-95"} ${isDark ? "bg-[#111827]/85 text-gray-100" : "bg-white/90 text-gray-700"}`,
+                  style: {
+                    borderColor: withAlpha3(accentColor, isDark ? 0.45 : 0.3),
+                    color: !canGoNext ? void 0 : accentColor,
+                    boxShadow: `0 10px 24px ${withAlpha3(
+                      accentColor,
+                      isDark ? 0.18 : 0.12
+                    )}`
+                  },
+                  "aria-label": "Pr\xF3ximo cap\xEDtulo",
+                  title: "Pr\xF3ximo cap\xEDtulo",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "svg",
+                    {
+                      className: "w-5 h-5 mx-auto",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M9 5l7 7-7 7"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
         toolDockOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {