@papyrus-sdk/ui-react 0.2.19 → 0.2.21

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // components/Topbar.tsx
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useViewerStore } from "@papyrus-sdk/core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -17,6 +17,7 @@ var Topbar = ({
   showUpload = true,
   showSearch = true
 }) => {
+  const viewerState = useViewerStore();
   const {
     currentPage,
     pageCount,
@@ -29,13 +30,15 @@ var Topbar = ({
     toggleSidebarLeft,
     toggleSidebarRight,
     triggerScrollToPage
-  } = useViewerStore();
+  } = viewerState;
+  const mobileTopbarVisible = viewerState.mobileTopbarVisible ?? true;
   const fileInputRef = useRef(null);
   const zoomTimerRef = useRef(null);
   const pendingZoomRef = useRef(null);
   const [pageInput, setPageInput] = useState(currentPage.toString());
   const [showPageThemes, setShowPageThemes] = useState(false);
   const [showMobileMenu, setShowMobileMenu] = useState(false);
+  const [isMobileViewport, setIsMobileViewport] = useState(false);
   const pageDigits = Math.max(2, String(pageCount || 1).length);
   const isDark = uiTheme === "dark";
   const canUseDOM = typeof document !== "undefined";
@@ -52,6 +55,18 @@ var Topbar = ({
   useEffect(() => {
     if (!hasMobileMenu) setShowMobileMenu(false);
   }, [hasMobileMenu]);
+  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]);
   useEffect(() => {
     if (!showMobileMenu || !canUseDOM) return;
     const previousOverflow = document.body.style.overflow;
@@ -65,6 +80,30 @@ var Topbar = ({
       window.removeEventListener("keydown", handleKeyDown);
     };
   }, [showMobileMenu, canUseDOM]);
+  const topbarStyle = 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));
@@ -355,7 +394,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,
+      style: topbarStyle,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 z-10", children: [
           showSidebarLeftToggle && /* @__PURE__ */ jsx(
@@ -1063,10 +1102,15 @@ var SidebarRight = ({ engine, style }) => {
     setDocumentState,
     triggerScrollToPage,
     annotations,
-    accentColor
+    accentColor,
+    updateAnnotation,
+    addAnnotationReply,
+    setSelectedAnnotation
   } = useViewerStore3();
   const [query, setQuery] = useState3("");
   const [isSearching, setIsSearching] = useState3(false);
+  const [contentDrafts, setContentDrafts] = useState3({});
+  const [replyDrafts, setReplyDrafts] = useState3({});
   const searchService = new SearchService(engine);
   const isDark = uiTheme === "dark";
   const accentSoft = withAlpha2(accentColor, 0.12);
@@ -1082,6 +1126,41 @@ var SidebarRight = ({ engine, style }) => {
     setSearch(query, results);
     setIsSearching(false);
   };
+  const jumpToAnnotation = (annotation) => {
+    const page = annotation.pageIndex + 1;
+    engine.goToPage(page);
+    setDocumentState({ currentPage: page });
+    setSelectedAnnotation(annotation.id);
+    triggerScrollToPage(annotation.pageIndex);
+  };
+  const getContentDraft = (annotation) => {
+    if (Object.prototype.hasOwnProperty.call(contentDrafts, annotation.id)) {
+      return contentDrafts[annotation.id];
+    }
+    return annotation.content ?? "";
+  };
+  const updateContentDraft = (annotationId, nextValue) => {
+    setContentDrafts((prev) => ({ ...prev, [annotationId]: nextValue }));
+  };
+  const submitContent = (annotation) => {
+    const nextContent = getContentDraft(annotation).trim();
+    const currentContent = (annotation.content ?? "").trim();
+    if (nextContent === currentContent) return;
+    updateAnnotation(annotation.id, {
+      content: nextContent,
+      updatedAt: Date.now()
+    });
+  };
+  const getReplyDraft = (annotationId) => replyDrafts[annotationId] ?? "";
+  const updateReplyDraft = (annotationId, nextValue) => {
+    setReplyDrafts((prev) => ({ ...prev, [annotationId]: nextValue }));
+  };
+  const submitReply = (annotationId) => {
+    const nextReply = getReplyDraft(annotationId).trim();
+    if (!nextReply) return;
+    addAnnotationReply(annotationId, nextReply);
+    setReplyDrafts((prev) => ({ ...prev, [annotationId]: "" }));
+  };
   if (!sidebarRightOpen) return null;
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -1283,48 +1362,152 @@ var SidebarRight = ({ engine, style }) => {
               }
             ) }),
             /* @__PURE__ */ jsx3("p", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest", children: "Sem anota\xE7\xF5es" })
-          ] }) : annotations.map((ann) => /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              className: `p-4 rounded-xl border group transition-all cursor-pointer ${isDark ? "bg-[#222] border-[#333] hover:border-[#444]" : "bg-white border-gray-100 shadow-sm hover:shadow-md"}`,
-              children: [
-                /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-3", children: [
-                  /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
+          ] }) : annotations.slice().sort(
+            (a, b) => (b.updatedAt ?? b.createdAt) - (a.updatedAt ?? a.createdAt)
+          ).map((ann) => {
+            const isCommentThread = ann.type === "comment" || ann.type === "text";
+            const replies = ann.replies ?? [];
+            const contentDraft = getContentDraft(ann);
+            const replyDraft = getReplyDraft(ann.id);
+            const hasExistingContent = Boolean((ann.content ?? "").trim());
+            return /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: "rounded-xl border p-4 transition-colors",
+                style: {
+                  background: "var(--papyrus-surface-2-resolved, var(--papyrus-surface-2, #1f2937))",
+                  borderColor: "var(--papyrus-border-resolved, var(--papyrus-border, #374151))",
+                  color: "var(--papyrus-text-resolved, var(--papyrus-text, #e5e7eb))"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsxs3("div", { className: "flex items-center space-x-2", children: [
+                      /* @__PURE__ */ jsx3(
+                        "div",
+                        {
+                          className: "h-2.5 w-2.5 rounded-full",
+                          style: { backgroundColor: ann.color }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs3(
+                        "span",
+                        {
+                          className: "text-[10px] font-black uppercase tracking-wide",
+                          style: { color: accentColor },
+                          children: [
+                            "P",
+                            ann.pageIndex + 1
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3("span", { className: "text-[10px] font-semibold opacity-70 uppercase tracking-wide", children: ann.type })
+                    ] }),
                     /* @__PURE__ */ jsx3(
-                      "div",
+                      "button",
+                      {
+                        type: "button",
+                        className: "rounded-md border px-2 py-1 text-[10px] font-semibold uppercase tracking-wide",
+                        onClick: () => jumpToAnnotation(ann),
+                        style: {
+                          borderColor: accentColor,
+                          color: accentColor
+                        },
+                        children: "Ir para pagina"
+                      }
+                    )
+                  ] }),
+                  isCommentThread ? /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx3(
+                      "textarea",
                       {
-                        className: "w-2.5 h-2.5 rounded-full",
-                        style: { backgroundColor: ann.color }
+                        className: "w-full resize-none rounded-md border p-2 text-xs focus:outline-none",
+                        style: {
+                          background: "var(--papyrus-surface-resolved, var(--papyrus-surface, #111827))",
+                          borderColor: "var(--papyrus-border-resolved, var(--papyrus-border, #374151))",
+                          color: "var(--papyrus-text-resolved, var(--papyrus-text, #e5e7eb))"
+                        },
+                        rows: 3,
+                        placeholder: "Escreva seu comentario...",
+                        value: contentDraft,
+                        onChange: (event) => updateContentDraft(ann.id, event.target.value),
+                        onKeyDown: (event) => {
+                          if (event.key === "Enter" && !event.shiftKey) {
+                            event.preventDefault();
+                            submitContent(ann);
+                          }
+                        }
                       }
                     ),
-                    /* @__PURE__ */ jsxs3(
-                      "span",
+                    /* @__PURE__ */ jsx3("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx3(
+                      "button",
                       {
-                        className: "text-[10px] font-black",
-                        style: { color: accentColor },
-                        children: [
-                          "P",
-                          ann.pageIndex + 1
-                        ]
+                        type: "button",
+                        className: "rounded-md px-3 py-1.5 text-[11px] font-semibold text-white",
+                        style: { backgroundColor: accentColor },
+                        onClick: () => submitContent(ann),
+                        children: hasExistingContent ? "Atualizar comentario" : "Enviar comentario"
+                      }
+                    ) })
+                  ] }) : null,
+                  replies.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "mt-3 space-y-2", children: replies.map((reply) => /* @__PURE__ */ jsxs3(
+                    "div",
+                    {
+                      className: "rounded-md border p-2",
+                      style: {
+                        background: "var(--papyrus-surface-resolved, var(--papyrus-surface, #111827))",
+                        borderColor: "var(--papyrus-border-resolved, var(--papyrus-border, #374151))"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx3("p", { className: "text-xs leading-relaxed", children: reply.content }),
+                        /* @__PURE__ */ jsx3("p", { className: "mt-1 text-[10px] opacity-70", children: new Date(reply.createdAt).toLocaleTimeString(
+                          [],
+                          {
+                            hour: "2-digit",
+                            minute: "2-digit"
+                          }
+                        ) })
+                      ]
+                    },
+                    reply.id
+                  )) }) : null,
+                  isCommentThread ? /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx3(
+                      "input",
+                      {
+                        type: "text",
+                        className: "flex-1 rounded-md border px-2 py-1.5 text-xs focus:outline-none",
+                        style: {
+                          background: "var(--papyrus-surface-resolved, var(--papyrus-surface, #111827))",
+                          borderColor: "var(--papyrus-border-resolved, var(--papyrus-border, #374151))",
+                          color: "var(--papyrus-text-resolved, var(--papyrus-text, #e5e7eb))"
+                        },
+                        value: replyDraft,
+                        placeholder: "Responder...",
+                        onChange: (event) => updateReplyDraft(ann.id, event.target.value),
+                        onKeyDown: (event) => {
+                          if (event.key === "Enter") {
+                            event.preventDefault();
+                            submitReply(ann.id);
+                          }
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        className: "rounded-md px-3 py-1.5 text-[11px] font-semibold text-white",
+                        style: { backgroundColor: accentColor },
+                        onClick: () => submitReply(ann.id),
+                        children: "Responder"
                       }
                     )
-                  ] }),
-                  /* @__PURE__ */ jsx3("span", { className: "text-[9px] text-gray-400 font-bold", children: new Date(ann.createdAt).toLocaleTimeString([], {
-                    hour: "2-digit",
-                    minute: "2-digit"
-                  }) })
-                ] }),
-                /* @__PURE__ */ jsx3(
-                  "p",
-                  {
-                    className: `text-[11px] font-bold uppercase tracking-tight ${isDark ? "text-gray-200" : "text-gray-700"}`,
-                    children: ann.type
-                  }
-                )
-              ]
-            },
-            ann.id
-          ))
+                  ] }) : null
+                ]
+              },
+              ann.id
+            );
+          })
         ] }) })
       ]
     }
