4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T2dc0,/** * A blobatar that also says how its person is doing: online, away, offline, * thinking, and how many messages are waiting. * * ## Why this is a registry item rather than a prop on the adapter * * The dot and the badge are chrome around an avatar, not part of one. They are * positioned against the avatar's box, they carry an application's vocabulary * for presence, and every product spells that vocabulary differently: a support * tool has "away", an agent runner has "thinking", a game has neither. Baking * any of it into `@blobatar/react` would ship a states enum to everyone who * only wanted a face. So the generator stays in the package and the composition * gets copied into your project, which is the part you will want to edit. * * ## Every face here is alive, and that costs something * * `animate="always"` on all of them, not just on the one that is thinking. A * presence avatar stands for a person who is *there*, and a row of faces that * blink and breathe says that before any dot does. It also means the thinking * state is a change of expression on a creature already moving, rather than the * only thing on screen that moves. * * The cost is real and worth stating. A static blobatar renders as one ``; * an animated one cannot, because content inside an `` is an isolated * document where no host stylesheet can reach the shapes. So `animate` switches * the adapter to inline SVG, roughly a dozen nodes per face. That is nothing for * a sidebar of eight agents and wrong for a directory of four hundred people: at * that size drop the prop, or use a plain `` the way `user-table` does. * The motion itself is CSS on seeded offsets, so it is the node count that * scales, not a timer per avatar. * * Animation needs the library's stylesheet, imported once, anywhere in your * app: `import "blobatar/motion.css"`. Without it every face here is still * correct, it just holds still. */ "use client"; import { Blobatar } from "@blobatar/react"; import type { BlobatarOptions } from "blobatar"; import { thinking } from "blobatar/expression"; import { cn } from "@/lib/utils"; /** * Four states, and no `busy`. * * `busy` was here and is gone on purpose. Against `thinking` it was the same * claim in a different colour — both mean "this person or agent is occupied * right now" — and a status vocabulary whose two middle values need a legend * to tell apart is a vocabulary with one value too many. What is left is three * facts about availability and one about activity, which is a distinction * somebody can actually read off a badge. */ export type PresenceState = "online" | "away" | "offline" | "thinking"; /** * What each state looks like and what it is called. * * The label is not decoration. A coloured dot is invisible to a screen reader * and ambiguous to anyone who does not already know the convention, so every * state carries the word as well and the word is what goes into the accessible * name below. * * `thinking` has no dot: it renders the three-dot indicator instead. It is the * one state that is about something in progress rather than about where * somebody is, and a loading indicator says that in a way no colour does. */ const PRESENCE: Record = { online: { dot: "bg-emerald-500", label: "online" }, away: { dot: "bg-amber-500", label: "away" }, offline: { dot: "bg-zinc-600", label: "offline" }, thinking: { label: "thinking" }, }; /** * How far past its own box the face is drawn. See the note in the component. * * A transform rather than a bigger element, so the layout box is untouched and * nothing around it moves. It is also free of resolution cost: the picture is * an SVG either way. */ const OVERFLOW = "scale-[1.18]"; export type PresenceAvatarProps = { /** * Who this is for. A username, a display name, an email, an agent's handle, * a row id: any string, and the same string always renders the same face. */ name: string; /** Defaults to `online`. `thinking` is the one that animates. */ state?: PresenceState; /** Unread count. `0` and `undefined` both render nothing. */ unread?: number; /** * What to call this person in the accessible name, when `name` is an id or * an email rather than something worth reading aloud. */ label?: string; /** * Anything the generator takes: `hue`, `background`, `traits`, and the rest. * * Nested rather than spread onto this component, so that a prop added to the * library later cannot collide with a prop added here. It is also the seam * for a house style: `{ traits: { shape: [0.11, 0.54, 0.99] } }` keeps every * face in your product to three silhouettes while leaving colour, eyes and * everything else per name. */ blobatar?: BlobatarOptions; className?: string; }; export function PresenceAvatar({ name, state = "online", unread, label, blobatar, className, }: PresenceAvatarProps) { const presence = PRESENCE[state]; const who = label ?? name; /* * No `background`, so what renders is the silhouette itself on whatever the * page is. A blobatar's body *is* the picture: a disc behind it turns ten * distinct outlines into ten circles with different fills, which throws away * the half of the identity you can read at 24px and across the room. Pass * `blobatar={{ background: "circle" }}` where the layout needs a disc, which * is mainly overlapping stacks, where two bare silhouettes would merge into * one shape. * * That is also why the badges below sit at the corners of the box rather than * on its edge: with no disc there is no edge, and a corner is the one place * on a bounding box that no silhouette reaches into. * * And it is why the face is drawn slightly larger than its own box. A * blobatar keeps a margin inside its viewBox so that no silhouette can touch * the frame, which is right for the picture and wrong for anything pinned to * a corner of it: the badge ends up floating in a gap with nothing under it, * reading as a separate object rather than as a mark on this face. Scaling * past the box closes the gap without changing the box, so a row of these * still lines up on the layout size rather than on how wide each creature * happens to be. * * The two branches exist because the adapter's props are a union: `animate` * turns the element from an `` into an ` {face} {/* Top right, which is where a status light goes when the thing under it is not a rectangle. On a disc the conventional spot is bottom right, on the curve; on a bare silhouette that corner is under the widest part of most bodies, and a `sun` or a `cloud` puts a lobe straight through it. Sized as a percentage of the avatar rather than in pixels, which is the only version of this that survives being used at more than one size. A `size-3` dot is a quarter of a 48px face and a third of a 32px one: the same component reads as an avatar with a status light in one list and as a status light with an avatar behind it in the next. `ring-background` rather than a border: the ring is the page showing through, which separates the dot from whatever it overlaps without introducing a colour that has to be chosen per surface. */} {state === "thinking" ? ( {/* Three dots rather than one pulsing light, because this is the only state that means "wait" and a loading indicator is the shape everybody already reads as waiting. The stagger is an inline style rather than a class, and that is a Tailwind fact rather than a preference: utilities are compiled from the class strings found in the source, so a delay interpolated into a class name is a class that was never generated. Duration is set here too, since `animate-pulse` runs at 2s, which reads as breathing rather than as loading. */} {[0, 1, 2].map(i => ( ))} ) : ( )} {/* The count takes the other corner, since the dot has this one now. They are two different questions anyway: the dot is about the person, the badge is about your inbox, and stacking them would make a 99+ pill swallow the state it is sitting on. */} {unread ? ( ) : null} ); } 4c:["$","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","blobatar",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/blobatar","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":"blobatar"}]]}]}],["$","li","@blobatar/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40blobatar%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":"@blobatar/react"}]]}]}]]}],["$","$L4d",null,{"namespace":"@blobatar","registryDependencies":[]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/presence-avatar.tsx","content":"$4f","type":"registry:ui","target":"components/ui/presence-avatar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]