autumnnote 1.6.0 → 1.6.2

package/src/js/module/Codeview.js

@@ -26,9 +26,7 @@ export class Codeview {
   destroy() {
     this._disposers.forEach((d) => d());
     this._disposers = [];
-    if (this._textarea && this._textarea.parentNode) {
-      this._textarea.parentNode.removeChild(this._textarea);
-    }
+    this._textarea?.remove();
     this._textarea = null;
   }
 
@@ -74,7 +72,7 @@ export class Codeview {
     const { editable } = this.context.layoutInfo;
     // Sanitise the HTML typed in the textarea before applying (allow iframes for video embeds)
     editable.innerHTML = sanitiseHTML(this._textarea.value, { allowIframes: true });
-    this._textarea.parentNode.removeChild(this._textarea);
+    this._textarea.remove();
     this._textarea = null;
     editable.style.display = '';
     this._active = false;
@@ -108,7 +106,7 @@ export class Codeview {
       .map((line) => {
         const stripped = line.trim();
         if (!stripped) return '';
-        if (/^<\//.test(stripped)) indent = Math.max(0, indent - 1);
+        if (stripped.startsWith('</')) indent = Math.max(0, indent - 1);
         const out = '  '.repeat(indent) + stripped;
         if (
           /^<[^/!][^>]*[^/]>/.test(stripped) &&

package/src/js/module/ContextMenu.js

@@ -1,4 +1,4 @@
-// ContextMenu.js - Right-click context menu for editor actions
+// ContextMenu.js - Right-click context menu for editor actions
 import { createElement, on } from '../core/dom.js';
 import { sanitiseHTML } from '../core/sanitise.js';
 
@@ -60,7 +60,7 @@ const defaultItems = [
   { name: 'copy',      label: 'Copy',         icon: ICONS.copy,      action: () => document.execCommand('copy') },
   { name: 'paste',     label: 'Paste',        icon: ICONS.paste,     action: (ctx) => {
     if (!navigator.clipboard) return;
-    const editable = ctx.layoutInfo && ctx.layoutInfo.editable;
+    const editable = ctx.layoutInfo?.editable;
     if (!editable) return;
     // Prefer read() to get rich HTML; fall back to readText() for plain text
     const doInsert = (html, text) => {
@@ -131,14 +131,14 @@ export class ContextMenu {
 
     this._renderItems(this._items);
 
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (editable) {
       this._disposers.push(on(editable, 'contextmenu', (e) => this._onContextMenu(e)));
     }
 
     this._disposers.push(on(document, 'click', (e) => this._maybeHide(e)));
     this._disposers.push(on(document, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Escape') this.hide(); }));
-    this._disposers.push(on(window, 'scroll', () => this.hide(), { passive: true }));
+    this._disposers.push(on(globalThis, 'scroll', () => this.hide(), { passive: true }));
 
     return this;
   }
@@ -148,7 +148,7 @@ export class ContextMenu {
     this._menuDisposers = [];
     this._disposers.forEach((d) => { try { d(); } catch (_e) {} });
     this._disposers = [];
-    if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
+    if (this.el) this.el.remove();
     this.el = null;
   }
 
@@ -176,8 +176,8 @@ export class ContextMenu {
         backBtn.appendChild(createElement('span', { class: 'an-context-label' }, [backLabel]));
         const off = on(backBtn, 'click', (e) => {
           e.stopPropagation();
-          const curLeft = parseFloat(this.el.style.left);
-          const curTop = parseFloat(this.el.style.top);
+          const curLeft = Number.parseFloat(this.el.style.left);
+          const curTop = Number.parseFloat(this.el.style.top);
           this._renderItems(it.navigate());
           this._reposition(curLeft, curTop);
         });
@@ -212,8 +212,8 @@ export class ContextMenu {
         btn.appendChild(chevron);
         const off = on(btn, 'click', (e) => {
           e.stopPropagation();
-          const curLeft = parseFloat(this.el.style.left);
-          const curTop = parseFloat(this.el.style.top);
+          const curLeft = Number.parseFloat(this.el.style.left);
+          const curTop = Number.parseFloat(this.el.style.top);
           this._renderItems(it.navigate());
           this._reposition(curLeft, curTop);
         });
@@ -334,10 +334,10 @@ export class ContextMenu {
           if (!cell) return;
           const rows = +cell.dataset.row;
           const cols = +cell.dataset.col;
-          const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+          const editable = this.context.layoutInfo?.editable;
           if (editable && this._savedRange) {
             editable.focus();
-            const sel = window.getSelection();
+            const sel = globalThis.getSelection();
             sel.removeAllRanges();
             sel.addRange(this._savedRange.cloneRange());
           }
@@ -372,13 +372,13 @@ export class ContextMenu {
   }
 
   _onContextMenu(event) {
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable) return;
     if (!editable.contains(event.target)) return;
     if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
     event.preventDefault();
 
-    const winSel = window.getSelection();
+    const winSel = globalThis.getSelection();
     this._savedRange = (winSel && winSel.rangeCount > 0) ? winSel.getRangeAt(0).cloneRange() : null;
     this._renderItems(this._items);
 
@@ -425,9 +425,9 @@ export class ContextMenu {
     let left = rx;
     let top = ry;
     // Clamp to viewport so the menu never overflows the screen edge
-    if (left + w > window.innerWidth - 8) left = window.innerWidth - w - 8;
+    if (left + w > globalThis.innerWidth - 8) left = globalThis.innerWidth - w - 8;
     if (left < 8) left = 8;
-    if (top + h > window.innerHeight - 8) top = window.innerHeight - h - 8;
+    if (top + h > globalThis.innerHeight - 8) top = globalThis.innerHeight - h - 8;
     if (top < 8) top = 8;
     this.el.style.left = `${left}px`;
     this.el.style.top = `${top}px`;
@@ -454,7 +454,7 @@ export class ContextMenu {
     let node = range.startContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
     if (!node) return type === 'foreColor' ? '#000000' : 'transparent';
-    const cs = window.getComputedStyle(/** @type {Element} */ (node));
+    const cs = globalThis.getComputedStyle(/** @type {Element} */ (node));
     if (type === 'foreColor') {
       return cs.color || '#000000';
     }
@@ -464,10 +464,10 @@ export class ContextMenu {
 
   /** Restore selection, apply a color command, then hide the menu. */
   _applyColor(type, color) {
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable || !this._savedRange) return;
     editable.focus();
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     sel.removeAllRanges();
     sel.addRange(this._savedRange.cloneRange());
     document.execCommand(type, false, color);
@@ -482,20 +482,20 @@ export class ContextMenu {
   copyFormat() {
     const range = this._savedRange;
     if (!range) return;
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     let node = range.startContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
     if (!node || !editable || !editable.contains(node)) return;
 
     // Walk up to collect explicitly-set inline properties from the nearest styled ancestor
-    const cs = window.getComputedStyle(/** @type {Element} */ (node));
+    const cs = globalThis.getComputedStyle(/** @type {Element} */ (node));
 
     // Detect if an explicit font-family / font-size is set on an element (not just inherited)
     const explicitFontFamily = this._findExplicitStyle(node, editable, 'fontFamily');
     const explicitFontSize   = this._findExplicitStyle(node, editable, 'fontSize');
 
     this._copiedFormat = {
-      bold:            parseInt(cs.fontWeight, 10) >= 700,
+      bold:            Number.parseInt(cs.fontWeight, 10) >= 700,
       italic:          cs.fontStyle === 'italic' || cs.fontStyle === 'oblique',
       underline:       (cs.textDecorationLine || '').includes('underline'),
       strikethrough:   (cs.textDecorationLine || '').includes('line-through'),
@@ -533,13 +533,13 @@ export class ContextMenu {
   pasteFormat() {
     if (!this._copiedFormat || !this._savedRange) return;
     const fmt = this._copiedFormat;
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable) return;
 
     // CRITICAL: focus the editable FIRST, then restore selection.
     // Calling focus() after addRange() can wipe the selection in Chrome/Firefox.
     editable.focus();
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     sel.removeAllRanges();
     sel.addRange(this._savedRange.cloneRange());
 
@@ -575,14 +575,14 @@ export class ContextMenu {
       document.execCommand('fontSize', false, '7');
       // Mark only the NEWLY created font[size="7"] elements.
       editable.querySelectorAll('font[size="7"]').forEach((el) => {
-        if (!preExisting.has(el)) el.setAttribute('data-an-tmp', marker);
+        if (!preExisting.has(el)) /** @type {HTMLElement} */ (el).dataset.anTmp = marker;
       });
       editable.querySelectorAll(`[data-an-tmp="${marker}"]`).forEach((el) => {
         const span = document.createElement('span');
         span.style.fontSize = fmt.fontSize;
         el.parentNode.insertBefore(span, el);
         while (el.firstChild) span.appendChild(el.firstChild);
-        el.parentNode.removeChild(el);
+        el.remove();
       });
     }
 
@@ -592,11 +592,11 @@ export class ContextMenu {
   /** Strip all inline formatting from the saved selection. */
   removeFormat() {
     if (!this._savedRange) return;
-    const editable = this.context.layoutInfo && this.context.layoutInfo.editable;
+    const editable = this.context.layoutInfo?.editable;
     if (!editable) return;
 
     editable.focus();
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     sel.removeAllRanges();
     sel.addRange(this._savedRange.cloneRange());
 

package/src/js/module/Editor.js

@@ -61,7 +61,7 @@ export class Editor {
     // Refresh toolbar on selection change, scoped to this editor
     const onSelChange = () => {
       if (!this.context._alive) return;
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (sel && sel.rangeCount > 0 && editable.contains(sel.anchorNode)) {
         this.context.invoke('toolbar.refresh');
         if (typeof this.options.onSelectionChange === 'function') {
@@ -85,7 +85,7 @@ export class Editor {
     //          lands WHERE the user actually clicked (middle, end of text…).
     // keyup  : arrow-key navigation may land at <li>[0]; move to start-of-text.
     const fixChecklistCursor = (event) => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || !sel.rangeCount) return;
       const r = sel.getRangeAt(0);
       if (!r.collapsed) return;
@@ -180,7 +180,7 @@ export class Editor {
     /** @type {string|null} 'superscript' | 'subscript' | null */
     let _compositionSupSub = null;
     const onCompositionStart = () => {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || !sel.rangeCount) { _compositionSupSub = null; return; }
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
@@ -195,13 +195,12 @@ export class Editor {
       const tag = _compositionSupSub;
       _compositionSupSub = null;
       if (!tag) return;
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (!sel || !sel.rangeCount) return;
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
       const el = /** @type {Element} */ (node);
-      const inContext = el &&
-        (tag === 'superscript' ? el.closest('sup') : el.closest('sub'));
+      const inContext = tag === 'superscript' ? el?.closest('sup') : el?.closest('sub');
       if (!inContext) {
         // The composed character escaped the sup/sub — re-apply the format.
         document.execCommand(tag);
@@ -288,7 +287,7 @@ export class Editor {
     if (!type.startsWith('insert')) return;
 
     const text = this.context.layoutInfo.editable.innerText || '';
-    const chars = text.replace(/\n/g, '').length;
+    const chars = text.replaceAll('\n', '').length;
 
     if (maxChars && chars >= maxChars) {
       event.preventDefault();
@@ -353,7 +352,7 @@ export class Editor {
     const editable = this.context.layoutInfo.editable;
     editable.querySelectorAll('figure.an-figure').forEach((fig) => {
       if (!fig.querySelector('img')) {
-        fig.parentNode.removeChild(fig);
+        fig.remove();
       }
     });
   }
@@ -396,7 +395,7 @@ export class Editor {
    */
   getHTML() {
     // Strip zero-width spaces inserted after icons to allow caret placement.
-    const raw = this.context.layoutInfo.editable.innerHTML.replace(/\u200B/g, '');
+    const raw = this.context.layoutInfo.editable.innerHTML.replaceAll('\u200B', '');
     // Replace any blob: URLs (lightweight DOM references to pasted/dropped images)
     // with their original data URLs so the returned HTML is fully self-contained.
     return this.context.invoke('clipboard.resolveImages', raw) ?? raw;
@@ -451,7 +450,7 @@ export class Editor {
   isEmpty() {
     const text = (this.context.layoutInfo.editable.innerText || '')
       .trim()
-      .replace(/\u00a0/g, '');
+      .replaceAll('\u00a0', '');
     const hasMedia = !!this.context.layoutInfo.editable.querySelector('img, video, iframe, table');
     return !text && !hasMedia;
   }
@@ -557,7 +556,7 @@ export class Editor {
     // Auto-detect the programming language when the user formats a code block.
     // Only runs when converting TO <pre> and the block has no language yet.
     if (tagName === 'pre') {
-      const sel = window.getSelection();
+      const sel = globalThis.getSelection();
       if (sel && sel.rangeCount > 0) {
         const container = sel.getRangeAt(0).commonAncestorContainer;
         const pre = /** @type {Element|null} */ (
@@ -565,7 +564,7 @@ export class Editor {
             ? /** @type {Element} */ (container).closest('pre')
             : (/** @type {Element|null} */ (container.parentElement))?.closest('pre')
         );
-        if (pre && !pre.getAttribute('data-language')) {
+        if (pre && !/** @type {HTMLElement} */ (pre).dataset.language) {
           const code = pre.textContent || '';
           const lang = detectLang(code);
           if (lang) {
@@ -618,7 +617,7 @@ export class Editor {
    * @param {boolean} [openInNewTab=false]
    */
   insertLink(url, text, openInNewTab = false) {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || sel.rangeCount === 0) return;
     const safeUrl = sanitiseUrl(url);
     if (!safeUrl) return;
@@ -693,7 +692,7 @@ export class Editor {
   // ---------------------------------------------------------------------------
 
   _getClosestAnchor() {
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     if (!sel || sel.rangeCount === 0) return null;
     let node = sel.getRangeAt(0).startContainer;
     while (node) {
@@ -710,10 +709,10 @@ export class Editor {
    */
   _escapeAttr(str) {
     return String(str ?? '')
-      .replace(/&/g, '&amp;')
-      .replace(/"/g, '&quot;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;');
+      .replaceAll('&', '&amp;')
+      .replaceAll('"', '&quot;')
+      .replaceAll('<', '&lt;')
+      .replaceAll('>', '&gt;');
   }
 
   // --- delegated to shared sanitise.js ---

package/src/js/module/EmojiDialog.js

@@ -526,7 +526,7 @@ export class EmojiDialog {
     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;
   }
@@ -592,7 +592,7 @@ export class EmojiDialog {
     catBar.appendChild(allTab);
     EMOJI_CATS.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;
@@ -685,7 +685,7 @@ export class EmojiDialog {
     // 1. Restore selection while dialog is still mounted (same pattern as ImageDialog)
     if (savedRange) savedRange.select();
 
-    const sel = window.getSelection();
+    const sel = globalThis.getSelection();
     let range = sel && sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
     if (!range) {
       range = document.createRange();
@@ -703,7 +703,7 @@ export class EmojiDialog {
     const _tdAnchor = /** @type {Element|null} */ (_sc.nodeType === 1 ? _sc : _sc.parentElement)
       ?.closest('td, th');
     range.deleteContents();
-    if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
+    if (_tdAnchor?.isConnected && !_tdAnchor.contains(range.startContainer)) {
       range.setStart(_tdAnchor, 0);
       range.collapse(true);
     }
@@ -732,7 +732,7 @@ export class EmojiDialog {
     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/FindReplace.js

@@ -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;
   }
@@ -352,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) {
+      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;
   }
@@ -408,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;
@@ -428,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) {
@@ -456,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/IconDialog.js

@@ -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;
   }
 
@@ -370,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;
@@ -526,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}`     : '',
@@ -549,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}`    : '',
@@ -572,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);
@@ -639,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;
@@ -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`;
   }
@@ -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;