@lv-x-software-house/x_view 1.2.6-dev.37 → 1.2.6-dev.39

package/dist/index.mjs

@@ -8485,7 +8485,7 @@ var PRESET_COLORS = [
   "#ffffff",
   "#000000"
 ];
-function ColorPicker({ color, onChange, disabled }) {
+function ColorPicker({ color, onChange, disabled, isCompact = false }) {
   const [isOpen, setIsOpen] = useState13(false);
   const popoverRef = useRef9(null);
   useEffect12(() => {
@@ -8503,27 +8503,87 @@ function ColorPicker({ color, onChange, disabled }) {
       onChange(val.startsWith("#") ? val : "#" + val);
     }
   };
-  return /* @__PURE__ */ React12.createElement("div", { className: "relative w-full", ref: popoverRef }, /* @__PURE__ */ React12.createElement("div", { className: `flex items-center gap-3 bg-slate-900/60 p-2.5 rounded-lg border border-white/10 transition-opacity duration-200 ${disabled ? "opacity-40 pointer-events-none grayscale" : "opacity-100"}` }, /* @__PURE__ */ React12.createElement(
-    "button",
+  if (isCompact) {
+    return /* @__PURE__ */ React12.createElement("div", { className: "relative", ref: popoverRef }, /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        className: `h-5 w-5 rounded border border-white/20 shadow-sm transition-all hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 relative overflow-hidden ${disabled ? "opacity-40 grayscale pointer-events-none" : ""}`,
+        style: { backgroundColor: color },
+        title: "Alterar Cor"
+      },
+      /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
+    ), isOpen && !disabled && /* @__PURE__ */ React12.createElement("div", { className: "absolute bottom-full right-0 mb-2 z-[9999] p-3 bg-slate-950 rounded-xl border border-white/10 shadow-2xl w-[200px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-3 custom-react-colorful" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__PURE__ */ React12.createElement("div", { className: "h-px bg-white/10 my-3" }), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-5 gap-2" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        key: preset,
+        type: "button",
+        onClick: () => {
+          onChange(preset);
+          setIsOpen(false);
+        },
+        className: "w-full aspect-square rounded border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center",
+        style: { backgroundColor: preset },
+        title: preset
+      },
+      (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ React12.createElement(
+        FiCheck6,
+        {
+          className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
+          size: 12
+        }
+      )
+    )))), /* @__PURE__ */ React12.createElement("style", null, `
+        .custom-react-colorful .react-colorful {
+          width: 100%;
+          height: 150px;
+        }
+        .custom-react-colorful .react-colorful__saturation {
+          border-radius: 8px 8px 0 0;
+          border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .custom-react-colorful .react-colorful__hue {
+          height: 16px;
+          border-radius: 0 0 8px 8px;
+          margin-top: 2px;
+        }
+        .custom-react-colorful .react-colorful__pointer {
+          width: 16px;
+          height: 16px;
+          border: 2px solid #fff;
+          box-shadow: 0 1px 4px rgba(0,0,0,0.5);
+        }
+      `));
+  }
+  return /* @__PURE__ */ React12.createElement("div", { className: "relative w-full", ref: popoverRef }, /* @__PURE__ */ React12.createElement(
+    "div",
     {
-      type: "button",
-      onClick: () => !disabled && setIsOpen(!isOpen),
-      className: "h-8 w-12 rounded-md border border-white/10 shadow-sm transition-transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 relative overflow-hidden",
-      style: { backgroundColor: color },
-      title: "Abrir seletor de cor"
+      className: `flex items-center gap-3 bg-slate-900/60 p-2.5 rounded-lg border border-white/10 transition-opacity duration-200 ${disabled ? "opacity-40 pointer-events-none grayscale" : "opacity-100"}`
     },
-    /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
-  ), /* @__PURE__ */ React12.createElement("div", { className: "flex-1 flex items-center gap-2 bg-slate-800/50 rounded-md px-2 py-1.5 border border-white/5 focus-within:border-indigo-500/50 focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all" }, /* @__PURE__ */ React12.createElement(FiHash, { className: "text-slate-500", size: 14 }), /* @__PURE__ */ React12.createElement(
-    "input",
-    {
-      type: "text",
-      value: color.replace("#", ""),
-      onChange: handleInputChange,
-      disabled,
-      className: "w-full bg-transparent border-none focus:ring-0 text-sm text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
-      maxLength: 6
-    }
-  ))), isOpen && !disabled && /* @__PURE__ */ React12.createElement("div", { className: "absolute top-full left-0 mt-2 z-[9999] p-3 bg-slate-950 rounded-xl border border-white/10 shadow-2xl w-[200px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-3 custom-react-colorful" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__PURE__ */ React12.createElement("div", { className: "h-px bg-white/10 my-3" }), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-5 gap-2" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(!isOpen),
+        className: "h-8 w-12 rounded-md border border-white/10 shadow-sm transition-transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 relative overflow-hidden",
+        style: { backgroundColor: color },
+        title: "Abrir seletor de cor"
+      },
+      /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
+    ),
+    /* @__PURE__ */ React12.createElement("div", { className: "flex-1 flex items-center gap-2 bg-slate-800/50 rounded-md px-2 py-1.5 border border-white/5 focus-within:border-indigo-500/50 focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all" }, /* @__PURE__ */ React12.createElement(FiHash, { className: "text-slate-500", size: 14 }), /* @__PURE__ */ React12.createElement(
+      "input",
+      {
+        type: "text",
+        value: color.replace("#", ""),
+        onChange: handleInputChange,
+        disabled,
+        className: "w-full bg-transparent border-none focus:ring-0 text-sm text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
+        maxLength: 6
+      }
+    ))
+  ), isOpen && !disabled && /* @__PURE__ */ React12.createElement("div", { className: "absolute top-full left-0 mt-2 z-[9999] p-3 bg-slate-950 rounded-xl border border-white/10 shadow-2xl w-[200px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-3 custom-react-colorful" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__PURE__ */ React12.createElement("div", { className: "h-px bg-white/10 my-3" }), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-5 gap-2" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ React12.createElement(
     "button",
     {
       key: preset,
@@ -12950,7 +13010,13 @@ function AncestryLinkDetailsPanel({ data, onClose, onOpenImageViewer, onOpenRefe
 }
 
 // src/components/Boards.jsx
-import React28, { useState as useState27, useMemo as useMemo12, useEffect as useEffect23, useRef as useRef20, useCallback as useCallback5 } from "react";
+import React28, {
+  useState as useState27,
+  useMemo as useMemo12,
+  useEffect as useEffect23,
+  useRef as useRef20,
+  useCallback as useCallback5
+} from "react";
 import {
   FiSearch as FiSearch8,
   FiLayers as FiLayers7,
@@ -13339,220 +13405,250 @@ var Tooltip = ({ text, children }) => {
   if (!text) return children;
   return /* @__PURE__ */ React28.createElement("div", { className: "relative group/tooltip" }, children, /* @__PURE__ */ React28.createElement("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-slate-900 border border-white/10 text-white text-[10px] rounded opacity-0 group-hover/tooltip:opacity-100 transition-opacity pointer-events-none whitespace-nowrap z-[3000] shadow-2xl" }, text));
 };
-var BoardItem = React28.memo(({
-  item,
-  index,
-  prevItem,
-  nextItem,
-  onUpdate,
-  onDelete,
-  onAddSubgroup,
-  onIndent,
-  onIndentDown,
-  onOutdent,
-  onMoveUp,
-  onMoveDown,
-  searchItems,
-  onMentionClick,
-  onEnterFolder,
-  canEdit,
-  isAtRoot = false
-}) => {
-  var _a;
-  const isFolder = item.type === "folder";
-  const canMoveUp = index > 0;
-  const canMoveDown = nextItem !== void 0;
-  const getIndentUpTooltip = () => {
-    if (!prevItem) return null;
-    const typeLabel = prevItem.type === "folder" ? "pasta" : "grupo de texto";
-    return isFolder ? prevItem.type === "folder" ? "Aninhar na pasta acima" : null : `Mover para dentro do ${typeLabel} acima`;
-  };
-  const getIndentDownTooltip = () => {
-    if (!nextItem) return null;
-    const typeLabel = nextItem.type === "folder" ? "pasta" : "grupo de texto";
-    return isFolder ? nextItem.type === "folder" ? "Aninhar na pasta abaixo" : null : `Mover para dentro do ${typeLabel} abaixo`;
-  };
-  const showIndentUp = !!getIndentUpTooltip();
-  const showIndentDown = !!getIndentDownTooltip();
-  const handleContentChange = (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: "relative group/item animate-in fade-in zoom-in duration-300 w-[calc(16.66%-14px)] min-w-[160px] h-14 flex-shrink-0" }, /* @__PURE__ */ React28.createElement(
-      "div",
-      {
-        onClick: () => onEnterFolder(item.id),
-        className: "h-full flex items-center gap-3 px-3 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-xl cursor-pointer transition-all duration-300 group/folder relative overflow-hidden"
-      },
-      /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-y-0 left-0 w-1 bg-gradient-to-r from-indigo-500/20 to-transparent opacity-0 group-hover/folder:opacity-100 transition-opacity" }),
-      /* @__PURE__ */ React28.createElement("div", { className: "w-9 h-9 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-400 group-hover/folder:scale-105 group-hover/folder:bg-indigo-500/20 transition-all duration-300 shadow-inner shrink-0" }, /* @__PURE__ */ React28.createElement(FiFolder3, { size: 18 })),
-      /* @__PURE__ */ React28.createElement("div", { className: "flex-1 min-w-0 flex flex-col justify-center" }, canEdit ? /* @__PURE__ */ React28.createElement(
-        "input",
-        {
-          type: "text",
-          value: item.name,
-          onChange: handleNameChange,
-          onClick: (e) => e.stopPropagation(),
-          className: "bg-transparent border-none outline-none text-xs font-semibold text-slate-200 w-full focus:text-white placeholder:text-slate-600 truncate",
-          placeholder: "Nome..."
-        }
-      ) : /* @__PURE__ */ React28.createElement("span", { className: "text-xs font-semibold text-slate-200 block truncate" }, item.name), /* @__PURE__ */ React28.createElement("span", { className: "text-[9px] text-slate-500 uppercase tracking-widest font-bold" }, ((_a = item.children) == null ? void 0 : _a.length) || 0, " itens")),
-      canEdit && /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-y-0 right-1.5 opacity-0 group-hover/folder:opacity-100 transition-all duration-300 z-10 flex items-center" }, /* @__PURE__ */ React28.createElement("div", { className: "flex bg-slate-950/90 backdrop-blur-md p-1 rounded-lg border border-white/10 shadow-2xl items-center" }, /* @__PURE__ */ React28.createElement(Tooltip, { text: "Mover" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React28.createElement(
-        "button",
+var BoardItem = React28.memo(
+  ({
+    item,
+    index,
+    prevItem,
+    nextItem,
+    onUpdate,
+    onDelete,
+    onAddSubgroup,
+    onIndent,
+    onIndentDown,
+    onOutdent,
+    onMoveUp,
+    onMoveDown,
+    searchItems,
+    onMentionClick,
+    onEnterFolder,
+    canEdit,
+    isAtRoot = false
+  }) => {
+    var _a;
+    const isFolder = item.type === "folder";
+    const canMoveUp = index > 0;
+    const canMoveDown = nextItem !== void 0;
+    const getIndentUpTooltip = () => {
+      if (!prevItem) return null;
+      const typeLabel = prevItem.type === "folder" ? "pasta" : "grupo de texto";
+      return isFolder ? prevItem.type === "folder" ? "Aninhar na pasta ao lado" : null : `Mover para dentro do ${typeLabel} acima`;
+    };
+    const getIndentDownTooltip = () => {
+      if (!nextItem) return null;
+      const typeLabel = nextItem.type === "folder" ? "pasta" : "grupo de texto";
+      return isFolder ? nextItem.type === "folder" ? "Aninhar na pasta lado" : null : `Mover para dentro do ${typeLabel} abaixo`;
+    };
+    const showIndentUp = !!getIndentUpTooltip();
+    const showIndentDown = !!getIndentDownTooltip();
+    const handleContentChange = (content) => {
+      onUpdate(item.id, { ...item, content });
+    };
+    const handleNameChange = (e) => {
+      onUpdate(item.id, { ...item, name: e.target.value });
+    };
+    const handleColorChange = (newColor) => {
+      onUpdate(item.id, { ...item, color: newColor });
+    };
+    if (isFolder) {
+      return /* @__PURE__ */ React28.createElement("div", { className: "relative group/item animate-in fade-in zoom-in duration-300 w-[calc(16.66%-14px)] min-w-[160px] h-14 flex-shrink-0" }, /* @__PURE__ */ React28.createElement(
+        "div",
         {
-          onClick: (e) => {
-            e.stopPropagation();
-            onMoveUp(item.id);
-          },
-          disabled: !canMoveUp,
-          className: `p-1 rounded transition-colors ${!canMoveUp ? "text-slate-800 cursor-not-allowed" : "text-slate-400 hover:text-white hover:bg-white/10"}`
+          onClick: () => onEnterFolder(item.id),
+          className: "h-full flex items-center gap-3 px-3 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 rounded-xl cursor-pointer transition-all duration-300 group/folder relative"
         },
-        /* @__PURE__ */ React28.createElement(FiArrowUp, { size: 14 })
-      ), /* @__PURE__ */ React28.createElement(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            onMoveDown(item.id);
+        /* @__PURE__ */ React28.createElement(
+          "div",
+          {
+            className: "absolute inset-y-0 left-0 w-1 opacity-0 group-hover/folder:opacity-100 transition-opacity rounded-l-xl",
+            style: { background: `linear-gradient(to right, ${item.color || "#6366f1"}33, transparent)` }
+          }
+        ),
+        /* @__PURE__ */ React28.createElement(
+          "div",
+          {
+            className: "w-9 h-9 rounded-lg flex items-center justify-center group-hover/folder:scale-105 transition-all duration-300 shadow-inner shrink-0",
+            style: {
+              backgroundColor: `${item.color || "#6366f1"}1a`,
+              // 10% opacity
+              color: item.color || "#6366f1"
+            }
           },
-          disabled: !canMoveDown,
-          className: `p-1 rounded transition-colors ${!canMoveDown ? "text-slate-800 cursor-not-allowed" : "text-slate-400 hover:text-white hover:bg-white/10"}`
-        },
-        /* @__PURE__ */ React28.createElement(FiArrowDown, { size: 14 })
-      ))), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/5 mx-0.5 self-center" }), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Aninhar" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center" }, showIndentUp && /* @__PURE__ */ React28.createElement(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            onIndent(item.id);
+          /* @__PURE__ */ React28.createElement(FiFolder3, { size: 18 })
+        ),
+        /* @__PURE__ */ React28.createElement("div", { className: "flex-1 min-w-0 flex flex-col justify-center" }, canEdit ? /* @__PURE__ */ React28.createElement(
+          "input",
+          {
+            type: "text",
+            value: item.name,
+            onChange: handleNameChange,
+            onClick: (e) => e.stopPropagation(),
+            className: "bg-transparent border-none outline-none text-xs font-semibold text-slate-200 w-full focus:text-white placeholder:text-slate-600 truncate",
+            placeholder: "Nome..."
+          }
+        ) : /* @__PURE__ */ React28.createElement("span", { className: "text-xs font-semibold text-slate-200 block truncate" }, item.name), /* @__PURE__ */ React28.createElement("span", { className: "text-[9px] text-slate-500 uppercase tracking-widest font-bold" }, ((_a = item.children) == null ? void 0 : _a.length) || 0, " itens")),
+        canEdit && /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-y-0 right-1.5 opacity-0 group-hover/folder:opacity-100 transition-all duration-300 z-10 flex items-center" }, /* @__PURE__ */ React28.createElement("div", { className: "flex bg-slate-950/90 backdrop-blur-md p-1 rounded-lg border border-white/10 shadow-2xl items-center" }, /* @__PURE__ */ React28.createElement(Tooltip, { text: "Subir" }, /* @__PURE__ */ React28.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onMoveUp(item.id);
+            },
+            disabled: !canMoveUp,
+            className: `p-1 rounded transition-colors ${!canMoveUp ? "text-slate-800 cursor-not-allowed" : "text-slate-400 hover:text-white hover:bg-white/10"}`
           },
-          className: "p-1 text-slate-400 hover:text-white hover:bg-white/10 rounded transition-colors"
-        },
-        /* @__PURE__ */ React28.createElement(FiArrowLeft3, { size: 14 })
-      ), showIndentDown && /* @__PURE__ */ React28.createElement(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            onIndentDown(item.id);
+          /* @__PURE__ */ React28.createElement(FiArrowUp, { size: 14 })
+        )), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Descer" }, /* @__PURE__ */ React28.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onMoveDown(item.id);
+            },
+            disabled: !canMoveDown,
+            className: `p-1 rounded transition-colors ${!canMoveDown ? "text-slate-800 cursor-not-allowed" : "text-slate-400 hover:text-white hover:bg-white/10"}`
           },
-          className: "p-1 text-slate-400 hover:text-white hover:bg-white/10 rounded transition-colors"
-        },
-        /* @__PURE__ */ React28.createElement(FiArrowRight2, { size: 14 })
-      ))), !isAtRoot && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/5 mx-0.5 self-center" }), /* @__PURE__ */ React28.createElement(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            onOutdent(item.id);
+          /* @__PURE__ */ React28.createElement(FiArrowDown, { size: 14 })
+        )), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/5 mx-0.5 self-center" }), showIndentUp && /* @__PURE__ */ React28.createElement(Tooltip, { text: getIndentUpTooltip() }, /* @__PURE__ */ React28.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onIndent(item.id);
+            },
+            className: "p-1 text-slate-400 hover:text-white hover:bg-white/10 rounded transition-colors"
           },
