@expofp/floorplan 0.0.0-experimental.2632d13

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

@@ -0,0 +1,14 @@
+import type { SceneDef } from '@expofp/renderer';
+import { type Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+import type { VenueCameraRequest } from '../../store/VenueStore';
+import { type GeoConfig } from './utils/geo-config';
+/** Executes and consumes a semantic venue/campus camera request. */
+export declare function executeVenueCameraRequest(map: MaplibreMap, geoConfig: GeoConfig, request: VenueCameraRequest): void;
+/**
+ * Bundles all camera-related MobX reactions: venue destination, moveToBooths,
+ * moveToRect, zoomBy, moveToLocation, and centerMap. Each watches a state
+ * trigger, moves the camera, and clears the trigger.
+ */
+export declare function useCameraReactions(mapRef: RefObject<MaplibreMap | null>, geoConfig: GeoConfig | null, sceneDef: SceneDef | null): void;
+//# sourceMappingURL=useCameraReactions.d.ts.map

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

@@ -0,0 +1,256 @@
+import { Box } from '@expofp/geometry';
+import { getSvgArea, isSvgAreaExplicit } from '../../data/svg.js';
+import store, { uiState } from '../../store';
+import { convertLocalToGps } from '../../utils/gps';
+import { useReaction } from '../../utils/mobx';
+import { expandRectByPercent, getVenueFitMarginPercent, resolveVenueFitRect, } from '../../utils/scene-bounds';
+import { framingRect } from '../Map/framing-rect.js';
+import { withKiosk } from '../Map/with-kiosk.js';
+import { cameraForLocalRect, campusFitPadding, clampZoom, DEFAULT_FIT_PADDING, fitMapToLocalRect, getVisibleRectFitPadding, isLngLatInVisibleViewport, venueLevelBearing, } from './utils/geo-config';
+import { resolveVenueEntryZoom } from './utils/venue-camera-target';
+import { getVenueSizePx } from './utils/venue-projection';
+import { getViewportDetailThreshold } from './utils/venue-viewport-detail';
+const maplibreUiState = uiState;
+const OUTDOOR_POI_SEARCH_ZOOM = 15;
+const OUTDOOR_POI_VISIBLE_PADDING = 24;
+/** Executes and consumes a semantic venue/campus camera request. */
+export function executeVenueCameraRequest(map, geoConfig, request) {
+    let minZoom;
+    let bearing;
+    let padding;
+    if (request.kind === 'venue') {
+        const venue = store.venueStore.findVenue(request.venueId);
+        const canvas = map.getCanvas();
+        bearing = venueLevelBearing(geoConfig, request.layer);
+        // The fit `fitMapToLocalRect` below makes, so the entry zoom only ever
+        // raises it when the venue's detail needs more.
+        const camera = cameraForLocalRect(request.rect, geoConfig.gpsConfig, bearing, { width: canvas.clientWidth, height: canvas.clientHeight }, getVisibleRectFitPadding(DEFAULT_FIT_PADDING, framingRect()));
+        if (venue && camera) {
+            const entry = resolveVenueEntryZoom({
+                currentZoom: map.getZoom(),
+                fitZoom: camera.zoom,
+                maxZoom: map.getMaxZoom(),
+                sizePx: getVenueSizePx(venue.bounds, geoConfig.gpsConfig, map.getZoom()),
+                detailMinSizePx: getViewportDetailThreshold(map, geoConfig, venue),
+            });
+            minZoom = entry.zoom;
+            if (entry.clampedBeforeDetail) {
+                console.warn(`Venue "${venue.id}" cannot reach its detail size criterion before map maxZoom.`);
+            }
+        }
+    }
+    else {
+        padding = campusFitPadding(store.venueStore.campusBoundsAuthored);
+        map.once('moveend', () => store.venueStore.completeCampusView(request));
+    }
+    fitMapToLocalRect(map, request.rect, geoConfig, { minZoom, bearing, padding });
+    store.venueStore.clearCameraRequest(request);
+}
+// Breathing room around a booth focus, in plan units. The proportional margin
+// below scales with the booth, so on its own it leaves a small booth filling the
+// screen; this floor is what keeps some plan visible around it.
+const BOOTH_FIT_PAD = 20;
+/** Adds a size-proportional margin to a booth-focus target, matching legacy `zoomTo` behavior. */
+function withFitMargin(rect) {
+    return expandRectByPercent(rect, getVenueFitMarginPercent(rect, getSvgArea())).expand(BOOTH_FIT_PAD);
+}
+/**
+ * The zoom a booth focus must reach for its venue to show indoor detail. The
+ * booth fit alone frames the booth, which on a narrow screen can land below the
+ * venue's detail edge and leave its contour drawn over the booth. Undefined
+ * when the booths span venues or sit outside the venue model.
+ */
+function boothVenueDetailZoom(map, geoConfig, booths) {
+    const venues = new Set(booths.map((booth) => store.venueStore.venueOfLayer(booth.layer)));
+    const [venue] = venues;
+    if (venues.size !== 1 || !venue)
+        return undefined;
+    return venueDetailZoom(map, geoConfig, venue);
+}
+/**
+ * The bearing a booth focus frames at: the booths' venue level's, when they
+ * all sit on one (north-up turns the map to its viewbox there). Undefined —
+ * the home bearing — for booths outside the venue model or across levels.
+ */
+function boothFocusBearing(geoConfig, booths) {
+    const layers = new Set(booths.map((booth) => booth.layer?.name));
+    const [layer] = layers;
+    if (layers.size !== 1 || !layer || !store.venueStore.venueOfLayer(layer))
+        return undefined;
+    return venueLevelBearing(geoConfig, layer);
+}
+/** The zoom at which `venue` enters indoor detail; undefined when its size cannot be measured. */
+function venueDetailZoom(map, geoConfig, venue) {
+    const currentZoom = map.getZoom();
+    const sizePx = getVenueSizePx(venue.bounds, geoConfig.gpsConfig, currentZoom);
+    if (sizePx === null)
+        return undefined;
+    return resolveVenueEntryZoom({
+        currentZoom,
+        fitZoom: -Infinity,
+        maxZoom: map.getMaxZoom(),
+        sizePx,
+        detailMinSizePx: getViewportDetailThreshold(map, geoConfig, venue),
+    }).zoom;
+}
+function handleOutdoorPoiMoveToBooths(map, geoConfig, booths) {
+    if (booths.length !== 1)
+        return false;
+    const selectedBoothId = booths[0]?.id;
+    const marker = store.poiMarkerStore.markers.find((entry) => entry.boothId === selectedBoothId);
+    if (!marker)
+        return false;
+    const center = convertLocalToGps(marker.center.x, marker.center.y, geoConfig.gpsConfig);
+    const padding = getVisibleRectFitPadding(OUTDOOR_POI_VISIBLE_PADDING);
+    if (isLngLatInVisibleViewport(map, center, padding))
+        return true;
+    map.easeTo({
+        center,
+        zoom: clampZoom(map, OUTDOOR_POI_SEARCH_ZOOM),
+        bearing: geoConfig.bearing,
+        duration: 500,
+        essential: true,
+    });
+    return true;
+}
+/**
+ * Bundles all camera-related MobX reactions: venue destination, moveToBooths,
+ * moveToRect, zoomBy, moveToLocation, and centerMap. Each watches a state
+ * trigger, moves the camera, and clears the trigger.
+ */
+export function useCameraReactions(mapRef, geoConfig, sceneDef) {
+    useReaction(() => store.venueStore.cameraRequest, (request) => {
+        const map = mapRef.current;
+        if (request && map && geoConfig)
+            executeVenueCameraRequest(map, geoConfig, request);
+    }, { fireImmediately: true });
+    // Camera: moveToBooths
+    useReaction(() => maplibreUiState.moveToBooths, (moveToBooths) => {
+        const map = mapRef.current;
+        if (!moveToBooths || !map || !geoConfig)
+            return;
+        const booths = moveToBooths.filter((b) => b.rect);
+        if (booths.length === 0)
+            return;
+        if (handleOutdoorPoiMoveToBooths(map, geoConfig, booths)) {
+            maplibreUiState.moveToBooths = null;
+            return;
+        }
+        const combined = Box.fromUnion(...booths.map((b) => b.rect));
+        fitMapToLocalRect(map, withFitMargin(combined), geoConfig, {
+            minZoom: boothVenueDetailZoom(map, geoConfig, booths),
+            bearing: boothFocusBearing(geoConfig, booths),
+        });
+        maplibreUiState.moveToBooths = null;
+    });
+    // Camera: moveToRect
+    useReaction(() => maplibreUiState.moveToRect, (moveToRect) => {
+        const map = mapRef.current;
+        if (!moveToRect || !map || !geoConfig)
+            return;
+        const { width, height } = moveToRect.size;
+        // Widened to keep a kiosk in view, as the plan camera frames it — unless the rect is empty:
+        // that is nothing to frame, and the kiosk would make a target of it. The margin below is
+        // still judged by the rect that was asked for.
+        const framedRect = width > 0 && height > 0 ? withKiosk(moveToRect) : moveToRect;
+        // The plan camera's margin, a share of the framing region per side: the one the store named,
+        // as Fit-to-screen does, else the coverage rule's. Growing the rect by
+        // `margin / (1 - 2 * margin)` and fitting it flush into the region is the same fit, and what
+        // keeps the share one of the region rather than of the whole canvas.
+        const margin = maplibreUiState.moveToRectPaddingPercent ??
+            getVenueFitMarginPercent(moveToRect, getSvgArea());
+        const flushRect = expandRectByPercent(framedRect, margin / (1 - 2 * margin));
+        fitMapToLocalRect(map, flushRect, geoConfig, { padding: 0 });
+        maplibreUiState.moveToRect = null;
+        maplibreUiState.moveToRectPaddingPercent = null;
+    });
+    // Camera: zoom
+    useReaction(() => maplibreUiState.zoomBy, (zoomBy) => {
+        const map = mapRef.current;
+        if (!zoomBy || !map)
+            return;
+        store.venueStore.releaseDestinationOverride();
+        map.flyTo({
+            zoom: map.getZoom() + (zoomBy > 1 ? 0.5 : -0.5),
+            animate: true,
+            duration: 500,
+        });
+        maplibreUiState.zoomBy = null;
+    });
+    // Camera: moveToLocation — fly to the current position, keeping the zoom
+    // (raised to its venue's indoor detail when the position is on a venue floor).
+    // `RouteStore` raises the trigger only once the position's floor is on screen
+    // (`revealLayer`), so this flight is the last camera command of a floor switch
+    // and supersedes the floor-change fit in `useLayerVisibilitySync`.
+    // Also re-evaluated when the map comes up (`cameraPort`) or the position
+    // changes, so a request raised while the map was still booting — an IPS fix
+    // during load — is served then instead of leaving the trigger stuck.
+    useReaction(() => [
+        uiState.moveToLocation,
+        store.maplibreStore.cameraPort,
+        store.routeStore.currentPosition,
+    ], ([moveToLocation]) => {
+        if (!moveToLocation)
+            return;
+        const map = mapRef.current;
+        const currentPosition = store.routeStore.currentPosition;
+        if (!currentPosition) {
+            // nothing to fly to — release the trigger so the next request fires again
+            uiState.moveToLocation = false;
+            return;
+        }
+        if (!map)
+            return; // keep the request; the map readiness re-runs this reaction
+        const { lng, lat } = currentPosition;
+        const hasLngLat = typeof lng === 'number' &&
+            Number.isFinite(lng) &&
+            typeof lat === 'number' &&
+            Number.isFinite(lat);
+        // The request is consumed here, whatever happens next: re-arming must
+        // always be a false→true edge, never a write that finds it already set.
+        uiState.moveToLocation = false;
+        let center;
+        if (hasLngLat) {
+            center = [lng, lat];
+        }
+        else {
+            if (!geoConfig)
+                return;
+            center = convertLocalToGps(currentPosition.x, currentPosition.y, geoConfig.gpsConfig);
+        }
+        // A position on a venue's floor needs that venue in indoor detail to be seen at all — from
+        // the campus zoom the floor stays hidden under the building's outline. Zoom in far enough,
+        // never out. The position must also lie inside that venue: a GPS fix without a floor of its
+        // own inherits the floor last browsed as `z`, and an outdoor fix must not zoom into it.
+        const venue = store.venueStore.venueAt(currentPosition);
+        const detailZoom = venue &&
+            geoConfig &&
+            venue === store.venueStore.venueOfLayer(String(currentPosition.z ?? ''))
+            ? venueDetailZoom(map, geoConfig, venue)
+            : undefined;
+        map.flyTo({
+            center,
+            zoom: detailZoom === undefined ? undefined : Math.max(map.getZoom(), detailZoom),
+            animate: true,
+            duration: 1000,
+        });
+    });
+    // Camera: centerMap
+    useReaction(() => uiState.centerMap, (center) => {
+        const map = mapRef.current;
+        if (!center || !map || !geoConfig)
+            return;
+        const isEmptySearch = uiState.list.type === 'search' && !uiState.list.text;
+        if (!isEmptySearch) {
+            const { rect } = resolveVenueFitRect({
+                layerViewbox: store.layerStore.viewboxRectangle,
+                explicitArea: isSvgAreaExplicit() ? getSvgArea() : null,
+                layerRectangle: store.layerStore.rectangle,
+                sceneDef,
+                svgArea: getSvgArea(),
+            });
+            fitMapToLocalRect(map, rect, geoConfig);
+        }
+        uiState.centerMap = false;
+    });
+}

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

@@ -0,0 +1,25 @@
+import { type SceneDef } from '@expofp/renderer';
+import { type Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+import { type DimmingAnimator } from '../../utils/dimming';
+export interface DimmingControls {
+    mapDimAnimatorRef: RefObject<DimmingAnimator | null>;
+    venueDimAnimatorRef: RefObject<DimmingAnimator | null>;
+    applyDimmingTarget: (options?: {
+        immediate?: boolean;
+    }) => void;
+    handleMapDimLayerReady: (map: MaplibreMap) => void;
+}
+/**
+ * The map-wide dim target: `uiState.dimmed`, except while outdoor PoI markers
+ * suppress it. Single source of truth — the marker layers dim themselves
+ * (usePoiMarkers) and must agree with the plan and basemap.
+ */
+export declare function getMapDimTarget(): boolean;
+/**
+ * Manages scene dimming: creates map and venue dim animators,
+ * keeps them in sync with uiState.dimmed via a MobX reaction,
+ * and provides a callback for when the map dim layer is ready.
+ */
+export declare function useDimming(mapRef: RefObject<MaplibreMap | null>, sceneRef: RefObject<SceneDef | null>): DimmingControls;
+//# sourceMappingURL=useDimming.d.ts.map

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

@@ -0,0 +1,61 @@
+import { update } from '@expofp/renderer';
+import { useCallback, useEffect, useRef } from 'react';
+import store, { uiState } from '../../store';
+import { applyVenueDim, createDimmingAnimator, DIM_INTENSITY, VENUE_DIM_INTENSITY, } from '../../utils/dimming';
+import { useReaction } from '../../utils/mobx';
+import { applyMapDimValue } from './utils/map-helpers';
+/**
+ * The map-wide dim target: `uiState.dimmed`, except while outdoor PoI markers
+ * suppress it. Single source of truth — the marker layers dim themselves
+ * (usePoiMarkers) and must agree with the plan and basemap.
+ */
+export function getMapDimTarget() {
+    return uiState.dimmed && !store.poiMarkerStore.dimSuppressed;
+}
+/**
+ * Manages scene dimming: creates map and venue dim animators,
+ * keeps them in sync with uiState.dimmed via a MobX reaction,
+ * and provides a callback for when the map dim layer is ready.
+ */
+export function useDimming(mapRef, sceneRef) {
+    const mapDimAnimatorRef = useRef(null);
+    const venueDimAnimatorRef = useRef(null);
+    const applyDimmingTarget = useCallback((options) => {
+        const targetDim = getMapDimTarget();
+        mapDimAnimatorRef.current?.setTarget(targetDim, options);
+        venueDimAnimatorRef.current?.setTarget(targetDim, options);
+    }, []);
+    useEffect(() => {
+        const mapDimAnimator = createDimmingAnimator((value) => {
+            applyMapDimValue(mapRef.current, value * DIM_INTENSITY);
+        });
+        // Straight to renderer's `update`, exactly as the standalone map dims: the root layer's
+        // `dim` descends to every def that does not set its own.
+        const venueDimAnimator = createDimmingAnimator((value) => {
+            const scene = sceneRef.current;
+            if (scene && applyVenueDim(scene, value * VENUE_DIM_INTENSITY))
+                update(scene.rootLayer);
+        });
+        mapDimAnimatorRef.current = mapDimAnimator;
+        venueDimAnimatorRef.current = venueDimAnimator;
+        return () => {
+            mapDimAnimator.stop();
+            venueDimAnimator.stop();
+            mapDimAnimatorRef.current = null;
+            venueDimAnimatorRef.current = null;
+        };
+    }, [mapRef, sceneRef]);
+    // MobX tracks whatever getMapDimTarget() reads (uiState.dimmed, the PoI
+    // filter and selection), and the boolean means this fires only on a flip.
+    useReaction(() => getMapDimTarget(), () => applyDimmingTarget());
+    const handleMapDimLayerReady = useCallback((map) => {
+        const currentValue = mapDimAnimatorRef.current?.getValue() ?? (getMapDimTarget() ? 1 : 0);
+        applyMapDimValue(map, currentValue * DIM_INTENSITY);
+    }, []);
+    return {
+        mapDimAnimatorRef,
+        venueDimAnimatorRef,
+        applyDimmingTarget,
+        handleMapDimLayerReady,
+    };
+}

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

@@ -0,0 +1,16 @@
+import type { Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+/**
+ * Draws the journey's external leg on our own map: a dashed geodesic connector
+ * between the two journey places, labeled with the straight-line distance
+ * between them.
+ *
+ * The dashes are the point — the external leg is delegated, never street-routed
+ * by us (ADR-0010), so the connector states the shape and the scale of the gap
+ * and says, by not looking like a route line, that it is not a walking path.
+ *
+ * Nothing is added to the map until a journey actually exists, so plans with the
+ * `crossVenueJourneys` flag off (the default) never see a source or a layer.
+ */
+export declare function useJourneyConnector(rendererReady: boolean, mapRef: RefObject<MaplibreMap | null>): void;
+//# sourceMappingURL=useJourneyConnector.d.ts.map

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

@@ -0,0 +1,175 @@
+import { greatCirclePath } from '@expofp/geometry';
+import { comparer, reaction } from 'mobx';
+import { useEffect } from 'react';
+import { DEFAULT_UNITS } from '../../constants';
+import { getLayerSvg } from '../../data/svg';
+import { formatConnectorDistance, } from '../../journey';
+import { currentJourney } from '../../store/journey-plan';
+import { pickUprightTextFont } from './utils/style-fonts';
+const CONNECTOR_SOURCE_ID = 'expofp-journey-connector';
+const CONNECTOR_CASING_LAYER_ID = 'expofp-journey-connector-casing';
+const CONNECTOR_LINE_LAYER_ID = 'expofp-journey-connector-line';
+const CONNECTOR_LABEL_LAYER_ID = 'expofp-journey-connector-label';
+/** In add order — casing under the dashes, label on top. */
+const CONNECTOR_LAYER_IDS = [
+    CONNECTOR_CASING_LAYER_ID,
+    CONNECTOR_LINE_LAYER_ID,
+    CONNECTOR_LABEL_LAYER_ID,
+];
+/**
+ * Deliberately unlike a route line: route lines are solid and blue
+ * (`@expofp/wayfinding` DEFAULT_COLORS), so the connector is dashed and slate.
+ */
+const CONNECTOR_COLOR = '#5c6b7f';
+const CONNECTOR_CASING_COLOR = '#ffffff';
+const CONNECTOR_WIDTH_PX = 2.5;
+const CONNECTOR_CASING_WIDTH_PX = 6;
+const CONNECTOR_DASH = [2, 2];
+const CONNECTOR_LABEL_SIZE_PX = 13;
+/**
+ * How many segments the arc is sampled into. The connector spans anything from
+ * a few hundred metres to the other side of a continent, and this many keeps
+ * even the longest visibly curved without troubling the tile pipeline.
+ */
+const CONNECTOR_SEGMENTS = 64;
+const lngLat = ({ lat, lng }) => [lng, lat];
+const externalLegOf = (journey) => journey?.legs.find((leg) => leg.kind === 'external');
+const emptyData = { type: 'FeatureCollection', features: [] };
+/**
+ * The connector's two features: the sampled arc, and the point that carries the
+ * distance label at its midpoint. The label rides its own point rather than the
+ * line so it stays upright whatever bearing the trip runs at.
+ */
+function buildConnectorData(connector, planUnits) {
+    const path = greatCirclePath(connector.from, connector.to, CONNECTOR_SEGMENTS);
+    const midpoint = path[Math.floor(path.length / 2)] ?? connector.from;
+    return {
+        type: 'FeatureCollection',
+        features: [
+            {
+                type: 'Feature',
+                geometry: { type: 'LineString', coordinates: path.map(lngLat) },
+                properties: {},
+            },
+            {
+                type: 'Feature',
+                geometry: { type: 'Point', coordinates: lngLat(midpoint) },
+                properties: {
+                    distance: formatConnectorDistance(connector.distanceMeters, planUnits),
+                },
+            },
+        ],
+    };
+}
+/**
+ * Draws the journey's external leg on our own map: a dashed geodesic connector
+ * between the two journey places, labeled with the straight-line distance
+ * between them.
+ *
+ * The dashes are the point — the external leg is delegated, never street-routed
+ * by us (ADR-0010), so the connector states the shape and the scale of the gap
+ * and says, by not looking like a route line, that it is not a walking path.
+ *
+ * Nothing is added to the map until a journey actually exists, so plans with the
+ * `crossVenueJourneys` flag off (the default) never see a source or a layer.
+ */
+export function useJourneyConnector(rendererReady, mapRef) {
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!rendererReady || !map)
+            return;
+        // A plan states its units once, in the SVG; they cannot change under us.
+        const planUnits = getLayerSvg()?.getAttribute('units') || DEFAULT_UNITS;
+        // Added on renderer-ready like the other native stacks, so the connector
+        // draws above the floor plan's custom `3d` layer.
+        const ensureSourceAndLayers = () => {
+            if (map.getSource(CONNECTOR_SOURCE_ID))
+                return;
+            map.addSource(CONNECTOR_SOURCE_ID, { type: 'geojson', data: emptyData });
+            map.addLayer({
+                id: CONNECTOR_CASING_LAYER_ID,
+                type: 'line',
+                source: CONNECTOR_SOURCE_ID,
+                filter: ['==', ['geometry-type'], 'LineString'],
+                layout: { 'line-cap': 'round', 'line-join': 'round' },
+                paint: {
+                    'line-color': CONNECTOR_CASING_COLOR,
+                    'line-width': CONNECTOR_CASING_WIDTH_PX,
+                    'line-opacity': 0.7,
+                },
+            });
+            map.addLayer({
+                id: CONNECTOR_LINE_LAYER_ID,
+                type: 'line',
+                source: CONNECTOR_SOURCE_ID,
+                filter: ['==', ['geometry-type'], 'LineString'],
+                layout: { 'line-join': 'round' },
+                paint: {
+                    'line-color': CONNECTOR_COLOR,
+                    'line-width': CONNECTOR_WIDTH_PX,
+                    'line-dasharray': CONNECTOR_DASH,
+                },
+            });
+            map.addLayer({
+                id: CONNECTOR_LABEL_LAYER_ID,
+                type: 'symbol',
+                source: CONNECTOR_SOURCE_ID,
+                filter: ['==', ['geometry-type'], 'Point'],
+                layout: {
+                    'text-field': ['get', 'distance'],
+                    'text-font': pickUprightTextFont(map),
+                    'text-size': CONNECTOR_LABEL_SIZE_PX,
+                    // Sits above the line it measures rather than on top of the dashes.
+                    'text-anchor': 'bottom',
+                    'text-offset': [0, -0.4],
+                    'text-allow-overlap': true,
+                    'text-ignore-placement': true,
+                },
+                paint: {
+                    'text-color': CONNECTOR_COLOR,
+                    'text-halo-color': '#ffffff',
+                    'text-halo-width': 1.6,
+                },
+            });
+        };
+        const removeSourceAndLayers = () => {
+            for (const id of CONNECTOR_LAYER_IDS) {
+                if (map.getLayer(id))
+                    map.removeLayer(id);
+            }
+            if (map.getSource(CONNECTOR_SOURCE_ID))
+                map.removeSource(CONNECTOR_SOURCE_ID);
+        };
+        const draw = (connector) => {
+            if (!connector) {
+                map.getSource(CONNECTOR_SOURCE_ID)?.setData(emptyData);
+                return;
+            }
+            ensureSourceAndLayers();
+            map.getSource(CONNECTOR_SOURCE_ID)?.setData(buildConnectorData(connector, planUnits));
+        };
+        // The journey is derived, not stored: this recomputes it from the route the
+        // app is showing, exactly as the journey panel does.
+        const readConnector = () => externalLegOf(currentJourney())?.connector ?? null;
+        // A style reload drops sources and layers; MaplibreWrapper re-adds the dim
+        // and `3d` layers on style.load, and re-adding after it keeps the z-order.
+        const handleStyleLoad = () => draw(readConnector());
+        map.on('style.load', handleStyleLoad);
+        draw(readConnector());
+        const disposeConnectorReaction = reaction(readConnector, draw, {
+            equals: comparer.structural,
+        });
+        return () => {
+            disposeConnectorReaction();
+            map.off('style.load', handleStyleLoad);
+            // The map may already be tearing down (MaplibreWrapper.remove()); style
+            // access on a removed map throws, and everything dies with it anyway.
+            try {
+                removeSourceAndLayers();
+            }
+            catch {
+                // Map already removed — nothing to clean up.
+            }
+        };
+    }, [rendererReady, mapRef]);
+}

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

