@oxy.so/bloom 3.6.0 → 4.0.0

package/src/activity-feed/ActivityFeedFilters.tsx

@@ -0,0 +1,62 @@
+import React, { memo } from 'react';
+
+import { Chip, ChipRow } from '../chip';
+import { ACTIVITY_FEED_KIND } from './constants';
+import type { ActivityFeedFiltersProps } from './types';
+
+/**
+ * The kind filter, as a row of toggle pills.
+ *
+ * A `group` of toggles rather than a `tablist` or a `radiogroup`, because the
+ * kinds combine: turning "Call" on does not turn "Email" off, and a `tab` or a
+ * `radio` announcing a multi-select would say the opposite of what the control
+ * does. `Chip` spells the state for the role it is given — here `aria-pressed`
+ * plus the native `accessibilityState` — so the pill is a real toggle to a
+ * screen reader and not a pill that looks selected.
+ *
+ * It is CONTROLLED and filters nothing itself: which entries reach
+ * `ActivityFeed` is the app's decision, and a filter row that also held the
+ * answer would be a second source of truth for the same list.
+ */
+function ActivityFeedFiltersComponent({
+  kinds,
+  selected,
+  onToggle,
+  counts,
+  labels,
+  accessibilityLabel = 'Filter activity',
+  style,
+  testID,
+}: ActivityFeedFiltersProps) {
+  return (
+    <ChipRow
+      role="group"
+      accessibilityLabel={accessibilityLabel}
+      gap={6}
+      // A flex item's automatic minimum is its content width, so a scrolling
+      // row of pills widens its parent unless this says otherwise.
+      style={[{ minWidth: 0 }, style]}
+      testID={testID}
+    >
+      {kinds.map((kind) => {
+        const label = labels?.[kind] ?? ACTIVITY_FEED_KIND[kind].label;
+        const count = counts?.[kind];
+        return (
+          <Chip
+            key={kind}
+            size="xl"
+            selected={selected.includes(kind)}
+            onPress={() => onToggle(kind)}
+            accessibilityLabel={count === undefined ? label : `${label}, ${count}`}
+            testID={testID ? `${testID}-${kind}` : undefined}
+          >
+            {count === undefined ? label : `${label} ${count}`}
+          </Chip>
+        );
+      })}
+    </ChipRow>
+  );
+}
+
+export const ActivityFeedFilters = memo(ActivityFeedFiltersComponent);
+ActivityFeedFilters.displayName = 'ActivityFeedFilters';

package/src/activity-feed/constants.ts

@@ -0,0 +1,62 @@
+import { RiCalendarEventLine } from '../icons/remix/RiCalendarEventLine';
+import { RiCheckboxCircleLine } from '../icons/remix/RiCheckboxCircleLine';
+import { RiDraftLine } from '../icons/remix/RiDraftLine';
+import { RiExchangeLine } from '../icons/remix/RiExchangeLine';
+import { RiMailLine } from '../icons/remix/RiMailLine';
+import { RiPhoneLine } from '../icons/remix/RiPhoneLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { AccentTone } from '../theme/accent-colors';
+import type { ActivityFeedKind } from './types';
+
+/**
+ * The glyph, the word and the tone of each kind.
+ *
+ * The WORD is here rather than on the entry because it is also the filter
+ * chip's label and the kind mark's accessible name, and three spellings of
+ * "Stage change" is how a feed and its filter row stop agreeing.
+ */
+export const ACTIVITY_FEED_KIND: Record<
+  ActivityFeedKind,
+  { icon: BloomIconComponent; label: string; tone: AccentTone }
+> = {
+  call: { icon: RiPhoneLine, label: 'Call', tone: 'info' },
+  email: { icon: RiMailLine, label: 'Email', tone: 'primary' },
+  meeting: { icon: RiCalendarEventLine, label: 'Meeting', tone: 'primary' },
+  note: { icon: RiDraftLine, label: 'Note', tone: 'default' },
+  'stage-change': { icon: RiExchangeLine, label: 'Stage change', tone: 'warning' },
+  task: { icon: RiCheckboxCircleLine, label: 'Task completed', tone: 'success' },
+};
+
+/** Every kind, in the order a filter row offers them. */
+export const ACTIVITY_FEED_KINDS: readonly ActivityFeedKind[] = [
+  'call',
+  'email',
+  'meeting',
+  'note',
+  'stage-change',
+  'task',
+];
+
+/** The actor's avatar, and the kind mark that sits on its corner. */
+export const ACTIVITY_AVATAR_SIZE = 32;
+export const ACTIVITY_KIND_MARK_SIZE = 18;
+
+/** Between two entries, and between a day's heading and its first entry. */
+export const ACTIVITY_ENTRY_GAP = 16;
+
+/**
+ * Roughly how many characters fit one clamped line at `body-2-regular` in a
+ * feed column. It decides whether a body is offered a REVEAL.
+ *
+ * 48 is the count at ~310px of text, which is what a 390 phone leaves after the
+ * page gutters and the 32-wide actor mark. A wider feed then offers the reveal
+ * on a body that did fit — the cheap mistake, on purpose (below).
+ *
+ * It is a heuristic and says so: React Native gives no reliable "did this
+ * overflow" signal on both platforms (`onTextLayout` is native-only, and a
+ * measurement pass on web would land a frame after paint), so the alternatives
+ * were a toggle that appears after the text settles — which moves the content
+ * under the reader's eyes — or one that is occasionally offered on a body that
+ * did fit and collapses to the same text. The second is the cheaper mistake.
+ */
+export const ACTIVITY_BODY_CHARS_PER_LINE = 48;

