;(function () {
/* ToastHost — single global toast slot mounted at the App root. Fires
via window.showToast(message, kind) with kind ∈ {'success','info','error'}.
Renders an absolutely-positioned pill near the top of the viewport
that slides + fades in for ~250ms, holds for 1800ms, then slides
out. Subsequent showToast calls during a hold reset the timer with
the new message (last-write-wins, no queue — simpler for a demo). */
const HOLD_MS = 1800;
const ANIM_MS = 250;
const KIND_STYLES = {
success: { bg: '#0F1F1A', accent: '#079455' },
info: { bg: '#0E1420', accent: '#00AFAB' },
error: { bg: '#1F1212', accent: '#F04438' },
};
const Check = ({ color }) => (
);
const ToastHost = () => {
const [state, setState] = React.useState({ message: '', kind: 'success', visible: false });
const timerRef = React.useRef(null);
const exitTimerRef = React.useRef(null);
/* Wire window.showToast on mount; clean both timers on unmount. */
React.useEffect(() => {
window.showToast = (message, kind = 'success') => {
if (!message) return;
if (timerRef.current) clearTimeout(timerRef.current);
if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
setState({ message, kind, visible: true });
timerRef.current = setTimeout(() => {
setState((s) => ({ ...s, visible: false }));
exitTimerRef.current = setTimeout(() => {
setState({ message: '', kind: 'success', visible: false });
}, ANIM_MS);
}, HOLD_MS);
};
return () => {
delete window.showToast;
if (timerRef.current) clearTimeout(timerRef.current);
if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
};
}, []);
if (!state.message) return null;
const style = KIND_STYLES[state.kind] || KIND_STYLES.success;
return (
);
};
Object.assign(window, { ToastHost });
})();