autumnnote 1.4.2 → 1.6.0

package/dist/autumnnote.umd.js

@@ -125,16 +125,60 @@
 			if (e.shiftKey) {
 				if (document.activeElement === first) {
 					e.preventDefault();
-					last.focus();
+					/** @type {HTMLElement} */ last.focus();
 				}
 			} else if (document.activeElement === last) {
 				e.preventDefault();
-				first.focus();
+				/** @type {HTMLElement} */ first.focus();
 			}
 		};
 		document.addEventListener("keydown", handler);
 		return () => document.removeEventListener("keydown", handler);
 	}
+	/**
+	* Makes a dialog box draggable by its handle element.
+	* On first drag the box is pinned to its current viewport coordinates via
+	* `position:fixed`, freeing it from the parent flex container's centering.
+	* The position is clamped to the visible viewport.
+	*
+	* @param {HTMLElement} handle  Element the user grabs (title bar / header)
+	* @param {HTMLElement} box     Element that actually moves
+	* @returns {Function}          Cleanup function (removes the mousedown listener)
+	*/
+	function makeDraggable(handle, box) {
+		handle.style.cursor = "grab";
+		const onMousedown = (e) => {
+			if (e.button !== 0) return;
+			if (e.target.closest("button, input, select, textarea, a")) return;
+			e.preventDefault();
+			if (!box.dataset.anDragPinned) {
+				const r = box.getBoundingClientRect();
+				box.style.position = "fixed";
+				box.style.margin = "0";
+				box.style.left = `${r.left}px`;
+				box.style.top = `${r.top}px`;
+				box.dataset.anDragPinned = "1";
+			}
+			const startX = e.clientX - parseFloat(box.style.left);
+			const startY = e.clientY - parseFloat(box.style.top);
+			handle.style.cursor = "grabbing";
+			const onMove = (ev) => {
+				const bw = box.offsetWidth;
+				const bh = box.offsetHeight;
+				box.style.left = `${Math.max(0, Math.min(ev.clientX - startX, window.innerWidth - bw))}px`;
+				box.style.top = `${Math.max(0, Math.min(ev.clientY - startY, window.innerHeight - bh))}px`;
+			};
+			const onUp = () => {
+				handle.style.cursor = "grab";
+				document.removeEventListener("mousemove", onMove);
+				document.removeEventListener("mouseup", onUp);
+			};
+			document.addEventListener("mousemove", onMove);
+			document.addEventListener("mouseup", onUp);
+		};
+		handle.addEventListener("mousedown", onMousedown);
+		return () => handle.removeEventListener("mousedown", onMousedown);
+	}
 	//#endregion
 	//#region src/js/core/range.js
 	/**
@@ -280,7 +324,7 @@
 		if (!sel || !sel.rangeCount) return;
 		let container = sel.getRangeAt(0).commonAncestorContainer;
 		if (container.nodeType === 3) container = container.parentElement;
-		const uEl = container && container.closest && container.closest("u");
+		const uEl = container && container.closest("u");
 		const nativeState = document.queryCommandState("underline");
 		if (uEl && !nativeState) {
 			const parent = uEl.parentNode;
@@ -300,7 +344,7 @@
 		if (!sel || !sel.rangeCount) return;
 		let sc = sel.getRangeAt(0).startContainer;
 		if (sc.nodeType === 3) sc = sc.parentElement;
-		const sEl = sc && sc.closest && (sc.closest("s") || sc.closest("strike"));
+		const sEl = sc && (sc.closest("s") || sc.closest("strike"));
 		const nativeState = document.queryCommandState("strikeThrough");
 		if (sEl && !nativeState) {
 			const parent = sEl.parentNode;
@@ -337,7 +381,7 @@
 	* Sets the font size (in pt or with unit) for the selection.
 	* Uses a span-based approach to set px sizes precisely.
 	* @param {string} size - e.g. '14px'
-	* @param {HTMLElement} [editable] - scoping element to avoid touching nodes outside this editor
+	* @param {HTMLElement|Document} [editable] - scoping element to avoid touching nodes outside this editor
 	*/
 	function fontSize(size, editable = document) {
 		const sel = window.getSelection();
@@ -419,7 +463,7 @@
 		if (sel && sel.rangeCount) {
 			let container = sel.getRangeAt(0).commonAncestorContainer;
 			if (container.nodeType === 3) container = container.parentElement;
-			const checkLi = container && container.closest && container.closest(".an-checklist li");
+			const checkLi = container && container.closest(".an-checklist li");
 			if (checkLi) {
 				_checklistItemToP(checkLi);
 				return;
@@ -541,15 +585,15 @@
 	/**
 	* Wraps the selection in an inline <code> element, or unwraps it if the
 	* cursor is already inside a <code> that is not inside a <pre>.
-	* @param {HTMLElement} [editable]
+	* @param {HTMLElement} [_editable]
 	*/
-	function toggleInlineCode(editable) {
+	function toggleInlineCode(_editable) {
 		const sel = window.getSelection();
 		if (!sel || !sel.rangeCount) return;
 		const range = sel.getRangeAt(0);
 		let container = range.commonAncestorContainer;
 		if (container.nodeType === 3) container = container.parentElement;
-		const codeEl = container && container.closest ? container.closest("code") : null;
+		const codeEl = container && container.closest("code");
 		if (codeEl && !codeEl.closest("pre")) {
 			const parent = codeEl.parentNode;
 			const prevSibling = codeEl.previousSibling;
@@ -604,7 +648,7 @@
 		if (!sel || !sel.rangeCount) return false;
 		let sc = sel.getRangeAt(0).startContainer;
 		if (sc.nodeType === 3) sc = sc.parentElement;
-		const code = sc && sc.closest ? sc.closest("code") : null;
+		const code = sc && sc.closest("code");
 		return !!(code && !code.closest("pre"));
 	}
 	/**
@@ -627,11 +671,11 @@
 		const range = sel.getRangeAt(0);
 		let container = range.commonAncestorContainer;
 		if (container.nodeType === 3) container = container.parentElement;
-		const ul = container.closest && container.closest(".an-checklist");
+		const ul = container && container.closest(".an-checklist");
 		if (ul) {
 			const selectedLis = Array.from(ul.querySelectorAll("li")).filter((li) => sel.containsNode(li, true));
 			if (selectedLis.length > 0) {
-				let firstP = null;
+				/** @type {HTMLElement|null} */ let firstP = null;
 				selectedLis.forEach((li) => {
 					const p = document.createElement("p");
 					for (const child of li.childNodes) {
@@ -729,7 +773,7 @@
 		if (blocks.length === 0) return;
 		const newUl = document.createElement("ul");
 		newUl.className = "an-checklist";
-		let lastTextNode = null;
+		/** @type {Text|null} */ let lastTextNode = null;
 		blocks.forEach((block) => {
 			const li = document.createElement("li");
 			const cb = document.createElement("input");
@@ -762,7 +806,7 @@
 		if (!sel || !sel.rangeCount) return false;
 		let container = sel.getRangeAt(0).commonAncestorContainer;
 		if (container.nodeType === 3) container = container.parentElement;
-		return !!(container && container.closest && container.closest(".an-checklist li"));
+		return !!(container && container.closest(".an-checklist li"));
 	}
 	//#endregion
 	//#region src/js/module/Buttons.js
@@ -773,12 +817,14 @@
 	*/
 	/**
 	* @typedef {object} DropdownDef
-	* @property {string}   name       - unique identifier
-	* @property {'select'} type       - discriminator for Toolbar renderer
+	* @property {string}   name          - unique identifier
+	* @property {'select'} type          - discriminator for Toolbar renderer
 	* @property {string}   tooltip
-	* @property {string[]} [items]    - overridden at render time from options
-	* @property {Function} action     - called with (context, value)
-	* @property {Function} [getValue] - called with (context) to get current value
+	* @property {Array<string|{value:string,label:string,disabled?:boolean}>} [items] - overridden at render time from options
+	* @property {Function} action        - called with (context, value)
+	* @property {Function} [getValue]    - called with (context) to get current value
+	* @property {string}   [selectClass] - extra CSS class(es) for the <select>
+	* @property {string}   [placeholder] - placeholder text for the empty option
 	*/
 	/**
 	* @typedef {object} ButtonDef
@@ -846,7 +892,7 @@
 		if (!sel || !sel.rangeCount) return false;
 		let sc = sel.getRangeAt(0).startContainer;
 		if (sc.nodeType === 3) sc = sc.parentElement;
-		return !!(sc && sc.closest && sc.closest("u"));
+		return !!(sc && sc.closest("u"));
 	});
 	var strikeBtn = btn("strikethrough", "strikethrough", "Strikethrough", () => strikethrough(), () => document.queryCommandState("strikeThrough"));
 	var superscriptBtn = btn("superscript", "superscript", "Superscript", () => superscript(), () => document.queryCommandState("superscript"));
@@ -908,9 +954,9 @@
 				const sel = window.getSelection();
 				if (sel && sel.rangeCount) {
 					let el = sel.getRangeAt(0).startContainer;
-					if (el.nodeType === 3) el = el.parentElement;
+					if (el && el.nodeType === 3) el = el.parentElement;
 					while (el && el.nodeType === 1 && !el.style.fontSize) el = el.parentElement;
-					const size = el && el.style && el.style.fontSize ? el.style.fontSize : "";
+					const size = el && el.style.fontSize ? el.style.fontSize : "";
 					if (size) return size;
 				}
 				const editable = ctx && ctx.layoutInfo && ctx.layoutInfo.editable;
@@ -922,13 +968,6 @@
 		}
 	};
 	var removeFormatBtn = btn("removeFormat", "remove-format", "Remove Format", () => execCommand("removeFormat"));
-	btn("direction", "direction", "Toggle Text Direction (LTR / RTL)", (ctx) => {
-		const editable = ctx.layoutInfo.editable;
-		const next = (editable.getAttribute("dir") || "ltr") === "ltr" ? "rtl" : "ltr";
-		editable.setAttribute("dir", next);
-		editable.style.textAlign = next === "rtl" ? "right" : "left";
-		ctx.invoke("editor.afterCommand");
-	});
 	/** @type {DropdownDef} */
 	var fontFamilyBtn = {
 		name: "fontFamily",
@@ -1035,8 +1074,11 @@
 					"TH"
 				]);
 				let el = sel.getRangeAt(0).startContainer;
-				if (el.nodeType === 3) el = el.parentElement;
-				while (el && !BLOCKS.has(el.tagName)) el = el.parentElement;
+				if (el && el.nodeType === 3) el = el.parentElement;
+				while (el && !BLOCKS.has(
+					/** @type {Element} */
+					el.tagName
+				)) el = el.parentElement;
 				if (!el) return "";
 				return el.style.lineHeight || getComputedStyle(el).lineHeight || "";
 			} catch {
@@ -1048,7 +1090,6 @@
 	var fullscreenBtn = btn("fullscreen", "expand", "Fullscreen", (ctx) => ctx.invoke("fullscreen.toggle"), (ctx) => ctx.invoke("fullscreen.isActive"));
 	var shortcutsBtn = btn("shortcuts", "keyboard", "Keyboard Shortcuts (Ctrl+Shift+/)", (ctx) => ctx.invoke("shortcutsDialog.show"));
 	var findBtn = btn("find", "search", "Find (Ctrl+F)", (ctx) => ctx.invoke("findReplace.show", "find"));
-	btn("findReplace", "find-replace", "Find & Replace (Ctrl+H)", (ctx) => ctx.invoke("findReplace.show", "replace"));
 	var inlineCodeBtn = btn("inlineCode", "inline-code", "Inline Code (Ctrl+`)", (ctx) => ctx.invoke("editor.inlineCode"), () => isInlineCode());
 	var checklistBtn = btn("checklist", "checklist", "Checklist", (ctx) => ctx.invoke("editor.toggleChecklist"), () => isInChecklist());
 	var printBtn = btn("print", "print", "Print", (ctx) => ctx.invoke("editor.print"));
@@ -1060,47 +1101,64 @@
 	*/
 	/**
 	* @typedef {object} AsnOptions
-	* @property {string}   [placeholder]       - Placeholder text when editor is empty
-	* @property {number}   [height]            - Editor height in px (min)
-	* @property {number}   [minHeight]         - Minimum height in px
-	* @property {number}   [maxHeight]         - Maximum height in px (0 = unlimited)
-	* @property {boolean}  [focus]             - Auto-focus on init
-	* @property {boolean}  [resizable]         - Show resize handle
-	* @property {Array}    [toolbar]           - Toolbar button group config
-	* @property {boolean}  [pasteAsPlainText]  - Force plain-text paste
-	* @property {boolean}  [pasteCleanHTML]    - Sanitise HTML on paste
+	* @property {string}   [placeholder]          - Placeholder text when editor is empty
+	* @property {number}   [height]               - Editor height in px (min)
+	* @property {number}   [minHeight]            - Minimum height in px
+	* @property {number}   [maxHeight]            - Maximum height in px (0 = unlimited)
+	* @property {boolean}  [focus]                - Auto-focus on init
+	* @property {boolean}  [resizable]            - Show resize handle
+	* @property {Array}    [toolbar]              - Toolbar button group config
+	* @property {boolean}  [useBootstrap]         - Use Bootstrap button classes on toolbar buttons
+	* @property {string}   [toolbarButtonClass]   - CSS classes for Bootstrap toolbar buttons
+	* @property {boolean}  [useFontAwesome]       - Use Font Awesome icons (default: true)
+	* @property {string}   [fontAwesomeClass]     - Font Awesome prefix class, e.g. 'fas' or 'fa-solid'
+	* @property {boolean}  [pasteAsPlainText]     - Force plain-text paste
+	* @property {boolean}  [pasteCleanHTML]       - Sanitise HTML on paste
 	* @property {boolean}  [pasteStripAttributes] - Strip class/style/data-* from pasted HTML (default: false)
-	* @property {boolean}  [allowImageUpload]  - Allow file upload in image dialog
-	* @property {number}   [maxImageSize]      - Max upload size in MB
-	* @property {number}   [tabSize]           - Spaces per tab in non-list context
-	* @property {Function} [onChange]          - Callback on content change
-	* @property {Function} [onFocus]           - Callback on focus
-	* @property {Function} [onBlur]            - Callback on blur
-	* @property {Function} [onImageUpload]     - Custom upload handler: (files) => void
-	* @property {boolean}  [stickyToolbar]     - Stick the toolbar to the viewport top when scrolling
-	* @property {number}   [stickyToolbarOffset] - Top offset in px for sticky toolbar (e.g. fixed nav height)
-	* @property {string}   [theme]             - 'light' (default) | 'dark'
-	* @property {boolean}  [codeHighlight]     - Auto-load Prism.js for syntax highlighting of code blocks
-	* @property {string}   [codeHighlightCDN]  - CDN base URL for Prism assets (defaults to cdnjs)
-	* @property {boolean}  [markdownPaste]     - Convert pasted Markdown text to HTML (default: true)
-	* @property {boolean}  [readOnly]          - Start editor in read-only / non-editable mode
-	* @property {boolean}  [spellcheck]        - Enable browser spellcheck in the editable area (default: true)
-	* @property {string}   [direction]         - Text direction: 'ltr' (default) | 'rtl'
-	* @property {string}   [toolbarOverflow]   - Toolbar overflow strategy: 'wrap' (default) | 'scroll'
-	* @property {boolean}  [autoSave]          - Auto-save content to localStorage on change
-	* @property {string}   [autoSaveKey]       - localStorage key used for auto-save (default: 'autumnnote-autosave')
-	* @property {number}   [maxChars]          - Maximum character count (0 = unlimited). Shows warning in statusbar.
-	* @property {number}   [maxWords]          - Maximum word count (0 = unlimited). Shows warning in statusbar.
-	* @property {boolean}  [tableHeaderRow]    - Insert a header row (<thead><th>) when creating tables
-	* @property {Function} [onPaste]           - Callback fired on every paste: ({ text, html }) => void
-	* @property {Function} [onSelectionChange]   - Callback fired on cursor/selection change: (context) => void
-	* @property {string[]}  [colorSwatches]       - Custom brand colour swatches prepended to the colour-picker palette
+	* @property {boolean}  [allowImageUpload]     - Allow file upload in image dialog
+	* @property {number}   [maxImageSize]         - Max upload size in MB
+	* @property {number}   [tabSize]              - Spaces per tab in non-list context
+	* @property {number}   [historyLimit]         - Maximum undo/redo history steps
+	* @property {string}   [defaultFontFamily]    - Default font family applied to the editable area on init
+	* @property {string}   [defaultFontSize]      - Default font size applied to the editable area on init (e.g. '14px')
+	* @property {string[]} [fontFamilies]         - Font families shown in the font-family toolbar dropdown
+	* @property {Function} [onChange]             - Callback on content change
+	* @property {Function} [onFocus]              - Callback on focus
+	* @property {Function} [onBlur]               - Callback on blur
+	* @property {Function} [onInit]               - Callback after the editor has initialised
+	* @property {Function} [onImageUpload]        - Custom upload handler: (files) => void
+	* @property {Function} [onImageError]         - Callback when an image upload error occurs
+	* @property {boolean}  [stickyToolbar]        - Stick the toolbar to the viewport top when scrolling
+	* @property {number}   [stickyToolbarOffset]  - Top offset in px for sticky toolbar (e.g. fixed nav height)
+	* @property {string}   [theme]                - 'light' (default) | 'dark'
+	* @property {boolean}  [codeHighlight]        - Auto-load Prism.js for syntax highlighting of code blocks
+	* @property {string}   [codeHighlightCDN]     - CDN base URL for Prism assets (defaults to cdnjs)
+	* @property {boolean}  [markdownPaste]        - Convert pasted Markdown text to HTML (default: true)
+	* @property {boolean}  [readOnly]             - Start editor in read-only / non-editable mode
+	* @property {boolean}  [spellcheck]           - Enable browser spellcheck in the editable area (default: true)
+	* @property {string}   [direction]            - Text direction: 'ltr' (default) | 'rtl'
+	* @property {string}   [toolbarOverflow]      - Toolbar overflow strategy: 'wrap' (default) | 'scroll'
+	* @property {boolean}  [autoSave]             - Auto-save content to localStorage on change
+	* @property {string}   [autoSaveKey]          - localStorage key used for auto-save (default: 'autumnnote-autosave')
+	* @property {number}   [maxChars]             - Maximum character count (0 = unlimited). Shows warning in statusbar.
+	* @property {number}   [maxWords]             - Maximum word count (0 = unlimited). Shows warning in statusbar.
+	* @property {boolean}  [tableHeaderRow]       - Insert a header row (<thead><th>) when creating tables
+	* @property {Function} [onPaste]              - Callback fired on every paste: ({ text, html }) => void
+	* @property {Function} [onSelectionChange]    - Callback fired on cursor/selection change: (context) => void
+	* @property {string[]} [colorSwatches]        - Custom brand colour swatches prepended to the colour-picker palette
 	* @property {Function} [onDestroy]            - Callback fired when the editor is destroyed: (context) => void
 	* @property {Function} [onCharLimitReached]   - Callback fired when the character limit is hit: (context) => void
 	* @property {Function} [onWordLimitReached]   - Callback fired when the word limit is hit: (context) => void
-	* @property {string}   [focusColor]            - Custom focus ring colour, e.g. '#f97316'. Overrides the default blue.
+	* @property {string}   [focusColor]           - Custom focus ring colour, e.g. '#f97316'. Overrides the default blue.
+	* @property {boolean}  [autoSaveRestore]      - Show a restore banner when a previously auto-saved draft exists
+	* @property {number}   [autoSaveRestoreTimeout] - Maximum age in days for a draft to be offered for restore (0 = no expiry)
+	* @property {Function} [onAutoSaveRestore]    - Callback fired after the user chooses to restore a draft
+	* @property {boolean}  [markdownShortcuts]    - Convert markdown syntax typed inline to HTML
+	* @property {boolean}  [bubbleToolbar]        - Show a mini floating toolbar above text selections
+	* @property {string[]} [bubbleToolbarItems]   - Button names for the bubble toolbar
+	* @property {object|null} [mention]            - @mention configuration (onSearch, minChars, ...)
+	* @property {string}   [lang]                 - Display language or partial locale object override
 	*/
-	/** @type {AsnOptions} */
 	var defaultOptions = {
 		placeholder: "",
 		height: 200,
@@ -1295,6 +1353,7 @@
 			chooseHighlightColor: "Choose highlight color",
 			customColor: "Custom color",
 			insertTableLabel: "Insert Table",
+			/** Map of paragraph-style value → label (only values needing translation) */
 			paragraphItems: {
 				p: "Normal",
 				blockquote: "Quote",
@@ -1337,6 +1396,7 @@
 			widthPlaceholder: "560",
 			insertBtn: "Insert",
 			cancelBtn: "Cancel",
+			/** @param {string} type */
 			detected: (type) => `Detected: ${type}`,
 			unknownFormat: "Unknown format — will try direct video embed",
 			invalidUrl: "Invalid URL — please enter a valid video link."
@@ -1499,9 +1559,13 @@
 		},
 		statusbar: {
 			resizeHandle: "Resize editor",
+			/** @param {number} n */
 			words: (n) => `Words: ${n}`,
+			/** @param {number} n @param {number} max */
 			wordsLimit: (n, max) => `Words: ${n}/${max}`,
+			/** @param {number} n */
 			chars: (n) => `Chars: ${n}`,
+			/** @param {number} n @param {number} max */
 			charsLimit: (n, max) => `Chars: ${n}/${max}`
 		},
 		tooltips: {
@@ -1554,6 +1618,8 @@
 				rowHeight: "Row Height",
 				tableBorderWidth: "Table Border Width",
 				deleteTable: "Delete Table",
+				cellBackground: "Cell Background",
+				noShading: "No Shading",
 				columnWidthPx: "Column Width (px)",
 				rowHeightPx: "Row Height (px)",
 				tableBorderWidthPx: "Table Border Width (px)",
@@ -1574,7 +1640,9 @@
 			}
 		},
 		errors: {
+			/** @param {string} type */
 			imageFormat: (type) => `Format "${type}" is not supported for display in web browsers. Please convert to JPEG, PNG, or WebP first.`,
+			/** @param {number} maxSize */
 			imageSize: (maxSize) => `Image file is too large. Maximum allowed size is ${maxSize} MB.`
 		}
 	};
@@ -1907,6 +1975,8 @@
 					rowHeight: "Chiều cao hàng",
 					tableBorderWidth: "Độ rộng viền bảng",
 					deleteTable: "Xóa bảng",
+					cellBackground: "Màu Nền Ô",
+					noShading: "Xóa Màu Nền",
 					columnWidthPx: "Chiều rộng cột (px)",
 					rowHeightPx: "Chiều cao hàng (px)",
 					tableBorderWidthPx: "Độ rộng viền bảng (px)",
@@ -4108,7 +4178,10 @@
 		else if (options.minHeight) editable.style.minHeight = `${options.minHeight}px`;
 		if (options.maxHeight) editable.style.maxHeight = `${options.maxHeight}px`;
 		container.appendChild(editable);
-		if (options.theme === "dark") container.classList.add("an-theme-dark");
+		if (options.theme === "dark") {
+			container.classList.add("an-theme-dark");
+			document.body.classList.add("an-theme-dark");
+		}
 		if (options.readOnly) {
 			container.classList.add("an-disabled");
 			editable.querySelectorAll("ul.an-checklist input[type=\"checkbox\"]").forEach((cb) => {
@@ -4146,7 +4219,7 @@
 		constructor(editable, limit = 100) {
 			this.editable = editable;
 			this._limit = limit;
-			/** @type {Array<{html: string, range: {sc: string, so: number, ec: string, eo: number}|null}>} */
+			/** @type {Array<{html: string, images?: Record<string,string>, sel: {start: number, end: number}|null}>} */
 			this.stack = [];
 			this.stackOffset = -1;
 			this._savePoint();
@@ -4345,8 +4418,7 @@
 	* Build an HTML table with the given number of columns and rows, optionally including a header row.
 	* @param {number} cols - Number of columns in each row.
 	* @param {number} rows - Total number of rows to create (including header when `headerRow` is true).
-	* @param {{ headerRow?: boolean }} [opts] - Options object.
-	* @param {boolean} [opts.headerRow=false] - When true and `rows > 0`, creates a header row (`<thead>`) plus body rows for the remainder.
+	* @param {{ headerRow?: boolean }} [opts] - Options: `headerRow` creates a `<thead>` when true.
 	* @returns {HTMLTableElement} The constructed `<table>` element with a `<tbody>` and optional `<thead>`; each cell contains a `<br>` placeholder.
 	*/
 	function createTable(cols, rows, opts = {}) {
@@ -4380,7 +4452,6 @@
 	* @param {number} cols - Number of columns for the new table.
 	* @param {number} rows - Number of rows for the new table.
 	* @param {{ headerRow?: boolean }} [opts] - Options for table creation.
-	* @param {boolean} [opts.headerRow=false] - If true, include a header row as the first row.
 	*/
 	function insertTable(cols, rows, opts = {}) {
 		if (cols <= 0 || rows <= 0) return;
@@ -4403,7 +4474,7 @@
 			"PRE"
 		]);
 		let anchor = range.startContainer;
-		if (anchor.nodeType === 3) anchor = anchor.parentElement;
+		if (anchor && anchor.nodeType === 3) anchor = anchor.parentElement;
 		while (anchor && !BLOCK.has(anchor.tagName?.toUpperCase()) && anchor.parentElement) anchor = anchor.parentElement;
 		if (anchor && BLOCK.has(anchor.tagName?.toUpperCase()) && anchor.parentNode) {
 			anchor.after(table);
@@ -4521,7 +4592,7 @@
 					const textNode = r.startContainer;
 					if (r.startOffset === 0 && isFAIcon(textNode.previousSibling)) {
 						event.preventDefault();
-						textNode.previousSibling.remove();
+						/** @type {ChildNode} */ textNode.previousSibling.remove();
 						return true;
 					}
 					if (r.startOffset === 1 && textNode.textContent === "​" && isFAIcon(textNode.previousSibling)) {
@@ -4667,7 +4738,7 @@
 				}
 				return false;
 			}
-			const videoWrapper = el && el.closest && el.closest(".an-video-wrapper");
+			const videoWrapper = el && el.closest(".an-video-wrapper");
 			if (videoWrapper) {
 				event.preventDefault();
 				const p = document.createElement("p");
@@ -4681,7 +4752,7 @@
 				sel.addRange(nr);
 				return true;
 			}
-			const checkLi = el && el.closest && el.closest(".an-checklist li");
+			const checkLi = el && el.closest(".an-checklist li");
 			if (checkLi) {
 				event.preventDefault();
 				const ul = checkLi.closest(".an-checklist");
@@ -4781,8 +4852,9 @@
 	function _domToMd(node, depth = 0) {
 		if (node.nodeType === 3) return node.textContent.replace(/\s+/g, " ");
 		if (node.nodeType !== 1) return "";
-		const tag = node.nodeName.toLowerCase();
-		const inner = () => Array.from(node.childNodes).map((n) => _domToMd(n, depth)).join("");
+		const el = node;
+		const tag = el.nodeName.toLowerCase();
+		const inner = () => Array.from(el.childNodes).map((n) => _domToMd(n, depth)).join("");
 		switch (tag) {
 			case "p":
 			case "div": return `\n\n${inner()}\n\n`;
@@ -4800,34 +4872,34 @@
 			case "del":
 			case "s":
 			case "strike": return `~~${inner()}~~`;
-			case "sup": return `^${inner()}`;
-			case "sub": return `~${inner()}`;
+			case "sup": return `^${inner()}^`;
+			case "sub": return `~${inner()}~`;
 			case "code":
-				if (node.closest("pre")) return inner();
+				if (el.closest("pre")) return inner();
 				return `\`${inner()}\``;
 			case "pre": {
-				const codeEl = node.querySelector("code");
+				const codeEl = el.querySelector("code");
 				const langMatch = (codeEl && codeEl.className || "").match(/language-(\S+)/);
-				return `\n\n\`\`\`${langMatch ? langMatch[1] : ""}\n${(codeEl || node).textContent || ""}\n\`\`\`\n\n`;
+				return `\n\n\`\`\`${langMatch ? langMatch[1] : ""}\n${(codeEl || el).textContent || ""}\n\`\`\`\n\n`;
 			}
 			case "blockquote": return `\n\n${inner().trim().split("\n").map((l) => `> ${l}`).join("\n")}\n\n`;
 			case "a": {
-				const href = node.getAttribute("href") || "";
+				const href = el.getAttribute("href") || "";
 				return `[${inner()}](${href})`;
 			}
 			case "img": {
-				const src = node.getAttribute("src") || "";
-				return `![${node.getAttribute("alt") || ""}](${src})`;
+				const src = el.getAttribute("src") || "";
+				return `![${el.getAttribute("alt") || ""}](${src})`;
 			}
 			case "ul": {
-				const items = Array.from(node.querySelectorAll(":scope > li"));
+				const items = Array.from(el.querySelectorAll(":scope > li"));
 				if (!items.length) return inner();
 				const indent = "  ".repeat(depth);
 				const lines = items.map((li) => `${indent}- ${_domToMd(li, depth + 1).trim()}`).join("\n");
 				return depth === 0 ? `\n\n${lines}\n\n` : `\n${lines}`;
 			}
 			case "ol": {
-				const items = Array.from(node.querySelectorAll(":scope > li"));
+				const items = Array.from(el.querySelectorAll(":scope > li"));
 				if (!items.length) return inner();
 				const indent = "  ".repeat(depth);
 				const lines = items.map((li, i) => `${indent}${i + 1}. ${_domToMd(li, depth + 1).trim()}`).join("\n");
@@ -4836,7 +4908,7 @@
 			case "li": return inner();
 			case "hr": return "\n\n---\n\n";
 			case "table": {
-				const rows = Array.from(node.querySelectorAll("tr"));
+				const rows = Array.from(el.querySelectorAll("tr"));
 				if (!rows.length) return inner();
 				const cellTexts = rows.map((tr) => Array.from(tr.querySelectorAll("th, td")).map((c) => c.textContent.trim().replace(/\|/g, "\\|")));
 				const cols = Math.max(...cellTexts.map((r) => r.length));
@@ -4984,6 +5056,47 @@
 		return String(v).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 	}
 	//#endregion
+	//#region src/js/core/detectLang.js
+	/**
+	* detectLang.js — Heuristic programming-language detection for code snippets.
+	*
+	* Returns a Prism.js language identifier or null when no language can be
+	* determined with reasonable confidence.
+	*
+	* Detection order (conflicts in parentheses):
+	*   TypeScript → Rust → PHP → Java → Kotlin → Swift → Go
+	*   → JavaScript → HTML → CSS → JSON → SQL → Python → Ruby
+	*   → Bash → C++ → C# → C → XML
+	*
+	* @param {string} code
+	* @returns {string|null}
+	*/
+	function detectLang(code) {
+		if (!code || !code.trim()) return null;
+		const s = code.trim();
+		if (/(:\s*(string|number|boolean|void|never|any|unknown)\b|interface\s+\w+\s*\{|type\s+\w+\s*[=<(]|<\w+>\s*[;,)]|readonly\s+\w|enum\s+\w+\s*\{|\?\s*:\s*\w|as\s+\w+\s*[;,)\]])/.test(s)) return "typescript";
+		if (/\bprintln!\s*\(|\bprint!\s*\(|\bfn\s+\w+\s*(<[^>]*>)?\s*\(|\blet\s+mut\s|\bpub\s+fn\s|\buse\s+std::|\bimpl\s+\w+|\bOption<|\bResult<\w+/.test(s)) return "rust";
+		if (/(<\?php\b|<\?=|\becho\s+.*\$\w|\$this->|\$\w+\s*=\s*\w|\bforeach\s*\(\s*\$|Illuminate\\)/.test(s)) return "php";
+		if (/\bpublic\s+(class|static|void|int|String)\s+\w|System\.out\.(print|println)\s*\(|@(Override|Autowired|Component|Service|Controller)\b|import\s+java\.(util|io|lang|net)\.|throws\s+\w+Exception/.test(s)) return "java";
+		if (/\bfun\s+\w+\s*\(|\bdata\s+class\s+\w+|\bcompanion\s+object\b|\bval\s+\w+\s*:\s*\w|\bprintln\s*\(/.test(s)) return "kotlin";
+		if (/\bguard\s+(let|var)\b|\bprotocol\s+\w+\s*\{|\bextension\s+\w+|\bfunc\s+\w+[^(]*\([^)]*\)\s*->\s*\w|\blet\s+\w+\s*:\s*[A-Z]\w*|\bSwiftUI\b/.test(s)) return "swift";
+		if (/\bpackage\s+\w+\b|\bfmt\.(Print|Println|Sprintf|Errorf|Fprintf)\s*\(|:=\s*\w|\bgoroutine\b|\bchan\s+\w|\bgo\s+func\b/.test(s)) return "go";
+		if (/\b(const\s+\w|let\s+\w+\s*=|var\s+\w+\s*=|function\s+\w|\=>\s*[{(]|import\s+.*\bfrom\b\s*['"]|require\s*\(|console\.(log|error|warn|info)|document\.\w|window\.\w|async\s+function|\bPromise\b|React\.|useState\s*\(|\.then\s*\()/.test(s)) return "javascript";
+		if (/^<!DOCTYPE html/i.test(s) || /<(html|head|body|div|section|article|nav|p|a|img|ul|ol|li|table|form|input|button|script|style)\b[^>]*>/i.test(s)) return "html";
+		if (/(^|\n)\s*(\/\/\s+\S|&[:.[\w]|\$\w+\s*:|@(mixin|include|extend|each|if|for|use|forward)\b|#\{)/.test(s) && /[\w#.*&[\]:(),>+~ -]+\s*\{/.test(s)) return "scss";
+		if (/(^|\n)\s*[\w#.*:[\]&, +-]+\s*\{[^}]*[\w-]+\s*:[^{}:;]+[;}\n]/m.test(s) && !/<\w|function\s|def\s|:\s*(string|number)/.test(s)) return "css";
+		if (/^\s*[{[]/.test(s) && /"\w[\w\s-]*"\s*:/.test(s) && !/\bfunction\b|\bdef\b/.test(s)) return "json";
+		if (/(^|\n)\s*(SELECT\s|INSERT\s+INTO|UPDATE\s+\w|DELETE\s+FROM|CREATE\s+(TABLE|DATABASE|INDEX|VIEW)|DROP\s+(TABLE|DATABASE)|ALTER\s+TABLE|WITH\s+\w+\s+AS\s*\()/im.test(s)) return "sql";
+		if (/\bdef\s+\w+\s*\([^)]*\)\s*:|(^|\n)\s*class\s+\w+.*:\s*$|(^|\n)\s*import\s+\w|(^|\n)\s*from\s+\w+\s+import\s+|\bprint\s*\(|if\s+__name__\s*==\s*['"]__main__['"]/m.test(s)) return "python";
+		if (/\bputs\s+\S|\battr_(accessor|reader|writer)\s|\.each\s+do\s*\|\w+\s*\||\bdo\s*\|\w+\s*\|.*\bend\b|\bdef\s+\w+[^:]*\n[\s\S]*?\bend\b/.test(s)) return "ruby";
+		if (/^#!.*\/(ba|z|da|fi|k)?sh\b/m.test(s) || /\b(echo\s+["']|grep\s+|awk\s+|sed\s+['"\\/-]|chmod\s+|sudo\s+|apt(-get)?\s+install|brew\s+install|npm\s+(install|run|start|build)|pip\s+(install|3\s)|docker\s+(run|build|compose)|kubectl\s+|git\s+(clone|add|commit|push|pull|checkout))\b/.test(s)) return "bash";
+		if (/\bcout\s*<<|\bcin\s*>>|using\s+namespace\s+std\b|std::\w|\btemplate\s*<\w|\b#include\s*<(iostream|vector|map|set|algorithm|string|memory)>/.test(s)) return "cpp";
+		if (/\busing\s+System\b|Console\.(Write|WriteLine)\s*\(|\bget;\s*set;|\basync\s+Task[<\s]|IEnumerable<|\bLINQ\b|\.Select\s*\(|\.Where\s*\(/.test(s)) return "csharp";
+		if (/\b#include\s*<(stdio|stdlib|string|math|time|ctype)\.h>|\bprintf\s*\(|\bscanf\s*\(|int\s+main\s*\(\s*(void|int\s+argc)|\bmalloc\s*\(|\bfree\s*\(/.test(s) && !/namespace|cout|cin|std::/.test(s)) return "c";
+		if (/^<\?xml\s/i.test(s) || /xmlns:|<\/[\w:]+>/.test(s)) return "xml";
+		return null;
+	}
+	//#endregion
 	//#region src/js/module/Editor.js
 	/**
 	* Editor.js - Core editing command module
@@ -5038,7 +5151,8 @@
 				if (!r.collapsed) return;
 				const sc = r.startContainer;
 				if (sc.nodeType !== Node.ELEMENT_NODE) return;
-				const li = sc.matches && sc.matches(".an-checklist li") ? sc : null;
+				const scEl = sc;
+				const li = scEl.matches(".an-checklist li") ? scEl : null;
 				if (!li) return;
 				const cb = li.querySelector("input[type=\"checkbox\"]");
 				if (!cb) return;
@@ -5078,7 +5192,7 @@
 					return;
 				}
 				const target = e.target;
-				if (target && (target.nodeName === "IFRAME" || target.closest && target.closest(".an-video-wrapper"))) e.preventDefault();
+				if (target && (target.nodeName === "IFRAME" || target.closest(".an-video-wrapper"))) e.preventDefault();
 			}), on(editable, "drop", (e) => {
 				if (isReadOnly()) e.preventDefault();
 			}));
@@ -5092,9 +5206,12 @@
 				}
 				let node = sel.getRangeAt(0).startContainer;
 				if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
-				if (node && node.closest) if (node.closest("sup")) _compositionSupSub = "superscript";
-				else if (node.closest("sub")) _compositionSupSub = "subscript";
-				else _compositionSupSub = null;
+				if (node) {
+					const el = node;
+					if (el.closest("sup")) _compositionSupSub = "superscript";
+					else if (el.closest("sub")) _compositionSupSub = "subscript";
+					else _compositionSupSub = null;
+				}
 			};
 			const onCompositionEnd = () => {
 				const tag = _compositionSupSub;
@@ -5104,7 +5221,8 @@
 				if (!sel || !sel.rangeCount) return;
 				let node = sel.getRangeAt(0).startContainer;
 				if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
-				if (!(node && node.closest && (tag === "superscript" ? node.closest("sup") : node.closest("sub")))) document.execCommand(tag);
+				const el = node;
+				if (!(el && (tag === "superscript" ? el.closest("sup") : el.closest("sub")))) document.execCommand(tag);
 			};
 			this._disposers.push(on(editable, "compositionstart", onCompositionStart), on(editable, "compositionend", onCompositionEnd));
 		}
@@ -5193,6 +5311,7 @@
 		}
 		afterCommand() {
 			this._cleanOrphanedFigures();
+			this._ensureTrailingParagraph();
 			this.context.invoke("toolbar.refresh");
 			this.context.invoke("statusbar.update");
 			this._scheduleSnapshot();
@@ -5219,6 +5338,31 @@
 				if (!fig.querySelector("img")) fig.parentNode.removeChild(fig);
 			});
 		}
+		/**
+		* Ensures the editable always ends with a plain paragraph so the cursor can
+		* be placed after block elements that do not naturally allow it
+		* (pre, blockquote, table, figure, ul, ol, hr).
+		* Without this, clicking below the last such element does nothing.
+		*/
+		_ensureTrailingParagraph() {
+			const editable = this.context.layoutInfo.editable;
+			if (!editable) return;
+			const last = editable.lastElementChild;
+			if (!last) return;
+			if (new Set([
+				"PRE",
+				"BLOCKQUOTE",
+				"TABLE",
+				"FIGURE",
+				"UL",
+				"OL",
+				"HR"
+			]).has(last.nodeName)) {
+				const p = document.createElement("p");
+				p.innerHTML = "<br>";
+				editable.appendChild(p);
+			}
+		}
 		focus() {
 			this.context.layoutInfo.editable.focus();
 		}
@@ -5402,10 +5546,24 @@
 			this.context.print();
 		}
 		/**
-		* @param {string} tagName - e.g. 'h1', 'p', 'blockquote'
+		* @param {string} tagName - e.g. 'h1', 'p', 'blockquote', 'pre'
 		*/
 		formatBlock(tagName) {
 			formatBlock(tagName);
+			if (tagName === "pre") {
+				const sel = window.getSelection();
+				if (sel && sel.rangeCount > 0) {
+					const container = sel.getRangeAt(0).commonAncestorContainer;
+					const pre = container.nodeType === 1 ? container.closest("pre") : container.parentElement?.closest("pre");
+					if (pre && !pre.getAttribute("data-language")) {
+						const lang = detectLang(pre.textContent || "");
+						if (lang) {
+							this.context.invoke("codeTooltip.applyLanguage", pre, lang);
+							return;
+						}
+					}
+				}
+			}
 			this.afterCommand();
 		}
 		/**
@@ -5462,8 +5620,8 @@
 				if (openInNewTab) {
 					const link = this._getClosestAnchor();
 					if (link) {
-						link.setAttribute("target", "_blank");
-						link.setAttribute("rel", "noopener noreferrer");
+						/** @type {Element} */ link.setAttribute("target", "_blank");
+						/** @type {Element} */ link.setAttribute("rel", "noopener noreferrer");
 					}
 				}
 			}
@@ -5745,13 +5903,13 @@
 				else openPopup();
 			});
 			const d2 = on(grid, "mouseover", (e) => {
-				const cell = e.target.closest(".an-table-cell");
+				const cell = e.target?.closest(".an-table-cell");
 				if (!cell) return;
 				setHighlight(+cell.getAttribute("data-row"), +cell.getAttribute("data-col"));
 			});
 			const d3 = on(grid, "mouseleave", () => setHighlight(0, 0));
 			const d4 = on(grid, "click", (e) => {
-				const cell = e.target.closest(".an-table-cell");
+				const cell = e.target?.closest(".an-table-cell");
 				if (!cell) return;
 				const rows = +cell.getAttribute("data-row");
 				const cols = +cell.getAttribute("data-col");
@@ -5914,11 +6072,17 @@
 				e.preventDefault();
 			});
 			const d3b = on(swatches, "click", (e) => {
-				const sw = e.target.closest(".an-color-swatch");
-				if (sw) applyColor(sw.dataset.color);
+				const sw = e.target?.closest(".an-color-swatch");
+				if (sw) applyColor(
+					/** @type {HTMLElement} */
+					sw.dataset.color
+				);
 			});
 			const d4 = on(colorInput, "change", (e) => {
-				applyColor(e.target.value);
+				applyColor(
+					/** @type {HTMLInputElement} */
+					e.target.value
+				);
 			});
 			const d5 = on(document, "click", (e) => {
 				if (isOpen && !wrap.contains(e.target) && !popup.contains(e.target)) closePopup();
@@ -6053,15 +6217,17 @@
 			this.el.querySelectorAll("button[data-btn]").forEach((btn) => {
 				const def = btnMap.get(btn.getAttribute("data-btn"));
 				if (def && typeof def.isActive === "function") btn.classList.toggle("active", !!def.isActive(this.context));
-				if (def && typeof def.isDisabled === "function") btn.disabled = !!def.isDisabled(this.context);
+				if (def && typeof def.isDisabled === "function")
+ /** @type {HTMLButtonElement} */ btn.disabled = !!def.isDisabled(this.context);
 			});
 			this.el.querySelectorAll("select[data-btn]").forEach((select) => {
 				const def = btnMap.get(select.getAttribute("data-btn"));
 				if (!def || typeof def.getValue !== "function") return;
 				let raw = (def.getValue(this.context) || "").replace(/["']/g, "").trim();
 				if (!raw) raw = this.options.defaultFontFamily || this.options.fontFamilies && this.options.fontFamilies[0] || "";
-				const matched = Array.from(select.options).find((opt) => opt.value && opt.value.toLowerCase() === raw.toLowerCase());
-				select.value = matched ? matched.value : "";
+				const sel = select;
+				const matched = Array.from(sel.options).find((opt) => opt.value && opt.value.toLowerCase() === raw.toLowerCase());
+				sel.value = matched ? matched.value : "";
 			});
 		}
 		/**
@@ -6855,8 +7021,13 @@
 				"aria-label": L.ariaLabel
 			});
 			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"><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"/></svg>`;
 			const title = createElement("h3", { class: "an-dialog-title" });
 			title.textContent = L.title;
+			header.appendChild(iconEl);
+			header.appendChild(title);
 			const urlLabel = createElement("label", { class: "an-label" });
 			urlLabel.textContent = L.url;
 			const urlInput = createElement("input", {
@@ -6901,8 +7072,9 @@
 			cancelBtn.textContent = L.cancelBtn;
 			btnRow.appendChild(insertBtn);
 			btnRow.appendChild(cancelBtn);
-			box.append(title, urlLabel, urlInput, textLabel, textInput, tabLabel, btnRow);
+			box.append(header, urlLabel, urlInput, textLabel, textInput, tabLabel, 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) => {
@@ -7032,8 +7204,13 @@
 				"aria-label": L.ariaLabel
 			});
 			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);
 			const urlLabel = createElement("label", { class: "an-label" });
 			urlLabel.textContent = L.imageUrl;
 			const urlInput = createElement("input", {
@@ -7052,7 +7229,7 @@
 				autocomplete: "off"
 			});
 			this._altInput = altInput;
-			box.append(title, urlLabel, urlInput, altLabel, altInput);
+			box.append(header, urlLabel, urlInput, altLabel, altInput);
 			const alignLabel = createElement("label", { class: "an-label" });
 			alignLabel.textContent = L.alignment;
 			const alignRow = createElement("div", { class: "an-align-row" });
@@ -7121,6 +7298,7 @@
 			btnRow.appendChild(cancelBtn);
 			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) => {
@@ -7258,8 +7436,13 @@
 				"aria-label": L.ariaLabel
 			});
 			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"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
 			const title = createElement("h3", { class: "an-dialog-title" });
 			title.textContent = L.title;
+			header.appendChild(iconEl);
+			header.appendChild(title);
 			const urlLabel = createElement("label", { class: "an-label" });
 			urlLabel.textContent = L.videoUrl;
 			const urlInput = createElement("input", {
@@ -7295,8 +7478,9 @@
 			cancelBtn.textContent = L.cancelBtn;
 			btnRow.appendChild(insertBtn);
 			btnRow.appendChild(cancelBtn);
-			box.append(title, urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
+			box.append(header, urlLabel, urlInput, hintEl, widthLabel, widthInput, btnRow);
 			overlay.appendChild(box);
+			makeDraggable(header, box);
 			const d0 = on(urlInput, "input", () => {
 				const info = this._parseVideoUrl(urlInput.value.trim());
 				hintEl.textContent = info ? this.context.locale.videoDialog.detected(info.type) : urlInput.value ? this.context.locale.videoDialog.unknownFormat : "";
@@ -7479,7 +7663,7 @@
 			};
 			this._disposers.push(on(editable, "click", (e) => this._onEditorClick(e)), on(editable, "contextmenu", (e) => {
 				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
-				const img = e.target.closest("img");
+				const img = e.target?.closest("img");
 				if (img) this._select(img);
 			}), on(document, "click", (e) => this._onDocClick(e)), on(window, "scroll", () => this._updateOverlayPosition(), { passive: true }), on(window, "resize", onWindowResize, { passive: true }), on(editable, "scroll", () => this._updateOverlayPosition(), { passive: true }));
 			return this;
@@ -7889,12 +8073,12 @@
 			document.body.appendChild(this._el);
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
-				const anchor = e.target.closest("a[href]");
+				const anchor = e.target?.closest("a[href]");
 				if (anchor && editable.contains(anchor)) this._scheduleShow(anchor);
 			}), on(editable, "mouseout", (e) => {
 				const to = e.relatedTarget;
 				if (!to || !editable.contains(to) && !this._el.contains(to)) this._scheduleHide();
-			}));
+			}), on(window, "scroll", () => this._hide(), { passive: true }), on(window, "resize", () => this._hide(), { passive: true }));
 			return this;
 		}
 		destroy() {
@@ -8079,14 +8263,15 @@
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
 				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
-				const img = e.target.closest("img");
+				const img = e.target?.closest("img");
 				if (img && editable.contains(img) && !img.closest("a[href]")) this._scheduleShow(img);
 			}, { passive: true }), on(editable, "mouseout", (e) => {
 				const to = e.relatedTarget;
 				if (!to || !editable.contains(to) && !this._el.contains(to)) this._scheduleHide();
 			}, { passive: true }), on(document, "click", (e) => {
-				if (this._activeImg && !this._activeImg.contains(e.target) && !this._el.contains(e.target)) this._hide();
-			}));
+				const et = e.target;
+				if (this._activeImg && !this._activeImg.contains(et) && !this._el.contains(et)) this._hide();
+			}), on(window, "scroll", () => this._hide(), { passive: true }), on(window, "resize", () => this._hide(), { passive: true }));
 			return this;
 		}
 		destroy() {
@@ -8170,7 +8355,7 @@
 			clearTimeout(this._hideTimer);
 			this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY$3);
 		}
-		_show(img) {
+		_show(_img) {
 			this._el.style.display = "flex";
 			requestAnimationFrame(() => {
 				if (this._activeImg) this._positionNear(this._activeImg);
@@ -8362,14 +8547,16 @@
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
 				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
-				const wrapper = e.target.closest(".an-video-wrapper");
+				const target = e.target;
+				const wrapper = target && target.closest ? target.closest(".an-video-wrapper") : null;
 				if (wrapper && editable.contains(wrapper)) this._scheduleShow(wrapper);
 			}, { passive: true }), on(editable, "mouseout", (e) => {
 				const to = e.relatedTarget;
 				if (!to || !editable.contains(to) && !this._el.contains(to)) this._scheduleHide();
 			}, { passive: true }), on(document, "click", (e) => {
-				if (this._activeWrapper && !this._activeWrapper.contains(e.target) && !this._el.contains(e.target)) this._hide();
-			}));
+				const target = e.target;
+				if (this._activeWrapper && !this._activeWrapper.contains(target) && !this._el.contains(target)) this._hide();
+			}), on(window, "scroll", () => this._hide(), { passive: true }), on(window, "resize", () => this._hide(), { passive: true }));
 			return this;
 		}
 		destroy() {
@@ -8449,7 +8636,7 @@
 			if (this._hideTimer) return;
 			this._hideTimer = setTimeout(() => this._hide(), HIDE_DELAY$2);
 		}
-		_show(wrapper) {
+		_show(_wrapper) {
 			this._el.style.display = "flex";
 			requestAnimationFrame(() => {
 				if (this._activeWrapper) this._positionNear(this._activeWrapper);
@@ -8673,8 +8860,35 @@
 		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>`,
-		selectCells: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z" fill="currentColor" opacity="0.15"/><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z"/></svg>`
+		selectCells: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z" fill="currentColor" opacity="0.15"/><path d="M4 4 L4 20 L9 15 L12 21 L14 20 L11 14 L17 14 Z"/></svg>`,
+		cellShade: `<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"><path d="M19 11L8.93 3.36a1 1 0 0 0-1.29.08L3.22 7.8a1 1 0 0 0-.07 1.29L11 20"/><path d="m5 14 5-5"/><path d="M22 22a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2c0-1.5 2.5-5 3.5-5s3.5 3.5 3.5 5z"/></svg>`
 	};
+	var SHADE_PRESETS = [
+		"#000000",
+		"#434343",
+		"#666666",
+		"#999999",
+		"#b7b7b7",
+		"#cccccc",
+		"#efefef",
+		"#ffffff",
+		"#ff0000",
+		"#ff9900",
+		"#ffff00",
+		"#00ff00",
+		"#00ffff",
+		"#4a86e8",
+		"#9900ff",
+		"#ff00ff",
+		"#f4cccc",
+		"#fce5cd",
+		"#fff2cc",
+		"#d9ead3",
+		"#d0e0e3",
+		"#c9daf8",
+		"#d9d2e9",
+		"#ead1dc"
+	];
 	var TableTooltip = class {
 		/** @param {import('../Context.js').Context} context */
 		constructor(context) {
@@ -8689,6 +8903,9 @@
 			this._sizeApply = null;
 			this._sizeTitleEl = null;
 			this._sizeInputEl = null;
+			this._shadePopover = null;
+			this._shadeTitleEl = null;
+			this._shadeColorStrip = null;
 			this._selectMode = false;
 			this._selectedCells = [];
 			this._selectStart = null;
@@ -8701,6 +8918,8 @@
 			document.body.appendChild(this._el);
 			this._sizePopover = this._buildSizePopover();
 			document.body.appendChild(this._sizePopover);
+			this._shadePopover = this._buildCellShadePopover();
+			document.body.appendChild(this._shadePopover);
 			const editable = this.context.layoutInfo.editable;
 			this._editable = editable;
 			const onSelMousedown = (e) => {
@@ -8727,10 +8946,13 @@
 			this._disposers.push(on(editable, "mousedown", onSelMousedown), on(editable, "mousemove", onSelMousemove), on(document, "mouseup", onSelMouseup));
 			this._disposers.push(on(editable, "mouseover", (e) => {
 				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
-				const table = e.target.closest("table");
+				const table = e.target?.closest("table");
 				if (table && editable.contains(table)) {
-					const cell = e.target.closest("td, th");
-					if (cell) this._activeCell = cell;
+					const cell = e.target?.closest("td, th");
+					if (cell) {
+						this._activeCell = cell;
+						this._syncShadeStrip();
+					}
 					this._scheduleShow(table);
 				}
 			}, { passive: true }), on(editable, "mouseout", (e) => {
@@ -8738,9 +8960,10 @@
 				const to = e.relatedTarget;
 				if (!to || !editable.contains(to) && !this._el.contains(to) && !(this._sizePopover && this._sizePopover.contains(to))) this._scheduleHide();
 			}, { passive: true }), on(document, "click", (e) => {
-				if (this._selectMode && this._activeTable && this._activeTable.contains(e.target)) return;
-				if (this._activeTable && !this._activeTable.contains(e.target) && !this._el.contains(e.target) && !(this._sizePopover && this._sizePopover.contains(e.target))) this._hide();
-			}));
+				const et = e.target;
+				if (this._selectMode && this._activeTable && this._activeTable.contains(et)) return;
+				if (this._activeTable && !this._activeTable.contains(et) && !this._el.contains(et) && !(this._sizePopover && this._sizePopover.contains(et))) this._hide();
+			}), on(document, "selectionchange", () => this._syncShadeStrip()), on(window, "scroll", () => this._hide(), { passive: true }), on(window, "resize", () => this._hide(), { passive: true }));
 			this._initResize();
 			return this;
 		}
@@ -8870,6 +9093,8 @@
 			this._el = null;
 			if (this._sizePopover && this._sizePopover.parentNode) this._sizePopover.parentNode.removeChild(this._sizePopover);
 			this._sizePopover = null;
+			if (this._shadePopover && this._shadePopover.parentNode) this._shadePopover.parentNode.removeChild(this._shadePopover);
+			this._shadePopover = null;
 		}
 		_buildTooltip() {
 			const L = this.context.locale.tooltips.table;
@@ -8897,6 +9122,24 @@
 			el.appendChild(this._makeBtn(ICONS$2.mergeCells, L.mergeCells, () => this._mergeCells()));
 			el.appendChild(this._makeBtn(ICONS$2.unmergeCells, L.unmergeCells, () => this._unmergeCells()));
 			el.appendChild(this._sep());
+			const shadeBtn = createElement("button", {
+				type: "button",
+				class: "an-link-tooltip-btn an-link-tooltip-btn--shade",
+				title: L.cellBackground
+			});
+			const shadeSvgWrap = createElement("span", { class: "an-bubble-btn-svg" });
+			shadeSvgWrap.innerHTML = ICONS$2.cellShade;
+			const shadeStrip = createElement("span", { class: "an-link-tooltip-color-strip" });
+			shadeBtn.appendChild(shadeSvgWrap);
+			shadeBtn.appendChild(shadeStrip);
+			this._shadeColorStrip = shadeStrip;
+			this._disposers.push(on(shadeBtn, "click", (e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				this._openCellShadePopover();
+			}));
+			el.appendChild(shadeBtn);
+			el.appendChild(this._sep());
 			el.appendChild(this._makeBtn(ICONS$2.colWidth, L.columnWidth, () => this._openSizePopover("col")));
 			el.appendChild(this._makeBtn(ICONS$2.rowHeight, L.rowHeight, () => this._openSizePopover("row")));
 			el.appendChild(this._makeBtn(ICONS$2.tableBorder, L.tableBorderWidth, () => this._openSizePopover("border")));
@@ -8905,6 +9148,7 @@
 			this._disposers.push(on(el, "mouseenter", () => this._clearTimers()), on(el, "mouseleave", () => {
 				if (this._selectMode) return;
 				if (this._sizePopover && this._sizePopover.style.display !== "none") return;
+				if (this._shadePopover && this._shadePopover.style.display !== "none") return;
 				this._scheduleHide();
 			}));
 			return el;
@@ -8951,10 +9195,16 @@
 		_show() {
 			if (!this._activeTable) return;
 			this._el.style.display = "flex";
+			this._syncShadeStrip();
 			requestAnimationFrame(() => {
 				if (this._activeTable) this._positionNear(this._activeTable);
 			});
 		}
+		_syncShadeStrip() {
+			if (!this._shadeColorStrip || !this._el || this._el.style.display === "none") return;
+			const cell = this._getCell();
+			this._shadeColorStrip.style.background = cell && cell.style.backgroundColor || "transparent";
+		}
 		_hide() {
 			this._el.style.display = "none";
 			this._activeTable = null;
@@ -8993,7 +9243,7 @@
 			if (sel && sel.rangeCount) {
 				let container = sel.getRangeAt(0).commonAncestorContainer;
 				if (container.nodeType === 3) container = container.parentElement;
-				const cellFromSel = container && container.closest && container.closest("td, th");
+				const cellFromSel = container && container.closest("td, th");
 				if (cellFromSel && this._activeTable && this._activeTable.contains(cellFromSel)) return cellFromSel;
 			}
 			return this._activeCell || this._activeTable && this._activeTable.querySelector("td, th");
@@ -9320,14 +9570,16 @@
 			});
 			const d2 = on(cancelBtn, "click", () => this._hideSizePopover());
 			const d3 = on(inputEl, "keydown", (e) => {
-				if (e.key === "Enter") {
+				const ke = e;
+				if (ke.key === "Enter") {
 					e.preventDefault();
 					applyBtn.click();
 				}
-				if (e.key === "Escape") this._hideSizePopover();
+				if (ke.key === "Escape") this._hideSizePopover();
 			});
 			const d4 = on(document, "click", (e) => {
-				if (this._sizePopover && this._sizePopover.style.display !== "none" && !this._sizePopover.contains(e.target) && !this._el.contains(e.target)) this._hideSizePopover();
+				const et = e.target;
+				if (this._sizePopover && this._sizePopover.style.display !== "none" && !this._sizePopover.contains(et) && !this._el.contains(et)) this._hideSizePopover();
 			});
 			const d5 = on(popover, "mouseenter", () => this._clearTimers());
 			const d6 = on(popover, "mouseleave", () => this._scheduleHide());
@@ -9345,7 +9597,7 @@
 				this._sizeTitleEl.textContent = this.context.locale.tooltips.table.tableBorderWidthPx;
 				this._sizeInputEl.min = "0";
 				this._sizeInputEl.max = "10";
-				this._sizeInputEl.value = currentPx;
+				this._sizeInputEl.value = String(currentPx);
 				this._sizeApply = (val) => {
 					const cells = Array.from(table.querySelectorAll("td, th"));
 					if (val === 0) cells.forEach((c) => {
@@ -9414,6 +9666,85 @@
 			if (this._sizePopover) this._sizePopover.style.display = "none";
 			this._sizeApply = null;
 		}
+		_buildCellShadePopover() {
+			const pop = createElement("div", { class: "an-cell-shade-popover" });
+			pop.style.display = "none";
+			const title = createElement("div", { class: "an-size-popover-title" });
+			pop.appendChild(title);
+			this._shadeTitleEl = title;
+			const palette = createElement("div", { class: "an-context-color-palette" });
+			SHADE_PRESETS.forEach((color) => {
+				const sw = createElement("div", {
+					class: "an-context-color-swatch",
+					title: color
+				});
+				sw.style.background = color;
+				this._disposers.push(on(sw, "click", (e) => {
+					e.stopPropagation();
+					this._applyCellShade(color);
+				}));
+				palette.appendChild(sw);
+			});
+			pop.appendChild(palette);
+			const noShadeRow = createElement("div", { class: "an-context-color-custom" });
+			const noShadeBtn = createElement("button", {
+				type: "button",
+				class: "an-shade-no-color"
+			});
+			this._disposers.push(on(noShadeBtn, "click", () => this._applyCellShade("")));
+			noShadeRow.appendChild(noShadeBtn);
+			pop.appendChild(noShadeRow);
+			this._shadeNoBtn = noShadeBtn;
+			const customRow = createElement("div", { class: "an-context-color-custom" });
+			const colorInput = createElement("input", {
+				type: "color",
+				class: "an-shade-color-input",
+				value: "#ffffff"
+			});
+			const customLabel = createElement("span");
+			customLabel.textContent = "Custom…";
+			this._disposers.push(on(colorInput, "change", () => this._applyCellShade(colorInput.value)));
+			customRow.appendChild(colorInput);
+			customRow.appendChild(customLabel);
+			pop.appendChild(customRow);
+			this._disposers.push(on(pop, "mousedown", (e) => e.preventDefault()));
+			this._disposers.push(on(pop, "mouseenter", () => this._clearTimers()), on(pop, "mouseleave", () => this._scheduleHide()));
+			this._disposers.push(on(document, "click", (e) => {
+				const et = e.target;
+				if (this._shadePopover && this._shadePopover.style.display !== "none" && !this._shadePopover.contains(et) && !(this._el && this._el.contains(et))) this._hideCellShadePopover();
+			}));
+			return pop;
+		}
+		_openCellShadePopover() {
+			if (!this._shadePopover) return;
+			const L = this.context.locale.tooltips.table;
+			if (this._shadeTitleEl) this._shadeTitleEl.textContent = L.cellBackground;
+			if (this._shadeNoBtn) this._shadeNoBtn.textContent = L.noShading;
+			this._shadePopover.style.display = "block";
+			requestAnimationFrame(() => {
+				if (!this._shadePopover || !this._el) return;
+				const pw = this._shadePopover.offsetWidth || 170;
+				const ph = this._shadePopover.offsetHeight || 120;
+				const tipRect = this._el.getBoundingClientRect();
+				let left = tipRect.left;
+				let top = tipRect.bottom + 6;
+				if (left + pw > window.innerWidth - 8) left = window.innerWidth - pw - 8;
+				if (top + ph > window.innerHeight - 8) top = tipRect.top - ph - 6;
+				this._shadePopover.style.left = `${Math.max(8, left)}px`;
+				this._shadePopover.style.top = `${Math.max(8, top)}px`;
+			});
+		}
+		_hideCellShadePopover() {
+			if (this._shadePopover) this._shadePopover.style.display = "none";
+		}
+		_applyCellShade(color) {
+			(this._selectMode ? this._selectedCells : [this._getCell()]).forEach((cell) => {
+				if (cell) cell.style.backgroundColor = color;
+			});
+			if (this._shadeColorStrip) this._shadeColorStrip.style.background = color || "transparent";
+			this._hideCellShadePopover();
+			this.context.invoke("editor.afterCommand");
+		}
 	};
 	//#endregion
 	//#region src/js/module/CodeTooltip.js
@@ -9446,13 +9777,14 @@
 			const editable = this.context.layoutInfo.editable;
 			this._disposers.push(on(editable, "mouseover", (e) => {
 				if (this.context.layoutInfo.container.classList.contains("an-disabled")) return;
-				const pre = e.target.closest("pre");
+				const pre = e.target?.closest("pre");
 				if (pre && editable.contains(pre)) this._scheduleShow(pre);
 			}), on(editable, "mouseout", (e) => {
 				const to = e.relatedTarget;
 				if (!to || !editable.contains(to) && !this._el.contains(to)) this._scheduleHide();
 			}), on(document, "click", (e) => {
-				if (this._activePre && !this._activePre.contains(e.target) && !this._el.contains(e.target)) this._hide();
+				const et = e.target;
+				if (this._activePre && !this._activePre.contains(et) && !this._el.contains(et)) this._hide();
 			}));
 			return this;
 		}
@@ -9487,6 +9819,7 @@
 				["python", "Python"],
 				["html", "HTML"],
 				["css", "CSS"],
+				["scss", "SCSS"],
 				["json", "JSON"],
 				["xml", "XML"],
 				["bash", "Bash / Shell"],
@@ -9642,10 +9975,27 @@
 			this.context.invoke("editor.afterCommand");
 			this._positionNear(pre);
 		}
+		/**
+		* Applies a language to a given <pre> element: sets classes, data-language,
+		* and triggers Prism highlighting. Called by the auto-detect flow.
+		* @param {HTMLElement} pre
+		* @param {string} lang - Prism language identifier, e.g. 'javascript'
+		*/
+		applyLanguage(pre, lang) {
+			if (!pre || !lang) return;
+			const savedPre = this._activePre;
+			this._langSelect && this._langSelect.value;
+			this._activePre = pre;
+			if (this._langSelect) this._langSelect.value = lang;
+			this._onLangChange();
+			if (this._langSelect) this._langSelect.value = lang;
+			this._activePre = savedPre || pre;
+		}
 		_onLangChange() {
 			const pre = this._activePre;
 			if (!pre) return;
 			const lang = this._langSelect.value;
+			const _w = window;
 			let codeEl = pre.querySelector("code");
 			if (!codeEl) {
 				codeEl = document.createElement("code");
@@ -9659,12 +10009,12 @@
 			else pre.removeAttribute("data-language");
 			const applyPrism = () => {
 				codeEl.querySelectorAll("br").forEach((br) => br.replaceWith("\n"));
-				window.Prism.highlightElement(codeEl);
+				_w.Prism.highlightElement(codeEl);
 				this.context.invoke("editor.afterCommand");
 			};
 			if (lang) {
-				if (typeof window.Prism !== "undefined") {
-					if (window.Prism.languages[lang]) {
+				if (typeof _w.Prism !== "undefined") {
+					if (_w.Prism.languages[lang]) {
 						applyPrism();
 						return;
 					}
@@ -9672,7 +10022,7 @@
 					return;
 				} else if (this._prismScript) {
 					this._prismScript.addEventListener("load", () => {
-						if (window.Prism.languages[lang]) applyPrism();
+						if (_w.Prism.languages[lang]) applyPrism();
 						else this._loadPrismComponent(lang, applyPrism);
 					}, { once: true });
 					return;
@@ -9685,7 +10035,8 @@
 		* Called once at initialize time. Fire-and-forget; errors are silent.
 		*/
 		_ensurePrism() {
-			if (!this.context.options.codeHighlight || window.Prism) return;
+			const _w = window;
+			if (!this.context.options.codeHighlight || _w.Prism) return;
 			const cdn = this.context.options.codeHighlightCDN;
 			const themeHref = `${cdn}/themes/prism-tomorrow.min.css`;
 			const scriptSrc = `${cdn}/prism.min.js`;
@@ -9697,7 +10048,7 @@
 			}
 			const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
 			if (existingScript) {
-				this._prismScript = window.Prism ? null : existingScript;
+				this._prismScript = _w.Prism ? null : existingScript;
 				return;
 			}
 			const script = document.createElement("script");
@@ -9717,10 +10068,11 @@
 		* @param {Function} cb  – called once the grammar is ready
 		*/
 		_loadPrismComponent(lang, cb) {
+			const _w = window;
 			const src = `${this.context.options.codeHighlightCDN}/components/prism-${lang}.min.js`;
 			if (document.querySelector(`script[src="${src}"]`)) {
 				const poll = setInterval(() => {
-					if (window.Prism && window.Prism.languages[lang]) {
+					if (_w.Prism && _w.Prism.languages[lang]) {
 						clearInterval(poll);
 						cb();
 					}
@@ -12133,15 +12485,19 @@
 			});
 			const box = createElement("div", { class: "an-dialog-box an-emoji-box" });
 			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);
 			const searchInput = createElement("input", {
 				type: "search",
 				class: "an-input an-icon-search",
@@ -12190,6 +12546,7 @@
 			btnRow.appendChild(cancelBtn);
 			box.append(titleRow, searchInput, catBar, grid, btnRow);
 			overlay.appendChild(box);
+			makeDraggable(titleRow, box);
 			const d1 = on(closeBtn, "click", () => this._close());
 			const d2 = on(cancelBtn, "click", () => this._close());
 			const d3 = on(overlay, "click", (e) => {
@@ -12197,7 +12554,7 @@
 			});
 			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 = e.target?.closest("[data-cat]");
 				if (tab) {
 					this._activeCat = tab.dataset.cat;
 					this._updateCatTabs();
@@ -12205,7 +12562,7 @@
 				}
 			});
 			const d6 = on(grid, "click", (e) => {
-				const cell = e.target.closest(".an-emoji-cell");
+				const cell = e.target?.closest(".an-emoji-cell");
 				if (cell) this._onEmojiClick(cell.dataset.char);
 			});
 			this._disposers.push(d1, d2, d3, d4, d5, d6);
@@ -12213,17 +12570,22 @@
 		}
 		_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
+				);
 			});
 		}
 		_filterEmojis(query, cat) {
 			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 = 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");
@@ -12232,7 +12594,7 @@
 				empty.textContent = "No emojis found";
 				this._grid.appendChild(empty);
 			}
-			empty.style.display = count > 0 ? "none" : "";
+			/** @type {HTMLElement} */ empty.style.display = count > 0 ? "none" : "";
 		}
 		_onEmojiClick(char) {
 			const savedRange = this._savedRange;
@@ -12246,7 +12608,7 @@
 				range.collapse(false);
 			}
 			const _sc = range.startContainer;
-			const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)?.closest?.("td, th");
+			const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)?.closest("td, th");
 			range.deleteContents();
 			if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
 				range.setStart(_tdAnchor, 0);
@@ -12606,15 +12968,19 @@
 			});
 			const box = createElement("div", { class: "an-dialog-box an-icon-box" });
 			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);
 			const searchInput = createElement("input", {
 				type: "search",
 				class: "an-input an-icon-search",
@@ -12729,6 +13095,7 @@
 			this._insertBtn = insertBtn;
 			box.append(titleRow, searchInput, catBar, grid, optRow, preview, btnRow);
 			overlay.appendChild(box);
+			makeDraggable(titleRow, box);
 			const d1 = on(closeBtn, "click", () => this._close());
 			const d2 = on(cancelBtn, "click", () => this._close());
 			const d3 = on(insertBtn, "click", () => this._onInsert());
@@ -12737,7 +13104,7 @@
 			});
 			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 = e.target?.closest("[data-cat]");
 				if (tab) {
 					this._activeCat = tab.dataset.cat;
 					this._updateCatTabs();
@@ -12745,7 +13112,7 @@
 				}
 			});
 			const d7 = on(grid, "click", (e) => {
-				const cell = e.target.closest(".an-icon-cell");
+				const cell = e.target?.closest(".an-icon-cell");
 				if (cell) this._selectIcon(cell.dataset.name);
 			});
 			const d8 = on(styleSelect, "change", () => this._updatePreview(this._selectedIcon));
@@ -12757,19 +13124,24 @@
 		}
 		_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
+				);
 			});
 		}
 		_filterIcons(query, cat) {
 			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 = 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++;
 			});
 			let empty = this._grid.querySelector(".an-icon-empty");
@@ -12778,12 +13150,16 @@
 				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;
 			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
+				);
 			});
 			this._insertBtn.removeAttribute("disabled");
 			this._updatePreview(name);
@@ -12822,7 +13198,7 @@
 				range.collapse(false);
 			}
 			const _sc = range.startContainer;
-			const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)?.closest?.("td, th");
+			const _tdAnchor = (_sc.nodeType === 1 ? _sc : _sc.parentElement)?.closest("td, th");
 			range.deleteContents();
 			if (_tdAnchor && _tdAnchor.isConnected && !_tdAnchor.contains(range.startContainer)) {
 				range.setStart(_tdAnchor, 0);
@@ -13093,13 +13469,13 @@
 			this._menuDisposers.forEach((d) => {
 				try {
 					d();
-				} catch (e) {}
+				} catch (_e) {}
 			});
 			this._menuDisposers = [];
 			this._disposers.forEach((d) => {
 				try {
 					d();
-				} catch (e) {}
+				} catch (_e) {}
 			});
 			this._disposers = [];
 			if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
@@ -13290,13 +13666,13 @@
 					});
 					this._menuDisposers.push(offHeader);
 					const offMove = on(gridEl, "mousemove", (e) => {
-						const cell = e.target.closest("[data-row]");
+						const cell = e.target?.closest("[data-row]");
 						if (!cell) return;
 						setHighlight(+cell.dataset.row, +cell.dataset.col);
 					});
 					const offLeave = on(gridEl, "mouseleave", () => setHighlight(0, 0));
 					const offClick = on(gridEl, "click", (e) => {
-						const cell = e.target.closest("[data-row]");
+						const cell = e.target?.closest("[data-row]");
 						if (!cell) return;
 						const rows = +cell.dataset.row;
 						const cols = +cell.dataset.col;
@@ -13321,7 +13697,7 @@
 					class: "an-context-item",
 					"data-name": it.name || ""
 				});
-				if (typeof it.disabled === "function" ? it.disabled(this.context) : !!it.disabled) btn.disabled = true;
+				if (typeof it.disabled === "function" ? it.disabled(this.context) : !!it.disabled) /** @type {HTMLButtonElement} */ btn.disabled = true;
 				if (it.icon) {
 					const iconSpan = createElement("span", {
 						class: "an-context-icon",
@@ -13353,7 +13729,7 @@
 			const winSel = window.getSelection();
 			this._savedRange = winSel && winSel.rangeCount > 0 ? winSel.getRangeAt(0).cloneRange() : null;
 			this._renderItems(this._items);
-			let openX = event.clientX;
+			const openX = event.clientX;
 			let openY = event.clientY;
 			if (this._savedRange && !this._savedRange.collapsed) try {
 				const selRect = this._savedRange.getBoundingClientRect();
@@ -13519,7 +13895,7 @@
 			while (el = iter.nextNode()) {
 				if (!editable.contains(el) || el === editable) continue;
 				try {
-					if (range.intersectsNode(el)) el.removeAttribute("style");
+					if (range.intersectsNode(el)) /** @type {Element} */ el.removeAttribute("style");
 				} catch {}
 			}
 			this.context.invoke("editor.afterCommand");
@@ -13781,8 +14157,8 @@
 			const replaceActions = this._dialog.querySelector(".an-fr-replace-actions");
 			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;
 		}
 		_buildDialog() {
@@ -13793,106 +14169,123 @@
 				"aria-modal": "true",
 				"aria-label": L.findReplaceTitle
 			});
-			const box = createElement("div", { class: "an-dialog-box" });
-			const titleRow = createElement("div", { class: "an-icon-title-row" });
+			const box = createElement("div", { class: "an-dialog-box an-fr-box" });
+			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);
-			const findRow = createElement("div", { class: "an-fr-find-row" });
+			header.append(titleGroup, closeBtn);
+			box.appendChild(header);
+			const searchBar = createElement("div", { class: "an-fr-search-bar" });
 			const findInput = 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);
-			const optRow = createElement("div", { class: "an-fr-options-row" });
-			const caseLabel = createElement("label", { class: "an-label an-label-inline" });
 			const caseCheckbox = createElement("input", {
 				type: "checkbox",
-				"aria-label": "Case sensitive"
+				style: "display:none",
+				"aria-hidden": "true"
 			});
 			this._caseCheckbox = caseCheckbox;
-			caseLabel.append(caseCheckbox, document.createTextNode(L.caseSensitive));
-			const counter = createElement("span", { class: "an-fr-counter" });
-			this._counterEl = counter;
-			optRow.append(caseLabel, counter);
-			box.appendChild(optRow);
-			const findActions = createElement("div", { class: "an-dialog-actions an-fr-find-actions" });
+			const caseBtn = createElement("button", {
+				type: "button",
+				class: "an-fr-icon-btn",
+				title: "Case sensitive",
+				"aria-label": "Case sensitive"
+			});
+			caseBtn.textContent = "Aa";
 			const prevBtn = createElement("button", {
 				type: "button",
-				class: "an-btn"
+				class: "an-fr-icon-btn",
+				title: "Previous (Shift+Enter)",
+				"aria-label": "Previous"
 			});
-			prevBtn.textContent = L.prevBtn;
+			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-btn an-btn-primary"
+				class: "an-fr-icon-btn",
+				title: "Next (Enter)",
+				"aria-label": "Next"
 			});
-			nextBtn.textContent = L.nextBtn;
-			findActions.append(prevBtn, nextBtn);
-			box.appendChild(findActions);
+			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;
+			searchBar.append(findInput, caseCheckbox, caseBtn, prevBtn, nextBtn, counter);
+			box.appendChild(searchBar);
 			const replaceRow = createElement("div", { class: "an-fr-replace-row" });
 			replaceRow.style.display = "none";
 			const replaceInput = 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);
-			box.appendChild(replaceRow);
-			const replaceActions = createElement("div", { class: "an-dialog-actions an-fr-replace-actions" });
-			replaceActions.style.display = "none";
 			const replaceBtn = createElement("button", {
 				type: "button",
-				class: "an-btn"
+				class: "an-btn an-fr-replace-btn"
 			});
 			replaceBtn.textContent = L.replaceBtn;
 			const replaceAllBtn = createElement("button", {
 				type: "button",
-				class: "an-btn an-btn-primary"
+				class: "an-btn an-btn-primary an-fr-replace-btn"
 			});
 			replaceAllBtn.textContent = L.replaceAllBtn;
-			replaceActions.append(replaceBtn, replaceAllBtn);
+			replaceRow.append(replaceInput, replaceBtn, replaceAllBtn);
+			box.appendChild(replaceRow);
+			const replaceActions = createElement("div", { class: "an-fr-replace-actions" });
+			replaceActions.style.display = "none";
 			box.appendChild(replaceActions);
 			overlay.appendChild(box);
+			makeDraggable(header, box);
 			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();
+			});
+			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 = 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) => {
+			const d11 = on(replaceInput, "keydown", (e) => {
 				if (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;
 		}
 		_onSearch() {
@@ -14253,9 +14646,10 @@
 				}), on(h, "touchstart", (e) => {
 					e.preventDefault();
 					e.stopPropagation();
+					const te = e;
 					this._startHandleDrag({
-						clientX: e.touches[0].clientX,
-						clientY: e.touches[0].clientY
+						clientX: te.touches[0].clientX,
+						clientY: te.touches[0].clientY
 					}, id);
 				}, { passive: false }));
 				this._handles[id] = h;
@@ -14272,9 +14666,10 @@
 				if (e.target !== cropBox && e.target !== grid) return;
 				e.preventDefault();
 				e.stopPropagation();
+				const te2 = e;
 				this._startBoxMove({
-					clientX: e.touches[0].clientX,
-					clientY: e.touches[0].clientY
+					clientX: te2.touches[0].clientX,
+					clientY: te2.touches[0].clientY
 				});
 			}, { passive: false }));
 			const infoEl = document.createElement("div");
@@ -14436,9 +14831,10 @@
 		_attachDocDrag(onMove) {
 			const onTouchMove = (e) => {
 				e.preventDefault();
+				const te3 = e;
 				onMove({
-					clientX: e.touches[0].clientX,
-					clientY: e.touches[0].clientY
+					clientX: te3.touches[0].clientX,
+					clientY: te3.touches[0].clientY
 				});
 			};
 			const cleanup = () => {
@@ -15015,7 +15411,9 @@
 			const d6 = this.context.on("contextMenu:hide", () => {
 				this._contextMenuOpen = false;
 			});
-			this._disposers.push(d1, d2, d3, d4, d5, d6);
+			const d7 = on(window, "scroll", () => this._hide(), { passive: true });
+			const d8 = on(window, "resize", () => this._hide(), { passive: true });
+			this._disposers.push(d1, d2, d3, d4, d5, d6, d7, d8);
 			return this;
 		}
 		destroy() {
@@ -15129,20 +15527,22 @@
 			picker.appendChild(customRow);
 			document.body.appendChild(picker);
 			this._picker = picker;
-			this._picker._paletteEl = palette;
-			this._picker._noColorBtn = noColorBtn;
-			this._picker._colorInput = colorInput;
+			const pickerAny = picker;
+			pickerAny._paletteEl = palette;
+			pickerAny._noColorBtn = noColorBtn;
+			pickerAny._colorInput = colorInput;
 		}
 		_openColorPicker(type, anchorBtn) {
 			const sel = window.getSelection();
 			if (sel && sel.rangeCount > 0) this._savedRange = sel.getRangeAt(0).cloneRange();
 			this._pickerType = type;
-			const palette = this._picker._paletteEl;
-			const noColorBtn = this._picker._noColorBtn;
+			const pickerAny = this._picker;
+			const palette = pickerAny._paletteEl;
+			const noColorBtn = pickerAny._noColorBtn;
 			if (type === "hiliteColor") {
 				if (!palette.contains(noColorBtn)) palette.appendChild(noColorBtn);
 			} else if (palette.contains(noColorBtn)) palette.removeChild(noColorBtn);
-			this._picker._colorInput.value = type === "foreColor" ? "#000000" : "#ffff00";
+			/** @type {any} */ this._picker._colorInput.value = type === "foreColor" ? "#000000" : "#ffff00";
 			this._picker.style.display = "block";
 			const pw = this._picker.offsetWidth;
 			const ph = this._picker.offsetHeight;
@@ -15176,7 +15576,7 @@
 			const name = type === "hiliteColor" ? "hiliteColor" : "foreColor";
 			const btn = this._el && this._el.querySelector(`[data-name="${name}"]`);
 			const strip = btn && btn.querySelector(".an-bubble-color-strip");
-			if (strip) strip.style.background = color === "transparent" ? "transparent" : color;
+			if (strip) /** @type {HTMLElement} */ strip.style.background = color === "transparent" ? "transparent" : color;
 			this._closeColorPicker();
 			this._syncActive();
 		}
@@ -15192,6 +15592,14 @@
 			let top = rect.top - bh - gap;
 			left = Math.max(8, Math.min(left, window.innerWidth - bw - 8));
 			if (top < 8) top = rect.bottom + gap;
+			const tableTooltipEl = document.querySelector(".an-table-tooltip");
+			if (tableTooltipEl && tableTooltipEl.style.display !== "none") {
+				const ttRect = tableTooltipEl.getBoundingClientRect();
+				if (top < ttRect.bottom + gap && top + bh > ttRect.top - gap) {
+					top = rect.bottom + gap;
+					if (top + bh > window.innerHeight - 8) top = ttRect.bottom + gap;
+				}
+			}
 			el.style.top = `${top}px`;
 			el.style.left = `${left}px`;
 			el.style.visibility = "";
@@ -15223,12 +15631,12 @@
 			const cs = window.getComputedStyle(node);
 			const foreBtn = this._el.querySelector("[data-name=\"foreColor\"]");
 			const foreStrip = foreBtn && foreBtn.querySelector(".an-bubble-color-strip");
-			if (foreStrip) foreStrip.style.background = cs.color || "#000000";
+			if (foreStrip) /** @type {HTMLElement} */ foreStrip.style.background = cs.color || "#000000";
 			const hiliteBtn = this._el.querySelector("[data-name=\"hiliteColor\"]");
 			const hiliteStrip = hiliteBtn && hiliteBtn.querySelector(".an-bubble-color-strip");
 			if (hiliteStrip) {
 				const bg = cs.backgroundColor;
-				hiliteStrip.style.background = !bg || bg === "rgba(0, 0, 0, 0)" || bg === "transparent" ? "transparent" : bg;
+				/** @type {HTMLElement} */ hiliteStrip.style.background = !bg || bg === "rgba(0, 0, 0, 0)" || bg === "transparent" ? "transparent" : bg;
 			}
 		}
 		_onSelectionChange() {
@@ -15356,11 +15764,11 @@
 			el.setAttribute("role", "listbox");
 			el.addEventListener("mousedown", (e) => e.preventDefault());
 			el.addEventListener("click", (e) => {
-				const item = e.target.closest(".an-mention-item");
+				const item = e.target?.closest(".an-mention-item");
 				if (item) this._select(+item.dataset.index);
 			});
 			el.addEventListener("mousemove", (e) => {
-				const item = e.target.closest(".an-mention-item");
+				const item = e.target?.closest(".an-mention-item");
 				if (item) this._highlightItem(+item.dataset.index);
 			});
 			document.body.appendChild(el);
@@ -15375,7 +15783,7 @@
 				const li = document.createElement("div");
 				li.className = "an-mention-item";
 				li.setAttribute("role", "option");
-				li.dataset.index = i;
+				li.dataset.index = String(i);
 				if (item.avatar) {
 					const img = document.createElement("img");
 					img.src = item.avatar;
@@ -15625,7 +16033,7 @@
 		/**
 		* Registers and initialises a custom module on this instance.
 		* @param {string} name
-		* @param {Function} ModuleClass
+		* @param {new (ctx: this) => any} ModuleClass
 		* @returns {this}
 		*/
 		registerModule(name, ModuleClass) {
@@ -15932,10 +16340,12 @@
 			this._disposers.forEach((d) => d());
 			this._disposers = [];
 			const container = this.layoutInfo.container;
+			const wasDark = container && container.classList.contains("an-theme-dark");
 			if (container && container.parentNode) {
 				this.targetEl.style.display = "";
 				container.parentNode.removeChild(container);
 			}
+			if (wasDark && !document.querySelector(".an-container.an-theme-dark")) document.body.classList.remove("an-theme-dark");
 			if (typeof this.options.onDestroy === "function") this.options.onDestroy(this);
 			this._alive = false;
 			this._listeners.clear();
@@ -15944,7 +16354,8 @@
 		* Syncs editor HTML back into the original textarea/input for form submission.
 		*/
 		_syncToTarget() {
-			if (this.targetEl.tagName === "TEXTAREA" || this.targetEl.tagName === "INPUT") this.targetEl.value = this.getHTML();
+			if (this.targetEl.tagName === "TEXTAREA" || this.targetEl.tagName === "INPUT")
+ /** @type {HTMLInputElement} */ this.targetEl.value = this.getHTML();
 		}
 	};
 	//#endregion
@@ -15961,6 +16372,13 @@
 	/** @type {WeakMap<Element, Context>} */
 	var instances = /* @__PURE__ */ new WeakMap();
 	var AutumnNote = {
+		/**
+		* Creates (or returns existing) editor instance on one or more elements.
+		*
+		* @param {string|Element|NodeList|Element[]} selector
+		* @param {import('./settings.js').AsnOptions} [options]
+		* @returns {Context|Context[]} single Context or array of Contexts
+		*/
 		create(selector, options = {}) {
 			const ctxs = resolveElements(selector).map((el) => {
 				if (instances.has(el)) return instances.get(el);
@@ -15971,6 +16389,10 @@
 			});
 			return ctxs.length === 1 ? ctxs[0] : ctxs;
 		},
+		/**
+		* Destroys the editor(s) on the given selector.
+		* @param {string|Element|NodeList|Element[]} selector
+		*/
 		destroy(selector) {
 			resolveElements(selector).forEach((el) => {
 				const ctx = instances.get(el);
@@ -15980,23 +16402,45 @@
 				}
 			});
 		},
+		/**
+		* Returns the Context instance for a given element (or null).
+		* @param {string|Element} selector
+		* @returns {Context|null}
+		*/
 		getInstance(selector) {
 			const el = typeof selector === "string" ? document.querySelector(selector) : selector;
 			return el ? instances.get(el) || null : null;
 		},
+		/** Returns a shallow copy of the default options (read-only snapshot). */
 		get defaults() {
 			return { ...defaultOptions };
 		},
+		/** Merges properties into the global defaults, applied to all future instances. */
 		setDefaults(overrides) {
 			Object.assign(defaultOptions, overrides);
 		},
+		/** Restores global defaults to their original factory values. */
 		resetDefaults() {
 			Object.keys(defaultOptions).forEach((k) => delete defaultOptions[k]);
 			Object.assign(defaultOptions, _originalDefaults);
 		},
+		/**
+		* Registers a custom module to be included in every new editor instance.
+		* @param {string} name - unique module key used for ctx.invoke() calls
+		* @param {Function} ModuleClass - class with initialize() and optional destroy()
+		*/
 		registerModule(name, ModuleClass) {
 			_customModules.set(name, ModuleClass);
 		},
+		/**
+		* Installs a plugin globally — applied to every future editor instance.
+		* Plugin `buttons` are registered to the global button registry immediately
+		* so they are available when Toolbar initialises inside create().
+		* Plugin `install()` is called after all built-in modules have initialised.
+		* @param {object} plugin - { name, version?, buttons?, install?, uninstall? }
+		* @param {object} [options] - Forwarded to plugin.install(context, options)
+		* @returns {typeof AutumnNote}
+		*/
 		use(plugin, options = {}) {
 			if (!plugin || typeof plugin.name !== "string") throw new TypeError("[AutumnNote] AutumnNote.use: plugin must have a string `name` property.");
 			if (_globalPlugins.has(plugin.name)) {
@@ -16010,14 +16454,26 @@
 			});
 			return this;
 		},
+		/**
+		* Returns true if a plugin with the given name has been registered globally.
+		* @param {string} name
+		* @returns {boolean}
+		*/
 		hasPlugin(name) {
 			return _globalPlugins.has(name);
 		},
+		/**
+		* Registers a single button definition in the global button registry.
+		* After create(), call ctx.invoke('toolbar.rebuild') to render new buttons.
+		* @param {object} btnDef - ButtonDef-compatible object with a `name` string
+		* @returns {typeof AutumnNote}
+		*/
 		registerButton(btnDef) {
 			registerButton(btnDef);
 			return this;
 		},
-		version: "1.4.2"
+		/** Library version */
+		version: "1.5.0"
 	};
 	/**
 	* @param {string|Element|NodeList|Element[]} selector