@rufous/ui 0.2.55 → 0.2.56

package/dist/main.js

@@ -9118,7 +9118,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
     },
     /* @__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 }, "\xD7 Cancel")), /* @__PURE__ */ React110.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "\u2714 Save"))));
+  ))))), 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"))));
 };
 var TranslateModal_default = TranslateModal;
 
@@ -9737,7 +9737,8 @@ var CustomTaskItem = TaskItem.extend({
           "border: 2px solid " + colors.border,
           `background-image: url("${imageUrl}")`,
           "background-repeat: no-repeat",
-          "background-position: center"
+          "background-position: center",
+          "box-sizing: unset !important"
         ].join("; ");
         li.setAttribute("data-status", status);
       };
@@ -9968,12 +9969,24 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     const menu = menuRef.current;
     menu.style.left = "0";
     menu.style.right = "auto";
-    const rect = menu.getBoundingClientRect();
-    const vw = window.innerWidth;
-    if (rect.right > vw - 8) {
-      menu.style.left = "auto";
-      menu.style.right = "0";
-    }
+    requestAnimationFrame(() => {
+      if (!menu) return;
+      const rect = menu.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const parentLeft = ref.current?.getBoundingClientRect().left || 0;
+      if (rect.right > vw - 8) {
+        menu.style.left = "auto";
+        menu.style.right = "0";
+        const newRect = menu.getBoundingClientRect();
+        if (newRect.left < 8) {
+          menu.style.left = `${8 - parentLeft}px`;
+          menu.style.right = "auto";
+        }
+      } else if (rect.left < 8) {
+        menu.style.left = `${8 - parentLeft}px`;
+        menu.style.right = "auto";
+      }
+    });
   }, [open]);
   return /* @__PURE__ */ React112.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ React112.createElement(
     "button",
@@ -10238,10 +10251,11 @@ var ColorPickerPanel = ({ editor, onClose }) => {
     }
   ))), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React112.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React112.createElement("button", { className: "color-picker-remove", onClick: removeColor, title: "Remove color" }, "\u2713")));
 };
-var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload }) => {
+var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons }) => {
   const [, setEditorState] = useState30(0);
   const [isFullscreen, setIsFullscreen] = useState30(false);
   const [todoEnabled, setTodoEnabled] = useState30(false);
+  const show = (id) => !visibleButtons || visibleButtons.has(id);
   useEffect23(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -10325,7 +10339,7 @@ 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" : ""}` }, /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(
+  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(
     "button",
     {
       className: "toolbar-btn",
@@ -10334,7 +10348,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Undo (Ctrl+Z)"
     },
     /* @__PURE__ */ React112.createElement(IconUndo, null)
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("redo") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10343,7 +10357,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Redo (Ctrl+Y)"
     },
     /* @__PURE__ */ React112.createElement(IconRedo, null)
-  )), /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(
+  )), 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(
     Dropdown,
     {
       trigger: {
@@ -10410,7 +10424,7 @@ 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")
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("fontsize") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10437,7 +10451,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         sizeStr
       );
     })
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("font") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10464,7 +10478,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         font
       );
     })
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("color") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10474,7 +10488,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       keepOpen: true
     },
     (close) => /* @__PURE__ */ React112.createElement(ColorPickerPanel, { editor, onClose: close })
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("bold") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
@@ -10482,7 +10496,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Bold (Ctrl+B)"
     },
     /* @__PURE__ */ React112.createElement(IconBold, null)
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("italic") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
@@ -10490,7 +10504,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Italic (Ctrl+I)"
     },
     /* @__PURE__ */ React112.createElement(IconItalic, null)
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("strike") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: { label: /* @__PURE__ */ React112.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
@@ -10515,7 +10529,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         c.run();
       }
     } }, "\u2715 Clear formatting")
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("link") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
@@ -10523,7 +10537,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Insert Link"
     },
     /* @__PURE__ */ React112.createElement(IconLink, null)
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("lineheight") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10550,7 +10564,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         lh
       );
     })
