@papyrus-sdk/ui-react 0.2.12 → 0.2.14

package/dist/index.js

@@ -451,7 +451,7 @@ var Topbar = ({
           title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "span",
             {
-              className: `text-sm font-semibold truncate min-w-0 max-w-[35vw] sm:max-w-[260px] ${isDark ? "text-gray-200" : "text-gray-700"}`,
+              className: `hidden sm:inline text-sm font-semibold truncate min-w-0 max-w-[35vw] sm:max-w-[260px] ${isDark ? "text-gray-200" : "text-gray-700"}`,
               title: typeof title === "string" ? title : void 0,
               children: title
             }
@@ -1366,7 +1366,12 @@ 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 PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
+var PageRenderer = ({
+  engine,
+  pageIndex,
+  availableWidth,
+  onMeasuredSize
+}) => {
   const containerRef = (0, import_react4.useRef)(null);
   const canvasRef = (0, import_react4.useRef)(null);
   const htmlLayerRef = (0, import_react4.useRef)(null);
@@ -1400,7 +1405,12 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
   } = (0, import_core4.useViewerStore)();
   const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
   const isElementRender = renderTargetType === "element";
-  const textMarkupTools = /* @__PURE__ */ new Set(["highlight", "underline", "squiggly", "strikeout"]);
+  const textMarkupTools = /* @__PURE__ */ new Set([
+    "highlight",
+    "underline",
+    "squiggly",
+    "strikeout"
+  ]);
   const canSelectText = activeTool === "select" || textMarkupTools.has(activeTool);
   const hasSearchHits = (0, import_react4.useMemo)(
     () => Boolean(searchQuery?.trim()) && searchResults.some((res) => res.pageIndex === pageIndex),
@@ -1476,7 +1486,11 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
         if (!active || !textLayerRef.current) return;
         if (!isElementRender) {
           textLayerRef.current.innerHTML = "";
-          await engine.renderTextLayer(pageIndex, textLayerRef.current, textRenderScale);
+          await engine.renderTextLayer(
+            pageIndex,
+            textLayerRef.current,
+            textRenderScale
+          );
         }
         if (!active || !textLayerRef.current) return;
         if (!isElementRender && displaySize) {
@@ -1499,13 +1513,24 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
     return () => {
       active = false;
     };
-  }, [engine, pageIndex, zoom, rotation, isElementRender, fitScale, displaySize, pageSize]);
+  }, [
+    engine,
+    pageIndex,
+    zoom,
+    rotation,
+    isElementRender,
+    fitScale,
+    displaySize,
+    pageSize
+  ]);
   (0, import_react4.useEffect)(() => {
     if (isElementRender) return;
     const layer = textLayerRef.current;
     if (!layer) return;
     const query = searchQuery?.trim().toLowerCase();
-    const existingMarks = Array.from(layer.querySelectorAll("mark.papyrus-search-hit"));
+    const existingMarks = Array.from(
+      layer.querySelectorAll("mark.papyrus-search-hit")
+    );
     existingMarks.forEach((mark) => {
       const parent = mark.parentNode;
       if (!parent) return;
@@ -1534,7 +1559,9 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
       let index = lower.indexOf(query, cursor);
       while (index !== -1) {
         if (index > cursor) {
-          fragment.appendChild(document.createTextNode(text.slice(cursor, index)));
+          fragment.appendChild(
+            document.createTextNode(text.slice(cursor, index))
+          );
         }
         const mark = document.createElement("mark");
         mark.className = "papyrus-search-hit";
@@ -1549,7 +1576,14 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
       const parent = textNode.parentNode;
       if (parent) parent.replaceChild(fragment, textNode);
     });
-  }, [searchQuery, hasSearchHits, pageIndex, isElementRender, activeSearchIndex, textLayerVersion]);
+  }, [
+    searchQuery,
+    hasSearchHits,
+    pageIndex,
+    isElementRender,
+    activeSearchIndex,
+    textLayerVersion
+  ]);
   const handleMouseDown = (e) => {
     setSelectionMenu(null);
     if (activeTool === "ink") {
@@ -1640,25 +1674,41 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
           };
         });
         const uniqueRects = rects.filter((rect, index, list) => {
-          const key = `${Math.round(rect.x * 1e4)}-${Math.round(rect.y * 1e4)}-${Math.round(rect.width * 1e4)}-${Math.round(rect.height * 1e4)}`;
-          return list.findIndex((r) => `${Math.round(r.x * 1e4)}-${Math.round(r.y * 1e4)}-${Math.round(r.width * 1e4)}-${Math.round(r.height * 1e4)}` === key) === index;
+          const key = `${Math.round(rect.x * 1e4)}-${Math.round(
+            rect.y * 1e4
+          )}-${Math.round(rect.width * 1e4)}-${Math.round(
+            rect.height * 1e4
+          )}`;
+          return list.findIndex(
+            (r) => `${Math.round(r.x * 1e4)}-${Math.round(
+              r.y * 1e4
+            )}-${Math.round(r.width * 1e4)}-${Math.round(
+              r.height * 1e4
+            )}` === key
+          ) === index;
         });
