@lv-x-software-house/x_view 1.2.2-dev.13 → 1.2.2-dev.14

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/XViewScene.jsx
-import React23, { useCallback as useCallback3, useEffect as useEffect21, useRef as useRef17, useState as useState22, useMemo as useMemo12 } from "react";
+import React23, { useCallback as useCallback4, useEffect as useEffect21, useRef as useRef17, useState as useState23, useMemo as useMemo12 } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
 import CryptoJS from "crypto-js";
@@ -735,7 +735,7 @@ function XViewSidebar({
 }
 
 // src/components/AncestryRelationshipPanel.jsx
-import React8, { useState as useState8, useEffect as useEffect8, useRef as useRef7 } from "react";
+import React8, { useState as useState9, useEffect as useEffect8, useRef as useRef7 } from "react";
 
 // node_modules/uuid/dist/esm-node/rng.js
 import crypto from "crypto";
@@ -785,6 +785,7 @@ function v4(options, buf, offset) {
 var v4_default = v4;
 
 // src/logic/x_view_utils.js
+import { useState as useState3, useCallback } from "react";
 import * as THREE2 from "three";
 
 // src/logic/x_view_config.js
@@ -2999,9 +3000,36 @@ var extractFileUrlsFromProperties = (dataObject) => {
   });
   return urlsToDelete;
 };
+function useResizablePanel({ initialWidth, minWidth, maxWidth }) {
+  const [width, setWidth] = useState3(initialWidth);
+  const [isResizing, setIsResizing] = useState3(false);
+  const handlePointerDown = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+    const startX = e.clientX;
+    const startWidth = width;
+    const originalUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = "none";
+    const handlePointerMove = (moveEvent) => {
+      const deltaX = startX - moveEvent.clientX;
+      const newWidth = Math.min(Math.max(startWidth + deltaX, minWidth), maxWidth);
+      setWidth(newWidth);
+    };
+    const handlePointerUp = () => {
+      setIsResizing(false);
+      document.body.style.userSelect = originalUserSelect;
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  }, [width, minWidth, maxWidth]);
+  return { width, isResizing, handlePointerDown, setWidth };
+}
 
 // src/components/CustomPropertyDisplay.jsx
