Avatar: getAvatarColor collides on anagrams; add color seed + palette subset

[ravisuhag]

Summary

getAvatarColor picks an avatar color from a name using a char-code sum, which collides on anagrams and clusters on similar strings. There is also no way to seed the color independently of the display name, and no way to restrict the palette to a subset. Consumers with a specific color language end up re-implementing the whole function.

The hashing bug

components/avatar/utils.tsx:

export function getAvatarColor(str: string): AVATAR_COLORS {
  const hash = str.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
  const index = hash % COLORS.length;
  return COLORS[index];
}

Summing char codes is order-insensitive, so any anagram maps to the same color — "Ravi" and "Vira", "Amy Lee" and "Ely Mae" collide. Names that differ by one adjacent-letter swap also collide, and sequences like "User 1" / "User 2" / "User 3" land on adjacent (often visually close) palette entries instead of spreading out.

A small change fixes the distribution — a polynomial (order-sensitive) hash:

let hash = 0;
for (let i = 0; i < str.length; i++) {
  hash = (hash * 31 + str.charCodeAt(i)) | 0;
}
const index = Math.abs(hash) % COLORS.length;

Two API gaps

1. No color seed. The color is derived from the string passed in — which is the display name — so a rename changes a person's color, and two people with the same name always share one. A separate, stable seed (e.g. an id) would keep colors stable across renames and distinct for namesakes. Suggest an optional colorSeed/seed prop on Avatar (falling back to the name today).

2. No palette subset. COLORS is a fixed 13-entry list including warm tones (orange, crimson, gold) and neutral. A product with a cooler or brand-restricted identity language can't say "only pick from these." Suggest letting getAvatarColor (and Avatar's auto-color) accept an optional palette subset.

Relationship to #650

#650 (item 3) proposes propagating an explicit color prop to Avatar. This issue is about the automatic color path — hash quality and seeding — which is orthogonal: even with an explicit-color prop, the auto-assigned fallback should distribute well and stay stable.

Willing to contribute

Happy to open a PR — the hash change alone is a one-liner, and the seed/palette props are additive.