@goway.to/maps 0.0.0-stage → 0.1.0

package/dist/MapView.web.js

@@ -0,0 +1,413 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `MapView`, web — `maplibre-gl` against a real `<div>`.
+ *
+ * The engine is built in the host element's ref callback and torn down in its
+ * cleanup (React 19). The host is KEYED by what the engine is built from — the
+ * resolved style document, the projection, a retry — so a new style is a new
+ * engine at the camera the old one was at, and everything drawn on it (sources,
+ * layers, markers, plugins) binds again to the new one. No effect decides when
+ * an engine exists.
+ *
+ * Children are rendered once the style has loaded, inside the engine's
+ * context; each binds itself to the engine (`Camera.web.tsx`,
+ * `GeoJSONSource.web.tsx`, …), one named binding per component file.
+ *
+ * maplibre-gl 6 is ESM-only and starts its tile worker BY URL. Inside a Metro
+ * bundle `import.meta.url` is not the package directory, so the worker is
+ * served from this origin instead — `@goway.to/maps/metro` copies it to
+ * {@link WORKER_PATH}, keyed on the installed version so the worker and the
+ * main thread can never be different releases.
+ */
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useReducer, useRef, useState, } from 'react';
+import { StyleSheet, View } from 'react-native';
+import * as maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { boundsCenter, isDegenerateBounds } from '@goway.to/sdk/geo';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { CameraBinding } from './CameraBinding.web';
+import { attachCameraReports, isGestureMove } from './cameraReports.web';
+import { createWebMapApi, DEFAULT_FIT_PADDING, DEGENERATE_FIT_ZOOM } from './commands.web';
+import { CREDIT_AUTO_COLLAPSE_MS, creditReducer, INITIAL_CREDIT_STATE } from './compactCredit';
+import { WebEngineContext } from './engineContext.web';
+import { InteractionBinding } from './InteractionBinding.web';
+import { collectLabelFeatures, LABEL_HIT_PAD_PX, labelCandidatesOf, pickLabelFeature, queriedLabelsOf, } from './labels';
+import { LightBinding } from './LightBinding.web';
+import { MapAttribution } from './MapAttribution';
+import { MapBrand } from './MapBrand';
+import { MapErrorState } from './MapErrorState';
+import { MapRefContext } from './mapRef';
+import { NO_QUERY_LAYERS, queryLayersOf } from './queryLayers';
+import { asFinite, isDrawableBounds, isDrawableCoordinate, reportMapDefect, resolvePadding, runEngineCommand, toBoundsArray, toLngLat, } from './shared';
+import { DEFAULT_MAP_STYLE, resolveStyleUrl } from './styleUrl';
+import { ZoomLevelContext } from './zoom';
+/** Where `@goway.to/maps/metro` puts MapLibre's worker modules, on this origin. */
+export const WORKER_PATH = `/vendor/maplibre-gl/${maplibregl.getVersion()}/maplibre-gl-worker.mjs`;
+if (typeof window !== 'undefined') {
+    maplibregl.setWorkerUrl(new URL(WORKER_PATH, window.location.origin).href);
+}
+/** The whole inhabited world, before anything is known. */
+const WORLD_VIEW = { latitude: 20, longitude: 0, zoom: 1.5 };
+const DEFAULT_MAX_PITCH = 60;
+const EMPTY_LABELS = [];
+export const MapView = forwardRef(function MapView(props, ref) {
+    const { mapStyle = DEFAULT_MAP_STYLE, lightPreset, projection = 'mercator', camera, light, interaction, maxPitch, credits, creditDisclosure, style, testID, children, } = props;
+    const theme = useTheme();
+    // The callbacks and construction options of THIS render, for listeners
+    // bound once per engine: a new inline `onPress` must not rebuild the map.
+    const latest = useRef(props);
+    latest.current = props;
+    let styleUrl = null;
+    let styleError = null;
+    try {
+        styleUrl = resolveStyleUrl(mapStyle, lightPreset, theme.isDark);
+    }
+    catch (cause) {
+        styleError = { reason: 'style', message: String(cause) };
+    }
+    const [retry, setRetry] = useState(0);
+    const [engine, setEngine] = useState(null);
+    const [zoomLevel, setZoomLevel] = useState(() => Math.floor(openingZoom(props.initialViewState)));
+    const [error, setError] = useState(null);
+    const [credit, dispatchCredit] = useReducer(creditReducer, INITIAL_CREDIT_STATE);
+    const mapRef = useRef(null);
+    // Where the last engine's camera was when it went: a new style or a new
+    // projection never moves the map; only a retry opens at the start again.
+    const lastCamera = useRef(null);
+    // The `camera` target last applied, across engines (`CameraBinding.web.tsx`).
+    const appliedCamera = useRef(null);
+    const api = useMemo(() => createWebMapApi(() => mapRef.current), []);
+    useImperativeHandle(ref, () => api, [api]);
+    const report = useCallback((next) => {
+        setError(next);
+        latest.current.onError?.(next);
+    }, []);
+    const engineKey = `${styleUrl}|${projection}|${retry}`;
+    const attachEngine = useCallback((node) => {
+        if (!node || !styleUrl)
+            return;
+        // react-native-web renders a `<View>` as a `<div>` and its ref IS that
+        // node, so MapLibre gets a real container without a portal of its own.
+        const container = node;
+        const options = latest.current;
+        const opening = openingCamera(lastCamera.current ?? options.initialViewState ?? targetView(options.camera));
+        let map;
+        try {
+            map = new maplibregl.Map({
+                container,
+                // With the globe, the style goes in through `setStyle` with the
+                // projection folded into the document, so the first frame is
+                // already a globe rather than a flat map that turns into one.
+                ...(projection === 'globe' ? {} : { style: styleUrl }),
+                ...opening,
+                maxPitch: options.maxPitch ?? DEFAULT_MAX_PITCH,
+                ...(asFinite(options.pixelRatio) !== undefined ? { pixelRatio: options.pixelRatio } : {}),
+                canvasContextAttributes: { antialias: options.antialias === true },
+                // The credit is `MapAttribution`, drawn by this component on every
+                // map; the engine's own ornament is off.
+                attributionControl: false,
+            });
+            if (projection === 'globe') {
+                map.setStyle(styleUrl, {
+                    transformStyle: (_previous, next) => ({ ...next, projection: { type: 'globe' } }),
+                });
+            }
+        }
+        catch (cause) {
+            report({ reason: 'runtime', message: String(cause) });
+            return;
+        }
+        mapRef.current = map;
+        const markerElements = new Set();
+        const plugins = new Set();
+        let queryLayers = NO_QUERY_LAYERS;
+        let collapse = null;
+        // Before `load`, so the camera the map opened at is reported before
+        // `onReady` says the map is there (`loadedCamera.ts`).
+        const detachReports = attachCameraReports(map, () => latest.current.onCameraChanged);
+        const handleLoad = () => {
+            queryLayers = queryLayersOf(map.getStyle()?.layers);
+            setEngine({ map, markerElements, plugins, container });
+            setError((current) => {
+                if (current)
+                    latest.current.onError?.(null);
+                return null;
+            });
+            // The credit is spelled out at load and folds after a few seconds, or
+            // at the reader's first interaction (`compactCredit.ts`).
+            collapse = setTimeout(() => dispatchCredit({ type: 'elapsed' }), CREDIT_AUTO_COLLAPSE_MS);
+            latest.current.onReady?.();
+        };
+        const handleMove = (event) => {
+            // Only a move carrying the input event that caused it is the reader's:
+            // MapLibre also moves the camera itself (padding, resize), unmarked.
+            if (isGestureMove(event))
+                dispatchCredit({ type: 'mapInteraction' });
+        };
+        const handleZoom = () => {
+            const level = Math.floor(map.getZoom());
+            if (Number.isFinite(level))
+                setZoomLevel(level);
+        };
+        /**
+         * Was this click aimed at something drawn over the map? A
+         * `maplibregl.Marker`'s element is a child of the canvas container, so a
+         * click on one bubbles and MapLibre fires a map `click` for it too —
+         * which would set a stop under a pin the reader aimed at.
+         */
+        const pressedOwnMarker = (target) => {
+            if (!(target instanceof Node))
+                return false;
+            for (const element of markerElements) {
+                if (element === target || element.contains(target))
+                    return true;
+            }
+            return false;
+        };
+        const handleClick = (event) => {
+            dispatchCredit({ type: 'mapInteraction' });
+            // Hit priority, step 1: a marker wins outright; its own press ran.
+            if (pressedOwnMarker(event.originalEvent?.target ?? null))
+                return;
+            // Step 2: a plugin's own drawing (a 3D model, a live vehicle).
+            for (const plugin of plugins) {
+                if (plugin.press?.(event.point))
+                    return;
+            }
+            const press = latest.current.onPress;
+            if (!press)
+                return;
+            const coordinate = { latitude: event.lngLat.lat, longitude: event.lngLat.lng };
+            if (!isDrawableCoordinate(coordinate)) {
+                reportMapDefect('press:coordinate', 'Ignored a map press: the engine reported a non-drawable coordinate.');
+                return;
+            }
+            // Step 3: the basemap's own label inside the hit pad; step 4: bare map.
+            const label = labelAt(map, event.point, coordinate, queryLayers.tap);
+            press({ coordinate, ...(label ? { label } : {}) });
+        };
+        /**
+         * The pointer says whether there is something under it to press — the
+         * same `labelAt` the click uses, so the cursor cannot promise a hit the
+         * press then misses. Skipped while the map moves.
+         */
+        const handleMouseMove = (event) => {
+            if (map.isMoving())
+                return;
+            const canvas = map.getCanvas();
+            const coordinate = { latitude: event.lngLat.lat, longitude: event.lngLat.lng };
+            let over = false;
+            for (const plugin of plugins) {
+                if (plugin.hover?.(event.point)) {
+                    over = true;
+                    break;
+                }
+            }
+            if (!over && latest.current.onPress && isDrawableCoordinate(coordinate)) {
+                over = labelAt(map, event.point, coordinate, queryLayers.tap) !== null;
+            }
+            const wanted = over ? 'pointer' : '';
+            if (canvas.style.cursor !== wanted)
+                canvas.style.cursor = wanted;
+        };
+        const releaseCursor = () => {
+            const canvas = map.getCanvas();
+            if (canvas.style.cursor !== '')
+                canvas.style.cursor = '';
+        };
+        /**
+         * `idle`: every tile has arrived and the collision system has placed the
+         * labels — the only frame at which the labels on screen are the ones the
+         * reader sees, and the only honest moment to retract a tile failure.
+         */
+        const handleIdle = () => {
+            if (map.areTilesLoaded()) {
+                setError((current) => {
+                    if (current?.reason !== 'tiles')
+                        return current;
+                    latest.current.onError?.(null);
+                    return null;
+                });
+            }
+            const reportLabels = latest.current.onLabelsChange;
+            if (!reportLabels)
+                return;
+            if (queryLayers.labels.length === 0) {
+                reportLabels(EMPTY_LABELS);
+                return;
+            }
+            const centre = map.getCenter();
+            const fallback = { latitude: centre.lat, longitude: centre.lng };
+            if (!isDrawableCoordinate(fallback))
+                return;
+            let hits;
+            try {
+                hits = map.queryRenderedFeatures({ layers: [...queryLayers.labels] });
+            }
+            catch {
+                // A style swapped out from under the query; the next idle answers.
+                return;
+            }
+            reportLabels(collectLabelFeatures(queriedLabelsOf(hits), fallback));
+        };
+        const handleError = (event) => {
+            const sourceId = event.sourceId;
+            if (sourceId) {
+                const failure = {
+                    sourceId,
+                    status: event.error?.status,
+                    message: event.error?.message,
+                };
+                for (const plugin of plugins) {
+                    if (plugin.ownsError?.(failure))
+                        return;
+                }
+            }
+            // A source id means a tile/source request failed — recoverable, the
+            // rest of the viewport still draws, and `idle` retracts it. Without one
+            // the style document itself did not load: nothing to draw.
+            report({ reason: sourceId ? 'tiles' : 'style', message: event.error?.message });
+        };
+        map.on('load', handleLoad);
+        map.on('move', handleMove);
+        map.on('zoom', handleZoom);
+        map.on('idle', handleIdle);
+        map.on('click', handleClick);
+        map.on('mousemove', handleMouseMove);
+        map.on('mouseout', releaseCursor);
+        map.on('dragstart', releaseCursor);
+        map.on('error', handleError);
+        return () => {
+            if (collapse)
+                clearTimeout(collapse);
+            detachReports();
+            releaseCursor();
+            runEngineCommand('getCenter', () => {
+                const centre = map.getCenter();
+                lastCamera.current = {
+                    latitude: centre.lat,
+                    longitude: centre.lng,
+                    zoom: map.getZoom(),
+                    bearing: map.getBearing(),
+                    pitch: map.getPitch(),
+                };
+            });
+            setEngine(null);
+            if (mapRef.current === map)
+                mapRef.current = null;
+            map.remove();
+        };
+    }, [styleUrl, projection, report]);
+    const handleRetry = useCallback(() => {
+        setError(null);
+        latest.current.onError?.(null);
+        lastCamera.current = null;
+        appliedCamera.current = null;
+        setRetry((count) => count + 1);
+    }, []);
+    const toggleCredit = useCallback(() => dispatchCredit({ type: 'toggle' }), []);
+    const shownError = styleError ?? error;
+    return (_jsxs(View, { style: [styles.root, style], testID: testID, children: [_jsx(View, { ref: attachEngine, style: styles.engine }, engineKey), _jsx(MapRefContext.Provider, { value: api, children: _jsx(EngineChildren, { engine: engine, zoomLevel: zoomLevel, camera: camera, appliedCamera: appliedCamera, light: light, interaction: interaction, maxPitch: maxPitch, children: children }) }), _jsx(MapBrand, {}), _jsx(MapAttribution, { extra: credits, disclosure: creditDisclosure ?? null, expanded: credit.expanded, onToggle: toggleCredit }), shownError ? _jsx(MapErrorState, { error: shownError, onRetry: handleRetry }) : null] }));
+});
+/**
+ * Everything drawn ON the engine, with its context. Before the style loads
+ * there is nothing to bind to, and the map components render nothing.
+ */
+function EngineChildren({ engine, zoomLevel, camera, appliedCamera, light, interaction, maxPitch, children, }) {
+    return (_jsx(WebEngineContext.Provider, { value: engine, children: _jsxs(ZoomLevelContext.Provider, { value: zoomLevel, children: [engine ? (_jsxs(_Fragment, { children: [camera ? (_jsx(CameraBinding, { map: engine.map, target: camera, applied: appliedCamera })) : null, _jsx(LightBinding, { map: engine.map, light: light ?? null }), _jsx(InteractionBinding, { map: engine.map, interaction: interaction, maxPitch: maxPitch ?? DEFAULT_MAX_PITCH })] })) : null, children] }) }));
+}
+/** A camera target as an opening view, for a map given no `initialViewState`. */
+function targetView(target) {
+    if (target?.bounds) {
+        return {
+            bounds: target.bounds,
+            ...(target.padding !== undefined ? { padding: target.padding } : {}),
+            ...(target.maxZoom !== undefined ? { maxZoom: target.maxZoom } : {}),
+        };
+    }
+    if (target?.center) {
+        return { ...target.center, zoom: target.zoom ?? WORLD_VIEW.zoom };
+    }
+    return undefined;
+}
+/** The zoom a map opens at, for the first clustering pass. */
+function openingZoom(view) {
+    if (!view)
+        return WORLD_VIEW.zoom;
+    if ('bounds' in view)
+        return asFinite(view.maxZoom) ?? 10;
+    return asFinite(view.zoom) ?? WORLD_VIEW.zoom;
+}
+/**
+ * The constructor's camera options for an opening view: a point and zoom, or
+ * a box to frame (a box with no area opens at its centre at street zoom). A
+ * view the engine cannot build opens on the whole world, named in the console
+ * rather than thrown.
+ */
+function openingCamera(view) {
+    if (view && 'bounds' in view) {
+        if (!isDrawableBounds(view.bounds)) {
+            reportMapDefect('initialViewState', 'initialViewState.bounds is not drawable; opened on the world.');
+            return worldCamera();
+        }
+        if (isDegenerateBounds(view.bounds)) {
+            return { center: toLngLat(boundsCenter(view.bounds)), zoom: DEGENERATE_FIT_ZOOM };
+        }
+        const padding = resolvePadding(view.padding, DEFAULT_FIT_PADDING) ?? undefined;
+        const [west, south, east, north] = toBoundsArray(view.bounds);
+        const maxZoom = asFinite(view.maxZoom);
+        return {
+            bounds: [
+                [west, south],
+                [east, north],
+            ],
+            fitBoundsOptions: {
+                ...(padding ? { padding } : {}),
+                ...(maxZoom !== undefined ? { maxZoom } : {}),
+            },
+        };
+    }
+    if (view && isDrawableCoordinate(view)) {
+        return {
+            center: toLngLat(view),
+            zoom: asFinite(view.zoom) ?? WORLD_VIEW.zoom,
+            bearing: asFinite(view.bearing) ?? 0,
+            pitch: asFinite(view.pitch) ?? 0,
+        };
+    }
+    if (view)
+        reportMapDefect('initialViewState', 'initialViewState is not drawable; opened on the world.');
+    return worldCamera();
+}
+function worldCamera() {
+    return { center: toLngLat(WORLD_VIEW), zoom: WORLD_VIEW.zoom };
+}
+/**
+ * The basemap label a press meant, or `null` — queried in a BOX around the
+ * press, because a label's glyphs sit 12–20 px from the anchor the engine
+ * indexes (`labels.ts` → {@link LABEL_HIT_PAD_PX}).
+ */
+function labelAt(map, point, coordinate, layers) {
+    if (layers.length === 0)
+        return null;
+    let hits;
+    try {
+        hits = map.queryRenderedFeatures([
+            [point.x - LABEL_HIT_PAD_PX, point.y - LABEL_HIT_PAD_PX],
+            [point.x + LABEL_HIT_PAD_PX, point.y + LABEL_HIT_PAD_PX],
+        ], { layers: [...layers] });
+    }
+    catch {
+        // A layer that vanished between the style load and this press.
+        return null;
+    }
+    const labels = labelCandidatesOf(queriedLabelsOf(hits), coordinate);
+    return pickLabelFeature(labels, point, (target) => {
+        const projected = map.project([target.longitude, target.latitude]);
+        return { x: projected.x, y: projected.y };
+    });
+}
+const styles = StyleSheet.create({
+    root: { flex: 1, position: 'relative', overflow: 'hidden' },
+    engine: { flex: 1 },
+});

