@oxy.so/bloom 4.0.0 → 4.2.0

package/lib/module/menu-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["menu-item/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/navigation-banner/ArrivalBar.js

@@ -0,0 +1,174 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { Button } from '../button';
+import { GlassIsland } from "../glass/index.js";
+import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { NAVIGATION_BANNER_GEOMETRY } from "./constants.js";
+import { describeArrival, resolveNavigationPaint } from "./shared.js";
+
+/**
+ * THE STRIP AT THE BOTTOM while you are driving: when you get there, how long
+ * is left, how far is left, and the way out.
+ *
+ *   pane      `GlassIsland` at the 16 rung, stretched — the same material the
+ *             banner at the top is on, because they are two edges of one
+ *             surface over the same tiles
+ *   figures   THREE PEERS, `title-3-semibold` and TABULAR, each over its own
+ *             quiet caption. Peers because the driver is asking a different
+ *             question of each one and none of them is the answer to the other
+ *             two; tabular because all three count down.
+ *   end       the way out, on the right — `Button` in `destructive` at the 44
+ *             rung, which keeps its own chrome inside the island on purpose (a
+ *             glass control flush with the pane would be the quietest thing on
+ *             a strip whose only action stops the navigation). 44 rather than
+ *             the 32 that looks better in a screenshot: this is pressed in a
+ *             moving car, by a thumb, at the bottom of the screen.
+ *
+ * ── WHY THIS IS NOT `OrderStatusBar` ────────────────────────────────────────
+ *
+ * They look alike and they answer differently shaped questions, and the shape
+ * is the whole component. `OrderStatusBar` has ONE headline with an arrival
+ * reading beside it, a tile, a quiet second line and a progress meter — it says
+ * "here is what is happening, and here is how far along it is". This has THREE
+ * readings of equal weight and no state at all: the journey is happening, and
+ * the driver picks whichever of the three they wanted. Giving `OrderStatusBar`
+ * a three-figure mode would be a second layout behind a prop, and giving this
+ * one a status line and a meter would be a tracker for a journey the user is
+ * ON rather than waiting for.
+ *
+ * They do share a surface rung and their tabular figures, and both take the app
+ * a PRE-FORMATTED reading: neither reads a clock, computes an ETA or knows what
+ * a kilometre is.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Figure({
+  label,
+  value,
+  color,
+  labelColor,
+  testID
+}) {
+  return (
+    /*#__PURE__*/
+    // `minWidth: 0`: each figure is a nowrap one-liner, so without this its
+    // min-content width becomes the strip's floor and three of them push the
+    // pane past a 390 phone.
+    _jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        gap: 1
+      },
+      children: [/*#__PURE__*/_jsx(Text, {
+        variant: "title-3-semibold",
+        numberOfLines: 1,
+        testID: testID,
+        style: {
+          color,
+          fontVariant: ['tabular-nums']
+        },
+        children: value
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "caption-2-medium",
+        numberOfLines: 1,
+        style: {
+          color: labelColor
+        },
+        children: label
+      })]
+    })
+  );
+}
+function ArrivalBarComponent({
+  arrival,
+  remainingTime,
+  remainingDistance,
+  onEnd,
+  action,
+  labels,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const g = NAVIGATION_BANNER_GEOMETRY;
+  const endWord = labels?.end ?? 'End';
+  return /*#__PURE__*/_jsx(GlassIsland, {
+    radius: g.radius,
+    style: [{
+      alignSelf: 'stretch',
+      flexDirection: 'column'
+    }, style],
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        padding: g.padding
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        role: "img",
+        accessibilityLabel: accessibilityLabel ?? describeArrival({
+          arrival,
+          remainingTime,
+          remainingDistance,
+          labels
+        }),
+        style: {
+          flex: 1,
+          minWidth: 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12
+        },
+        children: /*#__PURE__*/_jsxs(View, {
+          "aria-hidden": true,
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          style: {
+            flex: 1,
+            minWidth: 0,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12
+          },
+          children: [/*#__PURE__*/_jsx(Figure, {
+            label: labels?.arrival ?? 'Arrival',
+            value: arrival,
+            color: paint.text,
+            labelColor: paint.textTertiary,
+            testID: testID ? `${testID}-arrival` : undefined
+          }), /*#__PURE__*/_jsx(Figure, {
+            label: labels?.time ?? 'Left',
+            value: remainingTime,
+            color: paint.text,
+            labelColor: paint.textTertiary,
+            testID: testID ? `${testID}-time` : undefined
+          }), /*#__PURE__*/_jsx(Figure, {
+            label: labels?.distance ?? 'Distance',
+            value: remainingDistance,
+            color: paint.text,
+            labelColor: paint.textTertiary,
+            testID: testID ? `${testID}-distance` : undefined
+          })]
+        })
+      }), action ?? (onEnd ? /*#__PURE__*/_jsx(Button, {
+        variant: "destructive",
+        size: "lg",
+        icon: RiCloseLine,
+        onPress: onEnd,
+        testID: testID ? `${testID}-end` : undefined,
+        children: endWord
+      }) : null)]
+    })
+  });
+}
+export const ArrivalBar = /*#__PURE__*/memo(ArrivalBarComponent);
+ArrivalBar.displayName = 'ArrivalBar';
+//# sourceMappingURL=ArrivalBar.js.map

