@lv-x-software-house/x_view 1.2.9 → 1.3.0-dev.2

package/dist/index.js

@@ -4841,16 +4841,16 @@ function XViewSidebar({
         {
           key: n.id,
           onMouseDown: () => handlePick(n),
-          className: `px-3 py-2 text-sm flex items-center gap-2 cursor-pointer ${selectedNodeId === n.id ? "bg-indigo-600/60 text-white" : "text-slate-200 hover:bg-indigo-500/30"}`,
+          className: `px-3 py-2 text-sm flex items-center gap-3 cursor-pointer ${selectedNodeId === n.id ? "bg-indigo-600/60 text-white" : "text-slate-200 hover:bg-indigo-500/30"}`,
           title: n.name
         },
         /* @__PURE__ */ import_react3.default.createElement(
           "span",
           {
-            className: `inline-block h-2 w-2 rounded-full flex-shrink-0 ${isNodeInView(n.id) ? "bg-emerald-400" : "bg-slate-500"}`
+            className: `inline-block h-2 w-2 rounded-full flex-shrink-0 mt-0.5 ${isNodeInView(n.id) ? "bg-emerald-400" : "bg-slate-500"}`
           }
         ),
-        /* @__PURE__ */ import_react3.default.createElement("span", { className: "truncate flex-1" }, n.name)
+        /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex-1 min-w-0 flex flex-col py-0.5" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "truncate font-medium leading-tight" }, n.name), n.type && /* @__PURE__ */ import_react3.default.createElement("span", { className: `text-[10px] uppercase font-bold tracking-tight truncate ${selectedNodeId === n.id ? "text-indigo-100" : "text-slate-500"}` }, Array.isArray(n.type) ? n.type.join(" \u2022 ") : n.type))
       )) : /* @__PURE__ */ import_react3.default.createElement("li", { className: "px-3 py-2 text-sm text-slate-400" }, "Nenhum resultado"))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-3 flex items-center gap-2" }, /* @__PURE__ */ import_react3.default.createElement(
         "button",
         {
@@ -14484,13 +14484,14 @@ function MentionPopover({ query, items, position, onSelect, onClose }) {
     "div",
     {
       style: { top: position.top, left: position.left, position: "fixed", zIndex: 9999 },
-      className: "bg-slate-900 border border-white/10 rounded-xl shadow-2xl py-1.5 min-w-[260px] max-h-[240px] overflow-y-auto custom-scrollbar animate-in fade-in zoom-in-95 duration-100",
+      className: "bg-slate-900 border border-white/10 rounded-xl shadow-2xl py-1.5 min-w-[300px] max-h-[320px] overflow-y-auto custom-scrollbar animate-in fade-in zoom-in-95 duration-100",
       ref: listRef,
       onMouseDown: (e) => e.preventDefault()
     },
     filtered.length === 0 ? /* @__PURE__ */ import_react29.default.createElement("div", { className: "px-4 py-3 text-xs text-slate-500" }, "Nenhum resultado para", " ", /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-slate-300 font-medium" }, '"', query, '"')) : filtered.map((item, idx) => {
       const config = TYPE_CONFIG[item.type] || TYPE_CONFIG.node;
       const { Icon } = config;
+      const isActive = idx === activeIndex;
       return /* @__PURE__ */ import_react29.default.createElement(
         "div",
         {
@@ -14500,11 +14501,11 @@ function MentionPopover({ query, items, position, onSelect, onClose }) {
             onSelect(item);
           },
           onMouseEnter: () => setActiveIndex(idx),
-          className: `flex items-center gap-2.5 px-3 py-2 cursor-pointer text-sm transition-colors duration-100 ${idx === activeIndex ? "bg-indigo-500/20 text-white" : "text-slate-300 hover:bg-white/5"}`
+          className: `flex items-center gap-3 px-3 py-2 cursor-pointer text-sm transition-colors duration-100 ${isActive ? "bg-indigo-500/20 text-white" : "text-slate-300 hover:bg-white/5"}`
         },
-        /* @__PURE__ */ import_react29.default.createElement(Icon, { size: 13, className: config.color }),
-        /* @__PURE__ */ import_react29.default.createElement("span", { className: "flex-1 truncate font-medium" }, item.searchLabel || "Sem Nome"),
-        /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[9px] px-1.5 py-0.5 rounded-full bg-white/5 text-slate-500 border border-white/5 uppercase tracking-wide shrink-0" }, config.label)
+        /* @__PURE__ */ import_react29.default.createElement("div", { className: `w-7 h-7 rounded bg-slate-800 flex items-center justify-center shrink-0 border border-white/5 ${isActive ? "border-indigo-500/50" : ""}` }, /* @__PURE__ */ import_react29.default.createElement(Icon, { size: 14, className: config.color })),
+        /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex-1 min-w-0 flex flex-col py-0.5" }, /* @__PURE__ */ import_react29.default.createElement("span", { className: "truncate font-medium leading-tight" }, item.searchLabel || "Sem Nome"), item.type === "ancestry" ? /* @__PURE__ */ import_react29.default.createElement("span", { className: `text-[10px] truncate flex items-center gap-1 mt-0.5 ${isActive ? "text-indigo-200" : "text-slate-500"}` }, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiCornerUpRight, { size: 10, className: "opacity-70" }), /* @__PURE__ */ import_react29.default.createElement("span", { className: "opacity-70" }, "Origem:"), " ", item.originNodeName) : item.nodeTypeLabel && /* @__PURE__ */ import_react29.default.createElement("span", { className: `text-[10px] uppercase font-bold tracking-tight truncate mt-0.5 ${isActive ? "text-indigo-100" : "text-slate-500"}` }, item.nodeTypeLabel)),
+        /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[9px] px-1.5 py-0.5 rounded-full bg-white/5 text-slate-500 border border-white/5 uppercase tracking-wide shrink-0 self-start mt-1" }, config.label)
       );
     })
   );