-  )), /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(
+  )), (show("ul") || show("ol")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10593,7 +10607,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("ol") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10638,7 +10652,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  )), /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ React112.createElement(
+  )), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: {
@@ -10663,7 +10677,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("indent") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10684,7 +10698,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Increase Indent"
     },
     /* @__PURE__ */ React112.createElement(IconIndentIncrease, null)
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("outdent") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10705,7 +10719,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Decrease Indent"
     },
     /* @__PURE__ */ React112.createElement(IconIndentDecrease, null)
-  )), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ React112.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ React112.createElement(TableGridSelector, { editor, onClose: close })), /* @__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 })), /* @__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" })), /* @__PURE__ */ React112.createElement(
+  )), 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(
     "button",
     {
       className: "toolbar-btn",
@@ -10713,7 +10727,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Cut (Ctrl+X)"
     },
     /* @__PURE__ */ React112.createElement(IconCut, null)
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("copy") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10721,7 +10735,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Copy selected text"
     },
     copySuccess ? /* @__PURE__ */ React112.createElement(IconCheck, null) : /* @__PURE__ */ React112.createElement(IconCopy, null)
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("paste") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10729,7 +10743,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Paste (Ctrl+V)"
     },
     /* @__PURE__ */ React112.createElement(IconPaste, null)
-  ), /* @__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(
+  ), 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(
     "button",
     {
       key: char,
@@ -10737,7 +10751,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       onClick: () => insertSpecialChar(char)
     },
     char
-  )))), /* @__PURE__ */ React112.createElement(
+  )))), show("code") && /* @__PURE__ */ React112.createElement(
     Dropdown,
     {
       trigger: { label: /* @__PURE__ */ React112.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
@@ -10761,7 +10775,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       }
     } }, "</>", " Inline Code"),
     /* @__PURE__ */ React112.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
-  ), /* @__PURE__ */ React112.createElement(
+  ), show("fullscreen") && /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
@@ -10769,7 +10783,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Toggle Fullscreen"
     },
     /* @__PURE__ */ React112.createElement(IconFullscreen, null)
