52: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"] 53: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"] 54:T2171,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion, useIsomorphicLayoutEffect, useReducedMotion, } from "motion/react"; const SLOT = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const FADE = { duration: 0.24, ease: [0.23, 1, 0.32, 1] } as const; const INSTANT = { duration: 0 } as const; export type PresencePerson = { id: string; name: string; src?: string; }; export type UsePresenceOptions = { people: PresencePerson[]; max?: number; announceAfter?: number; }; export type UsePresenceResult = { ordered: PresencePerson[]; visible: PresencePerson[]; hidden: PresencePerson[]; overflow: number; total: number; summary: string; announcement: string; }; function initials(name: string): string { const words = name.trim().split(/\s+/).filter(Boolean); if (words.length === 0) return "?"; const first = Array.from(words[0])[0] ?? ""; const last = words.length > 1 ? (Array.from(words[words.length - 1])[0] ?? "") : ""; return (first + last).toUpperCase(); } function describe(names: string[]): string { if (names.length === 0) return "Nobody here"; if (names.length === 1) return `${names[0]} is here`; if (names.length === 2) return `${names[0]} and ${names[1]} are here`; const rest = names.length - 2; return `${names[0]}, ${names[1]} and ${rest} ${rest === 1 ? "other" : "others"} are here`; } export function usePresence({ people, max = 5, announceAfter = 900, }: UsePresenceOptions): UsePresenceResult { const seen = useRef(new Map()); const next = useRef(0); const ordered = useMemo(() => { const order = seen.current; for (const person of people) { if (!order.has(person.id)) { order.set(person.id, next.current); next.current += 1; } } return people .slice() .toSorted((a, b) => (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0)); }, [people]); const slots = Math.max(1, max); const visible = ordered.slice(0, slots); const hidden = ordered.slice(slots); const summary = describe(ordered.map((person) => person.name)); const [announcement, setAnnouncement] = useState(summary); useEffect(() => { const timer = setTimeout(() => setAnnouncement(summary), announceAfter); return () => clearTimeout(timer); }, [summary, announceAfter]); return { ordered, visible, hidden, overflow: hidden.length, total: ordered.length, summary, announcement, }; } const TILE = "absolute left-0 top-0 select-none rounded-[10px] bg-stone-200 p-[3px] dark:bg-stone-700"; const WELL = "relative grid size-full place-items-center overflow-hidden rounded-[7px] bg-stone-100 font-medium leading-none text-stone-500 dark:bg-white/10 dark:text-stone-300"; type TileProps = { person: PresencePerson; index: number; step: number; size: number; zIndex: number; reduced: boolean; }; type FaceStatus = "loading" | "ready" | "error"; function useFace(src?: string) { const ref = useRef(null); const [state, setState] = useState<{ status: FaceStatus; instant: boolean }>({ status: "loading", instant: false, }); useIsomorphicLayoutEffect(() => { const img = ref.current; const set = (status: FaceStatus, instant: boolean) => setState((prev) => prev.status === status && prev.instant === instant ? prev : { status, instant }, ); if (!img || !src) { set("loading", false); return; } const cached = img.complete && img.naturalWidth > 0; if (img.complete) { set(cached ? "ready" : "error", cached); return; } set("loading", false); let alive = true; const onLoad = () => { if (alive) set("ready", false); }; const onError = () => { if (alive) set("error", false); }; img.addEventListener("load", onLoad); img.addEventListener("error", onError); return () => { alive = false; img.removeEventListener("load", onLoad); img.removeEventListener("error", onError); }; }, [src]); return { ref, status: state.status, instant: state.instant }; } function PresenceTile({ person, index, step, size, zIndex, reduced }: TileProps) { const { ref, status, instant } = useFace(person.src); return ( {initials(person.name)} {person.src ? ( ) : null} ); } export type PresenceAvatarsProps = { people: PresencePerson[]; max?: number; size?: number; overlap?: number; label?: string; announceAfter?: number; onOverflowSelect?: (hidden: PresencePerson[]) => void; className?: string; }; export function PresenceAvatars({ people, max = 5, size = 28, overlap = 9, label = "People here", announceAfter, onOverflowSelect, className = "", }: PresenceAvatarsProps) { const reduced = useReducedMotion(); const { ordered, visible, hidden, overflow, announcement } = usePresence({ people, max, announceAfter, }); const slots = Math.max(1, max); const step = size - overlap; const chip = size + 8; const rail = visible.length === 0 ? 0 : overflow > 0 ? visible.length * step + chip : (visible.length - 1) * step + size; const chipCount = `+${Math.min(overflow, 99)}`; const chipMotion = { initial: { opacity: 0, scale: 0.86 }, animate: { opacity: 1, scale: 1, x: visible.length * step }, exit: { opacity: 0, scale: 0.86 }, transition: reduced ? INSTANT : SLOT, }; const chipClass = "absolute left-0 top-0 grid place-items-center rounded-[9px] border border-stone-200 bg-white font-mono text-[10.5px] leading-none tabular-nums text-stone-500 outline-none ring-2 ring-white dark:border-white/[0.16] dark:bg-[#1D1D1A] dark:text-stone-400 dark:ring-stone-900"; return (

{visible.map((person, i) => ( ))} {overflow > 0 && (onOverflowSelect ? ( onOverflowSelect(hidden)} aria-label={`Show ${overflow} more`} style={{ width: chip, height: size, zIndex: 0 }} className={`${chipClass} focus-visible:border-[#4568FF] dark:focus-visible:border-[#93B0FF]`} {...chipMotion} > {chipCount} ) : ( {chipCount} ))}

{person.name}

{announcement}

); } 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/interior/presence-avatars.tsx","content":"$54","type":"registry:ui","target":"components/interior/presence-avatars.tsx"}],"className":"h-[70svh] min-h-80"}]]}]