@lv-x-software-house/x_view 1.2.6-dev.13 → 1.2.6-dev.14

package/dist/index.js

@@ -13282,8 +13282,8 @@ function RichGroupEditor({
 }
 
 // src/components/AncestryBoard.jsx
-var GroupItem = ({
-  group,
+var BoardItem = ({
+  item,
   index,
   onUpdate,
   onDelete,
@@ -13292,16 +13292,55 @@ var GroupItem = ({
   onOutdent,
   searchItems,
   onMentionClick,
+  onEnterFolder,
   canEdit
 }) => {
+  var _a;
+  const isFolder = item.type === "folder";
   const canIndent = index > 0;
   const handleContentChange = (content) => {
-    onUpdate(group.id, { ...group, content });
+    onUpdate(item.id, { ...item, content });
+  };
+  const handleNameChange = (e) => {
+    onUpdate(item.id, { ...item, name: e.target.value });
   };
+  if (isFolder) {
+    return /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex flex-col gap-2 mb-3 relative group/item animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ import_react29.default.createElement(
+      "div",
+      {
+        onClick: () => onEnterFolder(item.id),
+        className: "flex items-center gap-3 py-3 px-4 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-xl cursor-pointer transition-all duration-200 group/folder"
+      },
+      /* @__PURE__ */ import_react29.default.createElement("div", { className: "w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400 group-hover/folder:scale-110 transition-transform" }, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiFolder, { size: 20 })),
+      /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex-1 min-w-0" }, canEdit ? /* @__PURE__ */ import_react29.default.createElement(
+        "input",
+        {
+          type: "text",
+          value: item.name,
+          onChange: handleNameChange,
+          onClick: (e) => e.stopPropagation(),
+          className: "bg-transparent border-none outline-none text-sm font-medium text-slate-200 w-full focus:text-white",
+          placeholder: "Nome da pasta..."
+        }
+      ) : /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-sm font-medium text-slate-200" }, item.name), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-2 mt-0.5" }, /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[10px] text-slate-500 uppercase tracking-wider font-semibold" }, ((_a = item.children) == null ? void 0 : _a.length) || 0, " itens"))),
+      /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-2 opacity-0 group-hover/folder:opacity-100 transition-opacity" }, canEdit && /* @__PURE__ */ import_react29.default.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onDelete(item.id);
+          },
+          className: "p-1.5 text-slate-500 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors",
+          title: "Remover Pasta"
+        },
+        /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiTrash2, { size: 14 })
+      ), /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiChevronRight, { className: "text-slate-500 group-hover/folder:translate-x-1 transition-transform" }))
+    ));
+  }
   return /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex flex-col gap-2 mb-3 pl-3 border-l border-white/10 relative group/item animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "absolute -left-[1px] top-4 w-2 h-px bg-white/20" }), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex flex-col gap-2 py-2 px-3 transition-all duration-200 hover:bg-white/5 border-l-2 border-transparent hover:border-white/20" }, /* @__PURE__ */ import_react29.default.createElement(
     RichGroupEditor,
     {
-      content: group.content,
+      content: item.content,
       onChange: handleContentChange,
       onMentionClick,
       searchItems,
@@ -13311,15 +13350,25 @@ var GroupItem = ({
   ), canEdit && /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center justify-between pt-2 mt-1 border-t border-white/5 opacity-40 group-hover/item:opacity-100 transition-opacity" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react29.default.createElement(
     "button",
     {
-      onClick: () => onAddSubgroup(group.id),
-      className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
+      onClick: () => onAddSubgroup(item.id, "group"),
+      className: "flex items-center gap-1 px-1.5 py-1 text-[10px] uppercase font-bold tracking-wider text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
       title: "Criar Subgrupo"
     },
-    /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiPlus, { size: 14 })
+    /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiPlus, { size: 12 }),
+    /* @__PURE__ */ import_react29.default.createElement("span", null, "Subgrupo")
+  ), /* @__PURE__ */ import_react29.default.createElement(
+    "button",
+    {
+      onClick: () => onAddSubgroup(item.id, "folder"),
+      className: "flex items-center gap-1 px-1.5 py-1 text-[10px] uppercase font-bold tracking-wider text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
+      title: "Criar Subpasta"
+    },
+    /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiFolder, { size: 12 }),
+    /* @__PURE__ */ import_react29.default.createElement("span", null, "Pasta")
   )), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react29.default.createElement(
     "button",
     {
-      onClick: () => onIndent(group.id),
+      onClick: () => onIndent(item.id),
       disabled: !canIndent,
       className: `p-1.5 rounded transition-colors ${!canIndent ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`,
       title: "Aninhar no grupo acima"
@@ -13328,7 +13377,7 @@ var GroupItem = ({
   ), /* @__PURE__ */ import_react29.default.createElement(
     "button",
     {
-      onClick: () => onOutdent(group.id),
+      onClick: () => onOutdent(item.id),
       className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
       title: "Desaninhar"
     },
@@ -13336,17 +13385,17 @@ var GroupItem = ({
   ), /* @__PURE__ */ import_react29.default.createElement("div", { className: "w-px h-3 bg-white/10 mx-1" }), /* @__PURE__ */ import_react29.default.createElement(
     "button",
     {
-      onClick: () => onDelete(group.id),
+      onClick: () => onDelete(item.id),
       className: "p-1.5 text-slate-600 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors",
       title: "Remover Grupo"
     },
     /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiTrash2, { size: 14 })
-  )))), group.children && group.children.length > 0 && /* @__PURE__ */ import_react29.default.createElement("div", { className: "ml-2" }, group.children.map((child, idx) => /* @__PURE__ */ import_react29.default.createElement(
-    GroupItem,
+  )))), item.children && item.children.length > 0 && /* @__PURE__ */ import_react29.default.createElement("div", { className: "ml-2" }, item.children.map((child, idx) => /* @__PURE__ */ import_react29.default.createElement(
+    BoardItem,
     {
       key: child.id,
       index: idx,
-      group: child,
+      item: child,
       onUpdate,
       onDelete,
       onAddSubgroup,
@@ -13354,6 +13403,7 @@ var GroupItem = ({
       onOutdent,
       searchItems,
       onMentionClick,
+      onEnterFolder,
       canEdit
     }
   ))));
@@ -13371,13 +13421,15 @@ function AncestryBoard({
   const [groups, setGroups] = (0, import_react29.useState)([]);
   const [isLoaded, setIsLoaded] = (0, import_react29.useState)(false);
   const [saveStatus, setSaveStatus] = (0, import_react29.useState)("idle");
+  const [navigationStack, setNavigationStack] = (0, import_react29.useState)([]);
   const canEdit = (0, import_react29.useMemo)(() => userRole !== "viewer", [userRole]);
   (0, import_react29.useEffect)(() => {
     if (initialGroups && !isLoaded) {
       const migrate = (list) => list.map((g) => ({
         id: g.id || (0, import_uuid11.v4)(),
+        type: g.type || "group",
+        name: g.name || "",
         content: Array.isArray(g.content) ? g.content : [],
-        // descarta dados legados
         children: migrate(g.children || [])
       }));
       setGroups(migrate(initialGroups));
@@ -13412,6 +13464,8 @@ function AncestryBoard({
   }, [availableAncestries, availableNodes]);
   const sanitizeGroups = (list) => list.map((g) => ({
     id: g.id,
+    type: g.type || "group",
+    name: g.name || "",
     content: g.content || [],
     children: sanitizeGroups(g.children || [])
   }));
@@ -13442,23 +13496,72 @@ function AncestryBoard({
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
   }, [isOpen, onClose]);
-  const handleAddRootGroup = () => {
-    setGroups((prev) => [{ id: (0, import_uuid11.v4)(), content: [], children: [] }, ...prev]);
+  const currentPath = (0, import_react29.useMemo)(() => {
+    const path = [];
+    let currentLevel = groups;
+    for (const folderId of navigationStack) {
+      const folder = currentLevel.find((f) => f.id === folderId);
+      if (folder) {
+        path.push(folder);
+        currentLevel = folder.children;
+      }
+    }
+    return path;
+  }, [groups, navigationStack]);
+  const currentGroups = (0, import_react29.useMemo)(() => {
+    const lastFolder = currentPath[currentPath.length - 1];
+    return lastFolder ? lastFolder.children : groups;
+  }, [groups, currentPath]);
+  const navigateUp = () => {
+    setNavigationStack((prev) => prev.slice(0, -1));
+  };
+  const navigateTo = (folderId) => {
+    setNavigationStack((prev) => [...prev, folderId]);
+  };
+  const navigateToBreadcrumb = (index) => {
+    setNavigationStack((prev) => prev.slice(0, index + 1));
   };
-  const handleAddSubgroup = (parentId) => {
-    const newGroup = { id: (0, import_uuid11.v4)(), content: [], children: [] };
+  const navigateHome = () => {
+    setNavigationStack([]);
+  };
+  const handleAddItem = (type = "group") => {
+    const newItem = {
+      id: (0, import_uuid11.v4)(),
+      type,
+      name: type === "folder" ? "Nova Pasta" : "",
+      content: [],
+      children: []
+    };
+    if (navigationStack.length === 0) {
+      setGroups((prev) => [newItem, ...prev]);
+    } else {
+      const parentId = navigationStack[navigationStack.length - 1];
+      const add = (list) => list.map(
+        (g) => g.id === parentId ? { ...g, children: [newItem, ...g.children] } : { ...g, children: add(g.children) }
+      );
+      setGroups((prev) => add(prev));
+    }
+  };
+  const handleAddSubgroup = (parentId, type = "group") => {
+    const newItem = {
+      id: (0, import_uuid11.v4)(),
+      type,
+      name: type === "folder" ? "Nova Pasta" : "",
+      content: [],
+      children: []
+    };
     const add = (list) => list.map(
-      (g) => g.id === parentId ? { ...g, children: [newGroup, ...g.children] } : { ...g, children: add(g.children) }
+      (g) => g.id === parentId ? { ...g, children: [newItem, ...g.children] } : { ...g, children: add(g.children) }
     );
     setGroups((prev) => add(prev));
   };
-  const handleUpdateGroup = (id, newData) => {
+  const handleUpdateItem = (id, newData) => {
     const update = (list) => list.map(
       (g) => g.id === id ? newData : { ...g, children: update(g.children) }
     );
     setGroups((prev) => update(prev));
   };
-  const handleDeleteGroup = (id) => {
+  const handleDeleteItem = (id) => {
     const del = (list) => list.filter((g) => g.id !== id).map((g) => ({ ...g, children: del(g.children) }));
     setGroups((prev) => del(prev));
   };
@@ -13516,15 +13619,23 @@ function AncestryBoard({
         className: "bg-slate-950 border border-white/10 rounded-xl w-[98vw] h-[97vh] flex flex-col shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200",
         onClick: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ import_react29.default.createElement("div", { className: "h-14 px-4 border-b border-white/10 bg-slate-900/90 flex items-center justify-between shrink-0" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react29.default.createElement("h3", { className: "text-base font-semibold text-white flex items-center gap-2 whitespace-nowrap" }, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiLayers, { className: "text-indigo-400" }), "Ancestry Board"), saveStatus !== "idle" && /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "w-px h-4 bg-white/10 mx-1" }), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-slate-900/50 border border-white/5" }, saveStatus === "saving" && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiLoader, { className: "animate-spin text-indigo-400", size: 12 }), /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-indigo-300" }, "Salvando")), saveStatus === "saved" && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiCheckCircle, { className: "text-emerald-400", size: 12 }), /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-slate-400" }, "Salvo")), saveStatus === "error" && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement("span", { className: "w-2 h-2 rounded-full bg-red-500" }), /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-red-400" }, "Erro"))))), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-3" }, canEdit && /* @__PURE__ */ import_react29.default.createElement(
+      /* @__PURE__ */ import_react29.default.createElement("div", { className: "h-14 px-4 border-b border-white/10 bg-slate-900/90 flex items-center justify-between shrink-0" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ import_react29.default.createElement("h3", { className: "text-base font-semibold text-white flex items-center gap-2 whitespace-nowrap" }, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiLayers, { className: "text-indigo-400" }), "Ancestry Board"), saveStatus !== "idle" && /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "w-px h-4 bg-white/10 mx-1" }), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-slate-900/50 border border-white/5" }, saveStatus === "saving" && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiLoader, { className: "animate-spin text-indigo-400", size: 12 }), /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-indigo-300" }, "Salvando")), saveStatus === "saved" && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiCheckCircle, { className: "text-emerald-400", size: 12 }), /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-slate-400" }, "Salvo")), saveStatus === "error" && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement("span", { className: "w-2 h-2 rounded-full bg-red-500" }), /* @__PURE__ */ import_react29.default.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-red-400" }, "Erro"))))), /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex items-center gap-3" }, canEdit && /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(
+        "button",
+        {
+          onClick: () => handleAddItem("folder"),
+          className: "flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 backdrop-blur-sm text-slate-200 hover:text-white rounded-md transition-all duration-200 text-xs font-medium shadow-sm"
+        },
+        /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiPlus, { size: 14, className: "text-amber-400" }),
+        /* @__PURE__ */ import_react29.default.createElement("span", { className: "hidden sm:inline" }, "Nova Pasta")
+      ), /* @__PURE__ */ import_react29.default.createElement(
         "button",
         {
-          onClick: handleAddRootGroup,
+          onClick: () => handleAddItem("group"),
           className: "flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 backdrop-blur-sm text-slate-200 hover:text-white rounded-md transition-all duration-200 text-xs font-medium shadow-sm"
         },
         /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiPlus, { size: 14, className: "text-indigo-400" }),
         /* @__PURE__ */ import_react29.default.createElement("span", { className: "hidden sm:inline" }, "Novo Grupo")
