@oxy.so/bloom 4.0.0 → 4.1.0

package/src/delivery-slot/shared.ts

@@ -0,0 +1,72 @@
+/**
+ * What the picker paints, and the two joins that decide what a screen reader
+ * says about a window.
+ *
+ * The paint is read RELATIVE to the surface the picker was dropped on
+ * (`styles/surface-levels.ts`): a delivery picker is a step of a checkout page,
+ * a sheet over a basket and a panel beside a map, and an option border picked
+ * by eye disappears on one of the three.
+ *
+ * Pure, so `DeliverySlot.test.tsx` can walk presets and modes without
+ * rendering.
+ */
+import { hairlineOn, surfaceFillOn, surfaceTextOn, type SurfaceTextPaint } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import { DELIVERY_DETAIL_SEPARATOR, DELIVERY_SOLD_OUT_LABEL, DELIVERY_TIER_LABELS } from './constants';
+import type { DeliveryTier, DeliveryWindow } from './types';
+
+export interface DeliverySlotPaint extends SurfaceTextPaint {
+  /** An unchosen option's border. */
+  border: string;
+  /** The chosen option's wash. */
+  selected: string;
+}
+
+export function resolveDeliverySlotPaint(theme: Theme, surface: string): DeliverySlotPaint {
+  return {
+    ...surfaceTextOn(theme, surface),
+    border: hairlineOn(theme, surface),
+    selected: surfaceFillOn(theme, surface),
+  };
+}
+
+/** Joins the non-empty parts of a line with the family's separator. */
+export function joinDeliveryParts(
+  parts: ReadonlyArray<string | false | null | undefined>,
+  separator: string = DELIVERY_DETAIL_SEPARATOR,
+): string | undefined {
+  const joined = parts
+    .filter((part): part is string => typeof part === 'string' && part !== '')
+    .join(separator);
+  return joined === '' ? undefined : joined;
+}
+
+/**
+ * The line under a window: what class of service it is, and what is left of it.
+ *
+ * A SOLD-OUT window says only that. The tier and the capacity of a window
+ * nobody can take are facts about a thing that is not on offer, and reading
+ * them out after "Sold out" is how a reader ends up tapping it.
+ */
+export function windowDetail(
+  window: DeliveryWindow,
+  tierLabels: Partial<Record<DeliveryTier, string>> = {},
+  soldOutLabel: string = DELIVERY_SOLD_OUT_LABEL,
+): string | undefined {
+  if (window.soldOut) return soldOutLabel;
+  const words = { ...DELIVERY_TIER_LABELS, ...tierLabels };
+  return joinDeliveryParts([words[window.tier ?? 'standard'], window.capacity, window.note]);
+}
+
+/** The window's announced name: the window, then everything true about it. */
+export function windowName(
+  window: DeliveryWindow,
+  tierLabels?: Partial<Record<DeliveryTier, string>>,
+  soldOutLabel?: string,
+): string {
+  return (
+    window.accessibilityLabel ??
+    joinDeliveryParts([window.label, windowDetail(window, tierLabels, soldOutLabel), window.price]) ??
+    window.label
+  );
+}

package/src/delivery-slot/types.ts

