feat(timeline): add YearLetterStrip for dense years

Letter count + 12-month density sparkline + a >=44px keyboard-focusable expand
toggle that reveals that year's LetterCards (REQ-012). Sparkline values from the
shared monthHistogram.

Refs #779
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/lib/timeline/YearLetterStrip.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import Sparkline from '$lib/shared/primitives/Sparkline.svelte';
+import LetterCard from './LetterCard.svelte';
+import { monthHistogram } from './timelineDensity';
+import type { components } from '$lib/generated/api';
+
+type TimelineEntryDTO = components['schemas']['TimelineEntryDTO'];
+
+/**
+ * Compact density view for a year with many letters (REQ-012): the letter count
+ * plus a 12-month density sparkline, and a ≥44px keyboard-focusable toggle that
+ * expands to that year's individual LetterCards.
+ */
+let { letters, year }: { letters: TimelineEntryDTO[]; year: number } = $props();
+
+let expanded = $state(false);
+
+const counts = $derived(monthHistogram(letters, year).map((b) => b.count));
+</script>
+
+<div class="mx-auto max-w-md rounded-sm border border-line bg-surface p-3 shadow-sm">
+	<div class="flex items-center justify-between gap-3">
+		<span class="font-sans text-sm font-bold text-brand-navy"
+			>{m.timeline_letters_count({ count: letters.length })}</span
+		>
+		<button
+			type="button"
+			data-testid="strip-expand"
+			aria-expanded={expanded}
+			onclick={() => (expanded = !expanded)}
+			style="display: inline-flex; align-items: center; min-height: 44px"
+			class="rounded-sm px-2 font-sans text-xs text-ink-3 hover:text-brand-navy focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy"
+		>
+			{m.timeline_strip_expand()}
+		</button>
+	</div>
+
+	<Sparkline
+		values={counts}
+		label={m.timeline_letters_count({ count: letters.length })}
+		class="mt-2"
+	/>
+
+	{#if expanded}
+		<ul class="mt-3 space-y-2">
+			{#each letters as letter (letter.documentId)}
+				<li><LetterCard entry={letter} /></li>
+			{/each}
+		</ul>
+	{/if}
+</div>