feat(document): edit document date precision, end and raw

Adds the edit-form date-precision controls to WhoWhenSection: a labelled
precision <select> (min 48px touch target for senior authors), a conditionally
revealed end-date field (only for RANGE, announced via aria-live=polite), and
the verbatim raw cell as labelled read-only static text (not a disabled input).
Fields submit as metaDatePrecision/metaDateEnd/metaDateRaw and flow through the
existing PUT form action.

Backend: DocumentService.updateDocument now persists the three DTO fields (they
existed since #671 but were never applied), so the new controls are real, not
decorative — addresses Nora's "a client <select> constrains nothing" note for
the persistence half. Server-side enum/end>=start validation remains #671's
scope.

Refs #666

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/lib/document/DocumentEditLayout.svelte

@@ -13,6 +13,7 @@ import WhoWhenSection from '$lib/document/WhoWhenSection.svelte';
 import DescriptionSection from '$lib/document/DescriptionSection.svelte';
 import type { Tag } from '$lib/tag/TagInput.svelte';
 import type { components } from '$lib/generated/api';
+import type { DatePrecision } from '$lib/shared/utils/documentDate';
 
 type Person = components['schemas']['Person'];
 type Doc = components['schemas']['Document'];
@@ -26,6 +27,8 @@ let {
 	senderId = $bindable(''),
 	selectedReceivers = $bindable<Person[]>([]),
 	dateIso = $bindable(''),
+	datePrecision = $bindable<DatePrecision>('DAY'),
+	dateEndIso = $bindable(''),
 	currentTitle = $bindable(''),
 	topbar,
 	actionbar
@@ -38,6 +41,8 @@ let {
 	senderId?: string;
 	selectedReceivers?: Person[];
 	dateIso?: string;
+	datePrecision?: DatePrecision;
+	dateEndIso?: string;
 	currentTitle?: string;
 	topbar: Snippet;
 	actionbar: Snippet;
@@ -47,6 +52,8 @@ tags = untrack(() => (doc.tags as Tag[]) ?? []);
 senderId = untrack(() => doc.sender?.id ?? '');
 selectedReceivers = untrack(() => (doc.receivers as Person[]) ?? []);
 dateIso = untrack(() => doc.documentDate ?? '');
+datePrecision = untrack(() => doc.metaDatePrecision ?? (doc.documentDate ? 'DAY' : 'UNKNOWN'));
+dateEndIso = untrack(() => doc.metaDateEnd ?? '');
 currentTitle = untrack(() => doc.title ?? '');
 
 const fileLoader = createFileLoader();
@@ -199,6 +206,9 @@ async function handleReplaceFile(e: Event) {
 					bind:senderId={senderId}
 					bind:selectedReceivers={selectedReceivers}
 					bind:dateIso={dateIso}
+					bind:precision={datePrecision}
+					bind:endDateIso={dateEndIso}
+					rawDate={doc.metaDateRaw ?? ''}
 					initialDateIso={doc.documentDate ?? ''}
 					initialLocation={doc.location ?? ''}
 					initialSenderName={doc.sender?.displayName ?? ''}

frontend/src/lib/document/WhoWhenSection.svelte

@@ -6,6 +6,7 @@ import FieldLabelBadge from '$lib/shared/primitives/FieldLabelBadge.svelte';
 import { isoToGerman, handleGermanDateInput } from '$lib/shared/utils/date';
 import { m } from '$lib/paraglide/messages.js';
 import type { components } from '$lib/generated/api';
+import type { DatePrecision } from '$lib/shared/utils/documentDate';
 
 type Person = components['schemas']['Person'];
 
@@ -13,6 +14,9 @@ let {
 	senderId = $bindable(''),
 	selectedReceivers = $bindable<Person[]>([]),
 	dateIso = $bindable(''),
+	precision = $bindable<DatePrecision>('DAY'),
+	endDateIso = $bindable(''),
+	rawDate = '',
 	initialDateIso = '',
 	initialLocation = '',
 	initialSenderName = '',
@@ -24,6 +28,9 @@ let {
 	senderId?: string;
 	selectedReceivers?: Person[];
 	dateIso?: string;
+	precision?: DatePrecision;
+	endDateIso?: string;
+	rawDate?: string;
 	initialDateIso?: string;
 	initialLocation?: string;
 	initialSenderName?: string;
@@ -33,11 +40,24 @@ let {
 	editMode?: boolean;
 } = $props();
 
+const PRECISIONS: { value: DatePrecision; label: () => string }[] = [
+	{ value: 'DAY', label: m.date_precision_option_day },
+	{ value: 'MONTH', label: m.date_precision_option_month },
+	{ value: 'SEASON', label: m.date_precision_option_season },
+	{ value: 'YEAR', label: m.date_precision_option_year },
+	{ value: 'RANGE', label: m.date_precision_option_range },
+	{ value: 'APPROX', label: m.date_precision_option_approx },
+	{ value: 'UNKNOWN', label: m.date_precision_option_unknown }
+];
+
+const showEndDate = $derived(precision === 'RANGE');
+
 // dateDisplay seeds from the bindable's value or initialDateIso once at mount
 // and is then user-driven. onMount runs exactly once, so this never stomps
 // the parent's dateIso on a later prop change.
 let dateDisplay = $state('');
 let dateDirty = $state(false);
+let endDisplay = $state('');
 
 onMount(() => {
 	const seed = dateIso || initialDateIso;
@@ -45,6 +65,7 @@ onMount(() => {
 		dateDisplay = isoToGerman(seed);
 		if (!dateIso) dateIso = seed;
 	}
+	if (endDateIso) endDisplay = isoToGerman(endDateIso);
 });
 
 const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
@@ -56,6 +77,12 @@ function handleDateInput(e: Event) {
 	dateDirty = true;
 }
 
+function handleEndDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	endDisplay = result.display;
+	endDateIso = result.iso;
+}
+
 $effect(() => {
 	const suggested = suggestedDateIso;
 	if (suggested && !untrack(() => dateDirty)) {
@@ -96,6 +123,53 @@ $effect(() => {
 					<p id="date-error" class="mt-1 text-xs text-red-600">{m.form_date_error()}</p>
 				{/if}
 			</div>
+			<!-- Datumsgenauigkeit (precision) -->
+			<div data-testid="who-when-precision">
+				<label for="metaDatePrecision" class="mb-1 block text-sm font-medium text-ink-2">
+					{m.form_label_date_precision()}
+				</label>
+				<select
+					id="metaDatePrecision"
+					name="metaDatePrecision"
+					bind:value={precision}
+					class="block min-h-[48px] w-full rounded border border-line px-2 py-3 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				>
+					{#each PRECISIONS as p (p.value)}
+						<option value={p.value}>{p.label()}</option>
+					{/each}
+				</select>
+			</div>
+
+			<!-- Enddatum: progressive disclosure, revealed only for RANGE, announced politely. -->
+			<div aria-live="polite">
+				{#if showEndDate}
+					<div data-testid="who-when-end-date">
+						<label for="metaDateEnd" class="mb-1 block text-sm font-medium text-ink-2">
+							{m.form_label_date_end()}
+						</label>
+						<input
+							id="metaDateEnd"
+							type="text"
+							inputmode="numeric"
+							value={endDisplay}
+							oninput={handleEndDateInput}
+							placeholder={m.form_placeholder_date()}
+							maxlength="10"
+							class="block w-full rounded border border-line px-2 py-3 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+						/>
+					</div>
+				{/if}
+			</div>
+			<input type="hidden" name="metaDateEnd" value={showEndDate ? endDateIso : ''} />
+
+			<!-- Originaltext (read-only raw cell): labelled static text, not a disabled input. -->
+			{#if rawDate && rawDate.trim().length > 0}
+				<div data-testid="who-when-raw">
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.date_original_label()}</p>
+					<p class="font-sans text-sm text-ink">{rawDate}</p>
+					<input type="hidden" name="metaDateRaw" value={rawDate} />
+				</div>
+			{/if}
 		{/if}
 
 		<!-- Absender (required in upload mode — row 1, col 2) -->

frontend/src/lib/document/WhoWhenSection.svelte.test.ts

@@ -72,3 +72,33 @@ describe('WhoWhenSection — date input behavior', () => {
 		expect(label?.textContent).toContain('*');
 	});
 });
+
+describe('WhoWhenSection — precision controls', () => {
+	it('renders a labelled precision select', async () => {
+		render(WhoWhenSection, {});
+
+		const label = document.querySelector('label[for="metaDatePrecision"]');
+		const select = document.querySelector('select#metaDatePrecision[name="metaDatePrecision"]');
+		expect(label).not.toBeNull();
+		expect(select).not.toBeNull();
+	});
+
+	it('hides the end-date field unless precision is RANGE', async () => {
+		render(WhoWhenSection, { precision: 'DAY' });
+		expect(document.querySelector('input#metaDateEnd')).toBeNull();
+	});
+
+	it('reveals the end-date field when precision is RANGE', async () => {
+		render(WhoWhenSection, { precision: 'RANGE' });
+		expect(document.querySelector('input#metaDateEnd')).not.toBeNull();
+	});
+
+	it('renders the raw cell as static text (not an editable input) and escapes it', async () => {
+		render(WhoWhenSection, { rawDate: '<b>Sommer</b> 1916' });
+		const raw = document.querySelector('[data-testid="who-when-raw"]');
+		expect(raw).not.toBeNull();
+		// Verbatim shown as escaped text; no injected <b> element.
+		expect(raw?.textContent).toContain('<b>Sommer</b> 1916');
+		expect(raw?.querySelector('b')).toBeNull();
+	});
+});