"use client"; /* eslint-disable @next/next/no-img-element -- registry components stay portable outside Next.js */ import { useEffect, useRef, useState } from "react"; import type { HTMLAttributes, KeyboardEvent, PointerEvent } from "react"; import * as Dialog from "@radix-ui/react-dialog"; export type GalleryImage = { src: string; alt: string; width: number; height: number; caption?: string; }; export type MasonryGalleryLightboxProps = Omit, "children"> & { images: GalleryImage[]; label: string; columns?: 2 | 3 | 4; index?: number | null; defaultIndex?: number | null; onIndexChange?: (index: number | null) => void; loop?: boolean; }; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#121A22]"; const darkRing = "outline-none focus-visible:ring-2 focus-visible:ring-[#8CB6E0] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0C1218]"; const columnClass: Record<2 | 3 | 4, string> = { 2: "columns-1 @md:columns-2", 3: "columns-1 @md:columns-2 @3xl:columns-3", 4: "columns-2 @3xl:columns-3 @5xl:columns-4", }; export function MasonryGalleryLightbox({ images, label, columns = 3, index, defaultIndex = null, onIndexChange, loop = false, className = "", ...props }: MasonryGalleryLightboxProps) { const [uncontrolled, setUncontrolled] = useState(defaultIndex); const current = index === undefined ? uncontrolled : index; const [announce, setAnnounce] = useState(""); const thumbs = useRef<(HTMLButtonElement | null)[]>([]); const swipe = useRef<{ x: number; id: number } | null>(null); const lastShown = useRef(null); const image = current === null ? undefined : images[current]; const count = images.length; useEffect(() => { if (current !== null) lastShown.current = current; }, [current]); const setIndex = (next: number | null, announceChange = false) => { if (index === undefined) setUncontrolled(next); onIndexChange?.(next); if (announceChange && next !== null) setAnnounce("Image " + (next + 1) + " of " + count + ": " + images[next].alt); if (next === null) setAnnounce(""); }; const step = (direction: 1 | -1) => { if (current === null) return; let next = current + direction; if (next < 0) next = loop ? count - 1 : 0; if (next >= count) next = loop ? 0 : count - 1; if (next !== current) setIndex(next, true); }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowRight") { event.preventDefault(); step(1); } else if (event.key === "ArrowLeft") { event.preventDefault(); step(-1); } else if (event.key === "Home") { event.preventDefault(); setIndex(0, true); } else if (event.key === "End") { event.preventDefault(); setIndex(count - 1, true); } }; const onPointerDown = (event: PointerEvent) => { if (event.pointerType === "mouse") return; swipe.current = { x: event.clientX, id: event.pointerId }; }; const onPointerUp = (event: PointerEvent) => { const start = swipe.current; swipe.current = null; if (!start || start.id !== event.pointerId) return; const dx = event.clientX - start.x; if (Math.abs(dx) > 48) step(dx < 0 ? 1 : -1); }; const canPrev = current !== null && (loop || current > 0); const canNext = current !== null && (loop || current < count - 1); return (

{item.caption ?
{item.caption}
: null}

(open ? null : setIndex(null))}> { const target = lastShown.current === null ? null : thumbs.current[lastShown.current]; if (target) { event.preventDefault(); target.focus(); } }} className="fixed inset-0 z-50 flex touch-pan-y flex-col text-[#E4EAF0] outline-none" >

{label}

{current === null ? "" : current + 1 + " of " + count}

{image.alt} — {image?.caption ?? image?.alt ?? ""}

{announce}

); }