50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T195b2,"use client"; import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cn } from "cn"; import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon, EllipsisIcon, XIcon, ZoomInIcon, ZoomOutIcon, } from "lucide-react"; import { animate, useReducedMotion } from "motion/react"; import * as React from "react"; import { flushSync } from "react-dom"; import { Button, type ButtonProps } from "@/components/ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { ScrollArea, ScrollAreaContent } from "@/components/ui/scroll-area"; import { Skeleton } from "@/components/ui/skeleton"; import { Spinner } from "@/components/ui/spinner"; const LIGHTBOX_STYLES = String.raw` :where([data-slot="lightbox-viewport"]) { overscroll-behavior: contain; } :where([data-slot="lightbox-slides"]) { touch-action: none; -webkit-user-select: none; user-select: none; } :where([data-slot="lightbox-slide"]) { transform-origin: center; will-change: transform, opacity; backface-visibility: hidden; contain: layout paint; } :where([data-slot="lightbox-zoom"]) { transform-origin: center; will-change: transform; backface-visibility: hidden; } :where([data-slot="lightbox-zoom"][data-zoomable="true"]:not([data-zoomed="true"])) { cursor: zoom-in; } :where([data-slot="lightbox-zoom"][data-zoomed="true"]) { cursor: zoom-out; } :where([data-slot="lightbox-zoom"][data-zoomed="true"][data-dragging="true"]) { cursor: grabbing; } :where([data-slot="lightbox-content"][data-dragging="true"]), :where([data-slot="lightbox-content"][data-dragging="true"] *) { cursor: grabbing; } :where([data-slot="lightbox-slide"][aria-hidden="true"]) { pointer-events: none; } :where([data-slot="lightbox-thumbnails"]) { overscroll-behavior-inline: contain; scrollbar-width: thin; } html.lightbox-morph-opening [data-slot="lightbox-content"] { scale: 1 !important; transition-property: opacity !important; } @media (prefers-reduced-motion: reduce) { :where([data-slot="lightbox-slide"]) { transition: none !important; animation: none !important; } } @media (forced-colors: active) { :where([data-slot="lightbox-toolbar"] button:focus-visible), :where([data-slot="lightbox-viewport"] button:focus-visible), :where([data-slot="lightbox-thumbnails"] button:focus-visible) { outline: 2px solid CanvasText; outline-offset: 2px; } } `; const EMPTY_CAPTIONS_TRACK = "data:text/vtt;charset=utf-8,WEBVTT%0A%0A"; const VIDEO_THUMBNAIL_MAX_SIZE = 112; const interactiveSelector = "a,button,input,select,textarea,summary,video,audio,iframe,[contenteditable=true],[role=button],[role=link],[data-lightbox-gesture-ignore]"; const postGestureActivationSelector = 'a[href],button,input:not([type="hidden"]),select,textarea,summary,label,[contenteditable=true],[role="button"],[role="link"],[role="checkbox"],[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"],[role="option"],[role="radio"],[role="switch"],[role="tab"]'; type GalleryMediaElement = HTMLImageElement | HTMLVideoElement; const generatedVideoThumbnails = new WeakMap< HTMLVideoElement, { source: string; thumbnail: string } >(); type LightboxOverlay = "blur" | "brightness"; type LightboxDirection = "ltr" | "rtl"; type LightboxChangeReason = | "trigger-press" | "previous-press" | "next-press" | "thumbnail-press" | "swipe" | "keyboard" | "programmatic" | "items-change"; type LightboxImageItem = { id?: string; type: "image"; src: string; alt: string; width?: number; height?: number; srcSet?: string; sizes?: string; thumbnail?: React.ReactNode; thumbnailSrc?: string; caption?: React.ReactNode; className?: string; download?: boolean | { src?: string; filename?: string }; zoomable?: boolean; }; type LightboxVideoItem = { id?: string; type: "video"; src: string; label: string; thumbnail?: React.ReactNode; poster?: string; width?: number; height?: number; sources?: React.SourceHTMLAttributes[]; tracks?: React.TrackHTMLAttributes[]; videoProps?: Omit< React.VideoHTMLAttributes, "children" | "className" | "height" | "poster" | "src" | "width" >; caption?: React.ReactNode; className?: string; download?: boolean | { src?: string; filename?: string }; zoomable?: boolean; }; type LightboxItem = LightboxImageItem | LightboxVideoItem; type LightboxImageChangeEventDetails = { reason: LightboxChangeReason; event?: Event; previousIndex: number; }; type LightboxOpenEventDetails = { reason: DialogPrimitive.Root.ChangeEventReason; event?: Event; index: number; item?: LightboxItem; }; type LightboxControlContext = { item?: LightboxItem; index: number; event: React.MouseEvent; actions: LightboxActions; }; type LightboxControl = { id: string; icon: React.ReactNode; label: string; disabled?: boolean; onClick: (context: LightboxControlContext) => void; }; type LightboxActions = { open: (index?: number) => void; close: () => void; goTo: (index: number) => void; next: () => void; previous: () => void; zoomIn: () => void; zoomOut: () => void; resetZoom: () => void; }; type LightboxProps = { children?: React.ReactNode; items?: LightboxItem[]; open?: boolean; defaultOpen?: boolean; onOpenChange?: DialogPrimitive.Root.Props["onOpenChange"]; onOpenChangeComplete?: DialogPrimitive.Root.Props["onOpenChangeComplete"]; onOpen?: (details: LightboxOpenEventDetails) => void; onClose?: (details: LightboxOpenEventDetails) => void; index?: number; defaultIndex?: number; onChangeImage?: ( index: number, item: LightboxItem, details: LightboxImageChangeEventDetails ) => void; overlay?: "blur" | "brightness"; loop?: boolean; noCounter?: boolean; noCarousel?: boolean; noControls?: boolean; loading?: "lazy" | "eager"; preload?: number; maxZoom?: number; controls?: LightboxControl[]; dir?: "ltr" | "rtl"; className?: string; actionsRef?: React.Ref; } & Omit< DialogPrimitive.Root.Props, | "children" | "modal" | "onOpenChange" | "onOpenChangeComplete" | "open" | "defaultOpen" | "actionsRef" >; type LightboxBackdropStyle = DialogPrimitive.Backdrop.Props["style"]; type LightboxBackdropStyleObject = React.CSSProperties & { "--lightbox-backdrop-opacity": number; }; function mergeLightboxBackdropStyle( baseStyle: LightboxBackdropStyleObject, style: LightboxBackdropStyle ): LightboxBackdropStyle { if (typeof style === "function") { return (state: DialogPrimitive.Backdrop.State) => { return { ...baseStyle, ...style(state), }; }; } return { ...baseStyle, ...style }; } type LightboxContentStyle = DialogPrimitive.Popup.Props["style"]; type LightboxContentStyleObject = React.CSSProperties & { "--lightbox-header-inset": string; }; function mergeLightboxContentStyle( baseStyle: LightboxContentStyleObject, style: LightboxContentStyle ): LightboxContentStyle { if (typeof style === "function") { return (state: DialogPrimitive.Popup.State) => { return { ...baseStyle, ...style(state), }; }; } return { ...baseStyle, ...style }; } type TransformState = { scale: number; panX: number; panY: number; swipeX: number; dismissY: number; dragging: boolean; }; const initialTransform: TransformState = { scale: 1, panX: 0, panY: 0, swipeX: 0, dismissY: 0, dragging: false, }; type RegisteredSource = { element: HTMLElement; morph: boolean; }; type LightboxContextValue = { activeIndex: number; activeItem?: LightboxItem; actions: LightboxActions; armPostGestureActivationRepair: (event: Event) => void; animateZoom: ( target: Pick ) => void; changeIndex: ( index: number, reason: LightboxChangeReason, event?: Event ) => void; closeWithDetails: (details: DialogPrimitive.Root.ChangeEventDetails) => void; controls: LightboxControl[]; direction: LightboxDirection; getSource: (index: number) => RegisteredSource | undefined; items: LightboxItem[]; loadedAssets: ReadonlySet; loading: "lazy" | "eager"; loop: boolean; markAssetLoaded: (key: string) => void; maxZoom: number; noCarousel: boolean; noControls: boolean; noCounter: boolean; open: boolean; overlay: LightboxOverlay; preload: number; registerMedia: (element: HTMLElement | null) => void; registerSource: (index: number, source: RegisteredSource | null) => void; requestOpen: ( index: number, source?: RegisteredSource, event?: Event ) => void; setTransform: React.Dispatch>; shouldReduceMotion: boolean; stopZoomAnimation: () => void; transform: TransformState; }; const LightboxContext = React.createContext(null); function useLightbox() { const context = React.useContext(LightboxContext); if (!context) { throw new Error("Lightbox parts must be rendered inside ."); } return context; } function getAssetLoadKey(type: LightboxItem["type"], source: string) { return `${type}:${source}`; } function getMediaLoadKey(item: LightboxItem) { return getAssetLoadKey(item.type, item.src); } function getThumbnailLoadKey(item: LightboxItem) { const source = item.type === "image" ? (item.thumbnailSrc ?? item.src) : (item.poster ?? item.src); return getAssetLoadKey(item.type, source); } function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function normalizeIndex(index: number, length: number, loop: boolean) { if (length === 0) return 0; if (loop) return ((index % length) + length) % length; return clamp(index, 0, length - 1); } function getItemLabel(item: LightboxItem | undefined, index: number) { if (!item) return `Media ${index + 1}`; return item.type === "image" ? item.alt || `Image ${index + 1}` : item.label; } function isElementVisible(element: HTMLElement) { const rect = element.getBoundingClientRect(); return ( rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.right > 0 && rect.top < window.innerHeight && rect.left < window.innerWidth ); } function getMorphTarget(element: HTMLElement | null) { if (!element) return null; if (element.matches("[data-lightbox-morph-target]")) return element; const explicitTarget = element.querySelector( "[data-lightbox-morph-target]" ); if (explicitTarget) return explicitTarget; if (element.matches("img,video,canvas")) return element; return element.querySelector("img,video,canvas") ?? element; } function isStandaloneMedia(media: GalleryMediaElement, gallery: HTMLElement) { const interactiveAncestor = media.parentElement?.closest(interactiveSelector); return !interactiveAncestor || interactiveAncestor === gallery; } function getStandaloneGalleryMedia( target: EventTarget | null, gallery: HTMLElement ) { if (!(target instanceof Element)) return null; const media = target.closest("img,video"); if ( !(media instanceof HTMLImageElement || media instanceof HTMLVideoElement) || !gallery.contains(media) || !isStandaloneMedia(media, gallery) ) { return null; } return media; } function getPostGestureActivationTarget(target: EventTarget | null) { if (!(target instanceof Element)) return null; const element = target.closest(postGestureActivationSelector); if ( !element || element.matches(':disabled,[aria-disabled="true"]') || element.closest("[inert]") ) { return null; } return element; } function imageToItem(image: HTMLImageElement): LightboxImageItem { const figure = image.closest("figure"); const caption = image.dataset.lightboxCaption ?? figure?.querySelector(":scope > figcaption")?.textContent?.trim() ?? undefined; const width = Number(image.getAttribute("width")); const height = Number(image.getAttribute("height")); const srcSet = image.srcset || undefined; return { id: image.id || undefined, type: "image", src: image.currentSrc || image.src, alt: image.alt, width: width > 0 ? width : image.naturalWidth || undefined, height: height > 0 ? height : image.naturalHeight || undefined, srcSet, sizes: srcSet ? image.sizes || undefined : undefined, thumbnailSrc: image.currentSrc || image.src, caption, }; } function getVideoThumbnail(video: HTMLVideoElement) { const source = video.currentSrc || video.src; if ( !source || video.readyState < 2 || video.videoWidth <= 0 || video.videoHeight <= 0 ) { return undefined; } const cached = generatedVideoThumbnails.get(video); if (cached?.source === source) return cached.thumbnail; const scale = Math.min( 1, VIDEO_THUMBNAIL_MAX_SIZE / Math.max(video.videoWidth, video.videoHeight) ); const canvas = document.createElement("canvas"); canvas.width = Math.max(1, Math.round(video.videoWidth * scale)); canvas.height = Math.max(1, Math.round(video.videoHeight * scale)); try { const context = canvas.getContext("2d"); if (!context) return undefined; context.drawImage(video, 0, 0, canvas.width, canvas.height); const thumbnail = canvas.toDataURL("image/webp", 0.72); generatedVideoThumbnails.set(video, { source, thumbnail }); return thumbnail; } catch { // Cross-origin videos without CORS headers cannot be copied to a canvas. return undefined; } } function videoToItem(video: HTMLVideoElement): LightboxVideoItem { const figure = video.closest("figure"); const caption = video.dataset.lightboxCaption ?? figure?.querySelector(":scope > figcaption")?.textContent?.trim() ?? undefined; const width = Number(video.getAttribute("width")); const height = Number(video.getAttribute("height")); const sources = Array.from(video.querySelectorAll("source"), (source) => { return { media: source.media || undefined, src: source.src, type: source.type || undefined, }; }); const src = [ video.currentSrc, video.dataset.lightboxSrc, video.src, sources.at(0)?.src, ].find((source) => source) ?? ""; const label = [video.getAttribute("aria-label"), video.title, caption].find( (value) => value ); return { id: video.id || undefined, type: "video", src, label: label ?? "Video", poster: video.poster || getVideoThumbnail(video), width: width > 0 ? width : video.videoWidth || undefined, height: height > 0 ? height : video.videoHeight || undefined, sources: sources.length > 0 ? sources : undefined, caption, videoProps: { autoPlay: video.autoplay, controls: true, loop: video.loop, muted: video.muted, playsInline: video.playsInline, preload: "auto", }, }; } function getLoadedAssetKeys(media: GalleryMediaElement, item: LightboxItem) { const loaded = media instanceof HTMLImageElement ? media.complete && media.naturalWidth > 0 : media.readyState >= 2; if (!loaded) return []; const mediaKey = getMediaLoadKey(item); const thumbnailKey = getThumbnailLoadKey(item); if (mediaKey === thumbnailKey) return [mediaKey]; return item.type === "video" && item.poster?.startsWith("data:") ? [mediaKey, thumbnailKey] : [mediaKey]; } function mediaToItem(media: GalleryMediaElement): LightboxItem { return media instanceof HTMLImageElement ? imageToItem(media) : videoToItem(media); } function hasCustomContent(children: React.ReactNode) { return React.Children.toArray(children).some( (child) => React.isValidElement(child) && (child.type as { __lightboxContent?: boolean }).__lightboxContent === true ); } function getEventDetails( reason: DialogPrimitive.Root.ChangeEventReason, event?: Event, trigger?: Element | null ) { return { reason, event, trigger } as DialogPrimitive.Root.ChangeEventDetails; } function Lightbox({ children, items: itemsProp, open: openProp, defaultOpen = false, onOpenChange, onOpenChangeComplete, onOpen, onClose, index: indexProp, defaultIndex = 0, onChangeImage, overlay = "blur", loop = true, noCounter = false, noCarousel = false, noControls = false, loading = "eager", preload = 1, maxZoom = 4, controls = [], dir, className, actionsRef, ...rootProps }: LightboxProps) { const galleryRef = React.useRef(null); const mediaRef = React.useRef(null); const sourceMapRef = React.useRef(new Map()); const galleryTouchPressRef = React.useRef<{ pointerId: number; media: GalleryMediaElement; startX: number; startY: number; } | null>(null); const suppressedGalleryClickRef = React.useRef<{ media: GalleryMediaElement; time: number; } | null>(null); const annotatedMediaRef = React.useRef( new Map>() ); const openingCleanupRef = React.useRef<(() => void) | null>(null); const postGestureActivationCleanupRef = React.useRef<(() => void) | null>( null ); const zoomAnimationRef = React.useRef | null>( null ); const transformRef = React.useRef(initialTransform); const [autoItems, setAutoItems] = React.useState([]); const [loadedAssets, setLoadedAssets] = React.useState>( () => new Set() ); const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); const [uncontrolledIndex, setUncontrolledIndex] = React.useState(defaultIndex); const [transform, setTransform] = React.useState(initialTransform); React.useLayoutEffect(() => { transformRef.current = transform; }, [transform]); const [inheritedDirection, setInheritedDirection] = React.useState(() => typeof document !== "undefined" && document.documentElement.dir === "rtl" ? "rtl" : "ltr" ); const shouldReduceMotion = Boolean(useReducedMotion()); const isOpenControlled = openProp !== undefined; const isIndexControlled = indexProp !== undefined; const open = openProp ?? uncontrolledOpen; const items = itemsProp ?? autoItems; const activeIndex = normalizeIndex( indexProp ?? uncontrolledIndex, items.length, loop ); const activeItem = items[activeIndex]; const direction = dir ?? inheritedDirection; const armPostGestureActivationRepair = React.useCallback( (releaseEvent: Event) => { if ( !(releaseEvent instanceof PointerEvent) || (releaseEvent.pointerType !== "touch" && releaseEvent.pointerType !== "pen") ) { return; } const releaseTarget = releaseEvent.target; const doc = releaseTarget instanceof Node ? (releaseTarget.ownerDocument ?? document) : document; const view = doc.defaultView ?? window; postGestureActivationCleanupRef.current?.(); let active = true; let fallbackTimer = 0; let suppressionTimer = 0; let press: { pointerId: number; target: HTMLElement; startX: number; startY: number; } | null = null; let pendingTarget: HTMLElement | null = null; let syntheticTarget: HTMLElement | null = null; function cleanup() { if (!active) return; active = false; view.clearTimeout(fallbackTimer); view.clearTimeout(suppressionTimer); doc.removeEventListener("click", handleClick, true); doc.removeEventListener("pointercancel", handlePointerCancel, true); doc.removeEventListener("pointerdown", handlePointerDown, true); doc.removeEventListener("pointermove", handlePointerMove, true); doc.removeEventListener("pointerup", handlePointerUp, true); if (postGestureActivationCleanupRef.current === cleanup) { postGestureActivationCleanupRef.current = null; } } function handlePointerDown(event: PointerEvent) { if (!event.isPrimary) { if (press || pendingTarget) cleanup(); return; } if (event.button !== 0) return; if (press || pendingTarget || syntheticTarget) { cleanup(); return; } const target = getPostGestureActivationTarget(event.target); if (!target || target.closest('[data-slot="lightbox-portal"]')) { cleanup(); return; } press = { pointerId: event.pointerId, target, startX: event.clientX, startY: event.clientY, }; } function handlePointerMove(event: PointerEvent) { if (!press || press.pointerId !== event.pointerId) return; if ( Math.hypot( event.clientX - press.startX, event.clientY - press.startY ) > 8 ) { cleanup(); } } function handlePointerCancel(event: PointerEvent) { if (press?.pointerId === event.pointerId) cleanup(); } function handlePointerUp(event: PointerEvent) { if (!press || press.pointerId !== event.pointerId) return; const currentPress = press; press = null; const target = getPostGestureActivationTarget(event.target); if ( target !== currentPress.target || Math.hypot( event.clientX - currentPress.startX, event.clientY - currentPress.startY ) > 8 ) { cleanup(); return; } pendingTarget = currentPress.target; fallbackTimer = view.setTimeout(() => { const activationTarget = pendingTarget; if ( !active || !activationTarget?.isConnected || getPostGestureActivationTarget(activationTarget) !== activationTarget ) { cleanup(); return; } pendingTarget = null; syntheticTarget = activationTarget; activationTarget.click(); suppressionTimer = view.setTimeout(cleanup, 500); }, 80); } function handleClick(event: MouseEvent) { if (!event.isTrusted) return; const target = event.target instanceof Element ? event.target.closest(postGestureActivationSelector) : null; if (syntheticTarget && target === syntheticTarget) { event.preventDefault(); event.stopImmediatePropagation(); cleanup(); return; } if (pendingTarget) cleanup(); } doc.addEventListener("click", handleClick, true); doc.addEventListener("pointercancel", handlePointerCancel, true); doc.addEventListener("pointerdown", handlePointerDown, true); doc.addEventListener("pointermove", handlePointerMove, true); doc.addEventListener("pointerup", handlePointerUp, true); postGestureActivationCleanupRef.current = cleanup; }, [] ); const markAssetsLoaded = React.useCallback((keys: string[]) => { if (keys.length === 0) return; setLoadedAssets((current) => { const missingKeys = keys.filter((key) => !current.has(key)); if (missingKeys.length === 0) return current; const next = new Set(current); for (const key of missingKeys) next.add(key); return next; }); }, []); const markAssetLoaded = React.useCallback( (key: string) => markAssetsLoaded([key]), [markAssetsLoaded] ); React.useLayoutEffect(() => { transformRef.current = transform; }, [transform]); const stopZoomAnimation = React.useCallback(() => { zoomAnimationRef.current?.stop(); zoomAnimationRef.current = null; }, []); const animateZoom = React.useCallback( (target: Pick) => { stopZoomAnimation(); const start = transformRef.current; const end = { scale: clamp(target.scale, 1, maxZoom), panX: target.panX, panY: target.panY, }; const update = (progress: number) => { const current = transformRef.current; const next = { ...current, scale: start.scale + (end.scale - start.scale) * progress, panX: start.panX + (end.panX - start.panX) * progress, panY: start.panY + (end.panY - start.panY) * progress, swipeX: 0, dismissY: 0, }; transformRef.current = next; setTransform(next); }; if (shouldReduceMotion) { update(1); return; } zoomAnimationRef.current = animate(0, 1, { duration: 0.22, ease: [0.22, 1, 0.36, 1], onUpdate: update, onComplete: () => { zoomAnimationRef.current = null; }, }); }, [maxZoom, shouldReduceMotion, stopZoomAnimation] ); React.useEffect( () => () => { openingCleanupRef.current?.(); postGestureActivationCleanupRef.current?.(); stopZoomAnimation(); }, [stopZoomAnimation] ); const handleGalleryRef = React.useCallback( (element: HTMLDivElement | null) => { galleryRef.current = element; if (!dir && element) { setInheritedDirection( window.getComputedStyle(element).direction as LightboxDirection ); } }, [dir] ); const restoreAnnotations = React.useCallback(() => { for (const [media, previous] of annotatedMediaRef.current) { for (const [name, value] of Object.entries(previous)) { if (value == null) media.removeAttribute(name); else media.setAttribute(name, value); } } annotatedMediaRef.current.clear(); }, []); const scanMedia = React.useCallback(() => { const gallery = galleryRef.current; if (!gallery || itemsProp) return { foundItems: [], sources: [] }; restoreAnnotations(); const mediaItems = Array.from( gallery.querySelectorAll("img,video") ).filter((media) => isStandaloneMedia(media, gallery)); mediaItems.forEach((media, index) => { annotatedMediaRef.current.set(media, { role: media.getAttribute("role"), tabindex: media.getAttribute("tabindex"), "aria-haspopup": media.getAttribute("aria-haspopup"), "aria-label": media.getAttribute("aria-label"), "data-lightbox-source": media.getAttribute("data-lightbox-source"), }); media.setAttribute("role", "button"); media.setAttribute("tabindex", "0"); media.setAttribute("aria-haspopup", "dialog"); const label = media instanceof HTMLImageElement ? media.alt || `image ${index + 1}` : ([media.getAttribute("aria-label"), media.title].find( (value) => value ) ?? `video ${index + 1}`); media.setAttribute( "aria-label", media.getAttribute("aria-label") ?? `Open ${label} in lightbox` ); media.setAttribute("data-lightbox-source", ""); if (media instanceof HTMLImageElement && !media.hasAttribute("alt")) { console.debug( "Lightbox auto-discovered an without an alt attribute." ); } }); const foundItems = mediaItems.map(mediaToItem); markAssetsLoaded( mediaItems.flatMap((media, index) => { const item = foundItems[index]; return item ? getLoadedAssetKeys(media, item) : []; }) ); return { foundItems, sources: mediaItems }; }, [itemsProp, markAssetsLoaded, restoreAnnotations]); React.useEffect(() => { if (itemsProp) { restoreAnnotations(); return; } const gallery = galleryRef.current; if (!gallery) return; const refresh = () => { if (open && autoItems.length > 0) return; const { foundItems, sources } = scanMedia(); sourceMapRef.current.clear(); sources.forEach((element, index) => { sourceMapRef.current.set(index, { element, morph: true }); }); setAutoItems(foundItems); }; refresh(); const observer = new MutationObserver(refresh); observer.observe(gallery, { childList: true, subtree: true, attributes: true, attributeFilter: [ "src", "srcset", "sizes", "alt", "poster", "width", "height", "data-lightbox-caption", "data-lightbox-src", "class", ], }); return () => { observer.disconnect(); restoreAnnotations(); }; }, [autoItems.length, itemsProp, open, restoreAnnotations, scanMedia]); const changeIndex = React.useCallback( (nextIndex: number, reason: LightboxChangeReason, event?: Event) => { if (noCarousel || items.length === 0) return; const normalized = normalizeIndex(nextIndex, items.length, loop); if (normalized === activeIndex) return; stopZoomAnimation(); if (!isIndexControlled) setUncontrolledIndex(normalized); setTransform(initialTransform); onChangeImage?.(normalized, items[normalized], { reason, event, previousIndex: activeIndex, }); }, [ activeIndex, isIndexControlled, items, loop, noCarousel, onChangeImage, stopZoomAnimation, ] ); const commitOpenChange = React.useCallback( ( nextOpen: boolean, details: DialogPrimitive.Root.ChangeEventDetails, lifecycleIndex = activeIndex, lifecycleItem = activeItem ) => { if (!isOpenControlled) setUncontrolledOpen(nextOpen); onOpenChange?.(nextOpen, details); const lifecycleDetails: LightboxOpenEventDetails = { reason: details.reason, event: "event" in details ? details.event : undefined, index: lifecycleIndex, item: lifecycleItem, }; if (nextOpen) onOpen?.(lifecycleDetails); else onClose?.(lifecycleDetails); }, [activeIndex, activeItem, isOpenControlled, onClose, onOpen, onOpenChange] ); const runOpenChange = React.useCallback( ( nextOpen: boolean, details: DialogPrimitive.Root.ChangeEventDetails, source?: RegisteredSource, lifecycleIndex = activeIndex, lifecycleItem = activeItem ) => { openingCleanupRef.current?.(); openingCleanupRef.current = null; stopZoomAnimation(); if (!nextOpen) { commitOpenChange(false, details, lifecycleIndex, lifecycleItem); return; } const from = source?.element; const canMorph = Boolean( source?.morph && from?.isConnected && isElementVisible(from) && !shouldReduceMotion ); const root = document.documentElement; if (canMorph) root.classList.add("lightbox-morph-opening"); const fromRect = canMorph ? from?.getBoundingClientRect() : undefined; const fromRadius = canMorph ? getComputedStyle(from as HTMLElement).borderRadius : ""; flushSync(() => { setTransform(initialTransform); commitOpenChange(true, details, lifecycleIndex, lifecycleItem); }); if (!canMorph || !fromRect) return; const destination = getMorphTarget(mediaRef.current); if (!destination || !isElementVisible(destination)) { root.classList.remove("lightbox-morph-opening"); return; } const toRect = destination.getBoundingClientRect(); if (toRect.width <= 0 || toRect.height <= 0) { root.classList.remove("lightbox-morph-opening"); return; } const scale = Math.max( fromRect.width / toRect.width, fromRect.height / toRect.height ); const translateX = fromRect.left + fromRect.width / 2 - (toRect.left + toRect.width / 2); const translateY = fromRect.top + fromRect.height / 2 - (toRect.top + toRect.height / 2); const previous = { borderRadius: destination.style.borderRadius, opacity: destination.style.opacity, transform: destination.style.transform, transition: destination.style.transition, transformOrigin: destination.style.transformOrigin, willChange: destination.style.willChange, }; let firstFrame = 0; let secondFrame = 0; let finishTimer = 0; let finished = false; const cleanup = () => { if (finished) return; finished = true; window.cancelAnimationFrame(firstFrame); window.cancelAnimationFrame(secondFrame); window.clearTimeout(finishTimer); destination.removeEventListener("transitionend", handleTransitionEnd); Object.assign(destination.style, previous); root.classList.remove("lightbox-morph-opening"); if (openingCleanupRef.current === cleanup) { openingCleanupRef.current = null; } }; const handleTransitionEnd = (event: TransitionEvent) => { if ( event.target === destination && event.propertyName === "transform" ) { cleanup(); } }; Object.assign(destination.style, { borderRadius: fromRadius, opacity: "0.2", transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale}) ${previous.transform}`.trim(), transformOrigin: "center", transition: "none", willChange: "transform, opacity", }); destination.addEventListener("transitionend", handleTransitionEnd); openingCleanupRef.current = cleanup; firstFrame = window.requestAnimationFrame(() => { secondFrame = window.requestAnimationFrame(() => { destination.style.transition = "transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out, border-radius 260ms cubic-bezier(0.22, 1, 0.36, 1)"; destination.style.transform = previous.transform; destination.style.opacity = previous.opacity; destination.style.borderRadius = previous.borderRadius; finishTimer = window.setTimeout(cleanup, 320); }); }); }, [ activeIndex, activeItem, commitOpenChange, shouldReduceMotion, stopZoomAnimation, ] ); const closeWithDetails = React.useCallback( (details: DialogPrimitive.Root.ChangeEventDetails) => { runOpenChange(false, details, sourceMapRef.current.get(activeIndex)); }, [activeIndex, runOpenChange] ); const requestOpen = React.useCallback( (nextIndex: number, source?: RegisteredSource, event?: Event) => { let nextItems = items; let nextSources: HTMLElement[] = []; if (!itemsProp) { const scan = scanMedia(); nextItems = scan.foundItems; nextSources = scan.sources; sourceMapRef.current.clear(); nextSources.forEach((element, sourceIndex) => { sourceMapRef.current.set(sourceIndex, { element, morph: true }); }); flushSync(() => setAutoItems(nextItems)); } if (nextItems.length === 0) return; const normalized = normalizeIndex(nextIndex, nextItems.length, loop); if (!isIndexControlled) flushSync(() => setUncontrolledIndex(normalized)); if (normalized !== activeIndex) { onChangeImage?.(normalized, nextItems[normalized], { reason: "trigger-press", event, previousIndex: activeIndex, }); } if (source) sourceMapRef.current.set(normalized, source); const details = getEventDetails( "trigger-press", event, source?.element ?? nextSources[normalized] ); runOpenChange( true, details, source ?? sourceMapRef.current.get(normalized), normalized, nextItems[normalized] ); }, [ activeIndex, isIndexControlled, items, itemsProp, loop, onChangeImage, runOpenChange, scanMedia, ] ); const handleOpenChange = React.useCallback< NonNullable >( (nextOpen, details) => { if (nextOpen) { runOpenChange(true, details, sourceMapRef.current.get(activeIndex)); } else { closeWithDetails(details); } }, [activeIndex, closeWithDetails, runOpenChange] ); const handleOpenChangeComplete = React.useCallback< NonNullable >( (nextOpen) => { if (!nextOpen && transformRef.current.dismissY === 0) { stopZoomAnimation(); setTransform(initialTransform); } onOpenChangeComplete?.(nextOpen); }, [onOpenChangeComplete, stopZoomAnimation] ); const registerSource = React.useCallback( (sourceIndex: number, source: RegisteredSource | null) => { if (source) sourceMapRef.current.set(sourceIndex, source); else sourceMapRef.current.delete(sourceIndex); }, [] ); const registerMedia = React.useCallback((element: HTMLElement | null) => { mediaRef.current = element; }, []); const activeZoomable = activeItem?.type === "image" ? activeItem.zoomable !== false : Boolean(activeItem?.zoomable); const actions = React.useMemo(() => { return { open: (nextIndex = activeIndex) => requestOpen(nextIndex), close: () => closeWithDetails(getEventDetails("imperative-action", undefined, null)), goTo: (nextIndex) => changeIndex(nextIndex, "programmatic"), next: () => changeIndex(activeIndex + 1, "next-press"), previous: () => changeIndex(activeIndex - 1, "previous-press"), zoomIn: () => { if (!activeZoomable) return; const current = transformRef.current; animateZoom({ scale: Math.min(maxZoom, current.scale < 2 ? 2 : current.scale + 1), panX: current.panX, panY: current.panY, }); }, zoomOut: () => { const current = transformRef.current; const scale = Math.max(1, current.scale - 1); const panRatio = current.scale > 1 ? Math.max(0, (scale - 1) / (current.scale - 1)) : 0; animateZoom({ scale, panX: current.panX * panRatio, panY: current.panY * panRatio, }); }, resetZoom: () => animateZoom({ scale: 1, panX: 0, panY: 0 }), }; }, [ activeIndex, activeZoomable, animateZoom, changeIndex, closeWithDetails, maxZoom, requestOpen, ]); React.useImperativeHandle(actionsRef, () => actions, [actions]); const context = React.useMemo(() => { return { activeIndex, activeItem, actions, armPostGestureActivationRepair, animateZoom, changeIndex, closeWithDetails, controls, direction, getSource: (sourceIndex) => sourceMapRef.current.get(sourceIndex), items, loadedAssets, loading, loop, markAssetLoaded, maxZoom, noCarousel, noControls, noCounter, open, overlay, preload: noCarousel ? 0 : Math.max(0, Math.floor(preload)), registerMedia, registerSource, requestOpen, setTransform, shouldReduceMotion, stopZoomAnimation, transform, }; }, [ activeIndex, activeItem, actions, armPostGestureActivationRepair, animateZoom, changeIndex, closeWithDetails, controls, direction, items, loadedAssets, loading, loop, markAssetLoaded, maxZoom, noCarousel, noControls, noCounter, open, overlay, preload, registerMedia, registerSource, requestOpen, shouldReduceMotion, stopZoomAnimation, transform, ]); const handleGalleryClick = (event: React.MouseEvent) => { if (event.defaultPrevented || itemsProp) return; const gallery = galleryRef.current; if (!gallery) return; const media = getStandaloneGalleryMedia(event.target, gallery); if (!media) return; const suppressedClick = suppressedGalleryClickRef.current; suppressedGalleryClickRef.current = null; if ( event.detail !== 0 && suppressedClick?.media === media && performance.now() - suppressedClick.time < 700 ) { return; } openGalleryMedia(media, event.nativeEvent); }; const handleGalleryPointerDown = ( event: React.PointerEvent ) => { suppressedGalleryClickRef.current = null; if ( itemsProp || event.pointerType !== "touch" || !event.isPrimary || event.button !== 0 ) { galleryTouchPressRef.current = null; return; } const gallery = galleryRef.current; if (!gallery) return; const media = getStandaloneGalleryMedia(event.target, gallery); galleryTouchPressRef.current = media ? { pointerId: event.pointerId, media, startX: event.clientX, startY: event.clientY, } : null; }; const handleGalleryPointerMove = ( event: React.PointerEvent ) => { const press = galleryTouchPressRef.current; if ( !press || press.pointerId !== event.pointerId || Math.hypot(event.clientX - press.startX, event.clientY - press.startY) <= 8 ) { return; } galleryTouchPressRef.current = null; }; const handleGalleryPointerUp = ( event: React.PointerEvent ) => { const press = galleryTouchPressRef.current; galleryTouchPressRef.current = null; if ( !press || press.pointerId !== event.pointerId || Math.hypot(event.clientX - press.startX, event.clientY - press.startY) > 8 ) { return; } const gallery = galleryRef.current; if (!gallery) return; const media = getStandaloneGalleryMedia(event.target, gallery); if (media !== press.media) return; suppressedGalleryClickRef.current = { media, time: performance.now() }; openGalleryMedia(media, event.nativeEvent); }; function openGalleryMedia(media: GalleryMediaElement, event: Event) { const gallery = galleryRef.current; if (!gallery) return; const sources = Array.from( gallery.querySelectorAll("img,video") ).filter((item) => isStandaloneMedia(item, gallery)); const sourceIndex = sources.indexOf(media); if (sourceIndex < 0) return; requestOpen(sourceIndex, { element: media, morph: true }, event); } const handleGalleryKeyDown = (event: React.KeyboardEvent) => { if (itemsProp || (event.key !== "Enter" && event.key !== " ")) return; const gallery = galleryRef.current; const target = event.target; if ( !gallery || !( target instanceof HTMLImageElement || target instanceof HTMLVideoElement ) ) { return; } if (!isStandaloneMedia(target, gallery)) return; event.preventDefault(); openGalleryMedia(target, event.nativeEvent); }; const handleGalleryMediaLoad = () => { if (itemsProp) return; const { foundItems } = scanMedia(); setAutoItems(foundItems); }; const customContent = hasCustomContent(children); return ( {itemsProp ? ( children ) : (

