@12-apps/ui 6.23.0 → 6.24.0

package/dist/types-native/components/data-display/FleetMap/FleetRoster.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FleetRoster.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetRoster.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAkB,YAAY,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAsQvF,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,mBAAmB,EACnB,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiEtC"}

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

@@ -0,0 +1,4 @@
+export { FleetMap, default } from './FleetMap.native';
+export { FleetRoster } from './FleetRoster.native';
+export type { FleetFreshness, FleetMapBaseProps, FleetMapCopy, FleetMapCopyBase, FleetMapProps, FleetUnit, } from './FleetMap.types.native';
+//# sourceMappingURL=index.native.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/index.native.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EACV,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,SAAS,GACV,MAAM,yBAAyB,CAAC"}

package/dist/types-native/platform/aria.d.ts

@@ -27,6 +27,19 @@ export interface WebAria {
      * it expands is a listbox — which is what the web's own trigger carries.
      */
     'aria-haspopup'?: 'listbox' | 'menu' | 'dialog' | 'true';
+    /**
+     * Which option a composite widget's single tab stop is currently on — the
+     * listbox pattern, where the LIST holds focus and the selection moves inside
+     * it. React Native has no equivalent because it has no roving focus to
+     * describe: a device selects by touching the row.
+     *
+     * Note the interaction with `aria-atomic` documented on {@link webAria}:
+     * react-native-web reads THIS value when it means the atomic flag, so a
+     * component that sets both gets the descendant id emitted as `aria-atomic`.
+     * Nothing here sets both, and a component that needs to should pass its own
+     * atomic flag directly rather than through this helper.
+     */
+    'aria-activedescendant'?: string;
 }
 /**
  * `attrs` as something JSX can spread onto a react-native element without

package/dist/types-native/platform/aria.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../../src/platform/aria.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,OAAO;IACtB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC1D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAG9C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAErD;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,MAAM,CAE7E;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,+EAA+E;AAC/E,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,MAAM,CAExE"}
+{"version":3,"file":"aria.d.ts","sourceRoot":"","sources":["../../../src/platform/aria.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,WAAW,OAAO;IACtB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACzD;;;;;;;;;;;OAWG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;CAClC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAG9C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAErD;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,GAAG,MAAM,CAE7E;AAED;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE5C;AAED,+EAA+E;AAC/E,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,MAAM,CAExE"}

package/dist/user-avatar.js

@@ -1,13 +1,13 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-4LRFGB3K.js";
+} from "./chunk-ZRPGVHTR.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-I7HYGIEJ.js";
-import "./chunk-4SQFO4GW.js";
+import "./chunk-JUHUKZGU.js";
+import "./chunk-NA7MIEG6.js";
+import "./chunk-XRMZMBE3.js";
 import "./chunk-FAITHWIO.js";
 import "./chunk-3ZVUNSFF.js";
-import "./chunk-XRMZMBE3.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
 import "./chunk-AIRWM7KK.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.23.0",
+  "version": "6.24.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -205,6 +205,10 @@
       "default": "./dist/data-display/EmptyState.js"
     },
     "./data-display/FleetMap": {
+      "react-native": {
+        "types": "./dist/types-native/components/data-display/FleetMap/index.native.d.ts",
+        "default": "./dist/native/data-display/FleetMap.js"
+      },
       "types": "./dist/types/components/data-display/FleetMap/index.d.ts",
       "default": "./dist/data-display/FleetMap.js"
     },

package/src/components/data-display/FleetMap/FleetMap.base.ts

@@ -0,0 +1,144 @@
+/**
+ * THE CONTRACT BOTH `FleetMap` RENDERERS HONOUR — and nothing else.
+ *
+ * This file imports no MUI and no react-native, on purpose: it ships in BOTH
+ * declaration outputs (`dist/types` and `dist/types-native`), and a native
+ * consumer has no `@mui/material` to resolve a type import against.
+ *
+ * What is NOT here is as deliberate as what is. `map` (the map control bar's
+ * six words) lives on the web copy alone, because the map half is web-only
+ * until `MapPreview` is ported — see `NATIVE-NOTES.md`. A native caller that
+ * had to supply words for a bar no renderer draws would be asked to describe
+ * something it cannot see.
+ */
+
+/**
+ * One tracked unit's newest position, as the caller resolved it.
+ *
+ * Deliberately says nothing about WHAT is being tracked. A courier, a service
+ * van, a field engineer — the component draws a labelled dot with a freshness,
+ * and every word that names the domain arrives through the copy object.
+ */
+export interface FleetUnit {
+  id: string;
+  /** The name a human reads, on the pin and in the roster. */
+  label: string;
+  latitude: number;
+  longitude: number;
+  /**
+   * The fix's accuracy radius in metres, when the platform reported one.
+   *
+   * Kept because it is what separates a rooftop GPS fix from a cell-tower guess
+   * three blocks wide, and a map that draws both identically tells its reader
+   * something false.
+   */
+  accuracyM?: number | null;
+  /**
+   * Seconds since the fix was ACCEPTED, on the server's clock.
+   *
+   * The caller computes it, and the distinction matters: a device whose own
+   * clock is an hour slow would otherwise report itself as an hour stale while
+   * reporting perfectly.
+   */
+  staleSeconds: number;
+  /** A short pre-formatted badge beside the name, e.g. `"2 entregas"`. */
+  badge?: string;
+}
+
+/** How current a unit's newest fix is, derived from the thresholds below. */
+export type FleetFreshness = 'live' | 'lagging' | 'stale';
+
+/**
+ * Every word the board prints, and the two it FORMATS — minus the map's own.
+ *
+ * `lastSeen` and `accuracy` are functions rather than strings because a
+ * duration and a distance are locale rules, and this package holds the same
+ * line `StatCard` does: presentation only, the caller owns the formatting. A
+ * `lastSeenMinutes: string` template would have made "há 2 min" the only
+ * shape any consumer could ever render.
+ */
+export interface FleetMapCopyBase {
+  /** The panel's heading. */
+  title: string;
+  /** What the roster says when nobody is reporting. */
+  emptyTitle: string;
+  emptyDescription?: string;
+  /** The roster list's accessible name — it is the map's readable half. */
+  rosterLabel: string;
+  /**
+   * What a screen reader hears while the roster reloads, e.g. "Atualizando a
+   * frota". OPTIONAL, and silence is the honest default: the busy state marks
+   * the region stale without uttering anything, the skeletons are hidden from
+   * the reader, and this component cannot invent the sentence in the reader's
+   * language. Set it and the panel announces politely; leave it and it stays
+   * quiet.
+   *
+   * Announced on a TRANSITION into loading. A board mounted already loading is
+   * silent — as any live region is at mount, since there is no change for a
+   * reader to observe.
+   */
+  loading?: string;
+  /** The three freshness words, as a reader sees them on a row. */
+  freshness: Record<FleetFreshness, string>;
+  /** `(seconds) => "há 2 min"`. */
+  lastSeen: (staleSeconds: number) => string;
+  /** `(metres) => "±12 m"`. A unit with no accuracy renders none. */
+  accuracy: (metres: number) => string;
+}
+
+/**
+ * The props both renderers take.
+ *
+ * `height` and `className` are NOT here: the first is a CSS length the web
+ * gives the map, and the second is a DOM class. Each side declares its own
+ * layout escape hatch beside its own extras.
+ */
+export interface FleetMapBaseProps {
+  /** Everyone currently reporting. An empty array renders the empty state. */
+  units: readonly FleetUnit[];
+  /**
+   * Which unit is highlighted: the roster marks it selected, and on the web the
+   * map centres on it. `null` selects nobody.
+   *
+   * PASSING IT AT ALL IS THE DECISION. Present on the first render — `null`
+   * included — and the board is controlled for life: it renders what you pass
+   * and never moves the selection itself. Absent on the first render and it
+   * keeps its own, reporting each change through {@link onSelect}. The mode is
+   * latched on that first render, the way React latches an `<input>`, so the
+   * component cannot change its own semantics halfway through a session.
+   *
+   * A controlled board reads `undefined` as "nobody is selected", so
+   * `useState<string>()` in the caller behaves: clearing it clears the roster.
+   */
+  selectedId?: string | null;
+  /**
+   * A click or press on a row, and each arrow-key move on the web.
+   *
+   * Passing {@link selectedId} WITHOUT this is a selection nothing can move:
+   * the arrow keys then decline to act and leave the page to scroll, rather
+   * than swallowing a keypress that would do nothing.
+   */
+  onSelect?: (id: string) => void;
+  /**
+   * Seconds after which a unit stops reading as `live`, and then as `lagging`.
+   *
+   * Both carry a GENERIC default (90s and 300s, sized for a phone reporting
+   * every twenty seconds) and no domain one, because the answer is entirely a
+   * property of the fleet's own ping cadence: a phone reporting every twenty
+   * seconds is late at ninety, and a tracker reporting every five minutes is
+   * not. A component that picked one would be picking it for every consumer.
+   */
+  laggingAfterSeconds?: number;
+  staleAfterSeconds?: number;
+  /**
+   * While true the roster is marked busy, and renders skeletons IF no units
+   * have landed yet — a poll over a populated roster keeps the list, because
+   * unmounting it throws away the focus inside it.
+   *
+   * It only ANNOUNCES if the copy's `loading` sentence is set: busy is a state,
+   * not an utterance.
+   */
+  loading?: boolean;
+  /** Test id for the panel root; every child id is derived from it. */
+  dataTestId?: string;
+}

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

