@lv-x-software-house/x_view 1.2.6-dev.74 → 1.2.6-dev.76

package/dist/index.js

@@ -8910,7 +8910,7 @@ function CreateQuestTreePanel({
   };
   const isAddingModeActive = activeTab === "abstraction" ? isAddingAbstractionNodes : isAddingNodes;
   const currentTree = activeTab === "abstraction" ? abstraction_tree : tree;
-  useEffect(() => {
+  (0, import_react12.useEffect)(() => {
     if (!tree && !abstraction_tree && questTreeMode.questNodeId) {
       const rootNode = {
         id: questTreeMode.questNodeId,
@@ -11265,7 +11265,8 @@ function NodeDetailsPanel({
   userRole,
   currentDatasetName,
   create_google_doc_action,
-  view_google_folder_id
+  view_google_folder_id,
+  style = {}
 }) {
   const [name, setName] = (0, import_react20.useState)((node == null ? void 0 : node.name) ?? "");
   const [types, setTypes] = (0, import_react20.useState)([]);
@@ -11595,7 +11596,15 @@ function NodeDetailsPanel({
     "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 ${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" },
+      style: {
+        top: 16,
+        right: 16,
+        zIndex: 1100,
+        maxHeight: "calc(100vh - 32px)",
+        width: `${panelWidth}px`,
+        maxWidth: "92vw",
+        ...style
+      },
       onPointerDown: swallow,
       onPointerMove: swallow,
       onPointerUp: swallow,
@@ -11967,7 +11976,8 @@ function QuestDetailsPanel({
   view_google_folder_id,
   setQuestTreeMode: setQuestTreeMode2,
   handleRenderQuestTree,
-  handleRenderQuestAbstractionTree
+  handleRenderQuestAbstractionTree,
+  style = {}
 }) {
   var _a, _b;
   const initialRawTitle = (node == null ? void 0 : node.raw_title) || (((_a = node == null ? void 0 : node.name) == null ? void 0 : _a.includes(" - \xBB ")) ? node.name.split(" - \xBB ")[1] : node == null ? void 0 : node.name) || "";
@@ -12545,7 +12555,15 @@ ${noteText}` : noteText : entry.notes,
     "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 ${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" },
+      style: {
+        top: 16,
+        right: 16,
+        zIndex: 1100,
+        maxHeight: "calc(100vh - 32px)",
+        width: `${panelWidth}px`,
+        maxWidth: "92vw",
+        ...style
+      },
       onPointerDown: swallow,
       onPointerMove: swallow,
       onPointerUp: swallow,
@@ -20162,6 +20180,7 @@ function XViewScene({
   if (isLoading || status === "loading" || permissionStatus === "loading") {
     return /* @__PURE__ */ import_react33.default.createElement(LoadingScreen, null);
   }
+  const overlayHiddenStyle = questTreeMode.isActive ? { opacity: 0, pointerEvents: "none", transform: "translateX(30px)", transition: "all 300ms ease-in-out" } : {};
   if (permissionStatus === "denied") {
     return /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen w-full bg-slate-950 text-white" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "bg-slate-900/50 p-8 rounded-2xl border border-slate-800 shadow-2xl text-center max-w-md" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "mb-4 text-red-500" }, /* @__PURE__ */ import_react33.default.createElement(
       "svg",
@@ -20267,7 +20286,8 @@ function XViewScene({
           top: `${formPosition.top}px`,
           opacity: formPosition.opacity,
           zIndex: 20,
-          transition: "opacity 200ms ease-out"
+          transition: "opacity 200ms ease-out, transform 300ms ease-in-out",
+          ...overlayHiddenStyle
         },
         refEl: formRef,
         existingTypes: existingNodeTypes,
@@ -20300,7 +20320,8 @@ function XViewScene({
           top: `${formPosition.top}px`,
           opacity: formPosition.opacity,
           zIndex: 20,
-          transition: "opacity 200ms ease-out"
+          transition: "opacity 200ms ease-out, transform 300ms ease-in-out",
+          ...overlayHiddenStyle
         },
         refEl: formRef,
         fixedType: (_h = versionMode.sourceNodeData) == null ? void 0 : _h.type,
@@ -20332,7 +20353,8 @@ function XViewScene({
           left: `16px`,
           top: `16px`,
           zIndex: 20,
-          transition: "opacity 200ms ease-out"
+          transition: "opacity 200ms ease-out, transform 300ms ease-in-out",
+          ...overlayHiddenStyle
         },
         refEl: formRef,
         onOpenImageViewer: handleOpenImageViewer,
@@ -20489,7 +20511,8 @@ function XViewScene({
         view_google_folder_id: (_n = sceneDataRef.current) == null ? void 0 : _n.view_google_folder_id,
         setQuestTreeMode: setQuestTreeMode2,
         handleRenderQuestTree,
-        handleRenderQuestAbstractionTree
+        handleRenderQuestAbstractionTree,
+        style: overlayHiddenStyle
       }
     ),
     detailsNode && !detailsNode.is_quest && /* @__PURE__ */ import_react33.default.createElement(
@@ -20523,7 +20546,8 @@ function XViewScene({
         userRole: userPermissionRole,
         currentDatasetName: detailsNodeDatasetInfo == null ? void 0 : detailsNodeDatasetInfo.datasetName,
         create_google_doc_action,
-        view_google_folder_id: (_o = sceneDataRef.current) == null ? void 0 : _o.view_google_folder_id
+        view_google_folder_id: (_o = sceneDataRef.current) == null ? void 0 : _o.view_google_folder_id,
+        style: overlayHiddenStyle
       }
     ),
     detailsLink && /* @__PURE__ */ import_react33.default.createElement(

package/dist/index.mjs

@@ -17,7 +17,7 @@ import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPa
 import { Group as Group2, Tween as Tween2, Easing as Easing2 } from "@tweenjs/tween.js";
 
 // src/components/ContextMenu.jsx
-import React, { useLayoutEffect, useRef, useState as useState2, useEffect as useEffect2, useMemo } from "react";
+import React, { useLayoutEffect, useRef, useState as useState2, useEffect, useMemo } from "react";
 
 // src/logic/permissions.js
 import { AbilityBuilder, Ability } from "@casl/ability";
@@ -3367,7 +3367,7 @@ function ContextMenu({
     () => isQuestBlocked(data.nodeData, allParentNodes),
     [data.nodeData, allParentNodes]
   );
-  useEffect2(() => {
+  useEffect(() => {
     if (data.visible) {
       setMenuView("main");
       setSelectedAncestry(null);
@@ -3389,7 +3389,7 @@ function ContextMenu({
     if (top + h + 8 > vh) top = Math.max(8, vh - h - 8);
     setMenuPos({ left, top });
   }, [data, menuView, versionSubMenu, labelSubMenu, selectedQuestStatus]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!data.visible) return;
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) onClose();
@@ -3836,13 +3836,13 @@ function ContextMenu({
 }
 
 // src/components/XViewSidebar.jsx
-import React2, { useMemo as useMemo2, useState as useState3, useEffect as useEffect3, useRef as useRef2 } from "react";
+import React2, { useMemo as useMemo2, useState as useState3, useEffect as useEffect2, useRef as useRef2 } from "react";
 import { FiLayers, FiCpu } from "react-icons/fi";
 import { FaGoogleDrive } from "react-icons/fa";
 var CustomSelect = ({ value, onChange, options, placeholder }) => {
   const [isOpen, setIsOpen] = useState3(false);
   const selectRef = useRef2(null);
-  useEffect3(() => {
+  useEffect2(() => {
     const handleClickOutside = (e) => {
       if (selectRef.current && !selectRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -3956,7 +3956,7 @@ function XViewSidebar({
   const [folderId, setFolderId] = useState3(view_google_folder_id || "");
   const [folderName, setFolderName] = useState3(view_google_folder_name || "");
   const [isPickingGoogleFolder, setIsPickingGoogleFolder] = useState3(false);
-  useEffect3(() => {
+  useEffect2(() => {
     if (view_google_folder_id !== void 0) {
       setFolderId(view_google_folder_id || "");
     }
@@ -4071,7 +4071,7 @@ function XViewSidebar({
     activeFilters,
     filterCategory
   ]);
-  useEffect3(() => {
+  useEffect2(() => {
     const handleClickOutside = (event) => {
       if (filterMenuRef.current && !filterMenuRef.current.contains(event.target)) {
         setIsFilterMenuOpen(false);
@@ -4085,7 +4085,7 @@ function XViewSidebar({
     }
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isFilterMenuOpen, isTypeDropdownOpen]);
-  useEffect3(() => {
+  useEffect2(() => {
     const handleClickOutsideAnnexed = (event) => {
       if (annexedPanelRef.current && !annexedPanelRef.current.contains(event.target)) {
         if (event.target.closest(".lens-button")) return;
@@ -4097,7 +4097,7 @@ function XViewSidebar({
     }
     return () => document.removeEventListener("mousedown", handleClickOutsideAnnexed);
   }, [activeSubMenu]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
   const swallow = (e) => e.stopPropagation();
@@ -4732,11 +4732,11 @@ function XViewSidebar({
 }
 
 // src/components/AncestryRelationshipPanel.jsx
-import React8, { useState as useState9, useEffect as useEffect9, useRef as useRef7 } from "react";
+import React8, { useState as useState9, useEffect as useEffect8, useRef as useRef7 } from "react";
 import { v4 as uuidv43 } from "uuid";
 
 // src/components/CustomPropertyDisplay.jsx
-import React3, { useState as useState4, useRef as useRef3, useEffect as useEffect4 } 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,
@@ -4759,7 +4759,7 @@ function CustomPropertyDisplay({
   const [uploadingItemIndex, setUploadingItemIndex] = useState4(null);
   const fileInputRef = useRef3(null);
   const currentUploadTargetRef = useRef3(null);
-  useEffect4(() => {
+  useEffect3(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsTypeDropdownOpen(false);
@@ -5102,11 +5102,11 @@ function CustomPropertyDisplay({
 import { FiPlus, FiEdit2 as FiEdit22, FiBookOpen } from "react-icons/fi";
 
 // src/components/DescriptionEditModal.jsx
-import React5, { useState as useState6, useEffect as useEffect6, 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, FiCheckSquare } from "react-icons/fi";
 
 // src/components/SectionImportModal.jsx
-import React4, { useState as useState5, useMemo as useMemo3, useRef as useRef4, useEffect as useEffect5 } 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 as FiChevronRight2, FiDownload, FiLink } from "react-icons/fi";
 var CodeBlock = ({ content, isActive, onClick }) => {
   const [isExpanded, setIsExpanded] = useState5(false);
@@ -5182,7 +5182,7 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
   const sectionRefs = useRef4([]);
   const [isDropdownOpen, setIsDropdownOpen] = useState5(false);
   const inputRef = useRef4(null);
-  useEffect5(() => {
+  useEffect4(() => {
     if (!selectedItem) return;
     const itemId = selectedItem.id || selectedItem.ancestry_id;
     const type = selectedItem._type;
@@ -5225,12 +5225,12 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
     if (!selectedItem) return [];
     return parseDescriptionSections(selectedItem.description, selectedItem.description_sections);
   }, [selectedItem]);
-  useEffect5(() => {
+  useEffect4(() => {
     setActiveIndex(0);
     setSelectedIndices(/* @__PURE__ */ new Set([0]));
     setLastSelectedIndex(0);
   }, [selectedItem]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (selectedItem && sectionRefs.current[activeIndex]) {
       sectionRefs.current[activeIndex].scrollIntoView({
         behavior: "smooth",
@@ -5239,7 +5239,7 @@ function SectionImportModal({ isOpen, onClose, onSelect, availableNodes = [], av
       });
     }
   }, [activeIndex, selectedItem]);
-  useEffect5(() => {
+  useEffect4(() => {
     const handleKeyDown = (e) => {
       if (!selectedItem) return;
       if (document.activeElement === inputRef.current) return;
@@ -5536,7 +5536,7 @@ function DescriptionEditModal({
   const [manualImageUrl, setManualImageUrl] = useState6("");
   const hoverTimeoutRef = useRef5(null);
   const [tooltipData, setTooltipData] = useState6(null);
-  useEffect6(() => {
+  useEffect5(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         if (isMentionModalOpen) {
@@ -5579,7 +5579,7 @@ function DescriptionEditModal({
     if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
     setTooltipData(null);
   };
-  useEffect6(() => {
+  useEffect5(() => {
     setText(initialValue || "");
   }, [initialValue, isOpen]);
   const filteredNodesForMention = useMemo4(() => {
@@ -5989,7 +5989,7 @@ ${space}${bullet} `);
 }
 
 // src/components/DescriptionDisplay.jsx
-import React6, { useMemo as useMemo5, useState as useState7, useEffect as useEffect7, 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 FiChevronRight3, FiTerminal as FiTerminal2, FiCornerDownRight, FiExternalLink as FiExternalLink2, FiImage as FiImage2, FiSave } from "react-icons/fi";
 var CodeBlock2 = ({ content, isActive, onClick }) => {
   const [isExpanded, setIsExpanded] = useState7(false);
@@ -6211,7 +6211,7 @@ function DescriptionDisplay({
   onStepChange
 }) {
   const [localDescription, setLocalDescription] = useState7(description || "");
-  useEffect7(() => {
+  useEffect6(() => {
     setLocalDescription(description || "");
   }, [description]);
   const sections = useMemo5(() => parseDescriptionSections(localDescription, savedSections), [localDescription, savedSections]);
@@ -6255,7 +6255,7 @@ function DescriptionDisplay({
     return navItems;
   }, [sections]);
   const [currentStepIndex, setCurrentStepIndex] = useState7(0);
-  useEffect7(() => {
+  useEffect6(() => {
     if (onStepChange) {
       onStepChange(currentStepIndex);
     }
@@ -6263,7 +6263,7 @@ function DescriptionDisplay({
   const activeRef = useRef6(null);
   const lastNotifiedSectionId = useRef6(null);
   const isInitialMount = useRef6(true);
-  useEffect7(() => {
+  useEffect6(() => {
     let targetIndex = 0;
     if (initialSectionId !== null && initialSectionId !== void 0) {
       targetIndex = flatNavigation.findIndex(
@@ -6275,7 +6275,7 @@ function DescriptionDisplay({
     isInitialMount.current = true;
     lastNotifiedSectionId.current = null;
   }, [description, initialSectionId, flatNavigation, sections]);
-  useEffect7(() => {
+  useEffect6(() => {
     const currentItem = flatNavigation[currentStepIndex];
     if (onSectionChange && currentItem) {
       if (isInitialMount.current || lastNotifiedSectionId.current !== currentItem.sectionId) {
@@ -6294,7 +6294,7 @@ function DescriptionDisplay({
       }
     }
   }, [currentStepIndex, flatNavigation, onSectionChange, onHighlightNode]);
-  useEffect7(() => {
+  useEffect6(() => {
     const handleKeyDown = (e) => {
       if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
       const currentItem = flatNavigation[currentStepIndex];
@@ -6338,7 +6338,7 @@ function DescriptionDisplay({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [flatNavigation, currentStepIndex, onBranchNav, currentBranchDirection]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (activeRef.current) {
       activeRef.current.scrollIntoView({
         behavior: "smooth",
@@ -6454,7 +6454,7 @@ function DescriptionDisplay({
 }
 
 // src/components/DescriptionReadModePanel.jsx
-import React7, { useState as useState8, useMemo as useMemo6, useEffect as useEffect8 } from "react";
+import React7, { useState as useState8, useMemo as useMemo6, useEffect as useEffect7 } from "react";
 import {
   FiArrowLeft,
   FiEdit2,
@@ -6574,7 +6574,7 @@ function DescriptionReadModePanel({
       console.error("Erro ao copiar link:", err);
     });
   };
-  useEffect8(() => {
+  useEffect7(() => {
     setShowAbstraction(initialShowAbstraction);
     if (initialShowAbstraction) {
       setShowProperties(false);
@@ -6824,7 +6824,7 @@ function AncestryRelationshipPanel({
   const [isDescriptionModalOpen, setIsDescriptionModalOpen] = useState9(false);
   const [isReadMode, setIsReadMode] = useState9(false);
   const propsEndRef = useRef7(null);
-  useEffect9(() => {
+  useEffect8(() => {
     setDescription((data == null ? void 0 : data.description) ?? "");
     setExistingSections((data == null ? void 0 : data.description_sections) || []);
     setCustomProps(extractCustomPropsFromNode(data || {}));
@@ -6977,7 +6977,7 @@ function AncestryRelationshipPanel({
 }
 
 // src/components/CreateAncestryPanel.jsx
-import React10, { useState as useState11, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef8, useCallback as useCallback2 } 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,
@@ -6999,7 +6999,7 @@ import {
 import { v4 as uuidv44 } from "uuid";
 
 // src/components/AncestryPickerModal.jsx
-import React9, { useState as useState10, useMemo as useMemo7, useEffect as useEffect10 } 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,
@@ -7010,7 +7010,7 @@ function AncestryPickerModal({
   currentAncestryId
 }) {
   const [searchTerm, setSearchTerm] = useState10("");
-  useEffect10(() => {
+  useEffect9(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -7251,7 +7251,7 @@ function CreateAncestryPanel({
   const [customProps, setCustomProps] = useState11([]);
   const propsEndRef = useRef8(null);
   const [branchStack, setBranchStack] = useState11([]);
-  useEffect11(() => {
+  useEffect10(() => {
     setShowDeleteBranchConfirm(false);
   }, [branchStack]);
   const [targetRenderNodeId, setTargetRenderNodeId] = useState11(null);
@@ -7282,7 +7282,7 @@ function CreateAncestryPanel({
     minWidth: 320,
     maxWidth: maxPanelW
   });
-  useEffect11(() => {
+  useEffect10(() => {
     setWidth(isReadMode ? 700 : 440);
   }, [isReadMode, setWidth]);
   const currentMaxRenderIndexRef = useRef8(0);
@@ -7475,7 +7475,7 @@ function CreateAncestryPanel({
     setHasUnsavedChanges(true);
   };
   const currentUsedTypes = customProps.map((p) => p.type).filter((t) => UNIQUE_PROP_TYPES.includes(t));
-  useEffect11(() => {
+  useEffect10(() => {
     if (!isContextLinked) return;
     const handleKeyDown = (e) => {
       if (branchStack.length === 0) return;
@@ -7493,7 +7493,7 @@ function CreateAncestryPanel({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isContextLinked, branchStack]);
-  useEffect11(() => {
+  useEffect10(() => {
     const ctx = getCurrentContext();
     const currentContextId = branchStack.length > 0 ? branchStack[branchStack.length - 1].branchId : ancestryMode.currentAncestryId || `new_${ancestryMode.ancestral_node}`;
     if (initializedContextIdRef.current === currentContextId) {
@@ -8233,7 +8233,7 @@ function CreateAncestryPanel({
       }
     }
   };
-  useEffect11(() => {
+  useEffect10(() => {
     if (!description && existingSections.length === 0) return;
     const newRootTree = applyDescriptionToTree(ancestryMode.tree, description, existingSections);
     const currentTreeString = JSON.stringify(ancestryMode.tree);
@@ -8688,7 +8688,7 @@ function CreateAncestryPanel({
 }
 
 // src/components/CreateQuestTreePanel.jsx
-import React11, { useState as useState12, useCallback as useCallback3, useMemo as useMemo9 } from "react";
+import React11, { useState as useState12, useEffect as useEffect11, useCallback as useCallback3, useMemo as useMemo9 } from "react";
 import {
   FiFolder as FiFolder3,
   FiLayers as FiLayers6,
@@ -8908,7 +8908,7 @@ function CreateQuestTreePanel({
   };
   const isAddingModeActive = activeTab === "abstraction" ? isAddingAbstractionNodes : isAddingNodes;
   const currentTree = activeTab === "abstraction" ? abstraction_tree : tree;
-  useEffect(() => {
+  useEffect11(() => {
     if (!tree && !abstraction_tree && questTreeMode.questNodeId) {
       const rootNode = {
         id: questTreeMode.questNodeId,
@@ -11292,7 +11292,8 @@ function NodeDetailsPanel({
   userRole,
   currentDatasetName,
   create_google_doc_action,
-  view_google_folder_id
+  view_google_folder_id,
+  style = {}
 }) {
   const [name, setName] = useState19((node == null ? void 0 : node.name) ?? "");
   const [types, setTypes] = useState19([]);
@@ -11622,7 +11623,15 @@ function NodeDetailsPanel({
     "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 ${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" },
+      style: {
+        top: 16,
+        right: 16,
+        zIndex: 1100,
+        maxHeight: "calc(100vh - 32px)",
+        width: `${panelWidth}px`,
+        maxWidth: "92vw",
+        ...style
+      },
       onPointerDown: swallow,
       onPointerMove: swallow,
       onPointerUp: swallow,
@@ -12006,7 +12015,8 @@ function QuestDetailsPanel({
   view_google_folder_id,
   setQuestTreeMode: setQuestTreeMode2,
   handleRenderQuestTree,
-  handleRenderQuestAbstractionTree
+  handleRenderQuestAbstractionTree,
+  style = {}
 }) {
   var _a, _b;
   const initialRawTitle = (node == null ? void 0 : node.raw_title) || (((_a = node == null ? void 0 : node.name) == null ? void 0 : _a.includes(" - \xBB ")) ? node.name.split(" - \xBB ")[1] : node == null ? void 0 : node.name) || "";
@@ -12584,7 +12594,15 @@ ${noteText}` : noteText : entry.notes,
     "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 ${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" },
+      style: {
+        top: 16,
+        right: 16,
+        zIndex: 1100,
+        maxHeight: "calc(100vh - 32px)",
+        width: `${panelWidth}px`,
+        maxWidth: "92vw",
+        ...style
+      },
       onPointerDown: swallow,
       onPointerMove: swallow,
       onPointerUp: swallow,
@@ -20226,6 +20244,7 @@ function XViewScene({
   if (isLoading || status === "loading" || permissionStatus === "loading") {
     return /* @__PURE__ */ React32.createElement(LoadingScreen, null);
   }
+  const overlayHiddenStyle = questTreeMode.isActive ? { opacity: 0, pointerEvents: "none", transform: "translateX(30px)", transition: "all 300ms ease-in-out" } : {};
   if (permissionStatus === "denied") {
     return /* @__PURE__ */ React32.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen w-full bg-slate-950 text-white" }, /* @__PURE__ */ React32.createElement("div", { className: "bg-slate-900/50 p-8 rounded-2xl border border-slate-800 shadow-2xl text-center max-w-md" }, /* @__PURE__ */ React32.createElement("div", { className: "mb-4 text-red-500" }, /* @__PURE__ */ React32.createElement(
       "svg",
@@ -20331,7 +20350,8 @@ function XViewScene({
           top: `${formPosition.top}px`,
           opacity: formPosition.opacity,
           zIndex: 20,
-          transition: "opacity 200ms ease-out"
+          transition: "opacity 200ms ease-out, transform 300ms ease-in-out",
+          ...overlayHiddenStyle
         },
         refEl: formRef,
         existingTypes: existingNodeTypes,
@@ -20364,7 +20384,8 @@ function XViewScene({
           top: `${formPosition.top}px`,
           opacity: formPosition.opacity,
           zIndex: 20,
-          transition: "opacity 200ms ease-out"
+          transition: "opacity 200ms ease-out, transform 300ms ease-in-out",
+          ...overlayHiddenStyle
         },
         refEl: formRef,
         fixedType: (_h = versionMode.sourceNodeData) == null ? void 0 : _h.type,
@@ -20396,7 +20417,8 @@ function XViewScene({
           left: `16px`,
           top: `16px`,
           zIndex: 20,
-          transition: "opacity 200ms ease-out"
+          transition: "opacity 200ms ease-out, transform 300ms ease-in-out",
+          ...overlayHiddenStyle
         },
         refEl: formRef,
         onOpenImageViewer: handleOpenImageViewer,
@@ -20553,7 +20575,8 @@ function XViewScene({
         view_google_folder_id: (_n = sceneDataRef.current) == null ? void 0 : _n.view_google_folder_id,
         setQuestTreeMode: setQuestTreeMode2,
         handleRenderQuestTree,
-        handleRenderQuestAbstractionTree
+        handleRenderQuestAbstractionTree,
+        style: overlayHiddenStyle
       }
     ),
     detailsNode && !detailsNode.is_quest && /* @__PURE__ */ React32.createElement(
@@ -20587,7 +20610,8 @@ function XViewScene({
         userRole: userPermissionRole,
         currentDatasetName: detailsNodeDatasetInfo == null ? void 0 : detailsNodeDatasetInfo.datasetName,
         create_google_doc_action,
-        view_google_folder_id: (_o = sceneDataRef.current) == null ? void 0 : _o.view_google_folder_id
+        view_google_folder_id: (_o = sceneDataRef.current) == null ? void 0 : _o.view_google_folder_id,
+        style: overlayHiddenStyle
       }
     ),
     detailsLink && /* @__PURE__ */ React32.createElement(

package/package.json

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