autumnnote 1.4.2 → 1.6.0

package/src/js/module/EmojiDialog.js

@@ -3,7 +3,7 @@
  * Click an emoji to insert it directly at the caret — no extra "Insert" step.
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 // ---------------------------------------------------------------------------
@@ -566,19 +566,23 @@ export class EmojiDialog {
 
     // Title row
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
+    const titleGroup = createElement('div', { class: 'an-dialog-title-group' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon an-dialog-icon--sm' });
+    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 13s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`;
     const title = createElement('h3', { class: 'an-dialog-title' });
     title.textContent = L.title;
+    titleGroup.append(iconEl, title);
     const closeBtn = createElement('button', { type: 'button', class: 'an-icon-close', 'aria-label': L.close });
     closeBtn.innerHTML = '&times;';
-    titleRow.append(title, closeBtn);
+    titleRow.append(titleGroup, closeBtn);
 
     // Search
-    const searchInput = createElement('input', {
+    const searchInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'search',
       class: 'an-input an-icon-search',
       placeholder: L.searchPlaceholder,
       autocomplete: 'off',
-    });
+    }));
     this._searchInput = searchInput;
 
     // Category tabs
@@ -617,6 +621,7 @@ export class EmojiDialog {
 
     box.append(titleRow, searchInput, catBar, grid, btnRow);
     overlay.appendChild(box);
+    makeDraggable(titleRow, box);
 
     // Events
     const d1 = on(closeBtn,    'click',  () => this._close());
@@ -624,7 +629,7 @@ export class EmojiDialog {
     const d3 = on(overlay,     'click',  (e) => { if (e.target === overlay) this._close(); });
     const d4 = on(searchInput, 'input',  () => this._filterEmojis(searchInput.value, this._activeCat));
     const d5 = on(catBar,      'click',  (e) => {
-      const tab = e.target.closest('[data-cat]');
+      const tab = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('[data-cat]'));
       if (tab) {
         this._activeCat = tab.dataset.cat;
         this._updateCatTabs();
@@ -632,7 +637,7 @@ export class EmojiDialog {
       }
     });
     const d6 = on(grid, 'click', (e) => {
-      const cell = e.target.closest('.an-emoji-cell');
+      const cell = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-emoji-cell'));
       if (cell) this._onEmojiClick(cell.dataset.char);
     });
     this._disposers.push(d1, d2, d3, d4, d5, d6);
@@ -645,7 +650,7 @@ export class EmojiDialog {
 
   _updateCatTabs() {
     this._catBar.querySelectorAll('.an-icon-cat').forEach((tab) => {
-      tab.classList.toggle('active', tab.dataset.cat === this._activeCat);
+      tab.classList.toggle('active', /** @type {HTMLElement} */ (tab).dataset.cat === this._activeCat);
     });
   }
 
@@ -653,10 +658,11 @@ export class EmojiDialog {
     const q = (query || '').trim().toLowerCase();
     let count = 0;
     this._grid.querySelectorAll('.an-emoji-cell').forEach((cell) => {
-      const matchCat   = !cat || cat === 'all' || cell.dataset.cat === cat;
-      const matchQuery = !q || cell.dataset.keywords.includes(q) || cell.dataset.char === q;
+      const hCell = /** @type {HTMLElement} */ (cell);
+      const matchCat   = !cat || cat === 'all' || hCell.dataset.cat === cat;
+      const matchQuery = !q || hCell.dataset.keywords.includes(q) || hCell.dataset.char === q;
       const visible = matchCat && matchQuery;
-      cell.style.display = visible ? '' : 'none';
+      hCell.style.display = visible ? '' : 'none';
       if (visible) count++;
     });
     let empty = this._grid.querySelector('.an-icon-empty');
@@ -665,7 +671,7 @@ export class EmojiDialog {
       empty.textContent = 'No emojis found';
       this._grid.appendChild(empty);
     }
-    empty.style.display = count > 0 ? 'none' : '';
+    /** @type {HTMLElement} */ (empty).style.display = count > 0 ? 'none' : '';
   }
 
   // ---------------------------------------------------------------------------
@@ -694,8 +700,8 @@ export class EmojiDialog {
     // deleteContents() can drift the range endpoint outside the cell in some
     // browsers.  Save the cell reference first and re-anchor after deletion.
     const _sc = range.startContainer;
-    const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)
-      ?.closest?.('td, th');
+    const _tdAnchor = /** @type {Element|null} */ (_sc.nodeType === 1 ? _sc : _sc.parentElement)
+      ?.closest('td, th');
     range.deleteContents();
     if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
       range.setStart(_tdAnchor, 0);

package/src/js/module/FindReplace.js

@@ -7,7 +7,7 @@
  * single / replace-all replacement.
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 
 export class FindReplace {
   /** @param {import('../Context.js').Context} context */
@@ -120,8 +120,8 @@ export class FindReplace {
     const title = this._dialog.querySelector('.an-dialog-title');
 
     const isReplace = this._mode === 'replace';
-    if (replaceRow) replaceRow.style.display = isReplace ? '' : 'none';
-    if (replaceActions) replaceActions.style.display = isReplace ? '' : 'none';
+    if (replaceRow) /** @type {HTMLElement} */ (replaceRow).style.display = isReplace ? '' : 'none';
+    if (replaceActions) /** @type {HTMLElement} */ (replaceActions).style.display = isReplace ? '' : 'none';
     if (title) title.textContent = isReplace ? this.context.locale.findReplace.findReplaceTitle : this.context.locale.findReplace.findTitle;
   }
 
@@ -137,107 +137,133 @@ export class FindReplace {
       'aria-modal': 'true',
       'aria-label': L.findReplaceTitle,
     });
-    const box = createElement('div', { class: 'an-dialog-box' });
+    const box = createElement('div', { class: 'an-dialog-box an-fr-box' });
 
-    // ---- Title row ----
-    const titleRow = createElement('div', { class: 'an-icon-title-row' });
+    // ---- Header: [icon][title]  [×] ----
+    const header = createElement('div', { class: 'an-fr-header' });
+    const titleGroup = createElement('div', { class: 'an-dialog-title-group' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon an-dialog-icon--sm' });
+    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`;
     const title = createElement('h3', { class: 'an-dialog-title' });
     title.textContent = L.findTitle;
+    titleGroup.append(iconEl, title);
     const closeBtn = createElement('button', {
       type: 'button',
       class: 'an-icon-close',
-      'aria-label': 'Close',
+      title: L.close,
+      'aria-label': L.close,
     });
-    closeBtn.textContent = L.close;
+    closeBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
     this._closeBtn = closeBtn;
-    titleRow.append(title, closeBtn);
-    box.appendChild(titleRow);
+    header.append(titleGroup, closeBtn);
+    box.appendChild(header);
 
-    // ---- Find row ----
-    const findRow = createElement('div', { class: 'an-fr-find-row' });
-    const findInput = createElement('input', {
+    // ---- Search bar: [input] [Aa] [↑] [↓]  counter ----
+    const searchBar = createElement('div', { class: 'an-fr-search-bar' });
+    const findInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'text',
-      class: 'an-input',
+      class: 'an-input an-fr-input',
       placeholder: L.findPlaceholder,
       'aria-label': L.searchAriaLabel,
-    });
+    }));
     this._findInput = findInput;
