@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Wayfinding.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Wayfinding.scss';
+import classNames from 'classnames';
+import { useObserver } from 'mobx-react-lite';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { DEFAULT_UNITS } from '../constants';
+import data from '../data';
+import { getLayerSvg } from '../data/svg';
+import store, { boothStore, exhibitorStore, uiState } from '../store';
+import { BoothBase, RegularBooth } from '../store/BoothStore';
+import { advanceJourney, currentJourney, currentJourneyLinkUrl, offerExternalNavigation, runningJourneyStage, } from '../store/journey-plan';
+import { getLayerName, Route } from '../store/RouteStore';
+import { getCrossVenueRouteNotFoundMessage } from '../store/venue-selection';
+import settings from '../tools/settings';
+import { calcSpeed } from '../utils/calcSpeed';
+import { calcTravelTime } from '../utils/calcTravelTime';
+import { t } from '../utils/i18n';
+import isMobile from '../utils/is-mobile';
+import { CURRENT_POSITION_POINT_ID, JOURNEY_ENTRANCE_POINT_ID, KIOSK_ANCHOR_POINT_ID, } from '../wayfinding/adapters';
+import EntityList from './EntityList';
+import WayfindingTemplate from './WayfindingTemplate';
+function Wayfinding() {
+    const scrollableRef = useRef(null);
+    const floors = useMemo(() => {
+        const layers = store.routeStore.pathLayers;
+        return layers.map((l, i) => {
+            const next = layers[i + 1];
+            const currentPriority = l.layer?.basePriority ?? 0;
+            const nextPriority = next?.layer?.basePriority ?? 0;
+            const directionToNext = next
+                ? nextPriority < currentPriority
+                    ? 'up'
+                    : 'down'
+                : undefined;
+            return {
+                id: l.id,
+                name: l.layer?.shortName ?? '',
+                description: l.layer?.description,
+                directionToNext,
+            };
+        });
+    }, [store.routeStore.pathLayers]);
+    const [currentFloor, setCurrentFloor] = useState();
+    // Remembers which exhibitor the user picked for a given booth id, so booths shared by
+    // several exhibitors keep the chosen one (the route itself only stores the booth).
+    const [selectedExhibitorByBooth, setSelectedExhibitorByBooth] = useState({});
+    const rememberExhibitor = (option) => {
+        if (!option)
+            return;
+        setSelectedExhibitorByBooth((prev) => ({ ...prev, [option.value]: option }));
+    };
+    useEffect(() => {
+        if (currentFloor)
+            return;
+        setCurrentFloor(floors[0]);
+    }, [store.routeStore.pathLayers, floors]);
+    useEffect(() => {
+        const floor = floors.find((f) => f.description?.toLowerCase() ===
+            store.routeStore.currentRouteLayer?.description?.toLowerCase());
+        floor && setCurrentFloor(floor);
+    }, [store.routeStore.currentRouteLayer, floors]);
+    useEffect(() => {
+        const route = uiState.selectedRoute;
+        if (!route) {
+            uiState.setIsMultiPointRoute(false);
+            return;
+        }
+        const waypointsCount = route.waypoints?.length || 0;
+        const isMulti = waypointsCount > 0;
+        uiState.setIsMultiPointRoute(isMulti);
+    }, [uiState.selectedRoute]);
+    const routeSelected = () => {
+        const { from, to } = uiState.selectedRoute ?? {};
+        return from && to ? true : false;
+    };
+    const mobileFullOverlaySize = () => {
+        return uiState.overlaySize === 'full' ? true : false;
+    };
+    const mobileShowForm = () => {
+        return routeSelected() && !mobileFullOverlaySize() ? true : false;
+    };
+    const determineRouteMode = () => {
+        const route = uiState.selectedRoute;
+        if (!route)
+            return 'none';
+        const waypointsCount = route.waypoints?.length || 0;
+        return waypointsCount > 0 ? 'multi' : 'simple';
+    };
+    useEffect(() => {
+        const mode = determineRouteMode();
+        if (mode === 'multi' && uiState.selectedRoute) {
+            // uiState.setMultiPointRouteList(uiState.selectedRoute);
+        }
+    }, [uiState.selectedRoute]);
+    const options = useMemo(() => {
+        // A set: every booth is checked against it, and a list made that check quadratic.
+        const boothsIDs = new Set();
+        const allBooths = boothStore.booths;
+        const regularBooths = allBooths.filter((booth) => booth instanceof RegularBooth);
+        const otherBooths = allBooths.filter((booth) => !(booth instanceof RegularBooth));
+        let optionsList = [];
+        exhibitorStore.exhibitors.forEach((e) => {
+            for (const booth of e.booths)
+                boothsIDs.add(booth.id);
+            optionsList.push(...e.booths.map((booth) => ({
+                value: booth.id.toString(),
+                label: e.name + ' - ' + booth.fullName,
+                exhibitorId: e.id,
+            })));
+        });
+        otherBooths
+            .filter((booth) => !boothsIDs.has(booth.id))
+            .forEach((booth) => {
+            optionsList.push({
+                value: booth.id.toString(),
+                label: booth.fullName,
+            });
+        });
+        optionsList = optionsList.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }));
+        regularBooths
+            .filter((booth) => !boothsIDs.has(booth.id))
+            .forEach((booth) => {
+            optionsList.push({
+                value: booth.id.toString(),
+                label: booth.fullName,
+            });
+        });
+        return optionsList;
+    }, [exhibitorStore.exhibitors.length, boothStore.booths.length]);
+    useEffect(() => {
+        const toBoothId = uiState.selectedRoute?.to?.id?.toString();
+        const selectedExhibitor = store.routeStore.currentRouteExhibitor;
+        if (!selectedExhibitor)
+            return;
+        const exhibitorOption = options.find((option) => option.value === toBoothId && option.exhibitorId === selectedExhibitor.id);
+        store.routeStore.currentRouteExhibitor = null;
+        rememberExhibitor(exhibitorOption);
+    }, [store.routeStore.currentRouteExhibitor, uiState.selectedRoute?.to?.id, options]);
+    return useObserver(() => {
+        const mode = determineRouteMode();
+        if (mode === 'multi') {
+            return (_jsxs("div", { className: classNames('main-wayfinding', {
+                    hidden: uiState.kiosk && uiState.selectedRoute?.from && uiState.selectedRoute?.to,
+                }), children: [uiState.routeDescription && (_jsx("div", { className: "efp-wayfinding-description", children: uiState.routeDescription })), _jsx(EntityList, { updatedScrollableRef: scrollableRef })] }));
+        }
+        // ArbitraryPoint (kiosk anchor / CP-derived) sits alongside real booths in the dropdown so the
+        // Autocomplete can render its `name` as the selected-from / selected-to label. It's a no-op
+        // pick (see onSelectionClick).
+        const arbitraryFrom = uiState.selectedRoute?.from && !(uiState.selectedRoute.from instanceof BoothBase)
+            ? uiState.selectedRoute.from
+            : null;
+        const arbitraryTo = uiState.selectedRoute?.to && !(uiState.selectedRoute.to instanceof BoothBase)
+            ? uiState.selectedRoute.to
+            : null;
+        const allOptions = [];
+        if (arbitraryFrom)
+            allOptions.push({ value: arbitraryFrom.id, label: arbitraryFrom.name });
+        if (arbitraryTo && arbitraryTo.id !== arbitraryFrom?.id)
+            allOptions.push({ value: arbitraryTo.id, label: arbitraryTo.name });
+        allOptions.push(...options);
+        const onSelectionClick = (option, isFrom = true) => {
+            const id = option?.value;
+            if (id === CURRENT_POSITION_POINT_ID ||
+                id === KIOSK_ANCHOR_POINT_ID ||
+                id === JOURNEY_ENTRANCE_POINT_ID)
+                return;
+            const booth = boothStore.booths.find((b) => b.id.toString() === id) ?? null;
+            const { from, to } = uiState.selectedRoute ?? {};
+            rememberExhibitor(option);
+            if (isFrom)
+                store.routeStore.selectRoute(new Route(booth, to ?? null));
+            else
+                store.routeStore.selectRoute(new Route(from ?? null, booth));
+        };
+        // A plan states its units once, in the SVG; they cannot change under us.
+        const units = getLayerSvg()?.getAttribute('units') || DEFAULT_UNITS;
+        const travelTimeOf = (distance) => {
+            const seconds = calcTravelTime(distance, calcSpeed(units));
+            return { seconds, text: seconds < 60 ? '< 1 min' : `~ ${Math.round(seconds / 60)} min` };
+        };
+        const distanceText = (distance) => Math.round(distance) + ` ${units}`;
+        const getWayInformation = (distance) => {
+            const info = [];
+            const { seconds, text: travelTime } = travelTimeOf(distance);
+            const est = new Date();
+            est.setMinutes(est.getMinutes() + seconds / 60);
+            const estTotal = est.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            info.push({
+                title: t('Travel time'),
+                text: travelTime,
+            }, {
+                title: t('Distance'),
+                text: distanceText(distance),
+            }, {
+                title: t('Est arrival'),
+                text: estTotal,
+            });
+            return info;
+        };
+        const onSwitch = () => {
+            const { from, to } = uiState.selectedRoute ?? {};
+            // CP as destination is degenerate (the user is always "at" their live position), so
+            // don't allow swapping the live-user anchor onto the TO side.
+            if (from?.id === CURRENT_POSITION_POINT_ID)
+                return;
+            store.routeStore.selectRoute(new Route(to ?? null, from ?? null));
+        };
+        const routeNotFound = uiState.selectedRoute?.from &&
+            uiState.selectedRoute?.to &&
+            !store.routeStore.routeLines.length;
+        // Venue-model plans name the unconnected venues instead of the generic
+        // "Route not found" when the endpoints resolve to different venues (R10).
+        const routeNotFoundMessage = routeNotFound
+            ? getCrossVenueRouteNotFoundMessage(store.venueStore, getLayerName(uiState.selectedRoute?.from), getLayerName(uiState.selectedRoute?.to), t('venues are not connected'))
+            : undefined;
+        // A route the graph cannot build between two geo-anchored venues becomes a
+        // journey instead of a dead end (ADR-0010). The same derivation feeds the
+        // campus map's connector, so both surfaces present one journey.
+        const journey = currentJourney();
+        const routeDistance = store.routeStore.routeDistance ?? 0;
+        // The QR belongs on the screens the visitor walks away from — a kiosk, and
+        // a desktop planning the visit ahead of it. On the phone the journey is
+        // already where it needs to be.
+        const journeyLinkUrl = journey && (uiState.kiosk || !isMobile) ? (currentJourneyLinkUrl() ?? undefined) : undefined;
+        function getFromValue() {
+            const fromBoothId = uiState.selectedRoute?.from?.id?.toString();
+            const chosen = fromBoothId ? selectedExhibitorByBooth[fromBoothId] : undefined;
+            return allOptions.find((option) => chosen
+                ? option.value === chosen.value && option.label === chosen.label
+                : option.value === fromBoothId);
+        }
+        function getToValue() {
+            const toBoothId = uiState.selectedRoute?.to?.id?.toString();
+            const chosen = toBoothId ? selectedExhibitorByBooth[toBoothId] : undefined;
+            return allOptions.find((option) => chosen
+                ? option.value === chosen.value && option.label === chosen.label
+                : option.value === toBoothId);
+        }
+        const showInfo = !!(!data.hideWayInformation &&
+            settings.EXPO !== 'bloomberg' &&
+            uiState.selectedRoute?.from &&
+            uiState.selectedRoute?.to);
+        return (_jsx("div", { className: classNames('main-wayfinding', {
+                hidden: uiState.kiosk && uiState.selectedRoute?.from && uiState.selectedRoute?.to,
+            }), children: _jsx(WayfindingTemplate, { showForm: !mobileShowForm(), showInfo: showInfo, floors: floors, currentFloor: currentFloor, onClickFloor: (floor) => {
+                    const pathLayer = store.routeStore.pathLayers.find((pl) => pl.id === floor.id);
+                    if (pathLayer?.layer)
+                        store.layerStore.updateVisibility(pathLayer.layer, true);
+                }, routeFound: !routeNotFound, routeNotFoundMessage: routeNotFoundMessage, journey: journey, journeyStage: runningJourneyStage(), journeyPlanUnits: units, journeyLegWalk: `${distanceText(routeDistance)} · ${travelTimeOf(routeDistance).text}`, journeyLinkUrl: journeyLinkUrl, onExternalHandoff: (event) => {
+                    // The host app sees the handoff first; the SDK's own default is the
+                    // link the panel already carries, so an embedding that registered
+                    // nothing — every existing one — opens Maps exactly as before.
+                    if (journey && offerExternalNavigation(journey))
+                        event.preventDefault();
+                    // Either way the visitor has left for the street: what they come
+                    // back to is the arrival leg, not the map they are looking at now.
+                    advanceJourney('handoff');
+                }, options: allOptions, 
+                // value alone isn't unique — the same booth can be listed under multiple exhibitors.
+                getOptionKey: (option) => `${option.value}-${option.exhibitorId ?? ''}`, fromValue: getFromValue(), toValue: getToValue(), onChangeFrom: (value) => onSelectionClick(value, true), onChangeTo: (value) => onSelectionClick(value, false), onSwitch: onSwitch, infoItems: getWayInformation(routeDistance), infoAccessible: store.routeStore.onlyAccessible, showAccessible: store.routeStore.showAccessible, onAccessibleCheck: (checked) => store.routeStore.setOnlyAccessible(checked), onClickInfo: () => store.showOverlay(), routeUrl: uiState.routeQRCodeUrl, isKiosk: uiState.kiosk, showDetailsIcon: uiState.showRouteInstantly, onDetailsIconClick: () => {
+                    const { from, to } = uiState.selectedRoute || {};
+                    // ArbitraryPoint has no booth details to surface, so the panel only opens when at
+                    // least one endpoint is a real booth.
+                    // Every concrete BoothBase is a Booth (the base class is abstract); the
+                    // instanceof pair narrows to the base, so the union is restated here.
+                    const target = ((to instanceof BoothBase ? to : null) ??
+                        (from instanceof BoothBase ? from : null));
+                    if (target) {
+                        const boothId = target.id.toString();
+                        const chosen = selectedExhibitorByBooth[boothId] ?? allOptions.find((o) => o.value === boothId);
+                        const exhibitor = chosen?.exhibitorId != null
+                            ? target.exhibitors.find((ex) => ex.id === chosen.exhibitorId)
+                            : target.exhibitors.find((ex) => chosen?.label.includes(ex.name));
+                        uiState.details = exhibitor || target;
+                    }
+                } }) }));
+    });
+}
+function WayfindingWrapper() {
+    return useObserver(() => settings.wayfinding &&
+        !uiState.menu &&
+        uiState.selectedRoute &&
+        uiState.list.type !== 'route-planner' && _jsx(Wayfinding, {}));
+}
+export default WayfindingWrapper;