-          className: `p-1 rounded text-slate-400 hover:text-white hover:bg-white/10 transition-colors`
-        },
-        /* @__PURE__ */ React28.createElement(FiCornerUpLeft3, { size: 14 })
-      )), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/5 mx-0.5 self-center" }), /* @__PURE__ */ React28.createElement(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            onDelete(item.id);
+          /* @__PURE__ */ React28.createElement(FiArrowLeft3, { size: 14 })
+        )), showIndentDown && /* @__PURE__ */ React28.createElement(Tooltip, { text: getIndentDownTooltip() }, /* @__PURE__ */ React28.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onIndentDown(item.id);
+            },
+            className: "p-1 text-slate-400 hover:text-white hover:bg-white/10 rounded transition-colors"
           },
-          className: "p-1 text-slate-500 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors"
-        },
-        /* @__PURE__ */ React28.createElement(FiTrash23, { size: 14 })
-      )))
-    ));
-  }
-  return /* @__PURE__ */ React28.createElement("div", { className: "w-full flex flex-col gap-2 mb-3 pl-4 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_default,
-    {
-      content: item.content,
-      onChange: handleContentChange,
-      onMentionClick,
-      searchItems,
-      readOnly: !canEdit,
-      placeholder: "Escreva sobre este grupo de texto\u2026 ou @ para mencionar"
-    }
-  ), 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(item.id, "text_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 de Texto"
-    },
-    /* @__PURE__ */ React28.createElement(FiPlus10, { size: 12 }),
-    /* @__PURE__ */ React28.createElement("span", null, "Subgrupo")
-  )), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React28.createElement(Tooltip, { text: "Subir" }, /* @__PURE__ */ React28.createElement(
-    "button",
-    {
-      onClick: () => onMoveUp(item.id),
-      disabled: !canMoveUp,
-      className: `p-1.5 rounded transition-colors ${!canMoveUp ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`
-    },
-    /* @__PURE__ */ React28.createElement(FiArrowUp, { size: 14 })
-  )), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Descer" }, /* @__PURE__ */ React28.createElement(
-    "button",
-    {
-      onClick: () => onMoveDown(item.id),
-      disabled: !canMoveDown,
-      className: `p-1.5 rounded transition-colors ${!canMoveDown ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`
-    },
-    /* @__PURE__ */ React28.createElement(FiArrowDown, { size: 14 })
-  )), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-3 bg-white/10 mx-1" }), showIndentUp && /* @__PURE__ */ React28.createElement(Tooltip, { text: getIndentUpTooltip() }, /* @__PURE__ */ React28.createElement(
-    "button",
-    {
-      onClick: () => onIndent(item.id),
-      className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors"
-    },
-    /* @__PURE__ */ React28.createElement(FiArrowLeft3, { size: 14 })
-  )), showIndentDown && /* @__PURE__ */ React28.createElement(Tooltip, { text: getIndentDownTooltip() }, /* @__PURE__ */ React28.createElement(
-    "button",
-    {
-      onClick: () => onIndentDown(item.id),
-      className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors"
-    },
-    /* @__PURE__ */ React28.createElement(FiArrowRight2, { size: 14 })
-  )), !isAtRoot && /* @__PURE__ */ React28.createElement(Tooltip, { text: "Desaninhar / Recuar n\xEDvel" }, /* @__PURE__ */ React28.createElement(
-    "button",
-    {
-      onClick: () => onOutdent(item.id),
-      disabled: !onOutdent,
-      className: `p-1.5 rounded transition-colors ${!onOutdent ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`
-    },
-    /* @__PURE__ */ React28.createElement(FiCornerUpLeft3, { size: 14 })
-  )), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-3 bg-white/10 mx-1" }), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Remover Grupo de Texto" }, /* @__PURE__ */ React28.createElement(
-    "button",
-    {
-      onClick: () => onDelete(item.id),
-      className: "p-1.5 text-slate-600 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors"
-    },
-    /* @__PURE__ */ React28.createElement(FiTrash23, { size: 14 })
-  ))))), 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,
-      prevItem: item.children[idx - 1],
-      nextItem: item.children[idx + 1],
-      item: child,
-      onUpdate,
-      onDelete,
-      onAddSubgroup,
-      onIndent,
-      onIndentDown,
-      onOutdent,
-      onMoveUp,
-      onMoveDown,
-      searchItems,
-      onMentionClick,
-      onEnterFolder,
-      canEdit,
-      isAtRoot: false
+          /* @__PURE__ */ React28.createElement(FiArrowRight2, { size: 14 })
+        )), !isAtRoot && /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/5 mx-0.5 self-center" }), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Desaninhar / Recuar n\xEDvel" }, /* @__PURE__ */ React28.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onOutdent(item.id);
+            },
+            className: `p-1 rounded text-slate-400 hover:text-white hover:bg-white/10 transition-colors`
+          },
+          /* @__PURE__ */ React28.createElement(FiCornerUpLeft3, { size: 14 })
+        ))), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/5 mx-0.5 self-center" }), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Remover Pasta" }, /* @__PURE__ */ React28.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete(item.id);
+            },
+            className: "p-1 text-slate-500 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors"
+          },
+          /* @__PURE__ */ React28.createElement(FiTrash23, { size: 14 })
+        )), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-4 bg-white/5 mx-0.5 self-center" }), /* @__PURE__ */ React28.createElement("div", { className: "px-1", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React28.createElement(
+          ColorPicker,
+          {
+            isCompact: true,
+            color: item.color || "#6366f1",
+            onChange: handleColorChange,
+            disabled: !canEdit
+          }
+        ))))
+      ));
     }
