hazo_ui 4.3.0 → 4.6.0

package/dist/index.cjs

@@ -301,36 +301,14 @@ var buttonVariants = classVarianceAuthority.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__namespace.forwardRef(
   ({ className, variant, size, asChild = false, style, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
-    const fallback_styles = variant_styles[variant ?? "default"] ?? {};
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
-        style: { ...fallback_styles, ...style },
+        style,
         ref,
         ...props
       }
@@ -3315,13 +3293,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__ */ jsxRuntime.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__namespace.useState("https://");
   const [link_popover_open, set_link_popover_open] = React26__namespace.useState(false);
@@ -3339,13 +3345,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";
@@ -3474,44 +3482,46 @@ var Toolbar = ({
     editor.chain().focus().insertVariable(variable_name).run();
     set_variables_menu_open(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().undo().run(),
+          disabled: !editor.can().undo(),
+          tooltip: "Undo",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUndo2, { className: "h-4 w-4" })
+        },
+        "undo"
       ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().undo().run(),
-            disabled: !editor.can().undo(),
-            tooltip: "Undo",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUndo2, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().redo().run(),
-            disabled: !editor.can().redo(),
-            tooltip: "Redo",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRedo2, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: get_current_block_type(), onValueChange: handle_block_type_change, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-[130px] text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: BLOCK_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: type.value, className: "text-xs", children: type.label }, type.value)) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().redo().run(),
+          disabled: !editor.can().redo(),
+          tooltip: "Redo",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRedo2, { className: "h-4 w-4" })
+        },
+        "redo"
+      )
+    ]);
+  }
+  if (tb.block_type) {
+    sections.push([
+      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: get_current_block_type(), onValueChange: handle_block_type_change, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-[130px] text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: BLOCK_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: type.value, className: "text-xs", children: type.label }, type.value)) })
+      ] }, "block")
+    ]);
+  }
+  {
+    const items = [];
+    if (tb.font_family) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: get_current_font_family(), onValueChange: handle_font_family_change, children: [
           /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-8 w-[120px] text-xs", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: FONT_FAMILIES.map((font) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: font_family_options.map((font) => /* @__PURE__ */ jsxRuntime.jsx(
             SelectItem,
             {
               value: font.value,
@@ -3521,7 +3531,11 @@ var Toolbar = ({
             },
             font.value
           )) })
-        ] }),
+        ] }, "family")
+      );
+    }
+    if (tb.font_size) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             ToolbarButton,
@@ -3540,8 +3554,15 @@ var Toolbar = ({
               children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPlus, { className: "h-3 w-3" })
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
+        ] }, "size")
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  {
+    const items = [];
+    if (tb.bold) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3549,8 +3570,13 @@ var Toolbar = ({
             is_active: editor.isActive("bold"),
             tooltip: "Bold",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuBold, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "bold"
+        )
+      );
+    }
+    if (tb.italic) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3558,8 +3584,13 @@ var Toolbar = ({
             is_active: editor.isActive("italic"),
             tooltip: "Italic",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuItalic, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "italic"
+        )
+      );
+    }
+    if (tb.underline) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3567,8 +3598,13 @@ var Toolbar = ({
             is_active: editor.isActive("underline"),
             tooltip: "Underline",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUnderline, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "underline"
+        )
+      );
+    }
+    if (tb.strikethrough) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3576,8 +3612,13 @@ var Toolbar = ({
             is_active: editor.isActive("strike"),
             tooltip: "Strikethrough",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuStrikethrough, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "strike"
+        )
+      );
+    }
+    if (tb.subscript) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3585,8 +3626,13 @@ var Toolbar = ({
             is_active: editor.isActive("subscript"),
             tooltip: "Subscript",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSubscript, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "sub"
+        )
+      );
+    }
+    if (tb.superscript) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3594,9 +3640,17 @@ var Toolbar = ({
             is_active: editor.isActive("superscript"),
             tooltip: "Superscript",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuSuperscript, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
+          },
+          "super"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  {
+    const items = [];
+    if (tb.link) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: link_popover_open, onOpenChange: set_link_popover_open, children: [
           /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { is_active: editor.isActive("link"), tooltip: "Link", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuLink, { className: "h-4 w-4" }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-80 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
@@ -3625,16 +3679,28 @@ var Toolbar = ({
               )
             ] })
           ] }) })
