Add reset panzoom button to SVGPanZoom and cleanup

src/lib/components/common/SVGPanZoom.svelte

@@ -2,7 +2,7 @@
 	import { onMount, getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
-	import panzoom from 'panzoom';
+	import panzoom, { type PanZoom } from 'panzoom';
 
 	import DOMPurify from 'dompurify';
 	import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
@@ -10,12 +10,13 @@
 	import { toast } from 'svelte-sonner';
 	import Tooltip from './Tooltip.svelte';
 	import Clipboard from '../icons/Clipboard.svelte';
+	import Reset from '../icons/Reset.svelte';
 
 	export let className = '';
 	export let svg = '';
 	export let content = '';
 
-	let instance;
+	let instance: PanZoom;
 
 	let sceneParentElement: HTMLElement;
 	let sceneElement: HTMLElement;
@@ -28,6 +29,12 @@
 			zoomSpeed: 0.065
 		});
 	}
+	function resetPanZoomViewport() {
+		console.log('Reset View')
+		instance.moveTo(0, 0);
+		instance.zoomAbs(0,0,1);
+		console.log(instance.getTransform());
+	}
 </script>
 
 <div bind:this={sceneParentElement} class="relative {className}">
@@ -49,5 +56,18 @@
 				</button>
 			</Tooltip>
 		</div>
+		<div class=" absolute top-1 right-10">
+			<Tooltip content={$i18n.t('Reset view')}>
+				<button
+					class="p-1.5 rounded-lg border border-gray-100 dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+					on:click={() => {
+						resetPanZoomViewport();
+						toast.success($i18n.t('Reset view'));
+					}}
+				>
+					<Reset className=" size-4" />
+				</button>
+			</Tooltip>
+		</div>
 	{/if}
 </div>