@12-apps/ui 6.98.1 → 6.100.0

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

@@ -0,0 +1,102 @@
+import { type Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+import { type PlaneBox, type PlanePoint, type Projection } from './RegionMap.helpers';
+import type { RegionMapModel } from './RegionMap.hooks';
+import type { RegionMapCenter, RegionMapCopy, RegionMapDot, RegionMapGhost, RegionMapPin } from './RegionMap.types';
+/**
+ * The movable centre of a `RegionMap` (`pin`, `ghost`, `dots`): a pin the
+ * viewer drags with a mouse or one finger, or focuses and nudges with the
+ * arrow keys, while the VIEW stays where `center` put it — so the areas never
+ * slide under a dragging finger. The circles follow the pin; a dashed ring
+ * and dot stay at `ghost`; `dots` are small points (filled or hollow).
+ *
+ * The pin is HTML over the drawing, at its point by percent like the labels,
+ * carrying `data-region-pin` so a host that zooms the drawing's layers can
+ * move it with them. Its moves are reported, never applied: the host passes
+ * the new point back.
+ */
+/** The movable centre and what is drawn with it, as the drawing receives it. */
+export interface Moving {
+    center: RegionMapCenter;
+    pin?: RegionMapPin;
+    ghost?: RegionMapGhost;
+    dots?: readonly RegionMapDot[];
+    copy: RegionMapCopy;
+}
+type DrawnModel = Pick<RegionMapModel, 'projection' | 'radii'> & {
+    view: PlaneBox;
+};
+/**
+ * What the movable centre draws inside the SVG: the circles around the pin
+ * (else `fallback`, the centre's own circles), the ghost, and the dots.
+ */
+export declare function PinShapes({ model, moving, testId, theme, fallback }: {
+    model: DrawnModel;
+    moving: Moving | undefined;
+    testId: string;
+    theme: Theme;
+    fallback: React.ReactNode;
+}): React.JSX.Element;
+/** What the movable centre draws over the SVG, in HTML: the pin and the scale bar. */
+export declare function PinOverlay({ model, moving, svgRef, testId, theme, }: {
+    model: DrawnModel;
+    moving: Moving | undefined;
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element | null;
+/** The flat projection's inverse around `center` — it is linear. */
+export declare function latLngAt(center: RegionMapCenter, point: PlanePoint): RegionMapCenter;
+interface PinLayerProps {
+    pin: RegionMapPin;
+    center: RegionMapCenter;
+    projection: Projection;
+    view: PlaneBox;
+    /** The drawing's SVG, whose on-screen box maps a pointer to the plane (zoomed or not). */
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    testId: string;
+    theme: Theme;
+}
+/** The draggable pin, as HTML over the drawing. */
+export declare function PinMarker({ pin, center, projection, view, svgRef, testId, theme }: PinLayerProps): React.JSX.Element;
+/** The circles around the pin: solid in the primary colour, faintly filled. */
+export declare function PinCircles({ at, radii, theme }: {
+    at: PlanePoint;
+    radii: readonly number[];
+    theme: Theme;
+}): React.JSX.Element;
+/** Where the circles stood: a dashed ring and dot at `ghost`, and a dashed line from it to the pin. */
+export declare function GhostShapes({ ghost, pinAt, projection, view, testId, theme, }: {
+    ghost: RegionMapGhost;
+    pinAt: PlanePoint;
+    projection: Projection;
+    view: PlaneBox;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element;
+/** The dots: filled with the ink, or hollow (paper with an ink ring). */
+export declare function Dots({ dots, projection, view, testId, theme }: {
+    dots: readonly RegionMapDot[];
+    projection: Projection;
+    view: PlaneBox;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element;
+/** The longest nice length that fits in a quarter of the drawing's width. */
+export declare function scaleMetres(view: PlaneBox): number;
+/**
+ * A scale bar, bottom-left, when the host gives `copy.scale`. It reads what is
+ * on screen: a host that zooms the drawing's layers (a CSS scale on the SVG)
+ * shows fewer metres per pixel, so after every render the bar compares the
+ * SVG's drawn width with its laid-out width — both off the SVG itself — and
+ * spans the drawing's own width, so its share of it is a share of the view.
+ */
+export declare function ScaleBar({ view, copy, svgRef, testId, theme, }: {
+    view: PlaneBox;
+    copy: RegionMapCopy;
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    testId: string;
+    theme: Theme;
+}): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=RegionMapPin.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RegionMapPin.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapPin.tsx"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 export { RegionMap } from './RegionMap';
 export { decodePolyline, hitRegion, projectionAt } from './RegionMap.helpers';
+export { latLngAt, scaleMetres } from './RegionMapPin';
 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';
+export type { RegionMapBounds, RegionMapCircle, RegionMapCenter, RegionMapCopy, RegionMapDot, RegionMapGhost, RegionMapLayer, RegionMapListMode, RegionMapListSort, RegionMapPin, 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,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"}
+{"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,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACvD,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,eAAe,EACf,aAAa,EACb,YAAY,EACZ,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,mBAAmB,CAAC"}

package/package.json

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

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

@@ -9,7 +9,7 @@ import type { RegionMapPoint, RegionMapRegion, RegionMapRing } from './RegionMap
  */
 
 /** Metres per degree of latitude on the mean sphere. */
-const METRES_PER_DEGREE = 111_195;
+export const METRES_PER_DEGREE = 111_195;
 
 /** A projected point, metres east (`x`) and south (`y`) of the centre. */
 export interface PlanePoint {

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

@@ -102,7 +102,10 @@ drawing means copying its view math and losing its frame. So:
 |---|---|---|---|
 | `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 |
+| `circles` | `readonly { radiusMetres }[]` | `[]` | dashed circles; the view fits the largest (solid, around the pin, when there is a `pin`) |
+| `pin` | `{ at, label, ariaLabel, onMove?, onDrop, stepMetres?, disabled? }` | — | the centre as a pin the viewer drags or nudges with the arrow keys; the view stays on `center` |
+| `ghost` | `{ at, radiusMetres }` | — | a dashed ring and dot where the circles stood, a dashed line to the pin |
+| `dots` | `readonly { id, at, filled }[]` | — | small points, filled or hollow, not tappable |
 | `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 |
@@ -132,7 +135,21 @@ drawing means copying its view math and losing its frame. So:
 
 `mapLabel`, `legendExcluded`, `legendCircle(radiusMetres)`, `legendCenter`,
 `listLabel`, `showList(count)` (the count of LISTED areas), `hideList`, and
-`rowState: { excluded, outside }` — a row's state in words, for a screen reader.
+`rowState: { excluded, outside }` — a row's state in words, for a screen reader;
+optional `scale(metres)` — a scale bar's length ("1 km"), shown only when given.
+
+### The movable centre (`pin`)
+
+A store's point placed 200 m off by a geocoder is corrected by dragging it
+where the circles are measured from. So the pin moves and the VIEW does not:
+the areas never slide under a dragging finger. The pin is HTML over the
+drawing (a 44×48 button, `touch-action: none`), carrying `data-region-pin` so
+a host that zooms the drawing's layers can move it with them. A drag is
+captured, clamped inside the view, and kept from the host's own listeners on
+the drawing; each arrow key moves it `stepMetres` (50). Moves are reported
+(`onMove`, `onDrop`), never applied: the host passes the new `at` back.
+`latLngAt(center, planePoint)` is the projection's inverse for a host that
+needs it.
 
 ## Helpers
 

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

@@ -39,6 +39,9 @@ export function RegionMap({
   regions,
   center,
   circles,
+  pin,
+  ghost,
+  dots,
   reach,
   overlay,
   onToggle,
@@ -62,6 +65,7 @@ export function RegionMap({
             model={{ ...model, view }}
             overlay={overlay}
             showCenter={center !== null}
+            moving={center === null ? undefined : { center, pin, ghost, dots, copy }}
             highlightedIds={highlightedIds}
             maxHeight={maxHeight}
             label={copy.mapLabel}

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

@@ -49,6 +49,46 @@ export interface RegionMapRegion {
   detail?: string;
 }
 
+/** A latitude/longitude pair, by name. */
+export interface RegionMapCenter {
+  latitude: number;
+  longitude: number;
+}
+
+/**
+ * The centre as a pin the viewer moves (a store's door). The VIEW stays on
+ * `center`; the pin, and the circles with it, are drawn at `at`. Moves are
+ * reported, never applied: the host passes the new `at` back.
+ */
+export interface RegionMapPin {
+  at: RegionMapCenter;
+  /** Printed beside the pin, e.g. "Store". */
+  label: string;
+  /** The pin's accessible name, e.g. "Store pin. Drag it, or use the arrow keys, to move it". */
+  ariaLabel: string;
+  /** Every point while a pointer drags it. */
+  onMove?: (at: RegionMapCenter) => void;
+  /** Where it came to rest: the pointer let go, or an arrow key moved it. */
+  onDrop: (at: RegionMapCenter) => void;
+  /** Metres one arrow key moves it. Default 50. */
+  stepMetres?: number;
+  /** Held in place (a save in flight). */
+  disabled?: boolean;
+}
+
+/** Where the pin's outermost circle stood: a dashed ring of `radiusMetres` and a dashed dot at `at`. */
+export interface RegionMapGhost {
+  at: RegionMapCenter;
+  radiusMetres: number;
+}
+
+/** A small point on the map (an address), filled or hollow. Not tappable. */
+export interface RegionMapDot {
+  id: string;
+  at: RegionMapCenter;
+  filled: boolean;
+}
+
 /** A circle drawn around the centre, e.g. a delivery ring. */
 export interface RegionMapCircle {
   radiusMetres: number;
@@ -99,6 +139,8 @@ export interface RegionMapCopy {
    * `outside` one (faded). Neither is shown; the row's look carries it.
    */
   rowState: { excluded: string; outside: string };
+  /** A scale bar's length, e.g. "1 km". Omit for no scale bar. */
+  scale?: (metres: number) => string;
 }
 
 /** The order of the list: as given (e.g. nearest first), or by name. */
@@ -120,8 +162,14 @@ export interface RegionMapProps {
    * `null` with no regions renders NOTHING rather than a map of `0, 0`.
    */
   center: { latitude: number; longitude: number } | null;
-  /** Circles around the centre; the view fits the largest. */
+  /** Circles around the centre (around `pin.at` when there is a pin); the view fits the largest. */
   circles?: readonly RegionMapCircle[];
+  /** The centre as a draggable pin; it replaces the centre's dot, and the circles follow it. */
+  pin?: RegionMapPin;
+  /** A dashed ring and dot where the circles stood (drawn with a `pin`). */
+  ghost?: RegionMapGhost;
+  /** Small points, filled or hollow, over the areas and under the pin. */
+  dots?: readonly RegionMapDot[];
   /**
    * 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

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

@@ -9,12 +9,16 @@ import { labelPosition, type AreaGeometry, type DrawnRegion, type PlaneBox } fro
 import type { RegionMapModel } from './RegionMap.hooks';
 import { labelOrder, placeLabels } from './RegionMap.labels';
 import type { RegionMapLayer } from './RegionMap.types';
+import type { Moving } from './RegionMapPin';
+import { PinOverlay, PinShapes } from './RegionMapPin';
 
 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;
+  /** The movable centre and what is drawn with it (`RegionMapProps.pin`, `ghost`, `dots`). */
+  moving?: Moving;
   highlightedIds: readonly string[];
   maxHeight: string | undefined;
   label: string;
@@ -33,17 +37,8 @@ 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 function RegionMapDrawing({
-  model,
-  overlay,
-  showCenter,
-  highlightedIds,
-  maxHeight,
-  label,
-  tappable,
-  testId,
-  theme,
-}: RegionMapDrawingProps): React.JSX.Element {
+export function RegionMapDrawing(props: RegionMapDrawingProps): React.JSX.Element {
+  const { model, overlay, showCenter, moving, highlightedIds, maxHeight, label, tappable, testId, theme } = props;
   const hatchId = `${React.useId().replace(/:/g, '')}-hatch`;
   const { view, drawn } = model;
   const wanted = new Set(highlightedIds);
@@ -52,6 +47,7 @@ export function RegionMapDrawing({
   // claim their place in, so a collision hides the less important one.
   const labelled = labelOrder(drawn.filter((d) => d.excluded || wanted.has(d.id)), wanted);
   const boxRef = React.useRef<HTMLDivElement>(null);
+  const svgRef = React.useRef<SVGSVGElement>(null);
   useLabelPlacement(boxRef, labelled.map((d) => d.id).join('|'), remPx(theme, 4));
   const base = drawn.map((d) => ({ id: d.id, name: d.name, geometry: d.geometry, outside: d.outside === true }));
   return (
@@ -72,6 +68,7 @@ export function RegionMapDrawing({
       ref={boxRef}
     >
       <svg
+        ref={svgRef}
         viewBox={`${view.minX} ${view.minY} ${view.spanX} ${view.spanY}`}
         role="img"
         aria-label={label}
@@ -89,9 +86,9 @@ export function RegionMapDrawing({
             {overlay({ view, projection: model.projection })}
           </g>
         )}
-        <Circles radii={model.radii} theme={theme} />
+        <PinShapes model={model} moving={moving} testId={testId} theme={theme} fallback={<Circles radii={model.radii} theme={theme} />} />
         <Highlights areas={highlighted} testId={testId} theme={theme} />
-        {showCenter && (
+        {showCenter && !moving?.pin && (
           <circle
             cx={0}
             cy={0}
@@ -108,6 +105,7 @@ export function RegionMapDrawing({
       {labelled.map((d) => (
         <AreaLabel key={`l-${d.id}`} area={d} view={view} testId={testId} theme={theme} />
       ))}
+      <PinOverlay model={model} moving={moving} svgRef={svgRef} testId={testId} theme={theme} />
     </Box>
   );
 }