@treasuryspatial/map-react 0.1.20 → 0.1.22

package/dist/MapModeViewport.js

@@ -1,13 +1,29 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import * as THREE from 'three';
-import { buildGeoJsonPolygon, computeCentroid, computeFootprintStats, createMapThreeLayer, ensureFootprintLayers, getOuterRing, toLocalMeters, toPolygonFeature, } from '@treasuryspatial/map-kit';
+import { buildGeoJsonPolygon, buildGeoJsonLineString, computeCentroid, computeFootprintStats, computePolylineStats, createMapThreeLayer, ensureSelectionLayers, getOuterRing, offsetLngLatFromLocalMeters, toLocalMeters, toLineFeature, toPolygonFeature, } from '@treasuryspatial/map-kit';
 const DEFAULT_CENTER = [-87.6298, 41.8781];
 const DEFAULT_ZOOM = 16.5;
 const DEFAULT_PITCH = 55;
-export const MapModeViewport = forwardRef(function MapModeViewport({ active, geometry3dm, meshGroup, materialSettings, lightingPreset = 'studio', confirmedSelection, confirmedFeature, candidate, mapVisibility, onCandidateSelect, onCandidateClear, accessToken: accessTokenProp, mapStyle: mapStyleProp, applyLightingPreset, resolveMeshGroup, }, ref) {
+const DEFAULT_VIEW_DURATION_MS = 900;
+const DEFAULT_PERSPECTIVE_PADDING = { top: 120, right: 120, bottom: 150, left: 120 };
+const DEFAULT_INTERIOR_PADDING = { top: 110, right: 96, bottom: 210, left: 96 };
+const MIN_VIEW_SPAN_METERS = 8;
+const MAX_MAP_ZOOM = 21;
+const SUPPORTED_MAP_SOURCE_KINDS = new Set(['building', 'waterway', 'road', 'rail']);
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const toneMappingLookup = {
+    neutral: THREE.NeutralToneMapping,
+    aces: THREE.ACESFilmicToneMapping,
+    linear: THREE.LinearToneMapping,
+};
+const shadowMapTypeLookup = {
+    pcfsoft: THREE.PCFSoftShadowMap,
+    pcf: THREE.PCFShadowMap,
+    basic: THREE.BasicShadowMap,
+};
+export const MapModeViewport = forwardRef(function MapModeViewport({ active, geometry3dm, meshGroup, materialSettings, lightingPreset = 'studio', extrusionsVisible = false, extrusionColor = '#262b31', selectionConfig, confirmedSelection, confirmedFeature, candidate, mapVisibility, onCandidateSelect, onCandidateClear, accessToken: accessTokenProp, mapStyle: mapStyleProp, applyLightingPreset, resolveMeshGroup, }, ref) {
     const containerRef = useRef(null);
     const mapRef = useRef(null);
     const mapboxRef = useRef(null);
@@ -19,14 +35,29 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
     const lightingPresetRef = useRef(lightingPreset);
     const handlersBoundRef = useRef(false);
     const confirmedSelectionRef = useRef(confirmedSelection ?? null);
+    const candidateSelectionRef = useRef(candidate?.selection ?? null);
     const onCandidateSelectRef = useRef(onCandidateSelect);
     const onCandidateClearRef = useRef(onCandidateClear);
+    const selectionConfigRef = useRef(selectionConfig ?? null);
     const lastGeocodeLabelRef = useRef(null);
     const reverseGeocodeRequestRef = useRef(0);
     const resizeObserverRef = useRef(null);
     const lastOriginRef = useRef(confirmedSelection?.origin ?? null);
+    const candidateFeatureRef = useRef(candidate?.feature ?? null);
+    const confirmedFeatureRef = useRef(confirmedFeature ?? null);
+    const activeMeshGroupRef = useRef(meshGroup ?? null);
+    const extrusionsVisibleRef = useRef(extrusionsVisible);
+    const extrusionColorRef = useRef(extrusionColor);
+    const mapVisibilityRef = useRef(mapVisibility);
     const [mapReady, setMapReady] = useState(false);
     const [mapError, setMapError] = useState('');
+    const selectionConfigError = useMemo(() => {
+        const sourceKind = selectionConfig?.sourceKind;
+        if (!sourceKind || SUPPORTED_MAP_SOURCE_KINDS.has(sourceKind))
+            return '';
+        return `Unsupported map feature sourceKind '${sourceKind}'. Manifest must use building, waterway, road, or rail.`;
+    }, [selectionConfig?.sourceKind]);
+    const activeMapError = mapError || selectionConfigError;
     const [threeLayerReady, setThreeLayerReady] = useState(false);
     const debug = useMemo(() => {
         if (typeof window === 'undefined')
@@ -44,27 +75,76 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             return;
         console.info('[map-react]', ...args);
     }, [debug]);
+    const fmt = useCallback((value) => (Number.isFinite(value) ? value.toFixed(3) : 'nan'), []);
     useEffect(() => {
         lightingPresetRef.current = lightingPreset;
     }, [lightingPreset]);
+    useEffect(() => {
+        extrusionsVisibleRef.current = extrusionsVisible;
+    }, [extrusionsVisible]);
+    useEffect(() => {
+        extrusionColorRef.current = extrusionColor;
+    }, [extrusionColor]);
+    useEffect(() => {
+        mapVisibilityRef.current = mapVisibility;
+    }, [mapVisibility]);
+    useEffect(() => {
+        selectionConfigRef.current = selectionConfig ?? null;
+        layerControllerRef.current?.setConfig(selectionConfig ?? null);
+    }, [selectionConfig]);
+    const applySceneLighting = useCallback((scene, renderer, presetKey) => {
+        const maybePromise = (applyLightingPreset ?? defaultApplyLightingPreset)(scene, renderer, presetKey);
+        if (maybePromise && typeof maybePromise.then === 'function') {
+            void Promise.resolve(maybePromise).finally(() => {
+                applyLightingReadabilityBoost(renderer, presetKey);
+                mapRef.current?.triggerRepaint();
+            });
+            return;
+        }
+        applyLightingReadabilityBoost(renderer, presetKey);
+        mapRef.current?.triggerRepaint();
+    }, [applyLightingPreset]);
     useEffect(() => {
         confirmedSelectionRef.current = confirmedSelection ?? null;
         if (confirmedSelection?.origin) {
             lastOriginRef.current = confirmedSelection.origin;
         }
     }, [confirmedSelection]);
+    useEffect(() => {
+        candidateSelectionRef.current = candidate?.selection ?? null;
+        if (candidate?.selection?.origin) {
+            lastOriginRef.current = candidate.selection.origin;
+        }
+    }, [candidate]);
+    useEffect(() => {
+        candidateFeatureRef.current = candidate?.feature ?? null;
+    }, [candidate]);
+    useEffect(() => {
+        confirmedFeatureRef.current = confirmedFeature ?? null;
+    }, [confirmedFeature]);
     useEffect(() => {
         onCandidateSelectRef.current = onCandidateSelect;
     }, [onCandidateSelect]);
     useEffect(() => {
         onCandidateClearRef.current = onCandidateClear;
     }, [onCandidateClear]);
+    const applyCurrentSelectionToController = useCallback(() => {
+        const controller = layerControllerRef.current;
+        if (!controller)
+            return;
+        const selectedFeature = candidateFeatureRef.current ?? confirmedFeatureRef.current ?? null;
+        const selectedSourceKind = candidateSelectionRef.current?.sourceKind ?? confirmedSelectionRef.current?.sourceKind ?? null;
+        controller.setSelected(selectedFeature, selectedSourceKind);
+    }, []);
     const accessToken = useMemo(() => accessTokenProp ?? process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN ?? '', [accessTokenProp]);
     const mapStyle = useMemo(() => {
         if (mapStyleProp)
             return mapStyleProp;
         const styleDark = process.env.NEXT_PUBLIC_MAPBOX_FOOTPRINT_STYLE_DARK;
         const styleLight = process.env.NEXT_PUBLIC_MAPBOX_FOOTPRINT_STYLE_LIGHT;
+        const publicFallbackStyle = themeMode === 'light'
+            ? 'mapbox://styles/mapbox/light-v11'
+            : 'mapbox://styles/mapbox/dark-v11';
         if (typeof window !== 'undefined' && (styleDark || styleLight)) {
             const prefersDark = themeMode === 'dark' ||
                 (themeMode !== 'light' && (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ?? false));
@@ -75,7 +155,7 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
         return (process.env.NEXT_PUBLIC_MAPBOX_FOOTPRINT_STYLE ??
             styleDark ??
             styleLight ??
-            'mapbox://styles/treasuryadmin/cmc2gd70p00ui01spfnel4el2');
+            publicFallbackStyle);
     }, [mapStyleProp, themeMode]);
     useEffect(() => {
         if (typeof document === 'undefined')
@@ -87,14 +167,139 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
         observer.observe(root, { attributes: true, attributeFilter: ['data-theme'] });
         return () => observer.disconnect();
     }, []);
+    const fetchSearchSuggestions = useCallback(async (query, limit = 12) => {
+        const trimmed = query.trim();
+        if (!trimmed || !accessToken)
+            return [];
+        const map = mapRef.current;
+        const center = map?.getCenter().wrap();
+        const proximity = center && Number.isFinite(center.lng) && Number.isFinite(center.lat)
+            ? `${center.lng},${center.lat}`
+            : `${DEFAULT_CENTER[0]},${DEFAULT_CENTER[1]}`;
+        const url = `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(trimmed)}.json` +
+            `?access_token=${encodeURIComponent(accessToken)}` +
+            `&limit=${Math.max(1, Math.min(12, limit))}` +
+            `&autocomplete=true&types=address,place,locality,neighborhood,poi` +
+            `&proximity=${encodeURIComponent(proximity)}`;
+        try {
+            const response = await fetch(url);
+            if (!response.ok)
+                return [];
+            const data = await response.json();
+            const features = Array.isArray(data?.features) ? data.features : [];
+            return features
+                .map((feature) => {
+                const featureCenter = feature?.center;
+                if (!Array.isArray(featureCenter) || featureCenter.length < 2)
+                    return null;
+                const label = String(feature?.text ?? feature?.place_name ?? '').trim();
+                const placeName = String(feature?.place_name ?? '').trim();
+                const secondaryLabel = placeName && placeName !== label
+                    ? placeName.replace(new RegExp(`^${escapeRegExp(label)}(?:,\\s*)?`, 'i'), '').trim() || undefined
+                    : undefined;
+                const bboxValue = Array.isArray(feature?.bbox) && feature.bbox.length === 4
+                    ? feature.bbox.map(Number)
+                    : undefined;
+                return {
+                    id: String(feature?.id ?? placeName ?? `${featureCenter[0]},${featureCenter[1]}`),
+                    label: label || placeName || trimmed,
+                    secondaryLabel,
+                    center: [Number(featureCenter[0]), Number(featureCenter[1])],
+                    bbox: bboxValue,
+                };
+            })
+                .filter((value) => Boolean(value));
+        }
+        catch {
+            return [];
+        }
+    }, [accessToken]);
+    const applySearchSuggestion = useCallback((suggestion) => {
+        const map = mapRef.current;
+        if (!map)
+            return false;
+        lastGeocodeLabelRef.current = suggestion.secondaryLabel
+            ? `${suggestion.label}, ${suggestion.secondaryLabel}`
+            : suggestion.label;
+        map.stop();
+        map.flyTo({
+            center: suggestion.center,
+            zoom: Math.max(map.getZoom(), suggestion.bbox ? 16.8 : 17.4),
+            speed: 1.8,
+            curve: 1.12,
+            essential: true,
+        });
+        return true;
+    }, []);
+    const searchAddress = useCallback(async (query) => {
+        const [firstSuggestion] = await fetchSearchSuggestions(query, 1);
+        if (!firstSuggestion)
+            return false;
+        return applySearchSuggestion(firstSuggestion);
+    }, [applySearchSuggestion, fetchSearchSuggestions]);
     useImperativeHandle(ref, () => ({
         setLightingPreset: (presetKey) => {
             lightingPresetRef.current = presetKey;
             if (sceneRef.current && rendererRef.current) {
-                (applyLightingPreset ?? defaultApplyLightingPreset)(sceneRef.current, rendererRef.current, presetKey);
+                applySceneLighting(sceneRef.current, rendererRef.current, presetKey);
+            }
+        },
+        animateToView: (viewKey) => {
+            const map = mapRef.current;
+            const mapboxgl = mapboxRef.current;
+            if (!map || !mapboxgl)
+                return;
+            const origin = confirmedSelectionRef.current?.origin ??
+                candidateSelectionRef.current?.origin ??
+                lastOriginRef.current ??
+                null;
+            if (!origin)
+                return;
+            const frame = resolveGroundFrameMeters(activeMeshGroupRef.current) ?? resolveSelectionFrameMeters(confirmedSelectionRef.current ?? candidateSelectionRef.current ?? null);
+            if (!frame)
+                return;
+            const center = offsetLngLatFromLocalMeters(origin, {
+                eastMeters: frame.centerEastMeters,
+                northMeters: frame.centerNorthMeters,
+            }, mapboxgl);
+            const halfEast = Math.max(MIN_VIEW_SPAN_METERS, frame.spanEastMeters) / 2;
+            const halfNorth = Math.max(MIN_VIEW_SPAN_METERS, frame.spanNorthMeters) / 2;
+            const corners = [
+                offsetLngLatFromLocalMeters(origin, { eastMeters: frame.centerEastMeters - halfEast, northMeters: frame.centerNorthMeters - halfNorth }, mapboxgl),
+                offsetLngLatFromLocalMeters(origin, { eastMeters: frame.centerEastMeters - halfEast, northMeters: frame.centerNorthMeters + halfNorth }, mapboxgl),
+                offsetLngLatFromLocalMeters(origin, { eastMeters: frame.centerEastMeters + halfEast, northMeters: frame.centerNorthMeters - halfNorth }, mapboxgl),
+                offsetLngLatFromLocalMeters(origin, { eastMeters: frame.centerEastMeters + halfEast, northMeters: frame.centerNorthMeters + halfNorth }, mapboxgl),
+            ];
+            const bounds = corners.reduce((acc, point) => acc.extend([point.lng, point.lat]), new mapboxgl.LngLatBounds([corners[0].lng, corners[0].lat], [corners[0].lng, corners[0].lat]));
+            const isInteriorView = viewKey === 'interior';
+            const pitch = isInteriorView ? 72 : DEFAULT_PITCH;
+            const padding = isInteriorView ? DEFAULT_INTERIOR_PADDING : DEFAULT_PERSPECTIVE_PADDING;
+            const bearing = map.getBearing();
+            const camera = map.cameraForBounds(bounds, { padding, pitch, bearing });
+            const zoomDelta = isInteriorView ? 0.85 : 0;
+            if (camera) {
+                map.easeTo({
+                    center: camera.center ?? center,
+                    zoom: Math.min(MAX_MAP_ZOOM, (camera.zoom ?? map.getZoom()) + zoomDelta),
+                    bearing,
+                    pitch,
+                    duration: DEFAULT_VIEW_DURATION_MS,
+                    essential: true,
+                });
+                return;
             }
+            map.easeTo({
+                center: [center.lng, center.lat],
+                zoom: Math.min(MAX_MAP_ZOOM, map.getZoom() + (isInteriorView ? 0.9 : 0.2)),
+                bearing,
+                pitch,
+                duration: DEFAULT_VIEW_DURATION_MS,
+                essential: true,
+            });
         },
-        animateToView: () => { },
+        searchSuggestions: (query) => fetchSearchSuggestions(query),
+        applySearchSuggestion,
+        searchAddress,
         capturePngDataUrl: () => {
             const map = mapRef.current;
             if (!map)
@@ -106,7 +311,10 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                 return '';
             }
         },
-    }), [applyLightingPreset]);
+        requestRepaint: () => {
+            mapRef.current?.triggerRepaint();
+        },
+    }), [applySceneLighting, applySearchSuggestion, fetchSearchSuggestions, searchAddress]);
     useEffect(() => {
         if (!active)
             return;
@@ -151,15 +359,6 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                     pitch: startPitch,
                 });
                 map.addControl(new mapboxgl.NavigationControl({ visualizePitch: true }), 'bottom-right');
