@12-apps/ui 6.84.0 → 6.86.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"RegionMapLegend.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapLegend.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,qEAAqE;AACrE,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,eAAe,EACf,UAAU,EACV,KAAK,EACL,MAAM,GACP,EAAE;IACD,IAAI,EAAE,aAAa,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+CpB"}

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

@@ -0,0 +1,20 @@
+import type { Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+import type { RegionMapCopy, RegionMapListMode, RegionMapListSort, RegionMapProps, RegionMapRegion } from './RegionMap.types';
+/** The areas with a row: `listed`, defaulting to "not outside". */
+export declare function listedRegions(regions: readonly RegionMapRegion[], sort: RegionMapListSort): RegionMapRegion[];
+/**
+ * Every listed area as a toggle button — the keyboard's and the screen
+ * reader's map, and the way to an area too small to tap. `collapsed` puts it
+ * behind one button that names the count; `shown` lays it out with a heading.
+ */
+export declare function RegionMapList({ regions, copy, mode, sort, onToggle, testId, theme, }: {
+    regions: readonly RegionMapRegion[];
+    copy: RegionMapCopy;
+    mode: Exclude<RegionMapListMode, 'none'>;
+    sort: RegionMapListSort;
+    onToggle: RegionMapProps['onToggle'];
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element;
+//# sourceMappingURL=RegionMapList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RegionMapList.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapList.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAW,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EAChB,MAAM,mBAAmB,CAAC;AAE3B,mEAAmE;AACnE,wBAAgB,aAAa,CAC3B,OAAO,EAAE,SAAS,eAAe,EAAE,EACnC,IAAI,EAAE,iBAAiB,GACtB,eAAe,EAAE,CAGnB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE;IACD,OAAO,EAAE,SAAS,eAAe,EAAE,CAAC;IACpC,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,OAAO,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IACzC,IAAI,EAAE,iBAAiB,CAAC;IACxB,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;CACd,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CpB"}

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

@@ -0,0 +1,5 @@
+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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -21,6 +21,7 @@ export * from './FleetMap';
 export * from './MapPreview';
 export * from './Popover';
 export * from './Progress';
+export * from './RegionMap';
 export * from './SectionOnboarding/SectionOnboarding';
 export * from './Sheet';
 export * from './StatCard';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,uCAAuC,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,uCAAuC,CAAC;AACtD,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}

package/dist/types/components/form/total-form/Fields/SelectField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/SelectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA2BvG"}
+{"version":3,"file":"SelectField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/SelectField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA+BvG"}

package/dist/types/components/form/total-form/Fields/ToggleField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/ToggleField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CA6B1F"}
+{"version":3,"file":"ToggleField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/form/total-form/Fields/ToggleField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGtD,sDAAsD;AACtD,MAAM,WAAW,gBAAgB;IAC/B,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAC;IACb,+DAA+D;IAC/D,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAgC1F"}

package/dist/user-avatar.js

@@ -1,7 +1,7 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-DPHSJLMN.js";
+} from "./chunk-JZQYVGPV.js";
 import "./chunk-DQ22UKMZ.js";
 import "./chunk-UDQSIRAP.js";
 import "./chunk-7YJYIMWP.js";
@@ -16,18 +16,18 @@ import "./chunk-PLB6WWXW.js";
 import "./chunk-FKUYRQSP.js";
 import "./chunk-HDBP55R3.js";
 import "./chunk-BA4RHQ3B.js";
-import "./chunk-OKDAHCYE.js";
+import "./chunk-HJJR2WGL.js";
 import "./chunk-TAMIZE4Q.js";
-import "./chunk-KXTNTDRD.js";
+import "./chunk-PPEHBI5O.js";
 import "./chunk-G2FUZALJ.js";
 import "./chunk-AJBRO76D.js";
 import "./chunk-36VXZCJT.js";
 import "./chunk-XOXXG7Q5.js";
 import "./chunk-TYJR4GOF.js";
-import "./chunk-QQHZBJMU.js";
+import "./chunk-RGVNXES5.js";
+import "./chunk-GDN2LUTZ.js";
 import "./chunk-7ZADLRLP.js";
 import "./chunk-3NGE6NE6.js";
-import "./chunk-GDN2LUTZ.js";
 import "./chunk-2FBGDSGC.js";
 import "./chunk-VBP46YP4.js";
 import "./chunk-44BD7SFH.js";

package/dist/utility/WorkflowStep.js

@@ -8,17 +8,17 @@ import "../chunk-UBVKMM3V.js";
 import "../chunk-LL2BWQPM.js";
 import "../chunk-XOXXG7Q5.js";
 import "../chunk-B7ZHEOQQ.js";
-import "../chunk-ENRB6PIN.js";
+import "../chunk-BRHRK7BK.js";
 import "../chunk-25MSGLNU.js";
 import "../chunk-GAXHYRX6.js";
 import "../chunk-NP6SHLQ3.js";
 import "../chunk-TZ23DNKY.js";
 import "../chunk-7ZPUN7TV.js";
 import "../chunk-PT6TCWIW.js";
-import "../chunk-QQHZBJMU.js";
+import "../chunk-RGVNXES5.js";
+import "../chunk-GDN2LUTZ.js";
 import "../chunk-7ZADLRLP.js";
 import "../chunk-3NGE6NE6.js";
-import "../chunk-GDN2LUTZ.js";
 import "../chunk-2FBGDSGC.js";
 import "../chunk-VBP46YP4.js";
 import "../chunk-44BD7SFH.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.84.0",
+  "version": "6.86.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -212,6 +212,10 @@
       "types": "./dist/types/components/data-display/FleetMap/index.d.ts",
       "default": "./dist/data-display/FleetMap.js"
     },
