From c3e36177945f3ee8fe9d28490c7785799d947ab8 Mon Sep 17 00:00:00 2001
From: hermes-explorigin <tim+hermes@thecookiejar.me>
Date: Mon, 10 Aug 2026 20:33:36 +0000
Subject: [PATCH] fix(routes): store routing graph/pois as plain vars (not
 $state proxies) so they structured-clone into the Web Worker

---
 src/lib/components/MapView.svelte | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/MapView.svelte b/src/lib/components/MapView.svelte
index c11cae0..179c0fc 100644
--- a/src/lib/components/MapView.svelte
+++ b/src/lib/components/MapView.svelte
@@ -79,8 +79,13 @@
 	let computingRoute = $state(false);
 	savedPoints.subscribe((pts) => { savedPointsList = pts; });
 	// --- route graph + POIs loaded from a dump layer (for directions) ---
-	let routeGraph = $state<RouteGraph | null>(null);
-	let routePois = $state<GeoJSON.Feature[]>([]);
+	// NOTE: keep the graph/POI data as PLAIN (non-$state) variables. $state wraps
+	// values in Svelte 5 proxies, which cannot be structured-cloned into a Web
+	// Worker ("Proxy object could not be cloned"). These are read-only inputs to
+	// the worker; `hasRouteGraph` drives the UI instead.
+	let routeGraph: RouteGraph | null = null;
+	let routePois: GeoJSON.Feature[] = [];
+	let hasRouteGraph = $state(false);
 	let routeLoading = $state(false);
 	let routeProgress = $state(0);
 	let graphLabel = $derived(dumpLayers[0]?.label ?? '');
@@ -176,7 +181,7 @@
 	async function loadRouteGraph(fresh = false) {
 		if ((routeGraph && !fresh) || routeLoading) return;
 		const layer = dumpLayers[0];
-		if (!layer || !layer.graphPath || !layer.poiPath) { routeGraph = null; return; }
+		if (!layer || !layer.graphPath || !layer.poiPath) { routeGraph = null; hasRouteGraph = false; return; }
 		routeLoading = true;
 		try {
 			const [g, p] = await Promise.all([fetch(layer.graphPath), fetch(layer.poiPath)]);
@@ -185,8 +190,10 @@
 			routeGraph = await g.json();
 			const pc: { features: GeoJSON.Feature[] } = await p.json();
 			routePois = pc.features;
+			hasRouteGraph = true;
 		} catch (e) {
 			routeGraph = null;
+			hasRouteGraph = false;
 			console.warn('route graph load failed:', e);
 		} finally {
 			routeLoading = false;
@@ -620,7 +627,7 @@
 			<DirectionsPanel
 				{map}
 				origin={origin}
-				hasGraph={!!routeGraph}
+				hasGraph={hasRouteGraph}
 				graphLabel={graphLabel}
 				onLoadGraph={() => loadRouteGraph(true)}
 				graphLoading={routeLoading}