hazo_ui 4.3.0 → 4.6.0

package/dist/index.js

@@ -50,7 +50,7 @@ import TableCell from '@tiptap/extension-table-cell';
 import TableHeader from '@tiptap/extension-table-header';
 import TaskList from '@tiptap/extension-task-list';
 import TaskItem from '@tiptap/extension-task-item';
-import { LuUndo2, LuRedo2, LuMinus, LuPlus, LuBold, LuItalic, LuUnderline, LuStrikethrough, LuSubscript, LuSuperscript, LuLink, LuRemoveFormatting, LuPalette, LuHighlighter, LuAlignLeft, LuAlignCenter, LuAlignRight, LuAlignJustify, LuList, LuListOrdered, LuListChecks, LuIndentDecrease, LuIndentIncrease, LuImage, LuTable, LuTableRowsSplit, LuTableColumnsSplit, LuTrash2, LuGrid3X3, LuVariable, LuPaperclip, LuX, LuFileText, LuFileCode, LuFile } from 'react-icons/lu';
+import { LuBold, LuItalic, LuUnderline, LuAlignLeft, LuAlignCenter, LuAlignRight, LuUndo2, LuRedo2, LuMinus, LuPlus, LuStrikethrough, LuSubscript, LuSuperscript, LuLink, LuRemoveFormatting, LuPalette, LuHighlighter, LuAlignJustify, LuList, LuListOrdered, LuListChecks, LuIndentDecrease, LuIndentIncrease, LuTable, LuTableRowsSplit, LuTableColumnsSplit, LuTrash2, LuGrid3X3, LuVariable, LuPaperclip, LuX, LuImage, LuFileText, LuFileCode, LuFile } from 'react-icons/lu';
 import { RxDividerHorizontal } from 'react-icons/rx';
 import { Extension, Node, mergeAttributes } from '@tiptap/core';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -231,36 +231,14 @@ var buttonVariants = cva(
     }
   }
 );