+    "./data-display/RegionMap": {
+      "types": "./dist/types/components/data-display/RegionMap/index.d.ts",
+      "default": "./dist/data-display/RegionMap.js"
+    },
     "./data-display/SectionOnboarding": {
       "types": "./dist/types/components/data-display/SectionOnboarding/index.d.ts",
       "default": "./dist/data-display/SectionOnboarding.js"

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

@@ -0,0 +1,67 @@
+import { decodePolyline } from './RegionMap.helpers';
+import type { RegionMapCopy, RegionMapRegion } from './RegionMap.types';
+
+/**
+ * The copy and the areas every story and test shares.
+ *
+ * The areas are REAL: ten of Belo Horizonte's bairros as IBGE outlines them
+ * (Malha de Bairros, Censo 2022; public data), coverage-simplified at ~11 m,
+ * around a point in Venda Nova. Real shapes are what show the drawing's actual
+ * problems — a hole that is another area, a sliver no finger can hit — which a
+ * grid of squares never would.
+ */
+
+/** English, because stories are developer-facing. A consumer passes its own. */
+export const REGION_MAP_COPY: RegionMapCopy = {
+  mapLabel: 'Map of the neighbourhoods around the store',
+  legendExcluded: 'Not delivered to',
+  legendCircle: (metres) => `${(metres / 1000).toLocaleString('en-US')} km radius`,
+  legendCenter: 'Store',
+  listLabel: 'Neighbourhoods in reach · tap to toggle',
+  showList: (count) => `See the ${count} neighbourhoods as a list`,
+  hideList: 'Hide the list',
+  rowState: { excluded: 'not delivered to', outside: 'outside the radius' },
+};
+
+/** The point the circles are drawn from. */
+export const REGION_MAP_CENTER = { latitude: -19.8136, longitude: -43.9619 };
+
+/** id, name, encoded outline (rings by `,`, polygons by `;`). */
+const OUTLINES: readonly (readonly [string, string, string])[] = [
+  ["3106200190", "Ceu Azul", "rc`xBxookGx@tNJbDtEW@ZsAlKCb@SK_BoBGhDM|D`EAh@^CbEOpGM|KoLpAoDt@iEdBiCr@QhAuBpJkAzIwFqAkG_AcARw@q@Nw@{@GgB_ELq@kCuF}Ag@]c@e@{Aq@w@{HjBu@ZgDpBy@\\yCl@cBTgEMg@NaB`Bk@t@Qx@uOgEOk@cB{As@kBuAc@Iu@VcAb@}@l@k@REtC_BrBeHFqBTwCJg@j@RbCmGfCzBhE`@`@n@dAd@`@}K_A]q@e@qBcA{Ak@`CyJ\\cBXa@r@c@tCq@`Bu@~EcBh@q@v@d@l@u@d@?x@gA|@cBlA{@|@[`AUhAKH`CbESNfCiD`@uAv@i@Ui@f@IUgAbALj@Ql@}@hB|@CrHq@nDyDbBFzW{AdY}A"],
+  ["3106200365", "Serra Verde", "ryzwBnahkGw@`DaBbBaBpEyBpCOIgEjArBdJTl@x@hA}B~AmBjAiBzAoDbEkJaEa@E{@\\kBa@cBq@oAUgCI{A`@u@b@_Ch@y@b@uBnBoAf@w@p@kCRaGNy@YaAIeALmAv@]b@yEpEi@^yAXgAYcDO}@[c@eAoAy@IeAm@{BwBmDgAWoAg@wBuAi@}@yAIyAkBQ{@CaAVcAa@u@Lm@OoAu@e@uB@gAK_A[uCaBmAwASeA?qB`@iB?uAQiACcAa@s@Iy@k@wAWoAJa@E_AXqC\\a@Lu@GaDeC~@w@eDYgBZuCWmAY[zACd@ORq@yA@AoAbLYtH?vGNdFHfQVvBFrIFhEJzIXvRvAxHRhHJzC@lMV|a@t@zR\\CpAoCl@uBPmCx@qCxDgBvBk@h@_C|CcAzCy@vAuChA[b@,l}xwBprgkGA`LyBABmDIcFn@e@pAV"],
+  ["3106200367", "Venda Nova", "le}wBltikGgAaBcAj@CrAyBtAoHdGsApAKb@_FKgApEy@nB{@zAqAhAmB}CdAaAt@kAd@kBrAmIp@yCPe@vAuBfAqA`A{Af@kAXyBFuAFwEXyAX_AxAcDtCeHx@eCpAuBnAgBnAyAlC}BrAy@lQaJf@]tAaBpIpGpNnKU`Dy@O[UiCiDkAeAqAy@cE{BeCcAiGjB?b@YzGuElAfAdDdBhCJdBa@zBlAdF_BfAe@r@s@rCc@dAoG~H]ZyDtE"],
+  ["3106200418", "Santa Monica", "zq`xBhxlkGOp@a@AGr@_@z@w@`AsAjAe@Na@g@m@r@{FzE}@|@e@VyAXS_AqB`@T|@yElADPi@LRz@cB`@?`@sAE{C\\aBJm@RRbDm@FB\\iARGEsBhA{BhAuBhA{Ar@RoCi@UuD{CbAwAv@yCh@oCfGyAjGuAnA]gAeGc@oBc@JcAImEeApA}FaDmAaDs@uGcBeCk@oKmCeCiA}@s@iAoAgAgBa@cAu@wCeAcFy@cD?oAV_D`BpA`D~Cn@\\hORlAIfJiFvKkGj@_@PMpC{AzAs@`DiAhDqAfDkB?}Df@yAzA}B|OjEfB`@~HfCH~@A`BX`FV|GyBXqCp@cCTyAC[b@oBZv@rFRz@|@hCp@x@|AtAz@lAf@vAv@xAd@j@h@lATzAXlENxCF`DLD"],
+  ["3106200457", "Vila Jardim Leblon", "xp~wBzdnkGBx@c@@LfEy@AYz@DwFBQzAs@;pn~wBlsnkGBh@x@EXzFa@BFv@m@@Ce@_@B[UEeA|@CGcBSyBR@"],
+  ["3106200471", "Conjunto Minascaixa", "ryzwBnahkG`AhAfDhELVpCtDlFbHiFxBcA`@kAz@{BpBy@~AkAtCoDiA\\Up@cAREp@mAuBgAiAADr@eDqA_@t@e@b@Um@sBeJfEkANHxBqC`BqE`BcBv@aD"],
+  ["3106200477", "Jardim Leblon", "f|~wBb~mkG^~@N|@hBGNUa@YS_CScDl@S`BKzC]rADr@KX`@l@LJ~AxAI@Tn@AIgA}@FOyBJq@bA_@RUbABhCa@l@]Dp@^Td@GNjAJjCfApTr@|M\\|Ey@FPlET~DeY|A{WzAcBGm@}@Ko@OgCcERIaC{@{QvAX`AvAfDODdAZT^CBd@l@AGw@`@CY{Fy@DCi@SAIqCX{@x@@MgEb@ACy@tBiAzBiArBiAFD,fz~wBrrnkGNbDaAFKqB|@y@,fz~wBrrnkGAM|BGGgAxBMKoAU[eBAG{AbAELd@rAtApBdBBNzFYIuB`AEJrB|@GUmDfAIB~Ab@jHx@E?TzDQJ[x@G\\tGT?D`AM`ALtA]DBt@uDRF`AQ?FfAW?F`A]BN`A}@FIgA[BAaAw@D@bAcDPKuBm@BAoAg@BAcAiCT_DJEeB_@sD_ADEs@hAEI{@x@GUaFaAFAo@{DP"],
+  ["3106200479", "Lagoinha Leblon", "`g{wB|zpkG}N_@d@_VDqEJiFZ_TJyEbBt@zElA`@V|AZfA`@T}@iAa@JaAlCHh@Jz@`BrBfB|AbCUbB`@`@fDrEk@b@|AzChBpB}BrE[g@kAEyBbCeCCI`Cj@DcGzFwBGKhFK`C"],
+  ["3106200482", "Mantiqueira", "x`ywBh{nkGiEg@mCPaBU]e@}@j@aDg@yAIe@a@SbAgBXqEQo@x@u@CY{@cCMc@y@wAGcBi@qCCWg@q@b@e@Bq@y@t@Bx@mC`AmE?_AYcEg@?a@iAEs@c@uB{@eDeBf@Vo@M_Am@MZw@Kk@s@KwD`AOgC|Bm@gAu@{@cLeAw@v@w@|@b@@a@]_FxBW~AGzARtA^tAsAxAWbBy@~Ag@bEY|@m@BWo@oAt@QfFhIJZk@b@_A\\V|@m@r@eA|@w@S[f@eCFYRoATcCsA]LXz@@r@bAAnAThAUR\\lDmAdAFxAqAFXfAFJfAf@GNg@AwA}@{A^y@l@KJ]Is@d@YSa@tDmBjBBZMbA_A~CS`BsA_B_B^{AlBmAbC|Bb@Xf@kA`Cu@nAe@RXtK~KzFiJH]`BA_A|Bt@~ApFfGtBo@vD{@@Tp@XfA}AJ_@hAv@fBoAvCnEUnMo@jc@k@?qA`@k@^c@lAAjJO~G[vAy@vA]hAqMoB{Ew@oEk@{Do@i@EIhAuJoAUdC,njywBzsnkGx@Mv@F?g@p@F?PlALFu@o@AQ}@?cAW@Dh@mA`@q@fAOs@}@Og@DBf@`@Dh@x@"],
+  ["3106200484", "Minascaixa", "r~|wBzahkGqAtBy@dCuCdHyAbDY~@YxAGvEGtAYxBg@jAaAzAgApAwAtBQd@eCeCmBoAyDqCeHoEwEuCoB{AhFyBmFcHqCuDMWgDiEaAiAZc@tCiAx@wAbA{C~B}Cj@i@fBwBpCyDlCy@tBQnCm@BqArB?tEPj@AAx@o@Nm@f@tFjGxBdGnA~AzI~H"],
+];
+
+/** The areas, decoded, none excluded. */
+export const REGION_MAP_AREAS: RegionMapRegion[] = OUTLINES.map(([id, name, outline]) => ({
+  id,
+  name,
+  rings: outline
+    .split(';')
+    .flatMap((polygon) => polygon.split(','))
+    .map((ring) => decodePolyline(ring)),
+}));
+
+/**
+ * Context outside the circle: three of the areas marked `outside` — drawn
+ * faded, left off the list — and one tagged as too small to tap.
+ */
+export const REGION_MAP_WITH_CONTEXT: RegionMapRegion[] = REGION_MAP_AREAS.map((area) => ({
+  ...area,
+  outside: ['Ceu Azul', 'Lagoinha Leblon', 'Mantiqueira'].includes(area.name),
+  detail: area.name === 'Vila Jardim Leblon' ? 'tiny' : undefined,
+}));
+
+/** The same areas with two of them excluded. */
+export const REGION_MAP_WITH_EXCLUSIONS: RegionMapRegion[] = REGION_MAP_AREAS.map((area) => ({
+  ...area,
+  excluded: area.name === 'Minascaixa' || area.name === 'Jardim Leblon',
+}));

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

@@ -0,0 +1,338 @@
+import type { RegionMapPoint, RegionMapRegion, RegionMapRing } from './RegionMap.types';
+
+/**
+ * The geometry behind `RegionMap`, kept pure so it is tested without a DOM.
+ *
+ * Coordinates are projected to METRES on a plane around the centre
+ * (equirectangular): within the tens of kilometres a map like this spans, its
+ * error is far below any outline's own. `y` grows SOUTH, as SVG's does.
+ */
+
+/** Metres per degree of latitude on the mean sphere. */
+const METRES_PER_DEGREE = 111_195;
+
+/** A projected point, metres east (`x`) and south (`y`) of the centre. */
+export interface PlanePoint {
+  x: number;
+  y: number;
+}
+
+/** An SVG viewBox in projected metres. */
+export interface PlaneBox {
+  /** West edge, metres east of the centre. */
+  minX: number;
+  /** North edge, metres south of the centre. */
+  minY: number;
+  /** East-west extent, metres. */
+  spanX: number;
+  /** North-south extent, metres. */
+  spanY: number;
+}
+
+export interface Projection {
+  project: (point: RegionMapPoint) => PlanePoint;
+}
+
+/** The projection around a centre. */
+export function projectionAt(center: { latitude: number; longitude: number }): Projection {
+  const kx = METRES_PER_DEGREE * Math.cos((center.latitude * Math.PI) / 180);
+  return {
+    project: ([latitude, longitude]) => ({
+      x: (longitude - center.longitude) * kx,
+      y: -(latitude - center.latitude) * METRES_PER_DEGREE,
+    }),
+  };
+}
+
+/** A ring as an SVG path segment, closed. */
+function ringPath(ring: readonly PlanePoint[]): string {
+  if (ring.length === 0) return '';
+  const [first, ...rest] = ring;
+  return `M${first!.x.toFixed(1)} ${first!.y.toFixed(1)}${rest.map((p) => `L${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join('')}Z`;
+}
+
+/** Every ring of an area as one path, to be filled with `fill-rule="evenodd"`. */
+export function regionPath(rings: readonly (readonly PlanePoint[])[]): string {
+  return rings.map(ringPath).join('');
+}
+
+/** The smallest and largest of some numbers, in one pass (no spread). */
+export function extent(values: Iterable<number>): { min: number; max: number } | null {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const value of values) {
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+  return min === Infinity ? null : { min, max };
+}
+
+/** The box around projected rings. */
+export function planeBounds(rings: readonly (readonly PlanePoint[])[]): PlaneBox | null {
+  const points = rings.flat();
+  const xs = extent(points.map((p) => p.x));
+  const ys = extent(points.map((p) => p.y));
+  if (xs === null || ys === null) return null;
+  return { minX: xs.min, minY: ys.min, spanX: xs.max - xs.min, spanY: ys.max - ys.min };
+}
+
+/**
+ * The square the map shows: the largest circle with a margin, else every area,
+ * else nothing. Square so the drawing keeps its proportions at every width.
+ */
+export function viewBoxFor(
+  largestRadius: number | null,
+  areaBounds: PlaneBox | null,
+  margin = 0.12,
+): PlaneBox | null {
+  if (largestRadius !== null && largestRadius > 0) {
+    const half = largestRadius * (1 + margin);
+    return { minX: -half, minY: -half, spanX: half * 2, spanY: half * 2 };
+  }
+  if (areaBounds === null) return null;
+  const side = Math.max(areaBounds.spanX, areaBounds.spanY) * (1 + margin) || 1;
+  const cx = areaBounds.minX + areaBounds.spanX / 2;
+  const cy = areaBounds.minY + areaBounds.spanY / 2;
+  return { minX: cx - side / 2, minY: cy - side / 2, spanX: side, spanY: side };
+}
+
+/** Do two boxes overlap? Used to skip areas wholly outside the view. */
+export function boxesOverlap(a: PlaneBox, b: PlaneBox): boolean {
+  return (
+    a.minX <= b.minX + b.spanX &&
+    b.minX <= a.minX + a.spanX &&
+    a.minY <= b.minY + b.spanY &&
+    b.minY <= a.minY + a.spanY
+  );
+}
+
+/** How many of one ring's edges a ray from the point, eastward, crosses. */
+function ringCrossings(ring: readonly PlanePoint[], point: PlanePoint): number {
+  let crossings = 0;
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    const a = ring[i]!;
+    const b = ring[j]!;
+    if (a.y > point.y !== b.y > point.y && point.x < ((b.x - a.x) * (point.y - a.y)) / (b.y - a.y) + a.x) {
+      crossings += 1;
+    }
+  }
+  return crossings;
+}
+
+/** Is the point inside the rings, by the even-odd rule? */
+export function ringsContain(rings: readonly (readonly PlanePoint[])[], point: PlanePoint): boolean {
+  return rings.reduce((sum, ring) => sum + ringCrossings(ring, point), 0) % 2 === 1;
+}
+
+/** The point's distance to one ring's nearest edge. */
+function ringDistance(ring: readonly PlanePoint[], point: PlanePoint): number {
+  let best = Infinity;
+  for (let i = 1; i <= ring.length; i++) {
+    const a = ring[i - 1]!;
+    const b = ring[i % ring.length]!;
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lengthSquared = dx * dx + dy * dy;
+    const t =
+      lengthSquared === 0
+        ? 0
+        : Math.max(0, Math.min(1, ((point.x - a.x) * dx + (point.y - a.y) * dy) / lengthSquared));
+    best = Math.min(best, Math.hypot(a.x + t * dx - point.x, a.y + t * dy - point.y));
+  }
+  return best;
+}
+
+/** The point's distance to the rings: 0 inside, else to the nearest edge. */
+export function ringsDistance(rings: readonly (readonly PlanePoint[])[], point: PlanePoint): number {
+  if (ringsContain(rings, point)) return 0;
+  let best = Infinity;
+  for (const ring of rings) best = Math.min(best, ringDistance(ring, point));
+  return best;
+}
+
+/** An area projected once: what drawing it and hit-testing it read. */
+export interface AreaGeometry {
+  rings: readonly (readonly PlanePoint[])[];
+  /** Null for an area with no points. */
+  bounds: PlaneBox | null;
+  /** Square metres of the largest ring — orders hits and draw order. */
+  area: number;
+  /** The SVG path, every ring, for `fill-rule="evenodd"`. */
+  path: string;
+}
+
+/** A projected area, as the hit test reads it. */
+export interface PlaneRegion {
+  id: string;
+  geometry: AreaGeometry;
+}
+
+/** Is the point within `margin` of the box? */
+function nearBox(box: PlaneBox, point: PlanePoint, margin: number): boolean {
+  return (
+    point.x >= box.minX - margin &&
+    point.x <= box.minX + box.spanX + margin &&
+    point.y >= box.minY - margin &&
+    point.y <= box.minY + box.spanY + margin
+  );
+}
+
+/**
+ * Which area a tap at this point means: the SMALLEST area within `tolerance`
+ * of it, the ones holding it included (distance 0).
+ *
+ * Smallest, because a fingertip is wider than a sliver: a tap that lands on a
+ * big area a few pixels from a 10 m strip almost always meant the strip, and
+ * the big one stays easy to hit everywhere else. An area in another's hole is
+ * smaller than the one around it, so it wins too. Nothing within the
+ * tolerance — empty map — is nothing: a tap there is not a guess. Areas whose
+ * box is not near the point are skipped before any ray is cast.
+ */
+export function hitRegion(
+  regions: readonly PlaneRegion[],
+  point: PlanePoint,
+  tolerance: number,
+): string | null {
+  let best: { id: string; area: number; distance: number } | null = null;
+  for (const { id, geometry } of regions) {
+    const distance = reach(geometry, point, tolerance);
+    if (distance !== null && beats(geometry.area, distance, best)) {
+      best = { id, area: geometry.area, distance };
+    }
+  }
+  return best?.id ?? null;
+}
+
+/** The point's distance to the area, or null when it is beyond the tolerance. */
+function reach(geometry: AreaGeometry, point: PlanePoint, tolerance: number): number | null {
+  if (geometry.bounds === null || !nearBox(geometry.bounds, point, tolerance)) return null;
+  const distance = ringsDistance(geometry.rings, point);
+  return distance <= tolerance ? distance : null;
+}
+
+/** Smaller wins; between two the same size, the nearer. */
+function beats(area: number, distance: number, best: { area: number; distance: number } | null): boolean {
+  if (best === null || area < best.area) return true;
+  return area === best.area && distance < best.distance;
+}
+
+/** Signed area and centroid of one ring (shoelace). */
+function ringCentroid(ring: readonly PlanePoint[]): { area: number; x: number; y: number } {
+  let area = 0;
+  let cx = 0;
+  let cy = 0;
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    const a = ring[j]!;
+    const b = ring[i]!;
+    const cross = a.x * b.y - b.x * a.y;
+    area += cross;
+    cx += (a.x + b.x) * cross;
+    cy += (a.y + b.y) * cross;
+  }
+  area /= 2;
+  if (area === 0) return { area: 0, x: ring[0]?.x ?? 0, y: ring[0]?.y ?? 0 };
+  return { area, x: cx / (6 * area), y: cy / (6 * area) };
+}
+
+/**
+ * The area's size in square metres, read from its LARGEST ring. Rough on
+ * purpose — holes and second parts are ignored — because it only orders
+ * things: which of two areas holding a tap is the smaller, and which is drawn
+ * first so a small one is never painted over by its neighbour.
+ */
+export function planeArea(rings: readonly (readonly PlanePoint[])[]): number {
+  let largest = 0;
+  for (const ring of rings) largest = Math.max(largest, Math.abs(ringCentroid(ring).area));
+  return largest;
+}
+
+/**
+ * Where an area's label goes: the centroid of its largest ring, pulled back
+ * inside the view, as fractions of the view (0..1) — the label is HTML laid
+ * over the drawing, so its type stays the theme's size at every width.
+ */
+export function labelPosition(
+  rings: readonly (readonly PlanePoint[])[],
+  view: PlaneBox,
+  inset = 0.04,
+): { fractionX: number; fractionY: number } {
+  const largest = rings
+    .map(ringCentroid)
+    .reduce((a, b) => (Math.abs(b.area) > Math.abs(a.area) ? b : a), { area: 0, x: 0, y: 0 });
+  const clamp = (value: number): number => Math.min(1 - inset, Math.max(inset, value));
+  return {
+    fractionX: clamp((largest.x - view.minX) / view.spanX),
+    fractionY: clamp((largest.y - view.minY) / view.spanY),
+  };
+}
+
+/** Every ring of an area, projected. */
+export function projectRings(rings: readonly RegionMapRing[], projection: Projection): PlanePoint[][] {
+  return rings.map((ring) => ring.map(projection.project));
+}
+
+/** One area's geometry, projected and pathed. */
+export function areaGeometry(rings: readonly RegionMapRing[], projection: Projection): AreaGeometry {
+  const plane = projectRings(rings, projection);
+  return { rings: plane, bounds: planeBounds(plane), area: planeArea(plane), path: regionPath(plane) };
+}
+
+/**
+ * A cache of geometry per `rings` IDENTITY, for one projection. A host that
+ * re-creates its region objects on every toggle (`{ ...area, excluded }`)
+ * keeps the same `rings` arrays, so a tap re-projects nothing.
+ */
+export function geometryCache(projection: Projection): (rings: readonly RegionMapRing[]) => AreaGeometry {
+  const cache = new WeakMap<readonly RegionMapRing[], AreaGeometry>();
+  return (rings) => {
+    let geometry = cache.get(rings);
+    if (geometry === undefined) {
+      geometry = areaGeometry(rings, projection);
+      cache.set(rings, geometry);
+    }
+    return geometry;
+  };
+}
+
+/** An area as the drawing reads it. */
+export type DrawnRegion = RegionMapRegion & { geometry: AreaGeometry };
+
+/** The areas worth drawing — any part in the view — largest first. */
+export function drawOrder(
+  regions: readonly RegionMapRegion[],
+  geometryOf: (rings: readonly RegionMapRing[]) => AreaGeometry,
+  view: PlaneBox,
+): DrawnRegion[] {
+  return regions
+    .map((region) => ({ ...region, geometry: geometryOf(region.rings) }))
+    .filter(({ geometry }) => geometry.bounds !== null && boxesOverlap(geometry.bounds, view))
+    .sort((a, b) => b.geometry.area - a.geometry.area);
+}
+
+/**
+ * A Google encoded polyline into `[latitude, longitude]` points, at 1e-5 — the
+ * compact form an outline usually travels in. Product-free, so it lives here.
+ */
+export function decodePolyline(encoded: string, precision = 1e5): RegionMapPoint[] {
+  const points: RegionMapPoint[] = [];
+  let index = 0;
+  let lat = 0;
+  let lng = 0;
+  const next = (): number => {
+    let shift = 0;
+    let result = 0;
+    let byte: number;
+    do {
+      byte = encoded.charCodeAt(index++) - 63;
+      result |= (byte & 0x1f) << shift;
+      shift += 5;
+    } while (byte >= 0x20);
+    return result & 1 ? ~(result >> 1) : result >> 1;
+  };
+  while (index < encoded.length) {
+    lat += next();
+    lng += next();
+    points.push([lat / precision, lng / precision]);
+  }
+  return points;
+}