@absolutejs/absolute 0.14.0 → 0.15.1

package/dist/dev/client/domDiff.ts

@@ -0,0 +1,261 @@
+/* DOM diffing/patching for in-place updates (zero flicker) */
+
+const getElementKey = (el: Node, index: number) => {
+	if (el.nodeType !== Node.ELEMENT_NODE) return 'text_' + index;
+	const element = el as Element;
+	if (element.id) return 'id_' + element.id;
+	if (element.hasAttribute('data-key'))
+		return 'key_' + element.getAttribute('data-key');
+	return 'tag_' + element.tagName + '_' + index;
+};
+
+const updateElementAttributes = (oldEl: Element, newEl: Element) => {
+	const newAttrs = Array.from(newEl.attributes);
+	const oldAttrs = Array.from(oldEl.attributes);
+	const runtimeAttrs = ['data-hmr-listeners-attached'];
+
+	oldAttrs.forEach(function (oldAttr) {
+		if (
+			!newEl.hasAttribute(oldAttr.name) &&
+			runtimeAttrs.indexOf(oldAttr.name) === -1
+		) {
+			oldEl.removeAttribute(oldAttr.name);
+		}
+	});
+
+	newAttrs.forEach(function (newAttr) {
+		if (
+			runtimeAttrs.indexOf(newAttr.name) !== -1 &&
+			oldEl.hasAttribute(newAttr.name)
+		) {
+			return;
+		}
+		const oldValue = oldEl.getAttribute(newAttr.name);
+		if (oldValue !== newAttr.value) {
+			oldEl.setAttribute(newAttr.name, newAttr.value);
+		}
+	});
+};
+
+const updateTextNode = (oldNode: Node, newNode: Node) => {
+	if (oldNode.nodeValue !== newNode.nodeValue) {
+		oldNode.nodeValue = newNode.nodeValue;
+	}
+};
+
+interface KeyedEntry {
+	index: number;
+	node: Node;
+}
+
+const matchChildren = (oldChildren: Node[], newChildren: Node[]) => {
+	const oldMap = new Map<string, KeyedEntry[]>();
+	const newMap = new Map<string, KeyedEntry[]>();
+
+	oldChildren.forEach(function (child, idx) {
+		const key = getElementKey(child, idx);
+		if (!oldMap.has(key)) {
+			oldMap.set(key, []);
+		}
+		oldMap.get(key)!.push({ index: idx, node: child });
+	});
+
+	newChildren.forEach(function (child, idx) {
+		const key = getElementKey(child, idx);
+		if (!newMap.has(key)) {
+			newMap.set(key, []);
+		}
+		newMap.get(key)!.push({ index: idx, node: child });
+	});
+
+	return { newMap, oldMap };
+};
+
+const isHMRScript = (el: Node) => {
+	return (
+		el.nodeType === Node.ELEMENT_NODE &&
+		(el as Element).hasAttribute &&
+		(el as Element).hasAttribute('data-hmr-client')
+	);
+};
+
+const isHMRPreserved = (el: Node) => {
+	return (
+		isHMRScript(el) ||
+		(el.nodeType === Node.ELEMENT_NODE &&
+			(el as Element).hasAttribute &&
+			(el as Element).hasAttribute('data-hmr-overlay'))
+	);
+};
+
+const patchNode = (oldNode: Node, newNode: Node) => {
+	if (
+		oldNode.nodeType === Node.TEXT_NODE &&
+		newNode.nodeType === Node.TEXT_NODE
+	) {
+		updateTextNode(oldNode, newNode);
+		return;
+	}
+
+	if (
+		oldNode.nodeType === Node.ELEMENT_NODE &&
+		newNode.nodeType === Node.ELEMENT_NODE
+	) {
+		const oldEl = oldNode as Element;
+		const newEl = newNode as Element;
+
+		if (oldEl.tagName !== newEl.tagName) {
+			const clone = newEl.cloneNode(true);
+			oldEl.replaceWith(clone);
+			return;
+		}
+
+		updateElementAttributes(oldEl, newEl);
+
+		const oldChildren = Array.from(oldNode.childNodes);
+		const newChildren = Array.from(newNode.childNodes);
+
+		const oldChildrenFiltered = oldChildren.filter(function (child) {
+			return (
+				!isHMRScript(child) &&
+				!(
+					child.nodeType === Node.ELEMENT_NODE &&
+					(child as Element).tagName === 'SCRIPT'
+				)
+			);
+		});
+		const newChildrenFiltered = newChildren.filter(function (child) {
+			return (
+				!isHMRScript(child) &&
+				!(
+					child.nodeType === Node.ELEMENT_NODE &&
+					(child as Element).tagName === 'SCRIPT'
+				)
+			);
+		});
+
+		const { oldMap } = matchChildren(
+			oldChildrenFiltered,
+			newChildrenFiltered
+		);
+		const matchedOld = new Set<Node>();
+
+		newChildrenFiltered.forEach(function (newChild, newIndex) {
+			const newKey = getElementKey(newChild, newIndex);
+			const oldMatches = oldMap.get(newKey) || [];
+
+			if (oldMatches.length > 0) {
+				let bestMatch: KeyedEntry | null = null;
+				for (let idx = 0; idx < oldMatches.length; idx++) {
+					if (!matchedOld.has(oldMatches[idx]!.node)) {
+						bestMatch = oldMatches[idx]!;
+						break;
+					}
+				}
+				if (!bestMatch && oldMatches.length > 0) {
+					bestMatch = oldMatches[0]!;
+				}
+				if (bestMatch && !matchedOld.has(bestMatch.node)) {
+					matchedOld.add(bestMatch.node);
+					patchNode(bestMatch.node, newChild);
+				} else if (oldMatches.length > 0) {
+					const clone = newChild.cloneNode(true);
+					oldNode.insertBefore(
+						clone,
+						oldChildrenFiltered[newIndex] || null
+					);
+				}
+			} else {
+				const clone = newChild.cloneNode(true);
+				oldNode.insertBefore(
+					clone,
+					oldChildrenFiltered[newIndex] || null
+				);
+			}
+		});
+
+		oldChildrenFiltered.forEach(function (oldChild) {
+			if (!matchedOld.has(oldChild) && !isHMRPreserved(oldChild)) {
+				oldChild.remove();
+			}
+		});
+	}
+};
+
+export const patchDOMInPlace = (oldContainer: HTMLElement, newHTML: string) => {
+	const tempDiv = document.createElement('div');
+	tempDiv.innerHTML = newHTML;
+	const newContainer = tempDiv;
+
+	const oldChildren = Array.from(oldContainer.childNodes);
+	const newChildren = Array.from(newContainer.childNodes);
+
+	const oldChildrenFiltered = oldChildren.filter(function (child) {
+		return !(
+			child.nodeType === Node.ELEMENT_NODE &&
+			(child as Element).tagName === 'SCRIPT' &&
+			!(child as Element).hasAttribute('data-hmr-client')
+		);
+	});
+	const newChildrenFiltered = newChildren.filter(function (child) {
+		return !(
+			child.nodeType === Node.ELEMENT_NODE &&
+			(child as Element).tagName === 'SCRIPT'
+		);
+	});
+
+	const { oldMap } = matchChildren(oldChildrenFiltered, newChildrenFiltered);
+	const matchedOld = new Set<Node>();
+
+	newChildrenFiltered.forEach(function (newChild, newIndex) {
+		const newKey = getElementKey(newChild, newIndex);
+		const oldMatches = oldMap.get(newKey) || [];
+
+		if (oldMatches.length > 0) {
+			let bestMatch: KeyedEntry | null = null;
+			for (let idx = 0; idx < oldMatches.length; idx++) {
+				if (!matchedOld.has(oldMatches[idx]!.node)) {
+					bestMatch = oldMatches[idx]!;
+					break;
+				}
+			}
+			if (!bestMatch && oldMatches.length > 0) {
+				bestMatch = oldMatches[0]!;
+			}
+			if (bestMatch && !matchedOld.has(bestMatch.node)) {
+				matchedOld.add(bestMatch.node);
+				patchNode(bestMatch.node, newChild);
+			} else {
+				const clone = newChild.cloneNode(true);
+				oldContainer.insertBefore(
+					clone,
+					oldChildrenFiltered[newIndex] || null
+				);
+			}
+		} else {
+			const clone = newChild.cloneNode(true);
+			oldContainer.insertBefore(
+				clone,
+				oldChildrenFiltered[newIndex] || null
+			);
+		}
+	});
+
+	oldChildrenFiltered.forEach(function (oldChild) {
+		if (
+			!matchedOld.has(oldChild) &&
+			!(
+				oldChild.nodeType === Node.ELEMENT_NODE &&
+				(oldChild as Element).tagName === 'SCRIPT' &&
+				(oldChild as Element).hasAttribute('data-hmr-client')
+			) &&
+			!(
+				oldChild.nodeType === Node.ELEMENT_NODE &&
+				(oldChild as Element).hasAttribute &&
+				(oldChild as Element).hasAttribute('data-hmr-overlay')
+			)
+		) {
+			oldChild.remove();
+		}
+	});
+};

