@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Map/Map.js

@@ -0,0 +1,242 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Renderer, update } from '@expofp/renderer';
+import classNames from 'classnames';
+import { observable } from 'mobx';
+import { useObserver } from 'mobx-react-lite';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import data from '../../data';
+import { getSvgArea } from '../../data/svg.js';
+import { createSceneDef } from '../../engine/defs';
+import store, { layersStore, uiState } from '../../store';
+import { ZOOM_IN_FACTOR } from '../../store/UIState';
+import settings from '../../tools/settings';
+import { applyVenueDim, createDimmingAnimator } from '../../utils/dimming';
+import isDebug from '../../utils/is-debug';
+import { isPathwayLayer } from '../../utils/is-pathway-layer';
+import { useReaction } from '../../utils/mobx';
+import { createWayfinding } from '../../wayfinding';
+import configAll from './drawing/config/config-all';
+import { configMarkers } from './drawing/config/config-markers';
+import { loadLayersImages } from './drawing/config/loadBoothsImages';
+import { MapCamera } from './MapCamera';
+import { MapCursorCoords } from './MapCursorCoords';
+import { MapViewport } from './MapViewport';
+import { clearSelection } from './pointer';
+import { setMapScene } from './scene';
+import { useBuildRoute } from './traffic/useBuildRoute';
+import { useManageTraffic } from './traffic/useManageTraffic';
+import { centerCoordinates } from './viewport';
+const MAP_SCENE_DEFAULT_COLOR = '#ebebeb';
+const TRAFFIC_API_HOST = 'routes-api.expofp.com';
+/** Viewbox width past which a plan counts as large, and is let much further in. */
+const LARGE_PLAN_WIDTH = 10_000;
+/**
+ * How far in the plan may be zoomed.
+ *
+ * A venue that configured its own bound gets it; otherwise a large venue is authored at a finer
+ * relative detail than a small one — a booth number on a 20 000-unit hall is a smaller fraction of
+ * the plan than the same label on a 400-unit one — so it has more to show at close range. That is a
+ * judgement about how venues are drawn, which is why the renderer takes a bound rather than guessing
+ * one.
+ * @param scene - The scene about to be rendered.
+ * @returns The maximum zoom factor.
+ */
+function maxZoomFor(scene) {
+    if (Number.isFinite(settings.maxZoom))
+        return settings.maxZoom;
+    return scene.viewbox.size.width > LARGE_PLAN_WIDTH ? 100 : 35;
+}
+/**
+ * How long a programmatic camera move should take.
+ *
+ * Both times come from the map settings, which the map view reads too, so a plan tilts and zooms
+ * at one speed in either view.
+ * @returns The smooth times, in seconds.
+ */
+function smoothTimeFor() {
+    const { zoomtime, pitchtime } = uiState.mapSettings;
+    return {
+        zoomTime: zoomtime === undefined ? undefined : zoomtime / 1000,
+        pitchTime: pitchtime === undefined ? undefined : pitchtime / 1000,
+    };
+}
+export default function Map() {
+    const elRef = useRef(null);
+    const s = useMemo(() => observable({
+        moving: false,
+        prevLevel: store.layerStore.layers.find((l) => !l.frozen && l.visible),
+    }), []);
+    const [scene, setScene] = useState(undefined);
+    // Built per scene, below, so its callback closes over that scene directly — which is why the scene
+    // lives in state alone and is not mirrored into a ref for the animation frames to read. The ref
+    // holds only the animator, so the reaction further down can reach whichever one is current.
+    const dimAnimatorRef = useRef(null);
+    // `configAll` builds per-booth reactions as it configures the layers; this is what disposes them
+    // when the scene goes away. Filled asynchronously, so it lives in a ref the teardown can read.
+    const cleanupRef = useRef(null);
+    function resetLayerRenderCache() {
+        layersStore.layers.forEach((layer) => {
+            layer.configured = false;
+            layer.children = [];
+            layer.loaded = false;
+        });
+    }
+    useEffect(() => {
+        let cancelled = false;
+        resetLayerRenderCache();
+        layersStore.layersLoaded = false;
+        configAll().then(({ layers, cleanup }) => {
+            // The scene was torn down while this was in flight — drop what it built rather than
+            // mounting it into a scene nobody is looking at.
+            if (cancelled) {
+                cleanup();
+                return;
+            }
+            cleanupRef.current = cleanup;
+            const sceneColor = settings.backgroundColor === 'none' ? MAP_SCENE_DEFAULT_COLOR : settings.backgroundColor;
+            const sceneDef = createSceneDef(layers, getSvgArea(), sceneColor);
+            setScene(sceneDef);
+            // Published for the parts of the SDK that are not components — the venue-fit resolution and
+            // the traffic hooks read the def tree through this handle.
+            setMapScene(sceneDef);
+            // Straight to renderer's `update`, not through `RendererService`: this path never calls
+            // `start`/`attach`, so the service holds no renderer, and its `update` would only forward to
+            // this same call. The root layer's `dim` descends to every def that does not set its own.
+            dimAnimatorRef.current = createDimmingAnimator((value) => {
+                if (applyVenueDim(sceneDef, value))
+                    update(sceneDef.rootLayer);
+            });
+            // Without a transition: a scene built while a search is already open must appear dimmed, not
+            // ease into it. This is also what re-applies the dim when the scene is rebuilt.
+            dimAnimatorRef.current.setTarget(uiState.dimmed, { immediate: true });
+            layersStore.layersLoaded = true;
+            if (store.fp.onFpConfigured)
+                store.fp.onFpConfigured();
+            loadLayersImages();
+        });
+        return () => {
+            cancelled = true;
+            cleanupRef.current?.();
+            cleanupRef.current = null;
+            dimAnimatorRef.current?.stop();
+            dimAnimatorRef.current = null;
+            setMapScene(undefined);
+            resetLayerRenderCache();
+        };
+    }, []);
+    // Dimming follows the same signal the imperative path used: `uiState.dimmed` is computed from the
+    // highlighted booths, the open search, and pathway-only mode, so this is what makes searching dim
+    // the venue behind the results.
+    useReaction(() => uiState.dimmed, (targetDim) => {
+        dimAnimatorRef.current?.setTarget(targetDim);
+    });
+    // The one SDK method that reads the viewport rather than the camera. Installed for as long as the
+    // plan is mounted, and read lazily: the conversions are published from inside `<Renderer>`, which
+    // is later than this effect, and a host only ever calls this once the plan is up.
+    useEffect(() => {
+        store.fp.getCenterCoordinates = () => centerCoordinates(elRef.current);
+    }, []);
+    // Wayfinding and markers fill layers `configAll` put in the scene, so they can only start once the
+    // scene exists — and the scene is all either needs: layout and picking reach them through the
+    // handlers their own defs declare.
+    useEffect(() => {
+        if (!scene)
+            return;
+        const disposeWayfinding = createWayfinding({ scene, store, canvas: elRef });
+        const disposeMarkers = configMarkers({ scene });
+        return () => {
+            disposeWayfinding();
+            disposeMarkers();
+        };
+    }, [scene]);
+    useReaction(() => store.routeStore.currentRouteLayer, () => {
+        const routeLayer = store.routeStore.currentRouteLayer;
+        if (!scene || !routeLayer || s.prevLevel === routeLayer)
+            return;
+        const levelsToSwitch = scene.rootLayer.children.filter((item) => store.layerStore.floors.some((entry) => item.name.includes(entry.name)));
+        const newVisibleName = routeLayer.name;
+        if (!levelsToSwitch.find((l) => l.name === newVisibleName))
+            return;
+        const changed = [];
+        levelsToSwitch.forEach((l) => {
+            if (l.name === newVisibleName && l.hidden !== false) {
+                l.hidden = false;
+                changed.push(l);
+            }
+            if (l.name === s.prevLevel?.name && l.hidden !== true) {
+                l.hidden = true;
+                changed.push(l);
+            }
+        });
+        s.prevLevel = routeLayer;
+        if (changed.length)
+            update(...changed);
+    }, 
+    // The scene reaches this closure only once React commits it, a render after `configAll`
+    // resolves — and `ready` resolves inside that gap, so a host's `selectBooth` on ready switches
+    // the floor while the reaction still sees no scene. Firing on every re-creation applies
+    // whatever floor the store settled on to the scene that has just arrived.
+    { fireImmediately: true }, [scene]);
+    // Guided-tour pathways follow the store's layer visibility — they are stacked apart from the
+    // floors (see config-all), so the floor-switch reaction above never touches them.
+    useReaction(() => store.layerStore.visible, (visible) => {
+        if (!scene)
+            return;
+        const visiblePathways = visible.filter((layer) => isPathwayLayer(layer.name));
+        const children = scene.rootLayer.children;
+        const changed = [];
+        for (const child of children) {
+            if (!isPathwayLayer(child.name))
+                continue;
+            const hidden = !visiblePathways.find((layer) => layer.name === child.name);
+            if (child.hidden === hidden)
+                continue;
+            child.hidden = hidden;
+            changed.push(child);
+        }
+        if (changed.length)
+            update(...changed);
+    }, 
+    // Same gap as the floor switch above: a pathway toggled before the scene commits is applied
+    // once it does.
+    { fireImmediately: true }, [scene]);
+    // Traffic wants the scene once the layers have loaded; both flags are observed through their own
+    // observer so the hooks' effects re-run when they flip — the render below tracks only what its
+    // own JSX reads.
+    const trafficReady = useObserver(() => layersStore.layersLoaded);
+    const buildRouteEnabled = useObserver(() => Boolean(uiState.buildRoute));
+    useBuildRoute({ enabled: trafficReady && buildRouteEnabled, scene });
+    // Bus/transport routing is opt-in (see FloorPlanFlags.busRoutes): without the flag we skip the
+    // routes fetch entirely so plans without transit routes don't pay for a probe request.
+    const busRoutesEnabled = data.busRoutes ?? false;
+    useManageTraffic({
+        permission: trafficReady && busRoutesEnabled,
+        scene,
+        dataJsonUrl: `https://${TRAFFIC_API_HOST}/v1/routes?expo=${settings.EXPO}`,
+        websocketUrl: `wss://${TRAFFIC_API_HOST}/locations?expo=${settings.EXPO}`,
+    });
+    // Observed rather than plain, because half the renderer's configuration below is store state:
+    // how far the plan may be zoomed, where the camera may look, whether it may be turned, and which
+    // part of the canvas is left clear by the surrounding UI.
+    return useObserver(() => {
+        if (!scene)
+            return null;
+        return (_jsxs(Renderer, { debug: isDebug, style: { width: '100%', height: '100%' }, ref: elRef, className: classNames({ map: true }), scene: scene, maxZoom: maxZoomFor(scene), 
+            // Shared with the map view, so the plan tilts the same amount in either one.
+            maxPitch: uiState.maxPitch, 
+            // Radio-mode floors bound the camera to whichever one is showing, so a plan cannot be
+            // dragged off into empty space. Null means the venue does not bound it.
+            bounds: layersStore.bounds, controls: {
+                roll: uiState.rollEnabled,
+                pitch: uiState.pitchEnabled,
+                // The same step as the zoom-in button.
+                zoom: { dblclick: ZOOM_IN_FACTOR },
+            }, smoothTime: smoothTimeFor(), 
+            // Where the plan is framed: the canvas minus whatever the header and the bottom sheet
+            // cover. Distinct from `zoomTo`'s `within`, which only steers a single command.
+            visibleRect: uiState.canvasVisibleRectPx, 
+            // Clicks that land on a booth go to the booth layer's own handler; this is the other half —
+            // everything that missed, which still has to publish coordinates and deselect.
+            onPointerMissed: clearSelection, children: [_jsx(MapCamera, {}), _jsx(MapViewport, {}), isDebug && _jsx(MapCursorCoords, { canvas: elRef })] }));
+    });
+}

