@12-apps/ui 6.98.0 → 6.99.0

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>
   );
 }

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

@@ -0,0 +1,388 @@
+import Box from '@mui/material/Box/index.js';
+import { alpha, type Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+
+import { rem } from '../../../tokens/relative';
+
+import { METRES_PER_DEGREE, 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 function PinShapes({ model, moving, testId, theme, fallback }: { model: DrawnModel; moving: Moving | undefined; testId: string; theme: Theme; fallback: React.ReactNode }): React.JSX.Element {
+  const { projection, view } = model;
+  if (!moving || !projection) return <>{fallback}</>;
+  const pinAt = moving.pin ? projection.project([moving.pin.at.latitude, moving.pin.at.longitude]) : null;
+  return (
+    <>
+      {pinAt ? <PinCircles at={pinAt} radii={model.radii} theme={theme} /> : fallback}
+      {pinAt && moving.ghost ? <GhostShapes ghost={moving.ghost} pinAt={pinAt} projection={projection} view={view} testId={testId} theme={theme} /> : null}
+      {moving.dots ? <Dots dots={moving.dots} projection={projection} view={view} testId={testId} theme={theme} /> : null}
+    </>
+  );
+}
+
+/** What the movable centre draws over the SVG, in HTML: the pin and the scale bar. */
+export 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 {
+  if (!moving || !model.projection) return null;
+  return (
+    <>
+      {moving.pin ? <PinMarker pin={moving.pin} center={moving.center} projection={model.projection} view={model.view} svgRef={svgRef} testId={testId} theme={theme} /> : null}
+      <ScaleBar view={model.view} copy={moving.copy} svgRef={svgRef} testId={testId} theme={theme} />
+    </>
+  );
+}
+
+/** The flat projection's inverse around `center` — it is linear. */
+export function latLngAt(center: RegionMapCenter, point: PlanePoint): RegionMapCenter {
+  const kx = METRES_PER_DEGREE * Math.cos((center.latitude * Math.PI) / 180);
+  return { latitude: center.latitude - point.y / METRES_PER_DEGREE, longitude: center.longitude + point.x / kx };
+}
+
+/** A point of the plane as fractions of the view (0..1 across, 0..1 down). */
+function fractionOf(view: PlaneBox, point: PlanePoint): { x: number; y: number } {
+  return { x: (point.x - view.minX) / view.spanX, y: (point.y - view.minY) / view.spanY };
+}
+
+/** Keep a fraction inside the view, a hair in from its edge (the mock's clamp). */
+const clampFraction = (value: number): number => Math.min(0.995, Math.max(0.005, value));
+
+/** A plane point kept inside the view by the same clamp a drag gets. */
+function clampToView(view: PlaneBox, point: PlanePoint): PlanePoint {
+  const at = fractionOf(view, point);
+  return { x: view.minX + clampFraction(at.x) * view.spanX, y: view.minY + clampFraction(at.y) * view.spanY };
+}
+
+/** Arrow keys, as metres east and north per press. */
+const ARROWS: Record<string, [number, number]> = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, 1], ArrowDown: [0, -1] };
+
+/** One arrow key: 50 m unless the host says otherwise. */
+const DEFAULT_STEP_METRES = 50;
+
+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 function PinMarker({ pin, center, projection, view, svgRef, testId, theme }: PinLayerProps): React.JSX.Element {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const live = React.useRef({ pin, center, view });
+  live.current = { pin, center, view };
+  usePinDrag(ref, svgRef, live);
+  const at = fractionOf(view, projection.project([pin.at.latitude, pin.at.longitude]));
+  const onKeyDown = (event: React.KeyboardEvent): void => {
+    const arrow = ARROWS[event.key];
+    if (!arrow || pin.disabled) return;
+    event.preventDefault();
+    const step = pin.stepMetres ?? DEFAULT_STEP_METRES;
+    const plane = projection.project([pin.at.latitude, pin.at.longitude]);
+    const next = latLngAt(center, clampToView(view, { x: plane.x + arrow[0] * step, y: plane.y - arrow[1] * step }));
+    pin.onMove?.(next);
+    pin.onDrop(next);
+  };
+  return (
+    <Box
+      ref={ref}
+      role="button"
+      tabIndex={pin.disabled ? -1 : 0}
+      aria-label={pin.ariaLabel}
+      aria-disabled={pin.disabled || undefined}
+      onKeyDown={onKeyDown}
+      data-testid={`${testId}-pin`}
+      data-region-pin=""
+      style={{ left: `${(at.x * 100).toFixed(3)}%`, top: `${(at.y * 100).toFixed(3)}%` }}
+      sx={{
+        position: 'absolute',
+        transform: 'translate(-50%, -100%)',
+        width: rem(theme, 44),
+        height: rem(theme, 48),
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+        cursor: pin.disabled ? 'default' : 'grab',
+        touchAction: 'none',
+        zIndex: 2,
+        borderRadius: 1,
+        '&:focus-visible': { outline: `${rem(theme, 2)} solid`, outlineColor: 'primary.main', outlineOffset: rem(theme, 2) },
+      }}
+    >
+      <Box component="svg" viewBox="0 0 32 42" aria-hidden="true" sx={{ width: rem(theme, 32), height: rem(theme, 42) }}>
+        <path
+          d="M16 41C16 41 3 25 3 15.5A13 13 0 1 1 29 15.5C29 25 16 41 16 41Z"
+          fill={theme.palette.primary.main}
+          stroke={theme.palette.background.paper}
+          strokeWidth={2}
+        />
+        <circle cx="16" cy="15.5" r="5" fill={theme.palette.background.paper} />
+      </Box>
+      <Box
+        component="span"
+        aria-hidden
+        sx={{
+          position: 'absolute',
+          left: '88%',
+          top: 0,
+          px: 0.75,
+          borderRadius: 0.5,
+          border: 1,
+          borderColor: 'divider',
+          bgcolor: 'background.paper',
+          color: 'text.primary',
+          fontSize: rem(theme, 12),
+          fontWeight: 600,
+          whiteSpace: 'nowrap',
+          pointerEvents: 'none',
+        }}
+      >
+        {pin.label}
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * The pointer drag: native listeners on the pin, so a host's own listeners on
+ * the drawing (a pan, a tap) never see the press; captured, so a finger that
+ * leaves the pin keeps dragging it; clamped inside the view.
+ */
+function usePinDrag(
+  ref: React.RefObject<HTMLDivElement | null>,
+  svgRef: React.RefObject<SVGSVGElement | null>,
+  live: React.RefObject<{ pin: RegionMapPin; center: RegionMapCenter; view: PlaneBox }>,
+): void {
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) return undefined;
+    let dragging: number | null = null;
+    // Where the last move put the pin: a cancelled gesture (a browser may
+    // report 0,0 for it) rests there rather than jumping to the corner.
+    let last: RegionMapCenter | null = null;
+    const pointAt = (event: PointerEvent): RegionMapCenter | null => {
+      const box = svgRef.current?.getBoundingClientRect();
+      if (!box || box.width === 0 || box.height === 0) return null;
+      const { view, center } = live.current;
+      if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) return null;
+      const fx = clampFraction((event.clientX - box.left) / box.width);
+      const fy = clampFraction((event.clientY - box.top) / box.height);
+      return latLngAt(center, { x: view.minX + fx * view.spanX, y: view.minY + fy * view.spanY });
+    };
+    const down = (event: PointerEvent): void => {
+      event.stopPropagation();
+      if (live.current.pin.disabled) return;
+      event.preventDefault();
+      dragging = event.pointerId;
+      last = null;
+      element.setPointerCapture?.(event.pointerId);
+    };
+    const move = (event: PointerEvent): void => {
+      if (dragging !== event.pointerId) return;
+      event.stopPropagation();
+      const at = pointAt(event);
+      if (!at) return;
+      last = at;
+      live.current.pin.onMove?.(at);
+    };
+    const up = (event: PointerEvent): void => {
+      if (dragging !== event.pointerId) return;
+      event.stopPropagation();
+      dragging = null;
+      const at = event.type === 'pointercancel' ? last : (pointAt(event) ?? last);
+      if (at) live.current.pin.onDrop(at);
+    };
+    // A click that ends a drag is the drag's, not a tap on the area under it.
+    const click = (event: MouseEvent): void => event.stopPropagation();
+    element.addEventListener('pointerdown', down);
+    element.addEventListener('pointermove', move);
+    element.addEventListener('pointerup', up);
+    element.addEventListener('pointercancel', up);
+    element.addEventListener('click', click);
+    return () => {
+      element.removeEventListener('pointerdown', down);
+      element.removeEventListener('pointermove', move);
+      element.removeEventListener('pointerup', up);
+      element.removeEventListener('pointercancel', up);
+      element.removeEventListener('click', click);
+    };
+  }, [ref, svgRef, live]);
+}
+
+/** The circles around the pin: solid in the primary colour, faintly filled. */
+export function PinCircles({ at, radii, theme }: { at: PlanePoint; radii: readonly number[]; theme: Theme }): React.JSX.Element {
+  return (
+    <>
+      {radii.map((radius) => (
+        <circle
+          key={radius}
+          cx={at.x}
+          cy={at.y}
+          r={radius}
+          fill={alpha(theme.palette.primary.main, 0.06)}
+          stroke={theme.palette.primary.main}
+          strokeWidth={2.25}
+          vectorEffect="non-scaling-stroke"
+          pointerEvents="none"
+        />
+      ))}
+    </>
+  );
+}
+
+/** Where the circles stood: a dashed ring and dot at `ghost`, and a dashed line from it to the pin. */
+export function GhostShapes({
+  ghost,
+  pinAt,
+  projection,
+  view,
+  testId,
+  theme,
+}: {
+  ghost: RegionMapGhost;
+  pinAt: PlanePoint;
+  projection: Projection;
+  view: PlaneBox;
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element {
+  const at = projection.project([ghost.at.latitude, ghost.at.longitude]);
+  const stroke = theme.palette.text.secondary;
+  const common = { fill: 'none', stroke, vectorEffect: 'non-scaling-stroke', pointerEvents: 'none' } as const;
+  return (
+    <g data-testid={`${testId}-ghost`}>
+      <circle cx={at.x} cy={at.y} r={ghost.radiusMetres} strokeWidth={1.5} strokeDasharray="6 5" {...common} />
+      <line x1={at.x} y1={at.y} x2={pinAt.x} y2={pinAt.y} strokeWidth={1.5} strokeDasharray="4 4" {...common} />
+      <circle cx={at.x} cy={at.y} r={view.spanX / 110} strokeWidth={2} strokeDasharray="3 2" {...common} fill={alpha(theme.palette.background.paper, 0.7)} />
+    </g>
+  );
+}
+
+/** The dots: filled with the ink, or hollow (paper with an ink ring). */
+export function Dots({ dots, projection, view, testId, theme }: { dots: readonly RegionMapDot[]; projection: Projection; view: PlaneBox; testId: string; theme: Theme }): React.JSX.Element {
+  return (
+    <g data-testid={`${testId}-dots`}>
+      {dots.map((dot) => {
+        const at = projection.project([dot.at.latitude, dot.at.longitude]);
+        return (
+          <circle
+            key={dot.id}
+            cx={at.x}
+            cy={at.y}
+            r={view.spanX / 150}
+            fill={dot.filled ? theme.palette.text.primary : theme.palette.background.paper}
+            stroke={theme.palette.text.primary}
+            strokeWidth={2}
+            vectorEffect="non-scaling-stroke"
+            pointerEvents="none"
+            data-filled={dot.filled ? 'true' : 'false'}
+          />
+        );
+      })}
+    </g>
+  );
+}
+
+/** Nice lengths a scale bar may take, in metres. */
+const SCALE_STEPS = [50, 100, 200, 500, 1000, 2000, 5000, 10000, 20000, 50000];
+
+/** The longest nice length that fits in a quarter of the drawing's width. */
+export function scaleMetres(view: PlaneBox): number {
+  const quarter = view.spanX / 4;
+  return SCALE_STEPS.filter((step) => step <= quarter).at(-1) ?? SCALE_STEPS[0]!;
+}
+
+/**
+ * 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 function ScaleBar({
+  view,
+  copy,
+  svgRef,
+  testId,
+  theme,
+}: {
+  view: PlaneBox;
+  copy: RegionMapCopy;
+  svgRef: React.RefObject<SVGSVGElement | null>;
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element | null {
+  // What the drawing shows on screen: its laid-out width, and its width as
+  // drawn (a host's CSS scale on the SVG), both read off the SVG itself.
+  const [screen, setScreen] = React.useState({ laidOut: 0, drawn: 0 });
+  const wanted = copy.scale !== undefined;
+  React.useLayoutEffect(() => {
+    if (!wanted) return;
+    const svg = svgRef.current;
+    const next = { laidOut: svg?.clientWidth ?? 0, drawn: svg?.getBoundingClientRect().width ?? 0 };
+    if (next.laidOut !== screen.laidOut || Math.abs(next.drawn - screen.drawn) > 0.5) setScreen(next);
+  });
+  if (!copy.scale) return null;
+  const zoom = screen.laidOut > 0 && screen.drawn > 0 ? screen.drawn / screen.laidOut : 1;
+  const metres = scaleMetres({ ...view, spanX: view.spanX / zoom });
+  // The bar's share of the drawing's width: metres on screen over the metres the width shows.
+  const share = (metres * zoom) / view.spanX;
+  return (
+    <Box
+      data-testid={`${testId}-scale`}
+      aria-hidden
+      sx={{ position: 'absolute', left: 0, right: 0, bottom: rem(theme, 10), pointerEvents: 'none', zIndex: 1 }}
+    >
+      <Box component="span" sx={{ display: 'block', ml: rem(theme, 10), fontSize: rem(theme, 11), color: 'text.secondary' }}>
+        {copy.scale(metres)}
+      </Box>
+      <Box
+        component="span"
+        sx={{ display: 'block', height: rem(theme, 4), ml: rem(theme, 10), width: `${(share * 100).toFixed(2)}%`, borderStyle: 'solid', borderWidth: `0 ${rem(theme, 1.5)} ${rem(theme, 1.5)}`, borderColor: 'text.secondary' }}
+      />
+    </Box>
+  );
+}

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

@@ -1,14 +1,19 @@
 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,
+  RegionMapCenter,
   RegionMapCopy,
+  RegionMapDot,
+  RegionMapGhost,
   RegionMapLayer,
   RegionMapListMode,
   RegionMapListSort,
+  RegionMapPin,
   RegionMapPoint,
   RegionMapProps,
   RegionMapReach,

package/dist/chunk-3CXRHRGE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/RegionMap/RegionMap.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { useRegionMap } from './RegionMap.hooks';\nimport type { RegionMapProps } from './RegionMap.types';\nimport { RegionMapDrawing } from './RegionMapDrawing';\nimport { RegionMapLegend } from './RegionMapLegend';\nimport { RegionMapList } from './RegionMapList';\n\n/** One empty list, so the default does not change identity per render. */\nconst NO_IDS: readonly string[] = [];\n\n/**\n * A hand-drawn map of named areas around a centre; a tap toggles an area.\n *\n * Drawn as inline SVG over a plain background — no tile server, no API key,\n * nothing fetched — because the question it answers is \"which of THESE areas\",\n * not \"what is the street called\". Four choices shape it:\n *\n * - **The list is the accessible way in.** The drawing is one `role=\"img\"`\n *   with a name; its areas are not tab stops (dozens of them, many too small to\n *   tap on a phone). Every area is also a toggle button in the list beneath,\n *   with `aria-pressed`, which is what a keyboard and a screen reader use —\n *   and what reaches a sliver no finger can.\n * - **Excluded is hatched AND named, never only coloured,** and never in the\n *   error colour: leaving an area out is a choice, not a failure.\n * - **The hit test is ours, not only the browser's.** A mouse click on a path\n *   is that path. A finger's tap takes the SMALLEST area within a few pixels'\n *   worth of metres (`hitRegion`), so a sliver beside a big area can be hit\n *   from the map; one too thin even for that is still on the list.\n * - **The host can draw inside it.** `reach` widens the view past the largest\n *   circle and `overlay` draws a layer in the SVG at the map's own projection,\n *   tap-transparent; `regionMapView` gives the same view to HTML laid over it.\n * - **A toggle is cheap.** Geometry is projected once per `rings` identity,\n *   and the base layer is memoised, so a tap re-renders the hatch and labels.\n */\nexport function RegionMap({\n  regions,\n  center,\n  circles,\n  reach,\n  overlay,\n  onToggle,\n  highlightedIds = NO_IDS,\n  copy,\n  listMode = 'collapsed',\n  listSort = 'given',\n  maxHeight,\n  className,\n  dataTestId = 'region-map',\n}: RegionMapProps): React.JSX.Element | null {\n  const theme = useTheme();\n  const model = useRegionMap({ regions, center, circles, reach, onToggle });\n  const { view } = model;\n  if (view === null && regions.length === 0) return null;\n  return (\n    <Box className={className} data-testid={dataTestId}>\n      {view && (\n        <>\n          <RegionMapDrawing\n            model={{ ...model, view }}\n            overlay={overlay}\n            showCenter={center !== null}\n            highlightedIds={highlightedIds}\n            maxHeight={maxHeight}\n            label={copy.mapLabel}\n            tappable={onToggle !== undefined}\n            testId={dataTestId}\n            theme={theme}\n          />\n          <RegionMapLegend\n            copy={copy}\n            outermostMetres={model.outermostMetres}\n            showCenter={center !== null}\n            theme={theme}\n            testId={dataTestId}\n          />\n        </>\n      )}\n      {listMode !== 'none' && (\n        <RegionMapList\n          regions={regions}\n          copy={copy}\n          mode={listMode}\n          sort={listSort}\n          onToggle={onToggle}\n          testId={dataTestId}\n          theme={theme}\n        />\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AA0DjB,mBACE,KADF;AAhDR,IAAM,SAA4B,CAAC;AA0B5B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAA6C;AAC3C,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,aAAa,EAAE,SAAS,QAAQ,SAAS,OAAO,SAAS,CAAC;AACxE,QAAM,EAAE,KAAK,IAAI;AACjB,MAAI,SAAS,QAAQ,QAAQ,WAAW,EAAG,QAAO;AAClD,SACE,qBAAC,OAAI,WAAsB,eAAa,YACrC;AAAA,YACC,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,EAAE,GAAG,OAAO,KAAK;AAAA,UACxB;AAAA,UACA,YAAY,WAAW;AAAA,UACvB;AAAA,UACA;AAAA,UACA,OAAO,KAAK;AAAA,UACZ,UAAU,aAAa;AAAA,UACvB,QAAQ;AAAA,UACR;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,iBAAiB,MAAM;AAAA,UACvB,YAAY,WAAW;AAAA,UACvB;AAAA,UACA,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,IAED,aAAa,UACZ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,MAAM;AAAA,QACN;AAAA,QACA,QAAQ;AAAA,QACR;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/chunk-5ZY3IIIG.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Alert/Alert.metrics.ts"],"sourcesContent":["import type { AlertVariant } from './Alert.base';\nimport { alpha, darken, lighten } from '../../../tokens/color';\nimport { NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport { contrastText, type UiGreyStep, type UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Alert` RENDERERS DRAW WITH.\n *\n * `Alert.styles.tsx` / `Alert.tsx` (MUI) and `Alert.native.tsx` (React\n * Native) read this one table. Spacing is in SPACING UNITS where the web\n * writes `theme.spacing(n)`; durations are ms (the web turns them into `s`\n * through {@link seconds} so its emitted CSS is byte-for-byte what it was);\n * everything else is px, a ratio or an alpha. The hover, active and focus\n * numbers are here too although only the DOM can honour them — a number the\n * web draws with belongs in the table whether or not native can reach it.\n */\n\n/** The root: 12px corners, 14px 16px of padding, one 300ms curve for everything. */\nexport const ALERT_RADIUS_UNITS = 1.5;\nexport const ALERT_PADDING_UNITS = { vertical: 1.75, horizontal: 2 } as const;\nexport const ALERT_TRANSITION_MS = 300;\nexport const ALERT_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** Mount: the web's `fadeInScale` keyframes and the icon's `iconRotate`. */\nexport const FADE_IN = { ms: 300, scale: 0.95, lift: 10 } as const;\nexport const ICON_SPIN = { ms: 600, from: 0.8, mid: 1.1 } as const;\n/** Dismiss: MUI `Collapse` runs 300ms; `onClose` fires 200ms in. */\nexport const COLLAPSE_MS = 300;\nexport const CLOSE_DELAY_MS = 200;\n\n/** The message column: 8px between title, description and children; 0.95rem body on 1.5. */\nexport const MESSAGE_GAP_UNITS = 1;\nexport const MESSAGE_FONT_SIZE = 15.2;\nexport const MESSAGE_LINE_HEIGHT = 1.5;\n/** A control inside the message gets an edge: 4px above, a hairline at 0.45 of the hue. */\nexport const MESSAGE_BUTTON = { marginTopUnits: 0.5, borderAlpha: 0.45 } as const;\n\n/** The title: 1.05rem at 600; MUI's `AlertTitle` lifts it 2px; 4px below it when a description follows. */\nexport const TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits: 0.5 } as const;\n/** The description: 0.925rem, slightly faded. */\nexport const DESCRIPTION = { fontSize: 14.8, opacity: 0.9 } as const;\n\n/** The icon on the title's line (`iconPlacement: 'title'`): 10px from the title, centred on its first line (1.5). */\nexport const TITLE_ICON = { gapUnits: 1.25, lineHeight: 1.5 } as const;\n/** The icon slot: MUI's 22px glyph at 0.9, 14px from the words, 2px down (MUI's 7px stays below). */\nexport const ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 } as const;\n/** The action slot: MUI's `4px 0 0 16px` with the 16px ours, pushed right, 8px into the padding. */\nexport const ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 } as const;\n/** The close button: MUI's small `IconButton` (5px padding, 18px glyph) at 0.7. */\nexport const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 } as const;\n\n/**\n * A semantic Alert's surface and ink: an OPAQUE tint of the hue with a dark\n * ink of the same hue — MUI's own `standard` recipe, at its ratios. See\n * `semanticSurface` in `Alert.styles.tsx` for why not `alpha(main, 0.1)`.\n */\nexport const SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 } as const;\n/** `glass`: 85% paper under a 20px blur, a 0.4 divider hairline. */\nexport const GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 } as const;\n/**\n * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.\n *\n * It carries no hover of its own, and that is load-bearing rather than an\n * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the\n * same object literal, so a second `'&:hover'` key does not merge with it — it\n * REPLACES it. While this variant had one, `gradient` was the only alert that\n * brightened on hover while every other variant darkened, and the only one to\n * lose the shimmer reveal the root's hover performs.\n */\nexport const GRADIENT = {\n  angleDeg: 135,\n  stopAlpha: 0.9,\n  shimmerAlpha: 0.2,\n  shimmerMs: 3000,\n  shimmerTravel: 1000,\n} as const;\n\n/** Emphasis: the glow's shadow and brightness, the pulse's wash. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 } as const;\nexport const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;\n\n/**\n * Pointer states — DOM only, kept so the web derives them.\n *\n * HOVER and ACTIVE carry NO geometry, and that is the point rather than an\n * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow\n * and spin the icon 10deg at 1.15 — four things moving at once on a surface\n * that is not a control, which made a page of alerts twitch under the pointer.\n *\n * Both are a TINT now: a flat inset layer over the surface. Two mechanisms\n * came before it and each failed on a case the next had to fix. Dropping the\n * element's `opacity` composites toward the PAGE, so it inverted the hover on\n * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a\n * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,\n * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)\n * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the\n * same on an opaque tint, a translucent wash and a gradient, and because it\n * paints above the background and below the content the ink keeps its own\n * contrast.\n */\nexport const HOVER = { tintAlpha: 0.06 } as const;\n\n/**\n * The press: a 20% tint LAYER, eased back fast.\n *\n * The layer is the point. The first attempt dropped the whole element's\n * opacity, which composites toward the PAGE and so behaves differently on\n * every surface it is asked about. Measured: over a light page it made a light\n * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the\n * surface looked like the pointer leaving; over a dark page it landed back on\n * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body\n * copy to 2.31:1, under AA; and it diluted the ink during a text-selection\n * drag. A `brightness()` step instead of it fixed the direction but not the\n * reach — a multiplier does nothing to a near-black `glass` in dark mode\n * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it\n * scales only what the element already paints.\n *\n * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,\n * so it reads the same on an opaque tint, a translucent wash and a gradient;\n * painted above the background and below the content, so the ink keeps its\n * own contrast; and animatable, which `background-image` is not.\n *\n * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE\n * property carries both states. CSS runs a transition from the DESTINATION\n * state's declaration, and entering hover and releasing a press share that\n * destination — so they cannot have different durations without a second\n * animatable property, and both free pseudo-elements are already spent on the\n * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the\n * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and\n * for ~360ms the alert you had just LEFT was darker than the one under the\n * pointer. A fast press-return is the smaller loss, and it is the call the\n * product owner made when shown both.\n */\nexport const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;\n\nexport const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;\n\n/** `neutral` has no palette slot; the web has always drawn it from three greys. */\nexport const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep> = { main: 500, light: 300, dark: 700 };\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`, `300` → `0.3s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** The palette shape the web's `getColorFromTheme` returns — a main plus optional shades. */\nexport interface AlertPalette {\n  main: string;\n  light?: string;\n  dark?: string;\n}\n\n/**\n * The renderer-free twin of the web's `getColorFromTheme`: a variant or\n * colour name to its palette, `neutral` from the greys, anything unknown\n * (`glass`, `gradient`) to `info`.\n */\nexport function alertPalette(theme: UiTheme, key: string | undefined): AlertPalette {\n  switch (key) {\n    case 'info':\n    case 'success':\n    case 'warning':\n    case 'danger':\n    case 'primary':\n    case 'secondary':\n      return theme.palette[key];\n    case 'neutral':\n      return {\n        main: NEUTRAL_RAMP[NEUTRAL_GREY.main],\n        light: NEUTRAL_RAMP[NEUTRAL_GREY.light],\n        dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],\n      };\n    default:\n      return theme.palette.info;\n  }\n}\n\n/** What a variant paints: its fill, its ink, its hairline if any, and the colour of its glyph. */\nexport interface AlertSurface {\n  backgroundColor: string;\n  color: string;\n  borderColor?: string;\n  iconColor: string;\n}\n\nexport const SEMANTIC_VARIANTS: ReadonlySet<AlertVariant> = new Set(['info', 'success', 'warning', 'danger']);\n\n/** The opaque tint and same-hue ink, inverted for dark mode; the hairline keeps its alpha. */\nexport function semanticSurface(theme: UiTheme, palette: AlertPalette): AlertSurface {\n  const dark = theme.mode === 'dark';\n  return {\n    backgroundColor: dark\n      ? darken(palette.main, SEMANTIC_SURFACE.tint.dark)\n      : lighten(palette.main, SEMANTIC_SURFACE.tint.light),\n    color: dark ? lighten(palette.main, SEMANTIC_SURFACE.ink) : darken(palette.main, SEMANTIC_SURFACE.ink),\n    borderColor: alpha(palette.main, SEMANTIC_SURFACE.borderAlpha),\n    iconColor: palette.main,\n  };\n}\n\nexport function glassSurface(theme: UiTheme): AlertSurface {\n  return {\n    backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n    color: theme.palette.text.primary,\n    borderColor: alpha(theme.palette.divider, GLASS.borderAlpha),\n    iconColor: theme.palette.primary.main,\n  };\n}\n\n/** The gradient's two stops; a renderer with no gradient fill paints `from`. */\nexport function gradientStops(palette: AlertPalette): { from: string; to: string } {\n  return {\n    from: alpha(palette.light || palette.main, GRADIENT.stopAlpha),\n    to: alpha(palette.dark || palette.main, GRADIENT.stopAlpha),\n  };\n}\n\nexport function gradientSurface(palette: AlertPalette): AlertSurface {\n  const ink = contrastText(palette.main);\n  return { backgroundColor: gradientStops(palette).from, color: ink, iconColor: ink };\n}\n\n/** The surface for a variant, `glass` and `gradient` included. */\nexport function alertSurface(theme: UiTheme, variant: AlertVariant, palette: AlertPalette): AlertSurface {\n  if (variant === 'glass') return glassSurface(theme);\n  if (variant === 'gradient') return gradientSurface(palette);\n  return semanticSurface(theme, palette);\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-7HZ36QDH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Alert/Alert.content.tsx"],"sourcesContent":["import AlertTitle from '@mui/material/AlertTitle/index.js';\nimport Box from '@mui/material/Box/index.js';\nimport React from 'react';\n\nimport { sxRem } from '../../../tokens/relative';\n\nimport { testIdFor } from './Alert.helpers';\nimport { DESCRIPTION, ICON_SLOT, TITLE, TITLE_ICON } from './Alert.metrics';\nimport type { AlertProps } from './Alert.types';\n\nconst BREAK_WORDS = {\n  wordWrap: 'break-word',\n  overflowWrap: 'break-word',\n  wordBreak: 'break-word',\n} as const;\n\n/**\n * The message column: title, description, then whatever the caller put inside.\n *\n * `titleIcon` is the icon when it sits on the title's line\n * (`iconPlacement: 'title'`, see `Alert.placement.ts`). The title then shares\n * a row with it, and the description below is a sibling of that row — so it\n * starts at the column's own edge rather than under the title's first letter.\n */\nexport const AlertContent: React.FC<{\n  title?: AlertProps['title'];\n  description?: AlertProps['description'];\n  titleIcon?: React.ReactNode;\n  dataTestId?: string;\n  children?: React.ReactNode;\n}> = ({ title, description, titleIcon, dataTestId, children }) => {\n  const heading = title ? (\n    <AlertTitle\n      data-testid={testIdFor(dataTestId, 'title')}\n      sx={{\n        fontWeight: TITLE.fontWeight,\n        fontSize: sxRem(TITLE.fontSize),\n        // On the icon's row MUI's 2px lift would push the title off the glyph,\n        // and the line height is stated so the glyph can be centred on it.\n        ...(titleIcon\n          ? { margin: 0, lineHeight: TITLE_ICON.lineHeight }\n          : { marginBottom: description ? TITLE.marginBottomUnits : 0 }),\n        ...BREAK_WORDS,\n      }}\n    >\n      {title}\n    </AlertTitle>\n  ) : null;\n\n  return (\n    <>\n      {titleIcon && heading ? (\n        <Box\n          data-testid={testIdFor(dataTestId, 'title-row')}\n          sx={{\n            display: 'flex',\n            // The FIRST line, not the block: a title that wraps to three lines\n            // on a phone would otherwise float its icon beside the second.\n            alignItems: 'flex-start',\n            gap: TITLE_ICON.gapUnits,\n            marginBottom: description ? TITLE.marginBottomUnits : 0,\n            '& > span': {\n              display: 'flex',\n              flex: 'none',\n              alignItems: 'center',\n              fontSize: sxRem(ICON_SLOT.size),\n              // One title line tall, so the glyph is centred on that line.\n              height: sxRem(TITLE.fontSize * TITLE_ICON.lineHeight),\n            },\n          }}\n        >\n          {titleIcon}\n          {heading}\n        </Box>\n      ) : (\n        heading\n      )}\n      {description && (\n        <Box\n          component=\"div\"\n          data-testid={testIdFor(dataTestId, 'message')}\n          sx={{ opacity: DESCRIPTION.opacity, fontSize: sxRem(DESCRIPTION.fontSize), ...BREAK_WORDS }}\n        >\n          {description}\n        </Box>\n      )}\n      {children}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,OAAO,SAAS;AA+BZ,SAkBA,UAlBA,KAoBI,YApBJ;AAtBJ,IAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AACb;AAUO,IAAM,eAMR,CAAC,EAAE,OAAO,aAAa,WAAW,YAAY,SAAS,MAAM;AAChE,QAAM,UAAU,QACd;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,UAAU,YAAY,OAAO;AAAA,MAC1C,IAAI;AAAA,QACF,YAAY,MAAM;AAAA,QAClB,UAAU,MAAM,MAAM,QAAQ;AAAA;AAAA;AAAA,QAG9B,GAAI,YACA,EAAE,QAAQ,GAAG,YAAY,WAAW,WAAW,IAC/C,EAAE,cAAc,cAAc,MAAM,oBAAoB,EAAE;AAAA,QAC9D,GAAG;AAAA,MACL;AAAA,MAEC;AAAA;AAAA,EACH,IACE;AAEJ,SACE,iCACG;AAAA,iBAAa,UACZ;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,UAAU,YAAY,WAAW;AAAA,QAC9C,IAAI;AAAA,UACF,SAAS;AAAA;AAAA;AAAA,UAGT,YAAY;AAAA,UACZ,KAAK,WAAW;AAAA,UAChB,cAAc,cAAc,MAAM,oBAAoB;AAAA,UACtD,YAAY;AAAA,YACV,SAAS;AAAA,YACT,MAAM;AAAA,YACN,YAAY;AAAA,YACZ,UAAU,MAAM,UAAU,IAAI;AAAA;AAAA,YAE9B,QAAQ,MAAM,MAAM,WAAW,WAAW,UAAU;AAAA,UACtD;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,UACA;AAAA;AAAA;AAAA,IACH,IAEA;AAAA,IAED,eACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,eAAa,UAAU,YAAY,SAAS;AAAA,QAC5C,IAAI,EAAE,SAAS,YAAY,SAAS,UAAU,MAAM,YAAY,QAAQ,GAAG,GAAG,YAAY;AAAA,QAEzF;AAAA;AAAA,IACH;AAAA,IAED;AAAA,KACH;AAEJ;","names":[]}