isard 1.0.0 → 1.2.0

package/dist/react/IsardMap.d.ts

@@ -0,0 +1,43 @@
+/** `<IsardMap>`: the map, created when it mounts, destroyed when it unmounts, its options and events as props */
+import { type CSSProperties, type ReactNode } from 'react';
+import { GeoMap } from '../map.ts';
+import type { GeoMapOptions, LonLat, MapEvents } from '../types.ts';
+import type { Camera } from '../wasm/isard.js';
+/** The props of the map's events: `onClick` for 'click', `onMoveEnd` for 'moveend'… */
+export interface MapEventProps {
+    onMoveStart?: (camera: Camera) => void;
+    onMove?: (camera: Camera) => void;
+    onMoveEnd?: (camera: Camera) => void;
+    onResize?: (event: MapEvents['resize']) => void;
+    onHover?: (event: MapEvents['hover']) => void;
+    onHoverFeature?: (event: MapEvents['hoverfeature']) => void;
+    onClick?: (event: MapEvents['click']) => void;
+    onRender?: (event: MapEvents['render']) => void;
+    onIdle?: () => void;
+    onLeave?: () => void;
+}
+export interface IsardMapProps extends Omit<GeoMapOptions, keyof Camera>, MapEventProps {
+    /** The camera at creation, then left to the user's gestures */
+    center?: LonLat;
+    zoom?: number;
+    pitch?: number;
+    bearing?: number;
+    /** A camera the map follows: set again whenever it changes (with `onMove` to keep it in a state) */
+    camera?: Partial<Camera>;
+    /** What `onHoverFeature` picks: within `radius` CSS pixels, among `layers` (default every layer) */
+    hoverPicking?: GeoMap['hoverPicking'];
+    /** The map, once created */
+    onLoad?: (map: GeoMap) => void;
+    /** The map's creation failed (no WebGL2, the engine not found) */
+    onError?: (error: unknown) => void;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    /** Layers, markers, popups, panels, effects; drawn once the map is created */
+    children?: ReactNode;
+}
+/**
+ * A map filling its element (give it a height). Created once mounted, destroyed when unmounted; the options read at
+ * creation only (`body`, `preset`, `interactive`, the URLs) need a new `key` to take another value
+ */
+export declare const IsardMap: import("react").ForwardRefExoticComponent<IsardMapProps & import("react").RefAttributes<GeoMap | undefined>>;

package/dist/react/IsardMap.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** `<IsardMap>`: the map, created when it mounts, destroyed when it unmounts, its options and events as props */
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { LayerOrder } from "../bind/layers.js";
+import { GeoMap } from "../map.js";
+import { defined, MapContext } from "./context.js";
+const EVENT_PROPS = {
+    onMoveStart: 'movestart',
+    onMove: 'move',
+    onMoveEnd: 'moveend',
+    onResize: 'resize',
+    onHover: 'hover',
+    onHoverFeature: 'hoverfeature',
+    onClick: 'click',
+    onRender: 'render',
+    onIdle: 'idle',
+    onLeave: 'leave',
+};
+/** The props that are not options of the map */
+const NOT_OPTIONS = [...Object.keys(EVENT_PROPS), 'onLoad', 'onError', 'hoverPicking', 'id', 'className', 'style'];
+const isEventProp = (key) => key in EVENT_PROPS;
+/** Options the map takes again after its creation, and how */
+const LIVE_OPTIONS = {
+    basemap: (map, p) => {
+        if (p.basemap)
+            map.setBasemap(p.basemap, p.hillshade);
+    },
+    hillshade: (map, p) => {
+        if (p.basemap)
+            map.setBasemap(p.basemap, p.hillshade);
+    },
+    terrain: (map, p) => map.setTerrain(p.terrain ?? false),
+    minZoom: (map, p) => map.setMinZoom(p.minZoom ?? 0),
+    maxZoom: (map, p) => map.setMaxZoom(p.maxZoom ?? 22),
+    maxPitch: (map, p) => map.setMaxPitch(p.maxPitch ?? 70),
+    atmosphere: (map, p) => map.setAtmosphere(p.atmosphere),
+    projection: (map, p) => map.setProjection(p.projection ?? 'globe'),
+    loading: (map, p) => map.setLoading(p.loading ?? 'immediate'),
+    sky: (map, p) => map.setSky(p.sky ?? true),
+    background: (map, p) => {
+        if (p.background)
+            map.setBackground(p.background);
+    },
+};
+const isLiveOption = (key) => key in LIVE_OPTIONS;
+const optionsOf = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_OPTIONS.includes(key)));
+const sameCamera = (a, b) => (b.center === undefined || (a.center[0] === b.center[0] && a.center[1] === b.center[1])) &&
+    (b.zoom === undefined || a.zoom === b.zoom) &&
+    (b.pitch === undefined || a.pitch === b.pitch) &&
+    (b.bearing === undefined || a.bearing === b.bearing);
+/** What the components of a new map share */
+const bindingOf = (map) => {
+    const viewsheds = new Map();
+    return {
+        map,
+        order: new LayerOrder(),
+        viewsheds,
+        applyViewsheds: () => map.setViewshed(viewsheds.size > 0 ? [...viewsheds.values()] : undefined),
+    };
+};
+/**
+ * A map filling its element (give it a height). Created once mounted, destroyed when unmounted; the options read at
+ * creation only (`body`, `preset`, `interactive`, the URLs) need a new `key` to take another value
+ */
+export const IsardMap = forwardRef(function IsardMap(props, ref) {
+    const element = useRef(null);
+    const latest = useRef(props);
+    const applied = useRef(props);
+    const [binding, setBinding] = useState();
+    const map = binding?.map;
+    const { camera, hoverPicking } = props;
+    latest.current = props;
+    useImperativeHandle(ref, () => map, [map]);
+    // Created once: StrictMode's second mount and an unmount before the engine is loaded drop the map they started
+    useEffect(() => {
+        const container = element.current;
+        if (!container)
+            return;
+        const created = { cancelled: false };
+        const { camera, center, zoom, pitch, bearing, children: _, ...options } = latest.current;
+        GeoMap.create(container, { ...optionsOf(options), ...defined({ center, zoom, pitch, bearing }), ...camera }).then((map) => {
+            if (created.cancelled) {
+                map.destroy();
+                return;
+            }
+            created.map = map;
+            setBinding(bindingOf(map));
+            latest.current.onLoad?.(map);
+        }, (error) => {
+            if (created.cancelled)
+                return;
+            if (latest.current.onError)
+                latest.current.onError(error);
+            else
+                console.error(error);
+        });
+        return () => {
+            created.cancelled = true;
+            created.map?.destroy();
+            setBinding(undefined);
+        };
+    }, []);
+    // The events, each listened to once: the props may give another function at each render
+    useEffect(() => {
+        if (!map)
+            return;
+        const offs = Object.keys(EVENT_PROPS)
+            .filter(isEventProp)
+            .map((prop) => map.on(EVENT_PROPS[prop], (event) => latest.current[prop]?.(event)));
+        return () => {
+            offs.forEach((off) => {
+                off();
+            });
+        };
+    }, [map]);
+    // The options taken again, compared with what the map was given last
+    useEffect(() => {
+        if (!map)
+            return;
+        const last = applied.current;
+        const done = new Set();
+        applied.current = props;
+        Object.keys(LIVE_OPTIONS)
+            .filter(isLiveOption)
+            .forEach((key) => {
+            const apply = LIVE_OPTIONS[key];
+            const changed = !Object.is(last[key], props[key]);
+            if (!apply || done.has(apply) || !changed)
+                return;
+            done.add(apply);
+            apply(map, props);
+        });
+    });
+    // What `onHoverFeature` picks, given to the map whenever the prop changes
+    useEffect(() => {
+        if (map && hoverPicking)
+            map.hoverPicking = hoverPicking;
+    }, [map, hoverPicking]);
+    // A controlled camera: set when the prop changes, unless the map is already there (a gesture reported by `onMove`)
+    useEffect(() => {
+        if (map && camera && !sameCamera(map.getCamera(), camera))
+            map.setCamera(camera);
+    }, [map, camera]);
+    return (_jsx("div", { ref: element, id: props.id, className: props.className, style: props.style, children: binding ? _jsx(MapContext.Provider, { value: binding, children: props.children }) : null }));
+});
+//# sourceMappingURL=IsardMap.js.map

