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/SVGPanZoom.svelte

@@ -4,15 +4,14 @@
 
 	import { toast } from 'svelte-sonner';
 
-	import panzoom, { type PanZoom } from 'panzoom';
 	import DOMPurify from 'dompurify';
 
-	import { onMount, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import { copyToClipboard } from '$lib/utils';
 
-	import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
+	import PanzoomContainer from './PanzoomContainer.svelte';
 	import Tooltip from './Tooltip.svelte';
 	import Clipboard from '../icons/Clipboard.svelte';
 	import Reset from '../icons/Reset.svelte';
@@ -22,23 +21,9 @@
 	export let svg = '';
 	export let content = '';
 
-	let instance: PanZoom;
-
-	let sceneParentElement: HTMLElement;
-	let sceneElement: HTMLElement;
-
-	$: if (sceneElement) {
-		instance = panzoom(sceneElement, {
-			bounds: true,
-			boundsPadding: 0.1,
-
-			zoomSpeed: 0.065
-		});
-	}
+	let panzoomRef: PanzoomContainer;
 	const resetPanZoomViewport = () => {
-		instance.moveTo(0, 0);
-		instance.zoomAbs(0, 0, 1);
-		console.log(instance.getTransform());
+		panzoomRef?.reset();
 	};
 
 	const downloadAsSVG = () => {
@@ -47,8 +32,11 @@
 	};
 </script>
 
-<div bind:this={sceneParentElement} class="relative {className}">
-	<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
+<div class="relative {className}">
+	<PanzoomContainer
+		bind:this={panzoomRef}
+		className="flex h-full max-h-full justify-center items-center"
+	>
 		{@html DOMPurify.sanitize(svg, {
 			USE_PROFILES: { svg: true, svgFilters: true }, // allow <svg>, <defs>, <filter>, etc.
 			WHOLE_DOCUMENT: false,
@@ -88,7 +76,7 @@
 			],
 			SANITIZE_DOM: true
 		})}
-	</div>
+	</PanzoomContainer>
 
 	{#if content}
 		<div class=" absolute top-2.5 right-2.5">