@elabs-ai/components-maps 4.2.0 → 5.0.0

package/dist/index.d.ts

@@ -1,7 +1,122 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 import MapLibreGL, { MarkerOptions, PopupOptions } from 'maplibre-gl';
-export { LngLatBoundsLike, LngLatLike, MapLayerMouseEvent, MapMouseEvent, MapOptions, ProjectionSpecification, StyleSpecification } from 'maplibre-gl';
+export { Coordinates, FitBoundsOptions, ImageSourceSpecification, LngLatBoundsLike, LngLatLike, MapLayerMouseEvent, MapMouseEvent, MapOptions, ProjectionSpecification, StyleSpecification } from 'maplibre-gl';
+import { LucideIcon } from 'lucide-react';
+import { ColorScale, ColorScaleValue, ColorScaleSpec } from '@elabs-ai/components-ui';
+
+/**
+ * A coordinate system for a CUSTOM, non-geographic plan — a floor plan, a
+ * factory layout, a train carriage, a rack elevation. Kept engine-free so it can
+ * be unit-tested (same convention as `arc-math.ts`).
+ *
+ * MapLibre GL JS renders Web Mercator and nothing else: it has no custom CRS and
+ * none is planned, so a plan coordinate system has to be SYNTHESIZED on top of
+ * Mercator. The same convention as Leaflet's `CRS.Simple` (origin top-left, one
+ * map unit = one pixel) and Qlik Sense's image background layer (corner
+ * coordinates in the image's own pixels, projection "undefined").
+ *
+ * The plan is mapped LINEARLY INTO NORMALIZED MERCATOR, not linearly into
+ * degrees. Normalized Mercator is what the screen shows, so one scale factor for
+ * both axes keeps the plan's aspect ratio exact at every zoom and every plan
+ * size. Mapping linearly into degrees — the naive reading of "undefined degrees"
+ * — stretches the plan vertically by Mercator's cos(lat) factor: a 1600 x 900
+ * plan comes out at aspect 1.996 instead of 1.778, 12% too wide.
+ *
+ * What this is NOT: a georeference. Mercator's y is non-linear in latitude, so
+ * lengths measured on the Earth are meaningless here. Distances belong to the
+ * plan (`distance()` returns plan units); never put a scale bar on a plan map,
+ * and never combine a plan with the globe projection.
+ */
+/**
+ * How much of normalized Mercator the plan's LONG side spans. Normalizing on the
+ * long side caps the footprint whatever the aspect ratio: the tallest possible
+ * plan reaches +-66.5 deg latitude, comfortably inside Mercator's +-85.05 limit.
+ */
+declare const PLAN_MERCATOR_SPAN = 0.5;
+/** A point in plan units. */
+interface PlanPoint {
+    x: number;
+    y: number;
+}
+/** The plan's own extent and units — everything the coordinate system needs. */
+interface PlanExtent {
+    /** Plan width in plan units (image pixels, millimetres, metres — your choice). */
+    width: number;
+    /** Plan height in plan units. */
+    height: number;
+    /**
+     * Where plan (0, 0) sits. `"top-left"` (the default) matches an image and
+     * Leaflet's `CRS.Simple`; `"bottom-left"` matches y-up CAD/DXF exports.
+     */
+    origin?: "top-left" | "bottom-left";
+    /** Unit name, for labels and readouts only — the maths never reads it. */
+    unit?: string;
+}
+/** The four image-source corners MapLibre wants: top-left, top-right, bottom-right, bottom-left. */
+type PlanImageCoordinates = [
+    [
+        number,
+        number
+    ],
+    [
+        number,
+        number
+    ],
+    [
+        number,
+        number
+    ],
+    [
+        number,
+        number
+    ]
+];
+/** A two-way transform between plan units and lng/lat, plus everything derived from it. */
+interface PlanCrs {
+    /** The extent this was built from, with defaults applied. */
+    readonly extent: Required<PlanExtent>;
+    /** Normalized Mercator units per plan unit. */
+    readonly scale: number;
+    /** Plan point -> `[lng, lat]`. */
+    toLngLat(point: PlanPoint | [number, number]): [number, number];
+    /** `[lng, lat]` -> plan point. */
+    toPlan(lngLat: [number, number] | {
+        lng: number;
+        lat: number;
+    }): PlanPoint;
+    /** Deep-convert GeoJSON authored in plan units into lng/lat GeoJSON. */
+    toGeoJSON<T>(data: T): T;
+    /** The plan's bounds as `[[west, south], [east, north]]`. */
+    readonly bounds: [[number, number], [number, number]];
+    /** Bounds grown by `padFraction` of the long side — a pan limit that still shows the edges. */
+    maxBounds(padFraction?: number): [[number, number], [number, number]];
+    /** The plan's four corners, ready for a MapLibre `image` or `canvas` source. */
+    readonly imageCoordinates: PlanImageCoordinates;
+    /** The zoom at which the plan's long side covers `px` CSS pixels. */
+    zoomForLongSidePixels(px: number): number;
+    /** Zoom at which the plan's long side is 128 px — small but still findable. */
+    readonly minZoom: number;
+    /** Zoom at which the plan's long side is 32768 px — a desk, a machine, a seat. */
+    readonly maxZoom: number;
+    /** Straight-line distance between two plan points, in plan units. */
+    distance(a: PlanPoint, b: PlanPoint): number;
+}
+/**
+ * Build a plan coordinate system from the plan's extent.
+ *
+ * ```tsx
+ * const plan = createPlanCrs({ width: 2400, height: 1600, unit: "cm" });
+ * <MapCanvas blank plan={plan}>
+ *   <MapPlanImage src={floorPlanPng} />
+ *   <MapGeoJSON data={roomsInPlanUnits} promoteId="id" />
+ * </MapCanvas>
+ * ```
+ *
+ * Throws when the extent is not a pair of finite, positive numbers — a NaN
+ * coordinate system is unfixable three layers downstream.
+ */
+declare function createPlanCrs(extent: PlanExtent): PlanCrs;
 
 /** Light-or-dark flavor of the active basemap (derived from the brand theme). */
 type BasemapTheme = "light" | "dark";
@@ -17,10 +132,78 @@ interface MapContextValue {
      * as a dependency key to re-resolve semantic token colors for WebGL paint.
      */
     themeKey: string;
+    /**
+     * The plan coordinate system when this canvas is a CUSTOM (non-geographic)
+     * plan map — a floor plan, factory layout or carriage — and `null` for an
+     * ordinary geographic map. Layer components read it to convert the plan
+     * coordinates they are handed, and to report plan coordinates back.
+     */
+    plan: PlanCrs | null;
+    /** True while the consumer has asked for a loading overlay over the map. */
+    loading: boolean;
 }
 /** Access the map instance + load state from any descendant of `<MapCanvas>`. */
 declare function useMap(): MapContextValue;
 
