@papyrus-sdk/ui-react 0.2.21 → 0.2.23

package/dist/index.js

@@ -32,6 +32,8 @@ var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_core = require("@papyrus-sdk/core");
 var import_jsx_runtime = require("react/jsx-runtime");
+var MOBILE_LANDSCAPE_MAX_HEIGHT_PX = 500;
+var MOBILE_VIEWPORT_QUERY = `(max-width: 639px), (orientation: landscape) and (max-height: ${MOBILE_LANDSCAPE_MAX_HEIGHT_PX}px)`;
 var Topbar = ({
   engine,
   showBrand = false,
@@ -70,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)(() => {
@@ -86,7 +90,7 @@ var Topbar = ({
   }, [hasMobileMenu]);
   (0, import_react.useEffect)(() => {
     if (!canUseDOM || typeof window.matchMedia !== "function") return;
-    const mediaQuery = window.matchMedia("(max-width: 639px)");
+    const mediaQuery = window.matchMedia(MOBILE_VIEWPORT_QUERY);
     const updateViewport = () => setIsMobileViewport(mediaQuery.matches);
     updateViewport();
     if (typeof mediaQuery.addEventListener === "function") {
@@ -151,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) => {
@@ -786,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;
@@ -816,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",
     {
@@ -837,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"
                   }
                 }
               ),
@@ -855,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" })
+                  }
                 }
               )
             ]
