react-native-maplibre-lite 0.1.9 → 0.2.1

package/src/components/MapView.tsx

@@ -4,6 +4,7 @@ import {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -21,31 +22,42 @@ import KeepAwake from '@sayem314/react-native-keep-awake';
 
 import MapPlaceholder from './MapPlaceholder';
 import MapSelectPoint, { type MapSelectPointType } from './MapSelectPoint';
+import { NavigatorHud } from './NavigatorHud';
+import { NavigatorRecenterButton } from './NavigatorRecenterButton';
+import { NavigatorVoiceControl } from './NavigatorVoiceControl';
+import { resolveNavigatorChromeTheme } from './navigatorChromeTheme';
+import { keysToClipUrls, volumeLevelToGain } from './navigatorVoiceCatalog';
+import { NavigatorVoicePlayer, type NavigatorVoicePlayerRef } from './navigatorVoicePlayer';
+import { navigatorUiStrings } from './navigatorVoiceStrings';
+import { useNavigatorVoice } from './useNavigatorVoice';
 import {
     type EventParams,
+    type MapLiteInitParams,
+    type MapLiteMapErrorEventParams,
+    type MapLiteMarkerParams,
+    type MapLitePolygonParams,
+    type MapLitePolylineParams,
+    type MapLiteRemoveOverlayParams,
+    type MapLiteSetNavigatorPositionParams,
+    type MapLiteUpdateParams,
     type MapLiteWebError,
     type MarkerProps,
+    type NativeToWebCommand,
     type NavigatorChromeParams,
+    type NavigatorHudState,
     type NavigatorInstructionParams,
     type NavigatorLang,
     type NavigatorProfile,
     type NavigatorPositionSetParams,
     type NavigatorRouteSetParams,
+    type NavigatorVoicePlayParams,
     type PolygonProps,
     type PolylineProps,
+    type WebToNativeMessage,
 } from './types';
-import { loadResources } from './utils';
+import { loadResources, getNativeMapHtmlUri } from './utils';
 import { MAP_HTML } from './webMapBuild';
 
-interface UpdateProps {
-    center?: [number, number];
-    zoom?: number;
-    minZoom?: number;
-    maxZoom?: number;
-    zoomEnabled?: boolean;
-    scrollEnabled?: boolean;
-    mapStyle?: string;
-}
 
 interface MapViewProps {
     children?: React.ReactNode;
@@ -73,6 +85,8 @@ interface MapViewProps {
     onZoomStart?: (eventParams: EventParams) => void;
     onZoomEnd?: (eventParams: EventParams) => void;
     onIdle?: (eventParams: EventParams) => void;
+    /** MapLibre `error` из WebView (`event: 'error'`). */
+    onMapError?: (params: MapLiteMapErrorEventParams) => void;
     showSelectPoint?: boolean;
     selectPointColor?: string;
     selectPointBackgroundColor?: string;
@@ -102,12 +116,23 @@ interface MapViewProps {
      * Sent once in WebView `init` as `navigatorChrome`.
      */
     navigatorChrome?: NavigatorChromeParams;
+    /**
+     * URL каталога голосов навигатора (`.../voices/data.json`). Каталог,
+     * манифест, выбор голоса/громкости и воспроизведение — на нативной
+     * стороне. Без него озвучка и FAB выбора голоса отключены.
+     */
+    navigatorVoiceUrl?: string;
     onNavigatorRouteSet?: (params: NavigatorRouteSetParams) => void;
     onNavigatorInstruction?: (params: NavigatorInstructionParams) => void;
     onNavigatorPositionSet?: (params: NavigatorPositionSetParams) => void;
     /** Ошибки команд WebView (`type: 'error'` из карты). */
     onMapLiteError?: (err: MapLiteWebError) => void;
 
+    /**
+     * Загружать WebView из `map.html` в нативных ресурсах приложения вместо inline `MAP_HTML`.
+     * Размещение файла — см. `resources/README.md`.
+     */
+    useNativeMapHtml?: boolean;
 
     developerLocalhostBundleUrl?: string;
 }
@@ -122,7 +147,7 @@ export type MapViewRef = {
     /**
      * Обновить «текущую позицию» (GPS): snap / reroute / прибытие — на стороне WebView.
      */
-    setNavigatorPosition: (latitude: number, longitude: number) => void;
+    setNavigatorPosition: (latitude: number, longitude: number, accuracy?: number) => void;
     /** Режим «клик по карте = новая позиция» (удобно в dev). */
     pickNavigatorPosition: () => void;
 };
@@ -169,6 +194,36 @@ const getBoundsFromCoords = (
     ];
 };
 
+const toWebMarkerParams = (props: MarkerProps): MapLiteMarkerParams => ({
+    uniqueId: props.uniqueId,
+    latitude: props.latitude,
+    longitude: props.longitude,
+    color: props.color,
+    iconUrl: props.iconUrl,
+    iconWidth: props.iconWidth,
+    iconHeight: props.iconHeight,
+    html: props.html,
+});
+
+const toWebPolylineParams = (props: PolylineProps): MapLitePolylineParams => ({
+    uniqueId: props.uniqueId,
+    coordinates: props.coordinates,
+    color: props.color,
+    width: props.width,
+});
+
+const toWebPolygonParams = (props: PolygonProps): MapLitePolygonParams => ({
+    uniqueId: props.uniqueId,
+    coordinates: props.coordinates,
+    fillColor: props.fillColor,
+    fillOpacity: props.fillOpacity,
+    strokeColor: props.strokeColor,
+    strokeOpacity: props.strokeOpacity,
+    strokeWidth: props.strokeWidth,
+});
+
+const toWebRemoveParams = (uniqueId: string): MapLiteRemoveOverlayParams => ({ uniqueId });
+
 /** Минимальный интервал между отправками позиции в WebView (мост RN↔JS). */
 const NAVIGATOR_GPS_FORWARD_MIN_MS = 500;
 
@@ -181,16 +236,56 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         initedRef.current = inited;
     }, [inited]);
 
