@papyrus-sdk/ui-react 0.2.18 → 0.2.20

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // components/Topbar.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useViewerStore } from "@papyrus-sdk/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,6 +8,7 @@ var Topbar = ({
   showBrand = false,
   brand,
   title,
+  style,
   showSidebarLeftToggle = true,
   showPageControls = true,
   showZoomControls = true,
@@ -16,6 +17,7 @@ var Topbar = ({
   showUpload = true,
   showSearch = true
 }) => {
+  const viewerState = useViewerStore();
   const {
     currentPage,
     pageCount,
@@ -28,13 +30,15 @@ var Topbar = ({
     toggleSidebarLeft,
     toggleSidebarRight,
     triggerScrollToPage
-  } = useViewerStore();
+  } = viewerState;
+  const mobileTopbarVisible = viewerState.mobileTopbarVisible ?? true;
   const fileInputRef = useRef(null);
   const zoomTimerRef = useRef(null);
   const pendingZoomRef = useRef(null);
   const [pageInput, setPageInput] = useState(currentPage.toString());
   const [showPageThemes, setShowPageThemes] = useState(false);
   const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
   const pageDigits = Math.max(2, String(pageCount || 1).length);
   const isDark = uiTheme === "dark";
   const canUseDOM = typeof document !== "undefined";
@@ -51,6 +55,18 @@ var Topbar = ({
   useEffect(() => {
     if (!hasMobileMenu) setShowMobileMenu(false);
   }, [hasMobileMenu]);
+  useEffect(() => {
+    if (!canUseDOM || typeof window.matchMedia !== "function") return;
+    const mediaQuery = window.matchMedia("(max-width: 639px)");
+    const updateViewport = () => setIsMobileViewport(mediaQuery.matches);
+    updateViewport();
+    if (typeof mediaQuery.addEventListener === "function") {
+      mediaQuery.addEventListener("change", updateViewport);
+      return () => mediaQuery.removeEventListener("change", updateViewport);
+    }
+    mediaQuery.addListener(updateViewport);
+    return () => mediaQuery.removeListener(updateViewport);
+  }, [canUseDOM]);
   useEffect(() => {
     if (!showMobileMenu || !canUseDOM) return;
     const previousOverflow = document.body.style.overflow;
@@ -64,6 +80,30 @@ var Topbar = ({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [showMobileMenu, canUseDOM]);
+  const topbarStyle = useMemo(() => {
+    const mergedStyle = { ...style ?? {} };
+    if (!isMobileViewport) {
+      mergedStyle.transition = "height 180ms ease, opacity 160ms ease, padding 180ms ease, border-width 180ms ease";
+      return mergedStyle;
+    }
+    mergedStyle.transition = "height 180ms ease, opacity 160ms ease, padding 180ms ease, border-width 180ms ease";
+    mergedStyle.overflow = "hidden";
+    if (!mobileTopbarVisible) {
+      mergedStyle.height = 0;
+      mergedStyle.minHeight = 0;
+      mergedStyle.paddingTop = 0;
+      mergedStyle.paddingBottom = 0;
+      mergedStyle.borderBottomWidth = 0;
+      mergedStyle.opacity = 0;
+      mergedStyle.pointerEvents = "none";
+      return mergedStyle;
+    }
+    mergedStyle.height = 56;
+    mergedStyle.minHeight = 56;
+    mergedStyle.opacity = 1;
+    mergedStyle.pointerEvents = "auto";
+    return mergedStyle;
+  }, [isMobileViewport, mobileTopbarVisible, style]);
   const handleZoom = (delta) => {
     const baseZoom = pendingZoomRef.current ?? zoom;
     const nextZoom = Math.max(0.2, Math.min(5, baseZoom + delta));
@@ -354,6 +394,7 @@ var Topbar = ({
     {
       "data-papyrus-theme": uiTheme,
       className: `papyrus-topbar papyrus-theme relative h-14 border-b flex items-center px-3 sm:px-4 z-50 transition-colors duration-200 ${isDark ? "bg-[#1a1a1a] border-[#333] text-white" : "bg-white border-gray-200 text-gray-800"}`,
+      style: topbarStyle,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 z-10", children: [
           showSidebarLeftToggle && /* @__PURE__ */ jsx(
@@ -886,7 +927,7 @@ var OutlineNode = ({ item, engine, isDark, accentColor, depth = 0 }) => {
     )) })
   ] });
 };
-var SidebarLeft = ({ engine }) => {
+var SidebarLeft = ({ engine, style }) => {
   const {
     pageCount,
     currentPage,
@@ -908,6 +949,7 @@ var SidebarLeft = ({ engine }) => {
     {
       "data-papyrus-theme": uiTheme,
       className: `papyrus-sidebar-left papyrus-theme absolute left-0 top-0 bottom-0 z-[120] w-[85vw] max-w-72 border-r flex flex-col h-full overflow-hidden transition-colors duration-200 ${isDark ? "bg-[#2a2a2a] border-[#3a3a3a]" : "bg-[#fcfcfc] border-gray-200"}`,
+      style,
       children: [
         /* @__PURE__ */ jsxs2(
           "div",
@@ -1048,7 +1090,7 @@ var withAlpha2 = (hex, alpha) => {
   const b = parseInt(value.slice(4, 6), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
-var SidebarRight = ({ engine }) => {
+var SidebarRight = ({ engine, style }) => {
   const {
     sidebarRightOpen,
     sidebarRightTab,
@@ -1085,6 +1127,7 @@ var SidebarRight = ({ engine }) => {
     {
       "data-papyrus-theme": uiTheme,
       className: `papyrus-sidebar-right papyrus-theme absolute right-0 top-0 bottom-0 z-[120] w-[88vw] max-w-80 border-l flex flex-col h-full transition-colors duration-200 shadow-2xl ${isDark ? "bg-[#1a1a1a] border-[#333]" : "bg-white border-gray-200"}`,
+      style,
       children: [
         /* @__PURE__ */ jsxs3(
           "div",
@@ -1329,11 +1372,11 @@ var SidebarRight = ({ engine }) => {
 var SidebarRight_default = SidebarRight;
 
 // components/Viewer.tsx
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
 import { useViewerStore as useViewerStore5 } from "@papyrus-sdk/core";
 
 // components/PageRenderer.tsx
-import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import { useViewerStore as useViewerStore4, papyrusEvents } from "@papyrus-sdk/core";
 import {
   PapyrusEventType
@@ -1386,7 +1429,7 @@ var PageRenderer = ({
     "strikeout"
   ]);
   const canSelectText = activeTool === "select" || textMarkupTools.has(activeTool);
-  const hasSearchHits = useMemo(
+  const hasSearchHits = useMemo2(
     () => Boolean(searchQuery?.trim()) && searchResults.some((res) => res.pageIndex === pageIndex),
     [searchQuery, searchResults, pageIndex]
   );
@@ -1407,14 +1450,14 @@ var PageRenderer = ({
       active = false;
     };
   }, [engine, pageIndex]);
-  const fitScale = useMemo(() => {
+  const fitScale = useMemo2(() => {
     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]);
-  const displaySize = useMemo(() => {
+  const displaySize = useMemo2(() => {
     if (!pageSize) return null;
     const scale = zoom * fitScale;
     return {
@@ -2079,7 +2122,11 @@ var MIN_ZOOM = 0.2;
 var MAX_ZOOM = 5;
 var WIDTH_SNAP_PX = 4;
 var WIDTH_HYSTERESIS_PX = 6;
-var Viewer = ({ engine }) => {
+var MOBILE_HEADER_HIDE_DELTA_PX = 28;
+var MOBILE_HEADER_SHOW_DELTA_PX = 16;
+var MOBILE_HEADER_TOP_RESET_PX = 12;
+var Viewer = ({ engine, style }) => {
+  const viewerState = useViewerStore5();
   const {
     pageCount,
     currentPage,
@@ -2092,7 +2139,8 @@ var Viewer = ({ engine }) => {
     annotationColor,
     setAnnotationColor,
     toolDockOpen
-  } = useViewerStore5();
+  } = viewerState;
+  const mobileTopbarVisible = viewerState.mobileTopbarVisible ?? true;
   const isDark = uiTheme === "dark";
   const viewerRef = useRef4(null);
   const colorPickerRef = useRef4(null);
@@ -2102,6 +2150,11 @@ var Viewer = ({ engine }) => {
   const jumpRef = useRef4(false);
   const jumpTimerRef = useRef4(null);
   const lastWidthRef = useRef4(null);
+  const lastScrollTopRef = useRef4(0);
+  const scrollDownAccumulatorRef = useRef4(0);
+  const scrollUpAccumulatorRef = useRef4(0);
+  const previousCurrentPageRef = useRef4(currentPage);
+  const mobileTopbarVisibleRef = useRef4(mobileTopbarVisible);
   const pinchRef = useRef4({
     active: false,
     startDistance: 0,
@@ -2114,6 +2167,7 @@ var Viewer = ({ engine }) => {
   const [pageSizes, setPageSizes] = useState5({});
   const [colorPickerOpen, setColorPickerOpen] = useState5(false);
   const isCompact = availableWidth !== null && availableWidth < 820;
+  const isMobileViewport = availableWidth !== null && availableWidth < 640;
   const paddingY = isCompact ? "py-10" : "py-16";
   const toolDockPosition = isCompact ? "bottom-4" : "bottom-8";
   const colorPalette = [
@@ -2126,6 +2180,13 @@ var Viewer = ({ engine }) => {
     "#8b5cf6",
     "#111827"
   ];
+  const setMobileTopbarVisibility = (visible) => {
+    if (mobileTopbarVisibleRef.current === visible) return;
+    mobileTopbarVisibleRef.current = visible;
+    setDocumentState({
+      mobileTopbarVisible: visible
+    });
+  };
   useEffect4(() => {
     if (!colorPickerOpen) return;
     const handleClick = (event) => {
@@ -2140,6 +2201,9 @@ var Viewer = ({ engine }) => {
   useEffect4(() => {
     if (!toolDockOpen && colorPickerOpen) setColorPickerOpen(false);
   }, [toolDockOpen, colorPickerOpen]);
+  useEffect4(() => {
+    mobileTopbarVisibleRef.current = mobileTopbarVisible;
+  }, [mobileTopbarVisible]);
   useEffect4(
     () => () => {
       if (pinchRef.current.rafId != null) {
@@ -2191,6 +2255,64 @@ var Viewer = ({ engine }) => {
       observer.disconnect();
     };
   }, []);
+  useEffect4(() => {
+    const root = viewerRef.current;
+    if (!root) return;
+    if (!isMobileViewport) {
+      lastScrollTopRef.current = root.scrollTop;
+      scrollDownAccumulatorRef.current = 0;
+      scrollUpAccumulatorRef.current = 0;
+      setMobileTopbarVisibility(true);
+      return;
+    }
+    lastScrollTopRef.current = root.scrollTop;
+    scrollDownAccumulatorRef.current = 0;
+    scrollUpAccumulatorRef.current = 0;
+    const handleScroll = () => {
+      const nextScrollTop = root.scrollTop;
+      const delta = nextScrollTop - lastScrollTopRef.current;
+      lastScrollTopRef.current = nextScrollTop;
+      if (Math.abs(delta) < 1) return;
+      if (nextScrollTop <= MOBILE_HEADER_TOP_RESET_PX) {
+        scrollDownAccumulatorRef.current = 0;
+        scrollUpAccumulatorRef.current = 0;
+        setMobileTopbarVisibility(true);
+        return;
+      }
+      if (delta > 0) {
+        scrollDownAccumulatorRef.current += delta;
+        scrollUpAccumulatorRef.current = 0;
+      } else {
+        scrollUpAccumulatorRef.current += -delta;
+        scrollDownAccumulatorRef.current = 0;
+      }
+      if (scrollDownAccumulatorRef.current >= MOBILE_HEADER_HIDE_DELTA_PX && mobileTopbarVisibleRef.current) {
+        scrollDownAccumulatorRef.current = 0;
+        scrollUpAccumulatorRef.current = 0;
+        setMobileTopbarVisibility(false);
+        return;
+      }
+      if (scrollUpAccumulatorRef.current >= MOBILE_HEADER_SHOW_DELTA_PX && !mobileTopbarVisibleRef.current) {
+        scrollDownAccumulatorRef.current = 0;
+        scrollUpAccumulatorRef.current = 0;
+        setMobileTopbarVisibility(true);
+      }
+    };
+    root.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      root.removeEventListener("scroll", handleScroll);
+    };
+  }, [isMobileViewport, setDocumentState]);
+  useEffect4(() => {
+    const previousPage = previousCurrentPageRef.current;
+    previousCurrentPageRef.current = currentPage;
+    if (!isMobileViewport) return;
+    if (currentPage < previousPage && !mobileTopbarVisibleRef.current) {
+      scrollDownAccumulatorRef.current = 0;
+      scrollUpAccumulatorRef.current = 0;
+      setMobileTopbarVisibility(true);
+    }
+  }, [currentPage, isMobileViewport, setDocumentState]);
   useEffect4(() => {
     let active = true;
     if (!pageCount) return;
@@ -2305,7 +2427,7 @@ var Viewer = ({ engine }) => {
   const virtualAnchor = currentPage - 1;
   const virtualStart = Math.max(0, virtualAnchor - virtualOverscan);
   const virtualEnd = Math.min(pageCount - 1, virtualAnchor + virtualOverscan);
-  const fallbackSize = useMemo2(() => {
+  const fallbackSize = useMemo3(() => {
     if (basePageSize && availableWidth) {
       const fitScale = Math.min(
         1,
@@ -2322,7 +2444,7 @@ var Viewer = ({ engine }) => {
       height: Math.round(base * zoom)
     };
   }, [basePageSize, availableWidth, zoom]);
-  const averagePageHeight = useMemo2(() => {
+  const averagePageHeight = useMemo3(() => {
     const heights = Object.values(pageSizes).map((size) => size.height);
     if (!heights.length)
       return availableWidth ? Math.max(680, availableWidth * 1.3) : 1100;
@@ -2422,6 +2544,7 @@ var Viewer = ({ engine }) => {
       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,
       children: [
         /* @__PURE__ */ jsx5("div", { className: "flex flex-col items-center gap-6 w-full min-w-0", children: pages.map((idx) => /* @__PURE__ */ jsx5(
           "div",