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

package/dist/index.js

@@ -8949,7 +8949,10 @@ function CreateQuestTreePanel({
     /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex border-b border-slate-800 bg-slate-900/50 p-2 gap-2 flex-shrink-0" }, /* @__PURE__ */ import_react12.default.createElement(
       "button",
       {
-        onClick: () => setActiveTab("tree"),
+        onClick: () => {
+          setActiveTab("tree");
+          setQuestTreeMode2((prev) => ({ ...prev, isAddingNodes: true, isAddingAbstractionNodes: false }));
+        },
         className: `flex-1 flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-all ${activeTab === "tree" ? "bg-indigo-600 text-white shadow-lg" : "bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200"}`
       },
       /* @__PURE__ */ import_react12.default.createElement(import_fi11.FiGitBranch, null),
@@ -8957,7 +8960,10 @@ function CreateQuestTreePanel({
     ), /* @__PURE__ */ import_react12.default.createElement(
       "button",
       {
-        onClick: () => setActiveTab("abstraction"),
+        onClick: () => {
+          setActiveTab("abstraction");
+          setQuestTreeMode2((prev) => ({ ...prev, isAddingNodes: false, isAddingAbstractionNodes: true }));
+        },
         className: `flex-1 flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-all ${activeTab === "abstraction" ? "bg-indigo-600 text-white shadow-lg" : "bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200"}`
       },
       /* @__PURE__ */ import_react12.default.createElement(import_fi11.FiLayers, null),
@@ -8976,10 +8982,11 @@ function CreateQuestTreePanel({
     /* @__PURE__ */ import_react12.default.createElement("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 z-30" }, /* @__PURE__ */ import_react12.default.createElement(
       "button",
       {
-        onClick: handleToggleAddMode,
-        className: `flex items-center gap-2 px-5 py-2.5 rounded-full font-bold shadow-xl transition-all ${isAddingModeActive ? "bg-red-500 hover:bg-red-600 text-white animate-pulse shadow-red-500/20" : "bg-indigo-500 hover:bg-indigo-600 text-white shadow-indigo-500/20"}`
+        onClick: handleLocalSave,
+        disabled: isSaving,
+        className: "flex items-center gap-2 px-8 py-3 rounded-full font-bold shadow-2xl transition-all scale-110 bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/20 active:scale-100"
       },
-      isAddingModeActive ? /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, "Clique no Cen\xE1rio 3D ", /* @__PURE__ */ import_react12.default.createElement("span", { className: "animate-bounce" }, "\u2193")) : /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(import_fi11.FiPlus, null), " Adicionar \xE0 \xC1rvore")
+      isSaving ? "Salvando..." : /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react12.default.createElement("path", { d: "M20 6L9 17l-5-5" })), " Salvar Mudan\xE7as")
     )),
     isAddingModeActive && selectedParentId && /* @__PURE__ */ import_react12.default.createElement("div", { className: "absolute bottom-20 left-1/2 -translate-x-1/2 bg-slate-800 px-4 py-2 rounded-full border border-slate-600 text-xs text-slate-300 shadow-lg whitespace-nowrap" }, "Destino: ", /* @__PURE__ */ import_react12.default.createElement("span", { className: "text-emerald-400 font-bold" }, ((_c = (_b = (_a = findNodePath3(currentTree, selectedParentId)) == null ? void 0 : _a.node) == null ? void 0 : _b.node) == null ? void 0 : _c.name) || "Root"))
   );
