@12-apps/ui 6.90.0 → 6.91.0

package/dist/data-display/InteractiveTooltip.js

@@ -1,9 +1,9 @@
 import "../chunk-TAF3YYMK.js";
 import {
   InteractiveTooltip
-} from "../chunk-Z5WUSI47.js";
-import "../chunk-BCWL7HUO.js";
+} from "../chunk-G3JFESKD.js";
 import "../chunk-QYJ25FWM.js";
+import "../chunk-BCWL7HUO.js";
 import "../chunk-XJAD6E3V.js";
 import "../chunk-F5H2ZXST.js";
 import "../chunk-N3GAFIXG.js";

package/dist/data-display/Lightbox.js

@@ -1,18 +1,18 @@
 import "../chunk-UM35GGCS.js";
 import {
   Lightbox_default
-} from "../chunk-COKPPU42.js";
-import "../chunk-T2G4LDU5.js";
+} from "../chunk-ZIHSCBMN.js";
+import "../chunk-UOS7DEQZ.js";
+import "../chunk-SYGM4SHY.js";
+import "../chunk-WLLUARTC.js";
 import "../chunk-RBGUS7WO.js";
 import "../chunk-IOCY5G43.js";
-import "../chunk-P772HCHI.js";
-import "../chunk-UOS7DEQZ.js";
+import "../chunk-W676GY42.js";
 import "../chunk-HZBDTPPV.js";
 import "../chunk-WZERH7E3.js";
-import "../chunk-BP3ZKIPE.js";
-import "../chunk-TEQYTEM2.js";
-import "../chunk-SYGM4SHY.js";
+import "../chunk-64UNVW6D.js";
 import "../chunk-VQU3CBAL.js";
+import "../chunk-TEQYTEM2.js";
 import "../chunk-XJAD6E3V.js";
 import "../chunk-F5H2ZXST.js";
 import "../chunk-N3GAFIXG.js";

package/dist/data-display/MapPreview.js

@@ -1,21 +1,21 @@
 import "../chunk-EJDOH7IN.js";
 import {
   MapPreview
-} from "../chunk-CJ6XXM4X.js";
-import "../chunk-EEO7M5GU.js";
-import "../chunk-ZH6NYB6Y.js";
+} from "../chunk-U2AEM3K4.js";
+import "../chunk-MYTV353T.js";
+import "../chunk-U2QXQ7D4.js";
 import "../chunk-ZZ4MMUBY.js";
 import "../chunk-6PU5P7QT.js";
 import "../chunk-M5Y42AZ4.js";
+import "../chunk-QSRZOXQI.js";
+import "../chunk-5NT2M2JI.js";
+import "../chunk-H2J2MTRE.js";
 import "../chunk-UAOE3ZPC.js";
 import "../chunk-LTSVYILY.js";
 import "../chunk-EMSMJRP3.js";
 import "../chunk-4YYFZ6TE.js";
-import "../chunk-MIUPTZS6.js";
-import "../chunk-QSRZOXQI.js";
-import "../chunk-5NT2M2JI.js";
-import "../chunk-H2J2MTRE.js";
 import "../chunk-CB6DTWD5.js";
+import "../chunk-MIUPTZS6.js";
 import "../chunk-ARGVUTTL.js";
 import "../chunk-PZS7N74L.js";
 import "../chunk-AA2X5GOT.js";

package/dist/data-display/RegionMap.js

@@ -1,10 +1,14 @@
-import "../chunk-ACFKPE2T.js";
+import "../chunk-DY2I6LMX.js";
 import {
   RegionMap
-} from "../chunk-WNNA6YYE.js";
-import "../chunk-AKE6KVQG.js";
+} from "../chunk-Z7T4EFEC.js";
+import "../chunk-NGXL4R54.js";
 import "../chunk-J3AWGTJY.js";
