58: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"] 59:T1c40,"use client"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { AnimatePresence, motion, usePresenceData, useReducedMotion, type Transition } from "motion/react"; import Image from "next/image"; import * as React from "react"; import { CloseButton } from "@/components/ui/close-button"; import { chewyEase, overlayMotion, useAnimatedOpen } from "@/lib/motion"; import { cn } from "@/lib/utils"; const OPEN_RADIUS = 16; type Box = { left: number; top: number; width: number; height: number; borderRadius: number }; type Preview = { src: string; aspect: number }; function measure(element: HTMLElement): Box { const rect = element.getBoundingClientRect(); const borderRadius = Math.min(parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0, rect.width / 2); return { left: rect.left, top: rect.top, width: rect.width, height: rect.height, borderRadius }; } function fit(aspect: number, viewport: { width: number; height: number }, round: boolean): Box { const phone = viewport.width < 640; const cap = round ? 480 : 1000; const maxWidth = Math.min(phone ? viewport.width - 32 : viewport.width * 0.7, cap); const maxHeight = Math.min(phone ? viewport.height - 160 : viewport.height * 0.7, cap); const width = Math.max(Math.min(maxWidth, maxHeight * aspect), 0); const height = width / aspect; return { left: (viewport.width - width) / 2, top: (viewport.height - height) / 2, width, height, borderRadius: round ? width / 2 : OPEN_RADIUS, }; } function ImageLightbox({ src, alt, unoptimized, round = false, label = "View full size", className, children, }: { src: string; alt: string; unoptimized?: boolean; round?: boolean; label?: string; className?: string; children: React.ReactNode; }) { const triggerRef = React.useRef(null); const { open, setOpen, radixOpen, onExitComplete } = useAnimatedOpen(undefined, false, undefined); const [origin, setOrigin] = React.useState(null); const [preview, setPreview] = React.useState({ src, aspect: 1 }); const onOpenChange = (next: boolean) => { const trigger = triggerRef.current; if (next && trigger) { const thumbnail = trigger.querySelector("img"); setPreview({ src: thumbnail?.currentSrc || src, aspect: thumbnail?.naturalWidth ? thumbnail.naturalWidth / thumbnail.naturalHeight : 1, }); } setOrigin(trigger?.isConnected ? measure(trigger) : null); setOpen(next); }; return ( {children} {open && ( onOpenChange(false)} /> )} ); } function LightboxView({ src, alt, unoptimized, round = false, origin, preview, onClose, }: { src: string; alt: string; unoptimized?: boolean; round?: boolean; origin: Box | null; preview: Preview; onClose: () => void; }) { const reduceMotion = useReducedMotion(); const exitOrigin = usePresenceData() as Box | null | undefined; const imageRef = React.useRef(null); const [aspect, setAspect] = React.useState(preview.aspect); const [loaded, setLoaded] = React.useState(false); const [viewport, setViewport] = React.useState(() => ({ width: window.innerWidth, height: window.innerHeight })); React.useEffect(() => { const onResize = () => setViewport({ width: window.innerWidth, height: window.innerHeight }); window.addEventListener("resize", onResize); return () => window.removeEventListener("resize", onResize); }, []); const target = fit(aspect, viewport, round); const transition: Transition = reduceMotion ? { duration: 0.2 } : { duration: 0.4, ease: chewyEase }; const from = origin && !reduceMotion ? origin : { ...target, opacity: 0 }; const to = exitOrigin && !reduceMotion ? exitOrigin : { ...target, opacity: 0 }; return ( { if (!imageRef.current?.contains(event.target as Node) && !(event.target as Element).closest("button")) onClose(); }} className="fixed inset-0 z-50 outline-none" >