@@ -1333,11 +1516,11 @@ var SidebarRight = ({ engine, style }) => {
 var SidebarRight_default = SidebarRight;
 
 // components/Viewer.tsx
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
 import { useViewerStore as useViewerStore5 } from "@papyrus-sdk/core";
 
 // components/PageRenderer.tsx
-import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState4 } from "react";
 import { useViewerStore as useViewerStore4, papyrusEvents } from "@papyrus-sdk/core";
 import {
   PapyrusEventType
@@ -1354,6 +1537,10 @@ var PageRenderer = ({
   const canvasRef = useRef3(null);
   const htmlLayerRef = useRef3(null);
   const textLayerRef = useRef3(null);
+  const skipNextAnnotationSelectRef = useRef3(false);
+  const skipSelectResetTimerRef = useRef3(
+    null
+  );
   const [loading, setLoading] = useState4(true);
   const [pageSize, setPageSize] = useState4(null);
   const [isDragging, setIsDragging] = useState4(false);
@@ -1371,6 +1558,8 @@ var PageRenderer = ({
     setDocumentState,
     annotations,
     addAnnotation,
+    addAnnotationReply,
+    updateAnnotation,
     activeTool,
     removeAnnotation,
     selectedAnnotationId,
@@ -1390,10 +1579,28 @@ var PageRenderer = ({
     "strikeout"
   ]);
   const canSelectText = activeTool === "select" || textMarkupTools.has(activeTool);
-  const hasSearchHits = useMemo(
+  const hasSearchHits = useMemo2(
     () => Boolean(searchQuery?.trim()) && searchResults.some((res) => res.pageIndex === pageIndex),
     [searchQuery, searchResults, pageIndex]
   );
+  const suppressNextAnnotationSelect = () => {
+    skipNextAnnotationSelectRef.current = true;
+    if (skipSelectResetTimerRef.current) {
+      clearTimeout(skipSelectResetTimerRef.current);
+    }
+    skipSelectResetTimerRef.current = setTimeout(() => {
+      skipNextAnnotationSelectRef.current = false;
+      skipSelectResetTimerRef.current = null;
+    }, 0);
+  };
+  useEffect3(
+    () => () => {
+      if (skipSelectResetTimerRef.current) {
+        clearTimeout(skipSelectResetTimerRef.current);
+      }
+    },
+    []
+  );
   useEffect3(() => {
     let active = true;
     const loadSize = async () => {
@@ -1411,14 +1618,14 @@ var PageRenderer = ({
       active = false;
     };
   }, [engine, pageIndex]);
-  const fitScale = useMemo(() => {
+  const fitScale = useMemo2(() => {
     if (!availableWidth || !pageSize?.width) return 1;
     const targetWidth = Math.max(0, availableWidth - 48);
     if (!targetWidth) return 1;
     const rawScale = Math.min(1, targetWidth / pageSize.width);
     return Math.round(rawScale * SCALE_PRECISION) / SCALE_PRECISION;
   }, [availableWidth, pageSize]);
-  const displaySize = useMemo(() => {
+  const displaySize = useMemo2(() => {
     if (!pageSize) return null;
     const scale = zoom * fitScale;
     return {
@@ -1564,6 +1771,16 @@ var PageRenderer = ({
     textLayerVersion
   ]);
   const handleMouseDown = (e) => {
+    const target = e.target;
+    const clickedInsideAnnotation = Boolean(
+      target?.closest("[data-papyrus-annotation-id]")
+    );
+    const clickedSelectionMenu = Boolean(
+      target?.closest("[data-papyrus-selection-menu]")
+    );
+    if (!clickedInsideAnnotation && !clickedSelectionMenu) {
+      setSelectedAnnotation(null);
+    }
     setSelectionMenu(null);
     if (activeTool === "ink") {
       const rect2 = containerRef.current?.getBoundingClientRect();
@@ -1620,6 +1837,7 @@ var PageRenderer = ({
           x: Math.max(0, Math.min(1, p.x)),
           y: Math.max(0, Math.min(1, p.y))
         }));
+        suppressNextAnnotationSelect();
         addAnnotation({
           id: Math.random().toString(36).substr(2, 9),
           pageIndex,
@@ -1700,6 +1918,7 @@ var PageRenderer = ({
             height: Math.max(...ye) - Math.min(...ys)
           };
           if (textMarkupTools.has(activeTool)) {
+            suppressNextAnnotationSelect();
             addAnnotation({
               id: Math.random().toString(36).substr(2, 9),
               pageIndex,
@@ -1735,6 +1954,9 @@ var PageRenderer = ({
       if (currentRect.w > 5 && currentRect.h > 5) {
         const rect = containerRef.current?.getBoundingClientRect();
         if (rect) {
+          if (activeTool !== "text" && activeTool !== "comment") {
+            suppressNextAnnotationSelect();
+          }
           addAnnotation({
             id: Math.random().toString(36).substr(2, 9),
             pageIndex,
@@ -1858,6 +2080,7 @@ var PageRenderer = ({
         selectionMenu && /* @__PURE__ */ jsx4(
           "div",
           {
+            "data-papyrus-selection-menu": "true",
             className: "absolute z-[60] flex items-center gap-1 rounded-full border px-2 py-1 shadow-xl bg-white/95 backdrop-blur-md text-gray-700",
             style: { left: selectionMenu.anchor.x, top: selectionMenu.anchor.y },
             children: [
@@ -1870,6 +2093,7 @@ var PageRenderer = ({
               {
                 className: "text-[10px] font-bold px-2 py-1 rounded-full hover:bg-gray-100",
                 onClick: () => {
+                  suppressNextAnnotationSelect();
                   addAnnotation({
                     id: Math.random().toString(36).substr(2, 9),
                     pageIndex,
@@ -1896,7 +2120,15 @@ var PageRenderer = ({
             isSelected: selectedAnnotationId === ann.id,
             accentColor,
             onDelete: () => removeAnnotation(ann.id),
-            onSelect: () => setSelectedAnnotation(ann.id)
+            onSelect: () => {
+              if (skipNextAnnotationSelectRef.current) {
+                skipNextAnnotationSelectRef.current = false;
+                return;
+              }
+              setSelectedAnnotation(ann.id);
+            },
+            onUpdate: (updates) => updateAnnotation(ann.id, updates),
+            onAddReply: (content) => addAnnotationReply(ann.id, content)
           },
           ann.id
         )) })
@@ -1904,12 +2136,43 @@ var PageRenderer = ({
     }
   );
 };
-var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
+var AnnotationItem = ({
+  ann,
+  isSelected,
+  accentColor,
+  onDelete,
+  onSelect,
+  onUpdate,
+  onAddReply
+}) => {
   const isText = ann.type === "text" || ann.type === "comment";
   const isHighlight = ann.type === "highlight";
   const isMarkup = ann.type === "highlight" || ann.type === "underline" || ann.type === "squiggly" || ann.type === "strikeout";
   const rects = ann.rects && ann.rects.length > 0 ? ann.rects : [ann.rect];
   const isInk = ann.type === "ink" && ann.path && ann.path.length > 1;
+  const [draftContent, setDraftContent] = useState4(ann.content ?? "");
+  const [draftReply, setDraftReply] = useState4("");
+  useEffect3(() => {
+    setDraftContent(ann.content ?? "");
+  }, [ann.id, ann.content]);
+  useEffect3(() => {
+    setDraftReply("");
+  }, [ann.id]);
+  const handleSaveContent = () => {
+    const nextContent = draftContent.trim();
+    const currentContent = (ann.content ?? "").trim();
+    if (nextContent === currentContent) return;
+    onUpdate({
+      content: nextContent,
+      updatedAt: Date.now()
+    });
+  };
+  const handleReplySubmit = () => {
+    const nextReply = draftReply.trim();
+    if (!nextReply) return;
+    onAddReply(nextReply);
+    setDraftReply("");
+  };
   const renderMarkupRects = () => {
     if (!isMarkup) return null;
     return rects.map((r, idx) => {
@@ -2014,6 +2277,7 @@ var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
   return /* @__PURE__ */ jsxs4(
     "div",
     {
+      "data-papyrus-annotation-id": ann.id,
       className: `absolute pointer-events-auto transition-all ${isSelected ? "shadow-xl z-30" : "z-10"}`,
       style: {
         left: `${ann.rect.x * 100}%`,
@@ -2032,16 +2296,151 @@ var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
       children: [
         renderMarkupRects(),
         renderInk(),
-        isText && isSelected && /* @__PURE__ */ jsx4("div", { className: "absolute top-full mt-2 w-64 bg-white shadow-2xl rounded-xl p-4 border border-gray-100 z-50", children: /* @__PURE__ */ jsx4(
-          "textarea",
+        isText && !isSelected && /* @__PURE__ */ jsx4(
+          "button",
           {
-            className: "w-full bg-transparent border-none focus:ring-0 p-0 text-gray-800 text-xs font-medium",
-            placeholder: "Escreva sua nota...",
-            rows: 3,
-            defaultValue: ann.content || "",
-            autoFocus: true
+            type: "button",
+            className: "absolute -top-2 -right-2 h-6 w-6 rounded-full flex items-center justify-center shadow-lg",
+            style: {
+              background: "var(--papyrus-surface-2-resolved, var(--papyrus-surface-2, #1f2937))",
+              border: "1px solid var(--papyrus-border-resolved, #374151)",
+              color: "var(--papyrus-text-resolved, #e5e7eb)"
+            },
+            title: "Abrir comentario",
+            "aria-label": "Abrir comentario",
+            onClick: (event) => {
+              event.stopPropagation();
+              onSelect();
+            },
+            children: /* @__PURE__ */ jsx4(
+              "svg",
+              {
+                className: "h-3.5 w-3.5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx4(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M8 10h.01M12 10h.01M16 10h.01M7 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4z"
+                  }
+                )
+              }
+            )
           }
-        ) }),
+        ),
+        isText && isSelected && /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "absolute top-full mt-2 w-72 rounded-xl p-3 z-50",
+            style: {
+              background: "var(--papyrus-popover-resolved, var(--papyrus-popover, #ffffff))",
+              border: "1px solid var(--papyrus-border-resolved, #d1d5db)",
+              color: "var(--papyrus-text-resolved, #111827)",
+              boxShadow: "0 20px 40px var(--papyrus-shadow-resolved, rgba(0, 0, 0, 0.3))"
+            },
+            onClick: (event) => event.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxs4("div", { className: "mb-2 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx4("span", { className: "text-[10px] font-bold uppercase tracking-wider opacity-70", children: ann.type === "comment" ? "Comentario" : "Nota" }),
+                ann.replies?.length ? /* @__PURE__ */ jsxs4("span", { className: "text-[10px] opacity-70", children: [
+                  ann.replies.length,
+                  " resposta",
+                  ann.replies.length > 1 ? "s" : ""
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "textarea",
+                {
+                  className: "w-full rounded-md border p-2 text-xs font-medium resize-none focus:outline-none",
+                  style: {
+                    background: "var(--papyrus-surface-resolved, var(--papyrus-surface, #ffffff))",
+                    borderColor: "var(--papyrus-border-resolved, #d1d5db)",
+                    color: "var(--papyrus-text-resolved, #111827)"
+                  },
+                  placeholder: "Escreva seu comentario...",
+                  rows: 3,
+                  value: draftContent,
+                  onChange: (event) => setDraftContent(event.target.value),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter" && !event.shiftKey) {
+                      event.preventDefault();
+                      handleSaveContent();
+                    }
+                  },
+                  autoFocus: true
+                }
+              ),
+              /* @__PURE__ */ jsx4("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded-md px-3 py-1.5 text-[11px] font-semibold text-white",
+                  style: { backgroundColor: accentColor },
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    handleSaveContent();
+                  },
+                  children: (ann.content ?? "").trim() ? "Atualizar" : "Enviar"
+                }
+              ) }),
+              ann.replies && ann.replies.length > 0 ? /* @__PURE__ */ jsx4("div", { className: "mt-3 space-y-2", children: ann.replies.map((reply) => /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: "rounded-md border p-2",
+                  style: {
+                    background: "var(--papyrus-surface-resolved, var(--papyrus-surface, #ffffff))",
+                    borderColor: "var(--papyrus-border-resolved, #d1d5db)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4("p", { className: "text-xs", children: reply.content }),
+                    /* @__PURE__ */ jsx4("p", { className: "mt-1 text-[10px] opacity-70", children: new Date(reply.createdAt).toLocaleTimeString([], {
+                      hour: "2-digit",
+                      minute: "2-digit"
+                    }) })
+                  ]
+                },
+                reply.id
+              )) }) : null,
+              /* @__PURE__ */ jsxs4("div", { className: "mt-3 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    type: "text",
+                    className: "flex-1 rounded-md border px-2 py-1.5 text-xs focus:outline-none",
+                    style: {
+                      background: "var(--papyrus-surface-resolved, var(--papyrus-surface, #ffffff))",
+                      borderColor: "var(--papyrus-border-resolved, #d1d5db)",
+                      color: "var(--papyrus-text-resolved, #111827)"
+                    },
+                    placeholder: "Responder...",
+                    value: draftReply,
+                    onChange: (event) => setDraftReply(event.target.value),
+                    onKeyDown: (event) => {
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        handleReplySubmit();
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rounded-md px-3 py-1.5 text-[11px] font-semibold text-white",
+                    style: { backgroundColor: accentColor },
+                    onClick: handleReplySubmit,
+                    children: "Responder"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
         isSelected && /* @__PURE__ */ jsx4(
           "button",
           {
@@ -2083,7 +2482,11 @@ var MIN_ZOOM = 0.2;
 var MAX_ZOOM = 5;
 var WIDTH_SNAP_PX = 4;
 var WIDTH_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 Viewer = ({ engine, style }) => {
+  const viewerState = useViewerStore5();
   const {
     pageCount,
     currentPage,
@@ -2096,7 +2499,8 @@ var Viewer = ({ engine, style }) => {
     annotationColor,
     setAnnotationColor,
     toolDockOpen
-  } = useViewerStore5();
+  } = viewerState;
+  const mobileTopbarVisible = viewerState.mobileTopbarVisible ?? true;
   const isDark = uiTheme === "dark";
   const viewerRef = useRef4(null);
   const colorPickerRef = useRef4(null);
@@ -2106,6 +2510,11 @@ var Viewer = ({ engine, style }) => {
   const jumpRef = useRef4(false);
   const jumpTimerRef = useRef4(null);
   const lastWidthRef = useRef4(null);
+  const lastScrollTopRef = useRef4(0);
+  const scrollDownAccumulatorRef = useRef4(0);
+  const scrollUpAccumulatorRef = useRef4(0);
+  const previousCurrentPageRef = useRef4(currentPage);
+  const mobileTopbarVisibleRef = useRef4(mobileTopbarVisible);
   const pinchRef = useRef4({
     active: false,
     startDistance: 0,
@@ -2118,6 +2527,7 @@ var Viewer = ({ engine, style }) => {
   const [pageSizes, setPageSizes] = useState5({});
   const [colorPickerOpen, setColorPickerOpen] = useState5(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 = [
@@ -2130,6 +2540,13 @@ var Viewer = ({ engine, style }) => {
     "#8b5cf6",
     "#111827"
   ];
+  const setMobileTopbarVisibility = (visible) => {
+    if (mobileTopbarVisibleRef.current === visible) return;
+    mobileTopbarVisibleRef.current = visible;
+    setDocumentState({
+      mobileTopbarVisible: visible
+    });
+  };
   useEffect4(() => {
     if (!colorPickerOpen) return;
     const handleClick = (event) => {
@@ -2144,6 +2561,9 @@ var Viewer = ({ engine, style }) => {
   useEffect4(() => {
     if (!toolDockOpen && colorPickerOpen) setColorPickerOpen(false);
   }, [toolDockOpen, colorPickerOpen]);
+  useEffect4(() => {
+    mobileTopbarVisibleRef.current = mobileTopbarVisible;
+  }, [mobileTopbarVisible]);
   useEffect4(
     () => () => {
       if (pinchRef.current.rafId != null) {
@@ -2195,6 +2615,64 @@ var Viewer = ({ engine, style }) => {
       observer.disconnect();
     };
   }, []);
+  useEffect4(() => {
+    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]);
+  useEffect4(() => {
+    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]);
   useEffect4(() => {
     let active = true;
     if (!pageCount) return;
@@ -2309,7 +2787,7 @@ var Viewer = ({ engine, style }) => {
   const virtualAnchor = currentPage - 1;
   const virtualStart = Math.max(0, virtualAnchor - virtualOverscan);
   const virtualEnd = Math.min(pageCount - 1, virtualAnchor + virtualOverscan);
-  const fallbackSize = useMemo2(() => {
+  const fallbackSize = useMemo3(() => {
     if (basePageSize && availableWidth) {
       const fitScale = Math.min(
         1,
@@ -2326,7 +2804,7 @@ var Viewer = ({ engine, style }) => {
       height: Math.round(base * zoom)
     };
   }, [basePageSize, availableWidth, zoom]);
-  const averagePageHeight = useMemo2(() => {
+  const averagePageHeight = useMemo3(() => {
     const heights = Object.values(pageSizes).map((size) => size.height);
     if (!heights.length)
       return availableWidth ? Math.max(680, availableWidth * 1.3) : 1100;