refactor(shared): migrate all avatar call sites to Avatar primitive (§5)

Replaces ad-hoc color hashing in PersonCard, PersonChip, ContributorStack,
ReaderPersonChips, CoCorrespondentsList, CommentMessage, GeschichteListRow,
StoryReader, DocumentMetadataDrawer, and the Geschichte detail page.

Refs #855
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/lib/document/DocumentMetadataDrawer.svelte

@@ -2,7 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/shared/utils/date';
 import { formatDocumentStatus } from '$lib/document/documentStatusLabel';
-import { getInitials, personAvatarColor } from '$lib/person/personFormat';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 import RelationshipPill from '$lib/person/relationship/RelationshipPill.svelte';
 import DocumentDate from './DocumentDate.svelte';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
@@ -88,13 +88,7 @@ function getFullName(person: Person): string {
 		href="/persons/{person.id}"
 		class="group flex items-center gap-2.5 rounded px-2 py-1.5 transition-colors hover:bg-muted"
 	>
-		<span
-			class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
-			style="background-color: {personAvatarColor(person.id)}"
-			aria-hidden="true"
-		>
-			{getInitials(person.displayName)}
-		</span>
+		<Avatar name={person.displayName} size={28} decorative={true} />
 		<span class="min-w-0 truncate font-serif text-sm text-ink">{getFullName(person)}</span>
 		{#if relationLabel}
 			<RelationshipPill label={relationLabel} />

frontend/src/lib/geschichte/GeschichteListRow.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { plainExcerpt } from '$lib/shared/utils/extractText';
-import { getInitials, personAvatarColor } from '$lib/person/personFormat';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
+import { avatarFor } from '$lib/shared/avatar';
 import { formatAuthorName, formatPublishedAt } from './utils';
 import type { components } from '$lib/generated/api';
 
@@ -26,13 +27,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
 >
 	<!-- Meta column (desktop) -->
 	<div class="hidden w-40 shrink-0 flex-col items-start gap-1 border-r border-line-2 p-3 sm:flex">
-		<span
-			aria-hidden="true"
-			class="flex h-7 w-7 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white"
-			style="background-color: {personAvatarColor(authorName)}"
-		>
-			{getInitials(authorName)}
-		</span>
+		<Avatar name={authorName} size={28} decorative={true} />
 		<span class="font-sans text-sm leading-tight font-semibold text-ink">{authorName}</span>
 		{#if publishedAt}
 			<span class="font-sans text-sm text-ink-3">{publishedAt}</span>
@@ -63,7 +58,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
 			<span
 				aria-hidden="true"
 				class="h-2.5 w-2.5 shrink-0 rounded-full"
-				style="background-color: {personAvatarColor(authorName)}"
+				style="background-color: {avatarFor(authorName).bg}"
 			></span>
 			<span class="font-sans text-sm font-semibold text-ink">{authorName}</span>
 			{#if isDraft}

frontend/src/lib/geschichte/StoryReader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { safeHtml } from '$lib/shared/utils/sanitize';
-import { getInitials, personAvatarColor } from '$lib/person/personFormat';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 import { formatDocumentMetaLine } from './utils';
 import type { components } from '$lib/generated/api';
 
@@ -51,13 +51,7 @@ function personName(p: { firstName?: string; lastName?: string }): string {
 						style="display: inline-flex; min-height: 44px"
 						class="inline-flex min-h-[44px] items-center gap-2 rounded-full border border-line bg-surface px-3 py-1.5 font-sans text-sm font-medium text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
 					>
-						<span
-							aria-hidden="true"
-							class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full font-sans text-[8px] font-bold text-white"
-							style="background-color: {personAvatarColor(p.id)}"
-						>
-							{getInitials(personName(p))}
-						</span>
+						<Avatar name={personName(p)} size={26} decorative={true} />
 						{personName(p)}
 					</a>
 				</li>

frontend/src/lib/person/PersonCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 import type { components } from '$lib/generated/api';
 
 type Person = components['schemas']['PersonSummaryDTO'];
@@ -25,12 +26,6 @@ const showGlyph = $derived(
 	isUnconfirmed || hasNoName || (person.personType != null && person.personType !== 'PERSON')
 );
 
-const initials = $derived.by(() => {
-	const first = person.firstName?.[0] ?? '';
-	const last = person.lastName?.[0] ?? '';
-	return first ? first + last : last;
-});
-
 const documentCount = $derived(person.documentCount ?? 0);
 </script>
 
@@ -38,15 +33,13 @@ const documentCount = $derived(person.documentCount ?? 0);
 	<div
 		class="flex h-full flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md"
 	>
-		<!-- Avatar: confirmed persons get a primary-coloured initials disc; institutions/groups
-		     and unconfirmed entries get a neutral, muted glyph so "unverified" is pre-attentive. -->
-		<div
-			class={[
-				'flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full font-serif text-base font-bold transition-colors',
-				isUnconfirmed || hasNoName ? 'bg-muted text-ink-2' : 'bg-primary text-primary-fg'
-			]}
-		>
-			{#if showGlyph}
+		<!-- Avatar: confirmed persons get a deterministic name-hashed Avatar disc;
+		     institutions/groups and unconfirmed entries get a neutral, muted glyph
+		     so "unverified" is pre-attentive. -->
+		{#if showGlyph}
+			<div
+				class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-muted text-ink-2 transition-colors"
+			>
 				{#if person.personType === 'INSTITUTION'}
 					<svg
 						class="h-5 w-5"
@@ -84,10 +77,11 @@ const documentCount = $derived(person.documentCount ?? 0);
 						class="h-6 w-6 opacity-70"
 					/>
 				{/if}
-			{:else}
-				{initials}
-			{/if}
-		</div>
+			</div>
+		{:else}
+			<!-- Confirmed person — deterministic name-hash Avatar (DESIGN_RULES §5) -->
+			<Avatar name={person.displayName} size={48} decorative={true} />
+		{/if}
 
 		<!-- Name -->
 		<p class="font-serif text-sm font-bold text-ink group-hover:underline">

frontend/src/lib/person/PersonChip.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { abbreviateName, getInitials, personAvatarColor } from '$lib/person/personFormat';
+import { abbreviateName } from '$lib/person/personFormat';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 
@@ -11,20 +12,12 @@ type Props = {
 let { person, abbreviated }: Props = $props();
 
 const name = $derived(abbreviated ? abbreviateName(person) : person.displayName);
-const avatarColor = $derived(personAvatarColor(person.id));
-const initials = $derived(getInitials(person.displayName));
 </script>
 
 <a
 	href="/persons/{person.id}"
-	class="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-line bg-muted px-2 py-0.5 hover:border-primary hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
+	class="inline-flex shrink-0 items-center gap-1.5 rounded-sm border border-line bg-muted px-2 py-0.5 hover:border-primary hover:bg-surface focus-visible:ring-2 focus-visible:ring-primary"
 >
-	<span
-		class="flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-full text-[13px] font-bold text-white"
-		style="background-color: {avatarColor}"
-		aria-hidden="true"
-	>
-		{initials}
-	</span>
+	<Avatar name={person.displayName} size={26} decorative={true} />
 	<span class="text-[14px] font-semibold text-ink">{name}</span>
 </a>

frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte

@@ -1,22 +1,7 @@
 <script lang="ts">
 import type { components } from '$lib/generated/api';
 import * as m from '$lib/paraglide/messages.js';
-
-const AVATAR_PALETTE = ['#012851', '#5A3080', '#005F74', '#2A6040', '#803020'] as const;
-function djb2(str: string): number {
-	let hash = 5381;
-	for (let i = 0; i < str.length; i++) hash = (hash * 33) ^ str.charCodeAt(i);
-	return Math.abs(hash);
-}
-function personAvatarColor(id: string): string {
-	return AVATAR_PALETTE[djb2(id) % AVATAR_PALETTE.length];
-}
-function getInitials(name: string): string {
-	const words = name.trim().split(/\s+/).filter(Boolean);
-	if (words.length === 0) return '';
-	if (words.length === 1) return words[0].charAt(0).toUpperCase();
-	return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
-}
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 
 type PersonSummaryDTO = components['schemas']['PersonSummaryDTO'];
 
@@ -37,11 +22,12 @@ const { persons }: Props = $props();
 				href="/persons/{p.id}"
 				class="group flex min-h-[44px] flex-col items-center gap-2 rounded border border-line bg-surface px-4 py-6 text-center no-underline shadow-sm transition-all duration-200 hover:border-l-4 hover:border-accent hover:shadow-md focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 			>
+				<!-- Avatar: name-keyed deterministic color; dark:ring-1 dark:ring-white/10
+				     keeps the disc edge visible against --c-surface #011526 in dark mode -->
 				<span
-					class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-base font-bold text-white shadow-sm dark:shadow-none dark:ring-1 dark:ring-white/10"
-					style="background-color: {personAvatarColor(p.id ?? '')}"
+					class="flex h-12 w-12 items-center justify-center rounded-full shadow-sm dark:shadow-none dark:ring-1 dark:ring-white/10"
 				>
-					{getInitials(p.displayName ?? p.lastName ?? '')}
+					<Avatar name={p.displayName ?? p.lastName ?? ''} size={48} decorative={true} />
 				</span>
 				<span class="truncate font-serif text-sm font-bold text-ink group-hover:underline"
 					>{p.displayName ?? p.lastName}</span

frontend/src/lib/shared/discussion/CommentMessage.svelte

@@ -2,8 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import type { FlatMessage } from '$lib/shared/types';
 import { extractQuote } from '$lib/shared/discussion/comment';
-// eslint-disable-next-line boundaries/dependencies -- discussion UI needs person initials for avatars; move to shared if getInitials becomes generic
-import { getInitials } from '$lib/person/personFormat';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 import { relativeTime } from '$lib/shared/utils/time';
 import { renderBody } from '$lib/shared/discussion/mention';
 
@@ -39,12 +38,8 @@ const parsed = $derived(extractQuote(message.content));
 	tabindex="-1"
 	class="flex gap-2 rounded outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2"
 >
-	<!-- Avatar circle with initials -->
-	<div
-		class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-fg"
-	>
-		{getInitials(message.authorName)}
-	</div>
+	<!-- Avatar circle with initials — name-keyed deterministic color (DESIGN_RULES §5) -->
+	<Avatar name={message.authorName} size={26} decorative={true} />
 
 	<!-- Content -->
 	<div class="min-w-0 flex-1">

frontend/src/lib/shared/primitives/ContributorStack.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { components } from '$lib/generated/api';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 
 type ActivityActorDTO = components['schemas']['ActivityActorDTO'];
 
@@ -11,36 +12,24 @@ interface Props {
 let { contributors, hasMore }: Props = $props();
 
 const safeContributors = $derived(contributors ?? []);
-
-function safeColor(color: string): string {
-	return /^#[0-9a-fA-F]{6}$/.test(color) ? color : '#8c9aa3';
-}
 </script>
 
 {#if safeContributors.length === 0}
-	<span
-		role="img"
-		aria-label="Noch niemand angefangen"
-		class="inline-block h-[22px] w-[22px] flex-shrink-0 rounded-full border-[1.5px] border-dashed border-[#cdcbbf]"
-	></span>
+	<!-- Empty placeholder: dashed border circle (DESIGN_RULES §5) -->
+	<Avatar placeholder={true} size={26} />
 {:else}
 	<span class="inline-flex items-center">
 		{#each safeContributors as actor, i (actor.initials + '-' + actor.color)}
-			<span
-				role="img"
-				aria-label={actor.name ?? actor.initials}
-				class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
-				style="background-color: {safeColor(actor.color)};"
-				title={actor.name ?? actor.initials}
-			>
-				{actor.initials}
-			</span>
+			<!-- Stacked avatar: ring-surface ring instead of legacy ring-white so edge
+			     works in both light and dark themes. First avatar has no negative margin. -->
+			<Avatar name={actor.name ?? actor.initials} size={26} stacked={i > 0} decorative={false} />
 		{/each}
 		{#if hasMore}
+			<!-- Overflow indicator — uses muted bg + ink-3 text, stacked -->
 			<span
 				role="img"
 				aria-label="Weitere Mitwirkende"
-				class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[10px] font-bold text-ink-3 ring-2 ring-white"
+				class="-ml-1.5 inline-flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-full bg-muted font-sans text-[10px] font-bold text-ink-3 ring-2 ring-surface"
 			>
 				…
 			</span>

frontend/src/routes/geschichten/[id]/+page.svelte

@@ -3,8 +3,8 @@ import { goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/shared/utils/date';
 import { formatAuthorDisplayName } from '$lib/geschichte/utils';
-import { getInitials, personAvatarColor } from '$lib/person/personFormat';
 import { getConfirmService } from '$lib/shared/services/confirm.svelte';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 import { csrfFetch } from '$lib/shared/cookies';
 import { parseBackendError, getErrorMessage } from '$lib/shared/errors';
 import BackButton from '$lib/shared/primitives/BackButton.svelte';
@@ -71,13 +71,7 @@ async function handleDelete() {
 				</h1>
 				<div class="mb-4 flex items-center gap-3 border-b border-line-2 pb-4">
 					{#if authorName}
-						<span
-							aria-hidden="true"
-							class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full font-sans text-xs font-bold text-white"
-							style="background-color: {personAvatarColor(authorName)}"
-						>
-							{getInitials(authorName)}
-						</span>
+						<Avatar name={authorName} size={28} decorative={true} />
 					{/if}
 					<div>
 						{#if authorName}

frontend/src/routes/persons/[id]/CoCorrespondentsList.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 
 let {
 	coCorrespondents,
@@ -10,15 +11,6 @@ let {
 	personId: string;
 	personName: string;
 } = $props();
-
-function initials(name: string): string {
-	return name
-		.split(' ')
-		.map((n) => n[0] ?? '')
-		.join('')
-		.slice(0, 2)
-		.toUpperCase();
-}
 </script>
 
 {#if coCorrespondents.length > 0}
@@ -38,12 +30,8 @@ function initials(name: string): string {
 					title={m.person_correspondents_search_title({ A: personName, B: c.name })}
 					class="inline-flex items-center gap-1.5 rounded-full border border-line bg-muted px-3 py-1.5 font-sans text-xs font-bold text-ink transition-colors hover:border-primary hover:bg-surface"
 				>
-					<!-- Initials circle -->
-					<span
-						class="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-primary font-serif text-[9px] font-bold text-primary-fg"
-					>
-						{initials(c.name)}
-					</span>
+					<!-- Avatar — name-keyed deterministic color (DESIGN_RULES §5) -->
+					<Avatar name={c.name} size={26} decorative={true} />
 					{c.name}
 					<span
 						class="text-[10px] font-normal text-ink-3"

frontend/src/routes/persons/[id]/PersonCard.svelte

@@ -2,6 +2,7 @@
 import { m } from '$lib/paraglide/messages.js';
 import { formatLifeDate } from '$lib/person/personLifeDates';
 import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
+import Avatar from '$lib/shared/primitives/Avatar.svelte';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
 
 let {
@@ -34,12 +35,11 @@ const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrec
 	<div class="h-1.5 w-full bg-primary"></div>
 
 	<div class="p-6">
-		<!-- Avatar — navy circle, centered -->
+		<!-- Avatar — deterministic name-hash (DESIGN_RULES §5); type-glyph fallback for
+		     non-PERSON types; centered -->
 		<div class="mb-4 flex justify-center">
-			<div
-				class="flex h-16 w-16 items-center justify-center rounded-full bg-primary font-serif text-xl font-bold text-primary-fg"
-			>
-				{#if person.personType && person.personType !== 'PERSON'}
+			{#if person.personType && person.personType !== 'PERSON'}
+				<div class="flex h-16 w-16 items-center justify-center rounded-full bg-muted text-ink-2">
 					<svg
 						class="h-7 w-7"
 						fill="none"
@@ -67,10 +67,10 @@ const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrec
 							/>
 						{/if}
 					</svg>
-				{:else}
-					{person.firstName ? person.firstName[0] : person.lastName[0]}{person.lastName[0]}
-				{/if}
-			</div>
+				</div>
+			{:else}
+				<Avatar name={person.displayName} size={48} decorative={true} />
+			{/if}
 		</div>
 
 		{#if person.personType === 'PERSON' && person.title}