@papyrus-sdk/ui-react 0.2.21 → 0.2.22

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Papyrus Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/base.css

@@ -100,7 +100,7 @@
   display: none;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 640px) and (min-height: 501px) {
   .papyrus-topbar .sm\:inline {
     display: inline !important;
   }
@@ -122,7 +122,7 @@
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
   .papyrus-topbar {
     flex-wrap: wrap;
     height: auto;

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,
@@ -86,7 +88,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") {
@@ -1797,8 +1799,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 +1818,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 +1828,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 +1854,7 @@ var PageRenderer = ({
       h: Math.abs(currentY - startPos.y)
     });
   };
-  const handleMouseUp = (e) => {
+  const handlePointerUp = () => {
     if (isInkDrawing) {
       setIsInkDrawing(false);
       if (inkPoints.length > 1) {
@@ -2013,6 +2019,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":
@@ -2030,10 +2067,18 @@ var PageRenderer = ({
     {
       ref: containerRef,
       className: `relative inline-block shadow-2xl bg-white mb-10 ${canSelectText ? "" : "no-select cursor-crosshair"}`,
-      style: { scrollMarginTop: "20px", minHeight: "100px" },
+      style: {
+        scrollMarginTop: "20px",
+        minHeight: "100px",
+        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)(
@@ -2509,9 +2554,12 @@ 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 {
@@ -2537,6 +2585,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,11 +2599,14 @@ var Viewer = ({ engine, style }) => {
     rafId: null
   });
   const [availableWidth, setAvailableWidth] = (0, import_react5.useState)(null);
+  const [availableHeight, setAvailableHeight] = (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 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 = isCompact ? "py-10" : "py-16";
   const toolDockPosition = isCompact ? "bottom-4" : "bottom-8";
   const colorPalette = [
@@ -2605,21 +2657,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();