@papyrus-sdk/ui-react 0.2.11 → 0.2.14

package/dist/index.js

@@ -111,7 +111,6 @@ var Topbar = ({
     if (pageCount <= 0) return;
     const nextPage = Math.max(1, Math.min(pageCount, isNaN(page) ? 1 : page));
     engine.goToPage(nextPage);
-    setDocumentState({ currentPage: nextPage });
     triggerScrollToPage(nextPage - 1);
   };
   const handleFileUpload = async (event) => {
@@ -153,7 +152,7 @@ var Topbar = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            className: `absolute inset-x-0 bottom-0 rounded-t-2xl border-x border-t p-4 pb-6 shadow-2xl ${isDark ? "bg-[#181a1f] border-[#343a46] text-[#e6e9ef]" : "bg-white border-gray-200 text-gray-900"}`,
+            className: `absolute inset-x-0 bottom-0 rounded-t-2xl border-x border-t p-4 pb-6 shadow-2xl ${isDark ? "bg-[#1a1a1a] border-[#333] text-white" : "bg-white border-gray-200 text-gray-900"}`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto mb-4 h-1.5 w-10 rounded-full bg-gray-400/60" }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
@@ -167,7 +166,7 @@ var Topbar = ({
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   "button",
                   {
-                    className: `p-2 rounded-md ${isDark ? "text-[#d9deea] hover:bg-white/10" : "text-gray-700 hover:bg-gray-100"}`,
+                    className: `p-2 rounded-md ${isDark ? "text-gray-200 hover:bg-white/10" : "text-gray-700 hover:bg-gray-100"}`,
                     onClick: () => setShowMobileMenu(false),
                     "aria-label": "Fechar menu",
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -195,12 +194,12 @@ var Topbar = ({
                 showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "div",
                   {
-                    className: `rounded-xl border p-3 ${isDark ? "bg-[#20242d] border-[#3a4252] text-[#e6e9ef]" : "bg-gray-50 border-gray-200"}`,
+                    className: `rounded-xl border p-3 ${isDark ? "bg-[#2a2a2a] border-[#444] text-gray-100" : "bg-gray-50 border-gray-200"}`,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "div",
                         {
-                          className: `mb-2 text-xs ${isDark ? "text-[#b7c0d2]" : "text-gray-600"}`,
+                          className: `mb-2 text-xs ${isDark ? "text-gray-300" : "text-gray-600"}`,
                           children: "Zoom"
                         }
                       ),
@@ -234,7 +233,7 @@ var Topbar = ({
                         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                           "span",
                           {
-                            className: `text-sm font-semibold ${isDark ? "text-[#e6e9ef]" : "text-gray-800"}`,
+                            className: `text-sm font-semibold ${isDark ? "text-gray-100" : "text-gray-800"}`,
                             children: [
                               Math.round(zoom * 100),
                               "%"
@@ -274,12 +273,12 @@ var Topbar = ({
                 showPageThemeSelector && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "div",
                   {
-                    className: `rounded-xl border p-3 ${isDark ? "bg-[#20242d] border-[#3a4252] text-[#e6e9ef]" : "bg-gray-50 border-gray-200"}`,
+                    className: `rounded-xl border p-3 ${isDark ? "bg-[#2a2a2a] border-[#444] text-gray-100" : "bg-gray-50 border-gray-200"}`,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "div",
                         {
-                          className: `mb-2 text-xs ${isDark ? "text-[#b7c0d2]" : "text-gray-600"}`,
+                          className: `mb-2 text-xs ${isDark ? "text-gray-300" : "text-gray-600"}`,
                           children: "Tema da p\xE1gina"
                         }
                       ),
@@ -289,7 +288,7 @@ var Topbar = ({
                           onClick: () => {
                             setDocumentState({ pageTheme: theme.id });
                           },
-                          className: `rounded-lg border px-2 py-2 text-xs font-semibold ${pageTheme === theme.id ? "text-white" : isDark ? "text-[#dbe1ed] border-[#49556a]" : "text-gray-700 border-gray-300"}`,
+                          className: `rounded-lg border px-2 py-2 text-xs font-semibold ${pageTheme === theme.id ? "text-white" : isDark ? "text-gray-300 border-[#444]" : "text-gray-700 border-gray-300"}`,
                           style: pageTheme === theme.id ? {
                             backgroundColor: accentColor,
                             borderColor: accentColor
@@ -307,7 +306,7 @@ var Topbar = ({
                     onClick: () => {
                       setDocumentState({ uiTheme: isDark ? "light" : "dark" });
                     },
-                    className: `w-full rounded-xl border px-3 py-3 text-left text-sm font-medium flex items-center gap-2 ${isDark ? "bg-[#20242d] border-[#3a4252] text-[#e6e9ef]" : "bg-gray-50 border-gray-200 text-gray-800"}`,
+                    className: `w-full rounded-xl border px-3 py-3 text-left text-sm font-medium flex items-center gap-2 ${isDark ? "bg-[#2a2a2a] border-[#444] text-gray-100" : "bg-gray-50 border-gray-200 text-gray-800"}`,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "svg",
@@ -452,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
             }
@@ -1045,7 +1044,6 @@ var SidebarLeft = ({ engine }) => {
             active: currentPage === idx + 1,
             onClick: () => {
               engine.goToPage(idx + 1);
-              setDocumentState({ currentPage: idx + 1 });
               triggerScrollToPage(idx);
             }
           },
@@ -1368,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);
@@ -1402,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),
@@ -1478,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) {
@@ -1501,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;
@@ -1536,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";
@@ -1551,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") {
@@ -1642,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);
@@ -1753,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,
@@ -1764,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"
           }
         ),
@@ -1773,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)(
@@ -1964,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"
+          }
+        )
       }
     );
   };
@@ -2007,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"
+                  }
+                )
+              }
+            )
           }
         )
       ]