-    findRow.appendChild(findInput);
-    box.appendChild(findRow);
 
-    // ---- Options row (case-sensitive toggle + match counter) ----
-    const optRow = createElement('div', { class: 'an-fr-options-row' });
-    const caseLabel = createElement('label', { class: 'an-label an-label-inline' });
-    const caseCheckbox = createElement('input', {
+    // Case-sensitive toggle (visual button; hidden checkbox kept for state)
+    const caseCheckbox = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'checkbox',
+      style: 'display:none',
+      'aria-hidden': 'true',
+    }));
+    this._caseCheckbox = caseCheckbox;
+    const caseBtn = createElement('button', {
+      type: 'button',
+      class: 'an-fr-icon-btn',
+      title: 'Case sensitive',
       'aria-label': 'Case sensitive',
     });
-    this._caseCheckbox = caseCheckbox;
-    caseLabel.append(caseCheckbox, document.createTextNode(L.caseSensitive));
+    caseBtn.textContent = 'Aa';
+
+    const prevBtn = createElement('button', {
+      type: 'button',
+      class: 'an-fr-icon-btn',
+      title: 'Previous (Shift+Enter)',
+      'aria-label': 'Previous',
+    });
+    prevBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>`;
+
+    const nextBtn = createElement('button', {
+      type: 'button',
+      class: 'an-fr-icon-btn',
+      title: 'Next (Enter)',
+      'aria-label': 'Next',
+    });
+    nextBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
+
     const counter = createElement('span', { class: 'an-fr-counter' });
     this._counterEl = counter;
-    optRow.append(caseLabel, counter);
-    box.appendChild(optRow);
-
-    // ---- Find actions ----
-    const findActions = createElement('div', { class: 'an-dialog-actions an-fr-find-actions' });
-    const prevBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    prevBtn.textContent = L.prevBtn;
-    const nextBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    nextBtn.textContent = L.nextBtn;
-    findActions.append(prevBtn, nextBtn);
-    box.appendChild(findActions);
-
-    // ---- Replace row (hidden by default) ----
+
+    searchBar.append(findInput, caseCheckbox, caseBtn, prevBtn, nextBtn, counter);
+    box.appendChild(searchBar);
+
+    // ---- Replace row: [input] [Replace] [All]  (hidden by default) ----
     const replaceRow = createElement('div', { class: 'an-fr-replace-row' });
     replaceRow.style.display = 'none';
-    const replaceInput = createElement('input', {
+    const replaceInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'text',
-      class: 'an-input',
+      class: 'an-input an-fr-input',
       placeholder: L.replacePlaceholder,
       'aria-label': L.replaceAriaLabel,
-    });
+    }));
     this._replaceInput = replaceInput;
-    replaceRow.appendChild(replaceInput);
+    const replaceBtn = createElement('button', { type: 'button', class: 'an-btn an-fr-replace-btn' });
+    replaceBtn.textContent = L.replaceBtn;
+    const replaceAllBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary an-fr-replace-btn' });
+    replaceAllBtn.textContent = L.replaceAllBtn;
+    replaceRow.append(replaceInput, replaceBtn, replaceAllBtn);
     box.appendChild(replaceRow);
 
-    // ---- Replace actions (hidden by default) ----
-    const replaceActions = createElement('div', { class: 'an-dialog-actions an-fr-replace-actions' });
+    // Compat div — _updateMode toggles this; kept empty so existing logic works
+    const replaceActions = createElement('div', { class: 'an-fr-replace-actions' });
     replaceActions.style.display = 'none';
-    const replaceBtn = createElement('button', { type: 'button', class: 'an-btn' });
-    replaceBtn.textContent = L.replaceBtn;
-    const replaceAllBtn = createElement('button', { type: 'button', class: 'an-btn an-btn-primary' });
-    replaceAllBtn.textContent = L.replaceAllBtn;
-    replaceActions.append(replaceBtn, replaceAllBtn);
     box.appendChild(replaceActions);
 
     overlay.appendChild(box);
+    makeDraggable(header, box);
 
     // ---- Event bindings ----
     const d1 = on(closeBtn, 'click', () => this._close());
     const d2 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
     const d3 = on(findInput, 'input', () => this._onSearch());
-    const d4 = on(caseCheckbox, 'change', () => {
+    const d4 = on(caseBtn, 'click', () => {
+      this._caseSensitive = !this._caseSensitive;
+      caseCheckbox.checked = this._caseSensitive;
+      caseBtn.classList.toggle('an-fr-icon-btn--active', this._caseSensitive);
+      this._onSearch();
+    });
+    // Hidden checkbox change handler keeps backward-compat with programmatic toggles
+    const d5 = on(caseCheckbox, 'change', () => {
       this._caseSensitive = caseCheckbox.checked;
+      caseBtn.classList.toggle('an-fr-icon-btn--active', this._caseSensitive);
       this._onSearch();
     });
-    const d5 = on(nextBtn, 'click', () => this._next());
-    const d6 = on(prevBtn, 'click', () => this._prev());
-    const d7 = on(replaceBtn, 'click', () => this._replace());
-    const d8 = on(replaceAllBtn, 'click', () => this._replaceAll());
-    const d9 = on(findInput, 'keydown', (e) => {
-      if (e.key === 'Enter') {
+    const d6 = on(nextBtn, 'click', () => this._next());
+    const d7 = on(prevBtn, 'click', () => this._prev());
+    const d8 = on(replaceBtn, 'click', () => this._replace());
+    const d9 = on(replaceAllBtn, 'click', () => this._replaceAll());
+    const d10 = on(findInput, 'keydown', (e) => {
+      const ke = /** @type {KeyboardEvent} */ (e);
+      if (ke.key === 'Enter') {
         e.preventDefault();
-        e.shiftKey ? this._prev() : this._next();
+        ke.shiftKey ? this._prev() : this._next();
       }
     });
-    const d10 = on(replaceInput, 'keydown', (e) => {
-      if (e.key === 'Enter') {
+    const d11 = on(replaceInput, 'keydown', (e) => {
+      if (/** @type {KeyboardEvent} */ (e).key === 'Enter') {
         e.preventDefault();
         this._replace();
       }
     });
-    this._disposers.push(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10);
+    this._disposers.push(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11);
 
     return overlay;
   }
@@ -331,7 +357,7 @@ export class FindReplace {
       re.lastIndex = 0;
       let m;
       while ((m = re.exec(node.textContent)) !== null && results.length < MAX_RESULTS) {
-        results.push({ node, start: m.index, end: m.index + m[0].length });
+        results.push({ node: /** @type {Text} */ (node), start: m.index, end: m.index + m[0].length });
       }
     }
     return results;

package/src/js/module/Fullscreen.js

@@ -21,7 +21,7 @@ export class Fullscreen {
   initialize() {
     // Press Escape to exit fullscreen
     const d = on(document, 'keydown', (event) => {
-      if (this._active && isKey(event, key.ESCAPE)) {
+      if (this._active && isKey(/** @type {KeyboardEvent} */ (event), key.ESCAPE)) {
         this.deactivate();
       }
     });

package/src/js/module/IconDialog.js

@@ -2,7 +2,7 @@
  * IconDialog.js - Browse and insert FontAwesome Free icons
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 // ---------------------------------------------------------------------------
@@ -281,7 +281,7 @@ export class IconDialog {
     // Already present (icon element or stylesheet link)?
     if (document.getElementById('an-fontawesome-css')) return;
     const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
-      .map((l) => l.href || '').join(' ');
+      .map((l) => /** @type {HTMLLinkElement} */ (l).href || '').join(' ');
     if (/fontawesome|font-awesome/.test(links)) return;
     if (document.querySelector('.fa-solid, .fas, .far, .fab')) return;
 
@@ -344,19 +344,23 @@ export class IconDialog {
 
     // Title row
     const titleRow = createElement('div', { class: 'an-icon-title-row' });
+    const titleGroup = createElement('div', { class: 'an-dialog-title-group' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon an-dialog-icon--sm' });
+    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>`;
     const title = createElement('h3', { class: 'an-dialog-title' });
     title.textContent = L.title;
