feat(persons): add PersonTypeSelector segmented control component

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

frontend/src/lib/components/PersonTypeSelector.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { untrack } from 'svelte';
+import { radioGroupNav } from '$lib/actions/radioGroupNav';
+import { m } from '$lib/paraglide/messages.js';
+
+const TYPES = ['PERSON', 'INSTITUTION', 'GROUP', 'UNKNOWN'] as const;
+type PersonType = (typeof TYPES)[number];
+
+let { value = 'PERSON', name = 'personType' }: { value?: string; name?: string } = $props();
+
+let selected = $state<PersonType>(
+	untrack(() => (TYPES.includes(value as PersonType) ? (value as PersonType) : 'PERSON'))
+);
+
+const labels: Record<PersonType, () => string> = {
+	PERSON: m.person_type_PERSON,
+	INSTITUTION: m.person_type_INSTITUTION,
+	GROUP: m.person_type_GROUP,
+	UNKNOWN: m.person_type_UNKNOWN
+};
+
+function select(type: PersonType) {
+	selected = type;
+}
+</script>
+
+<div role="radiogroup" class="grid grid-cols-2 gap-2 sm:grid-cols-4" use:radioGroupNav>
+	{#each TYPES as type (type)}
+		<button
+			type="button"
+			role="radio"
+			aria-checked={selected === type}
+			tabindex={selected === type ? 0 : -1}
+			onclick={() => select(type)}
+			class="min-h-[48px] cursor-pointer rounded-sm border px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none {selected === type
+				? 'border-brand-navy bg-brand-navy text-white'
+				: 'border-brand-sand bg-white text-brand-navy hover:border-brand-navy/50'}"
+		>
+			{labels[type]()}
+		</button>
+	{/each}
+</div>
+
+<input type="hidden" name={name} value={selected} />
+
+<div class="sr-only" aria-live="polite">
+	{m.a11y_type_changed({ type: labels[selected]() })}
+</div>