-  ))));
-});
+    return /* @__PURE__ */ React28.createElement("div", { className: "w-full flex flex-col gap-2 mb-3 pl-4 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_default,
+      {
+        content: item.content,
+        onChange: handleContentChange,
+        onMentionClick,
+        searchItems,
+        readOnly: !canEdit,
+        placeholder: "Escreva sobre este grupo de texto\u2026 ou @ para mencionar"
+      }
+    ), 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(item.id, "text_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 de Texto"
+      },
+      /* @__PURE__ */ React28.createElement(FiPlus10, { size: 12 }),
+      /* @__PURE__ */ React28.createElement("span", null, "Subgrupo")
+    )), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React28.createElement(Tooltip, { text: "Subir" }, /* @__PURE__ */ React28.createElement(
+      "button",
+      {
+        onClick: () => onMoveUp(item.id),
+        disabled: !canMoveUp,
+        className: `p-1.5 rounded transition-colors ${!canMoveUp ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`
+      },
+      /* @__PURE__ */ React28.createElement(FiArrowUp, { size: 14 })
+    )), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Descer" }, /* @__PURE__ */ React28.createElement(
+      "button",
+      {
+        onClick: () => onMoveDown(item.id),
+        disabled: !canMoveDown,
+        className: `p-1.5 rounded transition-colors ${!canMoveDown ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`
+      },
+      /* @__PURE__ */ React28.createElement(FiArrowDown, { size: 14 })
+    )), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-3 bg-white/10 mx-1" }), showIndentUp && /* @__PURE__ */ React28.createElement(Tooltip, { text: getIndentUpTooltip() }, /* @__PURE__ */ React28.createElement(
+      "button",
+      {
+        onClick: () => onIndent(item.id),
+        className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors"
+      },
+      /* @__PURE__ */ React28.createElement(FiArrowLeft3, { size: 14 })
+    )), showIndentDown && /* @__PURE__ */ React28.createElement(Tooltip, { text: getIndentDownTooltip() }, /* @__PURE__ */ React28.createElement(
+      "button",
+      {
+        onClick: () => onIndentDown(item.id),
+        className: "p-1.5 text-slate-500 hover:text-white hover:bg-white/10 rounded transition-colors"
+      },
+      /* @__PURE__ */ React28.createElement(FiArrowRight2, { size: 14 })
+    )), !isAtRoot && /* @__PURE__ */ React28.createElement(Tooltip, { text: "Desaninhar / Recuar n\xEDvel" }, /* @__PURE__ */ React28.createElement(
+      "button",
+      {
+        onClick: () => onOutdent(item.id),
+        disabled: !onOutdent,
+        className: `p-1.5 rounded transition-colors ${!onOutdent ? "text-slate-800 cursor-not-allowed" : "text-slate-500 hover:text-white hover:bg-white/10"}`
+      },
+      /* @__PURE__ */ React28.createElement(FiCornerUpLeft3, { size: 14 })
+    )), /* @__PURE__ */ React28.createElement("div", { className: "w-px h-3 bg-white/10 mx-1" }), /* @__PURE__ */ React28.createElement(Tooltip, { text: "Remover Grupo de Texto" }, /* @__PURE__ */ React28.createElement(
+      "button",
+      {
+        onClick: () => onDelete(item.id),
+        className: "p-1.5 text-slate-600 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors"
+      },
+      /* @__PURE__ */ React28.createElement(FiTrash23, { size: 14 })
+    ))))), 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,
+        prevItem: item.children[idx - 1],
+        nextItem: item.children[idx + 1],
+        item: child,
+        onUpdate,
+        onDelete,
+        onAddSubgroup,
+        onIndent,
+        onIndentDown,
+        onOutdent,
+        onMoveUp,
+        onMoveDown,
+        searchItems,
+        onMentionClick,
+        onEnterFolder,
+        canEdit,
+        isAtRoot: false
+      }
+    ))));
+  }
+);
 function Boards({
   isOpen,
   onClose,
@@ -13580,13 +13676,17 @@ function Boards({
     }
     return null;
   };
-  const sanitizeBoardItems = useCallback5((list) => list.map((g) => ({
-    id: g.id,
-    type: g.type || "text_group",
-    name: g.name || "",
-    content: g.content || [],
-    children: sanitizeBoardItems(g.children || [])
-  })), []);
+  const sanitizeBoardItems = useCallback5(
+    (list) => list.map((g) => ({
+      id: g.id,
+      type: g.type || "text_group",
+      name: g.name || "",
+      color: g.color || void 0,
+      content: g.content || [],
+      children: sanitizeBoardItems(g.children || [])
+    })),
+    []
+  );
   useEffect23(() => {
     if (initialBoardItems && !isLoaded) {
       const hasLegacyTypes = (list) => list.some(
@@ -13601,6 +13701,7 @@ function Boards({
           id: g.id || uuidv411(),
           type: g.type || "text_group",
           name: g.name || "",
+          color: g.color || void 0,
           content: Array.isArray(g.content) ? g.content : [],
           children: prepare(g.children || [])
         }));
@@ -13658,21 +13759,24 @@ function Boards({
     }, 3e3);
     return () => clearTimeout(id);
   }, [boardItems, isLoaded, onSave, sanitizeBoardItems]);
-  const triggerInstantSave = useCallback5(async (updatedBoardItems) => {
-    if (!onSave) return;
-    const sanitized = sanitizeBoardItems(updatedBoardItems);
-    const sanitizedJson = JSON.stringify(sanitized);
-    lastSavedBoardItemsRef.current = sanitizedJson;
-    setSaveStatus("saving");
-    try {
-      await onSave(sanitized);
-      setSaveStatus("saved");
-      setTimeout(() => setSaveStatus("idle"), 3e3);
-    } catch (err) {
-      console.error("Erro ao salvar board:", err);
-      setSaveStatus("error");
-    }
-  }, [onSave, sanitizeBoardItems]);
+  const triggerInstantSave = useCallback5(
+    async (updatedBoardItems) => {
+      if (!onSave) return;
+      const sanitized = sanitizeBoardItems(updatedBoardItems);
+      const sanitizedJson = JSON.stringify(sanitized);
+      lastSavedBoardItemsRef.current = sanitizedJson;
+      setSaveStatus("saving");
+      try {
+        await onSave(sanitized);
+        setSaveStatus("saved");
+        setTimeout(() => setSaveStatus("idle"), 3e3);
+      } catch (err) {
+        console.error("Erro ao salvar board:", err);
+        setSaveStatus("error");
+      }
+    },
+    [onSave, sanitizeBoardItems]
+  );
   useEffect23(() => {
     if (!isOpen) return;
     const handler = (e) => {
@@ -13701,24 +13805,28 @@ function Boards({
     const lastFolder = currentPath[currentPath.length - 1];
     return lastFolder ? lastFolder.children : boardItems;
   }, [boardItems, currentPath]);
-  const handleAddItem = useCallback5((type = "text_group") => {
-    const newItem = {
-      id: uuidv411(),
-      type,
-      name: type === "folder" ? "Nova Pasta" : "",
-      content: [],
-      children: []
-    };
-    if (navigationStack.length === 0) {
-      setBoardItems((prev) => [...prev, newItem]);
-    } else {
-      const parentId = navigationStack[navigationStack.length - 1];
-      const add = (list) => list.map(
-        (g) => g.id === parentId ? { ...g, children: [...g.children, newItem] } : { ...g, children: add(g.children) }
-      );
-      setBoardItems((prev) => add(prev));
-    }
-  }, [navigationStack]);
+  const handleAddItem = useCallback5(
+    (type = "text_group") => {
+      const newItem = {
+        id: uuidv411(),
+        type,
+        name: type === "folder" ? "Nova Pasta" : "",
+        color: type === "folder" ? "#6366f1" : void 0,
+        content: [],
+        children: []
+      };
+      if (navigationStack.length === 0) {
+        setBoardItems((prev) => [...prev, newItem]);
+      } else {
+        const parentId = navigationStack[navigationStack.length - 1];
+        const add = (list) => list.map(
+          (g) => g.id === parentId ? { ...g, children: [...g.children, newItem] } : { ...g, children: add(g.children) }
+        );
+        setBoardItems((prev) => add(prev));
+      }
+    },
+    [navigationStack]
+  );
   const handleAddSubgroup = useCallback5((parentId, type = "text_group") => {
     const add = (list) => list.map((g) => {
       if (g.id === parentId) {
@@ -13727,6 +13835,7 @@ function Boards({
           id: uuidv411(),
           type,
           name: type === "folder" ? "Nova Pasta" : "",
+          color: type === "folder" ? "#6366f1" : void 0,
           content: [],
           children: []
         };
@@ -13746,70 +13855,88 @@ function Boards({
     const del = (list) => list.filter((g) => g.id !== id).map((g) => ({ ...g, children: del(g.children) }));
     setBoardItems((prev) => del(prev));
   }, []);
-  const handleIndent = useCallback5((id) => {
-    const next = JSON.parse(JSON.stringify(boardItems));
-    const found = findGroupAndParent(next, id);
-    if (!found || found.index === 0) return;
-    const { group, siblings, index } = found;
-    const targetParent = siblings[index - 1];
-    if (group.type === "folder" && targetParent.type === "text_group") return;
-    siblings.splice(index, 1);
-    targetParent.children.push(group);
-    setBoardItems(next);
-    triggerInstantSave(next);
-  }, [boardItems, triggerInstantSave]);
-  const handleIndentDown = useCallback5((id) => {
-    const next = JSON.parse(JSON.stringify(boardItems));
-    const found = findGroupAndParent(next, id);
-    if (!found || found.index === found.siblings.length - 1) return;
-    const { group, siblings, index } = found;
-    const targetParent = siblings[index + 1];
-    if (group.type === "folder" && targetParent.type === "text_group") return;
-    siblings.splice(index, 1);
-    targetParent.children.push(group);
-    setBoardItems(next);
-    triggerInstantSave(next);
-  }, [boardItems, triggerInstantSave]);
-  const handleOutdent = useCallback5((id) => {
-    const next = JSON.parse(JSON.stringify(boardItems));
-    const found = findGroupAndParent(next, id);
-    if (!found || !found.parent) return;
-    const { group, siblings, index, parent } = found;
-    siblings.splice(index, 1);
-    const parentFound = findGroupAndParent(next, parent.id);
-    if (parentFound) {
-      parentFound.siblings.splice(parentFound.index + 1, 0, group);
-    } else {
-      next.push(group);
-    }
-    setBoardItems(next);
-    triggerInstantSave(next);
-  }, [boardItems, triggerInstantSave]);
-  const handleMoveUp = useCallback5((id) => {
-    const next = JSON.parse(JSON.stringify(boardItems));
-    const found = findGroupAndParent(next, id);
-    if (!found || found.index === 0) return;
-    const { siblings, index } = found;
-    const item = siblings[index];
-    siblings.splice(index, 1);
-    siblings.splice(index - 1, 0, item);
-    setBoardItems(next);
-    triggerInstantSave(next);
-  }, [boardItems, triggerInstantSave]);
-  const handleMoveDown = useCallback5((id) => {
-    const next = JSON.parse(JSON.stringify(boardItems));
-    const found = findGroupAndParent(next, id);
-    if (!found || found.index === found.siblings.length - 1) return;
-    const { siblings, index } = found;
-    const item = siblings[index];
-    siblings.splice(index, 1);
-    siblings.splice(index + 1, 0, item);
-    setBoardItems(next);
-    triggerInstantSave(next);
-  }, [boardItems, triggerInstantSave]);
-  const handleMentionClick = useCallback5((item) => {
-    if (onSelect) onSelect(item);
-  }, [onSelect]);
+  const handleIndent = useCallback5(
+    (id) => {
+      const next = JSON.parse(JSON.stringify(boardItems));
+      const found = findGroupAndParent(next, id);
+      if (!found || found.index === 0) return;
+      const { group, siblings, index } = found;
+      const targetParent = siblings[index - 1];
+      if (group.type === "folder" && targetParent.type === "text_group") return;
+      siblings.splice(index, 1);
+      targetParent.children.push(group);
+      setBoardItems(next);
+      triggerInstantSave(next);
+    },
+    [boardItems, triggerInstantSave]
+  );
+  const handleIndentDown = useCallback5(
+    (id) => {
+      const next = JSON.parse(JSON.stringify(boardItems));
+      const found = findGroupAndParent(next, id);
+      if (!found || found.index === found.siblings.length - 1) return;
+      const { group, siblings, index } = found;
+      const targetParent = siblings[index + 1];
+      if (group.type === "folder" && targetParent.type === "text_group") return;
+      siblings.splice(index, 1);
+      targetParent.children.push(group);
+      setBoardItems(next);
+      triggerInstantSave(next);
+    },
+    [boardItems, triggerInstantSave]
+  );
+  const handleOutdent = useCallback5(
+    (id) => {
+      const next = JSON.parse(JSON.stringify(boardItems));
+      const found = findGroupAndParent(next, id);
+      if (!found || !found.parent) return;
+      const { group, siblings, index, parent } = found;
+      siblings.splice(index, 1);
+      const parentFound = findGroupAndParent(next, parent.id);
+      if (parentFound) {
+        parentFound.siblings.splice(parentFound.index + 1, 0, group);
+      } else {
+        next.push(group);
+      }
+      setBoardItems(next);
+      triggerInstantSave(next);
+    },
+    [boardItems, triggerInstantSave]
+  );
+  const handleMoveUp = useCallback5(
+    (id) => {
+      const next = JSON.parse(JSON.stringify(boardItems));
+      const found = findGroupAndParent(next, id);
+      if (!found || found.index === 0) return;
+      const { siblings, index } = found;
+      const item = siblings[index];
+      siblings.splice(index, 1);
+      siblings.splice(index - 1, 0, item);
+      setBoardItems(next);
+      triggerInstantSave(next);
+    },
+    [boardItems, triggerInstantSave]
+  );
+  const handleMoveDown = useCallback5(
+    (id) => {
+      const next = JSON.parse(JSON.stringify(boardItems));
+      const found = findGroupAndParent(next, id);
+      if (!found || found.index === found.siblings.length - 1) return;
+      const { siblings, index } = found;
+      const item = siblings[index];
+      siblings.splice(index, 1);
+      siblings.splice(index + 1, 0, item);
+      setBoardItems(next);
+      triggerInstantSave(next);
+    },
+    [boardItems, triggerInstantSave]
+  );
+  const handleMentionClick = useCallback5(
+    (item) => {
+      if (onSelect) onSelect(item);
+    },
+    [onSelect]
+  );
   const navigateUp = useCallback5(() => {
     setNavigationStack((prev) => prev.slice(0, -1));
   }, []);