package/dist/Marker.d.ts

@@ -0,0 +1,13 @@
+/**
+ * One view drawn at a coordinate, native — MapLibre Native's `<Marker>`, a
+ * real React Native view, so a marker on native is the same Bloom component as
+ * on the web. Centred on its coordinate, as Bloom's map markers are designed
+ * to be.
+ */
+import type { ReactNode } from 'react';
+import type { GeoCoordinate } from './types';
+export interface MarkerProps {
+    coordinate: GeoCoordinate;
+    children: ReactNode;
+}
+export declare function Marker({ coordinate, children }: MarkerProps): import("react").JSX.Element | null;

package/dist/Marker.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { Marker as NativeMarker } from '@maplibre/maplibre-react-native';
+import { isDrawableCoordinate, reportMapDefect, toLngLat } from './shared';
+export function Marker({ coordinate, children }) {
+    if (!isDrawableCoordinate(coordinate)) {
+        reportMapDefect('marker:coordinate', 'Dropped a marker: its coordinate is not drawable.');
+        return null;
+    }
+    return (_jsx(NativeMarker, { lngLat: toLngLat(coordinate), anchor: "center", children: _jsx(View, { children: children }) }));
+}

package/dist/Marker.web.d.ts

@@ -0,0 +1,15 @@
+/**
+ * One view drawn at a coordinate, web — a `maplibregl.Marker` whose DOM element
+ * React portals the children into, so a marker on the web is the same
+ * component as a marker on native.
+ *
+ * Centred on its coordinate, as Bloom's map markers are designed to be
+ * (`@oxy.so/bloom/map-marker`: "centre a marker on its coordinate").
+ */
+import { type ReactNode } from 'react';
+import type { GeoCoordinate } from './types';
+export interface MarkerProps {
+    coordinate: GeoCoordinate;
+    children: ReactNode;
+}
+export declare function Marker({ coordinate, children }: MarkerProps): import("react").JSX.Element | null;

