@rufous/ui 0.2.66 → 0.2.68

package/dist/main.cjs

@@ -3540,6 +3540,7 @@ DateRangeField.displayName = "DateRangeField";
 
 // lib/TextFields/Autocomplete.tsx
 var import_react21 = __toESM(require("react"), 1);
+var import_react_dom2 = __toESM(require("react-dom"), 1);
 var ChevronDownIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ import_react21.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react21.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
 var CheckIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
@@ -3593,11 +3594,21 @@ function AutocompleteInner(props, _ref) {
   const [open, setOpen] = (0, import_react21.useState)(false);
   const [inputStr, setInputStr] = (0, import_react21.useState)("");
   const [focusedIdx, setFocusedIdx] = (0, import_react21.useState)(-1);
+  const [popupStyle, setPopupStyle] = (0, import_react21.useState)({});
   const containerRef = (0, import_react21.useRef)(null);
   const inputRef = (0, import_react21.useRef)(null);
   const listRef = (0, import_react21.useRef)(null);
   const inputId = (0, import_react21.useRef)(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
+  const calcPopupStyle = (0, import_react21.useCallback)(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPopupStyle({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    });
+  }, []);
   const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
   const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
   const isEqual = (0, import_react21.useCallback)(
@@ -3631,12 +3642,13 @@ 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 = () => {
+  const openPopup = (0, import_react21.useCallback)(() => {
     if (disabled) return;
+    calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
     onOpen?.();
-  };
+  }, [disabled, calcPopupStyle, onOpen]);
   const closePopup = (0, import_react21.useCallback)(() => {
     setOpen(false);
     setFocusedIdx(-1);
@@ -3648,14 +3660,20 @@ function AutocompleteInner(props, _ref) {
   }, [freeSolo, multiple, value, onInputChange, onClose]);
   (0, import_react21.useEffect)(() => {
     if (!open) return;
-    const handler = (e) => {
+    const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         closePopup();
       }
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, closePopup]);
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("scroll", calcPopupStyle, true);
+    window.addEventListener("resize", calcPopupStyle);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("scroll", calcPopupStyle, true);
+      window.removeEventListener("resize", calcPopupStyle);
+    };
+  }, [open, closePopup, calcPopupStyle]);
   (0, import_react21.useEffect)(() => {
     if (controlledInput !== void 0) return;
     if (!multiple) {
@@ -3840,34 +3858,37 @@ function AutocompleteInner(props, _ref) {
       },
       /* @__PURE__ */ import_react21.default.createElement(ChevronDownIcon, null)
     ))
-  ), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__popup", role: "presentation" }, loading ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react21.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
-    // Grouped render
-    (() => {
-      const rendered = [];
-      let groupItems = [];
-      let currentGroup = "";
-      flatEntries.forEach((entry, ei) => {
-        if (entry.kind === "group") {
-          if (groupItems.length > 0) {
+  ), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && import_react_dom2.default.createPortal(
+    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react21.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
+      // Grouped render
+      (() => {
+        const rendered = [];
+        let groupItems = [];
+        let currentGroup = "";
+        flatEntries.forEach((entry, ei) => {
+          if (entry.kind === "group") {
+            if (groupItems.length > 0) {
+              rendered.push(
+                /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+              );
+              groupItems = [];
+            }
+            currentGroup = entry.label;
+          } else {
+            const { option, flatIdx } = entry;
+            groupItems.push(renderOptionItem(option, flatIdx));
+          }
+          if (ei === flatEntries.length - 1 && groupItems.length > 0) {
             rendered.push(
               /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
             );
-            groupItems = [];
           }
-          currentGroup = entry.label;
-        } else {
-          const { option, flatIdx } = entry;
-          groupItems.push(renderOptionItem(option, flatIdx));
-        }
-        if (ei === flatEntries.length - 1 && groupItems.length > 0) {
-          rendered.push(
-            /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
-          );
-        }
-      });
-      return rendered;
-    })()
-  ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))));
+        });
+        return rendered;
+      })()
+    ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))),
+    document.body
+  ));
   function renderOptionItem(option, flatIdx) {
     const selected = isSelected(option);
     const focused = focusedIdx === flatIdx;
@@ -4558,6 +4579,7 @@ function DataGrid({
 
 // lib/Select/Select.tsx
 var import_react23 = __toESM(require("react"), 1);
+var import_react_dom3 = __toESM(require("react-dom"), 1);
 var ChevronDownIcon2 = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react23.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CheckIcon2 = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react23.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function normaliseOptions(options) {
@@ -4584,10 +4606,20 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
   } = props;
   const [open, setOpen] = (0, import_react23.useState)(false);
   const [focusedIdx, setFocusedIdx] = (0, import_react23.useState)(-1);
+  const [popupStyle, setPopupStyle] = (0, import_react23.useState)({});
   const containerRef = (0, import_react23.useRef)(null);
   const listRef = (0, import_react23.useRef)(null);
   const inputId = (0, import_react23.useRef)(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
+  const calcPopupStyle = (0, import_react23.useCallback)(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPopupStyle({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    });
+  }, []);
   const options = normaliseOptions(rawOptions);
   const selectedValues = multiple ? Array.isArray(value) ? value : value != null ? [value] : [] : value != null ? [value] : [];
   const isSelected = (0, import_react23.useCallback)(
@@ -4599,9 +4631,10 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
   const isFloating = Boolean(open || hasValue);
   const openPopup = (0, import_react23.useCallback)(() => {
     if (disabled) return;
+    calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
-  }, [disabled]);
+  }, [disabled, calcPopupStyle]);
   const closePopup = (0, import_react23.useCallback)(() => {
     setOpen(false);
     setFocusedIdx(-1);
@@ -4612,14 +4645,20 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
   }, [open, openPopup, closePopup]);
   (0, import_react23.useEffect)(() => {
     if (!open) return;
-    const handler = (e) => {
+    const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         closePopup();
       }
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, closePopup]);
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("scroll", calcPopupStyle, true);
+    window.addEventListener("resize", calcPopupStyle);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("scroll", calcPopupStyle, true);
+      window.removeEventListener("resize", calcPopupStyle);
+    };
+  }, [open, closePopup, calcPopupStyle]);
   const selectOption = (0, import_react23.useCallback)((opt) => {
     if (opt.disabled) return;
     if (multiple) {
@@ -4738,32 +4777,35 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
       /* @__PURE__ */ import_react23.default.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(ChevronDownIcon2, null))
     ),
     helperText && /* @__PURE__ */ import_react23.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
-    open && !disabled && /* @__PURE__ */ import_react23.default.createElement("div", { className: "rf-select__popup", role: "presentation" }, /* @__PURE__ */ import_react23.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
-      const selected = isSelected(opt.value);
-      const focused = focusedIdx === idx;
-      return /* @__PURE__ */ import_react23.default.createElement(
-        "li",
-        {
-          key: opt.value,
-          "data-idx": idx,
-          role: "option",
-          "aria-selected": selected,
-          "aria-disabled": opt.disabled,
-          className: [
-            "rf-select__option",
-            selected ? "rf-select__option--selected" : "",
-            focused ? "rf-select__option--focused" : "",
-            opt.disabled ? "rf-select__option--disabled" : ""
-          ].filter(Boolean).join(" "),
-          onMouseEnter: () => setFocusedIdx(idx),
-          onMouseLeave: () => setFocusedIdx(-1),
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => selectOption(opt)
-        },
-        /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
-        /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(CheckIcon2, null))
-      );
-    })))
+    open && !disabled && import_react_dom3.default.createPortal(
+      /* @__PURE__ */ import_react23.default.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ import_react23.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+        const selected = isSelected(opt.value);
+        const focused = focusedIdx === idx;
+        return /* @__PURE__ */ import_react23.default.createElement(
+          "li",
+          {
+            key: opt.value,
+            "data-idx": idx,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": opt.disabled,
+            className: [
+              "rf-select__option",
+              selected ? "rf-select__option--selected" : "",
+              focused ? "rf-select__option--focused" : "",
+              opt.disabled ? "rf-select__option--disabled" : ""
+            ].filter(Boolean).join(" "),
+            onMouseEnter: () => setFocusedIdx(idx),
+            onMouseLeave: () => setFocusedIdx(-1),
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => selectOption(opt)
+          },
+          /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
+          /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(CheckIcon2, null))
+        );
+      }))),
+      document.body
+    )
   );
 });
 Select.displayName = "Select";
