@lv-x-software-house/x_view 1.1.9-dev.1 → 1.1.9-dev.10

package/dist/index.mjs

@@ -2654,7 +2654,10 @@ var IGNORED_KEYS = [
   "isAddingNodes",
   "ancestryDescriptionSections",
   "direction",
-  "is_private"
+  "is_private",
+  "abstraction_tree",
+  "selectedAbstractionParentId",
+  "isAddingAbstractionNodes"
 ];
 function extractCustomPropsFromNode(node) {
   const customPropTypes = node._customPropTypes || {};
@@ -4428,8 +4431,69 @@ import {
   FiCornerUpLeft,
   FiCornerUpRight,
   FiList as FiList2,
-  FiAlignLeft
+  FiAlignLeft,
+  FiGitBranch,
+  FiFolder
 } from "react-icons/fi";
+var findNodePath = (tree, targetNodeId, 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)) {
+    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]);
+      if (res) return res;
+    }
+  }
+  return null;
+};
+var ReadOnlyNodeItem = ({ nodeData, onViewSelect, highlightedPathIds = [], targetRenderNodeId, level = 0, isLast = false }) => {
+  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 isTargetViewNode = String(targetRenderNodeId) === String(itemId);
+  const isHighlightedPath = highlightedPathIds.includes(String(itemId));
+  const hasChildren = nodeData.children && nodeData.children.length > 0;
+  let itemBgClass = "bg-slate-900/50 hover:bg-slate-800/80";
+  let textColorClass = "text-slate-200";
+  if (nodeData.is_section) {
+    itemBgClass = "bg-purple-900/20 border border-purple-500/30 hover:bg-purple-900/40";
+    textColorClass = "text-purple-300";
+  } 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";
+    }
+  }
+  return /* @__PURE__ */ React7.createElement("div", { className: "relative" }, level > 0 && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.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__ */ React7.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__ */ React7.createElement(
+    "div",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        if (onViewSelect) onViewSelect(itemId);
+      },
+      className: `flex items-center justify-between gap-2 px-3 h-9 rounded-md transition-all duration-150 border border-transparent cursor-pointer ${itemBgClass}`
+    },
+    /* @__PURE__ */ React7.createElement("span", { className: `truncate flex items-center ${textColorClass}` }, level === 0 && !nodeData.is_section && /* @__PURE__ */ React7.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__ */ React7.createElement("circle", { cx: "9", cy: "9", r: "7" }), /* @__PURE__ */ React7.createElement("circle", { cx: "15", cy: "15", r: "7" })), nodeData.is_section && /* @__PURE__ */ React7.createElement(FiFolder, { className: "mr-2" }), itemName)
+  ), hasChildren && /* @__PURE__ */ React7.createElement("div", { className: "mt-2 space-y-2 pl-8" }, nodeData.children.map((child, index) => /* @__PURE__ */ React7.createElement(
+    ReadOnlyNodeItem,
+    {
+      key: `${child.is_section ? child.id : child.node.id}-${index}`,
+      nodeData: child,
+      onViewSelect,
+      highlightedPathIds,
+      targetRenderNodeId,
+      level: level + 1,
+      isLast: index === nodeData.children.length - 1
+    }
+  ))));
+};
 function DescriptionReadModePanel({
   title,
   description,
@@ -4451,14 +4515,40 @@ function DescriptionReadModePanel({
   backNavigationInfo,
   customProperties = [],
   onImageClick,
-  userRole
-  // <--- NOVA PROP: Recebendo a role do usuário
+  userRole,
+  // --- NOVAS PROPS PARA ABSTRAÇÃO ---
+  abstractionTree = null,
+  onRenderAbstractionTree = null
 }) {
   const [showProperties, setShowProperties] = useState7(false);
+  const [showAbstraction, setShowAbstraction] = useState7(false);
+  const [targetRenderNodeId, setTargetRenderNodeId] = useState7(null);
   const swallow = (e) => e.stopPropagation();
   const hasCustomProps = customProperties && customProperties.length > 0;
+  const hasAbstraction = Boolean(abstractionTree && (abstractionTree.node || abstractionTree.children && abstractionTree.children.length > 0));
   const ability = useMemo6(() => defineAbilityFor(userRole), [userRole]);
   const canEditAncestry = ability.can("update", "Ancestry");
+  const highlightedPathIds = useMemo6(() => {
+    var _a, _b;
+    if (!targetRenderNodeId || !abstractionTree) return [];
+    const found = findNodePath(abstractionTree, targetRenderNodeId);
+    if (!found) return [];
+    let current = abstractionTree;
+    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, abstractionTree]);
+  const handleToggleProperties = () => {
+    setShowProperties(!showProperties);
+    if (!showProperties) setShowAbstraction(false);
+  };
+  const handleToggleAbstraction = () => {
+    setShowAbstraction(!showAbstraction);
+    if (!showAbstraction) setShowProperties(false);
+  };
   const leftAction = useMemo6(() => {
     if (activeNodeBranches == null ? void 0 : activeNodeBranches.left) {
       return {
@@ -4503,21 +4593,38 @@ function DescriptionReadModePanel({
     /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-5 pb-3 flex items-start justify-between gap-4 border-b border-white/10 shrink-0 bg-slate-950/50 backdrop-blur-md z-20" }, /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ React7.createElement(
       "button",
       {
-        onClick: onBack,
+        onClick: () => {
+          if (showAbstraction) {
+            setShowAbstraction(false);
+          } else if (showProperties) {
+            setShowProperties(false);
+          } else if (onBack) {
+            onBack();
+          }
+        },
         className: "w-8 h-8 flex-shrink-0 grid place-content-center rounded-lg border border-white/10 bg-white/5 hover:bg-white/10 transition-colors text-slate-300",
         title: "Voltar"
       },
       /* @__PURE__ */ React7.createElement(FiArrowLeft, { size: 16 })
-    ), /* @__PURE__ */ React7.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React7.createElement("p", { className: "text-xs/relaxed text-slate-400 uppercase tracking-wider font-semibold" }, showProperties ? "Propriedades Adicionais" : "Modo de Leitura"), /* @__PURE__ */ React7.createElement("h2", { className: "text-lg sm:text-xl font-semibold tracking-tight text-white truncate", title }, title || "Sem T\xEDtulo"))), /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" }, hasCustomProps && /* @__PURE__ */ React7.createElement(
+    ), /* @__PURE__ */ React7.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React7.createElement("p", { className: "text-xs/relaxed text-slate-400 uppercase tracking-wider font-semibold" }, showAbstraction ? "Tree de Abstra\xE7\xE3o" : showProperties ? "Propriedades Adicionais" : "Modo de Leitura"), /* @__PURE__ */ React7.createElement("h2", { className: "text-lg sm:text-xl font-semibold tracking-tight text-white truncate", title }, title || "Sem T\xEDtulo"))), /* @__PURE__ */ React7.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" }, hasCustomProps && /* @__PURE__ */ React7.createElement(
       "button",
       {
-        onClick: () => setShowProperties(!showProperties),
+        onClick: handleToggleProperties,
         className: `relative w-9 h-9 grid place-content-center rounded-lg border transition-colors 
                                 ${showProperties ? "border-cyan-500/50 bg-cyan-500/10 text-cyan-300" : "border-white/15 bg-transparent hover:bg-white/5 text-slate-300 hover:text-white"}`,
         title: showProperties ? "Ver Descri\xE7\xE3o" : "Ver Propriedades Adicionais"
       },
       showProperties ? /* @__PURE__ */ React7.createElement(FiAlignLeft, { size: 16 }) : /* @__PURE__ */ React7.createElement(FiList2, { size: 16 }),
-      !showProperties && /* @__PURE__ */ React7.createElement("span", { className: "absolute top-1.5 right-1.5 block h-2 w-2 rounded-full bg-cyan-400 ring-2 ring-slate-900 animate-pulse" })
+      !showProperties && !showAbstraction && /* @__PURE__ */ React7.createElement("span", { className: "absolute top-1.5 right-1.5 block h-2 w-2 rounded-full bg-cyan-400 ring-2 ring-slate-900 animate-pulse" })
+    ), hasAbstraction && /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        onClick: handleToggleAbstraction,
+        className: `relative w-9 h-9 grid place-content-center rounded-lg border transition-colors 
+                                ${showAbstraction ? "border-purple-500/50 bg-purple-500/10 text-purple-300" : "border-white/15 bg-transparent hover:bg-white/5 text-slate-300 hover:text-white"}`,
+        title: showAbstraction ? "Voltar \xE0 Descri\xE7\xE3o" : "Ver Tree de Abstra\xE7\xE3o"
+      },
+      /* @__PURE__ */ React7.createElement(FiGitBranch, { size: 16 })
     ), onRenderFullAncestry && /* @__PURE__ */ React7.createElement(
       "button",
       {
@@ -4531,7 +4638,7 @@ function DescriptionReadModePanel({
       {
         onClick: onEdit,
         className: "w-9 h-9 grid place-content-center rounded-lg border border-white/15 bg-transparent hover:bg-white/5 transition-colors text-slate-300 hover:text-white",
-        title: "Editar Descri\xE7\xE3o"
+        title: "Editar Descri\xE7\xE3o / Estrutura"
       },
       /* @__PURE__ */ React7.createElement(FiEdit2, { size: 16 })
     ), /* @__PURE__ */ React7.createElement(
@@ -4543,7 +4650,40 @@ function DescriptionReadModePanel({
       },
       "\xD7"
     ))),
-    /* @__PURE__ */ React7.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 bg-slate-900/20 relative z-10" }, showProperties ? /* @__PURE__ */ React7.createElement("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300" }, customProperties.map((prop) => /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React7.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 bg-slate-900/20 relative z-10", onClick: () => setTargetRenderNodeId(null) }, showAbstraction ? /* @__PURE__ */ React7.createElement("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4" }, /* @__PURE__ */ React7.createElement("h3", { className: "text-sm font-semibold text-purple-300 uppercase tracking-wider" }, "Explorar Hierarquia"), /* @__PURE__ */ React7.createElement("div", { className: "flex flex-wrap gap-2" }, targetRenderNodeId && onRenderAbstractionTree && /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          onRenderAbstractionTree(targetRenderNodeId);
+        },
+        className: "px-3 py-1.5 rounded-md bg-fuchsia-600 text-white hover:bg-fuchsia-500 transition-colors flex items-center gap-1.5 text-xs font-bold shadow-lg animate-in zoom-in-95 duration-200",
+        title: "Renderiza no 3D apenas o caminho at\xE9 o Node selecionado"
+      },
+      /* @__PURE__ */ React7.createElement(FiLayers3, { size: 14 }),
+      " Renderizar Caminho"
+    ), onRenderAbstractionTree && /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          setTargetRenderNodeId(null);
+          onRenderAbstractionTree(null);
+        },
+        className: "px-3 py-1.5 rounded-md bg-slate-700 border border-white/10 text-slate-200 hover:bg-slate-600 hover:text-white transition-colors flex items-center gap-1.5 text-xs font-semibold",
+        title: "Renderiza a Abstraction Tree inteira verticalmente"
+      },
+      /* @__PURE__ */ React7.createElement(FiLayers3, { size: 14 }),
+      " Renderizar Completa"
+    ))), /* @__PURE__ */ React7.createElement("div", { className: "bg-slate-900/60 border border-white/10 rounded-lg p-4" }, /* @__PURE__ */ React7.createElement(
+      ReadOnlyNodeItem,
+      {
+        nodeData: abstractionTree,
+        onViewSelect: setTargetRenderNodeId,
+        highlightedPathIds,
+        targetRenderNodeId
+      }
+    ))) : showProperties ? /* @__PURE__ */ React7.createElement("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300" }, customProperties.map((prop) => /* @__PURE__ */ React7.createElement(
       CustomPropertyDisplay,
       {
         key: prop.id,
@@ -4572,7 +4712,7 @@ function DescriptionReadModePanel({
         onImageClick
       }
     )),
-    leftAction && /* @__PURE__ */ React7.createElement(
+    leftAction && !showAbstraction && !showProperties && /* @__PURE__ */ React7.createElement(
       "button",
       {
         onClick: leftAction.onClick,
@@ -4584,7 +4724,7 @@ function DescriptionReadModePanel({
                         ${leftAction.type === "branch" ? "bg-indigo-500/20 text-indigo-300 group-hover/btn:text-white group-hover/btn:bg-indigo-500" : "bg-rose-500/20 text-rose-300 group-hover/btn:text-white group-hover/btn:bg-rose-500"} 
                     ` }, leftAction.type === "branch" ? /* @__PURE__ */ React7.createElement(FiChevronLeft, { size: 20 }) : /* @__PURE__ */ React7.createElement(FiCornerUpLeft, { size: 20 }))
     ),
-    rightAction && /* @__PURE__ */ React7.createElement(
+    rightAction && !showAbstraction && !showProperties && /* @__PURE__ */ React7.createElement(
       "button",
       {
         onClick: rightAction.onClick,
@@ -4761,7 +4901,7 @@ import React10, { useState as useState10, useEffect as useEffect9, useMemo as us
 import {
   FiEdit2 as FiEdit23,
   FiBookOpen as FiBookOpen2,
-  FiFolder,
+  FiFolder as FiFolder2,
   FiMousePointer,
   FiCheck as FiCheck4,
   FiLayers as FiLayers5,
@@ -4770,7 +4910,7 @@ import {
   FiChevronRight as FiChevronRight4,
   FiCornerUpLeft as FiCornerUpLeft2,
   FiCornerUpRight as FiCornerUpRight3,
-  FiGitBranch,
+  FiGitBranch as FiGitBranch2,
   FiPlus as FiPlus2,
   FiLock
 } from "react-icons/fi";
@@ -4852,7 +4992,7 @@ function AncestryPickerModal({
 }
 
 // src/components/CreateAncestryPanel.jsx
-var findNodePath = (tree, targetNodeId, currentPath = []) => {
+var findNodePath2 = (tree, targetNodeId, currentPath = []) => {
   var _a;
   if (!tree) return null;
   const currentNodeId = tree.is_section ? tree.section_id : String((_a = tree.node) == null ? void 0 : _a.id);
@@ -4861,22 +5001,41 @@ var findNodePath = (tree, targetNodeId, currentPath = []) => {
   }
   if (tree.children) {
     for (let i = 0; i < tree.children.length; i++) {
-      const res = findNodePath(tree.children[i], targetNodeId, [...currentPath, i]);
+      const res = findNodePath2(tree.children[i], targetNodeId, [...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();
@@ -4906,23 +5065,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,
@@ -4930,63 +5075,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(FiFolder2, { 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,
@@ -5001,11 +5118,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,
@@ -5016,14 +5130,12 @@ function CreateAncestryPanel({
   onUpdateTree,
   onAncestrySectionChange,
   onToggleAddNodes,
-  // Mantido para compatibilidade
   onRenderFullAncestry,
   onHighlightNode,
   onClearAncestryVisuals,
   onUploadFile,
   onOpenImageViewer,
   onRenderAbstractionTree
-  // <--- Nova prop recebida
 }) {
   const {
     tree: rootTree,
@@ -5040,6 +5152,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 = findNodePath2(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);
@@ -5063,6 +5189,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) => {
@@ -5094,7 +5223,7 @@ function CreateAncestryPanel({
     if (!isAbstraction && branchStack.length > 0) {
       let ptr = rootTreeClone;
       for (const step of branchStack) {
-        const found = findNodePath(ptr, step.nodeId);
+        const found = findNodePath2(ptr, step.nodeId);
         if (found && found.node.parallel_branches) {
           const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
           if (branch) ptr = branch.tree;
@@ -5144,14 +5273,15 @@ function CreateAncestryPanel({
       }
     }
   };
-  const takeSnapshot = (tree, name, desc, sections, customProps2, isPrivateVal) => {
+  const takeSnapshot = (tree, name, desc, sections, customProps2, isPrivateVal, abstractionTree = null) => {
     return {
       tree: JSON.stringify(tree),
       name,
       description: desc || "",
       sections: JSON.stringify(sections || []),
       customProps: JSON.stringify(customProps2 || []),
-      isPrivate: isPrivateVal
+      isPrivate: isPrivateVal,
+      abstractionTree: JSON.stringify(abstractionTree)
     };
   };
   const getCurrentContext = () => {
@@ -5170,7 +5300,7 @@ function CreateAncestryPanel({
     let currentBranch = null;
     let currentDirection = null;
     for (const step of branchStack) {
-      const found = findNodePath(currentTreePtr, step.nodeId);
+      const found = findNodePath2(currentTreePtr, step.nodeId);
       if (!found || !found.node.parallel_branches) return null;
       currentBranch = found.node.parallel_branches.find((b) => b.id === step.branchId);
       if (!currentBranch) return null;
@@ -5252,7 +5382,7 @@ function CreateAncestryPanel({
         let ptr = ancestryMode.tree;
         let foundBranch = null;
         for (const step of branchStack) {
-          const found = findNodePath(ptr, step.nodeId);
+          const found = findNodePath2(ptr, step.nodeId);
           if (found && found.node.parallel_branches) {
             foundBranch = found.node.parallel_branches.find((b) => b.id === step.branchId);
             if (foundBranch) ptr = foundBranch.tree;
@@ -5285,7 +5415,8 @@ function CreateAncestryPanel({
         ancestryMode.ancestryDescription,
         ancestryMode.ancestryDescriptionSections,
         extractedProps,
-        ancestryMode.is_private
+        ancestryMode.is_private,
+        ancestryMode.abstraction_tree
       ));
     } else if (ctx) {
       setLastSavedSnapshot(takeSnapshot(
@@ -5294,7 +5425,8 @@ function CreateAncestryPanel({
         ctx.description,
         ctx.sections,
         extractedProps,
-        isPrivate
+        isPrivate,
+        ancestryMode.abstraction_tree
       ));
     }
   }, [branchStack, ancestryMode]);
@@ -5309,7 +5441,7 @@ function CreateAncestryPanel({
     let ptr = rootTreeClone;
     let targetBranch = null;
     for (const step of branchStack) {
-      const found = findNodePath(ptr, step.nodeId);
+      const found = findNodePath2(ptr, step.nodeId);
       if (found && found.node.parallel_branches) {
         targetBranch = found.node.parallel_branches.find((b) => b.id === step.branchId);
         if (targetBranch) ptr = targetBranch.tree;
@@ -5337,7 +5469,7 @@ function CreateAncestryPanel({
           rootTreeClone,
           rootExtras
         );
-        setLastSavedSnapshot(takeSnapshot(rootTreeClone, ancestryName, description, processedSections, [], isPrivate));
+        setLastSavedSnapshot(takeSnapshot(rootTreeClone, ancestryName, description, processedSections, [], isPrivate, ancestryMode.abstraction_tree));
         if (onRenderFullAncestry) {
           const fullTreePayload = {
             ancestry_id: ancestryMode.currentAncestryId || "temp_root",
@@ -5367,14 +5499,14 @@ function CreateAncestryPanel({
     let ptr = rootTreeClone;
     for (let i = 0; i < branchStack.length - 1; i++) {
       const step = branchStack[i];
-      const found = findNodePath(ptr, step.nodeId);
+      const found = findNodePath2(ptr, step.nodeId);
       if (found && found.node.parallel_branches) {
         const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
         if (branch) ptr = branch.tree;
       }
     }
     const currentStep = branchStack[branchStack.length - 1];
-    const foundParentPath = findNodePath(ptr, currentStep.nodeId);
+    const foundParentPath = findNodePath2(ptr, currentStep.nodeId);
     if (foundParentPath && foundParentPath.node && foundParentPath.node.parallel_branches) {
       const branchIndex = foundParentPath.node.parallel_branches.findIndex((b) => b.id === currentStep.branchId);
       if (branchIndex !== -1) {
@@ -5398,7 +5530,8 @@ function CreateAncestryPanel({
             ancestryMode.ancestryDescription,
             ancestryMode.ancestryDescriptionSections,
             currentRootProps,
-            isPrivate
+            isPrivate,
+            ancestryMode.abstraction_tree
           ));
           if (onClearAncestryVisuals) {
             onClearAncestryVisuals(currentStep.branchId);
@@ -5417,7 +5550,7 @@ function CreateAncestryPanel({
     const actions = { left: null, right: null };
     const isInBranch = branchStack.length > 0;
     if (internalHighlightedNodeId) {
-      const found = findNodePath(activeTree, internalHighlightedNodeId);
+      const found = findNodePath2(activeTree, internalHighlightedNodeId);
       if (found && found.node) {
         const branches = found.node.parallel_branches || [];
         const leftBranch = branches.find((b) => (b.direction || "right") === "left");
@@ -5469,7 +5602,7 @@ function CreateAncestryPanel({
     if (branchStack.length > 0) {
       let ptr = rootTreeClone;
       for (const step of branchStack) {
-        const found = findNodePath(ptr, step.nodeId);
+        const found = findNodePath2(ptr, step.nodeId);
         if (found && found.node.parallel_branches) {
           const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
           if (branch) ptr = branch.tree;
@@ -5587,6 +5720,11 @@ function CreateAncestryPanel({
     const sectionsChanged = JSON.stringify(existingSections) !== lastSavedSnapshot.sections;
     const propsChanged = JSON.stringify(customProps) !== lastSavedSnapshot.customProps;
     const privateChanged = isPrivate !== lastSavedSnapshot.isPrivate;
+    let abstractionTreeChanged = false;
+    if (branchStack.length === 0) {
+      const currentAbsTreeStr = JSON.stringify(ancestryMode.abstraction_tree);
+      abstractionTreeChanged = currentAbsTreeStr !== lastSavedSnapshot.abstractionTree;
+    }
     return treeChanged || nameChanged || descChanged || sectionsChanged || propsChanged || privateChanged;
   }, [
     ancestryName,
@@ -5596,6 +5734,7 @@ function CreateAncestryPanel({
     branchStack,
     lastSavedSnapshot,
     ancestryMode.tree,
+    ancestryMode.abstraction_tree,
     customProps,
     isPrivate
   ]);
@@ -5609,7 +5748,7 @@ function CreateAncestryPanel({
     let parentTreePtr = rootTree;
     let parentBranch = null;
     for (const step of parentStack) {
-      const found = findNodePath(parentTreePtr, step.nodeId);
+      const found = findNodePath2(parentTreePtr, step.nodeId);
       if (found && found.node.parallel_branches) {
         const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
         if (branch) {
@@ -5687,7 +5826,7 @@ function CreateAncestryPanel({
       const rootTreeClone = JSON.parse(JSON.stringify(ancestryMode.tree));
       let ptr = rootTreeClone;
       for (const step of branchStack) {
-        const foundParent = findNodePath(ptr, step.nodeId);
+        const foundParent = findNodePath2(ptr, step.nodeId);
         if (foundParent && foundParent.node && foundParent.node.parallel_branches) {
           const existingBranch = foundParent.node.parallel_branches.find((b) => b.id === step.branchId);
           if (existingBranch) {
@@ -5695,7 +5834,7 @@ function CreateAncestryPanel({
           }
         }
       }
-      const found = findNodePath(ptr, nodeId);
+      const found = findNodePath2(ptr, nodeId);
       if (!found) {
         console.error("Node alvo n\xE3o encontrado no contexto atual.");
         return;
@@ -5808,7 +5947,7 @@ function CreateAncestryPanel({
       let ptr = updatedRootTree;
       let targetBranch = null;
       for (const step of branchStack) {
-        const found = findNodePath(ptr, step.nodeId);
+        const found = findNodePath2(ptr, step.nodeId);
         if (found && found.node.parallel_branches) {
           targetBranch = found.node.parallel_branches.find((b) => b.id === step.branchId);
           if (targetBranch) ptr = targetBranch.tree;
@@ -5838,7 +5977,8 @@ function CreateAncestryPanel({
             currentInputDesc,
             processedSections,
             customProps,
-            isPrivate
+            isPrivate,
+            ancestryMode.abstraction_tree
           ));
           if (onRenderFullAncestry) {
             const rotation = branchStack.reduce((acc, step) => {
@@ -5897,7 +6037,8 @@ function CreateAncestryPanel({
           currentInputDesc,
           processedSections,
           customProps,
-          isPrivate
+          isPrivate,
+          ancestryMode.abstraction_tree
         ));
         if (!keepOpen) onClose();
       } finally {
@@ -5950,7 +6091,9 @@ function CreateAncestryPanel({
     const node = findNode(activeTree, selectedParentId);
     return node ? node.name : "Nenhum";
   };
-  const hasChildren = activeTree && activeTree.children && activeTree.children.length > 0;
+  const hasMainChildren = activeTree && activeTree.children && activeTree.children.length > 0;
+  const hasAbstractionChildren = branchStack.length === 0 && ancestryMode.abstraction_tree && ancestryMode.abstraction_tree.children && ancestryMode.abstraction_tree.children.length > 0;
+  const canSave = hasMainChildren || hasAbstractionChildren;
   const handleSectionChangeWrapper = (sectionId) => {
     const ctx = getCurrentContext();
     const currentDesc = ctx ? ctx.description : description;
@@ -6153,7 +6296,7 @@ function CreateAncestryPanel({
         unavailableTypes: currentUsedTypes.filter((t) => t !== prop.type),
         onUploadFile
       }
-    )), /* @__PURE__ */ React10.createElement("div", { ref: propsEndRef }))), /* @__PURE__ */ React10.createElement("div", { className: `rounded-lg border transition-all duration-300 overflow-hidden ${isAddingNodes ? "border-cyan-500/40 bg-slate-900/60 ring-1 ring-cyan-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 ${isAddingNodes ? "bg-cyan-900/20 border-cyan-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 ${isAddingNodes ? "text-cyan-300" : "text-slate-400"}` }, "Estrutura ", branchStack.length > 0 && "(Aba)"), isAddingNodes && /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] bg-cyan-500/20 text-cyan-300 px-1.5 py-0.5 rounded animate-pulse" }, "Editando")), /* @__PURE__ */ React10.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React10.createElement(
+    )), /* @__PURE__ */ React10.createElement("div", { ref: propsEndRef }))), /* @__PURE__ */ React10.createElement("div", { className: `rounded-lg border transition-all duration-300 overflow-hidden ${isAddingNodes ? "border-cyan-500/40 bg-slate-900/60 ring-1 ring-cyan-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 ${isAddingNodes ? "bg-cyan-900/20 border-cyan-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 ${isAddingNodes ? "text-cyan-300" : "text-slate-400"}` }, "TREE DE ANCESTRALIDADE ", branchStack.length > 0 && "(Aba)"), isAddingNodes && /* @__PURE__ */ React10.createElement("span", { className: "text-[10px] bg-cyan-500/20 text-cyan-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",
@@ -6184,44 +6327,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"}` }, "Tree 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" }, "Renderizar")
+      ), /* @__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",
@@ -6229,7 +6405,7 @@ function CreateAncestryPanel({
         onChange: (e) => setIsPrivate(e.target.checked),
         className: "hidden"
       }
-    ), /* @__PURE__ */ React10.createElement("span", { className: `text-xs flex items-center gap-1 transition-colors ${isPrivate ? "text-indigo-300" : "text-slate-400 group-hover:text-slate-300"}` }, /* @__PURE__ */ React10.createElement(FiLock, { size: 10 }), " N\xE3o Export\xE1vel"))))), /* @__PURE__ */ React10.createElement("div", { className: "px-6 pt-2 pb-5 flex-shrink-0" }, hasChildren && /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React10.createElement("span", { className: `text-xs flex items-center gap-1 transition-colors ${isPrivate ? "text-indigo-300" : "text-slate-400 group-hover:text-slate-300"}` }, /* @__PURE__ */ React10.createElement(FiLock, { size: 10 }), " N\xE3o Export\xE1vel"))))), /* @__PURE__ */ React10.createElement("div", { className: "px-6 pt-2 pb-5 flex-shrink-0" }, canSave && /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: () => handleLocalSave(false),
@@ -8752,7 +8928,7 @@ var getAllNodeIdsFromTree = (treeNode) => {
   traverse(treeNode);
   return Array.from(ids);
 };
-var findNodePath2 = (tree, targetNodeId, currentPath = []) => {
+var findNodePath3 = (tree, targetNodeId, currentPath = []) => {
   var _a;
   if (!tree) return null;
   const currentNodeId = tree.is_section ? tree.section_id : String((_a = tree.node) == null ? void 0 : _a.id);
@@ -8761,7 +8937,7 @@ var findNodePath2 = (tree, targetNodeId, currentPath = []) => {
   }
   if (tree.children) {
     for (let i = 0; i < tree.children.length; i++) {
-      const res = findNodePath2(tree.children[i], targetNodeId, [...currentPath, i]);
+      const res = findNodePath3(tree.children[i], targetNodeId, [...currentPath, i]);
       if (res) return res;
     }
   }
@@ -10830,13 +11006,34 @@ function XViewScene({
     },
     [addOrUpdateNodeMesh, tweenToTarget, buildFullAncestryTree, readingMode.isActive, ancestryMode.isActive]
   );
-  const handleRenderAbstractionTree = useCallback3((ancestryObject) => {
+  const handleRenderAbstractionTree = useCallback3((ancestryObject, targetNodeId = null) => {
     setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
     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;
@@ -10878,13 +11075,13 @@ function XViewScene({
     if (action === "open") {
       let currentPtr = fullTree;
       for (const step of branchStack) {
-        const found = findNodePath2(currentPtr, step.nodeId);
+        const found = findNodePath3(currentPtr, step.nodeId);
         if (found && found.node.parallel_branches) {
           const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
           if (branch) currentPtr = branch.tree;
         }
       }
-      const foundTarget = findNodePath2(currentPtr, nodeId);
+      const foundTarget = findNodePath3(currentPtr, nodeId);
       if (foundTarget && foundTarget.node && foundTarget.node.parallel_branches && foundTarget.node.parallel_branches.length > 0) {
         const branchToOpen = foundTarget.node.parallel_branches.find((b) => (b.direction || "right") === direction);
         if (!branchToOpen) return;
@@ -10951,7 +11148,7 @@ function XViewScene({
       if (newStack.length > 0) {
         let ptr = fullTree;
         for (const step of newStack) {
-          const found = findNodePath2(ptr, step.nodeId);
+          const found = findNodePath3(ptr, step.nodeId);
           if (found && found.node.parallel_branches) {
             const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
             if (branch) {
@@ -11092,7 +11289,7 @@ function XViewScene({
     let currentMeta = ancestry;
     let currentDirection = null;
     for (const step of branchStack) {
-      const found = findNodePath2(currentPtr, step.nodeId);
+      const found = findNodePath3(currentPtr, step.nodeId);
       if (found && found.node.parallel_branches) {
         const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
         if (branch) {
@@ -11112,6 +11309,18 @@ function XViewScene({
       // <--- ADICIONADO
     };
   }, [readingMode, buildFullAncestryTree, ancestryDataRef.current]);
+  const readModeAbstractionTree = useMemo12(() => {
+    if (!readingMode.isActive || !readingMode.ancestry || !readingMode.ancestry.abstraction_tree) {
+      return null;
+    }
+    const allNodes = Object.values(parentDataRef.current || {}).flatMap((f) => f.nodes || []);
+    const allAncestries = ancestryDataRef.current || [];
+    return buildFullAncestryTree(
+      readingMode.ancestry.abstraction_tree,
+      allNodes,
+      allAncestries
+    );
+  }, [readingMode.isActive, readingMode.ancestry, buildFullAncestryTree, sceneVersion]);
   const handleStartReadingAncestry = useCallback3(
     async (ancestryObject) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
@@ -11152,7 +11361,7 @@ function XViewScene({
       );
       let currentPtr = fullTree;
       for (const step of branchStack) {
-        const found = findNodePath2(currentPtr, step.nodeId);
+        const found = findNodePath3(currentPtr, step.nodeId);
         if (found && found.node && found.node.parallel_branches) {
           const branch = found.node.parallel_branches.find((b) => b.id === step.branchId);
           if (branch) {
@@ -11820,7 +12029,9 @@ function XViewScene({
           activeNodeBranches,
           backNavigationInfo,
           onImageClick: (url, name) => handleOpenImageViewer([{ name: name || "Imagem", value: url }], 0),
-          userRole: userPermissionRole
+          userRole: userPermissionRole,
+          abstractionTree: readModeAbstractionTree,
+          onRenderAbstractionTree: (targetId) => handleRenderAbstractionTree(readingMode.ancestry, targetId)
         }
       )
     ),
@@ -11828,6 +12039,7 @@ function XViewScene({
       CreateAncestryPanel,
       {
         ancestryMode,
+        setAncestryMode,
         onSelectParent: handleSelectAncestryParent,
         onRemoveNode: handleRemoveFromAncestry,
         onSave: handleSaveAncestry,
@@ -11847,7 +12059,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(