package/dist/esm/components/Map/MapCamera.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Everything that moves the plan's camera on the store's say-so, and the camera itself handed out to
+ * the SDK that lives outside React.
+ *
+ * Rendered **inside** `<Renderer>`, which is what lets it hold the camera: the renderer publishes it
+ * through a hook, and a hook only resolves in a component R3F has mounted under the canvas. That is
+ * the whole reason `Map` is split in two — the outer half watches the stores and builds the scene,
+ * this half drives what the stores ask for. The plan's coordinate conversions go out the same way
+ * but from `MapViewport`, which the MapLibre view mounts too.
+ *
+ * Each of the store's command flags is a one-shot: it is read, acted on, and cleared, exactly as the
+ * imperative map read them. None of them check for MapLibre any more — `Layout` unmounts the plan
+ * entirely in that mode, so there is nothing here to guard.
+ * @returns Nothing; this renders no scene node.
+ */
+export declare function MapCamera(): null;
+//# sourceMappingURL=MapCamera.d.ts.map

package/dist/esm/components/Map/MapCamera.js

@@ -0,0 +1,194 @@
+import { Box } from '@expofp/geometry';
+import { useCameraAPI, useCameraGesture, useCameraMoveEnd, useCameraState, } from '@expofp/renderer';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { getFpGeo } from '../../data/fpGeo.js';
+import { getSvgArea } from '../../data/svg.js';
+import store, { uiState } from '../../store';
+import logger from '../../tools/logger';
+import settings from '../../tools/settings';
+import { parseNumberPair } from '../../utils/camera-map-settings';
+import { convertGpsToLocal } from '../../utils/gps';
+import { useOneShotReaction } from '../../utils/mobx';
+import { createMapCamera, setMapCamera } from './camera';
+import { notifyCameraMoved } from './camera-events';
+import { framingRect } from './framing-rect.js';
+import { resetExternalOverlay } from './pointer';
+import { withKiosk } from './with-kiosk.js';
+/**
+ * Everything that moves the plan's camera on the store's say-so, and the camera itself handed out to
+ * the SDK that lives outside React.
+ *
+ * Rendered **inside** `<Renderer>`, which is what lets it hold the camera: the renderer publishes it
+ * through a hook, and a hook only resolves in a component R3F has mounted under the canvas. That is
+ * the whole reason `Map` is split in two — the outer half watches the stores and builds the scene,
+ * this half drives what the stores ask for. The plan's coordinate conversions go out the same way
+ * but from `MapViewport`, which the MapLibre view mounts too.
+ *
+ * Each of the store's command flags is a one-shot: it is read, acted on, and cleared, exactly as the
+ * imperative map read them. None of them check for MapLibre any more — `Layout` unmounts the plan
+ * entirely in that mode, so there is nothing here to guard.
+ * @returns Nothing; this renders no scene node.
+ */
+export function MapCamera() {
+    const api = useCameraAPI();
+    const state = useCameraState();
+    // **Everything below reaches the camera through this ref, and nothing depends on its identity.**
+    // The renderer hands back a fresh commands object and a fresh reader on every render — it
+    // memoizes nothing on purpose — and this component re-renders on far more than a resize: `Map`
+    // observes `canvasVisibleRectPx`, which moves whenever the overlay, the search box or the header
+    // does. Depending on those objects would tear down and rebuild all six reactions below every time
+    // a booth was opened. Held in a ref instead, they are subscribed once and live as long as the map.
+    const cameraRef = useRef({ api, state });
+    const [handle] = useState(() => createMapCamera(cameraRef));
+    useLayoutEffect(() => {
+        cameraRef.current = { api, state };
+    });
+    // Handed out to the parts of the SDK that are not components — the kiosk store, the route store,
+    // and `RendererService`'s camera readings. Published once: the handle reads through the ref, so it
+    // never goes stale and never needs replacing.
+    useEffect(() => {
+        setMapCamera(handle);
+        return () => setMapCamera(undefined);
+    }, [handle]);
+    // The kiosk idle timer, kept alive while the visitor is moving the plan themselves. Their own hand
+    // only: the idle reset restores the kiosk's home framing, and counting that as activity would
+    // re-arm the timer it had just fired.
+    useCameraGesture(() => resetExternalOverlay());
+    // The SDK-side movement signal the kiosk setup screen listens to — `navigation:change` in the
+    // imperative renderer, which fired once per movement, not once per frame. Once the movement has
+    // come to rest, so the screen records the framing the plan was left at, and for a command as
+    // readily as for a drag: the operator frames the home view with the zoom buttons too, and those
+    // reach the camera from the store rather than from the panel.
+    useCameraMoveEnd(() => notifyCameraMoved());
+    // The zoom buttons, and the nudge a floor change gives the plan.
+    useOneShotReaction(() => uiState.zoomBy, (factor) => {
+        if (!factor)
+            return;
+        void cameraRef.current.api.zoomBy(factor);
+        uiState.zoomBy = null;
+    }, []);
+    useOneShotReaction(() => uiState.rollReset, (reset) => {
+        if (!reset)
+            return;
+        void cameraRef.current.api.reset({ roll: true });
+        uiState.rollReset = false;
+    }, []);
+    useOneShotReaction(() => uiState.centerMap, (center) => {
+        if (!center)
+            return;
+        // Naming an axis explicitly is what leaves the others alone, so this returns the zoom during a
+        // search and moves nothing at all otherwise — which is what the imperative map did.
+        void cameraRef.current.api.reset({
+            zoom: Boolean(uiState.list.type === 'search' && uiState.list.text),
+        });
+        uiState.centerMap = false;
+    }, []);
+    useOneShotReaction(() => uiState.moveToRect, (rect) => {
+        if (!rect)
+            return;
+        const { width, height } = rect.size;
+        // An unbounded or empty rect is nothing to frame; both turn up while a route is still being
+        // assembled.
+        if (width > 0 && height > 0 && Number.isFinite(width) && Number.isFinite(height)) {
+            // The store may name the padding along with the rect — Fit-to-screen resolves an authored
+            // viewbox to zero, so the fit lands on the initial view instead of a looser one.
+            zoomToBox(cameraRef.current.api, rect, uiState.moveToRectPaddingPercent ?? undefined);
+        }
+        uiState.moveToRect = null;
+        uiState.moveToRectPaddingPercent = null;
+    }, []);
+    useOneShotReaction(() => uiState.moveToBooths, (booths) => {
+        if (!booths)
+            return;
+        logger.log('watched moveToBooths', booths);
+        const rects = booths.filter((booth) => booth.rect).map((booth) => booth.rect);
+        if (rects.length)
+            zoomToBox(cameraRef.current.api, Box.fromUnion(...rects));
+        uiState.moveToBooths = null;
+    }, []);
+    // The map parameters a host may set through the URL. Two of them — how long a zoom takes and
+    // whether the plan may be turned — are renderer configuration rather than commands, so they are
+    // props on `<Renderer>` and are not read here.
+    //
+    // Not a one-shot command, but the same timing: the first run applies whatever the plan starts
+    // with, a frame later, once there is a camera to apply it to. `fireImmediately` on a plain
+    // reaction runs before that and is spent on nothing.
+    useOneShotReaction(() => uiState.mapSettings, ({ center, centerxy, bearing, pitchdegrees, z }) => {
+        try {
+            if (z)
+                store.fp.activateFloor({ name: z });
+            // A parsed pair is already known to be two finite numbers, so the plan origin (0, 0) pans
+            // like any other point instead of reading as "unset".
+            const coords = planCoordinates(center, centerxy);
+            if (coords)
+                void cameraRef.current.api.panTo(coords);
+            if (bearing !== undefined && Number.isFinite(bearing)) {
+                void cameraRef.current.api.rollTo(bearing);
+            }
+            if (pitchdegrees != undefined && Number.isFinite(pitchdegrees)) {
+                void cameraRef.current.api.pitchTo(pitchdegrees, { immediate: !uiState.animatePitch });
+            }
+        }
+        catch (error) {
+            logger.error('Error in mapSettings reaction', error);
+        }
+    }, []);
+    return null;
+}
+/**
+ * Frames a box of the plan the way this map always has: padded by how much of the venue it covers,
+ * widened to keep a kiosk in view, and held clear of an overlay sat over the plan.
+ * @param api - The camera commands.
+ * @param rect - What to frame, in plan units.
+ * @param paddingPercent - Padding the caller resolved for this frame, overriding the coverage
+ *   rule — how Fit-to-screen says an authored viewbox is already framed. A fraction of the region
+ *   per side, despite the name, which the store field has always carried.
+ */
+function zoomToBox(api, rect, paddingPercent) {
+    void api.zoomTo(withKiosk(rect), {
+        padding: paddingPercent ?? paddingFor(rect, getSvgArea()),
+        // A venue that configured its own maximum zoom is trusted with it; everything else is held to a
+        // factor of ten, so zooming to a single booth does not fill the screen with one wall.
+        maxZoom: Number.isFinite(settings.maxZoom) ? undefined : 10,
+        // Framing only: the plan does not move when a panel opens, but what a command frames into does.
+        within: framingRect(),
+    });
+}
+/**
+ * How much margin to leave around a box, as a fraction of the framing region on each side.
+ *
+ * A box covering a good part of the venue is already close to the whole view and needs little; a
+ * single booth is easier to place if it is left small in the middle of the screen.
+ * @param rect - The box to frame.
+ * @param venue - The whole venue, which its size is judged against.
+ * @returns The fraction.
+ */
+function paddingFor(rect, venue) {
+    if (!rect || !venue)
+        return 0;
+    return (rect.area / venue.area > 0.1 ? 15 : 25) / 100;
+}
+/**
+ * Where a `center` or `centerxy` map parameter points, in plan units.
+ * @param center - A latitude and longitude pair, if the host gave one.
+ * @param centerxy - A pair of plan coordinates, if it gave those instead.
+ * @returns The point, or `undefined` when neither was given.
+ */
+function planCoordinates(center, centerxy) {
+    if (center) {
+        const pair = parseNumberPair(center);
+        if (!pair)
+            return undefined;
+        const config = getFpGeo()?.properties?.config;
+        if (!config)
+            throw new Error('Map center given in GPS, but the plan has no GPS config');
+        // The conversion's whole job is to land in plan coordinates, so this is where they begin.
+        return (convertGpsToLocal({ lat: pair[0], lng: pair[1] }, config) ??
+            undefined);
+    }
+    const pair = parseNumberPair(centerxy);
+    if (!pair)
+        return undefined;
+    // `centerxy` is documented to the host as plan coordinates; this is where they arrive.
+    return { x: pair[0], y: pair[1] };
+}