-      ), /* @__PURE__ */ import_react29.default.createElement(
+      )), /* @__PURE__ */ import_react29.default.createElement(
         "button",
         {
           onClick: onClose,
@@ -13532,23 +13643,47 @@ function AncestryBoard({
         },
         /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiX, { size: 16 })
       ))),
-      /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar bg-slate-950/30 p-6 space-y-4" }, groups.length === 0 ? /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex flex-col items-center justify-center h-full text-slate-500 gap-3 border-2 border-dashed border-white/5 rounded-xl m-4 bg-slate-900/20" }, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiLayers, { size: 24, className: "opacity-20" }), /* @__PURE__ */ import_react29.default.createElement("p", { className: "text-xs text-center px-4" }, canEdit ? /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, "Nenhum grupo criado.", /* @__PURE__ */ import_react29.default.createElement("br", null), 'Use o bot\xE3o "Novo Grupo" acima.') : /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, "Nenhum grupo dispon\xEDvel para visualiza\xE7\xE3o."))) : groups.map((group, index) => /* @__PURE__ */ import_react29.default.createElement(
-        GroupItem,
+      /* @__PURE__ */ import_react29.default.createElement("div", { className: "h-10 px-6 bg-slate-900/40 border-b border-white/5 flex items-center gap-2 text-[10px] uppercase font-bold tracking-widest text-slate-500 overflow-x-auto no-scrollbar whitespace-nowrap" }, /* @__PURE__ */ import_react29.default.createElement(
+        "button",
+        {
+          onClick: navigateHome,
+          className: `hover:text-white transition-colors flex items-center gap-1 ${navigationStack.length === 0 ? "text-indigo-400" : ""}`
+        },
+        "Home"
+      ), currentPath.map((folder, idx) => /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, { key: folder.id }, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiChevronRight, { size: 10, className: "shrink-0" }), /* @__PURE__ */ import_react29.default.createElement(
+        "button",
+        {
+          onClick: () => navigateToBreadcrumb(idx),
+          className: `hover:text-white transition-colors ${idx === currentPath.length - 1 ? "text-indigo-400" : ""}`
+        },
+        folder.name || "Sem Nome"
+      ))), navigationStack.length > 0 && /* @__PURE__ */ import_react29.default.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ import_react29.default.createElement(
+        "button",
+        {
+          onClick: navigateUp,
+          className: "flex items-center gap-1 px-2 py-1 rounded bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white transition-all"
+        },
+        /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiArrowLeft, { size: 10 }),
+        /* @__PURE__ */ import_react29.default.createElement("span", null, "Voltar")
+      ))),
+      /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar bg-slate-950/30 p-6 space-y-4" }, currentGroups.length === 0 ? /* @__PURE__ */ import_react29.default.createElement("div", { className: "flex flex-col items-center justify-center h-full text-slate-500 gap-3 border-2 border-dashed border-white/5 rounded-xl bg-slate-900/20" }, /* @__PURE__ */ import_react29.default.createElement(import_fi23.FiLayers, { size: 24, className: "opacity-20" }), /* @__PURE__ */ import_react29.default.createElement("p", { className: "text-xs text-center px-4" }, canEdit ? /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, "Esta pasta est\xE1 vazia.", /* @__PURE__ */ import_react29.default.createElement("br", null), "Use os bot\xF5es acima para criar conte\xFAdo.") : /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, "Nenhum conte\xFAdo dispon\xEDvel nesta pasta."))) : currentGroups.map((item, index) => /* @__PURE__ */ import_react29.default.createElement(
+        BoardItem,
         {
-          key: group.id,
+          key: item.id,
           index,
-          group,
-          onUpdate: handleUpdateGroup,
-          onDelete: handleDeleteGroup,
+          item,
+          onUpdate: handleUpdateItem,
+          onDelete: handleDeleteItem,
           onAddSubgroup: handleAddSubgroup,
           onIndent: handleIndent,
           onOutdent: handleOutdent,
           searchItems: allSearchableItems,
           onMentionClick: handleMentionClick,
+          onEnterFolder: navigateTo,
           canEdit
         }
       ))),