{ const image = event.currentTarget; if (image.naturalWidth) setAspect(image.naturalWidth / image.naturalHeight); setLoaded(true); }} className="object-cover" /> {alt} ); } export { ImageLightbox }; 5a:Tdc4,"use client"; import * as React from "react"; import { useControllableState } from "@/hooks/use-controllable-state"; import type { MotionProps, Transition } from "motion/react"; export const chewyEase = [0.32, 0.72, 0, 1] as const; export const growTransition = { duration: 0.6, ease: chewyEase }; const springIn: Transition = { type: "spring", bounce: 0.2, duration: 0.3 }; const quickOut: Transition = { duration: 0.12, ease: "easeIn" }; export const popMotion = { initial: { opacity: 0, scale: 0.96 }, animate: { opacity: 1, scale: 1, transition: springIn }, exit: { opacity: 0, scale: 0.96, transition: quickOut }, }; export const tooltipMotion = { initial: { opacity: 0, scale: 0.94 }, animate: { opacity: 1, scale: 1, transition: { ...springIn, duration: 0.2 } }, exit: { opacity: 0, scale: 0.94, transition: { duration: 0.08 } }, }; export const dialogMotion = { initial: { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0, transition: { type: "spring", bounce: 0.25, duration: 0.4 } as Transition }, exit: { opacity: 0, scale: 0.97, y: 4, transition: { duration: 0.15, ease: "easeIn" } as Transition }, }; export const overlayMotion = { initial: { opacity: 0 }, animate: { opacity: 1, transition: { duration: 0.2 } }, exit: { opacity: 0, transition: { duration: 0.15 } }, }; export type PanelSide = "top" | "right" | "bottom" | "left"; export function panelMotion(side: PanelSide): Pick { const offscreen = side === "left" || side === "top" ? "calc(-100% - 1rem)" : "calc(100% + 1rem)"; const horizontal = side === "left" || side === "right"; const hidden = horizontal ? { x: offscreen } : { y: offscreen }; const shown = horizontal ? { x: 0 } : { y: 0 }; return { initial: hidden, animate: { ...shown, transition: { duration: 0.45, ease: chewyEase } }, exit: { ...hidden, transition: { duration: 0.3, ease: chewyEase } }, }; } export function useAnimatedOpen( openProp: boolean | undefined, defaultOpen: boolean | undefined, onOpenChange: ((open: boolean) => void) | undefined, ) { const [open, setOpen] = useControllableState(openProp, defaultOpen ?? false, onOpenChange); const [exiting, setExiting] = React.useState(false); const [wasOpen, setWasOpen] = React.useState(open); if (open !== wasOpen) { setWasOpen(open); setExiting(!open); } const onExitComplete = React.useCallback(() => setExiting(false), []); return { open, setOpen, radixOpen: open || exiting, onExitComplete }; } type AnimatedOpenState = { open: boolean; onExitComplete: () => void }; type OpenProps = { open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void }; export function createAnimatedRoot

(Primitive: React.ComponentType

, slot: string) { const Context = React.createContext({ open: false, onExitComplete: () => {} }); function AnimatedRoot({ open: openProp, defaultOpen, onOpenChange, ...props }: P) { const { open, setOpen, radixOpen, onExitComplete } = useAnimatedOpen(openProp, defaultOpen, onOpenChange); const value = React.useMemo(() => ({ open, onExitComplete }), [open, onExitComplete]); const primitiveProps = { "data-slot": slot, ...props, open: radixOpen, onOpenChange: setOpen } as unknown as P; return React.createElement(Context.Provider, { value }, React.createElement(Primitive, primitiveProps)); } return [AnimatedRoot, () => React.useContext(Context)] as const; } 57:["$","$L58",null,{"files":[{"path":"components/ui/image-lightbox.tsx","content":"$59","type":"registry:ui"},{"path":"components/ui/close-button.tsx","content":"\"use client\";\n\nimport { XClose } from \"@untitledui/icons\";\nimport { motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction CloseButton({ className, ...props }: React.ComponentProps) {\n return (\n \n \n Close\n \n );\n}\n\nexport { CloseButton };\n","type":"registry:ui"},{"path":"lib/motion.ts","content":"$5a","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","content":"import * as React from \"react\";\n\nexport function useControllableState(prop: T | undefined, defaultProp: T, onChange?: (value: T) => void) {\n const [uncontrolled, setUncontrolled] = React.useState(defaultProp);\n const isControlled = prop !== undefined;\n const value = isControlled ? prop : uncontrolled;\n\n const setValue = React.useCallback(\n (next: T) => {\n if (!isControlled) setUncontrolled(next);\n onChange?.(next);\n },\n [isControlled, onChange],\n );\n\n return [value, setValue] as const;\n}\n","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]