autumnnote 1.4.2 → 1.6.0

package/dist/autumnnote.es.js

@@ -375,16 +375,60 @@ function trapFocus(container, onEscape) {
 		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
 /**
@@ -566,7 +610,7 @@ function underline() {
 	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;
@@ -586,7 +630,7 @@ function strikethrough() {
 	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;
@@ -623,7 +667,7 @@ var fontName = (name) => execCommand("fontName", name);
 * 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();
@@ -705,7 +749,7 @@ function outdent() {
 	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;
@@ -827,15 +871,15 @@ function lineHeight(value) {
 /**
 * 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;
@@ -890,7 +934,7 @@ function isInlineCode() {
 	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"));
 }
 /**
@@ -913,11 +957,11 @@ function toggleChecklist() {
 	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) {
@@ -1015,7 +1059,7 @@ function toggleChecklist() {
 	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");
@@ -1048,7 +1092,7 @@ function isInChecklist() {
 	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
@@ -1059,12 +1103,14 @@ function isInChecklist() {
 */
 /**
 * @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
@@ -1132,7 +1178,7 @@ var underlineBtn = btn("underline", "underline", "Underline (Ctrl+U)", () => und
 	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"));
@@ -1194,9 +1240,9 @@ var fontSizeBtn = {
 			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;
@@ -1321,8 +1367,11 @@ var lineHeightBtn = {
 				"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 {
@@ -1416,47 +1465,64 @@ var defaultToolbar = [
 */
 /**
 * @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,
@@ -1590,6 +1656,7 @@ var en = {
 		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",
@@ -1632,6 +1699,7 @@ var en = {
 		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."
@@ -1794,9 +1862,13 @@ var en = {
 	},
 	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: {
@@ -1849,6 +1921,8 @@ var en = {
 			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)",
@@ -1869,7 +1943,9 @@ var en = {
 		}
 	},
 	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.`
 	}
 };
@@ -2202,6 +2278,8 @@ var locales = {
 				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)",
@@ -4403,7 +4481,10 @@ function renderLayout(targetEl, options) {
 	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) => {
@@ -4441,7 +4522,7 @@ var History = class {
 	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();
@@ -4640,8 +4721,7 @@ var History = class {
 * 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 = {}) {
@@ -4675,7 +4755,6 @@ function createTable(cols, rows, opts = {}) {
 * @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;
@@ -4698,7 +4777,7 @@ function insertTable(cols, rows, opts = {}) {
 		"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);
@@ -4816,7 +4895,7 @@ function handleKeydown(event, editable, options = {}) {
 				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)) {
@@ -4962,7 +5041,7 @@ function handleKeydown(event, editable, options = {}) {
 			}
 			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");
@@ -4976,7 +5055,7 @@ function handleKeydown(event, editable, options = {}) {
 			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");
@@ -5076,8 +5155,9 @@ function htmlToMarkdown(html) {
 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`;
@@ -5095,34 +5175,34 @@ function _domToMd(node, depth = 0) {
 		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");
@@ -5131,7 +5211,7 @@ function _domToMd(node, depth = 0) {
 		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));
@@ -5279,6 +5359,47 @@ function _escAttr(v) {
 	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
@@ -5333,7 +5454,8 @@ var Editor = class {
 			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;
@@ -5373,7 +5495,7 @@ var Editor = class {
 				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();
 		}));
@@ -5387,9 +5509,12 @@ var Editor = class {
 			}
 			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;
@@ -5399,7 +5524,8 @@ var Editor = class {
 			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));
 	}
@@ -5488,6 +5614,7 @@ var Editor = class {
 	}
 	afterCommand() {
 		this._cleanOrphanedFigures();
+		this._ensureTrailingParagraph();
 		this.context.invoke("toolbar.refresh");
 		this.context.invoke("statusbar.update");
 		this._scheduleSnapshot();
@@ -5514,6 +5641,31 @@ var Editor = class {
 			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();
 	}
@@ -5697,10 +5849,24 @@ var Editor = class {
 		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();
 	}
 	/**
@@ -5757,8 +5923,8 @@ var Editor = class {
 			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");
 				}
 			}
 		}
@@ -6040,13 +6206,13 @@ var Toolbar = class {
 			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");
@@ -6209,11 +6375,17 @@ var Toolbar = class {
 			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();
@@ -6348,15 +6520,17 @@ var Toolbar = class {
 		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 : "";
 		});
 	}
 	/**
@@ -7150,8 +7324,13 @@ var LinkDialog = class {
 			"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", {
@@ -7196,8 +7375,9 @@ var LinkDialog = class {
 		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) => {
@@ -7327,8 +7507,13 @@ var ImageDialog = class {
 			"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", {
@@ -7347,7 +7532,7 @@ var ImageDialog = class {
 			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" });
@@ -7416,6 +7601,7 @@ var ImageDialog = class {
 		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) => {
@@ -7553,8 +7739,13 @@ var VideoDialog = class {
 			"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", {
@@ -7590,8 +7781,9 @@ var VideoDialog = class {
 		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 : "";
@@ -7774,7 +7966,7 @@ var ImageResizer = class {
 		};
 		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;
@@ -8184,12 +8376,12 @@ var LinkTooltip = class {
 		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() {
@@ -8374,14 +8566,15 @@ var ImageTooltip = class {
 		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() {
@@ -8465,7 +8658,7 @@ var ImageTooltip = class {
 		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);
@@ -8657,14 +8850,16 @@ var VideoTooltip = class {
 		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() {
@@ -8744,7 +8939,7 @@ var VideoTooltip = class {
 		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);
@@ -8968,8 +9163,35 @@ var ICONS$2 = {
 	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) {
@@ -8984,6 +9206,9 @@ var TableTooltip = class {
 		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;
@@ -8996,6 +9221,8 @@ var TableTooltip = class {
 		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) => {
@@ -9022,10 +9249,13 @@ var TableTooltip = class {
 		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) => {
@@ -9033,9 +9263,10 @@ var TableTooltip = class {
 			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;
 	}
@@ -9165,6 +9396,8 @@ var TableTooltip = class {
 		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;
@@ -9192,6 +9425,24 @@ var TableTooltip = class {
 		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")));
@@ -9200,6 +9451,7 @@ var TableTooltip = class {
 		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;
@@ -9246,10 +9498,16 @@ var TableTooltip = class {
 	_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;
@@ -9288,7 +9546,7 @@ var TableTooltip = class {
 		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");
@@ -9615,14 +9873,16 @@ var TableTooltip = class {
 		});
 		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());
@@ -9640,7 +9900,7 @@ var TableTooltip = class {
 			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) => {
@@ -9709,6 +9969,85 @@ var TableTooltip = class {
 		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
@@ -9741,13 +10080,14 @@ var CodeTooltip = class {
 		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;
 	}
@@ -9782,6 +10122,7 @@ var CodeTooltip = class {
 			["python", "Python"],
 			["html", "HTML"],
 			["css", "CSS"],
+			["scss", "SCSS"],
 			["json", "JSON"],
 			["xml", "XML"],
 			["bash", "Bash / Shell"],
@@ -9937,10 +10278,27 @@ var CodeTooltip = class {
 		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");
@@ -9954,12 +10312,12 @@ var CodeTooltip = class {
 		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;
 				}
@@ -9967,7 +10325,7 @@ var CodeTooltip = class {
 				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;
@@ -9980,7 +10338,8 @@ var CodeTooltip = class {
 	* 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`;
@@ -9992,7 +10351,7 @@ var CodeTooltip = class {
 		}
 		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");
@@ -10012,10 +10371,11 @@ var CodeTooltip = class {
 	* @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();
 				}
@@ -12428,15 +12788,19 @@ var EmojiDialog = class {
 		});
 		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",
@@ -12485,6 +12849,7 @@ var EmojiDialog = class {
 		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) => {
@@ -12492,7 +12857,7 @@ var EmojiDialog = class {
 		});
 		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();
@@ -12500,7 +12865,7 @@ var EmojiDialog = class {
 			}
 		});
 		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);
@@ -12508,17 +12873,22 @@ var EmojiDialog = class {
 	}
 	_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");
@@ -12527,7 +12897,7 @@ var EmojiDialog = class {
 			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;
@@ -12541,7 +12911,7 @@ var EmojiDialog = class {
 			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);
@@ -12901,15 +13271,19 @@ var IconDialog = class {
 		});
 		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",
@@ -13024,6 +13398,7 @@ var IconDialog = class {
 		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());
@@ -13032,7 +13407,7 @@ var IconDialog = class {
 		});
 		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();
@@ -13040,7 +13415,7 @@ var IconDialog = class {
 			}
 		});
 		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));
@@ -13052,19 +13427,24 @@ var IconDialog = class {
 	}
 	_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");
@@ -13073,12 +13453,16 @@ var IconDialog = class {
 			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);
@@ -13117,7 +13501,7 @@ var IconDialog = class {
 			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);
@@ -13388,13 +13772,13 @@ var ContextMenu = class {
 		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);
@@ -13585,13 +13969,13 @@ var ContextMenu = class {
 				});
 				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;
@@ -13616,7 +14000,7 @@ var ContextMenu = class {
 				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",
@@ -13648,7 +14032,7 @@ var ContextMenu = class {
 		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();
@@ -13814,7 +14198,7 @@ var ContextMenu = class {
 		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");
@@ -14076,8 +14460,8 @@ var FindReplace = class {
 		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() {
@@ -14088,106 +14472,123 @@ var FindReplace = class {
 			"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() {
@@ -14548,9 +14949,10 @@ var ImageCropOverlay = class {
 			}), 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;
@@ -14567,9 +14969,10 @@ var ImageCropOverlay = class {
 			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");
@@ -14731,9 +15134,10 @@ var ImageCropOverlay = class {
 	_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 = () => {
@@ -15310,7 +15714,9 @@ var BubbleToolbar = class {
 		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() {
@@ -15424,20 +15830,22 @@ var BubbleToolbar = class {
 		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;
@@ -15471,7 +15879,7 @@ var BubbleToolbar = class {
 		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();
 	}
@@ -15487,6 +15895,14 @@ var BubbleToolbar = class {
 		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 = "";
@@ -15518,12 +15934,12 @@ var BubbleToolbar = class {
 		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() {
@@ -15651,11 +16067,11 @@ var Mention = class {
 		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);
@@ -15670,7 +16086,7 @@ var Mention = class {
 			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;
@@ -15920,7 +16336,7 @@ var Context = class {
 	/**
 	* 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) {
@@ -16227,10 +16643,12 @@ var Context = class {
 		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();
@@ -16239,7 +16657,8 @@ var Context = class {
 	* 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
@@ -16359,13 +16778,21 @@ function any(arr, predicate) {
 */
 var userAgent = navigator.userAgent;
 var env = {
+	/** True if browser is Chrome */
 	isChrome: /Chrome\//.test(userAgent),
+	/** True if browser is Firefox */
 	isFF: /Firefox\//.test(userAgent),
+	/** True if browser is Safari (not Chrome) */
 	isSafari: /^((?!chrome|android).)*safari/i.test(userAgent),
+	/** True if browser is Edge (Chromium) */
 	isEdge: /Edg\//.test(userAgent),
+	/** True if running on macOS */
 	isMac: /Macintosh/.test(userAgent),
+	/** True if running on mobile */
 	isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent),
+	/** True if touch is supported */
 	isTouch: "ontouchstart" in window || navigator.maxTouchPoints > 0,
+	/** Modifier key name depending on platform */
 	modifierKey: /Macintosh/.test(userAgent) ? "metaKey" : "ctrlKey"
 };
 //#endregion
