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

package/dist/index.mjs

@@ -3830,6 +3830,49 @@ function ContextMenu({
 // src/components/XViewSidebar.jsx
 import React2, { useMemo as useMemo2, useState as useState3, useEffect as useEffect2, useRef as useRef2 } from "react";
 import { FiLayers } from "react-icons/fi";
+var CustomSelect = ({ value, onChange, options, placeholder }) => {
+  const [isOpen, setIsOpen] = useState3(false);
+  const selectRef = useRef2(null);
+  useEffect2(() => {
+    const handleClickOutside = (e) => {
+      if (selectRef.current && !selectRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  const selectedOption = options.find((o) => String(o.value) === String(value));
+  return /* @__PURE__ */ React2.createElement("div", { ref: selectRef, className: "relative w-full text-slate-200 text-sm" }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setIsOpen(!isOpen),
+      className: `w-full bg-slate-900/80 px-3 py-2.5 rounded-md border text-left transition-all flex items-center justify-between
+                    ${isOpen ? "border-indigo-500/50 bg-slate-800" : "border-white/10 hover:bg-slate-800"}`
+    },
+    /* @__PURE__ */ React2.createElement("span", { className: "truncate" }, selectedOption ? selectedOption.label : placeholder),
+    /* @__PURE__ */ React2.createElement("svg", { className: `w-4 h-4 text-slate-500 transition-transform flex-shrink-0 ${isOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, /* @__PURE__ */ React2.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
+  ), isOpen && /* @__PURE__ */ React2.createElement("div", { className: "absolute z-50 w-full mt-2 bg-slate-800 border border-white/10 rounded-lg shadow-2xl max-h-56 overflow-y-auto custom-scrollbar animate-in fade-in zoom-in-95 duration-100 py-1" }, options.map((opt, idx) => {
+    const isSelected = String(value) === String(opt.value);
+    return /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        key: idx,
+        type: "button",
+        onClick: () => {
+          onChange(opt.value);
+          setIsOpen(false);
+        },
+        className: `w-full text-left px-3 py-2.5 text-sm transition-colors
+                                    ${isSelected ? "bg-indigo-600/30 text-indigo-200 font-medium" : "text-slate-300 hover:bg-white/10"}`
+      },
+      opt.label
+    );
+  })));
+};
 function XViewSidebar({
   dbNodes = [],
   isNodeInView = () => false,
@@ -3869,11 +3912,11 @@ function XViewSidebar({
   const [isFilterMenuOpen, setIsFilterMenuOpen] = useState3(false);
   const [filterCategory, setFilterCategory] = useState3("Type");
   const [filterValue, setFilterValue] = useState3("");
+  const [activeSubMenu, setActiveSubMenu] = useState3(null);
   const [questFilterAssignee, setQuestFilterAssignee] = useState3("");
   const [questFilterStatus, setQuestFilterStatus] = useState3("");
-  const [isQuestLensMenuOpen, setIsQuestLensMenuOpen] = useState3(false);
   const [questFilterMilestone, setQuestFilterMilestone] = useState3("");
-  const [isReshapeLensMenuOpen, setIsReshapeLensMenuOpen] = useState3(false);
+  const [isQuestLensLoading, setIsQuestLensLoading] = useState3(false);
   const [reshapeLayoutType, setReshapeLayoutType] = useState3("Star");
   const [reshapeColumnCount, setReshapeColumnCount] = useState3(4);
   const [reshapeCenterNodeId, setReshapeCenterNodeId] = useState3("");
@@ -3883,8 +3926,7 @@ function XViewSidebar({
   const inputRef = useRef2(null);
   const filterMenuRef = useRef2(null);
   const typeDropdownRef = useRef2(null);
-  const questLensRef = useRef2(null);
-  const reshapeLensRef = useRef2(null);
+  const annexedPanelRef = useRef2(null);
   const ability = useMemo2(() => {
     return defineAbilityFor(userRole);
   }, [userRole]);
@@ -3990,19 +4032,17 @@ function XViewSidebar({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [isFilterMenuOpen, isTypeDropdownOpen]);
   useEffect2(() => {
-    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]);
   useEffect2(() => {
     if (!query) setSelectedNodeId(null);
   }, [query]);
@@ -4100,359 +4140,229 @@ 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__ */ React2.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__ */ React2.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__ */ React2.createElement("div", { className: "relative px-4 py-3 border-b border-white/10 flex items-center gap-2" }, /* @__PURE__ */ React2.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__ */ React2.createElement("h3", { className: "text-sm font-medium text-slate-100" }, "Ferramentas"), /* @__PURE__ */ React2.createElement(
-      "button",
+  const renderAnnexedPanel = () => {
+    if (!activeSubMenu) return null;
+    return /* @__PURE__ */ React2.createElement(
+      "div",
       {
-        className: "ml-auto p-2 rounded-md text-slate-400 hover:text-white hover:bg-white/10 transition-colors",
-        onClick: () => onToggle(false),
-        title: "Fechar"
+        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__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React2.createElement(
-        "path",
+      /* @__PURE__ */ React2.createElement("div", { className: "px-4 py-3 border-b border-white/10 flex items-center gap-2 bg-white/5" }, /* @__PURE__ */ React2.createElement(
+        "button",
         {
-          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"
+          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__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React2.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__ */ React2.createElement("h3", { className: "text-sm font-semibold text-indigo-100 uppercase tracking-wider" }, activeSubMenu === "quest" ? "Quest Lens" : "Reshape Lens"), /* @__PURE__ */ React2.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__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-6" }, activeSubMenu === "quest" && /* @__PURE__ */ React2.createElement("div", { className: "space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-500" }, /* @__PURE__ */ React2.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Respons\xE1vel"), /* @__PURE__ */ React2.createElement(
+        CustomSelect,
+        {
+          value: questFilterAssignee,
+          onChange: (val) => setQuestFilterAssignee(val),
+          options: [
+            { value: "", label: "Todos os Respons\xE1veis" },
+            ...viewMembers.map((m) => ({ value: m.id, label: m.name || m.email }))
+          ],
+          placeholder: "Selecione um Respons\xE1vel"
         }
-      ))
-    )), /* @__PURE__ */ React2.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-6" }, /* @__PURE__ */ React2.createElement("section", null, /* @__PURE__ */ React2.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Pesquisar Node")), /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.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();
+      )), /* @__PURE__ */ React2.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Status"), /* @__PURE__ */ React2.createElement(
+        CustomSelect,
+        {
+          value: questFilterStatus,
+          onChange: (val) => setQuestFilterStatus(val),
+          options: [
+            { value: "", label: "Todos (Exclui Done)" },
+            { value: "Backlog", label: "Backlog" },
+            { value: "In Progress", label: "In Progress" },
+            { value: "Review", label: "Review" },
+            { value: "Done", label: "Done" }
+          ],
+          placeholder: "Selecione um Status"
         }
-      },
-      activeFilters.map((filter, idx) => /* @__PURE__ */ React2.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__ */ React2.createElement(
-        "span",
+      )), /* @__PURE__ */ React2.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Milestone"), /* @__PURE__ */ React2.createElement(
+        CustomSelect,
         {
-          className: "inline-block w-2.5 h-2.5 rounded-full border border-white/20",
-          style: { backgroundColor: filter.value }
+          value: questFilterMilestone,
+          onChange: (val) => setQuestFilterMilestone(val),
+          options: [
+            { value: "", label: "Todos os Milestones" },
+            ...milestones.map((ms) => ({
+              value: ms.id,
+              label: `${ms.name} ${ms.status === "inactive" ? "(Inativo)" : ""}`
+            }))
+          ],
+          placeholder: "Todos os Milestones"
         }
-      ), /* @__PURE__ */ React2.createElement("span", { className: "truncate max-w-[120px]" }, filter.type, ": ", filter.value), /* @__PURE__ */ React2.createElement(
+      )), /* @__PURE__ */ React2.createElement("div", { className: "flex gap-3 pt-4" }, /* @__PURE__ */ React2.createElement(
         "button",
         {
-          type: "button",
-          onClick: (e) => {
-            e.stopPropagation();
-            handleRemoveFilter(idx);
+          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__ */ React2.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__ */ React2.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React2.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
-      ))),
-      /* @__PURE__ */ React2.createElement(
+        "Limpar"
+      ), /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-6 animate-in fade-in slide-in-from-bottom-2 duration-500" }, /* @__PURE__ */ React2.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Layout Type"), /* @__PURE__ */ React2.createElement(
+        CustomSelect,
+        {
+          value: reshapeLayoutType,
+          onChange: (val) => setReshapeLayoutType(val),
+          options: [
+            { value: "Star", label: "Star" },
+            { value: "Circle", label: "Circle" },
+            { value: "Column", label: "Column" }
+          ],
+          placeholder: "Selecione um Formato"
+        }
+      )), reshapeLayoutType === "Column" && /* @__PURE__ */ React2.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "Colunas"), /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement(
-        "li",
+      )), reshapeLayoutType === "Star" && /* @__PURE__ */ React2.createElement("div", { className: "space-y-2.5" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[11px] uppercase text-slate-400 font-semibold tracking-wider ml-1 mb-1 block" }, "N\xF3 Central"), /* @__PURE__ */ React2.createElement(
+        CustomSelect,
         {
-          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__ */ React2.createElement("span", { className: `inline-block h-2 w-2 rounded-full flex-shrink-0 ${inView ? "bg-emerald-400" : "bg-slate-500"}` }),
-        /* @__PURE__ */ React2.createElement("span", { className: "truncate flex-1" }, n.name),
-        typeLabel && /* @__PURE__ */ React2.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__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-slate-400" }, "Nenhum resultado"))), /* @__PURE__ */ React2.createElement("div", { className: "mt-3 flex items-center gap-2" }, /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: handleConfirm,
-        disabled: !selectedNodeId,
-        className: `flex-1 ${selectedNodeId ? buttonBaseClass : buttonDisabledClass}`
-      },
-      /* @__PURE__ */ React2.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__ */ React2.createElement("polygon", { points: "5 3 19 12 5 21 5 3" })),
-      "Renderizar"
-    ), /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: filterMenuRef }, /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })),
-      "Filters"
-    ), isFilterMenuOpen && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Filtro"), /* @__PURE__ */ React2.createElement("div", { className: "flex bg-slate-800/50 p-1 rounded-md" }, ["Type", "Color", "Dataset"].map((opt) => /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        key: opt,
-        onClick: () => {
-          setFilterCategory(opt);
-          setFilterValue("");
+          value: reshapeCenterNodeId,
+          onChange: (val) => setReshapeCenterNodeId(val),
+          options: [
+            { value: "", label: "Selecione um n\xF3..." },
+            ...(Array.isArray(dbNodes) ? dbNodes.filter((n) => isNodeInView(n.id)) : []).map((n) => ({
+              value: n.id,
+              label: n.name
+            }))
+          ],
+          placeholder: "Selecione um n\xF3..."
+        }
+      )), /* @__PURE__ */ React2.createElement("div", { className: "flex gap-3 pt-4" }, /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), filterCategory === "Type" || filterCategory === "Dataset" ? /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: typeDropdownRef }, /* @__PURE__ */ React2.createElement(
-      "input",
-      {
-        type: "text",
-        value: filterValue,
-        onChange: (e) => {
-          setFilterValue(e.target.value);
-          if (!isTypeDropdownOpen) setIsTypeDropdownOpen(true);
-          setHighlightedTypeIndex(-1);
+        "Resetar"
+      ), /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.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__ */ React2.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React2.createElement(
+        "Aplicar Lente"
+      )))),
+      /* @__PURE__ */ React2.createElement("div", { className: "p-5 border-t border-white/5 bg-white/[0.02] flex items-center justify-center gap-2" }, /* @__PURE__ */ React2.createElement("span", { className: "h-1 w-1 rounded-full bg-slate-700" }), /* @__PURE__ */ React2.createElement("p", { className: "text-[9px] text-slate-600 uppercase font-bold tracking-[0.2em]" }, "X-View Environment"), /* @__PURE__ */ React2.createElement("span", { className: "h-1 w-1 rounded-full bg-slate-700" }))
+    );
+  };
+  return /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.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__ */ React2.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__ */ React2.createElement("span", { className: "text-xs text-emerald-400 absolute bottom-[-18px] left-0" }, "J\xE1 vis\xEDvel")), viewType === "view" && ability.can("import", "File") && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: onOpenImportModal,
-        className: `${buttonBaseClass} mt-2`
-      },
-      /* @__PURE__ */ React2.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__ */ React2.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), /* @__PURE__ */ React2.createElement("polyline", { points: "17 8 12 3 7 8" }), /* @__PURE__ */ React2.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })),
-      "Importar arquivo"
-    ), /* @__PURE__ */ React2.createElement("p", { className: "mt-1.5 text-xs text-slate-400 text-center px-1 leading-tight" }, "Importar datasets ou ancestralidades das views."), /* @__PURE__ */ React2.createElement("div", { className: "h-9 mt-1 flex items-center justify-center" }, importSuccessMessage && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ React2.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Lentes"), /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: questLensRef }, /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }), /* @__PURE__ */ React2.createElement("path", { d: "M9 12l2 2 4-4" })),
-      "Quest Lens",
-      (questFilterAssignee || questFilterStatus || questFilterMilestone) && /* @__PURE__ */ React2.createElement("span", { className: "ml-1 px-1.5 py-0.5 rounded-full bg-indigo-500 text-[9px] font-bold" }, "!")
-    ), isQuestLensMenuOpen && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Respons\xE1vel"), /* @__PURE__ */ React2.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__ */ React2.createElement("option", { value: "" }, "Todos os Respons\xE1veis"),
-      viewMembers.map((m) => /* @__PURE__ */ React2.createElement("option", { key: m.id, value: m.id }, m.name || m.email))
-    )), /* @__PURE__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Status"), /* @__PURE__ */ React2.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"
+        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__ */ React2.createElement("option", { value: "" }, "Todos (Exclui Done)"),
-      /* @__PURE__ */ React2.createElement("option", { value: "Backlog" }, "Backlog"),
-      /* @__PURE__ */ React2.createElement("option", { value: "In Progress" }, "In Progress"),
-      /* @__PURE__ */ React2.createElement("option", { value: "Review" }, "Review"),
-      /* @__PURE__ */ React2.createElement("option", { value: "Done" }, "Done")
-    )), /* @__PURE__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Milestone"), /* @__PURE__ */ React2.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__ */ React2.createElement("option", { value: "" }, "Todos os Milestones"),
-      milestones.map((ms) => /* @__PURE__ */ React2.createElement("option", { key: ms.id, value: ms.id }, ms.name, " ", ms.status === "inactive" ? "(Inativo)" : ""))
-    )), /* @__PURE__ */ React2.createElement("div", { className: "flex gap-2 pt-1" }, /* @__PURE__ */ React2.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__ */ React2.createElement(
-      "button",
-      {
-        onClick: () => {
-          onActivateQuestLens({
-            assigneeId: questFilterAssignee,
-            status: questFilterStatus,
-            milestoneId: questFilterMilestone
-          });
-          setIsQuestLensMenuOpen(false);
-          onToggle(false);
+      /* @__PURE__ */ React2.createElement("div", { className: "relative px-5 py-5 border-b border-white/5 flex items-center gap-3 bg-white/[0.02]" }, /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.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__ */ React2.createElement("span", { className: "absolute inset-0 h-2.5 w-2.5 rounded-full bg-indigo-400 animate-ping opacity-40" })), /* @__PURE__ */ React2.createElement("h3", { className: "text-xs font-black text-slate-200 uppercase tracking-[0.2em]" }, "Ferramentas"), /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "relative", ref: reshapeLensRef }, /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: () => setIsReshapeLensMenuOpen(!isReshapeLensMenuOpen),
-        className: `${buttonBaseClass} ${isReshapeLensMenuOpen ? "bg-indigo-500/30 border-indigo-400" : ""}`,
-        title: "Abrir op\xE7\xF5es de Reshape"
-      },
-      /* @__PURE__ */ React2.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__ */ React2.createElement("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }), /* @__PURE__ */ React2.createElement("polyline", { points: "2 17 12 22 22 17" }), /* @__PURE__ */ React2.createElement("polyline", { points: "2 12 12 17 22 12" })),
-      "Reshape Lens"
-    ), isReshapeLensMenuOpen && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Layout Type"), /* @__PURE__ */ React2.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__ */ React2.createElement("option", { value: "Star" }, "Star"),
-      /* @__PURE__ */ React2.createElement("option", { value: "Circle" }, "Circle"),
-      /* @__PURE__ */ React2.createElement("option", { value: "Column" }, "Column")
-    )), reshapeLayoutType === "Column" && /* @__PURE__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "Colunas"), /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-bold tracking-widest" }, "N\xF3 Central"), /* @__PURE__ */ React2.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__ */ React2.createElement("option", { value: "" }, "Selecione..."),
-      (Array.isArray(dbNodes) ? dbNodes.filter((n) => isNodeInView(n.id)) : []).map((n) => /* @__PURE__ */ React2.createElement("option", { key: n.id, value: n.id }, n.name))
-    )), /* @__PURE__ */ React2.createElement("div", { className: "flex gap-2 pt-1" }, /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: () => {
-          setReshapeLayoutType("Star");
-          setReshapeColumnCount(4);
-          setReshapeCenterNodeId("");
+        /* @__PURE__ */ React2.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("div", { className: "flex-1 overflow-y-auto px-5 py-6 space-y-8 custom-scrollbar relative" }, /* @__PURE__ */ React2.createElement("section", null, /* @__PURE__ */ React2.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Pesquisar Node")), /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("span", { className: "inline-block w-2.5 h-2.5 rounded-full border border-white/20", style: { backgroundColor: filter.value } }), /* @__PURE__ */ React2.createElement("span", { className: "truncate max-w-[120px]" }, filter.type, ": ", filter.value), /* @__PURE__ */ React2.createElement("button", { type: "button", onClick: (e) => {
+        e.stopPropagation();
+        handleRemoveFilter(idx);
+      }, className: "hover:text-white transition-colors" }, /* @__PURE__ */ React2.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__ */ React2.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React2.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))), /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.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__ */ React2.createElement("span", { className: `inline-block h-2 w-2 rounded-full flex-shrink-0 ${isNodeInView(n.id) ? "bg-emerald-400" : "bg-slate-500"}` }), /* @__PURE__ */ React2.createElement("span", { className: "truncate flex-1" }, n.name))) : /* @__PURE__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-slate-400" }, "Nenhum resultado"))), /* @__PURE__ */ React2.createElement("div", { className: "mt-3 flex items-center gap-2" }, /* @__PURE__ */ React2.createElement("button", { onClick: handleConfirm, disabled: !selectedNodeId, className: `flex-1 ${selectedNodeId ? buttonBaseClass : buttonDisabledClass}` }, /* @__PURE__ */ React2.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__ */ React2.createElement("polygon", { points: "5 3 19 12 5 21 5 3" })), "Renderizar"), /* @__PURE__ */ React2.createElement("div", { className: "relative", ref: filterMenuRef }, /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })), "Filters"), isFilterMenuOpen && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Filtro"), /* @__PURE__ */ React2.createElement("div", { className: "flex bg-slate-800/50 p-1 rounded-md" }, ["Type", "Color", "Dataset"].map((opt) => /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React2.createElement("label", { className: "text-[10px] uppercase text-slate-400 font-semibold tracking-wider" }, "Valor"), /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ React2.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Lentes"), /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.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__ */ React2.createElement(
-      "button",
-      {
-        onClick: () => {
-          onActivateReshapeLens({
-            type: reshapeLayoutType,
-            columns: reshapeColumnCount,
-            centerNodeId: reshapeCenterNodeId
-          });
-          setIsReshapeLensMenuOpen(false);
-          onToggle(false);
+        /* @__PURE__ */ React2.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__ */ React2.createElement("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }), /* @__PURE__ */ React2.createElement("path", { d: "M9 12l2 2 4-4" })),
+        "Quest Lens"
+      )), /* @__PURE__ */ React2.createElement("div", { className: "relative" }, /* @__PURE__ */ React2.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__ */ React2.createElement(
-      "button",
-      {
-        onClick: onActivateTimeline,
-        className: buttonBaseClass,
-        title: "Ativar a visualiza\xE7\xE3o de Timeline"
-      },
-      /* @__PURE__ */ React2.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__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React2.createElement("polyline", { points: "12 6 12 12 16 14" })),
-      "Timeline"
-    ), /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: onOpenBoards,
-        className: buttonBaseClass,
-        title: "Abrir painel de Boards"
-      },
-      /* @__PURE__ */ React2.createElement(FiLayers, { size: 16 }),
-      "Boards"
-    )), /* @__PURE__ */ React2.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ React2.createElement("section", { className: "space-y-3" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Milestones"), /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: onOpenMilestoneManager,
-        className: buttonBaseClass,
-        title: "Gerenciar os milestones deste cen\xE1rio"
-      },
-      /* @__PURE__ */ React2.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__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "6" }), /* @__PURE__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "2" })),
-      "Gerenciar Milestones"
-    ))), /* @__PURE__ */ React2.createElement("div", { className: "px-4 py-3 border-t border-white/10 bg-slate-900/30" }, /* @__PURE__ */ React2.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Navega\xE7\xE3o")), ability.can("update", "Scene") && /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: handleSaveClick,
-        disabled: isSaving,
-        className: isSaving ? buttonDisabledClass : buttonBaseClass,
-        title: "Salvar a visualiza\xE7\xE3o atual como o cen\xE1rio inicial"
-      },
-      isSaving ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.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__ */ React2.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React2.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__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement("polyline", { points: "17 21 17 13 7 13 7 21" }), /* @__PURE__ */ React2.createElement("polyline", { points: "7 3 7 8 15 8" })), "Atualizar cen\xE1rio inicial")
-    ), /* @__PURE__ */ React2.createElement(
-      "button",
-      {
-        onClick: onNavigateBack,
-        className: buttonBaseClass,
-        title: "Voltar \xE0 p\xE1gina de cen\xE1rios"
-      },
-      /* @__PURE__ */ React2.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__ */ React2.createElement("line", { x1: "19", y1: "12", x2: "5", y2: "12" }), /* @__PURE__ */ React2.createElement("polyline", { points: "12 19 5 12 12 5" })),
-      "Voltar \xE0 p\xE1gina de cen\xE1rios"
-    ))), contextLabel && /* @__PURE__ */ React2.createElement("div", { className: "px-4 py-3 border-t border-white/10 bg-slate-900/50" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2", title: contextLabel }, /* @__PURE__ */ React2.createElement("span", { className: "text-sm font-medium text-slate-200 truncate" }, contextLabel))), /* @__PURE__ */ React2.createElement("div", { className: "h-[2px] bg-gradient-to-r from-indigo-400/0 via-indigo-400/70 to-indigo-400/0" }))
+        /* @__PURE__ */ React2.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__ */ React2.createElement("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }), /* @__PURE__ */ React2.createElement("polyline", { points: "2 17 12 22 22 17" }), /* @__PURE__ */ React2.createElement("polyline", { points: "2 12 12 17 22 12" })),
+        "Reshape Lens"
+      )), /* @__PURE__ */ React2.createElement("button", { onClick: onActivateTimeline, className: buttonBaseClass }, /* @__PURE__ */ React2.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__ */ React2.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React2.createElement("polyline", { points: "12 6 12 12 16 14" })), "Timeline"), /* @__PURE__ */ React2.createElement("button", { onClick: onOpenBoards, className: buttonBaseClass }, /* @__PURE__ */ React2.createElement(FiLayers, { size: 16 }), "Boards")), /* @__PURE__ */ React2.createElement("div", { className: "h-px bg-white/10" }), /* @__PURE__ */ React2.createElement("section", { className: "space-y-3" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Milestones"), /* @__PURE__ */ React2.createElement("button", { onClick: onOpenMilestoneManager, className: buttonBaseClass }, "Gerenciar Milestones"))),
+      /* @__PURE__ */ React2.createElement("div", { className: "px-4 py-3 border-t border-white/10 bg-slate-900/30" }, /* @__PURE__ */ React2.createElement("section", { className: "space-y-2" }, /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] uppercase tracking-wider text-slate-400" }, "Navega\xE7\xE3o"), ability.can("update", "Scene") && /* @__PURE__ */ React2.createElement("button", { onClick: handleSaveClick, disabled: isSaving, className: isSaving ? buttonDisabledClass : buttonBaseClass }, isSaving ? "Salvando..." : "Atualizar cen\xE1rio inicial"), /* @__PURE__ */ React2.createElement("button", { onClick: onNavigateBack, className: buttonBaseClass }, "Voltar \xE0 p\xE1gina de cen\xE1rios"))),
+      contextLabel && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "h-[2px] bg-gradient-to-r from-indigo-400/0 via-indigo-400/70 to-indigo-400/0" })
+    ),
+    /* @__PURE__ */ React2.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())
   );
 }