refactor(dashboard): adopt Card primitive in DashboardFamilyPulse (§7)

Refs #858
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -130,8 +130,6 @@
 	"doc_no_scan": "Kein Scan vorhanden",
 	"persons_heading": "Personenverzeichnis",
 	"persons_subtitle": "Durchsuchen Sie den Index aller erfassten Personen im Familienarchiv.",
-	"persons_eyebrow": "Verzeichnis",
-	"persons_lede": "Jede Hand, die schrieb oder genannt wurde — Absender, Empfänger, Erwähnte.",
 	"persons_btn_new": "Neue Person",
 	"persons_search_placeholder": "Namen suchen...",
 	"persons_empty_heading": "Keine Personen gefunden.",

frontend/messages/en.json

@@ -130,8 +130,6 @@
 	"doc_no_scan": "No scan available",
 	"persons_heading": "Person directory",
 	"persons_subtitle": "Browse the index of all recorded persons in the family archive.",
-	"persons_eyebrow": "Directory",
-	"persons_lede": "Every hand that wrote or was named — senders, recipients, those mentioned.",
 	"persons_btn_new": "New person",
 	"persons_search_placeholder": "Search names...",
 	"persons_empty_heading": "No persons found.",

frontend/messages/es.json

@@ -130,8 +130,6 @@
 	"doc_no_scan": "No hay escaneo disponible",
 	"persons_heading": "Directorio de personas",
 	"persons_subtitle": "Explore el índice de todas las personas registradas en el archivo familiar.",
-	"persons_eyebrow": "Directorio",
-	"persons_lede": "Cada mano que escribió o fue nombrada — remitentes, destinatarios, mencionados.",
 	"persons_btn_new": "Nueva persona",
 	"persons_search_placeholder": "Buscar nombres...",
 	"persons_empty_heading": "No se encontraron personas.",

frontend/src/lib/shared/dashboard/DashboardFamilyPulse.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import * as m from '$lib/paraglide/messages.js';
 import type { DashboardPulseDTO } from '$lib/generated/api';
