multimodel improvements

src/lib/components/charts/ChartToolbar.svelte

@@ -18,14 +18,15 @@
       {/snippet}
     </ChartToolbar>
 -->
-<script module lang="ts">
+<script lang="ts">
 	import * as m from '$lib/paraglide/messages';
 
-	export type { ExportableChart } from './downloadChartsPng';
-</script>
-
-<script lang="ts">
-	import { type ExportableChart, downloadChartsPng } from './downloadChartsPng';
+	import {
+		type ChartDownloadOptions,
+		type ChartExportItem,
+		type ExportableChart,
+		downloadChartsPng
+	} from './downloadChartsPng';
 
 	import type { Snippet } from 'svelte';
 
@@ -33,9 +34,11 @@
 
 	interface Props {
 		/** Chart components available for download (undefined entries are skipped) */
-		charts?: Array<ExportableChart | undefined | null>;
+		charts?: Array<ChartExportItem | ExportableChart | undefined | null>;
 		/** Base file name for downloaded images (without extension) */
 		fileName?: string;
+		/** Optional title and shared legend drawn into the combined PNG. */
+		exportOptions?: ChartDownloadOptions;
 		/** Optional CSS class for the outer container */
 		class?: string;
 		/** Slot for additional controls (switches, checkboxes, etc.) */
@@ -45,6 +48,7 @@
 	let {
 		charts = [],
 		fileName = 'drizzli-chart',
+		exportOptions,
 		class: className = '',
 		controls
 	}: Props = $props();
@@ -55,7 +59,9 @@
 
 	// ─── Computed ───────────────────────────────────────────────────────────────
 
-	let hasCharts = $derived(charts.some((chart) => chart != null));
+	let hasCharts = $derived(
+		charts.some((item) => item != null && ('chart' in item ? item.chart != null : true))
+	);
 
 	// ─── Download ───────────────────────────────────────────────────────────────
 
@@ -63,7 +69,7 @@
 		if (!hasCharts || downloading) return;
 		downloading = true;
 		try {
-			await downloadChartsPng(charts, fileName);
+			await downloadChartsPng(charts, fileName, exportOptions);
 		} finally {
 			setTimeout(() => {
 				downloading = false;