From 62fcc53f5c322a37038b03592e51465edccfb162 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Sat, 13 Jun 2026 22:33:50 +0200
Subject: [PATCH] refactor(shared): extract DatePrecisionField primitive from
 WhoWhenSection

Pulls the date + precision + RANGE-end-date region into a generic primitive in
$lib/shared/primitives/ so both document/ (WhoWhenSection) and timeline/
(EventForm, #781) can consume it without a cross-domain import. Preserves the
aria-live="polite" outer wrapper, onMount one-time seeding, $bindable
precision/endDateIso, the PRECISIONS array, and forwards data-testid attributes
so the existing WhoWhenSection spec selectors survive. WhoWhenSection spec stays
green (7/7).

Refs #781
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/lib/document/WhoWhenSection.svelte    | 150 ++------------
 .../primitives/DatePrecisionField.svelte      | 191 ++++++++++++++++++
 2 files changed, 208 insertions(+), 133 deletions(-)
 create mode 100644 frontend/src/lib/shared/primitives/DatePrecisionField.svelte

diff --git a/frontend/src/lib/document/WhoWhenSection.svelte b/frontend/src/lib/document/WhoWhenSection.svelte
index 4912f8d7..393705cd 100644
--- a/frontend/src/lib/document/WhoWhenSection.svelte
+++ b/frontend/src/lib/document/WhoWhenSection.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-import { onMount, untrack } from 'svelte';
 import PersonTypeahead from '$lib/person/PersonTypeahead.svelte';
 import PersonMultiSelect from '$lib/person/PersonMultiSelect.svelte';
 import FieldLabelBadge from '$lib/shared/primitives/FieldLabelBadge.svelte';
-import { isoToGerman, handleGermanDateInput } from '$lib/shared/utils/date';
+import DatePrecisionField from '$lib/shared/primitives/DatePrecisionField.svelte';
 import { m } from '$lib/paraglide/messages.js';
 import type { components } from '$lib/generated/api';
 import type { DatePrecision } from '$lib/shared/utils/documentDate';
@@ -37,64 +36,6 @@ let {
 	hideDate?: boolean;
 	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;
-	if (seed) {
-		dateDisplay = isoToGerman(seed);
-		if (!dateIso) dateIso = seed;
-	}
-	if (endDateIso) endDisplay = isoToGerman(endDateIso);
-});
-
-const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
-
-// Inline mirror of the server guard (#678). ISO YYYY-MM-DD strings compare
-// lexicographically, so no Date object is needed. Server stays the gate —
-// this only surfaces the error early; it never disables Save.
-const endBeforeStart = $derived(
-	showEndDate && endDateIso !== '' && dateIso !== '' && endDateIso < dateIso
-);
-
-function handleDateInput(e: Event) {
-	const result = handleGermanDateInput(e);
-	dateDisplay = result.display;
-	dateIso = result.iso;
-	dateDirty = true;
-}
-
-function handleEndDateInput(e: Event) {
-	const result = handleGermanDateInput(e);
-	endDisplay = result.display;
-	endDateIso = result.iso;
-}
-
-$effect(() => {
-	const suggested = suggestedDateIso;
-	if (suggested && !untrack(() => dateDirty)) {
-		dateDisplay = isoToGerman(suggested);
-		dateIso = suggested;
-	}
-});
 </script>
 
 <div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
