feat(fend): skeleton implementation of the form from XML

src/lib/components/fields/SubspeciesField.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { SubspeciesField } from '$lib/types';
+	import { species } from '$lib/data';
+	import { slugify } from '$lib/utils/slugify';
+
+	let { field, value = '', onChange, data }: {
+		field: SubspeciesField;
+		value: string;
+		onChange: (v: string) => void;
+		data: Record<string, unknown>;
+	} = $props();
+
+	let currentSpecies = $derived(species.find((s) => s.id === data[slugify('Species')]));
+	let subs = $derived(currentSpecies?.subspecies ?? []);
+	let label = $derived(currentSpecies?.subspeciesLabel ?? field.label);
+	let selected = $derived(subs.find((s) => s.id === value));
+</script>
+
+{#if subs.length > 0}
+	<div class="block">
+		<label class="block">
+			<span class="text-sm font-medium">{label}</span>
+			<select
+				{value}
+				onchange={(e) => onChange((e.target as HTMLSelectElement).value)}
+				class="mt-1 block w-full rounded px-3 py-2 text-sm"
+				style="background: var(--bg-input); border: 1px solid var(--border); color: var(--text);"
+			>
+				<option value="">—</option>
+				{#each subs as sub}
+					<option value={sub.id}>{sub.name}</option>
+				{/each}
+			</select>
+		</label>
+		{#if selected?.description}
+			<p class="mt-1 text-sm italic" style="color: var(--text-muted);">{selected.description}</p>
+		{/if}
+	</div>
+{/if}