@12-apps/ui 6.22.0 → 6.23.0

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { FleetMapState } from './FleetMap.hooks';
+import type { FleetMapCopy } from './FleetMap.types';
+export interface FleetBodyProps extends Pick<FleetMapState, 'ordered' | 'centre' | 'markers' | 'select' | 'onKeyDown'> {
+    copy: FleetMapCopy;
+    selectedId: string | null | undefined;
+    laggingAfterSeconds: number;
+    staleAfterSeconds: number;
+    height: string;
+    loading: boolean;
+    testId: string;
+}
+/**
+ * The two halves side by side: the roster that reads the fleet, and the map.
+ *
+ * A component rather than JSX inside {@link import('./FleetMap').FleetMap}
+ * because the layout is where every responsive decision lives, and keeping it
+ * here is what leaves the exported component short enough to read in one
+ * screen — which the complexity ledger enforces rather than merely suggests.
+ */
+export declare function FleetBody({ ordered, centre, markers, select, onKeyDown, copy, selectedId, laggingAfterSeconds, staleAfterSeconds, height, loading, testId, }: FleetBodyProps): React.JSX.Element;
+//# sourceMappingURL=FleetBody.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetBody.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetBody.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC;IACtF,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,MAAM,EACN,OAAO,EACP,MAAM,EACN,SAAS,EACT,IAAI,EACJ,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,MAAM,EACN,OAAO,EACP,MAAM,GACP,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAsDpC"}

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { FleetMarker } from './FleetMap.hooks';
+import type { LatLng } from './FleetMap.helpers';
+import type { FleetMapCopy } from './FleetMap.types';
+export interface FleetCanvasProps {
+    copy: FleetMapCopy;
+    /** Where to point. `null` renders NOTHING — see the component's note. */
+    centre: LatLng | null;
+    markers: FleetMarker[];
+    height: string;
+    testId: string;
+}
+/**
+ * The map half — a NAMED LANDMARK, not an `aria-hidden` one.
+ *
+ * Its controls are focusable, and `aria-hidden` over a focusable subtree is the
+ * `aria-hidden-focus` violation: a keyboard user tabs into something a screen
+ * reader insists is not there. `role="region"` with a name is what puts it in a
+ * screen reader's landmark rotor, so it can be jumped PAST in one gesture;
+ * `role="group"` is not a landmark and would not.
+ *
+ * ## Skipping it does not silence it, and that is not ours to fix here
+ *
+ * `MapPreview` puts `aria-live="polite"` on its own root, with an English
+ * `aria-label` naming the centre coordinates and zoom. So re-centring the map —
+ * which every selection change does — announces something like "Map preview
+ * centered at -23.5505, -46.6333 with zoom level 15", in English, however
+ * thoroughly a reader has skipped the landmark. Two things follow, and neither
+ * is solved by anything this file can do:
+ *
+ *   * a live region announces from wherever the reader is, so the landmark's
+ *     skippability does not suppress it;
+ *   * that string is the one piece of user-facing text in this component that
+ *     does NOT come through `copy`.
+ *
+ * Fixing it means changing `MapPreview`, which every other consumer shares, so
+ * it is stated here rather than quietly claimed away.
+ *
+ * ## No centre, no map
+ *
+ * `mapCentre` answers `null` rather than a coordinate for an empty fleet, and
+ * that refusal has to survive the whole way down. `MapPreview` has no default
+ * centre — it resolves `center || coordinates || { lat: 0, lng: 0 }` — so
+ * forwarding `undefined` sails the map to the Gulf of Guinea and prints
+ * `Lat: 0.000000` under a default pin. That is exactly the render the helper
+ * exists to prevent, and it is reachable: a board that is `loading` with
+ * nothing yet reported skips the empty state by design and lands here.
+ */
+export declare function FleetCanvas({ copy, centre, markers, height, testId, }: FleetCanvasProps): React.JSX.Element | null;
+//# sourceMappingURL=FleetCanvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetCanvas.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,YAAY,CAAC;IACnB,yEAAyE;IACzE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,MAAM,GACP,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAmB7C"}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { FleetMapProps } from './FleetMap.types';
+/**
+ * FleetMap — where a set of tracked units is right now, as a map beside the
+ * roster that reads it.
+ *
+ * Product-free by construction: it draws labelled dots with a freshness, and
+ * every word — the heading, the three freshness states, how a duration and a
+ * distance are written — arrives through {@link FleetMapProps.copy}. Couriers,
+ * service vans and field engineers are all the same picture.
+ *
+ * ## Three decisions worth knowing before changing it
+ *
+ * **The roster is the accessible representation, not a sidebar.** A map is a
+ * picture and a screen reader cannot read one, so the list carries the
+ * information: everything a sighted user gets from a pin — who, how recently,
+ * what they are carrying — is on the row. The map is a NAMED region rather than
+ * an `aria-hidden` one, because its controls are focusable and hiding a
+ * focusable subtree is the `aria-hidden-focus` violation.
+ *
+ * **Nothing here formats.** `lastSeen` and `accuracy` are functions on the copy
+ * object, the same line `StatCard` holds for its `value`: a duration and a
+ * distance are locale rules, and a component that wrote "2 min ago" would have
+ * made English the only language it could ever render.
+ *
+ * **An empty fleet is an empty STATE, not an empty map.** A map with no pins is
+ * indistinguishable from a map that failed to load, and the difference is the
+ * whole question a dispatcher is asking.
+ */
+export declare const FleetMap: React.FC<FleetMapProps>;
+export default FleetMap;
+//# sourceMappingURL=FleetMap.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetMap.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetMap.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAwDtD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuE5C,CAAC;AAIF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,23 @@
+import type { FleetMapCopy, FleetUnit } from './FleetMap.types';
+/**
+ * The copy and the fleet every story and test story shares.
+ *
+ * A module rather than a per-story literal, so a change to the shape breaks in
+ * ONE place rather than in fourteen — and so the test stories assert against
+ * the same words the visual ones render.
+ */
+/** English, because stories are developer-facing. A consumer passes its own. */
+export declare const FLEET_COPY: FleetMapCopy;
+/**
+ * Three riders around São Paulo, one in each freshness state.
+ *
+ * Deliberately NOT in staleness order, and the labels deliberately do not agree
+ * with it either. `rosterOrder` sorts on staleness and breaks ties on the
+ * label, so a fixture whose two orders coincide lets the roster's ordering
+ * assertion pass against a LABEL-only sort as readily as the real one — a test
+ * reporting coverage it does not have. Here the three orders are all different:
+ * declared is [ale, ana, bruno], alphabetical is the same, and the correct
+ * answer is [ana, bruno, ale].
+ */
+export declare const FLEET: FleetUnit[];
+//# sourceMappingURL=FleetMap.fixtures.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetMap.fixtures.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetMap.fixtures.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEhE;;;;;;GAMG;AAEH,gFAAgF;AAChF,eAAO,MAAM,UAAU,EAAE,YAgBxB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,EAAE,SAAS,EA2B5B,CAAC"}

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

