@rufous/ui 0.3.64 → 0.3.67

package/dist/main.cjs

@@ -13563,6 +13563,15 @@ var IconCheck = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /*
 var IconPaste = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /* @__PURE__ */ React197.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
 
 // lib/RufousTextEditor/Toolbar.tsx
+var BASIC_MOBILE_BUTTONS = /* @__PURE__ */ new Set([
+  "undo",
+  "redo",
+  "bold",
+  "italic",
+  "link",
+  "ul",
+  "ol"
+]);
 var COLOR_PALETTE = [
   // Row 1: blacks/grays
   "#000000",
@@ -14010,7 +14019,47 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   const [todoEnabled, setTodoEnabled] = (0, import_react53.useState)(false);
   const ttsRef = (0, import_react53.useRef)(null);
   const sttRef = (0, import_react53.useRef)(null);
-  const show = (id) => !visibleButtons || visibleButtons.has(id);
+  const [isMobile, setIsMobile] = (0, import_react53.useState)(false);
+  const [expanded, setExpanded] = (0, import_react53.useState)(false);
+  const [overflows, setOverflows] = (0, import_react53.useState)(false);
+  const [winW, setWinW] = (0, import_react53.useState)(typeof window !== "undefined" ? window.innerWidth : 0);
+  const rowRef = (0, import_react53.useRef)(null);
+  (0, import_react53.useEffect)(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(max-width: 600px)");
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  (0, import_react53.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => {
+      setWinW(window.innerWidth);
+      setOverflows(false);
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const hasCollapsibleButtons = !visibleButtons ? true : [...visibleButtons].some((b) => !BASIC_MOBILE_BUTTONS.has(b));
+  const collapsedActive = isMobile && overflows && hasCollapsibleButtons && !expanded;
+  const show = (id) => {
+    if (visibleButtons && !visibleButtons.has(id)) return false;
+    if (collapsedActive && !BASIC_MOBILE_BUTTONS.has(id)) return false;
+    return true;
+  };
+  (0, import_react53.useLayoutEffect)(() => {
+    if (collapsedActive) return;
+    const row = rowRef.current;
+    if (!row) return;
+    const kids = Array.from(row.children).filter(
+      (el) => el.offsetParent !== null && !el.classList?.contains("rte-toolbar-toggle")
+    );
+    const firstTop = kids.length ? kids[0].offsetTop : 0;
+    const wraps = kids.some((el) => el.offsetTop - firstTop > 2);
+    const next = isMobile && wraps;
+    setOverflows((prev) => prev === next ? prev : next);
+  }, [collapsedActive, isMobile, expanded, winW, visibleButtons]);
   (0, import_react53.useEffect)(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -14084,7 +14133,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     setTimeout(() => setTranslateStatus(""), 2e3);
   }, [editor, translateSource, translateTarget, onTranslate]);
   if (!editor) return null;
-  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react53.default.createElement("div", { ref: rowRef, className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -14599,7 +14648,18 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         return true;
       }).run();
     } }, /* @__PURE__ */ import_react53.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react53.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
-  })))), onClose && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
+  }))), isMobile && overflows && hasCollapsibleButtons && /* @__PURE__ */ import_react53.default.createElement(
+    "button",
+    {
+      type: "button",
+      className: `toolbar-btn rte-toolbar-toggle ${expanded ? "is-expanded" : ""}`,
+      onClick: () => setExpanded((v) => !v),
+      title: expanded ? "Show fewer options" : "Show more options",
+      "aria-label": expanded ? "Collapse toolbar" : "Expand toolbar",
+      "aria-expanded": expanded
+    },
+    /* @__PURE__ */ import_react53.default.createElement(ChevronDown, { size: 18 })
+  )), onClose && /* @__PURE__ */ import_react53.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react53.default.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ import_react53.default.createElement(
     "button",
     {
       className: "toolbar-btn btn-cross",

package/dist/main.css

@@ -8171,6 +8171,25 @@ pre {
   border-right: none;
   margin-right: 0;
 }
+.rf-rte-wrapper .toolbar-group:empty {
+  display: none;
+}
+.rf-rte-wrapper .rte-toolbar-toggle {
+  margin-left: auto;
+  color: #a81c08;
+}
+.rf-rte-wrapper .toolbar-row.with-close .rte-toolbar-toggle {
+  margin-right: 9px;
+}
+.rf-rte-wrapper .toolbar-row.with-close .rte-toolbar-toggle.is-expanded {
+  margin-right: -24px;
+}
+.rf-rte-wrapper .rte-toolbar-toggle svg {
+  transition: transform 0.2s ease;
+}
+.rf-rte-wrapper .rte-toolbar-toggle.is-expanded svg {
+  transform: rotate(180deg);
+}
 .rf-rte-wrapper .toolbar-btn {
   display: inline-flex;
   align-items: center;

package/dist/main.js

@@ -11927,7 +11927,7 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React198, { useState as useState34, useRef as useRef30, useEffect as useEffect27, useCallback as useCallback17 } from "react";
+import React198, { useState as useState34, useRef as useRef30, useEffect as useEffect27, useLayoutEffect as useLayoutEffect4, useCallback as useCallback17 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
@@ -13357,6 +13357,15 @@ var IconCheck = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /*
 var IconPaste = () => /* @__PURE__ */ React197.createElement("svg", { ...s }, /* @__PURE__ */ React197.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
 
 // lib/RufousTextEditor/Toolbar.tsx
+var BASIC_MOBILE_BUTTONS = /* @__PURE__ */ new Set([
+  "undo",
+  "redo",
+  "bold",
+  "italic",
+  "link",
+  "ul",
+  "ol"
+]);
 var COLOR_PALETTE = [
   // Row 1: blacks/grays
   "#000000",
@@ -13804,7 +13813,47 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   const [todoEnabled, setTodoEnabled] = useState34(false);
   const ttsRef = useRef30(null);
   const sttRef = useRef30(null);
-  const show = (id) => !visibleButtons || visibleButtons.has(id);
+  const [isMobile, setIsMobile] = useState34(false);
+  const [expanded, setExpanded] = useState34(false);
+  const [overflows, setOverflows] = useState34(false);
+  const [winW, setWinW] = useState34(typeof window !== "undefined" ? window.innerWidth : 0);
+  const rowRef = useRef30(null);
+  useEffect27(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(max-width: 600px)");
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  useEffect27(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => {
+      setWinW(window.innerWidth);
+      setOverflows(false);
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  const hasCollapsibleButtons = !visibleButtons ? true : [...visibleButtons].some((b) => !BASIC_MOBILE_BUTTONS.has(b));
+  const collapsedActive = isMobile && overflows && hasCollapsibleButtons && !expanded;
+  const show = (id) => {
+    if (visibleButtons && !visibleButtons.has(id)) return false;
+    if (collapsedActive && !BASIC_MOBILE_BUTTONS.has(id)) return false;
+    return true;
+  };
+  useLayoutEffect4(() => {
+    if (collapsedActive) return;
+    const row = rowRef.current;
+    if (!row) return;
+    const kids = Array.from(row.children).filter(
+      (el) => el.offsetParent !== null && !el.classList?.contains("rte-toolbar-toggle")
+    );
+    const firstTop = kids.length ? kids[0].offsetTop : 0;
+    const wraps = kids.some((el) => el.offsetTop - firstTop > 2);
+    const next = isMobile && wraps;
+    setOverflows((prev) => prev === next ? prev : next);
+  }, [collapsedActive, isMobile, expanded, winW, visibleButtons]);
   useEffect27(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -13878,7 +13927,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     setTimeout(() => setTranslateStatus(""), 2e3);
   }, [editor, translateSource, translateTarget, onTranslate]);
   if (!editor) return null;
-  return /* @__PURE__ */ React198.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React198.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React198.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React198.createElement(
+  return /* @__PURE__ */ React198.createElement("div", { className: "toolbar" }, /* @__PURE__ */ React198.createElement("div", { ref: rowRef, className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ React198.createElement(Tooltip, { title: "Undo (Ctrl+Z)", placement: "top" }, /* @__PURE__ */ React198.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -14393,7 +14442,18 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         return true;
       }).run();
     } }, /* @__PURE__ */ React198.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ React198.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
-  })))), onClose && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React198.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React198.createElement(
+  }))), isMobile && overflows && hasCollapsibleButtons && /* @__PURE__ */ React198.createElement(
+    "button",
+    {
+      type: "button",
+      className: `toolbar-btn rte-toolbar-toggle ${expanded ? "is-expanded" : ""}`,
+      onClick: () => setExpanded((v) => !v),
+      title: expanded ? "Show fewer options" : "Show more options",
+      "aria-label": expanded ? "Collapse toolbar" : "Expand toolbar",
+      "aria-expanded": expanded
+    },
+    /* @__PURE__ */ React198.createElement(ChevronDown, { size: 18 })
+  )), onClose && /* @__PURE__ */ React198.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ React198.createElement(Tooltip, { title: "Close", placement: "top" }, /* @__PURE__ */ React198.createElement(
     "button",
     {
       className: "toolbar-btn btn-cross",

package/package.json

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