package/lib/module/navigation-banner/ArrivalBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","Button","GlassIsland","RiCloseLine","useTheme","Text","NAVIGATION_BANNER_GEOMETRY","describeArrival","resolveNavigationPaint","jsx","_jsx","jsxs","_jsxs","Figure","label","value","color","labelColor","testID","style","flex","minWidth","gap","children","variant","numberOfLines","fontVariant","ArrivalBarComponent","arrival","remainingTime","remainingDistance","onEnd","action","labels","accessibilityLabel","theme","paint","g","endWord","end","radius","alignSelf","flexDirection","alignItems","padding","role","accessibilityElementsHidden","importantForAccessibility","text","textTertiary","undefined","time","distance","size","icon","onPress","ArrivalBar","displayName"],"sourceRoot":"../../../src","sources":["navigation-banner/ArrivalBar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/navigation-banner/LaneGuidance.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { DIRECTIONS_MANEUVER_ICON } from "../directions/maneuvers.js";
+import { borderRadius } from "../styles/tokens.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { useTheme } from "../theme/use-theme.js";
+import { NAVIGATION_BANNER_GEOMETRY } from "./constants.js";
+import { describeLanes, resolveNavigationPaint } from "./shared.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * THE LANES ACROSS, and which of them take you where you are going.
+ *
+ *   cell      38 tall, 12 radius, one per lane, left to right as the driver
+ *             sees them. A lane painted with several arrows grows sideways
+ *             rather than stacking them — a driver reads a lane by counting
+ *             across, so a cell that is taller than its neighbours breaks the
+ *             count.
+ *   allowed   the accent's own tint with the arrow in that tint's accent
+ *   quiet     no fill, and the arrow at the GRAPHICAL rung — the one that is
+ *             floored for a glyph rather than for text, which is what an arrow
+ *             is
+ *   preferred within an allowed lane, the one arrow to take stays at full
+ *             strength while its siblings drop to the quiet rung: a lane that
+ *             also goes straight on is still the lane you want
+ *
+ * The arrows are `DIRECTIONS_MANEUVER_ICON`, keyed by a SUBSET of the maneuver
+ * vocabulary. A lane arrow is a maneuver drawn small; a second glyph map would
+ * be a second opinion about what "slight right" looks like.
+ *
+ * The row is one `img` named by `describeLanes` — four arrows in a row say
+ * nothing aloud, and a reader who cannot see them still has to be told which
+ * lane to be in.
+ */
+function laneArrowColor(lane, direction, colors) {
+  if (!lane.allowed) return colors.quiet;
+  if (lane.preferred === undefined) return colors.accent;
+  return lane.preferred === direction ? colors.accent : colors.quiet;
+}
+function LaneGuidanceComponent({
+  lanes,
+  labels,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const accent = resolveAccentColors(theme.colors, 'primary', 'subtle');
+  const g = NAVIGATION_BANNER_GEOMETRY;
+  const colors = {
+    accent: accent.foreground,
+    quiet: paint.textGraphical
+  };
+  return /*#__PURE__*/_jsx(View, {
+    role: "img",
+    accessibilityLabel: accessibilityLabel ?? describeLanes(lanes, labels),
+    testID: testID,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4
+    }, style],
+    children: lanes.map((lane, index) => /*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-lane-${index}` : undefined,
+      style: {
+        minWidth: g.laneWidth,
+        height: g.lane,
+        paddingLeft: 4,
+        paddingRight: 4,
+        borderRadius: borderRadius.md,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+        backgroundColor: lane.allowed ? accent.background : 'transparent'
+      },
+      children: lane.directions.map((direction, arrow) => {
+        const Arrow = DIRECTIONS_MANEUVER_ICON[direction];
+        return /*#__PURE__*/_jsx(Arrow, {
+          width: g.smallGlyph,
+          height: g.smallGlyph,
+          fill: laneArrowColor(lane, direction, colors)
+        }, `${direction}-${arrow}`);
+      })
+    }, lane.id ?? index))
+  });
+}
+export const LaneGuidance = /*#__PURE__*/memo(LaneGuidanceComponent);
+LaneGuidance.displayName = 'LaneGuidance';
+//# sourceMappingURL=LaneGuidance.js.map