+/** A map container's width tier — the same three tiers as a chart's. */
+type MapBreakpoint = "narrow" | "medium" | "wide";
+/** Every tier, narrowest first. */
+declare const MAP_BREAKPOINTS: readonly MapBreakpoint[];
+/**
+ * A width (CSS px) below `narrow` is narrow; below `medium` is medium; anything
+ * else is wide. A boundary belongs to the wider tier (480 → medium). Same
+ * numbers as `CHART_BREAKPOINT_THRESHOLDS`.
+ */
+declare const MAP_BREAKPOINT_THRESHOLDS: {
+    readonly narrow: 480;
+    readonly medium: 768;
+};
+/**
+ * The tier for a measured container width. `0` or a non-finite width means
+ * "not measured yet" (server render, first pass, `display: none`) and
+ * resolves to `wide`, so a first paint matches the pre-tier layout.
+ */
+declare function mapBreakpointForWidth(width: number): MapBreakpoint;
+/**
+ * Per-tier values, desktop-first: `base` is the WIDE value (the opposite of
+ * Tailwind's unprefixed, mobile-first class); overrides go down.
+ */
+interface MapResponsiveByBreakpoint<T> {
+    /** The value at `wide`, and the fallback for every tier that sets nothing. */
+    base: T;
+    /** At `medium` — and at `narrow` too, unless `narrow` is set. */
+    medium?: T;
+    /** At `narrow` only. */
+    narrow?: T;
+}
+/**
+ * One value for every tier, or per-tier values. `T` must never be an object
+ * type with its own `base` key (that key marks the per-tier form). Read it
+ * through {@link resolveMapResponsive} / {@link useMapResponsive}.
+ */
+type MapResponsive<T> = T | MapResponsiveByBreakpoint<T>;
+/** True for the per-tier form: a plain object with its own `base` key. */
+declare function isMapResponsiveByBreakpoint<T>(value: MapResponsive<T>): value is MapResponsiveByBreakpoint<T>;
+/**
+ * The value for `breakpoint`: `wide` → `base`; `medium` → `medium ?? base`;
+ * `narrow` → `narrow ?? medium ?? base`. "Not set" means `undefined`.
+ */
+declare function resolveMapResponsive<T>(value: MapResponsive<T>, breakpoint: MapBreakpoint): T;
+/** CSS px, or the map's width ÷ height (`{ aspect: 2 }` = twice as wide as tall). */
+type MapHeight = number | {
+    aspect: number;
+};
+/**
+ * The height a `<MapCanvas>` falls back to when its parent gives it none:
+ * 1.6 : 1, and square at `narrow` — an aspect-locked map at 380 px would
+ * otherwise shrink to a strip nobody can read.
+ */
+declare const DEFAULT_MAP_HEIGHT: MapResponsiveByBreakpoint<MapHeight>;
+/** The enclosing map's tier (`wide` outside a `<MapCanvas>`). */
+declare function useMapBreakpoint(): MapBreakpoint;
+/** `value` resolved at the enclosing map's tier. */
+declare function useMapResponsive<T>(value: MapResponsive<T>): T;
+
 /** Map viewport state. */
 interface MapViewport {
     /** Center coordinates [longitude, latitude]. */
@@ -33,6 +216,8 @@ interface MapViewport {
     pitch: number;
 }
 type MapStyleOption = string | MapLibreGL.StyleSpecification;
+/** `"mercator"` / `"globe"`, or a full MapLibre projection spec. */
+type MapProjectionOption = "mercator" | "globe" | MapLibreGL.ProjectionSpecification;
 /** The imperative handle exposed by `<MapCanvas ref>`: the MapLibre map itself. */
 type MapCanvasRef = MapLibreGL.Map;
 type MapCanvasProps = {
@@ -57,8 +242,37 @@ type MapCanvasProps = {
      * visualizations. Ignored when an explicit `styles` prop is provided.
      */
     blank?: boolean;
-    /** Map projection type. Use `{ type: "globe" }` for a 3D globe view. */
-    projection?: MapLibreGL.ProjectionSpecification;
+    /**
+     * Draw the basemap's own place labels. `false` leaves the ground and hides
+     * every text label the basemap style carries, so the map's own labels
+     * (`MapMarker`'s `label`, `MapAnnotation`) are the only naming on it — the
+     * locator recipe, and the default inside `MapInset`, where a full-size
+     * label is sliced by the frame. Default `true`.
+     */
+    basemapLabels?: boolean;
+    /**
+     * Map projection: `"mercator"` (MapLibre's default) or `"globe"` for a 3D
+     * globe view, or a full MapLibre projection spec. Feature-detected: a
+     * MapLibre build that cannot switch projections ignores it (with a console
+     * note).
+     */
+    projection?: MapProjectionOption;
+    /**
+     * `false` makes the map STATIC — the editorial / locator default: no zoom,
+     * pan, rotate or keyboard handlers, the default cursor and no tab stop
+     * (leave `<MapControls>` out of a static map). Hover and click still reach
+     * layers and markers, so tooltips keep working. The viewport can still be set in code
+     * (`viewport`, the ref). Default `true`.
+     */
+    interactive?: boolean;
+    /**
+     * The map's height: CSS px, or `{ aspect }` (width ÷ height), optionally per
+     * tier — `{ base: { aspect: 1.6 }, narrow: { aspect: 1 } }`. Tiers are
+     * measured on the map's own width (`narrow` < 480 px, `medium` < 768 px).
+     * Unset, the map fills its parent as before; a parent with no height of its
+     * own gets `DEFAULT_MAP_HEIGHT` (1.6 : 1, square at `narrow`) instead of 0.
+     */
+    height?: MapResponsive<MapHeight>;
     /**
      * Controlled viewport. When provided together with `onViewportChange`, the
      * map becomes controlled and the viewport is driven by this prop.
@@ -72,7 +286,28 @@ type MapCanvasProps = {
     onViewportChange?: (viewport: MapViewport) => void;
     /** Show a loading overlay on the map (e.g. while the app fetches map data). */
     loading?: boolean;
-} & Omit<MapLibreGL.MapOptions, "container" | "style">;
+    /**
+     * Turn the canvas into a CUSTOM (non-geographic) plan map: a floor plan, a
+     * factory layout, a train carriage, a rack elevation. Pass the plan's extent
+     * (`{ width, height }` in the plan's own units) or a `createPlanCrs(…)`
+     * result, and every layer inside then speaks PLAN coordinates instead of
+     * lng/lat — shapes, routes, markers and popups alike.
+     *
+     * The plan is fitted on mount, pan and zoom are clamped to its extent, and
+     * rotation and pitch are off (a rotated floor plan is unreadable). Pair it
+     * with `blank` and, for a picture under the shapes, `<MapPlanImage>`.
+     *
+     * The plan coordinate system is synthesized on Web Mercator, so it is not a
+     * georeference: distances belong to the plan, and a scale bar would lie.
+     */
+    plan?: PlanExtent | PlanCrs;
+    /**
+     * Fit a plan map to its extent on mount and whenever the extent changes
+     * (default: true). Ignored on a geographic map, and skipped when the camera
+     * is driven through `viewport`.
+     */
+    fitPlan?: boolean;
+} & Omit<MapLibreGL.MapOptions, "container" | "style" | "interactive">;
 /**
  * The root map surface — a token/theme-aware MapLibre GL canvas. Compose the
  * other `@elabs-ai/components-maps` components (markers, popups, controls, layers) as
@@ -103,8 +338,37 @@ declare const MapCanvas: react.ForwardRefExoticComponent<{
      * visualizations. Ignored when an explicit `styles` prop is provided.
      */
     blank?: boolean;
-    /** Map projection type. Use `{ type: "globe" }` for a 3D globe view. */
-    projection?: MapLibreGL.ProjectionSpecification;
+    /**
+     * Draw the basemap's own place labels. `false` leaves the ground and hides
+     * every text label the basemap style carries, so the map's own labels
+     * (`MapMarker`'s `label`, `MapAnnotation`) are the only naming on it — the
+     * locator recipe, and the default inside `MapInset`, where a full-size
+     * label is sliced by the frame. Default `true`.
+     */
+    basemapLabels?: boolean;
+    /**
+     * Map projection: `"mercator"` (MapLibre's default) or `"globe"` for a 3D
+     * globe view, or a full MapLibre projection spec. Feature-detected: a
+     * MapLibre build that cannot switch projections ignores it (with a console
+     * note).
+     */
+    projection?: MapProjectionOption;
+    /**
+     * `false` makes the map STATIC — the editorial / locator default: no zoom,
+     * pan, rotate or keyboard handlers, the default cursor and no tab stop
+     * (leave `<MapControls>` out of a static map). Hover and click still reach
+     * layers and markers, so tooltips keep working. The viewport can still be set in code
+     * (`viewport`, the ref). Default `true`.
+     */
+    interactive?: boolean;
+    /**
+     * The map's height: CSS px, or `{ aspect }` (width ÷ height), optionally per
+     * tier — `{ base: { aspect: 1.6 }, narrow: { aspect: 1 } }`. Tiers are
+     * measured on the map's own width (`narrow` < 480 px, `medium` < 768 px).
+     * Unset, the map fills its parent as before; a parent with no height of its
+     * own gets `DEFAULT_MAP_HEIGHT` (1.6 : 1, square at `narrow`) instead of 0.
+     */
+    height?: MapResponsive<MapHeight>;
     /**
      * Controlled viewport. When provided together with `onViewportChange`, the
      * map becomes controlled and the viewport is driven by this prop.
@@ -118,43 +382,145 @@ declare const MapCanvas: react.ForwardRefExoticComponent<{
     onViewportChange?: (viewport: MapViewport) => void;
     /** Show a loading overlay on the map (e.g. while the app fetches map data). */
     loading?: boolean;
-} & Omit<MapLibreGL.MapOptions, "container" | "style"> & react.RefAttributes<MapLibreGL.Map>>;
+    /**
+     * Turn the canvas into a CUSTOM (non-geographic) plan map: a floor plan, a
+     * factory layout, a train carriage, a rack elevation. Pass the plan's extent
+     * (`{ width, height }` in the plan's own units) or a `createPlanCrs(…)`
+     * result, and every layer inside then speaks PLAN coordinates instead of
+     * lng/lat — shapes, routes, markers and popups alike.
+     *
+     * The plan is fitted on mount, pan and zoom are clamped to its extent, and
+     * rotation and pitch are off (a rotated floor plan is unreadable). Pair it
+     * with `blank` and, for a picture under the shapes, `<MapPlanImage>`.
+     *
+     * The plan coordinate system is synthesized on Web Mercator, so it is not a
+     * georeference: distances belong to the plan, and a scale bar would lie.
+     */
+    plan?: PlanExtent | PlanCrs;
+    /**
+     * Fit a plan map to its extent on mount and whenever the extent changes
+     * (default: true). Ignored on a geographic map, and skipped when the camera
+     * is driven through `viewport`.
+     */
+    fitPlan?: boolean;
+} & Omit<MapLibreGL.MapOptions, "container" | "style" | "interactive"> & react.RefAttributes<MapLibreGL.Map>>;
+
+/**
+ * The eight label anchors a map label or annotation can sit at, relative to
+ * its point. Compass-style and PHYSICAL on purpose: east of Toronto is east in
+ * every writing direction, so a map label never mirrors in RTL.
+ */
+type MapLabelAnchor = "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/** Every anchor, clockwise from `top` (for stories and validation). */
+declare const MAP_LABEL_ANCHORS: readonly MapLabelAnchor[];
+/**
+ * Where a label box sits for `anchor`, `distance` px away from its point:
+ * `dx` / `dy` is the attach point (the box's nearest edge or corner) relative
+ * to the point, and `fx` / `fy` the box's own offset as a fraction of its
+ * width / height (`0`, `-0.5` or `-1`), so the box grows away from the point.
+ */
+interface MapAnchorGeometry {
+    dx: number;
+    dy: number;
+    fx: number;
+    fy: number;
+}
+declare function mapAnchorGeometry(anchor: MapLabelAnchor, distance: number): MapAnchorGeometry;
+/** The CSS transform that puts a label box at `anchor`, `distance` px from its point. */
+declare function mapAnchorTransform(anchor: MapLabelAnchor, distance: number): string;
 
