@lv-x-software-house/x_view 1.2.5-dev.32 → 1.2.5-dev.33

package/dist/index.js

@@ -9724,12 +9724,16 @@ var EVENT_ICONS = {
 function QuestTimeline({
   timeline = [],
   viewMembers = [],
-  onOpenImageViewer
+  onOpenImageViewer,
+  onAddNote,
+  // Nova prop para adicionar nota a uma etapa específica
+  canEdit = true
 }) {
   const sortedTimeline = [...timeline].sort((a, b) => b.timestamp - a.timestamp);
   const getMemberName = (userId) => {
-    const member = viewMembers.find((m) => m.id === userId);
-    return (member == null ? void 0 : member.name) || (member == null ? void 0 : member.email) || "Sistema";
+    if (!userId) return "Sistema";
+    const member = viewMembers.find((m) => String(m.id) === String(userId));
+    return (member == null ? void 0 : member.name) || (member == null ? void 0 : member.email) || userId;
   };
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -9747,7 +9751,19 @@ function QuestTimeline({
     const config = EVENT_ICONS[event.type] || EVENT_ICONS.default;
     const Icon = config.icon;
     const actorName = getMemberName(event.actorId);
-    return /* @__PURE__ */ import_react19.default.createElement("div", { key: index, className: "relative animate-in fade-in slide-in-from-left-2 duration-300", style: { animationDelay: `${index * 50}ms` } }, /* @__PURE__ */ import_react19.default.createElement("div", { className: `absolute -left-[35px] top-0 w-8 h-8 rounded-full ${config.bg} flex items-center justify-center ring-4 ring-slate-950 border border-white/5` }, /* @__PURE__ */ import_react19.default.createElement(Icon, { className: config.iconColor || config.color, size: 14 })), /* @__PURE__ */ import_react19.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-xs font-semibold text-slate-200" }, actorName), /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-[10px] text-slate-500 tabular-nums" }, formatDate(event.timestamp))), /* @__PURE__ */ import_react19.default.createElement("p", { className: "text-sm text-slate-400 leading-relaxed" }, event.description), (event.from_status || event.to_status) && /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center gap-1.5 py-1 px-2 rounded-md bg-white/5 border border-white/5 w-fit mt-2" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-[10px] text-slate-500" }, event.from_status || "?"), /* @__PURE__ */ import_react19.default.createElement(import_fi17.FiArrowRight, { size: 10, className: "text-slate-600" }), /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-[10px] text-indigo-300 font-bold" }, event.to_status || "?")), event.metadata && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "mt-2 text-[10px] grid grid-cols-2 gap-2 p-2 bg-slate-900/50 rounded border border-white/5" }, Object.entries(event.metadata).map(([key, value]) => /* @__PURE__ */ import_react19.default.createElement("div", { key, className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-slate-500 capitalize" }, key.replace(/_/g, " ")), /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-slate-300 truncate font-mono" }, typeof value === "string" ? value : JSON.stringify(value))))), event.links && event.links.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex flex-wrap gap-2 mt-2" }, event.links.map((link, lIdx) => /* @__PURE__ */ import_react19.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement("div", { key: event.id || index, className: "relative animate-in fade-in slide-in-from-left-2 duration-300", style: { animationDelay: `${index * 50}ms` } }, /* @__PURE__ */ import_react19.default.createElement("div", { className: `absolute -left-[35px] top-0 w-8 h-8 rounded-full ${config.bg} flex items-center justify-center ring-4 ring-slate-950 border border-white/5` }, /* @__PURE__ */ import_react19.default.createElement(Icon, { className: config.iconColor || config.color, size: 14 })), /* @__PURE__ */ import_react19.default.createElement("div", { className: "group space-y-1" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-xs font-semibold text-slate-200" }, actorName), canEdit && onAddNote && /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        onClick: () => onAddNote(event),
+        className: "opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-white/5 text-slate-500 hover:text-indigo-400 transition-all",
+        title: "Adicionar detalhe/anexo a esta etapa"
+      },
+      /* @__PURE__ */ import_react19.default.createElement(import_fi17.FiPlusCircle, { size: 12 })
+    )), /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-[10px] text-slate-500 tabular-nums" }, formatDate(event.timestamp))), /* @__PURE__ */ import_react19.default.createElement("p", { className: "text-sm text-slate-400 leading-relaxed" }, event.description), event.notes && /* @__PURE__ */ import_react19.default.createElement("div", { className: "mt-1 py-1 px-2 rounded bg-indigo-500/5 border-l-2 border-indigo-500/30" }, /* @__PURE__ */ import_react19.default.createElement("p", { className: "text-[11px] text-slate-300 italic whitespace-pre-wrap" }, event.notes)), (event.from_status || event.to_status) && /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center gap-1.5 py-1 px-2 rounded-md bg-white/5 border border-white/5 w-fit mt-2" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-[10px] text-slate-500" }, event.from_status || "?"), /* @__PURE__ */ import_react19.default.createElement(import_fi17.FiArrowRight, { size: 10, className: "text-slate-600" }), /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-[10px] text-indigo-300 font-bold" }, event.to_status || "?")), event.metadata && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "mt-2 text-[10px] grid grid-cols-2 gap-2 p-2 bg-slate-900/50 rounded border border-white/5" }, Object.entries(event.metadata).map(([key, value]) => {
+      const isAssigneeId = key.toLowerCase().includes("assignee_id") || key.toLowerCase().includes("respons\xE1vel") || key.toLowerCase().includes("assignee id");
+      const displayValue = isAssigneeId && typeof value === "string" ? getMemberName(value) : typeof value === "string" ? value : JSON.stringify(value);
+      return /* @__PURE__ */ import_react19.default.createElement("div", { key, className: "flex flex-col gap-0.5" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "text-slate-500 capitalize" }, key.replace(/_/g, " ")), /* @__PURE__ */ import_react19.default.createElement("span", { className: `${isAssigneeId ? "text-indigo-300 font-medium" : "text-slate-300"} truncate font-mono` }, displayValue));
+    })), event.links && event.links.length > 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex flex-wrap gap-2 mt-2" }, event.links.map((link, lIdx) => /* @__PURE__ */ import_react19.default.createElement(
       "a",
       {
         key: lIdx,
@@ -9764,10 +9780,10 @@ function QuestTimeline({
         key: iIdx,
         type: "button",
         onClick: () => onOpenImageViewer == null ? void 0 : onOpenImageViewer(event.images, iIdx),
-        className: "relative w-12 h-12 rounded border border-white/10 overflow-hidden hover:border-sky-500/50 transition-colors group"
+        className: "relative w-12 h-12 rounded border border-white/10 overflow-hidden hover:border-sky-500/50 transition-colors group/img"
       },
       /* @__PURE__ */ import_react19.default.createElement("img", { src: img.value, alt: img.name, className: "w-full h-full object-cover" }),
-      /* @__PURE__ */ import_react19.default.createElement("div", { className: "absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity" }, /* @__PURE__ */ import_react19.default.createElement(import_fi17.FiSearch, { size: 12, className: "text-white" }))
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: "absolute inset-0 bg-slate-900/40 opacity-0 group-hover/img:opacity-100 flex items-center justify-center transition-opacity" }, /* @__PURE__ */ import_react19.default.createElement(import_fi17.FiSearch, { size: 12, className: "text-white" }))
     )))));
   })));
 }
