@papyrus-sdk/ui-react 0.2.16 → 0.2.18

package/base.css

@@ -54,6 +54,33 @@
   font-size: 14px;
 }
 
+/* Fallback responsive display helpers for hosts that don't emit dependency Tailwind utilities. */
+.papyrus-topbar .hidden {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .papyrus-topbar .sm\:inline {
+    display: inline !important;
+  }
+
+  .papyrus-topbar .sm\:inline-flex {
+    display: inline-flex !important;
+  }
+
+  .papyrus-topbar .sm\:block {
+    display: block !important;
+  }
+
+  .papyrus-topbar .sm\:flex {
+    display: flex !important;
+  }
+
+  .papyrus-topbar .sm\:hidden {
+    display: none !important;
+  }
+}
+
 @media (max-width: 720px) {
   .papyrus-topbar {
     flex-wrap: wrap;

package/dist/index.js

@@ -1366,6 +1366,7 @@ var import_react4 = require("react");
 var import_core4 = require("@papyrus-sdk/core");
 var import_types = require("@papyrus-sdk/types");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var SCALE_PRECISION = 1e3;
 var PageRenderer = ({
   engine,
   pageIndex,
@@ -1437,21 +1438,22 @@ var PageRenderer = ({
     if (!availableWidth || !pageSize?.width) return 1;
     const targetWidth = Math.max(0, availableWidth - 48);
     if (!targetWidth) return 1;
-    return Math.min(1, targetWidth / pageSize.width);
+    const rawScale = Math.min(1, targetWidth / pageSize.width);
+    return Math.round(rawScale * SCALE_PRECISION) / SCALE_PRECISION;
   }, [availableWidth, pageSize]);
   const displaySize = (0, import_react4.useMemo)(() => {
     if (!pageSize) return null;
     const scale = zoom * fitScale;
     return {
-      width: pageSize.width * scale,
-      height: pageSize.height * scale
+      width: Math.max(1, Math.round(pageSize.width * scale)),
+      height: Math.max(1, Math.round(pageSize.height * scale))
     };
   }, [pageSize, zoom, fitScale]);
   (0, import_react4.useEffect)(() => {
     if (!displaySize || !onMeasuredSize) return;
     onMeasuredSize(pageIndex, {
-      width: Math.round(displaySize.width),
-      height: Math.round(displaySize.height)
+      width: displaySize.width,
+      height: displaySize.height
     });
   }, [displaySize, onMeasuredSize, pageIndex]);
   (0, import_react4.useEffect)(() => {
@@ -2102,6 +2104,8 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var BASE_OVERSCAN = 6;
 var MIN_ZOOM = 0.2;
 var MAX_ZOOM = 5;
+var WIDTH_SNAP_PX = 4;
+var WIDTH_HYSTERESIS_PX = 6;
 var Viewer = ({ engine }) => {
   const {
     pageCount,
@@ -2172,26 +2176,47 @@ var Viewer = ({ engine }) => {
     []
   );
   (0, import_react5.useEffect)(() => {
-    const element = viewerRef.current;
-    if (!element) return;
+    const viewerElement = viewerRef.current;
+    if (!viewerElement) return;
+    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 rawWidth = element.getBoundingClientRect?.().width ?? element.offsetWidth;
-      const nextWidth = Math.round(rawWidth);
+      const rawWidth = measurementTarget.getBoundingClientRect?.().width ?? measurementTarget.clientWidth ?? measurementTarget.offsetWidth;
+      const nextWidth = normalizeWidth(rawWidth);
       if (nextWidth <= 0) return;
       const previousWidth = lastWidthRef.current;
-      if (previousWidth != null && Math.abs(nextWidth - previousWidth) < 2)
+      if (previousWidth != null && Math.abs(nextWidth - previousWidth) < WIDTH_HYSTERESIS_PX)
         return;
       lastWidthRef.current = nextWidth;
       setAvailableWidth(nextWidth);
     };
-    updateWidth();
+    const scheduleWidthUpdate = () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        updateWidth();
+      });
+    };
+    scheduleWidthUpdate();
     if (typeof ResizeObserver === "undefined") {
-      window.addEventListener("resize", updateWidth);
-      return () => window.removeEventListener("resize", updateWidth);
+      window.addEventListener("resize", scheduleWidthUpdate);
+      window.visualViewport?.addEventListener("resize", scheduleWidthUpdate);
+      return () => {
+        if (rafId != null) cancelAnimationFrame(rafId);
+        window.removeEventListener("resize", scheduleWidthUpdate);
+        window.visualViewport?.removeEventListener(
+          "resize",
+          scheduleWidthUpdate
+        );
+      };
     }
-    const observer = new ResizeObserver(() => updateWidth());
-    observer.observe(element);
-    return () => observer.disconnect();
+    const observer = new ResizeObserver(() => scheduleWidthUpdate());
+    observer.observe(measurementTarget);
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
   }, []);
   (0, import_react5.useEffect)(() => {
     let active = true;