@lv-x-software-house/x_view 1.2.6-dev.50 → 1.2.6-dev.52

package/dist/index.js

@@ -3896,6 +3896,8 @@ function XViewSidebar({
   },
   milestones = [],
   onOpenMilestoneManager = () => {
+  },
+  onActivateReshapeLens = () => {
   }
 }) {
   const [query, setQuery] = (0, import_react3.useState)("");
@@ -3906,17 +3908,21 @@ function XViewSidebar({
   const [isFilterMenuOpen, setIsFilterMenuOpen] = (0, import_react3.useState)(false);
   const [filterCategory, setFilterCategory] = (0, import_react3.useState)("Type");
   const [filterValue, setFilterValue] = (0, import_react3.useState)("");
+  const [activeSubMenu, setActiveSubMenu] = (0, import_react3.useState)(null);
   const [questFilterAssignee, setQuestFilterAssignee] = (0, import_react3.useState)("");
   const [questFilterStatus, setQuestFilterStatus] = (0, import_react3.useState)("");
-  const [isQuestLensMenuOpen, setIsQuestLensMenuOpen] = (0, import_react3.useState)(false);
   const [questFilterMilestone, setQuestFilterMilestone] = (0, import_react3.useState)("");
+  const [isQuestLensLoading, setIsQuestLensLoading] = (0, import_react3.useState)(false);
+  const [reshapeLayoutType, setReshapeLayoutType] = (0, import_react3.useState)("Star");
+  const [reshapeColumnCount, setReshapeColumnCount] = (0, import_react3.useState)(4);
+  const [reshapeCenterNodeId, setReshapeCenterNodeId] = (0, import_react3.useState)("");
   const [isTypeDropdownOpen, setIsTypeDropdownOpen] = (0, import_react3.useState)(false);
   const [highlightedTypeIndex, setHighlightedTypeIndex] = (0, import_react3.useState)(-1);
   const containerRef = (0, import_react3.useRef)(null);
   const inputRef = (0, import_react3.useRef)(null);
   const filterMenuRef = (0, import_react3.useRef)(null);
   const typeDropdownRef = (0, import_react3.useRef)(null);
-  const questLensRef = (0, import_react3.useRef)(null);
+  const annexedPanelRef = (0, import_react3.useRef)(null);
   const ability = (0, import_react3.useMemo)(() => {
     return defineAbilityFor(userRole);
   }, [userRole]);
@@ -4022,16 +4028,17 @@ function XViewSidebar({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isFilterMenuOpen, isTypeDropdownOpen]);
   (0, import_react3.useEffect)(() => {
-    const handleClickOutsideQuest = (event) => {
-      if (questLensRef.current && !questLensRef.current.contains(event.target)) {
-        setIsQuestLensMenuOpen(false);
+    const handleClickOutsideAnnexed = (event) => {
+      if (annexedPanelRef.current && !annexedPanelRef.current.contains(event.target)) {
+        if (event.target.closest(".lens-button")) return;
+        setActiveSubMenu(null);
       }
     };
-    if (isQuestLensMenuOpen) {
-      document.addEventListener("mousedown", handleClickOutsideQuest);
+    if (activeSubMenu) {
+      document.addEventListener("mousedown", handleClickOutsideAnnexed);
     }
-    return () => document.removeEventListener("mousedown", handleClickOutsideQuest);
-  }, [isQuestLensMenuOpen]);
+    return () => document.removeEventListener("mousedown", handleClickOutsideAnnexed);
+  }, [activeSubMenu]);
   (0, import_react3.useEffect)(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
@@ -4129,11 +4136,150 @@ function XViewSidebar({
   if (!isOpen) return ToggleButton;
   const buttonBaseClass = "w-full px-3 py-2 rounded-md bg-indigo-500/10 hover:bg-indigo-500/20 border border-indigo-500/30 text-sm text-indigo-200 transition-colors flex items-center justify-center gap-2";
   const buttonDisabledClass = "w-full px-3 py-2 rounded-md bg-slate-800/50 border border-white/5 text-sm text-slate-500 cursor-not-allowed flex items-center justify-center gap-2";
+  const renderAnnexedPanel = () => {
+    if (!activeSubMenu) return null;
+    return /* @__PURE__ */ import_react3.default.createElement(
+      "div",
+      {
+        ref: annexedPanelRef,
+        className: "flex flex-col h-full w-[100vw] md:w-[280px] min-w-[100vw] md:min-w-[280px] bg-slate-950/95 md:bg-slate-950/80 backdrop-blur-2xl border-r border-white/10 shadow-2xl"
+      },
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "px-4 py-3 border-b border-white/10 flex items-center gap-2 bg-white/5" }, /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: () => setActiveSubMenu(null),
+          className: "p-1.5 -ml-1 rounded-md text-slate-400 hover:text-white hover:bg-white/10 md:hidden transition-colors",
+          title: "Voltar"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { fillRule: "evenodd", d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", clipRule: "evenodd" }))
+      ), /* @__PURE__ */ import_react3.default.createElement("h3", { className: "text-sm font-semibold text-indigo-100 uppercase tracking-wider" }, activeSubMenu === "quest" ? "Quest Lens" : "Reshape Lens"), /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          className: "ml-auto p-1.5 rounded-md text-slate-400 hover:text-white hover:bg-white/10 transition-colors hidden md:block",
+          onClick: () => setActiveSubMenu(null),
+          title: "Fechar Sub-menu"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }))
+      )),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-6" }, activeSubMenu === "quest" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-500" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Respons\xE1vel"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative group/select" }, /* @__PURE__ */ import_react3.default.createElement(
+        "select",
+        {
+          value: questFilterAssignee,
+          onChange: (e) => setQuestFilterAssignee(e.target.value),
+          className: "w-full bg-slate-900/80 px-3 py-2.5 text-sm rounded-md border border-white/10 focus:outline-none focus:border-indigo-500/50 text-slate-200 appearance-none cursor-pointer hover:bg-slate-800/50 transition-all"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Todos os Respons\xE1veis"),
+        viewMembers.map((m) => /* @__PURE__ */ import_react3.default.createElement("option", { key: m.id, value: m.id }, m.name || m.email))
+      ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500 group-hover/select:text-indigo-400 transition-colors" }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Status"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative group/select" }, /* @__PURE__ */ import_react3.default.createElement(
+        "select",
+        {
+          value: questFilterStatus,
+          onChange: (e) => setQuestFilterStatus(e.target.value),
+          className: "w-full bg-slate-900/80 px-3 py-2.5 text-sm rounded-md border border-white/10 focus:outline-none focus:border-indigo-500/50 text-slate-200 appearance-none cursor-pointer hover:bg-slate-800/50 transition-all"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Todos (Exclui Done)"),
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "Backlog" }, "Backlog"),
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "In Progress" }, "In Progress"),
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "Review" }, "Review"),
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "Done" }, "Done")
+      ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500 group-hover/select:text-indigo-400 transition-colors" }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Milestone"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative group/select" }, /* @__PURE__ */ import_react3.default.createElement(
+        "select",
+        {
+          value: questFilterMilestone,
+          onChange: (e) => setQuestFilterMilestone(e.target.value),
+          className: "w-full bg-slate-900/80 px-3 py-2.5 text-sm rounded-md border border-white/10 focus:outline-none focus:border-indigo-500/50 text-slate-200 appearance-none cursor-pointer hover:bg-slate-800/50 transition-all"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Todos os Milestones"),
+        milestones.map((ms) => /* @__PURE__ */ import_react3.default.createElement("option", { key: ms.id, value: ms.id }, ms.name, " ", ms.status === "inactive" ? "(Inativo)" : ""))
+      ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500 group-hover/select:text-indigo-400 transition-colors" }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex gap-3 pt-4" }, /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: () => {
+            setQuestFilterAssignee("");
+            setQuestFilterStatus("");
+            setQuestFilterMilestone("");
+          },
+          className: "flex-1 py-3 bg-white/[0.03] hover:bg-white/[0.08] text-slate-400 hover:text-slate-200 text-[10px] font-black uppercase tracking-widest rounded-xl transition-all border border-white/5 active:scale-95"
+        },
+        "Limpar"
+      ), /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: () => {
+            onActivateQuestLens({
+              assigneeId: questFilterAssignee,
+              status: questFilterStatus,
+              milestoneId: questFilterMilestone
+            });
+            setActiveSubMenu(null);
+          },
+          className: "flex-[2] py-3 bg-indigo-600 hover:bg-indigo-500 text-white text-[10px] font-black uppercase tracking-widest rounded-xl shadow-lg shadow-indigo-500/20 transition-all hover:scale-[1.02] active:scale-95"
+        },
+        "Aplicar Lente"
+      ))), activeSubMenu === "reshape" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-500" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Layout Type"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative group/select" }, /* @__PURE__ */ import_react3.default.createElement(
+        "select",
+        {
+          value: reshapeLayoutType,
+          onChange: (e) => setReshapeLayoutType(e.target.value),
+          className: "w-full bg-slate-900/80 px-3 py-2.5 text-sm rounded-md border border-white/10 focus:outline-none focus:border-indigo-500/50 text-slate-200 appearance-none cursor-pointer hover:bg-slate-800/50 transition-all"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "Star" }, "Star"),
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "Circle" }, "Circle"),
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "Column" }, "Column")
+      ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500 group-hover/select:text-indigo-400 transition-colors" }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))))), reshapeLayoutType === "Column" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Colunas"), /* @__PURE__ */ import_react3.default.createElement(
+        "input",
+        {
+          type: "number",
+          min: "1",
+          max: "12",
+          value: reshapeColumnCount,
+          onChange: (e) => setReshapeColumnCount(parseInt(e.target.value) || 4),
+          className: "w-full bg-slate-900/80 px-3 py-2.5 text-sm rounded-md border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white hover:bg-slate-800/50 transition-all"
+        }
+      )), reshapeLayoutType === "Star" && /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "N\xF3 Central"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative group/select" }, /* @__PURE__ */ import_react3.default.createElement(
+        "select",
+        {
+          value: reshapeCenterNodeId,
+          onChange: (e) => setReshapeCenterNodeId(e.target.value),
+          className: "w-full bg-slate-900/80 px-3 py-2.5 text-sm rounded-md border border-white/10 focus:outline-none focus:border-indigo-500/50 text-slate-200 appearance-none cursor-pointer hover:bg-slate-800/50 transition-all"
+        },
+        /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Selecione um n\xF3..."),
+        (Array.isArray(dbNodes) ? dbNodes.filter((n) => isNodeInView(n.id)) : []).map((n) => /* @__PURE__ */ import_react3.default.createElement("option", { key: n.id, value: n.id }, n.name))
+      ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500 group-hover/select:text-indigo-400 transition-colors" }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex gap-3 pt-4" }, /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: () => {
+            setReshapeLayoutType("Star");
+            setReshapeColumnCount(4);
+            setReshapeCenterNodeId("");
+          },
+          className: "flex-1 py-3 bg-white/[0.03] hover:bg-white/[0.08] text-slate-400 hover:text-slate-200 text-[10px] font-black uppercase tracking-widest rounded-xl transition-all border border-white/5 active:scale-95"
+        },
+        "Resetar"
+      ), /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: () => {
+            onActivateReshapeLens({
+              type: reshapeLayoutType,
+              columns: reshapeColumnCount,
+              centerNodeId: reshapeCenterNodeId
+            });
+            setActiveSubMenu(null);
+          },
+          disabled: reshapeLayoutType === "Star" && !reshapeCenterNodeId,
+          className: "flex-[2] py-3 bg-indigo-600 hover:bg-indigo-500 text-white text-[10px] font-black uppercase tracking-widest rounded-xl shadow-lg shadow-indigo-500/20 transition-all hover:scale-[1.02] active:scale-95 disabled:opacity-30 disabled:grayscale disabled:cursor-not-allowed"
+        },
+        "Aplicar Lente"
+      )))),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "p-5 border-t border-white/5 bg-white/[0.02] flex items-center justify-center gap-2" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "h-1 w-1 rounded-full bg-slate-700" }), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[9px] text-slate-600 uppercase font-bold tracking-[0.2em]" }, "X-View Environment"), /* @__PURE__ */ import_react3.default.createElement("span", { className: "h-1 w-1 rounded-full bg-slate-700" }))
+    );
+  };
   return /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
       ref: containerRef,
