hazo_ui 2.3.1 → 2.4.1

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React23 = require('react');
+var React27 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -53,6 +53,8 @@ var lu = require('react-icons/lu');
 var rx = require('react-icons/rx');
 var core = require('@tiptap/core');
 var TabsPrimitive = require('@radix-ui/react-tabs');
+var Suggestion = require('@tiptap/suggestion');
+var reactDom = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -74,7 +76,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React23__namespace = /*#__PURE__*/_interopNamespace(React23);
+var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
@@ -110,6 +112,7 @@ var TableHeader__default = /*#__PURE__*/_interopDefault(TableHeader);
 var TaskList__default = /*#__PURE__*/_interopDefault(TaskList);
 var TaskItem__default = /*#__PURE__*/_interopDefault(TaskItem);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+var Suggestion__default = /*#__PURE__*/_interopDefault(Suggestion);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -196,7 +199,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React23__namespace.forwardRef(
+var Button = React27__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -213,7 +216,7 @@ Button.displayName = "Button";
 var Dialog = DialogPrimitive__namespace.Root;
 var DialogTrigger = DialogPrimitive__namespace.Trigger;
 var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogOverlay = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogOverlay = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     ref,
@@ -225,7 +228,7 @@ var DialogOverlay = React23__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+var DialogContent = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -275,7 +278,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogTitle = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -287,7 +290,7 @@ var DialogTitle = React23__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogDescription = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -296,7 +299,7 @@ var DialogDescription = React23__namespace.forwardRef(({ className, ...props },
   }
 ));
 DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
-var Command = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Command = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -308,7 +311,7 @@ var Command = React23__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Command.displayName = "Command";
-var CommandInput = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandInput = React27__namespace.forwardRef(({ className, onValueChange, onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
     ref,
@@ -316,11 +319,15 @@ var CommandInput = React23__namespace.forwardRef(({ className, ...props }, ref)
       "flex h-11 w-full rounded-md border border-input bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 px-3",
       className
     ),
+    onChange: (e) => {
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    },
     ...props
   }
 ));
 CommandInput.displayName = "CommandInput";