package/src/activity-feed/index.ts

@@ -0,0 +1,20 @@
+export { ActivityFeed } from './ActivityFeed';
+export { ActivityFeedFilters } from './ActivityFeedFilters';
+export {
+  ACTIVITY_AVATAR_SIZE,
+  ACTIVITY_BODY_CHARS_PER_LINE,
+  ACTIVITY_ENTRY_GAP,
+  ACTIVITY_FEED_KIND,
+  ACTIVITY_FEED_KINDS,
+  ACTIVITY_KIND_MARK_SIZE,
+} from './constants';
+export { activityBodyIsLong, groupActivityByDay, resolveActivityFeedPaint } from './shared';
+export type { ActivityFeedPaint } from './shared';
+export type {
+  ActivityFeedActor,
+  ActivityFeedEntry,
+  ActivityFeedFiltersProps,
+  ActivityFeedGroup,
+  ActivityFeedKind,
+  ActivityFeedProps,
+} from './types';

package/src/activity-feed/shared.ts

@@ -0,0 +1,73 @@
+/**
+ * What `ActivityFeed` paints, and the pure helpers it and its tests both read.
+ *
+ * Everything is read off the fill the feed actually lands on — a feed is as
+ * likely to sit in a detail panel as on a page — through
+ * `styles/surface-levels.ts`.
+ */
+import { hairlineOn, surfaceFillOn, surfaceTextOn } from '../styles/surface-levels';
+import type { Theme } from '../theme/types';
+import { ACTIVITY_BODY_CHARS_PER_LINE } from './constants';
+import type { ActivityFeedEntry, ActivityFeedGroup } from './types';
+
+export interface ActivityFeedPaint {
+  surface: string;
+  hairline: string;
+  /** The ring punched around the kind mark so it reads as sitting on the avatar. */
+  markRing: string;
+  /** A day heading's own rule, and the tile behind an outcome. */
+  raised: string;
+  text: string;
+  textSecondary: string;
+  textTertiary: string;
+}
+
+export function resolveActivityFeedPaint(theme: Theme, surface: string): ActivityFeedPaint {
+  const text = surfaceTextOn(theme, surface);
+  return {
+    surface,
+    hairline: hairlineOn(theme, surface),
+    markRing: surface,
+    raised: surfaceFillOn(theme, surface),
+    text: text.text,
+    textSecondary: text.textSecondary,
+    textTertiary: text.textTertiary,
+  };
+}
+
+/**
+ * Entries bucketed by their own `day` STRING, in first-seen order, with each
+ * bucket keeping the order it arrived in.
+ *
+ * By the string and never by a parsed date: the app formats the day, so it
+ * already decided the timezone, the locale and whether today is called "Today".
+ * Grouping by the formatted value means the feed cannot disagree with the
+ * heading it draws.
+ */
+export function groupActivityByDay(
+  entries: readonly ActivityFeedEntry[],
+): readonly ActivityFeedGroup[] {
+  const order: string[] = [];
+  const buckets = new Map<string, ActivityFeedEntry[]>();
+  for (const entry of entries) {
+    const bucket = buckets.get(entry.day);
+    if (bucket === undefined) {
+      order.push(entry.day);
+      buckets.set(entry.day, [entry]);
+    } else {
+      bucket.push(entry);
+    }
+  }
+  return order.map((day) => ({ day, entries: buckets.get(day) ?? [] }));
+}
+
+/**
+ * Whether a body is long enough to be worth a reveal. See
+ * {@link ACTIVITY_BODY_CHARS_PER_LINE} for why this is a character count rather
+ * than a measurement.
+ */
+export function activityBodyIsLong(body: string | undefined, lines: number): boolean {
+  if (body === undefined || lines <= 0) return false;
+  if (body.includes('\n')) return body.split('\n').length > lines;
+  return body.length > lines * ACTIVITY_BODY_CHARS_PER_LINE;
+}

