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/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"] 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/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"] 52:T21ca,"use client" import type React from "react" import { Children, createContext, isValidElement, use, useEffect, useEffectEvent, useReducer, useRef, } from "react" import { twMerge } from "cn" import { ImageOffIcon } from "lucide-react" import { Skeleton } from "./skeleton" import { Text } from "./text" type AsyncImageStatus = "loading" | "loaded" | "error" type AsyncImageLazyLoad = false | IntersectionObserverInit interface AsyncImageState { status: AsyncImageStatus } type AsyncImageEvent = | { type: "RESET" } | { type: "LOAD_SUCCESS" } | { type: "LOAD_ERROR" } const DEFAULT_LAZY_LOAD_OPTIONS: IntersectionObserverInit = { threshold: 0.01, rootMargin: "75%", } interface AsyncImageSizeProps { width: number | string height: number | string } type AsyncImageRootImgProps = Omit< React.ImgHTMLAttributes, "src" | "alt" | "width" | "height" > interface AsyncImageRootProps extends Omit, "children">, AsyncImageSizeProps { src: string alt?: string children?: React.ReactNode imgProps?: AsyncImageRootImgProps loadingDelayMs?: number lazyLoad?: AsyncImageLazyLoad onLoadingEnd?: () => void onErrorFallback?: () => void } interface AsyncImageContextValue extends AsyncImageSizeProps { src: string alt: string status: AsyncImageStatus imgProps?: AsyncImageRootImgProps } interface AsyncImageSlotProps extends Omit< React.ComponentProps<"div">, "children" > { children?: React.ReactNode } type AsyncImageContentProps = Omit< React.ComponentProps<"img">, "src" | "alt" | "width" | "height" > const AsyncImageContext = createContext(null) function useAsyncImageContext() { const context = use(AsyncImageContext) if (!context) { throw new Error( "AsyncImage compound components must be used inside AsyncImage.Root." ) } return context } function AsyncImageLoading({ children, className, ...props }: AsyncImageSlotProps) { const { status } = useAsyncImageContext() if (status !== "loading") { return null } return (

{children ?? ( )}

) } function AsyncImageError({ children, className, ...props }: AsyncImageSlotProps) { const { status } = useAsyncImageContext() if (status !== "error") { return null } return (

{children ?? ( <> Image unavailable )}

) } function AsyncImageContent({ className, ...props }: AsyncImageContentProps) { const { src, alt, status, width, height, imgProps } = useAsyncImageContext() if (status !== "loaded") { return null } const imageClassName = twMerge( "size-full object-cover rounded-md border border-border/60", imgProps?.className, className ) return ( {alt}

) } function transitionAsyncImageState( state: AsyncImageState, event: AsyncImageEvent ): AsyncImageState { switch (event.type) { case "RESET": { return { status: "loading" } } case "LOAD_SUCCESS": { if (state.status === "loaded") { return state } return { status: "loaded" } } case "LOAD_ERROR": { if (state.status === "error") { return state } return { status: "error" } } default: { return state } } } function AsyncImageRoot({ src, alt = "", width, height, children, imgProps, loadingDelayMs = 0, lazyLoad = DEFAULT_LAZY_LOAD_OPTIONS, onLoadingEnd, onErrorFallback, className, style, ...props }: AsyncImageRootProps) { const [state, dispatch] = useReducer(transitionAsyncImageState, { status: "loading", }) const rootRef = useRef(null) const onLoadingEndEvent = useEffectEvent(() => onLoadingEnd?.()) const onErrorFallbackEvent = useEffectEvent(() => onErrorFallback?.()) useEffect(() => { if (!src) { dispatch({ type: "LOAD_ERROR" }) onErrorFallbackEvent() return } dispatch({ type: "RESET" }) let isCancelled = false let isSettled = false let hasStartedLoad = false let timeoutId: ReturnType | null = null let intersectionObserver: IntersectionObserver | null = null const preloadImage = new Image() const normalizedDelay = Math.max(loadingDelayMs, 0) const settle = (nextStatus: AsyncImageStatus) => { if (isCancelled || isSettled) { return } isSettled = true const applyStatus = () => { if (isCancelled) { return } dispatch({ type: nextStatus === "loaded" ? "LOAD_SUCCESS" : "LOAD_ERROR", }) if (nextStatus === "loaded") { onLoadingEndEvent() } else { onErrorFallbackEvent() } } if (nextStatus === "loaded" && normalizedDelay > 0) { timeoutId = setTimeout(() => { applyStatus() }, normalizedDelay) return } applyStatus() } const startImageLoad = () => { if (hasStartedLoad) { return } hasStartedLoad = true preloadImage.src = src preloadImage .decode() .then(() => { settle("loaded") }) .catch(() => { if (preloadImage.complete && preloadImage.naturalWidth > 0) { settle("loaded") return } settle("error") }) } if ( lazyLoad !== false && typeof window !== "undefined" && rootRef.current ) { const observedElement = rootRef.current const observerOptions = { ...DEFAULT_LAZY_LOAD_OPTIONS, ...lazyLoad, } intersectionObserver = new IntersectionObserver((entries) => { const isVisible = entries.some( (entry) => entry.isIntersecting || entry.intersectionRatio > 0 ) if (!isVisible) { return } startImageLoad() intersectionObserver?.unobserve(observedElement) intersectionObserver?.disconnect() intersectionObserver = null }, observerOptions) intersectionObserver.observe(observedElement) } else { startImageLoad() } return () => { isCancelled = true if (timeoutId) { clearTimeout(timeoutId) } intersectionObserver?.disconnect() } }, [lazyLoad, loadingDelayMs, src]) const contextValue: AsyncImageContextValue = { src, alt, status: state.status, width, height, imgProps, } const slotFlags = Children.toArray(children).reduce( (flags, child) => { if (!isValidElement(child)) { return flags } if (child.type === AsyncImageLoading) { flags.hasLoadingSlot = true return flags } if (child.type === AsyncImageError) { flags.hasErrorSlot = true return flags } if (child.type === AsyncImageContent) { flags.hasContentSlot = true } return flags }, { hasLoadingSlot: false, hasErrorSlot: false, hasContentSlot: false, } ) return (

{!slotFlags.hasLoadingSlot && } {!slotFlags.hasErrorSlot && } {!slotFlags.hasContentSlot && } {children}

) } const AsyncImage = { Root: AsyncImageRoot, Loading: AsyncImageLoading, Error: AsyncImageError, Content: AsyncImageContent, } export { AsyncImage } export type { AsyncImageContentProps, AsyncImageRootProps, AsyncImageSlotProps, AsyncImageStatus, } 4f:["$","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","cn@^0.2.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn@^0.2.4"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@preskok","registryDependencies":["https://ui-three-mu.vercel.app/r/skeleton.json","https://ui-three-mu.vercel.app/r/text.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/async-image.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]