feat(transcription): add frontend transcription editing UI (#176)

TranscriptionBlock.svelte: editable block card with auto-resize textarea,
  per-block save indicator, turquoise focus border, delete with confirmation
TranscriptionEditView.svelte: right panel with sorted block list,
  debounced auto-save (1.5s), beforeunload flush, empty state CTA
DocumentTopBar: add Transcribe/Done toggle with turquoise styling,
  mode exclusivity (transcribe and annotate mutually exclusive)
Document detail page: split view in transcribe mode (PDF left, blocks right),
  load/save/delete blocks via fetch, block focus syncs to annotation

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

frontend/src/lib/components/TranscriptionBlock.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+type SaveState = 'idle' | 'saving' | 'saved' | 'error';
+
+type Props = {
+	blockId: string;
+	blockNumber: number;
+	text: string;
+	label: string | null;
+	active: boolean;
+	saveState: SaveState;
+	onTextChange: (text: string) => void;
+	onFocus: () => void;
+	onCommentClick: () => void;
+	onDeleteClick: () => void;
+	onRetry: () => void;
+};
+
+let {
+	blockId,
+	blockNumber,
+	text,
+	label = null,
+	active,
+	saveState,
+	onTextChange,
+	onFocus,
+	onCommentClick,
+	onDeleteClick,
+	onRetry
+}: Props = $props();
+
+let leftBorderClass = $derived(
+	saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-[#00C7B1]' : ''
+);
+
+function autoresize(node: HTMLTextAreaElement) {
+	function resize() {
+		node.style.height = 'auto';
+		node.style.height = `${node.scrollHeight}px`;
+	}
+
+	resize();
+
+	return {
+		update() {
+			resize();
+		},
+		destroy() {}
+	};
+}
+
+function handleInput(event: Event) {
+	const target = event.target as HTMLTextAreaElement;
+	onTextChange(target.value);
+}
+
+function handleDelete() {
+	if (confirm(m.transcription_block_delete_confirm())) {
+		onDeleteClick();
+	}
+}
+</script>
+
+<div class="overflow-hidden rounded border border-line {leftBorderClass}" data-block-id={blockId}>
+	<div class="p-4">
+		<!-- Header -->
+		<div class="mb-2 flex items-center gap-2">
+			<span
+				class="flex h-6 w-6 items-center justify-center rounded-full bg-[#002850] text-xs font-bold text-white"
+			>
+				{blockNumber}
+			</span>
+			{#if label}
+				<span class="text-xs font-medium tracking-wide text-ink-2 uppercase">
+					{label}
+				</span>
+			{/if}
+		</div>
+
+		<!-- Textarea -->
+		<textarea
+			use:autoresize={text}
+			class="w-full resize-none border-none bg-transparent font-serif text-base leading-relaxed text-ink outline-none placeholder:text-ink-3"
+			placeholder={m.transcription_block_placeholder()}
+			rows={1}
+			value={text}
+			oninput={handleInput}
+			onfocus={onFocus}
+		></textarea>
+
+		<!-- Footer -->
+		<div class="flex items-center justify-between border-t border-line pt-2">
+			<div class="flex flex-col gap-1">
+				<button
+					type="button"
+					class="text-xs font-medium text-ink-2 transition-colors hover:text-ink"
+					onclick={onCommentClick}
+				>
+					{m.transcription_block_comment_btn()}
+				</button>
+				{#if active}
+					<span class="text-xs text-ink-3">
+						{m.transcription_block_quote_hint()}
+					</span>
+				{/if}
+			</div>
+
+			<div class="flex items-center gap-2">
+				<!-- Save state indicator -->
+				{#if saveState === 'saving'}
+					<span class="animate-pulse text-xs text-ink-3">
+						{m.transcription_block_save_saving()}
+					</span>
+				{:else if saveState === 'saved'}
+					<span class="text-xs text-green-600">
+						{m.transcription_block_save_saved()} <span class="inline-block">&#10003;</span>
+					</span>
+				{:else if saveState === 'error'}
+					<span class="text-error text-xs">
+						{m.transcription_block_save_error()}
+						<span class="mx-1">&mdash;</span>
+						<button
+							type="button"
+							class="underline transition-colors hover:text-ink"
+							onclick={onRetry}
+						>
+							{m.transcription_block_save_retry()}
+						</button>
+					</span>
+				{/if}
+
+				<!-- Delete button -->
+				<button
+					type="button"
+					class="hover:text-error text-ink-3 transition-colors"
+					aria-label={m.btn_delete()}
+					onclick={handleDelete}
+				>
+					<svg
+						class="h-4 w-4"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						stroke-width="1.5"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+						/>
+					</svg>
+				</button>
+			</div>
+		</div>
+	</div>
+</div>