+    /** View-model HUD маршрута, приходит из WebView (`navigatorHud`). */
+    const [hudState, setHudState] = useState<NavigatorHudState | null>(null);
+    const voicePlayerRef = useRef<NavigatorVoicePlayerRef | null>(null);
+
+    /** Озвучка ограничена русским набором фраз (как в веб-навигаторе). */
+    const voiceSupported = props.navigator === true && props.navigatorLang !== 'en';
+    const voice = useNavigatorVoice(voiceSupported ? props.navigatorVoiceUrl : undefined);
+
+    const chromeTheme = useMemo(
+        () => resolveNavigatorChromeTheme(props.navigatorChrome),
+        [props.navigatorChrome]
+    );
+    const navigatorStrings = useMemo(
+        () => navigatorUiStrings(props.navigatorLang),
+        [props.navigatorLang]
+    );
+
+    useEffect(() => {
+        voicePlayerRef.current?.setVolume(volumeLevelToGain(voice.volumeLevel));
+    }, [voice.volumeLevel]);
+
+    const handleNavigatorVoice = (params: NavigatorVoicePlayParams) => {
+        const player = voicePlayerRef.current;
+        if (!player) return;
+        if (params.action === 'stop') {
+            player.stop();
+            return;
+        }
+        if (params.action === 'prefetch') return;
+        if (!voice.voiceEnabled || !voice.manifest || !voice.clipBaseUrl) return;
+        const urls = keysToClipUrls(voice.manifest, voice.clipBaseUrl, params.keys);
+        if (urls.length > 0) player.playUrls(urls);
+    };
+
     const coordsInMapRef = useRef<Record<string, [number, number][]>>({});
     const markersClickHandlers = useRef<Record<string, () => void>>({});
     const mapSelectPointRef = useRef<MapSelectPointType | null>(null);
     const performanceMode = props.performanceMode ?? (Platform.OS === 'android' ? 'balanced' : 'quality');
 
+    const webViewSource = props.developerLocalhostBundleUrl
+        ? { uri: props.developerLocalhostBundleUrl }
+        : props.useNativeMapHtml
+            ? { uri: getNativeMapHtmlUri() }
+            : { html: MAP_HTML };
+
     const fallbackPixelRatio = performanceMode === 'performance'
         ? 0.85
         : (performanceMode === 'balanced' && Platform.OS === 'android' ? 1 : undefined);
 