-type MapMarkerProps = {
-    /** Longitude coordinate for the marker position. */
+/** A geographic position — the only kind an ordinary basemap understands. */
+type MapGeoPosition = {
+    /** Longitude coordinate. */
     longitude: number;
-    /** Latitude coordinate for the marker position. */
+    /** Latitude coordinate. */
     latitude: number;
-    /** Marker sub-components (MapMarkerContent, MapMarkerPopup, MapMarkerTooltip, MapMarkerLabel). */
-    children: ReactNode;
+    x?: never;
+    y?: never;
+};
+/**
+ * A position in PLAN units, for a canvas that declares a `plan` extent: metres
+ * along the hall, millimetres across the carriage, pixels into the drawing.
+ */
+type MapPlanPosition = {
+    /** Horizontal position in plan units. */
+    x: number;
+    /** Vertical position in plan units, from the plan's own origin. */
+    y: number;
+    longitude?: never;
+    latitude?: never;
+};
+/**
+ * Either a geographic position or a plan one — never a mix. The `never`-typed
+ * twins make `{ longitude, x }` a type error rather than a silent winner.
+ */
+type MapPosition = MapGeoPosition | MapPlanPosition;
+
+/**
+ * A marker's own text label — the locator-map label: one of eight positions,
+ * optionally on a box, optionally pushed out on a callout line.
+ */
+interface MapMarkerLabelSpec {
+    /** The label text. */
+    text: string;
+    /** Where the label sits relative to the point (default `"top"`). */
+    position?: MapLabelAnchor;
+    /** Set the label on a background box so it reads over a busy basemap. */
+    box?: boolean;
+    /** Push the label further out and draw a callout line back to the point. */
+    callout?: boolean;
+}
+type MapMarkerProps = MapPosition & {
+    /**
+     * Marker sub-components (MapMarkerContent, MapMarkerPopup, MapMarkerTooltip,
+     * MapMarkerLabel). Optional when `label` alone marks the place — an inline
+     * area label, for example.
+     */
+    children?: ReactNode;
+    /**
+     * Whether the marker shows at a tier (default `true` everywhere):
+     * `{ base: true, narrow: false }` drops it from a phone-width map. The
+     * The editorial advice applies — duplicate a marker with a shorter label and
+     * the opposite `showAt` rather than cramming one label into both.
+     */
+    showAt?: MapResponsive<boolean>;
+    /** A text label drawn with the marker (see {@link MapMarkerLabelSpec}). */
+    label?: MapMarkerLabelSpec;
     /** Callback when the marker is clicked. */
     onClick?: (e: MouseEvent) => void;
     /** Callback when the mouse enters the marker. */
     onMouseEnter?: (e: MouseEvent) => void;
     /** Callback when the mouse leaves the marker. */
     onMouseLeave?: (e: MouseEvent) => void;
-    /** Callback when a drag starts (requires `draggable`). */
+    /** Callback when a drag starts (requires `draggable`). The plan point is `null` off a plan. */
     onDragStart?: (lngLat: {
         lng: number;
         lat: number;
-    }) => void;
-    /** Callback during a drag (requires `draggable`). */
+    }, plan: PlanPoint | null) => void;
+    /** Callback during a drag (requires `draggable`). The plan point is `null` off a plan. */
     onDrag?: (lngLat: {
         lng: number;
         lat: number;
-    }) => void;
-    /** Callback when a drag ends (requires `draggable`). */
+    }, plan: PlanPoint | null) => void;
+    /** Callback when a drag ends (requires `draggable`). The plan point is `null` off a plan. */
     onDragEnd?: (lngLat: {
         lng: number;
         lat: number;
-    }) => void;
+    }, plan: PlanPoint | null) => void;
+    /**
+     * The accessible name of a `draggable` marker — say what it moves ("Depot
+     * location"). Defaults to the locale seam's generic name. Ignored when the
+     * marker is not draggable.
+     */
+    dragLabel?: string;
 } & Omit<MarkerOptions, "element">;
 /**
- * A marker anchored at a lng/lat. Compose the pieces you need:
- * `MapMarkerContent` (the visual), `MapMarkerLabel`, `MapMarkerPopup` (opens
- * on click) and `MapMarkerTooltip` (shows on hover).
+ * A marker anchored at a lng/lat — or, on a canvas with a `plan` extent, at a
+ * plan `x`/`y`. Compose the pieces you need: `MapMarkerContent` (the visual),
+ * `MapMarkerLabel`, `MapMarkerPopup` (opens on click) and `MapMarkerTooltip`
+ * (shows on hover).
  */