@@ -1,4 +1,4 @@
-import type { FleetFreshness, FleetUnit } from './FleetMap.types';
+import type { FleetFreshness, FleetUnit } from './FleetMap.base';
 
 /**
  * How current a fix is, on the two thresholds the caller supplied.

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

@@ -1,7 +1,26 @@
 import React from 'react';
 
 import { mapCentre, nextSelection, rosterOrder, type LatLng } from './FleetMap.helpers';
-import type { FleetUnit } from './FleetMap.types';
+import type { FleetUnit } from './FleetMap.base';
+
+/**
+ * The half of a key event this hook reads, spelled structurally.
+ *
+ * NOT `React.KeyboardEvent<HTMLDivElement>`: the native type program is checked
+ * without the DOM lib (`tsconfig.native.json`), so a DOM type here would put
+ * the whole hook out of reach of the React Native renderer that shares it. A
+ * DOM event satisfies this shape, and a handler taking the wider type is
+ * assignable wherever the narrower one is expected — so the web passes its own
+ * `onKeyDown` unchanged.
+ */
+export interface FleetKeyEvent {
+  key: string;
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  shiftKey?: boolean;
+  preventDefault: () => void;
+}
 
 /**
  * Everything the board derives from its props, in one hook.
@@ -52,11 +71,11 @@ export interface FleetMapState {
   centre: LatLng | null;
   select: (id: string) => void;
   markers: FleetMarker[];
-  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  onKeyDown: (event: FleetKeyEvent) => void;
 }
 
 /** Which way an arrow moves the selection, or `0` when it is not ours. */
