@papyrus-sdk/ui-react 0.2.19 → 0.2.20

package/dist/index.js

@@ -46,6 +46,7 @@ var Topbar = ({
   showUpload = true,
   showSearch = true
 }) => {
+  const viewerState = (0, import_core.useViewerStore)();
   const {
     currentPage,
     pageCount,
@@ -58,13 +59,15 @@ var Topbar = ({
     toggleSidebarLeft,
     toggleSidebarRight,
     triggerScrollToPage
-  } = (0, import_core.useViewerStore)();
+  } = viewerState;
+  const mobileTopbarVisible = viewerState.mobileTopbarVisible ?? true;
   const fileInputRef = (0, import_react.useRef)(null);
   const zoomTimerRef = (0, import_react.useRef)(null);
   const pendingZoomRef = (0, import_react.useRef)(null);
   const [pageInput, setPageInput] = (0, import_react.useState)(currentPage.toString());
   const [showPageThemes, setShowPageThemes] = (0, import_react.useState)(false);
   const [showMobileMenu, setShowMobileMenu] = (0, import_react.useState)(false);
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react.useState)(false);
   const pageDigits = Math.max(2, String(pageCount || 1).length);
   const isDark = uiTheme === "dark";
   const canUseDOM = typeof document !== "undefined";
@@ -81,6 +84,18 @@ var Topbar = ({
   (0, import_react.useEffect)(() => {
     if (!hasMobileMenu) setShowMobileMenu(false);
   }, [hasMobileMenu]);
+  (0, import_react.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]);
   (0, import_react.useEffect)(() => {
     if (!showMobileMenu || !canUseDOM) return;
     const previousOverflow = document.body.style.overflow;
@@ -94,6 +109,30 @@ var Topbar = ({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [showMobileMenu, canUseDOM]);
+  const topbarStyle = (0, import_react.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));
@@ -384,7 +423,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,
+      style: topbarStyle,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2 min-w-0 z-10", children: [
           showSidebarLeftToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -2110,7 +2149,11 @@ var MIN_ZOOM = 0.2;
 var MAX_ZOOM = 5;
 var WIDTH_SNAP_PX = 4;
 var WIDTH_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 Viewer = ({ engine, style }) => {
+  const viewerState = (0, import_core5.useViewerStore)();
   const {
     pageCount,
     currentPage,
@@ -2123,7 +2166,8 @@ var Viewer = ({ engine, style }) => {
     annotationColor,
     setAnnotationColor,
     toolDockOpen
-  } = (0, import_core5.useViewerStore)();
+  } = viewerState;
+  const mobileTopbarVisible = viewerState.mobileTopbarVisible ?? true;
   const isDark = uiTheme === "dark";
   const viewerRef = (0, import_react5.useRef)(null);
   const colorPickerRef = (0, import_react5.useRef)(null);
@@ -2133,6 +2177,11 @@ 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 lastScrollTopRef = (0, import_react5.useRef)(0);
+  const scrollDownAccumulatorRef = (0, import_react5.useRef)(0);
+  const scrollUpAccumulatorRef = (0, import_react5.useRef)(0);
+  const previousCurrentPageRef = (0, import_react5.useRef)(currentPage);
+  const mobileTopbarVisibleRef = (0, import_react5.useRef)(mobileTopbarVisible);
   const pinchRef = (0, import_react5.useRef)({
     active: false,
     startDistance: 0,
@@ -2145,6 +2194,7 @@ var Viewer = ({ engine, style }) => {
   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 toolDockPosition = isCompact ? "bottom-4" : "bottom-8";
   const colorPalette = [
@@ -2157,6 +2207,13 @@ var Viewer = ({ engine, style }) => {
     "#8b5cf6",
     "#111827"
   ];
+  const setMobileTopbarVisibility = (visible) => {
+    if (mobileTopbarVisibleRef.current === visible) return;
+    mobileTopbarVisibleRef.current = visible;
+    setDocumentState({
+      mobileTopbarVisible: visible
+    });
+  };
   (0, import_react5.useEffect)(() => {
     if (!colorPickerOpen) return;
     const handleClick = (event) => {
@@ -2171,6 +2228,9 @@ var Viewer = ({ engine, style }) => {
   (0, import_react5.useEffect)(() => {
     if (!toolDockOpen && colorPickerOpen) setColorPickerOpen(false);
   }, [toolDockOpen, colorPickerOpen]);
+  (0, import_react5.useEffect)(() => {
+    mobileTopbarVisibleRef.current = mobileTopbarVisible;
+  }, [mobileTopbarVisible]);
   (0, import_react5.useEffect)(
     () => () => {
       if (pinchRef.current.rafId != null) {
@@ -2222,6 +2282,64 @@ var Viewer = ({ engine, style }) => {
       observer.disconnect();
     };
   }, []);
+  (0, import_react5.useEffect)(() => {
+    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]);
+  (0, import_react5.useEffect)(() => {
+    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]);
   (0, import_react5.useEffect)(() => {
     let active = true;
     if (!pageCount) return;