@@ -877,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())
@@ -887,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)(
@@ -972,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",
@@ -1085,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
@@ -1138,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) => {
@@ -1158,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)) {
@@ -1307,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 ? {
@@ -1398,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",
               {
@@ -1558,6 +1669,7 @@ var PageRenderer = ({
   engine,
   pageIndex,
   availableWidth,
+  availableHeight,
   onMeasuredSize
 }) => {
   const containerRef = (0, import_react4.useRef)(null);
@@ -1599,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",
@@ -1628,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 () => {
@@ -1646,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;
@@ -1687,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) {
@@ -1729,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;
@@ -1797,8 +1939,12 @@ var PageRenderer = ({
     activeSearchIndex,
     textLayerVersion
   ]);
-  const handleMouseDown = (e) => {
-    const target = e.target;
+  const getTouchPoint = (event) => {
+    const touch = event.touches[0] ?? event.changedTouches[0];
+    if (!touch) return null;
+    return { x: touch.clientX, y: touch.clientY };
+  };
+  const handlePointerDown = (clientX, clientY, target) => {
     const clickedInsideAnnotation = Boolean(
       target?.closest("[data-papyrus-annotation-id]")
     );
@@ -1812,8 +1958,8 @@ var PageRenderer = ({
     if (activeTool === "ink") {
       const rect2 = containerRef.current?.getBoundingClientRect();
       if (!rect2) return;
-      const x2 = (e.clientX - rect2.left) / rect2.width;
-      const y2 = (e.clientY - rect2.top) / rect2.height;
+      const x2 = (clientX - rect2.left) / rect2.width;
+      const y2 = (clientY - rect2.top) / rect2.height;
       setIsInkDrawing(true);
       setInkPoints([{ x: x2, y: y2 }]);
       return;
@@ -1822,25 +1968,25 @@ var PageRenderer = ({
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
     setIsDragging(true);
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
     setStartPos({ x, y });
     setCurrentRect({ x, y, w: 0, h: 0 });
   };
-  const handleMouseMove = (e) => {
+  const handlePointerMove = (clientX, clientY) => {
     if (isInkDrawing) {
       const rect2 = containerRef.current?.getBoundingClientRect();
       if (!rect2) return;
-      const x = (e.clientX - rect2.left) / rect2.width;
-      const y = (e.clientY - rect2.top) / rect2.height;
+      const x = (clientX - rect2.left) / rect2.width;
+      const y = (clientY - rect2.top) / rect2.height;
       setInkPoints((prev) => [...prev, { x, y }]);
       return;
     }
     if (!isDragging) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
-    const currentX = e.clientX - rect.left;
-    const currentY = e.clientY - rect.top;
+    const currentX = clientX - rect.left;
+    const currentY = clientY - rect.top;
     setCurrentRect({
       x: Math.min(startPos.x, currentX),
       y: Math.min(startPos.y, currentY),
@@ -1848,7 +1994,7 @@ var PageRenderer = ({
       h: Math.abs(currentY - startPos.y)
     });
   };
-  const handleMouseUp = (e) => {
+  const handlePointerUp = () => {
     if (isInkDrawing) {
       setIsInkDrawing(false);
       if (inkPoints.length > 1) {
@@ -2013,6 +2159,37 @@ var PageRenderer = ({
       }
     }
   };
+  const handleMouseDown = (e) => {
+    handlePointerDown(e.clientX, e.clientY, e.target);
+  };
+  const handleMouseMove = (e) => {
+    handlePointerMove(e.clientX, e.clientY);
+  };
+  const handleMouseUp = () => {
+    handlePointerUp();
+  };
+  const handleTouchStart = (event) => {
+    if (event.touches.length > 1) return;
+    const point = getTouchPoint(event);
+    if (!point) return;
+    handlePointerDown(point.x, point.y, event.target);
+    if ((activeTool === "ink" || !canSelectText) && event.cancelable) {
+      event.preventDefault();
+    }
+  };
+  const handleTouchMove = (event) => {
+    if (event.touches.length > 1) return;
+    const point = getTouchPoint(event);
+    if (!point) return;
+    handlePointerMove(point.x, point.y);
+    if ((isInkDrawing || isDragging) && event.cancelable) {
+      event.preventDefault();
+    }
+  };
+  const handleTouchEnd = (event) => {
+    if (event.touches.length > 0) return;
+    handlePointerUp();
+  };
   const getPageFilter = () => {
     switch (pageTheme) {
       case "sepia":
@@ -2025,15 +2202,35 @@ 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"}`,
-      style: { scrollMarginTop: "20px", minHeight: "100px" },
+      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,
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchEnd,
       children: [
         loading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 bg-gray-50 flex items-center justify-center z-10 animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] font-black text-gray-400 uppercase tracking-widest", children: "Sincronizando..." }) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -2054,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"
             }
           }
         ),
@@ -2504,14 +2705,26 @@ 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;
 var WIDTH_SNAP_PX = 4;
 var WIDTH_HYSTERESIS_PX = 6;
+var HEIGHT_SNAP_PX = 4;
+var HEIGHT_HYSTERESIS_PX = 6;
 var MOBILE_HEADER_HIDE_DELTA_PX = 28;
 var MOBILE_HEADER_SHOW_DELTA_PX = 16;
 var MOBILE_HEADER_TOP_RESET_PX = 12;
+var MOBILE_LANDSCAPE_MAX_HEIGHT_PX2 = 500;
 var Viewer = ({ engine, style }) => {
   const viewerState = (0, import_core5.useViewerStore)();
   const {
@@ -2522,6 +2735,7 @@ var Viewer = ({ engine, style }) => {
     uiTheme,
     scrollToPageSignal,
     setDocumentState,
+    triggerScrollToPage,
     accentColor,
     annotationColor,
     setAnnotationColor,
@@ -2529,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)({});
@@ -2537,6 +2754,7 @@ var Viewer = ({ engine, style }) => {
   const jumpRef = (0, import_react5.useRef)(false);
   const jumpTimerRef = (0, import_react5.useRef)(null);
   const lastWidthRef = (0, import_react5.useRef)(null);
+  const lastHeightRef = (0, import_react5.useRef)(null);
   const lastScrollTopRef = (0, import_react5.useRef)(0);
   const scrollDownAccumulatorRef = (0, import_react5.useRef)(0);
   const scrollUpAccumulatorRef = (0, import_react5.useRef)(0);
@@ -2550,12 +2768,16 @@ var Viewer = ({ engine, style }) => {
     rafId: null
   });
   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);
-  const isCompact = availableWidth !== null && availableWidth < 820;
-  const isMobileViewport = availableWidth !== null && availableWidth < 640;
-  const paddingY = isCompact ? "py-10" : "py-16";
+  const isLandscape = availableWidth !== null && availableHeight !== null && availableWidth > availableHeight;
+  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 = isSingleViewportMode && isMobileViewport ? "py-0" : isCompact ? "py-10" : "py-16";
   const toolDockPosition = isCompact ? "bottom-4" : "bottom-8";
   const colorPalette = [
     "#fbbf24",
@@ -2567,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;
@@ -2605,21 +2866,32 @@ var Viewer = ({ engine, style }) => {
     const measurementTarget = viewerElement.parentElement ?? viewerElement;
     let rafId = null;
     const normalizeWidth = (rawWidth) => Math.max(0, Math.floor(rawWidth / WIDTH_SNAP_PX) * WIDTH_SNAP_PX);
-    const updateWidth = () => {
+    const normalizeHeight = (rawHeight) => Math.max(0, Math.floor(rawHeight / HEIGHT_SNAP_PX) * HEIGHT_SNAP_PX);
+    const updateSize = () => {
       const rawWidth = measurementTarget.getBoundingClientRect?.().width ?? measurementTarget.clientWidth ?? measurementTarget.offsetWidth;
+      const rawHeight = measurementTarget.getBoundingClientRect?.().height ?? measurementTarget.clientHeight ?? measurementTarget.offsetHeight;
       const nextWidth = normalizeWidth(rawWidth);
-      if (nextWidth <= 0) return;
+      const nextHeight = normalizeHeight(rawHeight);
+      if (nextWidth <= 0 || nextHeight <= 0) return;
       const previousWidth = lastWidthRef.current;
-      if (previousWidth != null && Math.abs(nextWidth - previousWidth) < WIDTH_HYSTERESIS_PX)
-        return;
-      lastWidthRef.current = nextWidth;
-      setAvailableWidth(nextWidth);
+      const previousHeight = lastHeightRef.current;
+      const widthChanged = previousWidth == null || Math.abs(nextWidth - previousWidth) >= WIDTH_HYSTERESIS_PX;
+      const heightChanged = previousHeight == null || Math.abs(nextHeight - previousHeight) >= HEIGHT_HYSTERESIS_PX;
+      if (!widthChanged && !heightChanged) return;
+      if (widthChanged) {
+        lastWidthRef.current = nextWidth;
+        setAvailableWidth(nextWidth);
+      }
+      if (heightChanged) {
+        lastHeightRef.current = nextHeight;
+        setAvailableHeight(nextHeight);
+      }
     };
     const scheduleWidthUpdate = () => {
       if (rafId != null) cancelAnimationFrame(rafId);
       rafId = requestAnimationFrame(() => {
         rafId = null;
-        updateWidth();
+        updateSize();
       });
     };
     scheduleWidthUpdate();
@@ -2642,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;
@@ -2689,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;
@@ -2718,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) {
@@ -2754,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 = () => {
@@ -2809,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(
@@ -2837,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];
@@ -2930,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",
@@ -2940,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)(
@@ -2960,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",
           {