@@ -5921,7 +5963,7 @@ Skeleton.displayName = "Skeleton";
 
 // lib/Tooltip/Tooltip.tsx
 var import_react35 = __toESM(require("react"), 1);
-var import_react_dom2 = __toESM(require("react-dom"), 1);
+var import_react_dom4 = __toESM(require("react-dom"), 1);
 var GAP = 8;
 function computePosition(anchor, tooltip, placement) {
   const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
@@ -6140,7 +6182,7 @@ var Tooltip = ({
       ...childProps
     },
     import_react35.default.cloneElement(children)
-  ), import_react_dom2.default.createPortal(tooltipElement, document.body));
+  ), import_react_dom4.default.createPortal(tooltipElement, document.body));
 };
 Tooltip.displayName = "Tooltip";
 
@@ -7027,7 +7069,7 @@ Stepper.displayName = "Stepper";
 
 // lib/Menu/Menu.tsx
 var import_react40 = __toESM(require("react"), 1);
-var import_react_dom3 = __toESM(require("react-dom"), 1);
+var import_react_dom5 = __toESM(require("react-dom"), 1);
 var MenuDivider = () => /* @__PURE__ */ import_react40.default.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
 MenuDivider.displayName = "MenuDivider";
 var MenuItem = ({
@@ -7180,13 +7222,13 @@ var Menu = ({
     },
     children
   ));
-  return import_react_dom3.default.createPortal(portal, document.body);
+  return import_react_dom5.default.createPortal(portal, document.body);
 };
 Menu.displayName = "Menu";
 
 // lib/Drawer/Drawer.tsx
 var import_react41 = __toESM(require("react"), 1);
