diff --git a/frontend/src/lib/components/PersonMentionEditor.svelte b/frontend/src/lib/components/PersonMentionEditor.svelte
new file mode 100644
index 00000000..45029bf9
--- /dev/null
+++ b/frontend/src/lib/components/PersonMentionEditor.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+import { onDestroy, tick } from 'svelte';
+import { detectPersonMention } from '$lib/utils/personMention';
+import { formatLifeDateRange } from '$lib/utils/personLifeDates';
+import { m } from '$lib/paraglide/messages.js';
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
+type PersonMention = components['schemas']['PersonMention'];
+
+type Props = {
+	value: string;
+	mentionedPersons: PersonMention[];
+	placeholder?: string;
+	rows?: number;
+	disabled?: boolean;
+	onfocus?: () => void;
+	onblur?: () => void;
+};
+
+let {
+	value = $bindable(''),
+	mentionedPersons = $bindable([]),
+	placeholder = '',
+	rows = 1,
+	disabled = false,
+	onfocus,
+	onblur
+}: Props = $props();
+
+let query: string | null = $state(null);
+let results: Person[] = $state([]);
+let highlightedIndex = $state(0);
+let mentionStart = $state(0);
+
+let textarea: HTMLTextAreaElement | null = null;
+let debounceTimer: ReturnType<typeof setTimeout> | undefined;
+
+function attachTextarea(node: HTMLTextAreaElement) {
+	textarea = node;
+	return () => {
+		textarea = null;
+	};
+}
+
+function handleInput() {
+	if (!textarea) return;
+	const cursorPos = textarea.selectionStart;
+	const detected = detectPersonMention(value, cursorPos);
+
+	if (detected === null) {
+		closePopup();
+		return;
+	}
+
+	const before = value.slice(0, cursorPos);
+	mentionStart = before.lastIndexOf('@');
+
+	if (query !== detected) {
+		query = detected;
+		highlightedIndex = 0;
+		scheduleSearch(detected);
+	}
+}
+
+function scheduleSearch(q: string) {
+	clearTimeout(debounceTimer);
+	if (!q.trim()) {
+		// Empty query: keep popup open with last results so the user can browse,
+		// but don't fire a backend call until they actually type something.
+		results = [];
+		return;
+	}
+	debounceTimer = setTimeout(async () => {
+		try {
+			const res = await fetch(`/api/persons?q=${encodeURIComponent(q)}`);
+			if (res.ok) {
+				const data: Person[] = await res.json();
+				results = data.slice(0, 5);
+			} else {
+				results = [];
+			}
+		} catch {
+			results = [];
+		}
+	}, 200);
+}
+
+async function selectPerson(person: Person) {
+	if (!textarea) return;
+
+	const displayName = person.displayName ?? '';
+	const replacement = `@${displayName} `;
+	const cursorPos = textarea.selectionStart;
+	const before = value.slice(0, mentionStart);
+	const after = value.slice(cursorPos);
+	value = before + replacement + after;
+
+	if (!mentionedPersons.some((m) => m.personId === person.id)) {
+		mentionedPersons = [...mentionedPersons, { personId: person.id!, displayName }];
+	}
+
+	closePopup();
+
+	await tick();
+	if (!textarea) return;
+	const pos = mentionStart + replacement.length;
+	textarea.selectionStart = pos;
+	textarea.selectionEnd = pos;
+	textarea.focus();
+}
+
+function closePopup() {
+	query = null;
+	results = [];
+	highlightedIndex = 0;
+	clearTimeout(debounceTimer);
+}
+
+function handleKeydown(e: KeyboardEvent) {
+	if (query === null) return;
+
+	if (e.key === 'Escape') {
+		e.preventDefault();
+		closePopup();
+		return;
+	}
+
+	if (e.key === 'ArrowDown') {
+		e.preventDefault();
+		if (results.length > 0) {
+			highlightedIndex = (highlightedIndex + 1) % results.length;
+		}
+		return;
+	}
+
+	if (e.key === 'ArrowUp') {
+		e.preventDefault();
+		if (results.length > 0) {
+			highlightedIndex = (highlightedIndex - 1 + results.length) % results.length;
+		}
+		return;
+	}
+
+	if (e.key === 'Enter' && results.length > 0) {
+		e.preventDefault();
+		selectPerson(results[highlightedIndex]);
+		return;
+	}
+}
+
+onDestroy(() => clearTimeout(debounceTimer));
+
+const popupOpen = $derived(query !== null);
+</script>
+
+<div class="relative">
+	<textarea
+		{@attach attachTextarea}
+		class="w-full resize-none border-none bg-transparent font-serif text-base leading-relaxed text-ink outline-none placeholder:text-ink-3"
+		rows={rows}
+		placeholder={placeholder}
+		disabled={disabled}
+		bind:value={value}
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+		onfocus={onfocus}
+		onblur={onblur}
+	></textarea>
+
+	{#if popupOpen}
+		<div
+			class="absolute z-20 mt-1 w-72 overflow-hidden rounded-sm border border-line bg-surface shadow-lg"
+			role="listbox"
+			aria-label={m.person_mention_btn_label()}
+		>
+			{#if results.length === 0}
+				<p class="px-3 py-2 font-sans text-sm text-ink-3">{m.person_mention_popup_empty()}</p>
+			{:else}
+				{#each results as person, i (person.id)}
+					<div
+						class={[
+							'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas',
+							i === highlightedIndex && 'bg-canvas'
+						]}
+						role="option"
+						aria-selected={i === highlightedIndex}
+						data-test-person-id={person.id}
+						tabindex="-1"
+						onmousedown={(e) => {
+							e.preventDefault();
+							selectPerson(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)}
+							</span>
+						{/if}
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts b/frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts
new file mode 100644
index 00000000..25362537
--- /dev/null
+++ b/frontend/src/lib/components/PersonMentionEditor.svelte.spec.ts
@@ -0,0 +1,348 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import PersonMentionEditorHost from './PersonMentionEditor.test-host.svelte';
+import type { components } from '$lib/generated/api';
+
+type Person = components['schemas']['Person'];
+type PersonMention = components['schemas']['PersonMention'];
+
+const waitForDebounce = () => new Promise((r) => setTimeout(r, 250));
+const tick = () => new Promise((r) => setTimeout(r, 0));
+
+const AUGUSTE: Person = {
+	id: 'p-aug',
+	firstName: 'Auguste',
+	lastName: 'Raddatz',
+	displayName: 'Auguste Raddatz',
+	birthYear: 1882,
+	deathYear: 1944
+} as unknown as Person;
+
+const ANNA: Person = {
+	id: 'p-anna',
+	firstName: 'Anna',
+	lastName: 'Schmidt',
+	displayName: 'Anna Schmidt',
+	birthYear: 1860
+} as unknown as Person;
+
+function mockFetchWithPersons(persons: Person[] = [AUGUSTE, ANNA]) {
+	const fetchMock = vi
+		.fn()
+		.mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue(persons) });
+	vi.stubGlobal('fetch', fetchMock);
+	return fetchMock;
+}
+
+function mockFetchEmpty() {
+	const fetchMock = vi.fn().mockResolvedValue({ ok: true, json: vi.fn().mockResolvedValue([]) });
+	vi.stubGlobal('fetch', fetchMock);
+	return fetchMock;
+}
+
+function getTextarea(): HTMLTextAreaElement {
+	return document.querySelector('textarea')!;
+}
+
+function clickOption(personId: string) {
+	const opt = document.querySelector(
+		`[role="option"][data-test-person-id="${personId}"]`
+	) as HTMLElement;
+	opt.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
+}
+
+type Snapshot = { value: string; mentionedPersons: PersonMention[] };
+
+function renderHost(initial: { value?: string; mentionedPersons?: PersonMention[] } = {}) {
+	let snapshot: Snapshot = {
+		value: initial.value ?? '',
+		mentionedPersons: initial.mentionedPersons ?? []
+	};
+	render(PersonMentionEditorHost, {
+		initialValue: initial.value ?? '',
+		initialMentions: initial.mentionedPersons ?? [],
+		onChange: (snap: Snapshot) => {
+			snapshot = snap;
+		}
+	});
+	return {
+		get snapshot() {
+			return snapshot;
+		}
+	};
+}
+
+afterEach(() => {
+	cleanup();
+	vi.unstubAllGlobals();
+});
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('PersonMentionEditor — rendering', () => {
+	it('renders the textarea with placeholder', async () => {
+		render(PersonMentionEditorHost, {
+			initialValue: '',
+			initialMentions: [],
+			placeholder: 'Transkription…',
+			onChange: () => {}
+		});
+		await expect.element(page.getByPlaceholder('Transkription…')).toBeInTheDocument();
+	});
+
+	it('reflects bound initial value', async () => {
+		render(PersonMentionEditorHost, {
+			initialValue: 'Hallo Welt',
+			initialMentions: [],
+			onChange: () => {}
+		});
+		await expect.element(page.getByRole('textbox')).toHaveValue('Hallo Welt');
+	});
+});
+
+// ─── Typeahead opens on @ ─────────────────────────────────────────────────────
+
+describe('PersonMentionEditor — typeahead', () => {
+	it('opens the popup when typing @ + query and shows results', async () => {
+		mockFetchWithPersons();
+		renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Aug';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+
+		await waitForDebounce();
+
+		await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
+	});
+
+	it('hits /api/persons?q= with the typed query', async () => {
+		const fetchMock = mockFetchWithPersons();
+		renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Aug';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+
+		await waitForDebounce();
+
+		expect(fetchMock).toHaveBeenCalledWith(expect.stringContaining('/api/persons?q=Aug'));
+	});
+
+	it('shows life dates next to the name in the dropdown', async () => {
+		mockFetchWithPersons();
+		renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Aug';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		await expect.element(page.getByText('* 1882 – † 1944')).toBeInTheDocument();
+	});
+
+	it('shows empty state when no persons match', async () => {
+		mockFetchEmpty();
+		renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@xyz';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		await expect.element(page.getByText('Keine Personen gefunden')).toBeInTheDocument();
+	});
+
+	it('keeps the popup open when the query has a trailing space (multi-word names)', async () => {
+		mockFetchWithPersons();
+		renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Auguste ';
+		ta.selectionStart = 9;
+		ta.selectionEnd = 9;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		await expect.element(page.getByText('Auguste Raddatz')).toBeInTheDocument();
+	});
+});
+
+// ─── Selection writes text + sidecar ─────────────────────────────────────────
+
+describe('PersonMentionEditor — selecting a person', () => {
+	it('inserts @DisplayName followed by a trailing space into the textarea', async () => {
+		mockFetchWithPersons();
+		const host = renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Aug';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		clickOption('p-aug');
+		await tick();
+
+		expect(host.snapshot.value).toBe('@Auguste Raddatz ');
+	});
+
+	it('pushes {personId, displayName} into the bound mentionedPersons array', async () => {
+		mockFetchWithPersons();
+		const host = renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Aug';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		clickOption('p-aug');
+		await tick();
+
+		expect(host.snapshot.mentionedPersons).toEqual([
+			{ personId: 'p-aug', displayName: 'Auguste Raddatz' }
+		]);
+	});
+
+	it('does not duplicate the sidecar entry when the same person is selected twice', async () => {
+		mockFetchWithPersons();
+		const host = renderHost({
+			value: '@Auguste Raddatz ',
+			mentionedPersons: [{ personId: 'p-aug', displayName: 'Auguste Raddatz' }]
+		});
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Auguste Raddatz @Aug';
+		ta.selectionStart = ta.value.length;
+		ta.selectionEnd = ta.value.length;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		clickOption('p-aug');
+		await tick();
+
+		expect(host.snapshot.mentionedPersons).toHaveLength(1);
+	});
+});
+
+// ─── Keyboard navigation (B11b) ──────────────────────────────────────────────
+
+describe('PersonMentionEditor — keyboard navigation (B11b)', () => {
+	it('ArrowDown / ArrowUp cycle the highlighted result', async () => {
+		mockFetchWithPersons();
+		renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@A';
+		ta.selectionStart = 2;
+		ta.selectionEnd = 2;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		const optAuguste = document.querySelector(
+			'[role="option"][data-test-person-id="p-aug"]'
+		) as HTMLElement;
+		const optAnna = document.querySelector(
+			'[role="option"][data-test-person-id="p-anna"]'
+		) as HTMLElement;
+
+		expect(optAuguste.getAttribute('aria-selected')).toBe('true');
+		expect(optAnna.getAttribute('aria-selected')).toBe('false');
+
+		ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+		await tick();
+
+		expect(optAuguste.getAttribute('aria-selected')).toBe('false');
+		expect(optAnna.getAttribute('aria-selected')).toBe('true');
+
+		ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+		await tick();
+
+		expect(optAuguste.getAttribute('aria-selected')).toBe('true');
+		expect(optAnna.getAttribute('aria-selected')).toBe('false');
+	});
+
+	it('Enter selects the currently highlighted result', async () => {
+		mockFetchWithPersons();
+		const host = renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@A';
+		ta.selectionStart = 2;
+		ta.selectionEnd = 2;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+		await tick();
+		ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+		await tick();
+
+		expect(host.snapshot.mentionedPersons).toEqual([
+			{ personId: 'p-anna', displayName: 'Anna Schmidt' }
+		]);
+	});
+
+	it('Escape closes the popup without inserting anything', async () => {
+		mockFetchWithPersons();
+		const host = renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Aug';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		ta.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+		await tick();
+
+		await expect.element(page.getByText('Auguste Raddatz')).not.toBeInTheDocument();
+		expect(host.snapshot.value).toBe('@Aug');
+		expect(host.snapshot.mentionedPersons).toEqual([]);
+	});
+});
+
+// ─── Touch target (WCAG 2.2 AA) ──────────────────────────────────────────────
+
+describe('PersonMentionEditor — touch target', () => {
+	it('each result row has min-h-[44px] (WCAG 2.2 AA)', async () => {
+		mockFetchWithPersons();
+		renderHost();
+
+		const ta = getTextarea();
+		ta.focus();
+		ta.value = '@Aug';
+		ta.selectionStart = 4;
+		ta.selectionEnd = 4;
+		ta.dispatchEvent(new Event('input', { bubbles: true }));
+		await waitForDebounce();
+
+		const option = document.querySelector('[role="option"]') as HTMLElement;
+		expect(option).not.toBeNull();
+		expect(option.className).toContain('min-h-[44px]');
+	});
+});
diff --git a/frontend/src/lib/components/PersonMentionEditor.test-host.svelte b/frontend/src/lib/components/PersonMentionEditor.test-host.svelte
new file mode 100644
index 00000000..e608d694
--- /dev/null
+++ b/frontend/src/lib/components/PersonMentionEditor.test-host.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import PersonMentionEditor from './PersonMentionEditor.svelte';
+import type { components } from '$lib/generated/api';
+
+type PersonMention = components['schemas']['PersonMention'];
+
+type Props = {
+	initialValue?: string;
+	initialMentions?: PersonMention[];
+	placeholder?: string;
+	onChange: (snapshot: { value: string; mentionedPersons: PersonMention[] }) => void;
+};
+
+let { initialValue = '', initialMentions = [], placeholder, onChange }: Props = $props();
+
+// initial* props seed mount-time state; reading them inside untrack signals
+// the intentional one-shot capture and silences state_referenced_locally.
+let value = $state(untrack(() => initialValue));
+let mentionedPersons = $state<PersonMention[]>(untrack(() => [...initialMentions]));
+
+$effect(() => {
+	onChange({ value, mentionedPersons: [...mentionedPersons] });
+});
+</script>
+
+<PersonMentionEditor
+	bind:value={value}
+	bind:mentionedPersons={mentionedPersons}
+	placeholder={placeholder}
+/>