@@ -0,0 +1,191 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/**
+ * How fast, as a PRICED class of service — not as a loudness.
+ *
+ * `standard` is what the day's windows are unless the seller says otherwise;
+ * `express` is the window that costs more to get sooner and says so. The pair
+ * is closed because a third rung ("same day", "priority") is the same two
+ * facts — a name and a surcharge — which a window already carries in `label`
+ * and `price`.
+ */
+export type DeliveryTier = 'standard' | 'express';
+
+/** One day across the top of the picker. */
+export interface DeliveryDay {
+  /** Identifies the day to `onDayChange` and `day`. */
+  id: string;
+  /** The short weekday — "Fri". PRE-FORMATTED; nothing here reads a clock. */
+  weekday: string;
+  /** The date in the month — "24". Drawn in tabular figures. */
+  day: string;
+  /** Nothing left on this day: struck through, dimmed, not pressable. */
+  disabled?: boolean;
+  /**
+   * The spoken form. Default `"<weekday> <day>"` — pass the long one
+   * ("Friday 24 October") where the abbreviation would be read as a word.
+   */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+/** One window of the chosen day. */
+export interface DeliveryWindow {
+  /** Identifies the window to `onValueChange` and `value`. */
+  id: string;
+  /** The window itself — "17:00 – 19:00". PRE-FORMATTED. */
+  label: string;
+  /** Default `standard`. */
+  tier?: DeliveryTier;
+  /**
+   * What it costs ON TOP of the order, PRE-FORMATTED and sign included:
+   * `"Free"`, `"+€2.50"`. Nothing here adds, converts or formats a number.
+   */
+  price?: string;
+  /**
+   * How much of the window is left — `"2 left"`, `"Almost full"`. It is a
+   * string because "2 left" and "last slot" are the same fact said two ways,
+   * and only the app knows which one its couriers mean.
+   */
+  capacity?: string;
+  /** Taken: drawn at the disabled opacity, announced as unavailable, not pressable. */
+  soldOut?: boolean;
+  /** Unavailable for a reason that is not "full" — outside a promo, too late to change. */
+  disabled?: boolean;
+  /** One more quiet line — "Leaves the depot at 16:00". */
+  note?: string;
+  /** Default: the window, its tier, its price and whatever is left, as one utterance. */
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+/**
+ * The option that is not a window: as soon as someone can take it.
+ *
+ * It belongs to no day, so it sits at the HEAD of the options and stays there
+ * while the days change — and it is in the same radio group as the windows,
+ * because it is the same choice. It is not a second control beside them: a
+ * button labelled "ASAP" next to a group of windows is how a reader ends up
+ * with both chosen, or neither.
+ */
+export interface DeliveryAsapOption {
+  /** Identifies it to `onValueChange` and `value`. */
+  id: string;
+  /** Default `"As soon as possible"`. */
+  label?: string;
+  /** The reading that replaces a window — "25 – 35 min". PRE-FORMATTED. */
+  eta?: string;
+  /** Its surcharge, PRE-FORMATTED. */
+  price?: string;
+  /** Default a lightning glyph. */
+  icon?: BloomIconComponent;
+  soldOut?: boolean;
+  disabled?: boolean;
+  /** One more quiet line — "Handed to the next free courier". */
+  note?: string;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+export interface DeliverySlotDaysProps {
+  days: readonly DeliveryDay[];
+  /** The chosen day's `id`. */
+  value?: string;
+  onChange?: (id: string) => void;
+  /** Names the strip. Default `"Day"`. */
+  accessibilityLabel?: string;
+  /** Disables every day. A day may also disable itself. */
+  disabled?: boolean;
+  /**
+   * The colour the strip's scroll fade blends into — the surface behind it.
+   * Defaults to the page background, which is wrong on a card, so say so.
+   */
+  fadeColor?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface DeliverySlotOptionProps {
+  /** The line a reader chooses by — "17:00 – 19:00", "As soon as possible". */
+  label: string;
+  /** Under it — "Standard · 2 left", "Sold out". */
+  detail?: string;
+  /** At the end of the row, PRE-FORMATTED — "Free", "+€2.50". */
+  price?: string;
+  /** A node after the label — a `Badge` ("Express"). */
+  badge?: ReactNode;
+  /**
+   * A glyph BEFORE the label — the lightning the ASAP row carries. It does not
+   * replace the radio dot: the dot is what says "one of these", and a row that
+   * dropped it would look like a different control inside the same group.
+   */
+  icon?: BloomIconComponent;
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  /** Default: the label, the detail and the price, as one utterance. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface DeliverySlotPickerProps {
+  /**
+   * The name of the choice, which is also the radio group's accessible name.
+   *
+   * Deliberately UNDEFAULTED: dropped inside somebody's `Field`, the picker
+   * renders no second field and the enclosing field's label is what names the
+   * group — a default here would outrank the one string the user can read.
+   * Standalone, the picker supplies its own field and labels it
+   * `"Delivery time"`.
+   */
+  label?: string;
+  /** Under the group — "Windows fill up; yours is held for 10 minutes." Ignored inside another `Field`. */
+  description?: string;
+  /** A non-empty string puts the field in its invalid state. Ignored inside another `Field`. */
+  error?: string | null;
+  /** Ignored inside another `Field`. */
+  required?: boolean;
+  /** Disables the strip and every option. An option may also disable itself. */
+  disabled?: boolean;
+
+  days: readonly DeliveryDay[];
+  /** The chosen day's `id`. */
+  day?: string;
+  onDayChange?: (id: string) => void;
+  /** Names the day strip. Default `"Day"`. */
+  dayLabel?: string;
+
+  /** The windows OF THE CHOSEN DAY. The app reloads them when the day changes. */
+  windows: readonly DeliveryWindow[];
+  /** The chosen window's — or the ASAP option's — `id`. */
+  value?: string;
+  onValueChange?: (id: string) => void;
+
+  /** The option that is not a window. */
+  asap?: DeliveryAsapOption;
+
+  /** Draws placeholder rows instead of the windows, announced as busy. */
+  loading?: boolean;
+  /** How many placeholder rows. Default 3. */
+  loadingRows?: number;
+  /** Replaces the whole empty block. */
+  empty?: ReactNode;
+  /** Default `"No windows left"`. */
+  emptyTitle?: string;
+  /** Default `"Pick another day, or take the next courier."` */
+  emptyDescription?: string;
+
+  /** Defaults: `standard` → "Standard", `express` → "Express". */
+  tierLabels?: Partial<Record<DeliveryTier, string>>;
+  /** Default `"Sold out"`. */
+  soldOutLabel?: string;
+
+  /** The colour the day strip's fade blends into. See `DeliverySlotDaysProps`. */
+  fadeColor?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/directions/DirectionsSteps.tsx

@@ -0,0 +1,146 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { AddressRow } from '../address';
+import { ADDRESS_SECTION_GAP, ADDRESS_SECTIONS_GAP } from '../address/constants';
+import { Text } from '../typography';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { DIRECTIONS_LEG_GLYPH, DIRECTIONS_MODE_ICON } from './constants';
+import { DIRECTIONS_MANEUVER_ICON } from './maneuvers';
+import { describeStep, describeTransitLine, resolveDirectionsPaint } from './shared';
+import { TransitLineBadge } from './TransitLineBadge';
+import type { DirectionsStepsProps } from './types';
+
+/**
+ * The turn list: what to do, where, and how far away it is.
+ *
+ *   leg header  a 16 mode glyph, the leg's title at the section rung
+ *               (`caption-1-semibold`, secondary — `address`' own header), the
+ *               line badge, and the leg's reading pushed right. A leg with no
+ *               title draws no header, so a single-leg drive is just steps.
+ *   step        `AddressRow` with the maneuver glyph in its tile: the row, the
+ *               tile, the press target, the density rungs, the trailing
+ *               `meta` and the disabled opacity are all `Item`'s through
+ *               `AddressRow`, and this family adds the glyph table and the
+ *               words.
+ *   current     the accent's own `subtle` wash on the row, AND the word
+ *               "Current step" first in its announced name.
+ *
+ * THE WASH IS PAINTED THROUGH `style`, NOT THROUGH `selected`. `Item` maps
+ * `selected` to `aria-pressed` on a row with no role, and a turn instruction is
+ * not a toggle — a screen reader would announce every step as "not pressed".
+ * The state a step carries is "this is where you are", which ARIA has no
+ * attribute for on a list row, so it travels in the NAME where it is certain to
+ * be heard.
+ *
+ * WHERE THE NAME GOES depends on whether the row is a control, exactly as in
+ * `RouteStops`: a pressable step is a button and carries its own name; a
+ * read-only one renders `role="none"`, which assistive technology is told to
+ * ignore, so the name goes on the `listitem` around it. Naming both would read
+ * every step twice.
+ */
+function DirectionsStepsComponent({
+  legs,
+  currentStepId,
+  onPressStep,
+  density = 'comfortable',
+  currentLabel = 'Current step',
+  accessibilityLabel = 'Directions',
+  style,
+  testID,
+}: DirectionsStepsProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveDirectionsPaint(theme, surface), [theme, surface]);
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      style={[{ width: '100%', gap: ADDRESS_SECTIONS_GAP }, style]}
+      testID={testID}
+    >
+      {legs.map((leg, legIndex) => {
+        const legId = testID ? `${testID}-leg-${legIndex}` : undefined;
+        const LegIcon = DIRECTIONS_MODE_ICON[leg.mode ?? 'drive'];
+        const legName = [leg.title, leg.line ? describeTransitLine(leg.line) : undefined, leg.meta]
+          .filter((part): part is string => typeof part === 'string' && part !== '')
+          .join(', ');
+
+        return (
+          <View key={leg.id ?? legIndex} style={{ gap: ADDRESS_SECTION_GAP }} testID={legId}>
+            {leg.title ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 8,
+                  paddingHorizontal: 16,
+                  minWidth: 0,
+                }}
+                testID={legId ? `${legId}-header` : undefined}
+              >
+                <LegIcon
+                  width={DIRECTIONS_LEG_GLYPH}
+                  height={DIRECTIONS_LEG_GLYPH}
+                  fill={paint.textSecondary}
+                />
+                <Text
+                  variant="caption-1-semibold"
+                  numberOfLines={1}
+                  style={{ flexShrink: 1, minWidth: 0, color: paint.textSecondary }}
+                >
+                  {leg.title}
+                </Text>
+                {leg.line ? <TransitLineBadge line={leg.line} /> : null}
+                {leg.meta ? (
+                  <Text
+                    variant="body-2-regular"
+                    numberOfLines={1}
+                    // The reading never yields: it is four characters and the
+                    // leg TITLE is the line that can afford to truncate.
+                    style={{ marginLeft: 'auto', flexShrink: 0, color: paint.textTertiary }}
+                  >
+                    {leg.meta}
+                  </Text>
+                ) : null}
+              </View>
+            ) : null}
+
+            <View role="list" accessibilityLabel={legName || accessibilityLabel}>
+              {leg.steps.map((step, stepIndex) => {
+                const current = currentStepId !== undefined && step.id === currentStepId;
+                const name = describeStep(step, { current, currentWord: currentLabel });
+                const stepId = legId ? `${legId}-step-${stepIndex}` : undefined;
+                return (
+                  <View
+                    key={step.id}
+                    role="listitem"
+                    accessibilityLabel={onPressStep ? undefined : name}
+                    testID={stepId ? `${stepId}-item` : undefined}
+                  >
+                    <AddressRow
+                      title={step.instruction}
+                      subtitle={step.detail}
+                      meta={step.distance}
+                      icon={DIRECTIONS_MANEUVER_ICON[step.maneuver ?? 'straight']}
+                      badge={step.line ? <TransitLineBadge line={step.line} /> : undefined}
+                      density={density}
+                      onPress={onPressStep ? () => onPressStep(step.id) : undefined}
+                      accessibilityLabel={onPressStep ? name : undefined}
+                      style={current ? { backgroundColor: paint.currentFill } : undefined}
+                      testID={stepId}
+                    />
+                  </View>
+                );
+              })}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+export const DirectionsSteps = memo(DirectionsStepsComponent);
+DirectionsSteps.displayName = 'DirectionsSteps';

package/src/directions/DirectionsSummary.tsx

@@ -0,0 +1,271 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { Chip } from '../chip';
+import { TABULAR } from '../chart-cards/primitives/ChartHeader';
+import { AddressRow } from '../address';
+import { RiRouteLine } from '../icons/remix/RiRouteLine';
+import { RiTimeLine } from '../icons/remix/RiTimeLine';
+import { RouteStops } from '../route-stops';
+import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import type { BloomIconComponent } from '../icons/icon-component';
+import {
+  DIRECTIONS_MODE_ICON,
+  DIRECTIONS_TRAFFIC_TONE,
+} from './constants';
+import { describeRoute, modeLabelFor, resolveDirectionsPaint, trafficLabelFor, type DirectionsPaint } from './shared';
+import { TransitLineBadge } from './TransitLineBadge';
+import type { DirectionsRoute, DirectionsSummaryProps } from './types';
+
+/**
+ * The route you have chosen, and the ones you have not.
+ *
+ *   stops        `RouteStops` — the origin and the destination, drawn by the
+ *                family that already owns them. This component draws no second
+ *                one, and renders nothing at all without `stops`.
+ *   modes        `SegmentedControl` — drive / transit / walk / cycle. Not a new
+ *                control: a switcher of views is the segmented control, and the
+ *                mode words are data.
+ *   figure       a quiet label over the DURATION at title-1, tabular, with the
+ *                distance as a `Chip` and the traffic as a `Badge` on its tone
+ *                — `ai-profile-card`'s figure block, with a duration in it.
+ *   readings     the arrival time and the via line, each a 16 glyph and a line
+ *                of secondary text.
+ *   alternates   the other routes as pressable `AddressRow`s in a `list`. A
+ *                press CHOOSES one, which swaps it into the figure above.
+ *
+ * WHY THE DURATION AND NOT THE DISTANCE IS THE FIGURE: nobody leaves a house
+ * because a place is 8.2 km away. The distance is the qualifier, which is what
+ * the chip rung is for.
+ *
+ * THE CHOSEN ROUTE IS NOT IN THE LIST. It is drawn in full above it, and a
+ * route shown twice is a reader wondering whether they are two. That is also
+ * why the rows are a `list` of pressable rows rather than a `radiogroup` —
+ * a radio group whose checked member is missing announces a choice with nothing
+ * chosen.
+ */
+
+const GLYPH = 16;
+
+function ReadingLine({
+  icon: Icon,
+  text,
+  paint,
+  testID,
+}: {
+  icon: BloomIconComponent;
+  text: string;
+  paint: DirectionsPaint;
+  testID?: string;
+}) {
+  return (
+    <View
+      accessible
+      accessibilityLabel={text}
+      style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}
+      testID={testID}
+    >
+      <Icon width={GLYPH} height={GLYPH} fill={paint.textSecondary} />
+      <Text
+        variant="body-regular"
+        numberOfLines={1}
+        style={{ flexShrink: 1, minWidth: 0, color: paint.textSecondary }}
+      >
+        {text}
+      </Text>
+    </View>
+  );
+}
+
+function DirectionsSummaryComponent({
+  routes,
+  selectedRouteId,
+  onSelectRoute,
+  stops,
+  onPressStop,
+  onSwapStops,
+  modes,
+  mode = 'drive',
+  onModeChange,
+  onStart,
+  labels,
+  accessibilityLabel = 'Directions',
+  style,
+  testID,
+}: DirectionsSummaryProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveDirectionsPaint(theme, surface), [theme, surface]);
+
+  const chosen: DirectionsRoute | undefined =
+    routes.find((route) => route.id === selectedRouteId) ?? routes[0];
+  const alternates = routes.filter((route) => route.id !== chosen?.id);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const figureLabel = labels?.figure ?? modeLabelFor(mode, labels);
+  const alternatesLabel = labels?.alternates ?? 'Other routes';
+  const ModeIcon = DIRECTIONS_MODE_ICON[mode];
+
+  const traffic = chosen ? trafficLabelFor(chosen.traffic, chosen.trafficLabel, labels) : null;
+
+  return (
+    <View
+      accessibilityLabel={accessibilityLabel}
+      style={[{ width: '100%', gap: 16 }, style]}
+      testID={testID}
+    >
+      {stops && stops.length > 0 ? (
+        <RouteStops
+          stops={stops}
+          onPressStop={onPressStop}
+          onSwap={onSwapStops}
+          testID={id('stops')}
+        />
+      ) : null}
+
+      {modes && modes.length > 0 && onModeChange ? (
+        <SegmentedControl
+          label={labels?.modes ?? 'Travel mode'}
+          type="radio"
+          value={mode}
+          onChange={onModeChange}
+          testID={id('modes')}
+        >
+          {modes.map((item) => (
+            <SegmentedControlItem key={item} value={item} testID={id(`mode-${item}`)}>
+              <SegmentedControlItemText>{modeLabelFor(item, labels)}</SegmentedControlItemText>
+            </SegmentedControlItem>
+          ))}
+        </SegmentedControl>
+      ) : null}
+
+      {chosen ? (
+        <View style={{ gap: 8 }} testID={id('figure')}>
+          <Text variant="body-medium" numberOfLines={1} style={{ color: paint.textSecondary }}>
+            {figureLabel}
+          </Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
+            <Text
+              variant="title-1-medium"
+              numberOfLines={1}
+              style={[{ color: paint.text }, TABULAR]}
+              testID={id('duration')}
+            >
+              {chosen.duration}
+            </Text>
+            {chosen.distance ? (
+              <Chip size="medium" testID={id('distance')}>
+                {chosen.distance}
+              </Chip>
+            ) : null}
+            {traffic && chosen.traffic ? (
+              <Badge
+                content={traffic}
+                variant="subtle"
+                color={DIRECTIONS_TRAFFIC_TONE[chosen.traffic]}
+                size="label-medium"
+                testID={id('traffic')}
+              />
+            ) : null}
+            {chosen.note ? (
+              <Badge
+                content={chosen.note}
+                variant="subtle"
+                color="primary"
+                size="label-medium"
+                testID={id('note')}
+              />
+            ) : null}
+          </View>
+
+          {chosen.lines && chosen.lines.length > 0 ? (
+            <View
+              style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}
+              testID={id('lines')}
+            >
+              {chosen.lines.map((line, index) => (
+                <TransitLineBadge
+                  key={`${line.name}-${index}`}
+                  line={line}
+                  size="label-medium"
+                  testID={id(`line-${index}`)}
+                />
+              ))}
+            </View>
+          ) : null}
+
+          {chosen.arrival ? (
+            <ReadingLine icon={RiTimeLine} text={chosen.arrival} paint={paint} testID={id('arrival')} />
+          ) : null}
+          {chosen.via ? (
+            <ReadingLine icon={RiRouteLine} text={chosen.via} paint={paint} testID={id('via')} />
+          ) : null}
+        </View>
+      ) : null}
+
+      {onStart && chosen ? (
+        <Button
+          variant="primary"
+          size="medium"
+          leadingIcon={ModeIcon}
+          onPress={onStart}
+          testID={id('start')}
+        >
+          {labels?.start ?? 'Start'}
+        </Button>
+      ) : null}
+
+      {alternates.length > 0 ? (
+        <View style={{ gap: 8 }} testID={id('alternates')}>
+          <Text variant="caption-1-semibold" style={{ color: paint.textSecondary }}>
+            {alternatesLabel}
+          </Text>
+          <View role="list" accessibilityLabel={alternatesLabel}>
+            {alternates.map((route, index) => {
+              const routeTraffic = trafficLabelFor(route.traffic, route.trafficLabel, labels);
+              return (
+                <View key={route.id} role="listitem">
+                  <AddressRow
+                    title={route.duration}
+                    // The via line, the distance and the arrival are ONE
+                    // subtitle rather than a subtitle and a trailing `meta`:
+                    // the row's title is a figure four characters wide, and a
+                    // trailing reading squeezed it until "31 min" truncated to
+                    // "31 …" at 390. The badge is what earns the trailing room.
+                    subtitle={
+                      [route.via, route.distance, route.arrival].filter(Boolean).join(' · ') || undefined
+                    }
+                    icon={DIRECTIONS_MODE_ICON[mode]}
+                    badge={
+                      routeTraffic && route.traffic ? (
+                        <Badge
+                          content={routeTraffic}
+                          variant="subtle"
+                          color={DIRECTIONS_TRAFFIC_TONE[route.traffic]}
+                          size="label-small"
+                        />
+                      ) : route.lines && route.lines.length > 0 ? (
+                        <TransitLineBadge line={route.lines[0]!} />
+                      ) : undefined
+                    }
+                    onPress={onSelectRoute ? () => onSelectRoute(route.id) : undefined}
+                    accessibilityLabel={describeRoute(route, labels)}
+                    testID={id(`route-${index}`)}
+                  />
+                </View>
+              );
+            })}
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export const DirectionsSummary = memo(DirectionsSummaryComponent);
+DirectionsSummary.displayName = 'DirectionsSummary';