package/dist/dev/client/domState.ts

@@ -0,0 +1,271 @@
+/* DOM state snapshot/restore to preserve user-visible state across HMR */
+
+import type { DOMStateEntry, DOMStateSnapshot } from '../../../types/client';
+
+export const saveDOMState = (root: HTMLElement) => {
+	const snapshot: DOMStateSnapshot = { activeKey: null, items: [] };
+	const selector =
+		'input, textarea, select, option, [contenteditable="true"], details';
+	const elements = root.querySelectorAll(selector);
+
+	elements.forEach(function (el, idx) {
+		const entry: DOMStateEntry = {
+			idx,
+			tag: el.tagName.toLowerCase()
+		};
+		const id = el.getAttribute('id');
+		const name = el.getAttribute('name');
+		if (id) entry.id = id;
+		else if (name) entry.name = name;
+
+		if (el.tagName === 'INPUT') {
+			const input = el as HTMLInputElement;
+			const type = input.getAttribute('type') || 'text';
+			entry.type = type;
+			if (type === 'checkbox' || type === 'radio') {
+				entry.checked = input.checked;
+			} else {
+				entry.value = input.value;
+			}
+			if (input.selectionStart !== null && input.selectionEnd !== null) {
+				entry.selStart = input.selectionStart;
+				entry.selEnd = input.selectionEnd;
+			}
+		} else if (el.tagName === 'TEXTAREA') {
+			const textarea = el as HTMLTextAreaElement;
+			entry.value = textarea.value;
+			if (
+				textarea.selectionStart !== null &&
+				textarea.selectionEnd !== null
+			) {
+				entry.selStart = textarea.selectionStart;
+				entry.selEnd = textarea.selectionEnd;
+			}
+		} else if (el.tagName === 'SELECT') {
+			const select = el as HTMLSelectElement;
+			const vals: string[] = [];
+			Array.from(select.options).forEach(function (opt) {
+				if (opt.selected) vals.push(opt.value);
+			});
+			entry.values = vals;
+		} else if (el.tagName === 'OPTION') {
+			entry.selected = (el as HTMLOptionElement).selected;
+		} else if (el.tagName === 'DETAILS') {
+			entry.open = (el as HTMLDetailsElement).open;
+		} else if (el.getAttribute('contenteditable') === 'true') {
+			entry.text = el.textContent || undefined;
+		}
+		snapshot.items.push(entry);
+	});
+
+	const active = document.activeElement;
+	if (active && root.contains(active)) {
+		const id = active.getAttribute('id');
+		const name = active.getAttribute('name');
+		if (id) snapshot.activeKey = 'id:' + id;
+		else if (name) snapshot.activeKey = 'name:' + name;
+		else
+			snapshot.activeKey =
+				'idx:' + Array.prototype.indexOf.call(elements, active);
+	}
+	return snapshot;
+};
+
+export const restoreDOMState = (
+	root: HTMLElement,
+	snapshot: DOMStateSnapshot
+) => {
+	if (!snapshot || !snapshot.items) return;
+	const selector =
+		'input, textarea, select, option, [contenteditable="true"], details';
+	const elements = root.querySelectorAll(selector);
+
+	snapshot.items.forEach(function (entry) {
+		let target: Element | null = null;
+		if (entry.id) {
+			target = root.querySelector('#' + CSS.escape(entry.id));
+		}
+		if (!target && entry.name) {
+			target = root.querySelector(
+				'[name="' + CSS.escape(entry.name) + '"]'
+			);
+		}
+		if (!target && elements[entry.idx]) {
+			target = elements[entry.idx]!;
+		}
+		if (!target) return;
+
+		if (target.tagName === 'INPUT') {
+			const input = target as HTMLInputElement;
+			const type = entry.type || input.getAttribute('type') || 'text';
+			if (type === 'checkbox' || type === 'radio') {
+				if (entry.checked !== undefined) input.checked = entry.checked;
+			} else if (entry.value !== undefined) {
+				input.value = entry.value;
+			}
+			if (
+				entry.selStart !== undefined &&
+				entry.selEnd !== undefined &&
+				input.setSelectionRange
+			) {
+				try {
+					input.setSelectionRange(entry.selStart, entry.selEnd);
+				} catch {
+					/* ignore */
+				}
+			}
+		} else if (target.tagName === 'TEXTAREA') {
+			const textarea = target as HTMLTextAreaElement;
+			if (entry.value !== undefined) textarea.value = entry.value;
+			if (
+				entry.selStart !== undefined &&
+				entry.selEnd !== undefined &&
+				textarea.setSelectionRange
+			) {
+				try {
+					textarea.setSelectionRange(entry.selStart, entry.selEnd);
+				} catch {
+					/* ignore */
+				}
+			}
+		} else if (target.tagName === 'SELECT') {
+			if (Array.isArray(entry.values)) {
+				const select = target as HTMLSelectElement;
+				Array.from(select.options).forEach(function (opt) {
+					opt.selected = entry.values!.indexOf(opt.value) !== -1;
+				});
+			}
+		} else if (target.tagName === 'OPTION') {
+			if (entry.selected !== undefined)
+				(target as HTMLOptionElement).selected = entry.selected;
+		} else if (target.tagName === 'DETAILS') {
+			if (entry.open !== undefined)
+				(target as HTMLDetailsElement).open = entry.open;
+		} else if (target.getAttribute('contenteditable') === 'true') {
+			if (entry.text !== undefined) target.textContent = entry.text;
+		}
+	});
+
+	if (snapshot.activeKey) {
+		let focusEl: Element | null = null;
+		if (snapshot.activeKey.startsWith('id:')) {
+			focusEl = root.querySelector(
+				'#' + CSS.escape(snapshot.activeKey.slice(3))
+			);
+		} else if (snapshot.activeKey.startsWith('name:')) {
+			focusEl = root.querySelector(
+				'[name="' + CSS.escape(snapshot.activeKey.slice(5)) + '"]'
+			);
+		} else if (snapshot.activeKey.startsWith('idx:')) {
+			const idx = parseInt(snapshot.activeKey.slice(4), 10);
+			if (!isNaN(idx) && elements[idx]) focusEl = elements[idx]!;
+		}
+		if (focusEl && (focusEl as HTMLElement).focus) {
+			(focusEl as HTMLElement).focus();
+		}
+	}
+};
+
+export const saveFormState = () => {
+	const formState: Record<string, Record<string, boolean | string>> = {};
+	const forms = document.querySelectorAll('form');
+	forms.forEach(function (form, formIndex) {
+		const formId = form.id || 'form-' + formIndex;
+		formState[formId] = {};
+		const inputs = form.querySelectorAll('input, textarea, select');
+		inputs.forEach(function (input) {
+			const element = input as HTMLInputElement;
+			const name =
+				element.name ||
+				element.id ||
+				'input-' + formIndex + '-' + inputs.length;
+			if (element.type === 'checkbox' || element.type === 'radio') {
+				formState[formId]![name] = element.checked;
+			} else {
+				formState[formId]![name] = element.value;
+			}
+		});
+	});
+
+	const standaloneInputs = document.querySelectorAll(
+		'input:not(form input), textarea:not(form textarea), select:not(form select)'
+	);
+	if (standaloneInputs.length > 0) {
+		formState['__standalone__'] = {};
+		standaloneInputs.forEach(function (input) {
+			const element = input as HTMLInputElement;
+			const name =
+				element.name ||
+				element.id ||
+				'standalone-' + standaloneInputs.length;
+			if (element.type === 'checkbox' || element.type === 'radio') {
+				formState['__standalone__']![name] = element.checked;
+			} else {
+				formState['__standalone__']![name] = element.value;
+			}
+		});
+	}
+	return formState;
+};
+
+export const restoreFormState = (
+	formState: Record<string, Record<string, boolean | string>>
+) => {
+	Object.keys(formState).forEach(function (formId) {
+		const isStandalone = formId === '__standalone__';
+		const form = isStandalone
+			? null
+			: document.getElementById(formId) ||
+				document.querySelector(
+					'form:nth-of-type(' +
+						(parseInt(formId.replace('form-', '')) + 1) +
+						')'
+				);
+		Object.keys(formState[formId]!).forEach(function (name) {
+			let element: HTMLInputElement | null = null;
+			if (isStandalone) {
+				element = document.querySelector(
+					'input[name="' +
+						name +
+						'"], textarea[name="' +
+						name +
+						'"], select[name="' +
+						name +
+						'"]'
+				);
+				if (!element) {
+					element = document.getElementById(
+						name
+					) as HTMLInputElement | null;
+				}
+			} else if (form) {
+				element = form.querySelector('[name="' + name + '"], #' + name);
+			}
+			if (element) {
+				const value = formState[formId]![name]!;
+				if (element.type === 'checkbox' || element.type === 'radio') {
+					element.checked = value === true;
+				} else {
+					element.value = String(value);
+				}
+			}
+		});
+	});
+};
+
+export const saveScrollState = () => {
+	return {
+		window: {
+			x: window.scrollX || window.pageXOffset,
+			y: window.scrollY || window.pageYOffset
+		}
+	};
+};
+
+export const restoreScrollState = (scrollState: {
+	window: { x: number; y: number };
+}) => {
+	if (scrollState && scrollState.window) {
+		window.scrollTo(scrollState.window.x, scrollState.window.y);
+	}
+};

