// Image lightbox — a single, shared, animated modal for viewing gallery images // large. Mounted once (see app.jsx) and driven imperatively from anywhere via // window.openImageLightbox(images, index): the separately-transpiled page files // just call that global. Handles real images (img.src) and the striped // placeholders identically, so it works before any real photography is dropped // in. Keyboard (←/→/Esc), prev/next, swipe, and backdrop-tap all close/navigate. // // Animation: the backdrop fades + blurs in; the figure scales up from 0.92 and // rises a few px on a soft ease. Closing reverses it, then unmounts after the // transition. Respects prefers-reduced-motion (snaps, no transform). function Lightbox() { const [state, setState] = React.useState(null); // { images, index } | null const [shown, setShown] = React.useState(false); // drives the enter/leave transition const closeTimer = React.useRef(0); const touch = React.useRef(null); const mobile = window.useIsMobile ? window.useIsMobile() : false; const reduce = typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; // Register the global opener. React.useEffect(() => { window.openImageLightbox = (images, index = 0) => { if (!images || !images.length) return; clearTimeout(closeTimer.current); setState({ images, index }); // Flip to shown on the next frame so the entrance transition runs. setTimeout(() => setShown(true), 20); }; return () => { try { delete window.openImageLightbox; } catch (e) {} }; }, []); const close = React.useCallback(() => { setShown(false); clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setState(null), reduce ? 0 : 320); }, [reduce]); const go = React.useCallback((dir) => { setState((s) => (s ? { ...s, index: (s.index + dir + s.images.length) % s.images.length } : s)); }, []); // Keyboard + body scroll lock while open. React.useEffect(() => { if (!state) return; const onKey = (e) => { if (e.key === 'Escape') close(); else if (e.key === 'ArrowRight') go(1); else if (e.key === 'ArrowLeft') go(-1); }; window.addEventListener('keydown', onKey); const prevOverflow = document.documentElement.style.overflow; document.documentElement.style.overflow = 'hidden'; return () => { window.removeEventListener('keydown', onKey); document.documentElement.style.overflow = prevOverflow; }; }, [state, close, go]); if (!state) return null; const { images, index } = state; const img = images[index] || {}; const multi = images.length > 1; const ease = 'cubic-bezier(.16,1,.3,1)'; const onTouchStart = (e) => { touch.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touch.current == null) return; const dx = e.changedTouches[0].clientX - touch.current; touch.current = null; if (multi && Math.abs(dx) > 44) go(dx < 0 ? 1 : -1); }; const navBtn = (dir, glyph, side) => ( ); return (

{/* close */} {/* figure */}

{img.title && {img.title}} {multi && {String(index + 1).padStart(2, '0')} / {String(images.length).padStart(2, '0')} }
{/* mobile: swipe dots (arrows are desktop-only) */} {multi && mobile && (
{images.map((_, i) => ( ))}
)}

{multi && !mobile && navBtn(-1, '‹', 'left')} {multi && !mobile && navBtn(1, '›', 'right')}

); } window.Lightbox = Lightbox;