frontend/messages/de.json

@@ -21,6 +21,7 @@
 	"nav_logout": "Abmelden",
 	"btn_save": "Speichern",
 	"btn_cancel": "Abbrechen",
+	"btn_confirm": "Bestätigen",
 	"btn_edit": "Bearbeiten",
 	"btn_create": "Erstellen",
 	"btn_delete": "Löschen",

frontend/messages/en.json

@@ -21,6 +21,7 @@
 	"nav_logout": "Sign out",
 	"btn_save": "Save",
 	"btn_cancel": "Cancel",
+	"btn_confirm": "Confirm",
 	"btn_edit": "Edit",
 	"btn_create": "Create",
 	"btn_delete": "Delete",

frontend/messages/es.json

@@ -21,6 +21,7 @@
 	"nav_logout": "Cerrar sesión",
 	"btn_save": "Guardar",
 	"btn_cancel": "Cancelar",
+	"btn_confirm": "Confirmar",
 	"btn_edit": "Editar",
 	"btn_create": "Crear",
 	"btn_delete": "Eliminar",

frontend/src/lib/components/ConfirmDialog.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
+import { m } from '$lib/paraglide/messages.js';
+
+// Context must already be set by the parent layout via provideConfirmService().
+const service = getConfirmService();
+
+let dialogEl: HTMLDialogElement;
+
+$effect(() => {
+	if (service.options) {
+		dialogEl.showModal();
+	} else {
+		dialogEl.close();
+	}
+});
+</script>
+
+<dialog
+	bind:this={dialogEl}
+	class="m-auto w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg backdrop:bg-black/50"
+	aria-labelledby="confirm-title"
+	oncancel={(e) => {
+		e.preventDefault();
+		service.settle(false);
+	}}
+	onclick={(e) => {
+		const opts = service.options;
+		if (!opts) return;
+		const closeOnBackdrop = opts.closeOnBackdrop ?? !opts.destructive;
+		if (closeOnBackdrop && e.target === dialogEl) {
+			service.settle(false);
+		}
+	}}
+>
+	{#if service.options}
+		{@const opts = service.options}
+		<h2 id="confirm-title" class="mb-2 font-serif text-lg text-ink">{opts.title}</h2>
+		{#if opts.body !== undefined}
+			<p class="mb-6 text-sm text-ink-2">{opts.body}</p>
+		{/if}
+		<div class="flex items-center justify-end gap-3">
+			<button
+				type="button"
+				class="min-h-[44px] cursor-pointer rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
+				onclick={() => service.settle(false)}
+			>
+				{opts.cancelLabel ?? m.btn_cancel()}
+			</button>
+			<button
+				type="button"
+				class="min-h-[44px] cursor-pointer rounded-sm px-4 py-2 text-sm font-medium transition-colors {opts.destructive
+					? 'bg-danger text-danger-fg hover:bg-danger/80'
+					: 'bg-primary text-primary-fg hover:bg-primary/80'}"
+				onclick={() => service.settle(true)}
+			>
+				{opts.confirmLabel ?? m.btn_confirm()}
+			</button>
+		</div>
+	{/if}
+</dialog>

frontend/src/lib/components/ConfirmDialog.svelte.spec.ts

@@ -0,0 +1,130 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import ConfirmDialog from './ConfirmDialog.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
+
+afterEach(cleanup);
+
+function renderDialog() {
+	const service = createConfirmService();
+	const result = render(ConfirmDialog, {
+		context: new Map([[CONFIRM_KEY, service]])
+	});
+	return { ...result, service };
+}
+
+describe('ConfirmDialog', () => {
+	it('renders the title when options are set', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Delete this item?' });
+
+		await expect.element(page.getByText('Delete this item?')).toBeInTheDocument();
+		service.settle(false);
+	});
+
+	it('renders the body when provided', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Delete?', body: 'This cannot be undone.' });
+
+		await expect.element(page.getByText('This cannot be undone.')).toBeInTheDocument();
+		service.settle(false);
+	});
+
+	it('does not render body element when body is omitted', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Delete?' });
+
+		await expect.element(page.getByText('Delete?')).toBeInTheDocument();
+		const body = document.querySelector('p');
+		expect(body).toBeNull();
+		service.settle(false);
+	});
+
+	it('applies bg-danger class on confirm button when destructive', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Delete?', destructive: true });
+
+		await expect.element(page.getByText('Delete?')).toBeInTheDocument();
+		const confirmBtn = document.querySelector('button[class*="bg-danger"]');
+		expect(confirmBtn).not.toBeNull();
+		service.settle(false);
+	});
+
+	it('applies bg-primary class on confirm button when not destructive', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Confirm action?' });
+
+		await expect.element(page.getByText('Confirm action?')).toBeInTheDocument();
+		const confirmBtn = document.querySelector('button[class*="bg-primary"]');
+		expect(confirmBtn).not.toBeNull();
+		service.settle(false);
+	});
+
+	it('renders custom confirmLabel when provided', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Remove?', confirmLabel: 'Yes, remove it' });
+
+		await expect.element(page.getByRole('button', { name: 'Yes, remove it' })).toBeInTheDocument();
+		service.settle(false);
+	});
+
+	it('renders custom cancelLabel when provided', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Remove?', cancelLabel: 'No, keep it' });
+
+		await expect.element(page.getByRole('button', { name: 'No, keep it' })).toBeInTheDocument();
+		service.settle(false);
+	});
+
+	it('settles true when confirm button is clicked', async () => {
+		const { service } = renderDialog();
+		const resultPromise = service.confirm({ title: 'Do it?' });
+
+		await expect.element(page.getByText('Do it?')).toBeInTheDocument();
+		const confirmBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[1];
+		confirmBtn.click();
+
+		expect(await resultPromise).toBe(true);
+	});
+
+	it('settles false when cancel button is clicked', async () => {
+		const { service } = renderDialog();
+		const resultPromise = service.confirm({ title: 'Do it?' });
+
+		await expect.element(page.getByText('Do it?')).toBeInTheDocument();
+		const cancelBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
+		cancelBtn.click();
+
+		expect(await resultPromise).toBe(false);
+	});
+
+	it('hides content when no options are set', () => {
+		renderDialog();
+		const heading = document.querySelector('#confirm-title');
+		expect(heading).toBeNull();
+	});
+
+	it('has aria-labelledby pointing to the title element', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Accessible title' });
+
+		await expect.element(page.getByText('Accessible title')).toBeInTheDocument();
+		const dialog = document.querySelector('dialog');
+		expect(dialog?.getAttribute('aria-labelledby')).toBe('confirm-title');
+		const title = document.getElementById('confirm-title');
+		expect(title).not.toBeNull();
+		service.settle(false);
+	});
+
+	it('does not show content after settling', async () => {
+		const { service } = renderDialog();
+		service.confirm({ title: 'Gone soon?' });
+		await expect.element(page.getByText('Gone soon?')).toBeInTheDocument();
+		service.settle(false);
+
+		await vi.waitFor(() => {
+			expect(document.querySelector('#confirm-title')).toBeNull();
+		});
+	});
+});

frontend/src/lib/components/TranscriptionBlock.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 import CommentThread from './CommentThread.svelte';
 