@@ -0,0 +1,45 @@
+import type { FleetFreshness, FleetUnit } from './FleetMap.types';
+/**
+ * How current a fix is, on the two thresholds the caller supplied.
+ *
+ * Inclusive at both boundaries in the direction that reads better on a screen:
+ * a unit exactly at the lagging threshold is already lagging. A boundary has to
+ * fall somewhere, and the conservative side is the one that does not tell a
+ * dispatcher somebody is live when they are on the edge of not being.
+ */
+export declare function freshnessOf(staleSeconds: number, laggingAfterSeconds: number, staleAfterSeconds: number): FleetFreshness;
+/** A latitude/longitude pair, as the map wants its centre. */
+export interface LatLng {
+    lat: number;
+    lng: number;
+}
+/**
+ * Where the map should point.
+ *
+ * The selected unit when there is one — a dispatcher who clicked a name is
+ * asking to look at them. Otherwise the fleet's own centroid, which keeps
+ * everybody in frame without the caller having to compute a bounding box.
+ *
+ * `null` for an empty fleet rather than a coordinate: (0, 0) is a real place in
+ * the Atlantic, and a map that quietly sails there is worse than one that says
+ * it has nothing to show.
+ */
+export declare function mapCentre(units: readonly FleetUnit[], selectedId?: string | null): LatLng | null;
+/**
+ * The roster's order: freshest first, then alphabetically.
+ *
+ * Not the caller's order, deliberately. The one question this panel answers is
+ * *who is moving right now*, and a list sorted by anything else buries the
+ * answer under whoever happens to sort first. Ties break on the label so the
+ * list does not reshuffle between polls when two units share a staleness.
+ */
+export declare function rosterOrder(units: readonly FleetUnit[]): FleetUnit[];
+/**
+ * Move the selection by one row, wrapping at both ends.
+ *
+ * Wrapping rather than stopping: this is a short list a dispatcher arrows
+ * through repeatedly, and a selection that sticks at the last row makes the
+ * keyboard path feel broken next to the mouse one.
+ */
+export declare function nextSelection(units: readonly FleetUnit[], currentId: string | null | undefined, step: 1 | -1): string | null;
+//# sourceMappingURL=FleetMap.helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetMap.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetMap.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElE;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,YAAY,EAAE,MAAM,EACpB,mBAAmB,EAAE,MAAM,EAC3B,iBAAiB,EAAE,MAAM,GACxB,cAAc,CAIhB;AAED,8DAA8D;AAC9D,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,SAAS,SAAS,EAAE,EAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,GACzB,MAAM,GAAG,IAAI,CASf;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,SAAS,EAAE,GAAG,SAAS,EAAE,CAIpE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,SAAS,EAAE,EAC3B,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACpC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,GACX,MAAM,GAAG,IAAI,CAQf"}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { type LatLng } from './FleetMap.helpers';
+import type { FleetUnit } from './FleetMap.types';
+/**
+ * Everything the board derives from its props, in one hook.
+ *
+ * Split out of the component so the component is layout and nothing else.
+ *
+ * The memos are honest about what they buy, which is less than it looks. `units`
+ * arrives as a fresh array on every poll, so `ordered` and `markers` are
+ * recomputed on every poll whatever these do — a new array is a new identity.
+ * What they buy is stability across the renders a poll does NOT cause: a parent
+ * re-render, a selection change (which re-runs `centre` but not `ordered`), a
+ * theme flip. Sorting a fleet is cheap either way; this is tidiness, not a
+ * measured win, and it should not be read as one.
+ *
+ * `centre` is the exception, and there it is load-bearing rather than tidy —
+ * see {@link useFleetMap}.
+ *
+ * ## Selection works with, without, or half-way through a handler
+ *
+ * `selectedId` and `onSelect` are both optional, so all four combinations
+ * arrive. Left purely controlled, the two useful ones broke: with neither prop
+ * the roster was a listbox that answered nothing, and arrowing it called
+ * `preventDefault` before a no-op `select`, so the keys did not move a
+ * selection AND did not scroll the page either.
+ *
+ * So the hook keeps its own selection and defers to `selectedId` only when the
+ * caller passes one — the ordinary controlled/uncontrolled split, the same one
+ * an `<input>` makes. `onSelect` still fires either way, so a consumer can
+ * observe the selection without owning it.
+ */
+/** One pin, in the shape `MapPreview` takes. */
+export interface FleetMarker {
+    position: LatLng;
+    title: string;
+    onClick: () => void;
+}
+export interface FleetMapState {
+    /** The units, freshest first — see {@link rosterOrder}. */
+    ordered: FleetUnit[];
+    /**
+     * The selection in force — the caller's when they own it, this hook's when
+     * they do not. Everything downstream reads THIS and never the raw prop.
+     */
+    active: string | null;
+    /** Where the map points, or `null` when there is nothing to show. */
+    centre: LatLng | null;
+    select: (id: string) => void;
+    markers: FleetMarker[];
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare function useFleetMap(units: readonly FleetUnit[], selectedId: string | null | undefined, onSelect: ((id: string) => void) | undefined): FleetMapState;
+//# sourceMappingURL=FleetMap.hooks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetMap.hooks.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetMap.hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAyC,KAAK,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACxF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,gDAAgD;AAChD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B,2DAA2D;IAC3D,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB;;;OAGG;IACH,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,qEAAqE;IACrE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACjE;AAiDD,wBAAgB,WAAW,CACzB,KAAK,EAAE,SAAS,SAAS,EAAE,EAC3B,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACrC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,GAC3C,aAAa,CAuDf"}

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

@@ -0,0 +1,145 @@
+import type { MapPreviewCopy } from '../../../copy';
+/**
+ * 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 {@link FleetMapCopy}.
+ */
+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.
+ *
+ * `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 FleetMapCopy {
+    /** 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: `aria-busy` marks the
+     * region stale without uttering anything, the skeletons are `aria-hidden`,
+     * 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 map region's accessible name.
+     *
+     * The map is NOT `aria-hidden`, and that is deliberate rather than an
+     * oversight: it carries focusable controls (zoom, centre, map type), and
+     * `aria-hidden` over a focusable subtree is the `aria-hidden-focus`
+     * violation — a keyboard user tabs into a region a screen reader insists is
+     * not there. So it is a NAMED region a reader can skip past instead, and the
+     * roster beside it carries every fact a pin does.
+     *
+     * Skipping it does not silence it: `MapPreview` carries its own
+     * `aria-live="polite"` and announces its centre in English on every
+     * re-centre. See `FleetCanvas` for why that is stated rather than fixed here.
+     */
+    mapLabel: 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 map control bar's own six names. */
+    map: MapPreviewCopy;
+}
+/** Props for the {@link FleetMap} live board. */
+export interface FleetMapProps {
+    /** Everyone currently reporting. An empty array renders the empty state. */
+    units: readonly FleetUnit[];
+    copy: FleetMapCopy;
+    /**
+     * Which unit is highlighted: the map centres on it and the roster marks it
+     * selected. `null` selects nobody and centres on the whole fleet.
+     *
+     * 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 on a row or a pin, and each arrow-key move. Fires in both modes, so
+     * an uncontrolled board can still be observed.
+     *
+     * 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;
+    /** Map height, any CSS length. */
+    height?: string;
+    /**
+     * While true the map and roster are marked `aria-busy`, and the roster 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 {@link FleetMapCopy.loading} is set — `aria-busy` is a
+     * state, not an utterance. The panel root is deliberately not the busy
+     * element, so that announcement sits outside the busy subtree.
+     */
+    loading?: boolean;
+    className?: string;
+    /** Test id for the panel root; every child id is derived from it. */
+    dataTestId?: string;
+}
+//# sourceMappingURL=FleetMap.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetMap.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetMap.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,wEAAwE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,6EAA6E;AAC7E,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D;;;;;;;;GAQG;AACH,MAAM,WAAW,YAAY;IAC3B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IAC1C,iCAAiC;IACjC,QAAQ,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,mEAAmE;IACnE,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,2CAA2C;IAC3C,GAAG,EAAE,cAAc,CAAC;CACrB;AAED,iDAAiD;AACjD,MAAM,WAAW,aAAa;IAC5B,4EAA4E;IAC5E,KAAK,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB;;;;;;;;;;;;;OAaG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;;;;;OAQG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { FleetMapCopy, FleetUnit } from './FleetMap.types';
+export interface FleetRosterProps {
+    units: readonly FleetUnit[];
+    copy: FleetMapCopy;
+    selectedId: string | null | undefined;
+    onSelect: (id: string) => void;
+    laggingAfterSeconds: number;
+    staleAfterSeconds: number;
+    loading: boolean;
+    testId: string;
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}
+export declare function FleetRoster({ units, copy, selectedId, onSelect, laggingAfterSeconds, staleAfterSeconds, loading, testId, onKeyDown, }: FleetRosterProps): React.JSX.Element;
+//# sourceMappingURL=FleetRoster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FleetRoster.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/FleetRoster.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAkB,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAsOhF,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,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACjE;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,mBAAmB,EACnB,iBAAiB,EACjB,OAAO,EACP,MAAM,EACN,SAAS,GACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2DtC"}

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

@@ -0,0 +1,5 @@
+export { FleetMap } from './FleetMap';
+export { freshnessOf, mapCentre, nextSelection, rosterOrder } from './FleetMap.helpers';
+export type { LatLng } from './FleetMap.helpers';
+export type { FleetFreshness, FleetMapCopy, FleetMapProps, FleetUnit, } from './FleetMap.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/FleetMap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACxF,YAAY,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,YAAY,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,SAAS,GACV,MAAM,kBAAkB,CAAC"}

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

@@ -17,6 +17,7 @@ export * from './InteractiveTooltip';
 export * from './LazyImage';
 export * from './Lightbox';
 export * from './LoadingState';
+export * from './FleetMap';
 export * from './MapPreview';
 export * from './Popover';
 export * from './Progress';

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

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

package/dist/user-avatar.js

@@ -1,12 +1,12 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-ZKR5B6YJ.js";
+} from "./chunk-4LRFGB3K.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-7BYFC2MR.js";
-import "./chunk-3ZVUNSFF.js";
+import "./chunk-I7HYGIEJ.js";
 import "./chunk-4SQFO4GW.js";
 import "./chunk-FAITHWIO.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-XRMZMBE3.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";

package/package.json

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

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

@@ -0,0 +1,96 @@
+import Box from '@mui/material/Box/index.js';
+import Stack from '@mui/material/Stack/index.js';
+import React from 'react';
+
+import { FleetCanvas } from './FleetCanvas';
+import type { FleetMapState } from './FleetMap.hooks';
+import type { FleetMapCopy } from './FleetMap.types';
+import { FleetRoster } from './FleetRoster';
+
+export interface FleetBodyProps
+  extends Pick<FleetMapState, 'ordered' | 'centre' | 'markers' | 'select' | 'onKeyDown'> {
+  copy: FleetMapCopy;
+  selectedId: string | null | undefined;
+  laggingAfterSeconds: number;
+  staleAfterSeconds: number;
+  height: string;
+  loading: boolean;
+  testId: string;
+}
+
+/**
+ * The two halves side by side: the roster that reads the fleet, and the map.
+ *
+ * A component rather than JSX inside {@link import('./FleetMap').FleetMap}
+ * because the layout is where every responsive decision lives, and keeping it
+ * here is what leaves the exported component short enough to read in one
+ * screen — which the complexity ledger enforces rather than merely suggests.
+ */
+export function FleetBody({
+  ordered,
+  centre,
+  markers,
+  select,
+  onKeyDown,
+  copy,
+  selectedId,
+  laggingAfterSeconds,
+  staleAfterSeconds,
+  height,
+  loading,
+  testId,
+}: FleetBodyProps): React.JSX.Element {
+  return (
+    <Stack
+      direction={{ xs: 'column', md: 'row' }}
+      spacing={2}
+      // `aria-busy` belongs on the halves that are actually reloading, NOT on
+      // the panel root — the live region announcing the reload is a sibling up
+      // there, and a live region inside a busy subtree is exactly what
+      // `aria-busy` tells assistive tech to hold back. Marking the root busy
+      // would have silenced the announcement for the whole of the only window
+      // in which it has anything to say. `CepField` splits them the same way.
+      aria-busy={loading || undefined}
+      data-testid={`${testId}-body`}
+      sx={{ alignItems: 'stretch', minWidth: 0 }}
+    >
+      {/* The roster reads first on a phone and sits beside the map from md up.
+          It keeps a ceiling so thirty units scroll rather than push the map off
+          the screen.
+
+          It also WIDENS with the viewport rather than staying at its md width.
+          Held at 280px, a desktop gave the map 1600px for three pins while the
+          roster stayed too narrow for its own meta line — `Lagging · 2 min ago ·
+          ±180 m` wrapped, at 1920px of all widths. The rungs below are the ones
+          the six-width pass was taken at. */}
+      <Box
+        sx={{
+          flexBasis: { md: '280px', lg: '320px', xl: '380px' },
+          flexShrink: 0,
+          minWidth: 0,
+          maxHeight: height,
+          display: 'flex',
+        }}
+      >
+        <FleetRoster
+          units={ordered}
+          copy={copy}
+          selectedId={selectedId}
+          onSelect={select}
+          laggingAfterSeconds={laggingAfterSeconds}
+          staleAfterSeconds={staleAfterSeconds}
+          loading={loading}
+          testId={testId}
+          onKeyDown={onKeyDown}
+        />
+      </Box>
+      <FleetCanvas
+        copy={copy}
+        centre={centre}
+        markers={markers}
+        height={height}
+        testId={testId}
+      />
+    </Stack>
+  );
+}