-var import_react_dom4 = __toESM(require("react-dom"), 1);
+var import_react_dom6 = __toESM(require("react-dom"), 1);
 var Drawer = ({
   open,
   onClose,
@@ -7286,7 +7328,7 @@ var Drawer = ({
     },
     children
   ));
-  return import_react_dom4.default.createPortal(
+  return import_react_dom6.default.createPortal(
     /* @__PURE__ */ import_react41.default.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -7295,7 +7337,7 @@ Drawer.displayName = "Drawer";
 
 // lib/Snackbar/Snackbar.tsx
 var import_react42 = __toESM(require("react"), 1);
-var import_react_dom5 = __toESM(require("react-dom"), 1);
+var import_react_dom7 = __toESM(require("react-dom"), 1);
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -7400,7 +7442,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return import_react_dom5.default.createPortal(snackbarEl, document.body);
+  return import_react_dom7.default.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -7454,7 +7496,7 @@ Link.displayName = "Link";
 
 // lib/Popper/Popper.tsx
 var import_react44 = __toESM(require("react"), 1);
-var import_react_dom6 = __toESM(require("react-dom"), 1);
+var import_react_dom8 = __toESM(require("react-dom"), 1);
 function computePopperPosition(anchorRect, popperRect, placement, offset2 = [0, 8]) {
   const [skid, dist] = offset2;
   let top = 0;
@@ -7597,13 +7639,13 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, popper);
   }
-  return import_react_dom6.default.createPortal(popper, document.body);
+  return import_react_dom8.default.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
 // lib/Popover/Popover.tsx
 var import_react45 = __toESM(require("react"), 1);
-var import_react_dom7 = __toESM(require("react-dom"), 1);
+var import_react_dom9 = __toESM(require("react-dom"), 1);
 function getPoint(rect, v, h) {
   const x = h === "left" ? rect.left : h === "center" ? rect.left + rect.width / 2 : rect.right;
   const y = v === "top" ? rect.top : v === "center" ? rect.top + rect.height / 2 : rect.bottom;
@@ -7706,7 +7748,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react45.default.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return import_react_dom7.default.createPortal(
+  return import_react_dom9.default.createPortal(
     /* @__PURE__ */ import_react45.default.createElement("div", { className: rootClasses, style }, content),
     document.body
   );
@@ -8356,9 +8398,9 @@ var PhoneField = (0, import_react48.forwardRef)(function PhoneField2(props, ref)
 PhoneField.displayName = "PhoneField";
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
-var import_react58 = __toESM(require("react"), 1);
-var import_react_dom13 = require("react-dom");
-var import_react59 = require("@tiptap/react");
+var import_react59 = __toESM(require("react"), 1);
+var import_react_dom16 = require("react-dom");
+var import_react60 = require("@tiptap/react");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
 var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
 var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
@@ -8479,11 +8521,11 @@ function createMentionSuggestion(users) {
 
 // lib/RufousTextEditor/Toolbar.tsx
 var import_react55 = __toESM(require("react"), 1);
-var import_react_dom10 = require("react-dom");
+var import_react_dom12 = require("react-dom");
 
 // lib/RufousTextEditor/TextToSpeech.tsx
 var import_react51 = __toESM(require("react"), 1);
-var TextToSpeech = ({ editor, onTextToSpeech }) => {
+var TextToSpeech = (0, import_react51.forwardRef)(({ editor, onTextToSpeech }, ref) => {
   const [speaking, setSpeaking] = (0, import_react51.useState)(false);
   const [paused, setPaused] = (0, import_react51.useState)(false);
   const [voices, setVoices] = (0, import_react51.useState)([]);
@@ -8586,6 +8628,7 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
     setSpeaking(false);
     setPaused(false);
   }, []);
+  (0, import_react51.useImperativeHandle)(ref, () => ({ stop: handleStop }), [handleStop]);
   return /* @__PURE__ */ import_react51.default.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ import_react51.default.createElement(
     "button",
     {
@@ -8623,12 +8666,12 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
     handleSpeak();
     setShowPanel(false);
   } }, "\u25B6 Speak")), speaking && /* @__PURE__ */ import_react51.default.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ import_react51.default.createElement("button", { className: "toolbar-btn", onClick: handleResume, title: "Resume" }, "\u25B6") : /* @__PURE__ */ import_react51.default.createElement("button", { className: "toolbar-btn", onClick: handlePause, title: "Pause" }, "\u275A\u275A"), /* @__PURE__ */ import_react51.default.createElement("button", { className: "toolbar-btn", onClick: handleStop, title: "Stop" }, "\u25A0")));
-};
+});
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
 var import_react52 = __toESM(require("react"), 1);
