temperature chart and table alignments

src/lib/components/charts/ChartToolbar.svelte

@@ -19,13 +19,12 @@
     </ChartToolbar>
 -->
 <script module lang="ts">
-	/** Anything that can export itself as a PNG data URL (e.g. a CanvasChart). */
-	export interface DownloadableChart {
-		getPngDataUrl(): string | null;
-	}
+	export type { DownloadableChart } from './downloadChartsPng';
 </script>
 
 <script lang="ts">
+	import { type DownloadableChart, downloadChartsPng } from './downloadChartsPng';
+
 	import type { Snippet } from 'svelte';
 
 	// ─── Props ──────────────────────────────────────────────────────────────────
@@ -58,70 +57,11 @@
 
 	// ─── Download ───────────────────────────────────────────────────────────────
 
-	function loadImage(src: string): Promise<HTMLImageElement> {
-		return new Promise((resolve) => {
-			const img = new Image();
-			img.onload = () => resolve(img);
-			img.onerror = () => resolve(img);
-			img.src = src;
-		});
-	}
-
-	/** Resolves the page background so exports match the current theme. */
-	function exportBackground(): string {
-		const bg = getComputedStyle(document.documentElement).getPropertyValue('--background').trim();
-		return bg || '#ffffff';
-	}
-
-	function triggerDownload(url: string, name: string): void {
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = name;
-		link.style.display = 'none';
-		document.body.appendChild(link);
-		link.click();
-		requestAnimationFrame(() => {
-			document.body.removeChild(link);
-		});
-	}
-
 	async function handleDownload(): Promise<void> {
 		if (!hasCharts || downloading) return;
-
 		downloading = true;
-
 		try {
-			const dataUrls = charts
-				.filter((chart): chart is DownloadableChart => chart != null)
-				.map((chart) => chart.getPngDataUrl())
-				.filter((url): url is string => url !== null);
-			if (dataUrls.length === 0) return;
-
-			const images = (await Promise.all(dataUrls.map(loadImage))).filter(
-				(img) => img.naturalWidth > 0
-			);
-			if (images.length === 0) return;
-
-			const maxWidth = Math.max(...images.map((img) => img.naturalWidth));
-			const totalHeight = images.reduce((sum, img) => sum + img.naturalHeight, 0);
-
-			const canvas = document.createElement('canvas');
-			canvas.width = maxWidth;
-			canvas.height = totalHeight;
-
-			const ctx = canvas.getContext('2d');
-			if (!ctx) return;
-
-			ctx.fillStyle = exportBackground();
-			ctx.fillRect(0, 0, maxWidth, totalHeight);
-
-			let y = 0;
-			for (const img of images) {
-				ctx.drawImage(img, 0, y);
-				y += img.naturalHeight;
-			}
-
-			triggerDownload(canvas.toDataURL('image/png'), `${fileName}.png`);
+			await downloadChartsPng(charts, fileName);
 		} finally {
 			setTimeout(() => {
 				downloading = false;