-var variant_styles = {
-  default: {
-    backgroundColor: "hsl(var(--primary))",
-    color: "hsl(var(--primary-foreground))",
-    border: "1px solid hsl(var(--primary))"
-  },
-  destructive: {
-    backgroundColor: "hsl(var(--destructive))",
-    color: "hsl(var(--destructive-foreground))",
-    border: "1px solid hsl(var(--destructive))"
-  },
-  outline: {
-    backgroundColor: "hsl(var(--background))",
-    color: "hsl(var(--foreground))",
-    border: "1px solid hsl(var(--border))"
-  },
-  secondary: {
-    backgroundColor: "hsl(var(--secondary))",
-    color: "hsl(var(--secondary-foreground))"
-  }
-};
 var Button = React26.forwardRef(
   ({ className, variant, size, asChild = false, style, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const fallback_styles = variant_styles[variant ?? "default"] ?? {};
     return /* @__PURE__ */ jsx(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
-        style: { ...fallback_styles, ...style },
+        style,
         ref,
         ...props
       }
@@ -3245,13 +3223,41 @@ function get_file_extension(filename) {
 function is_image_file(mime_type) {
   return mime_type.startsWith("image/");
 }
+var ALL_ON = {
+  undo_redo: true,
+  block_type: true,
+  font_family: true,
+  font_size: true,
+  bold: true,
+  italic: true,
+  underline: true,
+  strikethrough: true,
+  subscript: true,
+  superscript: true,
+  link: true,
+  clear_formatting: true,
+  text_color: true,
+  highlight_color: true,
+  alignment: true,
+  bullet_list: true,
+  ordered_list: true,
+  task_list: true,
+  indent: true,
+  horizontal_rule: true,
+  image: true,
+  table: true,
+  variables: true,
+  attachment: true
+};
 var ToolbarSeparator = () => /* @__PURE__ */ jsx("div", { className: "cls_rte_toolbar_separator mx-1 h-6 w-px bg-border" });
 var Toolbar = ({
   editor,
   variables = [],
   attachments,
   on_attachments_change,
-  disabled = false
+  disabled = false,
+  toolbar,
+  font_families
 }) => {
   const [link_url, set_link_url] = React26.useState("https://");
   const [link_popover_open, set_link_popover_open] = React26.useState(false);
@@ -3269,13 +3275,15 @@ var Toolbar = ({
   if (!editor) {
     return null;
   }
+  const tb = { ...ALL_ON, ...toolbar };
+  const font_family_options = font_families && font_families.length > 0 ? font_families : FONT_FAMILIES;
   const get_current_font_size = () => {
     const attrs = editor.getAttributes("textStyle");
     return attrs.fontSize || FONT_SIZE_CONFIG.default;
   };
   const get_current_font_family = () => {
     const attrs = editor.getAttributes("textStyle");
-    return attrs.fontFamily || FONT_FAMILIES[0].value;
+    return attrs.fontFamily || font_family_options[0].value;
   };
   const get_current_block_type = () => {
     if (editor.isActive("heading", { level: 1 })) return "heading-1";
@@ -3404,44 +3412,46 @@ var Toolbar = ({
     editor.chain().focus().insertVariable(variable_name).run();
     set_variables_menu_open(false);
   };
-  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "cls_rte_toolbar",
-        "flex flex-wrap items-center gap-0.5",
-        "p-1.5 rounded-t-md",
-        "bg-muted border-b border-border",
-        disabled && "opacity-50 pointer-events-none"
+  const sections = [];
+  if (tb.undo_redo) {
+    sections.push([
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().undo().run(),
+          disabled: !editor.can().undo(),
+          tooltip: "Undo",
+          children: /* @__PURE__ */ jsx(LuUndo2, { className: "h-4 w-4" })
+        },
+        "undo"
       ),
-      children: [
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().undo().run(),
-            disabled: !editor.can().undo(),
-            tooltip: "Undo",
-            children: /* @__PURE__ */ jsx(LuUndo2, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().redo().run(),
-            disabled: !editor.can().redo(),
-            tooltip: "Redo",
-            children: /* @__PURE__ */ jsx(LuRedo2, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsxs(Select, { value: get_current_block_type(), onValueChange: handle_block_type_change, children: [
-          /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[130px] text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: BLOCK_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, className: "text-xs", children: type.label }, type.value)) })
-        ] }),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().redo().run(),
+          disabled: !editor.can().redo(),
+          tooltip: "Redo",
+          children: /* @__PURE__ */ jsx(LuRedo2, { className: "h-4 w-4" })
+        },
+        "redo"
+      )
+    ]);
+  }
+  if (tb.block_type) {
+    sections.push([
+      /* @__PURE__ */ jsxs(Select, { value: get_current_block_type(), onValueChange: handle_block_type_change, children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[130px] text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: BLOCK_TYPES.map((type) => /* @__PURE__ */ jsx(SelectItem, { value: type.value, className: "text-xs", children: type.label }, type.value)) })
+      ] }, "block")
+    ]);
+  }
+  {
+    const items = [];
+    if (tb.font_family) {
+      items.push(
         /* @__PURE__ */ jsxs(Select, { value: get_current_font_family(), onValueChange: handle_font_family_change, children: [
           /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[120px] text-xs", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsx(SelectContent, { children: FONT_FAMILIES.map((font) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(SelectContent, { children: font_family_options.map((font) => /* @__PURE__ */ jsx(
             SelectItem,
             {
               value: font.value,
@@ -3451,7 +3461,11 @@ var Toolbar = ({
             },
             font.value
           )) })
-        ] }),
+        ] }, "family")
+      );
+    }
+    if (tb.font_size) {
+      items.push(
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
           /* @__PURE__ */ jsx(
             ToolbarButton,
@@ -3470,8 +3484,15 @@ var Toolbar = ({
               children: /* @__PURE__ */ jsx(LuPlus, { className: "h-3 w-3" })
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+        ] }, "size")
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  {
+    const items = [];
+    if (tb.bold) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3479,8 +3500,13 @@ var Toolbar = ({
             is_active: editor.isActive("bold"),
             tooltip: "Bold",
             children: /* @__PURE__ */ jsx(LuBold, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "bold"
+        )
+      );
+    }
+    if (tb.italic) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3488,8 +3514,13 @@ var Toolbar = ({
             is_active: editor.isActive("italic"),
             tooltip: "Italic",
             children: /* @__PURE__ */ jsx(LuItalic, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "italic"
+        )
+      );
+    }
+    if (tb.underline) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3497,8 +3528,13 @@ var Toolbar = ({
             is_active: editor.isActive("underline"),
             tooltip: "Underline",
             children: /* @__PURE__ */ jsx(LuUnderline, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "underline"
+        )
+      );
+    }
+    if (tb.strikethrough) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3506,8 +3542,13 @@ var Toolbar = ({
             is_active: editor.isActive("strike"),
             tooltip: "Strikethrough",
             children: /* @__PURE__ */ jsx(LuStrikethrough, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "strike"
+        )
+      );
+    }
+    if (tb.subscript) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3515,8 +3556,13 @@ var Toolbar = ({
             is_active: editor.isActive("subscript"),
             tooltip: "Subscript",
             children: /* @__PURE__ */ jsx(LuSubscript, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "sub"
+        )
+      );
+    }
+    if (tb.superscript) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3524,9 +3570,17 @@ var Toolbar = ({
             is_active: editor.isActive("superscript"),
             tooltip: "Superscript",
             children: /* @__PURE__ */ jsx(LuSuperscript, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+          },
+          "super"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  {
+    const items = [];
+    if (tb.link) {
+      items.push(
         /* @__PURE__ */ jsxs(Popover, { open: link_popover_open, onOpenChange: set_link_popover_open, children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToolbarButton, { is_active: editor.isActive("link"), tooltip: "Link", children: /* @__PURE__ */ jsx(LuLink, { className: "h-4 w-4" }) }) }),
           /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -3555,16 +3609,28 @@ var Toolbar = ({
               )
             ] })
           ] }) })
