autumnnote 1.0.4 → 1.0.6

package/src/js/module/TableTooltip.js

@@ -74,6 +74,7 @@ const ICONS = {
   mergeCells:  `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="8" height="10" rx="1"/><rect x="14" y="7" width="8" height="10" rx="1"/><path d="M10 12h4"/><path d="M12 10l2 2-2 2"/></svg>`,
   colWidth:    `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="4" x2="7" y2="20"/><line x1="17" y1="4" x2="17" y2="20"/><line x1="7" y1="12" x2="17" y2="12"/><path d="M10 9l-3 3 3 3"/><path d="M14 9l3 3-3 3"/></svg>`,
   rowHeight:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="17" x2="20" y2="17"/><line x1="12" y1="7" x2="12" y2="17"/><path d="M9 10l3-3 3 3"/><path d="M9 14l3 3 3-3"/></svg>`,
+  tableBorder: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6" stroke-width="1"/><line x1="3" y1="13" x2="21" y2="13" stroke-width="2"/><line x1="3" y1="20" x2="21" y2="20" stroke-width="3"/></svg>`,
   deleteTable: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/><line x1="16" y1="16" x2="22" y2="22" stroke="#ef4444"/><line x1="22" y1="16" x2="16" y2="22" stroke="#ef4444"/></svg>`,
 };
 
@@ -320,8 +321,9 @@ export class TableTooltip {
     el.appendChild(this._sep());
 
     // Resize
-    el.appendChild(this._makeBtn(ICONS.colWidth,  'Column Width', () => this._openSizePopover('col')));
-    el.appendChild(this._makeBtn(ICONS.rowHeight, 'Row Height',   () => this._openSizePopover('row')));
+    el.appendChild(this._makeBtn(ICONS.colWidth,   'Column Width',      () => this._openSizePopover('col')));
+    el.appendChild(this._makeBtn(ICONS.rowHeight,  'Row Height',        () => this._openSizePopover('row')));
+    el.appendChild(this._makeBtn(ICONS.tableBorder,'Table Border Width',() => this._openSizePopover('border')));
 
     el.appendChild(this._sep());
 
@@ -641,30 +643,59 @@ export class TableTooltip {
   _openSizePopover(type) {
     const cell = this._getCell();
     if (!cell || !this._sizePopover) return;
-    const isCol = type === 'col';
-    this._sizeTitleEl.textContent = isCol ? 'Column Width (px)' : 'Row Height (px)';
-    this._sizeInputEl.value = isCol
-      ? (cell.offsetWidth || 120)
-      : (cell.closest('tr') ? (cell.closest('tr').offsetHeight || 40) : 40);
-
-    this._sizeApply = (val) => {
-      if (isCol) {
-        const table        = cell.closest('table');
-        const visualColIdx = getVisualColIndex(cell);
-        const rows  = Array.from(table.querySelectorAll('tr'));
-        // Batch reads, then writes
-        const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
-        cells.forEach(c => {
-          if (c) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
-        });
-      } else {
-        const row = cell.closest('tr');
-        if (row) {
-          for (const c of row.cells) { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; }
+
+    if (type === 'border') {
+      const table = cell.closest('table');
+      if (!table) return;
+      // Read current inline border-width, fall back to computed value, then default 1px
+      const firstCell = table.querySelector('td, th');
+      const currentPx = firstCell
+        ? (parseInt(firstCell.style.borderWidth, 10) ||
+           parseInt(window.getComputedStyle(firstCell).borderWidth, 10) || 1)
+        : 1;
+      this._sizeTitleEl.textContent = 'Table Border Width (px)';
+      this._sizeInputEl.min   = '0';
+      this._sizeInputEl.max   = '10';
+      this._sizeInputEl.value = currentPx;
+      this._sizeApply = (val) => {
+        // Apply border-width to every cell; with border-collapse:collapse this
+        // controls all grid lines including the outer table border.
+        // Setting only borderWidth preserves the existing border-color from CSS.
+        const cells = Array.from(table.querySelectorAll('td, th'));
+        if (val === 0) {
+          cells.forEach(c => { c.style.borderWidth = '0'; c.style.borderStyle = 'none'; });
+        } else {
+          cells.forEach(c => { c.style.borderWidth = `${val}px`; c.style.borderStyle = 'solid'; });
         }
-      }
-      this.context.invoke('editor.afterCommand');
-    };
+        this.context.invoke('editor.afterCommand');
+      };
+    } else {
+      const isCol = type === 'col';
+      this._sizeTitleEl.textContent = isCol ? 'Column Width (px)' : 'Row Height (px)';
+      this._sizeInputEl.min   = '1';
+      this._sizeInputEl.max   = '2000';
+      this._sizeInputEl.value = isCol
+        ? (cell.offsetWidth || 120)
+        : (cell.closest('tr') ? (cell.closest('tr').offsetHeight || 40) : 40);
+      this._sizeApply = (val) => {
+        if (isCol) {
+          const table        = cell.closest('table');
+          const visualColIdx = getVisualColIndex(cell);
+          const rows  = Array.from(table.querySelectorAll('tr'));
+          // Batch reads, then writes
+          const cells = rows.map(r => getCellAtVisualCol(r, visualColIdx));
+          cells.forEach(c => {
+            if (c) { c.style.width = `${val}px`; c.style.minWidth = `${val}px`; }
+          });
+        } else {
+          const row = cell.closest('tr');
+          if (row) {
+            for (const c of row.cells) { c.style.height = `${val}px`; c.style.minHeight = `${val}px`; }
+          }
+        }
+        this.context.invoke('editor.afterCommand');
+      };
+    }
 
     this._sizePopover.style.display = 'block';
     requestAnimationFrame(() => {

package/src/js/module/Toolbar.js

@@ -11,6 +11,97 @@ import { createElement, on } from '../core/dom.js';
 // auto-injects its own FA <link> for the icon-picker glyph rendering.
 let _faPageLevelReady = null;
 
+// ---------------------------------------------------------------------------
+// Module-level icon lookup tables — built once, shared across all instances.
+// Previously these were re-created inside _createButton() on every button
+// render, producing O(buttons × map-size) allocations per toolbar init.
+// ---------------------------------------------------------------------------
+const _S = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
+const _svgWrap = (paths) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" ${_S} style="display:block">${paths}</svg>`;
+
+const _SVG_MAP = new Map([
+  // Format
+  ['bold',          _svgWrap('<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/>')],
+  ['italic',        _svgWrap('<line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>')],
+  ['underline',     _svgWrap('<path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/>')],
+  ['strikethrough', _svgWrap('<path d="M17.3 12H6.7"/><path d="M10 6.5C10 5.1 11.1 4 12.5 4c1.4 0 2.5 1.1 2.5 2.5 0 .8-.4 1.5-1 2"/><path d="M14 17.5C14 19 12.9 20 11.5 20 10.1 20 9 18.9 9 17.5c0-.8.4-1.5 1-2"/>')],
+  ['superscript',   _svgWrap('<path d="m4 19 8-8"/><path d="m12 19-8-8"/><path d="M20 12h-4c0-1.5.44-2 1.5-2.5S20 8.33 20 7.25C20 6 19 5 17.5 5S15 6 15 7"/>')],
+  ['subscript',     _svgWrap('<path d="m4 5 8 8"/><path d="m12 5-8 8"/><path d="M20 21h-4c0-1.5.44-2 1.5-2.5S20 17.33 20 16.25C20 15 19 14 17.5 14S15 15 15 16"/>')],
+  // Alignment
+  ['align-left',    _svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/>')],
+  ['align-center',  _svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="18" y1="12" x2="6" y2="12"/><line x1="21" y1="18" x2="3" y2="18"/>')],
+  ['align-right',   _svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="9" y2="12"/><line x1="21" y1="18" x2="7" y2="18"/>')],
+  ['align-justify', _svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="3" y2="12"/><line x1="21" y1="18" x2="3" y2="18"/>')],
+  // Lists
+  ['list-ul',       _svgWrap('<line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none"/>')],
+  ['list-ol',       _svgWrap('<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1V3"/><path d="M4 10h2l-2 2h2"/><path d="M4 16.5A1.5 1.5 0 0 1 5.5 15a1.5 1.5 0 0 1 0 3H4"/>')],
+  ['indent',        _svgWrap('<polyline points="3 8 7 12 3 16"/><line x1="21" y1="12" x2="11" y2="12"/><line x1="21" y1="6" x2="11" y2="6"/><line x1="21" y1="18" x2="11" y2="18"/>')],
+  ['outdent',       _svgWrap('<polyline points="7 8 3 12 7 16"/><line x1="21" y1="12" x2="11" y2="12"/><line x1="21" y1="6" x2="11" y2="6"/><line x1="21" y1="18" x2="11" y2="18"/>')],
+  // History
+  ['undo',          _svgWrap('<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>')],
+  ['redo',          _svgWrap('<path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/>')],
+  // Insert
+  ['minus',         _svgWrap('<line x1="5" y1="12" x2="19" y2="12"/>')],
+  ['link',          _svgWrap('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>')],
+  ['image',         _svgWrap('<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>')],
+  ['video',         _svgWrap('<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>')],
+  ['table',         _svgWrap('<rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/>')],
+  ['emoji',         _svgWrap('<circle cx="12" cy="12" r="10"/><path d="M8.5 14.5s1.5 2.5 3.5 2.5 3.5-2.5 3.5-2.5"/><circle cx="9" cy="9" r="1.5" fill="currentColor" stroke="none"/><circle cx="15" cy="9" r="1.5" fill="currentColor" stroke="none"/>')],
+  ['icon',          _svgWrap('<circle cx="8" cy="8" r="3"/><circle cx="16" cy="8" r="3"/><rect x="5" y="13" width="6" height="6" rx="1"/><rect x="13" y="13" width="6" height="6" rx="1"/>')],
+  // View
+  ['code',          _svgWrap('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>')],
+  ['expand',        _svgWrap('<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>')],
+  // Color pickers
+  ['foreColor',     _svgWrap('<path d="M4 20L12 4L20 20"/><line x1="7.5" y1="14" x2="16.5" y2="14"/>')],
+  ['backColor',     _svgWrap('<path d="M3 21v-4l9-9 4 4-9 9z"/><path d="M12 8l4 4"/>')],
+  ['keyboard',      _svgWrap('<rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="10" x2="6" y2="10" stroke-width="2.5"/><line x1="10" y1="10" x2="10" y2="10" stroke-width="2.5"/><line x1="14" y1="10" x2="14" y2="10" stroke-width="2.5"/><line x1="18" y1="10" x2="18" y2="10" stroke-width="2.5"/><line x1="8" y1="14" x2="16" y2="14" stroke-width="2"/>')],
+  ['caption',       _svgWrap('<rect x="3" y="3" width="18" height="11" rx="2"/><line x1="6" y1="18" x2="18" y2="18"/><line x1="9" y1="21" x2="15" y2="21"/>')],
+  ['remove-format', _svgWrap('<path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/>')],
+  ['direction',     _svgWrap('<path d="M12 20V4"/><path d="m9 7-3 3 3 3"/><path d="M4 10h8"/><path d="m15 7 3 3-3 3"/><path d="M20 10h-8"/>')],
+  ['search',        _svgWrap('<circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>')],
+  ['find-replace',  _svgWrap('<circle cx="10" cy="10" r="6"/><line x1="18" y1="18" x2="14.35" y2="14.35"/><path d="M16 19h6"/><path d="M19 16v6"/>')],
+  ['inline-code',   _svgWrap('<path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2a2 2 0 0 1-2 2v5a2 2 0 0 1-2 2h-1"/>')],
+  ['checklist',     _svgWrap('<rect x="3" y="4" width="5" height="5" rx="1"/><path d="m4 6.5 1 1 2-2"/><rect x="3" y="13" width="5" height="5" rx="1"/><line x1="10" y1="6.5" x2="21" y2="6.5"/><line x1="10" y1="15.5" x2="21" y2="15.5"/>')],
+  ['print',         _svgWrap('<path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>')],
+]);
+
+const _FA_MAP = new Map([
+  ['bold',          'fa-bold'],
+  ['italic',        'fa-italic'],
+  ['underline',     'fa-underline'],
+  ['strikethrough', 'fa-strikethrough'],
+  ['superscript',   'fa-superscript'],
+  ['subscript',     'fa-subscript'],
+  ['align-left',    'fa-align-left'],
+  ['align-center',  'fa-align-center'],
+  ['align-right',   'fa-align-right'],
+  ['align-justify', 'fa-align-justify'],
+  ['list-ul',       'fa-list-ul'],
+  ['list-ol',       'fa-list-ol'],
+  ['indent',        'fa-indent'],
+  ['outdent',       'fa-outdent'],
+  ['undo',          'fa-rotate-left'],
+  ['redo',          'fa-rotate-right'],
+  ['minus',         'fa-minus'],
+  ['link',          'fa-link'],
+  ['image',         'fa-image'],
+  ['code',          'fa-code'],
+  ['expand',        'fa-expand'],
+  ['emoji',         'fa-face-smile'],
+  ['icon',          'fa-icons'],
+  ['foreColor',     'fa-font'],
+  ['backColor',     'fa-highlighter'],
+  ['keyboard',      'fa-keyboard'],
+  ['remove-format', 'fa-remove-format'],
+  ['direction',     'fa-arrow-right-arrow-left'],
+  ['search',        'fa-magnifying-glass'],
+  ['find-replace',  'fa-magnifying-glass-plus'],
+  ['inline-code',   'fa-code'],
+  ['checklist',     'fa-list-check'],
+  ['print',         'fa-print'],
+]);
+
 export class Toolbar {
   /**
    * @param {import('../Context.js').Context} context
@@ -55,6 +146,9 @@ export class Toolbar {
 
   _buildButtons() {
     const toolbar = this.options.toolbar || [];
+    // Build into a DocumentFragment so all groups are appended in a single
+    // DOM operation, avoiding one reflow per group.
+    const fragment = document.createDocumentFragment();
     toolbar.forEach((group) => {
       const groupEl = createElement('div', { class: 'an-btn-group' });
       group.forEach((btnDef) => {
@@ -65,8 +159,9 @@ export class Toolbar {
         else el = this._createButton(btnDef);
         groupEl.appendChild(el);
       });
-      this.el.appendChild(groupEl);
+      fragment.appendChild(groupEl);
     });
+    this.el.appendChild(fragment);
   }
 
   /**
@@ -271,10 +366,13 @@ export class Toolbar {
 
     const restoreSelection = () => {
       if (!savedRange) return;
-      const sel = window.getSelection();
-      if (sel) {
+      try {
+        const sel = window.getSelection();
+        if (!sel) return;
         sel.removeAllRanges();
         sel.addRange(savedRange);
+      } catch (_) {
+        // Range target may be detached if DOM changed while popup was open
       }
     };
 
@@ -448,110 +546,23 @@ export class Toolbar {
     });
 
     // Render icon: prefer FontAwesome if enabled; otherwise fall back to SVG or text.
-
-    // Heroicons-style stroke SVGs — consistent with context menu icons
-    const S = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
-    const svgWrap = (paths) => `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" ${S} style="display:block">${paths}</svg>`;
-
-    const svgMap = new Map([
-      // Format
-      ['bold',          svgWrap('<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/>')],
-      ['italic',        svgWrap('<line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/>')],
-      ['underline',     svgWrap('<path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/>')],
-      ['strikethrough', svgWrap('<path d="M17.3 12H6.7"/><path d="M10 6.5C10 5.1 11.1 4 12.5 4c1.4 0 2.5 1.1 2.5 2.5 0 .8-.4 1.5-1 2"/><path d="M14 17.5C14 19 12.9 20 11.5 20 10.1 20 9 18.9 9 17.5c0-.8.4-1.5 1-2"/>')],
-      ['superscript',   svgWrap('<path d="m4 19 8-8"/><path d="m12 19-8-8"/><path d="M20 12h-4c0-1.5.44-2 1.5-2.5S20 8.33 20 7.25C20 6 19 5 17.5 5S15 6 15 7"/>')],
-      ['subscript',     svgWrap('<path d="m4 5 8 8"/><path d="m12 5-8 8"/><path d="M20 21h-4c0-1.5.44-2 1.5-2.5S20 17.33 20 16.25C20 15 19 14 17.5 14S15 15 15 16"/>')],
-      // Alignment
-      ['align-left',    svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="15" y1="12" x2="3" y2="12"/><line x1="17" y1="18" x2="3" y2="18"/>')],
-      ['align-center',  svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="18" y1="12" x2="6" y2="12"/><line x1="21" y1="18" x2="3" y2="18"/>')],
-      ['align-right',   svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="9" y2="12"/><line x1="21" y1="18" x2="7" y2="18"/>')],
-      ['align-justify', svgWrap('<line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="12" x2="3" y2="12"/><line x1="21" y1="18" x2="3" y2="18"/>')],
-      // Lists
-      ['list-ul',       svgWrap('<line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none"/>')],
-      ['list-ol',       svgWrap('<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1V3"/><path d="M4 10h2l-2 2h2"/><path d="M4 16.5A1.5 1.5 0 0 1 5.5 15a1.5 1.5 0 0 1 0 3H4"/>')],
-      ['indent',        svgWrap('<polyline points="3 8 7 12 3 16"/><line x1="21" y1="12" x2="11" y2="12"/><line x1="21" y1="6" x2="11" y2="6"/><line x1="21" y1="18" x2="11" y2="18"/>')],
-      ['outdent',       svgWrap('<polyline points="7 8 3 12 7 16"/><line x1="21" y1="12" x2="11" y2="12"/><line x1="21" y1="6" x2="11" y2="6"/><line x1="21" y1="18" x2="11" y2="18"/>')],
-      // History
-      ['undo',          svgWrap('<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>')],
-      ['redo',          svgWrap('<path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"/>')],
-      // Insert
-      ['minus',         svgWrap('<line x1="5" y1="12" x2="19" y2="12"/>')],
-      ['link',          svgWrap('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>')],
-      ['image',         svgWrap('<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>')],
-      ['video',         svgWrap('<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/>')],
-      ['table',         svgWrap('<rect x="3" y="3" width="18" height="18" rx="1"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/>')],
-      ['emoji',         svgWrap('<circle cx="12" cy="12" r="10"/><path d="M8.5 14.5s1.5 2.5 3.5 2.5 3.5-2.5 3.5-2.5"/><circle cx="9" cy="9" r="1.5" fill="currentColor" stroke="none"/><circle cx="15" cy="9" r="1.5" fill="currentColor" stroke="none"/>')],
-      ['icon',          svgWrap('<circle cx="8" cy="8" r="3"/><circle cx="16" cy="8" r="3"/><rect x="5" y="13" width="6" height="6" rx="1"/><rect x="13" y="13" width="6" height="6" rx="1"/>')],
-      // View
-      ['code',          svgWrap('<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>')],
-      ['expand',        svgWrap('<polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>')],
-      // Color pickers
-      ['foreColor',     svgWrap('<path d="M4 20L12 4L20 20"/><line x1="7.5" y1="14" x2="16.5" y2="14"/>')],
-      ['backColor',     svgWrap('<path d="M3 21v-4l9-9 4 4-9 9z"/><path d="M12 8l4 4"/>')],
-      ['keyboard',      svgWrap('<rect x="2" y="6" width="20" height="12" rx="2"/><line x1="6" y1="10" x2="6" y2="10" stroke-width="2.5"/><line x1="10" y1="10" x2="10" y2="10" stroke-width="2.5"/><line x1="14" y1="10" x2="14" y2="10" stroke-width="2.5"/><line x1="18" y1="10" x2="18" y2="10" stroke-width="2.5"/><line x1="8" y1="14" x2="16" y2="14" stroke-width="2"/>')],
-      ['caption',      svgWrap('<rect x="3" y="3" width="18" height="11" rx="2"/><line x1="6" y1="18" x2="18" y2="18"/><line x1="9" y1="21" x2="15" y2="21"/>')],
-      ['remove-format', svgWrap('<path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/>')],
-      ['direction',     svgWrap('<path d="M12 20V4"/><path d="m9 7-3 3 3 3"/><path d="M4 10h8"/><path d="m15 7 3 3-3 3"/><path d="M20 10h-8"/>')],
-      ['search',        svgWrap('<circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>')],
-      ['find-replace',  svgWrap('<circle cx="10" cy="10" r="6"/><line x1="18" y1="18" x2="14.35" y2="14.35"/><path d="M16 19h6"/><path d="M19 16v6"/>')],
-      ['inline-code',   svgWrap('<path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 3h1a2 2 0 0 1 2 2v5c0 1.1.9 2 2 2a2 2 0 0 1-2 2v5a2 2 0 0 1-2 2h-1"/>')],
-      ['checklist',     svgWrap('<rect x="3" y="4" width="5" height="5" rx="1"/><path d="m4 6.5 1 1 2-2"/><rect x="3" y="13" width="5" height="5" rx="1"/><line x1="10" y1="6.5" x2="21" y2="6.5"/><line x1="10" y1="15.5" x2="21" y2="15.5"/>')],
-      ['print',         svgWrap('<path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>')],
-    ]);
-
     const faPrefix = this.options.fontAwesomeClass || 'fas';
-    const faMap = new Map([
-      ['bold', 'fa-bold'],
-      ['italic', 'fa-italic'],
-      ['underline', 'fa-underline'],
-      ['strikethrough', 'fa-strikethrough'],
-      ['superscript', 'fa-superscript'],
-      ['subscript', 'fa-subscript'],
-      ['align-left', 'fa-align-left'],
-      ['align-center', 'fa-align-center'],
-      ['align-right', 'fa-align-right'],
-      ['align-justify', 'fa-align-justify'],
-      ['list-ul', 'fa-list-ul'],
-      ['list-ol', 'fa-list-ol'],
-      ['indent', 'fa-indent'],
-      ['outdent', 'fa-outdent'],
-      ['undo', 'fa-rotate-left'],
-      ['redo', 'fa-rotate-right'],
-      ['minus', 'fa-minus'],
-      ['link', 'fa-link'],
-      ['image', 'fa-image'],
-      ['code', 'fa-code'],
-      ['expand', 'fa-expand'],
-      ['emoji', 'fa-face-smile'],
-      ['icon', 'fa-icons'],
-      ['foreColor', 'fa-font'],
-      ['backColor', 'fa-highlighter'],
-      ['keyboard',      'fa-keyboard'],
-      ['remove-format', 'fa-remove-format'],
-      ['direction',     'fa-arrow-right-arrow-left'],
-      ['search',        'fa-magnifying-glass'],
-      ['find-replace',  'fa-magnifying-glass-plus'],
-      ['inline-code',   'fa-code'],
-      ['checklist',     'fa-list-check'],
-      ['print',         'fa-print'],
-    ]);
-
     const useFaNow = this._faReady;
     if (useFaNow) {
-      const faName = faMap.get(btnDef.icon) || faMap.get(btnDef.name) || null;
+      const faName = _FA_MAP.get(btnDef.icon) || _FA_MAP.get(btnDef.name) || null;
       if (faName) {
         btn.innerHTML = `<i class="${faPrefix} ${faName}" aria-hidden="true"></i>`;
-      } else if (svgMap.has(btnDef.icon)) {
-        btn.innerHTML = svgMap.get(btnDef.icon);
+      } else if (_SVG_MAP.has(btnDef.icon)) {
+        btn.innerHTML = _SVG_MAP.get(btnDef.icon);
       } else {
         btn.textContent = btnDef.icon || btnDef.name;
       }
     } else {
       // FontAwesome absent: use SVG fallback when available
-      if (svgMap.has(btnDef.icon)) {
-        btn.innerHTML = svgMap.get(btnDef.icon);
-      } else if (svgMap.has(btnDef.name)) {
-        btn.innerHTML = svgMap.get(btnDef.name);
+      if (_SVG_MAP.has(btnDef.icon)) {
+        btn.innerHTML = _SVG_MAP.get(btnDef.icon);
+      } else if (_SVG_MAP.has(btnDef.name)) {
+        btn.innerHTML = _SVG_MAP.get(btnDef.name);
       } else {
         btn.textContent = btnDef.icon || btnDef.name;
       }

package/src/styles/autumnnote.scss

@@ -969,6 +969,55 @@
   .an-resize-w  { top: calc(50% - 4px);  left: -4px;             cursor: w-resize;  }
 }
 
+// ---------------------------------------------------------------------------
+// Image crop overlay
+// ---------------------------------------------------------------------------
+
+// The scrim and crop box are appended to <body> and positioned fixed, so they
+// live outside .an-container. All styles are standalone (no SCSS nesting).
+
+.an-crop-scrim {
+  // Inline styles handle position/z-index/background for performance;
+  // clip-path is updated by JS every frame so we only declare the transition.
+  transition: clip-path 0s; // disable transition — updated synchronously on drag
+}
+
+.an-crop-box {
+  // Core layout & interaction via inline styles in JS (position changes every drag frame).
+  // Only declare the animated ring so it stays in sync with $an-primary.
+  outline: none !important;
+
+  // Subtle inner shadow that frames the "live" area
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45),
+              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.an-crop-handle {
+  // Inline styles handle size/position; declare hover highlight only.
+  &:hover, &:active {
+    background: #74affa !important; // $an-primary lightened ~14%
+  }
+}
+
+.an-crop-toolbar {
+  // Inline styles handle position; add a subtle entrance animation.
+  animation: an-crop-toolbar-in 0.12s ease;
+}
+
+@keyframes an-crop-toolbar-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+// Hide canvas-based crop overlay when printing
+@media print {
+  .an-crop-scrim,
+  .an-crop-box,
+  .an-crop-toolbar {
+    display: none !important;
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Video resize overlay
 // ---------------------------------------------------------------------------

package/types/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * AutumnNote – TypeScript declarations
- * @version 1.0.0
+ * @version 1.0.4
  */
 
 // ---------------------------------------------------------------------------
@@ -21,7 +21,7 @@ export interface AsnOptions {
   /** Show the resize handle in the statusbar. */
   resizable?: boolean;
   /** Toolbar button group configuration. */
-  toolbar?: Array<Array<ButtonDef | DropdownDef>>;
+  toolbar?: Array<Array<ToolbarItemDef>>;
   /** Use Bootstrap button classes on toolbar buttons. */
   useBootstrap?: boolean;
   /** CSS class(es) applied to Bootstrap toolbar buttons. */
@@ -127,6 +127,34 @@ export interface ButtonDef {
   className?: string;
 }
 
+export interface GridButtonDef {
+  /** Unique identifier used in toolbar config arrays. */
+  name: string;
+  /** Discriminator for table grid picker buttons. */
+  type: 'grid';
+  /** Icon identifier (maps to SVG or Font Awesome class). */
+  icon: string;
+  /** Tooltip text. */
+  tooltip: string;
+  /** Action executed when a grid size is selected. */
+  action: (context: Context, rows: number, cols: number) => void;
+}
+
+export interface ColorPickerDef {
+  /** Unique identifier used in toolbar config arrays. */
+  name: string;
+  /** Discriminator for split color picker buttons. */
+  type: 'colorpicker';
+  /** Icon identifier (maps to SVG or Font Awesome class). */
+  icon: string;
+  /** Tooltip text. */
+  tooltip: string;
+  /** Default color shown in the picker. */
+  defaultColor: string;
+  /** Action executed when a color is selected/applied. */
+  action: (context: Context, color: string) => void;
+}
+
 export interface DropdownDef {
   /** Unique identifier. */
   name: string;
@@ -135,13 +163,31 @@ export interface DropdownDef {
   /** Tooltip text. */
   tooltip: string;
   /** Static item list (may be overridden at render time from options). */
-  items?: string[];
+  items?: Array<string | { value: string; label: string }>;
   /** Action executed when a value is selected. */
   action: (context: Context, value: string) => void;
   /** Returns the current value to show as selected. */
   getValue?: (context: Context) => string;
 }
 
+export type ToolbarItemDef = ButtonDef | DropdownDef | GridButtonDef | ColorPickerDef;
+
+// ---------------------------------------------------------------------------
+// Entry-point re-exports
+// ---------------------------------------------------------------------------
+
+/** Runtime default options object (same export as `src/js/index.js`). */
+export declare const defaultOptions: Required<AsnOptions>;
+
+// Re-export core utility modules exposed by the package entry-point.
+export * from '../src/js/core/dom.js';
+export * from '../src/js/core/range.js';
+export * from '../src/js/core/func.js';
+export * from '../src/js/core/key.js';
+export * from '../src/js/core/lists.js';
+export * from '../src/js/core/env.js';
+export * from '../src/js/core/sanitise.js';
+
 // ---------------------------------------------------------------------------
 // Context — per-instance editor hub
 // ---------------------------------------------------------------------------
@@ -263,8 +309,7 @@ export declare const hrBtn: ButtonDef;
 export declare const linkBtn: ButtonDef;
 export declare const imageBtn: ButtonDef;
 export declare const videoBtn: ButtonDef;
-export declare const tableBtn: ButtonDef;
-export declare const codeBlockBtn: ButtonDef;
+export declare const tableBtn: GridButtonDef;
 export declare const codeviewBtn: ButtonDef;
 export declare const fullscreenBtn: ButtonDef;
 export declare const emojiBtn: ButtonDef;
@@ -272,16 +317,18 @@ export declare const iconBtn: ButtonDef;
 export declare const shortcutsBtn: ButtonDef;
 export declare const findBtn: ButtonDef;
 export declare const findReplaceBtn: ButtonDef;
+export declare const inlineCodeBtn: ButtonDef;
+export declare const checklistBtn: ButtonDef;
+export declare const printBtn: ButtonDef;
 export declare const removeFormatBtn: ButtonDef;
 export declare const directionBtn: ButtonDef;
 export declare const fontFamilyBtn: DropdownDef;
 export declare const fontSizeBtn: DropdownDef;
-export declare const headingBtn: DropdownDef;
 export declare const lineHeightBtn: DropdownDef;
 export declare const paragraphStyleBtn: DropdownDef;
-export declare const foreColorBtn: DropdownDef;
-export declare const backColorBtn: DropdownDef;
-export declare const defaultToolbar: Array<Array<ButtonDef | DropdownDef>>;
+export declare const foreColorBtn: ColorPickerDef;
+export declare const backColorBtn: ColorPickerDef;
+export declare const defaultToolbar: Array<Array<ToolbarItemDef>>;
 
 // ---------------------------------------------------------------------------
 // Main AutumnNote API