@lv-x-software-house/x_view 1.1.9-dev.6 → 1.1.9-dev.8

package/dist/index.js

@@ -4467,6 +4467,65 @@ function DescriptionDisplay({
 // src/components/DescriptionReadModePanel.jsx
 var import_react7 = __toESM(require("react"));
 var import_fi6 = require("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__ */ import_react7.default.createElement("div", { className: "relative" }, level > 0 && /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.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_react7.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_react7.default.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__ */ import_react7.default.createElement("span", { className: `truncate flex items-center ${textColorClass}` }, level === 0 && !nodeData.is_section && /* @__PURE__ */ import_react7.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_react7.default.createElement("circle", { cx: "9", cy: "9", r: "7" }), /* @__PURE__ */ import_react7.default.createElement("circle", { cx: "15", cy: "15", r: "7" })), nodeData.is_section && /* @__PURE__ */ import_react7.default.createElement(import_fi6.FiFolder, { className: "mr-2" }), itemName)
+  ), hasChildren && /* @__PURE__ */ import_react7.default.createElement("div", { className: "mt-2 space-y-2 pl-8" }, nodeData.children.map((child, index) => /* @__PURE__ */ import_react7.default.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,
@@ -4488,14 +4547,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] = (0, import_react7.useState)(false);
+  const [showAbstraction, setShowAbstraction] = (0, import_react7.useState)(false);
+  const [targetRenderNodeId, setTargetRenderNodeId] = (0, import_react7.useState)(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 = (0, import_react7.useMemo)(() => defineAbilityFor(userRole), [userRole]);
   const canEditAncestry = ability.can("update", "Ancestry");
+  const highlightedPathIds = (0, import_react7.useMemo)(() => {
+    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 = (0, import_react7.useMemo)(() => {
     if (activeNodeBranches == null ? void 0 : activeNodeBranches.left) {
       return {
@@ -4545,16 +4630,25 @@ function DescriptionReadModePanel({
         title: "Voltar"
       },
       /* @__PURE__ */ import_react7.default.createElement(import_fi6.FiArrowLeft, { size: 16 })
-    ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-xs/relaxed text-slate-400 uppercase tracking-wider font-semibold" }, showProperties ? "Propriedades Adicionais" : "Modo de Leitura"), /* @__PURE__ */ import_react7.default.createElement("h2", { className: "text-lg sm:text-xl font-semibold tracking-tight text-white truncate", title }, title || "Sem T\xEDtulo"))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" }, hasCustomProps && /* @__PURE__ */ import_react7.default.createElement(
+    ), /* @__PURE__ */ import_react7.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement("h2", { className: "text-lg sm:text-xl font-semibold tracking-tight text-white truncate", title }, title || "Sem T\xEDtulo"))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" }, hasCustomProps && /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(import_fi6.FiAlignLeft, { size: 16 }) : /* @__PURE__ */ import_react7.default.createElement(import_fi6.FiList, { size: 16 }),
-      !showProperties && /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.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__ */ import_react7.default.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__ */ import_react7.default.createElement(import_fi6.FiGitBranch, { size: 16 })
     ), onRenderFullAncestry && /* @__PURE__ */ import_react7.default.createElement(
       "button",
       {
@@ -4568,7 +4662,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__ */ import_react7.default.createElement(import_fi6.FiEdit2, { size: 16 })
     ), /* @__PURE__ */ import_react7.default.createElement(
@@ -4580,7 +4674,40 @@ function DescriptionReadModePanel({
       },
       "\xD7"
     ))),
-    /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 bg-slate-900/20 relative z-10" }, showProperties ? /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300" }, customProperties.map((prop) => /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 bg-slate-900/20 relative z-10", onClick: () => setTargetRenderNodeId(null) }, showAbstraction ? /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4" }, /* @__PURE__ */ import_react7.default.createElement("h3", { className: "text-sm font-semibold text-purple-300 uppercase tracking-wider" }, "Explorar Hierarquia"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-wrap gap-2" }, targetRenderNodeId && onRenderAbstractionTree && /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(import_fi6.FiLayers, { size: 14 }),
+      " Renderizar Caminho"
+    ), onRenderAbstractionTree && /* @__PURE__ */ import_react7.default.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__ */ import_react7.default.createElement(import_fi6.FiLayers, { size: 14 }),
+      " Renderizar Completa"
+    ))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-slate-900/60 border border-white/10 rounded-lg p-4" }, /* @__PURE__ */ import_react7.default.createElement(
+      ReadOnlyNodeItem,
+      {
+        nodeData: abstractionTree,
+        onViewSelect: setTargetRenderNodeId,
+        highlightedPathIds,
+        targetRenderNodeId
+      }
+    ))) : showProperties ? /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-300" }, customProperties.map((prop) => /* @__PURE__ */ import_react7.default.createElement(
       CustomPropertyDisplay,
       {
         key: prop.id,
@@ -4609,7 +4736,7 @@ function DescriptionReadModePanel({
         onImageClick
       }
     )),
-    leftAction && /* @__PURE__ */ import_react7.default.createElement(
+    leftAction && !showAbstraction && !showProperties && /* @__PURE__ */ import_react7.default.createElement(
       "button",
       {
         onClick: leftAction.onClick,
@@ -4621,7 +4748,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__ */ import_react7.default.createElement(import_fi6.FiChevronLeft, { size: 20 }) : /* @__PURE__ */ import_react7.default.createElement(import_fi6.FiCornerUpLeft, { size: 20 }))
     ),
-    rightAction && /* @__PURE__ */ import_react7.default.createElement(
+    rightAction && !showAbstraction && !showProperties && /* @__PURE__ */ import_react7.default.createElement(
       "button",
       {
         onClick: rightAction.onClick,
@@ -4874,7 +5001,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);
@@ -4883,7 +5010,7 @@ 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;
     }
   }
@@ -5038,7 +5165,7 @@ function CreateAncestryPanel({
   const highlightedPathIds = (0, import_react10.useMemo)(() => {
     var _a, _b;
     if (!targetRenderNodeId || !ancestryMode.abstraction_tree) return [];
-    const found = findNodePath(ancestryMode.abstraction_tree, targetRenderNodeId);
+    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)];
@@ -5105,7 +5232,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;
@@ -5182,7 +5309,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;
@@ -5264,7 +5391,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;
@@ -5323,7 +5450,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;
@@ -5381,14 +5508,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) {
@@ -5432,7 +5559,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");
@@ -5484,7 +5611,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;
@@ -5630,7 +5757,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) {
@@ -5708,7 +5835,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) {
@@ -5716,7 +5843,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;
@@ -5829,7 +5956,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;
@@ -6178,7 +6305,7 @@ function CreateAncestryPanel({
         unavailableTypes: currentUsedTypes.filter((t) => t !== prop.type),
         onUploadFile
       }
-    )), /* @__PURE__ */ import_react10.default.createElement("div", { ref: propsEndRef }))), /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.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__ */ 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 ${isAddingNodes ? "text-cyan-300" : "text-slate-400"}` }, "Estrutura ", branchStack.length > 0 && "(Aba)"), isAddingNodes && /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[10px] bg-cyan-500/20 text-cyan-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(
+    )), /* @__PURE__ */ import_react10.default.createElement("div", { ref: propsEndRef }))), /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.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__ */ 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 ${isAddingNodes ? "text-cyan-300" : "text-slate-400"}` }, "TREE DE ANCESTRALIDADE ", branchStack.length > 0 && "(Aba)"), isAddingNodes && /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[10px] bg-cyan-500/20 text-cyan-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",
@@ -6215,7 +6342,7 @@ function CreateAncestryPanel({
         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)
       },
