autumnnote 1.5.0 → 1.6.1

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 */
@@ -61,7 +61,7 @@ export class FindReplace {
     this._disposers.forEach((d) => d());
     this._disposers = [];
     if (this._dialog && this._dialog.parentNode) {
-      this._dialog.parentNode.removeChild(this._dialog);
+      this._dialog.remove();
     }
     this._dialog = null;
   }
@@ -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;
   }
@@ -326,13 +352,14 @@ export class FindReplace {
     // 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()) && results.length < MAX_RESULTS) {
+    let node = walker.nextNode();
+    while (node && results.length < MAX_RESULTS) {
       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 });
+      while ((m = re.exec(/** @type {Text} */ (node).textContent)) !== null && results.length < MAX_RESULTS) {
+        results.push({ node: /** @type {Text} */ (node), start: m.index, end: m.index + m[0].length });
       }
+      node = walker.nextNode();
     }
     return results;
   }
@@ -382,7 +409,7 @@ export class FindReplace {
     const parent = match.mark.parentNode;
     const textNode = document.createTextNode(replacement);
     parent.insertBefore(textNode, match.mark);
-    parent.removeChild(match.mark);
+    match.mark.remove();
     parent.normalize();
     this.context.invoke('editor.afterCommand');
     const savedIndex = this._currentIndex;
@@ -402,7 +429,7 @@ export class FindReplace {
       if (!mark || !mark.parentNode) return;
       const textNode = document.createTextNode(replacement);
       mark.parentNode.insertBefore(textNode, mark);
-      mark.parentNode.removeChild(mark);
+      mark.remove();
     });
 
     if (this.context.layoutInfo.editable) {
@@ -430,7 +457,7 @@ export class FindReplace {
       const parent = mark.parentNode;
       if (!parent) return;
       while (mark.firstChild) parent.insertBefore(mark.firstChild, mark);
-      parent.removeChild(mark);
+      mark.remove();
     });
     // Merge adjacent text nodes after unwrapping
     editable.normalize();

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;
 