package/src/activity-feed/types.ts

@@ -0,0 +1,82 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { AccentTone } from '../theme/accent-colors';
+
+/** What was done. Each kind carries its own glyph, word and tone (`constants.ts`). */
+export type ActivityFeedKind = 'call' | 'email' | 'meeting' | 'note' | 'stage-change' | 'task';
+
+/** Who did it. The feed is actor-led: the avatar is the entry's leading mark. */
+export interface ActivityFeedActor {
+  name: string;
+  /** A URL or an `ImageResolver` id. Without it the avatar draws initials. */
+  avatar?: string;
+}
+
+export interface ActivityFeedEntry {
+  /** Stable identity. Also the key the reveal state is held under. */
+  id: string;
+  kind: ActivityFeedKind;
+  /** What happened, in one line — "Called about the renewal". */
+  title: string;
+  actor: ActivityFeedActor;
+  /**
+   * The day this entry belongs to, PRE-FORMATTED ("Today", "12 March").
+   * Grouping is by this exact string: Bloom does no date maths, owns no
+   * timezone and knows no locale, and a component that parsed a date here would
+   * be guessing at all three.
+   */
+  day: string;
+  /** Time of day, pre-formatted ("14:10"). */
+  timestamp?: string;
+  /** The note itself. Clamped, with a reveal — see {@link ActivityFeedProps.bodyLines}. */
+  body?: string;
+  /** What came of it — "Renewed for 12 months", "No answer". */
+  outcome?: string;
+  /** The outcome pill's tone. Default `default`. */
+  outcomeTone?: AccentTone;
+  /** Who RECORDED it, when that is not who did it. */
+  loggedBy?: string;
+}
+
+/** Entries that share a `day`, in the order they arrived. */
+export interface ActivityFeedGroup {
+  day: string;
+  entries: readonly ActivityFeedEntry[];
+}
+
+export interface ActivityFeedProps {
+  entries: readonly ActivityFeedEntry[];
+  /**
+   * Lines a `body` clamps to before the reveal is offered. Default 3. `0` never
+   * clamps, and never draws a reveal.
+   */
+  bodyLines?: number;
+  /** Default `"Show more"`. */
+  moreLabel?: string;
+  /** Default `"Show less"`. */
+  lessLabel?: string;
+  /** The trail under an entry. Default `` (name) => `Logged by ${name}` ``. */
+  formatLoggedBy?: (name: string) => string;
+  /** What an empty feed says. Default `"Nothing logged yet"`. */
+  emptyLabel?: string;
+  /** Names the list. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface ActivityFeedFiltersProps {
+  /** The kinds offered, in the order given. */
+  kinds: readonly ActivityFeedKind[];
+  /** The kinds currently ON. Controlled — the feed does not filter itself. */
+  selected: readonly ActivityFeedKind[];
+  onToggle: (kind: ActivityFeedKind) => void;
+  /** A count drawn after a kind's word. */
+  counts?: Partial<Record<ActivityFeedKind, number>>;
+  /** Overrides a kind's word, for a localised feed. */
+  labels?: Partial<Record<ActivityFeedKind, string>>;
+  /** Names the row. Default `"Filter activity"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/address/AddressList.tsx

@@ -0,0 +1,186 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { RiMapPin2Line } from '../icons/remix/RiMapPin2Line';
+import * as Skeleton from '../skeleton';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { AddressRow } from './AddressRow';
+import { ADDRESS_GEOMETRY, ADDRESS_SECTION_GAP, ADDRESS_SECTIONS_GAP } from './constants';
+import { resolveAddressPaint } from './shared';
+import type { AddressListEntry, AddressListProps } from './types';
+
+/**
+ * The sectioned list an `AddressRow` lives in — "Saved", "Recent", "Results" —
+ * with its loading and empty states.
+ *
+ * THE VARIANT IS THE ANNOUNCED TREE, not a style. `list` is a list of places a
+ * reader is reading: each section is its own `list` named by its header, and
+ * each row is a `listitem` wrapping a button. `picker` is a list they are
+ * choosing ONE of: the whole thing is a `radiogroup`, each section a `group`,
+ * and each row a `radio` carrying `aria-checked`. Both roles exist on both
+ * platforms, which is why the picker is a radio group rather than the listbox
+ * ARIA would suggest — React Native has no `listbox`, and a role that reaches
+ * only one platform is the silent half of an accessibility bug.
+ *
+ *   header   caption-1-semibold, secondary rung, 8 above its rows
+ *   sections 16 apart
+ *   loading  three placeholder rows at the row's own geometry, announced as
+ *            busy so a reader is told to wait rather than told nothing
+ *   empty    a 32 glyph, a title and a line, centred with 32 of air
+ */
+function AddressListComponent({
+  sections,
+  selectedId,
+  onSelect,
+  variant = 'list',
+  density = 'comfortable',
+  loading = false,
+  loadingRows = 3,
+  empty,
+  emptyTitle = 'Nothing here yet',
+  emptyDescription,
+  emptyIcon: EmptyIcon = RiMapPin2Line,
+  accessibilityLabel = 'Addresses',
+  style,
+  testID,
+}: AddressListProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveAddressPaint(theme, surface), [theme, surface]);
+  const g = ADDRESS_GEOMETRY[density];
+  const picker = variant === 'picker';
+
+  const press = useCallback(
+    (entry: AddressListEntry) => (onSelect ? () => onSelect(entry.id) : undefined),
+    [onSelect],
+  );
+
+  if (loading) {
+    return (
+      <View
+        aria-busy
+        accessibilityLabel={accessibilityLabel}
+        testID={testID}
+        style={[{ gap: ADDRESS_SECTION_GAP }, style]}
+      >
+        {Array.from({ length: loadingRows }, (_unused, index) => (
+          <View
+            key={index}
+            testID={testID ? `${testID}-placeholder-${index}` : undefined}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 10 }}
+          >
+            <Skeleton.Circle size={g.tile} />
+            <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+              <Skeleton.Text style={{ width: '45%', lineHeight: 16 }} />
+              <Skeleton.Text style={{ width: '70%', lineHeight: 14 }} />
+            </View>
+          </View>
+        ))}
+      </View>
+    );
+  }
+
+  const total = sections.reduce((count, section) => count + section.entries.length, 0);
+  if (total === 0) {
+    return (
+      <View testID={testID} style={style}>
+        {empty ?? (
+          <View
+            testID={testID ? `${testID}-empty` : undefined}
+            style={{ alignItems: 'center', gap: 8, paddingVertical: 32, paddingHorizontal: 16 }}
+          >
+            <EmptyIcon width={32} height={32} fill={paint.textTertiary} />
+            <Text variant="body-medium" style={{ color: paint.text, textAlign: 'center' }}>
+              {emptyTitle}
+            </Text>
+            {emptyDescription ? (
+              <Text variant="body-2-regular" style={{ color: paint.textSecondary, textAlign: 'center' }}>
+                {emptyDescription}
+              </Text>
+            ) : null}
+          </View>
+        )}
+      </View>
+    );
+  }
+
+  const groups = sections.map((section, sectionIndex) => {
+    const key = section.id ?? sectionIndex;
+    const sectionId = testID ? `${testID}-section-${sectionIndex}` : undefined;
+    const rows = section.entries.map((entry, entryIndex) => {
+      const row = (
+        <AddressRow
+          key={entry.id}
+          title={entry.title}
+          subtitle={entry.subtitle}
+          kind={entry.kind}
+          icon={entry.icon}
+          leading={entry.leading}
+          meta={entry.meta}
+          badge={entry.badge}
+          action={entry.action}
+          disabled={entry.disabled}
+          density={density}
+          accessibilityLabel={entry.accessibilityLabel}
+          style={entry.style}
+          onPress={press(entry)}
+          {...(picker
+            ? { role: 'radio' as const, selected: selectedId === entry.id }
+            : { role: undefined })}
+          testID={entry.testID ?? (sectionId ? `${sectionId}-row-${entryIndex}` : undefined)}
+        />
+      );
+      if (picker) return row;
+      return (
+        <View key={entry.id} role="listitem">
+          {row}
+        </View>
+      );
+    });
+
+    return (
+      <View key={key} style={{ gap: ADDRESS_SECTION_GAP }}>
+        {section.title ? (
+          <Text
+            variant="caption-1-semibold"
+            testID={sectionId ? `${sectionId}-title` : undefined}
+            style={{ color: paint.textSecondary, paddingHorizontal: 16 }}
+          >
+            {section.title}
+          </Text>
+        ) : null}
+        <View
+          role={picker ? 'group' : 'list'}
+          accessibilityLabel={section.title ?? accessibilityLabel}
+          testID={sectionId}
+        >
+          {rows}
+        </View>
+      </View>
+    );
+  });
+
+  if (!picker) {
+    return (
+      <View testID={testID} style={[{ gap: ADDRESS_SECTIONS_GAP }, style]}>
+        {groups}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      role="radiogroup"
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+      style={[{ gap: ADDRESS_SECTIONS_GAP }, style]}
+    >
+      {groups}
+    </View>
+  );
+}
+
+export const AddressList = memo(AddressListComponent);
+AddressList.displayName = 'AddressList';