-var SpeechToText = ({ editor, onSpeechToText }) => {
+var SpeechToText = (0, import_react52.forwardRef)(({ editor, onSpeechToText }, ref) => {
   const [listening, setListening] = (0, import_react52.useState)(false);
   const [showPanel, setShowPanel] = (0, import_react52.useState)(false);
   const [language, setLanguage] = (0, import_react52.useState)("en-US");
@@ -8739,6 +8782,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
     setListening(false);
     setInterim("");
   }, []);
+  (0, import_react52.useImperativeHandle)(ref, () => ({ stop: stopListening }), [stopListening]);
   if (!supported) {
     return /* @__PURE__ */ import_react52.default.createElement("button", { className: "toolbar-btn", disabled: true, title: "Speech recognition not supported in this browser" }, "\u{1F3A4}");
   }
@@ -8785,12 +8829,12 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
     },
     LANGUAGES2.map((l) => /* @__PURE__ */ import_react52.default.createElement("option", { key: l.code, value: l.code }, l.label))
   ), /* @__PURE__ */ import_react52.default.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ import_react52.default.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ import_react52.default.createElement("div", { className: "stt-interim" }, interim));
-};
+});
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
 var import_react53 = __toESM(require("react"), 1);
-var import_react_dom8 = require("react-dom");
+var import_react_dom10 = require("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." },
   { id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
@@ -8947,7 +8991,7 @@ var AICommands = ({ editor, onAICommand }) => {
       onClick: () => handleCommandSelect(cmd)
     },
     cmd.label
-  ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom8.createPortal)(
+  ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom10.createPortal)(
     /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react53.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react53.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react53.default.createElement(
       "textarea",
       {
@@ -8998,7 +9042,7 @@ var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
 var import_react54 = __toESM(require("react"), 1);
-var import_react_dom9 = require("react-dom");
+var import_react_dom11 = require("react-dom");
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
   { code: "sq", name: "Albanian" },
@@ -9189,7 +9233,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
       setTranslating(false);
     }
   };
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom11.createPortal)(
     /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react54.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react54.default.createElement(
       "input",
       {
@@ -10099,7 +10143,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     },
     trigger.label,
     /* @__PURE__ */ import_react55.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && (0, import_react_dom10.createPortal)(
+  ), open && (0, import_react_dom12.createPortal)(
     /* @__PURE__ */ import_react55.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react55.default.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
   ));
@@ -10356,10 +10400,11 @@ var ColorPickerPanel = ({ editor, onClose }) => {
     }
   ))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react55.default.createElement("button", { className: "color-picker-remove", onClick: removeColor, title: "Remove color" }, "\u2713")));
 };
