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:T184a,"use client" import * as React from "react" import { flushSync } from "react-dom" import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { IconPhotoOff } from "@tabler/icons-react" import { cn } from "cn" import { Skeleton } from "@/components/ui/skeleton" type AspectRatioValue = number | `${number}/${number}` | `${number}:${number}` type MediaState = "loading" | "loaded" | "error" type AspectRatioProps = useRender.ComponentProps<"div"> & { ratio?: AspectRatioValue placeholder?: boolean fallback?: React.ReactNode } const mediaSelector = ":scope > img, :scope > picture > img, :scope > video" function parseAspectRatio(ratio: AspectRatioValue | undefined) { if (ratio === undefined) { return 1 } let value = Number.NaN if (typeof ratio === "number") { value = ratio } else { const trimmed = ratio.trim() const pair = trimmed.match(/^(\d*\.?\d+)\s*[/:]\s*(\d*\.?\d+)$/) if (pair) { value = Number(pair[1]) / Number(pair[2]) } else if (/^\d*\.?\d+$/.test(trimmed)) { value = Number(trimmed) } } if (!Number.isFinite(value) || value <= 0) { if (process.env.NODE_ENV !== "production") { console.warn( `AspectRatio: invalid ratio ${JSON.stringify(ratio)}, falling back to 1.` ) } return 1 } return value } function readMediaState(media: Element): MediaState { if (media instanceof HTMLImageElement) { if (!media.getAttribute("src") && !media.getAttribute("srcset")) { return "loading" } if (!media.complete) { return "loading" } return media.naturalWidth > 0 ? "loaded" : "error" } if (media instanceof HTMLVideoElement) { if ( media.error || media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE ) { return "error" } return media.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA ? "loaded" : "loading" } return "loaded" } function useMediaState( containerRef: React.RefObject, enabled: boolean ) { const [state, setState] = React.useState(null) React.useLayoutEffect(() => { const container = containerRef.current if (!enabled || !container) { return } const findMedia = () => container.querySelector(mediaSelector) const sync = () => { const media = findMedia() setState(media ? readMediaState(media) : null) } const isOwn = (target: EventTarget | null) => { const media = findMedia() return ( media !== null && (target === media || (target instanceof HTMLSourceElement && target.parentElement === media)) ) } const handleLoad = (event: Event) => { if (isOwn(event.target)) { setState("loaded") } } const handleError = (event: Event) => { if (isOwn(event.target)) { setState("error") } } container.addEventListener("load", handleLoad, true) container.addEventListener("loadeddata", handleLoad, true) container.addEventListener("error", handleError, true) const observer = new MutationObserver(() => flushSync(sync)) observer.observe(container, { childList: true, subtree: true, attributes: true, attributeFilter: ["src", "srcset"], }) sync() return () => { container.removeEventListener("load", handleLoad, true) container.removeEventListener("loadeddata", handleLoad, true) container.removeEventListener("error", handleError, true) observer.disconnect() setState(null) } }, [containerRef, enabled]) return enabled ? state : null } function AspectRatio({ ratio, placeholder = true, fallback = , className, style, render, ref, children, ...props }: AspectRatioProps) { const containerRef = React.useRef(null) const value = React.useMemo(() => parseAspectRatio(ratio), [ratio]) const state = useMediaState(containerRef, placeholder) return useRender({ defaultTagName: "div", render, ref: ref ? [containerRef, ref] : containerRef, props: mergeProps<"div">( { ...({ "data-slot": "aspect-ratio" } as Record), className: cn( "relative aspect-(--ratio) w-full [&>:is(img,video)]:object-cover [&>:is(img,video,iframe,picture)]:absolute [&>:is(img,video,iframe,picture)]:inset-0 [&>:is(img,video,iframe,picture)]:size-full [&>:is(img,video,iframe,picture)]:rounded-[inherit] [&>picture>img]:size-full [&>picture>img]:rounded-[inherit] [&>picture>img]:object-cover", "[&>:is(img,video,picture)]:transition-opacity [&>:is(img,video,picture)]:duration-300 [&>:is(img,video,picture)]:ease-out-quint data-[state=error]:[&>:is(img,video,picture)]:opacity-0 data-[state=loading]:[&>:is(img,video,picture)]:opacity-0 motion-reduce:[&>:is(img,video,picture)]:transition-none", className ), style: { ...style, "--ratio": value } as React.CSSProperties, children: ( <> {state === "loading" || state === "error" ? ( ) : null} {children} {state === "error" && fallback !== null ? ( ) : null} ), "aria-busy": state === "loading" || undefined, }, props, { "data-state": state ?? undefined, } as Record ), }) } export { AspectRatio, parseAspectRatio } export type { AspectRatioProps, AspectRatioValue } 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","@base-ui/react@^1.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.8.0"}]]}]}],["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","li","cn",{"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"}]]}]}]]}],["$","$L51",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json","https://hextaui.com/r/skeleton.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"components/ui/aspect-ratio.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]