-import React3, { useState as useState3, useRef as useRef3, useEffect as useEffect3 } from "react";
+import React3, { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
 import { FiCheck, FiX, FiEdit3, FiTrash2, FiExternalLink, FiFileText, FiChevronDown, FiUpload, FiLoader } from "react-icons/fi";
 function CustomPropertyDisplay({
   prop,
@@ -3016,12 +3044,12 @@ function CustomPropertyDisplay({
   },
   onUploadFile
 }) {
-  const [isEditing, setIsEditing] = useState3(prop.isEditing ?? false);
-  const [tempProp, setTempProp] = useState3(prop);
-  const [isHovered, setIsHovered] = useState3(false);
-  const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState3(false);
+  const [isEditing, setIsEditing] = useState4(prop.isEditing ?? false);
+  const [tempProp, setTempProp] = useState4(prop);
+  const [isHovered, setIsHovered] = useState4(false);
+  const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState4(false);
   const dropdownRef = useRef3(null);
-  const [uploadingItemIndex, setUploadingItemIndex] = useState3(null);
+  const [uploadingItemIndex, setUploadingItemIndex] = useState4(null);
   const fileInputRef = useRef3(null);
   const currentUploadTargetRef = useRef3(null);
   useEffect3(() => {
@@ -3367,15 +3395,15 @@ function CustomPropertyDisplay({
 import { FiPlus, FiEdit2 as FiEdit22, FiBookOpen } from "react-icons/fi";
 
 // src/components/DescriptionEditModal.jsx
-import React5, { useState as useState5, useEffect as useEffect5, useRef as useRef5, useMemo as useMemo4 } from "react";
+import React5, { useState as useState6, useEffect as useEffect5, useRef as useRef5, useMemo as useMemo4 } from "react";
 import { FiType, FiList, FiCode, FiLink as FiLink2, FiAtSign, FiSearch as FiSearch2, FiHexagon as FiHexagon2, FiGlobe, FiImage } from "react-icons/fi";
 
 // src/components/SectionImportModal.jsx
-import React4, { useState as useState4, useMemo as useMemo3, useRef as useRef4, useEffect as useEffect4 } from "react";
+import React4, { useState as useState5, useMemo as useMemo3, useRef as useRef4, useEffect as useEffect4 } from "react";
 import { FiSearch, FiLayers as FiLayers2, FiHexagon, FiClock, FiCheck as FiCheck2, FiCopy, FiTerminal, FiChevronDown as FiChevronDown2, FiChevronRight, FiDownload, FiLink } from "react-icons/fi";
 var CodeBlock = ({ content, isActive, onClick }) => {
-  const [isExpanded, setIsExpanded] = useState4(false);
-  const [copied, setCopied] = useState4(false);
+  const [isExpanded, setIsExpanded] = useState5(false);
+  const [copied, setCopied] = useState5(false);
   const cleanContent = content.replace(/^```|```$/g, "").trim();
   const isLongCode = cleanContent.split("\n").length > 4;
   const handleCopy = (e) => {
@@ -3438,14 +3466,14 @@ var formatLineContent = (line) => {
   return /* @__PURE__ */ React4.createElement("span", { className: "break-words" }, line);
 };
 function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], availableAncestries = [] }) {
-  const [searchTerm, setSearchTerm] = useState4("");
-  const [selectedItem, setSelectedItem] = useState4(null);
-  const [searchHistory, setSearchHistory] = useState4([]);
-  const [activeIndex, setActiveIndex] = useState4(0);
-  const [selectedIndices, setSelectedIndices] = useState4(/* @__PURE__ */ new Set([0]));
-  const [lastSelectedIndex, setLastSelectedIndex] = useState4(0);
+  const [searchTerm, setSearchTerm] = useState5("");
+  const [selectedItem, setSelectedItem] = useState5(null);
+  const [searchHistory, setSearchHistory] = useState5([]);
+  const [activeIndex, setActiveIndex] = useState5(0);
+  const [selectedIndices, setSelectedIndices] = useState5(/* @__PURE__ */ new Set([0]));
+  const [lastSelectedIndex, setLastSelectedIndex] = useState5(0);
   const sectionRefs = useRef4([]);
-  const [isDropdownOpen, setIsDropdownOpen] = useState4(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState5(false);
   const inputRef = useRef4(null);
   useEffect4(() => {
     if (!selectedItem) return;
@@ -3784,16 +3812,22 @@ function DescriptionEditModal({
   availableAncestries = [],
   availableImages = []
 }) {
-  const [text, setText] = useState5(initialValue || "");
+  const maxPanelW = typeof window !== "undefined" ? window.innerWidth * 0.9 : 1200;
+  const { width: panelWidth, isResizing, handlePointerDown: handleResize } = useResizablePanel({
+    initialWidth: 700,
+    minWidth: 400,
+    maxWidth: maxPanelW
+  });
+  const [text, setText] = useState6(initialValue || "");
   const textareaRef = useRef5(null);
-  const [isImportModalOpen, setIsImportModalOpen] = useState5(false);
-  const [isMentionModalOpen, setIsMentionModalOpen] = useState5(false);
-  const [mentionSearch, setMentionSearch] = useState5("");
-  const [mentionTriggerIndex, setMentionTriggerIndex] = useState5(null);
-  const [isImageModalOpen, setIsImageModalOpen] = useState5(false);
-  const [manualImageUrl, setManualImageUrl] = useState5("");
+  const [isImportModalOpen, setIsImportModalOpen] = useState6(false);
+  const [isMentionModalOpen, setIsMentionModalOpen] = useState6(false);
+  const [mentionSearch, setMentionSearch] = useState6("");
+  const [mentionTriggerIndex, setMentionTriggerIndex] = useState6(null);
+  const [isImageModalOpen, setIsImageModalOpen] = useState6(false);
+  const [manualImageUrl, setManualImageUrl] = useState6("");
   const hoverTimeoutRef = useRef5(null);
-  const [tooltipData, setTooltipData] = useState5(null);
+  const [tooltipData, setTooltipData] = useState6(null);
   useEffect5(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -3952,7 +3986,8 @@ function DescriptionEditModal({
   return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: "fixed inset-0 z-[2000] flex justify-end pointer-events-none bg-transparent" }, /* @__PURE__ */ React5.createElement(
     "div",
     {
-      className: "ui-overlay pointer-events-auto relative group h-full w-[min(90vw,700px)] border-l border-white/10 bg-slate-950/95 shadow-2xl text-white flex flex-col",
+      className: `ui-overlay pointer-events-auto relative group h-full border-l border-white/10 bg-slate-950/95 shadow-2xl text-white flex flex-col ${isResizing ? "transition-none" : "transition-all duration-300 ease-out"}`,
+      style: { width: `${panelWidth}px`, maxWidth: "90vw" },
       onClick: swallow,
       onPointerDown: swallow,
       onPointerMove: swallow,
@@ -3961,6 +3996,17 @@ function DescriptionEditModal({
       onContextMenu: swallow,
       onDoubleClick: swallow
     },
+    /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          handleResize(e);
+        },
+        className: "absolute left-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-indigo-500/50 z-[2000] transition-colors",
+        title: "Arraste para redimensionar"
+      }
+    ),
     /* @__PURE__ */ React5.createElement("div", { className: "h-[2px] bg-gradient-to-r from-indigo-400/0 via-indigo-400/70 to-indigo-400/0 shrink-0" }),
     /* @__PURE__ */ React5.createElement("div", { className: "px-6 pt-5 pb-3 flex items-center justify-between gap-4 shrink-0" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React5.createElement("span", { className: "inline-flex h-2.5 w-2.5 rounded-full bg-indigo-400/80" }), /* @__PURE__ */ React5.createElement("p", { className: "text-sm font-medium text-slate-200" }, title || "Editar Descri\xE7\xE3o")), /* @__PURE__ */ React5.createElement("button", { onClick: handleClose, className: "w-9 h-9 grid place-content-center rounded-lg border border-white/15 bg-transparent hover:bg-white/5 transition-colors text-xl", title: "Fechar" }, "\xD7")),
     /* @__PURE__ */ React5.createElement("div", { className: "px-6 py-3 flex flex-col gap-3 border-b border-white/5 bg-white/5 shrink-0" }, /* @__PURE__ */ React5.createElement("div", { className: "flex items-center gap-2 overflow-x-auto custom-scrollbar" }, /* @__PURE__ */ React5.createElement(
@@ -4152,11 +4198,11 @@ function DescriptionEditModal({
 }
 
 // src/components/DescriptionDisplay.jsx
-import React6, { useMemo as useMemo5, useState as useState6, useEffect as useEffect6, useRef as useRef6 } from "react";
+import React6, { useMemo as useMemo5, useState as useState7, useEffect as useEffect6, useRef as useRef6 } from "react";
 import { FiCopy as FiCopy2, FiCheck as FiCheck3, FiChevronDown as FiChevronDown3, FiChevronRight as FiChevronRight2, FiTerminal as FiTerminal2, FiCornerDownRight, FiExternalLink as FiExternalLink2, FiImage as FiImage2 } from "react-icons/fi";
 var CodeBlock2 = ({ content, isActive, onClick }) => {
-  const [isExpanded, setIsExpanded] = useState6(false);
-  const [copied, setCopied] = useState6(false);
+  const [isExpanded, setIsExpanded] = useState7(false);
+  const [copied, setCopied] = useState7(false);
   const cleanContent = content.replace(/^```|```$/g, "").trim();
   const isLongCode = cleanContent.split("\n").length > 4;
   const handleCopy = (e) => {
@@ -4355,7 +4401,7 @@ function DescriptionDisplay({
     });
     return navItems;
   }, [sections]);
-  const [currentStepIndex, setCurrentStepIndex] = useState6(0);
+  const [currentStepIndex, setCurrentStepIndex] = useState7(0);
   const activeRef = useRef6(null);
   const lastNotifiedSectionId = useRef6(null);
   const isInitialMount = useRef6(true);
@@ -4536,7 +4582,7 @@ function DescriptionDisplay({
 }
 
 // src/components/DescriptionReadModePanel.jsx
-import React7, { useState as useState7, useMemo as useMemo6, useEffect as useEffect7 } from "react";
+import React7, { useState as useState8, useMemo as useMemo6, useEffect as useEffect7 } from "react";
 import {
   FiArrowLeft,
   FiEdit2,
@@ -4638,10 +4684,10 @@ function DescriptionReadModePanel({
   onRenderAbstractionTree = null,
   initialShowAbstraction = false
 }) {
-  const [showProperties, setShowProperties] = useState7(false);
-  const [showAbstraction, setShowAbstraction] = useState7(false);
-  const [targetRenderNodeId, setTargetRenderNodeId] = useState7(null);
-  const [isLinkCopied, setIsLinkCopied] = useState7(false);
+  const [showProperties, setShowProperties] = useState8(false);
+  const [showAbstraction, setShowAbstraction] = useState8(false);
+  const [targetRenderNodeId, setTargetRenderNodeId] = useState8(null);
+  const [isLinkCopied, setIsLinkCopied] = useState8(false);
   const handleCopyLink = (e) => {
     e.stopPropagation();
     if (!ancestryId) return;
@@ -4896,11 +4942,11 @@ function AncestryRelationshipPanel({
   onMentionClick,
   onUploadFile
 }) {
-  const [description, setDescription] = useState8((data == null ? void 0 : data.description) ?? "");
-  const [customProps, setCustomProps] = useState8(() => extractCustomPropsFromNode(data || {}));
-  const [existingSections, setExistingSections] = useState8((data == null ? void 0 : data.description_sections) || []);
-  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState8(false);
-  const [isReadMode, setIsReadMode] = useState8(false);
+  const [description, setDescription] = useState9((data == null ? void 0 : data.description) ?? "");
+  const [customProps, setCustomProps] = useState9(() => extractCustomPropsFromNode(data || {}));
+  const [existingSections, setExistingSections] = useState9((data == null ? void 0 : data.description_sections) || []);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState9(false);
+  const [isReadMode, setIsReadMode] = useState9(false);
   const propsEndRef = useRef7(null);
   useEffect8(() => {
     setDescription((data == null ? void 0 : data.description) ?? "");
@@ -5042,7 +5088,7 @@ function AncestryRelationshipPanel({
 }
 
 // src/components/CreateAncestryPanel.jsx
-import React10, { useState as useState10, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef8, useCallback } from "react";
+import React10, { useState as useState11, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef8, useCallback as useCallback2 } from "react";
 import {
   FiEdit2 as FiEdit23,
   FiBookOpen as FiBookOpen2,
@@ -5062,7 +5108,7 @@ import {
 } from "react-icons/fi";
 
 // src/components/AncestryPickerModal.jsx
-import React9, { useState as useState9, useMemo as useMemo7, useEffect as useEffect9 } from "react";
+import React9, { useState as useState10, useMemo as useMemo7, useEffect as useEffect9 } from "react";
 import { FiSearch as FiSearch3, FiLayers as FiLayers4, FiCornerUpRight as FiCornerUpRight2 } from "react-icons/fi";
 function AncestryPickerModal({
   isOpen,
@@ -5072,7 +5118,7 @@ function AncestryPickerModal({
   availableNodes = [],
   currentAncestryId
 }) {
-  const [searchTerm, setSearchTerm] = useState9("");
+  const [searchTerm, setSearchTerm] = useState10("");
   useEffect9(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
@@ -5157,7 +5203,7 @@ var NodeItem = ({ nodeData, onSelectParent, onViewSelect, highlightedPathIds = [
   var _a, _b;
   const itemId = nodeData.is_section ? nodeData.id : (_a = nodeData.node) == null ? void 0 : _a.id;
   const itemName = nodeData.is_section ? nodeData.name : (_b = nodeData.node) == null ? void 0 : _b.name;
-  const [isDragOver, setIsDragOver] = useState10(false);
+  const [isDragOver, setIsDragOver] = useState11(false);
   const isSelectedParent = String(selectedParentId) === String(itemId);
   const isTargetViewNode = String(targetRenderNodeId) === String(itemId);
   const isHighlightedPath = highlightedPathIds.includes(String(itemId));
@@ -5293,8 +5339,8 @@ function CreateAncestryPanel({
     isAddingNodes,
     currentAncestryId
   } = ancestryMode;
-  const [isSaving, setIsSaving] = useState10(false);
-  const [isLinkCopied, setIsLinkCopied] = useState10(false);
+  const [isSaving, setIsSaving] = useState11(false);
+  const [isLinkCopied, setIsLinkCopied] = useState11(false);
   const handleCopyLink = (e) => {
     e.stopPropagation();
     if (!currentAncestryId || currentAncestryId === "temp_root" || currentAncestryId === "temp_creating") {
@@ -5308,11 +5354,11 @@ function CreateAncestryPanel({
       setTimeout(() => setIsLinkCopied(false), 2e3);
     }).catch((err) => console.error("Erro ao copiar link:", err));
   };
-  const [isPickerOpen, setIsPickerOpen] = useState10(false);
-  const [customProps, setCustomProps] = useState10([]);
+  const [isPickerOpen, setIsPickerOpen] = useState11(false);
+  const [customProps, setCustomProps] = useState11([]);
   const propsEndRef = useRef8(null);
-  const [branchStack, setBranchStack] = useState10([]);
-  const [targetRenderNodeId, setTargetRenderNodeId] = useState10(null);
+  const [branchStack, setBranchStack] = useState11([]);
+  const [targetRenderNodeId, setTargetRenderNodeId] = useState11(null);
   const highlightedPathIds = useMemo8(() => {
     var _a, _b;
     if (!targetRenderNodeId || !ancestryMode.abstraction_tree) return [];
@@ -5326,17 +5372,26 @@ function CreateAncestryPanel({
     }
     return ids;
   }, [targetRenderNodeId, ancestryMode.abstraction_tree]);
-  const [targetScrollSectionId, setTargetScrollSectionId] = useState10(null);
-  const [internalHighlightedNodeId, setInternalHighlightedNodeId] = useState10(null);
-  const [ancestryName, setAncestryName] = useState10(initialName);
-  const [description, setDescription] = useState10(initialDescription || "");
-  const [existingSections, setExistingSections] = useState10(initialSections || []);
-  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState10(false);
-  const [isReadMode, setIsReadMode] = useState10(false);
+  const [targetScrollSectionId, setTargetScrollSectionId] = useState11(null);
+  const [internalHighlightedNodeId, setInternalHighlightedNodeId] = useState11(null);
+  const [ancestryName, setAncestryName] = useState11(initialName);
+  const [description, setDescription] = useState11(initialDescription || "");
+  const [existingSections, setExistingSections] = useState11(initialSections || []);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState11(false);
+  const [isReadMode, setIsReadMode] = useState11(false);
+  const maxPanelW = typeof window !== "undefined" ? window.innerWidth * 0.92 : 1200;
+  const { width: panelWidth, isResizing, handlePointerDown: handleResize, setWidth } = useResizablePanel({
+    initialWidth: isReadMode ? 700 : 440,
+    minWidth: 320,
+    maxWidth: maxPanelW
+  });
+  useEffect10(() => {
+    setWidth(isReadMode ? 700 : 440);
+  }, [isReadMode, setWidth]);
   const currentMaxRenderIndexRef = useRef8(0);
   const branchProgressMapRef = useRef8({});
-  const [lastSavedSnapshot, setLastSavedSnapshot] = useState10(null);
-  const [isPrivate, setIsPrivate] = useState10(ancestryMode.is_private || false);
+  const [lastSavedSnapshot, setLastSavedSnapshot] = useState11(null);
+  const [isPrivate, setIsPrivate] = useState11(ancestryMode.is_private || false);
   const initializedContextIdRef = useRef8(null);
   const availableImages = customProps.filter((p) => p.type === "images").flatMap((p) => Array.isArray(p.value) ? p.value : []).filter((img) => img.value && img.value.trim() !== "");
   const handleImageClickFromText = (url, name) => {
@@ -5355,7 +5410,7 @@ function CreateAncestryPanel({
     }
     setAncestryMode((prev) => isAbstraction ? { ...prev, isAddingAbstractionNodes: !prev.isAddingAbstractionNodes } : { ...prev, isAddingNodes: !prev.isAddingNodes });
   };
-  const handleRemoveNode = useCallback((pathToRemove, isAbstraction = false) => {
+  const handleRemoveNode = useCallback2((pathToRemove, isAbstraction = false) => {
     if (!Array.isArray(pathToRemove) || pathToRemove.length === 0) return;
     const treeKey = isAbstraction ? "abstraction_tree" : "tree";
     setAncestryMode((prev) => {
@@ -6311,10 +6366,8 @@ function CreateAncestryPanel({
   return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
     "div",
     {
-      className: `ui-overlay absolute group rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-xl shadow-[0_20px_80px_rgba(0,0,0,0.6)] ring-1 ring-white/10 text-white overflow-hidden flex flex-col transition-all duration-300 ease-out 
-                    ${isReadMode ? "w-[min(92vw,700px)]" : "w-[min(92vw,440px)]"}
-                `,
-      style: { top: 16, right: 16, zIndex: 1100, maxHeight: "calc(100vh - 32px)" },
+      className: `ui-overlay absolute group rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-xl shadow-[0_20px_80px_rgba(0,0,0,0.6)] ring-1 ring-white/10 text-white overflow-hidden flex flex-col ${isResizing ? "transition-none" : "transition-all duration-300 ease-out"}`,
+      style: { top: 16, right: 16, zIndex: 1100, maxHeight: "calc(100vh - 32px)", width: `${panelWidth}px`, maxWidth: "92vw" },
       onPointerDown: swallow,
       onPointerMove: swallow,
       onPointerUp: swallow,
@@ -6323,6 +6376,17 @@ function CreateAncestryPanel({
       onContextMenu: swallow,
       onDoubleClick: swallow
     },
+    /* @__PURE__ */ React10.createElement(
+      "div",
+      {
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          handleResize(e);
+        },
+        className: "absolute left-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-indigo-500/50 z-[2000] transition-colors",
+        title: "Arraste para redimensionar"
+      }
+    ),
     isReadMode ? /* @__PURE__ */ React10.createElement(
       DescriptionReadModePanel,
       {
@@ -6619,25 +6683,25 @@ function CreateAncestryPanel({
 }
 
 // src/components/ImageViewer.jsx
-import React11, { useState as useState11, useEffect as useEffect11, useLayoutEffect as useLayoutEffect2, useCallback as useCallback2 } from "react";
+import React11, { useState as useState12, useEffect as useEffect11, useLayoutEffect as useLayoutEffect2, useCallback as useCallback3 } from "react";
 import { FiX as FiX2, FiChevronLeft as FiChevronLeft3, FiChevronRight as FiChevronRight5 } from "react-icons/fi";
 function ImageViewer({ data, onClose }) {
   var _a;
   const { images = [], startIndex = 0, visible } = data;
-  const [currentIndex, setCurrentIndex] = useState11(startIndex);
-  const [isLoading, setIsLoading] = useState11(false);
-  const [loadedSrc, setLoadedSrc] = useState11(null);
+  const [currentIndex, setCurrentIndex] = useState12(startIndex);
+  const [isLoading, setIsLoading] = useState12(false);
+  const [loadedSrc, setLoadedSrc] = useState12(null);
   useLayoutEffect2(() => {
     if (visible) {
       setCurrentIndex(startIndex);
     }
   }, [visible, startIndex]);
-  const handleNext = useCallback2(() => {
+  const handleNext = useCallback3(() => {
     if (images.length > 1) {
       setCurrentIndex((prev) => (prev + 1) % images.length);
     }
   }, [images.length]);
-  const handlePrev = useCallback2(() => {
+  const handlePrev = useCallback3(() => {
     if (images.length > 1) {
       setCurrentIndex((prev) => (prev - 1 + images.length) % images.length);
     }
@@ -6742,10 +6806,10 @@ function ImageViewer({ data, onClose }) {
 }
 
 // src/components/InSceneCreationForm.jsx
-import React13, { useState as useState13, useEffect as useEffect13, useRef as useRef10 } from "react";
+import React13, { useState as useState14, useEffect as useEffect13, useRef as useRef10 } from "react";
 
 // src/components/ColorPicker.jsx
-import React12, { useState as useState12, useEffect as useEffect12, useRef as useRef9 } from "react";
+import React12, { useState as useState13, useEffect as useEffect12, useRef as useRef9 } from "react";
 import { HexColorPicker } from "react-colorful";
 import { FiHash, FiCheck as FiCheck6 } from "react-icons/fi";
 var PRESET_COLORS = [
@@ -6766,7 +6830,7 @@ var PRESET_COLORS = [
   "#000000"
 ];
 function ColorPicker({ color, onChange, disabled }) {
-  const [isOpen, setIsOpen] = useState12(false);
+  const [isOpen, setIsOpen] = useState13(false);
   const popoverRef = useRef9(null);
   useEffect12(() => {
     const handleClickOutside = (event) => {
@@ -6865,21 +6929,21 @@ function InSceneCreationForm({
   viewType
 }) {
   var _a;
-  const [name, setName] = useState13("");
-  const [types, setTypes] = useState13([]);
-  const [typeInput, setTypeInput] = useState13("");
-  const [color, setColor] = useState13(initialColor || "#cccccc");
-  const [size, setSize] = useState13("medium");
-  const [intensity, setIntensity] = useState13(0);
-  const [description, setDescription] = useState13("");
-  const [customProps, setCustomProps] = useState13([]);
-  const [showTypeSuggestions, setShowTypeSuggestions] = useState13(false);
-  const [filteredTypes, setFilteredTypes] = useState13([]);
-  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState13(false);
-  const [useImageAsTexture, setUseImageAsTexture] = useState13(false);
-  const [selectedImageUrl, setSelectedImageUrl] = useState13(null);
-  const [targetDatasetId, setTargetDatasetId] = useState13(sourceNodeDatasetId || "");
-  const [isDatasetDropdownOpen, setIsDatasetDropdownOpen] = useState13(false);
+  const [name, setName] = useState14("");
+  const [types, setTypes] = useState14([]);
+  const [typeInput, setTypeInput] = useState14("");
+  const [color, setColor] = useState14(initialColor || "#cccccc");
+  const [size, setSize] = useState14("medium");
+  const [intensity, setIntensity] = useState14(0);
+  const [description, setDescription] = useState14("");
+  const [customProps, setCustomProps] = useState14([]);
+  const [showTypeSuggestions, setShowTypeSuggestions] = useState14(false);
+  const [filteredTypes, setFilteredTypes] = useState14([]);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState14(false);
+  const [useImageAsTexture, setUseImageAsTexture] = useState14(false);
+  const [selectedImageUrl, setSelectedImageUrl] = useState14(null);
+  const [targetDatasetId, setTargetDatasetId] = useState14(sourceNodeDatasetId || "");
+  const [isDatasetDropdownOpen, setIsDatasetDropdownOpen] = useState14(false);
   const datasetDropdownRef = useRef10(null);
   useEffect13(() => {
     if (sourceNodeDatasetId) setTargetDatasetId(sourceNodeDatasetId);
@@ -7212,7 +7276,7 @@ function InSceneCreationForm({
 }
 
 // src/components/InSceneVersionForm.jsx
-import React14, { useState as useState14, useEffect as useEffect14, useRef as useRef11 } from "react";
+import React14, { useState as useState15, useEffect as useEffect14, useRef as useRef11 } from "react";
 import { FiPlus as FiPlus4, FiMaximize2 as FiMaximize22, FiCheck as FiCheck8, FiEdit2 as FiEdit25 } from "react-icons/fi";
 function InSceneVersionForm({
   onSave,
@@ -7230,14 +7294,14 @@ function InSceneVersionForm({
   onMentionClick,
   onUploadFile
 }) {
-  const [name, setName] = useState14("");
-  const [size, setSize] = useState14("medium");
-  const [description, setDescription] = useState14("");
-  const [customProps, setCustomProps] = useState14([{ id: v4_default(), key: "Date", type: "date", value: { type: "Data", value: "" }, isEditing: true }]);
-  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState14(false);
+  const [name, setName] = useState15("");
+  const [size, setSize] = useState15("medium");
+  const [description, setDescription] = useState15("");
+  const [customProps, setCustomProps] = useState15([{ id: v4_default(), key: "Date", type: "date", value: { type: "Data", value: "" }, isEditing: true }]);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState15(false);
   const propsEndRef = useRef11(null);
-  const [useImageAsTexture, setUseImageAsTexture] = useState14(false);
-  const [selectedImageUrl, setSelectedImageUrl] = useState14(null);
+  const [useImageAsTexture, setUseImageAsTexture] = useState15(false);
+  const [selectedImageUrl, setSelectedImageUrl] = useState15(null);
   const hasImages = customProps.some((p) => p.type === "images" && Array.isArray(p.value) && p.value.length > 0 && p.value.some((img) => img.value));
   useEffect14(() => {
     if (!hasImages && useImageAsTexture) {
@@ -7430,7 +7494,7 @@ function InSceneVersionForm({
 }
 
 // src/components/NodeDetailsPanel.jsx
-import React15, { useState as useState15, useEffect as useEffect15, useRef as useRef12 } from "react";
+import React15, { useState as useState16, useEffect as useEffect15, useRef as useRef12 } from "react";
 import { FiPlus as FiPlus5, FiMaximize2 as FiMaximize23, FiX as FiX4, FiCheck as FiCheck9, FiImage as FiImage3, FiEdit2 as FiEdit26, FiLoader as FiLoader2, FiBookOpen as FiBookOpen3, FiSun as FiSun2, FiLink as FiLink5, FiDatabase } from "react-icons/fi";
 function NodeDetailsPanel({
   node,
@@ -7452,27 +7516,36 @@ function NodeDetailsPanel({
   userRole,
   currentDatasetName
 }) {
-  const [name, setName] = useState15((node == null ? void 0 : node.name) ?? "");
-  const [types, setTypes] = useState15([]);
-  const [typeInput, setTypeInput] = useState15("");
-  const [color, setColor] = useState15((node == null ? void 0 : node.color) ?? "#8b5cf6");
-  const [size, setSize] = useState15((node == null ? void 0 : node.size) ?? "medium");
-  const [description, setDescription] = useState15((node == null ? void 0 : node.description) ?? "");
-  const [intensity, setIntensity] = useState15((node == null ? void 0 : node.intensity) !== void 0 ? node.intensity : 0);
-  const [customProps, setCustomProps] = useState15(() => extractCustomPropsFromNode(node || {}));
-  const [showTypeSuggestions, setShowTypeSuggestions] = useState15(false);
-  const [filteredTypes, setFilteredTypes] = useState15([]);
-  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState15(false);
-  const [isReadMode, setIsReadMode] = useState15(false);
-  const [existingSections, setExistingSections] = useState15((node == null ? void 0 : node.description_sections) || []);
-  const [isSaving, setIsSaving] = useState15(false);
-  const [isLinkCopied, setIsLinkCopied] = useState15(false);
-  const [useImageAsTexture, setUseImageAsTexture] = useState15(() => {
+  const [name, setName] = useState16((node == null ? void 0 : node.name) ?? "");
+  const [types, setTypes] = useState16([]);
+  const [typeInput, setTypeInput] = useState16("");
+  const [color, setColor] = useState16((node == null ? void 0 : node.color) ?? "#8b5cf6");
+  const [size, setSize] = useState16((node == null ? void 0 : node.size) ?? "medium");
+  const [description, setDescription] = useState16((node == null ? void 0 : node.description) ?? "");
+  const [intensity, setIntensity] = useState16((node == null ? void 0 : node.intensity) !== void 0 ? node.intensity : 0);
+  const [customProps, setCustomProps] = useState16(() => extractCustomPropsFromNode(node || {}));
+  const [showTypeSuggestions, setShowTypeSuggestions] = useState16(false);
+  const [filteredTypes, setFilteredTypes] = useState16([]);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState16(false);
+  const [isReadMode, setIsReadMode] = useState16(false);
+  const [existingSections, setExistingSections] = useState16((node == null ? void 0 : node.description_sections) || []);
+  const [isSaving, setIsSaving] = useState16(false);
+  const [isLinkCopied, setIsLinkCopied] = useState16(false);
+  const [useImageAsTexture, setUseImageAsTexture] = useState16(() => {
     if ((node == null ? void 0 : node.useImageAsTexture) === "true") return true;
     if ((node == null ? void 0 : node.useImageAsTexture) === "false") return false;
     return !!(node == null ? void 0 : node.useImageAsTexture);
   });
-  const [selectedImageUrl, setSelectedImageUrl] = useState15((node == null ? void 0 : node.textureImageUrl) ?? null);
+  const [selectedImageUrl, setSelectedImageUrl] = useState16((node == null ? void 0 : node.textureImageUrl) ?? null);
+  const maxPanelW = typeof window !== "undefined" ? window.innerWidth * 0.92 : 1200;
+  const { width: panelWidth, isResizing, handlePointerDown: handleResize, setWidth } = useResizablePanel({
+    initialWidth: isReadMode ? 700 : 440,
+    minWidth: 320,
+    maxWidth: maxPanelW
+  });
+  useEffect15(() => {
+    setWidth(isReadMode ? 700 : 440);
+  }, [isReadMode, setWidth]);
   const prevNodeIdRef = useRef12(null);
   const propsEndRef = useRef12(null);
   const canEdit = userRole !== "viewer";
@@ -7680,10 +7753,8 @@ function NodeDetailsPanel({
   return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(
     "div",
     {
-      className: `ui-overlay absolute group rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-xl shadow-[0_20px_80px_rgba(0,0,0,0.6)] ring-1 ring-white/10 text-white overflow-hidden flex flex-col transition-all duration-300 ease-out
-            ${isReadMode ? "w-[min(92vw,700px)]" : "w-[min(92vw,440px)]"}
-        `,
-      style: { top: 16, right: 16, zIndex: 1100, maxHeight: "calc(100vh - 32px)" },
+      className: `ui-overlay absolute group rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-xl shadow-[0_20px_80px_rgba(0,0,0,0.6)] ring-1 ring-white/10 text-white overflow-hidden flex flex-col ${isResizing ? "transition-none" : "transition-all duration-300 ease-out"}`,
+      style: { top: 16, right: 16, zIndex: 1100, maxHeight: "calc(100vh - 32px)", width: `${panelWidth}px`, maxWidth: "92vw" },
       onPointerDown: swallow,
       onPointerMove: swallow,
       onPointerUp: swallow,
@@ -7692,6 +7763,17 @@ function NodeDetailsPanel({
       onContextMenu: swallow,
       onDoubleClick: swallow
     },
+    /* @__PURE__ */ React15.createElement(
+      "div",
+      {
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          handleResize(e);
+        },
+        className: "absolute left-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-indigo-500/50 z-[2000] transition-colors",
+        title: "Arraste para redimensionar"
+      }
+    ),
     isReadMode ? /* @__PURE__ */ React15.createElement(
       DescriptionReadModePanel,
       {
@@ -7893,7 +7975,7 @@ function NodeDetailsPanel({
 }
 
 // src/components/MultiNodeContextMenu.jsx
-import React16, { useLayoutEffect as useLayoutEffect3, useRef as useRef13, useState as useState16, useEffect as useEffect16 } from "react";
+import React16, { useLayoutEffect as useLayoutEffect3, useRef as useRef13, useState as useState17, useEffect as useEffect16 } from "react";
 function MultiNodeContextMenu({
   data,
   userRole,
@@ -7904,7 +7986,7 @@ function MultiNodeContextMenu({
   onDeleteNodes
 }) {
   const menuRef = useRef13(null);
-  const [menuPos, setMenuPos] = useState16({ left: 0, top: 0 });
+  const [menuPos, setMenuPos] = useState17({ left: 0, top: 0 });
   const ability = defineAbilityFor(userRole);
   const canDelete = ability.can("delete", "Node");
   useLayoutEffect3(() => {
@@ -7953,7 +8035,7 @@ function MultiNodeContextMenu({
 }
 
 // src/components/RelationshipDetailsPanel.jsx
-import React17, { useState as useState17, useEffect as useEffect17, useRef as useRef14, useMemo as useMemo9 } from "react";
+import React17, { useState as useState18, useEffect as useEffect17, useRef as useRef14, useMemo as useMemo9 } from "react";
 import { FiPlus as FiPlus6, FiEdit2 as FiEdit27, FiLoader as FiLoader3, FiBookOpen as FiBookOpen4 } from "react-icons/fi";
 function RelationshipDetailsPanel({
   link,
@@ -7969,13 +8051,13 @@ function RelationshipDetailsPanel({
   userRole
   // Recebendo userRole via props
 }) {
-  const [name, setName] = useState17((link == null ? void 0 : link.name) ?? "");
-  const [description, setDescription] = useState17((link == null ? void 0 : link.description) ?? "");
-  const [customProps, setCustomProps] = useState17(() => extractCustomPropsFromNode(link || {}));
-  const [existingSections, setExistingSections] = useState17((link == null ? void 0 : link.description_sections) || []);
-  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState17(false);
-  const [isSaving, setIsSaving] = useState17(false);
-  const [isReadMode, setIsReadMode] = useState17(false);
+  const [name, setName] = useState18((link == null ? void 0 : link.name) ?? "");
+  const [description, setDescription] = useState18((link == null ? void 0 : link.description) ?? "");
+  const [customProps, setCustomProps] = useState18(() => extractCustomPropsFromNode(link || {}));
+  const [existingSections, setExistingSections] = useState18((link == null ? void 0 : link.description_sections) || []);
+  const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState18(false);
+  const [isSaving, setIsSaving] = useState18(false);
+  const [isReadMode, setIsReadMode] = useState18(false);
   const propsEndRef = useRef14(null);
   const canEdit = useMemo9(() => {
     const ability = defineAbilityFor(userRole);
@@ -8178,7 +8260,7 @@ function RelationshipDetailsPanel({
 }
 
 // src/components/RelationshipContextMenu.jsx
-import React18, { useLayoutEffect as useLayoutEffect4, useRef as useRef15, useState as useState18, useEffect as useEffect18, useMemo as useMemo10 } from "react";
+import React18, { useLayoutEffect as useLayoutEffect4, useRef as useRef15, useState as useState19, useEffect as useEffect18, useMemo as useMemo10 } from "react";
 function RelationshipContextMenu({
   data,
   userRole,
@@ -8190,7 +8272,7 @@ function RelationshipContextMenu({
   onClose
 }) {
   const menuRef = useRef15(null);
-  const [menuPos, setMenuPos] = useState18({ left: 0, top: 0 });
+  const [menuPos, setMenuPos] = useState19({ left: 0, top: 0 });
   const ability = useMemo10(() => defineAbilityFor(userRole), [userRole]);
   const sourceName = useMemo10(
     () => {
@@ -8392,7 +8474,7 @@ function LoadingScreen() {
 }
 
 // src/components/ImportParentFileModal.jsx
-import React20, { useEffect as useEffect19, useState as useState19 } from "react";
+import React20, { useEffect as useEffect19, useState as useState20 } from "react";
 function ImportParentFileModal({
   isOpen,
   onClose,
@@ -8403,11 +8485,11 @@ function ImportParentFileModal({
   onFetchAvailableFiles,
   currentViewName
 }) {
-  const [activeTab, setActiveTab] = useState19("databases");
-  const [availableDbs, setAvailableDbs] = useState19([]);
-  const [availableViews, setAvailableViews] = useState19([]);
-  const [selectedItem, setSelectedItem] = useState19(null);
-  const [isLoading, setIsLoading] = useState19(false);
+  const [activeTab, setActiveTab] = useState20("databases");
+  const [availableDbs, setAvailableDbs] = useState20([]);
+  const [availableViews, setAvailableViews] = useState20([]);
+  const [selectedItem, setSelectedItem] = useState20(null);
+  const [isLoading, setIsLoading] = useState20(false);
   useEffect19(() => {
     if (isOpen && session && onFetchAvailableFiles) {
       const fetchData = async () => {
@@ -8553,7 +8635,7 @@ function ImportParentFileModal({
 }
 
 // src/components/AncestryLinkDetailsPanel.jsx
-import React21, { useState as useState20 } from "react";
+import React21, { useState as useState21 } from "react";
 import { FiBookOpen as FiBookOpen5 } from "react-icons/fi";
 function AncestryLinkDetailsPanel({ data, onClose, onOpenImageViewer, onOpenReference, onMentionClick, onUploadFile }) {
   var _a, _b, _c, _d;
@@ -8563,7 +8645,7 @@ function AncestryLinkDetailsPanel({ data, onClose, onOpenImageViewer, onOpenRefe
   const customProps = extractCustomPropsFromNode(relationshipData);
   const sourceName = ((_b = (_a = data.sourceNode) == null ? void 0 : _a.userData) == null ? void 0 : _b.name) || "Origem";
   const targetName = ((_d = (_c = data.targetNode) == null ? void 0 : _c.userData) == null ? void 0 : _d.name) || "Destino";
-  const [isReadMode, setIsReadMode] = useState20(false);
+  const [isReadMode, setIsReadMode] = useState21(false);
   const swallow = (e) => e.stopPropagation();
   const handleImageClickFromText = (url, name) => {
     if (onOpenImageViewer) {
@@ -8629,7 +8711,7 @@ function AncestryLinkDetailsPanel({ data, onClose, onOpenImageViewer, onOpenRefe
 }
 
 // src/components/AncestryBoard.jsx
-import React22, { useState as useState21, useMemo as useMemo11, useEffect as useEffect20, useRef as useRef16 } from "react";
+import React22, { useState as useState22, useMemo as useMemo11, useEffect as useEffect20, useRef as useRef16 } from "react";
 import {
   FiSearch as FiSearch4,
   FiLayers as FiLayers6,
@@ -8806,11 +8888,11 @@ function AncestryBoard({
   userRole
   // [NOVO] Recebe a role do usuário
 }) {
-  const [searchTerm, setSearchTerm] = useState21("");
-  const [groups, setGroups] = useState21([]);
-  const [isLoaded, setIsLoaded] = useState21(false);
-  const [pickingGroupId, setPickingGroupId] = useState21(null);
-  const [saveStatus, setSaveStatus] = useState21("idle");
+  const [searchTerm, setSearchTerm] = useState22("");
+  const [groups, setGroups] = useState22([]);
+  const [isLoaded, setIsLoaded] = useState22(false);
+  const [pickingGroupId, setPickingGroupId] = useState22(null);
+  const [saveStatus, setSaveStatus] = useState22("idle");
   const canEdit = useMemo11(() => {
     return userRole !== "viewer";
   }, [userRole]);
@@ -9260,37 +9342,37 @@ function XViewScene({
   const sceneDataRef = useRef17(null);
   const parentDataRef = useRef17(null);
   const ancestryDataRef = useRef17(null);
-  const [isLoading, setIsLoading] = useState22(true);
-  const [permissionStatus, setPermissionStatus] = useState22("loading");
-  const [userPermissionRole, setUserPermissionRole] = useState22(null);
-  const [isInitialized, setIsInitialized] = useState22(false);
-  const [sceneVersion, setSceneVersion] = useState22(0);
-  const [contextMenu, setContextMenu] = useState22({ visible: false, x: 0, y: 0, nodeData: null });
-  const [multiContextMenu, setMultiContextMenu] = useState22({ visible: false, x: 0, y: 0, nodeIds: null });
-  const [relationshipMenu, setRelationshipMenu] = useState22({ visible: false, x: 0, y: 0, linkObject: null });
-  const [creationMode, setCreationMode] = useState22({ isActive: false, sourceNodeData: null });
-  const [versionMode, setVersionMode] = useState22({ isActive: false, sourceNodeData: null });
-  const [hasFocusedInitial, setHasFocusedInitial] = useState22(false);
-  const [hasOpenedInitialAncestry, setHasOpenedInitialAncestry] = useState22(false);
-  const [ancestryMode, setAncestryMode] = useState22({ isActive: false, tree: null, selectedParentId: null, isEditMode: false, currentAncestryId: null, ancestryName: "", ancestryDescription: "", ancestryDescriptionSections: [], isAddingNodes: false });
-  const [readingMode, setReadingMode] = useState22({
+  const [isLoading, setIsLoading] = useState23(true);
+  const [permissionStatus, setPermissionStatus] = useState23("loading");
+  const [userPermissionRole, setUserPermissionRole] = useState23(null);
+  const [isInitialized, setIsInitialized] = useState23(false);
+  const [sceneVersion, setSceneVersion] = useState23(0);
+  const [contextMenu, setContextMenu] = useState23({ visible: false, x: 0, y: 0, nodeData: null });
+  const [multiContextMenu, setMultiContextMenu] = useState23({ visible: false, x: 0, y: 0, nodeIds: null });
+  const [relationshipMenu, setRelationshipMenu] = useState23({ visible: false, x: 0, y: 0, linkObject: null });
+  const [creationMode, setCreationMode] = useState23({ isActive: false, sourceNodeData: null });
+  const [versionMode, setVersionMode] = useState23({ isActive: false, sourceNodeData: null });
+  const [hasFocusedInitial, setHasFocusedInitial] = useState23(false);
+  const [hasOpenedInitialAncestry, setHasOpenedInitialAncestry] = useState23(false);
+  const [ancestryMode, setAncestryMode] = useState23({ isActive: false, tree: null, selectedParentId: null, isEditMode: false, currentAncestryId: null, ancestryName: "", ancestryDescription: "", ancestryDescriptionSections: [], isAddingNodes: false });
+  const [readingMode, setReadingMode] = useState23({
     isActive: false,
     ancestry: null,
     branchStack: [],
     autoAbstraction: false
   });
-  const [formPosition, setFormPosition] = useState22({ left: 16, top: 16, opacity: 0 });
-  const [detailsNode, setDetailsNode] = useState22(null);
-  const [detailsLink, setDetailsLink] = useState22(null);
-  const [ancestryLinkDetails, setAncestryLinkDetails] = useState22(null);
-  const [imageViewer, setImageViewer] = useState22({ visible: false, images: [], startIndex: 0 });
-  const [editingAncestryRel, setEditingAncestryRel] = useState22({ visible: false, data: null, path: null });
-  const [isImportModalOpen, setIsImportModalOpen] = useState22(false);
-  const [importSuccessMessage, setImportSuccessMessage] = useState22("");
-  const [highlightedNodeId, setHighlightedNodeId] = useState22(null);
-  const [isAncestryBoardOpen, setIsAncestryBoardOpen] = useState22(false);
-  const [ancestryBoardData, setAncestryBoardData] = useState22([]);
-  const [isSidebarOpen, setIsSidebarOpen] = useState22(false);
+  const [formPosition, setFormPosition] = useState23({ left: 16, top: 16, opacity: 0 });
+  const [detailsNode, setDetailsNode] = useState23(null);
+  const [detailsLink, setDetailsLink] = useState23(null);
+  const [ancestryLinkDetails, setAncestryLinkDetails] = useState23(null);
+  const [imageViewer, setImageViewer] = useState23({ visible: false, images: [], startIndex: 0 });
+  const [editingAncestryRel, setEditingAncestryRel] = useState23({ visible: false, data: null, path: null });
+  const [isImportModalOpen, setIsImportModalOpen] = useState23(false);
+  const [importSuccessMessage, setImportSuccessMessage] = useState23("");
+  const [highlightedNodeId, setHighlightedNodeId] = useState23(null);
+  const [isAncestryBoardOpen, setIsAncestryBoardOpen] = useState23(false);
+  const [ancestryBoardData, setAncestryBoardData] = useState23([]);
+  const [isSidebarOpen, setIsSidebarOpen] = useState23(false);
   const mountRef = useRef17(null);
   const tooltipRef = useRef17(null);
   const formRef = useRef17(null);
@@ -9333,6 +9415,12 @@ function XViewScene({
     lastDescriptionLength: 0,
     highlightedNodeId: null
   });
+  const maxReadPanelW = typeof window !== "undefined" ? window.innerWidth * 0.92 : 1200;
+  const { width: readModeWidth, isResizing: isReadModeResizing, handlePointerDown: handleReadModeResize } = useResizablePanel({
+    initialWidth: 700,
+    minWidth: 320,
+    maxWidth: maxReadPanelW
+  });
   useEffect21(() => {
     stateRef.current.ancestry = ancestryMode;
   }, [ancestryMode]);
@@ -9357,10 +9445,10 @@ function XViewScene({
     }
     stateRef.current.nodeIdToParentFileMap = map;
   }, [isInitialized, sceneVersion]);
-  const handleNavigateBack = useCallback3(() => {
+  const handleNavigateBack = useCallback4(() => {
     router.push("/dashboard/scenes");
   }, [router]);
-  const handleConfirmImport = useCallback3(
+  const handleConfirmImport = useCallback4(
     async (importPayload) => {
       var _a2, _b2;
       let files = [];
@@ -9408,7 +9496,6 @@ function XViewScene({
           if (ancestryResponse.success && Array.isArray(ancestryResponse.data)) {
             const viewSpecificAncestries = ancestryResponse.data.filter(
               (anc) => anc._source_file_id === viewToImport.id && !anc.is_private
-              // <--- AQUI ESTÁ A TRAVA DE SEGURANÇA
             );
             const processedAncestries = viewSpecificAncestries.map((anc) => ({
               ...anc,
@@ -9459,7 +9546,7 @@ function XViewScene({
   const handleOpenImageViewer = (images, startIndex) => {
     setImageViewer({ visible: true, images, startIndex });
   };
-  const tweenToTarget = useCallback3((target, zoomFactor = 1, forcedDirection = null) => {
+  const tweenToTarget = useCallback4((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;
@@ -9482,7 +9569,7 @@ function XViewScene({
     if (!t || typeof t.closest !== "function") return false;
     return !!t.closest(".ui-overlay");
   };
-  const buildFullAncestryTree = useCallback3((idTree, nodes, ancestries = []) => {
+  const buildFullAncestryTree = useCallback4((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]));
@@ -9508,14 +9595,10 @@ function XViewScene({
               return {
                 ...branch,
                 name: linkedAncestry.name,
-                // Sobrescreve nome para exibição
                 description: linkedAncestry.description,
-                // Sobrescreve descrição
                 description_sections: linkedAncestry.description_sections,
                 tree: graftedTree,
-                // ENXERTA A ÁRVORE AQUI
                 isLinked: true
-                // Flag útil
               };
             }
           }
@@ -9562,7 +9645,7 @@ function XViewScene({
     }
     return recursiveBuild(idTree);
   }, []);
-  const handleActivateTimeline = useCallback3(() => {
+  const handleActivateTimeline = useCallback4(() => {
     const { nodeObjects, tweenGroup, timelineIntervalsGroup } = stateRef.current;
     if (!nodeObjects || !tweenGroup || !timelineIntervalsGroup) return;
     while (timelineIntervalsGroup.children.length > 0) {
@@ -9715,7 +9798,7 @@ function XViewScene({
       }
     });
   }, []);
-  const handleVersionTimeline = useCallback3((sourceMesh, versionMeshes) => {
+  const handleVersionTimeline = useCallback4((sourceMesh, versionMeshes) => {
     const { tweenGroup, timelineIntervalsGroup } = stateRef.current;
     if (!tweenGroup || !timelineIntervalsGroup || versionMeshes.length === 0) return;
     versionMeshes.forEach((mesh) => {
@@ -9908,16 +9991,14 @@ function XViewScene({
     isInitialized,
     permissionStatus,
     focusNodeId,
-    // <-- MANTIDO
     focusAncestryId
-    // <-- ADICIONADO O focusAncestryId NAS DEPENDÊNCIAS
   ]);
-  const isNodeInView = useCallback3((id) => {
+  const isNodeInView = useCallback4((id) => {
     const key = String(id);
     const objs = stateRef.current.nodeObjects || {};
     return !!objs[key];
   }, []);
-  const addOrUpdateNodeMesh = useCallback3((nodeData, position, suppressVersionUpdate = false) => {
+  const addOrUpdateNodeMesh = useCallback4((nodeData, position, suppressVersionUpdate = false) => {
     const { graphGroup, nodeObjects, clickableNodes, glowTexture, tweenGroup } = stateRef.current;
     const nodeId = String(nodeData.id);
     if (nodeObjects[nodeId]) {
@@ -10566,7 +10647,7 @@ function XViewScene({
       }
     };
   }, [isInitialized, tweenToTarget, dbSaveUrl, isNodeInView, addOrUpdateNodeMesh, handleActivateTimeline, get_scene_view_data, save_view_data]);
-  const handleGhostNodeImageChange = useCallback3((useImage, imageUrl) => {
+  const handleGhostNodeImageChange = useCallback4((useImage, imageUrl) => {
     const { node: ghostNode, line: ghostLine, aura: ghostAura } = stateRef.current.ghostElements;
     const { graphGroup, glowTexture } = stateRef.current;
     if (!ghostNode || !graphGroup) return;
@@ -10608,7 +10689,7 @@ function XViewScene({
       aura: newGhostNode.getObjectByName("aura")
     };
   }, []);
-  const handleGhostNodeIntensityChange = useCallback3((newIntensity) => {
+  const handleGhostNodeIntensityChange = useCallback4((newIntensity) => {
     const { node: ghostNode, aura: ghostAura } = stateRef.current.ghostElements;
     if (!ghostNode) return;
     const adjustedIntensity = newIntensity + MIN_VISIBILITY_INTENSITY;
@@ -10629,7 +10710,7 @@ function XViewScene({
       ghostAura.material.opacity = Math.min(0.8, newIntensity * 0.15);
     }
   }, []);
-  const handleDetailNodeIntensityChange = useCallback3((nodeId, newIntensity) => {
+  const handleDetailNodeIntensityChange = useCallback4((nodeId, newIntensity) => {
     const mesh = stateRef.current.nodeObjects[String(nodeId)];
     if (!mesh) return;
     const adjustedIntensity = newIntensity + MIN_VISIBILITY_INTENSITY;
@@ -10775,7 +10856,7 @@ function XViewScene({
       mountRef.current.style.cursor = "default";
     }
   };
-  const handleAncestryTreeUpdate = useCallback3((newTree, extraData = null) => {
+  const handleAncestryTreeUpdate = useCallback4((newTree, extraData = null) => {
     setAncestryMode((prev) => {
       const prevTreeStr = JSON.stringify(prev.tree);
       const newTreeStr = JSON.stringify(newTree);
@@ -10845,7 +10926,7 @@ function XViewScene({
   const handleStartVersioning = (nodeData) => {
     userActionHandlers.handleStartVersioning(actionHandlerContext, nodeData);
   };
-  const handleClearAncestryVisuals = useCallback3((ancestryId) => {
+  const handleClearAncestryVisuals = useCallback4((ancestryId) => {
     const { renderedAncestries, ancestryGroup } = stateRef.current;
     const renderIndex = renderedAncestries.findIndex((a) => String(a.id) === String(ancestryId));
     if (renderIndex !== -1) {
@@ -10859,7 +10940,7 @@ function XViewScene({
       stateRef.current.ancestryLinks = renderedAncestries.flatMap((a) => a.lines);
     }
   }, []);
-  const handleRenderAncestry = useCallback3(
+  const handleRenderAncestry = useCallback4(
     async (ancestryObject, allowedSectionIds = null, activeSectionIdForFocus = null, baseRotation = 0, forceReprocess = true) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
       if (!ancestryObject || !ancestryObject.tree) {
@@ -11275,7 +11356,7 @@ function XViewScene({
     },
     [addOrUpdateNodeMesh, tweenToTarget, buildFullAncestryTree, readingMode.isActive, ancestryMode.isActive]
   );
-  const handleRenderAbstractionTree = useCallback3((ancestryObject, targetNodeId = null) => {
+  const handleRenderAbstractionTree = useCallback4((ancestryObject, targetNodeId = null) => {
     setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
     if (!ancestryObject || !ancestryObject.abstraction_tree) return;
     const { ancestryGroup, nodeObjects, renderer, renderedAncestries } = stateRef.current;
@@ -11336,7 +11417,7 @@ function XViewScene({
     stateRef.current.ancestryLinks = renderedAncestries.flatMap((a) => a.lines);
     tweenToTarget(rootTargetPos, 0.7);
   }, [addOrUpdateNodeMesh, tweenToTarget, buildFullAncestryTree, handleClearAncestryVisuals]);
-  const handleReadModeBranchNav = useCallback3((nodeId, action, direction = "right") => {
+  const handleReadModeBranchNav = useCallback4((nodeId, action, direction = "right") => {
     const { ancestry, branchStack } = readingMode;
     if (!ancestry || !ancestry.tree) return;
     const allAncestries = ancestryDataRef.current || [];
@@ -11374,9 +11455,7 @@ function XViewScene({
             description_sections: branchToOpen.description_sections,
             tree: branchToOpen.tree,
             _originNodeId: nodeId,
-            // <--- ID do node pai (link visual)
             _branchDirection: direction
-            // <--- Direção para cálculo de posição
           };
           const allowedIds = /* @__PURE__ */ new Set(["preamble", 0, "0"]);
           const branchSections = parseDescriptionSections(branchToOpen.description || "", branchToOpen.description_sections || []);
@@ -11432,7 +11511,6 @@ function XViewScene({
       const parentAncestryObj = {
         ...targetAncestryInfo,
         tree: targetTreeToRender,
-        // Re-injeta a origem se o pai também for uma branch aninhada
         _originNodeId: activeParentStackItem ? activeParentStackItem.nodeId : null,
         _branchDirection: activeParentStackItem ? activeParentStackItem.entryDirection : null
       };
@@ -11480,7 +11558,7 @@ function XViewScene({
       }));
     }
   }, [readingMode, handleRenderAncestry, buildFullAncestryTree, tweenToTarget]);
-  const handleReadModeHighlight = useCallback3((nodeId) => {
+  const handleReadModeHighlight = useCallback4((nodeId) => {
     if (stateRef.current.highlightedNodeId !== nodeId) {
       stateRef.current.highlightedNodeId = nodeId;
     }
@@ -11492,7 +11570,6 @@ function XViewScene({
       readingMode.ancestry.tree,
       Object.values(parentDataRef.current).flatMap((f) => f.nodes),
       ancestryDataRef.current
-      // <--- Adicionar
     );
     const findNodeInTree = (tree, targetId) => {
       if (!tree) return null;
@@ -11546,7 +11623,6 @@ function XViewScene({
         description_sections: ancestry.description_sections,
         direction: null,
         customProperties: rootProps
-        // <--- ADICIONADO
       };
     }
     const fullTree = buildFullAncestryTree(
@@ -11575,7 +11651,6 @@ function XViewScene({
       description_sections: currentMeta.description_sections,
       direction: currentDirection,
       customProperties: branchProps
-      // <--- ADICIONADO
     };
   }, [readingMode, buildFullAncestryTree, ancestryDataRef.current]);
   const readModeAbstractionTree = useMemo12(() => {
@@ -11590,7 +11665,7 @@ function XViewScene({
       allAncestries
     );
   }, [readingMode.isActive, readingMode.ancestry, buildFullAncestryTree, sceneVersion]);
-  const handleStartReadingAncestry = useCallback3(
+  const handleStartReadingAncestry = useCallback4(
     async (ancestryObject) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
       if (!ancestryObject || !ancestryObject.tree) {
@@ -11611,7 +11686,6 @@ function XViewScene({
         ancestry: ancestryObject,
         branchStack: [],
         autoAbstraction: shouldAutoRenderAbstraction
-        // <--- FLAG ENVIADA PARA A UI
       });
       if (shouldAutoRenderAbstraction) {
         handleRenderAbstractionTree(ancestryObject, null);
@@ -11625,9 +11699,8 @@ function XViewScene({
       }
     },
     [handleRenderAncestry, handleRenderAbstractionTree]
-    // <--- DEPENDÊNCIA ADICIONADA
   );
-  const handleReadModeSectionChange = useCallback3((activeSectionId) => {
+  const handleReadModeSectionChange = useCallback4((activeSectionId) => {
     const { ancestry, branchStack } = readingMode;
     if (!ancestry || !readingMode.isActive) return;
     let targetObj = ancestry;
@@ -11696,10 +11769,10 @@ function XViewScene({
     }, 0);
     handleRenderAncestry(renderPayload, allowedIds, focusTargetId, rotation);
   }, [readingMode, handleRenderAncestry, buildFullAncestryTree, ancestryDataRef.current]);
-  const handleCloseReadMode = useCallback3(() => {
+  const handleCloseReadMode = useCallback4(() => {
     setReadingMode({ isActive: false, ancestry: null, branchStack: [] });
   }, []);
-  const handleAncestrySectionChange = useCallback3((activeSectionId, ancestryOverride = null, rotation = 0) => {
+  const handleAncestrySectionChange = useCallback4((activeSectionId, ancestryOverride = null, rotation = 0) => {
     var _a2, _b2;
     const currentMode = stateRef.current.ancestry;
     let targetObj = ancestryOverride;
@@ -11751,7 +11824,7 @@ function XViewScene({
     const renderPayload = { ...targetObj, tree: treeToRender };
     handleRenderAncestry(renderPayload, allowedIds, focusTargetId, rotation);
   }, [handleRenderAncestry]);
-  const handleEditAncestry = useCallback3(
+  const handleEditAncestry = useCallback4(
     async (ancestryObject) => {
       setContextMenu((prev) => prev.visible ? { ...prev, visible: false } : prev);
       if (!ancestryObject || !ancestryObject.tree) {
@@ -11774,10 +11847,8 @@ function XViewScene({
         ...ancestryObject,
         tree: fullTree,
         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}`,
@@ -11785,7 +11856,6 @@ function XViewScene({
         ancestryDescriptionSections: ancestryObject.description_sections || [],
         isAddingNodes: false,
         isAddingAbstractionNodes: false
-        // NOVO
       });
     },
     [handleRenderAncestry, buildFullAncestryTree]
@@ -11793,7 +11863,7 @@ function XViewScene({
   const handleSelectAncestryParent = (nodeId) => {
     setAncestryMode((prev) => ({ ...prev, selectedParentId: nodeId }));
   };
-  const handleRemoveFromAncestry = useCallback3((pathToRemove) => {
+  const handleRemoveFromAncestry = useCallback4((pathToRemove) => {
     if (!Array.isArray(pathToRemove) || pathToRemove.length === 0) {
       console.warn("Tentativa de remover a raiz ou caminho inv\xE1lido.");
       return;
@@ -11818,7 +11888,7 @@ function XViewScene({
       return { ...prev, tree: newTree };
     });
   }, []);
-  const handleSaveAncestry = useCallback3(
+  const handleSaveAncestry = useCallback4(
     async (ancestryName, ancestryDescription, ancestrySections, keepOpen = false, treeOverride = null, ancestryCustomProps = {}) => {
       const treeToUse = treeOverride || ancestryMode.tree;
       const { isEditMode, currentAncestryId } = ancestryMode;
@@ -12022,7 +12092,7 @@ function XViewScene({
     });
     setEditingAncestryRel({ visible: false, data: null, path: null });
   };
-  const handleDeleteAncestry = useCallback3(
+  const handleDeleteAncestry = useCallback4(
     async (ancestryIdToDelete) => {
       if (!ancestryIdToDelete) {
         alert("ID da ancestralidade n\xE3o encontrado.");
@@ -12084,15 +12154,15 @@ function XViewScene({
     },
     [save_view_data, delete_file_action]
   );
-  const handleOpenAncestryBoard = useCallback3(() => {
+  const handleOpenAncestryBoard = useCallback4(() => {
     setIsAncestryBoardOpen(true);
   }, []);
-  const handleSelectAncestryFromBoard = useCallback3((ancestry) => {
+  const handleSelectAncestryFromBoard = useCallback4((ancestry) => {
     setIsAncestryBoardOpen(false);
     setIsSidebarOpen(false);
     handleStartReadingAncestry(ancestry);
   }, [handleStartReadingAncestry]);
-  const handleSaveAncestryBoard = useCallback3(async (groups) => {
+  const handleSaveAncestryBoard = useCallback4(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);
@@ -12116,13 +12186,13 @@ function XViewScene({
       return !((_a2 = node.version_node) == null ? void 0 : _a2.is_version);
     });
   }, [parentDataRef.current, sceneVersion]);
-  const handleAddExistingNode = useCallback3(
+  const handleAddExistingNode = useCallback4(
     (nodeId) => {
       return userActionHandlers.handleAddExistingNodeById(actionHandlerContext, nodeId);
     },
     [actionHandlerContext]
   );
-  const handleSaveCurrentView = useCallback3(async () => {
+  const handleSaveCurrentView = useCallback4(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.");
@@ -12162,7 +12232,7 @@ function XViewScene({
   const allAvailableAncestries = useMemo12(() => {
     return ancestryDataRef.current || [];
   }, [sceneVersion, isInitialized]);
-  const handleOpenReference = useCallback3((referenceData) => {
+  const handleOpenReference = useCallback4((referenceData) => {
     const { type, id } = referenceData;
     if (type === "node") {
       const targetNode = allAvailableNodes.find((n) => String(n.id) === String(id));
@@ -12189,10 +12259,10 @@ function XViewScene({
       }
     }
   }, [allAvailableNodes, allAvailableAncestries, handleEditAncestry, tweenToTarget]);
-  const handleToggleAncestryAddMode = useCallback3(() => {
+  const handleToggleAncestryAddMode = useCallback4(() => {
     setAncestryMode((prev) => ({ ...prev, isAddingNodes: !prev.isAddingNodes }));
   }, []);
-  const handleFocusNode = useCallback3((nodeData) => {
+  const handleFocusNode = useCallback4((nodeData) => {
     if (!nodeData) return;
     const nodeMesh = stateRef.current.nodeObjects[String(nodeData.id)];
     if (nodeMesh) {
@@ -12262,7 +12332,6 @@ function XViewScene({
         height: "100vh",
         position: "relative",
         overflow: "hidden",
-        // <--- ADICIONE ESTA LINHA
         cursor: stateRef.current.connection.isActive || stateRef.current.relink.isActive || ancestryMode.isActive ? "crosshair" : creationMode.isActive ? "default" : "grab"
       }
     },
@@ -12329,9 +12398,20 @@ function XViewScene({
     readingMode.isActive && readingMode.ancestry && /* @__PURE__ */ React23.createElement(
       "div",
       {
-        className: "ui-overlay absolute group rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-xl shadow-[0_20px_80px_rgba(0,0,0,0.6)] ring-1 ring-white/10 text-white overflow-hidden flex flex-col transition-all duration-300 ease-out w-[min(92vw,700px)]",
-        style: { top: 16, right: 16, zIndex: 1100, maxHeight: "calc(100vh - 32px)" }
+        className: `ui-overlay absolute group rounded-2xl border border-white/10 bg-slate-950/70 backdrop-blur-xl shadow-[0_20px_80px_rgba(0,0,0,0.6)] ring-1 ring-white/10 text-white overflow-hidden flex flex-col ${isReadModeResizing ? "transition-none" : "transition-all duration-300 ease-out"}`,
+        style: { top: 16, right: 16, zIndex: 1100, maxHeight: "calc(100vh - 32px)", width: `${readModeWidth}px`, maxWidth: "92vw" }
       },
+      /* @__PURE__ */ React23.createElement(
+        "div",
+        {
+          onPointerDown: (e) => {
+            e.stopPropagation();
+            handleReadModeResize(e);
+          },
+          className: "absolute left-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-indigo-500/50 z-[2000] transition-colors",
+          title: "Arraste para redimensionar"
+        }
+      ),
       /* @__PURE__ */ React23.createElement(
         DescriptionReadModePanel,
         {