@ai-matrx/rich-editor 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.5.3
+### The toolbar keeps more buttons in a short row (2026-10-08)
+
+- `FormatButtons`: when the row cannot hold the full toolbar, the text-style menu shrinks to its icon (about 45px) BEFORE any button folds into More; and the group dividers are 4px narrower each (`mx-0.5`). A narrow notes header keeps Bold, Italic, text style, bulleted, numbered, checklist and Link.
+
+Consumer action: none.
+
 ## 0.5.2
 ### A typed link keeps the space after it (2026-10-08)
 

package/dist/format/FormatButtons.js

@@ -151,17 +151,21 @@ function FormatButtons({ resolve, disabled = false, className, size = "sm", vari
     resolve()?.run(command);
   };
   const button = size === "xs" ? 26 : 30;
-  const styleWidth = variant === "essential" ? size === "xs" ? 40 : 44 : 90;
-  const widthOf = (slot) => slot.kind === "button" ? button : slot.kind === "style" ? styleWidth : 11;
+  const styleWidthFor = (compact) => variant === "essential" || compact ? size === "xs" ? 40 : 45 : 90;
   const all = slotsOf(variant);
+  const foldedByDefault = variant === "essential" ? slotsOf("full").filter((s) => s.kind === "button" && !ESSENTIAL_COMMANDS.includes(s.spec.command)) : [];
+  const widthOfWith = (styleWidth) => (slot) => slot.kind === "button" ? button : slot.kind === "style" ? styleWidth : 7;
+  const rowWidthWith = (styleWidth) => (slots) => withDividers(slots).reduce((sum, s) => sum + widthOfWith(styleWidth)(s), 0) + button;
   let kept = all;
-  let folded = variant === "essential" ? slotsOf("full").filter((s) => s.kind === "button" && !ESSENTIAL_COMMANDS.includes(s.spec.command)) : [];
-  const rowWidth = (slots, more) => withDividers(slots).reduce((sum, s) => sum + widthOf(s), 0) + (more ? button : 0);
-  if (width > 0 && rowWidth(kept, true) > width + 4) {
+  let folded = foldedByDefault;
+  let compactStyle = false;
+  if (width > 0 && variant === "full" && rowWidthWith(styleWidthFor(false))(all) > width + 4) compactStyle = true;
+  const rowWidth = rowWidthWith(styleWidthFor(compactStyle));
+  if (width > 0 && rowWidth(kept) > width + 4) {
     const byKeep = [...all].sort((x, y) => keepOf(x) - keepOf(y));
     const dropped = /* @__PURE__ */ new Set();
     for (const slot of byKeep) {
-      if (rowWidth(all.filter((s) => !dropped.has(s)), true) <= width + 4) break;
+      if (rowWidth(all.filter((s) => !dropped.has(s))) <= width + 4) break;
       dropped.add(slot);
     }
     kept = all.filter((s) => !dropped.has(s));
@@ -187,7 +191,7 @@ function FormatButtons({ resolve, disabled = false, className, size = "sm", vari
       className: cn("flex min-w-0 flex-nowrap items-center gap-0.5 overflow-hidden", className),
       children: [
         shown.map((slot, index) => {
-          if (slot.kind === "divider") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-1 h-5 w-px shrink-0 bg-border" }, `d${index}`);
+          if (slot.kind === "divider") return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-0.5 h-5 w-px shrink-0 bg-border" }, `d${index}`);
           if (slot.kind === "style") {
             const StyleIcon = currentStyle.icon;
             return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -202,10 +206,10 @@ function FormatButtons({ resolve, disabled = false, className, size = "sm", vari
                   className: cn(
                     "inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground",
                     size === "xs" ? "h-6" : "h-7",
-                    variant === "full" && "w-[88px] justify-between"
+                    variant === "full" && !compactStyle && "w-[88px] justify-between"
                   ),
                   children: [
-                    variant === "essential" ? /* @__PURE__ */ jsx(StyleIcon, { className: iconClass }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: BLOCK_SHORT[currentStyle.command] }),
+                    variant === "essential" || compactStyle ? /* @__PURE__ */ jsx(StyleIcon, { className: iconClass }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: BLOCK_SHORT[currentStyle.command] }),
                     /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 shrink-0" })
                   ]
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "The AI Matrx editor: Visual (Tiptap), Source (CodeMirror), Preview, the markdown formatting command layer, and edit-in-place — over @ai-matrx/rich-content. Consumers that only render never install it.",
   "type": "module",
   "license": "MIT",
@@ -91,9 +91,9 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.48.0",
     "@ai-matrx/agents": "latest",
-    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/design-system": "latest",
+    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/kit": "latest",
     "@ai-matrx/print": "latest",
     "@ai-matrx/rich-content": "latest"