-        ] }),
+        ] }, "link")
+      );
+    }
+    if (tb.clear_formatting) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
             onClick: () => editor.chain().focus().unsetAllMarks().clearNodes().run(),
             tooltip: "Clear formatting",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRemoveFormatting, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
+          },
+          "clear"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  {
+    const items = [];
+    if (tb.text_color) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: text_color_open, onOpenChange: set_text_color_open, children: [
           /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { tooltip: "Text color", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lu.LuPalette, { className: "h-4 w-4" }),
@@ -3673,7 +3739,11 @@ var Toolbar = ({
               ]
             }
           ) })
-        ] }),
+        ] }, "textcolor")
+      );
+    }
+    if (tb.highlight_color) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: highlight_color_open, onOpenChange: set_highlight_color_open, children: [
           /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { tooltip: "Highlight color", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lu.LuHighlighter, { className: "h-4 w-4" }),
@@ -3706,45 +3776,59 @@ var Toolbar = ({
               ]
             }
           ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("left").run(),
-            is_active: editor.isActive({ textAlign: "left" }),
-            tooltip: "Align left",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignLeft, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("center").run(),
-            is_active: editor.isActive({ textAlign: "center" }),
-            tooltip: "Align center",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignCenter, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("right").run(),
-            is_active: editor.isActive({ textAlign: "right" }),
-            tooltip: "Align right",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignRight, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: () => editor.chain().focus().setTextAlign("justify").run(),
-            is_active: editor.isActive({ textAlign: "justify" }),
-            tooltip: "Justify",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignJustify, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
+        ] }, "highlight")
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  if (tb.alignment) {
+    sections.push([
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("left").run(),
+          is_active: editor.isActive({ textAlign: "left" }),
+          tooltip: "Align left",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignLeft, { className: "h-4 w-4" })
+        },
+        "align-left"
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("center").run(),
+          is_active: editor.isActive({ textAlign: "center" }),
+          tooltip: "Align center",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignCenter, { className: "h-4 w-4" })
+        },
+        "align-center"
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("right").run(),
+          is_active: editor.isActive({ textAlign: "right" }),
+          tooltip: "Align right",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignRight, { className: "h-4 w-4" })
+        },
+        "align-right"
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+          is_active: editor.isActive({ textAlign: "justify" }),
+          tooltip: "Justify",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignJustify, { className: "h-4 w-4" })
+        },
+        "align-justify"
+      )
+    ]);
+  }
+  {
+    const items = [];
+    if (tb.bullet_list) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3752,8 +3836,13 @@ var Toolbar = ({
             is_active: editor.isActive("bulletList"),
             tooltip: "Bullet list",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuList, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "bullet"
+        )
+      );
+    }
+    if (tb.ordered_list) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3761,8 +3850,13 @@ var Toolbar = ({
             is_active: editor.isActive("orderedList"),
             tooltip: "Numbered list",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuListOrdered, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "ordered"
+        )
+      );
+    }
+    if (tb.task_list) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
@@ -3770,56 +3864,71 @@ var Toolbar = ({
             is_active: editor.isActive("taskList"),
             tooltip: "Checklist",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuListChecks, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lu.LuIndentDecrease, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lu.LuIndentIncrease, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ToolbarButton,
-          {
-            onClick: handle_hr_insert,
-            tooltip: "Horizontal rule",
-            children: /* @__PURE__ */ jsxRuntime.jsx(rx.RxDividerHorizontal, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "task"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  if (tb.indent) {
+    sections.push([
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lu.LuIndentDecrease, { className: "h-4 w-4" })
+        },
+        "indent-dec"
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lu.LuIndentIncrease, { className: "h-4 w-4" })
+        },
+        "indent-inc"
+      )
+    ]);
+  }
+  {
+    const items = [];
+    if (tb.horizontal_rule) {
+      items.push(
+        /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { onClick: handle_hr_insert, tooltip: "Horizontal rule", children: /* @__PURE__ */ jsxRuntime.jsx(rx.RxDividerHorizontal, { className: "h-4 w-4" }) }, "hr")
+      );
+    }
+    if (tb.image) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
             onClick: () => image_input_ref.current?.click(),
             tooltip: "Insert image",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuImage, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "image"
