feat(transcription): enable drawing turquoise rectangles on PDF to create blocks

- AnnotationLayer: add dimColor prop — annotations matching dim color
  render at 30% opacity with pointer-events disabled (300ms transition)
- PdfViewer: add transcribeMode prop, derived drawingEnabled/drawColor;
  in transcribe mode draws with turquoise (#00C7B1), routes draw events
  to onTranscriptionDraw callback instead of annotation endpoint
- DocumentViewer: pass through transcribeMode + onTranscriptionDraw
- Document detail page: createBlockFromDraw() POSTs to transcription
  blocks API on draw completion, adds created block to list
- Mode-based dimming: yellow annotations dim in transcribe mode,
  turquoise annotations dim in annotate mode

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

frontend/src/lib/components/PdfViewer.svelte

@@ -6,21 +6,27 @@ import AnnotationLayer from './AnnotationLayer.svelte';
 import type { Annotation } from '$lib/types';
 import { m } from '$lib/paraglide/messages.js';
 
+type DrawRect = { x: number; y: number; width: number; height: number; pageNumber: number };
+
 let {
 	url,
 	documentId = '',
 	annotateMode = $bindable(false),
+	transcribeMode = false,
 	activeAnnotationId = $bindable<string | null>(null),
 	activeAnnotationPage = $bindable<number | null>(null),
 	onAnnotationClick,
+	onTranscriptionDraw,
 	documentFileHash
 }: {
 	url: string;
 	documentId?: string;
 	annotateMode?: boolean;
+	transcribeMode?: boolean;
 	activeAnnotationId?: string | null;
 	activeAnnotationPage?: number | null;
 	onAnnotationClick?: (id: string) => void;
+	onTranscriptionDraw?: (rect: DrawRect) => void;
 	documentFileHash?: string | null;
 } = $props();
 
@@ -49,6 +55,10 @@ let annotateColor = $state('#ffff00');
 let commentCounts = new SvelteMap<string, number>();
 let showAnnotations = $state(true);
 
+const TRANSCRIPTION_COLOR = '#00C7B1';
+const drawingEnabled = $derived(annotateMode || transcribeMode);
+const drawColor = $derived(transcribeMode ? TRANSCRIPTION_COLOR : annotateColor);
+
 const visibleAnnotations = $derived(
 	annotations.filter((a) => !a.fileHash || !documentFileHash || a.fileHash === documentFileHash)
 );
@@ -194,8 +204,14 @@ async function loadAnnotations(docId: string) {
 	}
 }
 
-async function handleAnnotationDraw(rect: { x: number; y: number; width: number; height: number }) {
+async function handleDraw(rect: { x: number; y: number; width: number; height: number }) {
 	if (!documentId) return;
+
+	if (transcribeMode) {
+		onTranscriptionDraw?.({ ...rect, pageNumber: currentPage });
+		return;
+	}
+
 	try {
 		const res = await fetch(`/api/documents/${documentId}/annotations`, {
 			method: 'POST',
@@ -486,9 +502,10 @@ function zoomOut() {
 						{#if showAnnotations}
 							<AnnotationLayer
 								annotations={visibleAnnotations.filter((a) => a.pageNumber === currentPage)}
-								canAnnotate={annotateMode}
-								color={annotateColor}
-								onDraw={handleAnnotationDraw}
+								canAnnotate={drawingEnabled}
+								color={drawColor}
+								dimColor={transcribeMode ? '#ffff00' : annotateMode ? TRANSCRIPTION_COLOR : undefined}
+								onDraw={handleDraw}
 								onDelete={handleAnnotationDelete}
 								commentCounts={Object.fromEntries(commentCounts)}
 								onAnnotationClick={handleAnnotationClick}