-                const geocoder = new MapboxGeocoder({
-                    accessToken,
-                    mapboxgl: mapboxgl,
-                    marker: false,
-                    collapsed: false,
-                    placeholder: 'search address',
-                    proximity: { longitude: DEFAULT_CENTER[0], latitude: DEFAULT_CENTER[1] },
-                });
-                map.addControl(geocoder, 'top-left');
                 mapRef.current = map;
                 const onMapError = (event) => {
                     const err = event?.error ?? event;
@@ -191,13 +390,12 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                         if (!mapRef.current)
                             return;
                         mapRef.current.resize();
+                        mapRef.current.triggerRepaint();
                         if (debug) {
                             const mapCanvas = mapRef.current.getCanvas();
-                            log('map resize', {
-                                canvasSize: { width: mapCanvas.width, height: mapCanvas.height },
-                                canvasRect: mapCanvas.getBoundingClientRect(),
-                                containerRect: container.getBoundingClientRect(),
-                            });
+                            const canvasRect = mapCanvas.getBoundingClientRect();
+                            const containerRect = container.getBoundingClientRect();
+                            log(`map resize canvas=${mapCanvas.width}x${mapCanvas.height} canvasRect=${fmt(canvasRect.width)}x${fmt(canvasRect.height)} containerRect=${fmt(containerRect.width)}x${fmt(containerRect.height)}`);
                         }
                     });
                     observer.observe(container);