-  ), /* @__PURE__ */ React112.createElement(TextToSpeech_default, { editor, onTextToSpeech }), /* @__PURE__ */ React112.createElement(SpeechToText_default, { editor, onSpeechToText }), /* @__PURE__ */ React112.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React112.createElement(
+  ), show("tts") && /* @__PURE__ */ React112.createElement(TextToSpeech_default, { editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React112.createElement(SpeechToText_default, { editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React112.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10777,7 +10791,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Translate selected text"
     },
     /* @__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)), /* @__PURE__ */ React112.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React112.createElement(
+  ), /* @__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(
     "button",
     {
       className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
@@ -11020,7 +11034,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       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 }, "\xD7 Cancel"), /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "\u{1F5D1} Delete")), /* @__PURE__ */ React113.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "\u2714 Apply"))));
+  ), "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"))));
 };
 var ImageToolbar = ({ editor }) => {
   const [showModal, setShowModal] = useState31(false);
@@ -11273,7 +11287,7 @@ 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 }, "\xD7 Cancel"), /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "\u{1F5D1} Delete")), /* @__PURE__ */ React114.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "\u2714 Apply"))));
+  )))), /* @__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 VideoToolbar = ({ editor }) => {
   const [showModal, setShowModal] = useState32(false);
@@ -11406,6 +11420,62 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
+var VARIANT_BUTTONS = {
+  default: [
+    "undo",
+    "redo",
+    "|",
+    "ai",
+    "|",
+    "paragraph",
+    "fontsize",
+    "font",
+    "color",
+    "bold",
+    "italic",
+    "strike",
+    "link",
+    "lineheight",
+    "|",
+    "ul",
+    "ol",
+    "|",
+    "align",
+    "indent",
+    "outdent",
+    "|",
+    "table",
+    "image",
+    "video",
+    "|",
+    "cut",
+    "copy",
+    "paste",
+    "specialchars",
+    "code",
+    "fullscreen",
+    "|",
+    "tts",
+    "stt",
+    "translate",
+    "|",
+    "todo"
+  ],
+  basic: [
+    "undo",
+    "redo",
+    "|",
+    "paragraph",
+    "fontsize",
+    "font",
+    "bold",
+    "italic",
+    "link",
+    "|",
+    "ul",
+    "ol"
+  ]
+};
 var RufousTextEditor = ({
   content: initialContent,
   placeholder: customPlaceholder,
@@ -11421,6 +11491,10 @@ var RufousTextEditor = ({
   onImageUpload,
   onClose,
   mentions,
+  variant = "default",
+  buttons,
+  hideButtons,
+  width,
   height,
   resizable = false,
   className,
@@ -11428,6 +11502,14 @@ var RufousTextEditor = ({
   sx
 }) => {
   const sxClass = useSx(sx);
+  const toolbarButtons = useMemo4(() => {
+    const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
+    const visible = new Set(list.filter((b) => b !== "|"));
+    if (hideButtons) {
+      hideButtons.forEach((b) => visible.delete(b));
+    }
+    return visible;
+  }, [buttons, variant, hideButtons]);
   const mentionSuggestion = useMemo4(() => createMentionSuggestion(mentions), [mentions]);
   const onChangeRef = useRef29(onChange);
   const onBlurRef = useRef29(onBlur);
@@ -11672,7 +11754,6 @@ var RufousTextEditor = ({
     setLinkSelection(null);
     editor?.chain().focus().run();
   }, [editor]);
-  const [saveFormat, setSaveFormat] = useState33("html");
   const [saveStatus, setSaveStatus] = useState33("");
   const handleSave = useCallback13(() => {
     if (!editor || !onSaveProp) return;
@@ -11684,12 +11765,6 @@ var RufousTextEditor = ({
     if (!editor || !onExportProp) return;
     onExportProp(editor.getHTML(), editor.getJSON());
   }, [editor, onExportProp]);
-  const handleClear = useCallback13(() => {
-    if (!editor) return;
-    if (window.confirm("Clear all content? This cannot be undone.")) {
-      editor.commands.clearContent();
-    }
-  }, [editor]);
   const providerValue = useMemo4(() => ({ editor }), [editor]);
   return /* @__PURE__ */ React115.createElement(
     "div",
@@ -11697,6 +11772,7 @@ var RufousTextEditor = ({
       className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${sxClass} ${className || ""}`,
       style: {
         ...style,
+        ...width ? { width: typeof width === "number" ? `${width}px` : width } : {},
         ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
       }
     },
@@ -11710,7 +11786,8 @@ var RufousTextEditor = ({
         onSpeechToText,
         onTextToSpeech,
         onImageUpload,
-        onClose
+        onClose,
+        visibleButtons: toolbarButtons
       }
     ), /* @__PURE__ */ React115.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React115.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React115.createElement(VideoToolbar_default, { editor }), editor && /* @__PURE__ */ React115.createElement(
       BubbleMenu,
@@ -11825,16 +11902,7 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ React115.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React115.createElement("div", { className: "status-bar-left" }, /* @__PURE__ */ React115.createElement(
-      "select",
-      {
-        value: saveFormat,
-        onChange: (e) => setSaveFormat(e.target.value),
-        className: "format-select"
-      },
-      /* @__PURE__ */ React115.createElement("option", { value: "html" }, "HTML"),
-      /* @__PURE__ */ React115.createElement("option", { value: "json" }, "JSON")
-    ), onSaveProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export"), /* @__PURE__ */ React115.createElement("button", { onClick: handleClear, className: "status-btn clear-btn" }, "Clear")), /* @__PURE__ */ React115.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React115.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ React115.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React115.createElement(
+    ), /* @__PURE__ */ React115.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React115.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React115.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React115.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ React115.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React115.createElement(
       "input",
       {
         type: "url",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.55",
+  "version": "0.2.56",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",