feat(chronik): add six Chronik page components + co-located specs (40 tests)

All under src/lib/components/chronik/:

- ChronikRow.svelte — single orchestrator for four variants (comment / for-you /
  rollup / simple), discriminated via $derived. Outer <a> wraps avatar + body +
  time; document title is a styled <span> (no nested anchors). Rollup shows
  count badge + en-dash time range; for-you gets accent left border + @ marker
  hidden below sm:.
- ChronikTimeline.svelte — buckets items by day using bucketByDay() and renders
  Heute/Gestern/Diese Woche/Älter section headers with <span> trailing rule.
- ChronikFuerDichBox.svelte — unread mentions card with inbox-zero variant,
  per-row Dismiss button (prevents bubbling, calls onMarkRead), aria-live count
  badge, and a .fade-in class gated by prefers-reduced-motion.
- ChronikFilterPills.svelte — role=radiogroup with 5 pills, ArrowLeft/Right
  keyboard navigation wrapping across the group, single tabstop via dynamic
  tabindex.
- ChronikEmptyState.svelte — three variants (first-run / filter-empty /
  inbox-zero) sharing a centered-column layout.
- ChronikErrorCard.svelte — warning card with retry button, optional custom
  message override.

Verbs map to chronik_singleton_* / chronik_rollup_* per AuditKind so no ICU
pluralization is needed. Comment preview is a TODO placeholder (currently the
document title) pending a backend preview DTO follow-up.

All 40 unit tests green. No type-check or lint errors in these files.

Part of #285.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/chronik/ChronikTimeline.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+import * as m from '$lib/paraglide/messages.js';
+import { bucketByDay, type DayBucket } from '$lib/utils/date-buckets';
+import type { components } from '$lib/generated/api';
+import ChronikRow from './ChronikRow.svelte';
+
+type ActivityFeedItemDTO = components['schemas']['ActivityFeedItemDTO'];
+
+interface Props {
+	items: ActivityFeedItemDTO[];
+	locale?: string;
+}
+
+const { items, locale }: Props = $props();
+
+const BUCKET_ORDER: DayBucket[] = ['today', 'yesterday', 'thisWeek', 'older'];
+
+function bucketLabel(bucket: DayBucket): string {
+	switch (bucket) {
+		case 'today':
+			return m.chronik_day_today();
+		case 'yesterday':
+			return m.chronik_day_yesterday();
+		case 'thisWeek':
+			return m.chronik_day_this_week();
+		case 'older':
+			return m.chronik_day_older();
+	}
+}
+
+const grouped: Record<DayBucket, ActivityFeedItemDTO[]> = $derived.by(() => {
+	const result: Record<DayBucket, ActivityFeedItemDTO[]> = {
+		today: [],
+		yesterday: [],
+		thisWeek: [],
+		older: []
+	};
+	for (const it of items) {
+		const b = bucketByDay(new Date(it.happenedAt), new Date(), locale);
+		result[b].push(it);
+	}
+	return result;
+});
+</script>
+
+<div class="flex flex-col">
+	{#each BUCKET_ORDER as bucket (bucket)}
+		{#if grouped[bucket].length > 0}
+			<section data-testid="chronik-bucket-{bucket}">
+				<div class="mt-6 mb-2 flex items-center gap-3">
+					<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+						{bucketLabel(bucket)}
+					</span>
+					<span class="h-px flex-1 bg-line"></span>
+				</div>
+				<ul role="list" class="flex flex-col gap-2">
+					{#each grouped[bucket] as it (it.kind + it.happenedAt + it.documentId)}
+						<li>
+							<ChronikRow item={it} />
+						</li>
+					{/each}
+				</ul>
+			</section>
+		{/if}
+	{/each}
+</div>