-import "../chunk-GMRQPNG3.js";
+import "../chunk-G2NVBCF7.js";
+import {
+  boundsOfRings,
+  regionMapView
+} from "../chunk-FWAY2SAI.js";
 import {
   decodePolyline,
   hitRegion,
@@ -39,8 +43,10 @@ import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";
 export {
   RegionMap,
+  boundsOfRings,
   decodePolyline,
   hitRegion,
-  projectionAt
+  projectionAt,
+  regionMapView
 };
 //# sourceMappingURL=RegionMap.js.map

package/dist/data-display/SectionOnboarding.js

@@ -1,12 +1,12 @@
 import {
   SectionOnboarding,
   SectionOnboarding_default
-} from "../chunk-EOIRU62W.js";
+} from "../chunk-42D7KBDH.js";
 import "../chunk-EWFBDAB7.js";
 import "../chunk-LL2BWQPM.js";
-import "../chunk-LXIPBHNJ.js";
-import "../chunk-KLPTOVIX.js";
+import "../chunk-42TOCPXB.js";
 import "../chunk-MWFSIB6K.js";
+import "../chunk-KLPTOVIX.js";
 import "../chunk-XOXXG7Q5.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-XJAD6E3V.js";

package/dist/layout/SettingCard.js

@@ -1,22 +1,22 @@
 import "../chunk-QGUNUXTT.js";
 import {
   SettingToggle
-} from "../chunk-K2VDRODL.js";
+} from "../chunk-3IDL7NK7.js";
 import {
   SettingGroup
-} from "../chunk-GBB23QLL.js";
-import "../chunk-ZDAAHCIS.js";
+} from "../chunk-KJKD6Y6V.js";
+import "../chunk-5HADIIWN.js";
 import "../chunk-XJQNSMGA.js";
 import {
   SETTING_GRID_CONTAINER,
   SettingGrid
-} from "../chunk-CW5Z67NA.js";
+} from "../chunk-JH2XLVWM.js";
 import {
   SettingCard
-} from "../chunk-SKIAWOUC.js";
+} from "../chunk-HOPRZEBM.js";
 import "../chunk-SALQ65SM.js";
-import "../chunk-X2GWR75Q.js";
-import "../chunk-3EIRRLCQ.js";
+import "../chunk-TSEBMVYY.js";
+import "../chunk-HC6OZ7QK.js";
 import "../chunk-IQWPVPV5.js";
 import "../chunk-BFRVMCQM.js";
 import "../chunk-RN7UJI7S.js";
@@ -24,14 +24,14 @@ import "../chunk-JYWF76Z5.js";
 import "../chunk-GGMB6LJH.js";
 import "../chunk-PUFA7FQ7.js";
 import "../chunk-TAF3YYMK.js";
-import "../chunk-Z5WUSI47.js";
-import "../chunk-BCWL7HUO.js";
+import "../chunk-G3JFESKD.js";
 import "../chunk-QYJ25FWM.js";
+import "../chunk-BCWL7HUO.js";
 import "../chunk-2GTORM5E.js";
-import "../chunk-NI67M453.js";
-import "../chunk-DHAXUVMR.js";
-import "../chunk-E5I776YW.js";
+import "../chunk-PGANINQD.js";
+import "../chunk-QN7FVZQD.js";
 import "../chunk-BF4FYOAR.js";
+import "../chunk-E5I776YW.js";
 import "../chunk-4PJ52YBO.js";
 import "../chunk-EIMFA7KP.js";
 import "../chunk-OPP6USJC.js";

package/dist/types/components/data-display/RegionMap/RegionMap.d.ts

@@ -18,8 +18,11 @@ import type { RegionMapProps } from './RegionMap.types';
  *   is that path. A finger's tap takes the SMALLEST area within a few pixels'
  *   worth of metres (`hitRegion`), so a sliver beside a big area can be hit
  *   from the map; one too thin even for that is still on the list.
+ * - **The host can draw inside it.** `reach` widens the view past the largest
+ *   circle and `overlay` draws a layer in the SVG at the map's own projection,
+ *   tap-transparent; `regionMapView` gives the same view to HTML laid over it.
  * - **A toggle is cheap.** Geometry is projected once per `rings` identity,
  *   and the base layer is memoised, so a tap re-renders the hatch and labels.
  */
