hazo_ui 2.2.3 → 2.3.0

package/dist/index.js

@@ -1,10 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import * as React6 from 'react';
-import { useState, useEffect } from 'react';
+import * as React23 from 'react';
+import React23__default, { useRef, useState, useCallback, useEffect, useMemo, Fragment } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { X, ChevronDown, ChevronUp, Check, Circle, Filter, Plus, ChevronsUpDown, ArrowUpDown, Trash2, GripVertical, Calendar as Calendar$1, ChevronRight, ChevronLeft } from 'lucide-react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -28,10 +28,88 @@ import * as IoIcons from 'react-icons/io5';
 import * as RiIcons from 'react-icons/ri';
 import * as TbIcons from 'react-icons/tb';
 import * as CiIcons from 'react-icons/ci';
+import { ReactNodeViewRenderer, NodeViewWrapper, useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { TextStyle } from '@tiptap/extension-text-style';
+import FontFamily from '@tiptap/extension-font-family';
+import Underline from '@tiptap/extension-underline';
+import Subscript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import Link from '@tiptap/extension-link';
+import TextAlign from '@tiptap/extension-text-align';
+import Highlight from '@tiptap/extension-highlight';
+import Color from '@tiptap/extension-color';
+import Image from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import { Table } from '@tiptap/extension-table';
+import TableRow from '@tiptap/extension-table-row';
+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 { RxDividerHorizontal } from 'react-icons/rx';
+import { Extension, Node, mergeAttributes } from '@tiptap/core';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-var ExampleComponent = ({ children, className = "" }) => {
-  return /* @__PURE__ */ jsx("div", { className: `cls_example_component ${className}`, children });
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// node_modules/@babel/runtime/helpers/extends.js
+var require_extends = __commonJS({
+  "node_modules/@babel/runtime/helpers/extends.js"(exports$1, module) {
+    function _extends11() {
+      return module.exports = _extends11 = Object.assign ? Object.assign.bind() : function(n) {
+        for (var e = 1; e < arguments.length; e++) {
+          var t = arguments[e];
+          for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+        }
+        return n;
+      }, module.exports.__esModule = true, module.exports["default"] = module.exports, _extends11.apply(null, arguments);
+    }
+    module.exports = _extends11, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  }
+});
+
+// node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
+var require_objectWithoutPropertiesLoose = __commonJS({
+  "node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports$1, module) {
+    function _objectWithoutPropertiesLoose10(r, e) {
+      if (null == r) return {};
+      var t = {};
+      for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+        if (-1 !== e.indexOf(n)) continue;
+        t[n] = r[n];
+      }
+      return t;
+    }
+    module.exports = _objectWithoutPropertiesLoose10, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -60,7 +138,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React6.forwardRef(
+var Button = React23.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -77,7 +155,7 @@ Button.displayName = "Button";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -89,7 +167,7 @@ var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -139,7 +217,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -151,7 +229,7 @@ var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -160,7 +238,7 @@ var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
-var Command = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Command = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -172,7 +250,7 @@ var Command = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Command.displayName = "Command";
-var CommandInput = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandInput = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "input",
   {
     ref,
@@ -184,7 +262,7 @@ var CommandInput = React6.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandInput.displayName = "CommandInput";
-var CommandList = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -193,7 +271,7 @@ var CommandList = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CommandList.displayName = "CommandList";
-var CommandEmpty = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React23.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -202,7 +280,7 @@ var CommandEmpty = React6.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandGroup = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -214,7 +292,7 @@ var CommandGroup = React6.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React6.forwardRef(({ className, onSelect, value, ...props }, ref) => {
+var CommandItem = React23.forwardRef(({ className, onSelect, value, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -236,7 +314,7 @@ var CommandItem = React6.forwardRef(({ className, onSelect, value, ...props }, r
 CommandItem.displayName = "CommandItem";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React23.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -250,7 +328,7 @@ var PopoverContent = React6.forwardRef(({ className, align = "center", sideOffse
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Input = React6.forwardRef(
+var Input = React23.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -269,7 +347,7 @@ var Input = React6.forwardRef(
 Input.displayName = "Input";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -285,7 +363,7 @@ var SelectTrigger = React6.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -298,7 +376,7 @@ var SelectScrollUpButton = React6.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -311,7 +389,7 @@ var SelectScrollDownButton = React6.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React6.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -339,7 +417,7 @@ var SelectContent = React6.forwardRef(({ className, children, position = "popper
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -348,7 +426,7 @@ var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -364,7 +442,7 @@ var SelectItem = React6.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -376,7 +454,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React6.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React23.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -847,7 +925,7 @@ function HazoUiMultiFilterDialog({
     ] })
   ] });
 }
-var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
     className: cn(
@@ -867,7 +945,7 @@ var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
-var Label2 = React6.forwardRef(
+var Label2 = React23.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "label",
@@ -1161,7 +1239,7 @@ function HazoUiMultiSortDialog({
     ] })
   ] });
 }
-var RadioGroup = React6.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React23.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -1172,7 +1250,7 @@ var RadioGroup = React6.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React6.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React23.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -1526,7 +1604,7 @@ function filterInputValue(value, input_type, num_decimals) {
     }
   }
 }
-var HazoUiFlexInput = React6.forwardRef(
+var HazoUiFlexInput = React23.forwardRef(
   ({
     className,
     input_type = "mixed",
@@ -1543,13 +1621,13 @@ var HazoUiFlexInput = React6.forwardRef(
     onBlur,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React6.useState(
+    const [internalValue, setInternalValue] = React23.useState(
       typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
     );
-    const [errorMessage, setErrorMessage] = React6.useState();
+    const [errorMessage, setErrorMessage] = React23.useState();
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
-    React6.useEffect(() => {
+    React23.useEffect(() => {
       if (isControlled) {
         const newValue = typeof controlledValue === "string" ? controlledValue : String(controlledValue || "");
         if (newValue !== internalValue) {
@@ -1629,7 +1707,2544 @@ var HazoUiFlexInput = React6.forwardRef(
   }
 );
 HazoUiFlexInput.displayName = "HazoUiFlexInput";
+var ToolbarButton = React23.forwardRef(
+  ({ onClick, is_active = false, disabled = false, tooltip, className, children }, ref) => {
+    const button = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick,
+        disabled,
+        className: cn(
+          "cls_rte_toolbar_button",
+          "inline-flex items-center justify-center",
+          "h-8 w-8 rounded-md",
+          "text-sm font-medium",
+          "transition-colors duration-150",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          // Default state
+          "bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+          // Active state
+          is_active && "bg-accent text-accent-foreground",
+          // Disabled state
+          disabled && "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-muted-foreground",
+          className
+        ),
+        children
+      }
+    );
+    if (tooltip) {
+      return /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", className: "text-xs", children: tooltip })
+      ] });
+    }
+    return button;
+  }
+);
+ToolbarButton.displayName = "ToolbarButton";
+
+// node_modules/@uiw/react-color-sketch/esm/index.js
+var import_extends10 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose9 = __toESM(require_objectWithoutPropertiesLoose());
+
+// node_modules/@uiw/react-color-saturation/esm/index.js
+var import_extends3 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose2 = __toESM(require_objectWithoutPropertiesLoose());
+
+// node_modules/@uiw/color-convert/esm/index.js
+var import_extends = __toESM(require_extends());
+var RGB_MAX = 255;
+var SV_MAX = 100;
+var rgbaToHsva = (_ref) => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = _ref;
+  var max = Math.max(r, g, b);
+  var delta = max - Math.min(r, g, b);
+  var hh = delta ? max === r ? (g - b) / delta : max === g ? 2 + (b - r) / delta : 4 + (r - g) / delta : 0;
+  return {
+    h: 60 * (hh < 0 ? hh + 6 : hh),
+    s: max ? delta / max * SV_MAX : 0,
+    v: max / RGB_MAX * SV_MAX,
+    a
+  };
+};
+var hsvaToHslaString = (hsva) => {
+  var {
+    h,
+    s,
+    l,
+    a
+  } = hsvaToHsla(hsva);
+  return "hsla(" + h + ", " + s + "%, " + l + "%, " + a + ")";
+};
+var hsvaToHsla = (_ref5) => {
+  var {
+    h,
+    s,
+    v,
+    a
+  } = _ref5;
+  var hh = (200 - s) * v / SV_MAX;
+  return {
+    h,
+    s: hh > 0 && hh < 200 ? s * v / SV_MAX / (hh <= SV_MAX ? hh : 200 - hh) * SV_MAX : 0,
+    l: hh / 2,
+    a
+  };
+};
+var rgbToHex = (_ref7) => {
+  var {
+    r,
+    g,
+    b
+  } = _ref7;
+  var bin = r << 16 | g << 8 | b;
+  return "#" + ((h) => new Array(7 - h.length).join("0") + h)(bin.toString(16));
+};
+var rgbaToHexa = (_ref8) => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = _ref8;
+  var alpha = typeof a === "number" && (a * 255 | 1 << 8).toString(16).slice(1);
+  return "" + rgbToHex({
+    r,
+    g,
+    b
+  }) + (alpha ? alpha : "");
+};
+var hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
+var hexToRgba = (hex) => {
+  var htemp = hex.replace("#", "");
+  if (/^#?/.test(hex) && htemp.length === 3) {
+    hex = "#" + htemp.charAt(0) + htemp.charAt(0) + htemp.charAt(1) + htemp.charAt(1) + htemp.charAt(2) + htemp.charAt(2);
+  }
+  var reg = new RegExp("[A-Za-z0-9]{2}", "g");
+  var [r, g, b = 0, a] = hex.match(reg).map((v) => parseInt(v, 16));
+  return {
+    r,
+    g,
+    b,
+    a: (a != null ? a : 255) / RGB_MAX
+  };
+};
+var hsvaToRgba = (_ref9) => {
+  var {
+    h,
+    s,
+    v,
+    a
+  } = _ref9;
+  var _h = h / 60, _s = s / SV_MAX, _v = v / SV_MAX, hi = Math.floor(_h) % 6;
+  var f = _h - Math.floor(_h), _p = RGB_MAX * _v * (1 - _s), _q = RGB_MAX * _v * (1 - _s * f), _t = RGB_MAX * _v * (1 - _s * (1 - f));
+  _v *= RGB_MAX;
+  var rgba = {};
+  switch (hi) {
+    case 0:
+      rgba.r = _v;
+      rgba.g = _t;
+      rgba.b = _p;
+      break;
+    case 1:
+      rgba.r = _q;
+      rgba.g = _v;
+      rgba.b = _p;
+      break;
+    case 2:
+      rgba.r = _p;
+      rgba.g = _v;
+      rgba.b = _t;
+      break;
+    case 3:
+      rgba.r = _p;
+      rgba.g = _q;
+      rgba.b = _v;
+      break;
+    case 4:
+      rgba.r = _t;
+      rgba.g = _p;
+      rgba.b = _v;
+      break;
+    case 5:
+      rgba.r = _v;
+      rgba.g = _p;
+      rgba.b = _q;
+      break;
+  }
+  rgba.r = Math.round(rgba.r);
+  rgba.g = Math.round(rgba.g);
+  rgba.b = Math.round(rgba.b);
+  return (0, import_extends.default)({}, rgba, {
+    a
+  });
+};
+var hsvaToRgbaString = (hsva) => {
+  var {
+    r,
+    g,
+    b,
+    a
+  } = hsvaToRgba(hsva);
+  return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")";
+};
+var rgbaToRgb = (_ref0) => {
+  var {
+    r,
+    g,
+    b
+  } = _ref0;
+  return {
+    r,
+    g,
+    b
+  };
+};
+var hslaToHsl = (_ref1) => {
+  var {
+    h,
+    s,
+    l
+  } = _ref1;
+  return {
+    h,
+    s,
+    l
+  };
+};
+var hsvaToHex = (hsva) => rgbToHex(hsvaToRgba(hsva));
+var hsvaToHsv = (_ref10) => {
+  var {
+    h,
+    s,
+    v
+  } = _ref10;
+  return {
+    h,
+    s,
+    v
+  };
+};
+var rgbToXY = (_ref12) => {
+  var {
+    r,
+    g,
+    b
+  } = _ref12;
+  var translateColor = function translateColor2(color2) {
+    return color2 <= 0.04045 ? color2 / 12.92 : Math.pow((color2 + 0.055) / 1.055, 2.4);
+  };
+  var red = translateColor(r / 255);
+  var green = translateColor(g / 255);
+  var blue = translateColor(b / 255);
+  var xyz = {};
+  xyz.x = red * 0.4124 + green * 0.3576 + blue * 0.1805;
+  xyz.y = red * 0.2126 + green * 0.7152 + blue * 0.0722;
+  xyz.bri = red * 0.0193 + green * 0.1192 + blue * 0.9505;
+  return xyz;
+};
+var color = (str) => {
+  var rgb;
+  var hsl;
+  var hsv;
+  var rgba;
+  var hsla;
+  var hsva;
+  var xy;
+  var hex;
+  var hexa;
+  if (typeof str === "string" && validHex(str)) {
+    hsva = hexToHsva(str);
+    hex = str;
+  } else if (typeof str !== "string") {
+    hsva = str;
+  }
+  if (hsva) {
+    hsv = hsvaToHsv(hsva);
+    hsla = hsvaToHsla(hsva);
+    rgba = hsvaToRgba(hsva);
+    hexa = rgbaToHexa(rgba);
+    hex = hsvaToHex(hsva);
+    hsl = hslaToHsl(hsla);
+    rgb = rgbaToRgb(rgba);
+    xy = rgbToXY(rgb);
+  }
+  return {
+    rgb,
+    hsl,
+    hsv,
+    rgba,
+    hsla,
+    hsva,
+    hex,
+    hexa,
+    xy
+  };
+};
+var validHex = (hex) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+
+// node_modules/@uiw/react-drag-event-interactive/esm/index.js
+var import_extends2 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose = __toESM(require_objectWithoutPropertiesLoose());
+function useEventCallback(handler) {
+  var callbackRef = useRef(handler);
+  useEffect(() => {
+    callbackRef.current = handler;
+  });
+  return useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
+}
+var isTouch = (event) => "touches" in event;
+var preventDefaultMove = (event) => {
+  !isTouch(event) && event.preventDefault && event.preventDefault();
+};
+var clamp = function clamp2(number, min, max) {
+  if (min === void 0) {
+    min = 0;
+  }
+  if (max === void 0) {
+    max = 1;
+  }
+  return number > max ? max : number < min ? min : number;
+};
+var getRelativePosition = (node, event) => {
+  var rect = node.getBoundingClientRect();
+  var pointer = isTouch(event) ? event.touches[0] : event;
+  return {
+    left: clamp((pointer.pageX - (rect.left + window.pageXOffset)) / rect.width),
+    top: clamp((pointer.pageY - (rect.top + window.pageYOffset)) / rect.height),
+    width: rect.width,
+    height: rect.height,
+    x: pointer.pageX - (rect.left + window.pageXOffset),
+    y: pointer.pageY - (rect.top + window.pageYOffset)
+  };
+};
+var _excluded = ["prefixCls", "className", "onMove", "onDown"];
+var Interactive = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var {
+    prefixCls = "w-color-interactive",
+    className,
+    onMove,
+    onDown
+  } = props, reset = (0, import_objectWithoutPropertiesLoose.default)(props, _excluded);
+  var container = useRef(null);
+  var hasTouched = useRef(false);
+  var [isDragging, setDragging] = useState(false);
+  var onMoveCallback = useEventCallback(onMove);
+  var onKeyCallback = useEventCallback(onDown);
+  var isValid = (event) => {
+    if (hasTouched.current && !isTouch(event)) return false;
+    hasTouched.current = isTouch(event);
+    return true;
+  };
+  var handleMove = useCallback((event) => {
+    preventDefaultMove(event);
+    if (!container.current) return;
+    var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
+    if (!isDown) {
+      setDragging(false);
+      return;
+    }
+    onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
+  }, [onMoveCallback]);
+  var handleMoveEnd = useCallback(() => setDragging(false), []);
+  var toggleDocumentEvents = useCallback((state) => {
+    if (state) {
+      window.addEventListener(hasTouched.current ? "touchmove" : "mousemove", handleMove);
+      window.addEventListener(hasTouched.current ? "touchend" : "mouseup", handleMoveEnd);
+    } else {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleMoveEnd);
+      window.removeEventListener("touchmove", handleMove);
+      window.removeEventListener("touchend", handleMoveEnd);
+    }
+  }, [handleMove, handleMoveEnd]);
+  useEffect(() => {
+    toggleDocumentEvents(isDragging);
+    return () => {
+      toggleDocumentEvents(false);
+    };
+  }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
+  var handleMoveStart = useCallback((event) => {
+    var activeEl = document.activeElement;
+    activeEl == null || activeEl.blur();
+    preventDefaultMove(event.nativeEvent);
+    if (!isValid(event.nativeEvent)) return;
+    if (!container.current) return;
+    onKeyCallback == null || onKeyCallback(getRelativePosition(container.current, event.nativeEvent), event.nativeEvent);
+    setDragging(true);
+  }, [onKeyCallback]);
+  return /* @__PURE__ */ jsx("div", (0, import_extends2.default)({}, reset, {
+    className: [prefixCls, className || ""].filter(Boolean).join(" "),
+    style: (0, import_extends2.default)({}, reset.style, {
+      touchAction: "none"
+    }),
+    ref: container,
+    tabIndex: 0,
+    onMouseDown: handleMoveStart,
+    onTouchStart: handleMoveStart
+  }));
+});
+Interactive.displayName = "Interactive";
+var esm_default = Interactive;
+var Pointer = (_ref) => {
+  var {
+    className,
+    color: color2,
+    left,
+    top,
+    prefixCls
+  } = _ref;
+  var style = {
+    position: "absolute",
+    top,
+    left
+  };
+  var stylePointer = {
+    "--saturation-pointer-box-shadow": "rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px",
+    width: 6,
+    height: 6,
+    transform: "translate(-3px, -3px)",
+    boxShadow: "var(--saturation-pointer-box-shadow)",
+    borderRadius: "50%",
+    backgroundColor: color2
+  };
+  return useMemo(() => /* @__PURE__ */ jsx("div", {
+    className: prefixCls + "-pointer " + (className || ""),
+    style,
+    children: /* @__PURE__ */ jsx("div", {
+      className: prefixCls + "-fill",
+      style: stylePointer
+    })
+  }), [top, left, color2, className, prefixCls]);
+};
+var _excluded2 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
+var Saturation = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var _hsva$h;
+  var {
+    prefixCls = "w-color-saturation",
+    radius = 0,
+    pointer,
+    className,
+    hue = 0,
+    style,
+    hsva,
+    onChange
+  } = props, other = (0, import_objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  var containerStyle = (0, import_extends3.default)({
+    width: 200,
+    height: 200,
+    borderRadius: radius
+  }, style, {
+    position: "relative"
+  });
+  var handleChange = (interaction, event) => {
+    onChange && hsva && onChange({
+      h: hsva.h,
+      s: interaction.left * 100,
+      v: (1 - interaction.top) * 100,
+      a: hsva.a
+      // source: 'hsv',
+    });
+  };
+  var handleKeyDown = useCallback((event) => {
+    if (!hsva || !onChange) return;
+    var step = 1;
+    var newS = hsva.s;
+    var newV = hsva.v;
+    var changed = false;
+    switch (event.key) {
+      case "ArrowLeft":
+        newS = Math.max(0, hsva.s - step);
+        changed = true;
+        event.preventDefault();
+        break;
+      case "ArrowRight":
+        newS = Math.min(100, hsva.s + step);
+        changed = true;
+        event.preventDefault();
+        break;
+      case "ArrowUp":
+        newV = Math.min(100, hsva.v + step);
+        changed = true;
+        event.preventDefault();
+        break;
+      case "ArrowDown":
+        newV = Math.max(0, hsva.v - step);
+        changed = true;
+        event.preventDefault();
+        break;
+      default:
+        return;
+    }
+    if (changed) {
+      onChange({
+        h: hsva.h,
+        s: newS,
+        v: newV,
+        a: hsva.a
+      });
+    }
+  }, [hsva, onChange]);
+  var pointerElement = useMemo(() => {
+    if (!hsva) return null;
+    var comProps = {
+      top: 100 - hsva.v + "%",
+      left: hsva.s + "%",
+      color: hsvaToHslaString(hsva)
+    };
+    if (pointer && typeof pointer === "function") {
+      return pointer((0, import_extends3.default)({
+        prefixCls
+      }, comProps));
+    }
+    return /* @__PURE__ */ jsx(Pointer, (0, import_extends3.default)({
+      prefixCls
+    }, comProps));
+  }, [hsva, pointer, prefixCls]);
+  var handleClick = useCallback((event) => {
+    event.target.focus();
+  }, []);
+  return /* @__PURE__ */ jsx(esm_default, (0, import_extends3.default)({
+    className: [prefixCls, className || ""].filter(Boolean).join(" ")
+  }, other, {
+    style: (0, import_extends3.default)({
+      position: "absolute",
+      inset: 0,
+      cursor: "crosshair",
+      backgroundImage: "linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(" + ((_hsva$h = hsva == null ? void 0 : hsva.h) != null ? _hsva$h : hue) + ", 100%, 50%))"
+    }, containerStyle, {
+      outline: "none"
+    }),
+    ref,
+    onMove: handleChange,
+    onDown: handleChange,
+    onKeyDown: handleKeyDown,
+    onClick: handleClick,
+    children: pointerElement
+  }));
+});
+Saturation.displayName = "Saturation";
+var esm_default2 = Saturation;
+
+// node_modules/@uiw/react-color-alpha/esm/index.js
+var import_extends5 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose4 = __toESM(require_objectWithoutPropertiesLoose());
+
+// node_modules/@uiw/react-color-alpha/esm/Pointer.js
+var import_extends4 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose3 = __toESM(require_objectWithoutPropertiesLoose());
+var _excluded3 = ["className", "prefixCls", "left", "top", "style", "fillProps"];
+var Pointer2 = (_ref) => {
+  var {
+    className,
+    prefixCls,
+    left,
+    top,
+    style,
+    fillProps
+  } = _ref, reset = (0, import_objectWithoutPropertiesLoose3.default)(_ref, _excluded3);
+  var styleWrapper = (0, import_extends4.default)({}, style, {
+    position: "absolute",
+    left,
+    top
+  });
+  var stylePointer = (0, import_extends4.default)({
+    width: 18,
+    height: 18,
+    boxShadow: "var(--alpha-pointer-box-shadow)",
+    borderRadius: "50%",
+    backgroundColor: "var(--alpha-pointer-background-color)"
+  }, fillProps == null ? void 0 : fillProps.style, {
+    transform: left ? "translate(-9px, -1px)" : "translate(-1px, -9px)"
+  });
+  return /* @__PURE__ */ jsx("div", (0, import_extends4.default)({
+    className: prefixCls + "-pointer " + (className || ""),
+    style: styleWrapper
+  }, reset, {
+    children: /* @__PURE__ */ jsx("div", (0, import_extends4.default)({
+      className: prefixCls + "-fill"
+    }, fillProps, {
+      style: stylePointer
+    }))
+  }));
+};
+var _excluded4 = ["prefixCls", "className", "hsva", "background", "bgProps", "innerProps", "pointerProps", "radius", "width", "height", "direction", "style", "onChange", "pointer"];
+var BACKGROUND_IMG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==";
+var Alpha = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var {
+    prefixCls = "w-color-alpha",
+    className,
+    hsva,
+    background,
+    bgProps = {},
+    innerProps = {},
+    pointerProps = {},
+    radius = 0,
+    width,
+    height = 16,
+    direction = "horizontal",
+    style,
+    onChange,
+    pointer
+  } = props, other = (0, import_objectWithoutPropertiesLoose4.default)(props, _excluded4);
+  var handleChange = (offset) => {
+    onChange && onChange((0, import_extends5.default)({}, hsva, {
+      a: direction === "horizontal" ? offset.left : offset.top
+    }), offset);
+  };
+  var colorTo = hsvaToHslaString(Object.assign({}, hsva, {
+    a: 1
+  }));
+  var innerBackground = "linear-gradient(to " + (direction === "horizontal" ? "right" : "bottom") + ", rgba(244, 67, 54, 0) 0%, " + colorTo + " 100%)";
+  var comProps = {};
+  if (direction === "horizontal") {
+    comProps.left = hsva.a * 100 + "%";
+  } else {
+    comProps.top = hsva.a * 100 + "%";
+  }
+  var styleWrapper = (0, import_extends5.default)({
+    "--alpha-background-color": "#fff",
+    "--alpha-pointer-background-color": "rgb(248, 248, 248)",
+    "--alpha-pointer-box-shadow": "rgb(0 0 0 / 37%) 0px 1px 4px 0px",
+    borderRadius: radius,
+    background: "url(" + BACKGROUND_IMG + ") left center",
+    backgroundColor: "var(--alpha-background-color)"
+  }, {
+    width,
+    height
+  }, style, {
+    position: "relative"
+  });
+  var handleKeyDown = useCallback((event) => {
+    var step = 0.01;
+    var currentAlpha = hsva.a;
+    var newAlpha = currentAlpha;
+    switch (event.key) {
+      case "ArrowLeft":
+        if (direction === "horizontal") {
+          newAlpha = Math.max(0, currentAlpha - step);
+          event.preventDefault();
+        }
+        break;
+      case "ArrowRight":
+        if (direction === "horizontal") {
+          newAlpha = Math.min(1, currentAlpha + step);
+          event.preventDefault();
+        }
+        break;
+      case "ArrowUp":
+        if (direction === "vertical") {
+          newAlpha = Math.max(0, currentAlpha - step);
+          event.preventDefault();
+        }
+        break;
+      case "ArrowDown":
+        if (direction === "vertical") {
+          newAlpha = Math.min(1, currentAlpha + step);
+          event.preventDefault();
+        }
+        break;
+      default:
+        return;
+    }
+    if (newAlpha !== currentAlpha) {
+      var syntheticOffset = {
+        left: direction === "horizontal" ? newAlpha : hsva.a,
+        top: direction === "vertical" ? newAlpha : hsva.a,
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+      };
+      onChange && onChange((0, import_extends5.default)({}, hsva, {
+        a: newAlpha
+      }), syntheticOffset);
+    }
+  }, [hsva, direction, onChange]);
+  var handleClick = useCallback((event) => {
+    event.target.focus();
+  }, []);
+  var pointerElement = pointer && typeof pointer === "function" ? pointer((0, import_extends5.default)({
+    prefixCls
+  }, pointerProps, comProps)) : /* @__PURE__ */ jsx(Pointer2, (0, import_extends5.default)({}, pointerProps, {
+    prefixCls
+  }, comProps));
+  return /* @__PURE__ */ jsxs("div", (0, import_extends5.default)({}, other, {
+    className: [prefixCls, prefixCls + "-" + direction, className || ""].filter(Boolean).join(" "),
+    style: styleWrapper,
+    ref,
+    children: [/* @__PURE__ */ jsx("div", (0, import_extends5.default)({}, bgProps, {
+      style: (0, import_extends5.default)({
+        inset: 0,
+        position: "absolute",
+        background: background || innerBackground,
+        borderRadius: radius
+      }, bgProps.style)
+    })), /* @__PURE__ */ jsx(esm_default, (0, import_extends5.default)({}, innerProps, {
+      style: (0, import_extends5.default)({}, innerProps.style, {
+        inset: 0,
+        zIndex: 1,
+        position: "absolute",
+        outline: "none"
+      }),
+      onMove: handleChange,
+      onDown: handleChange,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: pointerElement
+    }))]
+  }));
+});
+Alpha.displayName = "Alpha";
+var esm_default3 = Alpha;
+
+// node_modules/@uiw/react-color-editable-input/esm/index.js
+var import_extends6 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose5 = __toESM(require_objectWithoutPropertiesLoose());
+var _excluded5 = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
+var validHex2 = (hex) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+var getNumberValue = (value) => Number(String(value).replace(/%/g, ""));
+var EditableInput = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var {
+    prefixCls = "w-color-editable-input",
+    placement = "bottom",
+    label,
+    value: initValue,
+    className,
+    style,
+    labelStyle,
+    inputStyle,
+    onChange,
+    onBlur,
+    renderInput
+  } = props, other = (0, import_objectWithoutPropertiesLoose5.default)(props, _excluded5);
+  var [value, setValue] = useState(initValue);
+  var isFocus = useRef(false);
+  useEffect(() => {
+    if (props.value !== value) {
+      if (!isFocus.current) {
+        setValue(props.value);
+      }
+    }
+  }, [props.value]);
+  function handleChange(evn, valInit) {
+    var value2 = (valInit || evn.target.value).trim().replace(/^#/, "");
+    if (validHex2(value2)) {
+      onChange && onChange(evn, value2);
+    }
+    var val = getNumberValue(value2);
+    if (!isNaN(val)) {
+      onChange && onChange(evn, val);
+    }
+    setValue(value2);
+  }
+  function handleBlur(evn) {
+    isFocus.current = false;
+    setValue(props.value);
+    onBlur && onBlur(evn);
+  }
+  var placementStyle = {};
+  if (placement === "bottom") {
+    placementStyle["flexDirection"] = "column";
+  }
+  if (placement === "top") {
+    placementStyle["flexDirection"] = "column-reverse";
+  }
+  if (placement === "left") {
+    placementStyle["flexDirection"] = "row-reverse";
+  }
+  var wrapperStyle = (0, import_extends6.default)({
+    "--editable-input-label-color": "rgb(153, 153, 153)",
+    "--editable-input-box-shadow": "rgb(204 204 204) 0px 0px 0px 1px inset",
+    "--editable-input-color": "#666",
+    position: "relative",
+    alignItems: "center",
+    display: "flex",
+    fontSize: 11
+  }, placementStyle, style);
+  var editableStyle = (0, import_extends6.default)({
+    width: "100%",
+    paddingTop: 2,
+    paddingBottom: 2,
+    paddingLeft: 3,
+    paddingRight: 3,
+    fontSize: 11,
+    background: "transparent",
+    boxSizing: "border-box",
+    border: "none",
+    color: "var(--editable-input-color)",
+    boxShadow: "var(--editable-input-box-shadow)"
+  }, inputStyle);
+  var inputProps = (0, import_extends6.default)({
+    value,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    autoComplete: "off",
+    onFocus: () => isFocus.current = true
+  }, other, {
+    style: editableStyle,
+    onFocusCapture: (e) => {
+      var elm = e.target;
+      elm.setSelectionRange(elm.value.length, elm.value.length);
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    className: [prefixCls, className || ""].filter(Boolean).join(" "),
+    style: wrapperStyle,
+    children: [renderInput ? renderInput(inputProps, ref) : /* @__PURE__ */ jsx("input", (0, import_extends6.default)({
+      ref
+    }, inputProps)), label && /* @__PURE__ */ jsx("span", {
+      style: (0, import_extends6.default)({
+        color: "var(--editable-input-label-color)",
+        textTransform: "capitalize"
+      }, labelStyle),
+      children: label
+    })]
+  });
+});
+EditableInput.displayName = "EditableInput";
+var esm_default4 = EditableInput;
+
+// node_modules/@uiw/react-color-editable-input-rgba/esm/index.js
+var import_extends7 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose6 = __toESM(require_objectWithoutPropertiesLoose());
+var _excluded6 = ["prefixCls", "hsva", "placement", "rProps", "gProps", "bProps", "aProps", "className", "style", "onChange"];
+var EditableInputRGBA = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var {
+    prefixCls = "w-color-editable-input-rgba",
+    hsva,
+    placement = "bottom",
+    rProps = {},
+    gProps = {},
+    bProps = {},
+    aProps = {},
+    className,
+    style,
+    onChange
+  } = props, other = (0, import_objectWithoutPropertiesLoose6.default)(props, _excluded6);
+  var rgba = hsva ? hsvaToRgba(hsva) : {};
+  function handleBlur(evn) {
+    var value = Number(evn.target.value);
+    if (value && value > 255) {
+      evn.target.value = "255";
+    }
+    if (value && value < 0) {
+      evn.target.value = "0";
+    }
+  }
+  var handleAlphaBlur = (evn) => {
+    var value = Number(evn.target.value);
+    if (value && value > 100) {
+      evn.target.value = "100";
+    }
+    if (value && value < 0) {
+      evn.target.value = "0";
+    }
+  };
+  var handleChange = (value, type, evn) => {
+    if (typeof value === "number") {
+      if (type === "a") {
+        if (value < 0) value = 0;
+        if (value > 100) value = 100;
+        onChange && onChange(color(rgbaToHsva((0, import_extends7.default)({}, rgba, {
+          a: value / 100
+        }))));
+      }
+      if (value > 255) {
+        value = 255;
+        evn.target.value = "255";
+      }
+      if (value < 0) {
+        value = 0;
+        evn.target.value = "0";
+      }
+      if (type === "r") {
+        onChange && onChange(color(rgbaToHsva((0, import_extends7.default)({}, rgba, {
+          r: value
+        }))));
+      }
+      if (type === "g") {
+        onChange && onChange(color(rgbaToHsva((0, import_extends7.default)({}, rgba, {
+          g: value
+        }))));
+      }
+      if (type === "b") {
+        onChange && onChange(color(rgbaToHsva((0, import_extends7.default)({}, rgba, {
+          b: value
+        }))));
+      }
+    }
+  };
+  var roundedAlpha = rgba.a ? Math.round(rgba.a * 100) / 100 : 0;
+  return /* @__PURE__ */ jsxs("div", (0, import_extends7.default)({
+    ref,
+    className: [prefixCls, className || ""].filter(Boolean).join(" ")
+  }, other, {
+    style: (0, import_extends7.default)({
+      fontSize: 11,
+      display: "flex"
+    }, style),
+    children: [/* @__PURE__ */ jsx(esm_default4, (0, import_extends7.default)({
+      label: "R",
+      value: rgba.r || 0,
+      onBlur: handleBlur,
+      placement,
+      onChange: (evn, val) => handleChange(val, "r", evn)
+    }, rProps, {
+      style: (0, import_extends7.default)({}, rProps.style)
+    })), /* @__PURE__ */ jsx(esm_default4, (0, import_extends7.default)({
+      label: "G",
+      value: rgba.g || 0,
+      onBlur: handleBlur,
+      placement,
+      onChange: (evn, val) => handleChange(val, "g", evn)
+    }, gProps, {
+      style: (0, import_extends7.default)({
+        marginLeft: 5
+      }, rProps.style)
+    })), /* @__PURE__ */ jsx(esm_default4, (0, import_extends7.default)({
+      label: "B",
+      value: rgba.b || 0,
+      onBlur: handleBlur,
+      placement,
+      onChange: (evn, val) => handleChange(val, "b", evn)
+    }, bProps, {
+      style: (0, import_extends7.default)({
+        marginLeft: 5
+      }, bProps.style)
+    })), aProps && /* @__PURE__ */ jsx(esm_default4, (0, import_extends7.default)({
+      label: "A",
+      value: parseInt(String(roundedAlpha * 100), 10),
+      onBlur: handleAlphaBlur,
+      placement,
+      onChange: (evn, val) => handleChange(val, "a", evn)
+    }, aProps, {
+      style: (0, import_extends7.default)({
+        marginLeft: 5
+      }, aProps.style)
+    }))]
+  }));
+});
+EditableInputRGBA.displayName = "EditableInputRGBA";
+var esm_default5 = EditableInputRGBA;
+
+// node_modules/@uiw/react-color-hue/esm/index.js
+var import_extends8 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose7 = __toESM(require_objectWithoutPropertiesLoose());
+var _excluded7 = ["prefixCls", "className", "hue", "onChange", "direction"];
+var Hue = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var {
+    prefixCls = "w-color-hue",
+    className,
+    hue = 0,
+    onChange: _onChange,
+    direction = "horizontal"
+  } = props, other = (0, import_objectWithoutPropertiesLoose7.default)(props, _excluded7);
+  return /* @__PURE__ */ jsx(esm_default3, (0, import_extends8.default)({
+    ref,
+    className: prefixCls + " " + (className || "")
+  }, other, {
+    direction,
+    background: "linear-gradient(to " + (direction === "horizontal" ? "right" : "bottom") + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)",
+    hsva: {
+      h: hue,
+      s: 100,
+      v: 100,
+      a: hue / 360
+    },
+    onChange: (_, interaction) => {
+      _onChange && _onChange({
+        h: direction === "horizontal" ? 360 * interaction.left : 360 * interaction.top
+      });
+    }
+  }));
+});
+Hue.displayName = "Hue";
+var esm_default6 = Hue;
+
+// node_modules/@uiw/react-color-swatch/esm/index.js
+var import_extends9 = __toESM(require_extends());
+var import_objectWithoutPropertiesLoose8 = __toESM(require_objectWithoutPropertiesLoose());
+var _excluded8 = ["prefixCls", "className", "color", "colors", "style", "rectProps", "onChange", "addonAfter", "addonBefore", "rectRender"];
+var Swatch = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var {
+    prefixCls = "w-color-swatch",
+    className,
+    color: color2,
+    colors = [],
+    style,
+    rectProps = {},
+    onChange,
+    addonAfter,
+    addonBefore,
+    rectRender
+  } = props, other = (0, import_objectWithoutPropertiesLoose8.default)(props, _excluded8);
+  var rectStyle = (0, import_extends9.default)({
+    "--swatch-background-color": "rgb(144, 19, 254)",
+    background: "var(--swatch-background-color)",
+    height: 15,
+    width: 15,
+    marginRight: 5,
+    marginBottom: 5,
+    cursor: "pointer",
+    position: "relative",
+    outline: "none",
+    borderRadius: 2
+  }, rectProps.style);
+  var handleClick = (hex, evn) => {
+    onChange && onChange(hexToHsva(hex), color(hexToHsva(hex)), evn);
+  };
+  return /* @__PURE__ */ jsxs("div", (0, import_extends9.default)({
+    ref
+  }, other, {
+    className: [prefixCls, className || ""].filter(Boolean).join(" "),
+    style: (0, import_extends9.default)({
+      display: "flex",
+      flexWrap: "wrap",
+      position: "relative"
+    }, style),
+    children: [addonBefore && /* @__PURE__ */ React23__default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
+      var title = "";
+      var background = "";
+      if (typeof item === "string") {
+        title = item;
+        background = item;
+      }
+      if (typeof item === "object" && item.color) {
+        title = item.title || item.color;
+        background = item.color;
+      }
+      var checked = color2 && color2.toLocaleLowerCase() === background.toLocaleLowerCase();
+      var render = rectRender && rectRender({
+        title,
+        color: background,
+        checked: !!checked,
+        style: (0, import_extends9.default)({}, rectStyle, {
+          background
+        }),
+        onClick: (evn) => handleClick(background, evn)
+      });
+      if (render) {
+        return /* @__PURE__ */ jsx(Fragment, {
+          children: render
+        }, idx);
+      }
+      var child = rectProps.children && /* @__PURE__ */ React23__default.isValidElement(rectProps.children) ? /* @__PURE__ */ React23__default.cloneElement(rectProps.children, {
+        color: background,
+        checked
+      }) : null;
+      return /* @__PURE__ */ jsx("div", (0, import_extends9.default)({
+        tabIndex: 0,
+        title,
+        onClick: (evn) => handleClick(background, evn)
+      }, rectProps, {
+        children: child,
+        style: (0, import_extends9.default)({}, rectStyle, {
+          background
+        })
+      }), idx);
+    }), addonAfter && /* @__PURE__ */ React23__default.isValidElement(addonAfter) && addonAfter]
+  }));
+});
+Swatch.displayName = "Swatch";
+var esm_default7 = Swatch;
+var _excluded9 = ["prefixCls", "className", "onChange", "width", "presetColors", "color", "editableDisable", "disableAlpha", "style"];
+var PRESET_COLORS = ["#D0021B", "#F5A623", "#f8e61b", "#8B572A", "#7ED321", "#417505", "#BD10E0", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"];
+var Bar = (props) => /* @__PURE__ */ jsx("div", {
+  style: {
+    boxShadow: "rgb(0 0 0 / 60%) 0px 0px 2px",
+    width: 4,
+    top: 1,
+    bottom: 1,
+    left: props.left,
+    borderRadius: 1,
+    position: "absolute",
+    backgroundColor: "#fff"
+  }
+});
+var Sketch = /* @__PURE__ */ React23__default.forwardRef((props, ref) => {
+  var {
+    prefixCls = "w-color-sketch",
+    className,
+    onChange,
+    width = 218,
+    presetColors = PRESET_COLORS,
+    color: color2,
+    editableDisable = true,
+    disableAlpha = false,
+    style
+  } = props, other = (0, import_objectWithoutPropertiesLoose9.default)(props, _excluded9);
+  var [hsva, setHsva] = useState({
+    h: 209,
+    s: 36,
+    v: 90,
+    a: 1
+  });
+  useEffect(() => {
+    if (typeof color2 === "string" && validHex(color2)) {
+      setHsva(hexToHsva(color2));
+    }
+    if (typeof color2 === "object") {
+      setHsva(color2);
+    }
+  }, [color2]);
+  var handleChange = (hsv) => {
+    setHsva(hsv);
+    onChange && onChange(color(hsv));
+  };
+  var handleHex = (value, evn) => {
+    if (typeof value === "string" && validHex(value) && /(3|6)/.test(String(value.length))) {
+      handleChange(hexToHsva(value));
+    }
+  };
+  var handleAlphaChange = (newAlpha) => handleChange((0, import_extends10.default)({}, hsva, {
+    a: newAlpha.a
+  }));
+  var handleSaturationChange = (newColor) => handleChange((0, import_extends10.default)({}, hsva, newColor, {
+    a: hsva.a
+  }));
+  var styleMain = (0, import_extends10.default)({
+    "--sketch-background": "rgb(255, 255, 255)",
+    "--sketch-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px",
+    "--sketch-swatch-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px inset",
+    "--sketch-alpha-box-shadow": "rgb(0 0 0 / 15%) 0px 0px 0px 1px inset, rgb(0 0 0 / 25%) 0px 0px 4px inset",
+    "--sketch-swatch-border-top": "1px solid rgb(238, 238, 238)",
+    background: "var(--sketch-background)",
+    borderRadius: 4,
+    boxShadow: "var(--sketch-box-shadow)",
+    width
+  }, style);
+  var styleAlpha = {
+    borderRadius: 2,
+    background: hsvaToRgbaString(hsva),
+    boxShadow: "var(--sketch-alpha-box-shadow)"
+  };
+  var styleSwatch = {
+    borderTop: "var(--sketch-swatch-border-top)",
+    paddingTop: 10,
+    paddingLeft: 10
+  };
+  var styleSwatchRect = {
+    marginRight: 10,
+    marginBottom: 10,
+    borderRadius: 3,
+    boxShadow: "var(--sketch-swatch-box-shadow)"
+  };
+  return /* @__PURE__ */ jsxs("div", (0, import_extends10.default)({}, other, {
+    className: prefixCls + " " + (className || ""),
+    ref,
+    style: styleMain,
+    children: [/* @__PURE__ */ jsxs("div", {
+      style: {
+        padding: "10px 10px 8px"
+      },
+      children: [/* @__PURE__ */ jsx(esm_default2, {
+        hsva,
+        style: {
+          width: "auto",
+          height: 150
+        },
+        onChange: handleSaturationChange
+      }), /* @__PURE__ */ jsxs("div", {
+        style: {
+          display: "flex",
+          marginTop: 4
+        },
+        children: [/* @__PURE__ */ jsxs("div", {
+          style: {
+            flex: 1
+          },
+          children: [/* @__PURE__ */ jsx(esm_default6, {
+            width: "auto",
+            height: 10,
+            hue: hsva.h,
+            pointer: Bar,
+            innerProps: {
+              style: {
+                marginLeft: 1,
+                marginRight: 5
+              }
+            },
+            onChange: (newHue) => handleChange((0, import_extends10.default)({}, hsva, newHue))
+          }), !disableAlpha && /* @__PURE__ */ jsx(esm_default3, {
+            width: "auto",
+            height: 10,
+            hsva,
+            pointer: Bar,
+            style: {
+              marginTop: 4
+            },
+            innerProps: {
+              style: {
+                marginLeft: 1,
+                marginRight: 5
+              }
+            },
+            onChange: handleAlphaChange
+          })]
+        }), !disableAlpha && /* @__PURE__ */ jsx(esm_default3, {
+          width: 24,
+          height: 24,
+          hsva,
+          radius: 2,
+          style: {
+            marginLeft: 4
+          },
+          bgProps: {
+            style: {
+              background: "transparent"
+            }
+          },
+          innerProps: {
+            style: styleAlpha
+          },
+          pointer: () => /* @__PURE__ */ jsx(Fragment, {})
+        })]
+      })]
+    }), editableDisable && /* @__PURE__ */ jsxs("div", {
+      style: {
+        display: "flex",
+        margin: "0 10px 3px 10px"
+      },
+      children: [/* @__PURE__ */ jsx(esm_default4, {
+        label: "Hex",
+        value: hsvaToHex(hsva).replace(/^#/, "").toLocaleUpperCase(),
+        onChange: (evn, val) => handleHex(val),
+        style: {
+          minWidth: 58
+        }
+      }), /* @__PURE__ */ jsx(esm_default5, {
+        hsva,
+        style: {
+          marginLeft: 6
+        },
+        aProps: !disableAlpha ? {} : false,
+        onChange: (result) => handleChange(result.hsva)
+      })]
+    }), presetColors && presetColors.length > 0 && /* @__PURE__ */ jsx(esm_default7, {
+      style: styleSwatch,
+      colors: presetColors,
+      color: hsvaToHex(hsva),
+      onChange: (hsvColor) => handleChange(hsvColor),
+      rectProps: {
+        style: styleSwatchRect
+      }
+    })]
+  }));
+});
+Sketch.displayName = "Sketch";
+var esm_default8 = Sketch;
+
+// src/components/hazo_ui_rte/types.ts
+var FONT_FAMILIES = [
+  { label: "Arial", value: "Arial, sans-serif" },
+  { label: "Verdana", value: "Verdana, sans-serif" },
+  { label: "Times New Roman", value: "Times New Roman, serif" },
+  { label: "Georgia", value: "Georgia, serif" },
+  { label: "Courier New", value: "Courier New, monospace" },
+  { label: "Trebuchet MS", value: "Trebuchet MS, sans-serif" }
+];
+var FONT_SIZE_CONFIG = {
+  default: 16,
+  min: 8,
+  max: 72,
+  step: 2
+};
+var BLOCK_TYPES = [
+  { label: "Paragraph", value: "paragraph", icon: "paragraph" },
+  { label: "Heading 1", value: "heading-1", icon: "h1" },
+  { label: "Heading 2", value: "heading-2", icon: "h2" },
+  { label: "Heading 3", value: "heading-3", icon: "h3" },
+  { label: "Numbered List", value: "ordered-list", icon: "list-ordered" },
+  { label: "Bulleted List", value: "bullet-list", icon: "list" },
+  { label: "Check List", value: "task-list", icon: "list-checks" },
+  { label: "Code Block", value: "code-block", icon: "code" },
+  { label: "Quote", value: "blockquote", icon: "quote" }
+];
+
+// src/components/hazo_ui_rte/utils.ts
+function file_to_base64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+async function file_to_attachment(file) {
+  const data = await file_to_base64(file);
+  return {
+    filename: file.name,
+    mime_type: file.type || "application/octet-stream",
+    data
+  };
+}
+function file_to_data_url(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+function format_file_size(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+function get_file_extension(filename) {
+  const parts = filename.split(".");
+  return parts.length > 1 ? parts.pop()?.toLowerCase() || "" : "";
+}
+function is_image_file(mime_type) {
+  return mime_type.startsWith("image/");
+}
+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
+}) => {
+  const [link_url, set_link_url] = React23.useState("https://");
+  const [link_popover_open, set_link_popover_open] = React23.useState(false);
+  const [text_color_open, set_text_color_open] = React23.useState(false);
+  const [highlight_color_open, set_highlight_color_open] = React23.useState(false);
+  const [variables_menu_open, set_variables_menu_open] = React23.useState(false);
+  const [table_menu_open, set_table_menu_open] = React23.useState(false);
+  const [text_color, set_text_color] = React23.useState("#000000");
+  const [highlight_color, set_highlight_color] = React23.useState("#ffff00");
+  const [table_rows, set_table_rows] = React23.useState(3);
+  const [table_cols, set_table_cols] = React23.useState(3);
+  const [hovered_cell, set_hovered_cell] = React23.useState(null);
+  const file_input_ref = React23.useRef(null);
+  const image_input_ref = React23.useRef(null);
+  if (!editor) {
+    return null;
+  }
+  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;
+  };
+  const get_current_block_type = () => {
+    if (editor.isActive("heading", { level: 1 })) return "heading-1";
+    if (editor.isActive("heading", { level: 2 })) return "heading-2";
+    if (editor.isActive("heading", { level: 3 })) return "heading-3";
+    if (editor.isActive("bulletList")) return "bullet-list";
+    if (editor.isActive("orderedList")) return "ordered-list";
+    if (editor.isActive("taskList")) return "task-list";
+    if (editor.isActive("codeBlock")) return "code-block";
+    if (editor.isActive("blockquote")) return "blockquote";
+    return "paragraph";
+  };
+  const handle_block_type_change = (value) => {
+    switch (value) {
+      case "paragraph":
+        editor.chain().focus().setParagraph().run();
+        break;
+      case "heading-1":
+        editor.chain().focus().toggleHeading({ level: 1 }).run();
+        break;
+      case "heading-2":
+        editor.chain().focus().toggleHeading({ level: 2 }).run();
+        break;
+      case "heading-3":
+        editor.chain().focus().toggleHeading({ level: 3 }).run();
+        break;
+      case "bullet-list":
+        editor.chain().focus().toggleBulletList().run();
+        break;
+      case "ordered-list":
+        editor.chain().focus().toggleOrderedList().run();
+        break;
+      case "task-list":
+        editor.chain().focus().toggleTaskList().run();
+        break;
+      case "code-block":
+        editor.chain().focus().toggleCodeBlock().run();
+        break;
+      case "blockquote":
+        editor.chain().focus().toggleBlockquote().run();
+        break;
+    }
+  };
+  const handle_font_family_change = (value) => {
+    editor.chain().focus().setFontFamily(value).run();
+  };
+  const handle_font_size_change = (delta) => {
+    const current = get_current_font_size();
+    const new_size = Math.min(
+      FONT_SIZE_CONFIG.max,
+      Math.max(FONT_SIZE_CONFIG.min, current + delta)
+    );
+    editor.chain().focus().setFontSizeNum(new_size).run();
+  };
+  const handle_set_link = () => {
+    if (link_url && link_url !== "https://") {
+      editor.chain().focus().setLink({ href: link_url }).run();
+      set_link_url("https://");
+      set_link_popover_open(false);
+    }
+  };
+  const handle_remove_link = () => {
+    editor.chain().focus().unsetLink().run();
+    set_link_popover_open(false);
+  };
+  const handle_text_color_change = (color2) => {
+    set_text_color(color2.hex);
+    editor.chain().focus().setColor(color2.hex).run();
+  };
+  const handle_highlight_color_change = (color2) => {
+    set_highlight_color(color2.hex);
+    editor.chain().focus().setHighlight({ color: color2.hex }).run();
+  };
+  const handle_image_insert = async (e) => {
+    const file = e.target.files?.[0];
+    if (file && file.type.startsWith("image/")) {
+      const data_url = await file_to_data_url(file);
+      editor.chain().focus().setImage({ src: data_url }).run();
+    }
+    if (image_input_ref.current) {
+      image_input_ref.current.value = "";
+    }
+  };
+  const handle_file_attach = async (e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const attachment = await file_to_attachment(file);
+      on_attachments_change([...attachments, attachment]);
+    }
+    if (file_input_ref.current) {
+      file_input_ref.current.value = "";
+    }
+  };
+  const handle_table_insert = (rows, cols) => {
+    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+    set_table_menu_open(false);
+    set_table_rows(3);
+    set_table_cols(3);
+    set_hovered_cell(null);
+  };
+  const handle_add_row_before = () => {
+    editor.chain().focus().addRowBefore().run();
+  };
+  const handle_add_row_after = () => {
+    editor.chain().focus().addRowAfter().run();
+  };
+  const handle_delete_row = () => {
+    editor.chain().focus().deleteRow().run();
+  };
+  const handle_add_col_before = () => {
+    editor.chain().focus().addColumnBefore().run();
+  };
+  const handle_add_col_after = () => {
+    editor.chain().focus().addColumnAfter().run();
+  };
+  const handle_delete_col = () => {
+    editor.chain().focus().deleteColumn().run();
+  };
+  const handle_delete_table = () => {
+    editor.chain().focus().deleteTable().run();
+  };
+  const handle_hr_insert = () => {
+    editor.chain().focus().setHorizontalRule().run();
+  };
+  const handle_variable_insert = (variable_name) => {
+    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"
+      ),
+      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__ */ 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(
+            SelectItem,
+            {
+              value: font.value,
+              className: "text-xs",
+              style: { fontFamily: font.value },
+              children: font.label
+            },
+            font.value
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onClick: () => handle_font_size_change(-2),
+              tooltip: "Decrease font size",
+              children: /* @__PURE__ */ jsx(LuMinus, { className: "h-3 w-3" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "w-8 text-center text-xs tabular-nums", children: get_current_font_size() }),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              onClick: () => handle_font_size_change(FONT_SIZE_CONFIG.step),
+              tooltip: "Increase font size",
+              children: /* @__PURE__ */ jsx(LuPlus, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleBold().run(),
+            is_active: editor.isActive("bold"),
+            tooltip: "Bold",
+            children: /* @__PURE__ */ jsx(LuBold, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleItalic().run(),
+            is_active: editor.isActive("italic"),
+            tooltip: "Italic",
+            children: /* @__PURE__ */ jsx(LuItalic, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleUnderline().run(),
+            is_active: editor.isActive("underline"),
+            tooltip: "Underline",
+            children: /* @__PURE__ */ jsx(LuUnderline, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleStrike().run(),
+            is_active: editor.isActive("strike"),
+            tooltip: "Strikethrough",
+            children: /* @__PURE__ */ jsx(LuStrikethrough, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleSubscript().run(),
+            is_active: editor.isActive("subscript"),
+            tooltip: "Subscript",
+            children: /* @__PURE__ */ jsx(LuSubscript, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleSuperscript().run(),
+            is_active: editor.isActive("superscript"),
+            tooltip: "Superscript",
+            children: /* @__PURE__ */ jsx(LuSuperscript, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+        /* @__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: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: link_url,
+                onChange: (e) => set_link_url(e.target.value),
+                placeholder: "https://example.com",
+                className: "h-8 text-sm"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxs(Button, { size: "sm", onClick: handle_set_link, className: "flex-1", children: [
+                editor.isActive("link") ? "Update" : "Add",
+                " Link"
+              ] }),
+              editor.isActive("link") && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "sm",
+                  variant: "destructive",
+                  onClick: handle_remove_link,
+                  children: "Remove"
+                }
+              )
+            ] })
+          ] }) })
+        ] }),
+        /* @__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, {}),
+        /* @__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" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-0.5 w-4 mt-0.5 rounded-full",
+                style: { backgroundColor: text_color }
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+            esm_default8,
+            {
+              color: text_color,
+              onChange: handle_text_color_change,
+              presetColors: [
+                "#000000",
+                "#434343",
+                "#666666",
+                "#999999",
+                "#cccccc",
+                "#ffffff",
+                "#ff0000",
+                "#ff9900",
+                "#ffff00",
+                "#00ff00",
+                "#00ffff",
+                "#0000ff",
+                "#9900ff",
+                "#ff00ff",
+                "#f4cccc",
+                "#fce5cd",
+                "#fff2cc",
+                "#d9ead3"
+              ]
+            }
+          ) })
+        ] }),
+        /* @__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" }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-0.5 w-4 mt-0.5 rounded-full",
+                style: { backgroundColor: highlight_color }
+              }
+            )
+          ] }) }) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+            esm_default8,
+            {
+              color: highlight_color,
+              onChange: handle_highlight_color_change,
+              presetColors: [
+                "#ffff00",
+                "#00ff00",
+                "#00ffff",
+                "#ff00ff",
+                "#ff0000",
+                "#0000ff",
+                "#fff2cc",
+                "#d9ead3",
+                "#cfe2f3",
+                "#ead1dc",
+                "#fce5cd",
+                "#d0e0e3"
+              ]
+            }
+          ) })
+        ] }),
+        /* @__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, {}),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleBulletList().run(),
+            is_active: editor.isActive("bulletList"),
+            tooltip: "Bullet list",
+            children: /* @__PURE__ */ jsx(LuList, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleOrderedList().run(),
+            is_active: editor.isActive("orderedList"),
+            tooltip: "Numbered list",
+            children: /* @__PURE__ */ jsx(LuListOrdered, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => editor.chain().focus().toggleTaskList().run(),
+            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" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => image_input_ref.current?.click(),
+            tooltip: "Insert image",
+            children: /* @__PURE__ */ jsx(LuImage, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(Popover, { open: table_menu_open, onOpenChange: set_table_menu_open, children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              is_active: editor.isActive("table"),
+              tooltip: "Table",
+              children: /* @__PURE__ */ jsx(LuTable, { className: "h-4 w-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: editor.isActive("table") ? (
+            // Table editing controls when inside a table
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium mb-1", children: "Table Operations" }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "justify-start text-xs h-7",
+                    onClick: handle_add_row_before,
+                    children: [
+                      /* @__PURE__ */ jsx(LuTableRowsSplit, { className: "h-3 w-3 mr-1" }),
+                      "Add row above"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "justify-start text-xs h-7",
+                    onClick: handle_add_row_after,
+                    children: [
+                      /* @__PURE__ */ jsx(LuTableRowsSplit, { className: "h-3 w-3 mr-1" }),
+                      "Add row below"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "justify-start text-xs h-7",
+                    onClick: handle_add_col_before,
+                    children: [
+                      /* @__PURE__ */ jsx(LuTableColumnsSplit, { className: "h-3 w-3 mr-1" }),
+                      "Add col left"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "justify-start text-xs h-7",
+                    onClick: handle_add_col_after,
+                    children: [
+                      /* @__PURE__ */ jsx(LuTableColumnsSplit, { className: "h-3 w-3 mr-1" }),
+                      "Add col right"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "justify-start text-xs h-7 text-destructive hover:text-destructive",
+                    onClick: handle_delete_row,
+                    children: [
+                      /* @__PURE__ */ jsx(LuTrash2, { className: "h-3 w-3 mr-1" }),
+                      "Delete row"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "justify-start text-xs h-7 text-destructive hover:text-destructive",
+                    onClick: handle_delete_col,
+                    children: [
+                      /* @__PURE__ */ jsx(LuTrash2, { className: "h-3 w-3 mr-1" }),
+                      "Delete col"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "destructive",
+                  size: "sm",
+                  className: "justify-center text-xs h-7 mt-1",
+                  onClick: handle_delete_table,
+                  children: [
+                    /* @__PURE__ */ jsx(LuTrash2, { className: "h-3 w-3 mr-1" }),
+                    "Delete table"
+                  ]
+                }
+              )
+            ] })
+          ) : (
+            // Table size picker when not in a table
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs font-medium mb-1", children: "Insert Table" }),
+              /* @__PURE__ */ jsx("div", { className: "grid gap-0.5", children: Array.from({ length: 6 }).map((_, row_idx) => /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: Array.from({ length: 6 }).map((_2, col_idx) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-5 h-5 border rounded-sm cursor-pointer transition-colors",
+                    hovered_cell && row_idx < hovered_cell.row && col_idx < hovered_cell.col ? "bg-primary border-primary" : "border-border hover:border-primary/50"
+                  ),
+                  onMouseEnter: () => set_hovered_cell({ row: row_idx + 1, col: col_idx + 1 }),
+                  onMouseLeave: () => set_hovered_cell(null),
+                  onClick: () => handle_table_insert(row_idx + 1, col_idx + 1)
+                },
+                col_idx
+              )) }, row_idx)) }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-center text-muted-foreground", children: hovered_cell ? `${hovered_cell.col} x ${hovered_cell.row}` : "Select size" }),
+              /* @__PURE__ */ jsxs("div", { className: "border-t pt-2 mt-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mb-2", children: "Custom size" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "number",
+                      min: 1,
+                      max: 20,
+                      value: table_cols,
+                      onChange: (e) => set_table_cols(Math.max(1, Math.min(20, parseInt(e.target.value) || 1))),
+                      className: "h-7 w-14 text-xs"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs", children: "x" }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      type: "number",
+                      min: 1,
+                      max: 20,
+                      value: table_rows,
+                      onChange: (e) => set_table_rows(Math.max(1, Math.min(20, parseInt(e.target.value) || 1))),
+                      className: "h-7 w-14 text-xs"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      size: "sm",
+                      className: "h-7 text-xs",
+                      onClick: () => handle_table_insert(table_rows, table_cols),
+                      children: [
+                        /* @__PURE__ */ jsx(LuGrid3X3, { className: "h-3 w-3 mr-1" }),
+                        "Insert"
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(ToolbarSeparator, {}),
+        variables.length > 0 && /* @__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" }),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: "No variables found." }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: variables.map((variable) => /* @__PURE__ */ jsx(
+                CommandItem,
+                {
+                  value: variable.name,
+                  onSelect: () => handle_variable_insert(variable.name),
+                  className: "text-xs",
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium", children: `{{${variable.name}}}` }),
+                    variable.description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[10px]", children: variable.description })
+                  ] })
+                },
+                variable.name
+              )) })
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ToolbarButton,
+          {
+            onClick: () => file_input_ref.current?.click(),
+            tooltip: "Attach file",
+            children: /* @__PURE__ */ jsx(LuPaperclip, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: file_input_ref,
+            type: "file",
+            className: "hidden",
+            onChange: handle_file_attach
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: image_input_ref,
+            type: "file",
+            accept: "image/*",
+            className: "hidden",
+            onChange: handle_image_insert
+          }
+        )
+      ]
+    }
+  ) });
+};
+var get_file_icon = (mime_type, filename) => {
+  if (is_image_file(mime_type)) {
+    return /* @__PURE__ */ jsx(LuImage, { className: "h-4 w-4" });
+  }
+  const ext = get_file_extension(filename);
+  if (["txt", "md", "doc", "docx", "pdf"].includes(ext)) {
+    return /* @__PURE__ */ jsx(LuFileText, { className: "h-4 w-4" });
+  }
+  if (["js", "ts", "jsx", "tsx", "json", "html", "css"].includes(ext)) {
+    return /* @__PURE__ */ jsx(LuFileCode, { className: "h-4 w-4" });
+  }
+  return /* @__PURE__ */ jsx(LuFile, { className: "h-4 w-4" });
+};
+var get_base64_size = (base64) => {
+  const padding = (base64.match(/=+$/) || [""])[0].length;
+  return Math.floor(base64.length * 3 / 4) - padding;
+};
+var AttachmentsList = ({
+  attachments,
+  on_remove,
+  disabled = false
+}) => {
+  if (attachments.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "cls_rte_attachments",
+        "flex flex-wrap gap-2 p-2",
+        "border-t border-border bg-muted/50 rounded-b-md"
+      ),
+      children: attachments.map((attachment, index) => {
+        const size = get_base64_size(attachment.data);
+        const is_image = is_image_file(attachment.mime_type);
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "cls_rte_attachment_item",
+              "flex items-center gap-2",
+              "px-2 py-1.5 rounded-md",
+              "bg-background border border-border",
+              "text-xs"
+            ),
+            children: [
+              is_image ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: `data:${attachment.mime_type};base64,${attachment.data}`,
+                  alt: attachment.filename,
+                  className: "h-8 w-8 rounded object-cover"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded bg-muted", children: get_file_icon(attachment.mime_type, attachment.filename) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate max-w-[120px] font-medium", children: attachment.filename }),
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[10px]", children: format_file_size(size) })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-5 w-5 ml-1",
+                  onClick: () => on_remove(index),
+                  disabled,
+                  children: /* @__PURE__ */ jsx(LuX, { className: "h-3 w-3" })
+                }
+              )
+            ]
+          },
+          `${attachment.filename}-${index}`
+        );
+      })
+    }
+  );
+};
+var FontSizeExtension = Extension.create({
+  name: "fontSizeCustom",
+  addOptions() {
+    return {
+      types: ["textStyle"],
+      default_size: 16,
+      min_size: 8,
+      max_size: 72,
+      step: 2
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => {
+              const size = element.style.fontSize?.replace(/['"px]/g, "");
+              return size ? parseInt(size, 10) : null;
+            },
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.fontSize}px`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSizeNum: (size) => ({ chain }) => {
+        const clampedSize = Math.min(
+          this.options.max_size,
+          Math.max(this.options.min_size, size)
+        );
+        return chain().setMark("textStyle", { fontSize: clampedSize }).run();
+      },
+      unsetFontSizeNum: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var VariablePill = ({ node, selected }) => {
+  return /* @__PURE__ */ jsx(NodeViewWrapper, { as: "span", className: "inline", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "cls_rte_variable_pill",
+        "inline-flex items-center",
+        "px-2 py-0.5 mx-0.5",
+        "rounded-full",
+        "text-sm font-medium",
+        "bg-primary/10 text-primary",
+        "border border-primary/20",
+        "cursor-default select-none",
+        selected && "ring-2 ring-primary ring-offset-1"
+      ),
+      contentEditable: false,
+      "data-variable": node.attrs.name,
+      children: `{{${node.attrs.name}}}`
+    }
+  ) });
+};
+var VariableExtension = Node.create({
+  name: "variable",
+  group: "inline",
+  inline: true,
+  // Atomic means the node cannot be split or merged
+  atom: true,
+  // Draggable in the editor
+  draggable: true,
+  // Selectable as a whole unit
+  selectable: true,
+  addAttributes() {
+    return {
+      name: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-variable"),
+        renderHTML: (attributes) => ({
+          "data-variable": attributes.name
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-variable]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        class: "cls_rte_variable_pill",
+        contenteditable: "false"
+      }),
+      `{{${HTMLAttributes["data-variable"]}}}`
+    ];
+  },
+  renderText({ node }) {
+    return `{{${node.attrs.name}}}`;
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(VariablePill);
+  },
+  addCommands() {
+    return {
+      insertVariable: (name) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: { name }
+        });
+      }
+    };
+  },
+  // Keyboard behavior - delete entire node on backspace
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state }) => {
+        let is_variable = false;
+        const { selection } = state;
+        const { empty, anchor } = selection;
+        if (!empty) {
+          return false;
+        }
+        state.doc.nodesBetween(anchor - 1, anchor, (node, pos) => {
+          if (node.type.name === this.name) {
+            is_variable = true;
+            tr.insertText("", pos, pos + node.nodeSize);
+            return false;
+          }
+        });
+        return is_variable;
+      })
+    };
+  }
+});
+var Tabs = TabsPrimitive.Root;
+var TabsList = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+function debounce_fn(func, wait) {
+  let timeout_id = null;
+  return (output) => {
+    if (timeout_id) {
+      clearTimeout(timeout_id);
+    }
+    timeout_id = setTimeout(() => {
+      func(output);
+    }, wait);
+  };
+}
+var HazoUiRte = ({
+  html = "",
+  attachments: initial_attachments = [],
+  variables = [],
+  on_change,
+  placeholder = "Start typing...",
+  min_height = "200px",
+  max_height = "400px",
+  disabled = false,
+  className,
+  show_output_viewer = false
+}) => {
+  const [attachments, set_attachments] = React23.useState(
+    initial_attachments
+  );
+  const [active_tab, set_active_tab] = React23.useState("html");
+  const is_view_only = active_tab !== "html";
+  const attachments_ref = React23.useRef(attachments);
+  attachments_ref.current = attachments;
+  const debounced_on_change = React23.useMemo(
+    () => debounce_fn((output) => {
+      if (on_change) {
+        on_change(output);
+      }
+    }, 300),
+    [on_change]
+  );
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3]
+        }
+      }),
+      TextStyle,
+      FontFamily,
+      FontSizeExtension,
+      Underline,
+      Subscript,
+      Superscript,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          class: "cls_rte_link text-primary underline cursor-pointer"
+        }
+      }),
+      TextAlign.configure({
+        types: ["heading", "paragraph"]
+      }),
+      Highlight.configure({
+        multicolor: true
+      }),
+      Color,
+      Image.configure({
+        inline: true,
+        allowBase64: true,
+        HTMLAttributes: {
+          class: "cls_rte_image max-w-full h-auto rounded"
+        }
+      }),
+      Placeholder.configure({
+        placeholder
+      }),
+      HorizontalRule,
+      Table.configure({
+        resizable: true,
+        HTMLAttributes: {
+          class: "cls_rte_table border-collapse w-full"
+        }
+      }),
+      TableRow,
+      TableCell.configure({
+        HTMLAttributes: {
+          class: "border border-border p-2"
+        }
+      }),
+      TableHeader.configure({
+        HTMLAttributes: {
+          class: "border border-border p-2 bg-muted font-semibold"
+        }
+      }),
+      TaskList.configure({
+        HTMLAttributes: {
+          class: "cls_rte_task_list list-none pl-0"
+        }
+      }),
+      TaskItem.configure({
+        nested: true,
+        HTMLAttributes: {
+          class: "cls_rte_task_item flex items-start gap-2"
+        }
+      }),
+      VariableExtension
+    ],
+    content: html,
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        class: cn(
+          "cls_rte_editor",
+          "prose prose-sm dark:prose-invert max-w-none",
+          "p-4 focus:outline-none",
+          "min-h-[inherit] overflow-auto"
+        ),
+        style: `min-height: ${min_height}; max-height: ${max_height}`
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const output = {
+        html: editor2.getHTML(),
+        plain_text: editor2.getText(),
+        attachments: attachments_ref.current
+      };
+      debounced_on_change(output);
+    }
+  });
+  React23.useEffect(() => {
+    if (editor && html !== void 0) {
+      const current_html = editor.getHTML();
+      if (html !== current_html && !editor.isFocused) {
+        editor.commands.setContent(html, { emitUpdate: false });
+      }
+    }
+  }, [html, editor]);
+  React23.useEffect(() => {
+    if (editor) {
+      editor.setEditable(!disabled);
+    }
+  }, [disabled, editor]);
+  const attachments_from_props_ref = React23.useRef(false);
+  const prev_initial_attachments_ref = React23.useRef(initial_attachments);
+  React23.useEffect(() => {
+    if (JSON.stringify(initial_attachments) !== JSON.stringify(prev_initial_attachments_ref.current)) {
+      prev_initial_attachments_ref.current = initial_attachments;
+      attachments_from_props_ref.current = true;
+      set_attachments(initial_attachments);
+    }
+  }, [initial_attachments]);
+  React23.useEffect(() => {
+    if (attachments_from_props_ref.current) {
+      attachments_from_props_ref.current = false;
+      return;
+    }
+    if (editor && on_change) {
+      const output = {
+        html: editor.getHTML(),
+        plain_text: editor.getText(),
+        attachments
+      };
+      on_change(output);
+    }
+  }, [attachments]);
+  const handle_remove_attachment = (index) => {
+    set_attachments((prev) => prev.filter((_, i) => i !== index));
+  };
+  const handle_attachments_change = (new_attachments) => {
+    set_attachments(new_attachments);
+  };
+  const format_html = (html_str) => {
+    let formatted = "";
+    let indent = 0;
+    const tags = html_str.split(/(<[^>]+>)/g).filter(Boolean);
+    for (const tag of tags) {
+      if (tag.startsWith("</")) {
+        indent = Math.max(0, indent - 1);
+        formatted += "  ".repeat(indent) + tag + "\n";
+      } else if (tag.startsWith("<") && !tag.startsWith("<!") && !tag.endsWith("/>")) {
+        formatted += "  ".repeat(indent) + tag + "\n";
+        if (!tag.includes("br") && !tag.includes("hr") && !tag.includes("img")) {
+          indent++;
+        }
+      } else if (tag.startsWith("<")) {
+        formatted += "  ".repeat(indent) + tag + "\n";
+      } else if (tag.trim()) {
+        formatted += "  ".repeat(indent) + tag.trim() + "\n";
+      }
+    }
+    return formatted.trim();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "cls_rte_container",
+        "rounded-md border border-input bg-background",
+        "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            editor,
+            variables,
+            attachments,
+            on_attachments_change: handle_attachments_change,
+            disabled: disabled || is_view_only
+          }
+        ),
+        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: [
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "html", className: "text-sm", children: "HTML" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "plain_text", className: "text-sm", children: "Plain Text" }),
+          /* @__PURE__ */ jsx(TabsTrigger, { value: "raw_html", className: "text-sm", children: "Raw HTML" })
+        ] }) }) }),
+        /* @__PURE__ */ jsxs("div", { style: { minHeight: min_height, maxHeight: max_height }, className: "overflow-auto", children: [
+          active_tab === "html" && /* @__PURE__ */ jsx(
+            EditorContent,
+            {
+              editor,
+              className: cn(
+                "cls_rte_content",
+                disabled && "pointer-events-none"
+              )
+            }
+          ),
+          active_tab === "plain_text" && /* @__PURE__ */ jsx("pre", { className: "cls_rte_plain_text p-4 text-sm whitespace-pre-wrap font-mono h-full", children: editor?.getText() || "(empty)" }),
+          active_tab === "raw_html" && /* @__PURE__ */ jsx("pre", { className: "cls_rte_raw_html p-4 text-xs whitespace-pre-wrap font-mono text-muted-foreground h-full", children: format_html(editor?.getHTML() || "") || "(empty)" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          AttachmentsList,
+          {
+            attachments,
+            on_remove: handle_remove_attachment,
+            disabled
+          }
+        )
+      ]
+    }
+  );
+};
+HazoUiRte.displayName = "HazoUiRte";
 
-export { ExampleComponent, HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog };
+export { HazoUiFlexInput, HazoUiFlexRadio, HazoUiMultiFilterDialog, HazoUiMultiSortDialog, HazoUiRte };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map