@papyrus-sdk/ui-react 0.2.18 → 0.2.20

package/base.css

@@ -1,45 +1,86 @@
 .papyrus-theme {
-  --papyrus-bg: #f3f4f6;
-  --papyrus-surface: #ffffff;
-  --papyrus-surface-2: #f9fafb;
-  --papyrus-border: #e5e7eb;
-  --papyrus-border-strong: #d1d5db;
-  --papyrus-text: #111827;
-  --papyrus-text-muted: #6b7280;
-  --papyrus-icon: #6b7280;
-  --papyrus-focus: #93c5fd;
-  --papyrus-canvas: #f3f4f6;
-  --papyrus-hover: #e5e7eb;
-  --papyrus-popover: #ffffff;
-  --papyrus-shadow: rgba(15, 23, 42, 0.08);
-  --papyrus-selection-bg: rgba(30, 64, 175, 0.5);
-  color: var(--papyrus-text);
+  --papyrus-bg-fallback: #f3f4f6;
+  --papyrus-surface-fallback: #ffffff;
+  --papyrus-surface-2-fallback: #f9fafb;
+  --papyrus-border-fallback: #e5e7eb;
+  --papyrus-border-strong-fallback: #d1d5db;
+  --papyrus-text-fallback: #111827;
+  --papyrus-text-muted-fallback: #6b7280;
+  --papyrus-icon-fallback: #6b7280;
+  --papyrus-focus-fallback: #93c5fd;
+  --papyrus-canvas-fallback: #f3f4f6;
+  --papyrus-hover-fallback: #e5e7eb;
+  --papyrus-popover-fallback: #ffffff;
+  --papyrus-shadow-fallback: rgba(15, 23, 42, 0.08);
+  --papyrus-selection-bg-fallback: rgba(30, 64, 175, 0.5);
+  --papyrus-bg-resolved: var(--papyrus-bg, var(--papyrus-bg-fallback));
+  --papyrus-surface-resolved: var(
+    --papyrus-surface,
+    var(--papyrus-surface-fallback)
+  );
+  --papyrus-surface-2-resolved: var(
+    --papyrus-surface-2,
+    var(--papyrus-surface-2-fallback)
+  );
+  --papyrus-border-resolved: var(
+    --papyrus-border,
+    var(--papyrus-border-fallback)
+  );
+  --papyrus-border-strong-resolved: var(
+    --papyrus-border-strong,
+    var(--papyrus-border-strong-fallback)
+  );
+  --papyrus-text-resolved: var(--papyrus-text, var(--papyrus-text-fallback));
+  --papyrus-text-muted-resolved: var(
+    --papyrus-text-muted,
+    var(--papyrus-text-muted-fallback)
+  );
+  --papyrus-icon-resolved: var(--papyrus-icon, var(--papyrus-icon-fallback));
+  --papyrus-focus-resolved: var(--papyrus-focus, var(--papyrus-focus-fallback));
+  --papyrus-canvas-resolved: var(
+    --papyrus-canvas,
+    var(--papyrus-canvas-fallback)
+  );
+  --papyrus-hover-resolved: var(--papyrus-hover, var(--papyrus-hover-fallback));
+  --papyrus-popover-resolved: var(
+    --papyrus-popover,
+    var(--papyrus-popover-fallback)
+  );
+  --papyrus-shadow-resolved: var(
+    --papyrus-shadow,
+    var(--papyrus-shadow-fallback)
+  );
+  --papyrus-selection-bg-resolved: var(
+    --papyrus-selection-bg,
+    var(--papyrus-selection-bg-fallback)
+  );
+  color: var(--papyrus-text-resolved);
   font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
 .papyrus-theme[data-papyrus-theme="dark"] {
-  --papyrus-bg: #0f1115;
-  --papyrus-surface: #1a1a1a;
-  --papyrus-surface-2: #222222;
-  --papyrus-border: #333333;
-  --papyrus-border-strong: #444444;
-  --papyrus-text: #f3f4f6;
-  --papyrus-text-muted: #9ca3af;
-  --papyrus-icon: #9ca3af;
-  --papyrus-focus: #2563eb;
-  --papyrus-canvas: #121212;
-  --papyrus-hover: rgba(255, 255, 255, 0.08);
-  --papyrus-popover: #1f1f1f;
-  --papyrus-shadow: rgba(0, 0, 0, 0.4);
-  --papyrus-selection-bg: rgba(96, 165, 250, 0.5);
+  --papyrus-bg-fallback: #0f1115;
+  --papyrus-surface-fallback: #1a1a1a;
+  --papyrus-surface-2-fallback: #222222;
+  --papyrus-border-fallback: #333333;
+  --papyrus-border-strong-fallback: #444444;
+  --papyrus-text-fallback: #f3f4f6;
+  --papyrus-text-muted-fallback: #9ca3af;
+  --papyrus-icon-fallback: #9ca3af;
+  --papyrus-focus-fallback: #2563eb;
+  --papyrus-canvas-fallback: #121212;
+  --papyrus-hover-fallback: rgba(255, 255, 255, 0.08);
+  --papyrus-popover-fallback: #1f1f1f;
+  --papyrus-shadow-fallback: rgba(0, 0, 0, 0.4);
+  --papyrus-selection-bg-fallback: rgba(96, 165, 250, 0.5);
 }
 
 .papyrus-topbar,
 .papyrus-sidebar-left,
 .papyrus-sidebar-right {
-  background: var(--papyrus-surface) !important;
-  border-color: var(--papyrus-border) !important;
-  color: var(--papyrus-text) !important;
+  background: var(--papyrus-surface-resolved) !important;
+  border-color: var(--papyrus-border-resolved) !important;
+  color: var(--papyrus-text-resolved) !important;
   box-sizing: border-box;
   font-size: 13px;
   line-height: 1.4;
@@ -99,33 +140,33 @@
 }
 
 .papyrus-viewer {
-  background: var(--papyrus-canvas) !important;
+  background: var(--papyrus-canvas-resolved) !important;
   box-sizing: border-box;
   flex: 1 1 auto;
   overflow-x: hidden;
   overflow-y: scroll;
   scrollbar-gutter: stable;
-  color: var(--papyrus-text);
+  color: var(--papyrus-text-resolved);
 }
 
 .papyrus-control,
 .papyrus-input,
 .papyrus-popover {
-  background: var(--papyrus-surface-2) !important;
-  border-color: var(--papyrus-border) !important;
-  color: var(--papyrus-text) !important;
+  background: var(--papyrus-surface-2-resolved) !important;
+  border-color: var(--papyrus-border-resolved) !important;
+  color: var(--papyrus-text-resolved) !important;
 }
 
 .papyrus-popover {
-  background: var(--papyrus-popover) !important;
-  box-shadow: 0 20px 40px var(--papyrus-shadow);
+  background: var(--papyrus-popover-resolved) !important;
+  box-shadow: 0 20px 40px var(--papyrus-shadow-resolved);
 }
 
 .papyrus-topbar button,
 .papyrus-sidebar-left button,
 .papyrus-sidebar-right button {
-  background: var(--papyrus-surface-2);
-  border: 1px solid var(--papyrus-border);
+  background: var(--papyrus-surface-2-resolved);
+  border: 1px solid var(--papyrus-border-resolved);
   border-radius: 8px;
   color: inherit;
   cursor: pointer;
@@ -146,11 +187,11 @@
 .papyrus-topbar select,
 .papyrus-sidebar-left select,
 .papyrus-sidebar-right select {
-  background: var(--papyrus-surface);
-  border: 1px solid var(--papyrus-border);
+  background: var(--papyrus-surface-resolved);
+  border: 1px solid var(--papyrus-border-resolved);
   border-radius: 6px;
   box-sizing: border-box;
-  color: var(--papyrus-text);
+  color: var(--papyrus-text-resolved);
   font: inherit;
   padding: 6px 8px;
 }
@@ -158,8 +199,8 @@
 .papyrus-topbar button:hover,
 .papyrus-sidebar-left button:hover,
 .papyrus-sidebar-right button:hover {
-  background: var(--papyrus-hover);
-  border-color: var(--papyrus-border-strong);
+  background: var(--papyrus-hover-resolved);
+  border-color: var(--papyrus-border-strong-resolved);
 }
 
 .papyrus-topbar svg,
@@ -174,7 +215,7 @@
 .papyrus-topbar select:focus,
 .papyrus-sidebar-left select:focus,
 .papyrus-sidebar-right select:focus {
-  outline: 2px solid var(--papyrus-focus);
+  outline: 2px solid var(--papyrus-focus-resolved);
   outline-offset: 1px;
 }
 
@@ -190,7 +231,7 @@
 }
 
 .papyrus-viewer .textLayer ::selection {
-  background: var(--papyrus-selection-bg);
+  background: var(--papyrus-selection-bg-resolved);
 }
 
 .papyrus-viewer .textLayer {

package/dist/index.d.mts

@@ -6,6 +6,7 @@ interface TopbarProps {
     showBrand?: boolean;
     brand?: React.ReactNode;
     title?: React.ReactNode;
+    style?: React.CSSProperties;
     showSidebarLeftToggle?: boolean;
     showPageControls?: boolean;
     showZoomControls?: boolean;
@@ -18,16 +19,19 @@ declare const Topbar: React.FC<TopbarProps>;
 
 interface SidebarLeftProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarLeft: React.FC<SidebarLeftProps>;
 
 interface SidebarRightProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarRight: React.FC<SidebarRightProps>;
 
 interface ViewerProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const Viewer: React.FC<ViewerProps>;
 

package/dist/index.d.ts

@@ -6,6 +6,7 @@ interface TopbarProps {
     showBrand?: boolean;
     brand?: React.ReactNode;
     title?: React.ReactNode;
+    style?: React.CSSProperties;
     showSidebarLeftToggle?: boolean;
     showPageControls?: boolean;
     showZoomControls?: boolean;
@@ -18,16 +19,19 @@ declare const Topbar: React.FC<TopbarProps>;
 
 interface SidebarLeftProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarLeft: React.FC<SidebarLeftProps>;
 
 interface SidebarRightProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const SidebarRight: React.FC<SidebarRightProps>;
 
 interface ViewerProps {
     engine: DocumentEngine;
+    style?: React.CSSProperties;
 }
 declare const Viewer: React.FC<ViewerProps>;
 

package/dist/index.js

@@ -37,6 +37,7 @@ var Topbar = ({
   showBrand = false,
   brand,
   title,
+  style,
   showSidebarLeftToggle = true,
   showPageControls = true,
   showZoomControls = true,
@@ -45,6 +46,7 @@ var Topbar = ({
   showUpload = true,
   showSearch = true
 }) => {
+  const viewerState = (0, import_core.useViewerStore)();
   const {
     currentPage,
     pageCount,
@@ -57,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";
@@ -80,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;
@@ -93,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));
@@ -383,6 +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: 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)(
@@ -915,7 +956,7 @@ var OutlineNode = ({ item, engine, isDark, accentColor, depth = 0 }) => {
     )) })
   ] });
 };
-var SidebarLeft = ({ engine }) => {
+var SidebarLeft = ({ engine, style }) => {
   const {
     pageCount,
     currentPage,
@@ -937,6 +978,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__ */ (0, import_jsx_runtime2.jsxs)(
           "div",
@@ -1077,7 +1119,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,
@@ -1114,6 +1156,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__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
@@ -2106,7 +2149,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 = (0, import_core5.useViewerStore)();
   const {
     pageCount,
     currentPage,
@@ -2119,7 +2166,8 @@ var Viewer = ({ engine }) => {
     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);
@@ -2129,6 +2177,11 @@ var Viewer = ({ engine }) => {
   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,
@@ -2141,6 +2194,7 @@ var Viewer = ({ engine }) => {
   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 = [
@@ -2153,6 +2207,13 @@ var Viewer = ({ engine }) => {
     "#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) => {
@@ -2167,6 +2228,9 @@ var Viewer = ({ engine }) => {
   (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) {
@@ -2218,6 +2282,64 @@ var Viewer = ({ engine }) => {
       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;
@@ -2449,6 +2571,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__ */ (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",