npm - @lv-x-software-house/x_view - Versions diffs - 1.1.9-dev.3 → 1.1.9-dev.5 - Mend

@lv-x-software-house/x_view 1.1.9-dev.3 → 1.1.9-dev.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -186,8 +186,8 @@ function ContextMenu({
     return !isVisible;
   }).map((link) => {
     const isSource = String(link.source) === String(data.nodeData.id);
-    const targetNodeId = isSource ? link.target : link.source;
-    const targetNode = nodeMap.get(String(targetNodeId));
+    const targetNodeId2 = isSource ? link.target : link.source;
+    const targetNode = nodeMap.get(String(targetNodeId2));
     return { link, targetNode, direction: isSource ? "outgoing" : "incoming" };
   }).filter((c) => {
     var _a2;
@@ -1812,16 +1812,16 @@ var userActionHandlers = {
     linksToExpand.forEach((link) => {
       var _a;
       const isSource = String(link.source) === String(sourceNode.id);
-      const targetNodeId = isSource ? link.target : link.source;
+      const targetNodeId2 = isSource ? link.target : link.source;
       const linkAlreadyInSceneData = sceneDataRef.current.links.some((l) => String(l.id) === String(link.id));
       if (!linkAlreadyInSceneData) {
         sceneDataRef.current.links.push(link);
       }
-      if (!nodeObjects[String(targetNodeId)]) {
+      if (!nodeObjects[String(targetNodeId2)]) {
         const allParentNodes = Object.values(graphDataRef.current).flatMap((fileData) => fileData.nodes);
-        const nodeData = allParentNodes.find((n) => String(n.id) === String(targetNodeId));
+        const nodeData = allParentNodes.find((n) => String(n.id) === String(targetNodeId2));
         if (!nodeData) {
-          console.warn(`Dados do Node com ID ${targetNodeId} n\xE3o encontrados no cache.`);
+          console.warn(`Dados do Node com ID ${targetNodeId2} n\xE3o encontrados no cache.`);
           return;
         }
         if (!sceneDataRef.current.nodes.some((n) => String(n.id) === String(nodeData.id))) {
@@ -1838,7 +1838,7 @@ var userActionHandlers = {
         if (targetMesh.userData.labelObject) {
           graphGroup.add(targetMesh.userData.labelObject);
         }
-        nodeObjects[String(targetNodeId)] = targetMesh;
+        nodeObjects[String(targetNodeId2)] = targetMesh;
         clickableNodes.push(targetMesh);
         const posTween = new import_tween.Tween(targetMesh.position).to(endPosition, 1200).easing(import_tween.Easing.Quadratic.Out);
         tweenGroup.add(posTween);
@@ -4874,31 +4874,50 @@ function AncestryPickerModal({
 }
 // src/components/CreateAncestryPanel.jsx
-var findNodePath = (tree, targetNodeId, currentPath = []) => {
+var findNodePath = (tree, targetNodeId2, currentPath = []) => {
   var _a;
   if (!tree) return null;
   const currentNodeId = tree.is_section ? tree.section_id : String((_a = tree.node) == null ? void 0 : _a.id);
-  if (String(currentNodeId) === String(targetNodeId)) {
+  if (String(currentNodeId) === String(targetNodeId2)) {
     return { node: tree, path: currentPath };
   }
   if (tree.children) {
     for (let i = 0; i < tree.children.length; i++) {
-      const res = findNodePath(tree.children[i], targetNodeId, [...currentPath, i]);
+      const res = findNodePath(tree.children[i], targetNodeId2, [...currentPath, i]);
       if (res) return res;
     }
   }
   return null;
 };
-var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, onMoveNode, selectedParentId, level = 0, isLast = false, path = [], isEditable }) => {
+var NodeItem = ({ nodeData, onSelectParent, onViewSelect, highlightedPathIds = [], targetRenderNodeId, onRemoveNode, onEditRelationship, onMoveNode, selectedParentId, level = 0, isLast = false, path = [], isEditable }) => {
   var _a, _b;
   const itemId = nodeData.is_section ? nodeData.id : (_a = nodeData.node) == null ? void 0 : _a.id;
   const itemName = nodeData.is_section ? nodeData.name : (_b = nodeData.node) == null ? void 0 : _b.name;
   const [isDragOver, setIsDragOver] = (0, import_react10.useState)(false);
-  const isSelected = String(selectedParentId) === String(itemId);
+  const isSelectedParent = String(selectedParentId) === String(itemId);
+  const isTargetViewNode = String(targetRenderNodeId) === String(itemId);
+  const isHighlightedPath = highlightedPathIds.includes(String(itemId));
   const hasChildren = nodeData.children && nodeData.children.length > 0;
-  const itemBgClass = nodeData.is_section ? isSelected ? "bg-indigo-500/30 ring-2 ring-indigo-400" : "bg-indigo-900/20 border border-indigo-500/30 hover:bg-indigo-900/40" : isSelected ? "bg-cyan-500/20 ring-2 ring-cyan-400" : "bg-slate-900/50 hover:bg-slate-800/80";
-  const textColorClass = nodeData.is_section ? isSelected ? "text-indigo-200 font-bold" : "text-indigo-300" : isSelected ? "text-cyan-200 font-semibold" : "text-slate-200";
-  const cursorClass = isEditable ? "cursor-grab active:cursor-grabbing" : "cursor-default";
+  let itemBgClass = "bg-slate-900/50 hover:bg-slate-800/80";
+  let textColorClass = "text-slate-200";
+  if (nodeData.is_section) {
+    itemBgClass = isSelectedParent ? "bg-indigo-500/30 ring-2 ring-indigo-400" : "bg-indigo-900/20 border border-indigo-500/30 hover:bg-indigo-900/40";
+    textColorClass = isSelectedParent ? "text-indigo-200 font-bold" : "text-indigo-300";
+  } else {
+    if (isSelectedParent) {
+      itemBgClass = "bg-purple-500/30 ring-2 ring-purple-400";
+      textColorClass = "text-purple-200 font-semibold";
+    } else if (isTargetViewNode) {
+      itemBgClass = "bg-fuchsia-600/40 ring-2 ring-fuchsia-400 shadow-[0_0_15px_rgba(217,70,239,0.3)]";
+      textColorClass = "text-white font-bold";
+    } else if (isHighlightedPath) {
+      itemBgClass = "bg-fuchsia-900/30 border border-fuchsia-500/40";
+      textColorClass = "text-fuchsia-200 font-semibold";
+    } else {
+      textColorClass = "text-slate-200";
+    }
+  }
+  const cursorClass = isEditable ? "cursor-grab active:cursor-grabbing" : "cursor-pointer";
   const handleDragStart = (e) => {
     if (!isEditable) {
       e.preventDefault();
@@ -4928,23 +4947,9 @@ var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, on
     if (!isEditable) return;
     const sourceId = e.dataTransfer.getData("nodeId");
     if (sourceId === String(itemId)) return;
-    if (onMoveNode) {
-      onMoveNode(sourceId, itemId);
-    }
+    if (onMoveNode) onMoveNode(sourceId, itemId);
   };
-  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "relative" }, level > 0 && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
-    "span",
-    {
-      className: `absolute -left-4 top-0 w-px bg-cyan-600/60 ${isLast ? "h-[1.125rem]" : "h-full"}`,
-      "aria-hidden": "true"
-    }
-  ), /* @__PURE__ */ import_react10.default.createElement(
-    "span",
-    {
-      className: `absolute -left-4 top-[1.125rem] h-px w-4 bg-cyan-600/60`,
-      "aria-hidden": "true"
-    }
-  )), /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "relative" }, level > 0 && /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement("span", { className: `absolute -left-4 top-0 w-px ${isHighlightedPath ? "bg-fuchsia-500 shadow-[0_0_8px_rgba(217,70,239,0.8)]" : "bg-cyan-600/60"} ${isLast ? "h-[1.125rem]" : "h-full"}`, "aria-hidden": "true" }), /* @__PURE__ */ import_react10.default.createElement("span", { className: `absolute -left-4 top-[1.125rem] h-px w-4 ${isHighlightedPath ? "bg-fuchsia-500 shadow-[0_0_8px_rgba(217,70,239,0.8)]" : "bg-cyan-600/60"}`, "aria-hidden": "true" })), /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       draggable: isEditable,
@@ -4952,63 +4957,35 @@ var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, on
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
-      onClick: () => {
+      onClick: (e) => {
+        e.stopPropagation();
         if (isEditable) {
           onSelectParent(itemId);
+        } else if (onViewSelect) {
+          onViewSelect(itemId);
         }
       },
       className: `flex items-center justify-between gap-2 px-3 h-9 rounded-md transition-all duration-150 border
                       ${isDragOver ? "border-dashed border-yellow-400 bg-yellow-400/10" : "border-transparent"}
                       ${itemBgClass} ${cursorClass}`
     },
-    /* @__PURE__ */ import_react10.default.createElement("span", { className: `truncate flex items-center ${textColorClass}` }, level === 0 && !nodeData.is_section && /* @__PURE__ */ import_react10.default.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: "lucide lucide-blend-icon lucide-blend mr-1.5 inline-block"
-      },
-      /* @__PURE__ */ import_react10.default.createElement("circle", { cx: "9", cy: "9", r: "7" }),
-      /* @__PURE__ */ import_react10.default.createElement("circle", { cx: "15", cy: "15", r: "7" })
-    ), nodeData.is_section && /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiFolder, { className: "mr-2" }), itemName),
-    level > 0 && isEditable && /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-1 animate-in fade-in duration-200" }, !nodeData.is_section && /* @__PURE__ */ import_react10.default.createElement(
-      "button",
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          onEditRelationship(path, nodeData.relationship || {});
-        },
-        className: "w-6 h-6 grid place-content-center rounded-full hover:bg-cyan-500/20 text-cyan-400 transition-colors flex-shrink-0",
-        title: "Editar detalhes da rela\xE7\xE3o",
-        style: { cursor: "pointer" }
-      },
-      /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiEdit2, { size: 12 })
-    ), /* @__PURE__ */ import_react10.default.createElement(
-      "button",
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          onRemoveNode(path);
-        },
-        className: "w-6 h-6 grid place-content-center rounded-full hover:bg-red-500/20 text-red-400 text-lg transition-colors flex-shrink-0",
-        title: "Remover Node da ancestralidade",
-        style: { cursor: "pointer" }
-      },
-      "\xD7"
-    ))
+    /* @__PURE__ */ import_react10.default.createElement("span", { className: `truncate flex items-center ${textColorClass}` }, level === 0 && !nodeData.is_section && /* @__PURE__ */ import_react10.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "mr-1.5 inline-block" }, /* @__PURE__ */ import_react10.default.createElement("circle", { cx: "9", cy: "9", r: "7" }), /* @__PURE__ */ import_react10.default.createElement("circle", { cx: "15", cy: "15", r: "7" })), nodeData.is_section && /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiFolder, { className: "mr-2" }), itemName),
+    level > 0 && isEditable && /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-1 animate-in fade-in duration-200" }, !nodeData.is_section && /* @__PURE__ */ import_react10.default.createElement("button", { onClick: (e) => {
+      e.stopPropagation();
+      onEditRelationship(path, nodeData.relationship || {});
+    }, className: "w-6 h-6 grid place-content-center rounded-full hover:bg-cyan-500/20 text-cyan-400 transition-colors flex-shrink-0", title: "Editar detalhes da rela\xE7\xE3o" }, /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiEdit2, { size: 12 })), /* @__PURE__ */ import_react10.default.createElement("button", { onClick: (e) => {
+      e.stopPropagation();
+      onRemoveNode(path);
+    }, className: "w-6 h-6 grid place-content-center rounded-full hover:bg-red-500/20 text-red-400 text-lg transition-colors flex-shrink-0", title: "Remover Node" }, "\xD7"))
   ), hasChildren && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-2 space-y-2 pl-8" }, nodeData.children.map((child, index) => /* @__PURE__ */ import_react10.default.createElement(
     NodeItem,
     {
       key: `${child.is_section ? child.id : child.node.id}-${index}`,
       nodeData: child,
       onSelectParent,
+      onViewSelect,
+      highlightedPathIds,
+      targetRenderNodeId,
       onRemoveNode,
       onEditRelationship,
       onMoveNode,
@@ -5023,11 +5000,8 @@ var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, on
 function CreateAncestryPanel({
   ancestryMode,
   setAncestryMode,
-  // <--- Nova prop necessária para as novas funções manipuladoras
   onSelectParent,
-  // Mantido para compatibilidade, mas as novas funções usam setAncestryMode
   onRemoveNode,
-  // Mantido para compatibilidade
   onSave,
   onClose,
   onEditRelationship,
@@ -5038,14 +5012,12 @@ function CreateAncestryPanel({
   onUpdateTree,
   onAncestrySectionChange,
   onToggleAddNodes,
-  // Mantido para compatibilidade
   onRenderFullAncestry,
   onHighlightNode,
   onClearAncestryVisuals,
   onUploadFile,
   onOpenImageViewer,
   onRenderAbstractionTree
-  // <--- Nova prop recebida
 }) {
   const {
     tree: rootTree,
@@ -5062,6 +5034,20 @@ function CreateAncestryPanel({
   const [customProps, setCustomProps] = (0, import_react10.useState)([]);
   const propsEndRef = (0, import_react10.useRef)(null);
   const [branchStack, setBranchStack] = (0, import_react10.useState)([]);
+  const [targetRenderNodeId, setTargetRenderNodeId] = (0, import_react10.useState)(null);
+  const highlightedPathIds = (0, import_react10.useMemo)(() => {
+    var _a, _b;
+    if (!targetRenderNodeId || !ancestryMode.abstraction_tree) return [];
+    const found = findNodePath(ancestryMode.abstraction_tree, targetRenderNodeId);
+    if (!found) return [];
+    let current = ancestryMode.abstraction_tree;
+    const ids = [current.is_section ? current.section_id : String((_a = current.node) == null ? void 0 : _a.id)];
+    for (let i of found.path) {
+      current = current.children[i];
+      ids.push(current.is_section ? current.section_id : String((_b = current.node) == null ? void 0 : _b.id));
+    }
+    return ids;
+  }, [targetRenderNodeId, ancestryMode.abstraction_tree]);
   const [targetScrollSectionId, setTargetScrollSectionId] = (0, import_react10.useState)(null);
   const [internalHighlightedNodeId, setInternalHighlightedNodeId] = (0, import_react10.useState)(null);
   const [ancestryName, setAncestryName] = (0, import_react10.useState)(initialName);
@@ -5085,6 +5071,9 @@ function CreateAncestryPanel({
     setAncestryMode((prev) => isAbstraction ? { ...prev, selectedAbstractionParentId: nodeId } : { ...prev, selectedParentId: nodeId });
   };
   const handleToggleAddMode = (isAbstraction = false) => {
+    if (isAbstraction && !ancestryMode.isAddingAbstractionNodes) {
+      setTargetRenderNodeId(null);
+    }
     setAncestryMode((prev) => isAbstraction ? { ...prev, isAddingAbstractionNodes: !prev.isAddingAbstractionNodes } : { ...prev, isAddingNodes: !prev.isAddingNodes });
   };
   const handleRemoveNode = (0, import_react10.useCallback)((pathToRemove, isAbstraction = false) => {
@@ -6220,44 +6209,77 @@ function CreateAncestryPanel({
         path: [],
         isEditable: isAddingNodes
       }
-    ), (!activeTree || activeTree.children.length === 0) && !isAddingNodes && /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center py-4 text-xs text-slate-500 italic" }, "A estrutura est\xE1 vazia. Clique no l\xE1pis acima para adicionar nodes."))), branchStack.length === 0 && ancestryMode.abstraction_tree && /* @__PURE__ */ import_react10.default.createElement("div", { className: `mt-6 rounded-lg border transition-all duration-300 overflow-hidden ${ancestryMode.isAddingAbstractionNodes ? "border-purple-500/40 bg-slate-900/60 ring-1 ring-purple-500/20" : "border-white/10 bg-slate-800/60"}` }, /* @__PURE__ */ import_react10.default.createElement("div", { className: `flex items-center justify-between px-3 py-2 border-b ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-900/20 border-purple-500/20" : "bg-white/5 border-white/5"}` }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: `text-xs font-semibold uppercase tracking-wider ${ancestryMode.isAddingAbstractionNodes ? "text-purple-300" : "text-slate-400"}` }, "Estrutura de Abstra\xE7\xE3o"), ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[10px] bg-purple-500/20 text-purple-300 px-1.5 py-0.5 rounded animate-pulse" }, "Editando")), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react10.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          const tempPayload = {
-            ancestry_id: currentAncestryId || "temp_rendering",
-            abstraction_tree: ancestryMode.abstraction_tree
-          };
-          if (onRenderAbstractionTree) onRenderAbstractionTree(tempPayload);
-        },
-        className: "p-1.5 rounded-md bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600 transition-colors",
-        title: "Renderizar Verticalmente no Cen\xE1rio"
-      },
-      /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiLayers, { size: 14 })
-    ), /* @__PURE__ */ import_react10.default.createElement(
-      "button",
+    ), (!activeTree || activeTree.children.length === 0) && !isAddingNodes && /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center py-4 text-xs text-slate-500 italic" }, "A estrutura est\xE1 vazia. Clique no l\xE1pis acima para adicionar nodes."))), branchStack.length === 0 && ancestryMode.abstraction_tree && /* @__PURE__ */ import_react10.default.createElement(
+      "div",
       {
-        onClick: () => handleToggleAddMode(true),
-        className: `p-1.5 rounded-md transition-colors ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-500 text-white shadow-lg shadow-purple-500/30" : "bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600"}`,
-        title: "Editar estrutura da abstra\xE7\xE3o"
+        className: `mt-6 rounded-lg border transition-all duration-300 overflow-hidden ${ancestryMode.isAddingAbstractionNodes ? "border-purple-500/40 bg-slate-900/60 ring-1 ring-purple-500/20" : "border-white/10 bg-slate-800/60"}`,
+        onClick: () => setTargetRenderNodeId(null)
       },
-      ancestryMode.isAddingAbstractionNodes ? /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiCheck, { size: 14 }) : /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiEdit2, { size: 14 })
-    ))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "p-4 space-y-2" }, ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mb-3 p-2 rounded bg-purple-900/20 border border-purple-500/20 text-xs text-purple-200 flex items-start gap-2" }, /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiMousePointer, { className: "mt-0.5 flex-shrink-0" }), /* @__PURE__ */ import_react10.default.createElement("span", null, "Clique nos nodes do cen\xE1rio para adicion\xE1-los. Arraste e solte para organizar a hierarquia.")), /* @__PURE__ */ import_react10.default.createElement(
-      NodeItem,
-      {
-        nodeData: ancestryMode.abstraction_tree,
-        onSelectParent: (id) => handleSelectAncestryParent(id, true),
-        onRemoveNode: (path) => handleRemoveNode(path, true),
-        onEditRelationship,
-        onMoveNode: (s, t) => handleMoveNode(s, t, true),
-        selectedParentId: ancestryMode.selectedAbstractionParentId,
-        level: 0,
-        isLast: true,
-        path: [],
-        isEditable: ancestryMode.isAddingAbstractionNodes
-      }
-    ))), branchStack.length === 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-3 flex items-center justify-end px-1" }, /* @__PURE__ */ import_react10.default.createElement("label", { className: "flex items-center gap-2 cursor-pointer group select-none" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center transition-colors ${isPrivate ? "bg-indigo-500 border-indigo-500" : "border-slate-500 bg-transparent"}` }, isPrivate && /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiCheck, { size: 12, className: "text-white" })), /* @__PURE__ */ import_react10.default.createElement(
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: `flex items-center justify-between px-3 py-2 border-b ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-900/20 border-purple-500/20" : "bg-white/5 border-white/5"}` }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: `text-xs font-semibold uppercase tracking-wider ${ancestryMode.isAddingAbstractionNodes ? "text-purple-300" : "text-slate-400"}` }, "Estrutura de Abstra\xE7\xE3o"), ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[10px] bg-purple-500/20 text-purple-300 px-1.5 py-0.5 rounded animate-pulse" }, "Editando")), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, targetRenderNodeId && !ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ import_react10.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            const tempPayload = {
+              ancestry_id: currentAncestryId || "temp_rendering",
+              abstraction_tree: ancestryMode.abstraction_tree
+            };
+            if (onRenderAbstractionTree) onRenderAbstractionTree(tempPayload, targetRenderNodeId);
+          },
+          className: "px-2 py-1.5 rounded-md bg-fuchsia-600 text-white hover:bg-fuchsia-500 transition-colors flex items-center gap-1 shadow-lg animate-in fade-in zoom-in",
+          title: "Renderizar cen\xE1rio at\xE9 o caminho selecionado"
+        },
+        /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiLayers, { size: 13 }),
+        /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[10px] font-bold uppercase tracking-wider" }, "Caminho")
+      ), /* @__PURE__ */ import_react10.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            const tempPayload = {
+              ancestry_id: currentAncestryId || "temp_rendering",
+              abstraction_tree: ancestryMode.abstraction_tree
+            };
+            if (onRenderAbstractionTree) onRenderAbstractionTree(tempPayload);
+          },
+          className: "p-1.5 rounded-md bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600 transition-colors",
+          title: "Renderizar Verticalmente Completo"
+        },
+        /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiLayers, { size: 14 })
+      ), /* @__PURE__ */ import_react10.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleToggleAddMode(true);
+          },
+          className: `p-1.5 rounded-md transition-colors ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-500 text-white shadow-lg shadow-purple-500/30" : "bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600"}`,
+          title: "Editar estrutura da abstra\xE7\xE3o"
+        },
+        ancestryMode.isAddingAbstractionNodes ? /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiCheck, { size: 14 }) : /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiEdit2, { size: 14 })
+      ))),
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "p-4 space-y-2" }, ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mb-3 p-2 rounded bg-purple-900/20 border border-purple-500/20 text-xs text-purple-200 flex items-start gap-2" }, /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiMousePointer, { className: "mt-0.5 flex-shrink-0" }), /* @__PURE__ */ import_react10.default.createElement("span", null, "Clique nos nodes do cen\xE1rio para adicion\xE1-los. Arraste e solte para organizar a hierarquia.")), /* @__PURE__ */ import_react10.default.createElement(
+        NodeItem,
+        {
+          nodeData: ancestryMode.abstraction_tree,
+          onSelectParent: (id) => handleSelectAncestryParent(id, true),
+          onViewSelect: setTargetRenderNodeId,
+          highlightedPathIds,
+          targetRenderNodeId,
+          onRemoveNode: (path) => handleRemoveNode(path, true),
+          onEditRelationship,
+          onMoveNode: (s, t) => handleMoveNode(s, t, true),
+          selectedParentId: ancestryMode.selectedAbstractionParentId,
+          level: 0,
+          isLast: true,
+          path: [],
+          isEditable: ancestryMode.isAddingAbstractionNodes
+        }
+      ))
+    ), branchStack.length === 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-3 flex items-center justify-end px-1" }, /* @__PURE__ */ import_react10.default.createElement("label", { className: "flex items-center gap-2 cursor-pointer group select-none" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center transition-colors ${isPrivate ? "bg-indigo-500 border-indigo-500" : "border-slate-500 bg-transparent"}` }, isPrivate && /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiCheck, { size: 12, className: "text-white" })), /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         type: "checkbox",
@@ -8775,16 +8797,16 @@ var getAllNodeIdsFromTree = (treeNode) => {
   traverse(treeNode);
   return Array.from(ids);
 };