package/src/address/AddressRow.tsx

@@ -0,0 +1,170 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Item } from '../item';
+import { useSurfaceFill } from '../styles/surface-levels';
+import { space } from '../styles/tokens';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import { ADDRESS_GEOMETRY, ADDRESS_KIND_ICON } from './constants';
+import { joinAddressName, resolveAddressPaint } from './shared';
+import type { AddressRowProps } from './types';
+
+/**
+ * An address as a row: a glyph or an avatar, the line you recognise it by, the
+ * rest of it, and what you can do with it.
+ *
+ * It is `Item` with an address's slots filled in, deliberately — a row, a
+ * selected wash, the press target, the density rungs and the a11y role
+ * translation are `Item`'s job and this family does not own a second copy of
+ * any of them. What it adds is the leading tile, the badge beside the title,
+ * the `meta`/`action` pairing in the trailing slot, and an accessible name
+ * assembled from the row's own text.
+ *
+ *   tile     40 round (compact 32), one surface step off whatever is behind
+ *            the row, with a 20 glyph in the secondary rung
+ *   title    `Item`'s own title rung, with `badge` beside it
+ *   trailing `meta` in body-2 tabular figures, then `action`
+ *
+ * The text INPUT is not here. An app searches with `search`/`text-field` and
+ * renders what comes back as these rows.
+ */
+function AddressRowComponent({
+  title,
+  subtitle,
+  kind = 'place',
+  icon,
+  leading,
+  meta,
+  badge,
+  action,
+  selected,
+  disabled = false,
+  onPress,
+  density = 'comfortable',
+  role,
+  accessibilityLabel,
+  style,
+  testID,
+}: AddressRowProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => resolveAddressPaint(theme, surface), [theme, surface]);
+  const g = ADDRESS_GEOMETRY[density];
+  const Glyph = icon ?? ADDRESS_KIND_ICON[kind];
+
+  // `leading` is read for PRESENCE, not truthiness: `leading={null}` is a row
+  // that draws no media at all — the shape `RouteStops` needs, where the marker
+  // column outside the row is already the gutter — and `??` would have quietly
+  // given it the tile instead.
+  const media =
+    leading !== undefined ? (
+      leading
+    ) : (
+      <View
+        testID={testID ? `${testID}-tile` : undefined}
+        style={{
+          width: g.tile,
+          height: g.tile,
+          borderRadius: g.tile / 2,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: paint.tile,
+        }}
+      >
+        <Glyph width={g.glyph} height={g.glyph} fill={paint.textSecondary} />
+      </View>
+    );
+
+  const titleNode = badge ? (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
+      <Text
+        variant="headline-medium"
+        numberOfLines={1}
+        testID={testID ? `${testID}-title` : undefined}
+        style={{ flexShrink: 1, minWidth: 0, color: paint.text }}
+      >
+        {title}
+      </Text>
+      {badge}
+    </View>
+  ) : (
+    title
+  );
+
+  const metaNode = meta ? (
+    <Text
+      variant="body-2-regular"
+      numberOfLines={1}
+      testID={testID ? `${testID}-meta` : undefined}
+      style={{ flexShrink: 1, color: paint.textSecondary, fontVariant: ['tabular-nums'] }}
+    >
+      {meta}
+    </Text>
+  ) : null;
+
+  // A PRESSABLE row is a real `<button>` on web (react-native-web's `Pressable`
+  // is one), so an `action` that is itself a control cannot live inside it: a
+  // button inside a button is invalid HTML, React warns about it, and on web —
+  // unlike native, which does not bubble a press — a click on the inner control
+  // ALSO opens the row. So a pressable row with an action splits into the row
+  // and the action SIDE BY SIDE, which is where they already looked like they
+  // were. A row with no press target keeps the action in its trailing slot,
+  // where there is nothing to nest inside.
+  const splitAction = action != null && onPress != null;
+
+  const trailingInside =
+    metaNode || (action && !splitAction) ? (
+      // `minWidth: 0` for the reason `order-status/OrderStatusBar.tsx` records:
+      // a one-line Text is `nowrap` on web and its min-content width becomes
+      // the row's floor.
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, minWidth: 0 }}>
+        {metaNode}
+        {splitAction ? null : action}
+      </View>
+    ) : null;
+
+  const row = (
+    <Item
+      title={titleNode}
+      subtitle={subtitle}
+      leading={media}
+      trailing={trailingInside}
+      onPress={onPress}
+      disabled={disabled}
+      selected={selected}
+      density={density}
+      role={role}
+      accessibilityLabel={accessibilityLabel ?? joinAddressName([title, subtitle, meta])}
+      // `paddingRight`, never `paddingHorizontal`: `Item` writes the longhand
+      // for the reason its own file records, and a shorthand here would outrank
+      // it on web and not on native.
+      style={splitAction ? { paddingRight: space.sm } : style}
+      testID={testID}
+    />
+  );
+
+  if (!splitAction) return row;
+
+  return (
+    <View
+      style={[
+        { flexDirection: 'row', alignItems: 'center', paddingRight: space.lg },
+        style,
+      ]}
+    >
+      {/*
+        `Item`'s `style` lands on its CONTENT view, inside the `Pressable` (or
+        the plain `View`) that is actually this row's flex child — so `flex: 1`
+        written there would sit one node below where the layout happens, and the
+        row would take the full min-content width of a `numberOfLines={1}` title
+        instead of shrinking. The flex goes on a wrapper the parent CAN see.
+      */}
+      <View style={{ flex: 1, minWidth: 0 }}>{row}</View>
+      {action}
+    </View>
+  );
+}
+
+export const AddressRow = memo(AddressRowComponent);
+AddressRow.displayName = 'AddressRow';