@@ -297,9 +297,7 @@ export class IconDialog {
   destroy() {
     this._disposers.forEach((d) => d());
     this._disposers = [];
-    if (this._dialog && this._dialog.parentNode) {
-      this._dialog.parentNode.removeChild(this._dialog);
-    }
+    this._dialog?.remove();
     this._dialog = null;
   }
 
@@ -344,19 +342,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
@@ -366,7 +368,7 @@ export class IconDialog {
     catBar.appendChild(allTab);
     ICON_CATEGORIES.forEach(({ id, label }) => {
       const tab = createElement('button', { type: 'button', class: 'an-icon-cat', 'data-cat': id });
-      tab.textContent = (L.categories && L.categories[id]) || label;
+      tab.textContent = L.categories?.[id] || label;
       catBar.appendChild(tab);
     });
     this._catBar = catBar;
@@ -388,7 +390,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 +401,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 +412,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 +440,7 @@ export class IconDialog {
 
     box.append(titleRow, searchInput, catBar, grid, optRow, preview, btnRow);
     overlay.appendChild(box);
+    makeDraggable(titleRow, box);
 
     // -------------------------------------------------------------------------
     // Events
@@ -449,7 +452,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 +460,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 +479,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 +487,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 +503,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');
@@ -520,10 +524,10 @@ export class IconDialog {
       this._preview.innerHTML = '<span class="an-icon-preview-hint">Select an icon</span>';
       return;
     }
-    const cls   = (this._styleSelect && this._styleSelect.value) || 'fa-solid';
-    const size  = (this._sizeSelect  && this._sizeSelect.value)  || '1em';
-    const useColor = this._useColorCb ? this._useColorCb.checked : false;
-    const color = (useColor && this._colorInput) ? this._colorInput.value : '';
+    const cls   = this._styleSelect?.value || 'fa-solid';
+    const size  = this._sizeSelect?.value  || '1em';
+    const useColor = this._useColorCb?.checked ?? false;
+    const color = useColor ? (this._colorInput?.value ?? '') : '';
     const styleAttr = [
       size  ? `font-size:${size}`  : '',
       color ? `color:${color}`     : '',
@@ -543,10 +547,10 @@ export class IconDialog {
   _onInsert() {
     if (!this._selectedIcon) return;
 
-    const cls      = (this._styleSelect && this._styleSelect.value) || 'fa-solid';
-    const size     = (this._sizeSelect  && this._sizeSelect.value)  || '';
-    const useColor = this._useColorCb ? this._useColorCb.checked    : false;
-    const color    = (useColor && this._colorInput) ? this._colorInput.value : '';
+    const cls      = this._styleSelect?.value || 'fa-solid';
+    const size     = this._sizeSelect?.value  || '';
+    const useColor = this._useColorCb?.checked ?? false;
+    const color    = useColor ? (this._colorInput?.value ?? '') : '';
     const styleParts = [
       size  ? `font-size:${size}` : '',
       color ? `color:${color}`    : '',
@@ -566,8 +570,8 @@ export class IconDialog {
     if (savedRange) savedRange.select();
 
     // 2. Get the now-live range from the selection
-    const sel = window.getSelection();
-    let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
+    const sel = globalThis.getSelection();
+    let range = (sel?.rangeCount ?? 0) > 0 ? sel.getRangeAt(0) : null;
     if (!range) {
       range = document.createRange();
       range.selectNodeContents(editable);
@@ -581,8 +585,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);
@@ -633,7 +637,7 @@ export class IconDialog {
     if (this._dialog) {
       this._dialog.style.display = 'flex';
       this._removeTrap = trapFocus(this._dialog, () => this._close());
-      setTimeout(() => this._searchInput && this._searchInput.focus(), 50);
+      setTimeout(() => this._searchInput?.focus(), 50);
     }
   }
 

package/src/js/module/ImageCropOverlay.js

@@ -66,7 +66,7 @@ function drawCropToCanvas(img, naturalRect, renderW, renderH) {
     if (
       img.src.startsWith('data:') ||
       img.src.startsWith('blob:') ||
-      img.src.startsWith(window.location.origin)
+      img.src.startsWith(globalThis.location.origin)
     ) {
       tryDraw(img);
       return;
@@ -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 }),
     );
 
@@ -340,8 +340,8 @@ export class ImageCropOverlay {
     this._cropBox.style.height = `${h}px`;
 
     // Scrim cutout via clip-path polygon (punches a transparent hole)
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
+    const vw = globalThis.innerWidth;
+    const vh = globalThis.innerHeight;
     // Outer rect → inner rectangle (counterclockwise) = hole
     this._scrim.style.clipPath = [
       `polygon(`,
@@ -367,7 +367,7 @@ export class ImageCropOverlay {
     // Position toolbar below crop box (or above if near bottom)
     const margin = 8;
     let tbTop = y + h + margin;
-    if (tbTop + 40 > window.innerHeight - margin) tbTop = y - 40 - margin;
+    if (tbTop + 40 > globalThis.innerHeight - margin) tbTop = y - 40 - margin;
     this._toolbar.style.left = `${x}px`;
     this._toolbar.style.top  = `${tbTop}px`;
   }
@@ -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) {
@@ -514,7 +514,7 @@ export class ImageCropOverlay {
     }
 
     // Determine output format: preserve JPEG, fall back to PNG
-    const fmt = img.src.match(/^data:image\/(jpe?g)/i) ? 'image/jpeg' : 'image/png';
+    const fmt = /^data:image\/(jpe?g)/i.exec(img.src) ? 'image/jpeg' : 'image/png';
     const quality = fmt === 'image/jpeg' ? 0.92 : undefined;
     const newSrc = canvas.toDataURL(fmt, quality);
 
@@ -551,7 +551,7 @@ export class ImageCropOverlay {
     ].join(';');
     banner.textContent = msg;
     document.body.appendChild(banner);
-    setTimeout(() => { if (banner.parentNode) banner.parentNode.removeChild(banner); }, 4000);
+    setTimeout(() => { banner.remove(); }, 4000);
   }
 
   /**
@@ -563,7 +563,7 @@ export class ImageCropOverlay {
     this._disposers = [];
 
     [this._scrim, this._cropBox, this._toolbar].forEach((el) => {
-      if (el && el.parentNode) el.parentNode.removeChild(el);
+      el?.remove();
     });
 
     this._scrim   = null;