chore(deps): bump maplibre-gl from 5.24.0 to 6.1.0 in the maplibre-stack group across 1 directory

apps/web/package.json

@@ -55,7 +55,7 @@
     "better-auth": "^1.6.18",
     "emoji-mart": "^5.6.0",
     "hls.js": "^1.6.16",
-    "maplibre-gl": "^5.24.0",
+    "maplibre-gl": "^6.1.0",
     "maplibre-theme": "^1.0.0",
     "next": "^16.2.9",
     "next-intl": "^4.13.0",

apps/web/src/app/settings/offline/AreaPickerMap.test.tsx

@@ -56,10 +56,10 @@ vi.mock("maplibre-gl", () => {
     }
   }
 
-  return { default: { Map: FakeMap } };
+  return { Map: FakeMap };
 });
 
-import maplibregl from "maplibre-gl";
+import * as maplibregl from "maplibre-gl";
 import { AreaPickerMap } from "./AreaPickerMap";
 
 const fakeMapClass = maplibregl.Map as unknown as {

apps/web/src/app/settings/offline/AreaPickerMap.tsx

@@ -3,7 +3,7 @@
 import Box from "@mui/material/Box";
 import { useColorScheme } from "@mui/material/styles";
 import type { AreaGeometry } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { createGeoJsonSourceDataBridge } from "@/components/map/layers/layerStyleUtils";
 import { MapCredits } from "@/components/map/MapCredits";
@@ -97,7 +97,7 @@ export function AreaPickerMap({ initialCenter, initialZoom, onChange, fitBbox, b
     let replayBoundary: (() => void) | null = null;
 
     const init = async () => {
-      const maplibregl = (await import("maplibre-gl")).default;
+      const maplibregl = await import("maplibre-gl");
       if (destroyed || !containerRef.current) return;
       const style =
         env.styleProvider === "openmapx"

apps/web/src/app/settings/offline/OfflineMapView.test.tsx

@@ -39,7 +39,7 @@ vi.mock("maplibre-gl", () => {
     on = vi.fn();
     remove = vi.fn();
   }
-  return { default: { Map: FakeMap } };
+  return { Map: FakeMap };
 });
 
 import * as offlineAreas from "@/lib/offlineAreas";

apps/web/src/app/settings/offline/OfflineMapView.tsx

@@ -2,7 +2,7 @@
 
 import Box from "@mui/material/Box";
 import { useColorScheme } from "@mui/material/styles";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { MapCredits } from "@/components/map/MapCredits";
 import { useEnv } from "@/lib/EnvProvider";
@@ -96,7 +96,7 @@ export function OfflineMapView({ packages, fitTo, height = 360 }: Props) {
     const frame = fitTo ?? unionBbox(packages);
 
     void (async () => {
-      const maplibregl = (await import("maplibre-gl")).default;
+      const maplibregl = await import("maplibre-gl");
       let resolver = getDefaultOfflinePackageResolver();
       if (!resolver) {
         resolver = configureDefaultOfflinePackageResolver({

apps/web/src/components/map/DeepLinkManager.tsx

@@ -59,7 +59,7 @@ import {
   useStreetLevelStore,
 } from "@openmapx/core";
 import type { TransportMode } from "@openmapx/mobility-core/transit";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import {
   DEEPLINK_UPDATE_EVENT,

apps/web/src/components/map/ElevationHoverMarker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { useElevationHover } from "@/components/elevation/ElevationHoverContext";
 import { useMap } from "@/lib/MapContext";
@@ -26,7 +26,7 @@ export function ElevationHoverMarker() {
 
     let cancelled = false;
 
-    import("maplibre-gl").then(({ default: maplibregl }) => {
+    import("maplibre-gl").then((maplibregl) => {
       if (cancelled || !mapRef.current) return;
 
       if (markerRef.current) {

apps/web/src/components/map/LocationMinimap.tsx

@@ -2,6 +2,7 @@
 
 import Box from "@mui/material/Box";
 import { type SxProps, type Theme, useColorScheme } from "@mui/material/styles";
+import type { StyleSpecification } from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { useEnv } from "@/lib/EnvProvider";
 import { baseMapCreditsHtml, loadMaptilerStyle, loadOpenMapXStyle } from "@/lib/map";
@@ -36,7 +37,7 @@ export function LocationMinimap({ lng, lat, zoom = 16, onClick, sx }: LocationMi
     let cancelled = false;
 
     (async () => {
-      const [{ default: maplibregl }, style] = await Promise.all([
+      const [maplibregl, style] = await Promise.all([
         import("maplibre-gl"),
         env.styleProvider === "openmapx"
           ? loadOpenMapXStyle(env, variant)
@@ -46,7 +47,7 @@ export function LocationMinimap({ lng, lat, zoom = 16, onClick, sx }: LocationMi
 
       const map = new maplibregl.Map({
         container: el,
-        style: style as string | maplibregl.StyleSpecification,
+        style: style as string | StyleSpecification,
         center: [lng, lat],
         zoom,
         interactive: false,

apps/web/src/components/map/MapCanvas.tsx

@@ -3,7 +3,7 @@
 import { useColorScheme } from "@mui/material/styles";
 import type { LngLat } from "@openmapx/core";
 import { useMapStore, useNavigationStore } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useLocale } from "next-intl";
 import { useEffect, useRef } from "react";
 import { useEnv } from "@/lib/EnvProvider";
@@ -80,14 +80,12 @@ export function MapCanvas() {
     const initMap = async (initialCenter: LngLat, initialZoom: number) => {
       setCenter(initialCenter);
       setZoom(initialZoom);
-      // The maplibre-gl type definitions don't expose a typed `default` field
-      // on the module namespace, so we widen the runtime binding to `unknown`
-      // until inside the guard and then trust the top-level type-only import
-      // (`import type maplibregl`) for member typing.
+      // Keep the dynamically loaded module as a namespace: MapLibre 6 no longer
+      // exposes a synthetic default export.
       let maplibreRuntime: unknown;
       let viewportStyle: ViewportStyle | undefined;
       try {
-        maplibreRuntime = (await import("maplibre-gl")).default;
+        maplibreRuntime = await import("maplibre-gl");
         if (destroyed || !containerRef.current) return;
         const maplibregl = maplibreRuntime as unknown as MapLibreRuntime;
         viewportStyle = await loadStyleForViewport(
@@ -297,13 +295,7 @@ export function MapCanvas() {
     const center = map.getCenter();
     Promise.all([import("maplibre-gl"), Promise.resolve([center.lng, center.lat] as LngLat)])
       .then(([module, currentCenter]) =>
-        loadStyleForViewport(
-          env,
-          variant,
-          mapStyle,
-          currentCenter,
-          module.default as unknown as MapLibreRuntime,
-        ),
+        loadStyleForViewport(env, variant, mapStyle, currentCenter, module as MapLibreRuntime),
       )
       .then((s) => {
         // The persistent `style.load` listener registered at map creation bumps

apps/web/src/components/map/MapClickHandler.tsx

@@ -10,7 +10,7 @@ import {
   usePlaceStore,
   useSidebarStore,
 } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import type { MapMouseEvent } from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { INTERACTIVE_LAYER_IDS } from "@/lib/interactiveLayers";
@@ -93,7 +93,7 @@ export function MapClickHandler() {
     }
 
     let destroyed = false;
-    import("maplibre-gl").then(({ default: ml }) => {
+    import("maplibre-gl").then((ml) => {
       if (destroyed || !mapRef.current) return;
       const el = document.createElement("div");
       el.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="32" viewBox="0 0 27 43">

apps/web/src/components/map/MapStylePoiClickHandler.tsx

@@ -176,10 +176,10 @@ export function MapStylePoiClickHandler() {
     };
 
     map.on("mousemove", onMouseMove);
-    map.on("mouseleave", onMouseLeave);
+    map.on("mouseout", onMouseLeave);
     return () => {
       map.off("mousemove", onMouseMove);
-      map.off("mouseleave", onMouseLeave);
+      map.off("mouseout", onMouseLeave);
     };
   }, [mapRef, mapReady, styleVersion]);
 

apps/web/src/components/map/UserLocationMarker.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useMapStore } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { useMap } from "@/lib/MapContext";
 
@@ -23,7 +23,7 @@ export function UserLocationMarker() {
 
     let destroyed = false;
 
-    import("maplibre-gl").then(({ default: maplibregl }) => {
+    import("maplibre-gl").then((maplibregl) => {
       if (destroyed || !mapRef.current) return;
 
       if (markerRef.current) {

apps/web/src/components/map/WaypointMarkers.tsx

@@ -2,7 +2,7 @@
 
 import type { LngLat } from "@openmapx/core";
 import { useDirectionsStore } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { useMap } from "@/lib/MapContext";
 import { BRAND } from "@/lib/theme";
@@ -79,7 +79,7 @@ export function WaypointMarkers() {
 
     let destroyed = false;
 
-    import("maplibre-gl").then(({ default: maplibregl }) => {
+    import("maplibre-gl").then((maplibregl) => {
       if (destroyed || !mapRef.current) return;
 
       const currentIds = new Set<string>();

apps/web/src/components/map/layers/DataSourceLayer.tsx

@@ -23,7 +23,7 @@ import { dataSourceToAttribution } from "@openmapx/integration-framework";
 import { useIntegrationRegistry } from "@openmapx/integration-framework/react";
 import { isI18nToken, type Translatable } from "@openmapx/integration-framework/strings";
 import type { Attribution } from "@openmapx/mobility-core/attribution";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import type { Map as MaplibreMap, MapMouseEvent } from "maplibre-gl";
 import { useTranslations } from "next-intl";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

apps/web/src/components/map/layers/FlightArcLayer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { greatCircleArc, useDirectionsStore, useFlightStore } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useMemo } from "react";
 import { useMap } from "@/lib/MapContext";
 import { PRIMARY_BLUE_HEX } from "@/lib/theme";

apps/web/src/components/map/layers/GlobeProjection.tsx

@@ -2,7 +2,7 @@
 
 import { useColorScheme } from "@mui/material/styles";
 import { useLayerStore } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { useMap } from "@/lib/MapContext";
 

apps/web/src/components/map/layers/NavigationRouteLayer.tsx

@@ -2,7 +2,7 @@
 
 import { useNavigationStore } from "@openmapx/core";
 import { useIntegrationRegistry } from "@openmapx/integration-framework/react";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useMemo } from "react";
 import { attributionsForProviders } from "@/lib/attributionForProviders";
 import { useMap } from "@/lib/MapContext";

apps/web/src/components/map/layers/RouteLayer.tsx

@@ -3,7 +3,7 @@
 import type { LngLat } from "@openmapx/core";
 import { useDataSources, useDirectionsStore } from "@openmapx/core";
 import { useIntegrationRegistry } from "@openmapx/integration-framework/react";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import type { MapMouseEvent } from "maplibre-gl";
 import { useEffect, useMemo } from "react";
 import { attributionsForProviders } from "@/lib/attributionForProviders";

apps/web/src/components/map/layers/dataSourceContextStyle.ts

@@ -1,4 +1,4 @@
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 
 const LIGHT = {
   no_ride: "#C62828",

apps/web/src/components/map/layers/desiredStack.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 
 interface DesiredEntry {
   sourceIds: string[];

apps/web/src/components/map/layers/layerStack.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 
 /**
  * The canonical bottom-to-top order of every map layer this app draws. A layer

apps/web/src/components/map/layers/layerStyleUtils.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import type { GeoJSONSource, GeoJSONSourceDiff } from "maplibre-gl";
 
 export type GeoJsonSourceData = Parameters<GeoJSONSource["setData"]>[0];

apps/web/src/components/map/layers/mapLayerGroup.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { addLayerInSlot, layerRank, type MapLayerSlot, unregisterLayerSlot } from "./layerStack";
 
 /** A layer spec plus the slot that decides its depth. */

apps/web/src/components/map/layers/useGeoJsonSourceDataBridge.test.tsx

@@ -1,5 +1,5 @@
 import { act, renderHook } from "@testing-library/react";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import type { MutableRefObject } from "react";
 import { afterEach, describe, expect, it } from "vitest";
 import { type CapturedConsoleErrors, captureConsoleErrors, createFakeMap } from "@/test";

apps/web/src/components/map/layers/useStyleSyncedLayer.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { type DependencyList, useEffect } from "react";
 import type { MapContextValue } from "@/lib/MapContext";
 import { setLayerVisibility } from "./layerStyleUtils";

apps/web/src/components/map/overlay/mapInteractionArbiter.test.ts

@@ -135,7 +135,7 @@ describe("map interaction arbiter", () => {
 
     state.setHits("test-flow", [feature("flow")]);
     state.emit("mousemove", event());
-    state.emit("mouseleave", {});
+    state.emit("mouseout", {});
     expect(state.getCanvasContainer().style.cursor).toBe("");
 
     unregister();

apps/web/src/components/map/overlay/mapInteractionArbiter.ts

@@ -121,7 +121,7 @@ function createMapState(map: MaplibreMap): MapInteractionState {
 
   map.on("click", state.onClick);
   map.on("mousemove", state.onMouseMove);
-  map.on("mouseleave", state.onMouseLeave);
+  map.on("mouseout", state.onMouseLeave);
   mapStates.set(map, state);
   return state;
 }
@@ -151,7 +151,7 @@ export function registerMapOverlayInteraction(
 
     map.off("click", state.onClick);
     map.off("mousemove", state.onMouseMove);
-    map.off("mouseleave", state.onMouseLeave);
+    map.off("mouseout", state.onMouseLeave);
     setCursor(map, "");
     mapStates.delete(map);
   };

apps/web/src/components/navigation/RouteSearchResultsLayer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { AlongRoutePoi, CategoryPlace } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect } from "react";
 import { addLayerInSlot } from "@/components/map/layers/layerStack";
 import { useGeoJsonSourceDataBridge } from "@/components/map/layers/useGeoJsonSourceDataBridge";

apps/web/src/components/panels/category/CategoryResultsContent.tsx

@@ -23,7 +23,7 @@ import {
 } from "@openmapx/core";
 import { useIntegrationRegistry } from "@openmapx/integration-framework/react";
 import type { TransitStop, TransportMode } from "@openmapx/mobility-core/transit";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useTranslations } from "next-intl";
 import { useEffect, useRef } from "react";
 import { useExpandOnBackgroundTap } from "@/components/panels/sheet/sheetState";

apps/web/src/hooks/usePinMarker.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import type { LngLat } from "@openmapx/core";
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { useEffect, useRef } from "react";
 import { useMap } from "@/lib/MapContext";
 
@@ -45,7 +45,7 @@ export function usePinMarker(
 
     let destroyed = false;
 
-    import("maplibre-gl").then(({ default: maplibregl }) => {
+    import("maplibre-gl").then((maplibregl) => {
       if (destroyed || !mapRef.current) return;
 
       // Move and relabel existing marker instead of recreating

apps/web/src/lib/MapContext.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type maplibregl from "maplibre-gl";
+import type * as maplibregl from "maplibre-gl";
 import { createContext, useCallback, useContext, useRef, useState } from "react";
 
 export interface MapContextValue {