@@ -15103,6 +15104,13 @@ function Boards({
       setIsLoaded(true);
     }
   }, [initialBoardItems, isLoaded]);
+  const nodeNamesMap = (0, import_react31.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (availableNodes) {
+      availableNodes.forEach((n) => map.set(String(n.id), n.name));
+    }
+    return map;
+  }, [availableNodes]);
   const allSearchableItems = (0, import_react31.useMemo)(() => {
     const items = [];
     availableAncestries.forEach((anc) => {
@@ -15111,24 +15119,26 @@ function Boards({
         id: String(anc.ancestry_id),
         type: "ancestry",
         searchLabel: anc.name || "",
-        searchDesc: anc.description || ""
+        searchDesc: anc.description || "",
+        originNodeName: nodeNamesMap.get(String(anc.ancestral_node)) || "Node Desconhecido"
       });
     });
     availableNodes.forEach((node) => {
       var _a;
-      let type = "node";
-      if (node.is_quest) type = "quest";
-      else if ((_a = node.version_node) == null ? void 0 : _a.is_version) type = "version";
+      let mentionType = "node";
+      if (node.is_quest) mentionType = "quest";
+      else if ((_a = node.version_node) == null ? void 0 : _a.is_version) mentionType = "version";
       items.push({
         ...node,
         id: String(node.id),
-        type,
+        type: mentionType,
         searchLabel: node.name || node.raw_title || "",
-        searchDesc: node.description || ""
+        searchDesc: node.description || "",
+        nodeTypeLabel: Array.isArray(node.type) ? node.type.join(" \u2022 ") : node.type
       });
     });
     return items;
-  }, [availableAncestries, availableNodes]);
+  }, [availableAncestries, availableNodes, nodeNamesMap]);
   (0, import_react31.useEffect)(() => {
     if (!isLoaded || !onSave) return;
     const id = setTimeout(async () => {

package/dist/index.mjs

@@ -4802,16 +4802,16 @@ function XViewSidebar({
         {
           key: n.id,
           onMouseDown: () => handlePick(n),
-          className: `px-3 py-2 text-sm flex items-center gap-2 cursor-pointer ${selectedNodeId === n.id ? "bg-indigo-600/60 text-white" : "text-slate-200 hover:bg-indigo-500/30"}`,
+          className: `px-3 py-2 text-sm flex items-center gap-3 cursor-pointer ${selectedNodeId === n.id ? "bg-indigo-600/60 text-white" : "text-slate-200 hover:bg-indigo-500/30"}`,
           title: n.name
         },
         /* @__PURE__ */ React2.createElement(
           "span",
           {
-            className: `inline-block h-2 w-2 rounded-full flex-shrink-0 ${isNodeInView(n.id) ? "bg-emerald-400" : "bg-slate-500"}`
+            className: `inline-block h-2 w-2 rounded-full flex-shrink-0 mt-0.5 ${isNodeInView(n.id) ? "bg-emerald-400" : "bg-slate-500"}`
           }
         ),
-        /* @__PURE__ */ React2.createElement("span", { className: "truncate flex-1" }, n.name)
+        /* @__PURE__ */ React2.createElement("div", { className: "flex-1 min-w-0 flex flex-col py-0.5" }, /* @__PURE__ */ React2.createElement("span", { className: "truncate font-medium leading-tight" }, n.name), n.type && /* @__PURE__ */ React2.createElement("span", { className: `text-[10px] uppercase font-bold tracking-tight truncate ${selectedNodeId === n.id ? "text-indigo-100" : "text-slate-500"}` }, Array.isArray(n.type) ? n.type.join(" \u2022 ") : n.type))
       )) : /* @__PURE__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-slate-400" }, "Nenhum resultado"))), /* @__PURE__ */ React2.createElement("div", { className: "mt-3 flex items-center gap-2" }, /* @__PURE__ */ React2.createElement(
         "button",
         {
@@ -14496,7 +14496,7 @@ import React29, { useEffect as useEffect23, useRef as useRef20, useState as useS
 
 // src/components/MentionPopover.jsx
 import React28, { useEffect as useEffect22, useRef as useRef19, useState as useState26, useMemo as useMemo12 } from "react";
-import { FiLayers as FiLayers7, FiCheckSquare as FiCheckSquare3, FiGitBranch as FiGitBranch5, FiBox } from "react-icons/fi";
+import { FiLayers as FiLayers7, FiCheckSquare as FiCheckSquare3, FiGitBranch as FiGitBranch5, FiBox, FiCornerUpRight as FiCornerUpRight4 } from "react-icons/fi";
 var TYPE_CONFIG = {
   ancestry: { Icon: FiLayers7, color: "text-indigo-400", label: "Ancestralidade" },
   quest: { Icon: FiCheckSquare3, color: "text-emerald-400", label: "Quest" },
@@ -14547,13 +14547,14 @@ function MentionPopover({ query, items, position, onSelect, onClose }) {
     "div",
     {
       style: { top: position.top, left: position.left, position: "fixed", zIndex: 9999 },
-      className: "bg-slate-900 border border-white/10 rounded-xl shadow-2xl py-1.5 min-w-[260px] max-h-[240px] overflow-y-auto custom-scrollbar animate-in fade-in zoom-in-95 duration-100",
+      className: "bg-slate-900 border border-white/10 rounded-xl shadow-2xl py-1.5 min-w-[300px] max-h-[320px] overflow-y-auto custom-scrollbar animate-in fade-in zoom-in-95 duration-100",
       ref: listRef,
       onMouseDown: (e) => e.preventDefault()
     },
     filtered.length === 0 ? /* @__PURE__ */ React28.createElement("div", { className: "px-4 py-3 text-xs text-slate-500" }, "Nenhum resultado para", " ", /* @__PURE__ */ React28.createElement("span", { className: "text-slate-300 font-medium" }, '"', query, '"')) : filtered.map((item, idx) => {
       const config = TYPE_CONFIG[item.type] || TYPE_CONFIG.node;
       const { Icon } = config;
+      const isActive = idx === activeIndex;
       return /* @__PURE__ */ React28.createElement(
         "div",
         {
@@ -14563,11 +14564,11 @@ function MentionPopover({ query, items, position, onSelect, onClose }) {
             onSelect(item);
           },
           onMouseEnter: () => setActiveIndex(idx),
-          className: `flex items-center gap-2.5 px-3 py-2 cursor-pointer text-sm transition-colors duration-100 ${idx === activeIndex ? "bg-indigo-500/20 text-white" : "text-slate-300 hover:bg-white/5"}`
+          className: `flex items-center gap-3 px-3 py-2 cursor-pointer text-sm transition-colors duration-100 ${isActive ? "bg-indigo-500/20 text-white" : "text-slate-300 hover:bg-white/5"}`
         },
-        /* @__PURE__ */ React28.createElement(Icon, { size: 13, className: config.color }),
-        /* @__PURE__ */ React28.createElement("span", { className: "flex-1 truncate font-medium" }, item.searchLabel || "Sem Nome"),
-        /* @__PURE__ */ React28.createElement("span", { className: "text-[9px] px-1.5 py-0.5 rounded-full bg-white/5 text-slate-500 border border-white/5 uppercase tracking-wide shrink-0" }, config.label)
+        /* @__PURE__ */ React28.createElement("div", { className: `w-7 h-7 rounded bg-slate-800 flex items-center justify-center shrink-0 border border-white/5 ${isActive ? "border-indigo-500/50" : ""}` }, /* @__PURE__ */ React28.createElement(Icon, { size: 14, className: config.color })),
+        /* @__PURE__ */ React28.createElement("div", { className: "flex-1 min-w-0 flex flex-col py-0.5" }, /* @__PURE__ */ React28.createElement("span", { className: "truncate font-medium leading-tight" }, item.searchLabel || "Sem Nome"), item.type === "ancestry" ? /* @__PURE__ */ React28.createElement("span", { className: `text-[10px] truncate flex items-center gap-1 mt-0.5 ${isActive ? "text-indigo-200" : "text-slate-500"}` }, /* @__PURE__ */ React28.createElement(FiCornerUpRight4, { size: 10, className: "opacity-70" }), /* @__PURE__ */ React28.createElement("span", { className: "opacity-70" }, "Origem:"), " ", item.originNodeName) : item.nodeTypeLabel && /* @__PURE__ */ React28.createElement("span", { className: `text-[10px] uppercase font-bold tracking-tight truncate mt-0.5 ${isActive ? "text-indigo-100" : "text-slate-500"}` }, item.nodeTypeLabel)),
+        /* @__PURE__ */ React28.createElement("span", { className: "text-[9px] px-1.5 py-0.5 rounded-full bg-white/5 text-slate-500 border border-white/5 uppercase tracking-wide shrink-0 self-start mt-1" }, config.label)
       );
     })
   );
@@ -15166,6 +15167,13 @@ function Boards({
       setIsLoaded(true);
     }
   }, [initialBoardItems, isLoaded]);
+  const nodeNamesMap = useMemo13(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (availableNodes) {
+      availableNodes.forEach((n) => map.set(String(n.id), n.name));
+    }
+    return map;
+  }, [availableNodes]);
   const allSearchableItems = useMemo13(() => {
     const items = [];
     availableAncestries.forEach((anc) => {
@@ -15174,24 +15182,26 @@ function Boards({
         id: String(anc.ancestry_id),
         type: "ancestry",
         searchLabel: anc.name || "",
-        searchDesc: anc.description || ""
+        searchDesc: anc.description || "",
+        originNodeName: nodeNamesMap.get(String(anc.ancestral_node)) || "Node Desconhecido"
       });
     });
     availableNodes.forEach((node) => {
       var _a;
-      let type = "node";
-      if (node.is_quest) type = "quest";
-      else if ((_a = node.version_node) == null ? void 0 : _a.is_version) type = "version";
+      let mentionType = "node";
+      if (node.is_quest) mentionType = "quest";
+      else if ((_a = node.version_node) == null ? void 0 : _a.is_version) mentionType = "version";
       items.push({
         ...node,
         id: String(node.id),
-        type,
+        type: mentionType,
         searchLabel: node.name || node.raw_title || "",
-        searchDesc: node.description || ""
+        searchDesc: node.description || "",
+        nodeTypeLabel: Array.isArray(node.type) ? node.type.join(" \u2022 ") : node.type
       });
     });
     return items;
-  }, [availableAncestries, availableNodes]);
+  }, [availableAncestries, availableNodes, nodeNamesMap]);
   useEffect24(() => {
     if (!isLoaded || !onSave) return;
     const id = setTimeout(async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.2.9",
+  "version": "1.3.0-dev.2",
   "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",