@@ -207,40 +405,38 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                     if (!map.isStyleLoaded())
                         return;
                     opacityCacheRef.current.clear();
-                    layerControllerRef.current = ensureFootprintLayers(map);
-                    disableFillExtrusions(map);
+                    layerControllerRef.current = ensureSelectionLayers(map);
+                    layerControllerRef.current.setConfig(selectionConfigRef.current);
+                    layerControllerRef.current.setBuildingsVisible(extrusionsVisibleRef.current);
+                    layerControllerRef.current.setBuildingsColor(extrusionColorRef.current);
+                    applyCurrentSelectionToController();
                     ensureCustomLayer(map);
-                    applyMapVisibility(map, mapVisibility, opacityCacheRef);
-                    bindFootprintHandlers(map);
+                    applyMapVisibility(map, mapVisibilityRef.current, opacityCacheRef);
+                    bindSelectionHandlers(map);
                 });
                 map.on('load', () => {
                     if (!map.isStyleLoaded())
                         return;
-                    layerControllerRef.current = ensureFootprintLayers(map);
-                    disableFillExtrusions(map);
+                    layerControllerRef.current = ensureSelectionLayers(map);
+                    layerControllerRef.current.setConfig(selectionConfigRef.current);
+                    layerControllerRef.current.setBuildingsVisible(extrusionsVisibleRef.current);
+                    layerControllerRef.current.setBuildingsColor(extrusionColorRef.current);
+                    applyCurrentSelectionToController();
                     ensureCustomLayer(map);
-                    applyMapVisibility(map, mapVisibility, opacityCacheRef);
+                    applyMapVisibility(map, mapVisibilityRef.current, opacityCacheRef);
                     setMapReady(true);
-                    bindFootprintHandlers(map);
+                    bindSelectionHandlers(map);
                     requestAnimationFrame(() => {
                         map.resize();
+                        map.triggerRepaint();
                         if (debug) {
                             const mapCanvas = map.getCanvas();
-                            log('map load', {
-                                canvasSize: { width: mapCanvas.width, height: mapCanvas.height },
-                                canvasRect: mapCanvas.getBoundingClientRect(),
-                                containerRect: map.getContainer().getBoundingClientRect(),
-                            });
+                            const canvasRect = mapCanvas.getBoundingClientRect();
+                            const containerRect = map.getContainer().getBoundingClientRect();
+                            log(`map load canvas=${mapCanvas.width}x${mapCanvas.height} canvasRect=${fmt(canvasRect.width)}x${fmt(canvasRect.height)} containerRect=${fmt(containerRect.width)}x${fmt(containerRect.height)}`);
                         }
                     });
                 });