@@ -9833,6 +9849,8 @@ function QuestDetailsPanel({
   const [noteLinks, setNoteLinks] = (0, import_react20.useState)([]);
   const [noteImages, setNoteImages] = (0, import_react20.useState)([]);
   const [isNoteFormOpen, setIsNoteFormOpen] = (0, import_react20.useState)(false);
+  const [editingEntryId, setEditingEntryId] = (0, import_react20.useState)(null);
+  const [editingEntryLabel, setEditingEntryLabel] = (0, import_react20.useState)("");
   const maxPanelW = typeof window !== "undefined" ? window.innerWidth * 0.92 : 1200;
   const { width: panelWidth, isResizing, handlePointerDown: handleResize, setWidth } = useResizablePanel({
     initialWidth: isReadMode ? 700 : 440,
@@ -9964,14 +9982,30 @@ function QuestDetailsPanel({
     }
   };
   const handleAddTimelineNote = async () => {
-    if (!noteText.trim() || isSaving) return;
+    if (!noteText.trim() && noteLinks.length === 0 && noteImages.length === 0 || isSaving) return;
     setIsSaving(true);
     const actorId = (currentUser == null ? void 0 : currentUser.id) || "unknown";
-    const newEntry = createTimelineEntry(actorId, noteText, "comment", {
-      links: noteLinks,
-      images: noteImages
-    });
-    const updatedTimeline = [...timeline, newEntry];
+    let updatedTimeline;
+    if (editingEntryId) {
+      updatedTimeline = timeline.map((entry) => {
+        if (entry.id === editingEntryId) {
+          return {
+            ...entry,
+            notes: noteText.trim() ? entry.notes ? `${entry.notes}
+${noteText}` : noteText : entry.notes,
+            links: [...entry.links || [], ...noteLinks],
+            images: [...entry.images || [], ...noteImages]
+          };
+        }
+        return entry;
+      });
+    } else {
+      const newEntry = createTimelineEntry(actorId, noteText, "comment", {
+        links: noteLinks,
+        images: noteImages
+      });
+      updatedTimeline = [...timeline, newEntry];
+    }
     try {
       const nodeToSave = {
         ...node,
@@ -9984,12 +10018,26 @@ function QuestDetailsPanel({
       setNoteLinks([]);
       setNoteImages([]);
       setIsNoteFormOpen(false);
+      setEditingEntryId(null);
+      setEditingEntryLabel("");
     } catch (error) {
       console.error("Erro ao adicionar nota:", error);
     } finally {
       setIsSaving(false);
     }
   };
+  const handleOpenNoteForEntry = (entry) => {
+    setEditingEntryId(entry.id);
+    setEditingEntryLabel(entry.description);
+    setNoteText("");
+    setNoteLinks([]);
+    setNoteImages([]);
+    setIsNoteFormOpen(true);
+    setTimeout(() => {
+      const form = document.getElementById("quest-note-form");
+      form == null ? void 0 : form.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 100);
+  };
   const addLinkToNote = () => {
     setNoteLinks([...noteLinks, { id: v4_default(), name: "", value: "" }]);
   };
@@ -10351,17 +10399,32 @@ function QuestDetailsPanel({
       "button",
       {
         type: "button",
-        onClick: () => setIsNoteFormOpen(!isNoteFormOpen),
+        onClick: () => {
+          if (isNoteFormOpen && editingEntryId) {
+            setEditingEntryId(null);
+            setEditingEntryLabel("");
+            setNoteText("");
+            setNoteLinks([]);
+            setNoteImages([]);
+          } else {
+            setIsNoteFormOpen(!isNoteFormOpen);
+            setEditingEntryId(null);
+            setEditingEntryLabel("");
+          }
+        },
         className: "flex items-center gap-1.5 px-2 py-1 text-[10px] rounded-md bg-white/5 hover:bg-white/10 border border-white/10 transition-colors text-slate-300"
       },
-      isNoteFormOpen ? /* @__PURE__ */ import_react20.default.createElement(import_fi18.FiX, { size: 12 }) : /* @__PURE__ */ import_react20.default.createElement(import_fi18.FiPlus, { size: 12 }),
-      isNoteFormOpen ? "Cancelar" : "Nova Nota"
-    )), isNoteFormOpen && /* @__PURE__ */ import_react20.default.createElement("div", { className: "mb-6 p-4 rounded-xl bg-white/5 border border-white/5 space-y-3 animate-in fade-in slide-in-from-top-2" }, /* @__PURE__ */ import_react20.default.createElement(
+      isNoteFormOpen && !editingEntryId ? /* @__PURE__ */ import_react20.default.createElement(import_fi18.FiX, { size: 12 }) : /* @__PURE__ */ import_react20.default.createElement(import_fi18.FiPlus, { size: 12 }),
+      isNoteFormOpen && !editingEntryId ? "Cancelar" : "Nova Nota"
+    )), isNoteFormOpen && /* @__PURE__ */ import_react20.default.createElement("div", { id: "quest-note-form", className: "mb-6 p-4 rounded-xl bg-white/5 border border-white/5 space-y-3 animate-in fade-in slide-in-from-top-2 border-l-4 border-l-indigo-500/40" }, editingEntryId && /* @__PURE__ */ import_react20.default.createElement("div", { className: "flex items-center justify-between mb-2 pb-2 border-b border-white/5" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react20.default.createElement("span", { className: "text-[10px] text-indigo-400 font-bold uppercase tracking-wider" }, "Adicionando \xE0 etapa:"), /* @__PURE__ */ import_react20.default.createElement("span", { className: "text-xs text-slate-300 italic truncate max-w-[250px]" }, editingEntryLabel)), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", onClick: () => {
+      setIsNoteFormOpen(false);
+      setEditingEntryId(null);
+    }, className: "text-slate-500 hover:text-white" }, /* @__PURE__ */ import_react20.default.createElement(import_fi18.FiX, { size: 14 }))), /* @__PURE__ */ import_react20.default.createElement(
       "textarea",
       {
         value: noteText,
         onChange: (e) => setNoteText(e.target.value),
-        placeholder: "Escreva uma observa\xE7\xE3o no hist\xF3rico...",
+        placeholder: editingEntryId ? "Adicione uma observa\xE7\xE3o a esta etapa..." : "Escreva uma observa\xE7\xE3o no hist\xF3rico...",
         className: "w-full bg-slate-900/50 p-3 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 min-h-[80px] resize-none"
       }
     ), /* @__PURE__ */ import_react20.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react20.default.createElement("span", { className: "text-[10px] text-slate-500 uppercase font-bold tracking-tight" }, "Links"), /* @__PURE__ */ import_react20.default.createElement("button", { type: "button", onClick: addLinkToNote, className: "text-indigo-400 hover:text-indigo-300 text-[10px] flex items-center gap-1 font-medium" }, /* @__PURE__ */ import_react20.default.createElement(import_fi18.FiPlus, { size: 10 }), " Adicionar Link")), noteLinks.length > 0 && /* @__PURE__ */ import_react20.default.createElement("div", { className: "space-y-2" }, noteLinks.map((link) => /* @__PURE__ */ import_react20.default.createElement("div", { key: link.id, className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-1" }, /* @__PURE__ */ import_react20.default.createElement(
@@ -10396,16 +10459,18 @@ function QuestDetailsPanel({
       {
         type: "button",
         onClick: handleAddTimelineNote,
-        disabled: !noteText.trim() || isSaving,
+        disabled: !noteText.trim() && noteLinks.length === 0 && noteImages.length === 0 || isSaving,
         className: "px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold transition-colors disabled:opacity-50"
       },
-      "Adicionar ao Hist\xF3rico"
+      editingEntryId ? "Salvar nesta Etapa" : "Adicionar ao Hist\xF3rico"
     ))), /* @__PURE__ */ import_react20.default.createElement(
       QuestTimeline,
       {
         timeline,
         viewMembers,
-        onOpenImageViewer
+        onOpenImageViewer,
+        canEdit,
+        onAddNote: handleOpenNoteForEntry
       }
     )), /* @__PURE__ */ import_react20.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react20.default.createElement("label", { className: "text-xs text-slate-300" }, "Tamanho no Node (Size)"), /* @__PURE__ */ import_react20.default.createElement("div", { className: "flex items-center gap-5" }, ["small", "medium", "large"].map((s) => {
       const isSelected = size === s;

package/dist/index.mjs

@@ -9753,12 +9753,16 @@ var EVENT_ICONS = {
 function QuestTimeline({
   timeline = [],
   viewMembers = [],
-  onOpenImageViewer
+  onOpenImageViewer,
+  onAddNote,
+  // Nova prop para adicionar nota a uma etapa específica
+  canEdit = true
 }) {
   const sortedTimeline = [...timeline].sort((a, b) => b.timestamp - a.timestamp);
   const getMemberName = (userId) => {
-    const member = viewMembers.find((m) => m.id === userId);
-    return (member == null ? void 0 : member.name) || (member == null ? void 0 : member.email) || "Sistema";
+    if (!userId) return "Sistema";
+    const member = viewMembers.find((m) => String(m.id) === String(userId));
+    return (member == null ? void 0 : member.name) || (member == null ? void 0 : member.email) || userId;
   };
   const formatDate = (timestamp) => {
     const date = new Date(timestamp);
@@ -9776,7 +9780,19 @@ function QuestTimeline({
     const config = EVENT_ICONS[event.type] || EVENT_ICONS.default;
     const Icon = config.icon;
     const actorName = getMemberName(event.actorId);
-    return /* @__PURE__ */ React18.createElement("div", { key: index, className: "relative animate-in fade-in slide-in-from-left-2 duration-300", style: { animationDelay: `${index * 50}ms` } }, /* @__PURE__ */ React18.createElement("div", { className: `absolute -left-[35px] top-0 w-8 h-8 rounded-full ${config.bg} flex items-center justify-center ring-4 ring-slate-950 border border-white/5` }, /* @__PURE__ */ React18.createElement(Icon, { className: config.iconColor || config.color, size: 14 })), /* @__PURE__ */ React18.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React18.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React18.createElement("span", { className: "text-xs font-semibold text-slate-200" }, actorName), /* @__PURE__ */ React18.createElement("span", { className: "text-[10px] text-slate-500 tabular-nums" }, formatDate(event.timestamp))), /* @__PURE__ */ React18.createElement("p", { className: "text-sm text-slate-400 leading-relaxed" }, event.description), (event.from_status || event.to_status) && /* @__PURE__ */ React18.createElement("div", { className: "flex items-center gap-1.5 py-1 px-2 rounded-md bg-white/5 border border-white/5 w-fit mt-2" }, /* @__PURE__ */ React18.createElement("span", { className: "text-[10px] text-slate-500" }, event.from_status || "?"), /* @__PURE__ */ React18.createElement(FiArrowRight, { size: 10, className: "text-slate-600" }), /* @__PURE__ */ React18.createElement("span", { className: "text-[10px] text-indigo-300 font-bold" }, event.to_status || "?")), event.metadata && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ React18.createElement("div", { className: "mt-2 text-[10px] grid grid-cols-2 gap-2 p-2 bg-slate-900/50 rounded border border-white/5" }, Object.entries(event.metadata).map(([key, value]) => /* @__PURE__ */ React18.createElement("div", { key, className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React18.createElement("span", { className: "text-slate-500 capitalize" }, key.replace(/_/g, " ")), /* @__PURE__ */ React18.createElement("span", { className: "text-slate-300 truncate font-mono" }, typeof value === "string" ? value : JSON.stringify(value))))), event.links && event.links.length > 0 && /* @__PURE__ */ React18.createElement("div", { className: "flex flex-wrap gap-2 mt-2" }, event.links.map((link, lIdx) => /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React18.createElement("div", { key: event.id || index, className: "relative animate-in fade-in slide-in-from-left-2 duration-300", style: { animationDelay: `${index * 50}ms` } }, /* @__PURE__ */ React18.createElement("div", { className: `absolute -left-[35px] top-0 w-8 h-8 rounded-full ${config.bg} flex items-center justify-center ring-4 ring-slate-950 border border-white/5` }, /* @__PURE__ */ React18.createElement(Icon, { className: config.iconColor || config.color, size: 14 })), /* @__PURE__ */ React18.createElement("div", { className: "group space-y-1" }, /* @__PURE__ */ React18.createElement("div", { className: "flex items-center justify-between gap-4" }, /* @__PURE__ */ React18.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React18.createElement("span", { className: "text-xs font-semibold text-slate-200" }, actorName), canEdit && onAddNote && /* @__PURE__ */ React18.createElement(
+      "button",
+      {
+        onClick: () => onAddNote(event),
+        className: "opacity-0 group-hover:opacity-100 p-1 rounded-md hover:bg-white/5 text-slate-500 hover:text-indigo-400 transition-all",
+        title: "Adicionar detalhe/anexo a esta etapa"
+      },
+      /* @__PURE__ */ React18.createElement(FiPlusCircle, { size: 12 })
+    )), /* @__PURE__ */ React18.createElement("span", { className: "text-[10px] text-slate-500 tabular-nums" }, formatDate(event.timestamp))), /* @__PURE__ */ React18.createElement("p", { className: "text-sm text-slate-400 leading-relaxed" }, event.description), event.notes && /* @__PURE__ */ React18.createElement("div", { className: "mt-1 py-1 px-2 rounded bg-indigo-500/5 border-l-2 border-indigo-500/30" }, /* @__PURE__ */ React18.createElement("p", { className: "text-[11px] text-slate-300 italic whitespace-pre-wrap" }, event.notes)), (event.from_status || event.to_status) && /* @__PURE__ */ React18.createElement("div", { className: "flex items-center gap-1.5 py-1 px-2 rounded-md bg-white/5 border border-white/5 w-fit mt-2" }, /* @__PURE__ */ React18.createElement("span", { className: "text-[10px] text-slate-500" }, event.from_status || "?"), /* @__PURE__ */ React18.createElement(FiArrowRight, { size: 10, className: "text-slate-600" }), /* @__PURE__ */ React18.createElement("span", { className: "text-[10px] text-indigo-300 font-bold" }, event.to_status || "?")), event.metadata && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ React18.createElement("div", { className: "mt-2 text-[10px] grid grid-cols-2 gap-2 p-2 bg-slate-900/50 rounded border border-white/5" }, Object.entries(event.metadata).map(([key, value]) => {
+      const isAssigneeId = key.toLowerCase().includes("assignee_id") || key.toLowerCase().includes("respons\xE1vel") || key.toLowerCase().includes("assignee id");
+      const displayValue = isAssigneeId && typeof value === "string" ? getMemberName(value) : typeof value === "string" ? value : JSON.stringify(value);
+      return /* @__PURE__ */ React18.createElement("div", { key, className: "flex flex-col gap-0.5" }, /* @__PURE__ */ React18.createElement("span", { className: "text-slate-500 capitalize" }, key.replace(/_/g, " ")), /* @__PURE__ */ React18.createElement("span", { className: `${isAssigneeId ? "text-indigo-300 font-medium" : "text-slate-300"} truncate font-mono` }, displayValue));
+    })), event.links && event.links.length > 0 && /* @__PURE__ */ React18.createElement("div", { className: "flex flex-wrap gap-2 mt-2" }, event.links.map((link, lIdx) => /* @__PURE__ */ React18.createElement(
       "a",
       {
         key: lIdx,
@@ -9793,10 +9809,10 @@ function QuestTimeline({
         key: iIdx,
         type: "button",
         onClick: () => onOpenImageViewer == null ? void 0 : onOpenImageViewer(event.images, iIdx),
-        className: "relative w-12 h-12 rounded border border-white/10 overflow-hidden hover:border-sky-500/50 transition-colors group"
+        className: "relative w-12 h-12 rounded border border-white/10 overflow-hidden hover:border-sky-500/50 transition-colors group/img"
       },
       /* @__PURE__ */ React18.createElement("img", { src: img.value, alt: img.name, className: "w-full h-full object-cover" }),
-      /* @__PURE__ */ React18.createElement("div", { className: "absolute inset-0 bg-slate-900/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity" }, /* @__PURE__ */ React18.createElement(FiSearch6, { size: 12, className: "text-white" }))
+      /* @__PURE__ */ React18.createElement("div", { className: "absolute inset-0 bg-slate-900/40 opacity-0 group-hover/img:opacity-100 flex items-center justify-center transition-opacity" }, /* @__PURE__ */ React18.createElement(FiSearch6, { size: 12, className: "text-white" }))
     )))));
   })));
 }
@@ -9862,6 +9878,8 @@ function QuestDetailsPanel({
   const [noteLinks, setNoteLinks] = useState19([]);
   const [noteImages, setNoteImages] = useState19([]);
   const [isNoteFormOpen, setIsNoteFormOpen] = useState19(false);
+  const [editingEntryId, setEditingEntryId] = useState19(null);
+  const [editingEntryLabel, setEditingEntryLabel] = useState19("");
   const maxPanelW = typeof window !== "undefined" ? window.innerWidth * 0.92 : 1200;
   const { width: panelWidth, isResizing, handlePointerDown: handleResize, setWidth } = useResizablePanel({
     initialWidth: isReadMode ? 700 : 440,
@@ -9993,14 +10011,30 @@ function QuestDetailsPanel({
     }
   };
   const handleAddTimelineNote = async () => {
-    if (!noteText.trim() || isSaving) return;
+    if (!noteText.trim() && noteLinks.length === 0 && noteImages.length === 0 || isSaving) return;
     setIsSaving(true);
     const actorId = (currentUser == null ? void 0 : currentUser.id) || "unknown";
-    const newEntry = createTimelineEntry(actorId, noteText, "comment", {
-      links: noteLinks,
-      images: noteImages
-    });
-    const updatedTimeline = [...timeline, newEntry];
+    let updatedTimeline;
+    if (editingEntryId) {
+      updatedTimeline = timeline.map((entry) => {
+        if (entry.id === editingEntryId) {
+          return {
+            ...entry,
+            notes: noteText.trim() ? entry.notes ? `${entry.notes}
+${noteText}` : noteText : entry.notes,
+            links: [...entry.links || [], ...noteLinks],
+            images: [...entry.images || [], ...noteImages]
+          };
+        }
+        return entry;
+      });
+    } else {
+      const newEntry = createTimelineEntry(actorId, noteText, "comment", {
+        links: noteLinks,
+        images: noteImages
+      });
+      updatedTimeline = [...timeline, newEntry];
+    }
     try {
       const nodeToSave = {
         ...node,
@@ -10013,12 +10047,26 @@ function QuestDetailsPanel({
       setNoteLinks([]);
       setNoteImages([]);
       setIsNoteFormOpen(false);
+      setEditingEntryId(null);
+      setEditingEntryLabel("");
     } catch (error) {
       console.error("Erro ao adicionar nota:", error);
     } finally {
       setIsSaving(false);
     }
   };
+  const handleOpenNoteForEntry = (entry) => {
+    setEditingEntryId(entry.id);
+    setEditingEntryLabel(entry.description);
+    setNoteText("");
+    setNoteLinks([]);
+    setNoteImages([]);
+    setIsNoteFormOpen(true);
+    setTimeout(() => {
+      const form = document.getElementById("quest-note-form");
+      form == null ? void 0 : form.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 100);
+  };
   const addLinkToNote = () => {
     setNoteLinks([...noteLinks, { id: v4_default(), name: "", value: "" }]);
   };
@@ -10380,17 +10428,32 @@ function QuestDetailsPanel({
       "button",
       {
         type: "button",
-        onClick: () => setIsNoteFormOpen(!isNoteFormOpen),
+        onClick: () => {
+          if (isNoteFormOpen && editingEntryId) {
+            setEditingEntryId(null);
+            setEditingEntryLabel("");
+            setNoteText("");
+            setNoteLinks([]);
+            setNoteImages([]);
+          } else {
+            setIsNoteFormOpen(!isNoteFormOpen);
+            setEditingEntryId(null);
+            setEditingEntryLabel("");
+          }
+        },
         className: "flex items-center gap-1.5 px-2 py-1 text-[10px] rounded-md bg-white/5 hover:bg-white/10 border border-white/10 transition-colors text-slate-300"
       },
-      isNoteFormOpen ? /* @__PURE__ */ React19.createElement(FiX7, { size: 12 }) : /* @__PURE__ */ React19.createElement(FiPlus8, { size: 12 }),
-      isNoteFormOpen ? "Cancelar" : "Nova Nota"
-    )), isNoteFormOpen && /* @__PURE__ */ React19.createElement("div", { className: "mb-6 p-4 rounded-xl bg-white/5 border border-white/5 space-y-3 animate-in fade-in slide-in-from-top-2" }, /* @__PURE__ */ React19.createElement(
+      isNoteFormOpen && !editingEntryId ? /* @__PURE__ */ React19.createElement(FiX7, { size: 12 }) : /* @__PURE__ */ React19.createElement(FiPlus8, { size: 12 }),
+      isNoteFormOpen && !editingEntryId ? "Cancelar" : "Nova Nota"
+    )), isNoteFormOpen && /* @__PURE__ */ React19.createElement("div", { id: "quest-note-form", className: "mb-6 p-4 rounded-xl bg-white/5 border border-white/5 space-y-3 animate-in fade-in slide-in-from-top-2 border-l-4 border-l-indigo-500/40" }, editingEntryId && /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between mb-2 pb-2 border-b border-white/5" }, /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React19.createElement("span", { className: "text-[10px] text-indigo-400 font-bold uppercase tracking-wider" }, "Adicionando \xE0 etapa:"), /* @__PURE__ */ React19.createElement("span", { className: "text-xs text-slate-300 italic truncate max-w-[250px]" }, editingEntryLabel)), /* @__PURE__ */ React19.createElement("button", { type: "button", onClick: () => {
+      setIsNoteFormOpen(false);
+      setEditingEntryId(null);
+    }, className: "text-slate-500 hover:text-white" }, /* @__PURE__ */ React19.createElement(FiX7, { size: 14 }))), /* @__PURE__ */ React19.createElement(
       "textarea",
       {
         value: noteText,
         onChange: (e) => setNoteText(e.target.value),
-        placeholder: "Escreva uma observa\xE7\xE3o no hist\xF3rico...",
+        placeholder: editingEntryId ? "Adicione uma observa\xE7\xE3o a esta etapa..." : "Escreva uma observa\xE7\xE3o no hist\xF3rico...",
         className: "w-full bg-slate-900/50 p-3 text-sm rounded-lg border border-white/10 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 min-h-[80px] resize-none"
       }
     ), /* @__PURE__ */ React19.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React19.createElement("span", { className: "text-[10px] text-slate-500 uppercase font-bold tracking-tight" }, "Links"), /* @__PURE__ */ React19.createElement("button", { type: "button", onClick: addLinkToNote, className: "text-indigo-400 hover:text-indigo-300 text-[10px] flex items-center gap-1 font-medium" }, /* @__PURE__ */ React19.createElement(FiPlus8, { size: 10 }), " Adicionar Link")), noteLinks.length > 0 && /* @__PURE__ */ React19.createElement("div", { className: "space-y-2" }, noteLinks.map((link) => /* @__PURE__ */ React19.createElement("div", { key: link.id, className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-1" }, /* @__PURE__ */ React19.createElement(
@@ -10425,16 +10488,18 @@ function QuestDetailsPanel({
       {
         type: "button",
         onClick: handleAddTimelineNote,
-        disabled: !noteText.trim() || isSaving,
+        disabled: !noteText.trim() && noteLinks.length === 0 && noteImages.length === 0 || isSaving,
         className: "px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold transition-colors disabled:opacity-50"
       },
-      "Adicionar ao Hist\xF3rico"
+      editingEntryId ? "Salvar nesta Etapa" : "Adicionar ao Hist\xF3rico"
     ))), /* @__PURE__ */ React19.createElement(
       QuestTimeline,
       {
         timeline,
         viewMembers,
-        onOpenImageViewer
+        onOpenImageViewer,
+        canEdit,
+        onAddNote: handleOpenNoteForEntry
       }
     )), /* @__PURE__ */ React19.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React19.createElement("label", { className: "text-xs text-slate-300" }, "Tamanho no Node (Size)"), /* @__PURE__ */ React19.createElement("div", { className: "flex items-center gap-5" }, ["small", "medium", "large"].map((s) => {
       const isSelected = size === s;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.2.5-dev.32",
+  "version": "1.2.5-dev.33",
   "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
   "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
   "license": "UNLICENSED",