-      /* @__PURE__ */ import_react29.default.createElement("div", { className: "px-5 py-2 border-t border-white/10 bg-slate-950/50 text-xs text-slate-500 flex justify-end flex-shrink-0" }, /* @__PURE__ */ import_react29.default.createElement("span", null, groups.length, " grupos raiz"))
+      /* @__PURE__ */ import_react29.default.createElement("div", { className: "px-5 py-2 border-t border-white/10 bg-slate-950/50 text-xs text-slate-500 flex justify-end flex-shrink-0" }, /* @__PURE__ */ import_react29.default.createElement("span", null, currentGroups.length, " itens nesta visualiza\xE7\xE3o"))
     )
   );
 }

package/dist/index.mjs

@@ -12965,7 +12965,9 @@ import {
   FiX as FiX8,
   FiBox as FiBox2,
   FiCheckSquare as FiCheckSquare4,
-  FiGitBranch as FiGitBranch4
+  FiGitBranch as FiGitBranch4,
+  FiFolder as FiFolder3,
+  FiChevronRight as FiChevronRight7
 } from "react-icons/fi";
 import { v4 as uuidv411 } from "uuid";
 
@@ -13328,8 +13330,8 @@ function RichGroupEditor({
 }
 
 // src/components/AncestryBoard.jsx
-var GroupItem = ({
-  group,
+var BoardItem = ({
+  item,
   index,
   onUpdate,
   onDelete,
@@ -13338,16 +13340,55 @@ var GroupItem = ({
   onOutdent,
   searchItems,
   onMentionClick,
+  onEnterFolder,
   canEdit
 }) => {
+  var _a;
+  const isFolder = item.type === "folder";
   const canIndent = index > 0;
   const handleContentChange = (content) => {
-    onUpdate(group.id, { ...group, content });
+    onUpdate(item.id, { ...item, content });
+  };
+  const handleNameChange = (e) => {
+    onUpdate(item.id, { ...item, name: e.target.value });
   };
+  if (isFolder) {
+    return /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-2 mb-3 relative group/item animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ React28.createElement(
+      "div",
+      {
+        onClick: () => onEnterFolder(item.id),
+        className: "flex items-center gap-3 py-3 px-4 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-xl cursor-pointer transition-all duration-200 group/folder"
+      },
+      /* @__PURE__ */ React28.createElement("div", { className: "w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400 group-hover/folder:scale-110 transition-transform" }, /* @__PURE__ */ React28.createElement(FiFolder3, { size: 20 })),
+      /* @__PURE__ */ React28.createElement("div", { className: "flex-1 min-w-0" }, canEdit ? /* @__PURE__ */ React28.createElement(
+        "input",
+        {
+          type: "text",
+          value: item.name,
+          onChange: handleNameChange,
+          onClick: (e) => e.stopPropagation(),
+          className: "bg-transparent border-none outline-none text-sm font-medium text-slate-200 w-full focus:text-white",
+          placeholder: "Nome da pasta..."
+        }
+      ) : /* @__PURE__ */ React28.createElement("span", { className: "text-sm font-medium text-slate-200" }, item.name), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2 mt-0.5" }, /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] text-slate-500 uppercase tracking-wider font-semibold" }, ((_a = item.children) == null ? void 0 : _a.length) || 0, " itens"))),
+      /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2 opacity-0 group-hover/folder:opacity-100 transition-opacity" }, canEdit && /* @__PURE__ */ React28.createElement(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onDelete(item.id);
+          },
+          className: "p-1.5 text-slate-500 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors",
+          title: "Remover Pasta"
+        },
+        /* @__PURE__ */ React28.createElement(FiTrash23, { size: 14 })
+      ), /* @__PURE__ */ React28.createElement(FiChevronRight7, { className: "text-slate-500 group-hover/folder:translate-x-1 transition-transform" }))
+    ));
+  }
   return /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-2 mb-3 pl-3 border-l border-white/10 relative group/item animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute -left-[1px] top-4 w-2 h-px bg-white/20" }), /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col gap-2 py-2 px-3 transition-all duration-200 hover:bg-white/5 border-l-2 border-transparent hover:border-white/20" }, /* @__PURE__ */ React28.createElement(
     RichGroupEditor,
     {
-      content: group.content,
+      content: item.content,
       onChange: handleContentChange,
       onMentionClick,
       searchItems,
@@ -13357,15 +13398,25 @@ var GroupItem = ({
   ), canEdit && /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-between pt-2 mt-1 border-t border-white/5 opacity-40 group-hover/item:opacity-100 transition-opacity" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React28.createElement(
     "button",
     {
-      onClick: () => onAddSubgroup(group.id),
-      className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
+      onClick: () => onAddSubgroup(item.id, "group"),
+      className: "flex items-center gap-1 px-1.5 py-1 text-[10px] uppercase font-bold tracking-wider text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
       title: "Criar Subgrupo"
     },
-    /* @__PURE__ */ React28.createElement(FiPlus10, { size: 14 })
+    /* @__PURE__ */ React28.createElement(FiPlus10, { size: 12 }),
+    /* @__PURE__ */ React28.createElement("span", null, "Subgrupo")
+  ), /* @__PURE__ */ React28.createElement(
+    "button",
+    {
+      onClick: () => onAddSubgroup(item.id, "folder"),
+      className: "flex items-center gap-1 px-1.5 py-1 text-[10px] uppercase font-bold tracking-wider text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
+      title: "Criar Subpasta"
+    },
+    /* @__PURE__ */ React28.createElement(FiFolder3, { size: 12 }),
+    /* @__PURE__ */ React28.createElement("span", null, "Pasta")
   )), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React28.createElement(
     "button",
     {
-      onClick: () => onIndent(group.id),
+      onClick: () => onIndent(item.id),
       disabled: !canIndent,
       className: `p-1.5 rounded transition-colors ${!canIndent ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`,
       title: "Aninhar no grupo acima"
@@ -13374,7 +13425,7 @@ var GroupItem = ({
   ), /* @__PURE__ */ React28.createElement(
     "button",
     {
-      onClick: () => onOutdent(group.id),
+      onClick: () => onOutdent(item.id),
       className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors",
       title: "Desaninhar"
     },
@@ -13382,17 +13433,17 @@ var GroupItem = ({
   ), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-3 bg-white/10 mx-1" }), /* @__PURE__ */ React28.createElement(
     "button",
     {
-      onClick: () => onDelete(group.id),
+      onClick: () => onDelete(item.id),
       className: "p-1.5 text-slate-600 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors",
       title: "Remover Grupo"
     },
     /* @__PURE__ */ React28.createElement(FiTrash23, { size: 14 })
-  )))), group.children && group.children.length > 0 && /* @__PURE__ */ React28.createElement("div", { className: "ml-2" }, group.children.map((child, idx) => /* @__PURE__ */ React28.createElement(
-    GroupItem,
+  )))), item.children && item.children.length > 0 && /* @__PURE__ */ React28.createElement("div", { className: "ml-2" }, item.children.map((child, idx) => /* @__PURE__ */ React28.createElement(
+    BoardItem,
     {
       key: child.id,
       index: idx,
-      group: child,
+      item: child,
       onUpdate,
       onDelete,
       onAddSubgroup,
@@ -13400,6 +13451,7 @@ var GroupItem = ({
       onOutdent,
       searchItems,
       onMentionClick,
+      onEnterFolder,
       canEdit
     }
   ))));
@@ -13417,13 +13469,15 @@ function AncestryBoard({
   const [groups, setGroups] = useState27([]);
   const [isLoaded, setIsLoaded] = useState27(false);
   const [saveStatus, setSaveStatus] = useState27("idle");
+  const [navigationStack, setNavigationStack] = useState27([]);
   const canEdit = useMemo12(() => userRole !== "viewer", [userRole]);
   useEffect23(() => {
     if (initialGroups && !isLoaded) {
       const migrate = (list) => list.map((g) => ({
         id: g.id || uuidv411(),
+        type: g.type || "group",
+        name: g.name || "",
         content: Array.isArray(g.content) ? g.content : [],
-        // descarta dados legados
         children: migrate(g.children || [])
       }));
       setGroups(migrate(initialGroups));
@@ -13458,6 +13512,8 @@ function AncestryBoard({
   }, [availableAncestries, availableNodes]);
   const sanitizeGroups = (list) => list.map((g) => ({
     id: g.id,
+    type: g.type || "group",
+    name: g.name || "",
     content: g.content || [],
     children: sanitizeGroups(g.children || [])
   }));
@@ -13488,23 +13544,72 @@ function AncestryBoard({
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
   }, [isOpen, onClose]);
-  const handleAddRootGroup = () => {
-    setGroups((prev) => [{ id: uuidv411(), content: [], children: [] }, ...prev]);
+  const currentPath = useMemo12(() => {
+    const path = [];
+    let currentLevel = groups;
+    for (const folderId of navigationStack) {
+      const folder = currentLevel.find((f) => f.id === folderId);
+      if (folder) {
+        path.push(folder);
+        currentLevel = folder.children;
+      }
+    }
+    return path;
+  }, [groups, navigationStack]);
+  const currentGroups = useMemo12(() => {
+    const lastFolder = currentPath[currentPath.length - 1];
+    return lastFolder ? lastFolder.children : groups;
+  }, [groups, currentPath]);
+  const navigateUp = () => {
+    setNavigationStack((prev) => prev.slice(0, -1));
+  };
+  const navigateTo = (folderId) => {
+    setNavigationStack((prev) => [...prev, folderId]);
+  };
+  const navigateToBreadcrumb = (index) => {
+    setNavigationStack((prev) => prev.slice(0, index + 1));
   };
-  const handleAddSubgroup = (parentId) => {
-    const newGroup = { id: uuidv411(), content: [], children: [] };
+  const navigateHome = () => {
+    setNavigationStack([]);
+  };
+  const handleAddItem = (type = "group") => {
+    const newItem = {
+      id: uuidv411(),
+      type,
+      name: type === "folder" ? "Nova Pasta" : "",
+      content: [],
+      children: []
+    };
+    if (navigationStack.length === 0) {
+      setGroups((prev) => [newItem, ...prev]);
+    } else {
+      const parentId = navigationStack[navigationStack.length - 1];
+      const add = (list) => list.map(
+        (g) => g.id === parentId ? { ...g, children: [newItem, ...g.children] } : { ...g, children: add(g.children) }
+      );
+      setGroups((prev) => add(prev));
+    }
+  };
+  const handleAddSubgroup = (parentId, type = "group") => {
+    const newItem = {
+      id: uuidv411(),
+      type,
+      name: type === "folder" ? "Nova Pasta" : "",
+      content: [],
+      children: []
+    };
     const add = (list) => list.map(
-      (g) => g.id === parentId ? { ...g, children: [newGroup, ...g.children] } : { ...g, children: add(g.children) }
+      (g) => g.id === parentId ? { ...g, children: [newItem, ...g.children] } : { ...g, children: add(g.children) }
     );
     setGroups((prev) => add(prev));
   };
-  const handleUpdateGroup = (id, newData) => {
+  const handleUpdateItem = (id, newData) => {
     const update = (list) => list.map(
       (g) => g.id === id ? newData : { ...g, children: update(g.children) }
     );
     setGroups((prev) => update(prev));
   };
-  const handleDeleteGroup = (id) => {
+  const handleDeleteItem = (id) => {
     const del = (list) => list.filter((g) => g.id !== id).map((g) => ({ ...g, children: del(g.children) }));
     setGroups((prev) => del(prev));
   };
@@ -13562,15 +13667,23 @@ function AncestryBoard({
         className: "bg-slate-950 border border-white/10 rounded-xl w-[98vw] h-[97vh] flex flex-col shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200",
         onClick: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ React28.createElement("div", { className: "h-14 px-4 border-b border-white/10 bg-slate-900/90 flex items-center justify-between shrink-0" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-base font-semibold text-white flex items-center gap-2 whitespace-nowrap" }, /* @__PURE__ */ React28.createElement(FiLayers7, { className: "text-indigo-400" }), "Ancestry Board"), saveStatus !== "idle" && /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/10 mx-1" }), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-slate-900/50 border border-white/5" }, saveStatus === "saving" && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(FiLoader5, { className: "animate-spin text-indigo-400", size: 12 }), /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-indigo-300" }, "Salvando")), saveStatus === "saved" && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(FiCheckCircle, { className: "text-emerald-400", size: 12 }), /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-slate-400" }, "Salvo")), saveStatus === "error" && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("span", { className: "w-2 h-2 rounded-full bg-red-500" }), /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-red-400" }, "Erro"))))), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-3" }, canEdit && /* @__PURE__ */ React28.createElement(
+      /* @__PURE__ */ React28.createElement("div", { className: "h-14 px-4 border-b border-white/10 bg-slate-900/90 flex items-center justify-between shrink-0" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-base font-semibold text-white flex items-center gap-2 whitespace-nowrap" }, /* @__PURE__ */ React28.createElement(FiLayers7, { className: "text-indigo-400" }), "Ancestry Board"), saveStatus !== "idle" && /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-300" }, /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/10 mx-1" }), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-slate-900/50 border border-white/5" }, saveStatus === "saving" && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(FiLoader5, { className: "animate-spin text-indigo-400", size: 12 }), /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-indigo-300" }, "Salvando")), saveStatus === "saved" && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(FiCheckCircle, { className: "text-emerald-400", size: 12 }), /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-slate-400" }, "Salvo")), saveStatus === "error" && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("span", { className: "w-2 h-2 rounded-full bg-red-500" }), /* @__PURE__ */ React28.createElement("span", { className: "text-[10px] uppercase tracking-wide font-medium text-red-400" }, "Erro"))))), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-3" }, canEdit && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
+        "button",
+        {
+          onClick: () => handleAddItem("folder"),
+          className: "flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 backdrop-blur-sm text-slate-200 hover:text-white rounded-md transition-all duration-200 text-xs font-medium shadow-sm"
+        },
+        /* @__PURE__ */ React28.createElement(FiPlus10, { size: 14, className: "text-amber-400" }),
+        /* @__PURE__ */ React28.createElement("span", { className: "hidden sm:inline" }, "Nova Pasta")
+      ), /* @__PURE__ */ React28.createElement(
         "button",
         {
-          onClick: handleAddRootGroup,
+          onClick: () => handleAddItem("group"),
           className: "flex items-center gap-2 px-3 py-1.5 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 backdrop-blur-sm text-slate-200 hover:text-white rounded-md transition-all duration-200 text-xs font-medium shadow-sm"
         },
         /* @__PURE__ */ React28.createElement(FiPlus10, { size: 14, className: "text-indigo-400" }),
         /* @__PURE__ */ React28.createElement("span", { className: "hidden sm:inline" }, "Novo Grupo")
-      ), /* @__PURE__ */ React28.createElement(
+      )), /* @__PURE__ */ React28.createElement(
         "button",
         {
           onClick: onClose,
@@ -13578,23 +13691,47 @@ function AncestryBoard({
         },
         /* @__PURE__ */ React28.createElement(FiX8, { size: 16 })
       ))),