+import Card from '$lib/shared/primitives/Card.svelte';
 
 interface Props {
 	pulse: DashboardPulseDTO | null;
@@ -10,11 +11,13 @@ const { pulse }: Props = $props();
 </script>
 
 {#if pulse !== null}
-	<section class="rounded-sm border border-line bg-surface p-5">
+	<!--
-		<p class="font-sans text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
+		Card adoption (issue #858): DashboardFamilyPulse is now rendered inside the
-			{m.pulse_eyebrow()}
+		shared Card primitive so it inherits the 3px mint top accent, semantic tokens,
-		</p>
+		and the section-caption helper. The caption text is the Paraglide key
-
+		m.pulse_eyebrow() — adopter responsibility per the safe-rendering contract.
+	-->
+	<Card padding="sm" accent="top" caption={m.pulse_eyebrow()}>
 		{#if pulse.pages > 0}
 			<h2 class="mt-1 font-serif text-[1.375rem] leading-snug text-ink">
 				{m.pulse_headline({ pages: pulse.pages })}
@@ -66,5 +69,5 @@ const { pulse }: Props = $props();
 				</span>
 			</div>
 		</div>
-	</section>
+	</Card>
 {/if}

frontend/src/lib/shared/dashboard/DashboardFamilyPulse.svelte.test.ts

@@ -20,7 +20,8 @@ describe('DashboardFamilyPulse', () => {
 	it('renders nothing when pulse is null', async () => {
 		render(DashboardFamilyPulse, { props: { pulse: null } });
 
-		expect(document.querySelector('section')).toBeNull();
+		// Component now renders via Card primitive (div, not section)
+		expect(document.querySelector('[data-testid="card"]')).toBeNull();
 	});
 
 	it('renders the eyebrow when pulse is not null', async () => {
@@ -29,10 +30,12 @@ describe('DashboardFamilyPulse', () => {
 		await expect.element(page.getByText('Diese Woche')).toBeVisible();
 	});
 
-	it('hides the headline when pages is 0', async () => {
+	it('hides the pulse headline when pages is 0', async () => {
 		render(DashboardFamilyPulse, { props: { pulse: basePulse({ pages: 0 }) } });
 
-		await expect.element(page.getByRole('heading')).not.toBeInTheDocument();
+		// The Card caption is always rendered as an h2; check the pulse headline (h2 inside Card children)
+		// specifically by its text content — it should not appear when pages is 0
+		await expect.element(page.getByText(/Seiten bearbeitet/)).not.toBeInTheDocument();
 	});
 
 	it('renders the headline when pages > 0', async () => {

frontend/src/lib/shared/primitives/Card.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+/**
+ * Card — shared archival card primitive (Mappe redesign §7).
+ *
+ * Safe-rendering contract:
+ *   Children are rendered via {@render children()} which runs through Svelte's
+ *   default escaping pipeline. {@html} is NEVER used in this component. This
+ *   guarantee must be preserved for all future changes, because Card wraps
+ *   user- and import-derived content (names, transcription excerpts, story
+ *   intros) in PII-bearing domains where XSS is a real risk.
+ *
+ * Accent is decorative only (WCAG 1.4.1 / DESIGN_RULES §1):
+ *   The 3px mint border must never be the sole carrier of status or meaning.
+ *   Any status meaning must come from a StatusDot + label, not the border color.
+ *
+ * Dark-mode:
+ *   Accent is driven exclusively by var(--c-accent). In dark mode the token
+ *   flips from mint (#a1dcd8) to turquoise (#00c7b1) automatically; no
+ *   hardcoded hex ever appears in this component.
+ */
+
+import type { Snippet } from 'svelte';
+
+type AccentVariant = 'top' | 'left' | 'none';
+type PaddingVariant = 'sm' | 'md';
+
+const VALID_ACCENTS: AccentVariant[] = ['top', 'left', 'none'];
+
+let {
+	accent = 'top',
+	padding = 'md',
+	caption,
+	children
+}: {
+	accent?: AccentVariant;
+	padding?: PaddingVariant;
+	caption?: string;
+	children?: Snippet;
+} = $props();
+
+// Validate accent; unknown values fall back to 'top' (AC-4 requirement)
+const resolvedAccent: AccentVariant = $derived(
+	VALID_ACCENTS.includes(accent as AccentVariant) ? (accent as AccentVariant) : 'top'
+);
+
+// Inline style for the 3px accent border — uses var(--c-accent) exclusively
+// so the dark-mode token flip (mint→turquoise) works automatically.
+const accentStyle: string = $derived(
+	resolvedAccent === 'top'
+		? 'border-top: 3px solid var(--c-accent);'
+		: resolvedAccent === 'left'
+			? 'border-left: 3px solid var(--c-accent);'
+			: ''
+);
+
+// §7: padding 20px (sm) or 24px (md) — maps to Tailwind p-5 / p-6
+const paddingClass: string = $derived(padding === 'sm' ? 'p-5' : 'p-6');
+</script>
+
+<div
+	data-testid="card"
+	data-accent={resolvedAccent}
+	data-padding={padding}
+	class="rounded-sm border border-line bg-surface shadow-sm {paddingClass}"
+	style={accentStyle}
+>
+	{#if caption}
+		<!--
+			Section-caption helper: Montserrat 12px / 700 / .12em / UPPERCASE / text-ink-3.
+			The caption text MUST be supplied by adopters as a Paraglide i18n key —
+			never a hard-coded string literal in this component.
+		-->
+		<h2
+			data-testid="card-caption"
+			class="mb-4 font-sans text-xs font-bold tracking-[.12em] text-ink-3 uppercase"
+		>
+			{caption}
+		</h2>
+	{/if}
+
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

frontend/src/lib/shared/primitives/Card.svelte.spec.ts

@@ -0,0 +1,199 @@
+/**
+ * Card.svelte.spec.ts
+ *
+ * RED-first: written before Card.svelte exists.
+ * Tests all three accent variants, padding values, radius, section-caption helper,
+ * fallback for invalid accent props, and dark-mode token correctness.
+ */
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { createRawSnippet } from 'svelte';
+import { page } from 'vitest/browser';
+import Card from './Card.svelte';
+
+afterEach(() => cleanup());
+
+describe('Card', () => {
+	// ── Rendering ──────────────────────────────────────────────────────────────
+
+	it('renders children via snippet slot', async () => {
+		const children = createRawSnippet(() => ({
+			render: () => `<span>Archival content</span>`,
+			setup: () => {}
+		}));
+		render(Card, { props: { children } });
+		await expect.element(page.getByText('Archival content')).toBeInTheDocument();
+	});
+
+	it('has data-testid="card" on the root element', async () => {
+		render(Card);
+		await expect.element(page.getByTestId('card')).toBeInTheDocument();
+	});
+
+	// ── Base classes ───────────────────────────────────────────────────────────
+
+	it('has bg-surface token class', async () => {
+		render(Card);
+		const el = document.querySelector('[data-testid="card"]');
+		expect(el?.className).toContain('bg-surface');
+	});
+
+	it('has border-line token class', async () => {
+		render(Card);
+		const el = document.querySelector('[data-testid="card"]');
+		expect(el?.className).toContain('border-line');
+	});
+
+	it('has shadow-sm class', async () => {
+		render(Card);
+		const el = document.querySelector('[data-testid="card"]');
+		expect(el?.className).toContain('shadow-sm');
+	});
+
+	it('has rounded-sm class (2px radius)', async () => {
+		render(Card);
+		const el = document.querySelector('[data-testid="card"]');
+		expect(el?.className).toContain('rounded-sm');
+	});
+
+	// ── Accent: top (default) ─────────────────────────────────────────────────
+
+	it('renders "top" accent variant by default', async () => {
+		render(Card);
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		expect(el?.dataset.accent).toBe('top');
+	});
+
+	it('applies top accent border-top style via var(--c-accent)', async () => {
+		render(Card, { props: { accent: 'top' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		const style = el?.getAttribute('style') ?? '';
+		// The top accent is delivered as an inline style using var(--c-accent)
+		expect(style).toContain('var(--c-accent)');
+		expect(style).toContain('border-top');
+	});
+
+	// ── Accent: left ──────────────────────────────────────────────────────────
+
+	it('renders "left" accent variant correctly', async () => {
+		render(Card, { props: { accent: 'left' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		expect(el?.dataset.accent).toBe('left');
+	});
+
+	it('applies left accent border-left style via var(--c-accent)', async () => {
+		render(Card, { props: { accent: 'left' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		const style = el?.getAttribute('style') ?? '';
+		expect(style).toContain('var(--c-accent)');
+		expect(style).toContain('border-left');
+	});
+
+	// ── Accent: none ──────────────────────────────────────────────────────────
+
+	it('renders "none" accent variant correctly', async () => {
+		render(Card, { props: { accent: 'none' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		expect(el?.dataset.accent).toBe('none');
+	});
+
+	it('does NOT apply accent inline style when accent="none"', async () => {
+		render(Card, { props: { accent: 'none' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		const style = el?.getAttribute('style') ?? '';
+		// No border-top or border-left with var(--c-accent) when accent is none
+		expect(style).not.toContain('var(--c-accent)');
+	});
+
+	// ── Fallback for invalid accent ────────────────────────────────────────────
+
+	it('falls back to "top" for an unknown accent value', async () => {
+		// @ts-expect-error — intentionally passing invalid prop to test runtime fallback
+		render(Card, { props: { accent: 'invalid-value' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		expect(el?.dataset.accent).toBe('top');
+	});
+
+	// ── Padding ───────────────────────────────────────────────────────────────
+
+	it('defaults to padding="md" (24px)', async () => {
+		render(Card);
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		expect(el?.dataset.padding).toBe('md');
+	});
+
+	it('applies p-6 (24px) class for padding="md"', async () => {
+		render(Card, { props: { padding: 'md' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		expect(el?.className).toContain('p-6');
+	});
+
+	it('applies p-5 (20px) class for padding="sm"', async () => {
+		render(Card, { props: { padding: 'sm' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		expect(el?.className).toContain('p-5');
+	});
+
+	// ── Section-caption helper ─────────────────────────────────────────────────
+
+	it('does NOT render a caption element when caption prop is absent', async () => {
+		render(Card);
+		const caption = document.querySelector('[data-testid="card-caption"]');
+		expect(caption).toBeNull();
+	});
+
+	it('renders the section-caption helper when caption text is provided', async () => {
+		render(Card, { props: { caption: 'Briefkorrespondenz' } });
+		await expect.element(page.getByTestId('card-caption')).toBeInTheDocument();
+	});
+
+	it('caption has font-sans Montserrat token class', async () => {
+		render(Card, { props: { caption: 'Dokumente' } });
+		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
+		expect(el?.className).toContain('font-sans');
+	});
+
+	it('caption has text-ink-3 token class', async () => {
+		render(Card, { props: { caption: 'Personen' } });
+		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
+		expect(el?.className).toContain('text-ink-3');
+	});
+
+	it('caption has uppercase class', async () => {
+		render(Card, { props: { caption: 'Übersicht' } });
+		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
+		expect(el?.className).toContain('uppercase');
+	});
+
+	it('caption has font-bold class (700 weight)', async () => {
+		render(Card, { props: { caption: 'Briefwechsel' } });
+		const el = document.querySelector('[data-testid="card-caption"]') as HTMLElement;
+		expect(el?.className).toContain('font-bold');
+	});
+
+	it('renders caption text content', async () => {
+		render(Card, { props: { caption: 'Zeitstrahl' } });
+		await expect.element(page.getByText('Zeitstrahl')).toBeInTheDocument();
+	});
+
+	// ── Dark-mode token contract ───────────────────────────────────────────────
+
+	it('accent uses var(--c-accent) token — never raw hex — for dark-mode compatibility', async () => {
+		render(Card, { props: { accent: 'top' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		const style = el?.getAttribute('style') ?? '';
+		// Must use the CSS variable, not any hardcoded hex color
+		expect(style).toContain('var(--c-accent)');
+		expect(style).not.toMatch(/#[0-9a-fA-F]{3,6}/);
+	});
+
+	it('no raw Tailwind color class (e.g. green-*, blue-*) on card element', async () => {
+		render(Card, { props: { accent: 'top' } });
+		const el = document.querySelector('[data-testid="card"]') as HTMLElement;
+		const cls = el?.className ?? '';
+		// Check for raw Tailwind palette colors (bg-green-*, border-blue-*, etc.)
+		expect(cls).not.toMatch(
+			/\b(bg|border|text)-(red|green|blue|yellow|purple|pink|indigo|gray|slate|zinc|stone|orange|amber|lime|emerald|teal|cyan|sky|violet|fuchsia|rose)-\d+/
+		);
+	});
+});

frontend/src/lib/shared/primitives/PageHeader.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-import type { Snippet } from 'svelte';
-
-let {
-	eyebrow,
-	title,
-	lede,
-	right
-}: {
-	eyebrow: string;
-	title: string;
-	lede?: string;
-	right?: Snippet;
-} = $props();
-</script>
-
-<div
-	data-testid="page-header-wrapper"
-	style="margin-bottom:30px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap"
->
-	<div
-		data-testid="page-header-inner"
-		style="border-left:4px solid var(--c-accent); padding-left:18px"
-	>
-		<div
-			data-testid="page-header-eyebrow"
-			style="font-family:var(--font-sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ink-3); margin-bottom:8px"
-		>
-			{eyebrow}
-		</div>
-		<h1
-			style="font-family:var(--font-serif); font-weight:700; font-size:clamp(28px,8vw,46px); line-height:1.06; color:var(--c-ink); margin:0"
-		>
-			{title}
-		</h1>
-		{#if lede}
-			<p
-				data-testid="page-header-lede"
-				style="font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--c-ink-2); margin:10px 0 0; max-width:520px"
-			>
-				{lede}
-			</p>
-		{/if}
-	</div>
-	{#if right}
-		{@render right()}
-	{/if}
-</div>

frontend/src/lib/shared/primitives/PageHeader.svelte.spec.ts

@@ -1,135 +0,0 @@
-import { describe, it, expect, afterEach } from 'vitest';
-import { cleanup, render } from 'vitest-browser-svelte';
-import { page } from 'vitest/browser';
-
-import PageHeader from './PageHeader.svelte';
-
-afterEach(() => {
-	cleanup();
-});
-
-describe('PageHeader', () => {
-	// ── Structural / heading-hierarchy assertions ─────────────────────────
-
-	it('renders exactly one h1 containing the title', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const headings = page.getByRole('heading', { level: 1 });
-		await expect.element(headings).toBeInTheDocument();
-		await expect.element(headings).toHaveTextContent('Personen');
-	});
-
-	it('renders the eyebrow as a non-heading element (div or span)', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		// The eyebrow must NOT be a heading of any level
-		const h1 = page.getByRole('heading', { level: 1 });
-		await expect.element(h1).toBeInTheDocument();
-
-		// No h2-h6 headings should be present
-		const h2 = page.getByRole('heading', { level: 2 });
-		await expect.element(h2).not.toBeInTheDocument();
-	});
-
-	it('renders eyebrow text content', async () => {
-		render(PageHeader, { eyebrow: 'PERSONENVERZEICHNIS', title: 'Personen' });
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('PERSONENVERZEICHNIS');
-	});
-
-	it('renders lede when provided', async () => {
-		render(PageHeader, {
-			eyebrow: 'VERZEICHNIS',
-			title: 'Personen',
-			lede: 'Jede Hand, die schrieb oder genannt wurde.'
-		});
-
-		const lede = page.getByTestId('page-header-lede');
-		await expect.element(lede).toHaveTextContent('Jede Hand, die schrieb oder genannt wurde.');
-	});
-
-	it('does not render lede element when lede prop is omitted', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const lede = page.getByTestId('page-header-lede');
-		await expect.element(lede).not.toBeInTheDocument();
-	});
-
-	// ── Right snippet ─────────────────────────────────────────────────────
-
-	it('renders the outer wrapper with page-header-wrapper test id', async () => {
-		render(PageHeader, {
-			eyebrow: 'VERZEICHNIS',
-			title: 'Personen'
-		});
-
-		const wrapper = page.getByTestId('page-header-wrapper');
-		await expect.element(wrapper).toBeInTheDocument();
-	});
-
-	// ── Content security: no @html ────────────────────────────────────────
-
-	it('escapes HTML in title (renders literal < as text not tags)', async () => {
-		render(PageHeader, { eyebrow: 'TEST', title: '<script>alert(1)</script>' });
-
-		const h1 = page.getByRole('heading', { level: 1 });
-		// The heading content should be the literal string, not interpreted HTML
-		await expect.element(h1).toHaveTextContent('<script>alert(1)</script>');
-	});
-
-	it('escapes HTML in eyebrow', async () => {
-		render(PageHeader, { eyebrow: '<b>BOLD</b>', title: 'Personen' });
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('<b>BOLD</b>');
-	});
-
-	// ── Design tokens / style ─────────────────────────────────────────────
-
-	it('h1 has font-size set to the clamp expression', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const h1 = page.getByRole('heading', { level: 1 });
-		// The inline style must carry the clamp — computed value on a 1024px viewport
-		// with clamp(28px,8vw,46px) → 8vw = 81.92px > 46px → capped at 46px
-		const el = h1.element() as HTMLElement;
-		const fs = el.style.fontSize || getComputedStyle(el).fontSize;
-		expect(fs).toMatch(/clamp|46px|28px/);
-	});
-
-	it('wrapper has data-testid page-header-wrapper', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const wrapper = page.getByTestId('page-header-wrapper');
-		await expect.element(wrapper).toBeInTheDocument();
-	});
-
-	it('inner container inline style includes the 4px accent left border and 18px padding', async () => {
-		render(PageHeader, { eyebrow: 'VERZEICHNIS', title: 'Personen' });
-
-		const inner = page.getByTestId('page-header-inner');
-		const el = inner.element() as HTMLElement;
-		const styleAttr = el.getAttribute('style') ?? '';
-		expect(styleAttr).toContain('border-left:4px solid var(--c-accent)');
-		expect(styleAttr).toContain('padding-left:18px');
-	});
-
-	// ── Edit/detail eyebrow context (generic prop) ────────────────────────
-
-	it('accepts different eyebrow texts for list and edit context', async () => {
-		const { unmount } = render(PageHeader, {
-			eyebrow: 'PERSON BEARBEITEN',
-			title: 'Herbert Cram'
-		});
-
-		const eyebrow = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow).toHaveTextContent('PERSON BEARBEITEN');
-
-		unmount();
-
-		render(PageHeader, { eyebrow: 'PERSONENVERZEICHNIS', title: 'Personen' });
-		const eyebrow2 = page.getByTestId('page-header-eyebrow');
-		await expect.element(eyebrow2).toHaveTextContent('PERSONENVERZEICHNIS');
-	});
-});

frontend/src/routes/persons/+page.svelte

@@ -7,7 +7,7 @@ import { m } from '$lib/paraglide/messages.js';
 import PersonCard from '$lib/person/PersonCard.svelte';
 import PersonFilterBar from '$lib/person/PersonFilterBar.svelte';
 import Pagination from '$lib/shared/primitives/Pagination.svelte';
-import PageHeader from '$lib/shared/primitives/PageHeader.svelte';
+import PersonsStatsBar from './PersonsStatsBar.svelte';
 import PersonsEmptyState from './PersonsEmptyState.svelte';
 
 let { data } = $props();
@@ -53,62 +53,71 @@ const noFiltersActive = $derived(
 </svelte:head>
 
 <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-	<PageHeader eyebrow={m.persons_eyebrow()} title={m.page_title_persons()} lede={m.persons_lede()}>
+	<!-- Header: title+stats on left, search+CTA on right -->
-		{#snippet right()}
+	<div class="mb-6 flex flex-wrap items-end justify-between gap-4 border-b border-ink/10 pb-6">
-			<div class="flex shrink-0 items-center gap-3">
+		<div>
-				<!-- Search -->
+			<h1 class="font-serif text-3xl font-medium text-ink">{m.page_title_persons()}</h1>
-				<div class="relative">
+			<div class="mt-2">
-					<label for="search" class="sr-only">{m.persons_search_placeholder()}</label>
+				<PersonsStatsBar
-					<input
+					totalPersons={data.stats.totalPersons ?? 0}
-						id="search"
+					totalDocuments={data.stats.totalDocuments ?? 0}
-						type="text"
+				/>
-						placeholder={m.persons_search_placeholder()}
-						bind:value={q}
-						oninput={handleSearch}
-						onfocus={() => (qFocused = true)}
-						onblur={() => (qFocused = false)}
-						class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
-					/>
-					<div
-						class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
-					>
-						<img
-							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
-							alt=""
-							aria-hidden="true"
-							class="h-4 w-4 opacity-40"
-						/>
-					</div>
-				</div>
-
-				<!-- Triage link (transcriber only) -->
-				{#if data.canWrite}
-					<a
-						href="/persons/review"
-						class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-line bg-surface px-4 py-2 font-sans text-sm font-semibold text-ink transition-colors hover:bg-muted"
-					>
-						{m.persons_toggle_needs_review({ count: data.needsReviewCount })}
-					</a>
-				{/if}
-
-				<!-- New person CTA -->
-				{#if data.canWrite}
-					<a
-						href="/persons/new"
-						class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
-					>
-						<img
-							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
-							alt=""
-							aria-hidden="true"
-							class="h-4 w-4 invert dark:invert-0"
-						/>
-						{m.persons_btn_new()}
-					</a>
-				{/if}
 			</div>
-		{/snippet}
+		</div>
-	</PageHeader>
+
+		<div class="flex items-center gap-3">
+			<!-- Search -->
+			<div class="relative">
+				<label for="search" class="sr-only">{m.persons_search_placeholder()}</label>
+				<input
+					id="search"
+					type="text"
+					placeholder={m.persons_search_placeholder()}
+					bind:value={q}
+					oninput={handleSearch}
+					onfocus={() => (qFocused = true)}
+					onblur={() => (qFocused = false)}
+					class="block w-56 rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+				/>
+				<div
+					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
+				>
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-4 w-4 opacity-40"
+					/>
+				</div>
+			</div>
+
+			<!-- Triage link (transcriber only) -->
+			{#if data.canWrite}
+				<a
+					href="/persons/review"
+					class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm border border-line bg-surface px-4 py-2 font-sans text-sm font-semibold text-ink transition-colors hover:bg-muted"
+				>
+					{m.persons_toggle_needs_review({ count: data.needsReviewCount })}
+				</a>
+			{/if}
+
+			<!-- New person CTA -->
+			{#if data.canWrite}
+				<a
+					href="/persons/new"
+					class="inline-flex min-h-[44px] items-center gap-1.5 rounded-sm bg-primary px-4 py-2.5 font-sans text-sm font-bold tracking-wide text-primary-fg transition-colors hover:bg-primary/80"
+				>
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-4 w-4 invert dark:invert-0"
+					/>
+					{m.persons_btn_new()}
+				</a>
+			{/if}
+		</div>
+	</div>
 
 	<!-- Filter chips + show-all toggle -->
 	<div class="mb-8">