npm - @lv-x-software-house/x_view - Versions diffs - 1.2.6-dev.51 → 1.2.6-dev.52 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -3908,11 +3908,11 @@ 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 [isReshapeLensMenuOpen, setIsReshapeLensMenuOpen] = (0, import_react3.useState)(false);
+  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)("");
@@ -3922,8 +3922,7 @@ function XViewSidebar({
   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 reshapeLensRef = (0, import_react3.useRef)(null);
+  const annexedPanelRef = (0, import_react3.useRef)(null);
   const ability = (0, import_react3.useMemo)(() => {
     return defineAbilityFor(userRole);
   }, [userRole]);
@@ -4029,19 +4028,17 @@ function XViewSidebar({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isFilterMenuOpen, isTypeDropdownOpen]);
   (0, import_react3.useEffect)(() => {
-    const handleClickOutsideQuestAndReshape = (event) => {
-      if (questLensRef.current && !questLensRef.current.contains(event.target)) {
-        setIsQuestLensMenuOpen(false);
-      }
-      if (reshapeLensRef.current && !reshapeLensRef.current.contains(event.target)) {
-        setIsReshapeLensMenuOpen(false);
+    const handleClickOutsideAnnexed = (event) => {
+      if (annexedPanelRef.current && !annexedPanelRef.current.contains(event.target)) {
+        if (event.target.closest(".lens-button")) return;
+        setActiveSubMenu(null);
       }
     };
-    if (isQuestLensMenuOpen || isReshapeLensMenuOpen) {
-      document.addEventListener("mousedown", handleClickOutsideQuestAndReshape);
+    if (activeSubMenu) {
+      document.addEventListener("mousedown", handleClickOutsideAnnexed);
     }
-    return () => document.removeEventListener("mousedown", handleClickOutsideQuestAndReshape);
-  }, [isQuestLensMenuOpen, isReshapeLensMenuOpen]);
+    return () => document.removeEventListener("mousedown", handleClickOutsideAnnexed);
+  }, [activeSubMenu]);
   (0, import_react3.useEffect)(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
@@ -4139,359 +4136,213 @@ 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";
-  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",
-      onPointerDown: swallow,
-      onPointerMove: swallow,
-      onPointerUp: swallow,
-      onClick: swallow,
-      onWheel: swallow,
-      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(
+  const renderAnnexedPanel = () => {
+    if (!activeSubMenu) return null;
+    return /* @__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();
-        }
+        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"
       },
-      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",
+      /* @__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",
         {
-          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(
+          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",
         {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleRemoveFilter(idx);
+          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: "hover:text-white transition-colors"
+          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"
         },
-        /* @__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(
+        "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",
         {
-          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"
+          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"
         }
-      )
-    ), 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",
+      )), 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",
         {
-          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
+          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("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("");
+        /* @__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"
         },
-        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);
+        "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"
         },
-        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(
+        "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] flex items-stretch z-40 pointer-events-none",
+      onPointerDown: swallow,
+      onPointerMove: swallow,
+      onPointerUp: swallow,
+      onClick: swallow,
+      onWheel: swallow,
+      onContextMenu: swallow,
+      onDoubleClick: swallow
+    },
+    /* @__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"
+        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"}`
       },
-      /* @__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("");
-        },
-        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("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",
+        {
+          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"
         },
-        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("div", { className: "relative", ref: reshapeLensRef }, /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: () => setIsReshapeLensMenuOpen(!isReshapeLensMenuOpen),
-        className: `${buttonBaseClass} ${isReshapeLensMenuOpen ? "bg-indigo-500/30 border-indigo-400" : ""}`,
-        title: "Abrir op\xE7\xF5es de Reshape"
-      },
-      /* @__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"
-    ), isReshapeLensMenuOpen && /* @__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" }, "Layout Type"), /* @__PURE__ */ import_react3.default.createElement(
-      "select",
-      {
-        value: reshapeLayoutType,
-        onChange: (e) => setReshapeLayoutType(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: "Star" }, "Star"),
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Circle" }, "Circle"),
-      /* @__PURE__ */ import_react3.default.createElement("option", { value: "Column" }, "Column")
-    )), reshapeLayoutType === "Column" && /* @__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" }, "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-800 p-2 text-xs rounded border border-white/10 focus:outline-none focus:border-indigo-500/50 text-white"
-      }
-    )), reshapeLayoutType === "Star" && /* @__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" }, "N\xF3 Central"), /* @__PURE__ */ import_react3.default.createElement(
-      "select",
-      {
-        value: reshapeCenterNodeId,
-        onChange: (e) => setReshapeCenterNodeId(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: "" }, "Selecione..."),
-      (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: "flex gap-2 pt-1" }, /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: () => {
-          setReshapeLayoutType("Star");
-          setReshapeColumnCount(4);
-          setReshapeCenterNodeId("");
+        /* @__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",
+        {
+          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"
-      },
-      "Resetar"
-    ), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: () => {
-          onActivateReshapeLens({
-            type: reshapeLayoutType,
-            columns: reshapeColumnCount,
-            centerNodeId: reshapeCenterNodeId
-          });
-          setIsReshapeLensMenuOpen(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" : ""}`
         },
-        disabled: reshapeLayoutType === "Star" && !reshapeCenterNodeId,
-        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 disabled:opacity-50 disabled:cursor-not-allowed"
-      },
-      "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())
   );
 }