package/dist/esm/components/WayfindingFloorSelectorContainer.d.ts

@@ -0,0 +1,5 @@
+import { type WayfindingFloorSelectorProps } from '@expofp/ui';
+import React from 'react';
+declare const WayfindingFloorSelectorContainer: ({ floors, floorSelectionLabel, ...rest }: WayfindingFloorSelectorProps) => React.JSX.Element;
+export default WayfindingFloorSelectorContainer;
+//# sourceMappingURL=WayfindingFloorSelectorContainer.d.ts.map

package/dist/esm/components/WayfindingFloorSelectorContainer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { WayfindingFloorSelector } from '@expofp/ui';
+import { t } from '../utils/i18n';
+const WayfindingFloorSelectorContainer = ({ floors, floorSelectionLabel, ...rest }) => {
+    const floorsWithLabels = floors.map((floor) => ({
+        ...floor,
+        ariaLabel: floor.ariaLabel ?? floor.description ?? t('Floor {{name}}', { name: floor.name }),
+    }));
+    return (_jsx(WayfindingFloorSelector, { ...rest, floors: floorsWithLabels, floorSelectionLabel: floorSelectionLabel ?? t('Floor selection') }));
+};
+export default WayfindingFloorSelectorContainer;

package/dist/esm/components/WayfindingTemplate.d.ts