@@ -0,0 +1,20 @@
+import { type Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+/**
+ * Turns the map's own camera movements into the two signals a kiosk depends on: the idle timer's
+ * keep-alive, and the camera-moved event the setkiosk panel records a new home framing from.
+ *
+ * Both come off the plan's camera in floorplan mode (`MapCamera`), which map mode does not drive —
+ * the plan is unmounted there and the map owns the camera. Without these listeners the idle timer
+ * runs out mid-gesture for a visitor who only moves the map, and the panel never learns that the
+ * operator reframed the view, leaving its Save button disabled over changes it cannot see.
+ *
+ * The two are not the same signal: activity is the visitor's own hand, where a reframing counts
+ * however it was made.
+ *
+ * `ready` is the mount signal: `mapRef.current` is assigned in the same `handleMapReady` call that
+ * sets it, so keying the effect on `ready` is what guarantees there is a map to subscribe to — the
+ * early return below is the assertion of that contract, not a tolerated miss.
+ */
+export declare function useKioskCameraEvents(ready: boolean, mapRef: RefObject<MaplibreMap | null>): void;
+//# sourceMappingURL=useKioskCameraEvents.d.ts.map

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

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { notifyCameraMoved } from '../Map/camera-events';
+/**
+ * Turns the map's own camera movements into the two signals a kiosk depends on: the idle timer's
+ * keep-alive, and the camera-moved event the setkiosk panel records a new home framing from.
+ *
+ * Both come off the plan's camera in floorplan mode (`MapCamera`), which map mode does not drive —
+ * the plan is unmounted there and the map owns the camera. Without these listeners the idle timer
+ * runs out mid-gesture for a visitor who only moves the map, and the panel never learns that the
+ * operator reframed the view, leaving its Save button disabled over changes it cannot see.
+ *
+ * The two are not the same signal: activity is the visitor's own hand, where a reframing counts
+ * however it was made.
+ *
+ * `ready` is the mount signal: `mapRef.current` is assigned in the same `handleMapReady` call that
+ * sets it, so keying the effect on `ready` is what guarantees there is a map to subscribe to — the
+ * early return below is the assertion of that contract, not a tolerated miss.
+ */
+export function useKioskCameraEvents(ready, mapRef) {
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!ready || !map)
+            return;
+        // `originalEvent` marks a real gesture, so the idle reset's own camera restore doesn't count as
+        // activity and re-arm the timer it just fired; `moveend` is what starts the countdown from the
+        // end of a flick rather than the start of it.
+        let isUserMoving = false;
+        const handleMoveStart = (event) => {
+            if (!event.originalEvent)
+                return;
+            isUserMoving = true;
+            window.__resett?.();
+        };
+        const handleMoveEnd = () => {
+            // Every move reaches the panel, a command's as readily as the operator's — they frame the home
+            // view with the map controls too — and the camera has come to rest by now, so the store reads
+            // back the framing the map was left at. Its own restore is the one move that must not count as
+            // an edit, and the store recognizes that itself.
+            notifyCameraMoved();
+            if (!isUserMoving)
+                return;
+            isUserMoving = false;
+            window.__resett?.();
+        };
+        map.on('movestart', handleMoveStart);
+        map.on('moveend', handleMoveEnd);
+        return () => {
+            map.off('movestart', handleMoveStart);
+            map.off('moveend', handleMoveEnd);
+        };
+    }, [ready, mapRef]);
+}

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

@@ -0,0 +1,25 @@
+import { type SceneDef } from '@expofp/renderer';
+import type { Map as MaplibreMap } from 'maplibre-gl';
+import { type RefObject } from 'react';
+import { type GeoConfig } from './utils/geo-config';
+/**
+ * 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 declare function useLayerVisibilitySync(scene: SceneDef | null, mapRef: RefObject<MaplibreMap | null>, geoConfig: GeoConfig | null): void;
+//# sourceMappingURL=useLayerVisibilitySync.d.ts.map