-export declare function RegionMap({ regions, center, circles, onToggle, highlightedIds, copy, listMode, listSort, maxHeight, className, dataTestId, }: RegionMapProps): React.JSX.Element | null;
+export declare function RegionMap({ regions, center, circles, reach, overlay, onToggle, highlightedIds, copy, listMode, listSort, maxHeight, className, dataTestId, }: RegionMapProps): React.JSX.Element | null;
 //# sourceMappingURL=RegionMap.d.ts.map

package/dist/types/components/data-display/RegionMap/RegionMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionMap.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQxD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAQ,EACR,cAAuB,EACvB,IAAI,EACJ,QAAsB,EACtB,QAAkB,EAClB,SAAS,EACT,SAAS,EACT,UAAyB,GAC1B,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAyC3C"}
+{"version":3,"file":"RegionMap.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQxD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAuB,EACvB,IAAI,EACJ,QAAsB,EACtB,QAAkB,EAClB,SAAS,EACT,SAAS,EACT,UAAyB,GAC1B,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA0C3C"}

package/dist/types/components/data-display/RegionMap/RegionMap.hooks.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import { type DrawnRegion, type PlaneBox } from './RegionMap.helpers';
+import { type DrawnRegion, type PlaneBox, type Projection } from './RegionMap.helpers';
 import type { RegionMapProps } from './RegionMap.types';
 /** What the drawing needs, derived from the props. */
 export interface RegionMapModel {
     /** The square shown, or null when there is nothing to centre on. */
     view: PlaneBox | null;
+    /** The projection drawn with, or null when there is nothing to centre on. */
+    projection: Projection | null;
     drawn: DrawnRegion[];
     /** Radii drawn, in metres; empty without circles. */
     radii: number[];
@@ -24,5 +26,5 @@ export interface RegionMapModel {
  * other tap — a finger, a pen — goes to `hitRegion`: the smallest area within
  * a few pixels, so a sliver beside a big area is reachable from the map.
  */
-export declare function useRegionMap({ regions, center, circles, onToggle, }: Pick<RegionMapProps, 'regions' | 'center' | 'circles' | 'onToggle'>): RegionMapModel;
+export declare function useRegionMap({ regions, center, circles, reach, onToggle, }: Pick<RegionMapProps, 'regions' | 'center' | 'circles' | 'reach' | 'onToggle'>): RegionMapModel;
 //# sourceMappingURL=RegionMap.hooks.d.ts.map

package/dist/types/components/data-display/RegionMap/RegionMap.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionMap.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAOL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,mBAAmB,CAAC;AAEzE,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,oEAAoE;IACpE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,qDAAqD;IACrD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAClE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC3D;AA+DD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,OAAY,EACZ,QAAQ,GACT,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG,cAAc,CAoBtF"}
+{"version":3,"file":"RegionMap.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAML,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,sDAAsD;AACtD,MAAM,WAAW,cAAc;IAC7B,oEAAoE;IACpE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,qDAAqD;IACrD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAClE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;CAC3D;AA8CD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EACN,OAAY,EACZ,KAAK,EACL,QAAQ,GACT,EAAE,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG,cAAc,CAwBhG"}

package/dist/types/components/data-display/RegionMap/RegionMap.types.d.ts

@@ -6,6 +6,8 @@
  * parking sector alike. Coordinates are plain WGS 84 latitude/longitude, and
  * every word arrives through `copy`.
  */
+import type React from 'react';
+import type { PlaneBox, Projection } from './RegionMap.helpers';
 /** A latitude/longitude pair, in that order. */
 export type RegionMapPoint = readonly [latitude: number, longitude: number];
 /** One closed ring: the first point repeated last is allowed, not required. */
@@ -45,6 +47,30 @@ export interface RegionMapRegion {
 export interface RegionMapCircle {
     radiusMetres: number;
 }
+/** A latitude/longitude box, by its four edges in degrees. */
+export interface RegionMapBounds {
+    south: number;
+    west: number;
+    north: number;
+    east: number;
+}
+/**
+ * An extent the view must fit besides its circles: a radius around the centre,
+ * or a box — e.g. the bounds of some outlines (`boundsOfRings`), for a reach
+ * no single radius describes.
+ */
+export type RegionMapReach = {
+    radiusMetres: number;
+} | {
+    bounds: RegionMapBounds;
+};
+/** What a host overlay is drawn with: the map's own view and projection. */
+export interface RegionMapLayer {
+    /** The SVG viewBox, in projected metres. */
+    view: PlaneBox;
+    /** The projection the map draws with — `projectionAt(center)`. */
+    projection: Projection;
+}
 /** Every word the map prints or announces. */
 export interface RegionMapCopy {
     /** The drawing's accessible name (`role="img"`). */
@@ -93,6 +119,20 @@ export interface RegionMapProps {
     } | null;
     /** Circles around the centre; the view fits the largest. */
     circles?: readonly RegionMapCircle[];
+    /**
+     * An extent the view must ALSO fit, before its margin — something the host
+     * draws past the largest circle. With circles the view stays centred on the
+     * centre and grows to the reach's farthest edge; without, it fits the areas
+     * and the reach together. Omit it and the view is the circles' (or areas').
+     */
+    reach?: RegionMapReach;
+    /**
+     * A host layer drawn INSIDE the drawing's SVG, over the excluded hatch and
+     * under the circles, highlights and centre, so it shares the map's view,
+     * projection and frame. It is wrapped in `pointer-events: none`: taps go
+     * through it to the areas. Return SVG elements, in projected metres.
+     */
+    overlay?: (layer: RegionMapLayer) => React.ReactNode;
     /**
      * A tap on an area, or a press of its list button. Omit it and the map is
      * read-only: nothing is tappable and the list rows are not buttons.

package/dist/types/components/data-display/RegionMap/RegionMap.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionMap.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,gDAAgD;AAChD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AAE5E,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,SAAS,cAAc,EAAE,CAAC;AAEtD,sBAAsB;AACtB,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,8CAA8C;AAC9C,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,YAAY,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,wEAAwE;AACxE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,SAAS,eAAe,EAAE,CAAC;IACpC;;;OAGG;IACH,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"RegionMap.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEhE,gDAAgD;AAChD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AAE5E,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,SAAS,cAAc,EAAE,CAAC;AAEtD,sBAAsB;AACtB,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,CAAC;AAEpF,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,kEAAkE;IAClE,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,8CAA8C;AAC9C,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,YAAY,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;CACjD;AAED,wEAAwE;AACxE,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,SAAS,eAAe,EAAE,CAAC;IACpC;;;OAGG;IACH,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACnC,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types/components/data-display/RegionMap/RegionMap.view.d.ts

@@ -0,0 +1,36 @@
+import { type PlaneBox, type Projection } from './RegionMap.helpers';
+import type { RegionMapBounds, RegionMapCircle, RegionMapReach, RegionMapRegion, RegionMapRing } from './RegionMap.types';
+/** The smallest box holding every given box, or null with none. */
+export declare function unionBox(boxes: readonly (PlaneBox | null)[]): PlaneBox | null;
+/** The latitude/longitude box around some outlines — a `reach` no radius describes. */
+export declare function boundsOfRings(rings: readonly RegionMapRing[]): RegionMapBounds | null;
+/** A `reach` as a box in projected metres (a radius is a square around the centre). */
+export declare function reachBox(reach: RegionMapReach, projection: Projection): PlaneBox | null;
+/**
+ * The view, given what it must fit: the outermost circle and the `reach` with
+ * the margin on top, still centred on the centre; else every area and the
+ * reach together. Without a reach it is exactly `viewBoxFor`'s.
+ */
+export declare function viewWithin(outermostMetres: number | null, reach: PlaneBox | null, areaBoxes: () => readonly (PlaneBox | null)[]): PlaneBox | null;
+/** The middle of every area, for a map with no centre of its own. */
+export declare function centreOf(regions: readonly RegionMapRegion[]): {
+    latitude: number;
+    longitude: number;
+} | null;
+/**
+ * The square `RegionMap` shows for these props, in projected metres around
+ * `center` (or the areas' middle) — for a host that lays its own HTML over the
+ * drawing at the same scale: a point `p` sits at
+ * `(p.x - view.minX) / view.spanX` across. With circles the view is centred,
+ * so its half-side is `view.spanX / 2`.
+ */
+export declare function regionMapView({ regions, center, circles, reach, }: {
+    regions: readonly RegionMapRegion[];
+    center: {
+        latitude: number;
+        longitude: number;
+    } | null;
+    circles?: readonly RegionMapCircle[];
+    reach?: RegionMapReach;
+}): PlaneBox | null;
+//# sourceMappingURL=RegionMap.view.d.ts.map

package/dist/types/components/data-display/RegionMap/RegionMap.view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionMap.view.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.view.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EACV,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,EACf,aAAa,EACd,MAAM,mBAAmB,CAAC;AAK3B,mEAAmE;AACnE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,QAAQ,GAAG,IAAI,CAM7E;AAED,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,aAAa,EAAE,GAAG,eAAe,GAAG,IAAI,CAMrF;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,UAAU,GAAG,QAAQ,GAAG,IAAI,CASvF;AAOD;;;;GAIG;AACH,wBAAgB,UAAU,CACxB,eAAe,EAAE,MAAM,GAAG,IAAI,EAC9B,KAAK,EAAE,QAAQ,GAAG,IAAI,EACtB,SAAS,EAAE,MAAM,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,GAC5C,QAAQ,GAAG,IAAI,CAKjB;AAED,qEAAqE;AACrE,wBAAgB,QAAQ,CAAC,OAAO,EAAE,SAAS,eAAe,EAAE,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAI5G;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,MAAM,EACN,OAAY,EACZ,KAAK,GACN,EAAE;IACD,OAAO,EAAE,SAAS,eAAe,EAAE,CAAC;IACpC,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,GAAG,QAAQ,GAAG,IAAI,CASlB"}

package/dist/types/components/data-display/RegionMap/RegionMapDrawing.d.ts

@@ -2,10 +2,13 @@ import { type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 import { type PlaneBox } from './RegionMap.helpers';
 import type { RegionMapModel } from './RegionMap.hooks';
+import type { RegionMapLayer } from './RegionMap.types';
 export interface RegionMapDrawingProps {
     model: RegionMapModel & {
         view: PlaneBox;
     };
+    /** The host's layer, drawn inside the SVG under the circles (`RegionMapProps.overlay`). */
+    overlay?: (layer: RegionMapLayer) => React.ReactNode;
     showCenter: boolean;
     highlightedIds: readonly string[];
     maxHeight: string | undefined;
@@ -24,5 +27,5 @@ export interface RegionMapDrawingProps {
  * The base areas are a memoised layer: a toggle changes `excluded`, not the
  * geometry, so only the hatch, highlight and label layers re-render.
  */
-export declare function RegionMapDrawing({ model, showCenter, highlightedIds, maxHeight, label, tappable, testId, theme, }: RegionMapDrawingProps): React.JSX.Element;
+export declare function RegionMapDrawing({ model, overlay, showCenter, highlightedIds, maxHeight, label, tappable, testId, theme, }: RegionMapDrawingProps): React.JSX.Element;
 //# sourceMappingURL=RegionMapDrawing.d.ts.map

package/dist/types/components/data-display/RegionMap/RegionMapDrawing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RegionMapDrawing.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAsD,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACxG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,cAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4D3C"}
+{"version":3,"file":"RegionMapDrawing.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAsD,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACxG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC3C,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,UAAU,EACV,cAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmE3C"}

package/dist/types/components/data-display/RegionMap/index.d.ts

@@ -1,5 +1,6 @@
 export { RegionMap } from './RegionMap';
 export { decodePolyline, hitRegion, projectionAt } from './RegionMap.helpers';
-export type { AreaGeometry, PlanePoint, PlaneRegion } from './RegionMap.helpers';
-export type { RegionMapCircle, RegionMapCopy, RegionMapListMode, RegionMapListSort, RegionMapPoint, RegionMapProps, RegionMapRegion, RegionMapRing, } from './RegionMap.types';
+export { boundsOfRings, regionMapView } from './RegionMap.view';
+export type { AreaGeometry, PlaneBox, PlanePoint, PlaneRegion, Projection } from './RegionMap.helpers';
+export type { RegionMapBounds, RegionMapCircle, RegionMapCopy, RegionMapLayer, RegionMapListMode, RegionMapListSort, RegionMapPoint, RegionMapProps, RegionMapReach, RegionMapRegion, RegionMapRing, } from './RegionMap.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/data-display/RegionMap/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACjF,YAAY,EACV,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChE,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACvG,YAAY,EACV,eAAe,EACf,eAAe,EACf,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,mBAAmB,CAAC"}

package/dist/user-avatar.js

@@ -1,13 +1,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-BV2LOTMC.js";
+} from "./chunk-Q3SILZTQ.js";
 import "./chunk-DQ22UKMZ.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-7YJYIMWP.js";
-import "./chunk-3ZVUNSFF.js";
+import "./chunk-4QR7LM5F.js";
 import "./chunk-EOQ6EKTS.js";
 import "./chunk-6ZZGK5DT.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-MTEQEPNY.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.90.0",
+  "version": "6.91.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/RegionMap/RegionMap.hooks.ts

@@ -6,16 +6,19 @@ import {
   geometryCache,
   hitRegion,
   projectionAt,
-  viewBoxFor,
   type DrawnRegion,
   type PlaneBox,
+  type Projection,
 } from './RegionMap.helpers';
-import type { RegionMapProps, RegionMapRegion } from './RegionMap.types';
+import type { RegionMapProps } from './RegionMap.types';
+import { centreOf, reachBox, viewWithin } from './RegionMap.view';
 
 /** What the drawing needs, derived from the props. */
 export interface RegionMapModel {
   /** The square shown, or null when there is nothing to centre on. */
   view: PlaneBox | null;
+  /** The projection drawn with, or null when there is nothing to centre on. */
+  projection: Projection | null;
   drawn: DrawnRegion[];
   /** Radii drawn, in metres; empty without circles. */
   radii: number[];
@@ -28,15 +31,6 @@ export interface RegionMapModel {
 /** A tap reaches an area this close: a share of the view (~8 px on a phone). */
 const TOLERANCE_SHARE = 1 / 45;
 
-/** The middle of every area, for a map with no centre of its own. */
-function centreOf(regions: readonly RegionMapRegion[]): { latitude: number; longitude: number } | null {
-  const points = regions.flatMap((r) => r.rings.flat());
-  const lats = extent(points.map(([lat]) => lat));
-  const lngs = extent(points.map(([, lng]) => lng));
-  if (lats === null || lngs === null) return null;
-  return { latitude: (lats.min + lats.max) / 2, longitude: (lngs.min + lngs.max) / 2 };
-}
-
 /** The click, in the drawing's own coordinates — or null where it cannot be read. */
 function svgPoint(event: React.MouseEvent<SVGSVGElement>): { x: number; y: number } | null {
   const svg = event.currentTarget;
@@ -46,16 +40,6 @@ function svgPoint(event: React.MouseEvent<SVGSVGElement>): { x: number; y: numbe
   return { x: point.x, y: point.y };
 }
 
-/** The view: the outermost circle when there is one, else every area's box. */
-function viewOf(outermostMetres: number | null, drawable: () => (PlaneBox | null)[]): PlaneBox | null {
-  if (outermostMetres !== null) return viewBoxFor(outermostMetres, null);
-  const boxes = drawable().filter((box): box is PlaneBox => box !== null);
-  const xs = extent(boxes.flatMap((b) => [b.minX, b.minX + b.spanX]));
-  const ys = extent(boxes.flatMap((b) => [b.minY, b.minY + b.spanY]));
-  if (xs === null || ys === null) return null;
-  return viewBoxFor(null, { minX: xs.min, minY: ys.min, spanX: xs.max - xs.min, spanY: ys.max - ys.min });
-}
-
 /** Which area a click or tap means — see `useRegionMap`. */
 function tappedRegion(
   event: React.MouseEvent<SVGSVGElement>,
@@ -74,16 +58,18 @@ function tappedRegion(
   );
 }
 
-/** The geometry cache for a centre, or null without one. */
-function useGeometry(
-  origin: { latitude: number; longitude: number } | null,
-): ReturnType<typeof geometryCache> | null {
+/** The projection and geometry cache for a centre, or nulls without one. */
+function useGeometry(origin: { latitude: number; longitude: number } | null): {
+  projection: Projection | null;
+  geometryOf: ReturnType<typeof geometryCache> | null;
+} {
   const lat = origin?.latitude ?? null;
   const lng = origin?.longitude ?? null;
-  return React.useMemo(
-    () => (lat === null || lng === null ? null : geometryCache(projectionAt({ latitude: lat, longitude: lng }))),
-    [lat, lng],
-  );
+  return React.useMemo(() => {
+    if (lat === null || lng === null) return { projection: null, geometryOf: null };
+    const projection = projectionAt({ latitude: lat, longitude: lng });
+    return { projection, geometryOf: geometryCache(projection) };
+  }, [lat, lng]);
 }
 
 /**
@@ -101,13 +87,18 @@ export function useRegionMap({
   regions,
   center,
   circles = [],
+  reach,
   onToggle,
-}: Pick<RegionMapProps, 'regions' | 'center' | 'circles' | 'onToggle'>): RegionMapModel {
-  const geometryOf = useGeometry(center ?? centreOf(regions));
+}: Pick<RegionMapProps, 'regions' | 'center' | 'circles' | 'reach' | 'onToggle'>): RegionMapModel {
+  const { projection, geometryOf } = useGeometry(center ?? centreOf(regions));
   const radii = circles.map((c) => c.radiusMetres);
   const outermostMetres = extent(radii)?.max ?? null;
   const view =
-    geometryOf === null ? null : viewOf(outermostMetres, () => regions.map((r) => geometryOf(r.rings).bounds));
+    projection === null || geometryOf === null
+      ? null
+      : viewWithin(outermostMetres, reach === undefined ? null : reachBox(reach, projection), () =>
+          regions.map((r) => geometryOf(r.rings).bounds),
+        );
   const drawn = geometryOf && view ? drawOrder(regions, geometryOf, view) : [];
   const pointerType = React.useRef<string>('mouse');
 
@@ -121,5 +112,5 @@ export function useRegionMap({
     if (hit) onToggle(hit);
   };
 
-  return { view, drawn, radii, outermostMetres, onPointerDown, onClick };
+  return { view, projection, drawn, radii, outermostMetres, onPointerDown, onClick };
 }

package/src/components/data-display/RegionMap/RegionMap.md

@@ -75,6 +75,27 @@ clipped at an edge — the map reads the same at 320 px and at 1600 px. The
 drawing is square; `maxHeight` caps it on a wide screen, and where it sits in a
 wider box is the host's call.
 
+### A host can draw inside it, at its scale
+
+A host often has something of its own to show over the areas — a band served
+past the largest circle, a route, a marker — and laying a second SVG over the
+drawing means copying its view math and losing its frame. So:
+
+- `reach` (`{ radiusMetres }` or `{ bounds }`) is an extent the view must ALSO
+  fit, before the 12% margin. With circles the view stays centred on the centre
+  and grows to the reach's farthest edge, so a ring stays a circle in the
+  middle; without circles the view fits the areas and the reach together. A
+  reach no radius describes — the outlines of some areas — is a box:
+  `boundsOfRings(rings)`. Omit it and the view is exactly what it was.
+- `overlay(layer)` draws inside the SVG with `layer.view` and
+  `layer.projection` (`projectionAt(center)`), over the excluded hatch and
+  under the circles, highlights and centre. It sits in a `pointer-events: none`
+  group, so a tap still reaches the area beneath.
+- `regionMapView(props)` returns the same view for HTML laid over the drawing
+  (a pill on a circle, a note): a point `p` sits at `(p.x - view.minX) /
+  view.spanX` across; with circles the view is centred and its half-side is
+  `view.spanX / 2`.
+
 ## Props
 
 | prop | type | default | what it does |
@@ -82,6 +103,8 @@ wider box is the host's call.
 | `regions` | `readonly RegionMapRegion[]` | — | the areas; drawn when any part is in view |
 | `center` | `{ latitude, longitude } \| null` | — | centre, dot and circles; `null` centres on the areas, no dot |
 | `circles` | `readonly { radiusMetres }[]` | `[]` | dashed circles; the view fits the largest |
+| `reach` | `{ radiusMetres } \| { bounds: { south, west, north, east } }` | — | an extent the view must also fit (margin on top) |
+| `overlay` | `(layer: { view, projection }) => ReactNode` | — | a host layer inside the SVG, under the circles, tap-transparent |
 | `onToggle` | `(id: string) => void` | — | a tap or a list press; omit for read-only |
 | `highlightedIds` | `readonly string[]` | `[]` | areas to point at (a search's hits), outlined and named |
 | `copy` | `RegionMapCopy` | — | every word |
@@ -117,6 +140,10 @@ wider box is the host's call.
   `[latitude, longitude]` points; outlines usually travel this way.
 - `hitRegion(regions, point, tolerance)` and `projectionAt(center)` — the hit
   test and projection the component uses, for a host that draws its own layer.
+- `regionMapView({ regions, center, circles, reach })` — the view the
+  component shows for those props, in projected metres, for HTML laid over it.
+- `boundsOfRings(rings)` — the latitude/longitude box around some outlines,
+  for a `reach` no radius describes.
 
 ## Example
 

package/src/components/data-display/RegionMap/RegionMap.tsx

@@ -29,6 +29,9 @@ const NO_IDS: readonly string[] = [];
  *   is that path. A finger's tap takes the SMALLEST area within a few pixels'
  *   worth of metres (`hitRegion`), so a sliver beside a big area can be hit
  *   from the map; one too thin even for that is still on the list.
+ * - **The host can draw inside it.** `reach` widens the view past the largest
+ *   circle and `overlay` draws a layer in the SVG at the map's own projection,
+ *   tap-transparent; `regionMapView` gives the same view to HTML laid over it.
  * - **A toggle is cheap.** Geometry is projected once per `rings` identity,
  *   and the base layer is memoised, so a tap re-renders the hatch and labels.
  */
@@ -36,6 +39,8 @@ export function RegionMap({
   regions,
   center,
   circles,
+  reach,
+  overlay,
   onToggle,
   highlightedIds = NO_IDS,
   copy,
@@ -46,7 +51,7 @@ export function RegionMap({
   dataTestId = 'region-map',
 }: RegionMapProps): React.JSX.Element | null {
   const theme = useTheme();
-  const model = useRegionMap({ regions, center, circles, onToggle });
+  const model = useRegionMap({ regions, center, circles, reach, onToggle });
   const { view } = model;
   if (view === null && regions.length === 0) return null;
   return (
@@ -55,6 +60,7 @@ export function RegionMap({
         <>
           <RegionMapDrawing
             model={{ ...model, view }}
+            overlay={overlay}
             showCenter={center !== null}
             highlightedIds={highlightedIds}
             maxHeight={maxHeight}