// static/js/ui.js
/**
* UI utilities for toasts, modals, scrolling, and user feedback
*/
import themeModule from './theme.js';
import * as Modals from './modalManager.js';
import spinnerModule from './spinner.js';
import { registerMenuDismiss, dismissTopMenu, dismissOrRemove } from './escMenuStack.js';
let toastEl = null;
let autoScrollEnabled = true;
let hoveredToggleCard = null;
let hoveredToggleWindow = null;
let hoveredDockChip = null;
let _lastPointerClientX = null;
let _lastPointerClientY = null;
// Smooth scroll state
let _scrollRafId = null;
let _scrollBox = null;
function _isTextEditingTarget(target) {
const el = target && target.nodeType === 1 ? target : target?.parentElement;
return !!(el && el.closest('input, textarea, select, [contenteditable="true"], [contenteditable=""]'));
}
function _targetEl(target) {
return target && target.nodeType === 1 ? target : target?.parentElement || null;
}
const SPACE_CARD_SELECTOR = [
'#email-lib-modal .doclib-card',
'#doclib-modal .doclib-card',
'#doclib-modal .doclib-chat-row',
'#memory-modal .doclib-card',
'#tasks-modal .task-card',
'#tasks-modal .task-log-row',
'#research-overlay [data-job-id]',
'#cookbook-modal .doclib-card',
'.email-reader-tab-modal .doclib-card',
'.email-window-modal .doclib-card',
].join(', ');
const SPACE_BLOCKED_SELECTOR = [
'button',
'a',
'input',
'textarea',
'select',
'[contenteditable="true"]',
'[contenteditable=""]',
'.recipient-chip',
'.doclib-card-dropdown',
'.email-card-dropdown',
'.task-log-row-actions',
'.modal-header',
].join(', ');
function _visibleModalForSpace(win) {
const modal = win?.closest?.('.modal[id]');
if (!modal || modal.classList.contains('hidden') || modal.classList.contains('modal-minimized')) return null;
return modal;
}
function _isSpaceVisible(el) {
if (!el || !document.contains(el)) return false;
if (el.closest?.('.modal.hidden, .modal.modal-minimized, [hidden]')) return false;
return true;
}
function _spaceWindowId(win) {
if (!win || !document.contains(win)) return null;
const modal = _visibleModalForSpace(win);
if (modal && Modals.isRegistered(modal.id)) return modal.id;
if (win.closest?.('.doc-editor-pane') && Modals.isRegistered('doc-panel') && !Modals.isMinimized('doc-panel')) return 'doc-panel';
return null;
}
function _windowAtPointer() {
if (_lastPointerClientX == null || _lastPointerClientY == null) return null;
const x = _lastPointerClientX;
const y = _lastPointerClientY;
const candidates = [
...document.querySelectorAll('.modal:not(.hidden):not(.modal-minimized) .modal-content'),
...document.querySelectorAll('.doc-editor-pane'),
].filter(el => {
if (!document.contains(el)) return false;
const r = el.getBoundingClientRect();
return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
});
if (!candidates.length) return null;
return candidates.reduce((top, el) => {
const mz = parseInt(getComputedStyle(el.closest('.modal') || el).zIndex, 10) || 0;
const tz = parseInt(getComputedStyle(top.closest('.modal') || top).zIndex, 10) || 0;
return mz >= tz ? el : top;
});
}
function _containsPointer(el) {
if (!el || _lastPointerClientX == null || _lastPointerClientY == null) return false;
const r = el.getBoundingClientRect();
return _lastPointerClientX >= r.left && _lastPointerClientX <= r.right
&& _lastPointerClientY >= r.top && _lastPointerClientY <= r.bottom;
}
function _closeHoveredWindow() {
let win = _windowAtPointer();
if (!win) {
try {
const underPointer = document.elementFromPoint(_lastPointerClientX, _lastPointerClientY);
win = underPointer?.closest?.('.modal:not(.hidden):not(.modal-minimized) .modal-content, .doc-editor-pane') || null;
} catch {}
}
if (!win) win = hoveredToggleWindow;
if (!win || !document.contains(win)) return false;
const modalForWin = win.closest?.('.modal[id]');
if (modalForWin?.id === 'email-lib-modal') {
const closeBtn = document.getElementById('email-lib-close') || modalForWin.querySelector('.close-btn');
if (closeBtn) {
try { closeBtn.click(); return true; } catch {}
}
try { modalForWin.remove(); return true; } catch {}
}
const id = _spaceWindowId(win);
if (id && Modals.isRegistered(id)) {
Modals.close(id);
return true;
}
const modal = _visibleModalForSpace(win);
if (!modal) return false;
const closeBtn = modal.querySelector('.close-btn, .modal-close, .modal-close-btn, [data-action="close"]');
if (closeBtn) {
try { closeBtn.click(); return true; } catch {}
}
try { modal.classList.add('hidden'); return true; } catch {}
return false;
}
function _spaceIsBlocked(e, surface) {
const target = _targetEl(e.target);
if (!target) return false;
if (_isTextEditingTarget(target)) return !surface || surface.contains(target);
const blocked = target.closest?.(SPACE_BLOCKED_SELECTOR);
return !!(blocked && (!surface || surface.contains(blocked)));
}
function _activateSpaceCard(card) {
if (!card || !document.contains(card)) return false;
if (card.matches('#tasks-modal .task-card')) {
const titleRow = card.querySelector('.memory-item-title')?.closest('div');
if (titleRow) {
titleRow.click();
return true;
}
}
card.dataset.spaceToggle = '1';
card.click();
setTimeout(() => {
try { delete card.dataset.spaceToggle; } catch {}
}, 0);
return true;
}
function _initHoverCardSpaceToggle() {
if (document._odysseusHoverCardSpaceToggle) return;
document._odysseusHoverCardSpaceToggle = true;
document.addEventListener('pointerover', (e) => {
_lastPointerClientX = e.clientX;
_lastPointerClientY = e.clientY;
const chip = e.target?.closest?.('.minimized-dock-chip[data-modal-id]');
if (chip) hoveredDockChip = chip;
const card = e.target?.closest?.(SPACE_CARD_SELECTOR);
if (card) hoveredToggleCard = card;
const win = e.target?.closest?.('.modal:not(.hidden):not(.modal-minimized) .modal-content, .doc-editor-pane');
if (win) hoveredToggleWindow = win;
}, true);
document.addEventListener('pointermove', (e) => {
_lastPointerClientX = e.clientX;
_lastPointerClientY = e.clientY;
}, true);
document.addEventListener('pointerout', (e) => {
const next = e.relatedTarget;
if (hoveredDockChip && (!next || !hoveredDockChip.contains(next))) hoveredDockChip = null;
if (hoveredToggleCard && (!next || !hoveredToggleCard.contains(next))) hoveredToggleCard = null;
if (hoveredToggleWindow && (!next || !hoveredToggleWindow.contains(next))) hoveredToggleWindow = null;
}, true);
document.addEventListener('keydown', (e) => {
if (e.code !== 'Space' || e.repeat) return;
if (hoveredToggleCard && _isSpaceVisible(hoveredToggleCard)) {
if (_spaceIsBlocked(e, hoveredToggleCard)) return;
e.preventDefault();
_activateSpaceCard(hoveredToggleCard);
return;
}
if (hoveredDockChip && document.contains(hoveredDockChip)) {
if (_spaceIsBlocked(e, hoveredDockChip)) return;
const id = hoveredDockChip.dataset.modalId;
if (id && Modals.isRegistered(id)) {
e.preventDefault();
Modals.restore(id);
}
return;
}
const id = _spaceWindowId(hoveredToggleWindow);
if (!id) return;
if (_spaceIsBlocked(e, hoveredToggleWindow)) return;
e.preventDefault();
Modals.minimize(id);
}, true);
}
_initHoverCardSpaceToggle();
/**
* Copy text to clipboard
*/
export async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
showToast('Copied');
}
catch {
const ta = document.createElement('textarea');
ta.value = text;
ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px;opacity:0';
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
showToast('Copied');
}
}
// Wire swipe-to-dismiss on the shared toast element. Runs once, the first
// time a toast is shown. Tracks horizontal touch drag; if the user drags
// more than DISMISS_PX, the toast slides off in the drag direction and
// hides early. Anything less snaps back. Desktop unaffected (touch
// listeners only fire from a touchscreen — mouse is handled by the
// existing × button and auto-hide timer).
function _wireToastSwipe(el) {
if (!el || el._swipeWired) return;
el._swipeWired = true;
const DISMISS_PX = 70;
let startX = 0, currentX = 0, swiping = false;
el.addEventListener('touchstart', (e) => {
if (!el.classList.contains('show')) return;
const t = e.touches[0];
if (!t) return;
startX = t.clientX;
currentX = t.clientX;
swiping = true;
// Kill the slide-in transition mid-flight so the touch tracks the
// finger 1:1 instead of fighting a still-running animation.
el.style.transition = 'none';
}, { passive: true });
el.addEventListener('touchmove', (e) => {
if (!swiping) return;
const t = e.touches[0];
if (!t) return;
currentX = t.clientX;
const dx = currentX - startX;
el.style.transform = `translateX(${dx}px)`;
// Fade as the toast leaves the rest position — visual cue for
// approaching the dismiss threshold.
el.style.opacity = String(Math.max(0.2, 1 - Math.abs(dx) / 200));
}, { passive: true });
const endSwipe = () => {
if (!swiping) return;
swiping = false;
const dx = currentX - startX;
// Restore the transition so the next mutation animates.
el.style.transition = '';
if (Math.abs(dx) > DISMISS_PX) {
// Fling off in the drag direction, then hide.
el.style.transform = `translateX(${dx > 0 ? '120%' : '-120%'})`;
el.style.opacity = '0';
clearTimeout(el._hideTimer);
setTimeout(() => {
el.classList.remove('show');
el.classList.add('exiting');
el.style.transform = '';
el.style.opacity = '';
}, 180);
} else {
// Snap back to rest.
el.style.transform = '';
el.style.opacity = '';
}
};
el.addEventListener('touchend', endSwipe);
el.addEventListener('touchcancel', endSwipe);
}
/**
* Show success toast message
*/
export function showToast(msg, durationOrOpts) {
if (!toastEl) {
toastEl = document.getElementById('toast');
}
_wireToastSwipe(toastEl);
toastEl.textContent = '';
toastEl.classList.remove('error');
let duration = 1200, actionLabel = null, onAction = null, actionHint = null, actionIcon = null, leadingIcon = null;
if (typeof durationOrOpts === 'object' && durationOrOpts) {
duration = durationOrOpts.duration || 5000;
actionLabel = durationOrOpts.action;
onAction = durationOrOpts.onAction;
actionHint = durationOrOpts.actionHint || null;
actionIcon = durationOrOpts.actionIcon || null;
leadingIcon = durationOrOpts.leadingIcon || null;
} else if (typeof durationOrOpts === 'number') {
duration = durationOrOpts;
}
const textSpan = document.createElement('span');
if (leadingIcon === 'check') {
const icon = document.createElement('span');
icon.className = 'toast-checkmark';
icon.innerHTML = '';
toastEl.appendChild(icon);
} else if (leadingIcon === 'spinner') {
const wp = spinnerModule.createWhirlpool(14);
const icon = wp.element;
icon.classList.add('toast-whirlpool');
icon.style.cssText = 'width:14px;height:14px;margin:0 8px 0 0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;';
toastEl.appendChild(icon);
}
textSpan.textContent = msg;
toastEl.appendChild(textSpan);
if (actionLabel && onAction) {
// Wrap the action in a small column so we can stack a Ctrl-Z-style hint
// directly under the button.
const stack = document.createElement('span');
stack.style.cssText = 'display:inline-flex;flex-direction:column;align-items:center;gap:1px;margin-left:10px;line-height:1;';
const btn = document.createElement('button');
// If the caller supplied an SVG icon, prepend it. We trust the icon string
// (only set internally) — never accept caller-controlled HTML otherwise.
if (actionIcon) {
btn.innerHTML = `${actionIcon}`;
btn.querySelector('span span').textContent = actionLabel;
} else {
btn.textContent = actionLabel;
}
// The toast itself is `pointer-events: none` so it doesn't block clicks
// beneath it. With an action button we need to flip both the toast AND
// the button so the user can actually click Undo. The flag is reset on
// the next plain showToast / showError call (those overwrite textContent
// which strips the button + we clear inline style at the top below).
btn.style.cssText = 'padding:2px 10px;border:1px solid var(--fg);border-radius:4px;background:none;color:var(--fg);cursor:pointer;font-size:12px;pointer-events:auto;display:inline-flex;align-items:center;';
btn.addEventListener('click', (e) => {
e.stopPropagation();
e.preventDefault();
toastEl.classList.remove('show');
onAction();
});
stack.appendChild(btn);
// Keyboard-shortcut hints (Ctrl+Z / ⌘Z) are meaningless on touch devices —
// skip them on mobile so the toast just shows the Undo button.
if (actionHint && window.innerWidth > 768) {
const hint = document.createElement('span');
hint.textContent = actionHint;
hint.style.cssText = 'font-size:9px;opacity:0.55;letter-spacing:0.4px;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;margin-top:1px;pointer-events:none;';
stack.appendChild(hint);
}
toastEl.appendChild(stack);
// Small × to dismiss the toast without taking the action. Useful when
// the user already acted (or just doesn't want the banner sitting there).
const closeBtn = document.createElement('button');
closeBtn.type = 'button';
closeBtn.setAttribute('aria-label', 'Dismiss');
closeBtn.title = 'Dismiss';
closeBtn.textContent = '×';
closeBtn.style.cssText = 'margin-left:8px;padding:0;width:20px;height:20px;line-height:1;border:none;background:none;color:var(--fg);opacity:0.55;cursor:pointer;font-size:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;pointer-events:auto;';
closeBtn.addEventListener('mouseenter', () => { closeBtn.style.opacity = '1'; });
closeBtn.addEventListener('mouseleave', () => { closeBtn.style.opacity = '0.55'; });
closeBtn.addEventListener('click', (e) => {
e.stopPropagation();
e.preventDefault();
clearTimeout(toastEl._hideTimer);
toastEl.classList.add('exiting');
toastEl.classList.remove('show');
});
toastEl.appendChild(closeBtn);
toastEl.style.pointerEvents = 'auto';
} else {
// No action — restore the default non-blocking behavior.
toastEl.style.pointerEvents = '';
}
// Pin to top-right via CSS — clear any legacy inline overrides so the
// slide-in-from-right / slide-out-to-left transition can run cleanly.
toastEl.style.left = '';
toastEl.style.transform = '';
toastEl.classList.remove('exiting');
toastEl.classList.add('show');
clearTimeout(toastEl._hideTimer);
toastEl._hideTimer = setTimeout(() => {
// Add `exiting` so the CSS rule slides it off to the LEFT instead of
// back to the right (where it came from). We piggyback on the same
// .toast base; .exiting overrides the resting transform.
toastEl.classList.add('exiting');
toastEl.classList.remove('show');
// Reset pointer-events so an action-toast (which sets it to 'auto'
// for its clickable button) doesn't leave the toast intercepting
// clicks after it's slid away. Was previously only cleared on the
// NEXT plain toast, so a lingering action-toast could appear to
// "lock" interaction near the top-right.
toastEl.style.pointerEvents = '';
}, duration);
}
/**
* Show error toast message
*/
export function showError(msg) {
if (!toastEl) {
toastEl = document.getElementById('toast');
}
_wireToastSwipe(toastEl);
toastEl.textContent = msg;
toastEl.classList.add('error');
toastEl.style.left = '';
toastEl.style.transform = '';
toastEl.classList.remove('exiting');
toastEl.classList.add('show');
clearTimeout(toastEl._hideTimer);
toastEl._hideTimer = setTimeout(() => {
toastEl.classList.add('exiting');
toastEl.classList.remove('show');
}, 3000);
}
/**
* Smooth-scroll chat history to bottom using rAF lerp.
* Throttled during streaming so it doesn't fight user scrolling.
*/
let _scrollThrottleTimer = null;
export function scrollHistory() {
if (!autoScrollEnabled) return;
if (!_scrollBox) {
_scrollBox = document.getElementById('chat-history');
}
// Throttle: only start a new scroll animation every 500ms
if (_scrollThrottleTimer) return;
_scrollThrottleTimer = setTimeout(() => { _scrollThrottleTimer = null; }, 500);
if (!_scrollRafId) {
_scrollRafId = requestAnimationFrame(_smoothScrollStep);
}
}
function _smoothScrollStep() {
const box = _scrollBox;
if (!box || !autoScrollEnabled) {
_scrollRafId = null;
return;
}
const target = box.scrollHeight - box.clientHeight;
const current = box.scrollTop;
const diff = target - current;
// If user scrolled up significantly, don't force them down
if (diff > 300) {
_scrollRafId = null;
return;
}
if (diff <= 1) {
box.scrollTop = target;
_scrollRafId = null;
return;
}
// Lerp: gentle catch-up
const factor = window.innerWidth <= 768 ? 0.4 : 0.2;
box.scrollTop = current + diff * factor;
_scrollRafId = requestAnimationFrame(_smoothScrollStep);
}
/**
* Instant scroll to bottom — use for non-streaming contexts
* like loading history or switching sessions.
*/
export function scrollHistoryInstant() {
if (!_scrollBox) {
_scrollBox = document.getElementById('chat-history');
}
if (_scrollBox) {
_scrollBox.scrollTop = _scrollBox.scrollHeight;
}
}
/**
* Enable/disable auto-scroll
*/
export function setAutoScroll(enabled) {
autoScrollEnabled = enabled;
}
/**
* Get auto-scroll state
*/
export function getAutoScroll() {
return autoScrollEnabled;
}
/**
* Auto-resize textarea based on content
*/
export function autoResize(textarea) {
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight);
const isMobile = window.innerWidth <= 768;
const maxHeight = isMobile ? 150 : lineHeight * 8;
// Use a hidden clone to measure without disrupting the real textarea
let clone = textarea._resizeClone;
if (!clone) {
clone = textarea.cloneNode(false);
clone.style.cssText = getComputedStyle(textarea).cssText;
clone.style.position = 'absolute';
clone.style.visibility = 'hidden';
clone.style.height = '0';
clone.style.transition = 'none';
clone.style.overflow = 'hidden';
clone.style.pointerEvents = 'none';
clone.style.zIndex = '-1';
textarea.parentNode.appendChild(clone);
textarea._resizeClone = clone;
}
clone.style.width = textarea.offsetWidth + 'px';
clone.value = textarea.value;
clone.style.height = '0';
const newHeight = Math.min(Math.max(clone.scrollHeight, lineHeight), maxHeight);
textarea.style.height = newHeight + 'px';
textarea.style.overflow = newHeight >= maxHeight ? 'auto' : 'hidden';
}
/**
* Debounce function for performance
*/
export function debounce(func, wait) {
let timeout;
return function(...args) {
const later = () => {
timeout = null;
func.apply(this, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
/**
* Get element by ID (utility helper)
*/
export function el(id) {
return document.getElementById(id);
}
/**
* Styled confirm dialog — replaces native browser confirm().
* Returns a Promise.
*/
export function styledConfirm(message, { confirmText = 'Confirm', cancelText = 'Cancel', danger = false } = {}) {
return new Promise(resolve => {
// Reuse or create the modal
let overlay = document.getElementById('styled-confirm-overlay');
if (!overlay) {
overlay = document.createElement('div');
overlay.id = 'styled-confirm-overlay';
overlay.className = 'modal';
overlay.innerHTML =
'';
document.body.appendChild(overlay);
}
const msgEl = document.getElementById('styled-confirm-msg');
const okBtn = document.getElementById('styled-confirm-ok');
const cancelBtn = document.getElementById('styled-confirm-cancel');
msgEl.textContent = message;
okBtn.textContent = confirmText;
cancelBtn.textContent = cancelText;
okBtn.className = danger ? 'confirm-btn confirm-btn-danger' : 'confirm-btn confirm-btn-primary';
cancelBtn.className = 'confirm-btn confirm-btn-secondary';
// Remember what had focus so we can restore it when the dialog closes.
const _prevFocus = document.activeElement;
overlay.classList.remove('hidden');
overlay.style.display = '';
function cleanup(result) {
overlay.classList.add('hidden');
overlay.style.display = 'none';
okBtn.removeEventListener('click', onOk);
cancelBtn.removeEventListener('click', onCancel);
overlay.removeEventListener('click', onBackdrop);
document.removeEventListener('keydown', onKey);
try { _prevFocus && _prevFocus.focus && _prevFocus.focus(); } catch {}
resolve(result);
}
function onOk() { cleanup(true); }
function onCancel() { cleanup(false); }
function onBackdrop(e) { if (e.target === overlay) cleanup(false); }
function onKey(e) {
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
e.preventDefault();
const active = document.activeElement;
if (active === okBtn) cancelBtn.focus();
else okBtn.focus();
} else if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
cleanup(false);
} else if (e.key === 'Tab') {
// Trap focus inside the dialog so Tab can't wander to the page behind.
e.preventDefault();
const f = [cancelBtn, okBtn];
const i = f.indexOf(document.activeElement);
const n = e.shiftKey ? (i <= 0 ? f.length - 1 : i - 1) : (i >= f.length - 1 ? 0 : i + 1);
f[n].focus();
}
}
okBtn.addEventListener('click', onOk);
cancelBtn.addEventListener('click', onCancel);
overlay.addEventListener('click', onBackdrop);
document.addEventListener('keydown', onKey);
okBtn.focus();
});
}
/**
* Styled text-input prompt — drop-in replacement for window.prompt().
* Resolves to the trimmed string the user typed, or null on Cancel / Escape / backdrop.
*/
export function styledPrompt(message, {
title = 'Name',
defaultValue = '',
placeholder = '',
confirmText = 'Save',
cancelText = 'Cancel',
maxLength = 80,
} = {}) {
return new Promise(resolve => {
let overlay = document.getElementById('styled-prompt-overlay');
if (!overlay) {
overlay = document.createElement('div');
overlay.id = 'styled-prompt-overlay';
overlay.className = 'modal';
overlay.innerHTML =
'';
document.body.appendChild(overlay);
}
const titleEl = document.getElementById('styled-prompt-title');
const msgEl = document.getElementById('styled-prompt-msg');
const input = document.getElementById('styled-prompt-input');
const okBtn = document.getElementById('styled-prompt-ok');
const cancelBtn = document.getElementById('styled-prompt-cancel');
titleEl.textContent = title;
msgEl.textContent = message || '';
msgEl.style.display = message ? '' : 'none';
input.value = defaultValue || '';
input.placeholder = placeholder || '';
input.maxLength = maxLength;
okBtn.textContent = confirmText;
cancelBtn.textContent = cancelText;
// Remember what had focus so we can restore it when the dialog closes.
const _prevFocus = document.activeElement;
overlay.classList.remove('hidden');
overlay.style.display = '';
function cleanup(result) {
overlay.classList.add('hidden');
overlay.style.display = 'none';
okBtn.removeEventListener('click', onOk);
cancelBtn.removeEventListener('click', onCancel);
overlay.removeEventListener('click', onBackdrop);
document.removeEventListener('keydown', onKey);
input.removeEventListener('keydown', onInputKey);
try { _prevFocus && _prevFocus.focus && _prevFocus.focus(); } catch {}
resolve(result);
}
function onOk() { cleanup((input.value || '').trim()); }
function onCancel() { cleanup(null); }
function onBackdrop(e) { if (e.target === overlay) cleanup(null); }
function onKey(e) {
if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
cleanup(null);
} else if (e.key === 'Tab') {
// Trap focus inside the dialog (input → Cancel → OK → input …).
e.preventDefault();
const f = [input, cancelBtn, okBtn];
const i = f.indexOf(document.activeElement);
const n = e.shiftKey ? (i <= 0 ? f.length - 1 : i - 1) : (i >= f.length - 1 ? 0 : i + 1);
f[n].focus();
}
}
function onInputKey(e) {
if (e.key === 'Enter') {
e.preventDefault();
onOk();
}
}
okBtn.addEventListener('click', onOk);
cancelBtn.addEventListener('click', onCancel);
overlay.addEventListener('click', onBackdrop);
document.addEventListener('keydown', onKey);
input.addEventListener('keydown', onInputKey);
requestAnimationFrame(() => {
input.focus();
input.select();
});
});
}
// Lookup table for esc(); hoisted out of the replace callback so it is
// allocated once rather than per matched character.
const _ESC_MAP = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' };
/**
* HTML-escape a string to prevent XSS.
* Canonical implementation — other modules should use uiModule.esc() instead of local copies.
*/
export function esc(s) {
return (s || '').replace(/[&<>"']/g, (m) => _ESC_MAP[m]);
}
// ── Mobile: suppress synthetic click/mousedown on backdrop ──
// When a touch starts inside .modal-content, set a flag so that
// synthetic mouse events on the backdrop are ignored.
let _touchInsideModal = false;
if ('ontouchstart' in window) {
document.addEventListener('touchstart', (e) => {
if (e.target.closest('.modal-content')) {
_touchInsideModal = true;
}
}, { passive: true });
document.addEventListener('touchend', () => {
// Clear after a short delay — synthetic click fires ~300ms after touchend
setTimeout(() => { _touchInsideModal = false; }, 400);
}, { passive: true });
}
/**
* Check if a backdrop dismiss should be suppressed on mobile.
* Other modules can call this to guard their own backdrop handlers.
*/
export function isTouchInsideModal() {
return _touchInsideModal;
}
// Close floating dropdowns/popups on scroll to prevent them drifting
function _initScrollDismiss() {
const chatHistory = document.getElementById('chat-history');
if (chatHistory) {
chatHistory.addEventListener('scroll', () => {
chatHistory.querySelectorAll('.dropdown.show').forEach(d => d.classList.remove('show'));
document.querySelectorAll('.ctx-popup').forEach(dismissOrRemove);
}, { passive: true });
} else {
// Retry once if element doesn't exist yet
setTimeout(_initScrollDismiss, 500);
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', _initScrollDismiss);
} else {
_initScrollDismiss();
}
/**
* Returns the SVG string for an empty-state icon. `kind` is one of
* 'smiley' | 'sad' | 'neutral'. The returned