package/dist/dev/client/errorOverlay.ts

@@ -0,0 +1,145 @@
+/* AbsoluteJS Error Overlay - branded, per-framework, modern styling */
+
+import type { ErrorOverlayOptions } from '../../../types/client';
+
+let errorOverlayElement: HTMLDivElement | null = null;
+
+const frameworkLabels: Record<string, string> = {
+	angular: 'Angular',
+	assets: 'Assets',
+	html: 'HTML',
+	htmx: 'HTMX',
+	react: 'React',
+	svelte: 'Svelte',
+	unknown: 'Unknown',
+	vue: 'Vue'
+};
+
+const frameworkColors: Record<string, string> = {
+	angular: '#dd0031',
+	assets: '#563d7c',
+	html: '#e34c26',
+	htmx: '#1a365d',
+	react: '#61dafb',
+	svelte: '#ff3e00',
+	unknown: '#94a3b8',
+	vue: '#42b883'
+};
+
+export const hideErrorOverlay = () => {
+	if (errorOverlayElement && errorOverlayElement.parentNode) {
+		errorOverlayElement.parentNode.removeChild(errorOverlayElement);
+		errorOverlayElement = null;
+	}
+};
+
+export const showErrorOverlay = (opts: ErrorOverlayOptions) => {
+	const message = opts.message || 'Build failed';
+	const file = opts.file;
+	const line = opts.line;
+	const column = opts.column;
+	const lineText = opts.lineText;
+	const framework = (opts.framework || 'unknown').toLowerCase();
+	const frameworkLabel = frameworkLabels[framework] || framework;
+	const accent = frameworkColors[framework] || '#94a3b8';
+
+	hideErrorOverlay();
+
+	const overlay = document.createElement('div');
+	overlay.id = 'absolutejs-error-overlay';
+	overlay.setAttribute('data-hmr-overlay', 'true');
+	overlay.style.cssText =
+		'position:fixed;inset:0;z-index:2147483647;background:linear-gradient(135deg,rgba(15,23,42,0.98) 0%,rgba(30,41,59,0.98) 100%);backdrop-filter:blur(12px);color:#e2e8f0;font-family:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;line-height:1.6;overflow:auto;padding:32px;box-sizing:border-box;display:flex;align-items:flex-start;justify-content:center;';
+
+	const card = document.createElement('div');
+	card.style.cssText =
+		'max-width:720px;width:100%;background:rgba(30,41,59,0.6);border:1px solid rgba(71,85,105,0.5);border-radius:16px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);overflow:hidden;';
+
+	const header = document.createElement('div');
+	header.style.cssText =
+		'display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;background:rgba(15,23,42,0.5);border-bottom:1px solid rgba(71,85,105,0.4);';
+	header.innerHTML =
+		'<div style="display:flex;align-items:center;gap:12px;"><span style="font-weight:700;font-size:20px;color:#fff;letter-spacing:-0.02em;">AbsoluteJS</span><span style="padding:5px 10px;border-radius:8px;font-size:12px;font-weight:600;background:' +
+		accent +
+		';color:#fff;opacity:0.95;box-shadow:0 2px 4px rgba(0,0,0,0.2);">' +
+		frameworkLabel +
+		'</span></div><span style="color:#94a3b8;font-size:13px;font-weight:500;">Compilation Error</span>';
+	card.appendChild(header);
+
+	const content = document.createElement('div');
+	content.style.cssText = 'padding:24px;';
+
+	const errorSection = document.createElement('div');
+	errorSection.style.cssText = 'margin-bottom:20px;';
+
+	const errorLabel = document.createElement('div');
+	errorLabel.style.cssText =
+		'font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:8px;';
+	errorLabel.textContent = 'What went wrong';
+	errorSection.appendChild(errorLabel);
+
+	const msgEl = document.createElement('pre');
+	msgEl.style.cssText =
+		'margin:0;padding:16px 20px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.25);border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:#fca5a5;font-size:13px;line-height:1.5;';
+	msgEl.textContent = message;
+	errorSection.appendChild(msgEl);
+	content.appendChild(errorSection);
+
+	if (file || line != null || column != null || lineText) {
+		const locSection = document.createElement('div');
+		locSection.style.cssText = 'margin-bottom:20px;';
+
+		const locLabel = document.createElement('div');
+		locLabel.style.cssText =
+			'font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin-bottom:8px;';
+		locLabel.textContent = 'Where';
+		locSection.appendChild(locLabel);
+
+		const locParts: string[] = [];
+		if (file) locParts.push(file);
+		if (line != null) locParts.push(String(line));
+		if (column != null) locParts.push(String(column));
+		const loc = locParts.join(':') || 'Unknown location';
+
+		const locEl = document.createElement('div');
+		locEl.style.cssText =
+			'padding:12px 20px;background:rgba(71,85,105,0.3);border-radius:10px;border:1px solid rgba(71,85,105,0.4);color:#cbd5e1;font-size:13px;';
+		locEl.textContent = loc;
+		locSection.appendChild(locEl);
+
+		if (lineText) {
+			const codeBlock = document.createElement('pre');
+			codeBlock.style.cssText =
+				'margin:8px 0 0;padding:14px 20px;background:rgba(15,23,42,0.8);border-radius:10px;border:1px solid rgba(71,85,105,0.4);color:#94a3b8;font-size:13px;overflow-x:auto;white-space:pre;';
+			codeBlock.textContent = lineText;
+			locSection.appendChild(codeBlock);
+		}
+		content.appendChild(locSection);
+	}
+
+	const footer = document.createElement('div');
+	footer.style.cssText =
+		'display:flex;justify-content:flex-end;padding-top:8px;';
+
+	const dismiss = document.createElement('button');
+	dismiss.textContent = 'Dismiss';
+	dismiss.style.cssText =
+		'padding:10px 20px;background:' +
+		accent +
+		';color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.2);transition:opacity 0.15s,transform 0.15s;';
+	dismiss.onmouseover = function () {
+		dismiss.style.opacity = '0.9';
+		dismiss.style.transform = 'translateY(-1px)';
+	};
+	dismiss.onmouseout = function () {
+		dismiss.style.opacity = '1';
+		dismiss.style.transform = 'translateY(0)';
+	};
+	dismiss.onclick = hideErrorOverlay;
+	footer.appendChild(dismiss);
+	content.appendChild(footer);
+	card.appendChild(content);
+	overlay.appendChild(card);
+	document.body.appendChild(overlay);
+	errorOverlayElement = overlay;
+};