fix: map: MapStage on maplibre-gl 6 (critical XSS GHSA-jrc7-96c5-q579): use deck.gl MapLibreOverlay

.agents/skills/codeatlas-ui/API.md

@@ -2025,7 +2025,7 @@ Variables: `--ca-map-bearing`
 | `engine?` | `"maplibre" \| "mapbox"` | `'maplibre'` | `"maplibre"` (default, no token) or `"mapbox"` (needs `accessToken`). The matching package is a peer you install. |
 | `accessToken?` | `string` |  | Mapbox access token. Required for `engine="mapbox"`. |
 | `styles` | `MapStyles` |  | Basemap style per color scheme. The map switches style when `colorScheme.resolved` changes, without being recreated. |
-| `layers?` | `unknown[]` |  | deck.gl layers drawn interleaved in the map. Needs `@deck.gl/core` and `@deck.gl/mapbox`. Replace the array to update. |
+| `layers?` | `unknown[]` |  | deck.gl layers drawn interleaved in the map. Needs `@deck.gl/core` plus `@deck.gl/maplibre` (`engine="maplibre"`) or `@deck.gl/mapbox` (`engine="mapbox"`). Replace the array to update. |
 | `fit?` | `MapBounds` |  | Bounds to fit, with `padding`. Changing it fits again. |
 | `padding?` | `Partial<MapPadding>` |  | Pixels covered by UI on each side (a sidebar, a bottom sheet), kept clear when fitting. Each side defaults to the active `PageFrame`'s `stageInsets`, or 0 without one. |
 | `center?` | `[number, number]` |  |  |

.changeset/map-maplibre-6.md

@@ -0,0 +1,5 @@
+---
+"@codeatlasdev/ui": patch
+---
+
+`@codeatlasdev/ui/map`: `MapStage` works with `maplibre-gl` 6, so the peer range is `^5.0.0 || ^6.0.0` again and you can take the fix for the critical attribution-sanitizer XSS in `maplibre-gl` 6.4.0 and earlier (GHSA-jrc7-96c5-q579, fixed in 6.4.1). With `engine="maplibre"` the deck.gl `layers` now go through `MapLibreOverlay` from the new optional peer `@deck.gl/maplibre` (`~9.4.0`, which supports `maplibre-gl` 4.5.1, 5 and 6) instead of `MapboxOverlay`, which throws `Cannot read properties of undefined (reading 'height')` on every frame there. `engine="mapbox"` keeps `@deck.gl/mapbox`. Install `@deck.gl/maplibre` instead of `@deck.gl/mapbox` when you use `maplibre-gl`. On `maplibre-gl` 6 the app must also call `setWorkerUrl` once (Vite: `import workerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url"`), as MapLibre's v6 migration guide requires for every bundler; the Map page shows it.

packages/ui/package.json

@@ -166,6 +166,7 @@
 		"@deck.gl/core": "9.4.0",
 		"@deck.gl/layers": "9.4.0",
 		"@deck.gl/mapbox": "9.4.0",
+		"@deck.gl/maplibre": "9.4.0",
 		"@fontsource-variable/inter": "5.3.0",
 		"@fontsource-variable/jetbrains-mono": "5.3.0",
 		"@happy-dom/global-registrator": "21.0.1",
@@ -186,7 +187,7 @@
 		"esbuild": "0.28.2",
 		"happy-dom": "21.0.4",
 		"magic-string": "1.4.3",
-		"maplibre-gl": "5.24.0",
+		"maplibre-gl": "6.16.0",
 		"playwright": "1.64.0",
 		"png-to-ico": "3.0.2",
 		"shiki": "4.5.0",
@@ -210,10 +211,11 @@
 		"typescript": ">=5.0.0",
 		"@resvg/resvg-js": "^2.6.0",
 		"png-to-ico": "^3.0.0",
-		"maplibre-gl": "^5.0.0",
+		"maplibre-gl": "^5.0.0 || ^6.0.0",
 		"mapbox-gl": "^3.0.0",
 		"@deck.gl/core": "~9.4.0",
-		"@deck.gl/mapbox": "~9.4.0"
+		"@deck.gl/mapbox": "~9.4.0",
+		"@deck.gl/maplibre": "~9.4.0"
 	},
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org",
@@ -258,6 +260,9 @@
 		},
 		"@deck.gl/mapbox": {
 			"optional": true
+		},
+		"@deck.gl/maplibre": {
+			"optional": true
 		}
 	}
 }

packages/ui/scripts/size-limit.ts

@@ -29,7 +29,7 @@ const ENTRIES: Entry[] = [
 		name: "./map",
 		js: `export * from "./map/index.js";`,
 		requires: "map/index.js",
-		external: ["maplibre-gl", "mapbox-gl", "@deck.gl/core", "@deck.gl/mapbox"],
+		external: ["maplibre-gl", "mapbox-gl", "@deck.gl/core", "@deck.gl/mapbox", "@deck.gl/maplibre"],
 	},
 	{
 		name: "./sound",

packages/ui/src/lib/map/MapStage.svelte

@@ -18,7 +18,7 @@
     accessToken?: string;
     /** Basemap style per color scheme. The map switches style when `colorScheme.resolved` changes, without being recreated. */
     styles: MapStyles;
-    /** deck.gl layers drawn interleaved in the map. Needs `@deck.gl/core` and `@deck.gl/mapbox`. Replace the array to update. */
+    /** deck.gl layers drawn interleaved in the map. Needs `@deck.gl/core` plus `@deck.gl/maplibre` (`engine="maplibre"`) or `@deck.gl/mapbox` (`engine="mapbox"`). Replace the array to update. */
     layers?: unknown[];
     /** Bounds to fit, with `padding`. Changing it fits again. */
     fit?: MapBounds;
@@ -137,7 +137,7 @@
       return;
     }
     let cancelled = false;
-    loadDeckOverlay(current)
+    loadDeckOverlay(current, engine)
       .then((o) => {
         if (cancelled) return o.finalize();
         overlay = o;

packages/ui/src/lib/map/MapStage.test.svelte

@@ -2,7 +2,11 @@
   // Harness: MapStage + MapControls with an offline style per scheme, exposing the map handle.
   import MapStage from './MapStage.svelte';
   import MapControls from './MapControls.svelte';
-  import type { Map as GlMap } from 'maplibre-gl';
+  import { setWorkerUrl, type Map as GlMap } from 'maplibre-gl';
+  // maplibre-gl 6 ships its worker as a separate module and cannot find it once a bundler moves the
+  // package: the app wires it once (`setWorkerUrl`), as every bundler recipe in its docs does.
+  import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
+  setWorkerUrl(workerUrl);
 
   let { onready, ...rest }: { onready?: (m: GlMap) => void; [k: string]: unknown } = $props();
 

packages/ui/src/lib/map/index.ts

@@ -1,5 +1,5 @@
 // @codeatlasdev/ui/map: needs the optional peers `maplibre-gl` or `mapbox-gl`, and for deck.gl
-// layers `@deck.gl/core` + `@deck.gl/mapbox`.
+// layers `@deck.gl/core` + `@deck.gl/maplibre` (maplibre-gl) or `@deck.gl/mapbox` (mapbox-gl).
 export type { Rgba } from "./color.js";
 export { rgbaCss, tokenColor } from "./color.js";
 export { default as MapControls } from "./MapControls.svelte";