+const { confirm } = getConfirmService();
+
 type SaveState = 'idle' | 'saving' | 'saved' | 'fading' | 'error';
 
 type Props = {
@@ -90,10 +93,12 @@ function handleInput(event: Event) {
 	onTextChange(target.value);
 }
 
-function handleDelete() {
+async function handleDelete() {
-	if (confirm(m.transcription_block_delete_confirm())) {
+	const confirmed = await confirm({
-		onDeleteClick();
+		title: m.transcription_block_delete_confirm(),
-	}
+		destructive: true
+	});
+	if (confirmed) onDeleteClick();
 }
 
 function handleTextareaMouseUp() {

frontend/src/lib/components/TranscriptionBlock.svelte.spec.ts

@@ -1,25 +1,32 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
-import TranscriptionBlock from './TranscriptionBlock.svelte';
+import TranscriptionBlockHost from './TranscriptionBlock.test-host.svelte';
+import type { ConfirmService } from '$lib/services/confirm.svelte.js';
 
 afterEach(cleanup);
 
+const BASE_PROPS = {
+	blockId: 'block-1',
+	documentId: 'doc-1',
+	blockNumber: 3,
+	text: 'Liebe Mutter,',
+	label: null,
+	active: false,
+	saveState: 'idle' as const,
+	canComment: true,
+	currentUserId: 'user-1',
+	onTextChange: vi.fn(),
+	onFocus: vi.fn(),
+	onDeleteClick: vi.fn(),
+	onRetry: vi.fn()
+};
+
+// Renders TranscriptionBlock via the host, which provides ConfirmService context.
 function renderBlock(overrides: Record<string, unknown> = {}) {
-	return render(TranscriptionBlock, {
+	return render(TranscriptionBlockHost, {
-		blockId: 'block-1',
+		...BASE_PROPS,
-		documentId: 'doc-1',
+		onServiceReady: () => {},
-		blockNumber: 3,
-		text: 'Liebe Mutter,',
-		label: null,
-		active: false,
-		saveState: 'idle' as const,
-		canComment: true,
-		currentUserId: 'user-1',
-		onTextChange: vi.fn(),
-		onFocus: vi.fn(),
-		onDeleteClick: vi.fn(),
-		onRetry: vi.fn(),
 		...overrides
 	});
 }
@@ -162,29 +169,57 @@ describe('TranscriptionBlock — reorder controls', () => {
 
 // ─── Delete confirmation ──────────────────────────────────────────────────────
 
-describe('TranscriptionBlock — delete confirmation', () => {
+function renderBlockWithService(overrides: Record<string, unknown> = {}) {
-	it('does not call onDeleteClick when user cancels confirm dialog', async () => {
+	let service!: ConfirmService;
-		const onDeleteClick = vi.fn();
+	render(TranscriptionBlockHost, {
-		vi.spyOn(window, 'confirm').mockReturnValue(false);
+		blockId: 'block-1',
-		renderBlock({ onDeleteClick });
+		documentId: 'doc-1',
+		blockNumber: 3,
+		text: 'Liebe Mutter,',
+		label: null,
+		active: false,
+		saveState: 'idle' as const,
+		canComment: true,
+		currentUserId: 'user-1',
+		onTextChange: vi.fn(),
+		onFocus: vi.fn(),
+		onDeleteClick: vi.fn(),
+		onRetry: vi.fn(),
+		onServiceReady: (s: ConfirmService) => {
+			service = s;
+		},
+		...overrides
+	});
+	return { service };
+}
 
-		const deleteBtn = page.getByRole('button', { name: 'Löschen' });
+describe('TranscriptionBlock — delete confirmation', () => {
-		await deleteBtn.click();
+	it('does not call onDeleteClick when user cancels via confirm service', async () => {
+		const onDeleteClick = vi.fn();
+		const { service } = renderBlockWithService({ onDeleteClick });
+
+		// Use native DOM click so the async handler starts but yields at the await,
+		// letting the test observe service.options and settle the promise.
+		const deleteBtn = document.querySelector('button[aria-label="Löschen"]') as HTMLButtonElement;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(false);
+		await vi.waitFor(() => expect(service.options).toBeNull());
 
 		expect(onDeleteClick).not.toHaveBeenCalled();
-		vi.restoreAllMocks();
 	});
 
-	it('calls onDeleteClick when user confirms deletion', async () => {
+	it('calls onDeleteClick when user confirms via confirm service', async () => {
 		const onDeleteClick = vi.fn();
-		vi.spyOn(window, 'confirm').mockReturnValue(true);
+		const { service } = renderBlockWithService({ onDeleteClick });
-		renderBlock({ onDeleteClick });
 
-		const deleteBtn = page.getByRole('button', { name: 'Löschen' });
+		const deleteBtn = document.querySelector('button[aria-label="Löschen"]') as HTMLButtonElement;
-		await deleteBtn.click();
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+		await vi.waitFor(() => expect(service.options).toBeNull());
 
 		expect(onDeleteClick).toHaveBeenCalledOnce();
-		vi.restoreAllMocks();
 	});
 });
 

frontend/src/lib/components/TranscriptionBlock.test-host.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { provideConfirmService, type ConfirmService } from '$lib/services/confirm.svelte.js';
+import TranscriptionBlock from './TranscriptionBlock.svelte';
+
+type BlockProps = {
+	blockId: string;
+	documentId: string;
+	blockNumber: number;
+	text: string;
+	label: string | null;
+	active: boolean;
+	saveState: 'idle' | 'saving' | 'saved' | 'fading' | 'error';
+	canComment: boolean;
+	currentUserId: string | null;
+	onTextChange: (text: string) => void;
+	onFocus: () => void;
+	onDeleteClick: () => void;
+	onRetry: () => void;
+	onMoveUp?: () => void;
+	onMoveDown?: () => void;
+	isFirst?: boolean;
+	isLast?: boolean;
+};
+
+let {
+	onServiceReady,
+	...blockProps
+}: BlockProps & {
+	onServiceReady: (s: ConfirmService) => void;
+} = $props();
+
+const service = provideConfirmService();
+onServiceReady(service);
+</script>
+
+<TranscriptionBlock {...blockProps} />

frontend/src/lib/components/TranscriptionEditView.svelte.spec.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, afterEach } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import TranscriptionEditView from './TranscriptionEditView.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
 
 afterEach(cleanup);
 
@@ -24,17 +25,23 @@ const block2 = {
 	version: 0
 };
 
-function renderView(overrides: Record<string, unknown> = {}) {
+function renderView(overrides: Record<string, unknown> = {}, service = createConfirmService()) {
-	return render(TranscriptionEditView, {
+	return {
-		documentId: 'doc-1',
+		...render(TranscriptionEditView, {
-		blocks: [block1, block2],
+			props: {
-		canComment: true,
+				documentId: 'doc-1',
-		currentUserId: 'user-1',
+				blocks: [block1, block2],
-		onBlockFocus: vi.fn(),
+				canComment: true,
-		onSaveBlock: vi.fn(),
+				currentUserId: 'user-1',
-		onDeleteBlock: vi.fn(),
+				onBlockFocus: vi.fn(),
-		...overrides
+				onSaveBlock: vi.fn(),
-	});
+				onDeleteBlock: vi.fn(),
+				...overrides
+			},
+			context: new Map([[CONFIRM_KEY, service]])
+		}),
+		service
+	};
 }
 
 describe('TranscriptionEditView — rendering', () => {
@@ -200,25 +207,27 @@ describe('TranscriptionEditView — flush on blur', () => {
 describe('TranscriptionEditView — delete block', () => {
 	it('calls onDeleteBlock with correct blockId when delete is confirmed', async () => {
 		const onDeleteBlock = vi.fn().mockResolvedValue(undefined);
-		vi.spyOn(window, 'confirm').mockReturnValue(true);
+		const { service } = renderView({ onDeleteBlock });
-		renderView({ onDeleteBlock });
 
-		const deleteBtn = page.getByRole('button', { name: 'Löschen' }).first();
+		const deleteBtn = document.querySelector('button[aria-label="Löschen"]') as HTMLButtonElement;
-		await deleteBtn.click();
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+		await vi.waitFor(() => expect(service.options).toBeNull());
 
 		expect(onDeleteBlock).toHaveBeenCalledWith('b1');
-		vi.restoreAllMocks();
 	});
 
 	it('does not call onDeleteBlock when deletion is cancelled', async () => {
 		const onDeleteBlock = vi.fn();
-		vi.spyOn(window, 'confirm').mockReturnValue(false);
+		const { service } = renderView({ onDeleteBlock });
-		renderView({ onDeleteBlock });
 
-		const deleteBtn = page.getByRole('button', { name: 'Löschen' }).first();
+		const deleteBtn = document.querySelector('button[aria-label="Löschen"]') as HTMLButtonElement;
-		await deleteBtn.click();
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(false);
+		await vi.waitFor(() => expect(service.options).toBeNull());
 
 		expect(onDeleteBlock).not.toHaveBeenCalled();
-		vi.restoreAllMocks();
 	});
 });

frontend/src/lib/services/confirm.svelte.test.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page, userEvent } from 'vitest/browser';
+import TestHost from './confirm.test-host.svelte';
+import type { ConfirmService } from './confirm.svelte.js';
+
+afterEach(cleanup);
+
+function makeHost(): { service: ConfirmService } {
+	const result: { service: ConfirmService | null } = { service: null };
+	render(TestHost, {
+		onReady: (s: ConfirmService) => {
+			result.service = s;
+		}
+	});
+	return result as { service: ConfirmService };
+}
+
+describe('ConfirmService', () => {
+	it('resolves true when the user clicks Confirm', async () => {
+		const { service } = makeHost();
+
+		const resultPromise = service.confirm({ title: 'Test?' });
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		await page.getByRole('button', { name: 'Bestätigen' }).click();
+
+		expect(await resultPromise).toBe(true);
+	});
+
+	it('resolves false when the user clicks Cancel', async () => {
+		const { service } = makeHost();
+
+		const resultPromise = service.confirm({ title: 'Test?' });
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		await page.getByRole('button', { name: 'Abbrechen' }).click();
+
+		expect(await resultPromise).toBe(false);
+	});
+
+	it('resolves false when Escape is pressed', async () => {
+		const { service } = makeHost();
+
+		const resultPromise = service.confirm({ title: 'Test?' });
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+		await userEvent.keyboard('{Escape}');
+
+		expect(await resultPromise).toBe(false);
+	});
+
+	it('resolves false immediately on a concurrent call while dialog is open', async () => {
+		const { service } = makeHost();
+
+		const first = service.confirm({ title: 'First?' });
+		await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+
+		const second = service.confirm({ title: 'Second?' });
+		expect(await second).toBe(false);
+
+		// clean up the first dialog
+		await page.getByRole('button', { name: 'Abbrechen' }).click();
+		expect(await first).toBe(false);
+	});
+
+	it('throws a descriptive error when called outside provider tree', async () => {
+		const { getConfirmService } = await import('./confirm.svelte.js');
+		// Outside component init, getContext throws or returns undefined — our guard
+		// converts either case to a descriptive developer error
+		expect(() => getConfirmService()).toThrow('mount <ConfirmDialog>');
+	});
+});

frontend/src/lib/services/confirm.svelte.ts

@@ -0,0 +1,100 @@
+/**
+ * Context-based confirmation service. Provides an async `confirm()` function
+ * that any component can call without managing its own modal state.
+ *
+ * ## Setup
+ * Mount `<ConfirmDialog>` once in the root `+layout.svelte` — it sets up the context
+ * automatically. Then call `getConfirmService()` from any descendant component.
+ *
+ * ## Usage in event handlers
+ * ```typescript
+ * import { getConfirmService } from '$lib/services/confirm.svelte.js';
+ * const { confirm } = getConfirmService();
+ *
+ * async function handleDelete() {
+ *   const ok = await confirm({ title: m.confirm_delete_title(), destructive: true });
+ *   if (ok) doDelete();
+ * }
+ * ```
+ *
+ * ## Usage with use:enhance
+ * ```svelte
+ * <form use:enhance={async ({ cancel }) => {
+ *   const ok = await confirm({ title: m.confirm_delete_title(), destructive: true });
+ *   if (!ok) cancel();
+ * }}>
+ * ```
+ */
+import { getContext, setContext } from 'svelte';
+import { browser } from '$app/environment';
+
+export const CONFIRM_KEY = Symbol('confirm');
+
+export interface ConfirmOptions {
+	title: string;
+	body?: string;
+	/** Defaults to m.btn_confirm() ("Bestätigen") */
+	confirmLabel?: string;
+	/** Defaults to m.btn_cancel() ("Abbrechen") */
+	cancelLabel?: string;
+	/** Uses danger color for confirm button. Defaults to false. */
+	destructive?: boolean;
+	/** Close when clicking outside the dialog. Defaults to !destructive. */
+	closeOnBackdrop?: boolean;
+}
+
+export interface ConfirmService {
+	confirm(opts: ConfirmOptions): Promise<boolean>;
+	/** Read by ConfirmDialog to render the current dialog. Internal use only. */
+	readonly options: ConfirmOptions | null;
+	/** Called by ConfirmDialog when the user makes a choice. Internal use only. */
+	settle(value: boolean): void;
+}
+
+export function createConfirmService(): ConfirmService {
+	let resolveRef: ((value: boolean) => void) | null = null;
+	let options: ConfirmOptions | null = $state(null);
+
+	return {
+		confirm(opts: ConfirmOptions): Promise<boolean> {
+			if (!browser) return Promise.resolve(false);
+			// Concurrent call while dialog is already open — reject immediately.
+			if (resolveRef !== null) return Promise.resolve(false);
+			options = opts;
+			return new Promise((r) => {
+				resolveRef = r;
+			});
+		},
+
+		get options() {
+			return options;
+		},
+
+		settle(value: boolean): void {
+			options = null;
+			const r = resolveRef;
+			resolveRef = null;
+			r?.(value);
+		}
+	};
+}
+
+export function provideConfirmService(): ConfirmService {
+	const service = createConfirmService();
+	setContext(CONFIRM_KEY, service);
+	return service;
+}
+
+export function getConfirmService(): ConfirmService {
+	// Outside component init, getContext either returns undefined or throws a Svelte error.
+	// Either way, map it to our descriptive developer error.
+	let service: ConfirmService | undefined;
+	try {
+		service = getContext<ConfirmService>(CONFIRM_KEY);
+	} catch {
+		throw new Error('ConfirmService not found — mount <ConfirmDialog> in +layout.svelte');
+	}
+	if (!service)
+		throw new Error('ConfirmService not found — mount <ConfirmDialog> in +layout.svelte');
+	return service;
+}

frontend/src/lib/services/confirm.test-host.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { provideConfirmService, type ConfirmService } from './confirm.svelte.js';
+import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+
+let { onReady }: { onReady: (service: ConfirmService) => void } = $props();
+
+const service = provideConfirmService();
+onReady(service);
+</script>
+
+<ConfirmDialog />

frontend/src/routes/+layout.svelte

@@ -7,9 +7,15 @@ import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 import NotificationBell from '$lib/components/NotificationBell.svelte';
 import AppNav from './AppNav.svelte';
 import UserMenu from './UserMenu.svelte';
+import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
+import { provideConfirmService } from '$lib/services/confirm.svelte.js';
 
 let { children, data } = $props();
 
+// Provide the confirmation service to the entire component tree.
+// ConfirmDialog below reads it via getConfirmService() and renders the <dialog>.
+provideConfirmService();
+
 const isAdmin = $derived(
 	data?.user?.groups?.some((g: { permissions: string[] }) => g.permissions.includes('ADMIN'))
 );
@@ -70,4 +76,7 @@ const userInitials = $derived.by(() => {
 	<main class={isAuthPage ? '' : 'py-6'}>
 		{@render children()}
 	</main>
+
+	<!-- Shared confirmation dialog — used by getConfirmService() throughout the app -->
+	<ConfirmDialog />
 </div>

frontend/src/routes/admin/groups/[id]/+page.svelte

@@ -2,12 +2,24 @@
 import { enhance } from '$app/forms';
 import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 let { data, form } = $props();
 
+const { confirm } = getConfirmService();
+
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
 let discardTarget: string | null = $state(null);
+let deleteFormEl = $state<HTMLFormElement | null>(null);
+
+async function handleDelete() {
+	const confirmed = await confirm({
+		title: m.admin_group_delete_confirm(),
+		destructive: true
+	});
+	if (confirmed) deleteFormEl!.requestSubmit();
+}
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -59,18 +71,10 @@ const ADMIN_PERMISSIONS = $derived([
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_group_edit_heading({ name: data.group.name })}
 		</h2>
-		<form
+		<form bind:this={deleteFormEl} method="POST" action="?/delete" use:enhance>
-			method="POST"
-			action="?/delete"
-			use:enhance={({ cancel }) => {
-				if (!confirm(m.admin_group_delete_confirm())) cancel();
-				return async ({ update }) => {
-					await update();
-				};
-			}}
-		>
 			<button
-				type="submit"
+				type="button"
+				onclick={handleDelete}
 				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1.5 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60"
 			>
 				{m.btn_delete()}

frontend/src/routes/admin/groups/[id]/page.svelte.spec.ts

@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import Page from './+page.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
 
 vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
 vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
@@ -11,24 +12,35 @@ import { beforeNavigate, goto } from '$app/navigation';
 const baseGroup = { id: 'g1', name: 'Editoren', permissions: ['WRITE_ALL'] };
 const baseData = { group: baseGroup };
 
+type PageProps = { data: typeof baseData; form: Record<string, unknown> | null };
+
+function renderPage(props: PageProps) {
+	const service = createConfirmService();
+	const result = render(Page, {
+		props,
+		context: new Map([[CONFIRM_KEY, service]])
+	});
+	return { ...result, service };
+}
+
 afterEach(cleanup);
 
 // ─── Rendering ────────────────────────────────────────────────────────────────
 
 describe('Admin edit group page – rendering', () => {
 	it('renders the heading with group name', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect.element(page.getByText(/Gruppe: Editoren/i)).toBeInTheDocument();
 	});
 
 	it('pre-fills the name input', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const input = document.querySelector<HTMLInputElement>('input[name="name"]');
 		expect(input?.value).toBe('Editoren');
 	});
 
 	it('pre-checks permissions that the group already has', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const checkbox = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="WRITE_ALL"]'
 		);
@@ -36,14 +48,14 @@ describe('Admin edit group page – rendering', () => {
 	});
 
 	it('renders the cancel link pointing to /admin/groups', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect
 			.element(page.getByRole('link', { name: /Abbrechen/i }))
 			.toHaveAttribute('href', '/admin/groups');
 	});
 
 	it('renders a READ_ALL checkbox in the standard permissions section', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
 		);
@@ -51,7 +63,7 @@ describe('Admin edit group page – rendering', () => {
 	});
 
 	it('renders an ANNOTATE_ALL checkbox in the standard permissions section', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
 		);
@@ -60,7 +72,7 @@ describe('Admin edit group page – rendering', () => {
 
 	it('pre-checks READ_ALL when group has it', async () => {
 		const data = { group: { id: 'g2', name: 'Leser', permissions: ['READ_ALL'] } };
-		render(Page, { data, form: null });
+		renderPage({ data, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="READ_ALL"]'
 		);
@@ -71,7 +83,7 @@ describe('Admin edit group page – rendering', () => {
 		const data = {
 			group: { id: 'g3', name: 'Annotatoren', permissions: ['READ_ALL', 'ANNOTATE_ALL'] }
 		};
-		render(Page, { data, form: null });
+		renderPage({ data, form: null });
 		const cb = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="permissions"][value="ANNOTATE_ALL"]'
 		);
@@ -79,18 +91,57 @@ describe('Admin edit group page – rendering', () => {
 	});
 });
 
+// ─── Delete confirmation ──────────────────────────────────────────────────────
+
+describe('Admin edit group page – delete confirmation', () => {
+	it('delete button has type=button (does not submit natively)', async () => {
+		renderPage({ data: baseData, form: null });
+		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
+		const deleteBtn = deleteForm.querySelector('button') as HTMLButtonElement;
+		expect(deleteBtn.type).toBe('button');
+	});
+
+	it('does not submit delete form when user cancels', async () => {
+		const { service } = renderPage({ data: baseData, form: null });
+		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(false);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).not.toHaveBeenCalled();
+	});
+
+	it('submits delete form when user confirms', async () => {
+		const { service } = renderPage({ data: baseData, form: null });
+		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).toHaveBeenCalledOnce();
+	});
+});
+
 // ─── Unsaved-changes guard ────────────────────────────────────────────────────
 
 describe('Admin edit group page – unsaved-changes guard', () => {
 	beforeEach(() => vi.clearAllMocks());
 
 	it('does not show unsaved warning initially', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
 	});
 
 	it('cancels navigation and shows warning when form is dirty', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document
@@ -105,7 +156,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
 	});
 
 	it('does not cancel navigation when form is clean', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		const cancel = vi.fn();
@@ -115,7 +166,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
 	});
 
 	it('discard button calls goto with the target URL', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document
@@ -130,7 +181,7 @@ describe('Admin edit group page – unsaved-changes guard', () => {
 	});
 
 	it('clears dirty state when form saves successfully', async () => {
-		const { rerender } = render(Page, { data: baseData, form: null });
+		const { rerender } = renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document

frontend/src/routes/admin/users/[id]/+page.svelte

@@ -2,17 +2,29 @@
 import { enhance } from '$app/forms';
 import { beforeNavigate, goto } from '$app/navigation';
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 import UserProfileSection from '$lib/components/user/UserProfileSection.svelte';
 import UserGroupsSection from '$lib/components/user/UserGroupsSection.svelte';
 import UserPasswordSection from '$lib/components/user/UserPasswordSection.svelte';
 
 let { data, form } = $props();
 
+const { confirm } = getConfirmService();
+
 const selectedGroupIds = $derived(data.editUser.groups?.map((g: { id: string }) => g.id) ?? []);
 
 let isDirty = $state(false);
 let showUnsavedWarning = $state(false);
 let discardTarget: string | null = $state(null);
+let deleteFormEl = $state<HTMLFormElement | null>(null);
+
+async function handleDelete() {
+	const confirmed = await confirm({
+		title: m.admin_user_delete_confirm({ username: data.editUser.username }),
+		destructive: true
+	});
+	if (confirmed) deleteFormEl!.requestSubmit();
+}
 
 beforeNavigate(({ cancel, to }) => {
 	if (isDirty) {
@@ -51,20 +63,10 @@ $effect(() => {
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_user_edit_heading({ username: data.editUser.username })}
 		</h2>
-		<form
+		<form bind:this={deleteFormEl} method="POST" action="?/delete" use:enhance>
-			method="POST"
-			action="?/delete"
-			use:enhance={({ cancel }) => {
-				if (!confirm(m.admin_user_delete_confirm({ username: data.editUser.username }))) {
-					cancel();
-				}
-				return async ({ update }) => {
-					await update();
-				};
-			}}
-		>
 			<button
-				type="submit"
+				type="button"
+				onclick={handleDelete}
 				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-900 dark:bg-red-950/30 dark:text-red-400"
 			>
 				{m.btn_delete()}…

frontend/src/routes/admin/users/[id]/page.svelte.spec.ts

@@ -2,6 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import Page from './+page.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
 
 vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
 vi.mock('$app/navigation', () => ({ beforeNavigate: vi.fn(), goto: vi.fn() }));
@@ -35,54 +36,65 @@ const baseData = {
 	groups
 };
 
+type PageProps = { data: typeof baseData; form: Record<string, unknown> | null };
+
+function renderPage(props: PageProps) {
+	const service = createConfirmService();
+	const result = render(Page, {
+		props,
+		context: new Map([[CONFIRM_KEY, service]])
+	});
+	return { ...result, service };
+}
+
 afterEach(cleanup);
 
 // ─── Rendering ────────────────────────────────────────────────────────────────
 
 describe('Admin edit user page – rendering', () => {
 	it('renders the heading with username', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect.element(page.getByText(/Benutzer bearbeiten: max/i)).toBeInTheDocument();
 	});
 
 	it('pre-fills first name from editUser data', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const input = document.querySelector<HTMLInputElement>('input[name="firstName"]');
 		expect(input?.value).toBe('Max');
 	});
 
 	it('pre-fills last name from editUser data', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const input = document.querySelector<HTMLInputElement>('input[name="lastName"]');
 		expect(input?.value).toBe('Mustermann');
 	});
 
 	it('pre-fills email from editUser data', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const input = document.querySelector<HTMLInputElement>('input[name="email"]');
 		expect(input?.value).toBe('max@example.com');
 	});
 
 	it('pre-fills birth date in German format (dd.mm.yyyy)', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const input = document.querySelector<HTMLInputElement>('input[placeholder="TT.MM.JJJJ"]');
 		expect(input?.value).toBe('22.03.1985');
 	});
 
 	it('pre-fills contact field', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const textarea = document.querySelector<HTMLTextAreaElement>('textarea[name="contact"]');
 		expect(textarea?.value).toBe('Tel: 0123');
 	});
 
 	it('renders group checkboxes', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect.element(page.getByText('Editoren')).toBeInTheDocument();
 		await expect.element(page.getByText('Admins')).toBeInTheDocument();
 	});
 
 	it('pre-selects the groups the user already belongs to', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const checkbox = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="groupIds"][value="g1"]'
 		);
@@ -90,7 +102,7 @@ describe('Admin edit user page – rendering', () => {
 	});
 
 	it('does not pre-select groups the user does not belong to', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const checkbox = document.querySelector<HTMLInputElement>(
 			'input[type="checkbox"][name="groupIds"][value="g2"]'
 		);
@@ -98,7 +110,7 @@ describe('Admin edit user page – rendering', () => {
 	});
 
 	it('includes pre-selected group ids in FormData at submit time (guards against groupIds being empty)', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const form = document.querySelector<HTMLFormElement>('form#edit-user-form')!;
 		const formData = new FormData(form);
 		expect(formData.getAll('groupIds')).toContain('g1');
@@ -106,7 +118,7 @@ describe('Admin edit user page – rendering', () => {
 	});
 
 	it('password fields are empty by default', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const passwordInputs = document.querySelectorAll<HTMLInputElement>('input[type="password"]');
 		passwordInputs.forEach((input) => {
 			expect(input.value).toBe('');
@@ -114,14 +126,14 @@ describe('Admin edit user page – rendering', () => {
 	});
 
 	it('cancel link points to /admin/users', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect
 			.element(page.getByRole('link', { name: /Abbrechen/i }))
 			.toHaveAttribute('href', '/admin/users');
 	});
 
 	it('renders the save button', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
 	});
 });
@@ -130,33 +142,72 @@ describe('Admin edit user page – rendering', () => {
 
 describe('Admin edit user page – feedback', () => {
 	it('shows success message when form.success is true', async () => {
-		render(Page, { data: baseData, form: { success: true } });
+		renderPage({ data: baseData, form: { success: true } });
 		await expect.element(page.getByText(/Änderungen gespeichert/i)).toBeInTheDocument();
 	});
 
 	it('shows error message when form.error is set', async () => {
-		render(Page, { data: baseData, form: { error: 'Ungültige Eingabe.' } });
+		renderPage({ data: baseData, form: { error: 'Ungültige Eingabe.' } });
 		await expect.element(page.getByText('Ungültige Eingabe.')).toBeInTheDocument();
 	});
 
 	it('does not show success message when form is null', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect.element(page.getByText(/Änderungen gespeichert/i)).not.toBeInTheDocument();
 	});
 });
 
+// ─── Delete confirmation ──────────────────────────────────────────────────────
+
+describe('Admin edit user page – delete confirmation', () => {
+	it('delete button has type=button (does not submit natively)', async () => {
+		renderPage({ data: baseData, form: null });
+		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
+		const deleteBtn = deleteForm.querySelector('button') as HTMLButtonElement;
+		expect(deleteBtn.type).toBe('button');
+	});
+
+	it('does not submit delete form when user cancels', async () => {
+		const { service } = renderPage({ data: baseData, form: null });
+		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(false);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).not.toHaveBeenCalled();
+	});
+
+	it('submits delete form when user confirms', async () => {
+		const { service } = renderPage({ data: baseData, form: null });
+		const deleteForm = document.querySelector<HTMLFormElement>('form[action="?/delete"]')!;
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = deleteForm.querySelector('button[type="button"]') as HTMLButtonElement;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).toHaveBeenCalledOnce();
+	});
+});
+
 // ─── Unsaved-changes guard ────────────────────────────────────────────────────
 
 describe('Admin edit user page – unsaved-changes guard', () => {
 	beforeEach(() => vi.clearAllMocks());
 
 	it('does not show unsaved warning initially', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		await expect.element(page.getByText(/ungespeicherte Änderungen/i)).not.toBeInTheDocument();
 	});
 
 	it('cancels navigation and shows warning when form is dirty', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document
@@ -171,7 +222,7 @@ describe('Admin edit user page – unsaved-changes guard', () => {
 	});
 
 	it('does not cancel navigation when form is clean', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		const cancel = vi.fn();
@@ -181,7 +232,7 @@ describe('Admin edit user page – unsaved-changes guard', () => {
 	});
 
 	it('discard button calls goto with the target URL', async () => {
-		render(Page, { data: baseData, form: null });
+		renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document
@@ -196,7 +247,7 @@ describe('Admin edit user page – unsaved-changes guard', () => {
 	});
 
 	it('clears dirty state when form saves successfully', async () => {
-		const { rerender } = render(Page, { data: baseData, form: null });
+		const { rerender } = renderPage({ data: baseData, form: null });
 		const [callback] = vi.mocked(beforeNavigate).mock.calls[0];
 
 		document

frontend/src/routes/documents/[id]/edit/SaveBar.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 let { docId }: { docId: string } = $props();
 
-let confirmDelete = $state(false);
+const { confirm } = getConfirmService();
+
+async function handleDelete() {
+	const confirmed = await confirm({
+		title: m.doc_delete_confirm(),
+		destructive: true
+	});
+	if (confirmed) {
+		(document.getElementById('delete-form') as HTMLFormElement | null)?.requestSubmit();
+	}
+}
 </script>
 
 <div
@@ -29,57 +40,37 @@ let confirmDelete = $state(false);
 			</button>
 		</div>
 
-		<!-- Secondary: delete + cancel (row on both mobile and desktop) -->
+		<!-- Secondary: delete + cancel -->
 		<div class="flex items-center justify-between sm:justify-start sm:gap-4">
-			{#if confirmDelete}
+			<button
-				<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
+				type="button"
-				<div class="flex items-center gap-3">
+				onclick={handleDelete}
-					<button
+				class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
-						type="submit"
+			>
-						form="delete-form"
+				<svg
-						class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
+					xmlns="http://www.w3.org/2000/svg"
-					>
+					class="h-4 w-4"
-						{m.btn_delete()}
+					viewBox="0 0 24 24"
-					</button>
+					fill="none"
-					<button
+					stroke="currentColor"
-						type="button"
+					stroke-width="2"
-						onclick={() => (confirmDelete = false)}
+					stroke-linecap="round"
-						class="text-sm text-ink-2 transition-colors hover:text-ink"
+					stroke-linejoin="round"
-					>
+					aria-hidden="true"
-						{m.btn_cancel()}
-					</button>
-				</div>
-			{:else}
-				<button
-					type="button"
-					onclick={() => (confirmDelete = true)}
-					class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
 				>
-					<svg
+					<polyline points="3 6 5 6 21 6" />
-						xmlns="http://www.w3.org/2000/svg"
+					<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-						class="h-4 w-4"
+					<path d="M10 11v6M14 11v6" />
-						viewBox="0 0 24 24"
+					<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-						fill="none"
+				</svg>
-						stroke="currentColor"
+				{m.btn_delete()}
-						stroke-width="2"
+			</button>
-						stroke-linecap="round"
+			<a
-						stroke-linejoin="round"
+				href="/documents/{docId}"
-						aria-hidden="true"
+				class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-					>
+			>
-						<polyline points="3 6 5 6 21 6" />
+				{m.btn_cancel()}
-						<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+			</a>
-						<path d="M10 11v6M14 11v6" />
-						<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
-					</svg>
-					{m.btn_delete()}
-				</button>
-				<a
-					href="/documents/{docId}"
-					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
-				>
-					{m.btn_cancel()}
-				</a>
-			{/if}
 		</div>
 	</div>
 </div>

frontend/src/routes/documents/[id]/edit/SaveBar.svelte.spec.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import SaveBar from './SaveBar.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
+
+let appendedForms: HTMLFormElement[] = [];
+
+afterEach(() => {
+	cleanup();
+	appendedForms.forEach((f) => f.remove());
+	appendedForms = [];
+});
+
+function renderSaveBar(docId = 'doc-1') {
+	const service = createConfirmService();
+
+	// Mount a dummy delete form so SaveBar can find it via document.getElementById
+	const deleteForm = document.createElement('form');
+	deleteForm.id = 'delete-form';
+	document.body.appendChild(deleteForm);
+	appendedForms.push(deleteForm);
+
+	const result = render(SaveBar, {
+		props: { docId },
+		context: new Map([[CONFIRM_KEY, service]])
+	});
+
+	return { ...result, service, deleteForm };
+}
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('SaveBar — rendering', () => {
+	it('renders save button', async () => {
+		renderSaveBar();
+		await expect.element(page.getByRole('button', { name: /Speichern/i })).toBeInTheDocument();
+	});
+
+	it('renders delete button', async () => {
+		renderSaveBar();
+		// The delete button should be type="button" (async confirm flow)
+		const deleteBtn = document.querySelector('button[type="button"]');
+		expect(deleteBtn).not.toBeNull();
+	});
+
+	it('renders cancel link pointing to /documents/doc-1', async () => {
+		renderSaveBar();
+		await expect
+			.element(page.getByRole('link', { name: /Abbrechen/i }))
+			.toHaveAttribute('href', '/documents/doc-1');
+	});
+});
+
+// ─── Delete confirmation ──────────────────────────────────────────────────────
+
+describe('SaveBar — delete confirmation', () => {
+	it('opens confirm dialog when delete button is clicked', async () => {
+		const { service } = renderSaveBar();
+		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		expect(service.options?.destructive).toBe(true);
+		service.settle(false);
+	});
+
+	it('submits delete form when user confirms', async () => {
+		const { service, deleteForm } = renderSaveBar();
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).toHaveBeenCalledOnce();
+	});
+
+	it('does not submit delete form when user cancels', async () => {
+		const { service, deleteForm } = renderSaveBar();
+		const requestSubmit = vi.spyOn(deleteForm, 'requestSubmit').mockImplementation(() => {});
+
+		const deleteBtn = document.querySelectorAll<HTMLButtonElement>('button[type="button"]')[0];
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(false);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		expect(requestSubmit).not.toHaveBeenCalled();
+	});
+});

frontend/src/routes/layout.css

@@ -66,6 +66,10 @@
 	/* Focus ring — keyboard focus indicator, mode-aware (navy in light, mint in dark) */
 	--color-focus-ring: var(--c-focus-ring);
 
+	/* Danger — destructive action color */
+	--color-danger: var(--c-danger);
+	--color-danger-fg: var(--c-danger-fg);
+
 	/* Static brand tokens (not themed) */
 	--color-brand-navy: var(--palette-navy);
 	--color-brand-mint: var(--palette-mint);
@@ -107,6 +111,10 @@
 	--c-pdf-ctrl: #d8d8d8;
 	--c-pdf-text: #333333;
 
+	/* Danger — destructive actions (5.1:1 on white — WCAG AA ✓) */
+	--c-danger: #c0392b;
+	--c-danger-fg: #ffffff;
+
 	/* PersonType badge — institution (navy-tinted blue) */
 	--c-badge-institution-bg: #e8eff7;
 	--c-badge-institution-text: #1a4971;
@@ -171,6 +179,10 @@
 		--c-badge-unknown-bg: rgba(122, 90, 10, 0.25);
 		--c-badge-unknown-text: #e0c060;
 		--c-badge-unknown-border: rgba(122, 90, 10, 0.4);
+
+		/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
+		--c-danger: #e55347;
+		--c-danger-fg: #ffffff;
 	}
 }
 
@@ -219,6 +231,10 @@
 	--c-badge-unknown-bg: rgba(122, 90, 10, 0.25);
 	--c-badge-unknown-text: #e0c060;
 	--c-badge-unknown-border: rgba(122, 90, 10, 0.4);
+
+	/* Danger — destructive actions (4.7:1 on #011526 — WCAG AA ✓) */
+	--c-danger: #e55347;
+	--c-danger-fg: #ffffff;
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */

frontend/src/routes/persons/[id]/edit/NameHistoryEditCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
+import { getConfirmService } from '$lib/services/confirm.svelte.js';
 
 interface Props {
 	aliases: Array<{
@@ -16,10 +17,12 @@ interface Props {
 
 let { aliases, canWrite, aliasError = null }: Props = $props();
 
+const { confirm } = getConfirmService();
+
 let sorted = $derived([...aliases].sort((a, b) => a.sortOrder - b.sortOrder));
 
-let showDeleteModal = $state(false);
+let removeFormEl = $state<HTMLFormElement | null>(null);
-let deleteTargetId: string | null = $state(null);
+let aliasIdInputEl = $state<HTMLInputElement | null>(null);
 
 function typeLabel(type: string): string {
 	switch (type) {
@@ -34,9 +37,16 @@ function typeLabel(type: string): string {
 	}
 }
 
-function confirmDelete(id: string) {
+async function handleDelete(id: string) {
-	deleteTargetId = id;
+	const confirmed = await confirm({
-	showDeleteModal = true;
+		title: m.person_alias_delete_title(),
+		body: m.person_alias_delete_body(),
+		destructive: true
+	});
+	if (confirmed && removeFormEl) {
+		if (aliasIdInputEl) aliasIdInputEl.value = id;
+		removeFormEl.requestSubmit();
+	}
 }
 </script>
 
@@ -65,7 +75,7 @@ function confirmDelete(id: string) {
 					{#if canWrite}
 						<button
 							type="button"
-							onclick={() => confirmDelete(alias.id)}
+							onclick={() => handleDelete(alias.id)}
 							aria-label="{m.person_alias_btn_delete()} {alias.lastName}"
 							class="ml-4 inline-flex min-h-[44px] min-w-[44px] items-center justify-center text-red-400 transition-colors hover:text-red-600"
 						>
@@ -91,6 +101,11 @@ function confirmDelete(id: string) {
 	{/if}
 
 	{#if canWrite}
+		<!-- Hidden form for alias removal — submitted programmatically after ConfirmService dialog -->
+		<form bind:this={removeFormEl} method="POST" action="?/removeAlias" use:enhance class="hidden">
+			<input bind:this={aliasIdInputEl} type="hidden" name="aliasId" value="" />
+		</form>
+
 		<div class="mt-4 border-t border-line pt-4">
 			<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.person_alias_add_heading()}
@@ -143,43 +158,3 @@ function confirmDelete(id: string) {
 		</div>
 	{/if}
 </div>
-
-{#if showDeleteModal}
-	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-		<div class="mx-4 max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg">
-			<h3 class="mb-2 font-serif text-lg text-ink">{m.person_alias_delete_title()}</h3>
-			<p class="mb-6 text-sm text-ink-2">{m.person_alias_delete_body()}</p>
-			<div class="flex items-center justify-end gap-3">
-				<button
-					type="button"
-					onclick={() => {
-						showDeleteModal = false;
-						deleteTargetId = null;
-					}}
-					class="rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
-				>
-					{m.btn_cancel()}
-				</button>
-				<form
-					method="POST"
-					action="?/removeAlias"
-					use:enhance={() => {
-						return async ({ update }) => {
-							showDeleteModal = false;
-							deleteTargetId = null;
-							await update();
-						};
-					}}
-				>
-					<input type="hidden" name="aliasId" value={deleteTargetId} />
-					<button
-						type="submit"
-						class="rounded-sm bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700"
-					>
-						{m.person_alias_btn_delete()}
-					</button>
-				</form>
-			</div>
-		</div>
-	</div>
-{/if}

frontend/src/routes/persons/[id]/edit/NameHistoryEditCard.svelte.spec.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import NameHistoryEditCard from './NameHistoryEditCard.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+afterEach(cleanup);
+
+const aliases = [
+	{ id: 'a1', lastName: 'Müller', firstName: 'Anna', type: 'BIRTH', sortOrder: 0 },
+	{ id: 'a2', lastName: 'Schmidt', firstName: null, type: 'MARRIED', sortOrder: 1 }
+];
+
+function renderCard(overrides: Record<string, unknown> = {}) {
+	const service = createConfirmService();
+	const result = render(NameHistoryEditCard, {
+		props: { aliases, canWrite: true, ...overrides },
+		context: new Map([[CONFIRM_KEY, service]])
+	});
+	return { ...result, service };
+}
+
+// ─── Rendering ────────────────────────────────────────────────────────────────
+
+describe('NameHistoryEditCard — rendering', () => {
+	it('renders alias last names', async () => {
+		renderCard();
+		await expect.element(page.getByText('Müller')).toBeInTheDocument();
+		await expect.element(page.getByText('Schmidt')).toBeInTheDocument();
+	});
+
+	it('renders delete buttons when canWrite', async () => {
+		renderCard();
+		const btns = document.querySelectorAll('button[type="button"]');
+		expect(btns.length).toBeGreaterThanOrEqual(2);
+	});
+
+	it('does not render delete buttons when canWrite is false', async () => {
+		renderCard({ canWrite: false });
+		const btns = document.querySelectorAll<HTMLButtonElement>('button[type="button"]');
+		expect(btns.length).toBe(0);
+	});
+
+	it('does not show the inline delete modal (replaced by ConfirmService)', async () => {
+		renderCard();
+		// The old inline modal div with "fixed inset-0" should not exist
+		const modal = document.querySelector('.fixed.inset-0');
+		expect(modal).toBeNull();
+	});
+});
+
+// ─── Delete confirmation ──────────────────────────────────────────────────────
+
+describe('NameHistoryEditCard — delete confirmation', () => {
+	it('opens confirm dialog when delete button is clicked', async () => {
+		const { service } = renderCard();
+		const deleteBtn = document.querySelector<HTMLButtonElement>('button[type="button"]')!;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		expect(service.options?.destructive).toBe(true);
+		service.settle(false);
+	});
+
+	it('submits removeAlias form when user confirms', async () => {
+		const { service } = renderCard();
+		const requestSubmit = vi
+			.spyOn(HTMLFormElement.prototype, 'requestSubmit')
+			.mockImplementation(() => {});
+
+		const deleteBtn = document.querySelector<HTMLButtonElement>('button[type="button"]')!;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+
+		// Wait for the async handleDelete callback to call requestSubmit
+		await vi.waitFor(() => expect(requestSubmit).toHaveBeenCalledOnce());
+		requestSubmit.mockRestore();
+	});
+
+	it('does not submit form when user cancels', async () => {
+		const { service } = renderCard();
+		const requestSubmit = vi
+			.spyOn(HTMLFormElement.prototype, 'requestSubmit')
+			.mockImplementation(() => {});
+
+		const deleteBtn = document.querySelector<HTMLButtonElement>('button[type="button"]')!;
+		deleteBtn.click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(false);
+		await vi.waitFor(() => expect(service.options).toBeNull());
+
+		// Allow pending microtasks to flush before asserting
+		await Promise.resolve();
+		expect(requestSubmit).not.toHaveBeenCalled();
+		requestSubmit.mockRestore();
+	});
+
+	it('submits with the correct aliasId when second alias is deleted', async () => {
+		const { service } = renderCard();
+		const requestSubmit = vi
+			.spyOn(HTMLFormElement.prototype, 'requestSubmit')
+			.mockImplementation(() => {});
+
+		// Click delete button for the second alias (Schmidt)
+		const deleteBtns = document.querySelectorAll<HTMLButtonElement>('button[type="button"]');
+		deleteBtns[1].click();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		service.settle(true);
+
+		await vi.waitFor(() => expect(requestSubmit).toHaveBeenCalledOnce());
+		const submittedForm = requestSubmit.mock.instances[0] as HTMLFormElement;
+		const aliasIdInput = submittedForm.querySelector<HTMLInputElement>('input[name="aliasId"]');
+		expect(aliasIdInput?.value).toBe('a2');
+		requestSubmit.mockRestore();
+	});
+});

frontend/src/routes/persons/[id]/edit/NameHistoryEditCard.svelte.test.ts

@@ -1,84 +1,100 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, afterEach, vi } from 'vitest';
-import { render } from 'vitest-browser-svelte';
+import { cleanup, render } from 'vitest-browser-svelte';
 import { page } from 'vitest/browser';
 import NameHistoryEditCard from './NameHistoryEditCard.svelte';
+import { createConfirmService, CONFIRM_KEY } from '$lib/services/confirm.svelte.js';
+
+vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
+
+afterEach(cleanup);
 
 const aliases = [
 	{ id: 'a1', lastName: 'de Gruyter', firstName: null, type: 'BIRTH', sortOrder: 0 },
 	{ id: 'a2', lastName: 'Schmidt', firstName: 'Maria', type: 'WIDOWED', sortOrder: 1 }
 ];
 
+function renderCard(props: Record<string, unknown> = {}) {
+	const service = createConfirmService();
+	return {
+		...render(NameHistoryEditCard, {
+			props: { aliases, canWrite: true, ...props },
+			context: new Map([[CONFIRM_KEY, service]])
+		}),
+		service
+	};
+}
+
 describe('NameHistoryEditCard', () => {
 	it('should render alias rows when aliases exist', async () => {
-		render(NameHistoryEditCard, { aliases, canWrite: true });
+		renderCard();
 
 		await expect.element(page.getByText('de Gruyter')).toBeInTheDocument();
 		await expect.element(page.getByText('Schmidt')).toBeInTheDocument();
 	});
 
 	it('should show empty state when no aliases', async () => {
-		render(NameHistoryEditCard, { aliases: [], canWrite: true });
+		renderCard({ aliases: [] });
 
 		const emptyText = document.querySelector('.italic');
 		expect(emptyText).not.toBeNull();
 	});
 
 	it('should show add form when canWrite is true', async () => {
-		render(NameHistoryEditCard, { aliases: [], canWrite: true });
+		renderCard({ aliases: [] });
 
 		const form = document.querySelector('form[action="?/addAlias"]');
 		expect(form).not.toBeNull();
 	});
 
 	it('should hide add form when canWrite is false', async () => {
-		render(NameHistoryEditCard, { aliases: [], canWrite: false });
+		renderCard({ aliases: [], canWrite: false });
 
 		const form = document.querySelector('form[action="?/addAlias"]');
 		expect(form).toBeNull();
 	});
 
 	it('should hide delete buttons when canWrite is false', async () => {
-		render(NameHistoryEditCard, { aliases, canWrite: false });
+		renderCard({ canWrite: false });
 
 		const deleteButtons = document.querySelectorAll('button[aria-label*="Entfernen"]');
 		expect(deleteButtons.length).toBe(0);
 	});
 
 	it('should show delete buttons when canWrite is true', async () => {
-		render(NameHistoryEditCard, { aliases, canWrite: true });
+		renderCard();
 
 		const deleteButtons = document.querySelectorAll('button[aria-label*="Entfernen"]');
 		expect(deleteButtons.length).toBe(2);
 	});
 
 	it('should include alias name in delete button aria-label', async () => {
-		render(NameHistoryEditCard, { aliases: [aliases[0]], canWrite: true });
+		renderCard({ aliases: [aliases[0]] });
 
 		const btn = document.querySelector('button[aria-label*="de Gruyter"]');
 		expect(btn).not.toBeNull();
 	});
 
-	it('should show delete modal when delete button is clicked', async () => {
+	it('should open ConfirmService dialog (not inline modal) when delete button is clicked', async () => {
-		render(NameHistoryEditCard, { aliases: [aliases[0]], canWrite: true });
+		const { service } = renderCard({ aliases: [aliases[0]] });
 
-		const deleteBtn = document.querySelector('button[aria-label*="de Gruyter"]')!;
+		const deleteBtn = document.querySelector(
-		deleteBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+			'button[aria-label*="de Gruyter"]'
+		) as HTMLButtonElement;
+		deleteBtn.click();
 
-		await expect.element(page.getByText('Alias entfernen?')).toBeInTheDocument();
+		await vi.waitFor(() => expect(service.options).not.toBeNull());
+		expect(service.options?.destructive).toBe(true);
+		service.settle(false);
 	});
 
 	it('should show alias error when provided', async () => {
-		render(NameHistoryEditCard, {
+		renderCard({ aliases: [], aliasError: 'Something went wrong' });
-			aliases: [],
-			canWrite: true,
-			aliasError: 'Something went wrong'
-		});
 
 		await expect.element(page.getByText('Something went wrong')).toBeInTheDocument();
 	});
 
 	it('should have required attribute on lastName input', async () => {
-		render(NameHistoryEditCard, { aliases: [], canWrite: true });
+		renderCard({ aliases: [] });
 
 		const input = document.querySelector('input[name="lastName"]') as HTMLInputElement;
 		expect(input.required).toBe(true);