-      /* @__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(
+      /* @__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"}` }, "Tree 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",
@@ -6231,7 +6358,7 @@ function CreateAncestryPanel({
           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("span", { className: "text-[10px] font-bold uppercase tracking-wider" }, "Renderizar")
       ), /* @__PURE__ */ import_react10.default.createElement(
         "button",
         {
@@ -8797,7 +8924,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);
@@ -8806,7 +8933,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;
     }
   }
@@ -10944,13 +11071,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;
@@ -11017,7 +11144,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) {
@@ -11158,7 +11285,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) {
@@ -11178,6 +11305,18 @@ function XViewScene({
       // <--- ADICIONADO
     };
   }, [readingMode, buildFullAncestryTree, ancestryDataRef.current]);
+  const readModeAbstractionTree = (0, import_react23.useMemo)(() => {
+    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 = (0, import_react23.useCallback)(
     async (ancestryObject) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
@@ -11218,7 +11357,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) {
@@ -11886,7 +12025,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)
         }
       )
     ),

package/dist/index.mjs

@@ -4431,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,
@@ -4454,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 {
@@ -4511,16 +4598,25 @@ function DescriptionReadModePanel({
         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",
       {
@@ -4534,7 +4630,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(
@@ -4546,7 +4642,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,
@@ -4575,7 +4704,7 @@ function DescriptionReadModePanel({
         onImageClick
       }
     )),
-    leftAction && /* @__PURE__ */ React7.createElement(
+    leftAction && !showAbstraction && !showProperties && /* @__PURE__ */ React7.createElement(
       "button",
       {
         onClick: leftAction.onClick,
@@ -4587,7 +4716,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,
@@ -4764,7 +4893,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,
@@ -4773,7 +4902,7 @@ import {
   FiChevronRight as FiChevronRight4,
   FiCornerUpLeft as FiCornerUpLeft2,
   FiCornerUpRight as FiCornerUpRight3,
-  FiGitBranch,
+  FiGitBranch as FiGitBranch2,
   FiPlus as FiPlus2,
   FiLock
 } from "react-icons/fi";
@@ -4855,7 +4984,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);
@@ -4864,7 +4993,7 @@ 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;
     }
   }
@@ -4950,7 +5079,7 @@ var NodeItem = ({ nodeData, onSelectParent, onViewSelect, highlightedPathIds = [
                       ${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: "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),
+    /* @__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 || {});
@@ -5019,7 +5148,7 @@ function CreateAncestryPanel({
   const highlightedPathIds = useMemo8(() => {
     var _a, _b;
     if (!targetRenderNodeId || !ancestryMode.abstraction_tree) return [];
-    const found = findNodePath(ancestryMode.abstraction_tree, targetRenderNodeId);
+    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)];
@@ -5086,7 +5215,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;
@@ -5163,7 +5292,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;
@@ -5245,7 +5374,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;
@@ -5304,7 +5433,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;
@@ -5362,14 +5491,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) {
@@ -5413,7 +5542,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");
@@ -5465,7 +5594,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;
@@ -5611,7 +5740,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) {
@@ -5689,7 +5818,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) {
@@ -5697,7 +5826,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;
@@ -5810,7 +5939,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;
@@ -6159,7 +6288,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",
@@ -6196,7 +6325,7 @@ function CreateAncestryPanel({
         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)
       },
-      /* @__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(
+      /* @__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",
@@ -6212,7 +6341,7 @@ function CreateAncestryPanel({
           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("span", { className: "text-[10px] font-bold uppercase tracking-wider" }, "Renderizar")
       ), /* @__PURE__ */ React10.createElement(
         "button",
         {
@@ -8791,7 +8920,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);
@@ -8800,7 +8929,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;
     }
   }
@@ -10938,13 +11067,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;
@@ -11011,7 +11140,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) {
@@ -11152,7 +11281,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) {
@@ -11172,6 +11301,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);
@@ -11212,7 +11353,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) {
@@ -11880,7 +12021,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)
         }
       )
     ),

package/package.json

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