Avatar Grid

The component is self-contained: one file, no dependencies, its own palette in the local --vibeui-avatar-016-* variables. Server-side: there are no hooks. The columns are set by repeat(auto-fill, minmax(4.5rem, 1fr)), so the browser works out their number from the actual width rather than a prop: when the width changes, the rows reflow on their own. The circle's hue is derived from the name by an FNV-1a function, so one person always keeps one colour. The names are captioned under the faces and truncated with an ellipsis — a truncated name is more honest than a tooltip that never appears on a phone. The theme comes from the surrounding color-scheme through light-dark(): the dark branch is not an inversion of the light one — the circle fill, the rings and the statuses each have their own pair of lightnesses.