package/dist/react/IsardMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IsardMap.js","sourceRoot":"","sources":["../../src/react/IsardMap.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<IsardMap>`: the map, created when it mounts, destroyed when it unmounts, its options and events as props */\n\nimport {\n  type CSSProperties,\n  forwardRef,\n  type ReactNode,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { LayerOrder } from '../bind/layers.ts';\nimport { GeoMap } from '../map.ts';\nimport type { GeoMapOptions, LonLat, MapEvents, ViewshedOptions } from '../types.ts';\nimport type { Camera } from '../wasm/isard.js';\nimport { type Binding, defined, MapContext } from './context.ts';\n\n/** The props of the map's events: `onClick` for 'click', `onMoveEnd` for 'moveend'… */\nexport interface MapEventProps {\n  onMoveStart?: (camera: Camera) => void;\n  onMove?: (camera: Camera) => void;\n  onMoveEnd?: (camera: Camera) => void;\n  onResize?: (event: MapEvents['resize']) => void;\n  onHover?: (event: MapEvents['hover']) => void;\n  onHoverFeature?: (event: MapEvents['hoverfeature']) => void;\n  onClick?: (event: MapEvents['click']) => void;\n  onRender?: (event: MapEvents['render']) => void;\n  onIdle?: () => void;\n  onLeave?: () => void;\n}\n\nconst EVENT_PROPS = {\n  onMoveStart: 'movestart',\n  onMove: 'move',\n  onMoveEnd: 'moveend',\n  onResize: 'resize',\n  onHover: 'hover',\n  onHoverFeature: 'hoverfeature',\n  onClick: 'click',\n  onRender: 'render',\n  onIdle: 'idle',\n  onLeave: 'leave',\n} as const satisfies Record<keyof MapEventProps, keyof MapEvents>;\n\nexport interface IsardMapProps extends Omit<GeoMapOptions, keyof Camera>, MapEventProps {\n  /** The camera at creation, then left to the user's gestures */\n  center?: LonLat;\n  zoom?: number;\n  pitch?: number;\n  bearing?: number;\n  /** A camera the map follows: set again whenever it changes (with `onMove` to keep it in a state) */\n  camera?: Partial<Camera>;\n  /** What `onHoverFeature` picks: within `radius` CSS pixels, among `layers` (default every layer) */\n  hoverPicking?: GeoMap['hoverPicking'];\n  /** The map, once created */\n  onLoad?: (map: GeoMap) => void;\n  /** The map's creation failed (no WebGL2, the engine not found) */\n  onError?: (error: unknown) => void;\n  id?: string;\n  className?: string;\n  style?: CSSProperties;\n  /** Layers, markers, popups, panels, effects; drawn once the map is created */\n  children?: ReactNode;\n}\n\n/** The props that are not options of the map */\nconst NOT_OPTIONS = [...Object.keys(EVENT_PROPS), 'onLoad', 'onError', 'hoverPicking', 'id', 'className', 'style'];\n\nconst isEventProp = (key: string): key is keyof typeof EVENT_PROPS => key in EVENT_PROPS;\n\n/** Options the map takes again after its creation, and how */\nconst LIVE_OPTIONS: { [K in keyof GeoMapOptions]?: (map: GeoMap, props: IsardMapProps) => void } = {\n  basemap: (map, p) => {\n    if (p.basemap) map.setBasemap(p.basemap, p.hillshade);\n  },\n  hillshade: (map, p) => {\n    if (p.basemap) map.setBasemap(p.basemap, p.hillshade);\n  },\n  terrain: (map, p) => map.setTerrain(p.terrain ?? false),\n  minZoom: (map, p) => map.setMinZoom(p.minZoom ?? 0),\n  maxZoom: (map, p) => map.setMaxZoom(p.maxZoom ?? 22),\n  maxPitch: (map, p) => map.setMaxPitch(p.maxPitch ?? 70),\n  atmosphere: (map, p) => map.setAtmosphere(p.atmosphere),\n  projection: (map, p) => map.setProjection(p.projection ?? 'globe'),\n  loading: (map, p) => map.setLoading(p.loading ?? 'immediate'),\n  sky: (map, p) => map.setSky(p.sky ?? true),\n  background: (map, p) => {\n    if (p.background) map.setBackground(p.background);\n  },\n};\n\nconst isLiveOption = (key: string): key is keyof typeof LIVE_OPTIONS => key in LIVE_OPTIONS;\n\nconst optionsOf = (props: Partial<IsardMapProps>): GeoMapOptions =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => !NOT_OPTIONS.includes(key))) as GeoMapOptions;\n\nconst sameCamera = (a: Camera, b: Partial<Camera>): boolean =>\n  (b.center === undefined || (a.center[0] === b.center[0] && a.center[1] === b.center[1])) &&\n  (b.zoom === undefined || a.zoom === b.zoom) &&\n  (b.pitch === undefined || a.pitch === b.pitch) &&\n  (b.bearing === undefined || a.bearing === b.bearing);\n\n/** What the components of a new map share */\nconst bindingOf = (map: GeoMap): Binding => {\n  const viewsheds = new Map<object, ViewshedOptions>();\n\n  return {\n    map,\n    order: new LayerOrder(),\n    viewsheds,\n    applyViewsheds: () => map.setViewshed(viewsheds.size > 0 ? [...viewsheds.values()] : undefined),\n  };\n};\n\n/**\n * A map filling its element (give it a height). Created once mounted, destroyed when unmounted; the options read at\n * creation only (`body`, `preset`, `interactive`, the URLs) need a new `key` to take another value\n */\nexport const IsardMap = forwardRef<GeoMap | undefined, IsardMapProps>(function IsardMap(props, ref) {\n  const element = useRef<HTMLDivElement>(null);\n  const latest = useRef(props);\n  const applied = useRef<IsardMapProps>(props);\n  const [binding, setBinding] = useState<Binding>();\n  const map = binding?.map;\n  const { camera, hoverPicking } = props;\n\n  latest.current = props;\n  useImperativeHandle(ref, () => map, [map]);\n\n  // Created once: StrictMode's second mount and an unmount before the engine is loaded drop the map they started\n  useEffect(() => {\n    const container = element.current;\n\n    if (!container) return;\n\n    const created: { map?: GeoMap; cancelled: boolean } = { cancelled: false };\n    const { camera, center, zoom, pitch, bearing, children: _, ...options } = latest.current;\n\n    GeoMap.create(container, { ...optionsOf(options), ...defined({ center, zoom, pitch, bearing }), ...camera }).then(\n      (map) => {\n        if (created.cancelled) {\n          map.destroy();\n\n          return;\n        }\n\n        created.map = map;\n        setBinding(bindingOf(map));\n        latest.current.onLoad?.(map);\n      },\n      (error: unknown) => {\n        if (created.cancelled) return;\n        if (latest.current.onError) latest.current.onError(error);\n        else console.error(error);\n      },\n    );\n\n    return () => {\n      created.cancelled = true;\n      created.map?.destroy();\n      setBinding(undefined);\n    };\n  }, []);\n\n  // The events, each listened to once: the props may give another function at each render\n  useEffect(() => {\n    if (!map) return;\n\n    const offs = Object.keys(EVENT_PROPS)\n      .filter(isEventProp)\n      .map((prop) =>\n        map.on(EVENT_PROPS[prop], (event) => (latest.current[prop] as ((e: unknown) => void) | undefined)?.(event)),\n      );\n\n    return () => {\n      offs.forEach((off) => {\n        off();\n      });\n    };\n  }, [map]);\n\n  // The options taken again, compared with what the map was given last\n  useEffect(() => {\n    if (!map) return;\n\n    const last = applied.current;\n    const done = new Set<(map: GeoMap, props: IsardMapProps) => void>();\n\n    applied.current = props;\n    Object.keys(LIVE_OPTIONS)\n      .filter(isLiveOption)\n      .forEach((key) => {\n        const apply = LIVE_OPTIONS[key];\n        const changed = !Object.is(last[key], props[key]);\n\n        if (!apply || done.has(apply) || !changed) return;\n        done.add(apply);\n        apply(map, props);\n      });\n  });\n\n  // What `onHoverFeature` picks, given to the map whenever the prop changes\n  useEffect(() => {\n    if (map && hoverPicking) map.hoverPicking = hoverPicking;\n  }, [map, hoverPicking]);\n\n  // A controlled camera: set when the prop changes, unless the map is already there (a gesture reported by `onMove`)\n  useEffect(() => {\n    if (map && camera && !sameCamera(map.getCamera(), camera)) map.setCamera(camera);\n  }, [map, camera]);\n\n  return (\n    <div ref={element} id={props.id} className={props.className} style={props.style}>\n      {binding ? <MapContext.Provider value={binding}>{props.children}</MapContext.Provider> : null}\n    </div>\n  );\n});\n"]}

package/dist/react/Layer.d.ts

@@ -0,0 +1,42 @@
+/** `<Layer>`: a layer added when it mounts, updated by the least its props need, removed when it unmounts, in its
+ * declared order */
+import { type ReactNode, type Ref } from 'react';
+import { type BoundLayerSpec } from '../bind/layers.ts';
+import type { ExtrusionLayer } from '../layers/extrusions.ts';
+import type { CircleLayer, FillLayer, LineLayer } from '../layers/features.ts';
+import type { GroundLayer, ModelLayer, NetworkLayer, RasterLayer, Tiles3dLayer } from '../layers/layers.ts';
+import type { PointCloudLayer } from '../layers/pointclouds.ts';
+import type { SymbolLayer } from '../layers/symbols.ts';
+import type { LayerSpec } from '../map.ts';
+/** The handle of a layer by its type */
+export interface LayerHandles<P = Record<string, unknown>> {
+    lines: LineLayer<P>;
+    circles: CircleLayer<P>;
+    fills: FillLayer<P>;
+    symbols: SymbolLayer<P>;
+    extrusions: ExtrusionLayer<P>;
+    raster: RasterLayer;
+    ground: GroundLayer;
+    network: NetworkLayer;
+    tiles3d: Tiles3dLayer;
+    pointcloud: PointCloudLayer;
+    models: ModelLayer;
+}
+export type LayerType = LayerSpec['type'];
+export type LayerProps<P = Record<string, unknown>, T extends LayerType = LayerType> = Extract<BoundLayerSpec<P>, {
+    type: T;
+}> & {
+    /** Its place among the layers of the components: from the bottom up, the same order by mounting (default 0) */
+    order?: number;
+    /** The layer, once created and each time it is made anew */
+    onLayer?: (layer: LayerHandles<P>[T]) => void;
+    ref?: Ref<LayerHandles<P>[T] | undefined>;
+};
+/**
+ * A layer: the options of its `add…` method with its `type` (`map.add`), and `values` for the layers colored by
+ * values. A change of data, style, filter, values or instances updates it; a change of what is set at creation (its
+ * URL, grid, nodes…) makes it anew, in its place. Data, functions and arrays are compared by identity: keep them in a
+ * memo or a state. The ref and `onLayer` give its handle, typed by its `type`; the properties of its features are
+ * inferred from its data or its style functions (`<Layer<Building> …>` to name them)
+ */
+export declare const Layer: <P = Record<string, unknown>, T extends LayerType = LayerType>(props: LayerProps<P, T>) => ReactNode;

package/dist/react/Layer.js

@@ -0,0 +1,74 @@
+/** `<Layer>`: a layer added when it mounts, updated by the least its props need, removed when it unmounts, in its
+ * declared order */
+import { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { addBoundLayer, applyLayerChange, layerChange, rebuildBoundLayer, } from "../bind/layers.js";
+import { MapContext, SwipeContext } from "./context.js";
+const LayerComponent = forwardRef(function Layer(props, ref) {
+    const binding = useContext(MapContext);
+    const swipe = useContext(SwipeContext);
+    const { order = 0, onLayer, ...rest } = props;
+    const spec = rest;
+    const mounted = useRef(undefined);
+    const latest = useRef({ spec, order, onLayer });
+    const [layer, setLayer] = useState();
+    latest.current = { spec, order, onLayer };
+    useImperativeHandle(ref, () => layer, [layer]);
+    // Added once the map is there, removed when unmounted (or when the map goes)
+    useEffect(() => {
+        if (!binding)
+            return;
+        const { spec, order, onLayer } = latest.current;
+        const created = addBoundLayer(binding.map, spec);
+        binding.order.place(created, order);
+        mounted.current = { layer: created, spec, order };
+        swipe?.set(created);
+        setLayer(created);
+        onLayer?.(created);
+        return () => {
+            const current = mounted.current;
+            mounted.current = undefined;
+            if (!current)
+                return;
+            binding.order.remove(current.layer);
+            swipe?.unset(current.layer);
+            if (binding.map.hasLayer(current.layer))
+                current.layer.remove();
+        };
+    }, [binding, swipe]);
+    // Each render: what changed sent, or the layer made anew in its place
+    useEffect(() => {
+        const current = mounted.current;
+        if (!binding || !current)
+            return;
+        const change = layerChange(current.spec, spec);
+        current.spec = spec;
+        if (change?.rebuild) {
+            const old = current.layer;
+            const fresh = rebuildBoundLayer(binding.map, old, spec);
+            binding.order.place(fresh, order, old);
+            swipe?.unset(old);
+            swipe?.set(fresh);
+            current.layer = fresh;
+            current.order = order;
+            setLayer(fresh);
+            latest.current.onLayer?.(fresh);
+            return;
+        }
+        if (change)
+            applyLayerChange(current.layer, spec, change);
+        if (current.order !== order) {
+            current.order = order;
+            binding.order.place(current.layer, order, current.layer);
+        }
+    });
+    return null;
+});
+/**
+ * A layer: the options of its `add…` method with its `type` (`map.add`), and `values` for the layers colored by
+ * values. A change of data, style, filter, values or instances updates it; a change of what is set at creation (its
+ * URL, grid, nodes…) makes it anew, in its place. Data, functions and arrays are compared by identity: keep them in a
+ * memo or a state. The ref and `onLayer` give its handle, typed by its `type`; the properties of its features are
+ * inferred from its data or its style functions (`<Layer<Building> …>` to name them)
+ */
+export const Layer = LayerComponent;
+//# sourceMappingURL=Layer.js.map

package/dist/react/Layer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layer.js","sourceRoot":"","sources":["../../src/react/Layer.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<Layer>`: a layer added when it mounts, updated by the least its props need, removed when it unmounts, in its\n * declared order */\n\nimport {\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  addBoundLayer,\n  applyLayerChange,\n  type BoundLayerSpec,\n  layerChange,\n  rebuildBoundLayer,\n} from '../bind/layers.ts';\nimport type { ExtrusionLayer } from '../layers/extrusions.ts';\nimport type { CircleLayer, FillLayer, LineLayer } from '../layers/features.ts';\nimport type {\n  GroundLayer,\n  Layer as LayerHandle,\n  ModelLayer,\n  NetworkLayer,\n  RasterLayer,\n  Tiles3dLayer,\n} from '../layers/layers.ts';\nimport type { PointCloudLayer } from '../layers/pointclouds.ts';\nimport type { SymbolLayer } from '../layers/symbols.ts';\nimport type { LayerSpec } from '../map.ts';\nimport { MapContext, SwipeContext } from './context.ts';\n\n/** The handle of a layer by its type */\nexport interface LayerHandles<P = Record<string, unknown>> {\n  lines: LineLayer<P>;\n  circles: CircleLayer<P>;\n  fills: FillLayer<P>;\n  symbols: SymbolLayer<P>;\n  extrusions: ExtrusionLayer<P>;\n  raster: RasterLayer;\n  ground: GroundLayer;\n  network: NetworkLayer;\n  tiles3d: Tiles3dLayer;\n  pointcloud: PointCloudLayer;\n  models: ModelLayer;\n}\n\nexport type LayerType = LayerSpec['type'];\n\nexport type LayerProps<P = Record<string, unknown>, T extends LayerType = LayerType> = Extract<\n  BoundLayerSpec<P>,\n  { type: T }\n> & {\n  /** Its place among the layers of the components: from the bottom up, the same order by mounting (default 0) */\n  order?: number;\n  /** The layer, once created and each time it is made anew */\n  onLayer?: (layer: LayerHandles<P>[T]) => void;\n  ref?: Ref<LayerHandles<P>[T] | undefined>;\n};\n\ninterface Mounted {\n  layer: LayerHandle;\n  spec: BoundLayerSpec;\n  order: number;\n}\n\nconst LayerComponent = forwardRef<LayerHandle | undefined, Omit<LayerProps, 'ref'>>(function Layer(props, ref) {\n  const binding = useContext(MapContext);\n  const swipe = useContext(SwipeContext);\n  const { order = 0, onLayer, ...rest } = props;\n  const spec = rest as BoundLayerSpec;\n  const mounted = useRef<Mounted>(undefined);\n  const latest = useRef({ spec, order, onLayer });\n  const [layer, setLayer] = useState<LayerHandle>();\n\n  latest.current = { spec, order, onLayer };\n  useImperativeHandle(ref, () => layer, [layer]);\n\n  // Added once the map is there, removed when unmounted (or when the map goes)\n  useEffect(() => {\n    if (!binding) return;\n\n    const { spec, order, onLayer } = latest.current;\n    const created = addBoundLayer(binding.map, spec);\n\n    binding.order.place(created, order);\n    mounted.current = { layer: created, spec, order };\n    swipe?.set(created);\n    setLayer(created);\n    onLayer?.(created as never);\n\n    return () => {\n      const current = mounted.current;\n\n      mounted.current = undefined;\n      if (!current) return;\n      binding.order.remove(current.layer);\n      swipe?.unset(current.layer);\n      if (binding.map.hasLayer(current.layer)) current.layer.remove();\n    };\n  }, [binding, swipe]);\n\n  // Each render: what changed sent, or the layer made anew in its place\n  useEffect(() => {\n    const current = mounted.current;\n\n    if (!binding || !current) return;\n\n    const change = layerChange(current.spec, spec);\n\n    current.spec = spec;\n    if (change?.rebuild) {\n      const old = current.layer;\n      const fresh = rebuildBoundLayer(binding.map, old, spec);\n\n      binding.order.place(fresh, order, old);\n      swipe?.unset(old);\n      swipe?.set(fresh);\n      current.layer = fresh;\n      current.order = order;\n      setLayer(fresh);\n      latest.current.onLayer?.(fresh as never);\n\n      return;\n    }\n\n    if (change) applyLayerChange(current.layer, spec, change);\n    if (current.order !== order) {\n      current.order = order;\n      binding.order.place(current.layer, order, current.layer);\n    }\n  });\n\n  return null;\n});\n\n/**\n * A layer: the options of its `add…` method with its `type` (`map.add`), and `values` for the layers colored by\n * values. A change of data, style, filter, values or instances updates it; a change of what is set at creation (its\n * URL, grid, nodes…) makes it anew, in its place. Data, functions and arrays are compared by identity: keep them in a\n * memo or a state. The ref and `onLayer` give its handle, typed by its `type`; the properties of its features are\n * inferred from its data or its style functions (`<Layer<Building> …>` to name them)\n */\nexport const Layer = LayerComponent as <P = Record<string, unknown>, T extends LayerType = LayerType>(\n  props: LayerProps<P, T>,\n) => ReactNode;\n"]}

package/dist/react/Marker.d.ts

@@ -0,0 +1,24 @@
+/** `<Marker>`: an element at a position, the default pin or JSX, its `<Popup>` opened by its click */
+import { type ReactNode } from 'react';
+import type { LonLat, Point } from '../types.ts';
+import { type Anchor } from '../ui/overlay.ts';
+export interface MarkerProps {
+    lonLat: LonLat;
+    /** Metres above the ground, its stem down to `base` (what it stands on: a roof, a mesh) */
+    height?: number;
+    base?: number;
+    draggable?: boolean;
+    offset?: Point;
+    /** Which part of the element sits on the position (default 'bottom' for the pin, 'center' with an icon) */
+    anchor?: Anchor;
+    className?: string;
+    /** The marker's look, in place of the default pin; the element changes with it */
+    icon?: ReactNode;
+    onDragStart?: (lonLat: LonLat) => void;
+    onDrag?: (lonLat: LonLat) => void;
+    onDragEnd?: (lonLat: LonLat) => void;
+    /** A `<Popup>` opened by a click on the marker */
+    children?: ReactNode;
+}
+/** A marker at a position, its look the default pin or the `icon` given */
+export declare const Marker: (props: MarkerProps) => ReactNode;

package/dist/react/Marker.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** `<Marker>`: an element at a position, the default pin or JSX, its `<Popup>` opened by its click */
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Marker as MarkerHandle } from "../ui/overlay.js";
+import { defined, MarkerContext, useMap } from "./context.js";
+/** A marker at a position, its look the default pin or the `icon` given */
+export const Marker = (props) => {
+    const map = useMap();
+    const latest = useRef(props);
+    const { anchor, className, lonLat, height = 0, base = 0, draggable = false, offset } = props;
+    const custom = props.icon !== undefined;
+    const element = useMemo(() => (custom ? document.createElement('div') : undefined), [custom]);
+    const marker = useMemo(() => new MarkerHandle({ ...defined({ anchor, className, element }) }), [anchor, className, element]);
+    const context = useMemo(() => ({ marker, lonLat }), [marker, lonLat]);
+    latest.current = props;
+    // On the map once it is there, its drag events forwarded to the latest props; off the map when unmounted
+    useEffect(() => {
+        if (!map)
+            return;
+        const offs = [
+            marker.on('dragstart', (e) => latest.current.onDragStart?.(e.lonLat)),
+            marker.on('drag', (e) => latest.current.onDrag?.(e.lonLat)),
+            marker.on('dragend', (e) => latest.current.onDragEnd?.(e.lonLat)),
+        ];
+        marker.addTo(map);
+        return () => {
+            offs.forEach((off) => {
+                off();
+            });
+            marker.remove();
+        };
+    }, [map, marker]);
+    // Its position, before the browser paints (no frame at the old place)
+    useLayoutEffect(() => {
+        marker.setLonLat(lonLat);
+    }, [marker, lonLat[0], lonLat[1]]);
+    // Its height above what it stands on
+    useLayoutEffect(() => {
+        marker.setHeight(height, base);
+    }, [marker, height, base]);
+    // Draggable or not
+    useLayoutEffect(() => {
+        marker.setDraggable(draggable);
+    }, [marker, draggable]);
+    // Its shift from the anchor
+    useLayoutEffect(() => {
+        if (offset)
+            marker.setOffset(offset);
+    }, [marker, offset?.[0], offset?.[1]]);
+    return (_jsxs(MarkerContext.Provider, { value: context, children: [element ? createPortal(props.icon, element) : null, props.children] }));
+};
+//# sourceMappingURL=Marker.js.map

package/dist/react/Marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.js","sourceRoot":"","sources":["../../src/react/Marker.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<Marker>`: an element at a position, the default pin or JSX, its `<Popup>` opened by its click */\n\nimport { type ReactNode, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { LonLat, Point } from '../types.ts';\nimport { type Anchor, Marker as MarkerHandle } from '../ui/overlay.ts';\nimport { defined, MarkerContext, useMap } from './context.ts';\n\nexport interface MarkerProps {\n  lonLat: LonLat;\n  /** Metres above the ground, its stem down to `base` (what it stands on: a roof, a mesh) */\n  height?: number;\n  base?: number;\n  draggable?: boolean;\n  offset?: Point;\n  /** Which part of the element sits on the position (default 'bottom' for the pin, 'center' with an icon) */\n  anchor?: Anchor;\n  className?: string;\n  /** The marker's look, in place of the default pin; the element changes with it */\n  icon?: ReactNode;\n  onDragStart?: (lonLat: LonLat) => void;\n  onDrag?: (lonLat: LonLat) => void;\n  onDragEnd?: (lonLat: LonLat) => void;\n  /** A `<Popup>` opened by a click on the marker */\n  children?: ReactNode;\n}\n\n/** A marker at a position, its look the default pin or the `icon` given */\nexport const Marker = (props: MarkerProps): ReactNode => {\n  const map = useMap();\n  const latest = useRef(props);\n  const { anchor, className, lonLat, height = 0, base = 0, draggable = false, offset } = props;\n  const custom = props.icon !== undefined;\n  const element = useMemo(() => (custom ? document.createElement('div') : undefined), [custom]);\n  const marker = useMemo(\n    () => new MarkerHandle({ ...defined({ anchor, className, element }) }),\n    [anchor, className, element],\n  );\n  const context = useMemo(() => ({ marker, lonLat }), [marker, lonLat]);\n\n  latest.current = props;\n\n  // On the map once it is there, its drag events forwarded to the latest props; off the map when unmounted\n  useEffect(() => {\n    if (!map) return;\n\n    const offs = [\n      marker.on('dragstart', (e) => latest.current.onDragStart?.(e.lonLat)),\n      marker.on('drag', (e) => latest.current.onDrag?.(e.lonLat)),\n      marker.on('dragend', (e) => latest.current.onDragEnd?.(e.lonLat)),\n    ];\n\n    marker.addTo(map);\n\n    return () => {\n      offs.forEach((off) => {\n        off();\n      });\n      marker.remove();\n    };\n  }, [map, marker]);\n\n  // Its position, before the browser paints (no frame at the old place)\n  useLayoutEffect(() => {\n    marker.setLonLat(lonLat);\n  }, [marker, lonLat[0], lonLat[1]]);\n  // Its height above what it stands on\n  useLayoutEffect(() => {\n    marker.setHeight(height, base);\n  }, [marker, height, base]);\n  // Draggable or not\n  useLayoutEffect(() => {\n    marker.setDraggable(draggable);\n  }, [marker, draggable]);\n  // Its shift from the anchor\n  useLayoutEffect(() => {\n    if (offset) marker.setOffset(offset);\n  }, [marker, offset?.[0], offset?.[1]]);\n\n  return (\n    <MarkerContext.Provider value={context}>\n      {element ? createPortal(props.icon, element) : null}\n      {props.children}\n    </MarkerContext.Provider>\n  );\n};\n"]}

package/dist/react/Panel.d.ts

@@ -0,0 +1,11 @@
+/** `<Panel>`: JSX standing in 3D at a position */
+import { type ReactNode } from 'react';
+import type { LonLat } from '../types.ts';
+import { type PanelOptions } from '../ui/overlay.ts';
+export interface PanelProps extends Omit<PanelOptions, 'element'> {
+    lonLat: LonLat;
+    /** What stands in 3D: a video, an iframe, a sign */
+    children?: ReactNode;
+}
+/** JSX standing in 3D at a position, `width` metres wide, facing `heading` */
+export declare const Panel: (props: PanelProps) => ReactNode;

package/dist/react/Panel.js

@@ -0,0 +1,37 @@
+/** `<Panel>`: JSX standing in 3D at a position */
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Panel as PanelHandle } from "../ui/overlay.js";
+import { defined, useMap } from "./context.js";
+/** JSX standing in 3D at a position, `width` metres wide, facing `heading` */
+export const Panel = (props) => {
+    const map = useMap();
+    const { className, lonLat, width, heading, pitch, height } = props;
+    // The width at creation: the placement is set again by the effect below
+    const initialWidth = useRef(width);
+    const element = useMemo(() => document.createElement('div'), []);
+    const panel = useMemo(() => new PanelHandle({ element, width: initialWidth.current, ...defined({ className }) }), [element, className]);
+    // On the map once it is there; off it when unmounted
+    useEffect(() => {
+        if (!map)
+            return;
+        panel.addTo(map);
+        return () => {
+            panel.remove();
+        };
+    }, [map, panel]);
+    // Its position, before the browser paints
+    useLayoutEffect(() => {
+        panel.setLonLat(lonLat);
+    }, [panel, lonLat[0], lonLat[1]]);
+    // Its size and orientation: width, heading, pitch, height
+    useLayoutEffect(() => {
+        panel.setPlacement(defined({ width, heading, pitch, height }));
+    }, [panel, width, heading, pitch, height]);
+    // Its content may change its CSS size
+    useLayoutEffect(() => {
+        panel.resize();
+    });
+    return createPortal(props.children, element);
+};
+//# sourceMappingURL=Panel.js.map

package/dist/react/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../src/react/Panel.tsx"],"names":[],"mappings":"AAAA,kDAAkD;AAElD,OAAO,EAAkB,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAqB,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAQ/C,8EAA8E;AAC9E,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAa,EAAE;IACpD,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnE,wEAAwE;IACxE,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,IAAI,WAAW,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,EAC1F,CAAC,OAAO,EAAE,SAAS,CAAC,CACrB,CAAC;IAEF,qDAAqD;IACrD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEjB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjB,0CAA0C;IAC1C,eAAe,CAAC,GAAG,EAAE;QACnB,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,0DAA0D;IAC1D,eAAe,CAAC,GAAG,EAAE;QACnB,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;IAC3C,sCAAsC;IACtC,eAAe,CAAC,GAAG,EAAE;QACnB,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,OAAO,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC,CAAC","sourcesContent":["/** `<Panel>`: JSX standing in 3D at a position */\n\nimport { type ReactNode, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { LonLat } from '../types.ts';\nimport { Panel as PanelHandle, type PanelOptions } from '../ui/overlay.ts';\nimport { defined, useMap } from './context.ts';\n\nexport interface PanelProps extends Omit<PanelOptions, 'element'> {\n  lonLat: LonLat;\n  /** What stands in 3D: a video, an iframe, a sign */\n  children?: ReactNode;\n}\n\n/** JSX standing in 3D at a position, `width` metres wide, facing `heading` */\nexport const Panel = (props: PanelProps): ReactNode => {\n  const map = useMap();\n  const { className, lonLat, width, heading, pitch, height } = props;\n  // The width at creation: the placement is set again by the effect below\n  const initialWidth = useRef(width);\n  const element = useMemo(() => document.createElement('div'), []);\n  const panel = useMemo(\n    () => new PanelHandle({ element, width: initialWidth.current, ...defined({ className }) }),\n    [element, className],\n  );\n\n  // On the map once it is there; off it when unmounted\n  useEffect(() => {\n    if (!map) return;\n    panel.addTo(map);\n\n    return () => {\n      panel.remove();\n    };\n  }, [map, panel]);\n\n  // Its position, before the browser paints\n  useLayoutEffect(() => {\n    panel.setLonLat(lonLat);\n  }, [panel, lonLat[0], lonLat[1]]);\n  // Its size and orientation: width, heading, pitch, height\n  useLayoutEffect(() => {\n    panel.setPlacement(defined({ width, heading, pitch, height }));\n  }, [panel, width, heading, pitch, height]);\n  // Its content may change its CSS size\n  useLayoutEffect(() => {\n    panel.resize();\n  });\n\n  return createPortal(props.children, element);\n};\n"]}

package/dist/react/Popup.d.ts

@@ -0,0 +1,18 @@
+/** `<Popup>`: a box of JSX content at a position or on a `<Marker>` */
+import { type ReactNode } from 'react';
+import type { LonLat } from '../types.ts';
+import { type PopupOptions } from '../ui/overlay.ts';
+export interface PopupProps extends PopupOptions {
+    /** Its position; in a `<Marker>`, the marker's */
+    lonLat?: LonLat;
+    /** Metres above the ground (in a `<Marker>`, the marker's) */
+    height?: number;
+    /** Open or closed, when the application decides; else open when mounted alone, on the marker's click in a marker */
+    open?: boolean;
+    onOpen?: () => void;
+    /** Closed by its button, a click on the map, or the marker's click */
+    onClose?: () => void;
+    children?: ReactNode;
+}
+/** A popup of JSX content, at a position or on a `<Marker>` */
+export declare const Popup: (props: PopupProps) => ReactNode;

package/dist/react/Popup.js

@@ -0,0 +1,60 @@
+/** `<Popup>`: a box of JSX content at a position or on a `<Marker>` */
+import { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Popup as PopupHandle } from "../ui/overlay.js";
+import { defined, MarkerContext, useMap } from "./context.js";
+/** A popup of JSX content, at a position or on a `<Marker>` */
+export const Popup = (props) => {
+    const map = useMap();
+    const inMarker = useContext(MarkerContext);
+    const latest = useRef(props);
+    const { anchor, closeButton, closeOnClick, maxWidth, className, height, open, offset } = props;
+    const marker = inMarker?.marker;
+    const lonLat = props.lonLat ?? inMarker?.lonLat;
+    const opened = open ?? !marker;
+    const content = useMemo(() => document.createElement('div'), []);
+    const popup = useMemo(() => new PopupHandle(defined({ anchor, closeButton, closeOnClick, maxWidth, className })).setDOMContent(content), [anchor, closeButton, closeOnClick, maxWidth, className, content]);
+    latest.current = props;
+    // Its open and close events forwarded to the latest props, and tied to the marker around (its click opens it); removed when unmounted
+    useEffect(() => {
+        if (!map)
+            return;
+        const offs = [
+            popup.on('open', () => latest.current.onOpen?.()),
+            popup.on('close', () => latest.current.onClose?.()),
+        ];
+        if (marker)
+            marker.setPopup(popup);
+        return () => {
+            offs.forEach((off) => {
+                off();
+            });
+            if (marker?.getPopup() === popup)
+                marker.setPopup(undefined);
+            popup.remove();
+        };
+    }, [map, marker, popup]);
+    // Its shift from the anchor
+    useLayoutEffect(() => {
+        if (offset)
+            popup.setOffset(offset);
+    }, [popup, offset?.[0], offset?.[1]]);
+    // Its position, height and, when `open` decides or it stands alone, open or closed; before the browser paints
+    useLayoutEffect(() => {
+        if (!map)
+            return;
+        if (lonLat)
+            popup.setLonLat(lonLat);
+        if (height !== undefined)
+            popup.setHeight(height);
+        // In a marker without `open`: its click decides
+        if (open === undefined && marker)
+            return;
+        if (opened && !popup.isOpen())
+            popup.addTo(map);
+        if (!opened && popup.isOpen())
+            popup.remove();
+    }, [map, marker, popup, lonLat?.[0], lonLat?.[1], height, open, opened]);
+    return createPortal(props.children, content);
+};
+//# sourceMappingURL=Popup.js.map

package/dist/react/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../src/react/Popup.tsx"],"names":[],"mappings":"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","sourcesContent":["/** `<Popup>`: a box of JSX content at a position or on a `<Marker>` */\n\nimport { type ReactNode, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { LonLat } from '../types.ts';\nimport { Popup as PopupHandle, type PopupOptions } from '../ui/overlay.ts';\nimport { defined, MarkerContext, useMap } from './context.ts';\n\nexport interface PopupProps extends PopupOptions {\n  /** Its position; in a `<Marker>`, the marker's */\n  lonLat?: LonLat;\n  /** Metres above the ground (in a `<Marker>`, the marker's) */\n  height?: number;\n  /** Open or closed, when the application decides; else open when mounted alone, on the marker's click in a marker */\n  open?: boolean;\n  onOpen?: () => void;\n  /** Closed by its button, a click on the map, or the marker's click */\n  onClose?: () => void;\n  children?: ReactNode;\n}\n\n/** A popup of JSX content, at a position or on a `<Marker>` */\nexport const Popup = (props: PopupProps): ReactNode => {\n  const map = useMap();\n  const inMarker = useContext(MarkerContext);\n  const latest = useRef(props);\n  const { anchor, closeButton, closeOnClick, maxWidth, className, height, open, offset } = props;\n  const marker = inMarker?.marker;\n  const lonLat = props.lonLat ?? inMarker?.lonLat;\n  const opened = open ?? !marker;\n  const content = useMemo(() => document.createElement('div'), []);\n  const popup = useMemo(\n    () => new PopupHandle(defined({ anchor, closeButton, closeOnClick, maxWidth, className })).setDOMContent(content),\n    [anchor, closeButton, closeOnClick, maxWidth, className, content],\n  );\n\n  latest.current = props;\n\n  // Its open and close events forwarded to the latest props, and tied to the marker around (its click opens it); removed when unmounted\n  useEffect(() => {\n    if (!map) return;\n\n    const offs = [\n      popup.on('open', () => latest.current.onOpen?.()),\n      popup.on('close', () => latest.current.onClose?.()),\n    ];\n\n    if (marker) marker.setPopup(popup);\n\n    return () => {\n      offs.forEach((off) => {\n        off();\n      });\n      if (marker?.getPopup() === popup) marker.setPopup(undefined);\n      popup.remove();\n    };\n  }, [map, marker, popup]);\n\n  // Its shift from the anchor\n  useLayoutEffect(() => {\n    if (offset) popup.setOffset(offset);\n  }, [popup, offset?.[0], offset?.[1]]);\n  // Its position, height and, when `open` decides or it stands alone, open or closed; before the browser paints\n  useLayoutEffect(() => {\n    if (!map) return;\n    if (lonLat) popup.setLonLat(lonLat);\n    if (height !== undefined) popup.setHeight(height);\n    // In a marker without `open`: its click decides\n    if (open === undefined && marker) return;\n    if (opened && !popup.isOpen()) popup.addTo(map);\n    if (!opened && popup.isOpen()) popup.remove();\n  }, [map, marker, popup, lonLat?.[0], lonLat?.[1], height, open, opened]);\n\n  return createPortal(props.children, content);\n};\n"]}

package/dist/react/Swipe.d.ts

@@ -0,0 +1,9 @@
+/** `<Swipe>`: the `<Layer>` in it on one side of a vertical line only */
+import { type ReactNode } from 'react';
+import type { SwipeOptions } from '../types.ts';
+export interface SwipeProps extends Omit<SwipeOptions, 'layers'> {
+    /** The `<Layer>` shown on one side of the line only */
+    children?: ReactNode;
+}
+/** The `<Layer>` in it shown on one side of a vertical line only, at `position` CSS pixels from the left */
+export declare const Swipe: (props: SwipeProps) => ReactNode;