package/lib/module/navigation-banner/LaneGuidance.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","DIRECTIONS_MANEUVER_ICON","borderRadius","resolveAccentColors","useTheme","NAVIGATION_BANNER_GEOMETRY","describeLanes","resolveNavigationPaint","jsx","_jsx","laneArrowColor","lane","direction","colors","allowed","quiet","preferred","undefined","accent","LaneGuidanceComponent","lanes","labels","accessibilityLabel","style","testID","theme","paint","g","foreground","textGraphical","role","flexDirection","alignItems","gap","children","map","index","minWidth","laneWidth","height","paddingLeft","paddingRight","md","justifyContent","backgroundColor","background","directions","arrow","Arrow","width","smallGlyph","fill","id","LaneGuidance","displayName"],"sourceRoot":"../../../src","sources":["navigation-banner/LaneGuidance.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAC5C,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,wBAAwB,QAAQ,4BAAyB;AAClE,SAASC,YAAY,QAAQ,qBAAkB;AAC/C,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,QAAQ,QAAQ,uBAAoB;AAC7C,SAASC,0BAA0B,QAAQ,gBAAa;AACxD,SAASC,aAAa,EAAEC,sBAAsB,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CACrBC,IAAoB,EACpBC,SAA6B,EAC7BC,MAAyC,EACjC;EACR,IAAI,CAACF,IAAI,CAACG,OAAO,EAAE,OAAOD,MAAM,CAACE,KAAK;EACtC,IAAIJ,IAAI,CAACK,SAAS,KAAKC,SAAS,EAAE,OAAOJ,MAAM,CAACK,MAAM;EACtD,OAAOP,IAAI,CAACK,SAAS,KAAKJ,SAAS,GAAGC,MAAM,CAACK,MAAM,GAAGL,MAAM,CAACE,KAAK;AACpE;AAIA,SAASI,qBAAqBA,CAAC;EAC7BC,KAAK;EACLC,MAAM;EACNC,kBAAkB;EAClBC,KAAK;EACLC;AACiB,CAAC,EAAE;EACpB,MAAMC,KAAK,GAAGrB,QAAQ,CAAC,CAAC;EACxB,MAAMsB,KAAK,GAAG3B,OAAO,CAAC,MAAMQ,sBAAsB,CAACkB,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACnE,MAAMP,MAAM,GAAGf,mBAAmB,CAACsB,KAAK,CAACZ,MAAM,EAAE,SAAS,EAAE,QAAQ,CAAC;EACrE,MAAMc,CAAC,GAAGtB,0BAA0B;EACpC,MAAMQ,MAAM,GAAG;IAAEK,MAAM,EAAEA,MAAM,CAACU,UAAU;IAAEb,KAAK,EAAEW,KAAK,CAACG;EAAc,CAAC;EAExE,oBACEpB,IAAA,CAACT,IAAI;IACH8B,IAAI,EAAC,KAAK;IACVR,kBAAkB,EAAEA,kBAAkB,IAAIhB,aAAa,CAACc,KAAK,EAAEC,MAAM,CAAE;IACvEG,MAAM,EAAEA,MAAO;IACfD,KAAK,EAAE,CAAC;MAAEQ,aAAa,EAAE,KAAK;MAAEC,UAAU,EAAE,QAAQ;MAAEC,GAAG,EAAE;IAAE,CAAC,EAAEV,KAAK,CAAE;IAAAW,QAAA,EAEtEd,KAAK,CAACe,GAAG,CAAC,CAACxB,IAAI,EAAEyB,KAAK,kBACrB3B,IAAA,CAACT,IAAI;MAEHwB,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,SAASY,KAAK,EAAE,GAAGnB,SAAU;MACvDM,KAAK,EAAE;QACLc,QAAQ,EAAEV,CAAC,CAACW,SAAS;QACrBC,MAAM,EAAEZ,CAAC,CAAChB,IAAI;QACd6B,WAAW,EAAE,CAAC;QACdC,YAAY,EAAE,CAAC;QACfvC,YAAY,EAAEA,YAAY,CAACwC,EAAE;QAC7BX,aAAa,EAAE,KAAK;QACpBC,UAAU,EAAE,QAAQ;QACpBW,cAAc,EAAE,QAAQ;QACxBV,GAAG,EAAE,CAAC;QACNW,eAAe,EAAEjC,IAAI,CAACG,OAAO,GAAGI,MAAM,CAAC2B,UAAU,GAAG;MACtD,CAAE;MAAAX,QAAA,EAEDvB,IAAI,CAACmC,UAAU,CAACX,GAAG,CAAC,CAACvB,SAAS,EAAEmC,KAAK,KAAK;QACzC,MAAMC,KAAK,GAAG/C,wBAAwB,CAACW,SAAS,CAAC;QACjD,oBACEH,IAAA,CAACuC,KAAK;UAEJC,KAAK,EAAEtB,CAAC,CAACuB,UAAW;UACpBX,MAAM,EAAEZ,CAAC,CAACuB,UAAW;UACrBC,IAAI,EAAEzC,cAAc,CAACC,IAAI,EAAEC,SAAS,EAAEC,MAAM;QAAE,GAHzC,GAAGD,SAAS,IAAImC,KAAK,EAI3B,CAAC;MAEN,CAAC;IAAC,GAzBGpC,IAAI,CAACyC,EAAE,IAAIhB,KA0BZ,CACP;EAAC,CACE,CAAC;AAEX;AAEA,OAAO,MAAMiB,YAAY,gBAAGvD,IAAI,CAACqB,qBAAqB,CAAC;AACvDkC,YAAY,CAACC,WAAW,GAAG,cAAc","ignoreList":[]}