+    titleGroup.append(iconEl, title);
     const closeBtn = createElement('button', { type: 'button', class: 'an-icon-close', 'aria-label': L.close });
     closeBtn.innerHTML = '&times;';
-    titleRow.append(title, closeBtn);
+    titleRow.append(titleGroup, closeBtn);
 
     // Search
-    const searchInput = createElement('input', {
+    const searchInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'search',
       class: 'an-input an-icon-search',
       placeholder: L.searchPlaceholder,
       autocomplete: 'off',
-    });
+    }));
     this._searchInput = searchInput;
 
     // Category tabs
@@ -388,7 +392,7 @@ export class IconDialog {
 
     const styleLabel = createElement('label', { class: 'an-label' });
     styleLabel.textContent = L.style;
-    const styleSelect = createElement('select', { class: 'an-input an-icon-option-select' });
+    const styleSelect = /** @type {HTMLSelectElement} */ (createElement('select', { class: 'an-input an-icon-option-select' }));
     [['fa-solid', 'Solid'], ['fa-regular', 'Regular'], ['fa-light', 'Light (Pro)']].forEach(([v, t]) => {
       const opt = createElement('option', { value: v });
       opt.textContent = t;
@@ -399,9 +403,9 @@ export class IconDialog {
 
     const sizeLabel = createElement('label', { class: 'an-label' });
     sizeLabel.textContent = L.size;
-    const sizeSelect = createElement('select', { class: 'an-input an-icon-option-select' });
+    const sizeSelect = /** @type {HTMLSelectElement} */ (createElement('select', { class: 'an-input an-icon-option-select' }));
     [['', 'Inherit'], ['0.75em', '0.75em'], ['1em', '1em'], ['1.25em', '1.25em'], ['1.5em', '1.5em'], ['2em', '2em'], ['3em', '3em']].forEach(([v, t]) => {
-      const opt = createElement('option', { value: v });
+      const opt = /** @type {HTMLOptionElement} */ (createElement('option', { value: v }));
       if (v === '1em') opt.selected = true;
       opt.textContent = t;
       sizeSelect.appendChild(opt);
@@ -410,11 +414,11 @@ export class IconDialog {
 
     const colorLabel = createElement('label', { class: 'an-label' });
     colorLabel.textContent = L.color;
-    const colorInput = createElement('input', { type: 'color', class: 'an-icon-color', value: '#000000' });
+    const colorInput = /** @type {HTMLInputElement} */ (createElement('input', { type: 'color', class: 'an-icon-color', value: '#000000' }));
     this._colorInput = colorInput;
 
     const useColorLabel = createElement('label', { class: 'an-label an-label-inline an-icon-use-color' });
-    const useColorCb = createElement('input', { type: 'checkbox', checked: '' });
+    const useColorCb = /** @type {HTMLInputElement} */ (createElement('input', { type: 'checkbox', checked: '' }));
     this._useColorCb = useColorCb;
     useColorLabel.append(useColorCb, document.createTextNode(L.useColor));
 
@@ -438,6 +442,7 @@ export class IconDialog {
 
     box.append(titleRow, searchInput, catBar, grid, optRow, preview, btnRow);
     overlay.appendChild(box);
+    makeDraggable(titleRow, box);
 
     // -------------------------------------------------------------------------
     // Events
@@ -449,7 +454,7 @@ export class IconDialog {
     const d4 = on(overlay,     'click',  (e) => { if (e.target === overlay) this._close(); });
     const d5 = on(searchInput, 'input',  () => this._filterIcons(searchInput.value, this._activeCat));
     const d6 = on(catBar,      'click',  (e) => {
-      const tab = e.target.closest('[data-cat]');
+      const tab = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('[data-cat]'));
       if (tab) {
         this._activeCat = tab.dataset.cat;
         this._updateCatTabs();
@@ -457,7 +462,7 @@ export class IconDialog {
       }
     });
     const d7 = on(grid, 'click', (e) => {
-      const cell = e.target.closest('.an-icon-cell');
+      const cell = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('.an-icon-cell'));
       if (cell) this._selectIcon(cell.dataset.name);
     });
     const d8 = on(styleSelect, 'change', () => this._updatePreview(this._selectedIcon));
@@ -476,7 +481,7 @@ export class IconDialog {
 
   _updateCatTabs() {
     this._catBar.querySelectorAll('.an-icon-cat').forEach((tab) => {
-      tab.classList.toggle('active', tab.dataset.cat === this._activeCat);
+      tab.classList.toggle('active', /** @type {HTMLElement} */ (tab).dataset.cat === this._activeCat);
     });
   }
 
@@ -484,12 +489,13 @@ export class IconDialog {
     const q = (query || '').trim().toLowerCase();
     let visibleCount = 0;
     this._grid.querySelectorAll('.an-icon-cell').forEach((cell) => {
-      const name = cell.dataset.name;
-      const cellCat = cell.dataset.cat;
+      const hCell = /** @type {HTMLElement} */ (cell);
+      const name = hCell.dataset.name;
+      const cellCat = hCell.dataset.cat;
       const matchesCat = !cat || cat === 'all' || cellCat === cat;
       const matchesQuery = !q || name.includes(q);
       const visible = matchesCat && matchesQuery;
-      cell.style.display = visible ? '' : 'none';
+      hCell.style.display = visible ? '' : 'none';
       if (visible) visibleCount++;
     });
     // Show empty state if needed
@@ -499,14 +505,14 @@ export class IconDialog {
       empty.textContent = 'No icons found';
       this._grid.appendChild(empty);
     }
-    empty.style.display = visibleCount > 0 ? 'none' : '';
+    /** @type {HTMLElement} */ (empty).style.display = visibleCount > 0 ? 'none' : '';
   }
 
   _selectIcon(name) {
     this._selectedIcon = name;
     // Highlight selected cell
     this._grid.querySelectorAll('.an-icon-cell').forEach((cell) => {
-      cell.classList.toggle('active', cell.dataset.name === name);
+      cell.classList.toggle('active', /** @type {HTMLElement} */ (cell).dataset.name === name);
     });
     // Enable insert button
     this._insertBtn.removeAttribute('disabled');
@@ -581,8 +587,8 @@ export class IconDialog {
     // deleteContents() can drift the range endpoint outside the cell in some
     // browsers.  Save the cell reference first and re-anchor after deletion.
     const _sc = range.startContainer;
-    const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)
-      ?.closest?.('td, th');
+    const _tdAnchor = /** @type {Element|null} */ (_sc.nodeType === 1 ? _sc : _sc.parentElement)
+      ?.closest('td, th');
     range.deleteContents();
     if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
       range.setStart(_tdAnchor, 0);

package/src/js/module/ImageCropOverlay.js

@@ -230,7 +230,7 @@ export class ImageCropOverlay {
         on(h, 'touchstart', (e) => {
           e.preventDefault();
           e.stopPropagation();
-          this._startHandleDrag({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY }, id);
+          const te = /** @type {TouchEvent} */ (e); this._startHandleDrag({ clientX: te.touches[0].clientX, clientY: te.touches[0].clientY }, id);
         }, { passive: false }),
       );
       this._handles[id] = h;
@@ -240,18 +240,18 @@ export class ImageCropOverlay {
     /* ---- crop move drag ---- */
     this._disposers.push(
       on(cropBox, 'mousedown', (e) => {
-        if (e.target.classList.contains('an-crop-handle')) return;
+        if (/** @type {Element} */ (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 (/** @type {Element} */ (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 });
+        const te2 = /** @type {TouchEvent} */ (e); this._startBoxMove({ clientX: te2.touches[0].clientX, clientY: te2.touches[0].clientY });
       }, { passive: false }),
     );
 
@@ -444,7 +444,7 @@ export class ImageCropOverlay {
   _attachDocDrag(onMove) {
     const onTouchMove = (e) => {
       e.preventDefault();
-      onMove({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
+      const te3 = /** @type {TouchEvent} */ (e); onMove(/** @type {MouseEvent} */ (/** @type {unknown} */ ({ clientX: te3.touches[0].clientX, clientY: te3.touches[0].clientY })));
     };
     const cleanup = () => {
       document.removeEventListener('mousemove', onMove);
@@ -500,7 +500,7 @@ export class ImageCropOverlay {
     const outW = w;
     const outH = h;
 
-    const naturalRect = { x: natX, y: natY, width: natW, height: natH };
+    const naturalRect = /** @type {DOMRect} */ (/** @type {unknown} */ ({ x: natX, y: natY, width: natW, height: natH }));
     const canvas = await drawCropToCanvas(img, naturalRect, outW, outH);
 
     if (!canvas) {

package/src/js/module/ImageDialog.js

@@ -3,7 +3,7 @@
  * Inspired by Summernote's ImageDialog — rewritten without jQuery
  */
 
-import { createElement, on, trapFocus } from '../core/dom.js';
+import { createElement, on, trapFocus, makeDraggable } from '../core/dom.js';
 import { withSavedRange } from '../core/range.js';
 
 export class ImageDialog {
@@ -66,32 +66,37 @@ export class ImageDialog {
     });
     const box = createElement('div', { class: 'an-dialog-box' });
 
+    const header = createElement('div', { class: 'an-dialog-header' });
+    const iconEl = createElement('span', { class: 'an-dialog-icon' });
+    iconEl.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`;
     const title = createElement('h3', { class: 'an-dialog-title' });
     title.textContent = L.title;
+    header.appendChild(iconEl);
+    header.appendChild(title);
 
     // URL tab
     const urlLabel = createElement('label', { class: 'an-label' });
     urlLabel.textContent = L.imageUrl;
-    const urlInput = createElement('input', {
+    const urlInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'url',
       class: 'an-input',
       placeholder: L.urlPlaceholder,
       autocomplete: 'off',
-    });
+    }));
     this._urlInput = urlInput;
 
     // Alt text
     const altLabel = createElement('label', { class: 'an-label' });
     altLabel.textContent = L.altText;
-    const altInput = createElement('input', {
+    const altInput = /** @type {HTMLInputElement} */ (createElement('input', {
       type: 'text',
       class: 'an-input',
       placeholder: L.altPlaceholder,
       autocomplete: 'off',
-    });
+    }));
     this._altInput = altInput;
 
-    box.append(title, urlLabel, urlInput, altLabel, altInput);
+    box.append(header, urlLabel, urlInput, altLabel, altInput);
 
     // Alignment
     const alignLabel = createElement('label', { class: 'an-label' });
@@ -105,7 +110,7 @@ export class ImageDialog {
     ];
     alignOptions.forEach(({ value, label }) => {
       const radioId = `an-align-${value || 'none'}`;
-      const radio = createElement('input', { type: 'radio', name: 'an-img-align', id: radioId, value });
+      const radio = /** @type {HTMLInputElement} */ (createElement('input', { type: 'radio', name: 'an-img-align', id: radioId, value }));
       if (value === '') radio.checked = true;
       const lbl = createElement('label', { for: radioId, class: 'an-align-label' });
       lbl.textContent = label;
@@ -116,11 +121,11 @@ export class ImageDialog {
     if (this.options.allowImageUpload !== false) {
       const fileLabel = createElement('label', { class: 'an-label' });
       fileLabel.textContent = L.uploadLabel;
-      const fileInput = createElement('input', {
+      const fileInput = /** @type {HTMLInputElement} */ (createElement('input', {
         type: 'file',
         class: 'an-input',
         accept: 'image/jpeg,image/png,image/gif,image/webp,image/svg+xml,image/avif',
-      });
+      }));
       this._fileInput = fileInput;
       // Hint line shown below the file input for format errors
       const fileHint = createElement('p', { class: 'an-dialog-hint' });
@@ -141,12 +146,13 @@ export class ImageDialog {
 
     box.append(btnRow);
     overlay.appendChild(box);
+    makeDraggable(header, box);
 
     const d1 = on(insertBtn, 'click', () => this._onInsert());
     const d2 = on(cancelBtn, 'click', () => this._close());
     const d3 = on(overlay, 'click', (e) => { if (e.target === overlay) this._close(); });
-    const d4 = on(urlInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
-    const d5 = on(altInput, 'keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    const d4 = on(urlInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
+    const d5 = on(altInput, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Enter') { e.preventDefault(); this._onInsert(); } });
     this._disposers.push(d1, d2, d3, d4, d5);
 
     return overlay;
@@ -197,7 +203,7 @@ export class ImageDialog {
     const src = this._urlInput.value.trim();
     const alt = this._altInput.value.trim();
     const alignRadio = this._alignRow && this._alignRow.querySelector('input[name="an-img-align"]:checked');
-    const align = alignRadio ? alignRadio.value : '';
+    const align = alignRadio ? /** @type {HTMLInputElement} */ (alignRadio).value : '';
 
     if (!src) {
       this._urlInput.focus();

package/src/js/module/ImageResizer.js

@@ -51,7 +51,7 @@ export class ImageResizer {
       // Also select on right-click so the highlight shows before the context menu
       on(editable, 'contextmenu', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const img = e.target.closest('img');
+        const img = /** @type {Element} */ (e.target)?.closest('img');
         if (img) this._select(img);
       }),
       on(document, 'click', (e) => this._onDocClick(e)),