package/dist/esm/components/Map/MapCursorCoords.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+/**
+ * Publishes the plan coordinates under the pointer to the debug panel. Debug builds only.
+ *
+ * Rendered inside `<Renderer>`: `useViewport` and the panel resolve nowhere else, and each view
+ * passes its own canvas.
+ * @param props - The canvas the plan draws on.
+ * @returns Nothing; this renders no scene node.
+ */
+export declare function MapCursorCoords(props: {
+    canvas: RefObject<HTMLCanvasElement | null>;
+}): null;
+//# sourceMappingURL=MapCursorCoords.d.ts.map

package/dist/esm/components/Map/MapCursorCoords.js

@@ -0,0 +1,61 @@
+import { useDebugPanel, useViewport } from '@expofp/renderer';
+import { useCallback, useEffect, useEffectEvent } from 'react';
+import store from '../../store';
+import { LayerMode } from '../../store/LayerStore';
+/** Plan units are large, so hundredths already sit below a pixel. */
+const PRECISION = 2;
+/**
+ * Publishes the plan coordinates under the pointer to the debug panel. Debug builds only.
+ *
+ * Rendered inside `<Renderer>`: `useViewport` and the panel resolve nowhere else, and each view
+ * passes its own canvas.
+ * @param props - The canvas the plan draws on.
+ * @returns Nothing; this renders no scene node.
+ */
+export function MapCursorCoords(props) {
+    const { canvas } = props;
+    const viewport = useViewport();
+    const setDebugPanel = useDebugPanel();
+    const clear = useCallback(() => setDebugPanel('cursor', undefined), [setDebugPanel]);
+    const publish = useEffectEvent((event) => {
+        // One reading rather than one per finger: a two-pointer gesture alternates between them.
+        if (!event.isPrimary)
+            return;
+        // `offsetX`/`offsetY` are canvas coordinates by definition, and cost no layout flush.
+        const point = viewport.canvasToPlan({ x: event.offsetX, y: event.offsetY });
+        setDebugPanel('cursor', point ? reading(point, activeLayerName()) : undefined);
+    });
+    useEffect(() => {
+        const element = canvas.current;
+        if (!element)
+            return;
+        const onMove = (event) => publish(event);
+        const onLeave = () => clear();
+        element.addEventListener('pointermove', onMove);
+        element.addEventListener('pointerleave', onLeave);
+        return () => {
+            element.removeEventListener('pointermove', onMove);
+            element.removeEventListener('pointerleave', onLeave);
+        };
+    }, [canvas, clear]);
+    return null;
+}
+/**
+ * The layer the reading is on.
+ * @returns The layer's name, or nothing while no layer is active.
+ */
+function activeLayerName() {
+    const active = store.layerStore.layers.find((layer) => layer.visible && (layer.mode === LayerMode.TurnedOn || layer.mode === LayerMode.TurnedOff));
+    return active?.name || null;
+}
+/**
+ * The readout line. A string rather than a pair, so the panel's `Object.is` check skips a move that
+ * rounds to the same reading.
+ * @param point - Where the pointer is, in plan coordinates.
+ * @param layer - The layer it is on.
+ * @returns The line to publish.
+ */
+function reading(point, layer) {
+    const pair = `[${point.x.toFixed(PRECISION)}, ${point.y.toFixed(PRECISION)}]`;
+    return layer ? `${pair} · layer ${layer}` : pair;
+}