package/lib/module/navigation-banner/NavigationBanner.js

@@ -0,0 +1,195 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { DIRECTIONS_MANEUVER_ICON } from "../directions/maneuvers.js";
+import { GlassIsland } from "../glass/index.js";
+import { borderRadius } from "../styles/tokens.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { NAVIGATION_BANNER_GEOMETRY, NAVIGATION_STATE_ICON, NAVIGATION_STATE_LABELS, NAVIGATION_STATE_TONE } from "./constants.js";
+import { describeNavigationBanner, maneuverWordFor, resolveNavigationPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * THE NEXT MANEUVER, while it is happening.
+ *
+ *   pane        `GlassIsland` at the 16 rung — the guidance is drawn over tiles
+ *               Bloom does not own, and the island is the one material in the
+ *               library priced for that. It is asked for a SURFACE radius
+ *               rather than its default capsule: a banner is a surface, and the
+ *               pill rung belongs to button-like controls.
+ *   tile        56 square, 12 radius, the state's tone as a tint with the
+ *               maneuver glyph in that tone's own accent — the same tile recipe
+ *               `OrderStatusBar` paints, at the size a driver reads without
+ *               focusing.
+ *   glyph       `DIRECTIONS_MANEUVER_ICON`. The SAME map the step list beside
+ *               it uses: two sets of arrows for one vocabulary is two answers
+ *               to the question "which way is slight right".
+ *   headline    the distance, TABULAR, so a reading counting down from 400 m
+ *               does not shuffle the street name under it
+ *   instruction the street, up to two lines
+ *   then        the maneuver after this one, behind a full-bleed hairline
+ *   children    lanes, a speed sign — behind a second hairline, and outside the
+ *               announcement, because each names itself
+ *
+ * ── THE TWO EXCEPTIONAL STATES ARE THIS COMPONENT ───────────────────────────
+ *
+ * `off-route` and `rerouting` take the same strip, in the same place, at the
+ * same moment. A separate surface appearing where this one was is a jump, and
+ * the driver has to find the thing they were already reading. So the state
+ * swaps the glyph, the tone and the headline, and the maneuver — which is no
+ * longer true — stops being announced at all.
+ *
+ * ── THE ROW IS ONE UTTERANCE ────────────────────────────────────────────────
+ *
+ * The glyph is the only thing on screen that says which way to turn, and a
+ * glyph says nothing aloud. The maneuver row is therefore one `img` named by
+ * `describeNavigationBanner`, with its drawn text hidden from assistive
+ * technology so the distance is not read twice. `children` sit OUTSIDE that
+ * name: a lane row and a speed sign each announce themselves.
+ */
+function NavigationBannerComponent({
+  maneuver,
+  distance,
+  instruction,
+  thenManeuver,
+  then,
+  state = 'guiding',
+  children,
+  labels,
+  accessibilityLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const g = NAVIGATION_BANNER_GEOMETRY;
+  const guiding = state === 'guiding';
+  const tone = guiding ? 'primary' : NAVIGATION_STATE_TONE[state];
+  const accent = resolveAccentColors(theme.colors, tone, 'subtle');
+  const Glyph = guiding ? DIRECTIONS_MANEUVER_ICON[maneuver] : NAVIGATION_STATE_ICON[state];
+  const stateHeadline = guiding ? undefined : (state === 'off-route' ? labels?.offRoute : labels?.rerouting) ?? NAVIGATION_STATE_LABELS[state];
+  const headline = stateHeadline ?? distance;
+  const thenWord = labels?.then ?? 'then';
+  const ThenGlyph = thenManeuver !== undefined ? DIRECTIONS_MANEUVER_ICON[thenManeuver] : null;
+  const thenLine = guiding && (thenManeuver !== undefined || then) ? [thenWord, thenManeuver !== undefined ? maneuverWordFor(thenManeuver, labels).toLowerCase() : null, then].filter(Boolean).join(' ') : null;
+  const name = accessibilityLabel ?? describeNavigationBanner({
+    maneuver,
+    distance,
+    instruction,
+    then,
+    thenManeuver,
+    state,
+    labels
+  });
+  return /*#__PURE__*/_jsxs(GlassIsland, {
+    radius: g.radius,
+    style: [{
+      alignSelf: 'stretch',
+      flexDirection: 'column'
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(View, {
+      role: "img",
+      accessibilityLabel: name,
+      testID: testID ? `${testID}-guidance` : undefined,
+      children: /*#__PURE__*/_jsxs(View, {
+        "aria-hidden": true,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: g.padding,
+            padding: g.padding
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            testID: testID ? `${testID}-glyph` : undefined,
+            style: {
+              width: g.glyph,
+              height: g.glyph,
+              borderRadius: borderRadius.md,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: accent.background
+            },
+            children: /*#__PURE__*/_jsx(Glyph, {
+              width: g.glyphIcon,
+              height: g.glyphIcon,
+              fill: accent.foreground
+            })
+          }), /*#__PURE__*/_jsxs(View, {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              gap: 2
+            },
+            children: [headline ? /*#__PURE__*/_jsx(Text, {
+              variant: "title-2-semibold",
+              numberOfLines: 1,
+              testID: testID ? `${testID}-headline` : undefined,
+              style: {
+                color: paint.text,
+                ...(guiding ? {
+                  fontVariant: ['tabular-nums']
+                } : null)
+              },
+              children: headline
+            }) : null, /*#__PURE__*/_jsx(Text, {
+              variant: headline ? 'headline-medium' : 'title-2-semibold',
+              numberOfLines: 2,
+              testID: testID ? `${testID}-instruction` : undefined,
+              style: {
+                color: headline ? paint.textSecondary : paint.text
+              },
+              children: instruction
+            })]
+          })]
+        }), thenLine ? /*#__PURE__*/_jsxs(View, {
+          testID: testID ? `${testID}-then` : undefined,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            paddingLeft: g.padding,
+            paddingRight: g.padding,
+            paddingTop: 10,
+            paddingBottom: 10,
+            borderTopWidth: 1,
+            borderTopColor: paint.border
+          },
+          children: [ThenGlyph ? /*#__PURE__*/_jsx(ThenGlyph, {
+            width: g.smallGlyph,
+            height: g.smallGlyph,
+            fill: paint.textSecondary
+          }) : null, /*#__PURE__*/_jsx(Text, {
+            variant: "body-2-medium",
+            numberOfLines: 1,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              color: paint.textSecondary
+            },
+            children: thenLine
+          })]
+        }) : null]
+      })
+    }), children != null ? /*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-extras` : undefined,
+      style: {
+        paddingLeft: g.padding,
+        paddingRight: g.padding,
+        paddingTop: 10,
+        paddingBottom: 10,
+        borderTopWidth: 1,
+        borderTopColor: paint.border
+      },
+      children: children
+    }) : null]
+  });
+}
+export const NavigationBanner = /*#__PURE__*/memo(NavigationBannerComponent);
+NavigationBanner.displayName = 'NavigationBanner';
+//# sourceMappingURL=NavigationBanner.js.map

