@papyrus-sdk/ui-react 0.2.20 → 0.2.21

package/dist/index.mjs

@@ -1102,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);
@@ -1121,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",
@@ -1322,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",
                       {
-                        className: "w-2.5 h-2.5 rounded-full",
-                        style: { backgroundColor: ann.color }
+                        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-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 +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);
@@ -1410,6 +1558,8 @@ var PageRenderer = ({
     setDocumentState,
     annotations,
     addAnnotation,
+    addAnnotationReply,
+    updateAnnotation,
     activeTool,
     removeAnnotation,
     selectedAnnotationId,
@@ -1433,6 +1583,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 () => {
@@ -1603,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();
@@ -1659,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,
@@ -1739,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,
@@ -1774,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,
@@ -1897,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: [
@@ -1909,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,
@@ -1935,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
         )) })
@@ -1943,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) => {
@@ -2053,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}%`,
@@ -2071,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",
           {