@@ -10783,6 +10790,7 @@ function InSceneQuestForm({
             setQuestTreeMode((prev) => ({
               ...prev,
               isActive: true,
+              isAddingNodes: true,
               questTempData: true
             }));
           }
@@ -11265,7 +11273,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 +11604,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 +11984,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 +12563,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,
@@ -13019,6 +13045,7 @@ ${noteText}` : noteText : entry.notes,
             setQuestTreeMode2((prev) => ({
               ...prev,
               isActive: true,
+              isAddingNodes: true,
               questNodeId: node == null ? void 0 : node.id
             }));
           }
@@ -17117,15 +17144,11 @@ function XViewScene({
           let newTree = addChildToNode(activeTree, parentId, fullNodeData);
           setQuestTreeMode2((prev) => ({
             ...prev,
-            [activeTreeKey]: newTree,
-            isAddingNodes: false,
-            isAddingAbstractionNodes: false
+            [activeTreeKey]: newTree
           }));
         } else {
           setQuestTreeMode2((prev) => ({
-            ...prev,
-            isAddingNodes: false,
-            isAddingAbstractionNodes: false
+            ...prev
           }));
         }
         return;
@@ -20162,6 +20185,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 +20291,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 +20325,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 +20358,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 +20516,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 +20551,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

@@ -8947,7 +8947,10 @@ function CreateQuestTreePanel({
     /* @__PURE__ */ React11.createElement("div", { className: "flex border-b border-slate-800 bg-slate-900/50 p-2 gap-2 flex-shrink-0" }, /* @__PURE__ */ React11.createElement(
       "button",
       {
-        onClick: () => setActiveTab("tree"),
+        onClick: () => {
+          setActiveTab("tree");
+          setQuestTreeMode2((prev) => ({ ...prev, isAddingNodes: true, isAddingAbstractionNodes: false }));
+        },
         className: `flex-1 flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-all ${activeTab === "tree" ? "bg-indigo-600 text-white shadow-lg" : "bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200"}`
       },
       /* @__PURE__ */ React11.createElement(FiGitBranch3, null),
@@ -8955,7 +8958,10 @@ function CreateQuestTreePanel({
     ), /* @__PURE__ */ React11.createElement(
       "button",
       {
-        onClick: () => setActiveTab("abstraction"),
+        onClick: () => {
+          setActiveTab("abstraction");
+          setQuestTreeMode2((prev) => ({ ...prev, isAddingNodes: false, isAddingAbstractionNodes: true }));
+        },
         className: `flex-1 flex items-center justify-center gap-2 py-2 px-3 rounded-md text-sm font-medium transition-all ${activeTab === "abstraction" ? "bg-indigo-600 text-white shadow-lg" : "bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-slate-200"}`
       },
       /* @__PURE__ */ React11.createElement(FiLayers6, null),
@@ -8974,10 +8980,11 @@ function CreateQuestTreePanel({
     /* @__PURE__ */ React11.createElement("div", { className: "absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-3 z-30" }, /* @__PURE__ */ React11.createElement(
       "button",
       {
-        onClick: handleToggleAddMode,
-        className: `flex items-center gap-2 px-5 py-2.5 rounded-full font-bold shadow-xl transition-all ${isAddingModeActive ? "bg-red-500 hover:bg-red-600 text-white animate-pulse shadow-red-500/20" : "bg-indigo-500 hover:bg-indigo-600 text-white shadow-indigo-500/20"}`
+        onClick: handleLocalSave,
+        disabled: isSaving,
+        className: "flex items-center gap-2 px-8 py-3 rounded-full font-bold shadow-2xl transition-all scale-110 bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/20 active:scale-100"
       },
-      isAddingModeActive ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, "Clique no Cen\xE1rio 3D ", /* @__PURE__ */ React11.createElement("span", { className: "animate-bounce" }, "\u2193")) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(FiPlus3, null), " Adicionar \xE0 \xC1rvore")
+      isSaving ? "Salvando..." : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React11.createElement("path", { d: "M20 6L9 17l-5-5" })), " Salvar Mudan\xE7as")
     )),
     isAddingModeActive && selectedParentId && /* @__PURE__ */ React11.createElement("div", { className: "absolute bottom-20 left-1/2 -translate-x-1/2 bg-slate-800 px-4 py-2 rounded-full border border-slate-600 text-xs text-slate-300 shadow-lg whitespace-nowrap" }, "Destino: ", /* @__PURE__ */ React11.createElement("span", { className: "text-emerald-400 font-bold" }, ((_c = (_b = (_a = findNodePath3(currentTree, selectedParentId)) == null ? void 0 : _a.node) == null ? void 0 : _b.node) == null ? void 0 : _c.name) || "Root"))
   );
@@ -10810,6 +10817,7 @@ function InSceneQuestForm({
             setQuestTreeMode((prev) => ({
               ...prev,
               isActive: true,
+              isAddingNodes: true,
               questTempData: true
             }));
           }
@@ -11292,7 +11300,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 +11631,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 +12023,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 +12602,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,
@@ -13058,6 +13084,7 @@ ${noteText}` : noteText : entry.notes,
             setQuestTreeMode2((prev) => ({
               ...prev,
               isActive: true,
+              isAddingNodes: true,
               questNodeId: node == null ? void 0 : node.id
             }));
           }
@@ -17181,15 +17208,11 @@ function XViewScene({
           let newTree = addChildToNode(activeTree, parentId, fullNodeData);
           setQuestTreeMode2((prev) => ({
             ...prev,
-            [activeTreeKey]: newTree,
-            isAddingNodes: false,
-            isAddingAbstractionNodes: false
+            [activeTreeKey]: newTree
           }));
         } else {
           setQuestTreeMode2((prev) => ({
-            ...prev,
-            isAddingNodes: false,
-            isAddingAbstractionNodes: false
+            ...prev
           }));
         }
         return;
@@ -20226,6 +20249,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 +20355,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 +20389,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 +20422,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 +20580,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 +20615,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.77",
   "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",