-var findNodePath2 = (tree, targetNodeId, currentPath = []) => {
+var findNodePath2 = (tree, targetNodeId2, currentPath = []) => {
   var _a;
   if (!tree) return null;
   const currentNodeId = tree.is_section ? tree.section_id : String((_a = tree.node) == null ? void 0 : _a.id);
-  if (String(currentNodeId) === String(targetNodeId)) {
+  if (String(currentNodeId) === String(targetNodeId2)) {
     return { node: tree, path: currentPath };
   }
   if (tree.children) {
     for (let i = 0; i < tree.children.length; i++) {
-      const res = findNodePath2(tree.children[i], targetNodeId, [...currentPath, i]);
+      const res = findNodePath2(tree.children[i], targetNodeId2, [...currentPath, i]);
       if (res) return res;
     }
   }
@@ -10858,8 +10880,29 @@ function XViewScene({
     if (!ancestryObject || !ancestryObject.abstraction_tree) return;
     const { ancestryGroup, nodeObjects, renderer, renderedAncestries } = stateRef.current;
     const allParentNodes = Object.values(parentDataRef.current).flatMap((f) => f.nodes);
-    const fullTree = buildFullAncestryTree(ancestryObject.abstraction_tree, allParentNodes, ancestryDataRef.current);
+    let fullTree = buildFullAncestryTree(ancestryObject.abstraction_tree, allParentNodes, ancestryDataRef.current);
     if (!fullTree || !fullTree.node) return;
+    if (targetNodeId) {
+      const pruneTreeToPath = (treeNode, targetId) => {
+        var _a2;
+        if (!treeNode) return null;
+        const currentId = treeNode.is_section ? treeNode.section_id : String((_a2 = treeNode.node) == null ? void 0 : _a2.id);
+        if (String(currentId) === String(targetId)) {
+          return { ...treeNode, children: [] };
+        }
+        if (treeNode.children && treeNode.children.length > 0) {
+          for (let child of treeNode.children) {
+            const prunedChild = pruneTreeToPath(child, targetId);
+            if (prunedChild) {
+              return { ...treeNode, children: [prunedChild] };
+            }
+          }
+        }
+        return null;
+      };
+      const pruned = pruneTreeToPath(fullTree, targetNodeId);
+      if (pruned) fullTree = pruned;
+    }
     const absId = ancestryObject.ancestry_id + "_abs";
     handleClearAncestryVisuals(absId);
     const colorHex = 9133302;
@@ -11871,7 +11914,7 @@ function XViewScene({
         onClearAncestryVisuals: handleClearAncestryVisuals,
         onUploadFile: upload_file_action,
         onOpenImageViewer: handleOpenImageViewer,
-        onRenderAbstractionTree: (data) => handleRenderAbstractionTree(data)
+        onRenderAbstractionTree: (data, targetId) => handleRenderAbstractionTree(data, targetId)
       }
     ),
     editingAncestryRel.visible && /* @__PURE__ */ import_react23.default.createElement(

package/dist/index.mjs CHANGED Viewed

@@ -142,8 +142,8 @@ function ContextMenu({
     return !isVisible;
   }).map((link) => {
     const isSource = String(link.source) === String(data.nodeData.id);
-    const targetNodeId = isSource ? link.target : link.source;
-    const targetNode = nodeMap.get(String(targetNodeId));
+    const targetNodeId2 = isSource ? link.target : link.source;
+    const targetNode = nodeMap.get(String(targetNodeId2));
     return { link, targetNode, direction: isSource ? "outgoing" : "incoming" };
   }).filter((c) => {
     var _a2;
@@ -1768,16 +1768,16 @@ var userActionHandlers = {
     linksToExpand.forEach((link) => {
       var _a;
       const isSource = String(link.source) === String(sourceNode.id);
-      const targetNodeId = isSource ? link.target : link.source;
+      const targetNodeId2 = isSource ? link.target : link.source;
       const linkAlreadyInSceneData = sceneDataRef.current.links.some((l) => String(l.id) === String(link.id));
       if (!linkAlreadyInSceneData) {
         sceneDataRef.current.links.push(link);
       }
-      if (!nodeObjects[String(targetNodeId)]) {
+      if (!nodeObjects[String(targetNodeId2)]) {
         const allParentNodes = Object.values(graphDataRef.current).flatMap((fileData) => fileData.nodes);
-        const nodeData = allParentNodes.find((n) => String(n.id) === String(targetNodeId));
+        const nodeData = allParentNodes.find((n) => String(n.id) === String(targetNodeId2));
         if (!nodeData) {
-          console.warn(`Dados do Node com ID ${targetNodeId} n\xE3o encontrados no cache.`);
+          console.warn(`Dados do Node com ID ${targetNodeId2} n\xE3o encontrados no cache.`);
           return;
         }
         if (!sceneDataRef.current.nodes.some((n) => String(n.id) === String(nodeData.id))) {
@@ -1794,7 +1794,7 @@ var userActionHandlers = {
         if (targetMesh.userData.labelObject) {
           graphGroup.add(targetMesh.userData.labelObject);
         }
-        nodeObjects[String(targetNodeId)] = targetMesh;
+        nodeObjects[String(targetNodeId2)] = targetMesh;
         clickableNodes.push(targetMesh);
         const posTween = new Tween(targetMesh.position).to(endPosition, 1200).easing(Easing.Quadratic.Out);
         tweenGroup.add(posTween);
@@ -4855,31 +4855,50 @@ function AncestryPickerModal({
 }
 // src/components/CreateAncestryPanel.jsx
-var findNodePath = (tree, targetNodeId, currentPath = []) => {
+var findNodePath = (tree, targetNodeId2, currentPath = []) => {
   var _a;
   if (!tree) return null;
   const currentNodeId = tree.is_section ? tree.section_id : String((_a = tree.node) == null ? void 0 : _a.id);
-  if (String(currentNodeId) === String(targetNodeId)) {
+  if (String(currentNodeId) === String(targetNodeId2)) {
     return { node: tree, path: currentPath };
   }
   if (tree.children) {
     for (let i = 0; i < tree.children.length; i++) {
-      const res = findNodePath(tree.children[i], targetNodeId, [...currentPath, i]);
+      const res = findNodePath(tree.children[i], targetNodeId2, [...currentPath, i]);
       if (res) return res;
     }
   }
   return null;
 };
-var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, onMoveNode, selectedParentId, level = 0, isLast = false, path = [], isEditable }) => {
+var NodeItem = ({ nodeData, onSelectParent, onViewSelect, highlightedPathIds = [], targetRenderNodeId, onRemoveNode, onEditRelationship, onMoveNode, selectedParentId, level = 0, isLast = false, path = [], isEditable }) => {
   var _a, _b;
   const itemId = nodeData.is_section ? nodeData.id : (_a = nodeData.node) == null ? void 0 : _a.id;
   const itemName = nodeData.is_section ? nodeData.name : (_b = nodeData.node) == null ? void 0 : _b.name;
   const [isDragOver, setIsDragOver] = useState10(false);
-  const isSelected = String(selectedParentId) === String(itemId);
+  const isSelectedParent = String(selectedParentId) === String(itemId);
+  const isTargetViewNode = String(targetRenderNodeId) === String(itemId);
+  const isHighlightedPath = highlightedPathIds.includes(String(itemId));
   const hasChildren = nodeData.children && nodeData.children.length > 0;
-  const itemBgClass = nodeData.is_section ? isSelected ? "bg-indigo-500/30 ring-2 ring-indigo-400" : "bg-indigo-900/20 border border-indigo-500/30 hover:bg-indigo-900/40" : isSelected ? "bg-cyan-500/20 ring-2 ring-cyan-400" : "bg-slate-900/50 hover:bg-slate-800/80";
-  const textColorClass = nodeData.is_section ? isSelected ? "text-indigo-200 font-bold" : "text-indigo-300" : isSelected ? "text-cyan-200 font-semibold" : "text-slate-200";
-  const cursorClass = isEditable ? "cursor-grab active:cursor-grabbing" : "cursor-default";
+  let itemBgClass = "bg-slate-900/50 hover:bg-slate-800/80";
+  let textColorClass = "text-slate-200";
+  if (nodeData.is_section) {
+    itemBgClass = isSelectedParent ? "bg-indigo-500/30 ring-2 ring-indigo-400" : "bg-indigo-900/20 border border-indigo-500/30 hover:bg-indigo-900/40";
+    textColorClass = isSelectedParent ? "text-indigo-200 font-bold" : "text-indigo-300";
+  } else {
+    if (isSelectedParent) {
+      itemBgClass = "bg-purple-500/30 ring-2 ring-purple-400";
+      textColorClass = "text-purple-200 font-semibold";
+    } else if (isTargetViewNode) {
+      itemBgClass = "bg-fuchsia-600/40 ring-2 ring-fuchsia-400 shadow-[0_0_15px_rgba(217,70,239,0.3)]";
+      textColorClass = "text-white font-bold";
+    } else if (isHighlightedPath) {
+      itemBgClass = "bg-fuchsia-900/30 border border-fuchsia-500/40";
+      textColorClass = "text-fuchsia-200 font-semibold";
+    } else {
+      textColorClass = "text-slate-200";
+    }
+  }
+  const cursorClass = isEditable ? "cursor-grab active:cursor-grabbing" : "cursor-pointer";
   const handleDragStart = (e) => {
     if (!isEditable) {
       e.preventDefault();
@@ -4909,23 +4928,9 @@ var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, on
     if (!isEditable) return;
     const sourceId = e.dataTransfer.getData("nodeId");
     if (sourceId === String(itemId)) return;
-    if (onMoveNode) {
-      onMoveNode(sourceId, itemId);
-    }
+    if (onMoveNode) onMoveNode(sourceId, itemId);
   };
-  return /* @__PURE__ */ React10.createElement("div", { className: "relative" }, level > 0 && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
-    "span",
-    {
-      className: `absolute -left-4 top-0 w-px bg-cyan-600/60 ${isLast ? "h-[1.125rem]" : "h-full"}`,
-      "aria-hidden": "true"
-    }
-  ), /* @__PURE__ */ React10.createElement(
-    "span",
-    {
-      className: `absolute -left-4 top-[1.125rem] h-px w-4 bg-cyan-600/60`,
-      "aria-hidden": "true"
-    }
-  )), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React10.createElement("div", { className: "relative" }, level > 0 && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", { className: `absolute -left-4 top-0 w-px ${isHighlightedPath ? "bg-fuchsia-500 shadow-[0_0_8px_rgba(217,70,239,0.8)]" : "bg-cyan-600/60"} ${isLast ? "h-[1.125rem]" : "h-full"}`, "aria-hidden": "true" }), /* @__PURE__ */ React10.createElement("span", { className: `absolute -left-4 top-[1.125rem] h-px w-4 ${isHighlightedPath ? "bg-fuchsia-500 shadow-[0_0_8px_rgba(217,70,239,0.8)]" : "bg-cyan-600/60"}`, "aria-hidden": "true" })), /* @__PURE__ */ React10.createElement(
     "div",
     {
       draggable: isEditable,
@@ -4933,63 +4938,35 @@ var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, on
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
-      onClick: () => {
+      onClick: (e) => {
+        e.stopPropagation();
         if (isEditable) {
           onSelectParent(itemId);
+        } else if (onViewSelect) {
+          onViewSelect(itemId);
         }
       },
       className: `flex items-center justify-between gap-2 px-3 h-9 rounded-md transition-all duration-150 border
                       ${isDragOver ? "border-dashed border-yellow-400 bg-yellow-400/10" : "border-transparent"}
                       ${itemBgClass} ${cursorClass}`
     },
-    /* @__PURE__ */ React10.createElement("span", { className: `truncate flex items-center ${textColorClass}` }, level === 0 && !nodeData.is_section && /* @__PURE__ */ React10.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "16",
-        height: "16",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        className: "lucide lucide-blend-icon lucide-blend mr-1.5 inline-block"
-      },
-      /* @__PURE__ */ React10.createElement("circle", { cx: "9", cy: "9", r: "7" }),
-      /* @__PURE__ */ React10.createElement("circle", { cx: "15", cy: "15", r: "7" })
-    ), nodeData.is_section && /* @__PURE__ */ React10.createElement(FiFolder, { className: "mr-2" }), itemName),
-    level > 0 && isEditable && /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-1 animate-in fade-in duration-200" }, !nodeData.is_section && /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          onEditRelationship(path, nodeData.relationship || {});
-        },
-        className: "w-6 h-6 grid place-content-center rounded-full hover:bg-cyan-500/20 text-cyan-400 transition-colors flex-shrink-0",
-        title: "Editar detalhes da rela\xE7\xE3o",
-        style: { cursor: "pointer" }
-      },
-      /* @__PURE__ */ React10.createElement(FiEdit23, { size: 12 })
-    ), /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          onRemoveNode(path);
-        },
-        className: "w-6 h-6 grid place-content-center rounded-full hover:bg-red-500/20 text-red-400 text-lg transition-colors flex-shrink-0",
-        title: "Remover Node da ancestralidade",
-        style: { cursor: "pointer" }
-      },
-      "\xD7"
-    ))
+    /* @__PURE__ */ React10.createElement("span", { className: `truncate flex items-center ${textColorClass}` }, level === 0 && !nodeData.is_section && /* @__PURE__ */ React10.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "mr-1.5 inline-block" }, /* @__PURE__ */ React10.createElement("circle", { cx: "9", cy: "9", r: "7" }), /* @__PURE__ */ React10.createElement("circle", { cx: "15", cy: "15", r: "7" })), nodeData.is_section && /* @__PURE__ */ React10.createElement(FiFolder, { className: "mr-2" }), itemName),
+    level > 0 && isEditable && /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-1 animate-in fade-in duration-200" }, !nodeData.is_section && /* @__PURE__ */ React10.createElement("button", { onClick: (e) => {
+      e.stopPropagation();
+      onEditRelationship(path, nodeData.relationship || {});
+    }, className: "w-6 h-6 grid place-content-center rounded-full hover:bg-cyan-500/20 text-cyan-400 transition-colors flex-shrink-0", title: "Editar detalhes da rela\xE7\xE3o" }, /* @__PURE__ */ React10.createElement(FiEdit23, { size: 12 })), /* @__PURE__ */ React10.createElement("button", { onClick: (e) => {
+      e.stopPropagation();
+      onRemoveNode(path);
+    }, className: "w-6 h-6 grid place-content-center rounded-full hover:bg-red-500/20 text-red-400 text-lg transition-colors flex-shrink-0", title: "Remover Node" }, "\xD7"))
   ), hasChildren && /* @__PURE__ */ React10.createElement("div", { className: "mt-2 space-y-2 pl-8" }, nodeData.children.map((child, index) => /* @__PURE__ */ React10.createElement(
     NodeItem,
     {
       key: `${child.is_section ? child.id : child.node.id}-${index}`,
       nodeData: child,
       onSelectParent,
+      onViewSelect,
+      highlightedPathIds,
+      targetRenderNodeId,
       onRemoveNode,
       onEditRelationship,
       onMoveNode,
@@ -5004,11 +4981,8 @@ var NodeItem = ({ nodeData, onSelectParent, onRemoveNode, onEditRelationship, on
 function CreateAncestryPanel({
   ancestryMode,
   setAncestryMode,
-  // <--- Nova prop necessária para as novas funções manipuladoras
   onSelectParent,
-  // Mantido para compatibilidade, mas as novas funções usam setAncestryMode
   onRemoveNode,
-  // Mantido para compatibilidade
   onSave,
   onClose,
   onEditRelationship,
@@ -5019,14 +4993,12 @@ function CreateAncestryPanel({
   onUpdateTree,
   onAncestrySectionChange,
   onToggleAddNodes,
-  // Mantido para compatibilidade
   onRenderFullAncestry,
   onHighlightNode,
   onClearAncestryVisuals,
   onUploadFile,
   onOpenImageViewer,
   onRenderAbstractionTree
-  // <--- Nova prop recebida
 }) {
   const {
     tree: rootTree,
@@ -5043,6 +5015,20 @@ function CreateAncestryPanel({
   const [customProps, setCustomProps] = useState10([]);
   const propsEndRef = useRef8(null);
   const [branchStack, setBranchStack] = useState10([]);
+  const [targetRenderNodeId, setTargetRenderNodeId] = useState10(null);
+  const highlightedPathIds = useMemo8(() => {
+    var _a, _b;
+    if (!targetRenderNodeId || !ancestryMode.abstraction_tree) return [];
+    const found = findNodePath(ancestryMode.abstraction_tree, targetRenderNodeId);
+    if (!found) return [];
+    let current = ancestryMode.abstraction_tree;
+    const ids = [current.is_section ? current.section_id : String((_a = current.node) == null ? void 0 : _a.id)];
+    for (let i of found.path) {
+      current = current.children[i];
+      ids.push(current.is_section ? current.section_id : String((_b = current.node) == null ? void 0 : _b.id));
+    }
+    return ids;
+  }, [targetRenderNodeId, ancestryMode.abstraction_tree]);
   const [targetScrollSectionId, setTargetScrollSectionId] = useState10(null);
   const [internalHighlightedNodeId, setInternalHighlightedNodeId] = useState10(null);
   const [ancestryName, setAncestryName] = useState10(initialName);
@@ -5066,6 +5052,9 @@ function CreateAncestryPanel({
     setAncestryMode((prev) => isAbstraction ? { ...prev, selectedAbstractionParentId: nodeId } : { ...prev, selectedParentId: nodeId });
   };
   const handleToggleAddMode = (isAbstraction = false) => {
+    if (isAbstraction && !ancestryMode.isAddingAbstractionNodes) {
+      setTargetRenderNodeId(null);
+    }
     setAncestryMode((prev) => isAbstraction ? { ...prev, isAddingAbstractionNodes: !prev.isAddingAbstractionNodes } : { ...prev, isAddingNodes: !prev.isAddingNodes });
   };
   const handleRemoveNode = useCallback((pathToRemove, isAbstraction = false) => {
@@ -6201,44 +6190,77 @@ function CreateAncestryPanel({
         path: [],
         isEditable: isAddingNodes
       }
-    ), (!activeTree || activeTree.children.length === 0) && !isAddingNodes && /* @__PURE__ */ React10.createElement("div", { className: "text-center py-4 text-xs text-slate-500 italic" }, "A estrutura est\xE1 vazia. Clique no l\xE1pis acima para adicionar nodes."))), branchStack.length === 0 && ancestryMode.abstraction_tree && /* @__PURE__ */ React10.createElement("div", { className: `mt-6 rounded-lg border transition-all duration-300 overflow-hidden ${ancestryMode.isAddingAbstractionNodes ? "border-purple-500/40 bg-slate-900/60 ring-1 ring-purple-500/20" : "border-white/10 bg-slate-800/60"}` }, /* @__PURE__ */ React10.createElement("div", { className: `flex items-center justify-between px-3 py-2 border-b ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-900/20 border-purple-500/20" : "bg-white/5 border-white/5"}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React10.createElement("span", { className: `text-xs font-semibold uppercase tracking-wider ${ancestryMode.isAddingAbstractionNodes ? "text-purple-300" : "text-slate-400"}` }, "Estrutura de Abstra\xE7\xE3o"), ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] bg-purple-500/20 text-purple-300 px-1.5 py-0.5 rounded animate-pulse" }, "Editando")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          const tempPayload = {
-            ancestry_id: currentAncestryId || "temp_rendering",
-            abstraction_tree: ancestryMode.abstraction_tree
-          };
-          if (onRenderAbstractionTree) onRenderAbstractionTree(tempPayload);
-        },
-        className: "p-1.5 rounded-md bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600 transition-colors",
-        title: "Renderizar Verticalmente no Cen\xE1rio"
-      },
-      /* @__PURE__ */ React10.createElement(FiLayers5, { size: 14 })
-    ), /* @__PURE__ */ React10.createElement(
-      "button",
+    ), (!activeTree || activeTree.children.length === 0) && !isAddingNodes && /* @__PURE__ */ React10.createElement("div", { className: "text-center py-4 text-xs text-slate-500 italic" }, "A estrutura est\xE1 vazia. Clique no l\xE1pis acima para adicionar nodes."))), branchStack.length === 0 && ancestryMode.abstraction_tree && /* @__PURE__ */ React10.createElement(
+      "div",
       {
-        onClick: () => handleToggleAddMode(true),
-        className: `p-1.5 rounded-md transition-colors ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-500 text-white shadow-lg shadow-purple-500/30" : "bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600"}`,
-        title: "Editar estrutura da abstra\xE7\xE3o"
+        className: `mt-6 rounded-lg border transition-all duration-300 overflow-hidden ${ancestryMode.isAddingAbstractionNodes ? "border-purple-500/40 bg-slate-900/60 ring-1 ring-purple-500/20" : "border-white/10 bg-slate-800/60"}`,
+        onClick: () => setTargetRenderNodeId(null)
       },
-      ancestryMode.isAddingAbstractionNodes ? /* @__PURE__ */ React10.createElement(FiCheck4, { size: 14 }) : /* @__PURE__ */ React10.createElement(FiEdit23, { size: 14 })
-    ))), /* @__PURE__ */ React10.createElement("div", { className: "p-4 space-y-2" }, ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ React10.createElement("div", { className: "mb-3 p-2 rounded bg-purple-900/20 border border-purple-500/20 text-xs text-purple-200 flex items-start gap-2" }, /* @__PURE__ */ React10.createElement(FiMousePointer, { className: "mt-0.5 flex-shrink-0" }), /* @__PURE__ */ React10.createElement("span", null, "Clique nos nodes do cen\xE1rio para adicion\xE1-los. Arraste e solte para organizar a hierarquia.")), /* @__PURE__ */ React10.createElement(
-      NodeItem,
-      {
-        nodeData: ancestryMode.abstraction_tree,
-        onSelectParent: (id) => handleSelectAncestryParent(id, true),
-        onRemoveNode: (path) => handleRemoveNode(path, true),
-        onEditRelationship,
-        onMoveNode: (s, t) => handleMoveNode(s, t, true),
-        selectedParentId: ancestryMode.selectedAbstractionParentId,
-        level: 0,
-        isLast: true,
-        path: [],
-        isEditable: ancestryMode.isAddingAbstractionNodes
-      }
-    ))), branchStack.length === 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-3 flex items-center justify-end px-1" }, /* @__PURE__ */ React10.createElement("label", { className: "flex items-center gap-2 cursor-pointer group select-none" }, /* @__PURE__ */ React10.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center transition-colors ${isPrivate ? "bg-indigo-500 border-indigo-500" : "border-slate-500 bg-transparent"}` }, isPrivate && /* @__PURE__ */ React10.createElement(FiCheck4, { size: 12, className: "text-white" })), /* @__PURE__ */ React10.createElement(
+      /* @__PURE__ */ React10.createElement("div", { className: `flex items-center justify-between px-3 py-2 border-b ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-900/20 border-purple-500/20" : "bg-white/5 border-white/5"}` }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React10.createElement("span", { className: `text-xs font-semibold uppercase tracking-wider ${ancestryMode.isAddingAbstractionNodes ? "text-purple-300" : "text-slate-400"}` }, "Estrutura de Abstra\xE7\xE3o"), ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] bg-purple-500/20 text-purple-300 px-1.5 py-0.5 rounded animate-pulse" }, "Editando")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-2" }, targetRenderNodeId && !ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ React10.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            const tempPayload = {
+              ancestry_id: currentAncestryId || "temp_rendering",
+              abstraction_tree: ancestryMode.abstraction_tree
+            };
+            if (onRenderAbstractionTree) onRenderAbstractionTree(tempPayload, targetRenderNodeId);
+          },
+          className: "px-2 py-1.5 rounded-md bg-fuchsia-600 text-white hover:bg-fuchsia-500 transition-colors flex items-center gap-1 shadow-lg animate-in fade-in zoom-in",
+          title: "Renderizar cen\xE1rio at\xE9 o caminho selecionado"
+        },
+        /* @__PURE__ */ React10.createElement(FiLayers5, { size: 13 }),
+        /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] font-bold uppercase tracking-wider" }, "Caminho")
+      ), /* @__PURE__ */ React10.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            const tempPayload = {
+              ancestry_id: currentAncestryId || "temp_rendering",
+              abstraction_tree: ancestryMode.abstraction_tree
+            };
+            if (onRenderAbstractionTree) onRenderAbstractionTree(tempPayload);
+          },
+          className: "p-1.5 rounded-md bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600 transition-colors",
+          title: "Renderizar Verticalmente Completo"
+        },
+        /* @__PURE__ */ React10.createElement(FiLayers5, { size: 14 })
+      ), /* @__PURE__ */ React10.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            handleToggleAddMode(true);
+          },
+          className: `p-1.5 rounded-md transition-colors ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-500 text-white shadow-lg shadow-purple-500/30" : "bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600"}`,
+          title: "Editar estrutura da abstra\xE7\xE3o"
+        },
+        ancestryMode.isAddingAbstractionNodes ? /* @__PURE__ */ React10.createElement(FiCheck4, { size: 14 }) : /* @__PURE__ */ React10.createElement(FiEdit23, { size: 14 })
+      ))),
+      /* @__PURE__ */ React10.createElement("div", { className: "p-4 space-y-2" }, ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ React10.createElement("div", { className: "mb-3 p-2 rounded bg-purple-900/20 border border-purple-500/20 text-xs text-purple-200 flex items-start gap-2" }, /* @__PURE__ */ React10.createElement(FiMousePointer, { className: "mt-0.5 flex-shrink-0" }), /* @__PURE__ */ React10.createElement("span", null, "Clique nos nodes do cen\xE1rio para adicion\xE1-los. Arraste e solte para organizar a hierarquia.")), /* @__PURE__ */ React10.createElement(
+        NodeItem,
+        {
+          nodeData: ancestryMode.abstraction_tree,
+          onSelectParent: (id) => handleSelectAncestryParent(id, true),
+          onViewSelect: setTargetRenderNodeId,
+          highlightedPathIds,
+          targetRenderNodeId,
+          onRemoveNode: (path) => handleRemoveNode(path, true),
+          onEditRelationship,
+          onMoveNode: (s, t) => handleMoveNode(s, t, true),
+          selectedParentId: ancestryMode.selectedAbstractionParentId,
+          level: 0,
+          isLast: true,
+          path: [],
+          isEditable: ancestryMode.isAddingAbstractionNodes
+        }
+      ))
+    ), branchStack.length === 0 && /* @__PURE__ */ React10.createElement("div", { className: "mt-3 flex items-center justify-end px-1" }, /* @__PURE__ */ React10.createElement("label", { className: "flex items-center gap-2 cursor-pointer group select-none" }, /* @__PURE__ */ React10.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center transition-colors ${isPrivate ? "bg-indigo-500 border-indigo-500" : "border-slate-500 bg-transparent"}` }, isPrivate && /* @__PURE__ */ React10.createElement(FiCheck4, { size: 12, className: "text-white" })), /* @__PURE__ */ React10.createElement(
       "input",
       {
         type: "checkbox",
@@ -8769,16 +8791,16 @@ var getAllNodeIdsFromTree = (treeNode) => {
   traverse(treeNode);
   return Array.from(ids);
 };
-var findNodePath2 = (tree, targetNodeId, currentPath = []) => {
+var findNodePath2 = (tree, targetNodeId2, currentPath = []) => {
   var _a;
   if (!tree) return null;
   const currentNodeId = tree.is_section ? tree.section_id : String((_a = tree.node) == null ? void 0 : _a.id);
-  if (String(currentNodeId) === String(targetNodeId)) {
+  if (String(currentNodeId) === String(targetNodeId2)) {
     return { node: tree, path: currentPath };
   }
   if (tree.children) {
     for (let i = 0; i < tree.children.length; i++) {
-      const res = findNodePath2(tree.children[i], targetNodeId, [...currentPath, i]);
+      const res = findNodePath2(tree.children[i], targetNodeId2, [...currentPath, i]);
       if (res) return res;
     }
   }
@@ -10852,8 +10874,29 @@ function XViewScene({
     if (!ancestryObject || !ancestryObject.abstraction_tree) return;
     const { ancestryGroup, nodeObjects, renderer, renderedAncestries } = stateRef.current;
     const allParentNodes = Object.values(parentDataRef.current).flatMap((f) => f.nodes);
-    const fullTree = buildFullAncestryTree(ancestryObject.abstraction_tree, allParentNodes, ancestryDataRef.current);
+    let fullTree = buildFullAncestryTree(ancestryObject.abstraction_tree, allParentNodes, ancestryDataRef.current);
     if (!fullTree || !fullTree.node) return;
+    if (targetNodeId) {
+      const pruneTreeToPath = (treeNode, targetId) => {
+        var _a2;
+        if (!treeNode) return null;
+        const currentId = treeNode.is_section ? treeNode.section_id : String((_a2 = treeNode.node) == null ? void 0 : _a2.id);
+        if (String(currentId) === String(targetId)) {
+          return { ...treeNode, children: [] };
+        }
+        if (treeNode.children && treeNode.children.length > 0) {
+          for (let child of treeNode.children) {
+            const prunedChild = pruneTreeToPath(child, targetId);
+            if (prunedChild) {
+              return { ...treeNode, children: [prunedChild] };
+            }
+          }
+        }
+        return null;
+      };
+      const pruned = pruneTreeToPath(fullTree, targetNodeId);
+      if (pruned) fullTree = pruned;
+    }
     const absId = ancestryObject.ancestry_id + "_abs";
     handleClearAncestryVisuals(absId);
     const colorHex = 9133302;
@@ -11865,7 +11908,7 @@ function XViewScene({
         onClearAncestryVisuals: handleClearAncestryVisuals,
         onUploadFile: upload_file_action,
         onOpenImageViewer: handleOpenImageViewer,
-        onRenderAbstractionTree: (data) => handleRenderAbstractionTree(data)
+        onRenderAbstractionTree: (data, targetId) => handleRenderAbstractionTree(data, targetId)
       }
     ),
     editingAncestryRel.visible && /* @__PURE__ */ React23.createElement(

package/package.json CHANGED Viewed

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