refactor(SVGPanZoom): Fix memory leaking - consolidate zoom lifecycle into PanzoomContainer (#23236)

* refactor(SVGPanZoom): attach panzoom via use: action and remove unused parent bind:this

* refactor: centralize panzoom in createPanzoomAction and align ImagePreview cleanup

* refactor(panzoom): consolidate zoom lifecycle into PanzoomContainer and remove action-based wiring

src/lib/components/common/ImagePreview.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import { onDestroy, onMount, getContext } from 'svelte';
-	import panzoom, { type PanZoom } from 'panzoom';
+	import { onDestroy, getContext } from 'svelte';
 
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
+	import PanzoomContainer from '$lib/components/common/PanzoomContainer.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
 
 	export let show = false;
@@ -13,29 +13,8 @@
 
 	const i18n = getContext('i18n');
 
-	let mounted = false;
-
 	let previewElement = null;
 
-	let instance: PanZoom;
-
-	let sceneParentElement: HTMLElement;
-	let sceneElement: HTMLElement;
-
-	$: if (sceneElement) {
-		instance = panzoom(sceneElement, {
-			bounds: true,
-			boundsPadding: 0.1,
-
-			zoomSpeed: 0.065
-		});
-	}
-	const resetPanZoomViewport = () => {
-		instance.moveTo(0, 0);
-		instance.zoomAbs(0, 0, 1);
-		console.log(instance.getTransform());
-	};
-
 	const handleKeyDown = (event: KeyboardEvent) => {
 		if (event.key === 'Escape') {
 			console.log('Escape');
@@ -43,10 +22,6 @@
 		}
 	};
 
-	onMount(() => {
-		mounted = true;
-	});
-
 	$: if (show && previewElement) {
 		document.body.appendChild(previewElement);
 		window.addEventListener('keydown', handleKeyDown);
@@ -58,11 +33,15 @@
 	}
 
 	onDestroy(() => {
+		window.removeEventListener('keydown', handleKeyDown);
 		show = false;
 
-		if (previewElement) {
+		if (previewElement && previewElement.parentNode === document.body) {
 			document.body.removeChild(previewElement);
 		}
+		// NOTE: If multiple modals can stack in the future, direct "unset" may
+		// re-enable page scroll too early. Consider a shared body-scroll lock manager.
+		document.body.style.overflow = 'unset';
 	});
 </script>
 
@@ -181,14 +160,13 @@
 				</button>
 			</div>
 		</div>
-		<div class="flex h-full max-h-full justify-center items-center z-0">
+		<PanzoomContainer className="flex h-full max-h-full justify-center items-center z-0">
 			<img
-				bind:this={sceneElement}
 				{src}
 				{alt}
 				class=" mx-auto h-full object-scale-down select-none"
 				draggable="false"
 			/>
-		</div>
+		</PanzoomContainer>
 	</div>
 {/if}