package/src/address/constants.ts

@@ -0,0 +1,34 @@
+import { RiBookmarkLine } from '../icons/remix/RiBookmarkLine';
+import { RiHistoryLine } from '../icons/remix/RiHistoryLine';
+import { RiMapPin2Line } from '../icons/remix/RiMapPin2Line';
+import { RiSearchLine } from '../icons/remix/RiSearchLine';
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { AddressDensity, AddressKind } from './types';
+
+/** The glyph each provenance draws when the caller names none. */
+export const ADDRESS_KIND_ICON: Record<AddressKind, BloomIconComponent> = {
+  place: RiMapPin2Line,
+  saved: RiBookmarkLine,
+  recent: RiHistoryLine,
+  suggestion: RiSearchLine,
+};
+
+export interface AddressGeometry {
+  /** The round tile the glyph sits in. */
+  tile: number;
+  /** The glyph inside it. */
+  glyph: number;
+}
+
+/**
+ * 40 is the tile that lines a row up with an `Avatar` at the `lg` rung, so a
+ * list mixing saved places and people does not step sideways at the avatar.
+ */
+export const ADDRESS_GEOMETRY: Record<AddressDensity, AddressGeometry> = {
+  comfortable: { tile: 40, glyph: 20 },
+  compact: { tile: 32, glyph: 16 },
+};
+
+/** The section header above a group of rows. */
+export const ADDRESS_SECTION_GAP = 8;
+export const ADDRESS_SECTIONS_GAP = 16;