{ galleryTouchPressRef.current = null; }} onPointerDown={handleGalleryPointerDown} onPointerMove={handleGalleryPointerMove} onPointerUp={handleGalleryPointerUp} > {children}

)} {!customContent && } ); } type LightboxTriggerProps = { index?: number; morph?: boolean; } & DialogPrimitive.Trigger.Props; function LightboxTrigger({ index = 0, morph, onClick, ref, ...props }: LightboxTriggerProps) { const { registerSource, requestOpen } = useLightbox(); const sourceRef = React.useRef(null); const mergedRef = React.useCallback( (element: HTMLButtonElement | null) => { sourceRef.current = element; if (element) { const inferredMorph = morph ?? element.matches("img,video,canvas,picture,[data-lightbox-morph]"); registerSource(index, { element, morph: inferredMorph }); } else { registerSource(index, null); } if (typeof ref === "function") return ref(element); if (ref) ref.current = element; }, [index, morph, ref, registerSource] ); return ( { onClick?.(event); if (event.defaultPrevented) return; const element = sourceRef.current; if (!element) return; const inferredMorph = morph ?? element.matches("img,video,canvas,picture,[data-lightbox-morph]"); registerSource(index, { element, morph: inferredMorph }); event.preventBaseUIHandler(); requestOpen( index, { element, morph: inferredMorph }, event.nativeEvent ); }} {...props} /> ); } function LightboxBackdrop({ className, style, ...props }: DialogPrimitive.Backdrop.Props) { const { overlay, transform } = useLightbox(); const opacity = clamp( 1 - Math.abs(transform.dismissY) / Math.max( typeof window === "undefined" ? 1 : window.innerHeight || 1, 1 ), 0, 1 ); const backdropStyle = mergeLightboxBackdropStyle( { "--lightbox-backdrop-opacity": opacity }, style ); return ( ); } function LightboxViewport({ className, ...props }: DialogPrimitive.Viewport.Props) { return ( ); } type LightboxContentProps = {} & DialogPrimitive.Popup.Props; function LightboxContent({ className, children, initialFocus, onKeyDown, style, ...props }: LightboxContentProps) { const { activeIndex, activeItem, actions, changeIndex, direction, items, noCarousel, noControls, noCounter, setTransform, shouldReduceMotion, transform, } = useLightbox(); const popupRef = React.useRef(null); const handleKeyDown = (event: React.KeyboardEvent) => { onKeyDown?.( event as Parameters< NonNullable >[0] ); if (event.defaultPrevented) return; const target = event.target as HTMLElement; if (target.matches("input,textarea,select,[contenteditable=true]")) return; const rtlMultiplier = direction === "rtl" ? -1 : 1; if ( !noCarousel && (event.key === "ArrowLeft" || event.key === "ArrowRight") && event.shiftKey ) { event.preventDefault(); const physical = event.key === "ArrowRight" ? 1 : -1; changeIndex( activeIndex + physical * rtlMultiplier, "keyboard", event.nativeEvent ); return; } if (transform.scale > 1 && event.key.startsWith("Arrow")) { event.preventDefault(); const amount = 40; const delta = { ArrowLeft: [amount, 0], ArrowRight: [-amount, 0], ArrowUp: [0, amount], ArrowDown: [0, -amount], }[event.key] as [number, number] | undefined; if (delta) { panBy(delta[0], delta[1]); } return; } if ( !noCarousel && transform.scale === 1 && (event.key === "ArrowLeft" || event.key === "ArrowRight") ) { event.preventDefault(); const physical = event.key === "ArrowRight" ? 1 : -1; changeIndex( activeIndex + physical * rtlMultiplier, "keyboard", event.nativeEvent ); return; } if (event.key === "+" || event.key === "=") { event.preventDefault(); actions.zoomIn(); } else if (event.key === "-") { event.preventDefault(); actions.zoomOut(); } else if (event.key === "0") { event.preventDefault(); actions.resetZoom(); } }; function panBy(deltaX: number, deltaY: number) { const media = popupRef.current?.querySelector( '[data-slot="lightbox-zoom"][data-active="true"]' ); if (!media) return; const rect = media.getBoundingClientRect(); const baseWidth = rect.width / transform.scale; const baseHeight = rect.height / transform.scale; const maxX = Math.max( 0, (baseWidth * transform.scale - window.innerWidth) / 2 ); const maxY = Math.max( 0, (baseHeight * transform.scale - window.innerHeight) / 2 ); setTransform((current) => { return { ...current, panX: clamp(current.panX + deltaX, -maxX, maxX), panY: clamp(current.panY + deltaY, -maxY, maxY), }; }); } return ( popupRef.current?.querySelector( '[data-slot="lightbox-close"]' ) ?? popupRef.current) } className={cn( "relative flex size-full min-h-0 min-w-0 flex-col overflow-hidden bg-transparent text-white outline-none", "transition-[opacity,scale] duration-200 ease-out data-starting-style:scale-[0.98] data-starting-style:opacity-0 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:pointer-events-none", "motion-reduce:transition-opacity motion-reduce:transform-none", className )} style={mergeLightboxContentStyle( { "--lightbox-header-inset": "max(5rem, calc(env(safe-area-inset-top) + 4rem))", }, style )} onKeyDown={handleKeyDown} {...props} > Media viewer {children ?? ( <> {(!noCounter || !noControls) && (

{!noCounter && } {!noControls && ( )}

)} {!noCarousel && items.length > 1 && ( <> )} {(Boolean(activeItem?.caption) || (!noCarousel && items.length > 1)) && (

{!noCarousel && items.length > 1 && }

)} )} {items.length > 0 ? `${getItemLabel(activeItem, activeIndex)}, ${activeIndex + 1} of ${items.length}` : "No media"} ); } ( LightboxContent as typeof LightboxContent & { __lightboxContent: boolean } ).__lightboxContent = true; type LightboxZoomProps = { active?: boolean; } & useRender.ComponentProps<"div">; function LightboxZoom({ active = true, className, render, style, ref, ...props }: LightboxZoomProps) { const { activeItem, registerMedia, transform } = useLightbox(); const zoomable = activeItem?.type === "image" ? activeItem.zoomable !== false : Boolean(activeItem?.zoomable); const mediaRegistrationRef = React.useCallback( (element: HTMLDivElement | null) => { if (active) registerMedia(element); }, [active, registerMedia] ); const defaultProps = { className: cn( "flex max-h-full max-w-full origin-center items-center justify-center will-change-transform", className ), "data-active": active ? "true" : "false", "data-dragging": transform.dragging ? "true" : "false", "data-slot": "lightbox-zoom", "data-zoomable": zoomable ? "true" : "false", "data-zoomed": transform.scale > 1 ? "true" : "false", style: { transform: active ? `translate3d(${transform.panX}px, ${transform.panY}px, 0) scale(${transform.scale})` : undefined, ...style, }, }; return useRender({ defaultTagName: "div", ref: ref ? [ref, mediaRegistrationRef] : mediaRegistrationRef, props: mergeProps<"div">( defaultProps as useRender.ElementProps<"div">, props ) as Record, render, }); } type LightboxSlideProps = { index: number; active?: boolean; } & React.ComponentProps<"div">; function LightboxSlide({ index, active = false, className, style, ...props }: LightboxSlideProps) { const { activeItem, items, loadedAssets, loading, markAssetLoaded, noCarousel, noControls, noCounter, } = useLightbox(); const item = items[index]; if (!item) return null; const loadKey = getMediaLoadKey(item); const mediaLoaded = loadedAssets.has(loadKey); const shouldMountMedia = loading === "eager" || active || mediaLoaded; const hasTopChrome = !noCounter || !noControls; const hasBottomChrome = Boolean(activeItem?.caption); const captionTrack = item.type === "video" ? item.tracks?.find((track) => track.kind === "captions") : undefined; const media = item.type === "image" ? ( {item.alt}

markAssetLoaded(loadKey)} className={cn( "block h-auto w-[min(82vw,64rem)] max-w-[calc(100vw-2rem)] select-none rounded-lg object-contain", "max-h-[calc(100dvh-11rem)] sm:max-h-[calc(100dvh-12rem)]", "transition-opacity duration-200", !mediaLoaded && "opacity-0", item.className )} /> ) : (

); const content = (

{!mediaLoaded && ( )} {shouldMountMedia && (

{media}

)}

); return (

{content}

); } function relativeSlideOffset( index: number, activeIndex: number, length: number, loop: boolean, preferredOffset = 0 ) { let offset = index - activeIndex; if (!loop || length < 2) return offset; if (offset > length / 2) offset -= length; if (offset < -length / 2) offset += length; if (length === 2 && Math.abs(offset) === 1 && preferredOffset !== 0) { return preferredOffset; } return offset; } function isIndexMounted( index: number, activeIndex: number, length: number, preload: number, loop: boolean ) { return ( Math.abs(relativeSlideOffset(index, activeIndex, length, loop)) <= preload ); } type GestureSession = { mode: "pending" | "pan" | "swipe" | "dismiss" | "pinch"; startX: number; startY: number; startPanX: number; startPanY: number; startSwipeX: number; startDismissY: number; startScale: number; pinchDistance: number; pinchCenterX: number; pinchCenterY: number; lastX: number; lastY: number; lastTime: number; velocityX: number; velocityY: number; }; function LightboxSlides({ className, onClick, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onDoubleClick, ...props }: React.ComponentProps<"div">) { const { activeIndex, activeItem, armPostGestureActivationRepair, animateZoom, changeIndex, closeWithDetails, direction, items, loading, loop, maxZoom, noCarousel, preload, setTransform, shouldReduceMotion, stopZoomAnimation, transform, } = useLightbox(); const viewportRef = React.useRef(null); const pointersRef = React.useRef(new Map()); const sessionRef = React.useRef(null); const animationRef = React.useRef | null>(null); const wheelRef = React.useRef({ x: 0, y: 0, timer: 0 }); const lastTapRef = React.useRef({ time: 0, x: 0, y: 0 }); const suppressClickRef = React.useRef(false); const suppressClickTimerRef = React.useRef(0); const transformRef = React.useRef(transform); React.useLayoutEffect(() => { // Opening from a pointer-up can cause the browser's synthesized click to // land on the newly mounted viewport. Ignore only that same-task click so // the image always opens at its initial scale. suppressClickRef.current = true; window.clearTimeout(suppressClickTimerRef.current); suppressClickTimerRef.current = window.setTimeout(() => { suppressClickRef.current = false; }, 0); }, []); React.useLayoutEffect(() => { transformRef.current = transform; }, [transform]); const zoomable = activeItem?.type === "image" ? activeItem.zoomable !== false : Boolean(activeItem?.zoomable); const clickZoomable = activeItem?.type === "image" && zoomable; React.useEffect(() => { const animation = animationRef; const wheel = wheelRef; const pointers = pointersRef; const session = sessionRef; return () => { animation.current?.stop(); window.clearTimeout(wheel.current.timer); window.clearTimeout(suppressClickTimerRef.current); wheel.current = { x: 0, y: 0, timer: 0 }; pointers.current.clear(); session.current = null; }; }, []); React.useEffect(() => { if (loading === "lazy") return; for (let distance = 1; distance <= preload; distance += 1) { for (const candidate of [ activeIndex - distance, activeIndex + distance, ]) { const normalized = normalizeIndex(candidate, items.length, loop); const item = items[normalized]; if (item?.type !== "image") continue; const image = new Image(); image.srcset = item.srcSet ?? ""; image.sizes = item.sizes ?? ""; image.src = item.src; void image.decode?.().catch(() => undefined); } } }, [activeIndex, items, loading, loop, preload]); const getPanBounds = React.useCallback((scale: number) => { const media = viewportRef.current?.querySelector( '[data-slot="lightbox-zoom"][data-active="true"]' ); const viewport = viewportRef.current; if (!media || !viewport) return { x: 0, y: 0 }; const rect = media.getBoundingClientRect(); const currentScale = transformRef.current.scale || 1; const width = rect.width / currentScale; const height = rect.height / currentScale; return { x: Math.max(0, (width * scale - viewport.clientWidth) / 2), y: Math.max(0, (height * scale - viewport.clientHeight) / 2), }; }, []); const stopAnimation = React.useCallback(() => { animationRef.current?.stop(); animationRef.current = null; }, []); const animateTransformValue = React.useCallback( ( key: "panX" | "panY" | "swipeX" | "dismissY" | "scale", to: number, onComplete?: () => void ) => { stopAnimation(); if (shouldReduceMotion) { setTransform((current) => { return { ...current, [key]: to }; }); onComplete?.(); return; } const from = transformRef.current[key]; animationRef.current = animate(from, to, { duration: 0.24, ease: "easeOut", onUpdate: (value) => setTransform((current) => { return { ...current, [key]: value }; }), onComplete: () => { animationRef.current = null; onComplete?.(); }, }); }, [setTransform, shouldReduceMotion, stopAnimation] ); const getZoomTarget = React.useCallback( (nextScale: number, clientX: number, clientY: number) => { const viewport = viewportRef.current; if (!viewport) return null; const current = transformRef.current; const scale = clamp(nextScale, 1, maxZoom); if (scale === 1) { return { ...current, scale: 1, panX: 0, panY: 0 }; } const rect = viewport.getBoundingClientRect(); const pointX = clientX - (rect.left + rect.width / 2); const pointY = clientY - (rect.top + rect.height / 2); const ratio = scale / current.scale; const bounds = getPanBounds(scale); return { ...current, scale, panX: clamp( pointX - (pointX - current.panX) * ratio, -bounds.x, bounds.x ), panY: clamp( pointY - (pointY - current.panY) * ratio, -bounds.y, bounds.y ), swipeX: 0, dismissY: 0, }; }, [getPanBounds, maxZoom] ); const zoomAt = React.useCallback( (nextScale: number, clientX: number, clientY: number) => { const target = getZoomTarget(nextScale, clientX, clientY); if (target) { transformRef.current = target; setTransform(target); } }, [getZoomTarget, setTransform] ); const animateZoomAt = React.useCallback( (nextScale: number, clientX: number, clientY: number) => { const target = getZoomTarget(nextScale, clientX, clientY); if (target) animateZoom(target); }, [animateZoom, getZoomTarget] ); const toggleZoomAt = React.useCallback( (clientX: number, clientY: number) => { if ( activeItem?.zoomable === false || (activeItem?.type === "video" && !activeItem.zoomable) ) { return; } const nextScale = transformRef.current.scale > 1 ? 1 : Math.min(2, maxZoom); animateZoomAt(nextScale, clientX, clientY); }, [activeItem, animateZoomAt, maxZoom] ); const animateNavigation = React.useCallback( (logicalDelta: number, reason: LightboxChangeReason, event?: Event) => { if (items.length < 2) return; const nextIndex = normalizeIndex( activeIndex + logicalDelta, items.length, loop ); if (nextIndex === activeIndex) { animateTransformValue("swipeX", 0); return; } const viewportWidth = viewportRef.current?.clientWidth ?? window.innerWidth; const rtl = direction === "rtl" ? -1 : 1; const target = -logicalDelta * rtl * viewportWidth; animateTransformValue("swipeX", target, () => { changeIndex(nextIndex, reason, event); setTransform(initialTransform); }); }, [ activeIndex, animateTransformValue, changeIndex, direction, items.length, loop, setTransform, ] ); const closeFromGesture = React.useCallback( (event?: Event) => { if (event) armPostGestureActivationRepair(event); closeWithDetails(getEventDetails("imperative-action", event, null)); }, [armPostGestureActivationRepair, closeWithDetails] ); const releaseGesture = React.useCallback( (event?: Event) => { const session = sessionRef.current; if (!session) return; const viewport = viewportRef.current; const width = viewport?.clientWidth ?? window.innerWidth; const height = viewport?.clientHeight ?? window.innerHeight; const current = transformRef.current; setTransform((value) => { return { ...value, dragging: false }; }); if (session.mode === "swipe") { if (noCarousel) { animateTransformValue("swipeX", 0); sessionRef.current = null; return; } if ( Math.abs(current.swipeX) >= width * 0.25 || Math.abs(session.velocityX) >= 0.5 ) { const rtl = direction === "rtl" ? -1 : 1; const logicalDelta = current.swipeX < 0 ? rtl : -rtl; animateNavigation(logicalDelta, "swipe", event); } else { animateTransformValue("swipeX", 0); } } else if (session.mode === "dismiss") { if ( Math.abs(current.dismissY) >= height * 0.2 || Math.abs(session.velocityY) >= 0.5 ) { const target = Math.sign(current.dismissY || session.velocityY) * height; animateTransformValue("dismissY", target); closeFromGesture(event); } else { animateTransformValue("dismissY", 0); } } else if (session.mode === "pan" || session.mode === "pinch") { const scale = clamp(current.scale, 1, maxZoom); const bounds = getPanBounds(scale); setTransform((value) => { return { ...value, scale, panX: clamp(value.panX, -bounds.x, bounds.x), panY: clamp(value.panY, -bounds.y, bounds.y), dragging: false, }; }); } else { animateTransformValue("swipeX", 0); animateTransformValue("dismissY", 0); } sessionRef.current = null; }, [ animateNavigation, animateTransformValue, closeFromGesture, direction, getPanBounds, maxZoom, noCarousel, setTransform, ] ); const handlePointerDown = (event: React.PointerEvent) => { onPointerDown?.(event); if (event.defaultPrevented) return; const target = event.target as HTMLElement; const interactiveTarget = target.closest(interactiveSelector); if (interactiveTarget && interactiveTarget !== event.currentTarget) return; stopAnimation(); stopZoomAnimation(); event.currentTarget.setPointerCapture(event.pointerId); pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY, }); const points = Array.from(pointersRef.current.values()); const first = points[0] ?? { x: event.clientX, y: event.clientY }; const second = points[1] ?? first; const isPinch = points.length > 1; const pinchDistance = isPinch ? Math.hypot(second.x - first.x, second.y - first.y) : 0; const pinchCenterX = isPinch ? (first.x + second.x) / 2 : event.clientX; const pinchCenterY = isPinch ? (first.y + second.y) / 2 : event.clientY; const current = transformRef.current; const now = performance.now(); sessionRef.current = { mode: isPinch ? "pinch" : "pending", startX: event.clientX, startY: event.clientY, startPanX: current.panX, startPanY: current.panY, startSwipeX: current.swipeX, startDismissY: current.dismissY, startScale: current.scale, pinchDistance, pinchCenterX, pinchCenterY, lastX: event.clientX, lastY: event.clientY, lastTime: now, velocityX: 0, velocityY: 0, }; setTransform((value) => { return { ...value, dragging: true }; }); }; const handlePointerMove = (event: React.PointerEvent) => { onPointerMove?.(event); if (event.defaultPrevented || !pointersRef.current.has(event.pointerId)) { return; } pointersRef.current.set(event.pointerId, { x: event.clientX, y: event.clientY, }); const session = sessionRef.current; if (!session) return; const points = Array.from(pointersRef.current.values()); if (points.length >= 2 && zoomable) { const [first, second] = points; const distance = Math.hypot(second.x - first.x, second.y - first.y); const centerX = (first.x + second.x) / 2; const centerY = (first.y + second.y) / 2; if (!session.pinchDistance) { session.pinchDistance = distance; session.pinchCenterX = centerX; session.pinchCenterY = centerY; session.startScale = transformRef.current.scale; } session.mode = "pinch"; const rawScale = session.startScale * (distance / Math.max(session.pinchDistance, 1)); const elasticScale = rawScale < 1 ? 1 - (1 - rawScale) * 0.25 : rawScale > maxZoom ? maxZoom + (rawScale - maxZoom) * 0.25 : rawScale; zoomAt(elasticScale, centerX, centerY); return; } const dx = event.clientX - session.startX; const dy = event.clientY - session.startY; const now = performance.now(); const elapsed = Math.max(1, now - session.lastTime); session.velocityX = (event.clientX - session.lastX) / elapsed; session.velocityY = (event.clientY - session.lastY) / elapsed; session.lastX = event.clientX; session.lastY = event.clientY; session.lastTime = now; if (transformRef.current.scale > 1) session.mode = "pan"; else if (session.mode === "pending" && Math.hypot(dx, dy) > 8) { session.mode = Math.abs(dx) > Math.abs(dy) ? noCarousel ? "pending" : "swipe" : "dismiss"; } if (session.mode === "pan") { const bounds = getPanBounds(transformRef.current.scale); const rawX = session.startPanX + dx; const rawY = session.startPanY + dy; const resist = (value: number, maximum: number) => Math.abs(value) <= maximum ? value : Math.sign(value) * (maximum + (Math.abs(value) - maximum) * 0.35); setTransform((value) => { return { ...value, panX: resist(rawX, bounds.x), panY: resist(rawY, bounds.y), }; }); } else if (session.mode === "swipe") { setTransform((value) => { return { ...value, swipeX: session.startSwipeX + dx }; }); } else if (session.mode === "dismiss") { setTransform((value) => { return { ...value, dismissY: session.startDismissY + dy, }; }); } }; const handlePointerEnd = (event: React.PointerEvent) => { if (event.type === "pointercancel") onPointerCancel?.(event); else onPointerUp?.(event); const session = sessionRef.current; pointersRef.current.delete(event.pointerId); if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } if (!session) { suppressClickRef.current = false; return; } if (pointersRef.current.size > 0) { if (session?.mode === "pinch") { const [remaining] = pointersRef.current.values(); if (remaining) { const current = transformRef.current; const now = performance.now(); sessionRef.current = { ...session, mode: "pan", startX: remaining.x, startY: remaining.y, startPanX: current.panX, startPanY: current.panY, startSwipeX: current.swipeX, startDismissY: current.dismissY, startScale: current.scale, pinchDistance: 0, pinchCenterX: remaining.x, pinchCenterY: remaining.y, lastX: remaining.x, lastY: remaining.y, lastTime: now, velocityX: 0, velocityY: 0, }; } } return; } let shouldToggleTouchZoom = false; if ( event.type !== "pointercancel" && event.pointerType === "touch" && session?.mode === "pending" ) { const now = performance.now(); const last = lastTapRef.current; if ( now - last.time < 300 && Math.hypot(event.clientX - last.x, event.clientY - last.y) < 30 ) { shouldToggleTouchZoom = true; lastTapRef.current.time = 0; } else { lastTapRef.current = { time: now, x: event.clientX, y: event.clientY }; } } const shouldToggleZoomOnDesktop = event.type !== "pointercancel" && event.pointerType !== "touch" && event.button === 0 && session?.mode === "pending" && clickZoomable; suppressClickRef.current = event.type === "pointercancel" || event.pointerType === "touch" || session?.mode !== "pending" || shouldToggleZoomOnDesktop; window.clearTimeout(suppressClickTimerRef.current); if (suppressClickRef.current) { suppressClickTimerRef.current = window.setTimeout(() => { suppressClickRef.current = false; }, 0); } releaseGesture(event.nativeEvent); if (shouldToggleTouchZoom) toggleZoomAt(event.clientX, event.clientY); else if (shouldToggleZoomOnDesktop) { toggleZoomAt(event.clientX, event.clientY); } }; const handleClick = (event: React.MouseEvent) => { onClick?.(event); if (event.defaultPrevented) return; if (suppressClickRef.current) { suppressClickRef.current = false; return; } const target = event.target as HTMLElement; const activeZoom = target.closest( '[data-slot="lightbox-zoom"][data-active="true"]' ); const interactiveTarget = target.closest(interactiveSelector); if ( !activeZoom || (interactiveTarget && interactiveTarget !== event.currentTarget) || !clickZoomable ) { return; } toggleZoomAt(event.clientX, event.clientY); }; const handleKeyDown = (event: React.KeyboardEvent) => { onKeyDown?.(event); if ( event.defaultPrevented || event.target !== event.currentTarget || !clickZoomable || (event.key !== "Enter" && event.key !== " ") ) { return; } event.preventDefault(); const rect = event.currentTarget.getBoundingClientRect(); toggleZoomAt(rect.left + rect.width / 2, rect.top + rect.height / 2); }; const releaseWheel = React.useCallback( (event?: Event) => { const current = wheelRef.current; const width = viewportRef.current?.clientWidth ?? window.innerWidth; const height = viewportRef.current?.clientHeight ?? window.innerHeight; if ( !noCarousel && (Math.abs(current.x) > 100 || Math.abs(transformRef.current.swipeX) > width * 0.25) ) { const rtl = direction === "rtl" ? -1 : 1; animateNavigation(current.x > 0 ? rtl : -rtl, "swipe", event); } else if ( Math.abs(current.y) > 100 || Math.abs(transformRef.current.dismissY) > height * 0.2 ) { const target = Math.sign(current.y || transformRef.current.dismissY) * height; animateTransformValue("dismissY", target); closeFromGesture(event); } else { animateTransformValue("swipeX", 0); animateTransformValue("dismissY", 0); } wheelRef.current.x = 0; wheelRef.current.y = 0; }, [ animateNavigation, animateTransformValue, closeFromGesture, direction, noCarousel, ] ); const handleWheel = (event: React.WheelEvent) => { onWheel?.(event); event.stopPropagation(); if (event.defaultPrevented) return; const target = event.target as HTMLElement; const interactiveTarget = target.closest(interactiveSelector); if (interactiveTarget && interactiveTarget !== event.currentTarget) return; const likelyMouseWheel = event.deltaMode !== WheelEvent.DOM_DELTA_PIXEL || (Math.abs(event.deltaY) >= 50 && Math.abs(event.deltaX) < 8); if (event.altKey || likelyMouseWheel) { if (!zoomable) return; event.preventDefault(); const sensitivity = event.altKey ? 0.0008 : 0.0016; const scale = transformRef.current.scale * Math.exp(-event.deltaY * sensitivity); animateZoomAt(scale, event.clientX, event.clientY); return; } event.preventDefault(); if (transformRef.current.scale > 1) { const bounds = getPanBounds(transformRef.current.scale); setTransform((value) => { return { ...value, panX: clamp(value.panX - event.deltaX, -bounds.x, bounds.x), panY: clamp(value.panY - event.deltaY, -bounds.y, bounds.y), }; }); return; } wheelRef.current.x += event.deltaX; wheelRef.current.y += event.deltaY; if ( !noCarousel && Math.abs(wheelRef.current.x) > Math.abs(wheelRef.current.y) ) { setTransform((value) => { return { ...value, swipeX: -wheelRef.current.x }; }); } else { setTransform((value) => { return { ...value, dismissY: wheelRef.current.y }; }); } window.clearTimeout(wheelRef.current.timer); const nativeEvent = event.nativeEvent; wheelRef.current.timer = window.setTimeout( () => releaseWheel(nativeEvent), 120 ); }; return (

1 ? "true" : "false"} role={clickZoomable ? "button" : undefined} aria-label={ clickZoomable ? transform.scale > 1 ? "Zoom out current image" : "Zoom in current image" : undefined } tabIndex={clickZoomable ? 0 : undefined} className={cn( "relative min-h-0 flex-1 overflow-hidden touch-none outline-none select-none focus-visible:outline-none focus-visible:ring-0", className )} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerEnd} onPointerCancel={handlePointerEnd} onClick={handleClick} onKeyDown={handleKeyDown} onWheel={handleWheel} onDoubleClick={(event) => { onDoubleClick?.(event); }} {...props} > {items.map((item, itemIndex) => { if ( !isIndexMounted(itemIndex, activeIndex, items.length, preload, loop) ) { return null; } const physicalDirection = transform.swipeX === 0 ? 0 : -Math.sign(transform.swipeX); const preferredOffset = physicalDirection * (direction === "rtl" ? -1 : 1); const offset = relativeSlideOffset( itemIndex, activeIndex, items.length, loop, preferredOffset ); return ( ); })}

); } function LightboxToolbar({ className, children, ...props }: React.ComponentProps<"div">) { return ( ); } function LightboxCounter({ className, ...props }: React.ComponentProps<"div">) { const { activeIndex, items } = useLightbox(); return (

Item {items.length > 0 ? activeIndex + 1 : 0} of {items.length}

); } function LightboxCaptions({ className, ...props }: React.ComponentProps<"div">) { const { activeIndex, activeItem } = useLightbox(); if (!activeItem?.caption) return null; return ( ); } type LightboxActionButtonProps = Omit< ButtonProps, "color" | "size" | "variant" >; type LightboxThumbnailProps = { index: number; onClick?: React.MouseEventHandler; } & Omit; function LightboxVideoThumbnail({ crossOrigin, onLoad, src, }: { crossOrigin?: React.VideoHTMLAttributes["crossOrigin"]; onLoad?: () => void; src: string; }) { const videoRef = React.useRef(null); React.useEffect(() => { const video = videoRef.current; if (!video) return; const showFrame = () => { const duration = Number.isFinite(video.duration) ? video.duration : 0; video.currentTime = Math.min(0.1, Math.max(0, duration / 2)); }; video.addEventListener("loadedmetadata", showFrame); if (video.readyState >= HTMLMediaElement.HAVE_METADATA) showFrame(); return () => video.removeEventListener("loadedmetadata", showFrame); }, [src]); return (