package/lib/module/navigation-banner/NavigationBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","DIRECTIONS_MANEUVER_ICON","GlassIsland","borderRadius","resolveAccentColors","useTheme","Text","NAVIGATION_BANNER_GEOMETRY","NAVIGATION_STATE_ICON","NAVIGATION_STATE_LABELS","NAVIGATION_STATE_TONE","describeNavigationBanner","maneuverWordFor","resolveNavigationPaint","jsx","_jsx","jsxs","_jsxs","NavigationBannerComponent","maneuver","distance","instruction","thenManeuver","then","state","children","labels","accessibilityLabel","style","testID","theme","paint","g","guiding","tone","accent","colors","Glyph","stateHeadline","undefined","offRoute","rerouting","headline","thenWord","ThenGlyph","thenLine","toLowerCase","filter","Boolean","join","name","radius","alignSelf","flexDirection","role","accessibilityElementsHidden","importantForAccessibility","alignItems","gap","padding","width","glyph","height","md","justifyContent","backgroundColor","background","glyphIcon","fill","foreground","flex","minWidth","variant","numberOfLines","color","text","fontVariant","textSecondary","paddingLeft","paddingRight","paddingTop","paddingBottom","borderTopWidth","borderTopColor","border","smallGlyph","NavigationBanner","displayName"],"sourceRoot":"../../../src","sources":["navigation-banner/NavigationBanner.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/navigation-banner/SpeedLimitPill.js

