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

package/dist/index.js

@@ -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

@@ -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.75",
+  "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",