-                geocoder.on('result', (event) => {
-                    const center = event?.result?.center;
-                    if (!Array.isArray(center) || center.length < 2)
-                        return;
-                    lastGeocodeLabelRef.current = event?.result?.place_name ?? event?.result?.text ?? null;
-                    map.easeTo({ center: [Number(center[0]), Number(center[1])], zoom: Math.max(map.getZoom(), 17) });
-                });
             }
             catch (err) {
                 const message = err instanceof Error ? err.message : 'Failed to initialize Mapbox';
@@ -266,30 +462,40 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             cleanupCanvasEvents?.();
             cleanupMapEvents?.();
         };
-    }, [active, accessToken, mapStyle, mapVisibility]);
+    }, [active, accessToken, applyCurrentSelectionToController, mapStyle]);
     useEffect(() => {
         const map = mapRef.current;
         if (!map || !mapReady)
             return;
         applyMapVisibility(map, mapVisibility, opacityCacheRef);
     }, [mapVisibility, mapReady]);
+    useEffect(() => {
+        if (!mapReady)
+            return;
+        layerControllerRef.current?.setBuildingsVisible(extrusionsVisible);
+    }, [extrusionsVisible, mapReady]);
+    useEffect(() => {
+        if (!mapReady)
+            return;
+        layerControllerRef.current?.setBuildingsColor(extrusionColor);
+    }, [extrusionColor, mapReady]);
     useEffect(() => {
         const controller = layerControllerRef.current;
         if (!controller)
             return;
         if (candidate?.feature) {
-            controller.setSelected(candidate.feature);
+            controller.setSelected(candidate.feature, candidate.selection?.sourceKind ?? null);
             if (candidate.selection?.origin) {
                 lastOriginRef.current = candidate.selection.origin;
             }
         }
         else if (confirmedFeature) {
-            controller.setSelected(confirmedFeature);
+            controller.setSelected(confirmedFeature, confirmedSelection?.sourceKind ?? null);
         }
         else {
-            controller.setSelected(null);
+            controller.setSelected(null, null);
         }
-    }, [candidate, confirmedFeature]);
+    }, [candidate, confirmedFeature, confirmedSelection?.sourceKind, mapReady]);
     useEffect(() => {
         if (!mapReady)
             return;
@@ -298,12 +504,7 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             return;
         const selectionOrigin = confirmedSelection?.origin ?? candidate?.selection?.origin ?? null;
         if (debug) {
-            log('origin sync', {
-                hasLayer: Boolean(threeLayerRef.current),
-                selectionOrigin,
-                fallbackOrigin: lastOriginRef.current,
-                hasGeometry: Boolean(geometry3dm || meshGroup),
-            });
+            log(`origin sync hasLayer=${threeLayerRef.current ? '1' : '0'} selectionOrigin=${selectionOrigin ? `${fmt(selectionOrigin.lng)},${fmt(selectionOrigin.lat)}` : 'null'} fallbackOrigin=${lastOriginRef.current ? `${fmt(lastOriginRef.current.lng)},${fmt(lastOriginRef.current.lat)}` : 'null'} hasGeometry=${geometry3dm || meshGroup ? '1' : '0'}`);
         }
         if (selectionOrigin) {
             lastOriginRef.current = selectionOrigin;
@@ -339,6 +540,7 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             else if (geometry3dm && resolveMeshGroup) {
                 group = await resolveMeshGroup(geometry3dm);
             }
+            activeMeshGroupRef.current = group;
             if (!group || cancelled)
                 return;
             applyMaterialOverrides(group, materialSettings);
@@ -347,6 +549,7 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
         void applyGroup();
         return () => {
             cancelled = true;
+            activeMeshGroupRef.current = null;
         };
     }, [mapReady, geometry3dm, meshGroup, materialSettings, resolveMeshGroup]);
     const ensureCustomLayer = (map) => {
@@ -358,9 +561,9 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                 onInit: (scene, renderer) => {
                     sceneRef.current = scene;
                     rendererRef.current = renderer;
-                    renderer.shadowMap.enabled = true;
+                    renderer.shadowMap.enabled = false;
                     renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-                    (applyLightingPreset ?? defaultApplyLightingPreset)(scene, renderer, lightingPresetRef.current);
+                    applySceneLighting(scene, renderer, lightingPresetRef.current);
                 },
             });
             setThreeLayerReady(true);
