60: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"] 61: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"] 62:T80d,"use client"; import { useLayoutEffect, useRef, useState, type HTMLAttributes } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { ArcImage } from "../lib/arc-provider"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./avatar.module.css"; export interface AvatarProps extends HTMLAttributes { name: string; src?: string; size?: "sm" | "md" | "lg" | "xl"; status?: "online" | "offline" } export function Avatar({ name, src, size = "md", status, className, ...props }: AvatarProps) { const initials = name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join(""); const reduceMotion = !!useReducedMotion(); const image = useRef(null); const [failedSrc, setFailedSrc] = useState(); // A photo that is already decoded shows at once. One that is still loading waits, then fades in from a soft blur. useLayoutEffect(() => { const node = image.current; if (node && !node.complete) node.dataset.loading = ""; }, [src]); const showImage = src && failedSrc !== src; return {showImage ? { delete event.currentTarget.dataset.loading; }} onError={() => setFailedSrc(src)} /> : } {status && ; } 63:T6ce,.avatar { position: relative; display: inline-grid; flex: 0 0 auto; place-items: center; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; } .avatar img { pointer-events: none; border-radius: inherit; object-fit: cover; transition: opacity var(--duration-standard) var(--ease-enter), filter var(--duration-standard) var(--ease-enter); } /* Set only while a photo is still downloading after mount, so cached photos never fade. */ .avatar img[data-loading] { opacity: 0; filter: blur(4px); transition: none; } .fallback { animation: avatar-fallback-in var(--duration-standard) var(--ease-enter) both; } .sm { width: 28px; height: 28px; font-size: 10px; } .md { width: 36px; height: 36px; } .lg { width: 48px; height: 48px; font-size: var(--text-sm); } .xl { width: 88px; height: 88px; font-size: var(--text-xl); } .status { position: absolute; right: 0; bottom: 0; z-index: 2; width: 10px; height: 10px; border: 2px solid var(--surface); border-radius: var(--radius-pill); box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent); } .sm .status { width: 8px; height: 8px; border-width: 1.5px; } .lg .status { width: 12px; height: 12px; } .xl .status { width: 14px; height: 14px; right: 4px; bottom: 4px; } .online { background: var(--success); } .offline { background: var(--text-muted); } @keyframes avatar-fallback-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .avatar img { transition: none; } .avatar img[data-loading] { filter: none; } .fallback { animation: none; } } 64:T1099,"use client"; /** * Lets an app swap the link and image elements Arc components render (kuratlielia/arc-library#13). * * Without a provider, Arc renders a plain `` and ``, so components work in any React app (Vite, Remix, Astro, * plain React). Wrap the app once to use your framework's or your own components instead: * * import Link from "next/link"; * import Image from "next/image"; * import { ArcProvider } from "@/components/arc/lib/arc-provider"; * * {children} * * Any component that accepts these props works, such as a locale-aware Link from next-intl or a React Router Link * wrapped to map `href` to `to`. */ import { createContext, createElement, useContext, useMemo, type AnchorHTMLAttributes, type ComponentType, type ImgHTMLAttributes, type ReactNode, type Ref } from "react"; /** The props Arc passes to a link: an href plus ordinary anchor attributes. */ export interface ArcLinkProps extends AnchorHTMLAttributes { href: string; ref?: Ref; } /** * The props Arc passes to an image. A subset of next/image's props, so next/image can be passed as is: either `fill` * (cover the positioned parent) or `width` and `height`, plus `sizes` and `priority` as hints. */ export interface ArcImageProps extends Omit, "src" | "alt" | "width" | "height" | "loading" | "srcSet"> { src: string; alt: string; width?: number; height?: number; /** Fills the nearest positioned parent, like next/image's `fill`. */ fill?: boolean; /** Loads the image eagerly with high priority, like next/image's `priority`. */ priority?: boolean; loading?: "eager" | "lazy"; ref?: Ref; } export type ArcLinkComponent = ComponentType; export type ArcImageComponent = ComponentType; /** The default link: a plain anchor. */ export function ArcAnchor(props: ArcLinkProps) { return ; } const fillStyle = { position: "absolute", inset: 0, width: "100%", height: "100%" } as const; /** The default image: a plain, lazily decoded `` that understands `fill` and `priority`. */ export function ArcImg({ alt, fill, priority, loading, style, ...props }: ArcImageProps) { // eslint-disable-next-line @next/next/no-img-element -- the framework-free default; pass next/image through ArcProvider instead. return {alt}

; } interface ArcComponents { link: ArcLinkComponent; image: ArcImageComponent; } const ArcContext = createContext({ link: ArcAnchor, image: ArcImg }); export interface ArcProviderProps { /** The link component Arc renders for navigation, such as next/link or your own wrapped Link. Defaults to ``. */ link?: ArcLinkComponent; /** The image component Arc renders for photos, such as next/image. Defaults to ``. */ image?: ArcImageComponent; children: ReactNode; } /** Sets the link and image components for every Arc component inside it. Nested providers inherit what they do not set. */ export function ArcProvider({ link, image, children }: ArcProviderProps) { const parent = useContext(ArcContext); const value = useMemo(() => ({ link: link ?? parent.link, image: image ?? parent.image }), [link, image, parent]); return {children}; } /** The link component from the nearest ArcProvider, or a plain anchor. */ export const useArcLink = () => useContext(ArcContext).link; /** The image component from the nearest ArcProvider, or a plain img. */ export const useArcImage = () => useContext(ArcContext).image; /** What Arc components render for a link: the provider's link component, or a plain anchor. */ export function ArcLink(props: ArcLinkProps) { return createElement(useArcLink(), props); } /** What Arc components render for an image: the provider's image component, or a plain img. */ export function ArcImage(props: ArcImageProps) { return createElement(useArcImage(), props); } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/components/avatar/avatar.tsx","content":"$62","type":"registry:component","target":"@components/arc/avatar/avatar.tsx"},{"path":"registry/components/avatar/avatar.module.css","content":"$63","type":"registry:component","target":"@components/arc/avatar/avatar.module.css"},{"path":"lib/arc-provider.tsx","content":"$64","type":"registry:lib","target":"@components/arc/lib/arc-provider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]