-      /* @__PURE__ */ React28.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar bg-slate-950/30 p-6 space-y-4" }, groups.length === 0 ? /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col items-center justify-center h-full text-slate-500 gap-3 border-2 border-dashed border-white/5 rounded-xl m-4 bg-slate-900/20" }, /* @__PURE__ */ React28.createElement(FiLayers7, { size: 24, className: "opacity-20" }), /* @__PURE__ */ React28.createElement("p", { className: "text-xs text-center px-4" }, canEdit ? /* @__PURE__ */ React28.createElement(React28.Fragment, null, "Nenhum grupo criado.", /* @__PURE__ */ React28.createElement("br", null), 'Use o bot\xE3o "Novo Grupo" acima.') : /* @__PURE__ */ React28.createElement(React28.Fragment, null, "Nenhum grupo dispon\xEDvel para visualiza\xE7\xE3o."))) : groups.map((group, index) => /* @__PURE__ */ React28.createElement(
-        GroupItem,
+      /* @__PURE__ */ React28.createElement("div", { className: "h-10 px-6 bg-slate-900/40 border-b border-white/5 flex items-center gap-2 text-[10px] uppercase font-bold tracking-widest text-slate-500 overflow-x-auto no-scrollbar whitespace-nowrap" }, /* @__PURE__ */ React28.createElement(
+        "button",
+        {
+          onClick: navigateHome,
+          className: `hover:text-white transition-colors flex items-center gap-1 ${navigationStack.length === 0 ? "text-indigo-400" : ""}`
+        },
+        "Home"
+      ), currentPath.map((folder, idx) => /* @__PURE__ */ React28.createElement(React28.Fragment, { key: folder.id }, /* @__PURE__ */ React28.createElement(FiChevronRight7, { size: 10, className: "shrink-0" }), /* @__PURE__ */ React28.createElement(
+        "button",
+        {
+          onClick: () => navigateToBreadcrumb(idx),
+          className: `hover:text-white transition-colors ${idx === currentPath.length - 1 ? "text-indigo-400" : ""}`
+        },
+        folder.name || "Sem Nome"
+      ))), navigationStack.length > 0 && /* @__PURE__ */ React28.createElement("div", { className: "ml-auto" }, /* @__PURE__ */ React28.createElement(
+        "button",
+        {
+          onClick: navigateUp,
+          className: "flex items-center gap-1 px-2 py-1 rounded bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white transition-all"
+        },
+        /* @__PURE__ */ React28.createElement(FiArrowLeft3, { size: 10 }),
+        /* @__PURE__ */ React28.createElement("span", null, "Voltar")
+      ))),
+      /* @__PURE__ */ React28.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar bg-slate-950/30 p-6 space-y-4" }, currentGroups.length === 0 ? /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col items-center justify-center h-full text-slate-500 gap-3 border-2 border-dashed border-white/5 rounded-xl bg-slate-900/20" }, /* @__PURE__ */ React28.createElement(FiLayers7, { size: 24, className: "opacity-20" }), /* @__PURE__ */ React28.createElement("p", { className: "text-xs text-center px-4" }, canEdit ? /* @__PURE__ */ React28.createElement(React28.Fragment, null, "Esta pasta est\xE1 vazia.", /* @__PURE__ */ React28.createElement("br", null), "Use os bot\xF5es acima para criar conte\xFAdo.") : /* @__PURE__ */ React28.createElement(React28.Fragment, null, "Nenhum conte\xFAdo dispon\xEDvel nesta pasta."))) : currentGroups.map((item, index) => /* @__PURE__ */ React28.createElement(
+        BoardItem,
         {
-          key: group.id,
+          key: item.id,
           index,
-          group,
-          onUpdate: handleUpdateGroup,
-          onDelete: handleDeleteGroup,
+          item,
+          onUpdate: handleUpdateItem,
+          onDelete: handleDeleteItem,
           onAddSubgroup: handleAddSubgroup,
           onIndent: handleIndent,
           onOutdent: handleOutdent,
           searchItems: allSearchableItems,
           onMentionClick: handleMentionClick,
+          onEnterFolder: navigateTo,
           canEdit
         }
       ))),
-      /* @__PURE__ */ React28.createElement("div", { className: "px-5 py-2 border-t border-white/10 bg-slate-950/50 text-xs text-slate-500 flex justify-end flex-shrink-0" }, /* @__PURE__ */ React28.createElement("span", null, groups.length, " grupos raiz"))
+      /* @__PURE__ */ React28.createElement("div", { className: "px-5 py-2 border-t border-white/10 bg-slate-950/50 text-xs text-slate-500 flex justify-end flex-shrink-0" }, /* @__PURE__ */ React28.createElement("span", null, currentGroups.length, " itens nesta visualiza\xE7\xE3o"))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.2.6-dev.13",
+  "version": "1.2.6-dev.14",
   "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
   "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
   "license": "UNLICENSED",