package/dist/esm/components/Map/MapViewport.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Hands the plan's coordinate conversions out to the SDK that lives outside React.
+ *
+ * Rendered **inside** `<Renderer>`, which is what lets it hold them: `useViewport` only resolves in
+ * a component R3F has mounted under the canvas. A component of its own rather than another job for
+ * `MapCamera` because the conversions outlive that split — they depend on the scene's `Space` and
+ * the camera three is drawing with, and on nothing that steers the camera, so they are just as
+ * available in external mode, where MapLibre owns the camera and `MapCamera` is not mounted at all.
+ * @returns Nothing; this renders no scene node.
+ */
+export declare function MapViewport(): null;
+//# sourceMappingURL=MapViewport.d.ts.map

package/dist/esm/components/Map/MapViewport.js

@@ -0,0 +1,29 @@
+import { useViewport } from '@expofp/renderer';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createMapViewport, setMapViewport } from './viewport';
+/**
+ * Hands the plan's coordinate conversions out to the SDK that lives outside React.
+ *
+ * Rendered **inside** `<Renderer>`, which is what lets it hold them: `useViewport` only resolves in
+ * a component R3F has mounted under the canvas. A component of its own rather than another job for
+ * `MapCamera` because the conversions outlive that split — they depend on the scene's `Space` and
+ * the camera three is drawing with, and on nothing that steers the camera, so they are just as
+ * available in external mode, where MapLibre owns the camera and `MapCamera` is not mounted at all.
+ * @returns Nothing; this renders no scene node.
+ */
+export function MapViewport() {
+    const viewport = useViewport();
+    // The renderer hands back a fresh conversions object on every render — it memoizes nothing on
+    // purpose — so it is held in a ref and published once, through a handle whose identity never
+    // changes. Same discipline as `MapCamera`, and for the same reason.
+    const viewportRef = useRef({ api: viewport });
+    const [handle] = useState(() => createMapViewport(viewportRef));
+    useLayoutEffect(() => {
+        viewportRef.current = { api: viewport };
+    });
+    useEffect(() => {
+        setMapViewport(handle);
+        return () => setMapViewport(undefined);
+    }, [handle]);
+    return null;
+}

package/dist/esm/components/Map/booth-by-xy.d.ts

@@ -0,0 +1,14 @@
+import type { Booth } from '../../store/BoothStore';
+/**
+ * Starts keeping the hit-test index current with the live plan's stores; the reaction is disposed
+ * with the plan.
+ *
+ * Called from the instance wiring (`floorplan.ready`) rather than run at module scope: the reaction
+ * belongs to one plan, and this module sits inside the store <-> components import cycle — `reaction`
+ * reads its expression the moment it is created, and at module scope that is `boothStore` still in
+ * its temporal dead zone. One binding serves both map modes; the MapLibre path resolves outdoor-PoI
+ * booths through this index too. `fireImmediately` buckets whatever the plan has already loaded.
+ */
+export declare function bindBoothHitTest(): void;
+export default function getBoothIdFromClientXy(clientX: number, clientY: number): Booth | null;
+//# sourceMappingURL=booth-by-xy.d.ts.map