-      className: "ui-overlay fixed left-0 top-0 h-[100dvh] w-[min(92vw,320px)] z-40 overflow-hidden",
+      className: "ui-overlay fixed left-0 top-0 h-[100dvh] flex items-stretch z-40 pointer-events-none",
       onPointerDown: swallow,
       onPointerMove: swallow,
       onPointerUp: swallow,
@@ -4142,281 +4288,61 @@ function XViewSidebar({
       onContextMenu: swallow,
       onDoubleClick: swallow
     },
-    /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-full flex flex-col overflow-hidden bg-slate-950/80 backdrop-blur-xl border-r border-white/10 shadow-[0_0_40px_rgba(0,0,0,0.45)]" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative px-4 py-3 border-b border-white/10 flex items-center gap-2" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "inline-flex h-2 w-2 rounded-full bg-indigo-400/80 shadow-[0_0_10px_2px_rgba(99,102,241,0.55)]" }), /* @__PURE__ */ import_react3.default.createElement("h3", { className: "text-sm font-medium text-slate-100" }, "Ferramentas"), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        className: "ml-auto p-2 rounded-md text-slate-400 hover:text-white hover:bg-white/10 transition-colors",
-        onClick: () => onToggle(false),
-        title: "Fechar"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement(
-        "path",
-        {
-          fillRule: "evenodd",
-          d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
-          clipRule: "evenodd"
-        }
-      ))
-    )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-6" }, /* @__PURE__ */ import_react3.default.createElement("section", null, /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-2" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Pesquisar Node")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react3.default.createElement(
+    /* @__PURE__ */ import_react3.default.createElement(
       "div",
       {
-        className: "w-full bg-slate-800/70 p-1.5 flex flex-wrap items-center gap-1.5 rounded-lg border border-white/10 focus-within:ring-2 focus-within:ring-indigo-400/60 transition-all cursor-text min-h-[42px]",
-        onClick: () => {
-          var _a;
-          return (_a = inputRef.current) == null ? void 0 : _a.focus();
-        }
+        className: `h-full w-[300px] flex-shrink-0 flex flex-col overflow-hidden bg-slate-950/80 backdrop-blur-2xl border-r border-white/10 shadow-[20px_0_40px_rgba(0,0,0,0.4)] pointer-events-auto transition-transform duration-500 ease-in-out absolute md:relative z-20 md:z-auto
+                ${activeSubMenu ? "-translate-x-full md:translate-x-0" : "translate-x-0"}`
       },
-      activeFilters.map((filter, idx) => /* @__PURE__ */ import_react3.default.createElement("span", { key: idx, className: "flex items-center gap-1.5 bg-indigo-500/20 text-indigo-200 border border-indigo-500/30 px-2 py-0.5 rounded text-xs font-medium max-w-full" }, filter.type === "Color" && /* @__PURE__ */ import_react3.default.createElement(
-        "span",
-        {
-          className: "inline-block w-2.5 h-2.5 rounded-full border border-white/20",
-          style: { backgroundColor: filter.value }
-        }
-      ), /* @__PURE__ */ import_react3.default.createElement("span", { className: "truncate max-w-[120px]" }, filter.type, ": ", filter.value), /* @__PURE__ */ import_react3.default.createElement(
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative px-5 py-5 border-b border-white/5 flex items-center gap-3 bg-white/[0.02]" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "inline-flex h-2.5 w-2.5 rounded-full bg-indigo-500 shadow-[0_0_12px_rgba(99,102,241,0.8)]" }), /* @__PURE__ */ import_react3.default.createElement("span", { className: "absolute inset-0 h-2.5 w-2.5 rounded-full bg-indigo-400 animate-ping opacity-40" })), /* @__PURE__ */ import_react3.default.createElement("h3", { className: "text-xs font-black text-slate-200 uppercase tracking-[0.2em]" }, "Ferramentas"), /* @__PURE__ */ import_react3.default.createElement(
         "button",
         {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleRemoveFilter(idx);
-          },
-          className: "hover:text-white transition-colors"
+          className: "ml-auto p-2 rounded-full text-slate-500 hover:text-white hover:bg-white/10 transition-all duration-200",
+          onClick: () => onToggle(false),
+          title: "Fechar Painel"
         },
-        /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react3.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
-      ))),
-      /* @__PURE__ */ import_react3.default.createElement(
-        "input",
-        {
-          ref: inputRef,
-          type: "text",
-          value: query,
-          onChange: (e) => setQuery(e.target.value),
-          onFocus: () => setShowList(true),
-          onBlur: () => setTimeout(() => setShowList(false), 120),
-          onKeyDown: handleKeyDown,
-          placeholder: activeFilters.length === 0 ? "Digite parte do nome..." : "",
-          className: "bg-transparent border-none outline-none flex-1 min-w-[80px] text-sm text-slate-100 placeholder-slate-500",
-          autoComplete: "off"
-        }
-      )
-    ), showList && /* @__PURE__ */ import_react3.default.createElement("ul", { className: "custom-scrollbar absolute mt-1 z-10 w-full max-h-[min(448px,50dvh)] overflow-y-auto rounded-lg bg-slate-900/95 border border-white/10 shadow-xl" }, filteredAndSorted.length > 0 ? filteredAndSorted.map((n) => {
-      const inView = isNodeInView(n.id);
-      const active = selectedNodeId === n.id;
-      const typeLabel = Array.isArray(n.type) ? n.type.join(", ") : n.type;
-      return /* @__PURE__ */ import_react3.default.createElement(
-        "li",
+        /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react3.default.createElement(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+            clipRule: "evenodd"
+          }
+        ))
+      ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-indigo-500/20 to-transparent" })),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex-1 overflow-y-auto px-5 py-6 space-y-8 custom-scrollbar relative" }, /* @__PURE__ */ import_react3.default.createElement("section", null, /* @__PURE__ */ import_react3.default.createElement("div", { className: "mb-2" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Pesquisar Node")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "w-full bg-slate-800/70 p-1.5 flex flex-wrap items-center gap-1.5 rounded-lg border border-white/10 focus-within:ring-2 focus-within:ring-indigo-400/60 transition-all cursor-text min-h-[42px]", onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      } }, activeFilters.map((filter, idx) => /* @__PURE__ */ import_react3.default.createElement("span", { key: idx, className: "flex items-center gap-1.5 bg-indigo-500/20 text-indigo-200 border border-indigo-500/30 px-2 py-0.5 rounded text-xs font-medium max-w-full" }, filter.type === "Color" && /* @__PURE__ */ import_react3.default.createElement("span", { className: "inline-block w-2.5 h-2.5 rounded-full border border-white/20", style: { backgroundColor: filter.value } }), /* @__PURE__ */ import_react3.default.createElement("span", { className: "truncate max-w-[120px]" }, filter.type, ": ", filter.value), /* @__PURE__ */ import_react3.default.createElement("button", { type: "button", onClick: (e) => {
+        e.stopPropagation();
+        handleRemoveFilter(idx);
+      }, className: "hover:text-white transition-colors" }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react3.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))), /* @__PURE__ */ import_react3.default.createElement("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onFocus: () => setShowList(true), onBlur: () => setTimeout(() => setShowList(false), 120), onKeyDown: handleKeyDown, placeholder: activeFilters.length === 0 ? "Digite parte do nome..." : "", className: "bg-transparent border-none outline-none flex-1 min-w-[80px] text-sm text-slate-100 placeholder-slate-500", autoComplete: "off" })), showList && /* @__PURE__ */ import_react3.default.createElement("ul", { className: "custom-scrollbar absolute mt-1 z-10 w-full max-h-[min(448px,50dvh)] overflow-y-auto rounded-lg bg-slate-900/95 border border-white/10 shadow-xl" }, filteredAndSorted.length > 0 ? filteredAndSorted.map((n) => /* @__PURE__ */ import_react3.default.createElement("li", { key: n.id, onMouseDown: () => handlePick(n), className: `px-3 py-2 text-sm flex items-center gap-2 cursor-pointer ${selectedNodeId === n.id ? "bg-indigo-600/60 text-white" : "text-slate-200 hover:bg-indigo-500/30"}`, title: n.name }, /* @__PURE__ */ import_react3.default.createElement("span", { className: `inline-block h-2 w-2 rounded-full flex-shrink-0 ${isNodeInView(n.id) ? "bg-emerald-400" : "bg-slate-500"}` }), /* @__PURE__ */ import_react3.default.createElement("span", { className: "truncate flex-1" }, n.name))) : /* @__PURE__ */ import_react3.default.createElement("li", { className: "px-3 py-2 text-sm text-slate-400" }, "Nenhum resultado"))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-3 flex items-center gap-2" }, /* @__PURE__ */ import_react3.default.createElement("button", { onClick: handleConfirm, disabled: !selectedNodeId, className: `flex-1 ${selectedNodeId ? buttonBaseClass : buttonDisabledClass}` }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "5 3 19 12 5 21 5 3" })), "Renderizar"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative", ref: filterMenuRef }, /* @__PURE__ */ import_react3.default.createElement("button", { onClick: () => setIsFilterMenuOpen(!isFilterMenuOpen), className: `px-3 py-2 rounded-md text-sm font-medium border transition-colors flex items-center gap-2 ${isFilterMenuOpen || activeFilters.length > 0 ? "bg-indigo-500/30 text-indigo-200 border-indigo-500/40" : "bg-indigo-500/10 text-indigo-200 border-indigo-500/30 hover:bg-indigo-500/20"}` }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })), "Filters"), isFilterMenuOpen && /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute right-0 top-full mt-2 w-56 p-3 rounded-lg bg-slate-900 border border-white/10 shadow-xl z-50 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Filtro"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex bg-slate-800/50 p-1 rounded-md" }, ["Type", "Color", "Dataset"].map((opt) => /* @__PURE__ */ import_react3.default.createElement("button", { key: opt, onClick: () => {
+        setFilterCategory(opt);
+        setFilterValue("");
+      }, className: `flex-1 text-xs py-1 rounded transition-colors ${filterCategory === opt ? "bg-indigo-600 text-white" : "text-slate-400 hover:text-slate-200"}` }, opt)))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), /* @__PURE__ */ import_react3.default.createElement("input", { type: "text", value: filterValue, onChange: (e) => setFilterValue(e.target.value), className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white" })), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: handleAddFilter, disabled: !filterValue.trim(), className: "w-full py-1.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-xs font-medium rounded transition-colors" }, "Aplicar Filtro"))))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ import_react3.default.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Lentes"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react3.default.createElement(
+        "button",
         {
-          key: n.id,
-          onMouseDown: () => handlePick(n),
-          className: `px-3 py-2 text-sm flex items-center gap-2 cursor-pointer ${active ? "bg-indigo-600/60 text-white" : "text-slate-200 hover:bg-indigo-500/30"}`,
-          title: n.name
-        },
-        /* @__PURE__ */ import_react3.default.createElement("span", { className: `inline-block h-2 w-2 rounded-full flex-shrink-0 ${inView ? "bg-emerald-400" : "bg-slate-500"}` }),
-        /* @__PURE__ */ import_react3.default.createElement("span", { className: "truncate flex-1" }, n.name),
-        typeLabel && /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-[10px] px-1.5 py-0.5 rounded bg-white/10 border border-white/10 truncate max-w-[100px]" }, typeLabel)
-      );
-    }) : /* @__PURE__ */ import_react3.default.createElement("li", { className: "px-3 py-2 text-sm text-slate-400" }, "Nenhum resultado"))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-3 flex items-center gap-2" }, /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: handleConfirm,
-        disabled: !selectedNodeId,
-        className: `flex-1 ${selectedNodeId ? buttonBaseClass : buttonDisabledClass}`
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "5 3 19 12 5 21 5 3" })),
-      "Renderizar"
-    ), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative", ref: filterMenuRef }, /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: () => setIsFilterMenuOpen(!isFilterMenuOpen),
-        className: `px-3 py-2 rounded-md text-sm font-medium border transition-colors flex items-center gap-2 ${isFilterMenuOpen || activeFilters.length > 0 ? "bg-indigo-500/30 text-indigo-200 border-indigo-500/40" : "bg-indigo-500/10 text-indigo-200 border-indigo-500/30 hover:bg-indigo-500/20"}`,
-        title: "Adicionar filtros"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })),
-      "Filters"
-    ), isFilterMenuOpen && /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute right-0 top-full mt-2 w-56 p-3 rounded-lg bg-slate-900 border border-white/10 shadow-xl z-50 flex flex-col gap-3 animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Filtro"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex bg-slate-800/50 p-1 rounded-md" }, ["Type", "Color", "Dataset"].map((opt) => /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        key: opt,
-        onClick: () => {
-          setFilterCategory(opt);
-          setFilterValue("");
-        },
-        className: `flex-1 text-xs py-1 rounded transition-colors ${filterCategory === opt ? "bg-indigo-600 text-white shadow-sm" : "text-slate-400 hover:text-slate-200"}`
-      },
-      opt
-    )))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), filterCategory === "Type" || filterCategory === "Dataset" ? /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative", ref: typeDropdownRef }, /* @__PURE__ */ import_react3.default.createElement(
-      "input",
-      {
-        type: "text",
-        value: filterValue,
-        onChange: (e) => {
-          setFilterValue(e.target.value);
-          if (!isTypeDropdownOpen) setIsTypeDropdownOpen(true);
-          setHighlightedTypeIndex(-1);
-        },
-        onFocus: () => setIsTypeDropdownOpen(true),
-        onKeyDown: handleTypeKeyDown,
-        placeholder: filterCategory === "Type" ? "Ex: Concept" : "Ex: Dataset 1",
-        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white",
-        autoFocus: true
-      }
-    ), isTypeDropdownOpen && filteredAutocompleteOptions.length > 0 && /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute z-[60] left-0 right-0 mt-1 max-h-48 overflow-y-auto bg-slate-900/95 backdrop-blur-xl border border-white/10 rounded-md shadow-2xl custom-scrollbar" }, filteredAutocompleteOptions.map((t, idx) => /* @__PURE__ */ import_react3.default.createElement(
-      "div",
-      {
-        key: t,
-        className: `px-3 py-2 text-xs cursor-pointer transition-colors ${idx === highlightedTypeIndex ? "bg-indigo-600 text-white" : "text-slate-300 hover:bg-white/10"}`,
-        onMouseDown: (e) => {
-          e.preventDefault();
-          setFilterValue(t);
-          setIsTypeDropdownOpen(false);
-          setHighlightedTypeIndex(-1);
-        }
-      },
-      t
-    )))) : /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ import_react3.default.createElement(
-      "div",
-      {
-        className: "absolute left-2 w-3 h-3 rounded-full border border-white/20 shadow-sm",
-        style: { backgroundColor: /^#[0-9A-F]{6}$/i.test(filterValue) ? filterValue : "transparent" }
-      }
-    ), /* @__PURE__ */ import_react3.default.createElement(
-      "input",
-      {
-        type: "text",
-        value: filterValue,
-        onChange: (e) => setFilterValue(e.target.value),
-        placeholder: "#RRGGBB",
-        className: "w-full bg-slate-800 pl-7 pr-2 py-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white font-mono",
-        autoFocus: true
-      }
-    ))), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: handleAddFilter,
-        disabled: !filterValue.trim(),
-        className: "w-full py-1.5 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed text-white text-xs font-medium rounded transition-colors"
-      },
-      "Aplicar Filtro"
-    ))), selectedNodeId && isNodeInView(selectedNodeId) && /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-xs text-emerald-400 absolute bottom-[-18px] left-0" }, "J\xE1 vis\xEDvel")), viewType === "view" && ability.can("import", "File") && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: onOpenImportModal,
-        className: `${buttonBaseClass} mt-2`
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "17 8 12 3 7 8" }), /* @__PURE__ */ import_react3.default.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })),
-      "Importar arquivo"
-    ), /* @__PURE__ */ import_react3.default.createElement("p", { className: "mt-1.5 text-xs text-slate-400 text-center px-1 leading-tight" }, "Importar datasets ou ancestralidades das views."), /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-9 mt-1 flex items-center justify-center" }, importSuccessMessage && /* @__PURE__ */ import_react3.default.createElement("p", { className: "w-full text-center text-xs font-medium text-indigo-300 bg-indigo-500/10 border border-indigo-500/20 rounded-md py-1.5 px-2" }, importSuccessMessage)))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ import_react3.default.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Lentes"), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative", ref: questLensRef }, /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: () => setIsQuestLensMenuOpen(!isQuestLensMenuOpen),
-        className: `${buttonBaseClass} ${isQuestLensMenuOpen || questFilterAssignee || questFilterStatus || questFilterMilestone ? "bg-indigo-500/30 border-indigo-400" : ""}`,
-        title: "Abrir filtros da Lente de Quests"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }), /* @__PURE__ */ import_react3.default.createElement("path", { d: "M9 12l2 2 4-4" })),
-      "Quest Lens",
-      (questFilterAssignee || questFilterStatus || questFilterMilestone) && /* @__PURE__ */ import_react3.default.createElement("span", { className: "ml-1 px-1.5 py-0.5 rounded-full bg-indigo-500 text-[9px] font-bold" }, "!")
-    ), isQuestLensMenuOpen && /* @__PURE__ */ import_react3.default.createElement("div", { className: "absolute left-0 bottom-full mb-2 w-full p-4 rounded-xl bg-slate-900 border border-white/10 shadow-2xl z-50 flex flex-col gap-4 animate-in fade-in slide-in-from-bottom-2 duration-200" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Respons\xE1vel"), /* @__PURE__ */ import_react3.default.createElement(
-      "select",
-      {
-        value: questFilterAssignee,
-        onChange: (e) => setQuestFilterAssignee(e.target.value),
-        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white appearance-none cursor-pointer"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Todos os Respons\xE1veis"),
-      viewMembers.map((m) => /* @__PURE__ */ import_react3.default.createElement("option", { key: m.id, value: m.id }, m.name || m.email))
-    )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Status"), /* @__PURE__ */ import_react3.default.createElement(
-      "select",
-      {
-        value: questFilterStatus,
-        onChange: (e) => setQuestFilterStatus(e.target.value),
-        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white appearance-none cursor-pointer"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Todos (Exclui Done)"),
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Backlog" }, "Backlog"),
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "In Progress" }, "In Progress"),
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Review" }, "Review"),
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Done" }, "Done")
-    )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Milestone"), /* @__PURE__ */ import_react3.default.createElement(
-      "select",
-      {
-        value: questFilterMilestone,
-        onChange: (e) => setQuestFilterMilestone(e.target.value),
-        className: "w-full bg-slate-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white appearance-none cursor-pointer"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "" }, "Todos os Milestones"),
-      milestones.map((ms) => /* @__PURE__ */ import_react3.default.createElement("option", { key: ms.id, value: ms.id }, ms.name, " ", ms.status === "inactive" ? "(Inativo)" : ""))
-    )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex gap-2 pt-1" }, /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: () => {
-          setQuestFilterAssignee("");
-          setQuestFilterStatus("");
-          setQuestFilterMilestone("");
+          onClick: () => setActiveSubMenu(activeSubMenu === "quest" ? null : "quest"),
+          className: `${buttonBaseClass} lens-button ${activeSubMenu === "quest" || questFilterAssignee || questFilterStatus || questFilterMilestone ? "bg-indigo-500/30 border-indigo-400" : ""}`
         },
