feat(person): render precise life dates on cards, hover card, and mention dropdown

Cards compose aria-hidden * / † glyphs in markup so screen readers only
announce the dates; PersonSummaryDTO list card stays year-shaped by
design (ADR-039). MentionDropdown subtitle wraps instead of truncating
so DAY-precision ranges fit at 320px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/lib/document/transcription/TranscriptionReadView.svelte.test.ts

@@ -335,8 +335,10 @@ describe('TranscriptionReadView — person-mention rendering', () => {
 							displayName: 'Auguste Raddatz',
 							personType: 'PERSON',
 							familyMember: true,
-							birthYear: 1882,
-							deathYear: 1944
+							birthDate: '1882-01-01',
+							birthDatePrecision: 'YEAR',
+							deathDate: '1944-01-01',
+							deathDatePrecision: 'YEAR'
 						})
 				});
 			})

frontend/src/lib/person/PersonCard.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { formatLifeDateRange } from '$lib/person/personLifeDates';
 import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
 import type { components } from '$lib/generated/api';
 
@@ -125,10 +124,17 @@ const documentCount = $derived(person.documentCount ?? 0);
 			<p class="font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
 		{/if}
 
-		<!-- Life dates -->
+		<!-- Life dates — PersonSummaryDTO is year-shaped by design (ADR-039); the glyphs are
+		     aria-hidden so screen readers only announce the years. -->
 		{#if person.birthYear || person.deathYear}
 			<p class="font-sans text-sm text-ink-3">
-				{formatLifeDateRange(person.birthYear, person.deathYear)}
+				{#if person.birthYear}
+					<span aria-hidden="true">*</span> {person.birthYear}
+				{/if}
+				{#if person.birthYear && person.deathYear}–{/if}
+				{#if person.deathYear}
+					<span aria-hidden="true">†</span> {person.deathYear}
+				{/if}
 			</p>
 		{/if}
 

frontend/src/lib/person/PersonCard.svelte.test.ts

@@ -30,6 +30,27 @@ describe('PersonCard — confirmed person', () => {
 		render(PersonCard, { props: { person: makePerson() } });
 		await expect.element(page.getByText('unbestätigt')).not.toBeInTheDocument();
 	});
+
+	// PersonSummaryDTO intentionally stays year-shaped (ADR-039): the list shows
+	// year precision only; full dates live on the detail page.
+	it('renders the year-only life-date range', async () => {
+		render(PersonCard, { props: { person: makePerson({ birthYear: 1899, deathYear: 1972 }) } });
+		await expect.element(page.getByText(/1899/)).toBeVisible();
+		await expect.element(page.getByText(/1972/)).toBeVisible();
+	});
+
+	it('renders birth-only without dash and wraps glyphs in aria-hidden spans', async () => {
+		const { container } = render(PersonCard, {
+			props: { person: makePerson({ birthYear: 1899 }) }
+		});
+		await expect.element(page.getByText(/1899/)).toBeVisible();
+		expect(container.textContent).not.toContain('–');
+		expect(container.textContent).not.toContain('†');
+		const hidden = [...container.querySelectorAll('span[aria-hidden="true"]')].map((el) =>
+			el.textContent?.trim()
+		);
+		expect(hidden).toContain('*');
+	});
 });
 
 describe('PersonCard — unconfirmed badge keys off provisional only (badge ⇔ count ⇔ triage parity)', () => {

frontend/src/lib/person/PersonHoverCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { formatLifeDateRange } from '$lib/person/personLifeDates';
+import { formatLifeDate } from '$lib/person/personLifeDates';
 import { chipLabel, otherName } from '$lib/person/relationshipLabels';
 import type { components } from '$lib/generated/api';
 import type { LoadState } from '$lib/person/personHoverCard';
@@ -31,9 +31,14 @@ const familyChips = $derived(
 		: []
 );
 
-const dateRange = $derived(
+const birthText = $derived(
 	state.status === 'loaded'
-		? formatLifeDateRange(state.person.birthYear, state.person.deathYear)
+		? formatLifeDate(state.person.birthDate, state.person.birthDatePrecision)
+		: ''
+);
+const deathText = $derived(
+	state.status === 'loaded'
+		? formatLifeDate(state.person.deathDate, state.person.deathDatePrecision)
 		: ''
 );
 
@@ -123,8 +128,17 @@ const showMaidenName = $derived(
 		<div data-testid="person-hover-card-content" class="content">
 			<div class="header">
 				<div class="name" data-testid="person-hover-card-name">{state.person.displayName}</div>
-				{#if dateRange}
-					<div class="dates" data-testid="person-hover-card-dates">{dateRange}</div>
+				{#if birthText || deathText}
+					<!-- Glyphs aria-hidden so screen readers only announce the dates -->
+					<div class="dates" data-testid="person-hover-card-dates">
+						{#if birthText}
+							<span aria-hidden="true">*</span> {birthText}
+						{/if}
+						{#if birthText && deathText}–{/if}
+						{#if deathText}
+							<span aria-hidden="true">†</span> {deathText}
+						{/if}
+					</div>
 				{/if}
 				{#if showMaidenName}
 					<div class="maiden" data-testid="person-hover-card-maiden">

frontend/src/lib/person/PersonHoverCard.svelte.spec.ts

@@ -14,8 +14,10 @@ const AUGUSTE: Person = {
 	displayName: 'Auguste Raddatz',
 	personType: 'PERSON',
 	familyMember: true,
-	birthYear: 1882,
-	deathYear: 1944
+	birthDate: '1882-01-01',
+	birthDatePrecision: 'YEAR',
+	deathDate: '1944-01-01',
+	deathDatePrecision: 'YEAR'
 } as unknown as Person;
 
 const POSITION = { top: 100, left: 200 };
@@ -81,18 +83,76 @@ describe('PersonHoverCard — loaded state', () => {
 		await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
 	});
 
-	it('renders the life-date range when birthYear and deathYear are present', async () => {
+	it('renders the life-date range when birth and death dates are present', async () => {
 		render(PersonHoverCard, {
 			personId: 'p-aug',
 			cardId: 'card-1',
 			position: POSITION,
 			state: { status: 'loaded', person: AUGUSTE, relationships: [] }
 		});
-		await expect.element(page.getByText('* 1882 – † 1944')).toBeInTheDocument();
+		await expect
+			.element(page.getByTestId('person-hover-card-dates'))
+			.toHaveTextContent('* 1882 – † 1944');
 	});
 
-	it('omits the life-date line when both years are missing', async () => {
-		const noDates = { ...AUGUSTE, birthYear: undefined, deathYear: undefined } as Person;
+	it('renders a DAY-precision birth date as a full localized date', async () => {
+		const exact = {
+			...AUGUSTE,
+			birthDate: '1882-03-14',
+			birthDatePrecision: 'DAY'
+		} as unknown as Person;
+		render(PersonHoverCard, {
+			personId: 'p-aug',
+			cardId: 'card-1',
+			position: POSITION,
+			state: { status: 'loaded', person: exact, relationships: [] }
+		});
+		await expect
+			.element(page.getByTestId('person-hover-card-dates'))
+			.toHaveTextContent('14. März 1882');
+	});
+
+	it('renders APPROX-precision legacy dates with the ca. prefix', async () => {
+		const approx = {
+			...AUGUSTE,
+			birthDate: '1882-01-01',
+			birthDatePrecision: 'APPROX',
+			deathDate: undefined,
+			deathDatePrecision: 'UNKNOWN'
+		} as unknown as Person;
+		render(PersonHoverCard, {
+			personId: 'p-aug',
+			cardId: 'card-1',
+			position: POSITION,
+			state: { status: 'loaded', person: approx, relationships: [] }
+		});
+		await expect.element(page.getByTestId('person-hover-card-dates')).toHaveTextContent('ca. 1882');
+	});
+
+	it('keeps the * and † glyphs out of the accessible text via aria-hidden', async () => {
+		render(PersonHoverCard, {
+			personId: 'p-aug',
+			cardId: 'card-1',
+			position: POSITION,
+			state: { status: 'loaded', person: AUGUSTE, relationships: [] }
+		});
+		const hidden = [
+			...document.querySelectorAll(
+				'[data-testid="person-hover-card-dates"] span[aria-hidden="true"]'
+			)
+		].map((el) => el.textContent?.trim());
+		expect(hidden).toContain('*');
+		expect(hidden).toContain('†');
+	});
+
+	it('omits the life-date line when both dates are missing', async () => {
+		const noDates = {
+			...AUGUSTE,
+			birthDate: undefined,
+			birthDatePrecision: 'UNKNOWN',
+			deathDate: undefined,
+			deathDatePrecision: 'UNKNOWN'
+		} as unknown as Person;
 		render(PersonHoverCard, {
 			personId: 'p-aug',
 			cardId: 'card-1',

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

@@ -306,6 +306,12 @@ function selectItem(item: Person) {
 		</a>
 	{:else}
 		{#each model.items as person, i (person.id)}
+			{@const lifeDates = formatLifeDateRange(
+				person.birthDate,
+				person.birthDatePrecision,
+				person.deathDate,
+				person.deathDatePrecision
+			)}
 			<div
 				class={[
 					'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas',
@@ -325,9 +331,11 @@ function selectItem(item: Person) {
 				}}
 			>
 				<span class="truncate font-serif text-base text-ink">{person.displayName}</span>
-				{#if formatLifeDateRange(person.birthYear, person.deathYear)}
-					<span class="truncate font-sans text-xs text-ink-3">
-						{formatLifeDateRange(person.birthYear, person.deathYear)}
+				{#if lifeDates}
+					<!-- whitespace-normal: a DAY-precision range (~37 chars) wraps to a second
+					     line at 320px instead of being clipped by truncate. -->
+					<span class="font-sans text-xs whitespace-normal text-ink-3">
+						{lifeDates}
 					</span>
 				{/if}
 			</div>

frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts

@@ -103,11 +103,18 @@ describe('MentionDropdown', () => {
 		expect(option?.getAttribute('aria-selected')).toBe('true');
 	});
 
-	it('renders the life-date range when birthYear or deathYear is present', async () => {
+	it('renders the life-date range when birth or death date is present', async () => {
 		render(MentionDropdown, {
 			props: {
 				model: baseModel({
-					items: [makePerson('p1', 'Anna', { birthYear: 1899, deathYear: 1972 })]
+					items: [
+						makePerson('p1', 'Anna', {
+							birthDate: '1899-01-01',
+							birthDatePrecision: 'YEAR',
+							deathDate: '1972-01-01',
+							deathDatePrecision: 'YEAR'
+						})
+					]
 				})
 			}
 		});
@@ -115,6 +122,25 @@ describe('MentionDropdown', () => {
 		await expect.element(page.getByText(/1899/)).toBeVisible();
 	});
 
+	it('renders a DAY-precision birth date as a full date without clipping it away', async () => {
+		render(MentionDropdown, {
+			props: {
+				model: baseModel({
+					items: [
+						makePerson('p1', 'Anna', {
+							birthDate: '1901-03-14',
+							birthDatePrecision: 'DAY',
+							deathDate: '1944-11-02',
+							deathDatePrecision: 'DAY'
+						})
+					]
+				})
+			}
+		});
+
+		await expect.element(page.getByText(/14\. März 1901/)).toBeVisible();
+	});
+
 	it('falls back to a default position when clientRect returns null', async () => {
 		render(MentionDropdown, {
 			props: {

frontend/src/lib/shared/discussion/PersonMentionEditor.svelte.spec.ts

@@ -35,8 +35,10 @@ const AUGUSTE: Person = {
 	personType: 'PERSON',
 	familyMember: false,
 	provisional: false,
-	birthYear: 1882,
-	deathYear: 1944
+	birthDate: '1882-01-01',
+	birthDatePrecision: 'YEAR',
+	deathDate: '1944-01-01',
+	deathDatePrecision: 'YEAR'
 };
 
 const ANNA: Person = {
@@ -47,7 +49,8 @@ const ANNA: Person = {
 	personType: 'PERSON',
 	familyMember: false,
 	provisional: false,
-	birthYear: 1860
+	birthDate: '1860-01-01',
+	birthDatePrecision: 'YEAR'
 };
 
 function mockFetchWithPersons(persons: Person[] = [AUGUSTE, ANNA]) {

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
-import { formatLifeDateRange } from '$lib/person/personLifeDates';
+import { formatLifeDate } from '$lib/person/personLifeDates';
 import PersonTypeBadge from '$lib/person/PersonTypeBadge.svelte';
+import type { DatePrecision } from '$lib/shared/utils/documentDate';
 
 let {
 	person,
@@ -15,12 +16,17 @@ let {
 		personType?: string | null;
 		title?: string | null;
 		alias?: string | null;
-		birthYear?: number | null;
-		deathYear?: number | null;
+		birthDate?: string | null;
+		birthDatePrecision?: DatePrecision | null;
+		deathDate?: string | null;
+		deathDatePrecision?: DatePrecision | null;
 		notes?: string | null;
 	};
 	canWrite: boolean;
 } = $props();
+
+const birthText = $derived(formatLifeDate(person.birthDate, person.birthDatePrecision));
+const deathText = $derived(formatLifeDate(person.deathDate, person.deathDatePrecision));
 </script>
 
 <div class="overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
@@ -91,10 +97,16 @@ let {
 			<p class="mb-1 text-center font-sans text-sm text-ink-2 italic">„{person.alias}"</p>
 		{/if}
 
-		<!-- Life dates — centered -->
-		{#if person.birthYear || person.deathYear}
+		<!-- Life dates — centered; glyphs aria-hidden so screen readers only hear the dates -->
+		{#if birthText || deathText}
 			<p class="mb-4 text-center font-sans text-sm text-ink-3">
-				{formatLifeDateRange(person.birthYear, person.deathYear)}
+				{#if birthText}
+					<span aria-hidden="true">*</span> {birthText}
+				{/if}
+				{#if birthText && deathText}–{/if}
+				{#if deathText}
+					<span aria-hidden="true">†</span> {deathText}
+				{/if}
 			</p>
 		{:else}
 			<div class="mb-4"></div>

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

@@ -82,15 +82,84 @@ describe('PersonCard', () => {
 		await expect.element(page.getByText(/Annerl/)).toBeVisible();
 	});
 
-	it('renders the life-date range when birthYear or deathYear are present', async () => {
+	it('renders DAY-precision life dates as full localized dates', async () => {
 		render(PersonCard, {
 			props: {
-				person: { ...basePerson, birthYear: 1899, deathYear: 1972 },
+				person: {
+					...basePerson,
+					birthDate: '1901-03-14',
+					birthDatePrecision: 'DAY' as const,
+					deathDate: '1944-11-02',
+					deathDatePrecision: 'DAY' as const
+				},
 				canWrite: false
 			}
 		});
 
-		await expect.element(page.getByText(/1899/)).toBeVisible();
+		await expect.element(page.getByText(/14\. März 1901/)).toBeVisible();
+		await expect.element(page.getByText(/2\. November 1944/)).toBeVisible();
+	});
+
+	it('wraps the * and † glyphs in aria-hidden spans', async () => {
+		const { container } = render(PersonCard, {
+			props: {
+				person: {
+					...basePerson,
+					birthDate: '1901-03-14',
+					birthDatePrecision: 'DAY' as const,
+					deathDate: '1944-11-02',
+					deathDatePrecision: 'DAY' as const
+				},
+				canWrite: false
+			}
+		});
+
+		const hidden = [...container.querySelectorAll('span[aria-hidden="true"]')].map((el) =>
+			el.textContent?.trim()
+		);
+		expect(hidden).toContain('*');
+		expect(hidden).toContain('†');
+	});
+
+	it('renders birth-only without dash or dagger', async () => {
+		const { container } = render(PersonCard, {
+			props: {
+				person: {
+					...basePerson,
+					birthDate: '1901-03-14',
+					birthDatePrecision: 'DAY' as const
+				},
+				canWrite: false
+			}
+		});
+
+		await expect.element(page.getByText(/14\. März 1901/)).toBeVisible();
+		expect(container.textContent).not.toContain('–');
+		expect(container.textContent).not.toContain('†');
+	});
+
+	it('renders APPROX-precision legacy dates with the ca. prefix', async () => {
+		render(PersonCard, {
+			props: {
+				person: {
+					...basePerson,
+					birthDate: '1882-01-01',
+					birthDatePrecision: 'APPROX' as const
+				},
+				canWrite: false
+			}
+		});
+
+		await expect.element(page.getByText(/ca\. 1882/)).toBeVisible();
+	});
+
+	it('renders no life-date line when both dates are missing', async () => {
+		const { container } = render(PersonCard, {
+			props: { person: basePerson, canWrite: false }
+		});
+
+		expect(container.textContent).not.toContain('*');
+		expect(container.textContent).not.toContain('†');
 	});
 
 	it('renders the notes section when notes are provided', async () => {