-declare function MapMarker({ longitude, latitude, children, onClick, onMouseEnter, onMouseLeave, onDragStart, onDrag, onDragEnd, draggable, ...markerOptions }: MapMarkerProps): react.JSX.Element | null;
+declare function MapMarker({ longitude: longitudeProp, latitude: latitudeProp, x, y, children, onClick, onMouseEnter, onMouseLeave, onDragStart, onDrag, onDragEnd, draggable, dragLabel, showAt, label, ...markerOptions }: MapMarkerProps): react.JSX.Element | null;
 interface MapMarkerContentProps {
     /** Custom marker content. Defaults to a primary-colored dot. */
     children?: ReactNode;
@@ -197,11 +563,7 @@ interface MapMarkerLabelProps {
  */
 declare function MapMarkerLabel({ children, className, position }: MapMarkerLabelProps): react.ReactPortal;
 
-type MapPopupProps = {
-    /** Longitude coordinate for the popup position. */
-    longitude: number;
-    /** Latitude coordinate for the popup position. */
-    latitude: number;
+type MapPopupProps = MapPosition & {
     /** Callback when the popup is closed. */
     onClose?: () => void;
     /** Popup content. */
@@ -212,15 +574,20 @@ type MapPopupProps = {
     closeButton?: boolean;
 } & Omit<PopupOptions, "className" | "closeButton">;
 /**
- * A standalone popup anchored at a lng/lat (not attached to a marker) —
- * typically rendered conditionally from app state (e.g. after a layer click).
+ * A standalone popup anchored at a lng/lat — or, on a canvas with a `plan`
+ * extent, at a plan `x`/`y`. Not attached to a marker; typically rendered
+ * conditionally from app state (e.g. after a layer click).
  */
-declare function MapPopup({ longitude, latitude, onClose, children, className, closeButton, ...popupOptions }: MapPopupProps): react.ReactPortal;
+declare function MapPopup({ longitude: longitudeProp, latitude: latitudeProp, x, y, onClose, children, className, closeButton, ...popupOptions }: MapPopupProps): react.ReactPortal;
 
 interface MapControlsProps {
     /** Position of the controls on the map (default: "bottom-right"). */
     position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    /** Show zoom in/out buttons (default: true). */
+    /**
+     * Show zoom in/out buttons. Default: true on an interactive map, false on a
+     * static one (`<MapCanvas interactive={false}>`), whose whole point is a
+     * fixed view — set `showZoom` explicitly to override either way.
+     */
     showZoom?: boolean;
     /** Show a compass button to reset bearing/pitch (default: false). */
     showCompass?: boolean;
@@ -228,6 +595,18 @@ interface MapControlsProps {
     showLocate?: boolean;
     /** Show a fullscreen toggle button (default: false). */
     showFullscreen?: boolean;
+    /**
+     * Show a button that frames the whole plan again — a plan map has an edge to
+     * come back to, so this defaults to ON there and off on a geographic map.
+     */
+    showFit?: boolean;
+    /**
+     * What the fit button frames. Defaults to the plan's own extent; pass bounds
+     * to frame something else (one wing, the selected cluster).
+     */
+    fitBounds?: [[number, number], [number, number]];
+    /** Called after the camera has been asked to frame the plan. */
+    onFit?: () => void;
     /** Additional CSS classes for the controls container. */
     className?: string;
     /** Callback with user coordinates when located. */
@@ -239,12 +618,17 @@ interface MapControlsProps {
     onLocateError?: (error: GeolocationPositionError) => void;
 }
 /** Branded zoom / compass / locate / fullscreen controls. Render inside `<MapCanvas>`. */
-declare function MapControls({ position, showZoom, showCompass, showLocate, showFullscreen, className, onLocate, onLocateError, }: MapControlsProps): react.JSX.Element;
+declare function MapControls({ position, showZoom, showCompass, showLocate, showFullscreen, showFit, fitBounds, className, onLocate, onLocateError, onFit, }: MapControlsProps): react.JSX.Element | null;
 
+/** Which way the route runs, drawn as chevrons along the line. */
+type MapRouteDirection = "none" | "forward" | "backward";
 interface MapRouteProps {
     /** Optional unique identifier for the route layer. */
     id?: string;
-    /** Array of [longitude, latitude] coordinate pairs defining the route. */
+    /**
+     * Array of [longitude, latitude] coordinate pairs defining the route — or, in
+     * a `<MapCanvas plan>`, [x, y] pairs in plan units.
+     */
     coordinates: [number, number][];
     /** Line color as a CSS color value. Defaults to the theme's `--primary` token. */
     color?: string;
@@ -254,6 +638,14 @@ interface MapRouteProps {
     opacity?: number;
     /** Dash pattern [dash length, gap length] for dashed lines. */
     dashArray?: [number, number];
+    /**
+     * Draw chevrons along the line to show which way it runs (default: "none").
+     * A conveyor, a one-way aisle and a walking route all need this, and an arrow
+     * is a second channel that greyscale keeps.
+     */
+    direction?: MapRouteDirection;
+    /** Distance between chevrons in px (default: 80). */
+    directionSpacing?: number;
     /** Callback when the route line is clicked. */
     onClick?: () => void;
     /** Callback when the mouse enters the route line. */
@@ -264,15 +656,18 @@ interface MapRouteProps {
     interactive?: boolean;
 }
 /** A GeoJSON line layer for routes/paths. Renders nothing itself — it draws on the map. */
-declare function MapRoute({ id: propId, coordinates, color, width, opacity, dashArray, onClick, onMouseEnter, onMouseLeave, interactive, }: MapRouteProps): null;
+declare function MapRoute({ id: propId, coordinates, color, width, opacity, dashArray, direction, directionSpacing, onClick, onMouseEnter, onMouseLeave, interactive, }: MapRouteProps): null;
 
 /** A single arc to render inside `<MapArc data={...}>`. */
 type MapArcDatum = {
     /** Unique identifier for this arc. Required for hover state tracking and event payloads. */
     id: string | number;
-    /** Start coordinate as [longitude, latitude]. */
+    /**
+     * Start coordinate as [longitude, latitude] — or, inside a `<MapCanvas plan>`,
+     * as [x, y] in plan units.
+     */
     from: [number, number];
-    /** End coordinate as [longitude, latitude]. */
+    /** End coordinate, in the same units as `from`. */
     to: [number, number];
 };
 /** Event payload passed to MapArc interaction callbacks. */
@@ -283,6 +678,8 @@ type MapArcEvent<T extends MapArcDatum = MapArcDatum> = {
     longitude: number;
     /** Latitude of the cursor at the time of the event. */
     latitude: number;
+    /** The cursor in plan units, on a plan map; `null` on a geographic one. */
+    plan: PlanPoint | null;
     /** The underlying MapLibre mouse event for advanced use cases. */
     originalEvent: MapLibreGL.MapMouseEvent;
 };
@@ -333,6 +730,11 @@ type MapArcProps<T extends MapArcDatum = MapArcDatum> = {
 /**
  * Curved great-circle-style arcs between coordinate pairs (flight paths,
  * network links). Pairs well with `<MapCanvas blank projection={{ type: "globe" }}>`.
+ *
+ * Inside a `<MapCanvas plan>` the same component draws plan-space curves — a
+ * material flow between two machine cells, a walking route across a floor. The
+ * curve is built in PLAN units and each sample is then converted, because a
+ * straight lng/lat line bows once Mercator has had its say.
  */
 declare function MapArc<T extends MapArcDatum = MapArcDatum>({ data, id: propId, curvature, samples, paint, layout, hoverPaint, onClick, onHover, interactive, beforeId, }: MapArcProps<T>): null;
 
@@ -344,12 +746,39 @@ declare function MapArc<T extends MapArcDatum = MapArcDatum>({ data, id: propId,
  * relative to the origin so arcs cross the antimeridian via the shorter
  * great-circle direction — resulting longitudes may fall outside [-180, 180],
  * which MapLibre renders correctly on the globe projection.
+ *
+ * `wrapLongitude: false` turns that unwrap off, for coordinates that are not
+ * longitudes at all: on a plan map, an x of 900 in a 1600-unit-wide hall is a
+ * position, and shifting it by 360 would move the arc's end across the floor.
  */
-declare function buildArcCoordinates(from: [number, number], to: [number, number], curvature: number, samples: number): [number, number][];
+declare function buildArcCoordinates(from: [number, number], to: [number, number], curvature: number, samples: number, wrapLongitude?: boolean): [number, number][];
 
 type MapGeoJSONData<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = GeoJSON.FeatureCollection<GeoJSON.Geometry, P> | GeoJSON.Feature<GeoJSON.Geometry, P> | GeoJSON.Geometry | string;
 type MapFillPaint = NonNullable<MapLibreGL.FillLayerSpecification["paint"]>;
 type MapLinePaint = NonNullable<MapLibreGL.LineLayerSpecification["paint"]>;
+/**
+ * A hatch drawn over the fill — the locator-map "area marker" look. `width` is
+ * a stripe's thickness and `gap` the space between stripes, both in CSS px
+ * measured across the 45° stripes. Stripes take the fill colour (a plain
+ * `fill-color`; an expression falls back to the `--foreground` token).
+ */
+interface MapGeoJSONPattern {
+    kind: "stripes";
+    /** Stripe thickness in px (default 2). */
+    width?: number;
+    /** Space between stripes in px (default 4). */
+    gap?: number;
+}
+/**
+ * A soft glow around the area's edge — a second, blurred line layer under the
+ * fill, in the fill colour. `width` is how far the glow reaches out, in px.
+ */
+interface MapGeoJSONVignette {
+    /** Glow reach in px (default 12). */
+    width?: number;
+    /** Glow opacity, 0–1 (default 0.35). */
+    opacity?: number;
+}
 /** A rendered feature with strongly-typed `properties`. */
 type MapGeoJSONFeature<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = Omit<MapLibreGL.MapGeoJSONFeature, "properties"> & {
     properties: P;
@@ -362,17 +791,32 @@ type MapGeoJSONEvent<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProper
     longitude: number;
     /** Latitude of the cursor at the time of the event. */
     latitude: number;
-    /** The underlying MapLibre mouse event for advanced use cases. */
-    originalEvent: MapLibreGL.MapLayerMouseEvent;
+    /**
+     * The cursor in PLAN units, when the canvas declares a `plan` extent —
+     * otherwise `null`. What a plan consumer actually wants: metres along the
+     * hall, not a synthesized longitude.
+     */
+    plan: PlanPoint | null;
+    /**
+     * The underlying MapLibre mouse event for advanced use cases. `null` when
+     * the feature was reached from the KEYBOARD rather than a pointer — there is
+     * no mouse event behind that (c-4/c-2, WCAG 2.1.1).
+     */
+    originalEvent: MapLibreGL.MapLayerMouseEvent | null;
 };
 type MapGeoJSONProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = {
-    /** GeoJSON data (FeatureCollection, Feature, Geometry) or a URL to fetch it from. */
+    /**
+     * GeoJSON data (FeatureCollection, Feature, Geometry) or a URL to fetch it
+     * from. On a canvas with a `plan` extent the coordinates are PLAN units —
+     * `[x, y]` in the plan's own drawing units — and are converted for you.
+     */
     data: MapGeoJSONData<P>;
     /** Optional unique identifier prefix for the source/layers. Auto-generated if not provided. */
     id?: string;
     /**
-     * Feature property to promote to the feature `id`. Required for hover
-     * feature-state (`fillHoverPaint`) and stable `onHover`/`onClick` payloads.
+     * Feature property to promote to the feature `id`. Required for hover and
+     * selected feature-state (`fillHoverPaint`, `selectedId`) and stable
+     * `onHover`/`onClick` payloads.
      */
     promoteId?: string;
     /**
@@ -394,12 +838,66 @@ type MapGeoJSONProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProper
      * as a `case` expression keyed on hover feature-state. Requires `promoteId`.
      */
     fillHoverPaint?: MapFillPaint;
+    /**
+     * The fill layer's opacity, 0–1 — shorthand for `fillPaint["fill-opacity"]`
+     * (which wins when both are set). Default 1, or 0.25 with a `pattern`, so
+     * the stripes read over a tint of the same colour.
+     */
+    fillOpacity?: number;
+    /** Hatch the areas with stripes (see {@link MapGeoJSONPattern}). */
+    pattern?: MapGeoJSONPattern;
+    /** Glow around the areas' edges (see {@link MapGeoJSONVignette}). */
+    vignette?: MapGeoJSONVignette;
+    /** The outline equivalent of `fillHoverPaint`. Requires `promoteId`. */
+    lineHoverPaint?: MapLinePaint;
+    /**
+     * Paint merged onto the fill layer for the feature(s) named by `selectedId`.
+     * Applied outside hover, so a selected feature still looks selected while the
+     * cursor is over it. Requires `promoteId`.
+     */
+    fillSelectedPaint?: MapFillPaint;
+    /** The outline equivalent of `fillSelectedPaint`. Requires `promoteId`. */
+    lineSelectedPaint?: MapLinePaint;
+    /**
+     * The selected feature id(s) — the promoted `promoteId` values. Selection is
+     * the consumer's state; this only paints it.
+     */
+    selectedId?: string | number | readonly (string | number)[] | null;
+    /**
+     * Take over the highlight: when set, the hover paint follows THIS id instead
+     * of the pointer. That is how `MapPlanOverlay` makes a keyboard-focused room
+     * light up exactly as a hovered one does — one channel, one appearance.
+     */
+    hoveredId?: string | number | null;
     /** Callback when a feature is clicked. */
     onClick?: (e: MapGeoJSONEvent<P>) => void;
     /** Callback fired when the hovered feature changes; `null` when the cursor leaves. */
     onHover?: (e: MapGeoJSONEvent<P> | null) => void;
-    /** Whether features respond to mouse events (default: false). */
+    /**
+     * Whether features respond to mouse events. Defaults to `false` on a
+     * geographic canvas and `true` on a plan canvas, where the shapes ARE the
+     * subject rather than a backdrop.
+     */
     interactive?: boolean;
+    /**
+     * The text of a feature in the keyboard list an `interactive` map renders —
+     * one visually-hidden button per feature, so the values a pointer reveals
+     * on hover are reachable by Tab and readable by a screen reader (WCAG 2.1.1
+     * and 1.3.1). Say what the region is AND what it is worth — the same
+     * sentence a hover readout prints. Defaults to the promoted id.
+     */
+    featureLabel?: (feature: MapGeoJSONFeature<P>, index: number) => string;
+    /**
+     * How far, in px, a click may miss a shape and still land on it. Defaults to
+     * 8 px on a plan (so a 20 px seat is a 36 px touch target) and 0 elsewhere.
+     * An exact hit always wins over a padded one.
+     */
+    pickPadding?: number;
+    /**
+     * Width, in px, of the invisible line that makes an outline-only shape
+     * touchable (default 16). Only used when `fillPaint` is `false`.
+     */
+    hitWidth?: number;
     /** Optional MapLibre layer id to insert the layers before (z-order control). */
     beforeId?: string;
 };
@@ -408,8 +906,18 @@ type MapGeoJSONProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProper
  * `MapRoute` / `MapArc` — drop it inside `<MapCanvas>` (typically with `blank`)
  * for choropleths and region/data maps. For full control over expressions and
  * multiple layers, manage layers directly via `useMap()` instead.
+ *
+ * On a canvas that declares a plan extent it is also the shape layer of a
+ * custom (non-geographic) map: rooms, machine cells, aisles and seats written
+ * in the plan's own units.
+ *
+ * ```tsx
+ * <MapCanvas blank plan={{ width: 2400, height: 1600, unit: "cm" }}>
+ *   <MapGeoJSON data={roomsInCentimetres} promoteId="id" selectedId={roomId} />
+ * </MapCanvas>
+ * ```
  */
-declare function MapGeoJSON<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties>({ data, id: propId, promoteId, fillPaint, linePaint, fillHoverPaint, onClick, onHover, interactive, beforeId, }: MapGeoJSONProps<P>): null;
+declare function MapGeoJSON<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties>({ data, id: propId, promoteId, fillPaint, linePaint, fillHoverPaint, fillOpacity, pattern, vignette, lineHoverPaint, fillSelectedPaint, lineSelectedPaint, selectedId, hoveredId, onClick, onHover, interactive: interactiveProp, featureLabel, pickPadding, hitWidth, beforeId, }: MapGeoJSONProps<P>): react.JSX.Element | null;
 
 type MapClusterLayerProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = {
     /** GeoJSON FeatureCollection data or a URL to fetch GeoJSON from. */
@@ -436,7 +944,694 @@ type MapClusterLayerProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonP
  * Clustered point rendering for large point datasets. Cluster circles step
  * through the status tokens (success → warning → destructive) as the point
  * count grows; strokes and count labels use the page surface for contrast.
+ *
+ * NOT for a plan map. The count inside each circle is a `symbol` `text-field`,
+ * and a blank style — which every plan uses — ships no glyph endpoint, so the
+ * counts would silently render as nothing at all. Cluster plan points yourself
+ * and draw the groups with `MapGeoJSON`, or put the count in the DOM overlay.
  */
 declare function MapClusterLayer<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties>({ data, clusterMaxZoom, clusterRadius, clusterColors, clusterThresholds, pointColor, onPointClick, onClusterClick, }: MapClusterLayerProps<P>): null;
 
-export { type BasemapTheme, MapArc, type MapArcDatum, type MapArcEvent, type MapArcLineLayout, type MapArcLinePaint, type MapArcProps, MapCanvas, type MapCanvasProps, type MapCanvasRef, MapClusterLayer, type MapClusterLayerProps, type MapContextValue, MapControls, type MapControlsProps, type MapFillPaint, MapGeoJSON, type MapGeoJSONData, type MapGeoJSONEvent, type MapGeoJSONFeature, type MapGeoJSONProps, type MapLinePaint, MapMarker, MapMarkerContent, type MapMarkerContentProps, MapMarkerLabel, type MapMarkerLabelProps, MapMarkerPopup, type MapMarkerPopupProps, type MapMarkerProps, MapMarkerTooltip, type MapMarkerTooltipProps, MapPopup, type MapPopupProps, MapRoute, type MapRouteProps, type MapStyleOption, type MapViewport, buildArcCoordinates, useMap };
+/**
+ * The picture under a plan: a URL, or an already-decoded image, bitmap or
+ * canvas. A `{ light, dark }` pair swaps with the active theme — a plan drawing
+ * has its own baked-in ink, and one asset rarely reads well on both surfaces.
+ */
+type MapPlanImageSource = string | HTMLImageElement | ImageBitmap | HTMLCanvasElement;
+type MapPlanImageProps = {
+    /** The plan picture. Pass `{ light, dark }` to swap it with the theme. */
+    src: MapPlanImageSource | {
+        light: MapPlanImageSource;
+        dark: MapPlanImageSource;
+    };
+    /**
+     * What the picture shows, for anyone who cannot see it ("Level 3 floor plan,
+     * 14 rooms around a central core"). A plan drawn into WebGL has no accessible
+     * name of its own, so this is the only description of it.
+     */
+    alt?: string;
+    /** Optional identifier for the source/layer. Auto-generated if not provided. */
+    id?: string;
+    /**
+     * Where the picture sits, in PLAN units. Defaults to the whole plan extent, so
+     * a single full-bleed plan needs nothing here. Use it to place one wing, one
+     * machine cell or one carriage inside a larger plan.
+     */
+    extent?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * The four corners in lng/lat (top-left, top-right, bottom-right, bottom-left)
+     * — an escape hatch that also works on an ordinary geographic canvas, like
+     * Leaflet's `imageOverlay`. Wins over `extent`.
+     */
+    coordinates?: MapLibreGL.Coordinates;
+    /**
+     * Opacity, 0–1 (default 1). A photographic or ink-heavy plan usually reads
+     * best held back around 0.35 so the data drawn on top stays the focus.
+     */
+    opacity?: number;
+    /** Hide the picture without tearing the source down — a multi-floor switch (default true). */
+    visible?: boolean;
+    /** `"nearest"` keeps CAD line art crisp when zoomed past its native resolution. */
+    resampling?: "linear" | "nearest";
+    /** MapLibre layer id to insert this layer before (z-order control). */
+    beforeId?: string;
+    /** Fired once the picture has been fetched and decoded. */
+    onLoad?: () => void;
+    /** Fired when the picture cannot be loaded. The plan itself keeps working without it. */
+    onError?: (error: Error) => void;
+};
+/**
+ * The plan picture under the shapes — a floor plan, a factory layout, a deck
+ * plan. The map equivalent of Qlik Sense's image background layer and Leaflet's
+ * `imageOverlay`: by default it covers the whole plan extent declared on
+ * `<MapCanvas plan>`, so its corners need no coordinates at all.
+ *
+ * Render it FIRST among the canvas children so the picture sits under the data,
+ * or pin the order with `beforeId`.
+ *
+ * ```tsx
+ * <MapCanvas blank plan={{ width: 2400, height: 1600, unit: "cm" }}>
+ *   <MapPlanImage src={floorPlanUrl} alt="Level 3 floor plan" opacity={0.35} />
+ *   <MapGeoJSON data={roomsInPlanUnits} promoteId="id" />
+ * </MapCanvas>
+ * ```
+ *
+ * A picture is optional and often worth skipping: a plan drawn as GeoJSON in
+ * plan units paints from tokens, themes correctly, and never blurs.
+ */
+declare function MapPlanImage({ src, alt, id: propId, extent, coordinates, opacity, visible, resampling, beforeId, onLoad, onError, }: MapPlanImageProps): react.JSX.Element;
+
+/** An axis-aligned rectangle in PLAN units. */
+interface PlanRegionBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * One interactive area of a plan — a room, a machine cell, a seat. The overlay
+ * needs a box and a name, not the geometry: a room's shape is drawn by WebGL,
+ * while the keyboard proxy, the label and the readout all work from its box.
+ */
+interface MapPlanRegion {
+    /** Stable id. Must match the feature id the shape layer promotes. */
+    id: string;
+    /** The visible label, and the start of the button's accessible name. */
+    label: string;
+    /** Shown instead of `label` when the box is too small for the full one. */
+    shortLabel?: string;
+    /** Appended to the accessible name — a status word, a seat count, an owner. */
+    description?: string;
+    /** The region's box, in plan units. */
+    bounds: PlanRegionBounds;
+    /** Group id, for plans with more regions than a keyboard can walk (a carriage, a wing). */
+    group?: string;
+    /** The group's own label, used by group mode. */
+    groupLabel?: string;
+}
+/** The centre of a region's box, in plan units. */
+declare function planRegionCentre(bounds: PlanRegionBounds): PlanPoint;
+/** The bounding box of any geometry, in the units its coordinates are written in. */
+declare function planBoundsOfGeometry(geometry: GeoJSON.Geometry): PlanRegionBounds | null;
+/** A field read either from a feature property or computed from the properties. */
+type PlanRegionField<P, T> = string | ((properties: P, index: number) => T);
+interface PlanRegionFields<P extends GeoJSON.GeoJsonProperties> {
+    /** Property name, or a function, giving each region's id. */
+    id: PlanRegionField<P, string>;
+    /** Property name, or a function, giving each region's visible label. */
+    label: PlanRegionField<P, string>;
+    /** Optional short label for a small box. */
+    shortLabel?: PlanRegionField<P, string | undefined>;
+    /** Optional extra words for the accessible name. */
+    description?: PlanRegionField<P, string | undefined>;
+    /** Optional group id. */
+    group?: PlanRegionField<P, string | undefined>;
+    /** Optional group label. */
+    groupLabel?: PlanRegionField<P, string | undefined>;
+}
+/**
+ * Derive the overlay's regions from the same GeoJSON the shape layer draws, so
+ * the keyboard proxy can never drift out of step with the picture.
+ *
+ * ```ts
+ * const regions = planRegionsFromGeoJSON(rooms, { id: "id", label: "name" });
+ * ```
+ */
+declare function planRegionsFromGeoJSON<P extends GeoJSON.GeoJsonProperties>(data: GeoJSON.FeatureCollection<GeoJSON.Geometry, P>, fields: PlanRegionFields<P>): MapPlanRegion[];
+/** The id the overlay gives a group's own button, namespaced away from region ids. */
+declare function planGroupId(group: string): string;
+/** One group of regions, with the synthetic region that stands for the whole of it. */
+interface MapPlanGroup {
+    /** The group's key, as it appeared on its regions. */
+    key: string;
+    /** A region covering every member's box — what group mode puts a button on. */
+    region: MapPlanRegion;
+    /** The group's regions, in reading order. */
+    members: readonly MapPlanRegion[];
+}
+/** The smallest box containing all of them. `null` for an empty list. */
+declare function planBoundsUnion(boxes: readonly PlanRegionBounds[]): PlanRegionBounds | null;
+/**
+ * Bundle regions by their `group`, in first-seen order.
+ *
+ * A region with no `group` becomes a group of one, keyed by its own id: group
+ * mode then still shows everything, instead of quietly dropping whatever was
+ * left ungrouped.
+ */
+declare function planGroupsFromRegions(regions: readonly MapPlanRegion[]): MapPlanGroup[];
+
+/** How the overlay lays its buttons out. */
+type MapPlanOverlayMode = "regions" | "groups";
+type MapPlanOverlayProps = {
+    /**
+     * The interactive regions, in reading order. Keep the array MEMOIZED — it
+     * drives the projection pass.
+     */
+    regions: readonly MapPlanRegion[];
+    /**
+     * Accessible name for the set of regions ("Rooms on level 3"). Supplied by the
+     * consumer so it can be localized.
+     */
+    label: string;
+    /** The selected region id(s) — the same value handed to `<MapGeoJSON selectedId>`. */
+    selectedId?: string | readonly string[] | null;
+    /** Fired when a region is activated by click, `Enter` or `Space`; `null` on `Escape`. */
+    onSelect?: (id: string | null, region: MapPlanRegion | null) => void;
+    /**
+     * Fired when the pointer or keyboard focus moves to another region. Feed it to
+     * `<MapGeoJSON hoveredId>` so the shape and the proxy highlight together.
+     */
+    onActiveChange?: (id: string | null, region: MapPlanRegion | null) => void;
+    /**
+     * `"regions"` (default) puts one button on every region. `"groups"` puts one
+     * button on each `group` instead, and `Enter` descends into its members — the
+     * answer for a plan with more regions than a keyboard can reasonably walk (a
+     * train with 192 seats), where the first question is always "which coach?".
+     */
+    mode?: MapPlanOverlayMode;
+    /**
+     * The accessible description of a group's button — "64 seats", localized by the
+     * consumer. Group mode only.
+     */
+    describeGroup?: (group: MapPlanGroup) => string;
+    /** Draw each region's label in the overlay (default true). */
+    showLabels?: boolean;
+    /** Hide the labels below this zoom, when a fitted plan is too small to read. */
+    labelMinZoom?: number;
+    /**
+     * Let the regions take the pointer as well as the keyboard (default true).
+     * With `false` the overlay is keyboard-only and clicks reach the canvas, where
+     * `<MapGeoJSON onClick>` picks the shape itself — the right choice for
+     * interlocking, non-rectangular shapes whose boxes overlap.
+     */
+    capturePointer?: boolean;
+    /** Extra classes for the overlay root. */
+    className?: string;
+};
+/**
+ * The keyboard and label layer of a plan. MapLibre draws every shape into one
+ * WebGL canvas, so a room is not a DOM element and cannot be focused, named or
+ * given a pressed state. This overlay puts one real `<button aria-pressed>` over
+ * each region — the shapes stay in WebGL, the semantics come back to the DOM.
+ *
+ * ```tsx
+ * <MapCanvas blank plan={{ width: 2400, height: 1600, unit: "cm" }}>
+ *   <MapGeoJSON data={rooms} promoteId="id" selectedId={selection.selectedIds} hoveredId={active} />
+ *   <MapPlanOverlay
+ *     regions={regions}
+ *     label={t("floor.rooms")}
+ *     selectedId={selection.selectedIds}
+ *     onSelect={(id) => selection.select(id)}
+ *     onActiveChange={setActive}
+ *   />
+ * </MapCanvas>
+ * ```
+ *
+ * Roughly 250 regions stay comfortable and 500 is the hard ceiling: past that a
+ * `Tab`-and-arrow walk is no longer a usable way to reach one seat, and the
+ * regions want `mode="groups"` instead — one button per coach or wing, `Enter`
+ * to go in, `Escape` to come back out, `PageUp`/`PageDown` to change group at
+ * either level.
+ */
+declare function MapPlanOverlay({ regions, label, selectedId, onSelect, onActiveChange, mode, describeGroup, showLabels, labelMinZoom, capturePointer, className, }: MapPlanOverlayProps): react.JSX.Element;
+
+/** What a region on a plan can be. */
+type PlanStatus = "free" | "occupied" | "warning" | "down";
+/** Every {@link PlanStatus}, in legend order. */
+declare const PLAN_STATUSES: readonly PlanStatus[];
+/** The generated hatch tile a status is textured with — see `lib/plan-patterns.ts`. */
+type PlanPatternKind = "none" | "diagonal" | "cross" | "dense";
+/** The outline style a status is drawn with: the second non-colour channel. */
+type PlanDash = "solid" | "dotted" | "dashed" | "dot-dash";
+interface PlanStatusEncoding {
+    /** The status tone, for the token rungs below. */
+    tone: "success" | "neutral" | "warning" | "destructive";
+    /** The hatch tile registered with `map.addImage`. */
+    pattern: PlanPatternKind;
+    /** The outline style. */
+    dash: PlanDash;
+    /** `line-dasharray` for the outline; `undefined` keeps it solid. */
+    dashArray: number[] | undefined;
+    /**
+     * A glyph, on the two states that must never be confused with a working one.
+     * `undefined` elsewhere: a glyph on every neutral region is noise.
+     */
+    icon: LucideIcon | undefined;
+    /** Stable glyph name, so a test can assert the four states read apart. */
+    glyph: "none" | "clock" | "alert";
+    /** The token the shape's own ink resolves from (the ≥3:1 mark rung). */
+    colorToken: string;
+    /** Mark (fill-rung) utility, for a legend swatch. */
+    markClass: string;
+    /** Ink (`-text` rung) utility, for coloured text on an ordinary surface. */
+    textClass: string;
+}
+/**
+ * The one table every plan surface reads status from — map paint, legend, table
+ * and readout alike. Frozen, so a surface cannot quietly drift from the others.
+ */
+declare const PLAN_STATUS_ENCODING: Readonly<Record<PlanStatus, PlanStatusEncoding>>;
+/** Fill opacity per interaction state — the feature-state channel, in one place. */
+declare const PLAN_FILL_OPACITY: Readonly<{
+    rest: 0.16;
+    hover: 0.28;
+    selected: 0.36;
+}>;
+/**
+ * A MapLibre `match` expression over a status property, so one paint value can
+ * serve every status without a layer per status.
+ *
+ * ```ts
+ * "line-dasharray": planStatusMatch("status", (encoding) => encoding.dashArray ?? [1, 0])
+ * ```
+ */
+declare function planStatusMatch<T>(property: string, value: (encoding: PlanStatusEncoding, status: PlanStatus) => T, fallback?: T): unknown[];
+
+/** Words for each status, supplied by the consumer so they can be localized. */
+type PlanStatusLabels = Partial<Record<PlanStatus, string>>;
+interface MapPlanLegendProps {
+    /** The word for each status. A status with no word is left out of the legend. */
+    labels: PlanStatusLabels;
+    /** Only show these statuses, in this order. Defaults to all four, in table order. */
+    statuses?: readonly PlanStatus[];
+    /** Optional count per status, e.g. how many rooms are free right now. */
+    counts?: Partial<Record<PlanStatus, number>>;
+    /** Accessible name for the legend as a whole. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The key to the plan's status channels — and the place a sighted user learns
+ * that the dashes and textures mean something.
+ *
+ * Each entry repeats the status three ways: the tone as a swatch, the outline
+ * style as a rule under it, and the word. The two states that must never be
+ * confused with a working one also carry their glyph. In greyscale the outline
+ * styles and the words still tell them apart.
+ */
+declare function MapPlanLegend({ labels, statuses, counts, label, className, }: MapPlanLegendProps): react.JSX.Element | null;
+
+interface MapPlanTableColumn {
+    /** Column key, used for the cell lookup and the React key. */
+    key: string;
+    /** Column header text. */
+    header: string;
+    /** Right-align the column — numbers belong on the end edge. */
+    numeric?: boolean;
+    /** The cell's content for one region. */
+    cell: (region: MapPlanRegion) => ReactNode;
+}
+interface MapPlanTableProps {
+    /** The same regions the plan draws. */
+    regions: readonly MapPlanRegion[];
+    /** What the table is a table of ("Every room on level 3, with its state"). */
+    caption: string;
+    /** Extra columns after the name. The status column is built in when `status` is given. */
+    columns?: readonly MapPlanTableColumn[];
+    /** A region's status, if the plan has one. Adds a status column with the word. */
+    status?: (region: MapPlanRegion) => PlanStatus | undefined;
+    /** The word for each status — supplied by the consumer, so it can be localized. */
+    statusLabels?: Partial<Record<PlanStatus, string>>;
+    /** Header for the built-in status column. */
+    statusHeader?: string;
+    /** Header for the name column. */
+    nameHeader?: string;
+    /** The selected region id(s), mirrored as a row state. */
+    selectedId?: string | readonly string[] | null;
+    /** Called when a row is chosen — the table is a second way to reach a region. */
+    onSelect?: (id: string, region: MapPlanRegion) => void;
+    /**
+     * Hide the table on screen and keep it for print (default false). A WebGL
+     * canvas prints blank, so a plan that is meant to be printed needs this.
+     */
+    printOnly?: boolean;
+    className?: string;
+}
+/**
+ * The plan as words — the parallel channel for anyone who cannot see the canvas,
+ * for anyone who needs to sort or search it, and for the printer, which gets a
+ * blank rectangle where the WebGL canvas was.
+ *
+ * Visible by default rather than `sr-only`: the information is useful to
+ * everyone, and a hidden twin quietly rots.
+ */
+declare function MapPlanTable({ regions, caption, columns, status, statusLabels, statusHeader, nameHeader, selectedId, onSelect, printOnly, className, }: MapPlanTableProps): react.JSX.Element;
+
+interface MapPlanStatusProps {
+    /**
+     * The sentence to announce. Change it when something a person needs to hear
+     * changed — a selection, a status transition — never on every tick of a number.
+     */
+    message: string;
+    /** Milliseconds between announcements (default 2000). */
+    coalesceMs?: number;
+    /** Also show the message (default false: it is an announcement, not chrome). */
+    visible?: boolean;
+    className?: string;
+}
+/**
+ * ONE live region per plan. A WebGL canvas announces nothing by itself, and a
+ * plan that changes — a machine goes down, a room frees up — has to say so
+ * without stealing focus.
+ *
+ * Announcements are coalesced: a live region that re-reads a ticking number is
+ * worse than silence, because it talks over everything else the person is doing.
+ */
+declare function MapPlanStatus({ message, coalesceMs, visible, className, }: MapPlanStatusProps): react.JSX.Element;
+
+interface UsePlanSelectionOptions {
+    /** Allow more than one region to be selected at a time (default false). */
+    multiple?: boolean;
+    /** The ids selected to begin with. */
+    initialSelectedIds?: readonly string[];
+    /** Called whenever the selection changes. */
+    onChange?: (selectedIds: string[]) => void;
+}
+interface PlanSelection {
+    /** The single selected id, or the last of a multiple selection; `null` for none. */
+    selectedId: string | null;
+    /** Every selected id, in selection order. */
+    selectedIds: string[];
+    isSelected: (id: string) => boolean;
+    /** Toggle a region; `null` clears everything. */
+    select: (id: string | null) => void;
+    clear: () => void;
+}
+/**
+ * Selection state for a plan, keyed by region **id** rather than index — a
+ * status tick that re-orders the regions must not move the selection with it.
+ *
+ * Hand `selectedIds` to `<MapGeoJSON selectedId>` for the paint and to
+ * `<MapPlanOverlay selectedId>` for the pressed state, so both read one source.
+ */
+declare function usePlanSelection({ multiple, initialSelectedIds, onChange, }?: UsePlanSelectionOptions): PlanSelection;
+
+/** Where a region ended up on screen, in CSS pixels relative to the canvas. */
+interface PlanScreenBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface UsePlanProjectionOptions {
+    map: MapLibreGL.Map | null;
+    plan: PlanCrs | null;
+    /**
+     * The regions to track. Keep this array MEMOIZED: it is an effect dependency,
+     * and a fresh array every render re-binds the map listeners every render.
+     */
+    regions: readonly MapPlanRegion[];
+    /** Turn tracking off (while the map is still loading, say). */
+    enabled?: boolean;
+    /** Called after each frame's DOM writes, with the boxes that were written. */
+    onFrame?: (boxes: ReadonlyMap<string, PlanScreenBox>) => void;
+}
+/**
+ * ONE projection pass for every plan overlay element, coalesced into a single
+ * `requestAnimationFrame` and writing straight to the DOM — no React state per
+ * frame, no per-element listener. A MapLibre `Marker` binds its own `move`
+ * listener and projects itself, so forty rooms would mean eighty listeners and
+ * forty uncoordinated writes; this is one listener set and one write pass.
+ *
+ * Each region is projected from its FOUR plan corners to a screen box, so the
+ * box stays right even where the projection is not a plain scale.
+ */
+declare function usePlanProjection({ map, plan, regions, enabled, onFrame, }: UsePlanProjectionOptions): {
+    register: (id: string, element: HTMLElement | null) => void;
+    refresh: () => void;
+    boxes: react.RefObject<Map<string, PlanScreenBox>>;
+};
+
+/** Image ids are stable and namespaced, so two plans on one map cannot collide. */
+declare function planPatternImageId(kind: PlanPatternKind): string;
+/**
+ * Draw one seamless tile. Returns `null` for `"none"`, and for any environment
+ * with no 2D context (jsdom) — the dash channel then carries the meaning alone,
+ * which is why status has two non-colour channels rather than one.
+ */
+declare function createPlanPatternTile(kind: PlanPatternKind, ink: string): HTMLCanvasElement | null;
+/**
+ * Register (and re-register) the status textures on a map.
+ *
+ * Re-registration is not optional: `map.setStyle` — which a theme swap performs —
+ * drops every image the style holds, and a `fill-pattern` naming a missing image
+ * renders nothing at all. So the images are (re)added on `styledata` as well as
+ * whenever the ink changes.
+ *
+ * @param ink The colour to draw the hatch in, already resolved from a token.
+ */
+declare function usePlanPatterns(map: MapLibreGL.Map | null, isLoaded: boolean, ink: string): void;
+
+/**
+ * Resolve a semantic token (e.g. `"--primary"`) to a concrete color MapLibre's
+ * WebGL paint can consume, re-resolving whenever the brand theme changes.
+ * This is how default layer paints stay token-driven: WebGL can't read CSS
+ * custom properties, so we read them at runtime off the map container.
+ */
+declare function useTokenColor(name: string, fallback?: string): string;
+
+/**
+ * The direction chevron for `<MapRoute direction>`, drawn on a canvas and
+ * registered with `map.addImage`.
+ *
+ * An icon rather than a text glyph on purpose: a blank MapLibre style ships no
+ * glyph endpoint, so a `symbol` layer's `text-field` renders nothing at all —
+ * while `icon-image` needs no network and no sprite.
+ */
+/** Tile edge, in px. Drawn at `pixelRatio: 2`, so it reads ~12 px on screen. */
+declare const ROUTE_ARROW_SIZE = 24;
+/** Image id for one route's chevron. Per route, because the ink is per route. */
+declare function routeArrowImageId(routeId: string): string;
+/** A raw RGBA image MapLibre accepts, without depending on the DOM's `ImageData`. */
+interface RouteArrowImage {
+    width: number;
+    height: number;
+    data: Uint8ClampedArray;
+}
+/**
+ * A chevron pointing along +x. MapLibre aligns a line-placed symbol's x axis
+ * with the line's direction, so +x is "forward"; `icon-rotate: 180` is backward.
+ *
+ * Returns `null` where there is no 2D context (jsdom) — the caller then leaves
+ * the arrow layer out rather than pointing it at a missing image, which
+ * MapLibre would draw as nothing while warning on every frame.
+ */
+declare function createRouteArrowImage(ink: string): RouteArrowImage | null;
+
+/**
+ * The four corners map furniture (legend, scale bar, north arrow, inset) can
+ * sit in, inside the map box. Chrome, not geography: the corners are LOGICAL
+ * (`start` / `end`), so "top-left" is the reading-start corner and mirrors in
+ * RTL like the rest of the page.
+ */
+type MapCorner = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/** Every corner, clockwise from top-left (for stories and validation). */
+declare const MAP_CORNERS: readonly MapCorner[];
+
+/** The mark a key row shows: a point, an area or a line marker. */
+type MapLegendShape = "circle" | "square" | "line";
+/** One row of a marker key. */
+interface MapLegendItem {
+    /** Stable identity; defaults to `label`. */
+    id?: string;
+    label: string;
+    /** Any CSS colour — use a token reference (`var(--chart-1)`), never a literal. */
+    color: string;
+    /** Default `"circle"`. */
+    shape?: MapLegendShape;
+}
+/**
+ * A colour scale to key: one `colorScaleFor` already built (share it with the
+ * layer it colours), or the values + spec to build one here.
+ */
+type MapLegendScale = ColorScale | {
+    values: readonly ColorScaleValue[];
+    spec: ColorScaleSpec;
+};
+/** Outside the map box (`above` / `below`) or over one of its corners. */
+type MapLegendPosition = "above" | "below" | MapCorner;
+/** `list`: one row per item. `grid`: items flow into as many columns as fit. */
+type MapLegendLayout = "list" | "grid";
+interface MapLegendProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** A heading for the key. */
+    title?: ReactNode;
+    /** Marker key rows. */
+    items?: readonly MapLegendItem[];
+    /** A colour ramp (continuous / stepped) or category key, from `colorScaleFor`. */
+    scale?: MapLegendScale;
+    /** Default `"list"`. */
+    layout?: MapLegendLayout;
+    /**
+     * Where the key sits, optionally per tier — for example
+     * `{ base: "top-left", narrow: "below" }` so it stops covering a phone-width
+     * map. Default `"above"`.
+     */
+    position?: MapResponsive<MapLegendPosition>;
+    /** Formats a ramp's tick values (default: the locale's number format). */
+    formatValue?: (value: number) => string;
+}
+/**
+ * MapLegend — the map's key: marker rows (`items`) and / or a colour ramp
+ * (`scale`, built with `colorScaleFor` from `@elabs-ai/components-ui`, so its
+ * colours are token references in every theme). It sits above or below the
+ * map box, or over a corner, per tier; the house legend look (`text-meta`,
+ * dot markers) matches `charts`' `ChartLegend`. Render inside `<MapCanvas>`.
+ */
+declare const MapLegend: react.ForwardRefExoticComponent<MapLegendProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Metric (`km`, falling back to metres) or imperial (`mi`, falling back to feet). */
+type MapScaleUnit = "km" | "mi";
+/** Metres one CSS px covers at `latitude` and `zoom` (Web Mercator). */
+declare function metresPerPixel(latitude: number, zoom: number): number;
+/** The largest 1 / 2 / 5 × 10ⁿ that is ≤ `max`. */
+declare function niceDistance(max: number): number;
+interface MapScale {
+    /** The bar's length in CSS px. */
+    px: number;
+    /** The distance the bar stands for, in `unit`. */
+    value: number;
+    /** An `Intl.NumberFormat` unit identifier. */
+    unit: "kilometer" | "meter" | "mile" | "foot";
+}
+/**
+ * A round distance that fits in `maxPx` at this latitude and zoom, in `unit`
+ * — kilometres (metres below 1 km) or miles (feet below 1 mi).
+ */
+declare function computeMapScale(latitude: number, zoom: number, unit: MapScaleUnit, maxPx: number): MapScale;
+interface MapScaleBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** `km` (default) or `mi`. */
+    unit?: MapScaleUnit;
+    /** Corner of the map (default `"bottom-left"`). */
+    position?: MapCorner;
+}
+/**
+ * A scale bar for the map's centre latitude — a round distance ("50 km") and
+ * a bar of that length, re-measured as the map moves or resizes. The bar gets
+ * shorter at `narrow`. Render inside `<MapCanvas>`.
+ */
+declare const MapScaleBar: react.ForwardRefExoticComponent<MapScaleBarProps & react.RefAttributes<HTMLDivElement>>;
+
+interface MapNorthArrowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Corner of the map (default `"top-left"`). */
+    position?: MapCorner;
+    /** The arrow's accessible name (default `"North"`). */
+    label?: string;
+}
+/**
+ * A north arrow that appears only while the map is rotated (bearing ≠ 0) and
+ * turns with it — a north-up map needs none. Static furniture, not a control:
+ * `<MapControls showCompass>` is the button that resets the bearing. Render
+ * inside `<MapCanvas>`.
+ */
+declare const MapNorthArrow: react.ForwardRefExoticComponent<MapNorthArrowProps & react.RefAttributes<HTMLDivElement>>;
+
+/** A globe with the main view marked, or a zoomed-out regional map around it. */
+type MapInsetKind = "globe" | "region";
+interface MapInsetProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default `"globe"`. */
+    kind?: MapInsetKind;
+    /** Corner of the main map (default `"top-right"`). */
+    position?: MapCorner;
+    /**
+     * Side length in CSS px, optionally per tier (default
+     * `{ base: 128, narrow: 88 }`). Never more than 40 % of the main map's width.
+     */
+    size?: MapResponsive<number>;
+    /** Basemap styles for the inset (default: the main map's defaults). */
+    styles?: MapCanvasProps["styles"];
+    /** A tile-less inset — pair it with your own layers via `styles`. */
+    blank?: boolean;
+    /**
+     * Draw the basemap's own place labels inside the inset. Default `false`
+     * (c-6): a basemap's labels are sized for a full map, so in an 88–128 px
+     * frame they are sliced mid-word ("EUROP", "AMERIC") and read louder than
+     * the globe they caption. An inset is a locator SHAPE, not a second map.
+     */
+    basemapLabels?: boolean;
+}
+/**
+ * MapInset — a small locator map in a corner of the main map: a globe
+ * (`kind="globe"`) or a zoomed-out regional map (`kind="region"`), with the
+ * main map's current view marked (a box, or a dot when the box would be too
+ * small to see). It is a second, static `<MapCanvas>` that follows the main
+ * view; decorative, so hidden from assistive tech and never a tab stop.
+ * Render inside `<MapCanvas>`.
+ */
+declare const MapInset: react.ForwardRefExoticComponent<MapInsetProps & react.RefAttributes<HTMLDivElement>>;
+
+/** One row of the narrow key. */
+interface MapAnnotationKeyRow {
+    id: string;
+    number: number;
+    text: ReactNode;
+}
+interface MapAnnotationKeyProps extends HTMLAttributes<HTMLOListElement> {
+    /** The rows, in reading order. */
+    rows: readonly MapAnnotationKeyRow[];
+}
+/**
+ * The numbered list `<MapCanvas>` renders under the map at `narrow`, where each
+ * `<MapAnnotation>` shows only its number on the map: "1 Lake Ontario, …".
+ * NOT `aria-hidden` — at `narrow` this list is the only place the text lives.
+ */
+declare const MapAnnotationKey: react.ForwardRefExoticComponent<MapAnnotationKeyProps & react.RefAttributes<HTMLOListElement>>;
+/** A leader line from the point to the text; `arrow` puts an arrowhead at the point. */
+interface MapAnnotationConnector {
+    arrow?: boolean;
+}
+interface MapAnnotationProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Longitude of the point the note is about. */
+    longitude: number;
+    /** Latitude of the point the note is about. */
+    latitude: number;
+    /** The note. Plain text reads best; it moves into the key at `narrow`. */
+    text: ReactNode;
+    /** Where the text sits relative to the point (default `"top-right"`). */
+    anchor?: MapLabelAnchor;
+    /**
+     * The leader line from the point to the text (default: a plain line). Pass
+     * `false` to set the text right beside the point with no line.
+     */
+    connector?: MapAnnotationConnector | false;
+    /**
+     * Whether the note shows at a tier (default `true` everywhere). A hidden note
+     * takes no number, so the key stays gap-free.
+     */
+    showAt?: MapResponsive<boolean>;
+    /** Paint order among annotations: a higher one paints on top (0–8, default 0). */
+    priority?: number;
+}
+/**
+ * A text note pinned to a lon / lat with a leader line — an HTML overlay that
+ * follows the map. At `narrow` the text gives way to a numbered marker and
+ * `<MapCanvas>` lists the notes, in reading order, in a key under the map.
+ * The text box clamps inside the map on both axes. Render inside `<MapCanvas>`.
+ */
+declare const MapAnnotation: react.ForwardRefExoticComponent<MapAnnotationProps & react.RefAttributes<HTMLDivElement>>;
+
+export { type BasemapTheme, DEFAULT_MAP_HEIGHT, MAP_BREAKPOINTS, MAP_BREAKPOINT_THRESHOLDS, MAP_CORNERS, MAP_LABEL_ANCHORS, type MapAnchorGeometry, MapAnnotation, type MapAnnotationConnector, MapAnnotationKey, type MapAnnotationKeyProps, type MapAnnotationKeyRow, type MapAnnotationProps, MapArc, type MapArcDatum, type MapArcEvent, type MapArcLineLayout, type MapArcLinePaint, type MapArcProps, type MapBreakpoint, MapCanvas, type MapCanvasProps, type MapCanvasRef, MapClusterLayer, type MapClusterLayerProps, type MapContextValue, MapControls, type MapControlsProps, type MapCorner, type MapFillPaint, MapGeoJSON, type MapGeoJSONData, type MapGeoJSONEvent, type MapGeoJSONFeature, type MapGeoJSONPattern, type MapGeoJSONProps, type MapGeoJSONVignette, type MapGeoPosition, type MapHeight, MapInset, type MapInsetKind, type MapInsetProps, type MapLabelAnchor, MapLegend, type MapLegendItem, type MapLegendLayout, type MapLegendPosition, type MapLegendProps, type MapLegendScale, type MapLegendShape, type MapLinePaint, MapMarker, MapMarkerContent, type MapMarkerContentProps, MapMarkerLabel, type MapMarkerLabelProps, type MapMarkerLabelSpec, MapMarkerPopup, type MapMarkerPopupProps, type MapMarkerProps, MapMarkerTooltip, type MapMarkerTooltipProps, MapNorthArrow, type MapNorthArrowProps, type MapPlanGroup, MapPlanImage, type MapPlanImageProps, type MapPlanImageSource, MapPlanLegend, type MapPlanLegendProps, MapPlanOverlay, type MapPlanOverlayMode, type MapPlanOverlayProps, type MapPlanPosition, type MapPlanRegion, MapPlanStatus, type MapPlanStatusProps, MapPlanTable, type MapPlanTableColumn, type MapPlanTableProps, MapPopup, type MapPopupProps, type MapPosition, type MapProjectionOption, type MapResponsive, type MapResponsiveByBreakpoint, MapRoute, type MapRouteDirection, type MapRouteProps, type MapScale, MapScaleBar, type MapScaleBarProps, type MapScaleUnit, type MapStyleOption, type MapViewport, PLAN_FILL_OPACITY, PLAN_MERCATOR_SPAN, PLAN_STATUSES, PLAN_STATUS_ENCODING, type PlanCrs, type PlanDash, type PlanExtent, type PlanImageCoordinates, type PlanPatternKind, type PlanPoint, type PlanRegionBounds, type PlanRegionField, type PlanRegionFields, type PlanScreenBox, type PlanSelection, type PlanStatus, type PlanStatusEncoding, type PlanStatusLabels, ROUTE_ARROW_SIZE, type RouteArrowImage, type UsePlanProjectionOptions, type UsePlanSelectionOptions, buildArcCoordinates, computeMapScale, createPlanCrs, createPlanPatternTile, createRouteArrowImage, isMapResponsiveByBreakpoint, mapAnchorGeometry, mapAnchorTransform, mapBreakpointForWidth, metresPerPixel, niceDistance, planBoundsOfGeometry, planBoundsUnion, planGroupId, planGroupsFromRegions, planPatternImageId, planRegionCentre, planRegionsFromGeoJSON, planStatusMatch, resolveMapResponsive, routeArrowImageId, useMap, useMapBreakpoint, useMapResponsive, usePlanPatterns, usePlanProjection, usePlanSelection, useTokenColor };