-        className: "flex-1 py-2 bg-white/5 hover:bg-white/10 text-slate-300 text-[11px] font-medium rounded-lg transition-colors border border-white/5"
-      },
-      "Limpar"
-    ), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: () => {
-          onActivateQuestLens({
-            assigneeId: questFilterAssignee,
-            status: questFilterStatus,
-            milestoneId: questFilterMilestone
-          });
-          setIsQuestLensMenuOpen(false);
-          onToggle(false);
+        /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }), /* @__PURE__ */ import_react3.default.createElement("path", { d: "M9 12l2 2 4-4" })),
+        "Quest Lens"
+      )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react3.default.createElement(
+        "button",
+        {
+          onClick: () => setActiveSubMenu(activeSubMenu === "reshape" ? null : "reshape"),
+          className: `${buttonBaseClass} lens-button ${activeSubMenu === "reshape" ? "bg-indigo-500/30 border-indigo-400" : ""}`
         },
-        className: "flex-[2] py-2 bg-indigo-600 hover:bg-indigo-500 text-white text-[11px] font-bold rounded-lg shadow-lg shadow-indigo-500/20 transition-all hover:scale-[1.02] active:scale-95"
-      },
-      "Aplicar Lente"
-    )))), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: onActivateTimeline,
-        className: buttonBaseClass,
-        title: "Ativar a visualiza\xE7\xE3o de Timeline"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "12 6 12 12 16 14" })),
-      "Timeline"
-    ), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: onOpenBoards,
-        className: buttonBaseClass,
-        title: "Abrir painel de Boards"
-      },
-      /* @__PURE__ */ import_react3.default.createElement(import_fi2.FiLayers, { size: 16 }),
-      "Boards"
-    )), /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ import_react3.default.createElement("section", { className: "space-y-3" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Milestones"), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: onOpenMilestoneManager,
-        className: buttonBaseClass,
-        title: "Gerenciar os milestones deste cen\xE1rio"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "12", cy: "12", r: "6" }), /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "12", cy: "12", r: "2" })),
-      "Gerenciar Milestones"
-    ))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "px-4 py-3 border-t border-white/10 bg-slate-900/30" }, /* @__PURE__ */ import_react3.default.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Navega\xE7\xE3o")), ability.can("update", "Scene") && /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: handleSaveClick,
-        disabled: isSaving,
-        className: isSaving ? buttonDisabledClass : buttonBaseClass,
-        title: "Salvar a visualiza\xE7\xE3o atual como o cen\xE1rio inicial"
-      },
-      isSaving ? /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("svg", { className: "animate-spin h-4 w-4 text-slate-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react3.default.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ import_react3.default.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })), "Salvando...") : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "17 21 17 13 7 13 7 21" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "7 3 7 8 15 8" })), "Atualizar cen\xE1rio inicial")
-    ), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: onNavigateBack,
-        className: buttonBaseClass,
-        title: "Voltar \xE0 p\xE1gina de cen\xE1rios"
-      },
-      /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "12 19 5 12 12 5" })),
-      "Voltar \xE0 p\xE1gina de cen\xE1rios"
-    ))), contextLabel && /* @__PURE__ */ import_react3.default.createElement("div", { className: "px-4 py-3 border-t border-white/10 bg-slate-900/50" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center gap-2", title: contextLabel }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-sm font-medium text-slate-200 truncate" }, contextLabel))), /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-[2px] bg-gradient-to-r from-indigo-400/0 via-indigo-400/70 to-indigo-400/0" }))
+        /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "2 17 12 22 22 17" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "2 12 12 17 22 12" })),
+        "Reshape Lens"
+      )), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onActivateTimeline, className: buttonBaseClass }, /* @__PURE__ */ import_react3.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react3.default.createElement("polyline", { points: "12 6 12 12 16 14" })), "Timeline"), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onOpenBoards, className: buttonBaseClass }, /* @__PURE__ */ import_react3.default.createElement(import_fi2.FiLayers, { size: 16 }), "Boards")), /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ import_react3.default.createElement("section", { className: "space-y-3" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Milestones"), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onOpenMilestoneManager, className: buttonBaseClass }, "Gerenciar Milestones"))),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "px-4 py-3 border-t border-white/10 bg-slate-900/30" }, /* @__PURE__ */ import_react3.default.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Navega\xE7\xE3o"), ability.can("update", "Scene") && /* @__PURE__ */ import_react3.default.createElement("button", { onClick: handleSaveClick, disabled: isSaving, className: isSaving ? buttonDisabledClass : buttonBaseClass }, isSaving ? "Salvando..." : "Atualizar cen\xE1rio inicial"), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onNavigateBack, className: buttonBaseClass }, "Voltar \xE0 p\xE1gina de cen\xE1rios"))),
+      contextLabel && /* @__PURE__ */ import_react3.default.createElement("div", { className: "px-4 py-3 border-t border-white/10 bg-slate-900/50 truncate text-sm font-medium text-slate-200" }, contextLabel),
+      /* @__PURE__ */ import_react3.default.createElement("div", { className: "h-[2px] bg-gradient-to-r from-indigo-400/0 via-indigo-400/70 to-indigo-400/0" })
+    ),
+    /* @__PURE__ */ import_react3.default.createElement("div", { className: `h-full pointer-events-auto transition-all duration-500 ease-out absolute md:relative left-0 top-0 z-30 md:z-10 flex-shrink-0 overflow-hidden
+                ${activeSubMenu ? "translate-x-0 md:translate-x-0 w-[100vw] md:w-[280px] opacity-100" : "-translate-x-full md:translate-x-0 w-[100vw] md:w-0 opacity-0 md:opacity-100"}
+            ` }, renderAnnexedPanel())
   );
 }
 
