@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Maplibre/useLayerVisibilitySync.js

@@ -0,0 +1,85 @@
+import { update } from '@expofp/renderer';
+import { useRef } from 'react';
+import store from '../../store';
+import { useReaction } from '../../utils/mobx';
+import { fitMapToLocalRect } from './utils/geo-config';
+import { collectLayerDefsByName } from './utils/layer-defs';
+/**
+ * Keeps the 3D scene layer visibility in sync with LayerStore.
+ * When a layer's visibility changes, updates the corresponding LayerDefs
+ * and fits the camera to the newly visible floor.
+ *
+ * Single owner of `LayerDef.hidden`: a floor def is hidden when its layer is
+ * not visible OR its venue has degraded below its detail cutoff (R6); a venue
+ * aux layer def is hidden unless the venue's zoom state lists it visible (R5 —
+ * `Layer.visible` is ignored, the zoom range is the only signal). No other
+ * code writes the field, so degradation hiding and visibility switching can
+ * never fight over it.
+ *
+ * The claim is scoped to the defs reachable from `store.layerStore.layers`.
+ * Booth badges are deliberately outside it: `configAll` stacks them in a flat
+ * `root::badges` layer above the plan, which is neither a store layer nor a
+ * child of one, so neither this reaction nor the parent-hidden cascade reaches
+ * them. They answer the same question for themselves — see
+ * `config-booth-badge-visibility`.
+ */
+export function useLayerVisibilitySync(scene, mapRef, geoConfig) {
+    const layerDefsByNameRef = useRef(null);
+    const visibleFloorNameRef = useRef(null);
+    useReaction(() => [
+        ...store.layerStore.layers.map((layer) => `${layer.name}:${layer.visible ? 1 : 0}`),
+        `quarantine:${store.layerStore.quarantinedLayerNames.join('+')}`,
+        ...store.venueStore.venues.map((venue) => `${venue.id}:${venue.detailVisible ? 1 : 0}:${venue.presentationState?.visibleAuxLayers.join('+') ?? ''}`),
+    ].join(','), () => {
+        if (!scene)
+            return;
+        if (layerDefsByNameRef.current?.rootLayer !== scene.rootLayer) {
+            layerDefsByNameRef.current = {
+                rootLayer: scene.rootLayer,
+                defsByName: collectLayerDefsByName(scene.rootLayer),
+            };
+        }
+        const defsByName = layerDefsByNameRef.current.defsByName;
+        const defsToUpdate = [];
+        const belowDetail = (layer) => {
+            const venue = store.venueStore.venueOfLayer(layer.rootParent?.name ?? layer.name);
+            return !!venue && !venue.detailVisible;
+        };
+        const auxVenuesByLayerName = store.venueStore.auxVenuesByLayerName;
+        // Pin-kind aux artwork renders only as a screen-fixed marker icon
+        // (useVenueLayers, KTD-5) — its scene def stays hidden unconditionally
+        // so the artwork never double-renders as a zoom-scaling plan layer.
+        const isPinAux = (name, owners) => owners.some((venue) => venue.auxLayers.some((ref) => ref.layer === name && ref.render === 'marker'));
+        for (const layer of store.layerStore.layers) {
+            const defs = defsByName.get(layer.name);
+            if (!defs?.length)
+                continue;
+            const auxOwners = auxVenuesByLayerName.get(layer.name);
+            const hidden = store.layerStore.isLayerQuarantined(layer) ||
+                (auxOwners
+                    ? isPinAux(layer.name, auxOwners) ||
+                        !auxOwners.some((venue) => venue.presentationState?.visibleAuxLayers.includes(layer.name))
+                    : !layer.visible || belowDetail(layer));
+            for (const def of defs) {
+                if (def.hidden === hidden)
+                    continue;
+                def.hidden = hidden;
+                defsToUpdate.push(def);
+            }
+        }
+        if (defsToUpdate.length) {
+            update(...defsToUpdate);
+        }
+        // Venue-model plans drive the camera from focus/level actions, never
+        // from visibility syncing: venue-model activation sets its own target
+        // (VenueStore.activateLayer).
+        if (store.venueStore.isCampusMode)
+            return;
+        const visibleFloor = store.layerStore.layers.find((layer) => layer.visible && !layer.frozen && !layer.rootParent && !layer.pathway);
+        if (!visibleFloor || visibleFloorNameRef.current === visibleFloor.name)
+            return;
+        visibleFloorNameRef.current = visibleFloor.name;
+        const floorRect = visibleFloor.viewbox ?? visibleFloor.rect;
+        fitMapToLocalRect(mapRef.current, floorRect ?? null, geoConfig);
+    }, { fireImmediately: true }, [scene, mapRef, geoConfig]);
+}

