61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T6b1f,"use client" import * as React from "react" import { ImageOff, Maximize2, X } from "lucide-react" import { MotionConfig, animate, motion, useReducedMotion, type AnimationPlaybackControls } from "motion/react" import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi, } from "@/components/ui/carousel" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, } from "@/components/ui/dialog" import { cn } from "@/lib/utils" /* * The product's photos: a main image with a counter, and a rail of thumbnails * beside it on a desktop and under it on a phone. * * * * or composed * * * * * Swipe on a phone; on a desktop the mouse zooms where it points, and the * thumbnails, arrows and arrow keys move between photos. Pressing the photo * opens it full screen — the screen grows out of the photo and folds back * into it — which is also the zoom for touch and the keyboard. The active * thumbnail carries a solid frame that slides to the next one; the rest drop * to 60%. The first photo loads at once, the second is fetched early, and * the rest wait until they are next. * * Images are data, rendered as by default. Pass `renderImage` to use * your framework's image component instead; the gallery still decides which * one has priority and which load lazily. */ export interface GalleryImage { src: string alt: string srcSet?: string /** A larger file for the zoom and the full-screen view. Defaults to `src`. */ zoomSrc?: string /** A smaller file for the thumbnail. Defaults to `src`. */ thumbSrc?: string } export interface GalleryImageRenderProps { index: number /** The first photo: render with your framework's priority / preload. */ priority: boolean loading: "eager" | "lazy" sizes: string className: string } /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const /** Scrolls, without drawing a scrollbar. */ const NO_SCROLLBAR = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden" /** A mouse zooms; a finger swipes. Embla drags only for touch and pen. */ const touchOnly = (_api: unknown, event: MouseEvent | TouchEvent) => !("pointerType" in event) || (event as PointerEvent).pointerType !== "mouse" function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /* ─── context ──────────────────────────────────────────────────────────── */ export interface ProductGalleryContextValue { images: GalleryImage[] /** The photo on show. */ index: number setIndex: (index: number) => void /** "Vester Chelsea Boot" — names the gallery and its full-screen view. */ label: string /** Width over height of the main frame. */ aspectRatio: number sizes: string zoom: boolean expanded: boolean setExpanded: (expanded: boolean) => void loading: boolean renderImage: (image: GalleryImage, props: GalleryImageRenderProps) => React.ReactNode /** The furthest photo shown so far: the next one after it loads early. */ reached: number } /** Internal: the morph's anchor and the primitive's lifetime. */ interface GalleryInternals { frame: React.RefObject mounted: boolean closing: boolean finishClose: () => void } const ProductGalleryContext = React.createContext(null) const InternalsContext = React.createContext(null) export function useProductGallery() { const context = React.useContext(ProductGalleryContext) if (!context) { throw new Error("useProductGallery must be used within .") } return context } function useInternals() { const context = React.useContext(InternalsContext) if (!context) throw new Error("Product gallery parts must be used within .") return context } function defaultRenderImage(image: GalleryImage, props: GalleryImageRenderProps) { return ( // eslint-disable-next-line @next/next/no-img-element -- framework-free on purpose {image.alt}

) } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface ProductGalleryProps extends React.HTMLAttributes { images: GalleryImage[] /** Names the gallery for screen readers: the product's name. */ label?: string index?: number defaultIndex?: number onIndexChange?: (index: number) => void /** Width over height of the main frame. Defaults to 4 / 5. */ aspectRatio?: number /** The main photo's `sizes`. Defaults to half the screen from md up. */ sizes?: string /** Hover zoom with a mouse. Defaults to true. */ zoom?: boolean /** Render each photo with your own component — next/image, say. */ renderImage?: (image: GalleryImage, props: GalleryImageRenderProps) => React.ReactNode loading?: boolean } export function ProductGallery({ images, label = "Product images", index: indexProp, defaultIndex = 0, onIndexChange, aspectRatio = 4 / 5, sizes = "(min-width: 768px) 50vw, 100vw", zoom = true, renderImage = defaultRenderImage, loading = false, className, children, ...props }: ProductGalleryProps) { const [rawIndex, setIndexState] = useControllableState(indexProp, defaultIndex, onIndexChange) const last = Math.max(0, images.length - 1) const index = Math.min(Math.max(0, rawIndex), last) // The furthest photo reached; the one after it is fetched early. const [reached, setReached] = React.useState(index) if (index > reached) setReached(index) // A new set of photos — another colour — starts again from the first. // In an effect: a controlled parent's onIndexChange must not run mid-render. const firstSrc = images[0]?.src const shownSet = React.useRef(firstSrc) React.useEffect(() => { if (shownSet.current === firstSrc) return shownSet.current = firstSrc setIndexState(0) }, [firstSrc, setIndexState]) // Full screen: `expanded` is what the shopper asked for; `mounted` keeps the // dialog on screen while it folds back into the photo. const [expanded, setExpandedState] = React.useState(false) const [mounted, setMounted] = React.useState(false) if (expanded && !mounted) setMounted(true) const closing = mounted && !expanded const frame = React.useRef(null) const indexRef = React.useRef(0) // The dialog opens from the photo, not from a trigger, so the primitive has // nothing to hand focus back to: return it to the photo now on show. const finishClose = React.useCallback(() => { setMounted(false) window.requestAnimationFrame(() => { frame.current ?.querySelectorAll('[data-slot="carousel-item"] button') [indexRef.current]?.focus({ preventScroll: true }) }) }, []) const setIndex = React.useCallback( (next: number) => setIndexState(Math.min(Math.max(0, next), last)), [setIndexState, last] ) React.useEffect(() => { indexRef.current = index }, [index]) const context = React.useMemo( () => ({ images, index, setIndex, label, aspectRatio, sizes, zoom, expanded, setExpanded: setExpandedState, loading, renderImage, reached, }), [images, index, setIndex, label, aspectRatio, sizes, zoom, expanded, loading, renderImage, reached] ) const internals = React.useMemo( () => ({ frame, mounted, closing, finishClose }), [mounted, closing, finishClose] ) return (

{children ?? ( <> )}

{mounted ? : null} ) } /* ─── main ─────────────────────────────────────────────────────────────── */ /** * The main photo, on your shadcn Carousel: swipe on touch, the arrows over * its edges, the arrow keys once it has focus. A mouse over it zooms where it * points. Pressing it opens the photo full screen. */ export function ProductGalleryMain({ className, ...props }: React.HTMLAttributes) { const { images, index, setIndex, label, aspectRatio, loading, setExpanded } = useProductGallery() const { frame } = useInternals() const [api, setApi] = React.useState() // The carousel follows the index — a thumbnail, the full-screen view, a // controlled prop — and the index follows the carousel — a swipe, a key. React.useEffect(() => { if (!api) return const onSelect = () => setIndex(api.selectedScrollSnap()) api.on("select", onSelect) return () => { api.off("select", onSelect) } }, [api, setIndex]) React.useEffect(() => { if (api && api.selectedScrollSnap() !== index) api.scrollTo(index) }, [api, index]) if (loading) { return (

) } if (!images.length) { return (

No photos yet

) } const image = images[index] return (

{images.map((img, i) => ( setExpanded(true)} /> ))} {images.length > 1 ? ( <> ) : null} {images.length > 1 ? ( {index + 1} / {images.length} ) : null} {/* Read out on every change: which photo, and what it shows. */} {`Image ${index + 1} of ${images.length}: ${image?.alt ?? ""}`}

) } /** * One photo: a button that opens the full-screen view, and — with a mouse — * a zoom that follows the pointer. The larger file fades in over the photo * once it has loaded. */ function GallerySlide({ image, index, onOpen }: { image: GalleryImage; index: number; onOpen: () => void }) { const { aspectRatio, sizes, zoom, renderImage, reached, images } = useProductGallery() const reduce = useReducedMotion() const surface = React.useRef(null) const [zoomed, setZoomed] = React.useState(false) const [sharp, setSharp] = React.useState(false) const zoomSrc = image.zoomSrc ?? image.src const canZoom = zoom && !reduce const aim = (event: React.PointerEvent) => { const node = surface.current if (!node) return const box = event.currentTarget.getBoundingClientRect() const x = ((event.clientX - box.left) / box.width) * 100 const y = ((event.clientY - box.top) / box.height) * 100 node.style.transformOrigin = `${x}% ${y}%` } return ( ) } /* ─── thumbnails ───────────────────────────────────────────────────────── */ /** * The thumbnails: a column beside the photo from md up, a row under it on a * phone, scrolling without a scrollbar. The active one has a solid frame * that slides to the next; the rest sit at 60%, not greyed out. */ export function ProductGalleryThumbs({ className, ...props }: React.HTMLAttributes) { const { images, index, setIndex, label, aspectRatio, loading } = useProductGallery() const reduce = useReducedMotion() const scope = React.useId() const rail = React.useRef(null) // Keep the active thumbnail in view — by scrolling the rail itself, never // the page, as scrollIntoView would. React.useEffect(() => { const node = rail.current const active = node?.querySelector('[aria-current="true"]') if (!node || !active) return const vertical = node.scrollHeight > node.clientHeight && node.scrollWidth <= node.clientWidth if (vertical) { const top = active.offsetTop - node.offsetTop if (top < node.scrollTop || top + active.offsetHeight > node.scrollTop + node.clientHeight) { node.scrollTo({ top: top - node.clientHeight / 2 + active.offsetHeight / 2, behavior: reduce ? "auto" : "smooth" }) } } else { const left = active.offsetLeft - node.offsetLeft if (left < node.scrollLeft || left + active.offsetWidth > node.scrollLeft + node.clientWidth) { node.scrollTo({ left: left - node.clientWidth / 2 + active.offsetWidth / 2, behavior: reduce ? "auto" : "smooth" }) } } }, [index, reduce]) if (loading) { return (

{Array.from({ length: 4 }, (_, i) => ( ))}

) } if (images.length < 2) return null return (

{images.map((image, i) => { const active = i === index return ( ) })}

) } /* ─── full screen ──────────────────────────────────────────────────────── */ /** * The full-screen view, on your shadcn Dialog. It grows out of the main * photo — the photo's box opening to the screen, the image fading in once it * has — and folds back into it on close. Swipe, the arrows or the arrow keys * move between photos, and the main photo follows. */ function ProductGalleryLightbox() { const { images, index, setIndex, label, expanded, setExpanded } = useProductGallery() const [api, setApi] = React.useState() React.useEffect(() => { if (!api) return const onSelect = () => setIndex(api.selectedScrollSnap()) api.on("select", onSelect) return () => { api.off("select", onSelect) } }, [api, setIndex]) React.useEffect(() => { if (api && api.selectedScrollSnap() !== index) api.scrollTo(index) }, [api, index]) return ( ) } /** The rectangle `anchor` occupies inside the viewport, as a clip-path inset. */ function insetOf(anchor: HTMLElement | null) { const box = anchor?.getBoundingClientRect() if (!box || box.width === 0) return null const w = window.innerWidth const h = window.innerHeight return `inset(${box.top}px ${w - box.right}px ${h - box.bottom}px ${box.left}px)` } /** * The visible surface, and the morph: clipped to the main photo's box, it * opens to the full screen; its contents fade in once it has. Closing runs * it back into the photo. In a layout effect inside the portal, so the first * frame is already clipped — it never flashes full screen. */ function LightboxPanel({ children }: { children: React.ReactNode }) { const { frame, closing, finishClose } = useInternals() const reduce = useReducedMotion() const surface = React.useRef(null) const contents = React.useRef(null) React.useLayoutEffect(() => { const panel = surface.current const inner = contents.current if (!panel || !inner) return const overlay = panel .closest('[data-slot="dialog-content"]') ?.parentElement?.querySelector(':scope > [data-slot="dialog-overlay"]') const running: AnimationPlaybackControls[] = [] let cancelled = false const from = reduce ? null : insetOf(frame.current) if (!closing) { if (from) { panel.style.clipPath = from inner.style.opacity = "0" running.push( animate(panel, { clipPath: [from, "inset(0px 0px 0px 0px)"] }, MORPH), animate(inner, { opacity: 1 }, { duration: 0.25, delay: 0.2, ease: "easeOut" }) ) } else { panel.style.opacity = "0" running.push(animate(panel, { opacity: 1 }, { duration: 0.15 })) } return () => { cancelled = true running.forEach((a) => a.stop()) } } running.push(animate(inner, { opacity: 0 }, { duration: 0.12, ease: "easeIn" })) if (from) { running.push(animate(panel, { clipPath: from }, { ...MORPH, duration: 0.38, delay: 0.06 })) } else { running.push(animate(panel, { opacity: 0 }, { duration: 0.15 })) } if (overlay) running.push(animate(overlay, { opacity: 0 }, { duration: 0.3, delay: 0.1 })) // Should a frame never come (a background tab), close anyway. const fallback = window.setTimeout(() => !cancelled && finishClose(), 800) Promise.all(running.map((a) => a.finished)).then(() => { window.clearTimeout(fallback) if (!cancelled) finishClose() }) return () => { cancelled = true window.clearTimeout(fallback) running.forEach((a) => a.stop()) } // Runs on open and on close; `reduce` is read, not watched. // eslint-disable-next-line react-hooks/exhaustive-deps }, [closing]) return (

{children}

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["carousel","dialog"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/product-gallery/product-gallery.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/product-gallery.tsx"}],"className":"h-[70svh] min-h-80"}]]}]