autumnnote 1.2.1 → 1.4.0

package/src/js/editing/Typing.js

@@ -206,11 +206,11 @@ export function handleKeydown(event, editable, options = {}) {
       return true;
     }
 
-    // In a pre/code block, insert spaces
+    // In a pre/code block, insert spaces using configured tabSize
     if (para && para.nodeName.toUpperCase() === 'PRE') {
       if (event.shiftKey) return false;
       event.preventDefault();
-      execCommand('insertText', '    ');
+      execCommand('insertText', ' '.repeat(options.tabSize || 4));
       return true;
     }
 
@@ -357,6 +357,13 @@ export function handleKeydown(event, editable, options = {}) {
 
     const para = closestPara(range.sc, editable);
 
+    // Enter in a pre/code block: insert a literal newline instead of a new block
+    if (para && para.nodeName.toUpperCase() === 'PRE') {
+      event.preventDefault();
+      execCommand('insertText', '\n');
+      return true;
+    }
+
     // Pressing Enter at the end of a blockquote should exit it
     if (para && para.nodeName.toUpperCase() === 'BLOCKQUOTE') {
       const native = range.toNativeRange();

package/src/js/i18n/de.js

@@ -156,6 +156,7 @@ export const de = {
     replacePlaceholder: 'Ersetzen durch…',
     replaceAriaLabel:   'Ersetzen durch',
     replaceBtn:         'Ersetzen',
+    noResults:          'Keine Ergebnisse',
     replaceAllBtn:      'Alle ersetzen',
     close:              '×',
   },

package/src/js/i18n/en.js

@@ -159,6 +159,7 @@ export const en = {
     replaceAriaLabel:   'Replace with',
     replaceBtn:         'Replace',
     replaceAllBtn:      'Replace All',
+    noResults:          'No results',
     close:              '\u00d7',
   },
 

package/src/js/i18n/es.js

@@ -156,6 +156,7 @@ export const es = {
     replacePlaceholder: 'Reemplazar con…',
     replaceAriaLabel:   'Reemplazar con',
     replaceBtn:         'Reemplazar',
+    noResults:          'Sin resultados',
     replaceAllBtn:      'Reemplazar todo',
     close:              '×',
   },

package/src/js/i18n/fr.js

@@ -157,6 +157,7 @@ export const fr = {
     replacePlaceholder: 'Remplacer par\u2026',
     replaceAriaLabel:   'Remplacer par',
     replaceBtn:         'Remplacer',
+    noResults:          'Aucun résultat',
     replaceAllBtn:      'Tout remplacer',
     close:              '\u00d7',
   },

package/src/js/i18n/ja.js

@@ -157,6 +157,7 @@ export const ja = {
     replacePlaceholder: '置換後\u2026',
     replaceAriaLabel:   '置換後のテキスト',
     replaceBtn:         '置換',
+    noResults:          '結果なし',
     replaceAllBtn:      'すべて置換',
     close:              '\u00d7',
   },

package/src/js/i18n/ko.js

@@ -156,6 +156,7 @@ export const ko = {
     replacePlaceholder: '바꿀 내용…',
     replaceAriaLabel:   '바꿀 내용',
     replaceBtn:         '바꾸기',
+    noResults:          '결과 없음',
     replaceAllBtn:      '모두 바꾸기',
     close:              '×',
   },

package/src/js/i18n/vi.js

@@ -158,6 +158,7 @@ export const vi = {
     replaceAriaLabel:   'Thay thế bằng',
     replaceBtn:         'Thay thế',
     replaceAllBtn:      'Thay thế tất cả',
+    noResults:          'Không có kết quả',
     close:              '\u00d7',
   },
 

package/src/js/i18n/zh.js

@@ -157,6 +157,7 @@ export const zh = {
     replacePlaceholder: '替换为\u2026',
     replaceAriaLabel:   '替换为',
     replaceBtn:         '替换',
+    noResults:          '没有结果',
     replaceAllBtn:      '全部替换',
     close:              '\u00d7',
   },

package/src/js/index.js

@@ -10,7 +10,8 @@
  */
 
 import '../styles/autumnnote.scss';
-import { Context, _customModules } from './Context.js';
+import { Context, _customModules, _globalPlugins } from './Context.js';
+import { registerButton } from './module/Buttons.js';
 import { defaultOptions } from './settings.js';
 
 // Snapshot of factory defaults taken at module-load time (before any setDefaults() calls)
@@ -99,8 +100,47 @@ const AutumnNote = {
    */
   registerModule(name, ModuleClass) { _customModules.set(name, ModuleClass); },
 
+  /**
+   * Installs a plugin globally — applied to every future editor instance.
+   * Plugin `buttons` are registered to the global button registry immediately
+   * so they are available when Toolbar initialises inside create().
+   * Plugin `install()` is called after all built-in modules have initialised.
+   * @param {object} plugin - { name, version?, buttons?, install?, uninstall? }
+   * @param {object} [options] - Forwarded to plugin.install(context, options)
+   * @returns {typeof AutumnNote}
+   */
+  use(plugin, options = {}) {
+    if (!plugin || typeof plugin.name !== 'string') {
+      throw new TypeError('[AutumnNote] AutumnNote.use: plugin must have a string `name` property.');
+    }
+    if (_globalPlugins.has(plugin.name)) {
+      console.warn(`[AutumnNote] Plugin "${plugin.name}" already registered globally. Skipping.`);
+      return this;
+    }
+    if (Array.isArray(plugin.buttons)) {
+      plugin.buttons.forEach((b) => registerButton(b));
+    }
+    _globalPlugins.set(plugin.name, { plugin, options });
+    return this;
+  },
+
+  /**
+   * Returns true if a plugin with the given name has been registered globally.
+   * @param {string} name
+   * @returns {boolean}
+   */
+  hasPlugin(name) { return _globalPlugins.has(name); },
+
+  /**
+   * Registers a single button definition in the global button registry.
+   * After create(), call ctx.invoke('toolbar.rebuild') to render new buttons.
+   * @param {object} btnDef - ButtonDef-compatible object with a `name` string
+   * @returns {typeof AutumnNote}
+   */
+  registerButton(btnDef) { registerButton(btnDef); return this; },
+
   /** Library version */
-  version: '1.1.1',
+  version: '1.4.0',
 };
 
 // ---------------------------------------------------------------------------

package/src/js/module/BubbleToolbar.js

@@ -44,11 +44,25 @@ const _ACTIONS = {
   strikethrough: (ctx) => ctx.invoke('editor.strikethrough'),
   link:          (ctx) => ctx.invoke('linkDialog.show'),
   removeFormat:  (ctx) => {
-    // editor.removeFormat does not exist — call execCommand directly
     const editable = ctx.layoutInfo && ctx.layoutInfo.editable;
     if (!editable) return;
     editable.focus();
     document.execCommand('removeFormat');
+    // Also strip inline style attributes which execCommand('removeFormat') misses
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
+      const range = sel.getRangeAt(0);
+      const ancestor = range.commonAncestorContainer;
+      const root = ancestor.nodeType === 1 ? ancestor : ancestor.parentElement;
+      if (root) {
+        const candidates = [root, ...root.querySelectorAll('[style]')];
+        for (const el of candidates) {
+          if (el.hasAttribute('style') && range.intersectsNode(el)) {
+            el.removeAttribute('style');
+          }
+        }
+      }
+    }
     ctx.invoke('editor.afterCommand');
   },
   inlineCode:    (ctx) => ctx.invoke('editor.inlineCode'),
@@ -172,6 +186,8 @@ export class BubbleToolbar {
 
     document.body.appendChild(el);
     this._el = el;
+    // Cache button references once — avoids querySelectorAll on every selectionchange
+    this._btnCache = Array.from(el.querySelectorAll('.an-bubble-btn'));
   }
 
   _buildColorPicker() {
@@ -291,9 +307,13 @@ export class BubbleToolbar {
     editable.focus();
     const sel = window.getSelection();
     sel.removeAllRanges();
-    sel.addRange(this._savedRange.cloneRange());
+    try { sel.addRange(this._savedRange.cloneRange()); } catch (_) { return; }
 
-    document.execCommand(type, false, color);
+    // Firefox does not support 'hiliteColor'; fall back to 'backColor'
+    const cmd = type === 'hiliteColor' ? 'hiliteColor' : type;
+    if (!document.execCommand(cmd, false, color) && cmd === 'hiliteColor') {
+      document.execCommand('backColor', false, color);
+    }
     this.context.invoke('editor.afterCommand');
 
     // Update the color strip on the corresponding button
@@ -349,10 +369,9 @@ export class BubbleToolbar {
   }
 
   _syncActive() {
-    if (!this._el) return;
-    this._el.querySelectorAll('.an-bubble-btn').forEach((btn) => {
-      const name = btn.dataset.name;
-      const activeFn = _ACTIVE[name];
+    if (!this._btnCache) return;
+    this._btnCache.forEach((btn) => {
+      const activeFn = _ACTIVE[btn.dataset.name];
       btn.classList.toggle('an-active', !!(activeFn && activeFn()));
     });
   }

package/src/js/module/Buttons.js

@@ -51,6 +51,43 @@ function btn(name, icon, tooltip, action, isActive, isDisabled) {
   return { name, icon, tooltip, action, isActive, isDisabled };
 }
 
+// ---------------------------------------------------------------------------
+// Global button registry
+// ---------------------------------------------------------------------------
+
+/**
+ * Global registry for custom buttons registered via AutumnNote.registerButton()
+ * or via a plugin's `buttons` array. Toolbar resolves string names from here.
+ * @type {Map<string, object>}
+ */
+export const _buttonRegistry = new Map();
+
+/**
+ * Registers a button definition in the global registry so it can be referenced
+ * by string name in toolbar configuration: `toolbar: [['myBtn', boldBtn]]`.
+ * @param {object} btnDef - Any ToolbarItemDef-compatible object with a `name` string.
+ */
+export function registerButton(btnDef) {
+  if (!btnDef || typeof btnDef.name !== 'string') {
+    console.warn('[AutumnNote] registerButton: btnDef must have a string `name` property.');
+    return;
+  }
+  if (_buttonRegistry.has(btnDef.name)) {
+    console.warn(`[AutumnNote] registerButton: overwriting existing button "${btnDef.name}".`);
+  }
+  _buttonRegistry.set(btnDef.name, btnDef);
+}
+
+/**
+ * Looks up a button definition by name from the global registry.
+ * Returns undefined when not found.
+ * @param {string} name
+ * @returns {object|undefined}
+ */
+export function getButton(name) {
+  return _buttonRegistry.get(name);
+}
+
 // ---------------------------------------------------------------------------
 // Style buttons
 // ---------------------------------------------------------------------------

package/src/js/module/Clipboard.js

@@ -239,7 +239,7 @@ export class Clipboard {
       const raw = clipboardData.getData('text/html');
       // Detect source type and apply appropriate pre-cleaner
       const isWordContent = /<[a-z]+:[a-z]/i.test(raw) || /class="Mso/i.test(raw) || /\bmso-/i.test(raw);
-      const isSocialContent = /\bdata-testid\b/.test(raw) || /class="[^"]*\b(?:x[a-z0-9]{6,}|r-[a-z0-9]{3,})\b/.test(raw);
+      const isSocialContent = /class="[^"]*\b(?:x[a-z0-9]{6,}|r-[a-z0-9]{3,})\b/.test(raw);
       let html = raw;
       if (isWordContent) html = this._cleanWordHtml(html);
       else if (isSocialContent) html = this._cleanSocialHtml(html);
@@ -351,7 +351,7 @@ export class Clipboard {
    */
   _dataUrlToBlob(dataUrl) {
     const [header, b64] = dataUrl.split(',');
-    const mime = header.match(/:(.*?);/)[1];
+    const mime = header.match(/:(.*?);/)?.[1] ?? 'image/png';
     const binary = atob(b64);
     const arr = new Uint8Array(binary.length);
     for (let i = 0; i < binary.length; i++) arr[i] = binary.charCodeAt(i);

package/src/js/module/ContextMenu.js

@@ -307,7 +307,7 @@ export class ContextMenu {
           cells.forEach((cell) => {
             cell.classList.toggle('active', +cell.dataset.row <= rows && +cell.dataset.col <= cols);
           });
-          labelEl.textContent = (rows && cols) ? `${cols} × ${rows}` : (this.context.locale.contextMenu.table || 'Insert Table');
+          labelEl.textContent = (rows && cols) ? `${rows} × ${cols}` : (this.context.locale.contextMenu.table || 'Insert Table');
         };
 
         panel.appendChild(gridEl);

package/src/js/module/FindReplace.js

@@ -271,8 +271,6 @@ export class FindReplace {
     const rawMatches = this._findRawMatches(query, editable);
     if (rawMatches.length === 0) return;
 
-    this._currentIndex = 0;
-
     // Wrap matches in reverse order so earlier text offsets stay valid when
     // later sections of the same text node are split by surroundContents().
     // Use push() instead of unshift() to avoid O(n²) shifting on every insert;
@@ -297,6 +295,7 @@ export class FindReplace {
 
     // Drop entries where wrapping failed so the counter and navigation are accurate
     this._matches = this._matches.filter((m) => m.mark);
+    this._currentIndex = 0;
     if (this._matches.length === 0) return;
 
     // Highlight the first (current) match
@@ -324,12 +323,14 @@ export class FindReplace {
     }
     const re = this._queryRegex;
 
+    // Cap results to prevent blocking the main thread on very large documents
+    const MAX_RESULTS = 500;
     const walker = document.createTreeWalker(root, 0x4 /* NodeFilter.SHOW_TEXT */);
     let node;
-    while ((node = walker.nextNode())) {
+    while ((node = walker.nextNode()) && results.length < MAX_RESULTS) {
       re.lastIndex = 0;
       let m;
-      while ((m = re.exec(node.textContent)) !== null) {
+      while ((m = re.exec(node.textContent)) !== null && results.length < MAX_RESULTS) {
         results.push({ node, start: m.index, end: m.index + m[0].length });
       }
     }
@@ -447,7 +448,7 @@ export class FindReplace {
     const total = this._matches.length;
     if (total === 0) {
       const query = this._findInput ? this._findInput.value : '';
-      this._counterEl.textContent = query ? 'No results' : '';
+      this._counterEl.textContent = query ? this.context.locale.findReplace.noResults : '';
     } else {
       this._counterEl.textContent = `${this._currentIndex + 1} / ${total}`;
     }

package/src/js/module/ImageCropOverlay.js

@@ -227,6 +227,11 @@ export class ImageCropOverlay {
           e.stopPropagation();
           this._startHandleDrag(e, id);
         }),
+        on(h, 'touchstart', (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this._startHandleDrag({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY }, id);
+        }, { passive: false }),
       );
       this._handles[id] = h;
       cropBox.appendChild(h);
@@ -235,16 +240,19 @@ export class ImageCropOverlay {
     /* ---- crop move drag ---- */
     this._disposers.push(
       on(cropBox, 'mousedown', (e) => {
-        // Only directly on the box surface (not on a handle)
-        if (e.target !== cropBox && e.target !== grid && !(e.target.tagName === 'DIV' && !e.target.className.includes('handle'))) {
-          // Let handle mousedown handle it
-          return;
-        }
-        if (e.target.className && e.target.className.includes('an-crop-handle')) return;
+        if (e.target.classList.contains('an-crop-handle')) return;
+        if (e.target !== cropBox && e.target !== grid) return;
         e.preventDefault();
         e.stopPropagation();
         this._startBoxMove(e);
       }),
+      on(cropBox, 'touchstart', (e) => {
+        if (e.target.classList.contains('an-crop-handle')) return;
+        if (e.target !== cropBox && e.target !== grid) return;
+        e.preventDefault();
+        e.stopPropagation();
+        this._startBoxMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+      }, { passive: false }),
     );
 
     /* ---- info label ---- */
@@ -434,15 +442,23 @@ export class ImageCropOverlay {
    * @param {(e: MouseEvent) => void} onMove
    */
   _attachDocDrag(onMove) {
+    const onTouchMove = (e) => {
+      e.preventDefault();
+      onMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+    };
     const cleanup = () => {
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup',   cleanup);
+      document.removeEventListener('touchmove', onTouchMove);
+      document.removeEventListener('touchend',  cleanup);
       document.body.style.userSelect = '';
       document.body.style.cursor     = '';
     };
     document.body.style.userSelect = 'none';
     document.addEventListener('mousemove', onMove);
     document.addEventListener('mouseup',   cleanup, { once: true });
+    document.addEventListener('touchmove', onTouchMove, { passive: false });
+    document.addEventListener('touchend',  cleanup, { once: true });
   }
 
   // ---------------------------------------------------------------------------
@@ -489,8 +505,8 @@ export class ImageCropOverlay {
 
     if (!canvas) {
       // Cross-origin failure — inform user and abort
-      window.alert(
-        'Cannot crop this image: the image server does not allow cross-origin access.\n' +
+      this._showCropError(
+        'Cannot crop this image: the image server does not allow cross-origin access. ' +
         'Upload the image directly to use the crop tool.',
       );
       this._close(false);
@@ -516,6 +532,28 @@ export class ImageCropOverlay {
     this.context.invoke('imageResizer.updateOverlay');
   }
 
+  /**
+   * Show a non-blocking inline error banner appended to document.body.
+   * Auto-dismisses after 4 seconds.
+   * @param {string} msg
+   */
+  _showCropError(msg) {
+    const banner = document.createElement('div');
+    banner.setAttribute('role', 'alert');
+    banner.style.cssText = [
+      'position:fixed', 'bottom:24px', 'left:50%', 'transform:translateX(-50%)',
+      'z-index:10200', 'max-width:420px', 'width:max-content',
+      'background:#7f1d1d', 'color:#fecaca', 'border:1px solid #b91c1c',
+      'border-radius:8px', 'padding:12px 18px',
+      'font:13px/1.5 system-ui,sans-serif',
+      'box-shadow:0 4px 16px rgba(0,0,0,.4)',
+      'pointer-events:auto',
+    ].join(';');
+    banner.textContent = msg;
+    document.body.appendChild(banner);
+    setTimeout(() => { if (banner.parentNode) banner.parentNode.removeChild(banner); }, 4000);
+  }
+
   /**
    * Remove all overlay DOM elements and reset state.
    * @param {boolean} _committed - reserved for future use

package/src/js/module/ImageResizer.js

@@ -151,6 +151,7 @@ export class ImageResizer {
       this._activeImg.classList.remove('an-image-selected');
     }
     this._activeImg = img;
+    this._lastOverlayPos = null; // invalidate position cache on new selection
     img.classList.add('an-image-selected');
     this._updateOverlayPosition();
     this._overlay.style.display = 'block';
@@ -177,6 +178,12 @@ export class ImageResizer {
     const offsetParent = this._overlay.offsetParent || this._container;
     const containerRect = offsetParent.getBoundingClientRect();
     const rect = this._activeImg.getBoundingClientRect();
+
+    // Skip DOM writes when position hasn't changed (common during non-scroll rAF ticks)
+    const p = this._lastOverlayPos;
+    if (p && p.l === rect.left && p.t === rect.top && p.w === rect.width && p.h === rect.height) return;
+    this._lastOverlayPos = { l: rect.left, t: rect.top, w: rect.width, h: rect.height };
+
     const left = rect.left - containerRect.left + offsetParent.scrollLeft;
     const top = rect.top - containerRect.top + offsetParent.scrollTop;
     this._overlay.style.left   = `${left}px`;

package/src/js/module/Mention.js

@@ -92,16 +92,29 @@ export class Mention {
     const el = document.createElement('div');
     el.className = 'an-mention-dropdown';
     el.setAttribute('role', 'listbox');
+
+    // Event delegation: single listeners on the container instead of per-item
+    el.addEventListener('mousedown', (e) => e.preventDefault());
+    el.addEventListener('click', (e) => {
+      const item = e.target.closest('.an-mention-item');
+      if (item) this._select(+item.dataset.index);
+    });
+    el.addEventListener('mousemove', (e) => {
+      const item = e.target.closest('.an-mention-item');
+      if (item) this._highlightItem(+item.dataset.index);
+    });
+
     document.body.appendChild(el);
     this._dropdown = el;
   }
 
   _renderItems(items) {
     const dd = this._dropdown;
-    dd.innerHTML = '';
     this._items = items.slice(0, this._cfg.maxResults);
     this._activeIndex = this._items.length > 0 ? 0 : -1;
 
+    // Build all items in a DocumentFragment — one batch DOM insertion
+    const frag = document.createDocumentFragment();
     this._items.forEach((item, i) => {
       const li = document.createElement('div');
       li.className = 'an-mention-item';
@@ -117,11 +130,12 @@ export class Mention {
       const label = document.createElement('span');
       label.textContent = item.label;
       li.appendChild(label);
-      li.addEventListener('mousedown', (e) => e.preventDefault());
-      li.addEventListener('click', () => this._select(i));
-      dd.appendChild(li);
+      frag.appendChild(li);
     });
 
+    dd.innerHTML = '';        // one clear
+    dd.appendChild(frag);    // one batch insert
+
     this._highlightItem(this._activeIndex);
   }
 

package/src/js/module/Statusbar.js

@@ -214,7 +214,8 @@ export class Statusbar {
   update() {
     if (!this._wordCountEl || !this._charCountEl) return;
     const editable = this.context.layoutInfo.editable;
-    const text = editable.innerText || '';
+    // textContent is faster than innerText (no layout flush, no CSS visibility check)
+    const text = editable.textContent || '';
     const words = _countWords(text);
     const chars = text.replace(/\n/g, '').length;
     const maxWords = this.options.maxWords || 0;

package/src/js/module/Toolbar.js

@@ -4,6 +4,10 @@
  */
 
 import { createElement, on } from '../core/dom.js';
+import { getButton } from './Buttons.js';
+
+/** Resolve a toolbar item: string → registry lookup, object → pass-through. */
+const _resolveBtn = (item) => (typeof item === 'string') ? getButton(item) : item;
 
 // Module-level cache for FontAwesome detection.
 // Evaluated once per page load so all Toolbar instances on the same page agree
@@ -115,6 +119,8 @@ export class Toolbar {
     this._disposers = [];
     /** @type {Array<() => void>} closers for all open color picker popups */
     this._colorPickerClosers = [];
+    /** @type {number|null} rAF handle for debounced refresh */
+    this._refreshRaf = null;
   }
 
   // ---------------------------------------------------------------------------
@@ -127,11 +133,16 @@ export class Toolbar {
     // for every button rendered.
     this._faReady = this._detectFontAwesome();
     this._buildButtons();
-    this._btnMap = new Map((this.options.toolbar || []).flat().map((b) => [b.name, b]));
+    this._btnMap = new Map(
+      (this.options.toolbar || []).flat()
+        .map(_resolveBtn).filter(Boolean).map((b) => [b.name, b]),
+    );
     return this;
   }
 
   destroy() {
+    if (this._refreshRaf) cancelAnimationFrame(this._refreshRaf);
+    this._refreshRaf = null;
     this._disposers.forEach((d) => d());
     this._disposers = [];
     if (this.el && this.el.parentNode) {
@@ -151,7 +162,12 @@ export class Toolbar {
     const fragment = document.createDocumentFragment();
     toolbar.forEach((group) => {
       const groupEl = createElement('div', { class: 'an-btn-group' });
-      group.forEach((btnDef) => {
+      group.forEach((item) => {
+        const btnDef = _resolveBtn(item);
+        if (!btnDef) {
+          console.warn(`[AutumnNote] Toolbar: button "${item}" not found in registry. Skipped.`);
+          return;
+        }
         let el;
         if (btnDef.type === 'select') el = this._createSelect(btnDef);
         else if (btnDef.type === 'grid') el = this._createGridPicker(btnDef);
@@ -653,6 +669,16 @@ export class Toolbar {
   // ---------------------------------------------------------------------------
 
   refresh() {
+    // Debounce via rAF — multiple rapid calls (e.g. afterCommand + button click)
+    // collapse into a single update per animation frame.
+    if (this._refreshRaf) cancelAnimationFrame(this._refreshRaf);
+    this._refreshRaf = requestAnimationFrame(() => {
+      this._refreshRaf = null;
+      this._doRefresh();
+    });
+  }
+
+  _doRefresh() {
     if (!this.el) return;
     const btnMap = this._btnMap || new Map();
 
@@ -700,4 +726,23 @@ export class Toolbar {
   hide() {
     if (this.el) this.el.style.display = 'none';
   }
+
+  /**
+   * Tears down and re-renders the toolbar in-place.
+   * Call after registering new buttons post-create via context.use(plugin)
+   * or AutumnNote.registerButton() to make them appear in the toolbar.
+   */
+  rebuild() {
+    if (this._refreshRaf) { cancelAnimationFrame(this._refreshRaf); this._refreshRaf = null; }
+    this._disposers.forEach((d) => d());
+    this._disposers = [];
+    if (this.el) this.el.innerHTML = '';
+    this._faReady = this._detectFontAwesome();
+    this._buildButtons();
+    this._btnMap = new Map(
+      (this.options.toolbar || []).flat()
+        .map(_resolveBtn).filter(Boolean).map((b) => [b.name, b]),
+    );
+    this.refresh();
+  }
 }