feat(timeline): add the EventCluster card + show-more/less i18n

A curated event with linked letters renders as one contained card: the
event is the header (accent glyph, title, date · provenance, count, and a
curator edit link), its letters sit inside as compact .lcard.ev cards. The
first CLUSTER_PREVIEW (5) show, then a keyboard-operable show-more/less
toggle reveals the rest. A cross-year card (no event prop) gets a plain
'✉ title' text header with no edit link. Titles render through default
{...} escaping. Adds timeline_bucket_show_more/less keys to de/en/es.

Refs #850

frontend/src/lib/timeline/EventCluster.svelte.spec.ts

@@ -0,0 +1,109 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { tick } from 'svelte';
+import EventCluster from './EventCluster.svelte';
+import { makeEntry } from './test-factories';
+import type { components } from '$lib/generated/api';
+
+type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
+
+afterEach(() => cleanup());
+
+const EV_ID = 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa';
+
+const makeEvent = (overrides: Partial<TimelineEntryDTO> = {}): TimelineEntryDTO =>
+	makeEntry({
+		kind: 'EVENT',
+		type: 'PERSONAL',
+		documentId: undefined,
+		eventId: EV_ID,
+		eventDate: '1916-07-06',
+		precision: 'DAY',
+		title: 'Ein gewaltiger Stadtbrand',
+		...overrides
+	});
+
+const letters = (n: number): TimelineEntryDTO[] =>
+	Array.from({ length: n }, (_, i) =>
+		makeEntry({ kind: 'LETTER', documentId: `doc-${i}`, title: `Brief ${i}`, linkedEventId: EV_ID })
+	);
+
+describe('EventCluster — contained event card (#850)', () => {
+	it('renders a data-testid event-card with the event title once (REQ-002)', () => {
+		render(EventCluster, { letters: letters(2), event: makeEvent() });
+		expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
+		const occurrences = (document.body.textContent?.match(/Ein gewaltiger Stadtbrand/g) ?? [])
+			.length;
+		expect(occurrences).toBe(1);
+	});
+
+	it('shows the event-edit link for a curator on a curated event (REQ-002)', () => {
+		render(EventCluster, { letters: letters(2), event: makeEvent(), canWrite: true });
+		const edit = document.querySelector('[data-testid="event-edit"]') as HTMLAnchorElement;
+		expect(edit).not.toBeNull();
+		expect(edit.getAttribute('href')).toBe(`/zeitstrahl/events/${EV_ID}/edit`);
+	});
+
+	it('hides the event-edit link when canWrite is false', () => {
+		render(EventCluster, { letters: letters(2), event: makeEvent(), canWrite: false });
+		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
+	});
+
+	it('hides the event-edit link for a derived event even with canWrite', () => {
+		render(EventCluster, {
+			letters: letters(2),
+			event: makeEvent({ derived: true, eventId: undefined, derivedType: 'BIRTH' }),
+			canWrite: true
+		});
+		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
+	});
+
+	it('renders its letters as compact a.lcard.ev cards (REQ-002)', () => {
+		render(EventCluster, { letters: letters(2), event: makeEvent() });
+		expect(document.querySelectorAll('a.lcard.ev').length).toBeGreaterThan(0);
+	});
+
+	it('shows the first 5 of 8 letters + a show-more toggle that expands to 8 then back to 5 (REQ-003)', async () => {
+		render(EventCluster, { letters: letters(8), event: makeEvent() });
+		expect(document.querySelectorAll('a.lcard').length).toBe(5);
+		const toggle = document.querySelector('[data-testid="bucket-show-more"]') as HTMLButtonElement;
+		expect(toggle).not.toBeNull();
+		expect(toggle.getAttribute('aria-expanded')).toBe('false');
+		expect(toggle.getBoundingClientRect().height).toBeGreaterThanOrEqual(44);
+
+		toggle.click();
+		await tick();
+		expect(document.querySelectorAll('a.lcard').length).toBe(8);
+		expect(toggle.getAttribute('aria-expanded')).toBe('true');
+
+		toggle.click();
+		await tick();
+		expect(document.querySelectorAll('a.lcard').length).toBe(5);
+	});
+
+	it('renders no show-more toggle when the cluster holds 5 or fewer letters', () => {
+		render(EventCluster, { letters: letters(5), event: makeEvent() });
+		expect(document.querySelector('[data-testid="bucket-show-more"]')).toBeNull();
+	});
+
+	it('renders a cross-year text header (✉ title, no event-edit, no pill) when no event is given (REQ-004)', () => {
+		render(EventCluster, {
+			letters: letters(2),
+			title: 'Briefe von der Front',
+			canWrite: true
+		});
+		expect(document.querySelector('[data-testid="event-card"]')).not.toBeNull();
+		expect(document.body.textContent).toContain('✉');
+		expect(document.body.textContent).toContain('Briefe von der Front');
+		expect(document.querySelector('[data-testid="event-edit"]')).toBeNull();
+	});
+
+	it('renders an HTML-bearing event title verbatim as text, never as markup (REQ-010)', () => {
+		render(EventCluster, {
+			letters: letters(1),
+			event: makeEvent({ title: '<img src=x onerror=alert(1)>' })
+		});
+		expect(document.querySelector('[data-testid="event-card"] img')).toBeNull();
+		expect(document.body.textContent).toContain('<img src=x onerror=alert(1)>');
+	});
+});