@@ -0,0 +1,98 @@
+"use strict";
+
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { bloomShadowStyle } from '../design-tokens/shadows';
+import { resolveMapMarkerPaint } from "../map-marker/shared.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { NAVIGATION_BANNER_GEOMETRY } from "./constants.js";
+import { describeSpeedLimit, resolveNavigationPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * THE POSTED LIMIT: a round sign, small enough to sit beside the guidance and
+ * legible enough to read off a windscreen mount.
+ *
+ *   sign      48 round with a 4 ring in the tone, on the SAME chrome surface
+ *             every floating map piece paints, with `shadow-s` — so it reads on
+ *             a satellite tile as well as on a pale street map
+ *   number    `title-3-bold`, TABULAR, one line, never truncated
+ *   unit      `caption-2-medium` under the sign, quiet
+ *
+ * ── `exceeded` FILLS THE SIGN, IT DOES NOT BRIGHTEN IT ──────────────────────
+ *
+ * A sign that only changed shade is a sign a driver reads as the same sign; the
+ * change has to be one that survives a glance, in daylight, at an angle. So
+ * over the limit the ring's tone becomes the FILL and the number takes that
+ * fill's own on-colour, which is the pair `resolveAccentColors` already
+ * guarantees is legible. Nothing moves, and nothing flashes: a warning that
+ * animates in a car is a warning that asks for attention the road needs.
+ *
+ * The sign is a CIRCLE because it is a sign, not a capsule of text — the pill
+ * rung is for button-like controls and this is not one.
+ */
+function SpeedLimitPillComponent({
+  limit,
+  unit,
+  exceeded = false,
+  tone = 'error',
+  accessibilityLabel,
+  exceededLabel,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const paint = useMemo(() => resolveNavigationPaint(theme), [theme]);
+  const map = useMemo(() => resolveMapMarkerPaint(theme), [theme]);
+  const solid = resolveAccentColors(theme.colors, tone, 'solid');
+  const g = NAVIGATION_BANNER_GEOMETRY;
+  return /*#__PURE__*/_jsxs(View, {
+    role: "img",
+    accessibilityLabel: accessibilityLabel ?? describeSpeedLimit({
+      limit,
+      unit,
+      exceeded,
+      exceededLabel
+    }),
+    testID: testID,
+    style: [{
+      alignItems: 'center',
+      gap: 2
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      testID: testID ? `${testID}-sign` : undefined,
+      style: {
+        width: g.sign,
+        height: g.sign,
+        borderRadius: g.sign / 2,
+        borderWidth: g.signRing,
+        borderColor: solid.background,
+        backgroundColor: exceeded ? solid.background : map.surface,
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...bloomShadowStyle('s')
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        variant: "title-3-bold",
+        numberOfLines: 1,
+        style: {
+          color: exceeded ? solid.foreground : paint.text,
+          fontVariant: ['tabular-nums']
+        },
+        children: limit
+      })
+    }), unit ? /*#__PURE__*/_jsx(Text, {
+      variant: "caption-2-medium",
+      numberOfLines: 1,
+      testID: testID ? `${testID}-unit` : undefined,
+      style: {
+        color: paint.textTertiary
+      },
+      children: unit
+    }) : null]
+  });
+}
+export const SpeedLimitPill = /*#__PURE__*/memo(SpeedLimitPillComponent);
+SpeedLimitPill.displayName = 'SpeedLimitPill';
+//# sourceMappingURL=SpeedLimitPill.js.map

