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:T2694,"use client"; import { blur, duration, ease } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { animate, useReducedMotion } from "motion/react"; import { Avatar as AvatarPrimitive } from "radix-ui"; import { type ComponentProps, createContext, type Ref, type RefObject, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react"; /* * An avatar on Radix Avatar (owner's roadmap, 2026-10-16: "A picture or initials, alone or in a group"), with * shadcn's parts: Avatar, AvatarImage, AvatarFallback, AvatarGroup and AvatarGroupCount ("+3"), in three sizes. * - Motion (.agents/rules/motion.md): once the picture has loaded, it comes in through the blur over the initials, * which stay underneath until it's sharp, so nothing pops or jumps. With reduced motion it only fades. * - Nothing animates on first paint: the picture comes in only when the avatar was on screen without it first * (rendered on the server, or still loading). A picture that's ready on the avatar's first paint just shows. * - The initials speak for the picture: while they stand in, they carry its alt as their name, so a screen reader * hears "Olivia Martin" whether or not the picture has loaded. With alt="" (a name beside it) they're hidden too. * - Radix mounts the img only once it has loaded, and drops its own fallback that moment. So the fallback here is * our own span, which the picture tells when it's fully in. * - In a group, a ring in the page's background colour separates the overlapping circles. The overlap follows the * size, and each covered avatar's initials centre in its visible part, so two letters are never cut. */ /** Where the picture is: not on screen, coming in over the initials, or fully in */ type Picture = "none" | "entering" | "shown"; const AvatarContext = createContext<{ picture: Picture; setPicture: (picture: Picture) => void; /** The picture's alt, which the initials carry while they stand in for it */ alt: string | undefined; setAlt: (alt: string | undefined) => void; /** Rendered on the server, so the initials were painted before the picture could load */ fromServer: boolean; } | null>(null); function useAvatar(part: string) { const avatar = useContext(AvatarContext); if (!avatar) throw new Error(`${part} must be used inside Avatar`); return avatar; } const subscribe = () => () => {}; const avatarVariants = cva("group/avatar relative flex shrink-0 overflow-hidden rounded-full select-none", { variants: { size: { sm: "size-6", md: "size-8", lg: "size-10", }, }, defaultVariants: { size: "md" }, }); export type AvatarProps = ComponentProps & VariantProps; function Avatar({ className, size, ...props }: AvatarProps) { // While hydrating, React reads the server value (false): the avatar knows its initials were painted first const hydrated = useSyncExternalStore( subscribe, () => true, () => false, ); const [fromServer] = useState(!hydrated); const [picture, setPicture] = useState