@lv-x-software-house/x_view 1.1.8 → 1.1.9-dev.2

package/dist/index.js

@@ -5019,8 +5019,12 @@ 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,
@@ -5031,12 +5035,14 @@ function CreateAncestryPanel({
   onUpdateTree,
   onAncestrySectionChange,
   onToggleAddNodes,
+  // Mantido para compatibilidade
   onRenderFullAncestry,
   onHighlightNode,
   onClearAncestryVisuals,
   onUploadFile,
-  onOpenImageViewer
-  // <--- ADICIONE NA LISTA DE PROPS RECEBIDAS
+  onOpenImageViewer,
+  onRenderAbstractionTree
+  // <--- Nova prop recebida
 }) {
   const {
     tree: rootTree,
@@ -5072,6 +5078,91 @@ function CreateAncestryPanel({
       console.warn("onOpenImageViewer n\xE3o foi passado para CreateAncestryPanel");
     }
   };
+  const handleSelectAncestryParent = (nodeId, isAbstraction = false) => {
+    setAncestryMode((prev) => isAbstraction ? { ...prev, selectedAbstractionParentId: nodeId } : { ...prev, selectedParentId: nodeId });
+  };
+  const handleToggleAddMode = (isAbstraction = false) => {
+    setAncestryMode((prev) => isAbstraction ? { ...prev, isAddingAbstractionNodes: !prev.isAddingAbstractionNodes } : { ...prev, isAddingNodes: !prev.isAddingNodes });
+  };
+  const handleRemoveNode = (0, import_react10.useCallback)((pathToRemove, isAbstraction = false) => {
+    if (!Array.isArray(pathToRemove) || pathToRemove.length === 0) return;
+    const treeKey = isAbstraction ? "abstraction_tree" : "tree";
+    setAncestryMode((prev) => {
+      if (!prev[treeKey]) return prev;
+      const newTree = JSON.parse(JSON.stringify(prev[treeKey]));
+      let currentParent = newTree;
+      for (let i = 0; i < pathToRemove.length - 1; i++) {
+        const childIndex = pathToRemove[i];
+        if (currentParent.children && currentParent.children[childIndex]) {
+          currentParent = currentParent.children[childIndex];
+        } else return prev;
+      }
+      const indexToRemove = pathToRemove[pathToRemove.length - 1];
+      if (currentParent.children && currentParent.children.length > indexToRemove) {
+        currentParent.children.splice(indexToRemove, 1);
+      }
+      return { ...prev, [treeKey]: newTree };
+    });
+  }, [setAncestryMode]);
+  const handleMoveNode = (sourceId, targetId, isAbstraction = false) => {
+    const treeKey = isAbstraction ? "abstraction_tree" : "tree";
+    const activeTreeContext = ancestryMode[treeKey];
+    if (!activeTreeContext) return;
+    const rootTreeClone = JSON.parse(JSON.stringify(ancestryMode[treeKey]));
+    let targetTreeContext = rootTreeClone;
+    if (!isAbstraction && branchStack.length > 0) {
+      let ptr = rootTreeClone;
+      for (const step of branchStack) {
+        const found = findNodePath(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;
+        }
+      }
+      targetTreeContext = ptr;
+    }
+    let movedNodeData = null;
+    const removeSourceNode = (node) => {
+      if (!node.children) return false;
+      const idx = node.children.findIndex((child) => {
+        var _a;
+        return String(child.is_section ? child.id : (_a = child.node) == null ? void 0 : _a.id) === String(sourceId);
+      });
+      if (idx !== -1) {
+        movedNodeData = node.children[idx];
+        node.children.splice(idx, 1);
+        return true;
+      }
+      for (const child of node.children) {
+        if (removeSourceNode(child)) return true;
+      }
+      return false;
+    };
+    const insertTargetNode = (node) => {
+      var _a;
+      if (String(node.is_section ? node.id : (_a = node.node) == null ? void 0 : _a.id) === String(targetId)) {
+        if (!node.children) node.children = [];
+        node.children.push(movedNodeData);
+        return true;
+      }
+      if (node.children) {
+        for (const child of node.children) {
+          if (insertTargetNode(child)) return true;
+        }
+      }
+      return false;
+    };
+    if (removeSourceNode(targetTreeContext) && movedNodeData) {
+      if (insertTargetNode(targetTreeContext)) {
+        if (!isAbstraction) {
+          updateGlobalTree(rootTreeClone);
+        }
+        setAncestryMode((prev) => ({ ...prev, [treeKey]: rootTreeClone }));
+      } else {
+        alert("N\xE3o \xE9 poss\xEDvel mover um node para dentro de seus pr\xF3prios descendentes.");
+      }
+    }
+  };
   const takeSnapshot = (tree, name, desc, sections, customProps2, isPrivateVal) => {
     return {
       tree: JSON.stringify(tree),
@@ -5842,66 +5933,6 @@ function CreateAncestryPanel({
       updateGlobalTree(newRootTree);
     }
   }, [description, existingSections]);
-  const handleMoveNode = (sourceId, targetId) => {
-    if (!activeTree) return;
-    const rootTreeClone = JSON.parse(JSON.stringify(ancestryMode.tree));
-    let targetTreeContext = rootTreeClone;
-    if (branchStack.length > 0) {
-      let ptr = rootTreeClone;
-      for (const step of branchStack) {
-        const found = findNodePath(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;
-        }
-      }
-      targetTreeContext = ptr;
-    }
-    let movedNodeData = null;
-    const removeSourceNode = (node) => {
-      if (!node.children) return;
-      const idx = node.children.findIndex((child) => {
-        var _a;
-        const cId = child.is_section ? child.id : String((_a = child.node) == null ? void 0 : _a.id);
-        return String(cId) === String(sourceId);
-      });
-      if (idx !== -1) {
-        movedNodeData = node.children[idx];
-        node.children.splice(idx, 1);
-        return true;
-      }
-      for (const child of node.children) {
-        if (removeSourceNode(child)) return true;
-      }
-      return false;
-    };
-    const insertTargetNode = (node) => {
-      var _a;
-      const nodeId = node.is_section ? node.id : String((_a = node.node) == null ? void 0 : _a.id);
-      if (String(nodeId) === String(targetId)) {
-        if (!node.children) node.children = [];
-        node.children.push(movedNodeData);
-        return true;
-      }
-      if (node.children) {
-        for (const child of node.children) {
-          if (insertTargetNode(child)) return true;
-        }
-      }
-      return false;
-    };
-    const foundAndRemoved = removeSourceNode(targetTreeContext);
-    if (!foundAndRemoved || !movedNodeData) {
-      console.error("Node de origem n\xE3o encontrado na \xE1rvore.");
-      return;
-    }
-    const inserted = insertTargetNode(targetTreeContext);
-    if (!inserted) {
-      alert("N\xE3o \xE9 poss\xEDvel mover um node para dentro de seus pr\xF3prios descendentes.");
-      return;
-    }
-    updateGlobalTree(rootTreeClone);
-  };
   const handleTriggerFullRender = () => {
     var _a;
     if (onRenderFullAncestry && activeTree) {
@@ -6153,7 +6184,7 @@ function CreateAncestryPanel({
     ), /* @__PURE__ */ import_react10.default.createElement(
       "button",
       {
-        onClick: onToggleAddNodes,
+        onClick: () => handleToggleAddMode(false),
         className: `p-1.5 rounded-md transition-colors ${isAddingNodes ? "bg-cyan-500 text-white shadow-lg shadow-cyan-500/30" : "bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600"}`,
         title: isAddingNodes ? "Concluir edi\xE7\xE3o da estrutura" : "Editar estrutura e adicionar nodes"
       },
@@ -6162,17 +6193,54 @@ function CreateAncestryPanel({
       NodeItem,
       {
         nodeData: activeTree,
-        onSelectParent,
-        onRemoveNode,
+        onSelectParent: (id) => handleSelectAncestryParent(id, false),
+        onRemoveNode: (path) => handleRemoveNode(path, false),
         onEditRelationship,
-        onMoveNode: handleMoveNode,
+        onMoveNode: (s, t) => handleMoveNode(s, t, false),
         selectedParentId,
         level: 0,
         isLast: true,
         path: [],
         isEditable: isAddingNodes
       }
-    ), (!activeTree || activeTree.children.length === 0) && !isAddingNodes && /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center py-4 text-xs text-slate-500 italic" }, "A estrutura est\xE1 vazia. Clique no l\xE1pis acima para adicionar nodes."))), branchStack.length === 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-3 flex items-center justify-end px-1" }, /* @__PURE__ */ import_react10.default.createElement("label", { className: "flex items-center gap-2 cursor-pointer group select-none" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center transition-colors ${isPrivate ? "bg-indigo-500 border-indigo-500" : "border-slate-500 bg-transparent"}` }, isPrivate && /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiCheck, { size: 12, className: "text-white" })), /* @__PURE__ */ import_react10.default.createElement(
+    ), (!activeTree || activeTree.children.length === 0) && !isAddingNodes && /* @__PURE__ */ import_react10.default.createElement("div", { className: "text-center py-4 text-xs text-slate-500 italic" }, "A estrutura est\xE1 vazia. Clique no l\xE1pis acima para adicionar nodes."))), branchStack.length === 0 && ancestryMode.abstraction_tree && /* @__PURE__ */ import_react10.default.createElement("div", { className: `mt-6 rounded-lg border transition-all duration-300 overflow-hidden ${ancestryMode.isAddingAbstractionNodes ? "border-purple-500/40 bg-slate-900/60 ring-1 ring-purple-500/20" : "border-white/10 bg-slate-800/60"}` }, /* @__PURE__ */ import_react10.default.createElement("div", { className: `flex items-center justify-between px-3 py-2 border-b ${ancestryMode.isAddingAbstractionNodes ? "bg-purple-900/20 border-purple-500/20" : "bg-white/5 border-white/5"}` }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: `text-xs font-semibold uppercase tracking-wider ${ancestryMode.isAddingAbstractionNodes ? "text-purple-300" : "text-slate-400"}` }, "Estrutura de Abstra\xE7\xE3o"), ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-[10px] bg-purple-500/20 text-purple-300 px-1.5 py-0.5 rounded animate-pulse" }, "Editando")), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react10.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          const tempPayload = {
+            ancestry_id: currentAncestryId || "temp_rendering",
+            abstraction_tree: ancestryMode.abstraction_tree
+          };
+          if (onRenderAbstractionTree) onRenderAbstractionTree(tempPayload);
+        },
+        className: "p-1.5 rounded-md bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600 transition-colors",
+        title: "Renderizar Verticalmente no Cen\xE1rio"
+      },
+      /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiLayers, { size: 14 })
+    ), /* @__PURE__ */ import_react10.default.createElement(
+      "button",
+      {
+        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"
+      },
+      ancestryMode.isAddingAbstractionNodes ? /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiCheck, { size: 14 }) : /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiEdit2, { size: 14 })
+    ))), /* @__PURE__ */ import_react10.default.createElement("div", { className: "p-4 space-y-2" }, ancestryMode.isAddingAbstractionNodes && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mb-3 p-2 rounded bg-purple-900/20 border border-purple-500/20 text-xs text-purple-200 flex items-start gap-2" }, /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiMousePointer, { className: "mt-0.5 flex-shrink-0" }), /* @__PURE__ */ import_react10.default.createElement("span", null, "Clique nos nodes do cen\xE1rio para adicion\xE1-los. Arraste e solte para organizar a hierarquia.")), /* @__PURE__ */ import_react10.default.createElement(
+      NodeItem,
+      {
+        nodeData: ancestryMode.abstraction_tree,
+        onSelectParent: (id) => handleSelectAncestryParent(id, true),
+        onRemoveNode: (path) => handleRemoveNode(path, true),
+        onEditRelationship,
+        onMoveNode: (s, t) => handleMoveNode(s, t, true),
+        selectedParentId: ancestryMode.selectedAbstractionParentId,
+        level: 0,
+        isLast: true,
+        path: [],
+        isEditable: ancestryMode.isAddingAbstractionNodes
+      }
+    ))), branchStack.length === 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-3 flex items-center justify-end px-1" }, /* @__PURE__ */ import_react10.default.createElement("label", { className: "flex items-center gap-2 cursor-pointer group select-none" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: `w-4 h-4 rounded border flex items-center justify-center transition-colors ${isPrivate ? "bg-indigo-500 border-indigo-500" : "border-slate-500 bg-transparent"}` }, isPrivate && /* @__PURE__ */ import_react10.default.createElement(import_fi9.FiCheck, { size: 12, className: "text-white" })), /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         type: "checkbox",
@@ -9740,43 +9808,38 @@ function XViewScene({
         return;
       }
       if (ancestry.isActive) {
-        if (ancestry.isAddingNodes) {
+        if (ancestry.isAddingNodes || ancestry.isAddingAbstractionNodes) {
           const clickedNode = stateRef.current.dragCandidate || tryPickNode();
           stateRef.current.dragCandidate = null;
           stateRef.current.pointerDown.isDown = false;
           stateRef.current.controls.enabled = true;
-          if (clickedNode && ancestry.selectedParentId) {
+          const isAbstraction = ancestry.isAddingAbstractionNodes;
+          const currentSelectedParent = isAbstraction ? ancestry.selectedAbstractionParentId : ancestry.selectedParentId;
+          if (clickedNode && currentSelectedParent) {
             const clickedNodeId = String(clickedNode.userData.id);
-            const parentId = String(ancestry.selectedParentId);
+            const parentId = String(currentSelectedParent);
             if (clickedNodeId === parentId) {
               alert("Erro: N\xE3o \xE9 poss\xEDvel adicionar um Node como filho dele mesmo.");
               return;
             }
             const parentInfo = stateRef.current.nodeIdToParentFileMap.get(clickedNodeId);
-            if (!parentInfo) {
-              console.warn(`Node ${clickedNodeId} n\xE3o encontrado em nenhum arquivo pai.`);
-              return;
-            }
+            if (!parentInfo) return;
             const fullNodeData = (_a2 = parentDataRef.current[parentInfo.parentFileId]) == null ? void 0 : _a2.nodes.find((n) => String(n.id) === clickedNodeId);
-            if (!fullNodeData) {
-              console.error(`Falha ao encontrar dados completos do Node ${clickedNodeId} mesmo com parentInfo.`);
-              return;
-            }
+            if (!fullNodeData) return;
             const addChildToNode = (current, targetParentId, childNode) => {
               const currentId = current.is_section ? current.id || current.section_id : String(current.node.id);
               if (String(currentId) === String(targetParentId)) {
                 const alreadyExists = current.children.some((child) => !child.is_section && String(child.node.id) === String(childNode.id));
                 if (alreadyExists) return current;
-                const newChildren = [...current.children, { node: childNode, children: [], relationship: {} }];
-                return { ...current, children: newChildren };
+                return { ...current, children: [...current.children, { node: childNode, children: [], relationship: {} }] };
               }
-              const updatedChildren = current.children.map((c) => addChildToNode(c, targetParentId, childNode));
-              return { ...current, children: updatedChildren };
+              return { ...current, children: current.children.map((c) => addChildToNode(c, targetParentId, childNode)) };
             };
             setAncestryMode((prev) => {
-              if (!prev.tree) return prev;
-              const newTree = addChildToNode(prev.tree, parentId, fullNodeData);
-              return { ...prev, tree: newTree };
+              const treeKey = isAbstraction ? "abstraction_tree" : "tree";
+              if (!prev[treeKey]) return prev;
+              const newTree = addChildToNode(prev[treeKey], parentId, fullNodeData);
+              return { ...prev, [treeKey]: newTree };
             });
           }
           return;
@@ -10259,12 +10322,15 @@ function XViewScene({
     setAncestryMode({
       isActive: true,
       tree: { node: nodeData, children: [] },
+      abstraction_tree: { node: nodeData, children: [] },
       selectedParentId: nodeData.id,
+      selectedAbstractionParentId: nodeData.id,
       isEditMode: false,
       currentAncestryId: null,
       ancestryName: `Ancestralidade ${nodeData.name}`,
       ancestryDescription: "",
-      isAddingNodes: false
+      isAddingNodes: false,
+      isAddingAbstractionNodes: false
     });
     if (mountRef.current) {
       mountRef.current.style.cursor = "default";
@@ -10770,6 +10836,46 @@ function XViewScene({
     },
     [addOrUpdateNodeMesh, tweenToTarget, buildFullAncestryTree, readingMode.isActive, ancestryMode.isActive]
   );
+  const handleRenderAbstractionTree = (0, import_react23.useCallback)((ancestryObject) => {
+    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);
+    if (!fullTree || !fullTree.node) return;
+    const absId = ancestryObject.ancestry_id + "_abs";
+    handleClearAncestryVisuals(absId);
+    const colorHex = 9133302;
+    const resolution = new THREE3.Vector2(renderer.domElement.clientWidth, renderer.domElement.clientHeight);
+    const ancestryEntry = { id: absId, lines: [], isFullRender: true };
+    renderedAncestries.push(ancestryEntry);
+    const rootNodeId = String(fullTree.node.id);
+    let rootNodeMesh = nodeObjects[rootNodeId];
+    let rootTargetPos = rootNodeMesh ? rootNodeMesh.position.clone() : new THREE3.Vector3(0, 0, 0);
+    if (!rootNodeMesh) {
+      rootNodeMesh = addOrUpdateNodeMesh(fullTree.node, rootTargetPos, true);
+    }
+    const SPACING_Y = -40;
+    const SPACING_X = 55;
+    const renderVertical = (treeNode, parentMesh, parentPos, level) => {
+      if (!treeNode.children || treeNode.children.length === 0) return;
+      const totalSiblings = treeNode.children.length;
+      treeNode.children.forEach((childItem, i) => {
+        if (!childItem.node) return;
+        const childX = parentPos.x + (i - (totalSiblings - 1) / 2) * (SPACING_X / Math.max(1, level * 0.4));
+        const childY = parentPos.y + SPACING_Y;
+        const childPos = new THREE3.Vector3(childX, childY, parentPos.z);
+        const childMesh = addOrUpdateNodeMesh(childItem.node, childPos, true);
+        const line = createAncestryLinkLine(parentMesh, childMesh, resolution, {}, colorHex);
+        ancestryGroup.add(line);
+        ancestryEntry.lines.push(line);
+        renderVertical(childItem, childMesh, childPos, level + 1);
+      });
+    };
+    renderVertical(fullTree, rootNodeMesh, rootTargetPos, 1);
+    stateRef.current.ancestryLinks = renderedAncestries.flatMap((a) => a.lines);
+    tweenToTarget(rootTargetPos, 0.7);
+  }, [addOrUpdateNodeMesh, tweenToTarget, buildFullAncestryTree, handleClearAncestryVisuals]);
   const handleReadModeBranchNav = (0, import_react23.useCallback)((nodeId, action, direction = "right") => {
     const { ancestry, branchStack } = readingMode;
     if (!ancestry || !ancestry.tree) return;
@@ -11179,22 +11285,24 @@ function XViewScene({
         alert("Falha ao reconstruir a \xE1rvore de ancestralidade. Alguns Nodes podem estar faltando.");
         return;
       }
+      const fullAbstractionTree = ancestryObject.abstraction_tree ? buildFullAncestryTree(ancestryObject.abstraction_tree, allParentNodes, allAncestries) : { node: fullTree.node, children: [] };
       setAncestryMode({
         isActive: true,
-        // --- CORREÇÃO AQUI ---
-        // 1. Espalhamos as propriedades do objeto (custom props, ids, etc) PRIMEIRO.
         ...ancestryObject,
-        // 2. Definimos a 'tree' DEPOIS. Isso garante que a árvore 'fullTree' (hidratada com os nodes reais)
-        // prevaleça sobre a árvore 'crua' (apenas IDs) que veio dentro de 'ancestryObject'.
         tree: fullTree,
-        // 3. Garantimos que o resto das configurações de controle estejam corretas
+        abstraction_tree: fullAbstractionTree,
+        // NOVO
         selectedParentId: ancestryObject.ancestral_node,
+        selectedAbstractionParentId: ancestryObject.ancestral_node,
+        // NOVO
         isEditMode: true,
         currentAncestryId: ancestryObject.ancestry_id,
         ancestryName: ancestryObject.name || `Ancestralidade ${fullTree.node.name}`,
         ancestryDescription: ancestryObject.description || "",
         ancestryDescriptionSections: ancestryObject.description_sections || [],
-        isAddingNodes: false
+        isAddingNodes: false,
+        isAddingAbstractionNodes: false
+        // NOVO
       });
     },
     [handleRenderAncestry, buildFullAncestryTree]
@@ -11265,6 +11373,7 @@ function XViewScene({
         };
       };
       const treeWithIds = convertTreeToIds(treeToUse);
+      const abstractionTreeWithIds = convertTreeToIds(ancestryMode.abstraction_tree);
       if (!treeWithIds) {
         alert("Erro ao processar a \xE1rvore da ancestralidade.");
         return;
@@ -11280,6 +11389,7 @@ function XViewScene({
         description: ancestryDescription,
         description_sections: ancestrySections,
         tree: treeWithIds,
+        abstraction_tree: abstractionTreeWithIds,
         _imported_from_view_id: originalAncestryObj == null ? void 0 : originalAncestryObj._imported_from_view_id,
         _imported_from_view_owner_id: originalAncestryObj == null ? void 0 : originalAncestryObj._imported_from_view_owner_id,
         _origin_db_ids: originalAncestryObj == null ? void 0 : originalAncestryObj._origin_db_ids,
@@ -11724,6 +11834,7 @@ function XViewScene({
       CreateAncestryPanel,
       {
         ancestryMode,
+        setAncestryMode,
         onSelectParent: handleSelectAncestryParent,
         onRemoveNode: handleRemoveFromAncestry,
         onSave: handleSaveAncestry,
@@ -11742,7 +11853,8 @@ function XViewScene({
         onRenderFullAncestry: (data, allowed, focus, rot) => handleRenderAncestry(data, allowed, focus, rot),
         onClearAncestryVisuals: handleClearAncestryVisuals,
         onUploadFile: upload_file_action,
-        onOpenImageViewer: handleOpenImageViewer
+        onOpenImageViewer: handleOpenImageViewer,
+        onRenderAbstractionTree: (data) => handleRenderAbstractionTree(data)
       }
     ),
     editingAncestryRel.visible && /* @__PURE__ */ import_react23.default.createElement(
@@ -12112,7 +12224,16 @@ async function get_scene_view_data_logic(db_services, scene_config, owner_id) {
       if (!parentNodeIds.has(String(ancestry.ancestral_node))) return null;
       const cleanedTree = pruneTree(ancestry.tree);
       if (!cleanedTree) return null;
-      return { ...ancestry, tree: cleanedTree };
+      let cleanedAbstraction = null;
+      if (ancestry.abstraction_tree) {
+        cleanedAbstraction = pruneTree(ancestry.abstraction_tree);
+      }
+      return {
+        ...ancestry,
+        tree: cleanedTree,
+        abstraction_tree: cleanedAbstraction
+        // Salva a árvore limpa
+      };
     }).filter(Boolean);
     if (JSON.stringify(cleanedAncestryData) !== originalAncestryDataString) {
       ancestryData = cleanedAncestryData;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/XViewScene.jsx
-import React23, { useCallback as useCallback2, useEffect as useEffect20, useRef as useRef17, useState as useState22, useMemo as useMemo12 } from "react";
+import React23, { useCallback as useCallback3, useEffect as useEffect20, useRef as useRef17, useState as useState22, useMemo as useMemo12 } from "react";
 import { useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
 import CryptoJS from "crypto-js";
@@ -4757,7 +4757,7 @@ function AncestryRelationshipPanel({
 }
 
 // src/components/CreateAncestryPanel.jsx
-import React10, { useState as useState10, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef8 } from "react";
+import React10, { useState as useState10, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef8, useCallback } from "react";
 import {
   FiEdit2 as FiEdit23,
   FiBookOpen as FiBookOpen2,
@@ -5000,8 +5000,12 @@ 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,
@@ -5012,12 +5016,14 @@ function CreateAncestryPanel({
   onUpdateTree,
   onAncestrySectionChange,
   onToggleAddNodes,
+  // Mantido para compatibilidade
   onRenderFullAncestry,
   onHighlightNode,
   onClearAncestryVisuals,
   onUploadFile,
-  onOpenImageViewer
-  // <--- ADICIONE NA LISTA DE PROPS RECEBIDAS
+  onOpenImageViewer,
+  onRenderAbstractionTree
+  // <--- Nova prop recebida
 }) {
   const {
     tree: rootTree,
@@ -5053,6 +5059,91 @@ function CreateAncestryPanel({
       console.warn("onOpenImageViewer n\xE3o foi passado para CreateAncestryPanel");
     }
   };
+  const handleSelectAncestryParent = (nodeId, isAbstraction = false) => {
+    setAncestryMode((prev) => isAbstraction ? { ...prev, selectedAbstractionParentId: nodeId } : { ...prev, selectedParentId: nodeId });
+  };
+  const handleToggleAddMode = (isAbstraction = false) => {
+    setAncestryMode((prev) => isAbstraction ? { ...prev, isAddingAbstractionNodes: !prev.isAddingAbstractionNodes } : { ...prev, isAddingNodes: !prev.isAddingNodes });
+  };
+  const handleRemoveNode = useCallback((pathToRemove, isAbstraction = false) => {
+    if (!Array.isArray(pathToRemove) || pathToRemove.length === 0) return;
+    const treeKey = isAbstraction ? "abstraction_tree" : "tree";
+    setAncestryMode((prev) => {
+      if (!prev[treeKey]) return prev;
+      const newTree = JSON.parse(JSON.stringify(prev[treeKey]));
+      let currentParent = newTree;
+      for (let i = 0; i < pathToRemove.length - 1; i++) {
+        const childIndex = pathToRemove[i];
+        if (currentParent.children && currentParent.children[childIndex]) {
+          currentParent = currentParent.children[childIndex];
+        } else return prev;
+      }
+      const indexToRemove = pathToRemove[pathToRemove.length - 1];
+      if (currentParent.children && currentParent.children.length > indexToRemove) {
+        currentParent.children.splice(indexToRemove, 1);
+      }
+      return { ...prev, [treeKey]: newTree };
+    });
+  }, [setAncestryMode]);
+  const handleMoveNode = (sourceId, targetId, isAbstraction = false) => {
+    const treeKey = isAbstraction ? "abstraction_tree" : "tree";
+    const activeTreeContext = ancestryMode[treeKey];
+    if (!activeTreeContext) return;
+    const rootTreeClone = JSON.parse(JSON.stringify(ancestryMode[treeKey]));
+    let targetTreeContext = rootTreeClone;
+    if (!isAbstraction && branchStack.length > 0) {
+      let ptr = rootTreeClone;
+      for (const step of branchStack) {
+        const found = findNodePath(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;
+        }
+      }
+      targetTreeContext = ptr;
+    }
+    let movedNodeData = null;
+    const removeSourceNode = (node) => {
+      if (!node.children) return false;
+      const idx = node.children.findIndex((child) => {
+        var _a;
+        return String(child.is_section ? child.id : (_a = child.node) == null ? void 0 : _a.id) === String(sourceId);
+      });
+      if (idx !== -1) {
+        movedNodeData = node.children[idx];
+        node.children.splice(idx, 1);
+        return true;
+      }
+      for (const child of node.children) {
+        if (removeSourceNode(child)) return true;
+      }
+      return false;
+    };
+    const insertTargetNode = (node) => {
+      var _a;
+      if (String(node.is_section ? node.id : (_a = node.node) == null ? void 0 : _a.id) === String(targetId)) {
+        if (!node.children) node.children = [];
+        node.children.push(movedNodeData);
+        return true;
+      }
+      if (node.children) {
+        for (const child of node.children) {
+          if (insertTargetNode(child)) return true;
+        }
+      }
+      return false;
+    };
+    if (removeSourceNode(targetTreeContext) && movedNodeData) {
+      if (insertTargetNode(targetTreeContext)) {
+        if (!isAbstraction) {
+          updateGlobalTree(rootTreeClone);
+        }
+        setAncestryMode((prev) => ({ ...prev, [treeKey]: rootTreeClone }));
+      } else {
+        alert("N\xE3o \xE9 poss\xEDvel mover um node para dentro de seus pr\xF3prios descendentes.");
+      }
+    }
+  };
   const takeSnapshot = (tree, name, desc, sections, customProps2, isPrivateVal) => {
     return {
       tree: JSON.stringify(tree),
@@ -5823,66 +5914,6 @@ function CreateAncestryPanel({
       updateGlobalTree(newRootTree);
     }
   }, [description, existingSections]);
-  const handleMoveNode = (sourceId, targetId) => {
-    if (!activeTree) return;
-    const rootTreeClone = JSON.parse(JSON.stringify(ancestryMode.tree));
-    let targetTreeContext = rootTreeClone;
-    if (branchStack.length > 0) {
-      let ptr = rootTreeClone;
-      for (const step of branchStack) {
-        const found = findNodePath(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;
-        }
-      }
-      targetTreeContext = ptr;
-    }
-    let movedNodeData = null;
-    const removeSourceNode = (node) => {
-      if (!node.children) return;
-      const idx = node.children.findIndex((child) => {
-        var _a;
-        const cId = child.is_section ? child.id : String((_a = child.node) == null ? void 0 : _a.id);
-        return String(cId) === String(sourceId);
-      });
-      if (idx !== -1) {
-        movedNodeData = node.children[idx];
-        node.children.splice(idx, 1);
-        return true;
-      }
-      for (const child of node.children) {
-        if (removeSourceNode(child)) return true;
-      }
-      return false;
-    };
-    const insertTargetNode = (node) => {
-      var _a;
-      const nodeId = node.is_section ? node.id : String((_a = node.node) == null ? void 0 : _a.id);
-      if (String(nodeId) === String(targetId)) {
-        if (!node.children) node.children = [];
-        node.children.push(movedNodeData);
-        return true;
-      }
-      if (node.children) {
-        for (const child of node.children) {
-          if (insertTargetNode(child)) return true;
-        }
-      }
-      return false;
-    };
-    const foundAndRemoved = removeSourceNode(targetTreeContext);
-    if (!foundAndRemoved || !movedNodeData) {
-      console.error("Node de origem n\xE3o encontrado na \xE1rvore.");
-      return;
-    }
-    const inserted = insertTargetNode(targetTreeContext);
-    if (!inserted) {
-      alert("N\xE3o \xE9 poss\xEDvel mover um node para dentro de seus pr\xF3prios descendentes.");
-      return;
-    }
-    updateGlobalTree(rootTreeClone);
-  };
   const handleTriggerFullRender = () => {
     var _a;
     if (onRenderFullAncestry && activeTree) {
@@ -6134,7 +6165,7 @@ function CreateAncestryPanel({
     ), /* @__PURE__ */ React10.createElement(
       "button",
       {
-        onClick: onToggleAddNodes,
+        onClick: () => handleToggleAddMode(false),
         className: `p-1.5 rounded-md transition-colors ${isAddingNodes ? "bg-cyan-500 text-white shadow-lg shadow-cyan-500/30" : "bg-slate-700 text-slate-400 hover:text-white hover:bg-slate-600"}`,
         title: isAddingNodes ? "Concluir edi\xE7\xE3o da estrutura" : "Editar estrutura e adicionar nodes"
       },
@@ -6143,17 +6174,54 @@ function CreateAncestryPanel({
       NodeItem,
       {
         nodeData: activeTree,
-        onSelectParent,
-        onRemoveNode,
+        onSelectParent: (id) => handleSelectAncestryParent(id, false),
+        onRemoveNode: (path) => handleRemoveNode(path, false),
         onEditRelationship,
-        onMoveNode: handleMoveNode,
+        onMoveNode: (s, t) => handleMoveNode(s, t, false),
         selectedParentId,
         level: 0,
         isLast: true,
         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 && /* @__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(
+    ), (!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",
+      {
+        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"
+      },
+      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(
       "input",
       {
         type: "checkbox",
@@ -6201,7 +6269,7 @@ function CreateAncestryPanel({
 }
 
 // src/components/ImageViewer.jsx
-import React11, { useState as useState11, useEffect as useEffect10, useLayoutEffect as useLayoutEffect2, useCallback } from "react";
+import React11, { useState as useState11, useEffect as useEffect10, useLayoutEffect as useLayoutEffect2, useCallback as useCallback2 } from "react";
 import { FiX as FiX2, FiChevronLeft as FiChevronLeft3, FiChevronRight as FiChevronRight5 } from "react-icons/fi";
 function ImageViewer({ data, onClose }) {
   var _a;
@@ -6214,12 +6282,12 @@ function ImageViewer({ data, onClose }) {
       setCurrentIndex(startIndex);
     }
   }, [visible, startIndex]);
-  const handleNext = useCallback(() => {
+  const handleNext = useCallback2(() => {
     if (images.length > 1) {
       setCurrentIndex((prev) => (prev + 1) % images.length);
     }
   }, [images.length]);
-  const handlePrev = useCallback(() => {
+  const handlePrev = useCallback2(() => {
     if (images.length > 1) {
       setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
     }
@@ -8865,10 +8933,10 @@ function XViewScene({
     }
     stateRef.current.nodeIdToParentFileMap = map;
   }, [isInitialized, sceneVersion]);
-  const handleNavigateBack = useCallback2(() => {
+  const handleNavigateBack = useCallback3(() => {
     router.push("/dashboard/scenes");
   }, [router]);
-  const handleConfirmImport = useCallback2(
+  const handleConfirmImport = useCallback3(
     async (importPayload) => {
       var _a2, _b2;
       let files = [];
@@ -8967,7 +9035,7 @@ function XViewScene({
   const handleOpenImageViewer = (images, startIndex) => {
     setImageViewer({ visible: true, images, startIndex });
   };
-  const tweenToTarget = useCallback2((target, zoomFactor = 1, forcedDirection = null) => {
+  const tweenToTarget = useCallback3((target, zoomFactor = 1, forcedDirection = null) => {
     const { camera, controls, tweenGroup } = stateRef.current;
     if (!camera || !controls || !tweenGroup) return;
     const targetPos = target instanceof THREE3.Mesh ? target.getWorldPosition(new THREE3.Vector3()) : target;
@@ -8990,7 +9058,7 @@ function XViewScene({
     if (!t || typeof t.closest !== "function") return false;
     return !!t.closest(".ui-overlay");
   };
-  const buildFullAncestryTree = useCallback2((idTree, nodes, ancestries = []) => {
+  const buildFullAncestryTree = useCallback3((idTree, nodes, ancestries = []) => {
     if (!idTree) return null;
     const nodeMap = new Map(nodes.map((n) => [String(n.id), n]));
     const ancestryMap = new Map(ancestries.map((a) => [String(a.ancestry_id), a]));
@@ -9070,7 +9138,7 @@ function XViewScene({
     }
     return recursiveBuild(idTree);
   }, []);
-  const handleActivateTimeline = useCallback2(() => {
+  const handleActivateTimeline = useCallback3(() => {
     const { nodeObjects, tweenGroup, timelineIntervalsGroup } = stateRef.current;
     if (!nodeObjects || !tweenGroup || !timelineIntervalsGroup) return;
     while (timelineIntervalsGroup.children.length > 0) {
@@ -9223,7 +9291,7 @@ function XViewScene({
       }
     });
   }, []);
-  const handleVersionTimeline = useCallback2((sourceMesh, versionMeshes) => {
+  const handleVersionTimeline = useCallback3((sourceMesh, versionMeshes) => {
     const { tweenGroup, timelineIntervalsGroup } = stateRef.current;
     if (!tweenGroup || !timelineIntervalsGroup || versionMeshes.length === 0) return;
     versionMeshes.forEach((mesh) => {
@@ -9404,12 +9472,12 @@ function XViewScene({
     isInitialized,
     permissionStatus
   ]);
-  const isNodeInView = useCallback2((id) => {
+  const isNodeInView = useCallback3((id) => {
     const key = String(id);
     const objs = stateRef.current.nodeObjects || {};
     return !!objs[key];
   }, []);
-  const addOrUpdateNodeMesh = useCallback2((nodeData, position, suppressVersionUpdate = false) => {
+  const addOrUpdateNodeMesh = useCallback3((nodeData, position, suppressVersionUpdate = false) => {
     const { graphGroup, nodeObjects, clickableNodes, glowTexture, tweenGroup } = stateRef.current;
     const nodeId = String(nodeData.id);
     if (nodeObjects[nodeId]) {
@@ -9734,43 +9802,38 @@ function XViewScene({
         return;
       }
       if (ancestry.isActive) {
-        if (ancestry.isAddingNodes) {
+        if (ancestry.isAddingNodes || ancestry.isAddingAbstractionNodes) {
           const clickedNode = stateRef.current.dragCandidate || tryPickNode();
           stateRef.current.dragCandidate = null;
           stateRef.current.pointerDown.isDown = false;
           stateRef.current.controls.enabled = true;
-          if (clickedNode && ancestry.selectedParentId) {
+          const isAbstraction = ancestry.isAddingAbstractionNodes;
+          const currentSelectedParent = isAbstraction ? ancestry.selectedAbstractionParentId : ancestry.selectedParentId;
+          if (clickedNode && currentSelectedParent) {
             const clickedNodeId = String(clickedNode.userData.id);
-            const parentId = String(ancestry.selectedParentId);
+            const parentId = String(currentSelectedParent);
             if (clickedNodeId === parentId) {
               alert("Erro: N\xE3o \xE9 poss\xEDvel adicionar um Node como filho dele mesmo.");
               return;
             }
             const parentInfo = stateRef.current.nodeIdToParentFileMap.get(clickedNodeId);
-            if (!parentInfo) {
-              console.warn(`Node ${clickedNodeId} n\xE3o encontrado em nenhum arquivo pai.`);
-              return;
-            }
+            if (!parentInfo) return;
             const fullNodeData = (_a2 = parentDataRef.current[parentInfo.parentFileId]) == null ? void 0 : _a2.nodes.find((n) => String(n.id) === clickedNodeId);
-            if (!fullNodeData) {
-              console.error(`Falha ao encontrar dados completos do Node ${clickedNodeId} mesmo com parentInfo.`);
-              return;
-            }
+            if (!fullNodeData) return;
             const addChildToNode = (current, targetParentId, childNode) => {
               const currentId = current.is_section ? current.id || current.section_id : String(current.node.id);
               if (String(currentId) === String(targetParentId)) {
                 const alreadyExists = current.children.some((child) => !child.is_section && String(child.node.id) === String(childNode.id));
                 if (alreadyExists) return current;
-                const newChildren = [...current.children, { node: childNode, children: [], relationship: {} }];
-                return { ...current, children: newChildren };
+                return { ...current, children: [...current.children, { node: childNode, children: [], relationship: {} }] };
               }
-              const updatedChildren = current.children.map((c) => addChildToNode(c, targetParentId, childNode));
-              return { ...current, children: updatedChildren };
+              return { ...current, children: current.children.map((c) => addChildToNode(c, targetParentId, childNode)) };
             };
             setAncestryMode((prev) => {
-              if (!prev.tree) return prev;
-              const newTree = addChildToNode(prev.tree, parentId, fullNodeData);
-              return { ...prev, tree: newTree };
+              const treeKey = isAbstraction ? "abstraction_tree" : "tree";
+              if (!prev[treeKey]) return prev;
+              const newTree = addChildToNode(prev[treeKey], parentId, fullNodeData);
+              return { ...prev, [treeKey]: newTree };
             });
           }
           return;
@@ -10063,7 +10126,7 @@ function XViewScene({
       }
     };
   }, [isInitialized, tweenToTarget, dbSaveUrl, isNodeInView, addOrUpdateNodeMesh, handleActivateTimeline, get_scene_view_data, save_view_data]);
-  const handleGhostNodeImageChange = useCallback2((useImage, imageUrl) => {
+  const handleGhostNodeImageChange = useCallback3((useImage, imageUrl) => {
     const { node: ghostNode, line: ghostLine, aura: ghostAura } = stateRef.current.ghostElements;
     const { graphGroup, glowTexture } = stateRef.current;
     if (!ghostNode || !graphGroup) return;
@@ -10105,7 +10168,7 @@ function XViewScene({
       aura: newGhostNode.getObjectByName("aura")
     };
   }, []);
-  const handleGhostNodeIntensityChange = useCallback2((newIntensity) => {
+  const handleGhostNodeIntensityChange = useCallback3((newIntensity) => {
     const { node: ghostNode, aura: ghostAura } = stateRef.current.ghostElements;
     if (!ghostNode) return;
     const adjustedIntensity = newIntensity + MIN_VISIBILITY_INTENSITY;
@@ -10126,7 +10189,7 @@ function XViewScene({
       ghostAura.material.opacity = Math.min(0.8, newIntensity * 0.15);
     }
   }, []);
-  const handleDetailNodeIntensityChange = useCallback2((nodeId, newIntensity) => {
+  const handleDetailNodeIntensityChange = useCallback3((nodeId, newIntensity) => {
     const mesh = stateRef.current.nodeObjects[String(nodeId)];
     if (!mesh) return;
     const adjustedIntensity = newIntensity + MIN_VISIBILITY_INTENSITY;
@@ -10253,18 +10316,21 @@ function XViewScene({
     setAncestryMode({
       isActive: true,
       tree: { node: nodeData, children: [] },
+      abstraction_tree: { node: nodeData, children: [] },
       selectedParentId: nodeData.id,
+      selectedAbstractionParentId: nodeData.id,
       isEditMode: false,
       currentAncestryId: null,
       ancestryName: `Ancestralidade ${nodeData.name}`,
       ancestryDescription: "",
-      isAddingNodes: false
+      isAddingNodes: false,
+      isAddingAbstractionNodes: false
     });
     if (mountRef.current) {
       mountRef.current.style.cursor = "default";
     }
   };
-  const handleAncestryTreeUpdate = useCallback2((newTree, extraData = null) => {
+  const handleAncestryTreeUpdate = useCallback3((newTree, extraData = null) => {
     setAncestryMode((prev) => {
       const prevTreeStr = JSON.stringify(prev.tree);
       const newTreeStr = JSON.stringify(newTree);
@@ -10334,7 +10400,7 @@ function XViewScene({
   const handleStartVersioning = (nodeData) => {
     userActionHandlers.handleStartVersioning(actionHandlerContext, nodeData);
   };
-  const handleClearAncestryVisuals = useCallback2((ancestryId) => {
+  const handleClearAncestryVisuals = useCallback3((ancestryId) => {
     const { renderedAncestries, ancestryGroup } = stateRef.current;
     const renderIndex = renderedAncestries.findIndex((a) => String(a.id) === String(ancestryId));
     if (renderIndex !== -1) {
@@ -10348,7 +10414,7 @@ function XViewScene({
       stateRef.current.ancestryLinks = renderedAncestries.flatMap((a) => a.lines);
     }
   }, []);
-  const handleRenderAncestry = useCallback2(
+  const handleRenderAncestry = useCallback3(
     async (ancestryObject, allowedSectionIds = null, activeSectionIdForFocus = null, baseRotation = 0, forceReprocess = true) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
       if (!ancestryObject || !ancestryObject.tree) {
@@ -10764,7 +10830,47 @@ function XViewScene({
     },
     [addOrUpdateNodeMesh, tweenToTarget, buildFullAncestryTree, readingMode.isActive, ancestryMode.isActive]
   );
-  const handleReadModeBranchNav = useCallback2((nodeId, action, direction = "right") => {
+  const handleRenderAbstractionTree = useCallback3((ancestryObject) => {
+    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);
+    if (!fullTree || !fullTree.node) return;
+    const absId = ancestryObject.ancestry_id + "_abs";
+    handleClearAncestryVisuals(absId);
+    const colorHex = 9133302;
+    const resolution = new THREE3.Vector2(renderer.domElement.clientWidth, renderer.domElement.clientHeight);
+    const ancestryEntry = { id: absId, lines: [], isFullRender: true };
+    renderedAncestries.push(ancestryEntry);
+    const rootNodeId = String(fullTree.node.id);
+    let rootNodeMesh = nodeObjects[rootNodeId];
+    let rootTargetPos = rootNodeMesh ? rootNodeMesh.position.clone() : new THREE3.Vector3(0, 0, 0);
+    if (!rootNodeMesh) {
+      rootNodeMesh = addOrUpdateNodeMesh(fullTree.node, rootTargetPos, true);
+    }
+    const SPACING_Y = -40;
+    const SPACING_X = 55;
+    const renderVertical = (treeNode, parentMesh, parentPos, level) => {
+      if (!treeNode.children || treeNode.children.length === 0) return;
+      const totalSiblings = treeNode.children.length;
+      treeNode.children.forEach((childItem, i) => {
+        if (!childItem.node) return;
+        const childX = parentPos.x + (i - (totalSiblings - 1) / 2) * (SPACING_X / Math.max(1, level * 0.4));
+        const childY = parentPos.y + SPACING_Y;
+        const childPos = new THREE3.Vector3(childX, childY, parentPos.z);
+        const childMesh = addOrUpdateNodeMesh(childItem.node, childPos, true);
+        const line = createAncestryLinkLine(parentMesh, childMesh, resolution, {}, colorHex);
+        ancestryGroup.add(line);
+        ancestryEntry.lines.push(line);
+        renderVertical(childItem, childMesh, childPos, level + 1);
+      });
+    };
+    renderVertical(fullTree, rootNodeMesh, rootTargetPos, 1);
+    stateRef.current.ancestryLinks = renderedAncestries.flatMap((a) => a.lines);
+    tweenToTarget(rootTargetPos, 0.7);
+  }, [addOrUpdateNodeMesh, tweenToTarget, buildFullAncestryTree, handleClearAncestryVisuals]);
+  const handleReadModeBranchNav = useCallback3((nodeId, action, direction = "right") => {
     const { ancestry, branchStack } = readingMode;
     if (!ancestry || !ancestry.tree) return;
     const allAncestries = ancestryDataRef.current || [];
@@ -10908,7 +11014,7 @@ function XViewScene({
       }));
     }
   }, [readingMode, handleRenderAncestry, buildFullAncestryTree, tweenToTarget]);
-  const handleReadModeHighlight = useCallback2((nodeId) => {
+  const handleReadModeHighlight = useCallback3((nodeId) => {
     if (stateRef.current.highlightedNodeId !== nodeId) {
       stateRef.current.highlightedNodeId = nodeId;
     }
@@ -11006,7 +11112,7 @@ function XViewScene({
       // <--- ADICIONADO
     };
   }, [readingMode, buildFullAncestryTree, ancestryDataRef.current]);
-  const handleStartReadingAncestry = useCallback2(
+  const handleStartReadingAncestry = useCallback3(
     async (ancestryObject) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
       if (!ancestryObject || !ancestryObject.tree) {
@@ -11032,7 +11138,7 @@ function XViewScene({
     },
     [handleRenderAncestry]
   );
-  const handleReadModeSectionChange = useCallback2((activeSectionId) => {
+  const handleReadModeSectionChange = useCallback3((activeSectionId) => {
     const { ancestry, branchStack } = readingMode;
     if (!ancestry || !readingMode.isActive) return;
     let targetObj = ancestry;
@@ -11101,10 +11207,10 @@ function XViewScene({
     }, 0);
     handleRenderAncestry(renderPayload, allowedIds, focusTargetId, rotation);
   }, [readingMode, handleRenderAncestry, buildFullAncestryTree, ancestryDataRef.current]);
-  const handleCloseReadMode = useCallback2(() => {
+  const handleCloseReadMode = useCallback3(() => {
     setReadingMode({ isActive: false, ancestry: null, branchStack: [] });
   }, []);
-  const handleAncestrySectionChange = useCallback2((activeSectionId, ancestryOverride = null, rotation = 0) => {
+  const handleAncestrySectionChange = useCallback3((activeSectionId, ancestryOverride = null, rotation = 0) => {
     var _a2, _b2;
     const currentMode = stateRef.current.ancestry;
     let targetObj = ancestryOverride;
@@ -11156,7 +11262,7 @@ function XViewScene({
     const renderPayload = { ...targetObj, tree: treeToRender };
     handleRenderAncestry(renderPayload, allowedIds, focusTargetId, rotation);
   }, [handleRenderAncestry]);
-  const handleEditAncestry = useCallback2(
+  const handleEditAncestry = useCallback3(
     async (ancestryObject) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
       if (!ancestryObject || !ancestryObject.tree) {
@@ -11173,22 +11279,24 @@ function XViewScene({
         alert("Falha ao reconstruir a \xE1rvore de ancestralidade. Alguns Nodes podem estar faltando.");
         return;
       }
+      const fullAbstractionTree = ancestryObject.abstraction_tree ? buildFullAncestryTree(ancestryObject.abstraction_tree, allParentNodes, allAncestries) : { node: fullTree.node, children: [] };
       setAncestryMode({
         isActive: true,
-        // --- CORREÇÃO AQUI ---
-        // 1. Espalhamos as propriedades do objeto (custom props, ids, etc) PRIMEIRO.
         ...ancestryObject,
-        // 2. Definimos a 'tree' DEPOIS. Isso garante que a árvore 'fullTree' (hidratada com os nodes reais)
-        // prevaleça sobre a árvore 'crua' (apenas IDs) que veio dentro de 'ancestryObject'.
         tree: fullTree,
-        // 3. Garantimos que o resto das configurações de controle estejam corretas
+        abstraction_tree: fullAbstractionTree,
+        // NOVO
         selectedParentId: ancestryObject.ancestral_node,
+        selectedAbstractionParentId: ancestryObject.ancestral_node,
+        // NOVO
         isEditMode: true,
         currentAncestryId: ancestryObject.ancestry_id,
         ancestryName: ancestryObject.name || `Ancestralidade ${fullTree.node.name}`,
         ancestryDescription: ancestryObject.description || "",
         ancestryDescriptionSections: ancestryObject.description_sections || [],
-        isAddingNodes: false
+        isAddingNodes: false,
+        isAddingAbstractionNodes: false
+        // NOVO
       });
     },
     [handleRenderAncestry, buildFullAncestryTree]
@@ -11196,7 +11304,7 @@ function XViewScene({
   const handleSelectAncestryParent = (nodeId) => {
     setAncestryMode((prev) => ({ ...prev, selectedParentId: nodeId }));
   };
-  const handleRemoveFromAncestry = useCallback2((pathToRemove) => {
+  const handleRemoveFromAncestry = useCallback3((pathToRemove) => {
     if (!Array.isArray(pathToRemove) || pathToRemove.length === 0) {
       console.warn("Tentativa de remover a raiz ou caminho inv\xE1lido.");
       return;
@@ -11221,7 +11329,7 @@ function XViewScene({
       return { ...prev, tree: newTree };
     });
   }, []);
-  const handleSaveAncestry = useCallback2(
+  const handleSaveAncestry = useCallback3(
     async (ancestryName, ancestryDescription, ancestrySections, keepOpen = false, treeOverride = null, ancestryCustomProps = {}) => {
       const treeToUse = treeOverride || ancestryMode.tree;
       const { isEditMode, currentAncestryId } = ancestryMode;
@@ -11259,6 +11367,7 @@ function XViewScene({
         };
       };
       const treeWithIds = convertTreeToIds(treeToUse);
+      const abstractionTreeWithIds = convertTreeToIds(ancestryMode.abstraction_tree);
       if (!treeWithIds) {
         alert("Erro ao processar a \xE1rvore da ancestralidade.");
         return;
@@ -11274,6 +11383,7 @@ function XViewScene({
         description: ancestryDescription,
         description_sections: ancestrySections,
         tree: treeWithIds,
+        abstraction_tree: abstractionTreeWithIds,
         _imported_from_view_id: originalAncestryObj == null ? void 0 : originalAncestryObj._imported_from_view_id,
         _imported_from_view_owner_id: originalAncestryObj == null ? void 0 : originalAncestryObj._imported_from_view_owner_id,
         _origin_db_ids: originalAncestryObj == null ? void 0 : originalAncestryObj._origin_db_ids,
@@ -11423,7 +11533,7 @@ function XViewScene({
     });
     setEditingAncestryRel({ visible: false, data: null, path: null });
   };
-  const handleDeleteAncestry = useCallback2(
+  const handleDeleteAncestry = useCallback3(
     async (ancestryIdToDelete) => {
       if (!ancestryIdToDelete) {
         alert("ID da ancestralidade n\xE3o encontrado.");
@@ -11485,15 +11595,15 @@ function XViewScene({
     },
     [save_view_data, delete_file_action]
   );
-  const handleOpenAncestryBoard = useCallback2(() => {
+  const handleOpenAncestryBoard = useCallback3(() => {
     setIsAncestryBoardOpen(true);
   }, []);
-  const handleSelectAncestryFromBoard = useCallback2((ancestry) => {
+  const handleSelectAncestryFromBoard = useCallback3((ancestry) => {
     setIsAncestryBoardOpen(false);
     setIsSidebarOpen(false);
     handleStartReadingAncestry(ancestry);
   }, [handleStartReadingAncestry]);
-  const handleSaveAncestryBoard = useCallback2(async (groups) => {
+  const handleSaveAncestryBoard = useCallback3(async (groups) => {
     if (!sceneConfigId || !viewParams || !session) return;
     const sceneType = (viewParams.type || "").toLowerCase().includes("database") ? "database" : "view";
     await save_ancestry_board_action(sceneConfigId, sceneType, groups, session, ownerId);
@@ -11517,13 +11627,13 @@ function XViewScene({
       return !((_a2 = node.version_node) == null ? void 0 : _a2.is_version);
     });
   }, [parentDataRef.current, sceneVersion]);
-  const handleAddExistingNode = useCallback2(
+  const handleAddExistingNode = useCallback3(
     (nodeId) => {
       return userActionHandlers.handleAddExistingNodeById(actionHandlerContext, nodeId);
     },
     [actionHandlerContext]
   );
-  const handleSaveCurrentView = useCallback2(async () => {
+  const handleSaveCurrentView = useCallback3(async () => {
     const { nodeObjects, allLinks } = stateRef.current;
     if (!nodeObjects || !allLinks || !sceneSaveUrl || !parentDataRef.current) {
       console.warn("N\xE3o \xE9 poss\xEDvel salvar a cena: estado n\xE3o inicializado ou URL de salvamento ausente.");
@@ -11563,7 +11673,7 @@ function XViewScene({
   const allAvailableAncestries = useMemo12(() => {
     return ancestryDataRef.current || [];
   }, [sceneVersion, isInitialized]);
-  const handleOpenReference = useCallback2((referenceData) => {
+  const handleOpenReference = useCallback3((referenceData) => {
     const { type, id } = referenceData;
     if (type === "node") {
       const targetNode = allAvailableNodes.find((n) => String(n.id) === String(id));
@@ -11590,7 +11700,7 @@ function XViewScene({
       }
     }
   }, [allAvailableNodes, allAvailableAncestries, handleEditAncestry, tweenToTarget]);
-  const handleToggleAncestryAddMode = useCallback2(() => {
+  const handleToggleAncestryAddMode = useCallback3(() => {
     setAncestryMode((prev) => ({ ...prev, isAddingNodes: !prev.isAddingNodes }));
   }, []);
   if (isLoading || status === "loading" || permissionStatus === "loading") {
@@ -11718,6 +11828,7 @@ function XViewScene({
       CreateAncestryPanel,
       {
         ancestryMode,
+        setAncestryMode,
         onSelectParent: handleSelectAncestryParent,
         onRemoveNode: handleRemoveFromAncestry,
         onSave: handleSaveAncestry,
@@ -11736,7 +11847,8 @@ function XViewScene({
         onRenderFullAncestry: (data, allowed, focus, rot) => handleRenderAncestry(data, allowed, focus, rot),
         onClearAncestryVisuals: handleClearAncestryVisuals,
         onUploadFile: upload_file_action,
-        onOpenImageViewer: handleOpenImageViewer
+        onOpenImageViewer: handleOpenImageViewer,
+        onRenderAbstractionTree: (data) => handleRenderAbstractionTree(data)
       }
     ),
     editingAncestryRel.visible && /* @__PURE__ */ React23.createElement(
@@ -12106,7 +12218,16 @@ async function get_scene_view_data_logic(db_services, scene_config, owner_id) {
       if (!parentNodeIds.has(String(ancestry.ancestral_node))) return null;
       const cleanedTree = pruneTree(ancestry.tree);
       if (!cleanedTree) return null;
-      return { ...ancestry, tree: cleanedTree };
+      let cleanedAbstraction = null;
+      if (ancestry.abstraction_tree) {
+        cleanedAbstraction = pruneTree(ancestry.abstraction_tree);
+      }
+      return {
+        ...ancestry,
+        tree: cleanedTree,
+        abstraction_tree: cleanedAbstraction
+        // Salva a árvore limpa
+      };
     }).filter(Boolean);
     if (JSON.stringify(cleanedAncestryData) !== originalAncestryDataString) {
       ancestryData = cleanedAncestryData;

package/package.json

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