@ai-matrx/rich-editor 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.4.2
+### A short toolbar keeps what people reach for (2026-10-08)
+
+- `FormatButtons` folds by priority, not position: Bold, Italic, Text style, Bulleted list, Checklist and Link stay in view longest; history, inserts and the rest fold into More first. Display order never changes; dividers sit only between visible groups. The text-style menu is narrower (88px). Live: notes beside the chat panel showed only Undo, Redo, Text style and More.
+
+Consumer action: none.
+
 ## 0.4.1
 ### Edit in place: Write, Split, Source, Preview (2026-10-08)
 

package/dist/format/FormatButtons.js

@@ -54,15 +54,41 @@ const FORMAT_GROUPS = [
 ];
 const FORMAT_BUTTONS = FORMAT_GROUPS.flat();
 const ESSENTIAL_COMMANDS = ["bold", "italic", "bulletList", "taskList", "link"];
+const KEEP = {
+  bold: 20,
+  italic: 19,
+  style: 18,
+  bulletList: 17,
+  taskList: 16,
+  link: 15,
+  orderedList: 14,
+  undo: 13,
+  redo: 12,
+  strike: 11,
+  code: 10,
+  quote: 9,
+  codeBlock: 8,
+  table: 7,
+  horizontalRule: 6
+};
+const keepOf = (slot) => slot.kind === "button" ? KEEP[slot.spec.command] ?? 0 : slot.kind === "style" ? KEEP.style : 0;
 function slotsOf(variant) {
   if (variant === "essential") {
     return [{ kind: "style" }, ...ESSENTIAL_COMMANDS.map((command) => ({ kind: "button", spec: FORMAT_BUTTONS.find((b) => b.command === command) }))];
   }
   const out = [];
   FORMAT_GROUPS.forEach((group, index) => {
-    if (index > 0) out.push({ kind: "divider" });
-    out.push(...group.map((b) => ({ kind: "button", spec: b })));
-    if (index === 0) out.push({ kind: "divider" }, { kind: "style" });
+    const g = index === 0 ? 0 : index + 1;
+    out.push(...group.map((b) => ({ kind: "button", spec: b, group: g })));
+    if (index === 0) out.push({ kind: "style", group: 1 });
+  });
+  return out;
+}
+function withDividers(slots) {
+  const out = [];
+  slots.forEach((slot, i) => {
+    if (i > 0 && slot.group !== void 0 && slot.group !== slots[i - 1].group) out.push({ kind: "divider" });
+    out.push(slot);
   });
   return out;
 }
@@ -123,27 +149,23 @@ 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 : 102;
+  const styleWidth = variant === "essential" ? size === "xs" ? 40 : 44 : 90;
   const widthOf = (slot) => slot.kind === "button" ? button : slot.kind === "style" ? styleWidth : 11;
   const all = slotsOf(variant);
-  let shown = all;
+  let kept = all;
   let folded = variant === "essential" ? slotsOf("full").filter((s) => s.kind === "button" && !ESSENTIAL_COMMANDS.includes(s.spec.command)) : [];
-  if (width > 0) {
-    const total = all.reduce((sum, s) => sum + widthOf(s), 0) + (folded.length ? button : 0);
-    if (total > width + 4) {
-      const budget = width - button;
-      let used = 0;
-      let count = 0;
-      for (const slot of all) {
-        if (used + widthOf(slot) > budget) break;
-        used += widthOf(slot);
-        count += 1;
-      }
-      shown = all.slice(0, count);
-      folded = [...all.slice(count), ...folded];
+  const rowWidth = (slots, more) => withDividers(slots).reduce((sum, s) => sum + widthOf(s), 0) + (more ? button : 0);
+  if (width > 0 && rowWidth(kept, folded.length > 0) > 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;
+      dropped.add(slot);
     }
+    kept = all.filter((s) => !dropped.has(s));
+    folded = [...all.filter((s) => dropped.has(s)), ...folded];
   }
-  while (shown.length && shown[shown.length - 1].kind === "divider") shown = shown.slice(0, -1);
+  const shown = withDividers(kept);
   const foldedButtons = folded.filter((s) => s.kind === "button");
   const styleFolded = folded.some((s) => s.kind === "style");
   const iconClass = size === "xs" ? "h-3.5 w-3.5" : "h-4 w-4";
@@ -178,7 +200,7 @@ 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-[100px] justify-between"
+                    variant === "full" && "w-[88px] justify-between"
                   ),
                   children: [
                     variant === "essential" ? /* @__PURE__ */ jsx(StyleIcon, { className: iconClass }) : /* @__PURE__ */ jsx("span", { className: "truncate", children: BLOCK_SHORT[currentStyle.command] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "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",
@@ -90,13 +90,13 @@
     "@tiptap/suggestion": "^3.31.3",
     "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/agents": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/kit": "latest",
     "@ai-matrx/print": "latest",
-    "@ai-matrx/design-system": "latest",
-    "@ai-matrx/rich-content": "latest"
+    "@ai-matrx/rich-content": "latest",
+    "@ai-matrx/alchemy": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",