package/dist/Marker.web.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * One view drawn at a coordinate, web — a `maplibregl.Marker` whose DOM element
+ * React portals the children into, so a marker on the web is the same
+ * component as a marker on native.
+ *
+ * Centred on its coordinate, as Bloom's map markers are designed to be
+ * (`@oxy.so/bloom/map-marker`: "centre a marker on its coordinate").
+ */
+import { useContext, useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import * as maplibregl from 'maplibre-gl';
+import { WebEngineContext } from './engineContext.web';
+import { isDrawableCoordinate, reportMapDefect, runEngineCommand } from './shared';
+export function Marker({ coordinate, children }) {
+    const engine = useContext(WebEngineContext);
+    if (!engine)
+        return null;
+    // Undrawable pins never reach `setLngLat`, which throws on one.
+    if (!isDrawableCoordinate(coordinate)) {
+        reportMapDefect('marker:coordinate', 'Dropped a marker: its coordinate is not drawable.');
+        return null;
+    }
+    return (_jsx(MarkerBinding, { engine: engine, coordinate: coordinate, children: children }));
+}
+function MarkerBinding({ engine, coordinate, children, }) {
+    // The element the engine positions; the children are portalled into it.
+    const [element] = useState(() => {
+        const div = document.createElement('div');
+        // The pill sizes itself; a fixed-size element would clip it.
+        div.style.willChange = 'transform';
+        return div;
+    });
+    const { latitude, longitude } = coordinate;
+    // Binding: a `maplibregl.Marker` holds `element` at `coordinate` on the engine.
+    useLayoutEffect(() => {
+        const { map, markerElements } = engine;
+        let marker = null;
+        runEngineCommand('addMarker', () => {
+            marker = new maplibregl.Marker({ element, anchor: 'center' })
+                .setLngLat([longitude, latitude])
+                .addTo(map);
+        });
+        markerElements.add(element);
+        return () => {
+            markerElements.delete(element);
+            marker?.remove();
+        };
+    }, [engine, element, latitude, longitude]);
+    return createPortal(children, element);
+}

package/dist/Markers.d.ts

@@ -0,0 +1,2 @@
+import type { MarkersProps } from './types';
+export declare function Markers(props: MarkersProps): import("react").JSX.Element;

package/dist/Markers.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `<Markers>`, native — Bloom markers at their coordinates, clustered by the
+ * same options Mapbox's sources take (`clusters.ts`).
+ */
+import { DefaultMapMarker } from './DefaultMapMarker';
+import { Marker } from './Marker';
+import { useMarkerSlots } from './useMarkerSlots';
+export function Markers(props) {
+    const { slots, press } = useMarkerSlots(props);
+    const { renderMarker } = props;
+    return (_jsx(_Fragment, { children: slots.map((slot) => (_jsx(Marker, { coordinate: slot.coordinate, children: renderMarker ? (renderMarker(slot.item, () => press(slot))) : (_jsx(DefaultMapMarker, { item: slot.item, onPress: () => press(slot) })) }, slot.key))) }));
+}

package/dist/Markers.web.d.ts

@@ -0,0 +1,2 @@
+import type { MarkersProps } from './types';
+export declare function Markers(props: MarkersProps): import("react").JSX.Element;

package/dist/Markers.web.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `<Markers>`, web — Bloom markers at their coordinates, clustered by the
+ * same options Mapbox's sources take (`clusters.ts`).
+ */
+import { DefaultMapMarker } from './DefaultMapMarker';
+import { Marker } from './Marker.web';
+import { useMarkerSlots } from './useMarkerSlots';
+export function Markers(props) {
+    const { slots, press } = useMarkerSlots(props);
+    const { renderMarker } = props;
+    return (_jsx(_Fragment, { children: slots.map((slot) => (_jsx(Marker, { coordinate: slot.coordinate, children: renderMarker ? (renderMarker(slot.item, () => press(slot))) : (_jsx(DefaultMapMarker, { item: slot.item, onPress: () => press(slot) })) }, slot.key))) }));
+}

package/dist/PluginProps.web.d.ts

@@ -0,0 +1,7 @@
+import type { MapPluginHandle } from './plugin';
+export declare function PluginProps<Props>({ handle, attachedWith, props, }: {
+    handle: MapPluginHandle<Props>;
+    /** The props `attach` received. */
+    attachedWith: Props;
+    props: Props;
+}): null;

package/dist/PluginProps.web.js

@@ -0,0 +1,19 @@
+/**
+ * An attached plugin's props, bound with its `update` (see `MapPlugin.web.tsx`).
+ */
+import { useLayoutEffect, useRef } from 'react';
+export function PluginProps({ handle, attachedWith, props, }) {
+    // The props the handle has: those it was attached with, then each update.
+    const delivered = useRef({
+        handle,
+        props: attachedWith,
+    });
+    // Binding: an attached plugin receives every new `props`.
+    useLayoutEffect(() => {
+        const last = delivered.current.handle === handle ? delivered.current : { handle, props: attachedWith };
+        if (last.props !== props)
+            handle.update?.(props);
+        delivered.current = { handle, props };
+    }, [handle, attachedWith, props]);
+    return null;
+}

package/dist/RasterDEMSource.d.ts

@@ -0,0 +1,2 @@
+import type { RasterDEMSourceProps } from './types';
+export declare function RasterDEMSource({ id, tiles, encoding, tileSize, minzoom, maxzoom, children, }: RasterDEMSourceProps): import("react").JSX.Element;

package/dist/RasterDEMSource.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** `<RasterDEMSource>`, native — MapLibre Native's elevation source (for a `hillshade` layer). */
+import { RasterDEMSource as NativeRasterDEMSource } from '@maplibre/maplibre-react-native';
+import { SourceIdContext } from './sourceContext';
+export function RasterDEMSource({ id, tiles, encoding, tileSize, minzoom, maxzoom, children, }) {
+    return (_jsx(NativeRasterDEMSource, { id: id, tiles: [...tiles], ...(encoding ? { encoding } : {}), ...(tileSize !== undefined ? { tileSize } : {}), ...(minzoom !== undefined ? { minzoom } : {}), ...(maxzoom !== undefined ? { maxzoom } : {}), children: _jsx(SourceIdContext.Provider, { value: id, children: children }) }));
+}

package/dist/RasterDEMSource.web.d.ts

@@ -0,0 +1,2 @@
+import type { RasterDEMSourceProps } from './types';
+export declare function RasterDEMSource(props: RasterDEMSourceProps): import("react").JSX.Element | null;

package/dist/RasterDEMSource.web.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `<RasterDEMSource>`, web — an elevation source (for a `hillshade` layer),
+ * added once per engine with its tiles.
+ */
+import { useContext, useLayoutEffect, useState } from 'react';
+import { WebEngineContext } from './engineContext.web';
+import { runEngineCommand } from './shared';
+import { SourceIdContext } from './sourceContext';
+export function RasterDEMSource(props) {
+    const engine = useContext(WebEngineContext);
+    return engine ? _jsx(RasterDEMSourceBinding, { map: engine.map, ...props }) : null;
+}
+function RasterDEMSourceBinding({ map, id, tiles, encoding, tileSize, minzoom, maxzoom, children, }) {
+    const [added, setAdded] = useState(null);
+    const tileKey = tiles.join('\n');
+    // Binding: the source `id` exists on the engine with these tiles.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `tileKey` is the value `tiles` stands for
+    useLayoutEffect(() => {
+        const spec = {
+            type: 'raster-dem',
+            tiles: [...tiles],
+            ...(encoding ? { encoding } : {}),
+            ...(tileSize !== undefined ? { tileSize } : {}),
+            ...(minzoom !== undefined ? { minzoom } : {}),
+            ...(maxzoom !== undefined ? { maxzoom } : {}),
+        };
+        if (!runEngineCommand('addSource', () => map.addSource(id, spec)))
+            return;
+        setAdded(map);
+        return () => {
+            setAdded(null);
+            runEngineCommand('removeSource', () => {
+                for (const layer of map.getStyle()?.layers ?? []) {
+                    if ('source' in layer && layer.source === id)
+                        map.removeLayer(layer.id);
+                }
+                if (map.getSource(id))
+                    map.removeSource(id);
+            });
+        };
+    }, [map, id, tileKey, encoding, tileSize, minzoom, maxzoom]);
+    return added === map ? (_jsx(SourceIdContext.Provider, { value: id, children: children })) : null;
+}

package/dist/SourceData.web.d.ts

@@ -0,0 +1,6 @@
+import type { Map as MapLibreMap } from 'maplibre-gl';
+export declare function SourceData({ map, id, data, }: {
+    map: MapLibreMap;
+    id: string;
+    data: GeoJSON.GeoJSON;
+}): null;

package/dist/SourceData.web.js

@@ -0,0 +1,14 @@
+/**
+ * A GeoJSON source's data, bound to its `data` prop with maplibre-gl's
+ * imperative `setData` (see `GeoJSONSource.web.tsx` for why it is its own
+ * binding).
+ */
+import { useLayoutEffect } from 'react';
+import { runEngineCommand } from './shared';
+export function SourceData({ map, id, data, }) {
+    // Binding: the source's data follows `data`.
+    useLayoutEffect(() => {
+        runEngineCommand('setData', () => map.getSource(id)?.setData(data));
+    }, [map, id, data]);
+    return null;
+}

package/dist/UserLocation.d.ts

@@ -0,0 +1,2 @@
+import type { UserLocationProps } from './types';
+export declare function UserLocation({ visible }: UserLocationProps): import("react").JSX.Element | null;