@papyrus-sdk/ui-react 0.2.20 → 0.2.22

package/dist/index.mjs

@@ -3,6 +3,8 @@ 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";
+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,
@@ -57,7 +59,7 @@ var Topbar = ({
   }, [hasMobileMenu]);
   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") {
@@ -1102,10 +1104,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);
@@ -1121,6 +1128,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",
@@ -1322,48 +1364,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
+            );
+          })
         ] }) })
       ]
     }
@@ -1393,6 +1539,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);
@@ -1410,6 +1560,8 @@ var PageRenderer = ({
     setDocumentState,
     annotations,
     addAnnotation,
+    addAnnotationReply,
+    updateAnnotation,
     activeTool,
     removeAnnotation,
     selectedAnnotationId,
@@ -1433,6 +1585,24 @@ var PageRenderer = ({
     () => 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 () => {
@@ -1602,13 +1772,27 @@ var PageRenderer = ({
     activeSearchIndex,
     textLayerVersion
   ]);
-  const handleMouseDown = (e) => {
+  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]")
+    );
+    const clickedSelectionMenu = Boolean(
+      target?.closest("[data-papyrus-selection-menu]")
+    );
+    if (!clickedInsideAnnotation && !clickedSelectionMenu) {
+      setSelectedAnnotation(null);
+    }
     setSelectionMenu(null);
     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;
@@ -1617,25 +1801,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),
@@ -1643,7 +1827,7 @@ var PageRenderer = ({
       h: Math.abs(currentY - startPos.y)
     });
   };
-  const handleMouseUp = (e) => {
+  const handlePointerUp = () => {
     if (isInkDrawing) {
       setIsInkDrawing(false);
       if (inkPoints.length > 1) {
@@ -1659,6 +1843,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,
@@ -1739,6 +1924,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,
@@ -1774,6 +1960,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,
@@ -1803,6 +1992,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":
@@ -1820,10 +2040,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__ */ jsx4("div", { className: "absolute inset-0 bg-gray-50 flex items-center justify-center z-10 animate-pulse", children: /* @__PURE__ */ jsx4("span", { className: "text-[10px] font-black text-gray-400 uppercase tracking-widest", children: "Sincronizando..." }) }),
         /* @__PURE__ */ jsx4(
@@ -1897,6 +2125,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: [
@@ -1909,6 +2138,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,
@@ -1935,7 +2165,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
         )) })
@@ -1943,12 +2181,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) => {
@@ -2053,6 +2322,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}%`,
@@ -2071,16 +2341,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",
           {
@@ -2122,9 +2527,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 = useViewerStore5();
   const {
@@ -2150,6 +2558,7 @@ var Viewer = ({ engine, style }) => {
   const jumpRef = useRef4(false);
   const jumpTimerRef = useRef4(null);
   const lastWidthRef = useRef4(null);
+  const lastHeightRef = useRef4(null);
   const lastScrollTopRef = useRef4(0);
   const scrollDownAccumulatorRef = useRef4(0);
   const scrollUpAccumulatorRef = useRef4(0);
@@ -2163,11 +2572,14 @@ var Viewer = ({ engine, style }) => {
     rafId: null
   });
   const [availableWidth, setAvailableWidth] = useState5(null);
+  const [availableHeight, setAvailableHeight] = useState5(null);
   const [basePageSize, setBasePageSize] = useState5(null);
   const [pageSizes, setPageSizes] = useState5({});
   const [colorPickerOpen, setColorPickerOpen] = useState5(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 = [
@@ -2218,21 +2630,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();