@@ -396,34 +599,83 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             }
         }
     };
-    const bindFootprintHandlers = (map) => {
+    const bindSelectionHandlers = (map) => {
         if (handlersBoundRef.current)
             return;
         handlersBoundRef.current = true;
-        map.on('mousemove', 'building-footprints-fill', (e) => {
-            const feature = e.features?.[0];
-            const poly = feature ? toPolygonFeature(feature) : null;
-            layerControllerRef.current?.setHover(poly);
-        });
-        map.on('mouseleave', 'building-footprints-fill', () => {
-            layerControllerRef.current?.setHover(null);
-        });
-        map.on('click', 'building-footprints-fill', (e) => {
-            const feature = e.features?.[0];
-            const poly = feature ? toPolygonFeature(feature) : null;
-            if (!poly || !poly.geometry)
-                return;
-            const ring = getOuterRing(poly.geometry);
-            const centroid = computeCentroid(ring) ?? { lng: map.getCenter().lng, lat: map.getCenter().lat };
+        const hitLayerForConfig = () => {
+            const config = selectionConfigRef.current;
+            if (!config)
+                return null;
+            switch (config.sourceKind) {
+                case 'building':
+                    return 'building-footprints-fill';
+                case 'waterway':
+                    return 'waterway-hit-line';
+                case 'road':
+                case 'rail':
+                    return 'road-hit-line';
+                default:
+                    return null;
+            }
+        };
+        const buildCandidateFromFeature = (rawFeature, config) => {
+            if (!rawFeature || !config)
+                return null;
             const mapboxgl = mapboxRef.current;
             if (!mapboxgl)
-                return;
-            const pointsLocal = toLocalMeters(ring, centroid, mapboxgl);
+                return null;
+            if (config.geometryKind === 'polyline' &&
+                (config.sourceKind === 'waterway' || config.sourceKind === 'road' || config.sourceKind === 'rail')) {
+                const line = toLineFeature(rawFeature);
+                if (!line?.geometry?.coordinates?.length)
+                    return null;
+                const coords = line.geometry.coordinates;
+                const origin = computeCentroid(coords) ?? { lng: map.getCenter().lng, lat: map.getCenter().lat };
+                const pointsLocal = toLocalMeters(coords, origin, mapboxgl);
+                if (pointsLocal.length < 2)
+                    return null;
+                const selection = {
+                    sourceKind: config.sourceKind,
+                    geometryKind: 'polyline',
+                    closed: config.closed ?? false,
+                    geojson: buildGeoJsonLineString(pointsLocal),
+                    featureGeojson: JSON.stringify(line),
+                    origin,
+                    label: config.label,
+                    mapView: {
+                        center: { lng: map.getCenter().lng, lat: map.getCenter().lat },
+                        zoom: map.getZoom(),
+                        bearing: map.getBearing(),
+                        pitch: map.getPitch(),
+                    },
+                };
+                return {
+                    selection,
+                    feature: line,
+                    pointsLocal,
+                    stats: computePolylineStats(pointsLocal),
+                    address: lastGeocodeLabelRef.current ?? '',
+                };
+            }
+            if (config.geometryKind !== 'polygon' || config.sourceKind !== 'building')
+                return null;
+            const polygon = toPolygonFeature(rawFeature);
+            if (!polygon?.geometry)
+                return null;
+            const ring = getOuterRing(polygon.geometry);
+            const origin = computeCentroid(ring) ?? { lng: map.getCenter().lng, lat: map.getCenter().lat };
+            const pointsLocal = toLocalMeters(ring, origin, mapboxgl);
             if (pointsLocal.length < 3)
-                return;
+                return null;
             const selection = {
+                sourceKind: 'building',
+                geometryKind: 'polygon',
+                closed: config.closed ?? true,
                 geojson: buildGeoJsonPolygon(pointsLocal),
-                origin: centroid,
+                featureGeojson: JSON.stringify(polygon),
+                origin,
+                label: config.label,
                 mapView: {
                     center: { lng: map.getCenter().lng, lat: map.getCenter().lat },
                     zoom: map.getZoom(),
@@ -431,16 +683,46 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
                     pitch: map.getPitch(),
                 },
             };
-            const stats = computeFootprintStats(pointsLocal);
-            const initialAddress = lastGeocodeLabelRef.current ?? '';
-            onCandidateSelectRef.current({ selection, feature: poly, pointsLocal, stats, address: initialAddress });
-            void reverseGeocodeAddress(centroid, selection, poly, pointsLocal, stats, initialAddress);
+            return {
+                selection,
+                feature: polygon,
+                pointsLocal,
+                stats: computeFootprintStats(pointsLocal),
+                address: lastGeocodeLabelRef.current ?? '',
+            };
+        };
+        map.on('mousemove', (e) => {
+            const config = selectionConfigRef.current;
+            const layerId = hitLayerForConfig();
+            if (!config || !layerId) {
+                layerControllerRef.current?.setHover(null, null);
+                map.getCanvas().style.cursor = '';
+                return;
+            }
+            const feature = map.queryRenderedFeatures(e.point, { layers: [layerId] })?.[0];
+            const candidate = buildCandidateFromFeature(feature, config);
+            layerControllerRef.current?.setHover(candidate?.feature ?? null, candidate?.selection.sourceKind ?? null);
+            map.getCanvas().style.cursor = candidate ? 'pointer' : '';
+        });
+        map.on('mouseout', () => {
+            layerControllerRef.current?.setHover(null, null);
+            map.getCanvas().style.cursor = '';
         });
         map.on('click', (e) => {
-            const features = map.queryRenderedFeatures(e.point, { layers: ['building-footprints-fill'] });
-            if (!features.length) {
+            const config = selectionConfigRef.current;
+            const layerId = hitLayerForConfig();
+            if (!config || !layerId) {
+                onCandidateClearRef.current();
+                return;
+            }
+            const feature = map.queryRenderedFeatures(e.point, { layers: [layerId] })?.[0];
+            const candidate = buildCandidateFromFeature(feature, config);
+            if (!candidate) {
                 onCandidateClearRef.current();
+                return;
             }
+            onCandidateSelectRef.current(candidate);
+            void reverseGeocodeAddress(candidate.selection.origin, candidate.selection, candidate.feature, candidate.pointsLocal, candidate.stats, candidate.address ?? '');
         });
     };
     const reverseGeocodeAddress = async (center, selection, feature, pointsLocal, stats, initialAddress) => {
@@ -470,7 +752,48 @@ export const MapModeViewport = forwardRef(function MapModeViewport({ active, geo
             // ignore geocode errors
         }
     };
-    return (_jsxs("div", { className: "absolute inset-0", children: [_jsx("div", { ref: containerRef, className: "w-full h-full" }), !accessToken && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/70 text-xs text-white font-nunito", children: "Mapbox access token missing." })), mapError && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/70 text-xs text-white font-nunito", children: mapError })), !mapReady && !mapError && accessToken && (_jsx("div", { className: "absolute inset-0 z-[2] flex items-center justify-center bg-black/60 text-xs text-white font-nunito", children: "loading map\u2026" }))] }));
+    return (_jsxs("div", { style: {
+            position: 'absolute',
+            inset: 0,
+            width: '100%',
+            height: '100%',
+        }, children: [_jsx("div", { ref: containerRef, style: {
+                    width: '100%',
+                    height: '100%',
+                } }), !accessToken && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 2,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(0, 0, 0, 0.7)',
+                    color: '#ffffff',
+                    fontSize: 12,
+                    fontFamily: 'var(--ui-font-family, system-ui, sans-serif)',
+                }, children: "Mapbox access token missing." })), activeMapError && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 2,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(0, 0, 0, 0.7)',
+                    color: '#ffffff',
+                    fontSize: 12,
+                    fontFamily: 'var(--ui-font-family, system-ui, sans-serif)',
+                }, children: activeMapError })), !mapReady && !activeMapError && accessToken && (_jsx("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 2,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'rgba(0, 0, 0, 0.6)',
+                    color: '#ffffff',
+                    fontSize: 12,
+                    fontFamily: 'var(--ui-font-family, system-ui, sans-serif)',
+                }, children: "loading map\u2026" }))] }));
 });
 const ensureGeometryUvs = (geometry) => {
     if (geometry.getAttribute('uv'))
@@ -500,7 +823,7 @@ const ensureGeometryUvs = (geometry) => {
 function applyMaterialOverrides(group, settings) {
     if (!group || typeof group.traverse !== 'function')
         return;
-    const color = new THREE.Color(settings?.color ?? '#ffffff');
+    const color = settings?.color ? new THREE.Color(settings.color) : null;
     const textureUrl = settings?.textureUrl;
     const repeat = settings?.textureRepeat ?? 2;
     let texture = null;
@@ -517,48 +840,136 @@ function applyMaterialOverrides(group, settings) {
             return;
         const mesh = child;
         mesh.frustumCulled = false;
-        if (mesh.material) {
-            const material = mesh.material;
-            if (Array.isArray(material))
-                material.forEach((m) => m?.dispose?.());
-            else
-                material?.dispose?.();
-        }
         if (texture) {
             ensureGeometryUvs(mesh.geometry);
         }
-        mesh.material = new THREE.MeshStandardMaterial({
-            color,
-            roughness: 0.75,
-            metalness: 0,
-            side: THREE.FrontSide,
-            map: texture ?? null,
+        const materials = Array.isArray(mesh.material) ? mesh.material : [mesh.material];
+        materials.forEach((material) => {
+            if (!material)
+                return;
+            const anyMaterial = material;
+            if (color && anyMaterial.color instanceof THREE.Color) {
+                anyMaterial.color.copy(color);
+            }
+            if (texture && 'map' in anyMaterial) {
+                anyMaterial.map = texture;
+            }
+            if ('side' in anyMaterial) {
+                anyMaterial.side = THREE.DoubleSide;
+            }
+            anyMaterial.needsUpdate = true;
         });
-        mesh.material.transparent = false;
-        mesh.material.opacity = 1;
-        mesh.material.depthWrite = true;
-        mesh.material.depthTest = true;
-        mesh.material.polygonOffset = true;
-        mesh.material.polygonOffsetFactor = 1.0;
-        mesh.material.polygonOffsetUnits = 1.0;
         mesh.castShadow = false;
         mesh.receiveShadow = false;
     });
 }
-function defaultApplyLightingPreset(scene, renderer, _presetKey) {
-    scene.background = new THREE.Color('#ffffff');
-    const lightsToRemove = scene.children.filter((child) => child instanceof THREE.Light);
+function parseLightingPresetSpec(presetKey) {
+    if (!presetKey)
+        return null;
+    try {
+        const parsed = JSON.parse(presetKey);
+        return parsed && typeof parsed === 'object' ? parsed : null;
+    }
+    catch {
+        switch (presetKey) {
+            case 'dark':
+                return {
+                    renderer: { toneMapping: 'neutral', toneMappingExposure: 0.95, outputColorSpace: 'srgb' },
+                    lighting: {
+                        ambient: { color: '#dce4f0', intensity: 0.26 },
+                        hemisphere: { skyColor: '#e8edf5', groundColor: '#8a8f97', intensity: 0.9 },
+                        key: { color: '#ffffff', intensity: 0.95, position: [8, 12, 6], castShadow: false },
+                        fill: { color: '#ffffff', intensity: 0.42, position: [-8, 9, -5] },
+                    },
+                };
+            case 'light':
+                return {
+                    renderer: { toneMapping: 'neutral', toneMappingExposure: 1.08, outputColorSpace: 'srgb' },
+                    lighting: {
+                        ambient: { color: '#ffffff', intensity: 0.42 },
+                        hemisphere: { skyColor: '#f8fbff', groundColor: '#e5e7eb', intensity: 1.1 },
+                        key: { color: '#ffffff', intensity: 1.15, position: [10, 15, 8], castShadow: false },
+                        fill: { color: '#ffffff', intensity: 0.5, position: [-10, 10, -6] },
+                    },
+                };
+            default:
+                return null;
+        }
+    }
+}
+function applyLightingReadabilityBoost(renderer, presetKey) {
+    const preset = parseLightingPresetSpec(presetKey);
+    if (preset?.renderer?.outputColorSpace) {
+        renderer.outputColorSpace =
+            preset.renderer.outputColorSpace === 'linear' ? THREE.LinearSRGBColorSpace : THREE.SRGBColorSpace;
+    }
+    if (preset?.renderer?.toneMapping) {
+        renderer.toneMapping = toneMappingLookup[preset.renderer.toneMapping];
+    }
+    if (typeof preset?.renderer?.toneMappingExposure === 'number') {
+        renderer.toneMappingExposure = preset.renderer.toneMappingExposure;
+    }
+    else {
+        renderer.toneMappingExposure = 1.02;
+    }
+    const shadowMapEnabled = preset?.renderer?.shadowMap?.enabled ?? preset?.lighting?.key?.castShadow ?? false;
+    renderer.shadowMap.enabled = shadowMapEnabled;
+    renderer.shadowMap.type = shadowMapTypeLookup[preset?.renderer?.shadowMap?.type ?? 'pcfsoft'];
+}
+function resolveColor(value, fallback) {
+    return typeof value === 'string' || typeof value === 'number' ? value : fallback;
+}
+function configureDirectionalShadow(light, shadow) {
+    if (!light.shadow)
+        return;
+    const cameraSize = shadow?.cameraSize ?? 25;
+    light.shadow.camera.left = -cameraSize;
+    light.shadow.camera.right = cameraSize;
+    light.shadow.camera.top = cameraSize;
+    light.shadow.camera.bottom = -cameraSize;
+    light.shadow.camera.near = shadow?.near ?? 0.1;
+    light.shadow.camera.far = shadow?.far ?? 60;
+    const mapSize = shadow?.mapSize ?? 2048;
+    light.shadow.mapSize.set(mapSize, mapSize);
+    light.shadow.bias = shadow?.bias ?? -0.0001;
+    light.shadow.radius = shadow?.radius ?? 3;
+    if (typeof light.shadow.camera.updateProjectionMatrix === 'function') {
+        light.shadow.camera.updateProjectionMatrix();
+    }
+}
+function defaultApplyLightingPreset(scene, renderer, presetKey) {
+    scene.background = null;
+    const lightsToRemove = scene.children.filter((child) => child instanceof THREE.Light || child.userData?.__mapLightTarget === true);
     lightsToRemove.forEach((light) => scene.remove(light));
-    scene.add(new THREE.AmbientLight('#ffffff', 0.6));
-    const key = new THREE.DirectionalLight('#ffffff', 0.8);
-    key.position.set(8, 12, 6);
-    key.castShadow = false;
-    scene.add(key);
-    const fill = new THREE.DirectionalLight('#ffffff', 0.4);
-    fill.position.set(-6, 8, -6);
-    scene.add(fill);
-    renderer.toneMapping = THREE.NeutralToneMapping;
-    renderer.toneMappingExposure = 1.05;
+    const preset = parseLightingPresetSpec(presetKey);
+    applyLightingReadabilityBoost(renderer, presetKey);
+    const ambient = preset?.lighting?.ambient;
+    const hemi = preset?.lighting?.hemisphere;
+    const key = preset?.lighting?.key;
+    const fill = preset?.lighting?.fill;
+    const lightTarget = preset?.sceneExtras?.lightTarget ?? [0, 1.5, 0];
+    scene.add(new THREE.AmbientLight(new THREE.Color(resolveColor(ambient?.color, '#ffffff')), ambient?.intensity ?? 0.22));
+    scene.add(new THREE.HemisphereLight(new THREE.Color(resolveColor(hemi?.skyColor ?? hemi?.sky, '#f8fbff')), new THREE.Color(resolveColor(hemi?.groundColor ?? hemi?.ground, '#d4d4d4')), hemi?.intensity ?? 0.85));
+    const keyLight = new THREE.DirectionalLight(new THREE.Color(resolveColor(key?.color, '#ffffff')), key?.intensity ?? 0.9);
+    keyLight.position.set(...(key?.position ?? [8, 12, 6]));
+    keyLight.castShadow = key?.castShadow ?? false;
+    if (keyLight.castShadow) {
+        configureDirectionalShadow(keyLight, preset?.lighting?.shadow);
+    }
+    const keyTarget = new THREE.Object3D();
+    keyTarget.userData.__mapLightTarget = true;
+    keyTarget.position.set(...lightTarget);
+    keyLight.target = keyTarget;
+    scene.add(keyTarget);
+    scene.add(keyLight);
+    const fillLight = new THREE.DirectionalLight(new THREE.Color(resolveColor(fill?.color, '#ffffff')), fill?.intensity ?? 0.38);
+    fillLight.position.set(...(fill?.position ?? [-6, 8, -6]));
+    const fillTarget = new THREE.Object3D();
+    fillTarget.userData.__mapLightTarget = true;
+    fillTarget.position.set(...lightTarget);
+    fillLight.target = fillTarget;
+    scene.add(fillTarget);
+    scene.add(fillLight);
 }
 function applyMapVisibility(map, mode, cacheRef) {
     if (!map?.getStyle?.())
@@ -623,18 +1034,58 @@ function applyMapVisibility(map, mode, cacheRef) {
         }
     }
 }
-function disableFillExtrusions(map) {
-    const style = map.getStyle();
-    if (!style?.layers)
-        return;
-    style.layers.forEach((layer) => {
-        if (layer.type !== 'fill-extrusion')
-            return;
-        try {
-            map.setLayoutProperty(layer.id, 'visibility', 'none');
-        }
-        catch {
-            // ignore
-        }
-    });
+function resolveGroundFrameMeters(group) {
+    if (!group || typeof group.updateWorldMatrix !== 'function')
+        return null;
+    group.updateWorldMatrix(true, true);
+    const box = new THREE.Box3().setFromObject(group);
+    if (box.isEmpty())
+        return null;
+    const size = box.getSize(new THREE.Vector3());
+    const center = box.getCenter(new THREE.Vector3());
+    return {
+        centerEastMeters: center.x,
+        centerNorthMeters: -center.z,
+        spanEastMeters: Math.max(MIN_VIEW_SPAN_METERS, size.x),
+        spanNorthMeters: Math.max(MIN_VIEW_SPAN_METERS, size.z),
+    };
+}
+function resolveSelectionFrameMeters(selection) {
+    if (!selection?.geojson)
+        return null;
+    try {
+        const parsed = JSON.parse(selection.geojson);
+        const points = parsed.type === 'Polygon'
+            ? (parsed.coordinates?.[0] ?? [])
+            : (parsed.coordinates ?? []);
+        if (!points.length)
+            return null;
+        let minX = Number.POSITIVE_INFINITY;
+        let maxX = Number.NEGATIVE_INFINITY;
+        let minY = Number.POSITIVE_INFINITY;
+        let maxY = Number.NEGATIVE_INFINITY;
+        points.forEach(([x, y]) => {
+            if (!Number.isFinite(x) || !Number.isFinite(y))
+                return;
+            if (x < minX)
+                minX = x;
+            if (x > maxX)
+                maxX = x;
+            if (y < minY)
+                minY = y;
+            if (y > maxY)
+                maxY = y;
+        });
+        if (![minX, maxX, minY, maxY].every(Number.isFinite))
+            return null;
+        return {
+            centerEastMeters: (minX + maxX) / 2,
+            centerNorthMeters: (minY + maxY) / 2,
+            spanEastMeters: Math.max(MIN_VIEW_SPAN_METERS, maxX - minX),
+            spanNorthMeters: Math.max(MIN_VIEW_SPAN_METERS, maxY - minY),
+        };
+    }
+    catch {
+        return null;
+    }
 }