package/dist/esm/components/Maplibre/usePoiMarkers.d.ts

@@ -0,0 +1,25 @@
+import { type Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+import { type GeoConfig } from './utils/geo-config';
+/**
+ * Renders the outdoor PoI markers (hotels, parking, transit) as native
+ * MapLibre layers: a GeoJSON source with `cluster: true` plus symbol/circle
+ * layers on top of it. Geo map only — the hook is mounted from
+ * MaplibreAdapter, and runs once the renderer's `3d` custom layer exists so
+ * the marker stack draws above the floor plan.
+ *
+ * The marker feed is `store.poiMarkerStore`: `config-outdoor-poi` builds the
+ * marker records (including the rasterized pins, registered here via
+ * `map.addImage`), and the store derives selection (`selectedMarkerId`), the
+ * active filter (`outdoorFilter`) and dimming suppression from them. These
+ * layers are the *only* rendering outdoor PoIs get — see
+ * `configOutdoorPoiLayer`. Clicks are claimed from the renderer path via
+ * `poiMarkerHitTest`.
+ *
+ * Gated behind `enableExperimentalOutdoorMarkers`: with the flag off no layers,
+ * images or handlers are created at all. The feed is empty in that case too
+ * (`configOutdoorPoiLayer` never publishes), so this is belt-and-braces — it
+ * keeps the map untouched even if markers reach the store another way.
+ */
+export declare function usePoiMarkers(ready: boolean, mapRef: RefObject<MaplibreMap | null>, geoConfig: GeoConfig | null): void;
+//# sourceMappingURL=usePoiMarkers.d.ts.map

package/dist/esm/components/Maplibre/usePoiMarkers.js

@@ -0,0 +1,368 @@
+import { Box } from '@expofp/geometry';
+import { reaction } from 'mobx';
+import { useEffect } from 'react';
+import { POI_CLUSTER_COLOR, POI_CLUSTER_MIN_POINTS, POI_CLUSTER_RADIUS_PX, POI_CLUSTER_SIZE_PX, POI_CLUSTER_STROKE_COLOR, POI_CLUSTER_STROKE_WIDTH_PX, POI_CLUSTER_TEXT_SIZE_PX, POI_MARKER_PIN_WIDTH_PX, POI_SELECTED_PIN_WIDTH_PX, } from '../../constants';
+import store from '../../store';
+import settings from '../../tools/settings';
+import { DIM_INTENSITY } from '../../utils/dimming';
+import { convertLocalToGps } from '../../utils/gps';
+import { isOutdoorMarkersEnabled } from '../../utils/outdoor-poi';
+import { createPoiPinheadImage } from '../Map/drawing/config/poi-pin.js';
+import { getPoiPinLayout, POI_MARKER_PIN_SHAPE, POI_SELECTED_PIN_SHAPE, } from '../Map/drawing/config/poi-pin-shape.js';
+import { getMapDimTarget } from './useDimming';
+import { getLocalRectGeoBounds, getVisibleRectFitPadding, isLngLatInVisibleViewport, } from './utils/geo-config';
+import { beforeLayer, POI_MARKER_FLOOR_LAYER_ID, VENUE_MARKER_FLOOR_LAYER_ID, } from './utils/marker-layer-order';
+import { poiMarkerHitTest } from './utils/poi-marker-hit-test';
+import { pickUprightTextFont } from './utils/style-fonts';
+const POI_SOURCE_ID = 'expofp-poi';
+const POI_CLUSTERS_LAYER_ID = POI_MARKER_FLOOR_LAYER_ID;
+const POI_CLUSTER_COUNT_LAYER_ID = 'expofp-poi-cluster-count';
+const POI_UNCLUSTERED_LAYER_ID = 'expofp-poi-unclustered';
+const POI_SELECTED_LAYER_ID = 'expofp-poi-selected';
+const POI_PINHEAD_IMAGE_ID = 'expofp-poi-pinhead-image';
+const POI_CLUSTER_FOOTPRINT_IMAGE_ID = 'expofp-poi-cluster-footprint-image';
+/** All native POI layers, in add order (pinhead on top). */
+const POI_LAYER_IDS = [
+    POI_CLUSTERS_LAYER_ID,
+    POI_CLUSTER_COUNT_LAYER_ID,
+    POI_UNCLUSTERED_LAYER_ID,
+    POI_SELECTED_LAYER_ID,
+];
+/**
+ * The layers whose features a click should claim from the renderer path — all
+ * of them but the cluster count, whose glyphs sit on the cluster circles.
+ */
+const POI_HIT_LAYER_IDS = POI_LAYER_IDS.filter((id) => id !== POI_CLUSTER_COUNT_LAYER_ID);
+const iconImageId = (boothId) => `expofp-poi-icon-${boothId}`;
+/**
+ * Renders the outdoor PoI markers (hotels, parking, transit) as native
+ * MapLibre layers: a GeoJSON source with `cluster: true` plus symbol/circle
+ * layers on top of it. Geo map only — the hook is mounted from
+ * MaplibreAdapter, and runs once the renderer's `3d` custom layer exists so
+ * the marker stack draws above the floor plan.
+ *
+ * The marker feed is `store.poiMarkerStore`: `config-outdoor-poi` builds the
+ * marker records (including the rasterized pins, registered here via
+ * `map.addImage`), and the store derives selection (`selectedMarkerId`), the
+ * active filter (`outdoorFilter`) and dimming suppression from them. These
+ * layers are the *only* rendering outdoor PoIs get — see
+ * `configOutdoorPoiLayer`. Clicks are claimed from the renderer path via
+ * `poiMarkerHitTest`.
+ *
+ * Gated behind `enableExperimentalOutdoorMarkers`: with the flag off no layers,
+ * images or handlers are created at all. The feed is empty in that case too
+ * (`configOutdoorPoiLayer` never publishes), so this is belt-and-braces — it
+ * keeps the map untouched even if markers reach the store another way.
+ */
+export function usePoiMarkers(ready, mapRef, geoConfig) {
+    useEffect(() => {
+        if (!isOutdoorMarkersEnabled())
+            return;
+        const map = mapRef.current;
+        if (!ready || !map || !geoConfig)
+            return;
+        const { gpsConfig } = geoConfig;
+        const registeredImages = new Set();
+        // Shared selection visual: every marker uses the same pinhead, drawn in
+        // the selection color — so one image serves all markers.
+        const pixelRatio = window.devicePixelRatio || 1;
+        const selectionColor = settings.colors?.booths?.selected || '#3b6ef5';
+        const pinheadImage = createPoiPinheadImage(POI_SELECTED_PIN_WIDTH_PX, pixelRatio, selectionColor);
+        // The pin images carry a drop shadow below the tip; shift each one down so
+        // the tip itself sits on the marker's point.
+        const markerTipOffset = getPoiPinLayout(POI_MARKER_PIN_SHAPE, POI_MARKER_PIN_WIDTH_PX, pixelRatio).tipOffset;
+        const pinheadTipOffset = getPoiPinLayout(POI_SELECTED_PIN_SHAPE, POI_SELECTED_PIN_WIDTH_PX, pixelRatio).tipOffset;
+        // Circle layers never collide, so the cluster disc reserves its space
+        // through a transparent, disc-sized icon on the count layer instead.
+        const clusterFootprintPx = Math.ceil((POI_CLUSTER_SIZE_PX + 2 * POI_CLUSTER_STROKE_WIDTH_PX) * pixelRatio);
+        const clusterFootprintImage = new ImageData(clusterFootprintPx, clusterFootprintPx);
+        const lngLatOf = (marker) => convertLocalToGps(marker.center.x, marker.center.y, gpsConfig);
+        // The pins (config-outdoor-poi) and the shared pinhead are rasterized at
+        // devicePixelRatio; addImage's pixelRatio option restores the CSS size.
+        const addImage = (id, image) => {
+            // Replace any earlier registration (or the transparent placeholder the
+            // styleimagemissing handler may have stuffed in).
+            if (map.hasImage(id))
+                map.removeImage(id);
+            map.addImage(id, image, { pixelRatio });
+            registeredImages.add(id);
+        };
+        // Register the marker pins as style images and prune the ones whose markers
+        // are gone. `force` re-registers everything — used when the marker set is
+        // rebuilt, since the same booth ids can return with brand-new raster data.
+        const syncImages = (force) => {
+            const currentMarkers = store.poiMarkerStore.markers;
+            const desired = new Set(currentMarkers.map((marker) => iconImageId(marker.boothId)));
+            desired.add(POI_PINHEAD_IMAGE_ID);
+            desired.add(POI_CLUSTER_FOOTPRINT_IMAGE_ID);
+            for (const id of [...registeredImages]) {
+                if (desired.has(id))
+                    continue;
+                if (map.hasImage(id))
+                    map.removeImage(id);
+                registeredImages.delete(id);
+            }
+            for (const marker of currentMarkers) {
+                const id = iconImageId(marker.boothId);
+                if (force || !registeredImages.has(id))
+                    addImage(id, marker.icon);
+            }
+            // The pinhead and the cluster footprint never change for this effect's lifetime.
+            if (!registeredImages.has(POI_PINHEAD_IMAGE_ID)) {
+                addImage(POI_PINHEAD_IMAGE_ID, pinheadImage);
+            }
+            if (!registeredImages.has(POI_CLUSTER_FOOTPRINT_IMAGE_ID)) {
+                addImage(POI_CLUSTER_FOOTPRINT_IMAGE_ID, clusterFootprintImage);
+            }
+        };
+        // The single data path: selection (one pinhead feature) > filter (matching
+        // markers, not clustered) > everything. MapLibre reclusters on setData, so
+        // filtering and selection need no imperative per-marker state.
+        const buildData = () => {
+            const pinheadId = store.poiMarkerStore.selectedMarkerId;
+            const filter = store.poiMarkerStore.outdoorFilter;
+            const cluster = !filter.active;
+            let markers = store.poiMarkerStore.markers;
+            if (pinheadId !== null) {
+                markers = markers.filter((marker) => marker.boothId === pinheadId);
+            }
+            else if (filter.active) {
+                markers = filter.matchingMarkers;
+            }
+            return {
+                cluster,
+                data: {
+                    type: 'FeatureCollection',
+                    features: markers.map((marker) => ({
+                        type: 'Feature',
+                        geometry: { type: 'Point', coordinates: lngLatOf(marker) },
+                        properties: {
+                            boothId: marker.boothId,
+                            icon: iconImageId(marker.boothId),
+                            pinhead: marker.boothId === pinheadId,
+                        },
+                    })),
+                },
+            };
+        };
+        // Added after the `3d` custom layer (this hook runs on renderer-ready),
+        // so the whole stack draws above the floor plan — and below the venue
+        // markers (marker-layer-order), which win where the two overlap.
+        let sourceClustered = null;
+        const removeSourceAndLayers = () => {
+            for (const id of POI_LAYER_IDS) {
+                if (map.getLayer(id))
+                    map.removeLayer(id);
+            }
+            if (map.getSource(POI_SOURCE_ID))
+                map.removeSource(POI_SOURCE_ID);
+            sourceClustered = null;
+        };
+        const ensureSourceAndLayers = (data, cluster) => {
+            if (sourceClustered !== null && sourceClustered !== cluster) {
+                removeSourceAndLayers();
+            }
+            if (!map.getSource(POI_SOURCE_ID)) {
+                map.addSource(POI_SOURCE_ID, {
+                    type: 'geojson',
+                    data,
+                    cluster,
+                    clusterRadius: POI_CLUSTER_RADIUS_PX,
+                    clusterMinPoints: POI_CLUSTER_MIN_POINTS,
+                    // clusterMaxZoom stays at its default (source maxzoom - 1): passing
+                    // map.getMaxZoom() (22) trips a MapLibre warning because the GeoJSON
+                    // source's tile maxzoom is 18.
+                });
+                sourceClustered = cluster;
+            }
+            if (map.getLayer(POI_CLUSTERS_LAYER_ID))
+                return;
+            const notCluster = ['!', ['has', 'point_count']];
+            const isPinhead = ['==', ['coalesce', ['get', 'pinhead'], false], true];
+            const belowVenueMarkers = beforeLayer(map, VENUE_MARKER_FLOOR_LAYER_ID);
+            const addUnderVenueMarkers = (layer) => map.addLayer(layer, belowVenueMarkers);
+            addUnderVenueMarkers({
+                id: POI_CLUSTERS_LAYER_ID,
+                type: 'circle',
+                source: POI_SOURCE_ID,
+                filter: ['has', 'point_count'],
+                paint: {
+                    'circle-radius': POI_CLUSTER_SIZE_PX / 2,
+                    'circle-color': POI_CLUSTER_COLOR,
+                    'circle-stroke-color': POI_CLUSTER_STROKE_COLOR,
+                    'circle-stroke-width': POI_CLUSTER_STROKE_WIDTH_PX,
+                    'circle-pitch-alignment': 'viewport',
+                },
+            });
+            addUnderVenueMarkers({
+                id: POI_CLUSTER_COUNT_LAYER_ID,
+                type: 'symbol',
+                source: POI_SOURCE_ID,
+                filter: ['has', 'point_count'],
+                layout: {
+                    'text-field': ['get', 'point_count_abbreviated'],
+                    'text-font': pickUprightTextFont(map),
+                    'text-size': POI_CLUSTER_TEXT_SIZE_PX,
+                    'text-allow-overlap': true,
+                    'icon-image': POI_CLUSTER_FOOTPRINT_IMAGE_ID,
+                    'icon-allow-overlap': true,
+                },
+                paint: { 'text-color': '#ffffff' },
+            });
+            addUnderVenueMarkers({
+                id: POI_UNCLUSTERED_LAYER_ID,
+                type: 'symbol',
+                source: POI_SOURCE_ID,
+                filter: ['all', notCluster, ['!', isPinhead]],
+                layout: {
+                    'icon-image': ['get', 'icon'],
+                    'icon-anchor': 'bottom',
+                    'icon-offset': [0, markerTipOffset],
+                    'icon-allow-overlap': true,
+                },
+            });
+            addUnderVenueMarkers({
+                id: POI_SELECTED_LAYER_ID,
+                type: 'symbol',
+                source: POI_SOURCE_ID,
+                filter: ['all', notCluster, isPinhead],
+                layout: {
+                    'icon-image': POI_PINHEAD_IMAGE_ID,
+                    'icon-anchor': 'bottom',
+                    'icon-offset': [0, pinheadTipOffset],
+                    'icon-allow-overlap': true,
+                },
+            });
+        };
+        // Marker-layer counterpart of the plan dimming: markers live above the
+        // map dim fill, so they dim via their own paint opacity when the venue
+        // dims (and stay bright while a POI filter/selection suppresses dimming).
+        const applyDimming = () => {
+            if (!map.getLayer(POI_CLUSTERS_LAYER_ID))
+                return;
+            const opacity = getMapDimTarget() ? 1 - DIM_INTENSITY : 1;
+            map.setPaintProperty(POI_CLUSTERS_LAYER_ID, 'circle-opacity', opacity);
+            map.setPaintProperty(POI_CLUSTERS_LAYER_ID, 'circle-stroke-opacity', opacity);
+            map.setPaintProperty(POI_CLUSTER_COUNT_LAYER_ID, 'text-opacity', opacity);
+            map.setPaintProperty(POI_UNCLUSTERED_LAYER_ID, 'icon-opacity', opacity);
+            map.setPaintProperty(POI_SELECTED_LAYER_ID, 'icon-opacity', opacity);
+        };
+        // `forceImages` re-rasterizes every style image; only the marker set
+        // changing (or a style reload) needs it.
+        const refresh = (forceImages = false) => {
+            syncImages(forceImages);
+            const { cluster, data } = buildData();
+            ensureSourceAndLayers(data, cluster);
+            map.getSource(POI_SOURCE_ID)?.setData(data);
+            applyDimming();
+        };
+        // Bring the filter's matching markers into view (only when needed).
+        const fitOutdoorFilterMarkers = (markers) => {
+            if (!markers.length)
+                return;
+            const padding = getVisibleRectFitPadding(50);
+            const allVisible = markers.every((marker) => isLngLatInVisibleViewport(map, lngLatOf(marker), padding));
+            if (allVisible)
+                return;
+            const markerBox = Box.fromPoints(markers.map((marker) => marker.center));
+            const bounds = getLocalRectGeoBounds(markerBox, gpsConfig);
+            const camera = map.cameraForBounds(bounds, { padding, bearing: geoConfig.bearing });
+            if (!camera?.center || typeof camera.zoom !== 'number')
+                return;
+            map.easeTo({
+                center: camera.center,
+                zoom: Math.min(map.getZoom(), camera.zoom),
+                bearing: geoConfig.bearing,
+                duration: 500,
+                essential: true,
+            });
+        };
+        // --- Map interaction -----------------------------------------------------
+        const handleMarkerClick = (event) => {
+            const boothId = event.features?.[0]?.properties?.boothId;
+            if (typeof boothId !== 'number')
+                return;
+            // clickBooth updates uiState.selectedBooths; the store's
+            // selectedMarkerId computed re-derives the pinhead from it.
+            const booth = store.boothStore.boothById.get(boothId);
+            if (booth)
+                store.clickBooth(booth);
+        };
+        const handleClusterClick = (event) => {
+            const feature = event.features?.[0];
+            const clusterId = feature?.properties?.cluster_id;
+            const source = map.getSource(POI_SOURCE_ID);
+            if (typeof clusterId !== 'number' || !source || feature?.geometry?.type !== 'Point')
+                return;
+            const [lng = 0, lat = 0] = feature.geometry.coordinates;
+            void source.getClusterExpansionZoom(clusterId).then((expansionZoom) => {
+                map.easeTo({
+                    center: [lng, lat],
+                    zoom: Math.min(expansionZoom, map.getMaxZoom()),
+                    duration: 500,
+                });
+            });
+        };
+        map.on('click', POI_UNCLUSTERED_LAYER_ID, handleMarkerClick);
+        map.on('click', POI_SELECTED_LAYER_ID, handleMarkerClick);
+        map.on('click', POI_CLUSTERS_LAYER_ID, handleClusterClick);
+        // Claim clicks on native POI features from the renderer click pipeline
+        // (`clickedPlan` in Map/pointer.ts) so the booth underneath isn't double-selected.
+        poiMarkerHitTest.set((clientX, clientY) => {
+            const layers = POI_HIT_LAYER_IDS.filter((id) => !!map.getLayer(id));
+            if (!layers.length)
+                return false;
+            const rect = map.getCanvas().getBoundingClientRect();
+            return (map.queryRenderedFeatures([clientX - rect.left, clientY - rect.top], { layers }).length > 0);
+        });
+        // A style reload drops all sources, layers and images. Nothing in the app
+        // calls setStyle today, so this never fires after init — but
+        // MaplibreWrapper's own style.load handler already re-adds the dim and 3d
+        // layers defensively, and this keeps the POI stack alive with them. Our
+        // handler is registered after the wrapper's, so the re-added POI layers
+        // land above the re-added 3d layer, preserving z-order.
+        const handleStyleLoad = () => {
+            registeredImages.clear();
+            refresh(true);
+        };
+        map.on('style.load', handleStyleLoad);
+        // --- State subscriptions -------------------------------------------------
+        // Marker set changed (scene build/teardown): same booth ids may return
+        // with brand-new raster data, so force image re-registration.
+        const markersDisposer = reaction(() => store.poiMarkerStore.markers, () => refresh(true));
+        // Booth selection (click or search): drives the pinhead via the store's
+        // selectedMarkerId computed (itself derived from uiState.selectedBooths).
+        const selectedBoothDisposer = reaction(() => store.poiMarkerStore.selectedMarkerId, () => refresh());
+        // Keyed on the matching booth ids, so this fires exactly when what the
+        // filter shows changes — and re-fitting the camera needs no extra guard.
+        const filterDisposer = reaction(() => store.poiMarkerStore.outdoorFilter.key, () => {
+            refresh();
+            fitOutdoorFilterMarkers(store.poiMarkerStore.outdoorFilter.matchingMarkers);
+        });
+        const dimDisposer = reaction(() => getMapDimTarget(), () => applyDimming());
+        refresh(true);
+        return () => {
+            markersDisposer();
+            selectedBoothDisposer();
+            filterDisposer();
+            dimDisposer();
+            poiMarkerHitTest.set(null);
+            map.off('style.load', handleStyleLoad);
+            map.off('click', POI_UNCLUSTERED_LAYER_ID, handleMarkerClick);
+            map.off('click', POI_SELECTED_LAYER_ID, handleMarkerClick);
+            map.off('click', POI_CLUSTERS_LAYER_ID, handleClusterClick);
+            // The map may already be tearing down (MaplibreWrapper.remove()); style
+            // access on a removed map throws, and everything dies with it anyway.
+            try {
+                removeSourceAndLayers();
+                for (const id of registeredImages) {
+                    if (map.hasImage(id))
+                        map.removeImage(id);
+                }
+            }
+            catch {
+                // Map already removed — nothing to clean up.
+            }
+        };
+    }, [ready, mapRef, geoConfig]);
+}

package/dist/esm/components/Maplibre/useVenueCameraTracking.d.ts

@@ -0,0 +1,6 @@
+import type { Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+import { type GeoConfig } from './utils/geo-config';
+/** Keeps viewport context and per-venue presentation in sync while the camera moves. */
+export declare function useVenueCameraTracking(mapRef: RefObject<MaplibreMap | null>, geoConfig: GeoConfig | null, enabled: boolean): void;
+//# sourceMappingURL=useVenueCameraTracking.d.ts.map

package/dist/esm/components/Maplibre/useVenueCameraTracking.js

@@ -0,0 +1,115 @@
+import { runInAction } from 'mobx';
+import { useEffect } from 'react';
+import store from '../../store';
+import { getLocalViewport } from './utils/local-viewport';
+import { installVenueCalibrationConsole } from './utils/venue-calibration-console';
+import { resolveVenueFocusState } from './utils/venue-focus';
+import { getFootprintSizePx, getVenueGroundFootprint, } from './utils/venue-projection';
+import { getViewportDetailThreshold } from './utils/venue-viewport-detail';
+import { resolveVenuePresentationState, venuePresentationStatesEqual } from './utils/venue-zoom';
+function updateVenueFocus(viewport) {
+    const focusedId = store.venueStore.automaticContextVenueId;
+    const candidates = store.venueStore.orderedVenues.map((venue) => ({
+        name: venue.id,
+        floorIndex: venue.order,
+        indoorDetail: venue.detailVisible,
+        rect: venue.bounds,
+    }));
+    const state = resolveVenueFocusState(viewport, candidates, focusedId);
+    if (state.kind === 'none') {
+        store.venueStore.setAutomaticContext(null);
+    }
+    else if (state.kind === 'focus' && state.name !== focusedId) {
+        store.venueStore.setAutomaticContext(state.name);
+    }
+}
+function updateVenuePresentationStates(map, geoConfig, footprints) {
+    const zoom = map.getZoom();
+    runInAction(() => {
+        for (const venue of store.venueStore.venues) {
+            // Geodesy is camera-invariant; only the Mercator scale moves with zoom.
+            let footprint = footprints.get(venue.id);
+            if (footprint === undefined) {
+                footprint = getVenueGroundFootprint(venue.bounds, geoConfig.gpsConfig);
+                footprints.set(venue.id, footprint);
+            }
+            const sizePx = getFootprintSizePx(footprint, zoom);
+            const config = {
+                auxLayers: venue.auxLayers,
+                detailMinSizePx: getViewportDetailThreshold(map, geoConfig, venue, footprint),
+                markerMaxSizePx: venue.markerMaxSizePx,
+            };
+            const next = resolveVenuePresentationState(config, sizePx, venue.presentationState);
+            if (!venue.presentationState ||
+                !venuePresentationStatesEqual(venue.presentationState, next)) {
+                venue.presentationState = next;
+            }
+        }
+    });
+}
+/** Keeps viewport context and per-venue presentation in sync while the camera moves. */
+export function useVenueCameraTracking(mapRef, geoConfig, enabled) {
+    useEffect(() => {
+        const map = mapRef.current;
+        const venueMode = store.venueStore.isCampusMode;
+        if (!enabled || !map || !geoConfig || !venueMode)
+            return;
+        const getViewport = () => getLocalViewport(map, geoConfig.gpsConfig);
+        // Resolved lazily per venue and reused for the effect's lifetime: venue
+        // bounds and the plan's GPS anchors are both fixed once the model is built.
+        const footprints = new Map();
+        const updateFromCamera = () => {
+            updateVenuePresentationStates(map, geoConfig, footprints);
+            const viewport = getViewport();
+            if (viewport)
+                updateVenueFocus(viewport);
+        };
+        // A trailing debounce would defer focus until panning or zooming stops.
+        // Limit updates to one per rendered frame instead, then flush the final state.
+        let animationFrame;
+        const handleMove = (event) => {
+            // Live per-frame updates only for user gestures (which carry a DOM
+            // originalEvent). Programmatic moves — search-result / venue-name flies —
+            // animate too fast for the switch to track smoothly, so let them settle
+            // and update once at moveend instead.
+            if (!event.originalEvent)
+                return;
+            store.venueStore.releaseDestinationOverride();
+            if (animationFrame !== undefined)
+                return;
+            animationFrame = requestAnimationFrame(() => {
+                animationFrame = undefined;
+                updateFromCamera();
+            });
+        };
+        const handleMoveEnd = () => {
+            if (animationFrame !== undefined) {
+                cancelAnimationFrame(animationFrame);
+                animationFrame = undefined;
+            }
+            updateFromCamera();
+        };
+        // Resolve the full switch state from the mount-time camera: the map is
+        // already at its initial position (set synchronously in the MaplibreMap
+        // constructor), so both camera-driven degradation (KTD-3 - no forced detail
+        // boot) and viewport-driven venue focus must be seeded now. Seeding zoom
+        // only would leave the selector in the overview default until the first
+        // pan, flashing the wrong venue/level on load.
+        updateFromCamera();
+        map.on('move', handleMove);
+        map.on('moveend', handleMoveEnd);
+        // Dev-only `window.__efpVenues()`: reads the size axis at the current
+        // camera and reports what to author (§12 Guard 5). Installed here because
+        // this is where the map and the plan's GPS anchors are already resolved.
+        const uninstallCalibrationConsole = import.meta.env.DEV
+            ? installVenueCalibrationConsole(map, geoConfig)
+            : undefined;
+        return () => {
+            if (animationFrame !== undefined)
+                cancelAnimationFrame(animationFrame);
+            map.off('move', handleMove);
+            map.off('moveend', handleMoveEnd);
+            uninstallCalibrationConsole?.();
+        };
+    }, [enabled, geoConfig, mapRef]);
+}

package/dist/esm/components/Maplibre/useVenueLayers.d.ts

@@ -0,0 +1,15 @@
+import type { Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+import { type GeoConfig } from './utils/geo-config';
+/**
+ * Native MapLibre rendering of the procedural per-kind fallbacks (R9, R10): a
+ * contour fill/line pair and a named pinhead, each visible within its zoom
+ * range when no authored layer of that kind suppresses it. The geometry is
+ * static (one GeoJSON feature per venue, plan-local coordinates projected to
+ * GPS once); zoom-state changes only touch per-feature state, and paint
+ * transitions cross-fade the appearance. The floor-detail counterpart —
+ * dropping a below-cutoff venue's levels from the custom scene layer — lives
+ * in useLayerVisibilitySync, the single owner of `LayerDef.hidden`.
+ */
+export declare function useVenueLayers(rendererReady: boolean, mapRef: RefObject<MaplibreMap | null>, geoConfig: GeoConfig | null): void;
+//# sourceMappingURL=useVenueLayers.d.ts.map