@ai-matrx/rich-editor 0.3.3 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.4.1
+### Edit in place: Write, Split, Source, Preview (2026-10-08)
+
+- Every edit-in-place editor (an AI answer in chat, window panels and the side drawer) offers Write (the visual editor, default), **Split** (the raw markdown editable on the left, the full live render on the right; stacked on a phone), Source and Preview — in the editor's own view switch, never behind a menu on desktop.
+- `RichEditor` gains `views` (the views offered, in order) and `viewLabels` (a host's own word for a view). Hosts that pass neither are unchanged.
+- The formatting toolbar works in Split's raw pane like in Source.
+
+## 0.4.0
+### ONE formatting toolbar in every editor and every mode (2026-10-07)
+
+- `FormatButtons` is now the full standard toolbar: Undo, Redo · Text style (Normal, Heading 1–3) · Bold, Italic, Strikethrough, Inline code · Bulleted list, Numbered list, Checklist, Quote · Link · Code block, Table, Horizontal rule. Tooltips carry the chord. It never wraps: what does not fit folds into its "More" menu. Pressed state follows the editor. `variant="essential"` is the phone set (text style, B, I, list, checklist, link + More).
+- The visual (Tiptap) editor registers as a format target (`registerFormatElement`), so the same buttons drive Write mode; `EditorViewHandle.formatTarget()` answers in Visual too. `editorFormatTarget(editor, onEditLink)` is the shared builder.
+- The command layer gains `paragraph`, `table`, `horizontalRule`, `undo`, `redo` for every engine (text engines write markdown; undo/redo use the engine's own history).
+- `RichEditor` with `chrome="full"` shows the toolbar in Visual and Source (was Source only).
+
+Consumer action: hosts that gated `FormatButtons` to plain modes can show it in every editable mode.
+
 ## 0.3.3
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see

package/dist/core/markdown-format.d.ts

@@ -1,5 +1,5 @@
 import type { SourceEditResult } from "./source-format.js";
-export type FormatCommandId = "bold" | "italic" | "strike" | "code" | "link" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "taskList" | "quote" | "codeBlock";
+export type FormatCommandId = "bold" | "italic" | "strike" | "code" | "link" | "heading1" | "heading2" | "heading3" | "bulletList" | "orderedList" | "taskList" | "quote" | "codeBlock" | "paragraph" | "table" | "horizontalRule" | "undo" | "redo";
 export declare const FORMAT_COMMAND_IDS: readonly FormatCommandId[];
 export declare function isFormatCommandId(id: string): id is FormatCommandId;
 /** Run one formatting command on markdown text. Returns the minimal change. */

package/dist/core/markdown-format.js

@@ -12,7 +12,12 @@ const FORMAT_COMMAND_IDS = [
   "orderedList",
   "taskList",
   "quote",
-  "codeBlock"
+  "codeBlock",
+  "paragraph",
+  "table",
+  "horizontalRule",
+  "undo",
+  "redo"
 ];
 function isFormatCommandId(id) {
   return FORMAT_COMMAND_IDS.includes(id);
@@ -379,8 +384,50 @@ function formatMarkdown(text, from, to, command) {
       return quoteCommand(text, a, b);
     case "codeBlock":
       return codeBlockCommand(text, a, b);
+    case "paragraph":
+      return paragraphCommand(text, a, b);
+    case "table":
+      return insertBlockAfter(text, a, b, "| Column 1 | Column 2 | Column 3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |", 2, 8);
+    case "horizontalRule":
+      return insertBlockAfter(text, a, b, "---", null, 0);
+    case "undo":
+    case "redo":
+      return { changes: [], anchor: a, head: b };
   }
 }
+function paragraphCommand(text, from, to) {
+  const changes = [];
+  for (const line of linesTouched(text, from, to)) {
+    const base = quoteLength(line.text);
+    const m = /^( {0,3})(#{1,6}[ \t]+)/.exec(line.text.slice(base));
+    if (m) changes.push({ from: line.start + base + m[1].length, to: line.start + base + m[0].length, insert: "" });
+  }
+  const ordered = sorted(changes);
+  const anchor = mapPos(from, ordered, -1);
+  return { changes: ordered, anchor, head: from === to ? anchor : mapPos(to, ordered, -1) };
+}
+function insertBlockAfter(text, from, to, block, caretFrom, caretTo) {
+  const lines = linesTouched(text, from, to);
+  const last = lines[lines.length - 1];
+  const lineEmpty = last.text.trim() === "";
+  let at = last.end;
+  if (!lineEmpty) {
+    while (at < text.length) {
+      const nextEnd = text.indexOf("\n", at + 1);
+      const next = text.slice(at + 1, nextEnd === -1 ? text.length : nextEnd);
+      if (next.trim() === "") break;
+      at = nextEnd === -1 ? text.length : nextEnd;
+    }
+  }
+  const before = lineEmpty ? last.start === 0 || text.slice(0, last.start).endsWith("\n\n") ? "" : "\n" : "\n\n";
+  const rest = text.slice(at);
+  const after = rest.startsWith("\n\n") ? "" : rest.startsWith("\n") ? "\n" : "\n\n";
+  const insert = `${before}${block}${after}`;
+  const blockStart = at + before.length;
+  const anchor = caretFrom === null ? at + insert.length : blockStart + caretFrom;
+  const head = caretFrom === null ? anchor : blockStart + caretFrom + caretTo;
+  return { changes: [{ from: at, to: at, insert }], anchor, head };
+}
 function isFormatActive(text, from, to, command) {
   const a = Math.max(0, Math.min(from, to, text.length));
   const b = Math.min(text.length, Math.max(from, to));
@@ -406,7 +453,15 @@ function isFormatActive(text, from, to, command) {
       return content.length > 0 && content.every((l) => /^ {0,3}>/.test(l.text));
     }
     case "codeBlock":
+    case "table":
+    case "horizontalRule":
+    case "undo":
+    case "redo":
       return false;
+    case "paragraph": {
+      const content = linesTouched(text, a, b).filter((l) => l.text.trim() !== "");
+      return content.length > 0 && content.every((l) => lineKindOf(l.text)?.kind !== "heading");
+    }
     default: {
       const want = command === "bulletList" ? { kind: "bullet" } : command === "orderedList" ? { kind: "ordered" } : command === "taskList" ? { kind: "task" } : { kind: "heading", level: Number(command.slice(-1)) };
       const content = linesTouched(text, a, b).filter((l) => l.text.trim() !== "");
@@ -427,7 +482,13 @@ const FORMAT_COMMAND_KEYS = {
   bulletList: ["Mod-Shift-8"],
   taskList: ["Mod-Shift-9"],
   quote: ["Mod-Shift-."],
-  codeBlock: ["Mod-Alt-c"]
+  codeBlock: ["Mod-Alt-c"],
+  paragraph: ["Mod-Alt-0"],
+  table: [],
+  horizontalRule: [],
+  // The engine's own history answers ⌘Z / ⌘⇧Z; a host never rebinds them.
+  undo: [],
+  redo: []
 };
 function keyNameOf(event, apple) {
   const mod = apple ? event.metaKey || event.ctrlKey : event.ctrlKey;

package/dist/editor/RichEditorImpl.d.ts

@@ -8,7 +8,9 @@ import type { BlockPlacement } from "../core/text-insertion.js";
 import type { DeclaredVariable } from "../core/variables.js";
 import { type ImagePolicyDeclaration } from "@ai-matrx/rich-content/levels/prose/remote-image-policy";
 import type { AnnotationRecord } from "@ai-matrx/rich-content/rich-document/host-types";
-export type RichEditorView = "visual" | "source" | "preview";
+export type RichEditorView = "visual" | "split" | "source" | "preview";
+/** The views a host gets unless it names its own (`views`). Split is offered where a host asks for it. */
+export declare const DEFAULT_VIEWS: readonly RichEditorView[];
 /**
  * What a host that carries its OWN chrome (view switch, find, outline, dictation,
  * its own right-click menu) drives the editor through. Every verb acts on the
@@ -72,6 +74,14 @@ export interface RichEditorProps {
      */
     view?: RichEditorView;
     onViewChange?: (view: RichEditorView) => void;
+    /**
+     * The views the switch offers, in order (default Visual, Source, Preview).
+     * Split — the raw text editable on the left, the full render live on the
+     * right — is offered by naming it here (edit-in-place: Write, Split, Source, Preview).
+     */
+    views?: readonly RichEditorView[];
+    /** A host's own word for a view ("Write" for Visual in edit-in-place). */
+    viewLabels?: Partial<Record<RichEditorView, string>>;
     /**
      * "full" (default): the editor's toolbar row — views, tools, dictation, Save.
      * "bare": no row of its own; the host's chrome carries the view switch, find,
@@ -135,4 +145,4 @@ export interface RichEditorProps {
      */
     imagePolicy?: ImagePolicyDeclaration;
 }
-export default function RichEditorImpl({ value, onSave, onChange, variables, onDeclareVariable, defaultView, view: controlledView, onViewChange, chrome, hostContextMenu, controllerRef, readOnly, placeholder, surfaceName, sourceFeature, contentSource, annotationRecord, saveLabel, className, toolbarExtras, onCancel, cancelLabel, defaultOutlineOpen, onNothingToSave, imagePolicy, }: RichEditorProps): import("react").JSX.Element;
+export default function RichEditorImpl({ value, onSave, onChange, variables, onDeclareVariable, defaultView, view: controlledView, onViewChange, views: viewsProp, viewLabels, chrome, hostContextMenu, controllerRef, readOnly, placeholder, surfaceName, sourceFeature, contentSource, annotationRecord, saveLabel, className, toolbarExtras, onCancel, cancelLabel, defaultOutlineOpen, onNothingToSave, imagePolicy, }: RichEditorProps): import("react").JSX.Element;

package/dist/editor/RichEditorImpl.js

@@ -7,6 +7,7 @@ import {
   Check,
   ChevronDown,
   Code2,
+  Columns2,
   Eye,
   Focus,
   Hash,
@@ -50,6 +51,7 @@ import { RichEditorContext } from "./RichEditorContext.js";
 import { VisualEditor } from "../visual/VisualEditor.js";
 import { SourceEditor } from "../source/SourceEditor.js";
 import { FormatButtons } from "../format/FormatButtons.js";
+import { SplitPanes } from "./SplitPanes.js";
 import { FindReplacePanel } from "../panels/FindReplacePanel.js";
 import { OutlinePanel } from "../panels/OutlinePanel.js";
 import { ShortcutsDialog } from "../panels/ShortcutsDialog.js";
@@ -59,7 +61,7 @@ import { withImagePolicy } from "@ai-matrx/rich-content/levels/prose/remote-imag
 import { RecordAnnotations } from "@ai-matrx/rich-content/host/app-bindings";
 import { annotationRecordOf } from "@ai-matrx/rich-content/host/app-bindings";
 import { formatCount } from "@ai-matrx/kit/format";
-const VIEWS = ["visual", "source", "preview"];
+const DEFAULT_VIEWS = ["visual", "source", "preview"];
 function describeDelta(delta) {
   const raw = delta.before ?? delta.after ?? "";
   const block = islandMeta(delta.islandType, raw);
@@ -79,6 +81,7 @@ function describeDelta(delta) {
 }
 const VIEW_META = {
   visual: { label: "Visual", icon: Type },
+  split: { label: "Split", icon: Columns2 },
   source: { label: "Source", icon: Code2 },
   preview: { label: "Preview", icon: Eye }
 };
@@ -91,6 +94,8 @@ function RichEditorImpl({
   defaultView = "visual",
   view: controlledView,
   onViewChange,
+  views: viewsProp,
+  viewLabels,
   chrome = "full",
   hostContextMenu = false,
   controllerRef,
@@ -110,6 +115,8 @@ function RichEditorImpl({
   imagePolicy
 }) {
   const isMobile = useIsMobile();
+  const VIEWS = viewsProp?.length ? viewsProp : DEFAULT_VIEWS;
+  const viewLabel = (option) => viewLabels?.[option] ?? VIEW_META[option].label;
   const [stored, setStored] = useState(value);
   const [current, setCurrent] = useState(value);
   const [view, setView] = useState(controlledView ?? defaultView);
@@ -404,18 +411,19 @@ function RichEditorImpl({
     },
     `source-${mountKey}`
   );
-  const body = view === "preview" ? /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-6 py-6 sm:px-10", children: /* @__PURE__ */ jsx(
+  const rendered = (content) => /* @__PURE__ */ jsx(
     RichDocument,
     {
       imagePolicy: "inherit",
-      content: current,
+      content,
       source: contentSource,
       enableContextMenu: true,
       hideCopyButton: true,
       allowFullScreenEditor: false,
       actions: { exclude: ["edit", "delete-message"] }
     }
-  ) }) }) : hostContextMenu ? /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor }) : /* @__PURE__ */ jsx(
+  );
+  const editingBody = hostContextMenu ? /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor }) : /* @__PURE__ */ jsx(
     EditableContextMenu,
     {
       sourceFeature,
@@ -433,6 +441,10 @@ function RichEditorImpl({
       children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: viewEditor })
     }
   );
+  const body = view === "preview" ? /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-6 py-6 sm:px-10", children: rendered(current) }) }) : view === "split" ? (
+    // Split: the raw text (Source, raw) on the left, the live render of the same text on the right.
+    /* @__PURE__ */ jsx(SplitPanes, { stacked: isMobile, raw: editingBody, render: rendered(deferred) })
+  ) : editingBody;
   const CurrentViewIcon = VIEW_META[view].icon;
   const tools = [
     { id: "find", label: "Find & replace (\u2318F)", icon: Search, active: findMode !== null, disabled: view === "preview", run: () => setFindMode((mode) => mode ? null : "find") },
@@ -452,10 +464,11 @@ function RichEditorImpl({
     ro.observe(row);
     return () => ro.disconnect();
   }, [focusMode, chrome]);
-  const compactTools = isMobile || view === "source" && !readOnly && toolbarRowWidth > 0 && toolbarRowWidth < 980;
-  const formatButtons = view === "source" && !readOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  const editable = view !== "preview" && !readOnly;
+  const compactTools = isMobile || editable && toolbarRowWidth > 0 && toolbarRowWidth < 1180;
+  const formatButtons = editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "mx-1 h-5 w-px shrink-0 bg-border" }),
-    /* @__PURE__ */ jsx(FormatButtons, { resolve: () => handle.current?.formatTarget?.() ?? null })
+    /* @__PURE__ */ jsx(FormatButtons, { className: "flex-1", resolve: () => handle.current?.formatTarget?.() ?? null })
   ] }) : null;
   const micButton = mic.available && !readOnly && view !== "preview" ? /* @__PURE__ */ jsx(
     ToolbarButton,
@@ -534,7 +547,7 @@ function RichEditorImpl({
                       "button",
                       {
                         type: "button",
-                        "aria-label": `View: ${VIEW_META[view].label}`,
+                        "aria-label": `View: ${viewLabel(view)}`,
                         title: "Switch view",
                         className: "flex h-8 shrink-0 items-center gap-1 rounded-md border border-border bg-background/60 px-2 text-xs font-medium text-primary",
                         children: [
@@ -547,7 +560,7 @@ function RichEditorImpl({
                       const Icon = VIEW_META[option].icon;
                       return /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => switchView(option), children: [
                         /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4" }),
-                        /* @__PURE__ */ jsx("span", { className: "flex-1", children: VIEW_META[option].label }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1", children: viewLabel(option) }),
                         view === option && /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4 text-primary" })
                       ] }, option);
                     }) })
@@ -559,7 +572,7 @@ function RichEditorImpl({
                     {
                       type: "button",
                       role: "tab",
-                      title: VIEW_META[option].label,
+                      title: viewLabel(option),
                       "aria-selected": view === option,
                       onClick: () => switchView(option),
                       className: cn(
@@ -568,7 +581,7 @@ function RichEditorImpl({
                       ),
                       children: [
                         /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
-                        VIEW_META[option].label
+                        viewLabel(option)
                       ]
                     },
                     option
@@ -743,5 +756,6 @@ function ToolbarButton({
   );
 }
 export {
+  DEFAULT_VIEWS,
   RichEditorImpl as default
 };

package/dist/editor/SplitPanes.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface SplitPanesProps {
+    /** The editable raw text (the Source engine). */
+    raw: ReactNode;
+    /** The live render of the same text. */
+    render: ReactNode;
+    /** Stack top/bottom instead of side by side (phones). */
+    stacked?: boolean;
+}
+export declare function SplitPanes({ raw, render, stacked }: SplitPanesProps): import("react").JSX.Element;
+export default SplitPanes;

package/dist/editor/SplitPanes.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ai-matrx/design-system";
+function SplitPanes({ raw, render, stacked = false }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-split-view": "",
+      className: cn(
+        "grid h-full min-h-0",
+        stacked ? "grid-cols-1 grid-rows-2 divide-y divide-border" : "grid-cols-2 divide-x divide-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("section", { "aria-label": "Raw text", "data-split-pane": "raw", className: "min-h-0 min-w-0 overflow-hidden", children: raw }),
+        /* @__PURE__ */ jsx("section", { "aria-label": "Rendered", "data-split-pane": "render", className: "min-h-0 min-w-0 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-4 sm:px-6", children: render }) })
+      ]
+    }
+  );
+}
+var SplitPanes_default = SplitPanes;
+export {
+  SplitPanes,
+  SplitPanes_default as default
+};

package/dist/format/FormatButtons.d.ts

@@ -1,14 +1,20 @@
 import * as React from "react";
 import { type LucideIcon } from "lucide-react";
-import type { FormatCommandId } from "../core/markdown-format.js";
+import { type FormatCommandId } from "../core/markdown-format.js";
 import type { FormatTarget } from "./format-target.js";
 export interface FormatButtonSpec {
     command: FormatCommandId;
     label: string;
     icon: LucideIcon;
 }
-/** The compact set every plain-text toolbar shows (the rest stay on the selection toolbar and the keys). */
+/** The text styles of the "Text style" menu. */
+export declare const BLOCK_STYLES: readonly FormatButtonSpec[];
+/** The toolbar, in its groups (a divider between each). The text-style menu sits after history. */
+export declare const FORMAT_GROUPS: readonly (readonly FormatButtonSpec[])[];
+/** Every button the toolbar shows, in order (the text-style menu aside). */
 export declare const FORMAT_BUTTONS: readonly FormatButtonSpec[];
+/** The phone set (Arman, 2026-10-07): text style, B, I, list, checklist, link — the rest under More. */
+export declare const ESSENTIAL_COMMANDS: readonly FormatCommandId[];
 export interface FormatButtonsProps {
     /** The editor the buttons act on, read at press time. Null = nothing to format (buttons stay, inert). */
     resolve: () => FormatTarget | null;
@@ -17,6 +23,8 @@ export interface FormatButtonsProps {
     className?: string;
     /** "sm" (28px, the editor toolbar) or "xs" (24px, a dense strip). */
     size?: "sm" | "xs";
+    /** "full" (default): the whole toolbar, folding into More by width. "essential": the phone set + More. */
+    variant?: "full" | "essential";
 }
-export declare function FormatButtons({ resolve, disabled, className, size }: FormatButtonsProps): React.ReactElement | null;
+export declare function FormatButtons({ resolve, disabled, className, size, variant }: FormatButtonsProps): React.ReactElement | null;
 export default FormatButtons;

package/dist/format/FormatButtons.js

@@ -1,41 +1,243 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { Bold, Code, Heading2, Italic, Link2, List } from "lucide-react";
-import { cn } from "@ai-matrx/design-system";
-const FORMAT_BUTTONS = [
-  { command: "bold", label: "Bold (\u2318B)", icon: Bold },
-  { command: "italic", label: "Italic (\u2318I)", icon: Italic },
-  { command: "code", label: "Inline code (\u2318E)", icon: Code },
-  { command: "link", label: "Link (\u2318K)", icon: Link2 },
-  { command: "heading2", label: "Heading", icon: Heading2 },
-  { command: "bulletList", label: "Bulleted list (\u2318\u21E78)", icon: List }
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Bold,
+  Check,
+  ChevronDown,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  Link2,
+  List,
+  ListChecks,
+  ListOrdered,
+  Minus,
+  MoreHorizontal,
+  Pilcrow,
+  Quote,
+  Redo2,
+  SquareCode,
+  Strikethrough,
+  Table,
+  Undo2
+} from "lucide-react";
+import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@ai-matrx/design-system";
+import { FORMAT_COMMAND_KEYS } from "../core/markdown-format.js";
+function chordLabel(key) {
+  if (!key) return "";
+  return key.split("-").map((part) => part === "Mod" ? "\u2318" : part === "Shift" ? "\u21E7" : part === "Alt" ? "\u2325" : part.toUpperCase()).join("");
+}
+const CHORDS = { undo: "\u2318Z", redo: "\u2318\u21E7Z" };
+function withChord(name, command) {
+  const chord = CHORDS[command] ?? chordLabel(FORMAT_COMMAND_KEYS[command][0]);
+  return chord ? `${name} (${chord})` : name;
+}
+function spec(command, name, icon) {
+  return { command, label: withChord(name, command), icon };
+}
+const BLOCK_STYLES = [
+  spec("paragraph", "Normal text", Pilcrow),
+  spec("heading1", "Heading 1", Heading1),
+  spec("heading2", "Heading 2", Heading2),
+  spec("heading3", "Heading 3", Heading3)
 ];
-function FormatButtons({ resolve, disabled = false, className, size = "sm" }) {
+const BLOCK_SHORT = { paragraph: "Normal", heading1: "Heading 1", heading2: "Heading 2", heading3: "Heading 3" };
+const FORMAT_GROUPS = [
+  [spec("undo", "Undo", Undo2), spec("redo", "Redo", Redo2)],
+  [spec("bold", "Bold", Bold), spec("italic", "Italic", Italic), spec("strike", "Strikethrough", Strikethrough), spec("code", "Inline code", Code)],
+  [spec("bulletList", "Bulleted list", List), spec("orderedList", "Numbered list", ListOrdered), spec("taskList", "Checklist", ListChecks), spec("quote", "Quote", Quote)],
+  [spec("link", "Link", Link2)],
+  [spec("codeBlock", "Code block", SquareCode), spec("table", "Table", Table), spec("horizontalRule", "Horizontal rule", Minus)]
+];
+const FORMAT_BUTTONS = FORMAT_GROUPS.flat();
+const ESSENTIAL_COMMANDS = ["bold", "italic", "bulletList", "taskList", "link"];
+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" });
+  });
+  return out;
+}
+function usePressedTick(resolve, root) {
+  const [tick, setTick] = React.useState(0);
+  const resolveRef = React.useRef(resolve);
+  resolveRef.current = resolve;
+  React.useEffect(() => {
+    if (typeof document === "undefined") return void 0;
+    let frame = 0;
+    let target = null;
+    let off;
+    const bump = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        const next = resolveRef.current();
+        if (next !== target) {
+          off?.();
+          target = next;
+          off = next?.subscribe?.(bump);
+        }
+        setTick((t) => t + 1);
+      });
+    };
+    const events = ["selectionchange", "focusin", "input", "keyup", "mouseup"];
+    for (const name of events) document.addEventListener(name, bump);
+    bump();
+    return () => {
+      for (const name of events) document.removeEventListener(name, bump);
+      if (frame) cancelAnimationFrame(frame);
+      off?.();
+    };
+  }, [root]);
+  return tick;
+}
+function FormatButtons({ resolve, disabled = false, className, size = "sm", variant = "full" }) {
+  const rootRef = React.useRef(null);
+  const [width, setWidth] = React.useState(0);
+  React.useEffect(() => {
+    const el = rootRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(() => setWidth(el.getBoundingClientRect().width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  usePressedTick(resolve, rootRef);
   if (disabled) return null;
-  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Formatting", "data-format-buttons": "", className: cn("flex shrink-0 items-center gap-0.5", className), children: FORMAT_BUTTONS.map(({ command, label, icon: Icon }) => /* @__PURE__ */ jsx(
-    "button",
+  const target = resolve();
+  const isActive = (command) => {
+    try {
+      return target?.isActive(command) ?? false;
+    } catch {
+      return false;
+    }
+  };
+  const run = (command) => {
+    resolve()?.run(command);
+  };
+  const button = size === "xs" ? 26 : 30;
+  const styleWidth = variant === "essential" ? size === "xs" ? 40 : 44 : 102;
+  const widthOf = (slot) => slot.kind === "button" ? button : slot.kind === "style" ? styleWidth : 11;
+  const all = slotsOf(variant);
+  let shown = 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];
+    }
+  }
+  while (shown.length && shown[shown.length - 1].kind === "divider") shown = shown.slice(0, -1);
+  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";
+  const buttonClass = cn(
+    "inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+    size === "xs" ? "h-6 w-6" : "h-7 w-7"
+  );
+  const currentStyle = BLOCK_STYLES.find((s) => s.command !== "paragraph" && isActive(s.command)) ?? BLOCK_STYLES[0];
+  const keepEditorFocus = (event) => event.preventDefault();
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      type: "button",
-      "aria-label": label,
-      title: label,
-      "data-format-command": command,
-      "data-matrx-button": "",
-      onMouseDown: (event) => event.preventDefault(),
-      onClick: () => {
-        resolve()?.run(command);
-      },
-      className: cn(
-        "inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
-        size === "xs" ? "h-6 w-6" : "h-7 w-7"
-      ),
-      children: /* @__PURE__ */ jsx(Icon, { className: size === "xs" ? "h-3.5 w-3.5" : "h-4 w-4" })
-    },
-    command
-  )) });
+      ref: rootRef,
+      role: "toolbar",
+      "aria-label": "Formatting",
+      "data-format-buttons": "",
+      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 === "style") {
+            const StyleIcon = currentStyle.icon;
+            return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Text style: ${BLOCK_SHORT[currentStyle.command]}`,
+                  title: "Text style (\u2318\u23250\u20133)",
+                  "data-format-style": "",
+                  "data-matrx-button": "",
+                  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"
+                  ),
+                  children: [
+                    variant === "essential" ? /* @__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" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-48", onCloseAutoFocus: keepEditorFocus, children: BLOCK_STYLES.map((style) => /* @__PURE__ */ jsxs(DropdownMenuItem, { "data-format-command": style.command, onSelect: () => run(style.command), children: [
+                /* @__PURE__ */ jsx(style.icon, { className: "mr-2 h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1", children: style.label }),
+                currentStyle.command === style.command && /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4 text-primary" })
+              ] }, style.command)) })
+            ] }, "style");
+          }
+          const { command, label, icon: Icon } = slot.spec;
+          const pressed = command !== "undo" && command !== "redo" && isActive(command);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": label,
+              title: label,
+              "aria-pressed": command === "undo" || command === "redo" ? void 0 : pressed,
+              "data-format-command": command,
+              "data-matrx-button": "",
+              onMouseDown: (event) => event.preventDefault(),
+              onClick: () => run(command),
+              className: cn(buttonClass, pressed && "bg-primary/10 text-primary-ink"),
+              children: /* @__PURE__ */ jsx(Icon, { className: iconClass })
+            },
+            command
+          );
+        }),
+        (foldedButtons.length > 0 || styleFolded) && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "More formatting", title: "More formatting", "data-format-more": "", "data-matrx-button": "", className: buttonClass, children: /* @__PURE__ */ jsx(MoreHorizontal, { className: iconClass }) }) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56", onCloseAutoFocus: keepEditorFocus, children: [
+            styleFolded && BLOCK_STYLES.map((style) => /* @__PURE__ */ jsxs(DropdownMenuItem, { "data-format-command": style.command, onSelect: () => run(style.command), children: [
+              /* @__PURE__ */ jsx(style.icon, { className: "mr-2 h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: style.label }),
+              currentStyle.command === style.command && /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4 text-primary" })
+            ] }, style.command)),
+            styleFolded && foldedButtons.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            foldedButtons.map(({ spec: b }) => /* @__PURE__ */ jsxs(DropdownMenuItem, { "data-format-command": b.command, onSelect: () => run(b.command), children: [
+              /* @__PURE__ */ jsx(b.icon, { className: "mr-2 h-4 w-4" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: b.label }),
+              b.command !== "undo" && b.command !== "redo" && isActive(b.command) && /* @__PURE__ */ jsx(Check, { className: "ml-2 h-4 w-4 text-primary" })
+            ] }, b.command))
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 var FormatButtons_default = FormatButtons;
 export {
+  BLOCK_STYLES,
+  ESSENTIAL_COMMANDS,
   FORMAT_BUTTONS,
+  FORMAT_GROUPS,
   FormatButtons,
   FormatButtons_default as default
 };

package/dist/format/format-target.d.ts

@@ -26,7 +26,12 @@ export interface TextSelectionState {
     editable: boolean;
 }
 /** Any engine whose document is markdown text. `apply` writes the minimal change. */
-export declare function textFormatTarget(engine: "source" | "textarea", read: () => TextSelectionState | null, apply: (result: SourceEditResult, text: string) => void, subscribe?: (onChange: () => void) => () => void): FormatTarget;
+export declare function textFormatTarget(engine: "source" | "textarea", read: () => TextSelectionState | null, apply: (result: SourceEditResult, text: string) => void, subscribe?: (onChange: () => void) => () => void, 
+/** The engine's own undo history (CodeMirror's, the browser's for a textarea). */
+history?: {
+    undo: () => boolean;
+    redo: () => boolean;
+}): FormatTarget;
 /**
  * Write a text edit into a <textarea> so the browser's own undo takes it back
  * and React's onChange sees it: the changes collapse to ONE replaced span (the

package/dist/format/format-target.js

@@ -5,12 +5,13 @@ function markdownFormatHost(target) {
   const host = { kind: "markdown-format", target };
   return { [MARKDOWN_FORMAT_HOST_KEY]: host };
 }
-function textFormatTarget(engine, read, apply, subscribe) {
+function textFormatTarget(engine, read, apply, subscribe, history) {
   return {
     engine,
     run: (command) => {
       const state = read();
       if (!state || !state.editable) return false;
+      if (command === "undo" || command === "redo") return history ? history[command]() : false;
       const result = formatMarkdown(state.text, state.from, state.to, command);
       if (result.changes.length === 0) return false;
       apply(result, state.text);
@@ -67,9 +68,22 @@ function textareaFormatTarget(el) {
         el.removeEventListener("input", onChange);
         el.removeEventListener("select", onChange);
       };
+    },
+    {
+      // The browser's own history: it holds every edit the buttons wrote (execCommand insertText).
+      undo: () => textareaHistory(el, "undo"),
+      redo: () => textareaHistory(el, "redo")
     }
   );
 }
+function textareaHistory(el, verb) {
+  el.focus({ preventScroll: true });
+  try {
+    return typeof document.execCommand === "function" && document.execCommand(verb, false);
+  } catch {
+    return false;
+  }
+}
 const FORMAT_HOST_ATTR = "data-format-host";
 const registeredTargets = /* @__PURE__ */ new WeakMap();
 let lastFocused = null;

package/dist/in-place/InPlaceEditor.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type RichEditorProps } from "../editor/RichEditor.js";
+import { type RichEditorProps, type RichEditorView } from "../editor/RichEditor.js";
 import type { CaretContext } from "../core/caret-context.js";
 import { type InPlaceSaveMode } from "./in-place-session.js";
 export type InPlaceEditorPassThrough = Omit<RichEditorProps, "value" | "onSave" | "onChange" | "onCancel" | "onNothingToSave" | "cancelLabel" | "controllerRef">;
@@ -33,6 +33,16 @@ export interface InPlaceEditorProps {
      */
     actions?: readonly InPlaceAction[];
 }
+/**
+ * The modes of every edit-in-place editor, in this order (Arman, 2026-10-08:
+ * "Default: Write. Next option: Split (plain text on the left and full render
+ * on the right). Then, whatever else we need. But you cannot gobble them up and
+ * hide the things we need."). Write is the visual editor and always opens
+ * first (no per-person memory exists for this); Split shows the raw string
+ * next to its render. All four sit in the editor's own toolbar row.
+ */
+export declare const IN_PLACE_VIEWS: readonly RichEditorView[];
+export declare const IN_PLACE_VIEW_LABELS: Partial<Record<RichEditorView, string>>;
 export interface InPlaceAction {
     id: string;
     label: string;

package/dist/in-place/InPlaceEditor.js

@@ -8,6 +8,8 @@ import { cn } from "@ai-matrx/design-system";
 import { ConfirmDialog } from "@ai-matrx/rich-content/host/app-bindings";
 import RichEditor from "../editor/RichEditor.js";
 import { createInPlaceSession } from "./in-place-session.js";
+const IN_PLACE_VIEWS = ["visual", "split", "source", "preview"];
+const IN_PLACE_VIEW_LABELS = { visual: "Write" };
 function InPlaceEditor({
   value,
   mode = "explicit",
@@ -129,6 +131,8 @@ function InPlaceEditor({
           {
             defaultView: "visual",
             defaultOutlineOpen: false,
+            views: IN_PLACE_VIEWS,
+            viewLabels: IN_PLACE_VIEW_LABELS,
             ...editor,
             controllerRef: controller,
             value: openedOn,
@@ -206,6 +210,8 @@ function keepCaretInView(root, settleMs = 2500) {
   return stop;
 }
 export {
+  IN_PLACE_VIEWS,
+  IN_PLACE_VIEW_LABELS,
   InPlaceEditor,
   keepCaretInView
 };

package/dist/source/SourceEditor.js

@@ -87,6 +87,17 @@ function sourceFormatTarget(getView) {
     (result) => {
       const v = getView();
       if (v) applyResult(v, result);
+    },
+    void 0,
+    {
+      undo: () => {
+        const v = getView();
+        return v ? (v.focus(), undo(v)) : false;
+      },
+      redo: () => {
+        const v = getView();
+        return v ? (v.focus(), redo(v)) : false;
+      }
     }
   );
 }

package/dist/visual/VisualEditor.d.ts

@@ -4,7 +4,7 @@ import { type VisualLoadStats } from "../core/visual-document.js";
 import { type CaretCarry, type CaretContext } from "../core/caret-context.js";
 import type { FindOptions } from "../core/find-replace.js";
 import { type RichShellActions } from "./visual-extensions.js";
-import type { FormatTarget } from "../format/format-target.js";
+import { type FormatTarget } from "../format/format-target.js";
 export interface ViewFindState {
     count: number;
     current: number;

package/dist/visual/VisualEditor.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { redoDepth, undoDepth } from "@tiptap/pm/history";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { getSchema } from "@tiptap/core";
@@ -22,7 +22,8 @@ import { createVisualExtensions } from "./visual-extensions.js";
 import { findHighlightKey } from "./decorations.js";
 import { BlockHandle } from "./BlockHandle.js";
 import { useSelectionZone } from "@ai-matrx/rich-content/selection-toolbar/selection-zones";
-import { RICH_EDITOR_HOST_KEY, islandSelectionOf, tableAnchorOf } from "./format-actions.js";
+import { registerFormatElement } from "../format/format-target.js";
+import { RICH_EDITOR_HOST_KEY, editorFormatTarget, islandSelectionOf, tableAnchorOf } from "./format-actions.js";
 import { useRichEditorContext } from "../editor/RichEditorContext.js";
 const HEADLESS_SCHEMA = getSchema(createRichEditorExtensions());
 const REPORT_DELAY_MS = 120;
@@ -150,8 +151,17 @@ function VisualEditor({
       )
     );
   };
+  const shellRef = useRef(shell);
+  shellRef.current = shell;
+  const formatTarget = useMemo(() => editor ? editorFormatTarget(editor, () => shellRef.current.editLink()) : null, [editor]);
+  const [formatZone, setFormatZone] = useState(null);
+  useEffect(() => {
+    if (!formatZone || !formatTarget || context.readOnly) return void 0;
+    return registerFormatElement(formatZone, formatTarget);
+  }, [formatZone, formatTarget, context.readOnly]);
   useImperativeHandle(handleRef, () => ({
     focus: () => editor?.commands.focus(),
+    formatTarget: () => formatTarget,
     selectedText: () => {
       if (!editor) return "";
       const { from, to } = editor.state.selection;
@@ -311,6 +321,7 @@ function VisualEditor({
       ref: (node) => {
         container.current = node;
         setZoneElement(node);
+        setFormatZone(node);
       },
       className: cn("rich-editor-visual relative h-full overflow-y-auto", focusMode && "rich-editor-focus"),
       "data-testid": "rich-editor-visual",

package/dist/visual/format-actions.d.ts

@@ -1,5 +1,6 @@
 import type { Editor } from "@tiptap/core";
 import type { ActionProvider } from "@ai-matrx/alchemy/actions";
+import type { FormatTarget } from "../format/format-target.js";
 export declare const RICH_EDITOR_HOST_KEY = "richEditor";
 export interface RichEditorSelectionHost {
     kind: "rich-editor";
@@ -16,5 +17,11 @@ export declare function islandSelectionOf(editor: Editor): {
 } | null;
 /** The table the caret is in, as a box (the toolbar's caret-mode anchor), or null. */
 export declare function tableAnchorOf(editor: Editor): DOMRect | null;
+/**
+ * THE visual editor as a FormatTarget, with the verbs its own shell implements
+ * (link field, checklist, code-block island) — the selection toolbar and the
+ * visible toolbar (`FormatButtons`, through `registerFormatElement`) share it.
+ */
+export declare function editorFormatTarget(editor: Editor, onEditLink: () => void): FormatTarget;
 /** The formatting provider (declared on load; the toolbar root registers it). */
 export declare const richEditorFormatProvider: ActionProvider;

package/dist/visual/format-actions.js

@@ -44,10 +44,11 @@ function editorOf(target) {
 }
 function visualTargetOf(target) {
   const visual = editorOf(target);
-  if (!visual) return null;
-  const { editor } = visual;
+  return visual ? editorFormatTarget(visual.editor, visual.onEditLink) : null;
+}
+function editorFormatTarget(editor, onEditLink) {
   return visualFormatTarget(editor, {
-    link: () => (visual.onEditLink(), true),
+    link: () => (onEditLink(), true),
     taskList: () => toggleTaskList(editor),
     codeBlock: () => {
       markAutoEdit(editor, insertCodeBlock(editor));
@@ -122,6 +123,7 @@ const richEditorFormatProvider = {
 declareSelectionProvider(richEditorFormatProvider);
 export {
   RICH_EDITOR_HOST_KEY,
+  editorFormatTarget,
   islandSelectionOf,
   richEditorFormatProvider,
   tableAnchorOf

package/dist/visual/visual-format-target.js

@@ -13,7 +13,12 @@ const VISUAL = {
   orderedList: { run: (e) => e.chain().focus().toggleOrderedList().run(), active: (e) => e.isActive("orderedList") },
   taskList: { run: () => false, active: (e) => e.isActive("taskList") },
   quote: { run: (e) => e.chain().focus().toggleBlockquote().run(), active: (e) => e.isActive("blockquote") },
-  codeBlock: { run: () => false, active: () => false }
+  codeBlock: { run: () => false, active: () => false },
+  paragraph: { run: (e) => e.chain().focus().setParagraph().run(), active: (e) => e.isActive("paragraph") },
+  table: { run: (e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(), active: (e) => e.isActive("table") },
+  horizontalRule: { run: (e) => e.chain().focus().setHorizontalRule().run(), active: () => false },
+  undo: { run: (e) => e.chain().focus().undo().run(), active: () => false },
+  redo: { run: (e) => e.chain().focus().redo().run(), active: () => false }
 };
 function visualFormatTarget(editor, overrides = {}) {
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-editor",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "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",
@@ -93,9 +93,9 @@
     "@ai-matrx/agents": "latest",
     "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
-    "@ai-matrx/design-system": "latest",
     "@ai-matrx/kit": "latest",
     "@ai-matrx/print": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/rich-content": "latest"
   },
   "peerDependencies": {
@@ -126,6 +126,19 @@
   "engines": {
     "node": ">=20"
   },
+  "matrx": {
+    "charter": "Visual, source and preview editing over rich-content.",
+    "owns": [
+      "Tiptap editor",
+      "CodeMirror editor",
+      "formatting commands",
+      "edit in place"
+    ],
+    "mustNotOwn": [
+      "rendering (rich-content)"
+    ],
+    "layer": 8
+  },
   "scripts": {
     "build": "pnpm --filter @ai-matrx/rich-content build && node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\" && tsup && node -e \"require('node:fs').cpSync('src/editor/rich-editor.css','dist/editor/rich-editor.css')\" && node ./scripts/tsc-own.mjs -p tsconfig.build.json && node ./scripts/finish-build.mjs",
     "check:package": "pnpm build && publint && pnpm verify:modules-tarball && pnpm verify:tarball && pnpm check:host-boundary",