51: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/3j06ow7w40nxu.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"] 52: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/3j06ow7w40nxu.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"] 53:T2714,"use client"; /* eslint-disable @next/next/no-img-element */ import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion } from "motion/react"; import { X } from "lucide-react"; export interface DomeGalleryProps { images: string[]; /** Sphere radius in px (also the camera distance). */ radius?: number; /** Tiles around the full circle. */ columns?: number; /** Rows of tiles, centered on the horizon. */ rows?: number; /** Space between tiles as a fraction of their size. */ gap?: number; /** Idle rotation in degrees per second. 0 disables. */ autoRotate?: number; /** Degrees of rotation per px dragged. */ dragSensitivity?: number; /** Max up/down tilt in degrees. */ maxPitch?: number; /** Tile corner radius in px. */ tileRadius?: number; className?: string; } const toRad = Math.PI / 180; export function DomeGallery({ images, radius = 560, columns = 22, rows = 5, gap = 0.1, autoRotate = 4, dragSensitivity = 0.18, maxPitch = 22, tileRadius = 14, className, }: DomeGalleryProps) { const root = useRef(null); const sphere = useRef(null); const tileEls = useRef<(HTMLDivElement | null)[]>([]); const view = useRef({ yaw: 0, pitch: 0, vYaw: 0, vPitch: 0, hover: false, drag: null as null | { x: number; y: number; lx: number; ly: number; moved: boolean; tile: number }, }); const [open, setOpen] = useState(null); const openRef = useRef(open); const closeBtn = useRef(null); const dLon = 360 / columns; const size = 2 * radius * Math.sin((dLon / 2) * toRad) * (1 - gap); const tiles: { lon: number; lat: number; src: string }[] = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { // Stagger rows like bricks and spread images so neighbours differ. tiles.push({ lon: (c + (r % 2) * 0.5) * dLon, lat: (r - (rows - 1) / 2) * dLon, src: images[(c * 3 + r * 5) % images.length] ?? "" }); } } useEffect(() => { openRef.current = open; if (open !== null) closeBtn.current?.focus(); }, [open]); useEffect(() => { const el = root.current!; const v = view.current; const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches; let raf = 0; let last = performance.now(); let visible = true; let stopped = false; const shown: boolean[] = []; const frame = (now: number) => { // Observer callbacks can outlive cleanup; never touch the DOM after unmount. const sphereEl = sphere.current; if (stopped || !sphereEl) { raf = 0; return; } const dt = Math.min(0.05, (now - last) / 1000); last = now; if (!v.drag) { v.yaw += v.vYaw; v.pitch += v.vPitch; v.vYaw *= 0.93; v.vPitch *= 0.93; if (!reduce && !v.hover && openRef.current === null && Math.abs(v.vYaw) < 0.05) v.yaw -= autoRotate * dt; // Spring the pitch back inside its limits. const lim = Math.max(-maxPitch, Math.min(maxPitch, v.pitch)); v.pitch += (lim - v.pitch) * 0.15; } sphereEl.style.transform = `translateZ(${radius}px) rotateX(${v.pitch}deg) rotateY(${v.yaw}deg)`; const sp = Math.sin(v.pitch * toRad); const cp = Math.cos(v.pitch * toRad); for (let i = 0; i < tiles.length; i++) { const t = tiles[i]; const el = tileEls.current[i]; if (!el) continue; // How directly the tile faces the camera (1 = dead ahead, <0 = behind). const facing = Math.cos(t.lat * toRad) * Math.cos((t.lon + v.yaw) * toRad) * cp - Math.sin(t.lat * toRad) * sp; const on = facing > 0.2; if (on !== shown[i]) { shown[i] = on; el.style.visibility = on ? "visible" : "hidden"; } if (on) el.style.opacity = String(Math.min(1, (facing - 0.2) * 2.2)); } raf = visible ? requestAnimationFrame(frame) : 0; }; const start = () => { if (!raf && visible && !stopped) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const io = new IntersectionObserver(([e]) => { visible = e.isIntersecting; start(); }); io.observe(el); start(); return () => { stopped = true; cancelAnimationFrame(raf); io.disconnect(); }; // tiles is derived from the props below. // eslint-disable-next-line react-hooks/exhaustive-deps }, [radius, columns, rows, autoRotate, maxPitch, images]); const frontTile = () => { const v = view.current; let best = 0; let bestScore = -Infinity; tiles.forEach((t, i) => { const s = Math.cos((t.lon + v.yaw) * toRad) * Math.cos((t.lat + v.pitch) * toRad); if (s > bestScore) { bestScore = s; best = i; } }); return best; }; const close = () => { setOpen(null); root.current?.focus(); }; return (

{ const v = view.current; if (open !== null) { if (e.key === "Escape") close(); return; } if (e.key === "ArrowLeft") v.vYaw = dLon * 0.07; else if (e.key === "ArrowRight") v.vYaw = -dLon * 0.07; else if (e.key === "ArrowUp") v.vPitch = -dLon * 0.05; else if (e.key === "ArrowDown") v.vPitch = dLon * 0.05; else if (e.key === "Enter" || e.key === " ") setOpen(frontTile()); else return; e.preventDefault(); }} onPointerEnter={() => (view.current.hover = true)} onPointerLeave={() => (view.current.hover = false)} onPointerDown={(e) => { if (open !== null) return; const tile = (e.target as HTMLElement).closest("[data-tile]"); e.currentTarget.setPointerCapture(e.pointerId); view.current.drag = { x: e.clientX, y: e.clientY, lx: e.clientX, ly: e.clientY, moved: false, tile: tile ? Number(tile.dataset.tile) : -1 }; view.current.vYaw = view.current.vPitch = 0; }} onPointerMove={(e) => { const v = view.current; const d = v.drag; if (!d) return; const dx = e.clientX - d.lx; const dy = e.clientY - d.ly; d.lx = e.clientX; d.ly = e.clientY; if (Math.hypot(e.clientX - d.x, e.clientY - d.y) > 5) d.moved = true; v.yaw -= dx * dragSensitivity; v.pitch = Math.max(-maxPitch - 8, Math.min(maxPitch + 8, v.pitch + dy * dragSensitivity)); v.vYaw = -dx * dragSensitivity; v.vPitch = dy * dragSensitivity * 0.5; }} onPointerUp={() => { const d = view.current.drag; view.current.drag = null; if (d && !d.moved && d.tile >= 0) setOpen(d.tile); }} onPointerCancel={() => (view.current.drag = null)} className={`relative size-full cursor-grab touch-none select-none overflow-hidden outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring active:cursor-grabbing ${className ?? ""}`} >

{tiles.map((t, i) => (

{ tileEls.current[i] = el; }} className="absolute overflow-hidden bg-muted" style={{ width: size, height: size, left: -size / 2, top: -size / 2, borderRadius: tileRadius, backfaceVisibility: "hidden", visibility: "hidden", transform: `rotateY(${t.lon}deg) rotateX(${t.lat}deg) translateZ(${-radius}px)`, }} >

))}

{open !== null && ( )}

); } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/dome-gallery.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]