-    const sendToWebView = (message: { function: string; params: any }) => {
+    const sendToWebView = (message: NativeToWebCommand) => {
         if (__DEV__) {
             console.log('MapView: sendToWebView', message);
         }
@@ -209,33 +304,31 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         const mapStyleText = await loadResources(props.mapStyle);
         const mapStyle = JSON.parse(mapStyleText);
 
-        sendToWebView({
-            function: 'init',
-            params: {
-                mapStyle: mapStyle,
-                zoomEnabled: props.zoomEnabled ?? false,
-                scrollEnabled: props.scrollEnabled ?? false,
-                center: props.center,
-                zoom: props.zoom,
-                minZoom: props.minZoom,
-                maxZoom: props.maxZoom,
-                antialias: false,
-                crossSourceCollisions: performanceMode !== 'performance',
-                fadeDuration: performanceMode === 'performance' ? 0 : 120,
-                pixelRatio: props.pixelRatio ?? fallbackPixelRatio,
-                simplifyStyle: performanceMode !== 'quality',
-                aggressiveSimplifyStyle: performanceMode === 'performance',
-                maxPitch: performanceMode === 'performance' ? 0 : 45,
-                renderWorldCopies: performanceMode === 'quality',
-                turboWhileMoving: props.turboWhileMoving ?? (performanceMode === 'performance'),
-                debugMode: props.debugMode ?? false,
-                navigator: props.navigator === true,
-                graphhopperUrl: props.graphhopperUrl,
-                navigatorLang: props.navigatorLang,
-                navigatorProfile: props.navigatorProfile,
-                navigatorChrome: props.navigatorChrome,
-            },
-        });
+        const initParams: MapLiteInitParams = {
+            mapStyle: mapStyle,
+            zoomEnabled: props.zoomEnabled ?? false,
+            scrollEnabled: props.scrollEnabled ?? false,
+            center: props.center,
+            zoom: props.zoom,
+            minZoom: props.minZoom,
+            maxZoom: props.maxZoom,
+            antialias: false,
+            crossSourceCollisions: performanceMode !== 'performance',
+            fadeDuration: performanceMode === 'performance' ? 0 : 120,
+            pixelRatio: props.pixelRatio ?? fallbackPixelRatio,
+            simplifyStyle: performanceMode !== 'quality',
+            aggressiveSimplifyStyle: performanceMode === 'performance',
+            maxPitch: performanceMode === 'performance' ? 0 : 45,
+            renderWorldCopies: performanceMode === 'quality',
+            turboWhileMoving: props.turboWhileMoving ?? (performanceMode === 'performance'),
+            debugMode: props.debugMode ?? false,
+            navigator: props.navigator === true,
+            graphhopperUrl: props.graphhopperUrl,
+            navigatorLang: props.navigatorLang,
+            navigatorProfile: props.navigatorProfile,
+            navigatorChrome: props.navigatorChrome,
+        };
+        sendToWebView({ function: 'init', params: initParams });
     };
 
     const updateMarkerClickHandler = (propsMarker: MarkerProps) => {
@@ -253,14 +346,14 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
 
         updateMarkerClickHandler(propsMarker);
 
-        sendToWebView({ function: 'addMarker', params: propsMarker });
+        sendToWebView({ function: 'addMarker', params: toWebMarkerParams(propsMarker) });
         scheduleAutoFitBounds();
     };
 
     const removeMarker = (propsMarker: MarkerProps) => {
         delete coordsInMapRef.current[propsMarker.uniqueId];
         delete markersClickHandlers.current[propsMarker.uniqueId];
-        sendToWebView({ function: 'removeMarker', params: propsMarker });
+        sendToWebView({ function: 'removeMarker', params: toWebRemoveParams(propsMarker.uniqueId) });
         scheduleAutoFitBounds();
     };
 
@@ -268,13 +361,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         if (propsPolyline.coordinates && !propsPolyline.ignoreFitBounds) {
             coordsInMapRef.current[propsPolyline.uniqueId] = propsPolyline.coordinates;
         }
-        sendToWebView({ function: 'addPolyline', params: propsPolyline });
+        sendToWebView({ function: 'addPolyline', params: toWebPolylineParams(propsPolyline) });
         scheduleAutoFitBounds();
     };
 
     const removePolyline = (propsPolyline: PolylineProps) => {
         delete coordsInMapRef.current[propsPolyline.uniqueId];
-        sendToWebView({ function: 'removePolyline', params: propsPolyline });
+        sendToWebView({ function: 'removePolyline', params: toWebRemoveParams(propsPolyline.uniqueId) });
         scheduleAutoFitBounds();
     };
 