@@ -15132,6 +15058,127 @@ function XViewScene({
     },
     []
   );
+  const handleActivateReshapeLens = (0, import_react31.useCallback)(({ type, columns, centerNodeId }) => {
+    const { nodeObjects, tweenGroup, camera, controls } = stateRef.current;
+    if (!nodeObjects || !tweenGroup || !camera || !controls) return;
+    const activeNodeIds = Object.keys(nodeObjects);
+    if (activeNodeIds.length === 0) return;
+    let sumX = 0;
+    let sumY = 0;
+    let nodeCount = 0;
+    activeNodeIds.forEach((id) => {
+      const mesh = nodeObjects[id];
+      if (mesh && mesh.material) {
+        const opacityTween = new import_tween2.Tween(mesh.material).to({ opacity: 1 }, 1200).easing(import_tween2.Easing.Cubic.Out);
+        tweenGroup.add(opacityTween);
+        opacityTween.start();
+      }
+      if (mesh && mesh.userData && mesh.userData.labelObject) {
+        mesh.userData.labelObject.visible = true;
+      }
+    });
+    if (type === "Column") {
+      const colSpacing = 80;
+      const rowSpacing = 80;
+      const numCols = columns || 4;
+      activeNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const col = index % numCols;
+        const row = Math.floor(index / numCols);
+        const targetX = (col - (numCols - 1) / 2) * colSpacing;
+        const targetY = -(row * rowSpacing) + 50;
+        const posTween = new import_tween2.Tween(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).add(mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+          const lblTween = new import_tween2.Tween(mesh.userData.labelObject.position).to(labelTarget, 1500).easing(import_tween2.Easing.Cubic.InOut);
+          tweenGroup.add(lblTween);
+          lblTween.start();
+        }
+        sumX += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    } else if (type === "Circle") {
+      const total = activeNodeIds.length;
+      const radius = Math.max(80, total * 8);
+      activeNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const angle = index / total * Math.PI * 2;
+        const targetX = Math.cos(angle) * radius;
+        const targetY = Math.sin(angle) * radius;
+        const posTween = new import_tween2.Tween(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).add(mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+          const lblTween = new import_tween2.Tween(mesh.userData.labelObject.position).to(labelTarget, 1500).easing(import_tween2.Easing.Cubic.InOut);
+          tweenGroup.add(lblTween);
+          lblTween.start();
+        }
+        sumX += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    } else if (type === "Star") {
+      const centerMesh = centerNodeId ? nodeObjects[String(centerNodeId)] : null;
+      const orbitingNodeIds = activeNodeIds.filter((id) => id !== String(centerNodeId));
+      const totalOrbiting = orbitingNodeIds.length;
+      const radius = Math.max(80, totalOrbiting * 10);
+      if (centerMesh) {
+        const posTween = new import_tween2.Tween(centerMesh.position).to({ x: 0, y: 0, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (centerMesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(0, 0, 0).add(centerMesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+          const lblTween = new import_tween2.Tween(centerMesh.userData.labelObject.position).to(labelTarget, 1500).easing(import_tween2.Easing.Cubic.InOut);
+          tweenGroup.add(lblTween);
+          lblTween.start();
+        }
+        sumX += 0;
+        sumY += 0;
+        nodeCount++;
+      }
+      orbitingNodeIds.forEach((id, index) => {
+        const mesh = nodeObjects[id];
+        const angle = totalOrbiting > 0 ? index / totalOrbiting * Math.PI * 2 : 0;
+        const targetX = Math.cos(angle) * radius;
+        const targetY = Math.sin(angle) * radius;
+        const posTween = new import_tween2.Tween(mesh.position).to({ x: targetX, y: targetY, z: 0 }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+        tweenGroup.add(posTween);
+        posTween.start();
+        if (mesh.userData.labelObject) {
+          const labelTarget = new THREE3.Vector3(targetX, targetY, 0).add(mesh.userData.labelOffset || new THREE3.Vector3(0, 3.8, 0));
+          const lblTween = new import_tween2.Tween(mesh.userData.labelObject.position).to(labelTarget, 1500).easing(import_tween2.Easing.Cubic.InOut);
+          tweenGroup.add(lblTween);
+          lblTween.start();
+        }
+        sumX += targetX;
+        sumY += targetY;
+        nodeCount++;
+      });
+    }
+    if (nodeCount > 0) {
+      const centerX = sumX / nodeCount;
+      const centerY = sumY / nodeCount;
+      const targetFocus = new THREE3.Vector3(centerX, centerY, 0);
+      const targetTween = new import_tween2.Tween(controls.target).to({ x: targetFocus.x, y: targetFocus.y, z: targetFocus.z }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+      tweenGroup.add(targetTween);
+      targetTween.start();
+      let zoomZ = 140;
+      if (type === "Column") {
+        const numRows = Math.ceil(nodeCount / (columns || 4));
+        zoomZ = Math.max(140, numRows * 50);
+      } else if (type === "Circle" || type === "Star") {
+        const radius = Math.max(80, nodeCount * 8);
+        zoomZ = radius * 2.5;
+      }
+      const camTween = new import_tween2.Tween(camera.position).to({ x: targetFocus.x, y: targetFocus.y, z: zoomZ }, 1500).easing(import_tween2.Easing.Cubic.InOut);
+      tweenGroup.add(camTween);
+      camTween.start();
+    }
+  }, []);
   const handleActivateQuestLens = (0, import_react31.useCallback)(({ assigneeId, status: status2, milestoneId }) => {
     var _a2;
     const { nodeObjects, tweenGroup, graphGroup } = stateRef.current;
@@ -18703,6 +18750,7 @@ function XViewScene({
         importSuccessMessage,
         onActivateTimeline: handleActivateTimeline,
         onActivateQuestLens: handleActivateQuestLens,
+        onActivateReshapeLens: handleActivateReshapeLens,
         onOpenBoards: handleOpenBoards,
         viewType: viewParams == null ? void 0 : viewParams.type,
         viewName: viewParams == null ? void 0 : viewParams.name,