-var CommandList = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandList = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -329,7 +336,7 @@ var CommandList = React23__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 CommandList.displayName = "CommandList";
-var CommandEmpty = React23__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandEmpty = React27__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -338,19 +345,23 @@ var CommandEmpty = React23__namespace.forwardRef((props, ref) => /* @__PURE__ */
   }
 ));
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CommandGroup = React27__namespace.forwardRef(({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground",
       className
     ),
-    ...props
+    ...props,
+    children: [
+      heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: heading }),
+      children
+    ]
   }
 ));
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React23__namespace.forwardRef(({ className, onSelect, value, ...props }, ref) => {
+var CommandItem = React27__namespace.forwardRef(({ className, onSelect, value, ...props }, ref) => {
   const handleClick = () => {
     if (onSelect && value) {
       onSelect(value);
@@ -372,7 +383,7 @@ var CommandItem = React23__namespace.forwardRef(({ className, onSelect, value, .
 CommandItem.displayName = "CommandItem";
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React23__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React27__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -386,7 +397,7 @@ var PopoverContent = React23__namespace.forwardRef(({ className, align = "center
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-var Input = React23__namespace.forwardRef(
+var Input = React27__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -405,7 +416,7 @@ var Input = React23__namespace.forwardRef(
 Input.displayName = "Input";
 var Select = SelectPrimitive__namespace.Root;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectTrigger = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
   {
     ref,
@@ -421,7 +432,7 @@ var SelectTrigger = React23__namespace.forwardRef(({ className, children, ...pro
   }
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollUpButton = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref,
@@ -434,7 +445,7 @@ var SelectScrollUpButton = React23__namespace.forwardRef(({ className, ...props
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollDownButton = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref,
@@ -447,7 +458,7 @@ var SelectScrollDownButton = React23__namespace.forwardRef(({ className, ...prop
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React23__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectContent = React27__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Content,
   {
     ref,
@@ -475,7 +486,7 @@ var SelectContent = React23__namespace.forwardRef(({ className, children, positi
   }
 ) }));
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectLabel = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Label,
   {
     ref,
@@ -484,7 +495,7 @@ var SelectLabel = React23__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React23__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectItem = React27__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Item,
   {
     ref,
@@ -500,7 +511,7 @@ var SelectItem = React23__namespace.forwardRef(({ className, children, ...props
   }
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectSeparator = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Separator,
   {
     ref,
@@ -512,7 +523,7 @@ SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipContent = React23__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React27__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TooltipPrimitive__namespace.Content,
   {
     ref,
@@ -580,7 +591,7 @@ function FilterFieldItem({
   onOperatorChange,
   onDelete
 }) {
-  const [isCalendarOpen, setIsCalendarOpen] = React23.useState(false);
+  const [isCalendarOpen, setIsCalendarOpen] = React27.useState(false);
   const renderInput = () => {
     switch (fieldConfig.type) {
       case "text":
@@ -767,10 +778,10 @@ function HazoUiMultiFilterDialog({
   title = "Filter",
   description = "Add multiple fields to filter by. Select a field and set its filter value."
 }) {
-  const [isOpen, setIsOpen] = React23.useState(false);
-  const [filterFields, setFilterFields] = React23.useState(initialFilters);
-  const [isComboboxOpen, setIsComboboxOpen] = React23.useState(false);
-  React23.useEffect(() => {
+  const [isOpen, setIsOpen] = React27.useState(false);
+  const [filterFields, setFilterFields] = React27.useState(initialFilters);
+  const [isComboboxOpen, setIsComboboxOpen] = React27.useState(false);
+  React27.useEffect(() => {
     if (isOpen) {
       setFilterFields(initialFilters);
     }
@@ -983,7 +994,7 @@ function HazoUiMultiFilterDialog({
     ] })
   ] });
 }
-var Switch = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Switch = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SwitchPrimitives__namespace.Root,
   {
     className: cn(
@@ -1003,7 +1014,7 @@ var Switch = React23__namespace.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
-var Label2 = React23__namespace.forwardRef(
+var Label2 = React27__namespace.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "label",
@@ -1089,16 +1100,16 @@ function HazoUiMultiSortDialog({
   title = "Sort",
   description = "Add multiple fields to sort by and reorder them. Use the switch to toggle between ascending and descending."
 }) {
-  const [isOpen, setIsOpen] = React23.useState(false);
-  const [sortFields, setSortFields] = React23.useState(initialSortFields);
-  const [isComboboxOpen, setIsComboboxOpen] = React23.useState(false);
+  const [isOpen, setIsOpen] = React27.useState(false);
+  const [sortFields, setSortFields] = React27.useState(initialSortFields);
+  const [isComboboxOpen, setIsComboboxOpen] = React27.useState(false);
   const sensors = core$1.useSensors(
     core$1.useSensor(core$1.PointerSensor),
     core$1.useSensor(core$1.KeyboardSensor, {
       coordinateGetter: sortable.sortableKeyboardCoordinates
     })
   );
-  React23.useEffect(() => {
+  React27.useEffect(() => {
     if (isOpen) {
       setSortFields(initialSortFields);
     }
@@ -1297,7 +1308,7 @@ function HazoUiMultiSortDialog({
     ] })
   ] });
 }
-var RadioGroup = React23__namespace.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React27__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
     {
@@ -1308,7 +1319,7 @@ var RadioGroup = React23__namespace.forwardRef(({ className, ...props }, ref) =>
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var RadioGroupItem = React23__namespace.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React27__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Item,
     {
@@ -1662,7 +1673,7 @@ function filterInputValue(value, input_type, num_decimals) {
     }
   }
 }
-var HazoUiFlexInput = React23__namespace.forwardRef(
+var HazoUiFlexInput = React27__namespace.forwardRef(
   ({
     className,
     input_type = "mixed",
@@ -1679,13 +1690,13 @@ var HazoUiFlexInput = React23__namespace.forwardRef(
     onBlur,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React23__namespace.useState(
+    const [internalValue, setInternalValue] = React27__namespace.useState(
       typeof controlledValue === "string" ? controlledValue : typeof controlledValue === "number" ? String(controlledValue) : ""
     );
-    const [errorMessage, setErrorMessage] = React23__namespace.useState();
+    const [errorMessage, setErrorMessage] = React27__namespace.useState();
     const isControlled = controlledValue !== void 0;
     const currentValue = isControlled ? typeof controlledValue === "string" ? controlledValue : String(controlledValue || "") : internalValue;
-    React23__namespace.useEffect(() => {
+    React27__namespace.useEffect(() => {
       if (isControlled) {
         const newValue = typeof controlledValue === "string" ? controlledValue : String(controlledValue || "");
         if (newValue !== internalValue) {
@@ -1765,7 +1776,7 @@ var HazoUiFlexInput = React23__namespace.forwardRef(
   }
 );
 HazoUiFlexInput.displayName = "HazoUiFlexInput";
-var ToolbarButton = React23__namespace.forwardRef(
+var ToolbarButton = React27__namespace.forwardRef(
   ({ onClick, is_active = false, disabled = false, tooltip, className, children }, ref) => {
     const button = /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -2052,11 +2063,11 @@ var validHex = (hex) => /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
 var import_extends2 = __toESM(require_extends());
 var import_objectWithoutPropertiesLoose = __toESM(require_objectWithoutPropertiesLoose());
 function useEventCallback(handler) {
-  var callbackRef = React23.useRef(handler);
-  React23.useEffect(() => {
+  var callbackRef = React27.useRef(handler);
+  React27.useEffect(() => {
     callbackRef.current = handler;
   });
-  return React23.useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
+  return React27.useCallback((value, event) => callbackRef.current && callbackRef.current(value, event), []);
 }
 var isTouch = (event) => "touches" in event;
 var preventDefaultMove = (event) => {
@@ -2084,16 +2095,16 @@ var getRelativePosition = (node, event) => {
   };
 };
 var _excluded = ["prefixCls", "className", "onMove", "onDown"];
-var Interactive = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref) => {
+var Interactive = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-interactive",
     className,
     onMove,
     onDown
   } = props, reset = (0, import_objectWithoutPropertiesLoose.default)(props, _excluded);
-  var container = React23.useRef(null);
-  var hasTouched = React23.useRef(false);
-  var [isDragging, setDragging] = React23.useState(false);
+  var container = React27.useRef(null);
+  var hasTouched = React27.useRef(false);
+  var [isDragging, setDragging] = React27.useState(false);
   var onMoveCallback = useEventCallback(onMove);
   var onKeyCallback = useEventCallback(onDown);
   var isValid = (event) => {
@@ -2101,7 +2112,7 @@ var Interactive = /* @__PURE__ */ React23__namespace.default.forwardRef((props,
     hasTouched.current = isTouch(event);
     return true;
   };
-  var handleMove = React23.useCallback((event) => {
+  var handleMove = React27.useCallback((event) => {
     preventDefaultMove(event);
     if (!container.current) return;
     var isDown = isTouch(event) ? event.touches.length > 0 : event.buttons > 0;
@@ -2111,8 +2122,8 @@ var Interactive = /* @__PURE__ */ React23__namespace.default.forwardRef((props,
     }
     onMoveCallback == null || onMoveCallback(getRelativePosition(container.current, event), event);
   }, [onMoveCallback]);
-  var handleMoveEnd = React23.useCallback(() => setDragging(false), []);
-  var toggleDocumentEvents = React23.useCallback((state) => {
+  var handleMoveEnd = React27.useCallback(() => setDragging(false), []);
+  var toggleDocumentEvents = React27.useCallback((state) => {
     if (state) {
       window.addEventListener(hasTouched.current ? "touchmove" : "mousemove", handleMove);
       window.addEventListener(hasTouched.current ? "touchend" : "mouseup", handleMoveEnd);
@@ -2123,13 +2134,13 @@ var Interactive = /* @__PURE__ */ React23__namespace.default.forwardRef((props,
       window.removeEventListener("touchend", handleMoveEnd);
     }
   }, [handleMove, handleMoveEnd]);
-  React23.useEffect(() => {
+  React27.useEffect(() => {
     toggleDocumentEvents(isDragging);
     return () => {
       toggleDocumentEvents(false);
     };
   }, [isDragging, handleMove, handleMoveEnd, toggleDocumentEvents]);
-  var handleMoveStart = React23.useCallback((event) => {
+  var handleMoveStart = React27.useCallback((event) => {
     var activeEl = document.activeElement;
     activeEl == null || activeEl.blur();
     preventDefaultMove(event.nativeEvent);
@@ -2173,7 +2184,7 @@ var Pointer = (_ref) => {
     borderRadius: "50%",
     backgroundColor: color2
   };
-  return React23.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
+  return React27.useMemo(() => /* @__PURE__ */ jsxRuntime.jsx("div", {
     className: prefixCls + "-pointer " + (className || ""),
     style,
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -2183,7 +2194,7 @@ var Pointer = (_ref) => {
   }), [top, left, color2, className, prefixCls]);
 };
 var _excluded2 = ["prefixCls", "radius", "pointer", "className", "hue", "style", "hsva", "onChange"];
-var Saturation = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref) => {
+var Saturation = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var _hsva$h;
   var {
     prefixCls = "w-color-saturation",
@@ -2211,7 +2222,7 @@ var Saturation = /* @__PURE__ */ React23__namespace.default.forwardRef((props, r
       // source: 'hsv',
     });
   };
-  var handleKeyDown = React23.useCallback((event) => {
+  var handleKeyDown = React27.useCallback((event) => {
     if (!hsva || !onChange) return;
     var step = 1;
     var newS = hsva.s;
@@ -2250,7 +2261,7 @@ var Saturation = /* @__PURE__ */ React23__namespace.default.forwardRef((props, r
       });
     }
   }, [hsva, onChange]);
-  var pointerElement = React23.useMemo(() => {
+  var pointerElement = React27.useMemo(() => {
     if (!hsva) return null;
     var comProps = {
       top: 100 - hsva.v + "%",
@@ -2266,7 +2277,7 @@ var Saturation = /* @__PURE__ */ React23__namespace.default.forwardRef((props, r
       prefixCls
     }, comProps));
   }, [hsva, pointer, prefixCls]);
-  var handleClick = React23.useCallback((event) => {
+  var handleClick = React27.useCallback((event) => {
     event.target.focus();
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(esm_default, (0, import_extends3.default)({
@@ -2335,7 +2346,7 @@ var Pointer2 = (_ref) => {
 };
 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__namespace.default.forwardRef((props, ref) => {
+var Alpha = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-alpha",
     className,
@@ -2380,7 +2391,7 @@ var Alpha = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref) =
   }, style, {
     position: "relative"
   });
-  var handleKeyDown = React23.useCallback((event) => {
+  var handleKeyDown = React27.useCallback((event) => {
     var step = 0.01;
     var currentAlpha = hsva.a;
     var newAlpha = currentAlpha;
@@ -2426,7 +2437,7 @@ var Alpha = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref) =
       }), syntheticOffset);
     }
   }, [hsva, direction, onChange]);
-  var handleClick = React23.useCallback((event) => {
+  var handleClick = React27.useCallback((event) => {
     event.target.focus();
   }, []);
   var pointerElement = pointer && typeof pointer === "function" ? pointer((0, import_extends5.default)({
@@ -2469,7 +2480,7 @@ var import_objectWithoutPropertiesLoose5 = __toESM(require_objectWithoutProperti
 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__namespace.default.forwardRef((props, ref) => {
+var EditableInput = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-editable-input",
     placement = "bottom",
@@ -2483,9 +2494,9 @@ var EditableInput = /* @__PURE__ */ React23__namespace.default.forwardRef((props
     onBlur,
     renderInput
   } = props, other = (0, import_objectWithoutPropertiesLoose5.default)(props, _excluded5);
-  var [value, setValue] = React23.useState(initValue);
-  var isFocus = React23.useRef(false);
-  React23.useEffect(() => {
+  var [value, setValue] = React27.useState(initValue);
+  var isFocus = React27.useRef(false);
+  React27.useEffect(() => {
     if (props.value !== value) {
       if (!isFocus.current) {
         setValue(props.value);
@@ -2574,7 +2585,7 @@ var esm_default4 = EditableInput;
 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__namespace.default.forwardRef((props, ref) => {
+var EditableInputRGBA = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-editable-input-rgba",
     hsva,
@@ -2697,7 +2708,7 @@ var esm_default5 = EditableInputRGBA;
 var import_extends8 = __toESM(require_extends());
 var import_objectWithoutPropertiesLoose7 = __toESM(require_objectWithoutPropertiesLoose());
 var _excluded7 = ["prefixCls", "className", "hue", "onChange", "direction"];
-var Hue = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref) => {
+var Hue = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-hue",
     className,
@@ -2731,7 +2742,7 @@ var esm_default6 = Hue;
 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__namespace.default.forwardRef((props, ref) => {
+var Swatch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-swatch",
     className,
@@ -2768,7 +2779,7 @@ var Swatch = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref)
       flexWrap: "wrap",
       position: "relative"
     }, style),
-    children: [addonBefore && /* @__PURE__ */ React23__namespace.default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
+    children: [addonBefore && /* @__PURE__ */ React27__namespace.default.isValidElement(addonBefore) && addonBefore, colors && Array.isArray(colors) && colors.map((item, idx) => {
       var title = "";
       var background = "";
       if (typeof item === "string") {
@@ -2790,11 +2801,11 @@ var Swatch = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref)
         onClick: (evn) => handleClick(background, evn)
       });
       if (render) {
-        return /* @__PURE__ */ jsxRuntime.jsx(React23.Fragment, {
+        return /* @__PURE__ */ jsxRuntime.jsx(React27.Fragment, {
           children: render
         }, idx);
       }
-      var child = rectProps.children && /* @__PURE__ */ React23__namespace.default.isValidElement(rectProps.children) ? /* @__PURE__ */ React23__namespace.default.cloneElement(rectProps.children, {
+      var child = rectProps.children && /* @__PURE__ */ React27__namespace.default.isValidElement(rectProps.children) ? /* @__PURE__ */ React27__namespace.default.cloneElement(rectProps.children, {
         color: background,
         checked
       }) : null;
@@ -2808,7 +2819,7 @@ var Swatch = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref)
           background
         })
       }), idx);
-    }), addonAfter && /* @__PURE__ */ React23__namespace.default.isValidElement(addonAfter) && addonAfter]
+    }), addonAfter && /* @__PURE__ */ React27__namespace.default.isValidElement(addonAfter) && addonAfter]
   }));
 });
 Swatch.displayName = "Swatch";
@@ -2827,7 +2838,7 @@ var Bar = (props) => /* @__PURE__ */ jsxRuntime.jsx("div", {
     backgroundColor: "#fff"
   }
 });
-var Sketch = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref) => {
+var Sketch = /* @__PURE__ */ React27__namespace.default.forwardRef((props, ref) => {
   var {
     prefixCls = "w-color-sketch",
     className,
@@ -2839,13 +2850,13 @@ var Sketch = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref)
     disableAlpha = false,
     style
   } = props, other = (0, import_objectWithoutPropertiesLoose9.default)(props, _excluded9);
-  var [hsva, setHsva] = React23.useState({
+  var [hsva, setHsva] = React27.useState({
     h: 209,
     s: 36,
     v: 90,
     a: 1
   });
-  React23.useEffect(() => {
+  React27.useEffect(() => {
     if (typeof color2 === "string" && validHex(color2)) {
       setHsva(hexToHsva(color2));
     }
@@ -2963,7 +2974,7 @@ var Sketch = /* @__PURE__ */ React23__namespace.default.forwardRef((props, ref)
           innerProps: {
             style: styleAlpha
           },
-          pointer: () => /* @__PURE__ */ jsxRuntime.jsx(React23.Fragment, {})
+          pointer: () => /* @__PURE__ */ jsxRuntime.jsx(React27.Fragment, {})
         })]
       })]
     }), editableDisable && /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -3078,19 +3089,19 @@ var Toolbar = ({
   on_attachments_change,
   disabled = false
 }) => {
-  const [link_url, set_link_url] = React23__namespace.useState("https://");
-  const [link_popover_open, set_link_popover_open] = React23__namespace.useState(false);
-  const [text_color_open, set_text_color_open] = React23__namespace.useState(false);
-  const [highlight_color_open, set_highlight_color_open] = React23__namespace.useState(false);
-  const [variables_menu_open, set_variables_menu_open] = React23__namespace.useState(false);
-  const [table_menu_open, set_table_menu_open] = React23__namespace.useState(false);
-  const [text_color, set_text_color] = React23__namespace.useState("#000000");
-  const [highlight_color, set_highlight_color] = React23__namespace.useState("#ffff00");
-  const [table_rows, set_table_rows] = React23__namespace.useState(3);
-  const [table_cols, set_table_cols] = React23__namespace.useState(3);
-  const [hovered_cell, set_hovered_cell] = React23__namespace.useState(null);
-  const file_input_ref = React23__namespace.useRef(null);
-  const image_input_ref = React23__namespace.useRef(null);
+  const [link_url, set_link_url] = React27__namespace.useState("https://");
+  const [link_popover_open, set_link_popover_open] = React27__namespace.useState(false);
+  const [text_color_open, set_text_color_open] = React27__namespace.useState(false);
+  const [highlight_color_open, set_highlight_color_open] = React27__namespace.useState(false);
+  const [variables_menu_open, set_variables_menu_open] = React27__namespace.useState(false);
+  const [table_menu_open, set_table_menu_open] = React27__namespace.useState(false);
+  const [text_color, set_text_color] = React27__namespace.useState("#000000");
+  const [highlight_color, set_highlight_color] = React27__namespace.useState("#ffff00");
+  const [table_rows, set_table_rows] = React27__namespace.useState(3);
+  const [table_cols, set_table_cols] = React27__namespace.useState(3);
+  const [hovered_cell, set_hovered_cell] = React27__namespace.useState(null);
+  const file_input_ref = React27__namespace.useRef(null);
+  const image_input_ref = React27__namespace.useRef(null);
   if (!editor) {
     return null;
   }
@@ -4023,7 +4034,7 @@ var VariableExtension = core.Node.create({
   }
 });
 var Tabs = TabsPrimitive__namespace.Root;
-var TabsList = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsList = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
@@ -4035,7 +4046,7 @@ var TabsList = React23__namespace.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
-var TabsTrigger = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsTrigger = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Trigger,
   {
     ref,
@@ -4047,7 +4058,7 @@ var TabsTrigger = React23__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
-var TabsContent = React23__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TabsContent = React27__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.Content,
   {
     ref,
@@ -4082,14 +4093,14 @@ var HazoUiRte = ({
   className,
   show_output_viewer = false
 }) => {
-  const [attachments, set_attachments] = React23__namespace.useState(
+  const [attachments, set_attachments] = React27__namespace.useState(
     initial_attachments
   );
-  const [active_tab, set_active_tab] = React23__namespace.useState("html");
+  const [active_tab, set_active_tab] = React27__namespace.useState("html");
   const is_view_only = active_tab !== "html";
-  const attachments_ref = React23__namespace.useRef(attachments);
+  const attachments_ref = React27__namespace.useRef(attachments);
   attachments_ref.current = attachments;
-  const debounced_on_change = React23__namespace.useMemo(
+  const debounced_on_change = React27__namespace.useMemo(
     () => debounce_fn((output) => {
       if (on_change) {
         on_change(output);
@@ -4188,7 +4199,7 @@ var HazoUiRte = ({
       debounced_on_change(output);
     }
   });
-  React23__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (editor && html !== void 0) {
       const current_html = editor.getHTML();
       if (html !== current_html && !editor.isFocused) {
@@ -4196,21 +4207,21 @@ var HazoUiRte = ({
       }
     }
   }, [html, editor]);
-  React23__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (editor) {
       editor.setEditable(!disabled);
     }
   }, [disabled, editor]);
-  const attachments_from_props_ref = React23__namespace.useRef(false);
-  const prev_initial_attachments_ref = React23__namespace.useRef(initial_attachments);
-  React23__namespace.useEffect(() => {
+  const attachments_from_props_ref = React27__namespace.useRef(false);
+  const prev_initial_attachments_ref = React27__namespace.useRef(initial_attachments);
+  React27__namespace.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__namespace.useEffect(() => {
+  React27__namespace.useEffect(() => {
     if (attachments_from_props_ref.current) {
       attachments_from_props_ref.current = false;
       return;
@@ -4304,11 +4315,1606 @@ var HazoUiRte = ({
   );
 };
 HazoUiRte.displayName = "HazoUiRte";
+var generate_command_id = () => {
+  return `cmd_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+var get_variant_classes = (variant = "default") => {
+  switch (variant) {
+    case "outline":
+      return "bg-transparent border-primary/40 text-primary";
+    case "subtle":
+      return "bg-muted border-transparent text-muted-foreground";
+    case "default":
+    default:
+      return "bg-primary/10 text-primary border-primary/20";
+  }
+};
+var CommandPillView = ({ node, selected, editor }) => {
+  const { prefix, action, action_label, id, variant } = node.attrs;
+  const handle_click = () => {
+    const event = new CustomEvent("command-pill-click", {
+      detail: {
+        id,
+        prefix,
+        action,
+        action_label,
+        node_pos: editor.state.selection.from - 1
+      },
+      bubbles: true
+    });
+    document.dispatchEvent(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(react.NodeViewWrapper, { as: "span", className: "inline", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "cls_command_pill",
+        "inline-flex items-center",
+        "px-1.5 py-0.5 mx-0.5",
+        "rounded-md",
+        "text-sm font-medium",
+        "border",
+        "cursor-pointer select-none",
+        "transition-all duration-150",
+        get_variant_classes(variant),
+        selected && "ring-2 ring-ring ring-offset-1",
+        "hover:opacity-80"
+      ),
+      contentEditable: false,
+      "data-command-id": id,
+      "data-command-prefix": prefix,
+      "data-command-action": action,
+      onClick: handle_click,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground opacity-70", children: prefix }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: action_label })
+      ]
+    }
+  ) });
+};
+var CommandNodeExtension = core.Node.create({
+  name: "commandNode",
+  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 {
+      id: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-command-id"),
+        renderHTML: (attributes) => ({
+          "data-command-id": attributes.id
+        })
+      },
+      prefix: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-command-prefix"),
+        renderHTML: (attributes) => ({
+          "data-command-prefix": attributes.prefix
+        })
+      },
+      action: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-command-action"),
+        renderHTML: (attributes) => ({
+          "data-command-action": attributes.action
+        })
+      },
+      action_label: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-command-label"),
+        renderHTML: (attributes) => ({
+          "data-command-label": attributes.action_label
+        })
+      },
+      variant: {
+        default: "default",
+        parseHTML: (element) => element.getAttribute("data-command-variant") || "default",
+        renderHTML: (attributes) => ({
+          "data-command-variant": attributes.variant
+        })
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-command-id]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      core.mergeAttributes(HTMLAttributes, {
+        class: "cls_command_pill",
+        contenteditable: "false"
+      }),
+      `${HTMLAttributes["data-command-prefix"]}${HTMLAttributes["data-command-label"]}`
+    ];
+  },
+  // Output format: prefix + action (e.g., "@user_123", "/due_date")
+  renderText({ node }) {
+    return `${node.attrs.prefix}${node.attrs.action}`;
+  },
+  addNodeView() {
+    return react.ReactNodeViewRenderer(CommandPillView);
+  },
+  addCommands() {
+    return {
+      insertCommand: (attrs) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: {
+            ...attrs,
+            id: generate_command_id()
+          }
+        });
+      },
+      updateCommand: (id, attrs) => ({ tr, state }) => {
+        let updated = false;
+        state.doc.descendants((node, pos) => {
+          if (node.type.name === this.name && node.attrs.id === id) {
+            tr.setNodeMarkup(pos, void 0, {
+              ...node.attrs,
+              ...attrs
+            });
+            updated = true;
+            return false;
+          }
+        });
+        return updated;
+      }
+    };
+  },
+  // Keyboard behavior - delete entire node on backspace
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => this.editor.commands.command(({ tr, state }) => {
+        let is_command = 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_command = true;
+            tr.insertText("", pos, pos + node.nodeSize);
+            return false;
+          }
+        });
+        return is_command;
+      })
+    };
+  }
+});
+var create_suggestion_config = (prefix_config, on_suggestion_change, on_insert_command) => {
+  return {
+    char: prefix_config.char,
+    allowSpaces: false,
+    startOfLine: false,
+    items: ({ query }) => {
+      if (!query) return prefix_config.commands;
+      const lower_query = query.toLowerCase();
+      return prefix_config.commands.filter(
+        (cmd) => cmd.action_label.toLowerCase().includes(lower_query) || cmd.action.toLowerCase().includes(lower_query) || cmd.action_description?.toLowerCase().includes(lower_query)
+      );
+    },
+    render: () => {
+      return {
+        onStart: (props) => {
+          on_suggestion_change({
+            is_active: true,
+            query: props.query,
+            prefix: prefix_config.char,
+            client_rect: props.clientRect,
+            commands: prefix_config.commands,
+            range: props.range
+          });
+        },
+        onUpdate: (props) => {
+          on_suggestion_change({
+            is_active: true,
+            query: props.query,
+            prefix: prefix_config.char,
+            client_rect: props.clientRect,
+            commands: prefix_config.commands,
+            range: props.range
+          });
+        },
+        onKeyDown: (props) => {
+          if (props.event.key === "Escape") {
+            on_suggestion_change(null);
+            return true;
+          }
+          if (props.event.key === "ArrowUp" || props.event.key === "ArrowDown" || props.event.key === "Enter") {
+            return true;
+          }
+          return false;
+        },
+        onExit: () => {
+          on_suggestion_change(null);
+        }
+      };
+    },
+    command: ({ range, props }) => {
+      const command = props;
+      on_insert_command(command, prefix_config.char, range);
+    }
+  };
+};
+var create_command_suggestion_extension = (config) => {
+  const { prefixes, on_suggestion_change, on_insert_command } = config;
+  return prefixes.map((prefix_config, index) => {
+    return core.Extension.create({
+      name: `commandSuggestion_${prefix_config.char}_${index}`,
+      addProseMirrorPlugins() {
+        return [
+          Suggestion__default.default({
+            editor: this.editor,
+            ...create_suggestion_config(
+              prefix_config,
+              on_suggestion_change,
+              on_insert_command
+            )
+          })
+        ];
+      }
+    });
+  });
+};
+var insert_command_at_position = (editor, command, prefix, range, variant = "default") => {
+  editor.chain().focus().deleteRange(range).insertCommand({
+    prefix,
+    action: command.action,
+    action_label: command.action_label,
+    variant
+  }).run();
+};
+var get_variant_classes2 = (variant = "default") => {
+  switch (variant) {
+    case "outline":
+      return "bg-transparent border-primary/40 text-primary hover:bg-primary/5";
+    case "subtle":
+      return "bg-muted border-transparent text-muted-foreground hover:bg-muted/80";
+    case "default":
+    default:
+      return "bg-primary/10 text-primary border-primary/20 hover:bg-primary/15";
+  }
+};
+var CommandPill = ({
+  prefix,
+  action,
+  action_label,
+  id,
+  selected = false,
+  variant = "default",
+  on_click
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "cls_command_pill_standalone",
+        "inline-flex items-center",
+        "px-1.5 py-0.5",
+        "rounded-md",
+        "text-sm font-medium",
+        "border",
+        "transition-all duration-150",
+        get_variant_classes2(variant),
+        selected && "ring-2 ring-ring ring-offset-1",
+        on_click && "cursor-pointer"
+      ),
+      "data-command-id": id,
+      "data-command-prefix": prefix,
+      "data-command-action": action,
+      onClick: on_click,
+      role: on_click ? "button" : void 0,
+      tabIndex: on_click ? 0 : void 0,
+      onKeyDown: (e) => {
+        if (on_click && (e.key === "Enter" || e.key === " ")) {
+          e.preventDefault();
+          on_click();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground opacity-70", children: prefix }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: action_label })
+      ]
+    }
+  );
+};
+CommandPill.displayName = "CommandPill";
+var group_commands = (commands) => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const cmd of commands) {
+    const group_name = cmd.group || "";
+    if (!groups.has(group_name)) {
+      groups.set(group_name, []);
+    }
+    groups.get(group_name).push(cmd);
+  }
+  return groups;
+};
+var CommandPopover = ({
+  is_open,
+  commands,
+  prefix,
+  query,
+  selected_index,
+  position,
+  on_select,
+  on_close,
+  on_selection_change: _on_selection_change
+}) => {
+  const container_ref = React27__namespace.useRef(null);
+  const grouped_commands = React27__namespace.useMemo(
+    () => group_commands(commands),
+    [commands]
+  );
+  React27__namespace.useEffect(() => {
+    const handle_click_outside = (e) => {
+      if (container_ref.current && !container_ref.current.contains(e.target)) {
+        on_close();
+      }
+    };
+    if (is_open) {
+      document.addEventListener("mousedown", handle_click_outside);
+      return () => {
+        document.removeEventListener("mousedown", handle_click_outside);
+      };
+    }
+  }, [is_open, on_close]);
+  const [mounted, set_mounted] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
+    set_mounted(true);
+  }, []);
+  if (!is_open || !mounted) return null;
+  const popover_content = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: container_ref,
+      className: cn(
+        "cls_command_popover",
+        "fixed z-[9999]",
+        "w-64 min-w-[200px] max-w-[300px]",
+        "rounded-md border bg-popover text-popover-foreground shadow-lg",
+        "animate-in fade-in-0 zoom-in-95"
+      ),
+      style: {
+        top: position.top,
+        left: position.left
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Command, { className: "rounded-md", children: [
+        query && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: [
+          "Searching: ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+            prefix,
+            query
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(CommandList, { className: "max-h-[200px]", children: [
+          commands.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No commands found." }),
+          Array.from(grouped_commands.entries()).map(([group_name, group_commands2]) => /* @__PURE__ */ jsxRuntime.jsx(
+            CommandGroup,
+            {
+              heading: group_name || void 0,
+              children: group_commands2.map((cmd, idx) => {
+                let flat_idx = 0;
+                for (const [g, cmds] of grouped_commands.entries()) {
+                  if (g === group_name) {
+                    flat_idx += idx;
+                    break;
+                  }
+                  flat_idx += cmds.length;
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  CommandItem,
+                  {
+                    value: cmd.action,
+                    onSelect: () => on_select(cmd),
+                    className: cn(
+                      flat_idx === selected_index && "bg-accent"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                      cmd.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-medium truncate", children: [
+                          prefix,
+                          cmd.action_label
+                        ] }),
+                        cmd.action_description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
+                      ] })
+                    ] })
+                  },
+                  cmd.action
+                );
+              })
+            },
+            group_name || "default"
+          ))
+        ] })
+      ] })
+    }
+  );
+  return reactDom.createPortal(popover_content, document.body);
+};
+CommandPopover.displayName = "CommandPopover";
+
+// src/components/hazo_ui_command/index.tsx
+var parse_commands_from_text = (text, prefixes) => {
+  const result = [];
+  const action_to_label = /* @__PURE__ */ new Map();
+  for (const prefix_config of prefixes) {
+    for (const cmd of prefix_config.commands) {
+      action_to_label.set(`${prefix_config.char}${cmd.action}`, {
+        label: cmd.action_label,
+        prefix: prefix_config.char
+      });
+    }
+  }
+  const prefix_chars = prefixes.map((p) => escape_regex(p.char)).join("|");
+  const pattern = new RegExp(`(${prefix_chars})(\\w+)`, "g");
+  let match;
+  while ((match = pattern.exec(text)) !== null) {
+    const full_match = match[0];
+    const prefix = match[1];
+    const action = match[2];
+    const lookup_key = `${prefix}${action}`;
+    const info = action_to_label.get(lookup_key);
+    if (info) {
+      result.push({
+        action,
+        action_label: info.label,
+        prefix,
+        position: match.index,
+        length: full_match.length
+      });
+    }
+  }
+  return result;
+};
+var escape_regex = (str) => {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+};
+var text_to_tiptap_content = (text, prefixes, variant = "default") => {
+  const commands = parse_commands_from_text(text, prefixes);
+  if (commands.length === 0) {
+    return {
+      type: "doc",
+      content: [
+        {
+          type: "paragraph",
+          content: text ? [{ type: "text", text }] : []
+        }
+      ]
+    };
+  }
+  commands.sort((a, b) => a.position - b.position);
+  const content = [];
+  let last_end = 0;
+  for (const cmd of commands) {
+    if (cmd.position > last_end) {
+      content.push({
+        type: "text",
+        text: text.slice(last_end, cmd.position)
+      });
+    }
+    content.push({
+      type: "commandNode",
+      attrs: {
+        id: `cmd_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        prefix: cmd.prefix,
+        action: cmd.action,
+        action_label: cmd.action_label,
+        variant
+      }
+    });
+    last_end = cmd.position + cmd.length;
+  }
+  if (last_end < text.length) {
+    content.push({
+      type: "text",
+      text: text.slice(last_end)
+    });
+  }
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "paragraph",
+        content
+      }
+    ]
+  };
+};
+var Document = core.Node.create({
+  name: "doc",
+  topNode: true,
+  content: "block+",
+  renderMarkdown: (node, h) => {
+    if (!node.content) {
+      return "";
+    }
+    return h.renderChildren(node.content, "\n\n");
+  }
+});
+var index_default = Document;
+var Paragraph = core.Node.create({
+  name: "paragraph",
+  priority: 1e3,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  group: "block",
+  content: "inline*",
+  parseHTML() {
+    return [{ tag: "p" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+  },
+  parseMarkdown: (token, helpers) => {
+    const tokens = token.tokens || [];
+    if (tokens.length === 1 && tokens[0].type === "image") {
+      return helpers.parseChildren([tokens[0]]);
+    }
+    return helpers.createNode(
+      "paragraph",
+      void 0,
+      // no attributes for paragraph
+      helpers.parseInline(tokens)
+    );
+  },
+  renderMarkdown: (node, h) => {
+    if (!node || !Array.isArray(node.content)) {
+      return "";
+    }
+    return h.renderChildren(node.content);
+  },
+  addCommands() {
+    return {
+      setParagraph: () => ({ commands }) => {
+        return commands.setNode(this.name);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Alt-0": () => this.editor.commands.setParagraph()
+    };
+  }
+});
+var index_default2 = Paragraph;
+var Text = core.Node.create({
+  name: "text",
+  group: "inline",
+  parseMarkdown: (token) => {
+    return {
+      type: "text",
+      text: token.text || ""
+    };
+  },
+  renderMarkdown: (node) => node.text || ""
+});
+var index_default3 = Text;
+var SingleLineDocument = index_default.extend({
+  content: "paragraph"
+});
+var get_editor_output = (editor) => {
+  if (!editor) {
+    return { plain_text: "", display_text: "", commands: [] };
+  }
+  const plain_text = editor.getText();
+  const commands = [];
+  let display_text = "";
+  let position = 0;
+  editor.state.doc.descendants((node, _pos) => {
+    if (node.type.name === "text") {
+      display_text += node.text || "";
+      position += (node.text || "").length;
+    } else if (node.type.name === "commandNode") {
+      const { id, prefix, action, action_label } = node.attrs;
+      const cmd_plain_text = `${prefix}${action}`;
+      const cmd_display_text = `${prefix}${action_label}`;
+      commands.push({
+        id,
+        prefix,
+        action,
+        action_label,
+        position,
+        length: cmd_plain_text.length
+      });
+      display_text += cmd_display_text;
+      position += cmd_plain_text.length;
+    }
+  });
+  return { plain_text, display_text, commands };
+};
+var HazoUiTextbox = ({
+  value,
+  default_value,
+  prefixes,
+  placeholder = "Type here...",
+  disabled = false,
+  className,
+  pill_variant = "default",
+  on_change,
+  on_submit,
+  on_command_insert,
+  on_command_change,
+  on_command_remove
+}) => {
+  const [suggestion_state, set_suggestion_state] = React27__namespace.useState(null);
+  const [selected_index, set_selected_index] = React27__namespace.useState(0);
+  const [popover_position, set_popover_position] = React27__namespace.useState({ top: 0, left: 0 });
+  const [edit_context, set_edit_context] = React27__namespace.useState(null);
+  const [edit_selected_index, set_edit_selected_index] = React27__namespace.useState(0);
+  const is_controlled = value !== void 0;
+  const editor_container_ref = React27__namespace.useRef(null);
+  const edit_popover_ref = React27__namespace.useRef(null);
+  const [mounted, set_mounted] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
+    set_mounted(true);
+  }, []);
+  const suggestion_extensions = React27__namespace.useMemo(() => {
+    return create_command_suggestion_extension({
+      prefixes,
+      on_suggestion_change: (state) => {
+        set_suggestion_state(state);
+        set_selected_index(0);
+      },
+      on_insert_command: (_command, _prefix, _range) => {
+      }
+    });
+  }, [prefixes]);
+  const editor = react.useEditor({
+    extensions: [
+      SingleLineDocument,
+      index_default2,
+      index_default3,
+      Placeholder__default.default.configure({
+        placeholder
+      }),
+      CommandNodeExtension.configure({}),
+      ...suggestion_extensions
+    ],
+    content: is_controlled ? text_to_tiptap_content(value || "", prefixes, pill_variant) : text_to_tiptap_content(default_value || "", prefixes, pill_variant),
+    editable: !disabled,
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        class: cn(
+          "cls_textbox_editor",
+          "w-full outline-none",
+          "whitespace-nowrap overflow-x-auto"
+        )
+      },
+      handleKeyDown: (_view, event) => {
+        if (event.key === "Enter" && !suggestion_state?.is_active) {
+          event.preventDefault();
+          if (on_submit && editor) {
+            on_submit(get_editor_output(editor));
+          }
+          return true;
+        }
+        return false;
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      if (on_change) {
+        on_change(get_editor_output(editor2));
+      }
+    }
+  });
+  React27__namespace.useEffect(() => {
+    if (suggestion_state?.is_active && editor) {
+      requestAnimationFrame(() => {
+        const { from } = suggestion_state.range;
+        try {
+          const coords = editor.view.coordsAtPos(from);
+          if (coords) {
+            set_popover_position({
+              top: coords.bottom + 4,
+              left: coords.left
+            });
+          }
+        } catch {
+          const rect = suggestion_state.client_rect?.();
+          if (rect) {
+            set_popover_position({
+              top: rect.bottom + 4,
+              left: rect.left
+            });
+          }
+        }
+      });
+    }
+  }, [suggestion_state, editor]);
+  React27__namespace.useEffect(() => {
+    if (is_controlled && editor && !editor.isFocused) {
+      const current_text = editor.getText();
+      if (value !== current_text) {
+        const content = text_to_tiptap_content(value || "", prefixes, pill_variant);
+        editor.commands.setContent(content, { emitUpdate: false });
+      }
+    }
+  }, [value, editor, is_controlled, prefixes, pill_variant]);
+  React27__namespace.useEffect(() => {
+    if (editor) {
+      editor.setEditable(!disabled);
+    }
+  }, [disabled, editor]);
+  const handle_command_select = React27__namespace.useCallback(
+    (command) => {
+      if (!editor || !suggestion_state) return;
+      insert_command_at_position(
+        editor,
+        command,
+        suggestion_state.prefix,
+        suggestion_state.range,
+        pill_variant
+      );
+      if (on_command_insert) {
+        on_command_insert(command, suggestion_state.prefix);
+      }
+      set_suggestion_state(null);
+    },
+    [editor, suggestion_state, pill_variant, on_command_insert]
+  );
+  const handle_popover_close = React27__namespace.useCallback(() => {
+    set_suggestion_state(null);
+    editor?.commands.focus();
+  }, [editor]);
+  const handle_edit_close = React27__namespace.useCallback(() => {
+    set_edit_context(null);
+    editor?.commands.focus();
+  }, [editor]);
+  const handle_command_update = React27__namespace.useCallback(
+    (new_command) => {
+      if (!editor || !edit_context) return;
+      const old_command = edit_context.command;
+      editor.commands.updateCommand(old_command.id, {
+        action: new_command.action,
+        action_label: new_command.action_label
+      });
+      if (on_command_change) {
+        on_command_change(old_command, new_command);
+      }
+      set_edit_context(null);
+      editor.commands.focus();
+    },
+    [editor, edit_context, on_command_change]
+  );
+  const handle_command_remove = React27__namespace.useCallback(() => {
+    if (!editor || !edit_context) return;
+    const command = edit_context.command;
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === "commandNode" && node.attrs.id === command.id) {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run();
+        return false;
+      }
+    });
+    if (on_command_remove) {
+      on_command_remove(command);
+    }
+    set_edit_context(null);
+  }, [editor, edit_context, on_command_remove]);
+  const filtered_commands = React27__namespace.useMemo(() => {
+    if (!suggestion_state) return [];
+    const query = suggestion_state.query.toLowerCase();
+    if (!query) return suggestion_state.commands;
+    return suggestion_state.commands.filter(
+      (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
+    );
+  }, [suggestion_state]);
+  React27__namespace.useEffect(() => {
+    if (!suggestion_state?.is_active) return;
+    const handle_keydown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          set_selected_index(
+            (prev) => Math.min(prev + 1, filtered_commands.length - 1)
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          set_selected_index((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (filtered_commands[selected_index]) {
+            handle_command_select(filtered_commands[selected_index]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          handle_popover_close();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handle_keydown);
+    return () => window.removeEventListener("keydown", handle_keydown);
+  }, [
+    suggestion_state?.is_active,
+    filtered_commands,
+    selected_index,
+    handle_command_select,
+    handle_popover_close
+  ]);
+  React27__namespace.useEffect(() => {
+    if (!edit_context) return;
+    const handle_click_outside = (e) => {
+      if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
+        set_edit_context(null);
+      }
+    };
+    const timeout = setTimeout(() => {
+      document.addEventListener("mousedown", handle_click_outside);
+    }, 100);
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener("mousedown", handle_click_outside);
+    };
+  }, [edit_context]);
+  const edit_commands = React27__namespace.useMemo(() => {
+    if (!edit_context) return [];
+    const prefix_config = prefixes.find((p) => p.char === edit_context.command.prefix);
+    return prefix_config?.commands || [];
+  }, [edit_context, prefixes]);
+  React27__namespace.useEffect(() => {
+    if (!edit_context) return;
+    const handle_keydown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          set_edit_selected_index(
+            (prev) => Math.min(prev + 1, edit_commands.length)
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          set_edit_selected_index((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (edit_selected_index === edit_commands.length) {
+            handle_command_remove();
+          } else if (edit_commands[edit_selected_index]) {
+            handle_command_update(edit_commands[edit_selected_index]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          handle_edit_close();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handle_keydown);
+    return () => window.removeEventListener("keydown", handle_keydown);
+  }, [
+    edit_context,
+    edit_commands,
+    edit_selected_index,
+    handle_command_update,
+    handle_command_remove,
+    handle_edit_close
+  ]);
+  React27__namespace.useEffect(() => {
+    const handle_pill_click = (e) => {
+      const detail = e.detail;
+      const { id, prefix, action, action_label, node_pos } = detail;
+      if (editor) {
+        try {
+          const coords = editor.view.coordsAtPos(node_pos);
+          if (coords) {
+            const prefix_config = prefixes.find((p) => p.char === prefix);
+            const current_index = prefix_config?.commands.findIndex(
+              (cmd) => cmd.action === action
+            ) ?? 0;
+            set_edit_context({
+              command: {
+                id,
+                prefix,
+                action,
+                action_label,
+                position: node_pos,
+                length: 0
+              },
+              node_pos,
+              rect: new DOMRect(
+                coords.left,
+                coords.bottom + 4,
+                0,
+                0
+              )
+            });
+            set_edit_selected_index(Math.max(0, current_index));
+          }
+        } catch {
+        }
+      }
+    };
+    document.addEventListener("command-pill-click", handle_pill_click);
+    return () => document.removeEventListener("command-pill-click", handle_pill_click);
+  }, [editor, prefixes]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: editor_container_ref,
+      className: cn(
+        "cls_hazo_ui_textbox",
+        "relative flex h-10 w-full rounded-md border border-input bg-background px-3 py-2",
+        "text-sm ring-offset-background",
+        "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.EditorContent,
+          {
+            editor,
+            className: cn(
+              "cls_textbox_content",
+              "flex-1 min-w-0",
+              "[&_.ProseMirror]:outline-none",
+              "[&_.ProseMirror_p]:m-0",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:text-muted-foreground",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:pointer-events-none",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:float-left",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:h-0"
+            )
+          }
+        ),
+        suggestion_state?.is_active && /* @__PURE__ */ jsxRuntime.jsx(
+          CommandPopover,
+          {
+            is_open: true,
+            commands: filtered_commands,
+            prefix: suggestion_state.prefix,
+            query: suggestion_state.query,
+            selected_index,
+            position: popover_position,
+            on_query_change: () => {
+            },
+            on_select: handle_command_select,
+            on_close: handle_popover_close,
+            on_selection_change: set_selected_index
+          }
+        ),
+        edit_context && mounted && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: edit_popover_ref,
+              className: cn(
+                "cls_edit_popover",
+                "fixed z-[9999]",
+                "w-64 min-w-[200px] max-w-[300px]",
+                "rounded-md border bg-popover text-popover-foreground shadow-lg",
+                "animate-in fade-in-0 zoom-in-95"
+              ),
+              style: {
+                top: edit_context.rect.y,
+                left: edit_context.rect.x
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
+                  edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "px-3 py-2 cursor-pointer flex items-center gap-2",
+                        "hover:bg-accent",
+                        idx === edit_selected_index && "bg-accent",
+                        cmd.action === edit_context.command.action && "font-medium"
+                      ),
+                      onClick: () => handle_command_update(cmd),
+                      children: [
+                        cmd.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate", children: [
+                            edit_context.command.prefix,
+                            cmd.action_label
+                          ] }),
+                          cmd.action_description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
+                        ] }),
+                        cmd.action === edit_context.command.action && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
+                      ]
+                    },
+                    cmd.action
+                  )),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
+                        "hover:bg-destructive/10",
+                        edit_selected_index === edit_commands.length && "bg-destructive/10"
+                      ),
+                      onClick: handle_command_remove,
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Remove" })
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+HazoUiTextbox.displayName = "HazoUiTextbox";
+var HardBreak = core.Node.create({
+  name: "hardBreak",
+  markdownTokenName: "br",
+  addOptions() {
+    return {
+      keepMarks: true,
+      HTMLAttributes: {}
+    };
+  },
+  inline: true,
+  group: "inline",
+  selectable: false,
+  linebreakReplacement: true,
+  parseHTML() {
+    return [{ tag: "br" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["br", core.mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
+  },
+  renderText() {
+    return "\n";
+  },
+  renderMarkdown: () => `  
+`,
+  parseMarkdown: () => {
+    return {
+      type: "hardBreak"
+    };
+  },
+  addCommands() {
+    return {
+      setHardBreak: () => ({ commands, chain, state, editor }) => {
+        return commands.first([
+          () => commands.exitCode(),
+          () => commands.command(() => {
+            const { selection, storedMarks } = state;
+            if (selection.$from.parent.type.spec.isolating) {
+              return false;
+            }
+            const { keepMarks } = this.options;
+            const { splittableMarks } = editor.extensionManager;
+            const marks = storedMarks || selection.$to.parentOffset && selection.$from.marks();
+            return chain().insertContent({ type: this.name }).command(({ tr, dispatch }) => {
+              if (dispatch && marks && keepMarks) {
+                const filteredMarks = marks.filter((mark) => splittableMarks.includes(mark.type.name));
+                tr.ensureMarks(filteredMarks);
+              }
+              return true;
+            }).run();
+          })
+        ]);
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      "Mod-Enter": () => this.editor.commands.setHardBreak(),
+      "Shift-Enter": () => this.editor.commands.setHardBreak()
+    };
+  }
+});
+var index_default4 = HardBreak;
+var get_editor_output2 = (editor) => {
+  if (!editor) {
+    return { plain_text: "", display_text: "", commands: [] };
+  }
+  const plain_text = editor.getText();
+  const commands = [];
+  let display_text = "";
+  let position = 0;
+  editor.state.doc.descendants((node, _pos) => {
+    if (node.type.name === "text") {
+      display_text += node.text || "";
+      position += (node.text || "").length;
+    } else if (node.type.name === "commandNode") {
+      const { id, prefix, action, action_label } = node.attrs;
+      const cmd_plain_text = `${prefix}${action}`;
+      const cmd_display_text = `${prefix}${action_label}`;
+      commands.push({
+        id,
+        prefix,
+        action,
+        action_label,
+        position,
+        length: cmd_plain_text.length
+      });
+      display_text += cmd_display_text;
+      position += cmd_plain_text.length;
+    } else if (node.type.name === "hardBreak") {
+      display_text += "\n";
+      position += 1;
+    }
+  });
+  return { plain_text, display_text, commands };
+};
+var multiline_text_to_tiptap_content = (text, prefixes, variant = "default") => {
+  const lines = text.split("\n");
+  const paragraphs = [];
+  for (const line of lines) {
+    const line_content = text_to_tiptap_content(line, prefixes, variant);
+    const para = line_content.content?.[0];
+    if (para) {
+      paragraphs.push(para);
+    } else {
+      paragraphs.push({ type: "paragraph", content: [] });
+    }
+  }
+  return {
+    type: "doc",
+    content: paragraphs.length > 0 ? paragraphs : [{ type: "paragraph", content: [] }]
+  };
+};
+var HazoUiTextarea = ({
+  value,
+  default_value,
+  prefixes,
+  placeholder = "Type here...",
+  disabled = false,
+  className,
+  pill_variant = "default",
+  min_height = "80px",
+  max_height = "200px",
+  rows,
+  on_change,
+  on_submit,
+  on_command_insert,
+  on_command_change,
+  on_command_remove
+}) => {
+  const [suggestion_state, set_suggestion_state] = React27__namespace.useState(null);
+  const [selected_index, set_selected_index] = React27__namespace.useState(0);
+  const [popover_position, set_popover_position] = React27__namespace.useState({ top: 0, left: 0 });
+  const [edit_context, set_edit_context] = React27__namespace.useState(null);
+  const [edit_selected_index, set_edit_selected_index] = React27__namespace.useState(0);
+  const is_controlled = value !== void 0;
+  const editor_container_ref = React27__namespace.useRef(null);
+  const edit_popover_ref = React27__namespace.useRef(null);
+  const [mounted, set_mounted] = React27__namespace.useState(false);
+  React27__namespace.useEffect(() => {
+    set_mounted(true);
+  }, []);
+  const calculated_min_height = rows ? `${rows * 1.5}em` : min_height;
+  const suggestion_extensions = React27__namespace.useMemo(() => {
+    return create_command_suggestion_extension({
+      prefixes,
+      on_suggestion_change: (state) => {
+        set_suggestion_state(state);
+        set_selected_index(0);
+      },
+      on_insert_command: (_command, _prefix, _range) => {
+      }
+    });
+  }, [prefixes]);
+  const editor = react.useEditor({
+    extensions: [
+      index_default,
+      index_default2,
+      index_default3,
+      index_default4,
+      Placeholder__default.default.configure({
+        placeholder
+      }),
+      CommandNodeExtension.configure({}),
+      ...suggestion_extensions
+    ],
+    content: is_controlled ? multiline_text_to_tiptap_content(value || "", prefixes, pill_variant) : multiline_text_to_tiptap_content(default_value || "", prefixes, pill_variant),
+    editable: !disabled,
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        class: cn("cls_textarea_editor", "w-full outline-none"),
+        style: `min-height: ${calculated_min_height}; max-height: ${max_height}`
+      },
+      handleKeyDown: (_view, event) => {
+        if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && !suggestion_state?.is_active) {
+          event.preventDefault();
+          if (on_submit && editor) {
+            on_submit(get_editor_output2(editor));
+          }
+          return true;
+        }
+        return false;
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      if (on_change) {
+        on_change(get_editor_output2(editor2));
+      }
+    }
+  });
+  React27__namespace.useEffect(() => {
+    if (suggestion_state?.is_active && editor) {
+      requestAnimationFrame(() => {
+        const { from } = suggestion_state.range;
+        try {
+          const coords = editor.view.coordsAtPos(from);
+          if (coords) {
+            set_popover_position({
+              top: coords.bottom + 4,
+              left: coords.left
+            });
+          }
+        } catch {
+          const rect = suggestion_state.client_rect?.();
+          if (rect) {
+            set_popover_position({
+              top: rect.bottom + 4,
+              left: rect.left
+            });
+          }
+        }
+      });
+    }
+  }, [suggestion_state, editor]);
+  React27__namespace.useEffect(() => {
+    if (is_controlled && editor && !editor.isFocused) {
+      const current_text = editor.getText();
+      if (value !== current_text) {
+        const content = multiline_text_to_tiptap_content(
+          value || "",
+          prefixes,
+          pill_variant
+        );
+        editor.commands.setContent(content, { emitUpdate: false });
+      }
+    }
+  }, [value, editor, is_controlled, prefixes, pill_variant]);
+  React27__namespace.useEffect(() => {
+    if (editor) {
+      editor.setEditable(!disabled);
+    }
+  }, [disabled, editor]);
+  const handle_command_select = React27__namespace.useCallback(
+    (command) => {
+      if (!editor || !suggestion_state) return;
+      insert_command_at_position(
+        editor,
+        command,
+        suggestion_state.prefix,
+        suggestion_state.range,
+        pill_variant
+      );
+      if (on_command_insert) {
+        on_command_insert(command, suggestion_state.prefix);
+      }
+      set_suggestion_state(null);
+    },
+    [editor, suggestion_state, pill_variant, on_command_insert]
+  );
+  const handle_popover_close = React27__namespace.useCallback(() => {
+    set_suggestion_state(null);
+    editor?.commands.focus();
+  }, [editor]);
+  const handle_edit_close = React27__namespace.useCallback(() => {
+    set_edit_context(null);
+    editor?.commands.focus();
+  }, [editor]);
+  const handle_command_update = React27__namespace.useCallback(
+    (new_command) => {
+      if (!editor || !edit_context) return;
+      const old_command = edit_context.command;
+      editor.commands.updateCommand(old_command.id, {
+        action: new_command.action,
+        action_label: new_command.action_label
+      });
+      if (on_command_change) {
+        on_command_change(old_command, new_command);
+      }
+      set_edit_context(null);
+      editor.commands.focus();
+    },
+    [editor, edit_context, on_command_change]
+  );
+  const handle_command_remove = React27__namespace.useCallback(() => {
+    if (!editor || !edit_context) return;
+    const command = edit_context.command;
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === "commandNode" && node.attrs.id === command.id) {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + node.nodeSize }).run();
+        return false;
+      }
+    });
+    if (on_command_remove) {
+      on_command_remove(command);
+    }
+    set_edit_context(null);
+  }, [editor, edit_context, on_command_remove]);
+  const filtered_commands = React27__namespace.useMemo(() => {
+    if (!suggestion_state) return [];
+    const query = suggestion_state.query.toLowerCase();
+    if (!query) return suggestion_state.commands;
+    return suggestion_state.commands.filter(
+      (cmd) => cmd.action_label.toLowerCase().includes(query) || cmd.action.toLowerCase().includes(query) || cmd.action_description?.toLowerCase().includes(query)
+    );
+  }, [suggestion_state]);
+  React27__namespace.useEffect(() => {
+    if (!suggestion_state?.is_active) return;
+    const handle_keydown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          set_selected_index(
+            (prev) => Math.min(prev + 1, filtered_commands.length - 1)
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          set_selected_index((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (filtered_commands[selected_index]) {
+            handle_command_select(filtered_commands[selected_index]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          handle_popover_close();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handle_keydown);
+    return () => window.removeEventListener("keydown", handle_keydown);
+  }, [
+    suggestion_state?.is_active,
+    filtered_commands,
+    selected_index,
+    handle_command_select,
+    handle_popover_close
+  ]);
+  React27__namespace.useEffect(() => {
+    if (!edit_context) return;
+    const handle_click_outside = (e) => {
+      if (edit_popover_ref.current && !edit_popover_ref.current.contains(e.target)) {
+        set_edit_context(null);
+      }
+    };
+    const timeout = setTimeout(() => {
+      document.addEventListener("mousedown", handle_click_outside);
+    }, 100);
+    return () => {
+      clearTimeout(timeout);
+      document.removeEventListener("mousedown", handle_click_outside);
+    };
+  }, [edit_context]);
+  const edit_commands = React27__namespace.useMemo(() => {
+    if (!edit_context) return [];
+    const prefix_config = prefixes.find((p) => p.char === edit_context.command.prefix);
+    return prefix_config?.commands || [];
+  }, [edit_context, prefixes]);
+  React27__namespace.useEffect(() => {
+    if (!edit_context) return;
+    const handle_keydown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          set_edit_selected_index(
+            (prev) => Math.min(prev + 1, edit_commands.length)
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          set_edit_selected_index((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (edit_selected_index === edit_commands.length) {
+            handle_command_remove();
+          } else if (edit_commands[edit_selected_index]) {
+            handle_command_update(edit_commands[edit_selected_index]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          handle_edit_close();
+          break;
+      }
+    };
+    window.addEventListener("keydown", handle_keydown);
+    return () => window.removeEventListener("keydown", handle_keydown);
+  }, [
+    edit_context,
+    edit_commands,
+    edit_selected_index,
+    handle_command_update,
+    handle_command_remove,
+    handle_edit_close
+  ]);
+  React27__namespace.useEffect(() => {
+    const handle_pill_click = (e) => {
+      const detail = e.detail;
+      const { id, prefix, action, action_label, node_pos } = detail;
+      if (editor) {
+        try {
+          const coords = editor.view.coordsAtPos(node_pos);
+          if (coords) {
+            const prefix_config = prefixes.find((p) => p.char === prefix);
+            const current_index = prefix_config?.commands.findIndex(
+              (cmd) => cmd.action === action
+            ) ?? 0;
+            set_edit_context({
+              command: {
+                id,
+                prefix,
+                action,
+                action_label,
+                position: node_pos,
+                length: 0
+              },
+              node_pos,
+              rect: new DOMRect(
+                coords.left,
+                coords.bottom + 4,
+                0,
+                0
+              )
+            });
+            set_edit_selected_index(Math.max(0, current_index));
+          }
+        } catch {
+        }
+      }
+    };
+    document.addEventListener("command-pill-click", handle_pill_click);
+    return () => document.removeEventListener("command-pill-click", handle_pill_click);
+  }, [editor, prefixes]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: editor_container_ref,
+      className: cn(
+        "cls_hazo_ui_textarea",
+        "relative flex w-full rounded-md border border-input bg-background px-3 py-2",
+        "text-sm ring-offset-background",
+        "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      style: {
+        minHeight: calculated_min_height,
+        maxHeight: max_height
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.EditorContent,
+          {
+            editor,
+            className: cn(
+              "cls_textarea_content",
+              "flex-1 min-w-0 overflow-y-auto",
+              "[&_.ProseMirror]:outline-none",
+              "[&_.ProseMirror_p]:m-0 [&_.ProseMirror_p]:mb-1",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:text-muted-foreground",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:pointer-events-none",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:float-left",
+              "[&_.ProseMirror_.is-editor-empty:first-child::before]:h-0"
+            )
+          }
+        ),
+        suggestion_state?.is_active && /* @__PURE__ */ jsxRuntime.jsx(
+          CommandPopover,
+          {
+            is_open: true,
+            commands: filtered_commands,
+            prefix: suggestion_state.prefix,
+            query: suggestion_state.query,
+            selected_index,
+            position: popover_position,
+            on_query_change: () => {
+            },
+            on_select: handle_command_select,
+            on_close: handle_popover_close,
+            on_selection_change: set_selected_index
+          }
+        ),
+        edit_context && mounted && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: edit_popover_ref,
+              className: cn(
+                "cls_edit_popover",
+                "fixed z-[9999]",
+                "w-64 min-w-[200px] max-w-[300px]",
+                "rounded-md border bg-popover text-popover-foreground shadow-lg",
+                "animate-in fade-in-0 zoom-in-95"
+              ),
+              style: {
+                top: edit_context.rect.y,
+                left: edit_context.rect.x
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-muted-foreground border-b", children: "Change command" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-[200px] overflow-y-auto", children: [
+                  edit_commands.map((cmd, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "px-3 py-2 cursor-pointer flex items-center gap-2",
+                        "hover:bg-accent",
+                        idx === edit_selected_index && "bg-accent",
+                        cmd.action === edit_context.command.action && "font-medium"
+                      ),
+                      onClick: () => handle_command_update(cmd),
+                      children: [
+                        cmd.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-muted-foreground", children: cmd.icon }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate", children: [
+                            edit_context.command.prefix,
+                            cmd.action_label
+                          ] }),
+                          cmd.action_description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground truncate", children: cmd.action_description })
+                        ] }),
+                        cmd.action === edit_context.command.action && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "current" })
+                      ]
+                    },
+                    cmd.action
+                  )),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "px-3 py-2 cursor-pointer flex items-center gap-2 text-destructive border-t",
+                        "hover:bg-destructive/10",
+                        edit_selected_index === edit_commands.length && "bg-destructive/10"
+                      ),
+                      onClick: handle_command_remove,
+                      children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Remove" })
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+HazoUiTextarea.displayName = "HazoUiTextarea";
 
+exports.CommandNodeExtension = CommandNodeExtension;
+exports.CommandPill = CommandPill;
+exports.CommandPopover = CommandPopover;
 exports.HazoUiFlexInput = HazoUiFlexInput;
 exports.HazoUiFlexRadio = HazoUiFlexRadio;
 exports.HazoUiMultiFilterDialog = HazoUiMultiFilterDialog;
 exports.HazoUiMultiSortDialog = HazoUiMultiSortDialog;
 exports.HazoUiRte = HazoUiRte;
+exports.HazoUiTextarea = HazoUiTextarea;
+exports.HazoUiTextbox = HazoUiTextbox;
+exports.create_command_suggestion_extension = create_command_suggestion_extension;
+exports.parse_commands_from_text = parse_commands_from_text;
+exports.text_to_tiptap_content = text_to_tiptap_content;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map