@rufous/ui 0.3.11 → 0.3.14

package/dist/main.js

@@ -1353,7 +1353,7 @@ IconButton.displayName = "IconButton";
 
 // lib/Dialogs/BaseDialog.tsx
 import * as React65 from "react";
-import { useState as useState2, useContext, useEffect as useEffect2 } from "react";
+import { useState as useState2, useContext, useEffect as useEffect2, useRef as useRef3, useCallback } from "react";
 import ReactDOM from "react-dom";
 import { X } from "lucide-react";
 var DialogDepthContext = React65.createContext(0);
@@ -1390,6 +1390,43 @@ var BaseDialog = ({
   const { themeConfig } = useRufousTheme();
   const [isSubmitting, setIsSubmitting] = useState2(false);
   const sxClass = useSx(sx);
+  const containerRef = useRef3(null);
+  const setContainerRef = useCallback((el) => {
+    containerRef.current = el;
+  }, []);
+  useEffect2(() => {
+    if (!open) return;
+    const FOCUSABLE = [
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])',
+      "[href]"
+    ].join(", ");
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab" || !containerRef.current) return;
+      const els = Array.from(
+        containerRef.current.querySelectorAll(FOCUSABLE)
+      ).filter((el) => !el.closest("[disabled]") && el.offsetParent !== null);
+      if (!els.length) return;
+      const first = els[0];
+      const last = els[els.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open]);
   const depth = useContext(DialogDepthContext);
   const overlayZ = 2e3 + depth * 200;
   const portalZ = overlayZ + 100;
@@ -1464,6 +1501,7 @@ var BaseDialog = ({
   const dialogContent = form ? /* @__PURE__ */ React65.createElement(
     "form",
     {
+      ref: setContainerRef,
       className: containerClass,
       style: containerStyle,
       onSubmit: (e) => {
@@ -1472,7 +1510,15 @@ var BaseDialog = ({
       }
     },
     dialogInner
-  ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
+  ) : /* @__PURE__ */ React65.createElement(
+    "div",
+    {
+      ref: setContainerRef,
+      className: containerClass,
+      style: containerStyle
+    },
+    dialogInner
+  );
   const overlayNode = (content) => /* @__PURE__ */ React65.createElement(
     "div",
     {
@@ -1787,24 +1833,24 @@ var TextField = forwardRef3(({
 TextField.displayName = "TextField";
 
 // lib/TextFields/AddressLookup.tsx
-import React71, { useState as useState6, useRef as useRef5, useEffect as useEffect6 } from "react";
+import React71, { useState as useState6, useRef as useRef6, useEffect as useEffect6 } from "react";
 import Axios from "axios";
 import { Country, State, City } from "country-state-city";
 
 // lib/TextFields/Autocomplete.tsx
 import React70, {
   useState as useState5,
-  useRef as useRef4,
+  useRef as useRef5,
   useEffect as useEffect5,
-  useCallback as useCallback2
+  useCallback as useCallback3
 } from "react";
 import ReactDOM3 from "react-dom";
 
 // lib/Tooltip/Tooltip.tsx
 import React69, {
-  useCallback,
+  useCallback as useCallback2,
   useEffect as useEffect4,
-  useRef as useRef3,
+  useRef as useRef4,
   useState as useState4
 } from "react";
 import ReactDOM2 from "react-dom";
@@ -1905,17 +1951,17 @@ var Tooltip = ({
   const sxClass = useSx(sx);
   const [internalOpen, setInternalOpen] = useState4(false);
   const [position, setPosition] = useState4({ top: 0, left: 0 });
-  const anchorRef = useRef3(null);
-  const tooltipRef = useRef3(null);
-  const enterTimer = useRef3(null);
-  const leaveTimer = useRef3(null);
-  const cursorPos = useRef3({ x: 0, y: 0 });
+  const anchorRef = useRef4(null);
+  const tooltipRef = useRef4(null);
+  const enterTimer = useRef4(null);
+  const leaveTimer = useRef4(null);
+  const cursorPos = useRef4({ x: 0, y: 0 });
   const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
-  const clearTimers = useCallback(() => {
+  const clearTimers = useCallback2(() => {
     if (enterTimer.current) clearTimeout(enterTimer.current);
     if (leaveTimer.current) clearTimeout(leaveTimer.current);
   }, []);
-  const updatePosition = useCallback(() => {
+  const updatePosition = useCallback2(() => {
     if (!anchorRef.current || !tooltipRef.current) return;
     const anchorRect = anchorRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
@@ -1943,7 +1989,7 @@ var Tooltip = ({
       });
     }
   }, [isOpen, updatePosition]);
-  const handleOpen = useCallback(() => {
+  const handleOpen = useCallback2(() => {
     clearTimers();
     if (enterDelay > 0) {
       enterTimer.current = setTimeout(() => {
@@ -1953,7 +1999,7 @@ var Tooltip = ({
       setInternalOpen(true);
     }
   }, [enterDelay, clearTimers]);
-  const handleClose = useCallback(() => {
+  const handleClose = useCallback2(() => {
     clearTimers();
     if (leaveDelay > 0) {
       leaveTimer.current = setTimeout(() => {
@@ -1963,7 +2009,7 @@ var Tooltip = ({
       setInternalOpen(false);
     }
   }, [leaveDelay, clearTimers]);
-  const handleMouseMove = useCallback(
+  const handleMouseMove = useCallback2(
     (e) => {
       cursorPos.current = { x: e.clientX, y: e.clientY };
       if (isOpen && followCursor) {
@@ -2108,13 +2154,13 @@ function AutocompleteInner(props, _ref) {
   const [filterQuery, setFilterQuery] = useState5("");
   const [focusedIdx, setFocusedIdx] = useState5(-1);
   const [popupStyle, setPopupStyle] = useState5({});
-  const containerRef = useRef4(null);
-  const popupRef = useRef4(null);
-  const inputRef = useRef4(null);
-  const listRef = useRef4(null);
-  const inputId = useRef4(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
+  const containerRef = useRef5(null);
+  const popupRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const listRef = useRef5(null);
+  const inputId = useRef5(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
-  const calcPopupStyle = useCallback2(() => {
+  const calcPopupStyle = useCallback3(() => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const POPUP_MAX_HEIGHT = 280;
@@ -2145,7 +2191,7 @@ function AutocompleteInner(props, _ref) {
   }, []);
   const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
   const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
-  const isEqual = useCallback2(
+  const isEqual = useCallback3(
     (a, b) => {
       if (isOptionEqualToValue) return isOptionEqualToValue(a, b);
       if (getOptionSelected) return getOptionSelected(a, b);
@@ -2153,7 +2199,7 @@ function AutocompleteInner(props, _ref) {
     },
     [isOptionEqualToValue, getOptionSelected]
   );
-  const isSelected = useCallback2(
+  const isSelected = useCallback3(
     (opt) => selectedValues.some((v) => isEqual(opt, v)),
     [selectedValues, isEqual]
   );
@@ -2186,7 +2232,7 @@ function AutocompleteInner(props, _ref) {
     filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
   }
   const selectableOptions = flatEntries.filter((e) => e.kind === "option");
-  const openPopup = useCallback2(() => {
+  const openPopup = useCallback3(() => {
     if (disabled) return;
     calcPopupStyle();
     if (openProp === void 0) setInternalOpen(true);
@@ -2194,7 +2240,7 @@ function AutocompleteInner(props, _ref) {
     setFilterQuery("");
     onOpen?.();
   }, [disabled, calcPopupStyle, onOpen, openProp]);
-  const closePopup = useCallback2((justSelected = false) => {
+  const closePopup = useCallback3((justSelected = false) => {
     if (openProp === void 0) setInternalOpen(false);
     setFocusedIdx(-1);
     onClose?.();
@@ -2213,11 +2259,19 @@ function AutocompleteInner(props, _ref) {
         closePopup();
       }
     };
+    const handleFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
+        closePopup();
+      }
+    };
     document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("focusout", handleFocusOut);
     window.addEventListener("scroll", calcPopupStyle, true);
     window.addEventListener("resize", calcPopupStyle);
     return () => {
       document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("focusout", handleFocusOut);
       window.removeEventListener("scroll", calcPopupStyle, true);
       window.removeEventListener("resize", calcPopupStyle);
     };
@@ -2414,6 +2468,7 @@ function AutocompleteInner(props, _ref) {
           e.preventDefault();
           open ? closePopup() : openPopup();
         },
+        onClick: (e) => e.stopPropagation(),
         tabIndex: -1,
         "aria-label": open ? "Close" : "Open"
       },
@@ -2498,8 +2553,8 @@ var AddressLookup = ({
   const [suggestions, setSuggestions] = useState6([]);
   const [loading, setLoading] = useState6(false);
   const [showSuggestions, setShowSuggestions] = useState6(false);
-  const debounceTimeout = useRef5(null);
-  const containerRef = useRef5(null);
+  const debounceTimeout = useRef6(null);
+  const containerRef = useRef6(null);
   const apiKey = token || "";
   const countries = Country.getAllCountries();
   const [states, setStates] = useState6([]);
@@ -2744,9 +2799,9 @@ var AddressLookup_default = AddressLookup;
 // lib/TextFields/DateField.tsx
 import React72, {
   useState as useState7,
-  useRef as useRef6,
+  useRef as useRef7,
   useEffect as useEffect7,
-  useCallback as useCallback3
+  useCallback as useCallback4
 } from "react";
 import { createPortal } from "react-dom";
 var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
@@ -2926,9 +2981,9 @@ var ChevUp = () => /* @__PURE__ */ React72.createElement("svg", { width: "10", h
 var ChevDown = () => /* @__PURE__ */ React72.createElement("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "currentColor" }, /* @__PURE__ */ React72.createElement("path", { d: "M5 7L0 0H10L5 7Z" }));
 var ITEM_H = 36;
 var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
-  const listRef = useRef6(null);
-  const isInternalScroll = useRef6(false);
-  const scrollTimeout = useRef6(null);
+  const listRef = useRef7(null);
+  const isInternalScroll = useRef7(false);
+  const scrollTimeout = useRef7(null);
   const MULTIPLIER = infinite ? 100 : 1;
   const virtualItems = infinite ? Array(MULTIPLIER).fill(items).flat() : items;
   const centerOffset = infinite ? Math.floor(MULTIPLIER / 2) * items.length : 0;
@@ -3040,6 +3095,24 @@ var SpinnerPanel = ({
   },
   "PM"
 )));
+var formatViewsDisplay = (d, views) => {
+  if (!views.includes("day") && !views.includes("month")) return String(d.getFullYear());
+  if (!views.includes("day")) return `${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+  return "";
+};
+var parseYearDisplay = (str) => {
+  const y = parseInt(str.trim(), 10);
+  if (isNaN(y) || y < 1e3 || y > 9999) return null;
+  return new Date(y, 0, 1);
+};
+var parseMonthYearDisplay = (str) => {
+  const parts = str.trim().split(/\s+/);
+  if (parts.length < 2) return null;
+  const mm = parseMonthName(parts[0]);
+  const yyyy = parseInt(parts[parts.length - 1], 10);
+  if (mm < 0 || isNaN(yyyy) || yyyy < 1e3) return null;
+  return new Date(yyyy, mm, 1);
+};
 var CalendarBody = ({
   viewMonth,
   viewYear,
@@ -3052,18 +3125,48 @@ var CalendarBody = ({
   onMonthSelect,
   onYearSelect,
   minDate,
-  maxDate
+  maxDate,
+  views,
+  onFinalMonthSelect,
+  onFinalYearSelect
 }) => {
-  const [pickerView, setPickerView] = useState7("calendar");
-  const handleMonthClick = () => setPickerView(pickerView === "month" ? "calendar" : "month");
-  const handleYearClick = () => setPickerView(pickerView === "year" ? "calendar" : "year");
+  const hasDayView = views.includes("day");
+  const hasMonthView = views.includes("month");
+  const hasYearView = views.includes("year");
+  const [pickerView, setPickerView] = useState7(() => {
+    if (!hasDayView && !hasMonthView) return "year";
+    if (!hasDayView) return "month";
+    return "calendar";
+  });
+  const handleMonthClick = () => {
+    if (!hasMonthView || !hasDayView) return;
+    setPickerView((v) => v === "month" ? "calendar" : "month");
+  };
+  const handleYearClick = () => {
+    if (!hasYearView) return;
+    if (pickerView === "year") {
+      setPickerView(hasDayView ? "calendar" : "month");
+    } else {
+      setPickerView("year");
+    }
+  };
   const handleMonthPick = (month) => {
     onMonthSelect(month);
-    setPickerView("calendar");
+    if (hasDayView) {
+      setPickerView("calendar");
+    } else {
+      onFinalMonthSelect?.(month, viewYear);
+    }
   };
   const handleYearPick = (year) => {
     onYearSelect(year);
-    setPickerView("calendar");
+    if (!hasDayView && !hasMonthView) {
+      onFinalYearSelect?.(year);
+    } else if (hasMonthView) {
+      setPickerView("month");
+    } else {
+      setPickerView("calendar");
+    }
   };
   const currentYear = todayDate.getFullYear();
   const yearStart = viewYear - 6;
@@ -3087,18 +3190,35 @@ var CalendarBody = ({
   return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ React72.createElement(
     "span",
     {
-      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      className: [
+        "rf-date-picker__month-label",
+        pickerView === "month" ? "rf-date-picker__month-label--active" : "",
+        !hasMonthView || !hasDayView ? "rf-date-picker__label--static" : ""
+      ].filter(Boolean).join(" "),
       onClick: handleMonthClick
     },
     MONTHS[viewMonth]
   ), /* @__PURE__ */ React72.createElement(
     "span",
     {
-      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      className: [
+        "rf-date-picker__year-label",
+        pickerView === "year" ? "rf-date-picker__year-label--active" : "",
+        !hasYearView ? "rf-date-picker__label--static" : ""
+      ].filter(Boolean).join(" "),
       onClick: handleYearClick
     },
     viewYear
-  )), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, disabled: isPrevDisabled, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, disabled: isNextDisabled, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => {
+  )), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? (
+    // Year page navigation
+    /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A"))
+  ) : pickerView === "month" && !hasDayView ? (
+    // Month-only or month+year mode: ‹ › change year
+    /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 1), "aria-label": "Previous year" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 1), "aria-label": "Next year" }, "\u203A"))
+  ) : (
+    // Normal month navigation
+    /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, disabled: isPrevDisabled, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React72.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, disabled: isNextDisabled, "aria-label": "Next month" }, "\u203A"))
+  ))), pickerView === "month" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => {
     const monthDisabled = isMonthDisabled(idx);
     return /* @__PURE__ */ React72.createElement(
       "button",
@@ -3134,7 +3254,7 @@ var CalendarBody = ({
       },
       y
     );
-  })), pickerView === "calendar" && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React72.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+  })), pickerView === "calendar" && hasDayView && /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React72.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
     if (day === null) return /* @__PURE__ */ React72.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
     const cellDate = new Date(viewYear, viewMonth, day);
     const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
@@ -3177,8 +3297,12 @@ var DateField = ({
   placeholder,
   className = "",
   style,
-  sx
+  sx,
+  views: viewsProp
 }) => {
+  const views = viewsProp ?? ["day", "month", "year"];
+  const hasDayView = views.includes("day");
+  const hasMonthView = views.includes("month");
   const minDate = normaliseBoundary(minDateProp);
   const maxDate = normaliseBoundary(maxDateProp);
   const sxClass = useSx(sx);
@@ -3208,6 +3332,8 @@ var DateField = ({
     if (!value) return "";
     const d = isoToDate(value);
     if (!d) return "";
+    const viewsStr = formatViewsDisplay(d, views);
+    if (viewsStr) return viewsStr;
     let str = formatDisplay(d, dateFormat);
     if (isDatetimeType(type)) {
       const t = parseTimeFromISO(value);
@@ -3218,10 +3344,10 @@ var DateField = ({
   const HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, "0"));
   const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const AMPMS = ["AM", "PM"];
-  const containerRef = useRef6(null);
-  const pickerRef = useRef6(null);
-  const inputId = useRef6(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
-  const isInternalChange = useRef6(false);
+  const containerRef = useRef7(null);
+  const pickerRef = useRef7(null);
+  const inputId = useRef7(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
+  const isInternalChange = useRef7(false);
   useEffect7(() => {
     if (value === void 0) return;
     if (isInternalChange.current) {
@@ -3238,15 +3364,20 @@ var DateField = ({
     if (d) {
       setViewYear(d.getFullYear());
       setViewMonth(d.getMonth());
-      let str = formatDisplay(d, dateFormat);
-      if (isDatetimeType(type)) {
-        const t = parseTimeFromISO(value);
-        setHour(t.h);
-        setMinute(t.m);
-        setAmpm(t.ampm);
-        str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+      const viewsStr = formatViewsDisplay(d, views);
+      if (viewsStr) {
+        setInputStr(viewsStr);
+      } else {
+        let str = formatDisplay(d, dateFormat);
+        if (isDatetimeType(type)) {
+          const t = parseTimeFromISO(value);
+          setHour(t.h);
+          setMinute(t.m);
+          setAmpm(t.ampm);
+          str += " " + formatTimeDisplay(t.h, t.m, t.ampm);
+        }
+        setInputStr(str);
       }
-      setInputStr(str);
     }
   }, [value, type]);
   useEffect7(() => {
@@ -3257,21 +3388,37 @@ var DateField = ({
       if (pickerRef.current?.contains(target)) return;
       setOpen(false);
     };
+    const handleFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (!containerRef.current?.contains(next) && !pickerRef.current?.contains(next)) {
+        setOpen(false);
+      }
+    };
     document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
+    document.addEventListener("focusout", handleFocusOut);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("focusout", handleFocusOut);
+    };
   }, [open]);
-  const commitDate = useCallback3((d, h, m, ap) => {
+  const commitDate = useCallback4((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
       setInputStr("");
       onChange?.("");
       return;
     }
-    let str = formatDisplay(d, dateFormat);
-    if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
+    const viewsStr = formatViewsDisplay(d, views);
+    let str;
+    if (viewsStr) {
+      str = viewsStr;
+    } else {
+      str = formatDisplay(d, dateFormat);
+      if (isDatetimeType(type)) str += " " + formatTimeDisplay(h, m, ap);
+    }
     setInputStr(str);
     onChange?.(buildISO(d, type, h, m, ap));
-  }, [type, onChange, dateFormat]);
+  }, [type, onChange, dateFormat, views]);
   const isOutOfRange = (d) => (minDate ? isBeforeDay(d, minDate) : false) || (maxDate ? isAfterDay(d, maxDate) : false);
   const handleDayClick = (day) => {
     const d = new Date(viewYear, viewMonth, day);
@@ -3285,49 +3432,102 @@ var DateField = ({
   };
   const handleToday = () => {
     const t = today();
-    if (isOutOfRange(t)) return;
-    setViewYear(t.getFullYear());
-    setViewMonth(t.getMonth());
-    commitDate(t, hour, minute, ampm);
-    if (type === "date") setOpen(false);
+    if (!hasDayView && !hasMonthView) {
+      const d = new Date(t.getFullYear(), 0, 1);
+      if (isOutOfRange(d)) return;
+      setViewYear(t.getFullYear());
+      commitDate(d, hour, minute, ampm);
+      setOpen(false);
+    } else if (!hasDayView) {
+      const d = new Date(t.getFullYear(), t.getMonth(), 1);
+      if (isOutOfRange(d)) return;
+      setViewYear(t.getFullYear());
+      setViewMonth(t.getMonth());
+      commitDate(d, hour, minute, ampm);
+      setOpen(false);
+    } else {
+      if (isOutOfRange(t)) return;
+      setViewYear(t.getFullYear());
+      setViewMonth(t.getMonth());
+      commitDate(t, hour, minute, ampm);
+      if (type === "date") setOpen(false);
+    }
   };
+  const handleFinalMonthSelect = useCallback4((month, year) => {
+    const d = new Date(year, month, 1);
+    if (isOutOfRange(d)) return;
+    setSelectedDate(d);
+    setViewYear(year);
+    setViewMonth(month);
+    setInputStr(`${MONTHS_SHORT[month]} ${year}`);
+    onChange?.(buildISO(d, type, hour, minute, ampm));
+    setOpen(false);
+  }, [isOutOfRange, onChange, type, hour, minute, ampm]);
+  const handleFinalYearSelect = useCallback4((year) => {
+    const d = new Date(year, 0, 1);
+    if (isOutOfRange(d)) return;
+    setSelectedDate(d);
+    setViewYear(year);
+    setInputStr(String(year));
+    onChange?.(buildISO(d, type, hour, minute, ampm));
+    setOpen(false);
+  }, [isOutOfRange, onChange, type, hour, minute, ampm]);
   const handleClear = () => commitDate(null, hour, minute, ampm);
   const handleInputChange = (e) => {
     const raw = e.target.value;
     setInputStr(raw);
-    const dateWordCount = getDateWordCount(dateFormat);
-    const words = raw.split(" ");
-    const datePart = words.slice(0, dateWordCount).join(" ");
-    const timeParts = words.slice(dateWordCount);
-    const parsed = parseDisplay(datePart, dateFormat);
-    if (parsed && !isOutOfRange(parsed)) {
-      setSelectedDate(parsed);
-      setViewYear(parsed.getFullYear());
-      setViewMonth(parsed.getMonth());
-      let h = hour, m = minute, ap = ampm;
-      if (isDatetimeType(type) && timeParts.length >= 2) {
-        const timePart = timeParts[0];
-        const periodPart = timeParts[1]?.toUpperCase();
-        if (timePart?.includes(":")) {
-          const [hStr, mStr] = timePart.split(":");
-          const parsedH = parseInt(hStr, 10);
-          const parsedM = parseInt(mStr, 10);
-          if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
-            h = parsedH;
-            setHour(h);
+    let parsed = null;
+    if (!hasDayView && !hasMonthView) {
+      parsed = parseYearDisplay(raw);
+    } else if (!hasDayView) {
+      parsed = parseMonthYearDisplay(raw);
+    } else {
+      const dateWordCount = getDateWordCount(dateFormat);
+      const words = raw.split(" ");
+      const datePart = words.slice(0, dateWordCount).join(" ");
+      const timeParts = words.slice(dateWordCount);
+      parsed = parseDisplay(datePart, dateFormat);
+      if (parsed && !isOutOfRange(parsed)) {
+        setSelectedDate(parsed);
+        setViewYear(parsed.getFullYear());
+        setViewMonth(parsed.getMonth());
+        let h = hour, m = minute, ap = ampm;
+        if (isDatetimeType(type) && timeParts.length >= 2) {
+          const timePart = timeParts[0];
+          const periodPart = timeParts[1]?.toUpperCase();
+          if (timePart?.includes(":")) {
+            const [hStr, mStr] = timePart.split(":");
+            const parsedH = parseInt(hStr, 10);
+            const parsedM = parseInt(mStr, 10);
+            if (!isNaN(parsedH) && parsedH >= 1 && parsedH <= 12) {
+              h = parsedH;
+              setHour(h);
+            }
+            if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
+              m = parsedM;
+              setMinute(m);
+            }
           }
-          if (!isNaN(parsedM) && parsedM >= 0 && parsedM <= 59) {
-            m = parsedM;
-            setMinute(m);
+          if (periodPart === "AM" || periodPart === "PM") {
+            ap = periodPart;
+            setAmpm(ap);
           }
         }
-        if (periodPart === "AM" || periodPart === "PM") {
-          ap = periodPart;
-          setAmpm(ap);
-        }
+        isInternalChange.current = true;
+        onChange?.(buildISO(parsed, type, h, m, ap));
+      } else if (!raw) {
+        setSelectedDate(null);
+        isInternalChange.current = true;
+        onChange?.("");
       }
+      return;
+    }
+    if (parsed && !isOutOfRange(parsed)) {
+      setSelectedDate(parsed);
+      setViewYear(parsed.getFullYear());
+      setViewMonth(parsed.getMonth());
       isInternalChange.current = true;
-      onChange?.(buildISO(parsed, type, h, m, ap));
+      onChange?.(buildISO(parsed, type, hour, minute, ampm));
     } else if (!raw) {
       setSelectedDate(null);
       isInternalChange.current = true;
@@ -3513,7 +3713,10 @@ var DateField = ({
           onMonthSelect: setViewMonth,
           onYearSelect: setViewYear,
           minDate,
-          maxDate
+          maxDate,
+          views,
+          onFinalMonthSelect: handleFinalMonthSelect,
+          onFinalYearSelect: handleFinalYearSelect
         }
       ), type === "datetime" && /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React72.createElement(
         SpinnerPanel,
@@ -3573,7 +3776,7 @@ DateField.displayName = "DateField";
 // lib/TextFields/DateRangeField.tsx
 import React73, {
   useState as useState8,
-  useRef as useRef7,
+  useRef as useRef8,
   useEffect as useEffect8
 } from "react";
 var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
@@ -3868,8 +4071,8 @@ var DateRangeField = ({
   const [selecting, setSelecting] = useState8("start");
   const [leftViewYear, setLeftViewYear] = useState8(() => today2.getFullYear());
   const [leftViewMonth, setLeftViewMonth] = useState8(() => today2.getMonth());
-  const containerRef = useRef7(null);
-  const inputId = useRef7(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
+  const containerRef = useRef8(null);
+  const inputId = useRef8(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
   useEffect8(() => {
     const s2 = value?.start ? isoToDate2(value.start) : null;
     const e = value?.end ? isoToDate2(value.end) : null;
@@ -4251,7 +4454,7 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
 };
 
 // lib/DataGrid/DataGrid.tsx
-import React75, { useState as useState9, useMemo as useMemo2, useRef as useRef9, useEffect as useEffect9 } from "react";
+import React75, { useState as useState9, useMemo as useMemo2, useRef as useRef10, useEffect as useEffect9 } from "react";
 import {
   ChevronUp,
   ChevronDown,
@@ -4270,6 +4473,37 @@ import {
   Trash2,
   Plus
 } from "lucide-react";
+function FilterSelect({
+  value,
+  onChange,
+  options,
+  className,
+  placement = "bottom"
+}) {
+  const [open, setOpen] = useState9(false);
+  const ref = useRef10(null);
+  useEffect9(() => {
+    const handler = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    if (open) document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const selected = options.find((o) => o.value === value);
+  return /* @__PURE__ */ React75.createElement("div", { ref, className: `dg-fsel${className ? " " + className : ""}` }, /* @__PURE__ */ React75.createElement("button", { type: "button", className: "dg-fsel-trigger", onClick: () => setOpen((o) => !o) }, /* @__PURE__ */ React75.createElement("span", { className: "dg-fsel-label" }, selected?.label ?? value), /* @__PURE__ */ React75.createElement(ChevronDown, { size: 12, className: "dg-fsel-chevron" })), open && /* @__PURE__ */ React75.createElement("div", { className: `dg-fsel-menu${placement === "top" ? " dg-fsel-menu--top" : ""}` }, options.map((opt) => /* @__PURE__ */ React75.createElement(
+    "button",
+    {
+      key: opt.value,
+      type: "button",
+      className: `dg-menu-item${opt.value === value ? " dg-menu-item--selected" : ""}`,
+      onClick: () => {
+        onChange(opt.value);
+        setOpen(false);
+      }
+    },
+    opt.label
+  ))));
+}
 var getOperatorsForType = (type) => {
   if (type === "date") return [
     { value: "is", label: "is" },
@@ -4386,7 +4620,7 @@ function DataGrid({
   const [startWidth, setStartWidth] = useState9(0);
   const [activeMenu, setActiveMenu] = useState9(null);
   const [menuPosition, setMenuPosition] = useState9({ top: 0, left: 0 });
-  const menuRef = useRef9(null);
+  const menuRef = useRef10(null);
   const [showManageColumns, setShowManageColumns] = useState9(false);
   const [showAdvancedFilter, setShowAdvancedFilter] = useState9(false);
   const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
@@ -4687,7 +4921,17 @@ function DataGrid({
     }
     return offset2;
   };
-  const hasActiveFilters = advancedFilters.some((f) => f.value);
+  const hasActiveFilters = advancedFilters.some((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
+  const closeFilterModal = () => {
+    setAdvancedFilters((prev) => {
+      const meaningful = prev.filter((f) => f.value || f.operator === "is empty" || f.operator === "is not empty");
+      if (meaningful.length > 0) return meaningful;
+      const firstCol = resolvedColumns.find((c) => c.filterable !== false);
+      if (!firstCol) return prev;
+      return [{ column: String(firstCol.field), operator: getDefaultOperator(firstCol.type), value: "", logic: "AND" }];
+    });
+    setShowAdvancedFilter(false);
+  };
   const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
   const alignClass = (align) => align === "center" ? "dg-slot--center" : align === "right" ? "dg-slot--right" : "dg-slot--left";
   return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React75.createElement("h2", null, title), /* @__PURE__ */ React75.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
@@ -4721,6 +4965,7 @@ function DataGrid({
     const leftOffset = getLeftOffset(col, idx);
     const rightOffset = getRightOffset(col, idx);
     const isSorted = sortField === col.field;
+    const isFiltered = advancedFilters.some((f) => f.column === colField && f.value);
     return /* @__PURE__ */ React75.createElement(
       "th",
       {
@@ -4737,7 +4982,7 @@ function DataGrid({
         col.headerName,
         isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 12 }),
         isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 12 })
-      ), /* @__PURE__ */ React75.createElement("div", { className: "dg-th-actions" }, !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
+      ), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement(Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
@@ -4830,12 +5075,14 @@ function DataGrid({
       action.icon
     )))));
   })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
-    "select",
+    FilterSelect,
     {
-      value: activePageSize,
-      onChange: (e) => handlePageSizeChange(Number(e.target.value))
-    },
-    pageSizeOptions.map((o) => /* @__PURE__ */ React75.createElement("option", { key: o, value: o }, o))
+      placement: "top",
+      value: String(activePageSize),
+      onChange: (val) => handlePageSizeChange(Number(val)),
+      options: pageSizeOptions.map((o) => ({ value: String(o), label: String(o) })),
+      className: "dg-fsel--sm dg-fsel--pagesize"
+    }
   )), /* @__PURE__ */ React75.createElement("span", null, (activePage - 1) * activePageSize + 1, "\u2013", Math.min(activePage * activePageSize, totalRows), " of ", totalRows)), /* @__PURE__ */ React75.createElement("div", { className: "dg-page-nav" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: activePage === 1, onClick: () => handlePageChange(activePage - 1) }, /* @__PURE__ */ React75.createElement(ChevronLeft, { size: 15 })), /* @__PURE__ */ React75.createElement("span", { className: "dg-page-fraction" }, activePage, " / ", totalPages), /* @__PURE__ */ React75.createElement("button", { className: "dg-page-btn", disabled: activePage === totalPages, onClick: () => handlePageChange(activePage + 1) }, /* @__PURE__ */ React75.createElement(ChevronRight, { size: 15 })))), activeMenu && /* @__PURE__ */ React75.createElement(
     "div",
     {
@@ -4855,6 +5102,16 @@ function DataGrid({
     })(),
     /* @__PURE__ */ React75.createElement("div", { className: "dg-menu-divider" }),
     activeMenuCol?.filterable !== false && /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
+      if (activeMenuCol) {
+        const colField = String(activeMenuCol.field);
+        setAdvancedFilters((prev) => {
+          const hasValues = prev.some((f) => f.value);
+          if (!hasValues) {
+            return [{ column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
+          }
+          return [...prev, { column: colField, operator: getDefaultOperator(activeMenuCol.type), value: "", logic: "AND" }];
+        });
+      }
       setShowAdvancedFilter(true);
       setActiveMenu(null);
     } }, /* @__PURE__ */ React75.createElement(Filter, { size: 14 }), " Filter\u2026"),
@@ -4892,7 +5149,7 @@ function DataGrid({
       }
     });
     setColumnOverrides(newOverrides);
-  } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-overlay", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React75.createElement("h3", null, "Filters"), /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => setShowAdvancedFilter(false) }, /* @__PURE__ */ React75.createElement(X2, { size: 18 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React75.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React75.createElement(
+  } }, "Hide All")))), showAdvancedFilter && /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-overlay", onClick: closeFilterModal }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal dg-modal-wide dg-filter-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-header" }, /* @__PURE__ */ React75.createElement("h3", null, "Filters"), /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: closeFilterModal }, /* @__PURE__ */ React75.createElement(X2, { size: 18 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-modal-body" }, advancedFilters.map((f, idx) => /* @__PURE__ */ React75.createElement("div", { key: idx }, idx > 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-filter-logic" }, /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: `dg-logic-btn${f.logic === "AND" ? " active" : ""}`,
@@ -4907,48 +5164,45 @@ function DataGrid({
     },
     "OR"
   )), /* @__PURE__ */ React75.createElement("div", { className: "dg-filter-row" }, advancedFilters.length > 1 && /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: () => setAdvancedFilters((p) => p.filter((_, i) => i !== idx)) }, /* @__PURE__ */ React75.createElement(X2, { size: 14 })), /* @__PURE__ */ React75.createElement(
-    "select",
+    FilterSelect,
     {
-      className: "dg-filter-select",
       value: f.column,
-      onChange: (e) => {
-        const newColKey = e.target.value;
+      onChange: (newColKey) => {
         const newCol = resolvedColumns.find((c) => String(c.key) === newColKey);
         const defaultOp = getDefaultOperator(newCol?.type);
         setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, column: newColKey, operator: defaultOp, value: "" } : fi));
-      }
-    },
-    resolvedColumns.filter((c) => c.filterable !== false).map((c) => /* @__PURE__ */ React75.createElement("option", { key: String(c.key), value: String(c.key) }, c.header))
+      },
+      options: resolvedColumns.filter((c) => c.filterable !== false).map((c) => ({ value: String(c.key), label: c.header }))
+    }
   ), (() => {
     const col = resolvedColumns.find((c) => String(c.key) === f.column);
     const operators = getOperatorsForType(col?.type);
     const hideValue = f.operator === "is empty" || f.operator === "is not empty";
     return /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
-      "select",
+      FilterSelect,
       {
-        className: "dg-filter-select dg-filter-select-sm",
+        className: "dg-fsel--sm",
         value: f.operator,
-        onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: e.target.value, value: "" } : fi))
-      },
-      operators.map((op) => /* @__PURE__ */ React75.createElement("option", { key: op.value, value: op.value }, op.label))
+        onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, operator: val, value: "" } : fi)),
+        options: operators
+      }
     ), !hideValue && col?.type === "date" && /* @__PURE__ */ React75.createElement("div", { className: "dg-filter-datefield" }, /* @__PURE__ */ React75.createElement(
       DateField,
       {
         value: f.value,
         onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
-        variant: "compact"
+        variant: "compact",
+        fullWidth: true
       }
     )), !hideValue && col?.type === "status" && (() => {
-      const options = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
+      const opts = col.statusOptions || [...new Set(data.map((item) => String(item[col.field || col.key || ""])))].filter((v) => v && v !== "undefined" && v !== "null").sort();
       return /* @__PURE__ */ React75.createElement(
-        "select",
+        FilterSelect,
         {
-          className: "dg-filter-select",
           value: f.value,
-          onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
-        },
-        /* @__PURE__ */ React75.createElement("option", { value: "" }, "Select\u2026"),
-        options.map((opt) => /* @__PURE__ */ React75.createElement("option", { key: opt, value: opt }, opt))
+          onChange: (val) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: val } : fi)),
+          options: [{ value: "", label: "Select\u2026" }, ...opts.map((o) => ({ value: o, label: o }))]
+        }
       );
     })(), !hideValue && col?.type !== "date" && col?.type !== "status" && /* @__PURE__ */ React75.createElement(
       "input",
@@ -4957,6 +5211,7 @@ function DataGrid({
         className: "dg-filter-input",
         placeholder: "Value\u2026",
         value: f.value,
+        autoFocus: idx === advancedFilters.length - 1,
         onChange: (e) => setAdvancedFilters((p) => p.map((fi, i) => i === idx ? { ...fi, value: e.target.value } : fi))
       }
     ));
@@ -4986,15 +5241,15 @@ function DataGrid({
     },
     /* @__PURE__ */ React75.createElement(Trash2, { size: 14 }),
     " Reset"
-  ), /* @__PURE__ */ React75.createElement("button", { className: "submit-btn", onClick: () => setShowAdvancedFilter(false) }, "Apply")))));
+  ), /* @__PURE__ */ React75.createElement("button", { className: "submit-btn", onClick: closeFilterModal }, "Apply")))));
 }
 
 // lib/Select/Select.tsx
 import React76, {
   useState as useState10,
-  useRef as useRef10,
+  useRef as useRef11,
   useEffect as useEffect10,
-  useCallback as useCallback4
+  useCallback as useCallback5
 } from "react";
 import ReactDOM4 from "react-dom";
 var ChevronDownIcon2 = () => /* @__PURE__ */ React76.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React76.createElement("polyline", { points: "6 9 12 15 18 9" }));
@@ -5025,12 +5280,12 @@ var Select = React76.forwardRef(function Select2(props, ref) {
   const [open, setOpen] = useState10(false);
   const [focusedIdx, setFocusedIdx] = useState10(-1);
   const [popupStyle, setPopupStyle] = useState10({});
-  const containerRef = useRef10(null);
-  const popupRef = useRef10(null);
-  const listRef = useRef10(null);
-  const inputId = useRef10(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
+  const containerRef = useRef11(null);
+  const popupRef = useRef11(null);
+  const listRef = useRef11(null);
+  const inputId = useRef11(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
-  const calcPopupStyle = useCallback4(() => {
+  const calcPopupStyle = useCallback5(() => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     setPopupStyle({
@@ -5041,24 +5296,24 @@ var Select = React76.forwardRef(function Select2(props, ref) {
   }, []);
   const options = normaliseOptions(rawOptions);
   const selectedValues = multiple ? Array.isArray(value) ? value : value != null ? [value] : [] : value != null ? [value] : [];
-  const isSelected = useCallback4(
+  const isSelected = useCallback5(
     (optValue) => selectedValues.includes(optValue),
     [selectedValues]
   );
   const getSelectedLabels = () => options.filter((o) => selectedValues.includes(o.value)).map((o) => o.label);
   const hasValue = selectedValues.length > 0;
   const isFloating = Boolean(open || hasValue);
-  const openPopup = useCallback4(() => {
+  const openPopup = useCallback5(() => {
     if (disabled) return;
     calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
   }, [disabled, calcPopupStyle]);
-  const closePopup = useCallback4(() => {
+  const closePopup = useCallback5(() => {
     setOpen(false);
     setFocusedIdx(-1);
   }, []);
-  const togglePopup = useCallback4(() => {
+  const togglePopup = useCallback5(() => {
     if (open) closePopup();
     else openPopup();
   }, [open, openPopup, closePopup]);
@@ -5069,16 +5324,24 @@ var Select = React76.forwardRef(function Select2(props, ref) {
         closePopup();
       }
     };
+    const handleFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (!containerRef.current?.contains(next) && !popupRef.current?.contains(next)) {
+        closePopup();
+      }
+    };
     document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("focusout", handleFocusOut);
     window.addEventListener("scroll", calcPopupStyle, true);
     window.addEventListener("resize", calcPopupStyle);
     return () => {
       document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("focusout", handleFocusOut);
       window.removeEventListener("scroll", calcPopupStyle, true);
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  const selectOption = useCallback4((opt, event) => {
+  const selectOption = useCallback5((opt, event) => {
     if (opt.disabled) return;
     if (multiple) {
       const already = isSelected(opt.value);
@@ -5251,9 +5514,9 @@ Select.displayName = "Select";
 // lib/Slider/Slider.tsx
 import React77, {
   useState as useState11,
-  useRef as useRef11,
+  useRef as useRef12,
   useEffect as useEffect11,
-  useCallback as useCallback5
+  useCallback as useCallback6
 } from "react";
 function clamp(val, min, max) {
   return Math.max(min, Math.min(max, val));
@@ -5284,8 +5547,8 @@ var Slider = React77.forwardRef(function Slider2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const trackRef = useRef11(null);
-  const draggingThumb = useRef11(null);
+  const trackRef = useRef12(null);
+  const draggingThumb = useRef12(null);
   const [dragging, setDragging] = useState11(null);
   const isRange = range || Array.isArray(value);
   const rawVal = value ?? (isRange ? [min, max] : min);
@@ -5297,7 +5560,7 @@ var Slider = React77.forwardRef(function Slider2(props, ref) {
     computedMarks.push(...marks);
   }
   const hasLabelledMarks = computedMarks.some((m) => m.label);
-  const getValueFromPointer = useCallback5((e) => {
+  const getValueFromPointer = useCallback6((e) => {
     const track = trackRef.current;
     if (!track) return min;
     const rect = track.getBoundingClientRect();
@@ -5460,7 +5723,7 @@ var Slider = React77.forwardRef(function Slider2(props, ref) {
 Slider.displayName = "Slider";
 
 // lib/Switch/Switch.tsx
-import React78, { useRef as useRef12 } from "react";
+import React78, { useRef as useRef13 } from "react";
 var Switch = React78.forwardRef(function Switch2(props, ref) {
   const {
     checked = false,
@@ -5476,8 +5739,8 @@ var Switch = React78.forwardRef(function Switch2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const inputRef = useRef12(null);
-  const inputId = useRef12(`rf-sw-${Math.random().toString(36).slice(2, 9)}`).current;
+  const inputRef = useRef13(null);
+  const inputId = useRef13(`rf-sw-${Math.random().toString(36).slice(2, 9)}`).current;
   const handleChange = (e) => {
     if (!disabled) onChange?.(e, e.target.checked);
   };
@@ -5521,7 +5784,7 @@ var Switch = React78.forwardRef(function Switch2(props, ref) {
 Switch.displayName = "Switch";
 
 // lib/RadioGroup/RadioGroup.tsx
-import React79, { useRef as useRef13, createContext as createContext3, useContext as useContext3 } from "react";
+import React79, { useRef as useRef14, createContext as createContext3, useContext as useContext3 } from "react";
 var RadioGroupContext = createContext3({});
 var Radio = React79.forwardRef(function Radio2(props, ref) {
   const ctx = useContext3(RadioGroupContext);
@@ -5536,7 +5799,7 @@ var Radio = React79.forwardRef(function Radio2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const inputId = useRef13(`rf-radio-${Math.random().toString(36).slice(2, 9)}`).current;
+  const inputId = useRef14(`rf-radio-${Math.random().toString(36).slice(2, 9)}`).current;
   const isChecked = checkedProp !== void 0 ? checkedProp : ctx.value === value;
   const isDisabled = disabledProp !== void 0 ? disabledProp : ctx.disabled ?? false;
   const size = sizeProp ?? ctx.size ?? "medium";
@@ -5586,7 +5849,7 @@ var RadioGroup = React79.forwardRef(function RadioGroup2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const groupName = useRef13(name ?? `rf-rg-${Math.random().toString(36).slice(2, 9)}`).current;
+  const groupName = useRef14(name ?? `rf-rg-${Math.random().toString(36).slice(2, 9)}`).current;
   const rootClasses = [
     "rf-radio-group",
     row ? "rf-radio-group--row" : "",
@@ -5620,7 +5883,7 @@ RadioGroup.displayName = "RadioGroup";
 // lib/Rating/Rating.tsx
 import React80, {
   useState as useState12,
-  useRef as useRef14
+  useRef as useRef15
 } from "react";
 var starSize = { small: 18, medium: 24, large: 32 };
 var FilledStarIcon = ({ size }) => /* @__PURE__ */ React80.createElement(
@@ -5666,7 +5929,7 @@ var Rating = React80.forwardRef(function Rating2(props, ref) {
   } = props;
   const sxClass = useSx(sx);
   const [hoverValue, setHoverValue] = useState12(null);
-  const starsRef = useRef14(null);
+  const starsRef = useRef15(null);
   const currentValue = value ?? 0;
   const displayValue = hoverValue !== null ? hoverValue : currentValue;
   const iconSize = starSize[size] ?? 24;
@@ -6858,7 +7121,7 @@ AccordionDetails.displayName = "AccordionDetails";
 import React94, {
   useEffect as useEffect12,
   useLayoutEffect,
-  useRef as useRef15,
+  useRef as useRef16,
   useState as useState15,
   Children as Children2,
   cloneElement,
@@ -6922,8 +7185,8 @@ var Tabs = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const tabsListRef = useRef15(null);
-  const tabRefs = useRef15(/* @__PURE__ */ new Map());
+  const tabsListRef = useRef16(null);
+  const tabRefs = useRef16(/* @__PURE__ */ new Map());
   const [indicatorStyle, setIndicatorStyle] = useState15({});
   const updateIndicator = () => {
     if (value === void 0) return;
@@ -7309,7 +7572,7 @@ Stepper.displayName = "Stepper";
 // lib/Menu/Menu.tsx
 import React97, {
   useEffect as useEffect13,
-  useRef as useRef16,
+  useRef as useRef17,
   useState as useState17
 } from "react";
 import ReactDOM5 from "react-dom";
@@ -7402,7 +7665,7 @@ var Menu = ({
   children
 }) => {
   const sxClass = useSx(sx);
-  const paperRef = useRef16(null);
+  const paperRef = useRef17(null);
   const [menuStyle, setMenuStyle] = useState17({});
   const [mounted, setMounted] = useState17(false);
   useEffect13(() => {
@@ -7583,9 +7846,9 @@ Drawer.displayName = "Drawer";
 
 // lib/Snackbar/Snackbar.tsx
 import React99, {
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useEffect as useEffect15,
-  useRef as useRef17,
+  useRef as useRef18,
   useState as useState19
 } from "react";
 import ReactDOM7 from "react-dom";
@@ -7612,13 +7875,13 @@ var Snackbar = ({
   const sxClass = useSx(sx);
   const [transitionState, setTransitionState] = useState19("exited");
   const [mounted, setMounted] = useState19(false);
-  const timerRef = useRef17(null);
-  const hideTimerRef = useRef17(null);
-  const clearTimers = useCallback6(() => {
+  const timerRef = useRef18(null);
+  const hideTimerRef = useRef18(null);
+  const clearTimers = useCallback7(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
   }, []);
-  const startHideTimer = useCallback6(() => {
+  const startHideTimer = useCallback7(() => {
     if (autoHideDuration == null || !onClose) return;
     clearTimers();
     hideTimerRef.current = setTimeout(() => {
@@ -7749,7 +8012,7 @@ Link.displayName = "Link";
 import React101, {
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef18,
+  useRef as useRef19,
   useState as useState20
 } from "react";
 import ReactDOM8 from "react-dom";
@@ -7830,7 +8093,7 @@ var Popper = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const popperRef = useRef18(null);
+  const popperRef = useRef19(null);
   const [posStyle, setPosStyle] = useState20({});
   const [mounted, setMounted] = useState20(open || keepMounted);
   const [fadeState, setFadeState] = useState20(
@@ -7903,7 +8166,7 @@ Popper.displayName = "Popper";
 import React102, {
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState21
 } from "react";
 import ReactDOM9 from "react-dom";
@@ -7933,7 +8196,7 @@ var Popover = ({
 }) => {
   const sxClass = useSx(sx);
   const paperSxClass = useSx(PaperProps?.sx);
-  const paperRef = useRef19(null);
+  const paperRef = useRef20(null);
   const [posStyle, setPosStyle] = useState21({});
   const [mounted, setMounted] = useState21(open || keepMounted);
   useEffect17(() => {
@@ -8020,7 +8283,7 @@ Popover.displayName = "Popover";
 import React103, {
   cloneElement as cloneElement3,
   useEffect as useEffect18,
-  useRef as useRef20,
+  useRef as useRef21,
   useState as useState22
 } from "react";
 function getTimeout(timeout, phase) {
@@ -8031,8 +8294,8 @@ function getTimeout(timeout, phase) {
 function useTransitionState(inProp, timeout, onEnter, onExited) {
   const [state, setState] = useState22("exited");
   const [mounted, setMounted] = useState22(false);
-  const timerRef = useRef20(null);
-  const isFirstRender = useRef20(true);
+  const timerRef = useRef21(null);
+  const isFirstRender = useRef21(true);
   useEffect18(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     if (inProp) {
@@ -8176,7 +8439,7 @@ var Collapse = ({
   onExited
 }) => {
   const { state, mounted } = useTransitionState(inProp, timeout, onEnter, onExited);
-  const innerRef = useRef20(null);
+  const innerRef = useRef21(null);
   const [size, setSize] = useState22(
     inProp ? "auto" : collapsedSize
   );
@@ -8254,7 +8517,7 @@ var Zoom = ({
 Zoom.displayName = "Zoom";
 
 // lib/ImageField/ImageField.tsx
-import React104, { useRef as useRef21, useState as useState23, useCallback as useCallback7 } from "react";
+import React104, { useRef as useRef22, useState as useState23, useCallback as useCallback8 } from "react";
 function getSizeStyle2(size) {
   if (size === "small") return { className: "rf-image-field--small" };
   if (size === "large") return { className: "rf-image-field--large" };
@@ -8281,16 +8544,16 @@ var ImageField = React104.forwardRef(
     sx
   }, ref) => {
     const sxClass = useSx(sx);
-    const inputRef = useRef21(null);
+    const inputRef = useRef22(null);
     const [preview, setPreview] = useState23(null);
     const { className: sizeClass, style: sizeStyle } = getSizeStyle2(size);
     const displaySrc = preview || src;
-    const handleClick = useCallback7(() => {
+    const handleClick = useCallback8(() => {
       if (!disabled) {
         inputRef.current?.click();
       }
     }, [disabled]);
-    const handleKeyDown = useCallback7(
+    const handleKeyDown = useCallback8(
       (e) => {
         if ((e.key === "Enter" || e.key === " ") && !disabled) {
           e.preventDefault();
@@ -8299,7 +8562,7 @@ var ImageField = React104.forwardRef(
       },
       [disabled]
     );
-    const handleFileChange = useCallback7(
+    const handleFileChange = useCallback8(
       (e) => {
         const file = e.target.files?.[0];
         if (!file) return;
@@ -8365,9 +8628,9 @@ ImageField.displayName = "ImageField";
 // lib/PhoneField/PhoneField.tsx
 import React105, {
   useState as useState24,
-  useRef as useRef22,
+  useRef as useRef23,
   useEffect as useEffect19,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   forwardRef as forwardRef10
 } from "react";
 import { Country as Country2 } from "country-state-city";
@@ -8418,11 +8681,11 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
     sx
   } = props;
   const sxClass = useSx(sx);
-  const containerRef = useRef22(null);
-  const inputRef = useRef22(null);
-  const listRef = useRef22(null);
-  const popupRef = useRef22(null);
-  const inputId = useRef22(`rf-phone-${Math.random().toString(36).slice(2, 9)}`).current;
+  const containerRef = useRef23(null);
+  const inputRef = useRef23(null);
+  const listRef = useRef23(null);
+  const popupRef = useRef23(null);
+  const inputId = useRef23(`rf-phone-${Math.random().toString(36).slice(2, 9)}`).current;
   const countries = React105.useMemo(() => {
     const all = getAllCountries();
     if (onlyCountries && onlyCountries.length > 0) {
@@ -8441,7 +8704,7 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
   const [open, setOpen] = useState24(false);
   const [focusedIdx, setFocusedIdx] = useState24(-1);
   const [search, setSearch] = useState24("");
-  const prevValueRef = useRef22(value);
+  const prevValueRef = useRef23(value);
   useEffect19(() => {
     if (value === prevValueRef.current) return;
     prevValueRef.current = value;
@@ -8455,13 +8718,13 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
   const dialCode = selectedCountry?.phonecode || "";
   const digits = sanitizeValue(value);
   const phoneNumber = digits.startsWith(dialCode) ? digits.slice(dialCode.length) : digits;
-  const openDropdown = useCallback8(() => {
+  const openDropdown = useCallback9(() => {
     if (disabled) return;
     setOpen(true);
     setFocusedIdx(-1);
     setSearch("");
   }, [disabled]);
-  const closeDropdown = useCallback8(() => {
+  const closeDropdown = useCallback9(() => {
     setOpen(false);
     setFocusedIdx(-1);
     setSearch("");
@@ -8512,7 +8775,7 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
       window.removeEventListener("resize", updatePosition);
     };
   }, [open]);
-  const selectCountry = useCallback8((country) => {
+  const selectCountry = useCallback9((country) => {
     setSelectedCountry(country);
     closeDropdown();
     const newValue = "+" + country.phonecode + phoneNumber;
@@ -8669,8 +8932,406 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
 });
 PhoneField.displayName = "PhoneField";
 
+// lib/TreeSelect/TreeSelect.tsx
+import React106, {
+  useState as useState25,
+  useRef as useRef24,
+  useEffect as useEffect20,
+  useCallback as useCallback10
+} from "react";
+import ReactDOM10 from "react-dom";
+import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, X as X3, Search as Search2, Check } from "lucide-react";
+function collectDescendants(node) {
+  const ids = [String(node.id)];
+  node.children?.forEach((c) => ids.push(...collectDescendants(c)));
+  return ids;
+}
+function findNodeById(nodes, id) {
+  for (const node of nodes) {
+    if (String(node.id) === id) return node;
+    const found = findNodeById(node.children ?? [], id);
+    if (found) return found;
+  }
+  return null;
+}
+function getNodeState(node, selected) {
+  if (selected.has(String(node.id))) return "checked";
+  if (!node.children?.length) return "unchecked";
+  const states = node.children.map((c) => getNodeState(c, selected));
+  if (states.every((s2) => s2 === "checked")) return "checked";
+  if (states.some((s2) => s2 !== "unchecked")) return "partial";
+  return "unchecked";
+}
+function getTopLevelSelected(nodes, selected) {
+  const result = [];
+  for (const node of nodes) {
+    const state = getNodeState(node, selected);
+    if (state === "checked") {
+      result.push(node);
+    } else if (state === "partial") {
+      result.push(...getTopLevelSelected(node.children ?? [], selected));
+    }
+  }
+  return result;
+}
+function filterTree(nodes, query) {
+  if (!query) return nodes;
+  const q = query.toLowerCase();
+  return nodes.reduce((acc, node) => {
+    const filteredChildren = filterTree(node.children ?? [], q);
+    if (node.label.toLowerCase().includes(q) || filteredChildren.length > 0) {
+      acc.push({ ...node, children: filteredChildren });
+    }
+    return acc;
+  }, []);
+}
+function recordToSet(record) {
+  if (!record) return /* @__PURE__ */ new Set();
+  return new Set(Object.keys(record).filter((k) => record[k]));
+}
+function setToRecord(set) {
+  const r = {};
+  set.forEach((id) => {
+    r[id] = true;
+  });
+  return r;
+}
+function TreeNodeItem({
+  node,
+  depth,
+  selected,
+  expanded,
+  selectionMode,
+  onToggleExpand,
+  onSelect,
+  isFiltering
+}) {
+  const nodeId = String(node.id);
+  const hasChildren = !!node.children?.length;
+  const isExpanded = isFiltering || expanded.has(nodeId);
+  const state = getNodeState(node, selected);
+  return /* @__PURE__ */ React106.createElement("div", { className: "rf-tsn" }, /* @__PURE__ */ React106.createElement(
+    "div",
+    {
+      className: `rf-tsn__row${state !== "unchecked" ? " rf-tsn__row--active" : ""}`,
+      style: { paddingLeft: 8 + depth * 20 },
+      onClick: () => onSelect(node)
+    },
+    hasChildren ? /* @__PURE__ */ React106.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf-tsn__expand",
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggleExpand(nodeId);
+        }
+      },
+      isExpanded ? /* @__PURE__ */ React106.createElement(ChevronDown2, { size: 14 }) : /* @__PURE__ */ React106.createElement(ChevronRight2, { size: 14 })
+    ) : /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__expand-ph" }),
+    selectionMode === "multiple" && /* @__PURE__ */ React106.createElement(
+      "span",
+      {
+        className: `rf-tsn__cb${state === "checked" ? " rf-tsn__cb--checked" : state === "partial" ? " rf-tsn__cb--partial" : ""}`
+      },
+      state === "checked" && /* @__PURE__ */ React106.createElement(Check, { size: 10, strokeWidth: 3 }),
+      state === "partial" && /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__cb-dash" })
+    ),
+    selectionMode === "single" && /* @__PURE__ */ React106.createElement("span", { className: `rf-tsn__radio${state === "checked" ? " rf-tsn__radio--checked" : ""}` }),
+    /* @__PURE__ */ React106.createElement("span", { className: "rf-tsn__label" }, node.label)
+  ), hasChildren && isExpanded && /* @__PURE__ */ React106.createElement("div", null, node.children.map((child) => /* @__PURE__ */ React106.createElement(
+    TreeNodeItem,
+    {
+      key: child.id,
+      node: child,
+      depth: depth + 1,
+      selected,
+      expanded,
+      selectionMode,
+      onToggleExpand,
+      onSelect,
+      isFiltering
+    }
+  ))));
+}
+function TreeSelect({
+  options,
+  value,
+  onChange,
+  onNodeSelect,
+  onNodeUnselect,
+  selectionMode = "single",
+  placeholder = "Select",
+  filter = false,
+  filterInputAutoFocus = false,
+  resetFilterOnHide = false,
+  metaKeySelection: _metaKeySelection,
+  disabled = false,
+  label,
+  variant = "outlined",
+  size = "medium",
+  error = false,
+  helperText,
+  fullWidth = false,
+  clearable = true,
+  required = false,
+  style,
+  className,
+  sx
+}) {
+  const sxClass = useSx(sx);
+  const [open, setOpen] = useState25(false);
+  const [focused, setFocused] = useState25(false);
+  const [filterQuery, setFilterQuery] = useState25("");
+  const [expandedKeys, setExpandedKeys] = useState25(/* @__PURE__ */ new Set());
+  const [dropdownStyle, setDropdownStyle] = useState25({});
+  const triggerRef = useRef24(null);
+  const dropdownRef = useRef24(null);
+  const filterInputRef = useRef24(null);
+  const isMultiple = selectionMode === "multiple";
+  const selectedSet = isMultiple ? recordToSet(value) : value != null ? /* @__PURE__ */ new Set([String(value)]) : /* @__PURE__ */ new Set();
+  const computePosition3 = useCallback10(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const dropdownMaxH = 320;
+    const above = spaceBelow < dropdownMaxH && rect.top > spaceBelow;
+    setDropdownStyle({
+      position: "fixed",
+      left: rect.left,
+      width: rect.width,
+      ...above ? { bottom: window.innerHeight - rect.top + 4 } : { top: rect.bottom + 4 }
+    });
+  }, []);
+  const openDropdown = () => {
+    if (disabled) return;
+    computePosition3();
+    setOpen(true);
+  };
+  const closeDropdown = useCallback10(() => {
+    setOpen(false);
+    if (resetFilterOnHide) setFilterQuery("");
+  }, [resetFilterOnHide]);
+  const mouseActivatedRef = useRef24(false);
+  const handleTriggerMouseDown = () => {
+    mouseActivatedRef.current = true;
+  };
+  const handleTriggerFocus = () => {
+    setFocused(true);
+    if (!mouseActivatedRef.current) {
+      openDropdown();
+    }
+    mouseActivatedRef.current = false;
+  };
+  const handleTriggerBlur = (e) => {
+    const next = e.relatedTarget;
+    if (next === null) return;
+    if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
+      setFocused(false);
+      closeDropdown();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open ? closeDropdown() : openDropdown();
+    } else if (e.key === "Escape") {
+      closeDropdown();
+    }
+  };
+  useEffect20(() => {
+    if (open && filter && filterInputAutoFocus) {
+      const t = setTimeout(() => filterInputRef.current?.focus(), 40);
+      return () => clearTimeout(t);
+    }
+  }, [open, filter, filterInputAutoFocus]);
+  useEffect20(() => {
+    if (!open) return;
+    const handleOutside = (e) => {
+      if (dropdownRef.current?.contains(e.target) || triggerRef.current?.contains(e.target)) return;
+      closeDropdown();
+      setFocused(false);
+    };
+    const handleFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (next === null) return;
+      if (!triggerRef.current?.contains(next) && !dropdownRef.current?.contains(next)) {
+        closeDropdown();
+        setFocused(false);
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("focusout", handleFocusOut);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("focusout", handleFocusOut);
+    };
+  }, [open, closeDropdown]);
+  useEffect20(() => {
+    if (!open) return;
+    const h = () => computePosition3();
+    window.addEventListener("scroll", h, true);
+    window.addEventListener("resize", h);
+    return () => {
+      window.removeEventListener("scroll", h, true);
+      window.removeEventListener("resize", h);
+    };
+  }, [open, computePosition3]);
+  const handleSelect = (node) => {
+    const nodeId = String(node.id);
+    if (isMultiple) {
+      const state = getNodeState(node, selectedSet);
+      const descendants = collectDescendants(node);
+      const newSet = new Set(selectedSet);
+      if (state === "checked" || state === "partial") {
+        descendants.forEach((id) => newSet.delete(id));
+        onNodeUnselect?.({ node });
+      } else {
+        descendants.forEach((id) => newSet.add(id));
+        onNodeSelect?.({ node });
+      }
+      onChange?.({ value: setToRecord(newSet) });
+    } else {
+      if (selectedSet.has(nodeId)) {
+        onChange?.({ value: null });
+        onNodeUnselect?.({ node });
+      } else {
+        onChange?.({ value: node.id });
+        onNodeSelect?.({ node });
+        closeDropdown();
+      }
+    }
+  };
+  const handleToggleExpand = (id) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange?.({ value: isMultiple ? {} : null });
+  };
+  const handleRemoveTag = (e, node) => {
+    e.stopPropagation();
+    const newSet = new Set(selectedSet);
+    collectDescendants(node).forEach((id) => newSet.delete(id));
+    onChange?.({ value: setToRecord(newSet) });
+    onNodeUnselect?.({ node });
+  };
+  const filteredTree = filterTree(options, filterQuery);
+  const tagNodes = isMultiple ? getTopLevelSelected(options, selectedSet) : value != null ? findNodeById(options, String(value)) ? [findNodeById(options, String(value))] : [] : [];
+  const hasValue = tagNodes.length > 0;
+  const isFloating = open || hasValue || focused;
+  const rootClasses = [
+    "rf-text-field",
+    `rf-text-field--${variant}`,
+    size === "small" ? "rf-text-field--small" : "",
+    disabled ? "rf-text-field--disabled" : "",
+    error ? "rf-text-field--error" : "",
+    fullWidth ? "rf-text-field--full-width" : "",
+    isFloating ? "rf-text-field--floating" : "",
+    "rf-tree-select",
+    sxClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React106.createElement("div", { className: rootClasses, style }, label && /* @__PURE__ */ React106.createElement("label", { className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ React106.createElement("span", { className: "rf-text-field__asterisk" }, "*")), /* @__PURE__ */ React106.createElement(
+    "div",
+    {
+      ref: triggerRef,
+      className: `rf-text-field__wrapper rf-tree-select__trigger${open ? " rf-tree-select__trigger--open" : ""}`,
+      tabIndex: disabled ? -1 : 0,
+      onMouseDown: handleTriggerMouseDown,
+      onClick: () => open ? closeDropdown() : openDropdown(),
+      onFocus: handleTriggerFocus,
+      onBlur: handleTriggerBlur,
+      onKeyDown: handleKeyDown
+    },
+    isMultiple ? /* @__PURE__ */ React106.createElement("div", { className: "rf-ts__chips" }, tagNodes.length > 0 ? tagNodes.map((node) => /* @__PURE__ */ React106.createElement("span", { key: node.id, className: "rf-ts__chip" }, node.label, /* @__PURE__ */ React106.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf-ts__chip-delete",
+        onClick: (e) => handleRemoveTag(e, node),
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React106.createElement(X3, { size: 10 })
+    ))) : open ? /* @__PURE__ */ React106.createElement("span", { className: "rf-ts__placeholder" }, placeholder) : null) : /* @__PURE__ */ React106.createElement("div", { className: `rf-ts__display${!hasValue ? " rf-ts__display--placeholder" : ""}` }, hasValue ? tagNodes[0]?.label : open ? placeholder : "\xA0"),
+    /* @__PURE__ */ React106.createElement("div", { className: "rf-autocomplete__endgroup" }, clearable && hasValue && /* @__PURE__ */ React106.createElement(
+      "button",
+      {
+        type: "button",
+        className: "rf-autocomplete__icon-btn",
+        onClick: handleClear,
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React106.createElement(X3, { size: 16 })
+    ), /* @__PURE__ */ React106.createElement(
+      "button",
+      {
+        type: "button",
+        className: `rf-autocomplete__icon-btn rf-autocomplete__icon-btn--popup${open ? " rf-autocomplete__icon-btn--open" : ""}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          open ? closeDropdown() : openDropdown();
+        },
+        tabIndex: -1
+      },
+      /* @__PURE__ */ React106.createElement(ChevronDown2, { size: 18 })
+    )),
+    variant === "outlined" && /* @__PURE__ */ React106.createElement("fieldset", { "aria-hidden": true, className: "rf-text-field__notch" }, /* @__PURE__ */ React106.createElement("legend", { className: "rf-text-field__legend" }, label && /* @__PURE__ */ React106.createElement("span", null, label, required ? " *" : ""))),
+    variant === "filled" && /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement("div", { className: "rf-text-field__filled-bg" }), /* @__PURE__ */ React106.createElement("div", { className: "rf-text-field__underline" })),
+    variant === "standard" && /* @__PURE__ */ React106.createElement("div", { className: "rf-text-field__underline" })
+  ), helperText && /* @__PURE__ */ React106.createElement("p", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && ReactDOM10.createPortal(
+    /* @__PURE__ */ React106.createElement(
+      "div",
+      {
+        ref: dropdownRef,
+        className: "rf-tree-select__popup",
+        style: dropdownStyle
+      },
+      filter && /* @__PURE__ */ React106.createElement("div", { className: "rf-tree-select__filter" }, /* @__PURE__ */ React106.createElement(Search2, { size: 14, className: "rf-tree-select__filter-icon" }), /* @__PURE__ */ React106.createElement(
+        "input",
+        {
+          ref: filterInputRef,
+          className: "rf-tree-select__filter-input",
+          placeholder: "Search\u2026",
+          value: filterQuery,
+          onChange: (e) => setFilterQuery(e.target.value)
+        }
+      ), filterQuery && /* @__PURE__ */ React106.createElement(
+        "button",
+        {
+          type: "button",
+          className: "rf-autocomplete__icon-btn",
+          onClick: () => setFilterQuery(""),
+          tabIndex: -1
+        },
+        /* @__PURE__ */ React106.createElement(X3, { size: 12 })
+      )),
+      /* @__PURE__ */ React106.createElement("div", { className: "rf-tree-select__tree" }, filteredTree.length === 0 ? /* @__PURE__ */ React106.createElement("div", { className: "rf-tree-select__empty" }, "No results found") : filteredTree.map((node) => /* @__PURE__ */ React106.createElement(
+        TreeNodeItem,
+        {
+          key: node.id,
+          node,
+          depth: 0,
+          selected: selectedSet,
+          expanded: expandedKeys,
+          selectionMode,
+          onToggleExpand: handleToggleExpand,
+          onSelect: handleSelect,
+          isFiltering: !!filterQuery
+        }
+      )))
+    ),
+    document.body
+  ));
+}
+
 // lib/RufousTextEditor/RufousTextEditor.tsx
-import React116, { useMemo as useMemo4, useCallback as useCallback13, useState as useState34, useRef as useRef30, useEffect as useEffect28 } from "react";
+import React117, { useMemo as useMemo4, useCallback as useCallback15, useState as useState35, useRef as useRef32, useEffect as useEffect29 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -8696,16 +9357,16 @@ import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
 
 // lib/RufousTextEditor/MentionList.tsx
-import React106, { forwardRef as forwardRef11, useEffect as useEffect20, useImperativeHandle, useState as useState25 } from "react";
+import React107, { forwardRef as forwardRef11, useEffect as useEffect21, useImperativeHandle, useState as useState26 } from "react";
 var MentionList = forwardRef11((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = useState25(0);
+  const [selectedIndex, setSelectedIndex] = useState26(0);
   const selectItem = (index) => {
     const item = props.items[index];
     if (item) {
       props.command({ id: item.id, label: item.shortName || item.name });
     }
   };
-  useEffect20(() => setSelectedIndex(0), [props.items]);
+  useEffect21(() => setSelectedIndex(0), [props.items]);
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -8724,17 +9385,17 @@ var MentionList = forwardRef11((props, ref) => {
     }
   }));
   if (!props.items.length) {
-    return /* @__PURE__ */ React106.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ React106.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
+    return /* @__PURE__ */ React107.createElement("div", { className: "rf-rte-mention-dropdown" }, /* @__PURE__ */ React107.createElement("div", { className: "rf-rte-mention-item rf-rte-mention-no-result" }, "No results"));
   }
-  return /* @__PURE__ */ React106.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.createElement("div", { className: "rf-rte-mention-dropdown" }, props.items.map((item, index) => /* @__PURE__ */ React107.createElement(
     "button",
     {
       className: `rf-rte-mention-item ${index === selectedIndex ? "is-selected" : ""}`,
       key: item.id,
       onClick: () => selectItem(index)
     },
-    /* @__PURE__ */ React106.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
-    /* @__PURE__ */ React106.createElement("span", { className: "rf-rte-mention-name" }, item.name)
+    /* @__PURE__ */ React107.createElement("span", { className: "rf-rte-mention-avatar" }, item.avatar || item.name.charAt(0).toUpperCase()),
+    /* @__PURE__ */ React107.createElement("span", { className: "rf-rte-mention-name" }, item.name)
   )));
 });
 MentionList.displayName = "MentionList";
@@ -8792,21 +9453,21 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React112, { useState as useState30, useRef as useRef26, useEffect as useEffect24, useCallback as useCallback12 } from "react";
+import React113, { useState as useState31, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
-import React107, { useState as useState26, useEffect as useEffect21, useRef as useRef23, useCallback as useCallback9, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
+import React108, { useState as useState27, useEffect as useEffect22, useRef as useRef25, useCallback as useCallback11, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
 var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
-  const [speaking, setSpeaking] = useState26(false);
-  const [paused, setPaused] = useState26(false);
-  const [voices, setVoices] = useState26([]);
-  const [selectedVoice, setSelectedVoice] = useState26("");
-  const [rate, setRate] = useState26(1);
-  const [showPanel, setShowPanel] = useState26(false);
-  const utteranceRef = useRef23(null);
-  const panelRef = useRef23(null);
-  useEffect21(() => {
+  const [speaking, setSpeaking] = useState27(false);
+  const [paused, setPaused] = useState27(false);
+  const [voices, setVoices] = useState27([]);
+  const [selectedVoice, setSelectedVoice] = useState27("");
+  const [rate, setRate] = useState27(1);
+  const [showPanel, setShowPanel] = useState27(false);
+  const utteranceRef = useRef25(null);
+  const panelRef = useRef25(null);
+  useEffect22(() => {
     const synth = window.speechSynthesis;
     const loadVoices = () => {
       const available = synth.getVoices();
@@ -8824,7 +9485,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
       synth.removeEventListener("voiceschanged", loadVoices);
     };
   }, [selectedVoice]);
-  useEffect21(() => {
+  useEffect22(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -8833,7 +9494,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  const getTextToSpeak = useCallback9(() => {
+  const getTextToSpeak = useCallback11(() => {
     if (!editor) return "";
     const { from, to, empty } = editor.state.selection;
     if (!empty) {
@@ -8841,7 +9502,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
     }
     return editor.getText();
   }, [editor]);
-  const handleSpeak = useCallback9(async () => {
+  const handleSpeak = useCallback11(async () => {
     const text = getTextToSpeak();
     if (!text.trim()) return;
     if (onTextToSpeech) {
@@ -8883,25 +9544,25 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
     setSpeaking(true);
     setPaused(false);
   }, [getTextToSpeak, voices, selectedVoice, rate, onTextToSpeech]);
-  const handlePause = useCallback9(() => {
+  const handlePause = useCallback11(() => {
     if (window.speechSynthesis.speaking && !window.speechSynthesis.paused) {
       window.speechSynthesis.pause();
       setPaused(true);
     }
   }, []);
-  const handleResume = useCallback9(() => {
+  const handleResume = useCallback11(() => {
     if (window.speechSynthesis.paused) {
       window.speechSynthesis.resume();
       setPaused(false);
     }
   }, []);
-  const handleStop = useCallback9(() => {
+  const handleStop = useCallback11(() => {
     window.speechSynthesis.cancel();
     setSpeaking(false);
     setPaused(false);
   }, []);
   useImperativeHandle2(ref, () => ({ stop: handleStop }), [handleStop]);
-  return /* @__PURE__ */ React107.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React107.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React108.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React108.createElement(Tooltip, { title: "Text to Speech", placement: "top" }, /* @__PURE__ */ React108.createElement(
     "button",
     {
       className: `toolbar-btn ${speaking ? "is-active" : ""}`,
@@ -8914,15 +9575,15 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
       }
     },
     speaking ? "\u23F9" : "\u{1F50A}"
-  )), showPanel && !speaking && /* @__PURE__ */ React107.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ React107.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ React107.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ React107.createElement(
+  )), showPanel && !speaking && /* @__PURE__ */ React108.createElement("div", { className: "tts-panel" }, /* @__PURE__ */ React108.createElement("div", { className: "tts-panel-header" }, "Text to Speech"), /* @__PURE__ */ React108.createElement("label", { className: "tts-label" }, "Voice"), /* @__PURE__ */ React108.createElement(
     "select",
     {
       className: "tts-select",
       value: selectedVoice,
       onChange: (e) => setSelectedVoice(e.target.value)
     },
-    voices.map((v) => /* @__PURE__ */ React107.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
-  ), /* @__PURE__ */ React107.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ React107.createElement(
+    voices.map((v) => /* @__PURE__ */ React108.createElement("option", { key: v.name, value: v.name }, v.name, " (", v.lang, ")"))
+  ), /* @__PURE__ */ React108.createElement("label", { className: "tts-label" }, "Speed: ", rate, "x"), /* @__PURE__ */ React108.createElement(
     "input",
     {
       type: "range",
@@ -8933,26 +9594,26 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
       value: rate,
       onChange: (e) => setRate(Number(e.target.value))
     }
-  ), /* @__PURE__ */ React107.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ React107.createElement("button", { className: "tts-speak-btn", onClick: () => {
+  ), /* @__PURE__ */ React108.createElement("div", { className: "tts-info" }, editor && !editor.state.selection.empty ? "Will read selected text" : "Will read all editor text"), /* @__PURE__ */ React108.createElement("button", { className: "tts-speak-btn", onClick: () => {
     handleSpeak();
     setShowPanel(false);
-  } }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React107.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React107.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ React107.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ React107.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
+  } }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React108.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React108.createElement(Tooltip, { title: "Resume", placement: "top" }, /* @__PURE__ */ React108.createElement("button", { className: "toolbar-btn", onClick: handleResume }, "\u25B6")) : /* @__PURE__ */ React108.createElement(Tooltip, { title: "Pause", placement: "top" }, /* @__PURE__ */ React108.createElement("button", { className: "toolbar-btn", onClick: handlePause }, "\u275A\u275A")), /* @__PURE__ */ React108.createElement(Tooltip, { title: "Stop", placement: "top" }, /* @__PURE__ */ React108.createElement("button", { className: "toolbar-btn", onClick: handleStop }, "\u25A0"))));
 });
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
-import React108, { useState as useState27, useRef as useRef24, useCallback as useCallback10, useEffect as useEffect22, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
+import React109, { useState as useState28, useRef as useRef26, useCallback as useCallback12, useEffect as useEffect23, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
 var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
-  const [listening, setListening] = useState27(false);
-  const [showPanel, setShowPanel] = useState27(false);
-  const [language, setLanguage] = useState27("en-US");
-  const [interim, setInterim] = useState27("");
-  const recognitionRef = useRef24(null);
-  const panelRef = useRef24(null);
-  const isListeningRef = useRef24(false);
+  const [listening, setListening] = useState28(false);
+  const [showPanel, setShowPanel] = useState28(false);
+  const [language, setLanguage] = useState28("en-US");
+  const [interim, setInterim] = useState28("");
+  const recognitionRef = useRef26(null);
+  const panelRef = useRef26(null);
+  const isListeningRef = useRef26(false);
   const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
   const supported = !!SpeechRecognitionAPI;
-  useEffect22(() => {
+  useEffect23(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -8961,7 +9622,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  const createRecognition = useCallback10(() => {
+  const createRecognition = useCallback12(() => {
     if (!supported) return null;
     const recognition = new SpeechRecognitionAPI();
     recognition.lang = language;
@@ -8970,7 +9631,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
     recognition.maxAlternatives = 1;
     return recognition;
   }, [supported, language]);
-  const startSession = useCallback10((recognition) => {
+  const startSession = useCallback12((recognition) => {
     if (!recognition || !editor) return;
     recognition.onresult = async (event) => {
       let finalText = "";
@@ -9025,7 +9686,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
       }
     };
   }, [editor, createRecognition, onSpeechToText]);
-  const startListening = useCallback10(() => {
+  const startListening = useCallback12(() => {
     if (!supported || !editor) return;
     const recognition = createRecognition();
     if (!recognition) return;
@@ -9041,7 +9702,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
       setListening(false);
     }
   }, [supported, editor, createRecognition, startSession]);
-  const stopListening = useCallback10(() => {
+  const stopListening = useCallback12(() => {
     isListeningRef.current = false;
     if (recognitionRef.current) {
       try {
@@ -9055,7 +9716,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
   }, []);
   useImperativeHandle3(ref, () => ({ stop: stopListening }), [stopListening]);
   if (!supported) {
-    return /* @__PURE__ */ React108.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ React108.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
+    return /* @__PURE__ */ React109.createElement(Tooltip, { title: "Speech recognition not supported in this browser", placement: "top" }, /* @__PURE__ */ React109.createElement("button", { className: "toolbar-btn", disabled: true }, "\u{1F3A4}"));
   }
   const LANGUAGES2 = [
     { code: "en-US", label: "English (US)" },
@@ -9077,7 +9738,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
     { code: "kn-IN", label: "Kannada" },
     { code: "ml-IN", label: "Malayalam" }
   ];
-  return /* @__PURE__ */ React108.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ React108.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ React108.createElement(
+  return /* @__PURE__ */ React109.createElement("div", { className: "stt-wrapper", ref: panelRef }, /* @__PURE__ */ React109.createElement(Tooltip, { title: listening ? "Stop recording" : "Speech to Text", placement: "top" }, /* @__PURE__ */ React109.createElement(
     "button",
     {
       className: `toolbar-btn ${listening ? "is-active stt-recording" : ""}`,
@@ -9090,20 +9751,20 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
       }
     },
     "\u{1F3A4}"
-  )), showPanel && !listening && /* @__PURE__ */ React108.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ React108.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ React108.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ React108.createElement(
+  )), showPanel && !listening && /* @__PURE__ */ React109.createElement("div", { className: "stt-panel" }, /* @__PURE__ */ React109.createElement("div", { className: "stt-panel-header" }, "Speech to Text"), /* @__PURE__ */ React109.createElement("label", { className: "stt-label" }, "Language"), /* @__PURE__ */ React109.createElement(
     "select",
     {
       className: "stt-select",
       value: language,
       onChange: (e) => setLanguage(e.target.value)
     },
-    LANGUAGES2.map((l) => /* @__PURE__ */ React108.createElement("option", { key: l.code, value: l.code }, l.label))
-  ), /* @__PURE__ */ React108.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ React108.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ React108.createElement("div", { className: "stt-interim" }, interim));
+    LANGUAGES2.map((l) => /* @__PURE__ */ React109.createElement("option", { key: l.code, value: l.code }, l.label))
+  ), /* @__PURE__ */ React109.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ React109.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ React109.createElement("div", { className: "stt-interim" }, interim));
 });
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
-import React109, { useState as useState28, useRef as useRef25, useEffect as useEffect23, useCallback as useCallback11 } from "react";
+import React110, { useState as useState29, useRef as useRef27, useEffect as useEffect24, useCallback as useCallback13 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
@@ -9151,16 +9812,16 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
   return data.choices?.[0]?.message?.content?.trim() || "";
 };
 var AICommands = ({ editor, onAICommand }) => {
-  const [open, setOpen] = useState28(false);
-  const [showModal, setShowModal] = useState28(false);
-  const [loading, setLoading] = useState28(false);
-  const [promptText, setPromptText] = useState28("");
-  const [resultText, setResultText] = useState28("");
-  const [originalText, setOriginalText] = useState28("");
-  const [selectionRange, setSelectionRange] = useState28(null);
-  const [previousResults, setPreviousResults] = useState28([]);
-  const panelRef = useRef25(null);
-  useEffect23(() => {
+  const [open, setOpen] = useState29(false);
+  const [showModal, setShowModal] = useState29(false);
+  const [loading, setLoading] = useState29(false);
+  const [promptText, setPromptText] = useState29("");
+  const [resultText, setResultText] = useState29("");
+  const [originalText, setOriginalText] = useState29("");
+  const [selectionRange, setSelectionRange] = useState29(null);
+  const [previousResults, setPreviousResults] = useState29([]);
+  const panelRef = useRef27(null);
+  useEffect24(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setOpen(false);
@@ -9169,7 +9830,7 @@ var AICommands = ({ editor, onAICommand }) => {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  const getSelectedText = useCallback11(() => {
+  const getSelectedText = useCallback13(() => {
     if (!editor) return { text: "", range: null };
     const { from, to, empty } = editor.state.selection;
     if (!empty) {
@@ -9177,7 +9838,7 @@ var AICommands = ({ editor, onAICommand }) => {
     }
     return { text: editor.getText(), range: null };
   }, [editor]);
-  const fetchAIResult = useCallback11(async (prompt, text, prevResults = []) => {
+  const fetchAIResult = useCallback13(async (prompt, text, prevResults = []) => {
     setLoading(true);
     setResultText("");
     try {
@@ -9195,7 +9856,7 @@ var AICommands = ({ editor, onAICommand }) => {
       setLoading(false);
     }
   }, [onAICommand]);
-  const handleCommandSelect = useCallback11((command) => {
+  const handleCommandSelect = useCallback13((command) => {
     const { text, range } = getSelectedText();
     if (!text.trim()) return;
     setOriginalText(text);
@@ -9206,7 +9867,7 @@ var AICommands = ({ editor, onAICommand }) => {
     setShowModal(true);
     fetchAIResult(command.prompt, text, []);
   }, [getSelectedText, fetchAIResult]);
-  const handleInsert = useCallback11(() => {
+  const handleInsert = useCallback13(() => {
     if (!resultText || !editor) return;
     if (selectionRange) {
       editor.chain().focus().deleteRange(selectionRange).insertContentAt(selectionRange.from, resultText).run();
@@ -9216,7 +9877,7 @@ var AICommands = ({ editor, onAICommand }) => {
     setShowModal(false);
     setResultText("");
   }, [editor, resultText, selectionRange]);
-  const handleInsertAfter = useCallback11(() => {
+  const handleInsertAfter = useCallback13(() => {
     if (!resultText || !editor) return;
     if (selectionRange) {
       editor.chain().focus().insertContentAt(selectionRange.to, "\n" + resultText).run();
@@ -9231,11 +9892,11 @@ var AICommands = ({ editor, onAICommand }) => {
     setShowModal(false);
     setResultText("");
   }, [editor, resultText, selectionRange]);
-  const handleRefresh = useCallback11(() => {
+  const handleRefresh = useCallback13(() => {
     if (!originalText.trim()) return;
     fetchAIResult(promptText, originalText, previousResults);
   }, [originalText, promptText, previousResults, fetchAIResult]);
-  const handleCancel = useCallback11(() => {
+  const handleCancel = useCallback13(() => {
     setShowModal(false);
     setResultText("");
     setPromptText("");
@@ -9244,15 +9905,15 @@ var AICommands = ({ editor, onAICommand }) => {
     setPreviousResults([]);
   }, []);
   if (!editor) return null;
-  return /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ React109.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement("div", { className: "ai-commands-wrapper", ref: panelRef }, /* @__PURE__ */ React110.createElement(Tooltip, { title: "AI Commands", placement: "top" }, /* @__PURE__ */ React110.createElement(
     "button",
     {
       className: `toolbar-btn ${open ? "is-active" : ""}`,
       onClick: () => setOpen(!open)
     },
-    /* @__PURE__ */ React109.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ React109.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
-    /* @__PURE__ */ React109.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  )), open && /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React110.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none" }, /* @__PURE__ */ React110.createElement("path", { d: "M9 2l1.5 3L14 6.5 10.5 8 9 11 7.5 8 4 6.5 7.5 5zM18 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1zM5 17l1.5 3L10 21.5 6.5 23 5 26 3.5 23 0 21.5 3.5 20z" })),
+    /* @__PURE__ */ React110.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
+  )), open && /* @__PURE__ */ React110.createElement("div", { className: "ai-commands-panel" }, /* @__PURE__ */ React110.createElement("div", { className: "ai-commands-header" }, "AI Commands"), /* @__PURE__ */ React110.createElement("div", { className: "ai-commands-list" }, AI_COMMANDS.map((cmd) => /* @__PURE__ */ React110.createElement(
     "button",
     {
       key: cmd.id,
@@ -9260,8 +9921,8 @@ var AICommands = ({ editor, onAICommand }) => {
       onClick: () => handleCommandSelect(cmd)
     },
     cmd.label
-  ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal2(
-    /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React109.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React109.createElement(
+  ))), /* @__PURE__ */ React110.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal2(
+    /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React110.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React110.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React110.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React110.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React110.createElement(
       "textarea",
       {
         className: "ai-modal-prompt",
@@ -9269,15 +9930,15 @@ var AICommands = ({ editor, onAICommand }) => {
         onChange: (e) => setPromptText(e.target.value),
         rows: 3
       }
-    ), /* @__PURE__ */ React109.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ React109.createElement(
+    ), /* @__PURE__ */ React110.createElement(Tooltip, { title: "Run with custom prompt", placement: "top" }, /* @__PURE__ */ React110.createElement(
       "button",
       {
         className: "ai-modal-robot-btn",
         onClick: () => fetchAIResult(promptText, originalText),
         disabled: loading
       },
-      /* @__PURE__ */ React109.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React109.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React109.createElement("path", { d: "M8 7h8" }))
-    )))), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React109.createElement(
+      /* @__PURE__ */ React110.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React110.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React110.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React110.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React110.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React110.createElement("path", { d: "M8 7h8" }))
+    )))), /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React110.createElement(
       "button",
       {
         className: "ai-modal-action-btn ai-modal-insert-btn",
@@ -9285,7 +9946,7 @@ var AICommands = ({ editor, onAICommand }) => {
         disabled: loading || !resultText
       },
       "Insert"
-    ), /* @__PURE__ */ React109.createElement(
+    ), /* @__PURE__ */ React110.createElement(
       "button",
       {
         className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
@@ -9293,22 +9954,22 @@ var AICommands = ({ editor, onAICommand }) => {
         disabled: loading || !resultText
       },
       "Insert After"
-    ), /* @__PURE__ */ React109.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ React109.createElement(
+    ), /* @__PURE__ */ React110.createElement(Tooltip, { title: "Generate another response", placement: "top" }, /* @__PURE__ */ React110.createElement(
       "button",
       {
         className: "ai-modal-action-btn ai-modal-refresh-btn",
         onClick: handleRefresh,
         disabled: loading
       },
-      /* @__PURE__ */ React109.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React109.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
-    ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React109.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
+      /* @__PURE__ */ React110.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React110.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React110.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React110.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React110.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
+    ))), /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React110.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React110.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React110.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React110.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
     document.body
   ));
 };
 var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
-import React110, { useState as useState29, useMemo as useMemo3 } from "react";
+import React111, { useState as useState30, useMemo as useMemo3 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
@@ -9448,12 +10109,12 @@ async function translateText(text, sourceLang, targetLang) {
   return null;
 }
 var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
-  const [sourceLang, setSourceLang] = useState29(initialSource || "en");
-  const [targetLang, setTargetLang] = useState29(initialTarget || "hi");
-  const [sourceFilter, setSourceFilter] = useState29("");
-  const [targetFilter, setTargetFilter] = useState29("");
-  const [translating, setTranslating] = useState29(false);
-  const [error, setError] = useState29("");
+  const [sourceLang, setSourceLang] = useState30(initialSource || "en");
+  const [targetLang, setTargetLang] = useState30(initialTarget || "hi");
+  const [sourceFilter, setSourceFilter] = useState30("");
+  const [targetFilter, setTargetFilter] = useState30("");
+  const [translating, setTranslating] = useState30(false);
+  const [error, setError] = useState30("");
   const filteredSource = useMemo3(() => LANGUAGES.filter(
     (l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
   ), [sourceFilter]);
@@ -9501,7 +10162,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
     }
   };
   return createPortal3(
-    /* @__PURE__ */ React110.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React110.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React110.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React110.createElement("h3", null, "Translate options"), /* @__PURE__ */ React110.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React110.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React111.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React111.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React111.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React111.createElement("h3", null, "Translate options"), /* @__PURE__ */ React111.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React111.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React111.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React111.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React111.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React111.createElement(
       "input",
       {
         type: "text",
@@ -9510,16 +10171,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
         onChange: (e) => setSourceFilter(e.target.value),
         className: "translate-filter-input"
       }
-    )), /* @__PURE__ */ React110.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ React110.createElement(
+    )), /* @__PURE__ */ React111.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ React111.createElement(
       "button",
       {
         key: lang.code,
         className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
         onClick: () => setSourceLang(lang.code)
       },
-      /* @__PURE__ */ React110.createElement("span", { className: "translate-code" }, lang.code),
-      /* @__PURE__ */ React110.createElement("span", { className: "translate-name" }, lang.name)
-    )))), /* @__PURE__ */ React110.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React110.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ React110.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
+      /* @__PURE__ */ React111.createElement("span", { className: "translate-code" }, lang.code),
+      /* @__PURE__ */ React111.createElement("span", { className: "translate-name" }, lang.name)
+    )))), /* @__PURE__ */ React111.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React111.createElement(Tooltip, { title: "Swap languages", placement: "top" }, /* @__PURE__ */ React111.createElement("button", { className: "translate-swap-btn", onClick: handleSwap }, "\u21C4"))), /* @__PURE__ */ React111.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React111.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React111.createElement(
       "input",
       {
         type: "text",
@@ -9528,16 +10189,16 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
         onChange: (e) => setTargetFilter(e.target.value),
         className: "translate-filter-input"
       }
-    )), /* @__PURE__ */ React110.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ React110.createElement(
+    )), /* @__PURE__ */ React111.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ React111.createElement(
       "button",
       {
         key: lang.code,
         className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
         onClick: () => setTargetLang(lang.code)
       },
-      /* @__PURE__ */ React110.createElement("span", { className: "translate-code" }, lang.code),
-      /* @__PURE__ */ React110.createElement("span", { className: "translate-name" }, lang.name)
-    ))))), error && /* @__PURE__ */ React110.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ React110.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React110.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React110.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ React110.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
+      /* @__PURE__ */ React111.createElement("span", { className: "translate-code" }, lang.code),
+      /* @__PURE__ */ React111.createElement("span", { className: "translate-name" }, lang.name)
+    ))))), error && /* @__PURE__ */ React111.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ React111.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React111.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React111.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ React111.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
     document.body
   );
 };
@@ -10188,38 +10849,38 @@ var CustomTaskItem = TaskItem.extend({
 });
 
 // lib/RufousTextEditor/icons.tsx
-import * as React111 from "react";
+import * as React112 from "react";
 var s = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" };
-var IconUndo = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M12.5 8C9.85 8 7.45 9 5.6 10.6L2 7v9h9l-3.62-3.62C8.93 11.01 10.63 10.2 12.5 10.2c3.03 0 5.6 1.93 6.55 4.63l2.15-.72C19.93 10.68 16.5 8 12.5 8z" }));
-var IconRedo = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M18.4 10.6C16.55 9 14.15 8 11.5 8c-4 0-7.43 2.68-8.7 6.11l2.15.72c.95-2.7 3.52-4.63 6.55-4.63 1.87 0 3.57.81 5.12 2.18L13 16h9V7l-3.6 3.6z" }));
-var IconBold = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }));
-var IconItalic = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
-var IconLink = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
-var IconStrike = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M7.24 11h2.01c-.13-.42-.2-.88-.2-1.37 0-.89.32-1.58.96-2.08.64-.49 1.46-.74 2.47-.74.99 0 1.81.24 2.46.71.64.47.97 1.1.97 1.88h2.04c0-1.27-.55-2.33-1.64-3.18C15.21 5.37 13.83 4.95 12.2 4.95c-1.69 0-3.09.43-4.2 1.3C6.9 7.1 6.35 8.23 6.35 9.63c0 .47.06.92.18 1.37H3v2h18v-2H7.24zM12.2 17.05c-1.03 0-1.89-.28-2.56-.84-.67-.56-1-1.27-1-2.13h-2.1c0 1.36.58 2.5 1.75 3.44 1.16.93 2.56 1.4 4.19 1.4 1.69 0 3.09-.43 4.2-1.3 1.1-.86 1.65-1.99 1.65-3.38h-2.1c0 .85-.33 1.56-1 2.13-.66.56-1.52.84-2.56.84l-.47-.16z" }));
-var IconHeading = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
-var IconFontSize = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
-var IconColor = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z" }), /* @__PURE__ */ React111.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
-var IconFont = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
-var IconLineHeight = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm16-3h-8v2h8V4zm0 4h-8v2h8V8zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2z" }));
-var IconBulletList = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }));
-var IconOrderedList = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
-var IconAlignLeft = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
-var IconAlignCenter = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
-var IconAlignRight = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
-var IconAlignJustify = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
-var IconIndentIncrease = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
-var IconIndentDecrease = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
-var IconTable = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h4v14H5zm6 0V5h4v14h-4zm6 0V5h3v14h-3z", fillRule: "evenodd" }));
-var IconImage = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
-var IconVideo = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" }));
-var IconCut = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z" }));
-var IconCopy = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
-var IconCode = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
-var IconFullscreen = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
-var IconTranslate = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
-var IconTaskList = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
-var IconCheck = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
-var IconPaste = () => /* @__PURE__ */ React111.createElement("svg", { ...s }, /* @__PURE__ */ React111.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
+var IconUndo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M12.5 8C9.85 8 7.45 9 5.6 10.6L2 7v9h9l-3.62-3.62C8.93 11.01 10.63 10.2 12.5 10.2c3.03 0 5.6 1.93 6.55 4.63l2.15-.72C19.93 10.68 16.5 8 12.5 8z" }));
+var IconRedo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M18.4 10.6C16.55 9 14.15 8 11.5 8c-4 0-7.43 2.68-8.7 6.11l2.15.72c.95-2.7 3.52-4.63 6.55-4.63 1.87 0 3.57.81 5.12 2.18L13 16h9V7l-3.6 3.6z" }));
+var IconBold = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }));
+var IconItalic = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }));
+var IconLink = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
+var IconStrike = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7.24 11h2.01c-.13-.42-.2-.88-.2-1.37 0-.89.32-1.58.96-2.08.64-.49 1.46-.74 2.47-.74.99 0 1.81.24 2.46.71.64.47.97 1.1.97 1.88h2.04c0-1.27-.55-2.33-1.64-3.18C15.21 5.37 13.83 4.95 12.2 4.95c-1.69 0-3.09.43-4.2 1.3C6.9 7.1 6.35 8.23 6.35 9.63c0 .47.06.92.18 1.37H3v2h18v-2H7.24zM12.2 17.05c-1.03 0-1.89-.28-2.56-.84-.67-.56-1-1.27-1-2.13h-2.1c0 1.36.58 2.5 1.75 3.44 1.16.93 2.56 1.4 4.19 1.4 1.69 0 3.09-.43 4.2-1.3 1.1-.86 1.65-1.99 1.65-3.38h-2.1c0 .85-.33 1.56-1 2.13-.66.56-1.52.84-2.56.84l-.47-.16z" }));
+var IconHeading = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M5 4v3h5.5v12h3V7H19V4z" }));
+var IconFontSize = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 4v3h5v12h2V7h5V4H9zm-6 8h3v7h2v-7h3v-2H3v2z" }));
+var IconColor = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z" }), /* @__PURE__ */ React112.createElement("path", { d: "M3 20h18v3H3z", opacity: "0.8" }));
+var IconFont = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.93 13.5h4.14L12 7.98 9.93 13.5zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
+var IconLineHeight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M6 7h2.5L5 3.5 1.5 7H4v10H1.5L5 20.5 8.5 17H6V7zm16-3h-8v2h8V4zm0 4h-8v2h8V8zm0 4h-8v2h8v-2zm0 4h-8v2h8v-2z" }));
+var IconBulletList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }));
+var IconOrderedList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }));
+var IconAlignLeft = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zM3 21h18v-2H3v2zM3 3v2h18V3H3z" }));
+var IconAlignCenter = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }));
+var IconAlignRight = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }));
+var IconAlignJustify = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zM3 3v2h18V3H3z" }));
+var IconIndentIncrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
+var IconIndentDecrease = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
+var IconTable = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 19V5h4v14H5zm6 0V5h4v14h-4zm6 0V5h3v14h-3z", fillRule: "evenodd" }));
+var IconImage = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
+var IconVideo = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M4 6.47L5.76 10H20v8H4V6.47M22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4z" }));
+var IconCut = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3h-3z" }));
+var IconCopy = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }));
+var IconCode = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
+var IconFullscreen = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" }));
+var IconTranslate = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
+var IconTaskList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
+var IconCheck = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
+var IconPaste = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
 
 // lib/RufousTextEditor/Toolbar.tsx
 var COLOR_PALETTE = [
@@ -10357,10 +11018,10 @@ var SPECIAL_CHARS = [
   "\xA2"
 ];
 var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
-  const [open, setOpen] = useState30(false);
-  const ref = useRef26(null);
-  const menuRef = useRef26(null);
-  useEffect24(() => {
+  const [open, setOpen] = useState31(false);
+  const ref = useRef28(null);
+  const menuRef = useRef28(null);
+  useEffect25(() => {
     const handleClick = (e) => {
       const target = e.target;
       const inTrigger = ref.current?.contains(target);
@@ -10372,7 +11033,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!open || !menuRef.current || !ref.current) return;
     const menu = menuRef.current;
     const trigger2 = ref.current;
@@ -10401,22 +11062,22 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     };
     position();
   }, [open]);
-  return /* @__PURE__ */ React112.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React112.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React113.createElement(Tooltip, { title: trigger.title || "", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${trigger.className || ""}`,
       onClick: () => setOpen(!open)
     },
     trigger.label,
-    /* @__PURE__ */ React112.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
+    /* @__PURE__ */ React113.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
   )), open && createPortal4(
-    /* @__PURE__ */ React112.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ React112.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
+    /* @__PURE__ */ React113.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ React113.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
     document.body
   ));
 };
 var InsertPanel = ({ editor, onClose, mode = "video" }) => {
-  const [activeTab, setActiveTab] = useState30("link");
-  const [url, setUrl] = useState30("");
+  const [activeTab, setActiveTab] = useState31("link");
+  const [url, setUrl] = useState31("");
   const extractIframeSrc = (html) => {
     const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
     return match ? match[1] : null;
@@ -10448,14 +11109,14 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
     }
     onClose();
   };
-  return /* @__PURE__ */ React112.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React112.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `insert-tab ${activeTab === "link" ? "active" : ""}`,
       onClick: () => setActiveTab("link")
     },
     "\u{1F517} Link"
-  ), /* @__PURE__ */ React112.createElement(
+  ), /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `insert-tab ${activeTab === "code" ? "active" : ""}`,
@@ -10463,7 +11124,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
     },
     "</>",
     " Code"
-  )), /* @__PURE__ */ React112.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ React112.createElement(
+  )), /* @__PURE__ */ React113.createElement("label", { className: "insert-panel-label" }, activeTab === "link" ? "URL" : "Embed Code"), activeTab === "link" ? /* @__PURE__ */ React113.createElement(
     "input",
     {
       type: "text",
@@ -10474,7 +11135,7 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
       onKeyDown: (e) => e.key === "Enter" && handleInsert(),
       autoFocus: true
     }
-  ) : /* @__PURE__ */ React112.createElement(
+  ) : /* @__PURE__ */ React113.createElement(
     "textarea",
     {
       className: "insert-panel-textarea",
@@ -10483,13 +11144,13 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
       onChange: (e) => setUrl(e.target.value),
       rows: 3
     }
-  ), /* @__PURE__ */ React112.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
+  ), /* @__PURE__ */ React113.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
 };
 var ImagePanel = ({ editor, onClose, onImageUpload }) => {
-  const [activeTab, setActiveTab] = useState30("upload");
-  const [url, setUrl] = useState30("");
-  const [isDragging, setIsDragging] = useState30(false);
-  const fileInputRef = useRef26(null);
+  const [activeTab, setActiveTab] = useState31("upload");
+  const [url, setUrl] = useState31("");
+  const [isDragging, setIsDragging] = useState31(false);
+  const fileInputRef = useRef28(null);
   const getBase64 = (file) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -10527,21 +11188,21 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
     editor.chain().focus().setImage({ src: url }).run();
     onClose();
   };
-  return /* @__PURE__ */ React112.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React112.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement("div", { className: "insert-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement("div", { className: "insert-panel-tabs" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `insert-tab ${activeTab === "upload" ? "active" : ""}`,
       onClick: () => setActiveTab("upload")
     },
     "\u2B06 Upload"
-  ), /* @__PURE__ */ React112.createElement(
+  ), /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `insert-tab ${activeTab === "url" ? "active" : ""}`,
       onClick: () => setActiveTab("url")
     },
     "\u{1F517} URL"
-  )), activeTab === "upload" ? /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(
+  )), activeTab === "upload" ? /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(
     "div",
     {
       className: `drop-zone ${isDragging ? "dragging" : ""}`,
@@ -10553,9 +11214,9 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
       onDrop: handleDrop,
       onClick: () => fileInputRef.current?.click()
     },
-    /* @__PURE__ */ React112.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
-    /* @__PURE__ */ React112.createElement("span", { className: "drop-zone-text-sub" }, "or click")
-  ), /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement("span", { className: "drop-zone-text-bold" }, "Drop image"),
+    /* @__PURE__ */ React113.createElement("span", { className: "drop-zone-text-sub" }, "or click")
+  ), /* @__PURE__ */ React113.createElement(
     "input",
     {
       ref: fileInputRef,
@@ -10564,7 +11225,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
       style: { display: "none" },
       onChange: handleFileSelect
     }
-  )) : /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ React112.createElement(
+  )) : /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement("label", { className: "insert-panel-label" }, "URL"), /* @__PURE__ */ React113.createElement(
     "input",
     {
       type: "text",
@@ -10575,18 +11236,18 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
       onKeyDown: (e) => e.key === "Enter" && handleUrlInsert(),
       autoFocus: true
     }
-  ), /* @__PURE__ */ React112.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
+  ), /* @__PURE__ */ React113.createElement("button", { className: "insert-panel-btn", onClick: handleUrlInsert }, "Insert")));
 };
 var MAX_GRID = 10;
 var TableGridSelector = ({ editor, onClose }) => {
-  const [hoverRow, setHoverRow] = useState30(0);
-  const [hoverCol, setHoverCol] = useState30(0);
+  const [hoverRow, setHoverRow] = useState31(0);
+  const [hoverCol, setHoverCol] = useState31(0);
   const handleInsert = () => {
     if (!editor || hoverRow === 0 || hoverCol === 0) return;
     editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
     onClose();
   };
-  return /* @__PURE__ */ React112.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement("div", { className: "table-grid-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement(
     "div",
     {
       className: "table-grid",
@@ -10595,7 +11256,7 @@ var TableGridSelector = ({ editor, onClose }) => {
         setHoverCol(0);
       }
     },
-    Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ React112.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ React112.createElement(
+    Array.from({ length: MAX_GRID }, (_, r) => /* @__PURE__ */ React113.createElement("div", { key: r, className: "table-grid-row" }, Array.from({ length: MAX_GRID }, (_2, c) => /* @__PURE__ */ React113.createElement(
       "div",
       {
         key: c,
@@ -10607,7 +11268,7 @@ var TableGridSelector = ({ editor, onClose }) => {
         onClick: handleInsert
       }
     ))))
-  ), /* @__PURE__ */ React112.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ React112.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ React112.createElement(
+  ), /* @__PURE__ */ React113.createElement("div", { className: "table-grid-footer" }, /* @__PURE__ */ React113.createElement("span", { className: "table-grid-size" }, hoverRow > 0 && hoverCol > 0 ? `${hoverRow}\xD7${hoverCol}` : "Select size"), /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "table-grid-submit",
@@ -10618,9 +11279,9 @@ var TableGridSelector = ({ editor, onClose }) => {
   )));
 };
 var ColorPickerPanel = ({ editor, onClose }) => {
-  const [tab, setTab] = useState30("background");
-  const [activeBg, setActiveBg] = useState30(() => editor.getAttributes("highlight").color || null);
-  const [activeText, setActiveText] = useState30(() => editor.getAttributes("textStyle").color || null);
+  const [tab, setTab] = useState31("background");
+  const [activeBg, setActiveBg] = useState31(() => editor.getAttributes("highlight").color || null);
+  const [activeText, setActiveText] = useState31(() => editor.getAttributes("textStyle").color || null);
   const activeColor = tab === "background" ? activeBg : activeText;
   const applyColor = (color) => {
     if (tab === "background") {
@@ -10641,51 +11302,51 @@ var ColorPickerPanel = ({ editor, onClose }) => {
     }
     onClose();
   };
-  return /* @__PURE__ */ React112.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React112.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement("div", { className: "color-picker-panel", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement("div", { className: "color-picker-tabs" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `color-picker-tab ${tab === "background" ? "active" : ""}`,
       onClick: () => setTab("background")
     },
     "Background"
-  ), /* @__PURE__ */ React112.createElement(
+  ), /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `color-picker-tab ${tab === "text" ? "active" : ""}`,
       onClick: () => setTab("text")
     },
     "Text"
-  )), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ React112.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ React112.createElement(
+  )), /* @__PURE__ */ React113.createElement("div", { className: "color-picker-grid" }, COLOR_PALETTE.map((color, i) => /* @__PURE__ */ React113.createElement(Tooltip, { key: i, title: color, placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `color-picker-swatch ${color === "#ffffff" ? "white-swatch" : ""}${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " swatch-active" : ""}`,
       style: { background: color },
       onClick: () => applyColor(color)
     }
-  )))), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React112.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React112.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React112.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
+  )))), /* @__PURE__ */ React113.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React113.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React113.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
 };
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
-  const [, setEditorState] = useState30(0);
-  const [todoEnabled, setTodoEnabled] = useState30(false);
-  const ttsRef = useRef26(null);
-  const sttRef = useRef26(null);
+  const [, setEditorState] = useState31(0);
+  const [todoEnabled, setTodoEnabled] = useState31(false);
+  const ttsRef = useRef28(null);
+  const sttRef = useRef28(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
     editor.on("transaction", onTransaction);
     return () => editor.off("transaction", onTransaction);
   }, [editor]);
-  const insertSpecialChar = useCallback12((char) => {
+  const insertSpecialChar = useCallback14((char) => {
     if (!editor) return;
     editor.chain().focus().insertContent(char).run();
   }, [editor]);
-  const [copySuccess, setCopySuccess] = useState30(false);
-  const [translateSource, setTranslateSource] = useState30("en");
-  const [translateTarget, setTranslateTarget] = useState30("hi");
-  const [translateStatus, setTranslateStatus] = useState30("");
-  const [showTranslateModal, setShowTranslateModal] = useState30(false);
-  const handleCopy = useCallback12(async () => {
+  const [copySuccess, setCopySuccess] = useState31(false);
+  const [translateSource, setTranslateSource] = useState31("en");
+  const [translateTarget, setTranslateTarget] = useState31("hi");
+  const [translateStatus, setTranslateStatus] = useState31("");
+  const [showTranslateModal, setShowTranslateModal] = useState31(false);
+  const handleCopy = useCallback14(async () => {
     if (!editor) return;
     const { from, to, empty } = editor.state.selection;
     if (empty) return;
@@ -10700,7 +11361,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       setTimeout(() => setCopySuccess(false), 2e3);
     }
   }, [editor]);
-  const handlePaste = useCallback12(async () => {
+  const handlePaste = useCallback14(async () => {
     if (!editor) return;
     try {
       const text = await navigator.clipboard.readText();
@@ -10709,7 +11370,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       document.execCommand("paste");
     }
   }, [editor]);
-  const handleQuickTranslate = useCallback12(async () => {
+  const handleQuickTranslate = useCallback14(async () => {
     if (!editor) return;
     const { from, to, empty } = editor.state.selection;
     if (empty) {
@@ -10743,32 +11404,32 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     setTimeout(() => setTranslateStatus(""), 2e3);
   }, [editor, translateSource, translateTarget, onTranslate]);
   if (!editor) return null;
-  return /* @__PURE__ */ React112.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React112.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React113.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React113.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: () => editor.chain().focus().undo().run(),
       disabled: !editor.can().undo()
     },
-    /* @__PURE__ */ React112.createElement(IconUndo, null)
-  )), show("redo") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconUndo, null)
+  )), show("redo") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Redo (Ctrl+Y)", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: () => editor.chain().focus().redo().run(),
       disabled: !editor.can().redo()
     },
-    /* @__PURE__ */ React112.createElement(IconRedo, null)
-  ))), show("ai") && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconRedo, null)
+  ))), show("ai") && /* @__PURE__ */ React113.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React113.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React113.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
       trigger: {
-        label: /* @__PURE__ */ React112.createElement(IconHeading, null),
+        label: /* @__PURE__ */ React113.createElement(IconHeading, null),
         title: "Block type",
         className: editor.isActive("heading") ? "is-active" : ""
       }
     },
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       "button",
       {
         className: `dropdown-item ${!editor.isActive("heading") && !editor.isActive("blockquote") && !editor.isActive("codeBlock") ? "is-active" : ""}`,
@@ -10776,7 +11437,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       },
       "\xB6 Paragraph"
     ),
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       "button",
       {
         className: `dropdown-item heading-1 ${editor.isActive("heading", { level: 1 }) ? "is-active" : ""}`,
@@ -10784,7 +11445,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       },
       "Heading 1"
     ),
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       "button",
       {
         className: `dropdown-item heading-2 ${editor.isActive("heading", { level: 2 }) ? "is-active" : ""}`,
@@ -10792,7 +11453,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       },
       "Heading 2"
     ),
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       "button",
       {
         className: `dropdown-item heading-3 ${editor.isActive("heading", { level: 3 }) ? "is-active" : ""}`,
@@ -10800,7 +11461,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       },
       "Heading 3"
     ),
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       "button",
       {
         className: `dropdown-item heading-4 ${editor.isActive("heading", { level: 4 }) ? "is-active" : ""}`,
@@ -10808,7 +11469,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       },
       "Heading 4"
     ),
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       "button",
       {
         className: `dropdown-item ${editor.isActive("blockquote") ? "is-active" : ""}`,
@@ -10816,7 +11477,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       },
       "\u275E Blockquote"
     ),
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       "button",
       {
         className: `dropdown-item ${editor.isActive("codeBlock") ? "is-active" : ""}`,
@@ -10825,19 +11486,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       "{ }",
       " Code Block"
     ),
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
-  ), show("fontsize") && /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
+  ), show("fontsize") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
       trigger: {
-        label: /* @__PURE__ */ React112.createElement(IconFontSize, null),
+        label: /* @__PURE__ */ React113.createElement(IconFontSize, null),
         title: "Font size"
       }
     },
     [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 56, 64, 72, 80, 96].map((size) => {
       const sizeStr = `${size}px`;
       const isActive = editor.getAttributes("textStyle").fontSize === sizeStr;
-      return /* @__PURE__ */ React112.createElement(
+      return /* @__PURE__ */ React113.createElement(
         "button",
         {
           key: size,
@@ -10853,17 +11514,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         sizeStr
       );
     })
-  ), show("font") && /* @__PURE__ */ React112.createElement(
+  ), show("font") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
       trigger: {
-        label: /* @__PURE__ */ React112.createElement(IconFont, null),
+        label: /* @__PURE__ */ React113.createElement(IconFont, null),
         title: "Font family"
       }
     },
     FONT_FAMILIES.map((font) => {
       const isActive = editor.getAttributes("textStyle").fontFamily === font;
-      return /* @__PURE__ */ React112.createElement(
+      return /* @__PURE__ */ React113.createElement(
         "button",
         {
           key: font,
@@ -10880,40 +11541,40 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         font
       );
     })
-  ), show("color") && /* @__PURE__ */ React112.createElement(
+  ), show("color") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
       trigger: {
-        label: /* @__PURE__ */ React112.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React112.createElement(IconColor, null)),
+        label: /* @__PURE__ */ React113.createElement("span", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(IconColor, null)),
         title: "Colors"
       },
       keepOpen: true
     },
-    (close) => /* @__PURE__ */ React112.createElement(ColorPickerPanel, { editor, onClose: close })
-  ), show("bold") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    (close) => /* @__PURE__ */ React113.createElement(ColorPickerPanel, { editor, onClose: close })
+  ), show("bold") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Bold (Ctrl+B)", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
       onClick: () => editor.chain().focus().toggleBold().run()
     },
-    /* @__PURE__ */ React112.createElement(IconBold, null)
-  )), show("italic") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconBold, null)
+  )), show("italic") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Italic (Ctrl+I)", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
       onClick: () => editor.chain().focus().toggleItalic().run()
     },
-    /* @__PURE__ */ React112.createElement(IconItalic, null)
-  )), show("strike") && /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconItalic, null)
+  )), show("strike") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
-      trigger: { label: /* @__PURE__ */ React112.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
+      trigger: { label: /* @__PURE__ */ React113.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
     },
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ React112.createElement("s", null, "Strikethrough")),
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ React112.createElement("u", null, "Underline")),
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ React112.createElement("sup", null, "2"), " Superscript"),
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ React112.createElement("sub", null, "2"), " Subscript"),
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleStrike().run() }, /* @__PURE__ */ React113.createElement("s", null, "Strikethrough")),
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleUnderline().run() }, /* @__PURE__ */ React113.createElement("u", null, "Underline")),
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSuperscript().run() }, "X", /* @__PURE__ */ React113.createElement("sup", null, "2"), " Superscript"),
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleSubscript().run() }, "X", /* @__PURE__ */ React113.createElement("sub", null, "2"), " Subscript"),
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onMouseDown: (e) => {
       e.preventDefault();
       const chain = editor.chain().focus();
       if (!editor.state.selection.empty) {
@@ -10929,25 +11590,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         c.run();
       }
     } }, "\u2715 Clear formatting")
-  ), show("link") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ React112.createElement(
+  ), show("link") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Insert Link", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
       onClick: setLink
     },
-    /* @__PURE__ */ React112.createElement(IconLink, null)
-  )), show("lineheight") && /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconLink, null)
+  )), show("lineheight") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
       trigger: {
-        label: /* @__PURE__ */ React112.createElement(IconLineHeight, null),
+        label: /* @__PURE__ */ React113.createElement(IconLineHeight, null),
         title: "Line height"
       }
     },
     ["1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6", "1.7", "1.8", "2.0", "2.5", "3.0"].map((lh) => {
       const currentLH = editor.getAttributes("paragraph").lineHeight || editor.getAttributes("heading").lineHeight;
       const isActive = currentLH === lh;
-      return /* @__PURE__ */ React112.createElement(
+      return /* @__PURE__ */ React113.createElement(
         "button",
         {
           key: lh,
@@ -10963,19 +11624,19 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         lh
       );
     })
-  )), (show("ul") || show("ol")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ React112.createElement(
+  )), (show("ul") || show("ol")) && /* @__PURE__ */ React113.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React113.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
       onClick: () => editor.chain().focus().toggleBulletList().run()
     },
-    /* @__PURE__ */ React112.createElement(IconBulletList, null)
-  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
+    /* @__PURE__ */ React113.createElement(IconBulletList, null)
+  )), /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
     { label: "Default", style: null, icon: "\u2022" },
     { label: "Circle", style: "circle", icon: "\u25CB" },
     { label: "Dot", style: "disc", icon: "\u2219" },
     { label: "Square", style: "square", icon: "\u25A0" }
-  ].map((item) => /* @__PURE__ */ React112.createElement(
+  ].map((item) => /* @__PURE__ */ React113.createElement(
     "button",
     {
       key: item.label,
@@ -11000,24 +11661,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         }).run();
       }
     },
-    /* @__PURE__ */ React112.createElement("span", { className: "bullet-style-icon" }, item.icon),
+    /* @__PURE__ */ React113.createElement("span", { className: "bullet-style-icon" }, item.icon),
     " ",
     item.label
-  )))), show("ol") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ React112.createElement(
+  )))), show("ol") && /* @__PURE__ */ React113.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
       onClick: () => editor.chain().focus().toggleOrderedList().run()
     },
-    /* @__PURE__ */ React112.createElement(IconOrderedList, null)
-  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
+    /* @__PURE__ */ React113.createElement(IconOrderedList, null)
+  )), /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
     { label: "Default", style: "decimal", icon: "1." },
     { label: "Lower Alpha", style: "lower-alpha", icon: "a." },
     { label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
     { label: "Lower Roman", style: "lower-roman", icon: "i." },
     { label: "Upper Alpha", style: "upper-alpha", icon: "A." },
     { label: "Upper Roman", style: "upper-roman", icon: "I." }
-  ].map((item) => /* @__PURE__ */ React112.createElement(
+  ].map((item) => /* @__PURE__ */ React113.createElement(
     "button",
     {
       key: item.label,
@@ -11042,24 +11703,24 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         }).run();
       }
     },
-    /* @__PURE__ */ React112.createElement("span", { className: "bullet-style-icon" }, item.icon),
+    /* @__PURE__ */ React113.createElement("span", { className: "bullet-style-icon" }, item.icon),
     " ",
     item.label
-  ))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React112.createElement(
+  ))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React113.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
       trigger: {
-        label: /* @__PURE__ */ React112.createElement(IconAlignLeft, null),
+        label: /* @__PURE__ */ React113.createElement(IconAlignLeft, null),
         title: "Align",
         className: editor.isActive({ textAlign: "center" }) || editor.isActive({ textAlign: "right" }) || editor.isActive({ textAlign: "justify" }) ? "is-active" : ""
       }
     },
     [
-      { label: "Align Left", value: "left", icon: /* @__PURE__ */ React112.createElement(IconAlignLeft, null) },
-      { label: "Align Center", value: "center", icon: /* @__PURE__ */ React112.createElement(IconAlignCenter, null) },
-      { label: "Align Right", value: "right", icon: /* @__PURE__ */ React112.createElement(IconAlignRight, null) },
-      { label: "Align Justify", value: "justify", icon: /* @__PURE__ */ React112.createElement(IconAlignJustify, null) }
-    ].map((item) => /* @__PURE__ */ React112.createElement(
+      { label: "Align Left", value: "left", icon: /* @__PURE__ */ React113.createElement(IconAlignLeft, null) },
+      { label: "Align Center", value: "center", icon: /* @__PURE__ */ React113.createElement(IconAlignCenter, null) },
+      { label: "Align Right", value: "right", icon: /* @__PURE__ */ React113.createElement(IconAlignRight, null) },
+      { label: "Align Justify", value: "justify", icon: /* @__PURE__ */ React113.createElement(IconAlignJustify, null) }
+    ].map((item) => /* @__PURE__ */ React113.createElement(
       "button",
       {
         key: item.value,
@@ -11070,7 +11731,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  ), show("indent") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ React112.createElement(
+  ), show("indent") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Increase Indent", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -11089,8 +11750,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         }).run();
       }
     },
-    /* @__PURE__ */ React112.createElement(IconIndentIncrease, null)
-  )), show("outdent") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconIndentIncrease, null)
+  )), show("outdent") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Decrease Indent", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -11109,29 +11770,29 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         }).run();
       }
     },
-    /* @__PURE__ */ React112.createElement(IconIndentDecrease, null)
-  ))), show("table") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconIndentDecrease, null)
+  ))), show("table") && /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React113.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React113.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React113.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ React113.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React113.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ React113.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Cut (Ctrl+X)", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: () => document.execCommand("cut")
     },
-    /* @__PURE__ */ React112.createElement(IconCut, null)
-  )), show("copy") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconCut, null)
+  )), show("copy") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Copy selected text", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: handleCopy
     },
-    copySuccess ? /* @__PURE__ */ React112.createElement(IconCheck, null) : /* @__PURE__ */ React112.createElement(IconCopy, null)
-  )), show("paste") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    copySuccess ? /* @__PURE__ */ React113.createElement(IconCheck, null) : /* @__PURE__ */ React113.createElement(IconCopy, null)
+  )), show("paste") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Paste (Ctrl+V)", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: handlePaste
     },
-    /* @__PURE__ */ React112.createElement(IconPaste, null)
-  )), show("specialchars") && /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ React112.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconPaste, null)
+  )), show("specialchars") && /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ React113.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ React113.createElement(
     "button",
     {
       key: char,
@@ -11139,12 +11800,12 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       onClick: () => insertSpecialChar(char)
     },
     char
-  )))), show("code") && /* @__PURE__ */ React112.createElement(
+  )))), show("code") && /* @__PURE__ */ React113.createElement(
     Dropdown,
     {
-      trigger: { label: /* @__PURE__ */ React112.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
+      trigger: { label: /* @__PURE__ */ React113.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
     },
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => {
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => {
       if (editor.isActive("codeBlock")) {
         const text = (() => {
           const { $from } = editor.state.selection;
@@ -11162,22 +11823,22 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         editor.chain().focus().toggleCode().run();
       }
     } }, "</>", " Inline Code"),
-    /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
-  ), show("fullscreen") && /* @__PURE__ */ React112.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
+  ), show("fullscreen") && /* @__PURE__ */ React113.createElement(Tooltip, { title: "Toggle Fullscreen", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
       onClick: onToggleFullscreen
     },
-    /* @__PURE__ */ React112.createElement(IconFullscreen, null)
-  )), show("tts") && /* @__PURE__ */ React112.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React112.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React112.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconFullscreen, null)
+  )), show("tts") && /* @__PURE__ */ React113.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React113.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React113.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Translate selected text", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn",
       onClick: handleQuickTranslate
     },
-    /* @__PURE__ */ React112.createElement(IconTranslate, null)
-  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React112.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ React112.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(IconTranslate, null)
+  )), /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React113.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ React113.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: todoEnabled ? "Disable Task List" : "Enable Task List", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
@@ -11220,11 +11881,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         }
       }
     },
-    /* @__PURE__ */ React112.createElement(IconTaskList, null)
-  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
+    /* @__PURE__ */ React113.createElement(IconTaskList, null)
+  )), /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
     const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
     const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
-    return /* @__PURE__ */ React112.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
+    return /* @__PURE__ */ React113.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
       const { state } = editor;
       const { schema } = state;
       const taskItemType = schema.nodes.taskItem;
@@ -11257,8 +11918,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         }
         return true;
       }).run();
-    } }, /* @__PURE__ */ React112.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React112.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
-  })))), onClose && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React112.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React112.createElement(
+    } }, /* @__PURE__ */ React113.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React113.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
+  })))), onClose && /* @__PURE__ */ React113.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
       className: "toolbar-btn btn-cross",
@@ -11274,8 +11935,8 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         onClose();
       }
     },
-    /* @__PURE__ */ React112.createElement(closeIcon_default, { color: "#a81c08" })
-  ))), showTranslateModal && /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(closeIcon_default, { color: "#a81c08" })
+  ))), showTranslateModal && /* @__PURE__ */ React113.createElement(
     TranslateModal_default,
     {
       editor,
@@ -11293,7 +11954,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
 var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
-import React113, { useState as useState31, useEffect as useEffect25, useRef as useRef27 } from "react";
+import React114, { useState as useState32, useEffect as useEffect26, useRef as useRef29 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -11301,18 +11962,18 @@ var ALIGNMENTS = [
   { value: "right", label: "Right", icon: "\u2263" }
 ];
 var ImagePropertiesModal = ({ editor, node, onClose }) => {
-  const [activeTab, setActiveTab] = useState31("image");
-  const [src, setSrc] = useState31(node?.attrs?.src || "");
-  const [title, setTitle] = useState31(node?.attrs?.title || "");
-  const [alt, setAlt] = useState31(node?.attrs?.alt || "");
-  const [link, setLink] = useState31("");
-  const [openInNewTab, setOpenInNewTab] = useState31(false);
-  const [width, setWidth] = useState31("");
-  const [height, setHeight] = useState31("");
-  const [lockRatio, setLockRatio] = useState31(true);
-  const [naturalWidth, setNaturalWidth] = useState31(0);
-  const [naturalHeight, setNaturalHeight] = useState31(0);
-  useEffect25(() => {
+  const [activeTab, setActiveTab] = useState32("image");
+  const [src, setSrc] = useState32(node?.attrs?.src || "");
+  const [title, setTitle] = useState32(node?.attrs?.title || "");
+  const [alt, setAlt] = useState32(node?.attrs?.alt || "");
+  const [link, setLink] = useState32("");
+  const [openInNewTab, setOpenInNewTab] = useState32(false);
+  const [width, setWidth] = useState32("");
+  const [height, setHeight] = useState32("");
+  const [lockRatio, setLockRatio] = useState32(true);
+  const [naturalWidth, setNaturalWidth] = useState32(0);
+  const [naturalHeight, setNaturalHeight] = useState32(0);
+  useEffect26(() => {
     if (src) {
       const img = new window.Image();
       img.onload = () => {
@@ -11351,7 +12012,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
     editor.chain().focus().deleteSelection().run();
     onClose();
   };
-  return /* @__PURE__ */ React113.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React113.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React113.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React113.createElement("h3", null, "Image properties"), /* @__PURE__ */ React113.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React113.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React113.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React113.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React113.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ React113.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ React113.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React113.createElement(
+  return /* @__PURE__ */ React114.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React114.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React114.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React114.createElement("h3", null, "Image properties"), /* @__PURE__ */ React114.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React114.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React114.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React114.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React114.createElement("div", { className: "modal-preview" }, /* @__PURE__ */ React114.createElement("img", { src, alt: alt || "Preview" })), /* @__PURE__ */ React114.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "number",
@@ -11359,14 +12020,14 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       value: width,
       onChange: (e) => handleWidthChange(e.target.value)
     }
-  ), /* @__PURE__ */ React113.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React114.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React114.createElement(
     "button",
     {
       className: `lock-btn ${lockRatio ? "locked" : ""}`,
       onClick: () => setLockRatio(!lockRatio)
     },
     lockRatio ? "\u{1F512}" : "\u{1F513}"
-  )), /* @__PURE__ */ React113.createElement(
+  )), /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "number",
@@ -11374,21 +12035,21 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       value: height,
       onChange: (e) => handleHeightChange(e.target.value)
     }
-  ))), /* @__PURE__ */ React113.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React113.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ React113.createElement(
+  ))), /* @__PURE__ */ React114.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React114.createElement("div", { className: "modal-tabs" }, /* @__PURE__ */ React114.createElement(
     "button",
     {
       className: `modal-tab ${activeTab === "image" ? "active" : ""}`,
       onClick: () => setActiveTab("image")
     },
     "Image"
-  ), /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React114.createElement(
     "button",
     {
       className: `modal-tab ${activeTab === "advanced" ? "active" : ""}`,
       onClick: () => setActiveTab("advanced")
     },
     "Advanced"
-  )), activeTab === "image" ? /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ React113.createElement(
+  )), activeTab === "image" ? /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Src"), /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "text",
@@ -11396,7 +12057,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       value: src,
       onChange: (e) => setSrc(e.target.value)
     }
-  ), /* @__PURE__ */ React113.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Title"), /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "text",
@@ -11404,7 +12065,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       value: title,
       onChange: (e) => setTitle(e.target.value)
     }
-  ), /* @__PURE__ */ React113.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Alternative"), /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "text",
@@ -11412,7 +12073,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       value: alt,
       onChange: (e) => setAlt(e.target.value)
     }
-  ), /* @__PURE__ */ React113.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Link"), /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "text",
@@ -11420,23 +12081,23 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       value: link,
       onChange: (e) => setLink(e.target.value)
     }
-  ), /* @__PURE__ */ React113.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ React113.createElement(
+  ), /* @__PURE__ */ React114.createElement("label", { className: "modal-checkbox" }, /* @__PURE__ */ React114.createElement(
     "input",
     {
       type: "checkbox",
       checked: openInNewTab,
       onChange: (e) => setOpenInNewTab(e.target.checked)
     }
-  ), "Open link in new tab")) : /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ React113.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ React113.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ React113.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ React113.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React113.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
+  ), "Open link in new tab")) : /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ React114.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ React114.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ React114.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React114.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var ImageToolbar = ({ editor }) => {
-  const [showModal, setShowModal] = useState31(false);
-  const [showAlign, setShowAlign] = useState31(false);
-  const [showVAlign, setShowVAlign] = useState31(false);
-  const [copyStatus, setCopyStatus] = useState31("");
-  const [pos, setPos] = useState31(null);
-  const toolbarRef = useRef27(null);
-  useEffect25(() => {
+  const [showModal, setShowModal] = useState32(false);
+  const [showAlign, setShowAlign] = useState32(false);
+  const [showVAlign, setShowVAlign] = useState32(false);
+  const [copyStatus, setCopyStatus] = useState32("");
+  const [pos, setPos] = useState32(null);
+  const toolbarRef = useRef29(null);
+  useEffect26(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -11466,7 +12127,7 @@ var ImageToolbar = ({ editor }) => {
   const node = editor?.state.selection.node;
   const isImage = node && node.type.name === "image";
   if (!editor || !isImage || !pos) return showModal ? createPortal5(
-    /* @__PURE__ */ React113.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
+    /* @__PURE__ */ React114.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
   const handleDelete = () => {
@@ -11543,7 +12204,7 @@ var ImageToolbar = ({ editor }) => {
     setShowVAlign(false);
   };
   return createPortal5(
-    /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(
+    /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
       "div",
       {
         className: "image-toolbar",
@@ -11551,14 +12212,14 @@ var ImageToolbar = ({ editor }) => {
         style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ React113.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
-      /* @__PURE__ */ React113.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
-      /* @__PURE__ */ React113.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React113.createElement("span", { className: "img-copy-toast" }, copyStatus)),
-      /* @__PURE__ */ React113.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React113.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React113.createElement("button", { className: "img-tool-btn", onClick: () => {
+      /* @__PURE__ */ React114.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
+      /* @__PURE__ */ React114.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
+      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Copy image", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React114.createElement("span", { className: "img-copy-toast" }, copyStatus)),
+      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => {
         setShowAlign(!showAlign);
         setShowVAlign(false);
-      } }, "\u2630 ", /* @__PURE__ */ React113.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React113.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ React113.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
-    ), showModal && /* @__PURE__ */ React113.createElement(
+      } }, "\u2630 ", /* @__PURE__ */ React114.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React114.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS.map((a) => /* @__PURE__ */ React114.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
+    ), showModal && /* @__PURE__ */ React114.createElement(
       ImagePropertiesModal,
       {
         editor,
@@ -11572,7 +12233,7 @@ var ImageToolbar = ({ editor }) => {
 var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
-import React114, { useState as useState32, useEffect as useEffect26, useRef as useRef28 } from "react";
+import React115, { useState as useState33, useEffect as useEffect27, useRef as useRef30 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -11581,10 +12242,10 @@ var ALIGNMENTS2 = [
 ];
 var VIDEO_TYPES = ["youtube", "video"];
 var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
-  const [src, setSrc] = useState32(node?.attrs?.src || "");
-  const [width, setWidth] = useState32(String(node?.attrs?.width || 640));
-  const [height, setHeight] = useState32(String(node?.attrs?.height || 360));
-  const [lockRatio, setLockRatio] = useState32(true);
+  const [src, setSrc] = useState33(node?.attrs?.src || "");
+  const [width, setWidth] = useState33(String(node?.attrs?.width || 640));
+  const [height, setHeight] = useState33(String(node?.attrs?.height || 360));
+  const [lockRatio, setLockRatio] = useState33(true);
   const handleWidthChange = (val) => {
     setWidth(val);
     if (lockRatio) {
@@ -11617,7 +12278,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
     onClose();
   };
   const isYoutube = nodeType === "youtube";
-  return /* @__PURE__ */ React114.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React114.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React114.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React114.createElement("h3", null, "Video properties"), /* @__PURE__ */ React114.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React114.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React114.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React114.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React114.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React115.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React115.createElement("div", { className: "modal-content", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React115.createElement("h3", null, "Video properties"), /* @__PURE__ */ React115.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React115.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React115.createElement("div", { className: "modal-layout" }, /* @__PURE__ */ React115.createElement("div", { className: "modal-preview-col" }, src && /* @__PURE__ */ React115.createElement("div", { className: "modal-preview", style: { background: "#000" } }, isYoutube ? /* @__PURE__ */ React115.createElement(
     "iframe",
     {
       src,
@@ -11625,14 +12286,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       style: { width: "100%", aspectRatio: "16/9", border: "none", display: "block" },
       allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
     }
-  ) : /* @__PURE__ */ React114.createElement(
+  ) : /* @__PURE__ */ React115.createElement(
     "video",
     {
       src,
       controls: true,
       style: { width: "100%", aspectRatio: "16/9", display: "block" }
     }
-  )), /* @__PURE__ */ React114.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React114.createElement(
+  )), /* @__PURE__ */ React115.createElement("div", { className: "modal-dimensions" }, /* @__PURE__ */ React115.createElement(
     "input",
     {
       type: "number",
@@ -11640,14 +12301,14 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       value: width,
       onChange: (e) => handleWidthChange(e.target.value)
     }
-  ), /* @__PURE__ */ React114.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React114.createElement(
+  ), /* @__PURE__ */ React115.createElement(Tooltip, { title: lockRatio ? "Unlock aspect ratio" : "Lock aspect ratio", placement: "top" }, /* @__PURE__ */ React115.createElement(
     "button",
     {
       className: `lock-btn ${lockRatio ? "locked" : ""}`,
       onClick: () => setLockRatio(!lockRatio)
     },
     lockRatio ? "\u{1F512}" : "\u{1F513}"
-  )), /* @__PURE__ */ React114.createElement(
+  )), /* @__PURE__ */ React115.createElement(
     "input",
     {
       type: "number",
@@ -11655,7 +12316,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       value: height,
       onChange: (e) => handleHeightChange(e.target.value)
     }
-  ))), /* @__PURE__ */ React114.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ React114.createElement(
+  ))), /* @__PURE__ */ React115.createElement("div", { className: "modal-fields-col" }, /* @__PURE__ */ React115.createElement("label", { className: "modal-label" }, "Video URL"), /* @__PURE__ */ React115.createElement(
     "input",
     {
       type: "text",
@@ -11663,7 +12324,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       value: src,
       onChange: (e) => setSrc(e.target.value)
     }
-  ), /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ React114.createElement(
+  ), /* @__PURE__ */ React115.createElement("label", { className: "modal-label" }, "Width"), /* @__PURE__ */ React115.createElement(
     "input",
     {
       type: "number",
@@ -11671,7 +12332,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       value: width,
       onChange: (e) => handleWidthChange(e.target.value)
     }
-  ), /* @__PURE__ */ React114.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ React114.createElement(
+  ), /* @__PURE__ */ React115.createElement("label", { className: "modal-label" }, "Height"), /* @__PURE__ */ React115.createElement(
     "input",
     {
       type: "number",
@@ -11679,16 +12340,16 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       value: height,
       onChange: (e) => handleHeightChange(e.target.value)
     }
-  )))), /* @__PURE__ */ React114.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React114.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
+  )))), /* @__PURE__ */ React115.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React115.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React115.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React115.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React115.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var VideoToolbar = ({ editor }) => {
-  const [showModal, setShowModal] = useState32(false);
-  const [showSize, setShowSize] = useState32(false);
-  const [showAlign, setShowAlign] = useState32(false);
-  const [copyStatus, setCopyStatus] = useState32("");
-  const [pos, setPos] = useState32(null);
-  const toolbarRef = useRef28(null);
-  useEffect26(() => {
+  const [showModal, setShowModal] = useState33(false);
+  const [showSize, setShowSize] = useState33(false);
+  const [showAlign, setShowAlign] = useState33(false);
+  const [copyStatus, setCopyStatus] = useState33("");
+  const [pos, setPos] = useState33(null);
+  const toolbarRef = useRef30(null);
+  useEffect27(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -11719,7 +12380,7 @@ var VideoToolbar = ({ editor }) => {
   const isVideo = node && VIDEO_TYPES.includes(node.type.name);
   const nodeType = node?.type.name;
   if (!editor || !isVideo || !pos) return showModal ? createPortal6(
-    /* @__PURE__ */ React114.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
+    /* @__PURE__ */ React115.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
   const handleDelete = () => {
@@ -11766,7 +12427,7 @@ var VideoToolbar = ({ editor }) => {
     );
   };
   return createPortal6(
-    /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
+    /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement(
       "div",
       {
         className: "image-toolbar",
@@ -11774,30 +12435,30 @@ var VideoToolbar = ({ editor }) => {
         style: { position: "absolute", top: pos.top, left: pos.left, zIndex: 1e3 },
         onMouseDown: (e) => e.preventDefault()
       },
-      /* @__PURE__ */ React114.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
-      /* @__PURE__ */ React114.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
-      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React114.createElement("span", { className: "img-copy-toast" }, copyStatus)),
-      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => {
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Delete", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "img-tool-btn", onClick: handleDelete }, "\u{1F5D1}")),
+      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Edit properties", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "img-tool-btn", onClick: () => setShowModal(true) }, "\u270E")),
+      /* @__PURE__ */ React115.createElement("div", { className: "img-tool-copy-wrapper" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Copy URL", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "img-tool-btn", onClick: handleCopy }, copyStatus ? "\u2713" : "\u{1F4CB}")), copyStatus && /* @__PURE__ */ React115.createElement("span", { className: "img-copy-toast" }, copyStatus)),
+      /* @__PURE__ */ React115.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Size presets", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "img-tool-btn", onClick: () => {
         setShowSize(!showSize);
         setShowAlign(false);
-      } }, /* @__PURE__ */ React114.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ React114.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ React114.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ React114.createElement("button", { className: "dropdown-item", onClick: () => {
+      } }, /* @__PURE__ */ React115.createElement("span", { style: { fontSize: "11px" } }, node.attrs.width || 640, "x", node.attrs.height || 360), /* @__PURE__ */ React115.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showSize && /* @__PURE__ */ React115.createElement("div", { className: "img-tool-menu" }, /* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => {
         handleResize("small");
         setShowSize(false);
-      } }, "Small (320x180)"), /* @__PURE__ */ React114.createElement("button", { className: "dropdown-item", onClick: () => {
+      } }, "Small (320x180)"), /* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => {
         handleResize("medium");
         setShowSize(false);
-      } }, "Medium (480x270)"), /* @__PURE__ */ React114.createElement("button", { className: "dropdown-item", onClick: () => {
+      } }, "Medium (480x270)"), /* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => {
         handleResize("large");
         setShowSize(false);
-      } }, "Large (640x360)"), /* @__PURE__ */ React114.createElement("button", { className: "dropdown-item", onClick: () => {
+      } }, "Large (640x360)"), /* @__PURE__ */ React115.createElement("button", { className: "dropdown-item", onClick: () => {
         handleResize("full");
         setShowSize(false);
       } }, "Full (854x480)"))),
-      /* @__PURE__ */ React114.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React114.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React114.createElement("button", { className: "img-tool-btn", onClick: () => {
+      /* @__PURE__ */ React115.createElement("div", { className: "img-tool-dropdown" }, /* @__PURE__ */ React115.createElement(Tooltip, { title: "Horizontal alignment", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "img-tool-btn", onClick: () => {
         setShowAlign(!showAlign);
         setShowSize(false);
-      } }, "\u2630 ", /* @__PURE__ */ React114.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React114.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ React114.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
-    ), showModal && /* @__PURE__ */ React114.createElement(
+      } }, "\u2630 ", /* @__PURE__ */ React115.createElement("span", { className: "dropdown-arrow" }, "\u25BE"))), showAlign && /* @__PURE__ */ React115.createElement("div", { className: "img-tool-menu" }, ALIGNMENTS2.map((a) => /* @__PURE__ */ React115.createElement("button", { key: a.value, className: "dropdown-item", onClick: () => setAlignmentVal(a.value) }, a.icon, " ", a.label))))
+    ), showModal && /* @__PURE__ */ React115.createElement(
       VideoPropertiesModal,
       {
         editor,
@@ -11812,22 +12473,22 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
-import React115, { useState as useState33, useEffect as useEffect27, useRef as useRef29 } from "react";
+import React116, { useState as useState34, useEffect as useEffect28, useRef as useRef31 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-var IconAddRowBefore = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React115.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
-var IconAddRowAfter = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React115.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
-var IconAddColBefore = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
-var IconAddColAfter = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
-var IconDeleteRow = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React115.createElement("path", { d: "M8 14.5h8v2H8z" }));
-var IconDeleteCol = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M14 9.5v6h2v-6z" }));
-var IconDeleteTable = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
-var IconMergeCells = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ React115.createElement("path", { d: "M8 15h8v2H8z" }));
-var IconSplitCell = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
-var IconToggleHeader = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React115.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
+var IconAddRowBefore = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React116.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
+var IconAddRowAfter = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React116.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
+var IconAddColBefore = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React116.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
+var IconAddColAfter = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React116.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
+var IconDeleteRow = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React116.createElement("path", { d: "M8 14.5h8v2H8z" }));
+var IconDeleteCol = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React116.createElement("path", { d: "M14 9.5v6h2v-6z" }));
+var IconDeleteTable = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ React116.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
+var IconMergeCells = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ React116.createElement("path", { d: "M8 15h8v2H8z" }));
+var IconSplitCell = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
+var IconToggleHeader = () => /* @__PURE__ */ React116.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React116.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React116.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
 var TableToolbar = ({ editor }) => {
-  const [pos, setPos] = useState33(null);
-  const toolbarRef = useRef29(null);
-  useEffect27(() => {
+  const [pos, setPos] = useState34(null);
+  const toolbarRef = useRef31(null);
+  useEffect28(() => {
     if (!editor) return;
     const update = () => {
       if (!editor.isActive("table")) {
@@ -11871,7 +12532,7 @@ var TableToolbar = ({ editor }) => {
   const canSplit = editor.can().splitCell();
   const prevent = (e) => e.preventDefault();
   return createPortal7(
-    /* @__PURE__ */ React115.createElement(
+    /* @__PURE__ */ React116.createElement(
       "div",
       {
         ref: toolbarRef,
@@ -11879,19 +12540,19 @@ var TableToolbar = ({ editor }) => {
         style: { top: pos.top, left: pos.left },
         onMouseDown: prevent
       },
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ React115.createElement(IconAddRowBefore, null))),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ React115.createElement(IconAddRowAfter, null))),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ React115.createElement(IconDeleteRow, null))),
-      /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ React115.createElement(IconAddColBefore, null))),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ React115.createElement(IconAddColAfter, null))),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ React115.createElement(IconDeleteCol, null))),
-      /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ React115.createElement(IconMergeCells, null))),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ React115.createElement(IconSplitCell, null))),
-      /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ React115.createElement(IconToggleHeader, null))),
-      /* @__PURE__ */ React115.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ React115.createElement(IconDeleteTable, null)))
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Insert row above", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowBefore().run() }, /* @__PURE__ */ React116.createElement(IconAddRowBefore, null))),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Insert row below", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addRowAfter().run() }, /* @__PURE__ */ React116.createElement(IconAddRowAfter, null))),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Delete row", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteRow().run() }, /* @__PURE__ */ React116.createElement(IconDeleteRow, null))),
+      /* @__PURE__ */ React116.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Insert column left", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnBefore().run() }, /* @__PURE__ */ React116.createElement(IconAddColBefore, null))),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Insert column right", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().addColumnAfter().run() }, /* @__PURE__ */ React116.createElement(IconAddColAfter, null))),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Delete column", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteColumn().run() }, /* @__PURE__ */ React116.createElement(IconDeleteCol, null))),
+      /* @__PURE__ */ React116.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Merge cells", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().mergeCells().run(), disabled: !canMerge }, /* @__PURE__ */ React116.createElement(IconMergeCells, null))),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Split cell", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn", onClick: () => editor.chain().focus().splitCell().run(), disabled: !canSplit }, /* @__PURE__ */ React116.createElement(IconSplitCell, null))),
+      /* @__PURE__ */ React116.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Toggle header row", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`, onClick: () => editor.chain().focus().toggleHeaderRow().run() }, /* @__PURE__ */ React116.createElement(IconToggleHeader, null))),
+      /* @__PURE__ */ React116.createElement(Tooltip, { title: "Delete table", placement: "top" }, /* @__PURE__ */ React116.createElement("button", { className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger", onClick: () => editor.chain().focus().deleteTable().run() }, /* @__PURE__ */ React116.createElement(IconDeleteTable, null)))
     ),
     document.body
   );
@@ -12066,12 +12727,12 @@ var RufousTextEditor = ({
     return visible;
   }, [buttons, variant, hideButtons]);
   const mentionSuggestion = useMemo4(() => createMentionSuggestion(mentions), [mentions]);
-  const onChangeRef = useRef30(onChange);
-  const onBlurRef = useRef30(onBlur);
-  useEffect28(() => {
+  const onChangeRef = useRef32(onChange);
+  const onBlurRef = useRef32(onBlur);
+  useEffect29(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  useEffect28(() => {
+  useEffect29(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
   const isEditable = editable && !disabled;
@@ -12172,8 +12833,8 @@ var RufousTextEditor = ({
       onChangeRef.current?.(e.getHTML(), e.getJSON());
     }
   });
-  const wrapperRef = useRef30(null);
-  useEffect28(() => {
+  const wrapperRef = useRef32(null);
+  useEffect29(() => {
     if (!editor) return;
     let blurTimer = null;
     const handler = ({ event }) => {
@@ -12191,15 +12852,15 @@ var RufousTextEditor = ({
       if (blurTimer) clearTimeout(blurTimer);
     };
   }, [editor]);
-  const setLinkRef = useRef30(null);
-  const [linkModalOpen, setLinkModalOpen] = useState34(false);
-  const [linkUrl, setLinkUrl] = useState34("");
-  const [linkText, setLinkText] = useState34("");
-  const [linkClassName, setLinkClassName] = useState34("");
-  const [linkNewTab, setLinkNewTab] = useState34(true);
-  const [linkNoFollow, setLinkNoFollow] = useState34(true);
-  const [linkSelection, setLinkSelection] = useState34(null);
-  const setLink = useCallback13(() => {
+  const setLinkRef = useRef32(null);
+  const [linkModalOpen, setLinkModalOpen] = useState35(false);
+  const [linkUrl, setLinkUrl] = useState35("");
+  const [linkText, setLinkText] = useState35("");
+  const [linkClassName, setLinkClassName] = useState35("");
+  const [linkNewTab, setLinkNewTab] = useState35(true);
+  const [linkNoFollow, setLinkNoFollow] = useState35(true);
+  const [linkSelection, setLinkSelection] = useState35(null);
+  const setLink = useCallback15(() => {
     if (!editor) return;
     const attrs = editor.getAttributes("link");
     const previousUrl = attrs.href || "";
@@ -12236,10 +12897,10 @@ var RufousTextEditor = ({
     setLinkSelection({ from, to });
     setLinkModalOpen(true);
   }, [editor]);
-  useEffect28(() => {
+  useEffect29(() => {
     setLinkRef.current = setLink;
   }, [setLink]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!editor?.view) return;
     const handleKeyDown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "k") {
@@ -12271,7 +12932,7 @@ var RufousTextEditor = ({
       editor.view.dom.removeEventListener("keydown", handleKeyDown);
     };
   }, [editor]);
-  const handleLinkSubmit = useCallback13(() => {
+  const handleLinkSubmit = useCallback15(() => {
     if (!editor || !linkSelection) return;
     editor.chain().focus().setTextSelection(linkSelection).run();
     if (linkUrl === "") {
@@ -12307,7 +12968,7 @@ var RufousTextEditor = ({
     setLinkClassName("");
     setLinkSelection(null);
   }, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
-  const handleLinkRemove = useCallback13(() => {
+  const handleLinkRemove = useCallback15(() => {
     if (!editor || !linkSelection) return;
     editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
     setLinkModalOpen(false);
@@ -12316,7 +12977,7 @@ var RufousTextEditor = ({
     setLinkClassName("");
     setLinkSelection(null);
   }, [editor, linkSelection]);
-  const handleLinkCancel = useCallback13(() => {
+  const handleLinkCancel = useCallback15(() => {
     setLinkModalOpen(false);
     setLinkUrl("");
     setLinkText("");
@@ -12324,21 +12985,21 @@ var RufousTextEditor = ({
     setLinkSelection(null);
     editor?.chain().focus().run();
   }, [editor]);
-  const [saveStatus, setSaveStatus] = useState34("");
-  const handleSave = useCallback13(() => {
+  const [saveStatus, setSaveStatus] = useState35("");
+  const handleSave = useCallback15(() => {
     if (!editor || !onSaveProp) return;
     onSaveProp(editor.getHTML(), editor.getJSON());
     setSaveStatus("Saved!");
     setTimeout(() => setSaveStatus(""), 2e3);
   }, [editor, onSaveProp]);
-  const handleExport = useCallback13(() => {
+  const handleExport = useCallback15(() => {
     if (!editor || !onExportProp) return;
     onExportProp(editor.getHTML(), editor.getJSON());
   }, [editor, onExportProp]);
   const providerValue = useMemo4(() => ({ editor }), [editor]);
-  const [isFullscreen, setIsFullscreen] = useState34(false);
-  const toggleFullscreen = useCallback13(() => setIsFullscreen((prev) => !prev), []);
-  const wrapperJsx = /* @__PURE__ */ React116.createElement(
+  const [isFullscreen, setIsFullscreen] = useState35(false);
+  const toggleFullscreen = useCallback15(() => setIsFullscreen((prev) => !prev), []);
+  const wrapperJsx = /* @__PURE__ */ React117.createElement(
     "div",
     {
       ref: wrapperRef,
@@ -12349,7 +13010,7 @@ var RufousTextEditor = ({
         ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
       }
     },
-    /* @__PURE__ */ React116.createElement(EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ React116.createElement(
+    /* @__PURE__ */ React117.createElement(EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ React117.createElement(
       Toolbar_default,
       {
         editor,
@@ -12364,7 +13025,7 @@ var RufousTextEditor = ({
         isFullscreen,
         onToggleFullscreen: toggleFullscreen
       }
-    ), /* @__PURE__ */ React116.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React116.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React116.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ React116.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ React116.createElement(
+    ), /* @__PURE__ */ React117.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React117.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React117.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ React117.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ React117.createElement(
       BubbleMenu,
       {
         editor,
@@ -12382,31 +13043,31 @@ var RufousTextEditor = ({
           }
         }
       },
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBold().run(),
           className: editor?.isActive("bold") ? "is-active" : ""
         },
-        /* @__PURE__ */ React116.createElement("strong", null, "B")
+        /* @__PURE__ */ React117.createElement("strong", null, "B")
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleItalic().run(),
           className: editor?.isActive("italic") ? "is-active" : ""
         },
-        /* @__PURE__ */ React116.createElement("em", null, "I")
+        /* @__PURE__ */ React117.createElement("em", null, "I")
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleStrike().run(),
           className: editor?.isActive("strike") ? "is-active" : ""
         },
-        /* @__PURE__ */ React116.createElement("s", null, "S")
+        /* @__PURE__ */ React117.createElement("s", null, "S")
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleCode().run(),
@@ -12414,7 +13075,7 @@ var RufousTextEditor = ({
         },
         "</>"
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: setLink,
@@ -12422,7 +13083,7 @@ var RufousTextEditor = ({
         },
         "\u{1F517}"
       )
-    ), editor && /* @__PURE__ */ React116.createElement(
+    ), editor && /* @__PURE__ */ React117.createElement(
       FloatingMenu,
       {
         editor,
@@ -12437,7 +13098,7 @@ var RufousTextEditor = ({
           }
         }
       },
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
@@ -12445,7 +13106,7 @@ var RufousTextEditor = ({
         },
         "H1"
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
@@ -12453,7 +13114,7 @@ var RufousTextEditor = ({
         },
         "H2"
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBulletList().run(),
@@ -12461,7 +13122,7 @@ var RufousTextEditor = ({
         },
         "\u2022 List"
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleOrderedList().run(),
@@ -12469,7 +13130,7 @@ var RufousTextEditor = ({
         },
         "1. List"
       ),
-      /* @__PURE__ */ React116.createElement(
+      /* @__PURE__ */ React117.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBlockquote().run(),
@@ -12477,8 +13138,8 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ React116.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React116.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React116.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React116.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React116.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React116.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React116.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal8(
-      /* @__PURE__ */ React116.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React116.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React116.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React116.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React116.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React116.createElement(
+    ), /* @__PURE__ */ React117.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React117.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React117.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React117.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React117.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React117.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React117.createElement(React117.Fragment, null, /* @__PURE__ */ React117.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React117.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal8(
+      /* @__PURE__ */ React117.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React117.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React117.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React117.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React117.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React117.createElement(
         "input",
         {
           type: "url",
@@ -12491,7 +13152,7 @@ var RufousTextEditor = ({
           placeholder: "https://example.com",
           autoFocus: true
         }
-      )), /* @__PURE__ */ React116.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React116.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React116.createElement(
+      )), /* @__PURE__ */ React117.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React117.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React117.createElement(
         "input",
         {
           type: "text",
@@ -12503,24 +13164,24 @@ var RufousTextEditor = ({
           },
           placeholder: "Link text"
         }
-      )), /* @__PURE__ */ React116.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React116.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React116.createElement(
+      )), /* @__PURE__ */ React117.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React117.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React117.createElement(
         "input",
         {
           type: "checkbox",
           checked: linkNewTab,
           onChange: (e) => setLinkNewTab(e.target.checked)
         }
-      ), "Open in new tab"), /* @__PURE__ */ React116.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React116.createElement(
+      ), "Open in new tab"), /* @__PURE__ */ React117.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React117.createElement(
         "input",
         {
           type: "checkbox",
           checked: linkNoFollow,
           onChange: (e) => setLinkNoFollow(e.target.checked)
         }
-      ), "No follow"))), /* @__PURE__ */ React116.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React116.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React116.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
+      ), "No follow"))), /* @__PURE__ */ React117.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React117.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React117.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
       document.body
     )),
-    helperText && /* @__PURE__ */ React116.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
+    helperText && /* @__PURE__ */ React117.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
   );
   return isFullscreen ? createPortal8(wrapperJsx, document.body) : wrapperJsx;
 };
@@ -12531,7 +13192,7 @@ var RufousTextContent = ({ content, className, style, sx }) => {
     transformedContent = transformLegacyTodos(transformedContent);
   } catch {
   }
-  return /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React117.createElement(
     "div",
     {
       className: `rf-rte-content ${sxClass} ${className || ""}`,
@@ -12669,6 +13330,7 @@ export {
   ToggleButtonGroup,
   Tooltip,
   trashIcon_default as TrashIcon,
+  TreeSelect,
   Typography,
   unArchivedIcon_default as UnArchivedIcon,
   unsubscribeIcon_default as UnsubscribeIcon,