-var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons }) => {
+var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
   const [, setEditorState] = (0, import_react55.useState)(0);
-  const [isFullscreen, setIsFullscreen] = (0, import_react55.useState)(false);
   const [todoEnabled, setTodoEnabled] = (0, import_react55.useState)(false);
+  const ttsRef = (0, import_react55.useRef)(null);
+  const sttRef = (0, import_react55.useRef)(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
   (0, import_react55.useEffect)(() => {
     if (!editor) return;
@@ -10367,16 +10412,6 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     editor.on("transaction", onTransaction);
     return () => editor.off("transaction", onTransaction);
   }, [editor]);
-  const toggleFullscreen = (0, import_react55.useCallback)(() => {
-    const wrapper = document.querySelector(".editor-wrapper");
-    if (!wrapper) return;
-    if (!isFullscreen) {
-      wrapper.classList.add("fullscreen");
-    } else {
-      wrapper.classList.remove("fullscreen");
-    }
-    setIsFullscreen(!isFullscreen);
-  }, [isFullscreen]);
   const insertSpecialChar = (0, import_react55.useCallback)((char) => {
     if (!editor) return;
     editor.chain().focus().insertContent(char).run();
@@ -10880,11 +10915,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     "button",
     {
       className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
-      onClick: toggleFullscreen,
+      onClick: onToggleFullscreen,
       title: "Toggle Fullscreen"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconFullscreen, null)
-  ), show("tts") && /* @__PURE__ */ import_react55.default.createElement(TextToSpeech_default, { editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react55.default.createElement(SpeechToText_default, { editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
+  ), show("tts") && /* @__PURE__ */ import_react55.default.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react55.default.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10978,7 +11013,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     "button",
     {
       className: "toolbar-btn btn-cross",
-      onClick: onClose,
+      onClick: () => {
+        try {
+          ttsRef.current?.stop();
+        } catch {
+        }
+        try {
+          sttRef.current?.stop();
+        } catch {
+        }
+        onClose();
+      },
       title: "Close"
     },
     /* @__PURE__ */ import_react55.default.createElement(closeIcon_default, { color: "#a81c08" })
@@ -11001,7 +11046,7 @@ var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
 var import_react56 = __toESM(require("react"), 1);
-var import_react_dom11 = require("react-dom");
+var import_react_dom13 = require("react-dom");
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11173,7 +11218,7 @@ var ImageToolbar = ({ editor }) => {
   }, [editor]);
   const node = editor?.state.selection.node;
   const isImage = node && node.type.name === "image";
-  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom11.createPortal)(
+  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom13.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11250,7 +11295,7 @@ var ImageToolbar = ({ editor }) => {
     );
     setShowVAlign(false);
   };
-  return (0, import_react_dom11.createPortal)(
+  return (0, import_react_dom13.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
@@ -11281,7 +11326,7 @@ var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
 var import_react57 = __toESM(require("react"), 1);
-var import_react_dom12 = require("react-dom");
+var import_react_dom14 = require("react-dom");
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11427,7 +11472,7 @@ var VideoToolbar = ({ editor }) => {
   const node = editor?.state.selection.node;
   const isVideo = node && VIDEO_TYPES.includes(node.type.name);
   const nodeType = node?.type.name;
-  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom12.createPortal)(
+  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom14.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11474,7 +11519,7 @@ var VideoToolbar = ({ editor }) => {
       })
     );
   };
-  return (0, import_react_dom12.createPortal)(
+  return (0, import_react_dom14.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
       "div",
       {
@@ -11520,6 +11565,175 @@ var VideoToolbar = ({ editor }) => {
 };
 var VideoToolbar_default = VideoToolbar;
 
+// lib/RufousTextEditor/TableToolbar.tsx
+var import_react58 = __toESM(require("react"), 1);
+var import_react_dom15 = require("react-dom");
+var IconAddRowBefore = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
+var IconAddRowAfter = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
+var IconAddColBefore = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
+var IconAddColAfter = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
+var IconDeleteRow = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement("path", { d: "M8 14.5h8v2H8z" }));
+var IconDeleteCol = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.createElement("path", { d: "M14 9.5v6h2v-6z" }));
+var IconDeleteTable = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.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__ */ import_react58.default.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__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ import_react58.default.createElement("path", { d: "M8 15h8v2H8z" }));
+var IconSplitCell = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
+var IconToggleHeader = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ import_react58.default.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
+var TableToolbar = ({ editor }) => {
+  const [pos, setPos] = (0, import_react58.useState)(null);
+  const toolbarRef = (0, import_react58.useRef)(null);
+  (0, import_react58.useEffect)(() => {
+    if (!editor) return;
+    const update = () => {
+      if (!editor.isActive("table")) {
+        setPos(null);
+        return;
+      }
+      try {
+        const { $from } = editor.state.selection;
+        let depth = $from.depth;
+        while (depth > 0) {
+          const node = $from.node(depth);
+          if (node.type.name === "table") {
+            const domNode = editor.view.nodeDOM($from.before(depth));
+            if (domNode) {
+              const tableEl = domNode.tagName === "TABLE" ? domNode : domNode.querySelector?.("table") || domNode;
+              const rect = tableEl.getBoundingClientRect();
+              setPos({
+                top: rect.top + window.scrollY - 40,
+                left: rect.left + window.scrollX
+              });
+            }
+            return;
+          }
+          depth--;
+        }
+        setPos(null);
+      } catch {
+        setPos(null);
+      }
+    };
+    editor.on("selectionUpdate", update);
+    editor.on("update", update);
+    update();
+    return () => {
+      editor.off("selectionUpdate", update);
+      editor.off("update", update);
+    };
+  }, [editor]);
+  if (!editor || !pos || !editor.isActive("table")) return null;
+  const canMerge = editor.can().mergeCells();
+  const canSplit = editor.can().splitCell();
+  const prevent = (e) => e.preventDefault();
+  return (0, import_react_dom15.createPortal)(
+    /* @__PURE__ */ import_react58.default.createElement(
+      "div",
+      {
+        ref: toolbarRef,
+        className: "rf-table-toolbar",
+        style: { top: pos.top, left: pos.left },
+        onMouseDown: prevent
+      },
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addRowBefore().run(),
+          title: "Insert row above"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconAddRowBefore, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addRowAfter().run(),
+          title: "Insert row below"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconAddRowAfter, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
+          onClick: () => editor.chain().focus().deleteRow().run(),
+          title: "Delete row"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconDeleteRow, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addColumnBefore().run(),
+          title: "Insert column left"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconAddColBefore, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addColumnAfter().run(),
+          title: "Insert column right"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconAddColAfter, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
+          onClick: () => editor.chain().focus().deleteColumn().run(),
+          title: "Delete column"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconDeleteCol, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().mergeCells().run(),
+          disabled: !canMerge,
+          title: "Merge cells"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconMergeCells, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().splitCell().run(),
+          disabled: !canSplit,
+          title: "Split cell"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconSplitCell, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`,
+          onClick: () => editor.chain().focus().toggleHeaderRow().run(),
+          title: "Toggle header row"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconToggleHeader, null)
+      ),
+      /* @__PURE__ */ import_react58.default.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
+          onClick: () => editor.chain().focus().deleteTable().run(),
+          title: "Delete table"
+        },
+        /* @__PURE__ */ import_react58.default.createElement(IconDeleteTable, null)
+      )
+    ),
+    document.body
+  );
+};
+var TableToolbar_default = TableToolbar;
+
 // lib/RufousTextEditor/legacyTodoTransform.ts
 var IMAGE_TO_STATUS = {
   "todo-blank.svg": "todo",
@@ -11679,7 +11893,7 @@ var RufousTextEditor = ({
   sx
 }) => {
   const sxClass = useSx(sx);
-  const toolbarButtons = (0, import_react58.useMemo)(() => {
+  const toolbarButtons = (0, import_react59.useMemo)(() => {
     const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
     const visible = new Set(list.filter((b) => b !== "|"));
     if (hideButtons) {
@@ -11687,17 +11901,17 @@ var RufousTextEditor = ({
     }
     return visible;
   }, [buttons, variant, hideButtons]);
-  const mentionSuggestion = (0, import_react58.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
-  const onChangeRef = (0, import_react58.useRef)(onChange);
-  const onBlurRef = (0, import_react58.useRef)(onBlur);
-  (0, import_react58.useEffect)(() => {
+  const mentionSuggestion = (0, import_react59.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
+  const onChangeRef = (0, import_react59.useRef)(onChange);
+  const onBlurRef = (0, import_react59.useRef)(onBlur);
+  (0, import_react59.useEffect)(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
   const isEditable = editable && !disabled;
-  const editor = (0, import_react59.useEditor)({
+  const editor = (0, import_react60.useEditor)({
     editable: isEditable,
     extensions: [
       import_starter_kit.default,
@@ -11724,7 +11938,9 @@ var RufousTextEditor = ({
         multicolor: true
       }),
       import_extension_table.default.configure({
-        resizable: true
+        resizable: true,
+        cellMinWidth: 80,
+        lastColumnResizable: true
       }),
       import_extension_table_row.default,
       import_extension_table_cell.default,
@@ -11792,8 +12008,8 @@ var RufousTextEditor = ({
       onChangeRef.current?.(e.getHTML(), e.getJSON());
     }
   });
-  const wrapperRef = (0, import_react58.useRef)(null);
-  (0, import_react58.useEffect)(() => {
+  const wrapperRef = (0, import_react59.useRef)(null);
+  (0, import_react59.useEffect)(() => {
     if (!editor) return;
     let blurTimer = null;
     const handler = ({ event }) => {
@@ -11811,15 +12027,15 @@ var RufousTextEditor = ({
       if (blurTimer) clearTimeout(blurTimer);
     };
   }, [editor]);
-  const setLinkRef = (0, import_react58.useRef)(null);
-  const [linkModalOpen, setLinkModalOpen] = (0, import_react58.useState)(false);
-  const [linkUrl, setLinkUrl] = (0, import_react58.useState)("");
-  const [linkText, setLinkText] = (0, import_react58.useState)("");
-  const [linkClassName, setLinkClassName] = (0, import_react58.useState)("");
-  const [linkNewTab, setLinkNewTab] = (0, import_react58.useState)(true);
-  const [linkNoFollow, setLinkNoFollow] = (0, import_react58.useState)(true);
-  const [linkSelection, setLinkSelection] = (0, import_react58.useState)(null);
-  const setLink = (0, import_react58.useCallback)(() => {
+  const setLinkRef = (0, import_react59.useRef)(null);
+  const [linkModalOpen, setLinkModalOpen] = (0, import_react59.useState)(false);
+  const [linkUrl, setLinkUrl] = (0, import_react59.useState)("");
+  const [linkText, setLinkText] = (0, import_react59.useState)("");
+  const [linkClassName, setLinkClassName] = (0, import_react59.useState)("");
+  const [linkNewTab, setLinkNewTab] = (0, import_react59.useState)(true);
+  const [linkNoFollow, setLinkNoFollow] = (0, import_react59.useState)(true);
+  const [linkSelection, setLinkSelection] = (0, import_react59.useState)(null);
+  const setLink = (0, import_react59.useCallback)(() => {
     if (!editor) return;
     const attrs = editor.getAttributes("link");
     const previousUrl = attrs.href || "";
@@ -11856,10 +12072,10 @@ var RufousTextEditor = ({
     setLinkSelection({ from, to });
     setLinkModalOpen(true);
   }, [editor]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     setLinkRef.current = setLink;
   }, [setLink]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!editor?.view) return;
     const handleKeyDown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "k") {
@@ -11891,7 +12107,7 @@ var RufousTextEditor = ({
       editor.view.dom.removeEventListener("keydown", handleKeyDown);
     };
   }, [editor]);
-  const handleLinkSubmit = (0, import_react58.useCallback)(() => {
+  const handleLinkSubmit = (0, import_react59.useCallback)(() => {
     if (!editor || !linkSelection) return;
     editor.chain().focus().setTextSelection(linkSelection).run();
     if (linkUrl === "") {
@@ -11927,7 +12143,7 @@ var RufousTextEditor = ({
     setLinkClassName("");
     setLinkSelection(null);
   }, [editor, linkUrl, linkText, linkClassName, linkNewTab, linkNoFollow, linkSelection]);
-  const handleLinkRemove = (0, import_react58.useCallback)(() => {
+  const handleLinkRemove = (0, import_react59.useCallback)(() => {
     if (!editor || !linkSelection) return;
     editor.chain().focus().setTextSelection(linkSelection).extendMarkRange("link").unsetLink().run();
     setLinkModalOpen(false);
@@ -11936,7 +12152,7 @@ var RufousTextEditor = ({
     setLinkClassName("");
     setLinkSelection(null);
   }, [editor, linkSelection]);
-  const handleLinkCancel = (0, import_react58.useCallback)(() => {
+  const handleLinkCancel = (0, import_react59.useCallback)(() => {
     setLinkModalOpen(false);
     setLinkUrl("");
     setLinkText("");
@@ -11944,30 +12160,32 @@ var RufousTextEditor = ({
     setLinkSelection(null);
     editor?.chain().focus().run();
   }, [editor]);
-  const [saveStatus, setSaveStatus] = (0, import_react58.useState)("");
-  const handleSave = (0, import_react58.useCallback)(() => {
+  const [saveStatus, setSaveStatus] = (0, import_react59.useState)("");
+  const handleSave = (0, import_react59.useCallback)(() => {
     if (!editor || !onSaveProp) return;
     onSaveProp(editor.getHTML(), editor.getJSON());
     setSaveStatus("Saved!");
     setTimeout(() => setSaveStatus(""), 2e3);
   }, [editor, onSaveProp]);
-  const handleExport = (0, import_react58.useCallback)(() => {
+  const handleExport = (0, import_react59.useCallback)(() => {
     if (!editor || !onExportProp) return;
     onExportProp(editor.getHTML(), editor.getJSON());
   }, [editor, onExportProp]);
-  const providerValue = (0, import_react58.useMemo)(() => ({ editor }), [editor]);
-  return /* @__PURE__ */ import_react58.default.createElement(
+  const providerValue = (0, import_react59.useMemo)(() => ({ editor }), [editor]);
+  const [isFullscreen, setIsFullscreen] = (0, import_react59.useState)(false);
+  const toggleFullscreen = (0, import_react59.useCallback)(() => setIsFullscreen((prev) => !prev), []);
+  const wrapperJsx = /* @__PURE__ */ import_react59.default.createElement(
     "div",
     {
       ref: wrapperRef,
-      className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${disabled ? "rf-rte-disabled" : ""} ${error ? "rf-rte-error" : ""} ${sxClass} ${className || ""}`,
-      style: {
+      className: `rf-rte-wrapper editor-wrapper ${isFullscreen ? "fullscreen" : ""} ${resizable ? "rf-rte-resizable" : ""} ${disabled ? "rf-rte-disabled" : ""} ${error ? "rf-rte-error" : ""} ${sxClass} ${className || ""}`,
+      style: isFullscreen ? void 0 : {
         ...style,
         ...width ? { width: typeof width === "number" ? `${width}px` : width } : {},
         ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
       }
     },
-    /* @__PURE__ */ import_react58.default.createElement(import_react59.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react58.default.createElement(
+    /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react59.default.createElement(
       Toolbar_default,
       {
         editor,
@@ -11978,10 +12196,12 @@ var RufousTextEditor = ({
         onTextToSpeech,
         onImageUpload,
         onClose,
-        visibleButtons: toolbarButtons
+        visibleButtons: toolbarButtons,
+        isFullscreen,
+        onToggleFullscreen: toggleFullscreen
       }
-    ), /* @__PURE__ */ import_react58.default.createElement(import_react59.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react58.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react58.default.createElement(VideoToolbar_default, { editor }), editor && /* @__PURE__ */ import_react58.default.createElement(
-      import_react59.BubbleMenu,
+    ), /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react59.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react59.default.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ import_react59.default.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ import_react59.default.createElement(
+      import_react60.BubbleMenu,
       {
         editor,
         className: "bubble-menu",
@@ -11998,31 +12218,31 @@ var RufousTextEditor = ({
           }
         }
       },
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBold().run(),
           className: editor?.isActive("bold") ? "is-active" : ""
         },
-        /* @__PURE__ */ import_react58.default.createElement("strong", null, "B")
+        /* @__PURE__ */ import_react59.default.createElement("strong", null, "B")
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleItalic().run(),
           className: editor?.isActive("italic") ? "is-active" : ""
         },
-        /* @__PURE__ */ import_react58.default.createElement("em", null, "I")
+        /* @__PURE__ */ import_react59.default.createElement("em", null, "I")
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleStrike().run(),
           className: editor?.isActive("strike") ? "is-active" : ""
         },
-        /* @__PURE__ */ import_react58.default.createElement("s", null, "S")
+        /* @__PURE__ */ import_react59.default.createElement("s", null, "S")
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleCode().run(),
@@ -12030,7 +12250,7 @@ var RufousTextEditor = ({
         },
         "</>"
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: setLink,
@@ -12038,8 +12258,8 @@ var RufousTextEditor = ({
         },
         "\u{1F517}"
       )
-    ), editor && /* @__PURE__ */ import_react58.default.createElement(
-      import_react59.FloatingMenu,
+    ), editor && /* @__PURE__ */ import_react59.default.createElement(
+      import_react60.FloatingMenu,
       {
         editor,
         className: "floating-menu",
@@ -12053,7 +12273,7 @@ var RufousTextEditor = ({
           }
         }
       },
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
@@ -12061,7 +12281,7 @@ var RufousTextEditor = ({
         },
         "H1"
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
@@ -12069,7 +12289,7 @@ var RufousTextEditor = ({
         },
         "H2"
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBulletList().run(),
@@ -12077,7 +12297,7 @@ var RufousTextEditor = ({
         },
         "\u2022 List"
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleOrderedList().run(),
@@ -12085,7 +12305,7 @@ var RufousTextEditor = ({
         },
         "1. List"
       ),
-      /* @__PURE__ */ import_react58.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBlockquote().run(),
@@ -12093,8 +12313,8 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom13.createPortal)(
-      /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
+    ), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom16.createPortal)(
+      /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react59.default.createElement(
         "input",
         {
           type: "url",
@@ -12107,7 +12327,7 @@ var RufousTextEditor = ({
           placeholder: "https://example.com",
           autoFocus: true
         }
-      )), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react58.default.createElement(
+      )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react59.default.createElement(
         "input",
         {
           type: "text",
@@ -12119,30 +12339,31 @@ var RufousTextEditor = ({
           },
           placeholder: "Link text"
         }
-      )), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
+      )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
         "input",
         {
           type: "checkbox",
           checked: linkNewTab,
           onChange: (e) => setLinkNewTab(e.target.checked)
         }
-      ), "Open in new tab"), /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
+      ), "Open in new tab"), /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
         "input",
         {
           type: "checkbox",
           checked: linkNoFollow,
           onChange: (e) => setLinkNoFollow(e.target.checked)
         }
-      ), "No follow"))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
+      ), "No follow"))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
       document.body
     )),
-    helperText && /* @__PURE__ */ import_react58.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
+    helperText && /* @__PURE__ */ import_react59.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
   );
+  return isFullscreen ? (0, import_react_dom16.createPortal)(wrapperJsx, document.body) : wrapperJsx;
 };
 var RufousTextContent = ({ content, className, style, sx }) => {
   const sxClass = useSx(sx);
-  const transformedContent = (0, import_react58.useMemo)(() => transformLegacyTodos(content || ""), [content]);
-  return /* @__PURE__ */ import_react58.default.createElement(
+  const transformedContent = (0, import_react59.useMemo)(() => transformLegacyTodos(content || ""), [content]);
+  return /* @__PURE__ */ import_react59.default.createElement(
     "div",
     {
       className: `rf-rte-content ${sxClass} ${className || ""}`,