@@ -0,0 +1,66 @@
+import './WayfindingTemplate.scss';
+import { type WayfindingFloorSelectorProps } from '@expofp/ui';
+import React from 'react';
+import type { Journey, JourneyStage } from '../journey';
+import type { RouteOption } from '../store/types';
+import { type JourneyPanelProps } from './JourneyPanel';
+import { type WayInformationItem } from './WayInformation';
+export interface WayfindingTemplateProps {
+    options: RouteOption[];
+    fromValue?: RouteOption;
+    toValue?: RouteOption;
+    showForm?: boolean;
+    showInfo?: boolean;
+    showAccessible?: boolean;
+    onlyAccessible?: boolean;
+    routeFound?: boolean;
+    /** Override for the route-failure message (e.g. names unconnected venues). */
+    routeNotFoundMessage?: string;
+    /**
+     * The journey planned for an unroutable venue pair. Present only where the
+     * graph cannot route and both venues are geo-anchored, so it stands in for
+     * the route-failure message rather than adding to it.
+     */
+    journey?: Journey | null;
+    /** Which stage of the journey the visitor is on — see {@link JourneyPanelProps.stage}. */
+    journeyStage?: JourneyStage | null;
+    /** The plan's units, for the journey's street leg — see {@link JourneyPanelProps.planUnits}. */
+    journeyPlanUnits?: string;
+    /** The routed walk of the journey's current leg — see {@link JourneyPanelProps.legWalk}. */
+    journeyLegWalk?: string;
+    /**
+     * The journey's deep link, shown as a QR beside it. Set on the surfaces the
+     * visitor leaves behind — kiosk and desktop — so the journey can travel to
+     * the phone that will actually walk it.
+     */
+    journeyLinkUrl?: string;
+    /**
+     * The journey's external handoff, offered to the host app before the SDK
+     * opens the provider URL — see {@link JourneyPanelProps.onExternalHandoff}.
+     */
+    onExternalHandoff?: JourneyPanelProps['onExternalHandoff'];
+    infoItems?: WayInformationItem[];
+    infoAccessible: boolean;
+    floors?: WayfindingFloorSelectorProps['floors'];
+    currentFloor?: {
+        id: number;
+        name: string;
+    };
+    routeUrl?: string;
+    isKiosk?: boolean;
+    onChangeFrom?: (val: RouteOption | undefined) => void;
+    onChangeTo?: (val: RouteOption | undefined) => void;
+    getOptionKey?: (option: RouteOption) => string;
+    onSwitch?: () => void;
+    onClickInfo?: () => void;
+    onClickFloor?: (data: {
+        id: number;
+        name: string;
+    }) => void;
+    onAccessibleCheck: (checked: boolean) => void;
+    showDetailsIcon?: boolean;
+    onDetailsIconClick?: () => void;
+}
+declare const WayfindingTemplate: React.FC<WayfindingTemplateProps>;
+export default WayfindingTemplate;
+//# sourceMappingURL=WayfindingTemplate.d.ts.map

