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/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',