@@ -282,13 +375,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         if (propsPolygon.coordinates && !propsPolygon.ignoreFitBounds) {
             coordsInMapRef.current[propsPolygon.uniqueId] = propsPolygon.coordinates;
         }
-        sendToWebView({ function: 'addPolygon', params: propsPolygon });
+        sendToWebView({ function: 'addPolygon', params: toWebPolygonParams(propsPolygon) });
         scheduleAutoFitBounds();
     };
 
     const removePolygon = (propsPolygon: PolygonProps) => {
         delete coordsInMapRef.current[propsPolygon.uniqueId];
-        sendToWebView({ function: 'removePolygon', params: propsPolygon });
+        sendToWebView({ function: 'removePolygon', params: toWebRemoveParams(propsPolygon.uniqueId) });
         scheduleAutoFitBounds();
     };
 
@@ -328,14 +421,22 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         sendToWebView({ function: 'advanceNavigatorInstruction', params: {} });
     };
 
-    const setNavigatorPosition = (latitude: number, longitude: number) => {
-        sendToWebView({ function: 'setNavigatorPosition', params: { latitude, longitude } });
+    const setNavigatorPosition = (latitude: number, longitude: number, accuracy?: number) => {
+        const params: MapLiteSetNavigatorPositionParams = { latitude, longitude };
+        if (typeof accuracy === 'number' && Number.isFinite(accuracy) && accuracy >= 0) {
+            params.accuracy = accuracy;
+        }
+        sendToWebView({ function: 'setNavigatorPosition', params });
     };
 
     const pickNavigatorPosition = () => {
         sendToWebView({ function: 'pickNavigatorPosition', params: {} });
     };
 
+    const recenterNavigatorCamera = () => {
+        sendToWebView({ function: 'recenterNavigatorCamera', params: {} });
+    };
+
     useImperativeHandle(ref, () => ({
         fitBounds,
         flyTo,
@@ -350,7 +451,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
     const lastPropsRef = useRef<MapViewProps>(props);
 
     useEffect(() => {
-        const updateProps: UpdateProps = {};
+        const updateProps: MapLiteUpdateParams = {};
 
         if (lastPropsRef.current.minZoom !== props.minZoom) {
             updateProps.minZoom = props.minZoom;
@@ -369,7 +470,9 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
         }
 
         if (lastPropsRef.current.mapStyle !== props.mapStyle) {
-            updateProps.mapStyle = props.mapStyle;
+            void loadResources(props.mapStyle).then((mapStyleText) => {
+                sendToWebView({ function: 'update', params: { mapStyle: JSON.parse(mapStyleText) } });
+            });
         }
 
         lastPropsRef.current = props;
@@ -382,7 +485,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
 
     const onReceiveMessageFromWebView = (data: string) => {
         try {
-            const msg = JSON.parse(data);
+            const msg = JSON.parse(data) as WebToNativeMessage;
 
             if (__DEV__) {
                 console.log('MapView: event', msg);
@@ -392,20 +495,23 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 switch (msg.event) {
                     case 'movestart':
                         mapSelectPointRef.current?.up();
-                        props.onMoveStart?.(msg.params);
+                        props.onMoveStart?.(msg.params as EventParams);
                         break;
                     case 'moveend':
-                        props.onMoveEnd?.(msg.params);
+                        props.onMoveEnd?.(msg.params as EventParams);
                         mapSelectPointRef.current?.down();
                         break;
                     case 'zoomstart':
-                        props.onZoomStart?.(msg.params);
+                        props.onZoomStart?.(msg.params as EventParams);
                         break;
                     case 'zoomend':
-                        props.onZoomEnd?.(msg.params);
+                        props.onZoomEnd?.(msg.params as EventParams);
                         break;
                     case 'idle':
-                        props.onIdle?.(msg.params);
+                        props.onIdle?.(msg.params as EventParams);
+                        break;
+                    case 'error':
+                        props.onMapError?.(msg.params as MapLiteMapErrorEventParams);
                         break;
                     case 'navigatorRouteSet':
                         props.onNavigatorRouteSet?.(msg.params as NavigatorRouteSetParams);
@@ -416,12 +522,18 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     case 'navigatorPositionSet':
                         props.onNavigatorPositionSet?.(msg.params as NavigatorPositionSetParams);
                         break;
+                    case 'navigatorHud':
+                        setHudState(msg.params as NavigatorHudState);
+                        break;
+                    case 'navigatorVoice':
+                        handleNavigatorVoice(msg.params as NavigatorVoicePlayParams);
+                        break;
                 }
                 return;
             }
 
             if (msg.type === 'error' && msg.data) {
-                props.onMapLiteError?.(msg.data as MapLiteWebError);
+                props.onMapLiteError?.(msg.data);
                 return;
             }
 
@@ -465,6 +577,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
 
                 const lat = position.coords.latitude;
                 const lng = position.coords.longitude;
+                const accuracy = position.coords.accuracy;
                 if (!Number.isFinite(lat) || !Number.isFinite(lng)) {
                     return;
                 }
@@ -475,9 +588,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                 }
                 lastForwardedAt = now;
 
+                const params: MapLiteSetNavigatorPositionParams = { latitude: lat, longitude: lng };
+                if (typeof accuracy === 'number' && Number.isFinite(accuracy) && accuracy >= 0) {
+                    params.accuracy = accuracy;
+                }
                 sendToWebViewRef.current({
                     function: 'setNavigatorPosition',
-                    params: { latitude: lat, longitude: lng },
+                    params,
                 });
             },
             (error) => {
@@ -518,7 +635,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                     ref={webViewRef}
                     style={{ flex: 1, backgroundColor: 'transparent' }}
                     originWhitelist={['*']}
-                    source={!!props.developerLocalhostBundleUrl ? { uri: props.developerLocalhostBundleUrl } : { html: MAP_HTML }}
+                    source={webViewSource}
                     onMessage={event => {
                         onReceiveMessageFromWebView(event.nativeEvent.data);
                     }}
@@ -549,6 +666,40 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>((props, ref) => {
                         />
                     </View>
                 )}
+
+                {inited && props.navigator && (
+                    <>
+                        <NavigatorHud
+                            state={hudState}
+                            theme={chromeTheme}
+                            pickHint={navigatorStrings.pickHint}
+                        />
+                        <NavigatorRecenterButton
+                            theme={chromeTheme}
+                            accessibilityLabel={navigatorStrings.recenterAria}
+                            onPress={recenterNavigatorCamera}
+                        />
+                        {voiceSupported && (
+                            <NavigatorVoiceControl
+                                theme={chromeTheme}
+                                strings={navigatorStrings}
+                                catalog={voice.catalog}
+                                selectedDir={voice.selectedDir}
+                                voiceEnabled={voice.voiceEnabled}
+                                volumeLevel={voice.volumeLevel}
+                                onSelectVoice={voice.selectVoice}
+                                onSelectVolume={voice.selectVolume}
+                                onDisable={voice.disableVoice}
+                            />
+                        )}
+                        {voiceSupported && (
+                            <NavigatorVoicePlayer
+                                ref={voicePlayerRef}
+                                initialVolume={volumeLevelToGain(voice.volumeLevel)}
+                            />
+                        )}
+                    </>
+                )}
             </MapViewContext.Provider>
             {!inited && (
                 <MapPlaceholder theme={props.placeholderTheme ?? 'light'} />

package/src/components/NavigatorHud.tsx

@@ -0,0 +1,166 @@
+import { Text, View } from 'react-native';
+
+import { NavigatorManeuverIcon } from './navigatorManeuverIcon';
+import type { NavigatorChromeTheme } from './navigatorChromeTheme';
+import type { NavigatorHudState } from './types';
+
+/**
+ * Нативная панель навигатора (HUD): порт DOM-плашки из веб-навигатора.
+ * Получает уже отформатированную view-model (`navigatorHud`) и тему из
+ * `navigatorChrome`; вся локализация/форматирование остаются в вебе.
+ */
+export function NavigatorHud({
+    state,
+    theme,
+    pickHint,
+}: {
+    state: NavigatorHudState | null;
+    theme: NavigatorChromeTheme;
+    pickHint: string;
+}) {
+    if (!state || !state.visible) return null;
+
+    if (state.pick) {
+        return (
+            <View
+                pointerEvents="none"
+                style={{
+                    position: 'absolute',
+                    top: 12,
+                    left: 12,
+                    right: 12,
+                    padding: 14,
+                    borderRadius: 14,
+                    backgroundColor: 'rgba(120, 53, 15, 0.92)',
+                    borderWidth: 2,
+                    borderColor: '#facc15',
+                }}
+            >
+                <Text
+                    style={{
+                        textAlign: 'center',
+                        fontSize: 14,
+                        fontWeight: '600',
+                        color: '#fef3c7',
+                    }}
+                >
+                    {pickHint}
+                </Text>
+            </View>
+        );
+    }
+
+    const speedLimit = state.speedLimitKmh;
+    const showSpeed = typeof speedLimit === 'number' && Number.isFinite(speedLimit) && speedLimit > 0;
+
+    return (
+        <View
+            pointerEvents="none"
+            style={{
+                position: 'absolute',
+                top: 12,
+                left: 12,
+                right: 12,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 12,
+                padding: 14,
+                borderRadius: 14,
+                backgroundColor: theme.background,
+                shadowColor: '#0f172a',
+                shadowOpacity: 0.32,
+                shadowRadius: 24,
+                shadowOffset: { width: 0, height: 10 },
+                elevation: 6,
+            }}
+        >
+            <View
+                style={{
+                    width: 44,
+                    height: 44,
+                    borderRadius: 12,
+                    backgroundColor: theme.iconBackground,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
+                {typeof state.sign === 'number' ? (
+                    <NavigatorManeuverIcon sign={state.sign} color={theme.iconForeground} />
+                ) : null}
+            </View>
+
+            <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+                {state.distanceLabel ? (
+                    <Text
+                        numberOfLines={1}
+                        style={{
+                            fontSize: 18,
+                            fontWeight: '700',
+                            lineHeight: 20,
+                            color: theme.foreground,
+                        }}
+                    >
+                        {state.distanceLabel}
+                    </Text>
+                ) : null}
+
+                {state.maneuverText ? (
+                    <Text
+                        numberOfLines={1}
+                        style={{ fontSize: 14, fontWeight: '500', color: theme.subtle }}
+                    >
+                        {state.maneuverText}
+                    </Text>
+                ) : null}
+
+                {state.streetName ? (
+                    <Text numberOfLines={1} style={{ fontSize: 12, color: theme.muted }}>
+                        {state.streetName}
+                    </Text>
+                ) : null}
+
+                {state.summaryText ? (
+                    <Text
+                        style={{
+                            marginTop: 4,
+                            paddingTop: 6,
+                            borderTopWidth: 1,
+                            borderTopColor: theme.divider,
+                            fontSize: 12,
+                            fontWeight: '600',
+                            color: theme.summary,
+                            lineHeight: 16,
+                        }}
+                    >
+                        {state.summaryText}
+                    </Text>
+                ) : null}
+
+                {state.extrasText ? (
+                    <Text style={{ marginTop: 2, fontSize: 11, fontWeight: '500', color: theme.muted }}>
+                        {state.extrasText}
+                    </Text>
+                ) : null}
+            </View>
+
+            {showSpeed ? (
+                <View
+                    style={{
+                        width: 52,
+                        height: 52,
+                        borderRadius: 26,
+                        borderWidth: 3,
+                        borderColor: '#dc2626',
+                        backgroundColor: '#ffffff',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}
+                >
+                    <Text style={{ fontSize: 14, fontWeight: '800', color: '#0f172a' }}>
+                        {Math.round(speedLimit as number)}
+                    </Text>
+                </View>
+            ) : null}
+        </View>
+    );
+}