@@ -104,79 +45,22 @@ $effect(() => {
 
 	<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 		{#if !hideDate}
-			<!-- Datum (required — row 1, col 1) -->
-			<div data-testid="who-when-date">
-				<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
-					>{m.form_label_date()}*</label
-				>
-				<input
-					id="documentDate"
-					type="text"
-					inputmode="numeric"
-					value={dateDisplay}
-					oninput={handleDateInput}
-					placeholder={m.form_placeholder_date()}
-					maxlength="10"
-					class="block w-full rounded border border-line px-2 py-3 text-sm shadow-sm
-                       {dateInvalid
-						? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500'
-						: 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
-					aria-describedby={dateInvalid ? 'date-error' : undefined}
-				/>
-				<input type="hidden" name="documentDate" value={dateIso} />
-				{#if dateInvalid}
-					<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"
-							aria-invalid={endBeforeStart ? 'true' : undefined}
-							aria-describedby={endBeforeStart ? 'end-date-error' : undefined}
-							class="block min-h-[48px] w-full rounded border border-line px-2 py-3 text-sm shadow-sm
-                       {endBeforeStart
-								? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500'
-								: 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
-						/>
-						{#if endBeforeStart}
-							<!-- Non-colour cue (WCAG 1.4.1): warning glyph + text, not red alone. -->
-							<p id="end-date-error" class="mt-1 text-xs text-red-600">
-								<span aria-hidden="true">⚠ </span>{m.error_invalid_date_range()}
-							</p>
-						{/if}
-					</div>
-				{/if}
-			</div>
-			<input type="hidden" name="metaDateEnd" value={showEndDate ? endDateIso : ''} />
+			<!-- Datum + Präzision + Enddatum (shared primitive, #781). The three grid
+				 cells slot directly into this grid; testids are forwarded so the
+				 existing WhoWhenSection selectors survive the extraction. -->
+			<DatePrecisionField
+				bind:dateIso={dateIso}
+				bind:precision={precision}
+				bind:endDateIso={endDateIso}
+				initialDateIso={initialDateIso}
+				suggestedDateIso={suggestedDateIso}
+				dateInputName="documentDate"
+				endDateInputName="metaDateEnd"
+				dateLabel={m.form_label_date()}
+				dateTestId="who-when-date"
+				precisionTestId="who-when-precision"
+				endDateInnerTestId="who-when-end-date"
+			/>
 		{/if}
 
 		<!-- Absender (required in upload mode — row 1, col 2) -->
diff --git a/frontend/src/lib/shared/primitives/DatePrecisionField.svelte b/frontend/src/lib/shared/primitives/DatePrecisionField.svelte
new file mode 100644
index 00000000..36403ac4
--- /dev/null
+++ b/frontend/src/lib/shared/primitives/DatePrecisionField.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+import { onMount, untrack } from 'svelte';
+import { isoToGerman, handleGermanDateInput } from '$lib/shared/utils/date';
+import { m } from '$lib/paraglide/messages.js';
+import type { DatePrecision } from '$lib/shared/utils/documentDate';
+
+/**
+ * Generic date + precision input primitive shared by two domains:
+ * `document/` (via WhoWhenSection) and `timeline/` (via EventForm).
+ *
+ * Renders three grid cells — a German `dd.mm.yyyy` text input backed by a hidden
+ * ISO input, a precision <select>, and a progressively-disclosed end-date input
+ * shown only for RANGE. Living in `$lib/shared/primitives/` keeps it out of either
+ * consumer's domain so neither incurs a cross-domain import (eslint boundaries).
+ *
+ * Exposed (shared contract — both WhoWhenSection and EventForm depend on it):
+ *   - dateIso, precision, endDateIso  — $bindable; the parent's binding IS the
+ *     state (no redundant $state mirror).
+ *   - dateInputName / endDateInputName — names of the hidden ISO inputs.
+ *   - initialDateIso / suggestedDateIso — seeding inputs (see onMount + $effect).
+ *   - dateTestId / precisionTestId / endDateInnerTestId — forwarded data-testid
+ *     attributes so existing WhoWhenSection selectors survive the extraction.
+ *   - `end-date-region` is always on the OUTER aria-live wrapper of the end block.
+ */
+let {
+	dateIso = $bindable(''),
+	precision = $bindable<DatePrecision>('DAY'),
+	endDateIso = $bindable(''),
+	dateInputName = 'documentDate',
+	endDateInputName = 'metaDateEnd',
+	initialDateIso = '',
+	suggestedDateIso = '',
+	dateLabel = m.form_label_date(),
+	dateRequired = true,
+	dateTestId = undefined,
+	precisionTestId = undefined,
+	endDateInnerTestId = undefined
+}: {
+	dateIso?: string;
+	precision?: DatePrecision;
+	endDateIso?: string;
+	dateInputName?: string;
+	endDateInputName?: string;
+	initialDateIso?: string;
+	suggestedDateIso?: string;
+	dateLabel?: string;
+	dateRequired?: boolean;
+	dateTestId?: string;
+	precisionTestId?: string;
+	endDateInnerTestId?: string;
+} = $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;
+	if (seed) {
+		dateDisplay = isoToGerman(seed);
+		if (!dateIso) dateIso = seed;
+	}
+	if (endDateIso) endDisplay = isoToGerman(endDateIso);
+});
+
+const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
+
+// Inline mirror of the server guard (#678). ISO YYYY-MM-DD strings compare
+// lexicographically, so no Date object is needed. Server stays the gate —
+// this only surfaces the error early; it never disables Save.
+const endBeforeStart = $derived(
+	showEndDate && endDateIso !== '' && dateIso !== '' && endDateIso < dateIso
+);
+
+function handleDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	dateDisplay = result.display;
+	dateIso = result.iso;
+	dateDirty = true;
+}
+
+function handleEndDateInput(e: Event) {
+	const result = handleGermanDateInput(e);
+	endDisplay = result.display;
+	endDateIso = result.iso;
+}
+
+$effect(() => {
+	const suggested = suggestedDateIso;
+	if (suggested && !untrack(() => dateDirty)) {
+		dateDisplay = isoToGerman(suggested);
+		dateIso = suggested;
+	}
+});
+</script>
+
+<!-- Datum (required) -->
+<div data-testid={dateTestId}>
+	<label for={dateInputName} class="mb-1 block text-sm font-medium text-ink-2"
+		>{dateLabel}{#if dateRequired}*{/if}</label
+	>
+	<input
+		id={dateInputName}
+		type="text"
+		inputmode="numeric"
+		value={dateDisplay}
+		oninput={handleDateInput}
+		placeholder={m.form_placeholder_date()}
+		maxlength="10"
+		aria-required={dateRequired ? 'true' : undefined}
+		class="block min-h-[48px] w-full rounded border border-line px-2 py-3 text-sm shadow-sm
+               {dateInvalid
+			? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500'
+			: 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
+		aria-invalid={dateInvalid ? 'true' : undefined}
+		aria-describedby={dateInvalid ? `${dateInputName}-error` : undefined}
+	/>
+	<input type="hidden" name={dateInputName} value={dateIso} />
+	{#if dateInvalid}
+		<p id="{dateInputName}-error" class="mt-1 text-xs text-red-600">
+			<span aria-hidden="true">⚠ </span>{m.form_date_error()}
+		</p>
+	{/if}
+</div>
+
+<!-- Datumsgenauigkeit (precision) -->
+<div data-testid={precisionTestId}>
+	<label for="{dateInputName}Precision" class="mb-1 block text-sm font-medium text-ink-2">
+		{m.form_label_date_precision()}
+	</label>
+	<select
+		id="{dateInputName}Precision"
+		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" data-testid="end-date-region">
+	{#if showEndDate}
+		<div data-testid={endDateInnerTestId}>
+			<label for="{dateInputName}End" class="mb-1 block text-sm font-medium text-ink-2">
+				{m.form_label_date_end()}
+			</label>
+			<input
+				id="{dateInputName}End"
+				type="text"
+				inputmode="numeric"
+				value={endDisplay}
+				oninput={handleEndDateInput}
+				placeholder={m.form_placeholder_date()}
+				maxlength="10"
+				aria-invalid={endBeforeStart ? 'true' : undefined}
+				aria-describedby={endBeforeStart ? `${dateInputName}-end-error` : undefined}
+				class="block min-h-[48px] w-full rounded border border-line px-2 py-3 text-sm shadow-sm
+               {endBeforeStart
+					? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500'
+					: 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
+			/>
+			{#if endBeforeStart}
+				<!-- Non-colour cue (WCAG 1.4.1): warning glyph + text, not red alone. -->
+				<p id="{dateInputName}-end-error" class="mt-1 text-xs text-red-600">
+					<span aria-hidden="true">⚠ </span>{m.error_invalid_date_range()}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+<!-- Off-RANGE submits an empty string so a stale end-date never persists; the
+     form action converts '' → null before sending the request body. -->
+<input type="hidden" name={endDateInputName} value={showEndDate ? endDateIso : ''} />