package/dist/esm/components/WayfindingTemplate.js

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './WayfindingTemplate.scss';
+import { ToggleSwitch } from '@expofp/ui';
+import classNames from 'classnames';
+import { t } from '../utils/i18n';
+import Autocomplete from './AutocompleteContainer';
+import JourneyPanel from './JourneyPanel';
+import RouteQR from './RouteQR';
+import WayfindingFloorSelector from './WayfindingFloorSelectorContainer';
+import WayInformation from './WayInformation';
+const WayfindingTemplate = ({ options = [], fromValue, toValue, showForm = true, showAccessible = false, showInfo = false, routeFound = false, routeNotFoundMessage, journey, journeyStage, journeyPlanUnits, journeyLegWalk, journeyLinkUrl, onExternalHandoff, infoItems = [], infoAccessible, floors = [], currentFloor, routeUrl, isKiosk, onChangeFrom, onChangeTo, getOptionKey, onSwitch, onClickInfo, onClickFloor, onAccessibleCheck, showDetailsIcon, onDetailsIconClick, }) => {
+    return (_jsxs("div", { className: classNames('efp-wayfinding', { isCollapsed: !showForm }), children: [showForm && (_jsxs("div", { className: "efp-wayfinding__top", children: [_jsxs("div", { className: "efp-wayfindingForm", children: [_jsxs("div", { className: "efp-wayfindingForm__icons", children: [_jsx("div", { className: "efp-wayfindingForm__from", children: _jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z", fill: "white" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 13.375C11.4162 13.375 13.375 11.4162 13.375 9C13.375 6.58375 11.4162 4.625 9 4.625C6.58375 4.625 4.625 6.58375 4.625 9C4.625 11.4162 6.58375 13.375 9 13.375ZM9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16Z", style: { fill: 'var(--efp-wf-from-color, #30AFEB)' } })] }) }), _jsx("div", { className: "efp-wayfindingForm__to", children: _jsxs("svg", { width: "18", height: "25", viewBox: "0 0 18 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9 24.1571L10.5475 22.267C11.0023 21.7114 11.4571 21.1656 11.9041 20.6291C13.2939 18.9611 14.6088 17.3829 15.6182 15.8814C16.988 13.8436 18 11.668 18 9.125C18 4.09562 14.0267 0 9 0C3.97332 0 0 4.09562 0 9.125C0 11.668 1.01202 13.8436 2.38182 15.8814C3.39116 17.3829 4.70613 18.9611 6.09588 20.6291C6.54291 21.1656 6.99767 21.7114 7.45249 22.267L9 24.1571Z", fill: "white" }), _jsx("path", { d: "M9 2C5.11111 2 2 5.16667 2 9.125C2 13.0833 5.11111 16.25 9 21C12.8889 16.25 16 13.0833 16 9.125C16 5.16667 12.8889 2 9 2ZM9 6.75C10.2911 6.75 11.3333 7.81083 11.3333 9.125C11.3333 10.4392 10.2911 11.5 9 11.5C7.70889 11.5 6.66667 10.4392 6.66667 9.125C6.66667 7.81083 7.70889 6.75 9 6.75Z", style: { fill: 'var(--efp-wf-to-color, #FF9E2C)' } })] }) }), _jsx("div", { className: "efp-wayfindingForm__dots", children: _jsxs("svg", { width: "4", height: "18", viewBox: "0 0 4 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "2", cy: "2", r: "2", fill: "#DCDFE9" }), _jsx("circle", { cx: "2", cy: "16", r: "2", fill: "#DCDFE9" })] }) })] }), _jsxs("div", { className: "efp-wayfindingForm__controls", children: [_jsx("div", { style: { marginBottom: 10 }, children: _jsx(Autocomplete, { placeholder: t('Choose starting point'), options: options, value: fromValue, onChange: onChangeFrom, getOptionKey: getOptionKey }) }), _jsx("div", { children: _jsx(Autocomplete, { placeholder: t('Choose destination point'), options: options, value: toValue, onChange: onChangeTo, getOptionKey: getOptionKey }) })] }), _jsxs("div", { className: "efp-wayfindingForm__actions", children: [_jsx("button", { type: "button", className: "efp-wayfindingForm__switch", onClick: onSwitch }), showDetailsIcon && (_jsx("button", { type: "button", className: "efp-wayfindingForm__details", onClick: onDetailsIconClick }))] })] }), showAccessible && (_jsx("div", { className: "efp-wayfindingForm__accessible", children: _jsx(ToggleSwitch, { name: "onlyAccessible", label: t('Accessible'), value: infoAccessible, onChange: (value) => onAccessibleCheck(value) }) }))] })), floors.length > 1 && (_jsx(WayfindingFloorSelector, { floors: floors, value: currentFloor, onSelect: onClickFloor })), showInfo && (_jsxs("div", { className: "efp-wayfindingInfo", children: [routeFound && !journey && (_jsxs(_Fragment, { children: [_jsx(WayInformation, { items: infoItems, accessible: infoAccessible, onClick: onClickInfo }), isKiosk && _jsx(RouteQR, { url: routeUrl })] })), journey ? (_jsx(JourneyPanel, { journey: journey, stage: journeyStage, planUnits: journeyPlanUnits, legWalk: routeFound ? journeyLegWalk : undefined, deepLinkUrl: journeyLinkUrl, onExternalHandoff: onExternalHandoff })) : (!routeFound && (_jsx("div", { className: "efp-wayfindingError", children: routeNotFoundMessage ?? t('Route not found') })))] }))] }));
+};
+export default WayfindingTemplate;

package/dist/esm/components/Ws.d.ts

@@ -0,0 +1,5 @@
+import './Ws.scss';
+import React from 'react';
+export default _default;
+declare function _default(): React.JSX.Element | null;
+//# sourceMappingURL=Ws.d.ts.map

package/dist/esm/components/Ws.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @eslint-react/no-create-ref */
+/* eslint-disable @eslint-react/exhaustive-deps, no-constant-condition, @typescript-eslint/consistent-type-imports */
+// @ts-nocheck
+import './Ws.scss';
+import classNames from 'classnames';
+import { reaction } from 'mobx';
+import { useLocalStore, useObserver } from 'mobx-react-lite';
+import React, { createRef, useCallback } from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import store, { exhibitorStore, uiState } from '../store';
+import { trackWsExhibitorClick } from '../tools/gtag';
+import { remsToPixels, shuffle } from '../utils';
+import { loadImagesInBatchesById } from '../utils/loadImagesInBatches';
+import { useInit } from '../utils/mobx';
+const DELAY = 8000;
+const Ws = React.memo(() => {
+    const s = useLocalStore(() => ({
+        el: null,
+        all: [],
+        adv: [],
+        keySeq: 0,
+        index: 0,
+        batchStart: 0,
+        imgByExhibitorId: new Map(),
+        batchSize: 100,
+        loading: false,
+        leftToNextLoad: 0,
+        timeoutId: 0,
+        get sectionStyle() {
+            const { wsStarted, wsPosition } = uiState;
+            const isTop = wsPosition === 'top';
+            const style = {
+                right: 0,
+                width: '100%',
+                opacity: wsStarted ? 1 : 0,
+            };
+            if (isTop) {
+                style.top = 0;
+            }
+            else {
+                style.bottom = 0;
+            }
+            return style;
+        },
+    }));
+    const setupNext = useCallback((rebuild = false) => {
+        // A rebuild re-derives the current batch for a new width; only a rotation advances the
+        // carousel.
+        const prev = rebuild ? s.adv : [];
+        if (rebuild)
+            s.index = s.batchStart;
+        else
+            s.batchStart = s.index;
+        const rectWidth = s.el?.getBoundingClientRect().width ?? 0;
+        const maxWidth = rectWidth - remsToPixels(0.3) * 2;
+        let filledWidth = 0;
+        const adv = [];
+        do {
+            const e = s.all[s.index % s.all.length];
+            const img = s.imgByExhibitorId.get(e.id);
+            if (!img)
+                break;
+            const width = (img.width * uiState.wsImageHeightPx) / img.height + 20;
+            if (filledWidth + width > maxWidth && adv.length)
+                break;
+            filledWidth += width;
+            // An unchanged slot keeps its key and node, so a rebuild reconciles to the same elements
+            // instead of remounting — and re-animating, and re-loading — every logo.
+            const kept = prev[adv.length]?.e === e ? prev[adv.length] : null;
+            adv.push(kept ?? { key: s.keySeq++, e, nodeRef: createRef() });
+            s.index = (s.index + 1) % s.all.length;
+        } while (true);
+        s.adv = adv;
+        s.leftToNextLoad = Math.max(0, s.leftToNextLoad - Math.max(0, adv.length - prev.length));
+    }, [s]);
+    const loadExhibitorImages = useCallback(async () => {
+        s.loading = true;
+        let batch = s.all.slice(s.index, s.index + s.batchSize);
+        if (batch.length < s.batchSize) {
+            batch = batch.concat(s.all.slice(0, s.batchSize - batch.length));
+        }
+        const result = await loadImagesInBatchesById(new Map(batch.map((x) => [x.id, { fallback: x.logo?.url }])));
+        s.leftToNextLoad = result.size;
+        s.loading = false;
+        return result;
+    }, [s]);
+    const startTimer = useCallback(() => {
+        const fn = async () => {
+            if (s.loading) {
+                s.timeoutId = window.setTimeout(fn, DELAY);
+                return;
+            }
+            if (s.leftToNextLoad <= s.adv.length) {
+                s.imgByExhibitorId = await loadExhibitorImages();
+            }
+            setupNext();
+            s.timeoutId = window.setTimeout(fn, DELAY);
+        };
+        clearTimeout(s.timeoutId);
+        s.timeoutId = window.setTimeout(fn, DELAY);
+    }, [loadExhibitorImages, setupNext]);
+    useInit(() => {
+        let dispose;
+        let isMounted = true;
+        (async () => {
+            s.all = shuffle(exhibitorStore.advertised);
+            s.imgByExhibitorId = await loadExhibitorImages();
+            if (!isMounted)
+                return;
+            setupNext();
+            startTimer();
+            uiState.wsStarted = true;
+            // Refit to the new width as a rebuild, and at most every 250ms — a live window drag moves
+            // `screenSize` on every frame, and a per-frame rebuild forced a layout read and remounted
+            // every logo each time.
+            dispose = reaction(() => uiState.screenSize, () => setupNext(true), { delay: 250 });
+        })();
+        return () => {
+            isMounted = false;
+            dispose?.();
+            clearInterval(s.timeoutId);
+        };
+    });
+    return useObserver(() => (_jsx("section", { className: classNames('ws', { 'efp-semi-transparent': uiState.setKioskModeEnabled }), ref: (n) => (s.el = n), onMouseOver: () => clearInterval(s.timeoutId), onMouseOut: startTimer, style: s.sectionStyle, children: _jsx(TransitionGroup, { component: null, children: s.adv.map((e) => (_jsx(CSSTransition, { timeout: 500, nodeRef: e.nodeRef, children: _jsx("a", { ref: e.nodeRef, href: `?${e.e.slug}`, className: "ws__exhibitor", style: { height: `${uiState.wsImageHeightPx}px` }, onClick: (x) => {
+                        x.preventDefault();
+                        trackWsExhibitorClick(e.e);
+                        store.clickExhibitor(e.e);
+                    }, children: _jsx("img", { src: e.e.logo?.url, alt: e.e.name, crossOrigin: "anonymous" }) }) }, e.key))) }) })));
+});
+export default () => useObserver(() => (uiState.wsShown ? _jsx(Ws, {}) : null));

package/dist/esm/components/YahRow.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { HeatmapYah } from '../store/HeatmapStore';
+declare const YahRow: React.FC<{
+    yah: HeatmapYah;
+    active: boolean;
+}>;
+export default YahRow;
+//# sourceMappingURL=YahRow.d.ts.map

package/dist/esm/components/YahRow.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable simple-import-sort/imports */
+// @ts-nocheck
+import { useObserver } from 'mobx-react-lite';
+import store, { layersStore, uiState } from '../store';
+import SimpleRow from './SimpleRowContainer';
+import useHeatmapData from '../utils/useHeatmapData';
+const YahRow = ({ yah, active }) => {
+    const { clicks, background } = useHeatmapData(yah);
+    return useObserver(() => {
+        return (_jsx(SimpleRow, { style: {
+                background: uiState.heatmapYah
+                    ? `linear-gradient(to right, transparent 98%, ${background} 93%) center / 100% 99% no-repeat`
+                    : null,
+            }, active: active, slug: yah.id.toString(), onClick: handleClick, title: yah.name, subtitle: yah.z ? `Level ${yah.z}` : '', trailing: clicks.toString(), highlight: false }));
+    });
+    function handleClick() {
+        const layer = layersStore.findLayer(yah.z);
+        if (layer) {
+            layersStore.updateVisibility(layer, true);
+        }
+        store.routeStore.selectMarker(yah.id.toString(), true);
+    }
+};
+export default YahRow;

package/dist/esm/components/gps/GpsManager.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type GpsPosition } from './types';
+interface GpsManagerProps {
+    requestCompass: boolean;
+    requestCompassAllowed: boolean;
+    onPositionUpdate: (pos: GpsPosition) => void;
+    onRejectCompass?: () => void;
+    onAllowCompass?: () => void;
+    orientationStorageKey?: string;
+}
+export default function GpsManager({ onPositionUpdate, onAllowCompass, onRejectCompass, orientationStorageKey, requestCompass, requestCompassAllowed, }: GpsManagerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=GpsManager.d.ts.map

package/dist/esm/components/gps/GpsManager.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @eslint-react/set-state-in-effect */
+/* eslint-disable @eslint-react/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// @ts-nocheck
+import { useCallback, useEffect, useState } from 'react';
+import logger from '../../tools/logger';
+import isMobile from '../../utils/is-mobile';
+import GpsPermissionRequest from './GpsPermissionRequest';
+import { useUserLocationAndHeading } from './useUserLocationAndHeading';
+export default function GpsManager({ onPositionUpdate, onAllowCompass, onRejectCompass, orientationStorageKey = 'compass-permission-granted', requestCompass = true, requestCompassAllowed = true, }) {
+    const { startOrientation, startGeolocation, stopOrientation, stopGeolocation } = useUserLocationAndHeading(onPositionUpdate);
+    const [locationGranted, setLocationGranted] = useState(false);
+    const [showCompassModal, setShowCompassModal] = useState(false);
+    useEffect(() => {
+        navigator.geolocation.getCurrentPosition(() => {
+            setLocationGranted(true);
+            startGeolocation();
+        }, (err) => {
+            logger.warn('Geolocation error:', err);
+            setLocationGranted(false);
+        });
+        return () => {
+            stopOrientation();
+            stopGeolocation();
+        };
+    }, [startGeolocation, stopGeolocation, stopOrientation]);
+    const handleEnableCompass = async () => {
+        // required to get compass access on ios devices
+        // https://w3c.github.io/deviceorientation/#dom-deviceorientationevent-requestpermission
+        if (typeof DeviceOrientationEvent !== 'undefined' &&
+            typeof DeviceOrientationEvent.requestPermission === 'function') {
+            const res = await DeviceOrientationEvent.requestPermission();
+            if (res !== 'granted')
+                return;
+        }
+        localStorage.setItem(orientationStorageKey, 'true');
+        startOrientation();
+        setShowCompassModal(false);
+        onAllowCompass?.();
+    };
+    const onCancel = useCallback(() => {
+        localStorage.setItem(orientationStorageKey, 'false');
+        setShowCompassModal(false);
+        onRejectCompass?.();
+    }, [onRejectCompass]);
+    useEffect(() => {
+        if (!locationGranted || !requestCompassAllowed)
+            return;
+        if (typeof navigator === 'undefined' || !isMobile)
+            return;
+        const grantedKey = localStorage.getItem(orientationStorageKey);
+        if (!grantedKey || requestCompass) {
+            setShowCompassModal(true);
+            return;
+        }
+        grantedKey === 'true' && handleEnableCompass();
+    }, [locationGranted, requestCompass, requestCompassAllowed, handleEnableCompass]);
+    return (_jsx(GpsPermissionRequest, { isOpen: showCompassModal, onAllow: handleEnableCompass, onCancel: onCancel }));
+}

package/dist/esm/components/gps/GpsPermissionRequest.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const _default: React.FunctionComponent<{
+    isOpen: boolean;
+    onAllow?: () => void;
+    onCancel?: () => void;
+}>;
+export default _default;
+//# sourceMappingURL=GpsPermissionRequest.d.ts.map