-        ] }),
+        ] }, "link")
+      );
+    }
+    if (tb.clear_formatting) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
             onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run(),
             tooltip: "Clear formatting",
             children: /* @__PURE__ */ jsx(LuRemoveFormatting, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+          },
+          "clear"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  {
+    const items = [];
+    if (tb.text_color) {
+      items.push(
         /* @__PURE__ */ jsxs(Popover, { open: text_color_open, onOpenChange: set_text_color_open, children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToolbarButton, { tooltip: "Text color", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ jsx(LuPalette, { className: "h-4 w-4" }),
@@ -3603,7 +3669,11 @@ var Toolbar = ({
               ]
             }
           ) })
-        ] }),
+        ] }, "textcolor")
+      );
+    }
+    if (tb.highlight_color) {
+      items.push(
         /* @__PURE__ */ jsxs(Popover, { open: highlight_color_open, onOpenChange: set_highlight_color_open, children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToolbarButton, { tooltip: "Highlight color", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ jsx(LuHighlighter, { className: "h-4 w-4" }),
@@ -3636,45 +3706,59 @@ var Toolbar = ({
               ]
             }
           ) })
-        ] }),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("left").run(),
-            is_active: editor.isActive({ textAlign: "left" }),
-            tooltip: "Align left",
-            children: /* @__PURE__ */ jsx(LuAlignLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("center").run(),
-            is_active: editor.isActive({ textAlign: "center" }),
-            tooltip: "Align center",
-            children: /* @__PURE__ */ jsx(LuAlignCenter, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("right").run(),
-            is_active: editor.isActive({ textAlign: "right" }),
-            tooltip: "Align right",
-            children: /* @__PURE__ */ jsx(LuAlignRight, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("justify").run(),
-            is_active: editor.isActive({ textAlign: "justify" }),
-            tooltip: "Justify",
-            children: /* @__PURE__ */ jsx(LuAlignJustify, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+        ] }, "highlight")
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  if (tb.alignment) {
+    sections.push([
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("left").run(),
+          is_active: editor.isActive({ textAlign: "left" }),
+          tooltip: "Align left",
+          children: /* @__PURE__ */ jsx(LuAlignLeft, { className: "h-4 w-4" })
+        },
+        "align-left"
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("center").run(),
+          is_active: editor.isActive({ textAlign: "center" }),
+          tooltip: "Align center",
+          children: /* @__PURE__ */ jsx(LuAlignCenter, { className: "h-4 w-4" })
+        },
+        "align-center"
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("right").run(),
+          is_active: editor.isActive({ textAlign: "right" }),
+          tooltip: "Align right",
+          children: /* @__PURE__ */ jsx(LuAlignRight, { className: "h-4 w-4" })
+        },
+        "align-right"
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+          is_active: editor.isActive({ textAlign: "justify" }),
+          tooltip: "Justify",
+          children: /* @__PURE__ */ jsx(LuAlignJustify, { className: "h-4 w-4" })
+        },
+        "align-justify"
+      )
+    ]);
+  }
+  {
+    const items = [];
+    if (tb.bullet_list) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3682,8 +3766,13 @@ var Toolbar = ({
             is_active: editor.isActive("bulletList"),
             tooltip: "Bullet list",
             children: /* @__PURE__ */ jsx(LuList, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "bullet"
+        )
+      );
+    }
+    if (tb.ordered_list) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3691,8 +3780,13 @@ var Toolbar = ({
             is_active: editor.isActive("orderedList"),
             tooltip: "Numbered list",
             children: /* @__PURE__ */ jsx(LuListOrdered, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "ordered"
+        )
+      );
+    }
+    if (tb.task_list) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
@@ -3700,56 +3794,71 @@ var Toolbar = ({
             is_active: editor.isActive("taskList"),
             tooltip: "Checklist",
             children: /* @__PURE__ */ jsx(LuListChecks, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => {
-              if (editor.isActive("listItem")) {
-                editor.chain().focus().liftListItem("listItem").run();
-              } else if (editor.isActive("taskItem")) {
-                editor.chain().focus().liftListItem("taskItem").run();
-              }
-            },
-            disabled: !editor.can().liftListItem("listItem") && !editor.can().liftListItem("taskItem"),
-            tooltip: "Decrease indent",
-            children: /* @__PURE__ */ jsx(LuIndentDecrease, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: () => {
-              if (editor.isActive("listItem")) {
-                editor.chain().focus().sinkListItem("listItem").run();
-              } else if (editor.isActive("taskItem")) {
-                editor.chain().focus().sinkListItem("taskItem").run();
-              }
-            },
-            disabled: !editor.can().sinkListItem("listItem") && !editor.can().sinkListItem("taskItem"),
-            tooltip: "Increase indent",
-            children: /* @__PURE__ */ jsx(LuIndentIncrease, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsx(
-          ToolbarButton,
-          {
-            onClick: handle_hr_insert,
-            tooltip: "Horizontal rule",
-            children: /* @__PURE__ */ jsx(RxDividerHorizontal, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "task"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  if (tb.indent) {
+    sections.push([
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => {
+            if (editor.isActive("listItem")) {
+              editor.chain().focus().liftListItem("listItem").run();
+            } else if (editor.isActive("taskItem")) {
+              editor.chain().focus().liftListItem("taskItem").run();
+            }
+          },
+          disabled: !editor.can().liftListItem("listItem") && !editor.can().liftListItem("taskItem"),
+          tooltip: "Decrease indent",
+          children: /* @__PURE__ */ jsx(LuIndentDecrease, { className: "h-4 w-4" })
+        },
+        "indent-dec"
+      ),
+      /* @__PURE__ */ jsx(
+        ToolbarButton,
+        {
+          onClick: () => {
+            if (editor.isActive("listItem")) {
+              editor.chain().focus().sinkListItem("listItem").run();
+            } else if (editor.isActive("taskItem")) {
+              editor.chain().focus().sinkListItem("taskItem").run();
+            }
+          },
+          disabled: !editor.can().sinkListItem("listItem") && !editor.can().sinkListItem("taskItem"),
+          tooltip: "Increase indent",
+          children: /* @__PURE__ */ jsx(LuIndentIncrease, { className: "h-4 w-4" })
+        },
+        "indent-inc"
+      )
+    ]);
+  }
+  {
+    const items = [];
+    if (tb.horizontal_rule) {
+      items.push(
+        /* @__PURE__ */ jsx(ToolbarButton, { onClick: handle_hr_insert, tooltip: "Horizontal rule", children: /* @__PURE__ */ jsx(RxDividerHorizontal, { className: "h-4 w-4" }) }, "hr")
+      );
+    }
+    if (tb.image) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
             onClick: () => image_input_ref.current?.click(),
             tooltip: "Insert image",
             children: /* @__PURE__ */ jsx(LuImage, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "image"
+        )
+      );
+    }
+    if (tb.table) {
+      items.push(
         /* @__PURE__ */ jsxs(Popover, { open: table_menu_open, onOpenChange: set_table_menu_open, children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             ToolbarButton,
@@ -3917,9 +4026,16 @@ var Toolbar = ({
               ] })
             ] })
           ) })
-        ] }),
-        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
-        variables.length > 0 && /* @__PURE__ */ jsxs(Popover, { open: variables_menu_open, onOpenChange: set_variables_menu_open, children: [
+        ] }, "table")
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  {
+    const items = [];
+    if (tb.variables && variables.length > 0) {
+      items.push(
+        /* @__PURE__ */ jsxs(Popover, { open: variables_menu_open, onOpenChange: set_variables_menu_open, children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToolbarButton, { tooltip: "Insert variable", children: /* @__PURE__ */ jsx(LuVariable, { className: "h-4 w-4" }) }) }),
           /* @__PURE__ */ jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
             /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search variables...", className: "h-8 text-xs" }),
@@ -3940,15 +4056,39 @@ var Toolbar = ({
               )) })
             ] })
           ] }) })
