OK

src/lib/Toolbar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Upload, Download, Paintbrush, Trash2, EyeOff } from 'lucide-svelte';
+	import { Upload, Download, Paintbrush, Trash2, EyeOff, ZoomIn } from 'lucide-svelte';
 	import { exportBoard, importBoard } from './io';
 	import { state } from './state.svelte';
 	import Palette from './Palette.svelte';
@@ -55,6 +55,8 @@
 	}
 
 	let zoomPercent = $derived(Math.round(state.viewport.zoom * 100));
+	let coordX = $derived(Math.round(-state.viewport.x / state.viewport.zoom));
+	let coordY = $derived(Math.round(-state.viewport.y / state.viewport.zoom));
 	const flagKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
 </script>
 
@@ -75,6 +77,7 @@
 		{/each}
 	</div>
 	<div class="spacer"></div>
+	<span class="coords">{coordX}, {coordY}</span>
 	<div class="zoom">
 		<input
 			type="range"
@@ -85,7 +88,10 @@
 			oninput={handleZoom}
 			title="Zoom"
 		/>
-		<span class="zoom-label">{zoomPercent}%</span>
+		<button class="zoom-reset" onclick={() => state.resetViewport()} title="Reset view (0, 0 at 100%)">
+			<ZoomIn size={12} />
+			<span>{zoomPercent}%</span>
+		</button>
 	</div>
 	<button onclick={() => state.editGlobal(true)} title="Style"><Paintbrush size={14} /></button>
 	<button onclick={handleClear} title="Clear"><Trash2 size={14} /></button>
@@ -198,10 +204,21 @@
 		background: var(--accent, #4a9eff);
 	}
 
-	.zoom-label {
+	.coords {
 		font-size: 11px;
 		color: var(--text-dim, #666);
-		min-width: 36px;
-		text-align: right;
+		display: flex;
+		align-items: center;
+		padding: 0 8px;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.zoom-reset {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 2px 6px;
+		font-size: 11px;
+		min-width: 52px;
 	}
 </style>