+        )
+      );
+    }
+    if (tb.table) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: table_menu_open, onOpenChange: set_table_menu_open, children: [
           /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
             ToolbarButton,
@@ -3987,9 +4096,16 @@ var Toolbar = ({
               ] })
             ] })
           ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
-        variables.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Popover, { open: variables_menu_open, onOpenChange: set_variables_menu_open, children: [
           /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { tooltip: "Insert variable", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuVariable, { className: "h-4 w-4" }) }) }),
           /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(CommandInput, { placeholder: "Search variables...", className: "h-8 text-xs" }),
@@ -4010,15 +4126,39 @@ var Toolbar = ({
               )) })
             ] })
           ] }) })
-        ] }),
+        ] }, "vars")
+      );
+    }
+    if (tb.attachment) {
+      items.push(
         /* @__PURE__ */ jsxRuntime.jsx(
           ToolbarButton,
           {
             onClick: () => file_input_ref.current?.click(),
             tooltip: "Attach file",
             children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuPaperclip, { className: "h-4 w-4" })
-          }
-        ),
+          },
+          "attach"
+        )
+      );
+    }
+    if (items.length) sections.push(items);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(React26__namespace.Fragment, { children: [
+          i > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToolbarSeparator, {}),
+          items
+        ] }, i)),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -4325,7 +4465,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__namespace.useState(
     initial_attachments
@@ -4514,7 +4656,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__ */ jsxRuntime.jsx("div", { className: "cls_rte_tabs border-b border-border px-2 pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(Tabs, { value: active_tab, onValueChange: (v) => set_active_tab(v), children: /* @__PURE__ */ jsxRuntime.jsxs(TabsList, { className: "h-9", children: [
@@ -4549,6 +4693,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__ */ jsxRuntime.jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToolbarButton, { is_active: bold, onClick: onBold, tooltip: "Bold", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuBold, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { is_active: italic, onClick: onItalic, tooltip: "Italic", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuItalic, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            is_active: underline,
+            onClick: onUnderline,
+            tooltip: "Underline",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuUnderline, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            is_active: align === "left",
+            onClick: () => onAlign?.("left"),
+            tooltip: "Align left",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            is_active: align === "center",
+            onClick: () => onAlign?.("center"),
+            tooltip: "Align center",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignCenter, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ToolbarButton,
+          {
+            is_active: align === "right",
+            onClick: () => onAlign?.("right"),
+            tooltip: "Align right",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuAlignRight, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-1 h-6 w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold text-muted-foreground", children: "A" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "h-0.5 w-4 mt-0.5 rounded-full",
+                    style: { backgroundColor: color2 }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.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 = React26.lazy(() => import('@uiw/react-md-editor'));
 var EDITOR_TEXTAREA_SELECTOR = ".w-md-editor-text-input";
 function MarkdownEditor({
@@ -6525,6 +6765,7 @@ function HazoUiDialog({
   sizeWidth = "min(90vw, 600px)",
   sizeHeight = "min(80vh, 800px)",
   fixedSize = false,
+  compact = false,
   openAnimation = "zoom",
   closeAnimation = "zoom",
   variant = "default",
@@ -6571,8 +6812,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"
     },
@@ -6678,7 +6919,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
@@ -6709,7 +6950,11 @@ function HazoUiDialog({
           /* @__PURE__ */ jsxRuntime.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
@@ -10948,6 +11193,7 @@ exports.ButtonGroupSeparator = ButtonGroupSeparator;
 exports.ButtonGroupText = ButtonGroupText;
 exports.CELEBRATION_GRADIENT = CELEBRATION_GRADIENT;
 exports.Calendar = Calendar;
+exports.CanvasTextToolbar = CanvasTextToolbar;
 exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;