-        ] }),
+        ] }, "vars")
+      );
+    }
+    if (tb.attachment) {
+      items.push(
         /* @__PURE__ */ jsx(
           ToolbarButton,
           {
             onClick: () => file_input_ref.current?.click(),
             tooltip: "Attach file",
             children: /* @__PURE__ */ jsx(LuPaperclip, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "attach"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_rte_toolbar",
+        "flex flex-wrap items-center gap-0.5",
+        "p-1.5 rounded-t-md",
+        "bg-muted border-b border-border",
+        disabled && "opacity-50 pointer-events-none"
+      ),
+      children: [
+        sections.map((items, i) => /* @__PURE__ */ jsxs(React26.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+          items
+        ] }, i)),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -4255,7 +4395,9 @@ var HazoUiRte = ({
   max_height = "400px",
   disabled = false,
   className,
-  show_output_viewer = false
+  show_output_viewer = false,
+  toolbar,
+  font_families
 }) => {
   const [attachments, set_attachments] = React26.useState(
     initial_attachments
@@ -4444,7 +4586,9 @@ var HazoUiRte = ({
             variables,
             attachments,
             on_attachments_change: handle_attachments_change,
-            disabled: disabled || is_view_only
+            disabled: disabled || is_view_only,
+            toolbar,
+            font_families
           }
         ),
         show_output_viewer && editor && /* @__PURE__ */ jsx("div", { className: "cls_rte_tabs border-b border-border px-2 pt-2", children: /* @__PURE__ */ jsx(Tabs, { value: active_tab, onValueChange: (v) => set_active_tab(v), children: /* @__PURE__ */ jsxs(TabsList, { className: "h-9", children: [
@@ -4479,6 +4623,102 @@ var HazoUiRte = ({
   );
 };
 HazoUiRte.displayName = "HazoUiRte";
+function CanvasTextToolbar({
+  bold,
+  italic,
+  underline,
+  color: color2 = "#000000",
+  align = "left",
+  onBold,
+  onItalic,
+  onUnderline,
+  onColor,
+  onAlign,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-0.5 p-1.5 rounded-md",
+        "bg-background border border-border shadow-md",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(ToolbarButton, { is_active: bold, onClick: onBold, tooltip: "Bold", children: /* @__PURE__ */ jsx(LuBold, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(ToolbarButton, { is_active: italic, onClick: onItalic, tooltip: "Italic", children: /* @__PURE__ */ jsx(LuItalic, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            is_active: underline,
+            onClick: onUnderline,
+            tooltip: "Underline",
+            children: /* @__PURE__ */ jsx(LuUnderline, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-border" }),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            is_active: align === "left",
+            onClick: () => onAlign?.("left"),
+            tooltip: "Align left",
+            children: /* @__PURE__ */ jsx(LuAlignLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            is_active: align === "center",
+            onClick: () => onAlign?.("center"),
+            tooltip: "Align center",
+            children: /* @__PURE__ */ jsx(LuAlignCenter, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            is_active: align === "right",
+            onClick: () => onAlign?.("right"),
+            tooltip: "Align right",
+            children: /* @__PURE__ */ jsx(LuAlignRight, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mx-1 h-6 w-px bg-border" }),
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: "relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-md hover:bg-accent",
+            title: "Text color",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-muted-foreground", children: "A" }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-0.5 w-4 mt-0.5 rounded-full",
+                    style: { backgroundColor: color2 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: color2,
+                  onChange: (e) => onColor?.(e.target.value),
+                  className: "absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
 var MdEditorLazy = lazy(() => import('@uiw/react-md-editor'));
 var EDITOR_TEXTAREA_SELECTOR = ".w-md-editor-text-input";
 function MarkdownEditor({
@@ -6455,6 +6695,7 @@ function HazoUiDialog({
   sizeWidth = "min(90vw, 600px)",
   sizeHeight = "min(80vh, 800px)",
   fixedSize = false,
+  compact = false,
   openAnimation = "zoom",
   closeAnimation = "zoom",
   variant = "default",
@@ -6501,8 +6742,8 @@ function HazoUiDialog({
   const headerStyles = {
     ...headerBar && {
       backgroundColor: headerBarColor,
-      paddingTop: "1.5rem",
-      paddingBottom: "1.5rem",
+      paddingTop: compact ? "0.625rem" : "1.5rem",
+      paddingBottom: compact ? "0.625rem" : "1.5rem",
       paddingLeft: "1.5rem",
       paddingRight: "1.5rem"
     },
@@ -6608,7 +6849,7 @@ function HazoUiDialog({
               {
                 className: cn(
                   "cls_dialog_header shrink-0",
-                  !headerBar && "p-6 pb-4",
+                  !headerBar && (compact ? "px-6 py-3" : "p-6 pb-4"),
                   has_merged_variant_header && "pb-3",
                   showCloseButton && "pr-10",
                   headerClassName
@@ -6639,7 +6880,11 @@ function HazoUiDialog({
           /* @__PURE__ */ jsx(
             DialogFooter,
             {
-              className: cn("cls_dialog_footer shrink-0 p-6 pt-4", footerClassName),
+              className: cn(
+                "cls_dialog_footer shrink-0",
+                compact ? "px-6 py-2.5" : "p-6 pt-4",
+                footerClassName
+              ),
               style: footerStyles,
               children: footerContent ? (
                 // Custom footer content replaces default buttons
@@ -10852,6 +11097,6 @@ function HazoUiEtaProgress({
   );
 }
 
-export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DateRangeSelector, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorBanner, ErrorPage, FunnelChart, HazoContextProvider, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiImageCropper, HazoUiImageCropperDialog, HazoUiKanban, HazoUiKanbanFilter, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputAffix, InverseSparkline, Label3 as Label, LoadingTimeout, MarkdownEditor, NotificationCountBadge, NotificationItem, NotificationPanel, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Slider, Sparkline, Spinner, StackedBars, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyKanbanFilter, buttonGroupVariants, celebrate, cn, computeEta, create_command_suggestion_extension, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, median, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useIsMobile, useLoadingState, useLocalStorage, useMediaQuery, useSessionStorage, useViewport, useWakeLock, use_fullscreen, use_wake_lock };
+export { ANIMATION_PRESETS, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CELEBRATION_GRADIENT, Calendar, CanvasTextToolbar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CelebrationProvider, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, CommandNodeExtension, CommandPill, CommandPopover, DateRangeSelector, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorBanner, ErrorPage, FunnelChart, HazoContextProvider, HazoUiConfirmDialog, HazoUiDialog, DialogClose as HazoUiDialogClose, DialogContent as HazoUiDialogContent, DialogDescription as HazoUiDialogDescription, DialogFooter as HazoUiDialogFooter, DialogHeader as HazoUiDialogHeader, DialogOverlay as HazoUiDialogOverlay, DialogPortal as HazoUiDialogPortal, Dialog as HazoUiDialogRoot, DialogTitle as HazoUiDialogTitle, DialogTrigger as HazoUiDialogTrigger, HazoUiEtaProgress, HazoUiFlexInput, HazoUiFlexRadio, HazoUiImageCropper, HazoUiImageCropperDialog, HazoUiKanban, HazoUiKanbanFilter, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiPillRadio, HazoUiProgressBar, HazoUiRte, HazoUiTable, HazoUiTextarea, HazoUiTextbox, HazoUiToaster, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputAffix, InverseSparkline, Label3 as Label, LoadingTimeout, MarkdownEditor, NotificationCountBadge, NotificationItem, NotificationPanel, Popover, PopoverContent, PopoverTrigger, ProgressiveImage, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Command as ShadcnCommand, CommandEmpty as ShadcnCommandEmpty, CommandGroup as ShadcnCommandGroup, CommandInput as ShadcnCommandInput, CommandItem as ShadcnCommandItem, CommandList as ShadcnCommandList, Skeleton, SkeletonBar, SkeletonCircle, SkeletonGroup, SkeletonRect, Slider, Sparkline, Spinner, StackedBars, Switch, Table2 as Table, TableBody, TableCaption, TableCell2 as TableCell, TableFooter, TableHead, TableHeader2 as TableHeader, TableRow2 as TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyKanbanFilter, buttonGroupVariants, celebrate, cn, computeEta, create_command_suggestion_extension, easeToward, errorToast, format_num, generateUUID, get_hazo_ui_config, get_logger, median, parse_commands_from_text, pick_x_label_indices, reset_hazo_ui_config, resolve_animation_classes, set_hazo_ui_config, set_logger, successToast, text_to_tiptap_content, toggleVariants, useClickOutside, useCopyToClipboard, useDebounce, useErrorDisplay, useEtaProgress, useFullscreen, useIsMobile, useLoadingState, useLocalStorage, useMediaQuery, useSessionStorage, useViewport, useWakeLock, use_fullscreen, use_wake_lock };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map