-        const mergedRects = uniqueRects.reduce((acc, rect) => {
-          const target = acc.find((r) => {
-            const closeY = Math.abs(r.y - rect.y) < 2e-3 && Math.abs(r.height - rect.height) < 2e-3;
-            const overlaps = rect.x <= r.x + r.width + 2e-3 && rect.x + rect.width >= r.x - 2e-3;
-            return closeY && overlaps;
-          });
-          if (!target) {
-            acc.push({ ...rect });
+        const mergedRects = uniqueRects.reduce(
+          (acc, rect) => {
+            const target = acc.find((r) => {
+              const closeY = Math.abs(r.y - rect.y) < 2e-3 && Math.abs(r.height - rect.height) < 2e-3;
+              const overlaps = rect.x <= r.x + r.width + 2e-3 && rect.x + rect.width >= r.x - 2e-3;
+              return closeY && overlaps;
+            });
+            if (!target) {
+              acc.push({ ...rect });
+              return acc;
+            }
+            const left = Math.min(target.x, rect.x);
+            const right = Math.max(
+              target.x + target.width,
+              rect.x + rect.width
+            );
+            target.x = left;
+            target.width = right - left;
             return acc;
-          }
-          const left = Math.min(target.x, rect.x);
-          const right = Math.max(target.x + target.width, rect.x + rect.width);
-          target.x = left;
-          target.width = right - left;
-          return acc;
-        }, []);
+          },
+          []
+        );
         if (mergedRects.length) {
           const xs = mergedRects.map((r) => r.x);
           const ys = mergedRects.map((r) => r.y);
@@ -1751,7 +1801,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
     "div",
     {
       ref: containerRef,
-      className: `relative inline-block shadow-2xl bg-white mb-10 transition-all ${canSelectText ? "" : "no-select cursor-crosshair"}`,
+      className: `relative inline-block shadow-2xl bg-white mb-10 ${canSelectText ? "" : "no-select cursor-crosshair"}`,
       style: { scrollMarginTop: "20px", minHeight: "100px" },
       onMouseDown: handleMouseDown,
       onMouseMove: handleMouseMove,
@@ -1762,7 +1812,10 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
           "canvas",
           {
             ref: canvasRef,
-            style: { filter: getPageFilter(), display: isElementRender ? "none" : "block" },
+            style: {
+              filter: getPageFilter(),
+              display: isElementRender ? "none" : "block"
+            },
             className: "block"
           }
         ),
@@ -1771,7 +1824,10 @@ var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
           {
             ref: htmlLayerRef,
             className: "block",
-            style: { filter: getPageFilter(), display: isElementRender ? "block" : "none" }
+            style: {
+              filter: getPageFilter(),
+              display: isElementRender ? "block" : "none"
+            }
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1962,7 +2018,17 @@ var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
         className: "absolute inset-0",
         viewBox: `${ann.rect.x} ${ann.rect.y} ${ann.rect.width} ${ann.rect.height}`,
         preserveAspectRatio: "none",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "none", stroke: ann.color, strokeWidth: 8e-3, strokeLinecap: "round", strokeLinejoin: "round" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: ann.color,
+            strokeWidth: 8e-3,
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
       }
     );
   };
@@ -2005,7 +2071,24 @@ var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
               onDelete();
             },
             className: "absolute -top-3 -right-3 bg-red-500 text-white rounded-full p-1 shadow-lg hover:bg-red-600",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "svg",
+              {
+                className: "w-3 h-3",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 3,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                )
+              }
+            )
           }
         )
       ]