package/lib/module/navigation-banner/SpeedLimitPill.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useMemo","View","bloomShadowStyle","resolveMapMarkerPaint","resolveAccentColors","useTheme","Text","NAVIGATION_BANNER_GEOMETRY","describeSpeedLimit","resolveNavigationPaint","jsx","_jsx","jsxs","_jsxs","SpeedLimitPillComponent","limit","unit","exceeded","tone","accessibilityLabel","exceededLabel","style","testID","theme","paint","map","solid","colors","g","role","alignItems","gap","children","undefined","width","sign","height","borderRadius","borderWidth","signRing","borderColor","background","backgroundColor","surface","justifyContent","variant","numberOfLines","color","foreground","text","fontVariant","textTertiary","SpeedLimitPill","displayName"],"sourceRoot":"../../../src","sources":["navigation-banner/SpeedLimitPill.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/navigation-banner/constants.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import { RiErrorWarningLine } from "../icons/remix/RiErrorWarningLine.js";
+import { RiLoopRightLine } from "../icons/remix/RiLoopRightLine.js";
+import { borderRadius } from "../styles/tokens.js";
+/**
+ * 56 for the maneuver glyph is the largest square that leaves the distance
+ * figure room on a 390 phone with the pane's own padding either side, and the
+ * glyph is the one thing on the banner a driver reads without focusing.
+ *
+ * The speed sign is 48 with a 4 ring: below 44 the number stops being legible
+ * at arm's length, and a ring thinner than 4 stops reading as a sign at all.
+ */
+export const NAVIGATION_BANNER_GEOMETRY = {
+  radius: borderRadius.lg,
+  padding: 14,
+  glyph: 56,
+  glyphIcon: 40,
+  smallGlyph: 18,
+  lane: 38,
+  laneWidth: 30,
+  sign: 48,
+  signRing: 4
+};
+
+/** The glyph each exceptional state draws in place of a maneuver. */
+export const NAVIGATION_STATE_ICON = {
+  'off-route': RiErrorWarningLine,
+  rerouting: RiLoopRightLine
+};
+
+/**
+ * The tone each exceptional state paints.
+ *
+ * `rerouting` is `warning` rather than `error`: nothing is wrong yet, the app
+ * is working, and a red banner at that moment tells a driver to act when the
+ * only correct action is to keep driving. `off-route` IS the error — the line
+ * on the map no longer describes where the car is.
+ */
+export const NAVIGATION_STATE_TONE = {
+  'off-route': 'error',
+  rerouting: 'warning'
+};
+
+/** The English default headline for each exceptional state. */
+export const NAVIGATION_STATE_LABELS = {
+  'off-route': 'Off route',
+  rerouting: 'Finding a new route'
+};
+//# sourceMappingURL=constants.js.map