@@ -16374,6 +16801,13 @@ var _originalDefaults = { ...defaultOptions };
 /** @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);
@@ -16384,6 +16818,10 @@ var AutumnNote = {
 		});
 		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);
@@ -16393,23 +16831,45 @@ var AutumnNote = {
 			}
 		});
 	},
+	/**
+	* 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)) {
@@ -16423,14 +16883,26 @@ var AutumnNote = {
 		});
 		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
@@ -16443,6 +16915,6 @@ function resolveElements(selector) {
 	return [];
 }
 //#endregion
-export { Context, ELEMENT_NODE, TEXT_NODE, WrappedRange, _buttonRegistry, alignCenterBtn, alignJustifyBtn, alignLeftBtn, alignRightBtn, all, ancestors, any, backColorBtn, boldBtn, checklistBtn, children, chunk, clamp, closest, closestPara, codeviewBtn, collapsedRange, compose, createElement, currentRange, debounce, AutumnNote as default, defaultOptions, defaultToolbar, directionBtn, emojiBtn, env, findBtn, findReplaceBtn, first, flatten, fontFamilyBtn, fontSizeBtn, foreColorBtn, fromNativeRange, fullscreenBtn, getButton, groupBy, hrBtn, iconBtn, identity, imageBtn, indentBtn, initial, inlineCodeBtn, insertAfter, isAnchor, isEditable, isElement, isEmpty, isFunction, isImage, isInline, isInsideEditable, isKey, isLi, isList, isModifier, isNil, isPara, isPlainObject, isSelectionInside, isString, isTable, isText, isVoid, italicBtn, key, last, lineHeightBtn, linkBtn, locales, mergeDeep, nextElement, nodeValue, olBtn, on, outdentBtn, outerHtml, paragraphStyleBtn, placeCaret, prevElement, printBtn, rangeFromElement, rect2bnd, redoBtn, registerButton, remove, removeFormatBtn, resolveLocale, sanitiseHTML, sanitiseUrl, shortcutsBtn, splitText, strikeBtn, subscriptBtn, superscriptBtn, tableBtn, tail, throttle, trapFocus, ulBtn, underlineBtn, undoBtn, unique, unwrap, videoBtn, withSavedRange, wrap };
+export { Context, ELEMENT_NODE, TEXT_NODE, WrappedRange, _buttonRegistry, alignCenterBtn, alignJustifyBtn, alignLeftBtn, alignRightBtn, all, ancestors, any, backColorBtn, boldBtn, checklistBtn, children, chunk, clamp, closest, closestPara, codeviewBtn, collapsedRange, compose, createElement, currentRange, debounce, AutumnNote as default, defaultOptions, defaultToolbar, directionBtn, emojiBtn, env, findBtn, findReplaceBtn, first, flatten, fontFamilyBtn, fontSizeBtn, foreColorBtn, fromNativeRange, fullscreenBtn, getButton, groupBy, hrBtn, iconBtn, identity, imageBtn, indentBtn, initial, inlineCodeBtn, insertAfter, isAnchor, isEditable, isElement, isEmpty, isFunction, isImage, isInline, isInsideEditable, isKey, isLi, isList, isModifier, isNil, isPara, isPlainObject, isSelectionInside, isString, isTable, isText, isVoid, italicBtn, key, last, lineHeightBtn, linkBtn, locales, makeDraggable, mergeDeep, nextElement, nodeValue, olBtn, on, outdentBtn, outerHtml, paragraphStyleBtn, placeCaret, prevElement, printBtn, rangeFromElement, rect2bnd, redoBtn, registerButton, remove, removeFormatBtn, resolveLocale, sanitiseHTML, sanitiseUrl, shortcutsBtn, splitText, strikeBtn, subscriptBtn, superscriptBtn, tableBtn, tail, throttle, trapFocus, ulBtn, underlineBtn, undoBtn, unique, unwrap, videoBtn, withSavedRange, wrap };
 
 //# sourceMappingURL=autumnnote.es.js.map