-function stepFor(event: React.KeyboardEvent<HTMLDivElement>): 1 | -1 | 0 {
+function stepFor(event: FleetKeyEvent): 1 | -1 | 0 {
   // A modified arrow is the PAGE's shortcut, not the roster's: Cmd+Down is
   // "scroll to the end of the document" on macOS, and Shift+Arrow extends a
   // selection. Capturing them would take a browser gesture away.
@@ -133,7 +152,7 @@ export function useFleetMap(
   );
 
   const onKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
+    (event: FleetKeyEvent) => {
       const step = stepFor(event);
       if (step === 0) return;
       // Nothing can move a CONTROLLED selection without a handler, so the keys

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

@@ -165,14 +165,21 @@ picking it for every consumer.
 
 ## Known limits
 
-- **Not ported to React Native.** `@12-apps/ui` ships a native build for 26 of
-  its 141 subpaths; this is not one, and neither is the `MapPreview` it wraps.
-  Being unported is the ordinary state — 115 subpaths are, at the time of
-  writing — and it fails LOUDLY under Metro: an unported subpath resolves to the
-  web file and errors on `@mui/material` at import rather than rendering a blank
-  view. It is also the right call for this
-  component: a fleet board is a dispatcher's screen, and the tracked unit's own
-  device reports a position rather than drawing the fleet.
+- **The React Native build has no MAP.** This subpath now carries a
+  `react-native` export condition, and what it renders there is the roster: the
+  heading, the rows with their freshness, the empty state, the skeletons and the
+  reload announcement. `MapPreview` — ~2,200 lines that project, tile and
+  decorate their own surface — is still unported, so the native copy interface
+  has neither `map` nor `mapLabel` and a native board draws no canvas. That is a
+  smaller loss than it sounds for this component in particular, because the
+  roster is already its accessible representation rather than a sidebar: every
+  fact a pin carries is on a row. `NATIVE-NOTES.md` holds the full list of
+  rendering gaps, and `pnpm native:ledger` counts them.
+- **On a device the roster is touch-only.** The arrow keys, the single tab stop
+  and `aria-activedescendant` all reach the list through react-native-web, so a
+  browser still walks it exactly as the web build does; React Native delivers no
+  key events to a `View`, so on a phone the selection is made by touch and every
+  row is its own tab stop.
 - **The map's own `aria-label` is English**, and comes from `MapPreview` rather
   than from `copy`. Everything `FleetMap` itself renders is injected; that one
   sentence is not, and a pt-BR consumer's screen reader will read it in English

package/src/components/data-display/FleetMap/FleetMap.metrics.ts

@@ -0,0 +1,81 @@
+/**
+ * THE NUMBERS BOTH `FleetMap` RENDERERS DRAW WITH.
+ *
+ * `FleetRoster.tsx` / `FleetMap.tsx` (web, MUI `sx`) and `FleetRoster.native.tsx`
+ * / `FleetMap.native.tsx` (React Native) read this one table. The web hands the
+ * spacing UNITS to `theme.spacing()` and the radius MULTIPLES to `sx`; native
+ * multiplies the units by the theme's own spacing step and the multiples by
+ * `shape.borderRadius`.
+ *
+ * Nothing here imports a renderer, a theme or a colour: a freshness dot's
+ * COLOUR is the theme's (`success.main`, `warning.main`, `text.disabled`), and
+ * the two sides reach the same palette through different doors.
+ *
+ * ## Why the radii are MULTIPLES and never pixels
+ *
+ * MUI's `sx` reads a bare number for `borderRadius` as a multiple of
+ * `theme.shape.borderRadius`, so a value that already had the theme's radius
+ * divided out of it is applied twice. Measured: `theme.shape.borderRadius / 4`
+ * drew 4px on the default theme — which is why it looked right — and 36px on a
+ * host that sets its own radius to 12. In a package whose whole premise is
+ * being re-themed, only the multiple is portable, and it is the multiple that
+ * both renderers store here.
+ */
+
+/** `theme.spacing(n)` for the panel's own stack. */
+export const FLEET_PANEL = {
+  /** Between the heading, the status region and the body. */
+  gapUnits: 1.5,
+} as const;
+
+/** The roster list box. */
+export const FLEET_ROSTER = {
+  /** Between rows. */
+  gapUnits: 0.5,
+  /** `:focus-visible` ring on the web; a device has no focus ring to draw. */
+  focusRingWidth: 2,
+  focusRingOffset: 2,
+} as const;
+
+/** One roster row. */
+export const FLEET_ROW = {
+  /** Between the dot, the text block and the badge. */
+  gapUnits: 1.5,
+  /** `theme.spacing(y, x)`. */
+  paddingYUnits: 1,
+  paddingXUnits: 1.5,
+  /** A MULTIPLE of `theme.shape.borderRadius` — see the note above. */
+  radiusMultiple: 1,
+} as const;
+
+/**
+ * The freshness dot.
+ *
+ * A perfect circle, so the radius is half the box on both sides rather than
+ * the web's `50%`: React Native resolves a percentage radius against the box
+ * it is given, and a square box makes the two spellings agree.
+ */
+export const FLEET_DOT = {
+  size: 10,
+} as const;
+
+/** What stands in for the roster before any unit has landed. */
+export const FLEET_SKELETON = {
+  /** Three bars, the height of a row with its padding. */
+  rows: 3,
+  height: 44,
+  /** A MULTIPLE, for the same reason the row's is. */
+  radiusMultiple: 1,
+  gapUnits: 1,
+} as const;
+
+/**
+ * How long a fix stays `live`, and then `lagging`, when the caller says nothing.
+ *
+ * Ninety seconds and five minutes: sized for a phone reporting every twenty
+ * seconds, which is the densest cadence a battery tolerates all day. They are
+ * DEFAULTS and not a rule — a fleet on five-minute trackers passes its own, and
+ * the props exist so it can.
+ */
+export const FLEET_DEFAULT_LAGGING_AFTER_SECONDS = 90;
+export const FLEET_DEFAULT_STALE_AFTER_SECONDS = 300;

package/src/components/data-display/FleetMap/FleetMap.native.tsx

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { EmptyState } from '../EmptyState/EmptyState.native';
+
+import { useFleetMap } from './FleetMap.hooks';
+import {
+  FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+  FLEET_DEFAULT_STALE_AFTER_SECONDS,
+  FLEET_PANEL,
+} from './FleetMap.metrics';
+import type { FleetMapProps } from './FleetMap.types.native';
+import { FleetRoster } from './FleetRoster.native';
+import { webAria, webRole } from '../../../platform/aria';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { MUI_FONT_WEIGHT_MEDIUM, muiTypeStyle } from '../../../tokens/mui-type';
+
+/**
+ * The reload announcement, and nothing else.
+ *
+ * A busy region marks itself stale for assistive technology but UTTERS nothing,
+ * and the skeletons beside it are hidden from the reader — so a screen-reader
+ * user got silence while the roster reloaded. This is the utterance.
+ *
+ * Optional by design: the sentence is in the reader's language, which only the
+ * caller knows, and inventing an English one in a component whose whole premise
+ * is that every word arrives through `copy` would be the bug it exists to
+ * avoid. No `copy.loading`, no region.
+ *
+ * ## The node outlives the text, and that is the whole trick
+ *
+ * A live region has to exist BEFORE its content changes; a reader watches an
+ * existing region for mutations rather than announcing one that appears already
+ * populated. Mounting region-and-text together in a single commit is the classic
+ * silent case — it satisfies a query while announcing nothing. So the region
+ * mounts as soon as the caller offers the copy and merely EMPTIES when idle.
+ *
+ * `role="status"` and `aria-live` reach the DOM through react-native-web; on a
+ * device the announcement is made by `AccessibilityInfo` or not at all, which
+ * is recorded in `NATIVE-NOTES.md` rather than papered over here.
+ */
+function FleetStatus({
+  announcement,
+  loading,
+  testId,
+}: {
+  announcement: string | undefined;
+  loading: boolean;
+  testId: string;
+}): React.JSX.Element | null {
+  // No copy, no region at all — the caller has not asked for an announcement.
+  if (announcement === undefined) return null;
+  return (
+    <View
+      {...webRole('status')}
+      aria-live="polite"
+      accessibilityLiveRegion="polite"
+      testID={`${testId}-status`}
+      style={styles.srOnly}
+    >
+      <Text>{loading ? announcement : ''}</Text>
+    </View>
+  );
+}
+
+/**
+ * FleetMap on React Native — where a set of tracked units is right now.
+ *
+ * Product-free by construction: it draws a labelled row with a freshness, and
+ * every word — the heading, the three freshness states, how a duration and a
+ * distance are written — arrives through `copy`. Couriers, service vans and
+ * field engineers are all the same list.
+ *
+ * ## What this renderer does NOT draw, and why
+ *
+ * There is no map. `MapPreview` — 2,200 lines that project, tile and decorate
+ * their own surface — has no React Native build, and porting it is its own
+ * change with its own consumers. What that costs is smaller than it sounds,
+ * because the web half already calls this list "the accessible representation,
+ * not a sidebar": every fact a pin carries — who, how recently, how precisely,
+ * what they are carrying — is on a row, in an order the map cannot express. So
+ * a native board is the half a screen reader was always given, and a device
+ * gets the same answers a dispatcher asks for. The gap is stated in
+ * `NATIVE-NOTES.md` rather than claimed away, and it is where the map goes when
+ * `MapPreview` is ported.
+ *
+ * The consequence for the API is one line in `FleetMap.types.native.ts`: the
+ * native copy interface has no `map` and no `mapLabel`, because a caller should
+ * not be asked to name controls nothing renders.
+ */
+export const FleetMap: React.FC<FleetMapProps> = React.memo(
+  ({
+    units,
+    copy,
+    // NO default. `undefined` is what tells the hook the caller does not own
+    // the selection; defaulting it to `null` made every render look controlled
+    // and the uncontrolled path unreachable.
+    selectedId,
+    onSelect,
+    laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+    staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,
+    loading = false,
+    maxHeight,
+    style,
+    dataTestId,
+  }) => {
+    const theme = useUiTheme();
+    const testId = dataTestId ?? 'fleet-map';
+    const { ordered, active, select, onKeyDown } = useFleetMap(units, selectedId, onSelect);
+
+    return (
+      <View
+        {...webRole('region')}
+        accessibilityLabel={copy.title}
+        testID={testId}
+        style={[styles.panel, { gap: theme.spacing(FLEET_PANEL.gapUnits) }, style]}
+      >
+        <Text
+          {...webRole('heading')}
+          {...webAria({ 'aria-level': 2 })}
+          testID={`${testId}-title`}
+          style={[
+            muiTypeStyle(theme, 'body1'),
+            { color: theme.palette.text.primary, fontWeight: `${MUI_FONT_WEIGHT_MEDIUM}` },
+          ]}
+        >
+          {copy.title}
+        </Text>
+
+        <FleetStatus announcement={copy.loading} loading={loading} testId={testId} />
+
+        {!loading && ordered.length === 0 ? (
+          <EmptyState
+            variant="minimal"
+            title={copy.emptyTitle}
+            description={copy.emptyDescription}
+            dataTestId={`${testId}-empty`}
+          />
+        ) : (
+          /* The busy marker belongs on the BODY and never on the panel root —
+             the live region announcing the reload is a sibling above, and a
+             live region inside a busy subtree is exactly what busy tells
+             assistive technology to hold back. Marking the root would silence
+             the announcement for the whole of the only window in which it has
+             anything to say. The web half splits them the same way, and the
+             wrapper is also what the shared loading stories address. */
+          <View
+            aria-busy={loading || undefined}
+            accessibilityState={{ busy: loading }}
+            testID={`${testId}-body`}
+            style={styles.body}
+          >
+            <FleetRoster
+              units={ordered}
+              copy={copy}
+              selectedId={active}
+              onSelect={select}
+              laggingAfterSeconds={laggingAfterSeconds}
+              staleAfterSeconds={staleAfterSeconds}
+              loading={loading}
+              maxHeight={maxHeight}
+              testId={testId}
+              onKeyDown={onKeyDown}
+            />
+          </View>
+        )}
+      </View>
+    );
+  },
+);
+
+FleetMap.displayName = 'FleetMap';
+
+const styles = StyleSheet.create({
+  body: { flexShrink: 1, minWidth: 0 },
+  panel: { flexDirection: 'column', minWidth: 0 },
+  /**
+   * Off screen but still in the tree, which is what a live region needs. A
+   * `display: 'none'` view is not announced, and a zero-size one clips its text
+   * on some readers.
+   */
+  srOnly: { height: 1, opacity: 0, overflow: 'hidden', position: 'absolute', width: 1 },
+});
+
+export default FleetMap;

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

@@ -8,19 +8,13 @@ import { EmptyState } from '../EmptyState/EmptyState';
 
 import { FleetBody } from './FleetBody';
 import { useFleetMap } from './FleetMap.hooks';
+import {
+  FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+  FLEET_DEFAULT_STALE_AFTER_SECONDS,
+  FLEET_PANEL,
+} from './FleetMap.metrics';
 import type { FleetMapProps } from './FleetMap.types';
 
-/**
- * How long a fix stays `live`, and then `lagging`, when the caller says nothing.
- *
- * Ninety seconds and five minutes: sized for a phone reporting every twenty
- * seconds, which is the densest cadence a battery tolerates all day. They are
- * DEFAULTS and not a rule — a fleet on five-minute trackers passes its own, and
- * the props exist so it can.
- */
-const DEFAULT_LAGGING_AFTER_SECONDS = 90;
-const DEFAULT_STALE_AFTER_SECONDS = 300;
-
 /** The map's own default height. Overridable, and never a hardcoded viewport. */
 const DEFAULT_HEIGHT = '420px';
 
@@ -100,8 +94,8 @@ export const FleetMap: React.FC<FleetMapProps> = React.memo(
     // controlled and the uncontrolled path unreachable.
     selectedId,
     onSelect,
-    laggingAfterSeconds = DEFAULT_LAGGING_AFTER_SECONDS,
-    staleAfterSeconds = DEFAULT_STALE_AFTER_SECONDS,
+    laggingAfterSeconds = FLEET_DEFAULT_LAGGING_AFTER_SECONDS,
+    staleAfterSeconds = FLEET_DEFAULT_STALE_AFTER_SECONDS,
     height = DEFAULT_HEIGHT,
     loading = false,
     className,
@@ -122,7 +116,7 @@ export const FleetMap: React.FC<FleetMapProps> = React.memo(
         aria-labelledby={headingId}
         className={className}
         data-testid={testId}
-        sx={{ display: 'flex', flexDirection: 'column', gap: theme.spacing(1.5), minWidth: 0 }}
+        sx={{ display: 'flex', flexDirection: 'column', gap: theme.spacing(FLEET_PANEL.gapUnits), minWidth: 0 }}
       >
         <Typography
           id={headingId}