package/lib/module/navigation-banner/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RiErrorWarningLine","RiLoopRightLine","borderRadius","NAVIGATION_BANNER_GEOMETRY","radius","lg","padding","glyph","glyphIcon","smallGlyph","lane","laneWidth","sign","signRing","NAVIGATION_STATE_ICON","rerouting","NAVIGATION_STATE_TONE","NAVIGATION_STATE_LABELS"],"sourceRoot":"../../../src","sources":["navigation-banner/constants.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,sCAAmC;AACtE,SAASC,eAAe,QAAQ,mCAAgC;AAEhE,SAASC,YAAY,QAAQ,qBAAkB;AAyB/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAAoD,GAAG;EAClEC,MAAM,EAAEF,YAAY,CAACG,EAAE;EACvBC,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE,EAAE;EACTC,SAAS,EAAE,EAAE;EACbC,UAAU,EAAE,EAAE;EACdC,IAAI,EAAE,EAAE;EACRC,SAAS,EAAE,EAAE;EACbC,IAAI,EAAE,EAAE;EACRC,QAAQ,EAAE;AACZ,CAAC;;AAED;AACA,OAAO,MAAMC,qBAEZ,GAAG;EACF,WAAW,EAAEd,kBAAkB;EAC/Be,SAAS,EAAEd;AACb,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMe,qBAEZ,GAAG;EACF,WAAW,EAAE,OAAO;EACpBD,SAAS,EAAE;AACb,CAAC;;AAED;AACA,OAAO,MAAME,uBAEZ,GAAG;EACF,WAAW,EAAE,WAAW;EACxBF,SAAS,EAAE;AACb,CAAC","ignoreList":[]}