@oxy.so/bloom 3.6.0 → 4.1.0

package/src/note-editor/shared.ts

@@ -0,0 +1,106 @@
+/**
+ * The toolbar's collapse arithmetic, and the header's status paint — both pure,
+ * so the suite can walk them without rendering and without a browser.
+ */
+import { resolveAccentColors } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import { surfaceTextOn } from '../styles/surface-levels';
+import { TOOLBAR_DIVIDER, TOOLBAR_GROUP_BORDER, TOOLBAR_ITEM_SIZE } from './constants';
+import type { NoteEditorAction, NoteEditorToolbarProps, NoteSaveState } from './types';
+
+/**
+ * How many `ButtonGroup` items fit in `width`.
+ *
+ * A solid group is `1px border + n items + (n-1) hairlines + 1px border`, so
+ * every item after the first costs `item + 1` and the first costs `item + 2`.
+ * Solved for `n` and floored — a fractional item is not an item.
+ *
+ * Returns 0 for a width that cannot hold one, which is a real case at the
+ * bottom of a split pane and not something to clamp away.
+ */
+export function toolbarCapacity(
+  width: number,
+  size: NonNullable<NoteEditorToolbarProps['size']> = 'medium',
+): number {
+  const item = TOOLBAR_ITEM_SIZE[size];
+  const usable = width - TOOLBAR_GROUP_BORDER + TOOLBAR_DIVIDER;
+  return Math.max(0, Math.floor(usable / (item + TOOLBAR_DIVIDER)));
+}
+
+export interface ToolbarSplit {
+  /** Drawn in the row, in order. */
+  inline: ReadonlyArray<NoteEditorAction>;
+  /** Drawn in the overflow menu, in order. */
+  overflow: ReadonlyArray<NoteEditorAction>;
+}
+
+/**
+ * Split the actions into what the row draws and what the menu gets.
+ *
+ * Two rules, and they are the whole design:
+ *
+ *  - **`alwaysVisible` never collapses.** Those actions are drawn first and are
+ *    not candidates for the menu, so a toolbar whose author pinned six of them
+ *    at 360px overflows rather than quietly hiding one. The toolbar cannot
+ *    collapse what it was told to keep, and pretending otherwise is worse.
+ *  - **The overflow button costs a slot.** As soon as anything moves to the
+ *    menu, one item's worth of width goes to the `…` — so the capacity the
+ *    remaining actions are measured against is one lower. Forgetting that is
+ *    how an adaptive row ends up one item too wide at exactly the width where
+ *    it starts collapsing.
+ *
+ * `capacity` of `null` means "not measured yet": everything is inline, which is
+ * the state the first frame renders in.
+ */
+export function splitToolbarActions(
+  actions: ReadonlyArray<NoteEditorAction>,
+  capacity: number | null,
+): ToolbarSplit {
+  if (capacity === null) return { inline: actions, overflow: [] };
+  const pinned = actions.filter((action) => action.alwaysVisible === true);
+  const rest = actions.filter((action) => action.alwaysVisible !== true);
+  if (pinned.length + rest.length <= capacity) return { inline: actions, overflow: [] };
+  const room = Math.max(0, capacity - 1 - pinned.length);
+  const kept = rest.slice(0, room);
+  const dropped = rest.slice(room);
+  // Drawing order is the caller's order, not pinned-then-rest: an author who
+  // wrote bold, italic, list expects to read bold, italic, list.
+  const keptKeys = new Set([...pinned, ...kept].map((action) => action.key));
+  return {
+    inline: actions.filter((action) => keptKeys.has(action.key)),
+    overflow: dropped,
+  };
+}
+
+export interface NoteEditorStatusPaint {
+  /** The colour the state word and its glyph are drawn in. */
+  color: string;
+  /** The quiet rung the rest of the line sits at. */
+  quiet: string;
+}
+
+/**
+ * The status line's two colours, measured against the surface the header
+ * actually sits on.
+ *
+ * `saved` and `saving` are quiet — a document that is doing what it is supposed
+ * to should not shout — and they take the AA text rung off the real surface
+ * rather than a ramp stop. `offline` and `error` take the TONE's text member
+ * (`resolveAccentColors(..., 'outlined').foreground`), never the fill token: a
+ * fill is sized to carry white, and using it as a label is how a warning line
+ * ends up at 3.6:1 in dark mode.
+ */
+export function resolveNoteStatusPaint(
+  theme: Theme,
+  surface: string,
+  state: NoteSaveState | undefined,
+): NoteEditorStatusPaint {
+  const quiet = surfaceTextOn(theme, surface).textTertiary;
+  if (state === 'offline') {
+    return { color: resolveAccentColors(theme.colors, 'warning', 'outlined').foreground, quiet };
+  }
+  if (state === 'error') {
+    return { color: resolveAccentColors(theme.colors, 'error', 'outlined').foreground, quiet };
+  }
+  return { color: quiet, quiet };
+}

package/src/note-editor/types.ts

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/**
+ * Where the document stands with its store.
+ *
+ *   `saved`    everything the reader typed is somewhere else too
+ *   `saving`   a write is in flight
+ *   `offline`  the app cannot reach the store and is holding the change
+ *   `error`    a write was REFUSED — the one state that is not going to fix itself
+ *
+ * `offline` and `error` are separate because they ask for different things from
+ * the reader: one is "keep typing", the other is "stop and look".
+ */
+export type NoteSaveState = 'saved' | 'saving' | 'offline' | 'error';
+
+/** The English words the header composes, for an app that is not in English. */
+export interface NoteEditorHeaderLabels {
+  saved?: string;
+  saving?: string;
+  offline?: string;
+  error?: string;
+  /** The word count, given the count. Default ``(n) => `${n} words` ``. */
+  words?: (count: number) => string;
+  /** Names the title input when there is no visible label. Default `"Title"`. */
+  title?: string;
+}
+
+export interface NoteEditorHeaderProps {
+  /** The document's title. Controlled — the app owns the text. */
+  title: string;
+  /** Called with every keystroke of the title. */
+  onTitleChange?: (title: string) => void;
+  /** Drawn in the title's place while it is empty. Default `"Untitled"`. */
+  placeholder?: string;
+  /**
+   * Where the document stands with its store. Omitted, the header draws no
+   * state word at all — which is right for a document that is not backed by
+   * one.
+   */
+  saveState?: NoteSaveState;
+  /** When the document was last written to, PRE-FORMATTED ("Edited 2 min ago"). */
+  edited?: string;
+  /** The body's length in words. The header formats it; the app counts it. */
+  wordCount?: number;
+  /** Stops the title being edited and dims it. */
+  disabled?: boolean;
+  /**
+   * A read-only document: the title is not editable and NOT dimmed, because
+   * nothing is broken — it is a published note, a shared one, a revision.
+   */
+  readOnly?: boolean;
+  /** The trailing slot on the title line — a share button, a menu, a `ButtonGroup`. */
+  actions?: ReactNode;
+  /** Names the header region. Default `"Note"`. */
+  accessibilityLabel?: string;
+  labels?: NoteEditorHeaderLabels;
+  style?: StyleProp<ViewStyle>;
+  /** Overrides the title's own type. The header owns its size; this is for a display face. */
+  titleStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}
+
+/** One formatting action in the toolbar. */
+export interface NoteEditorAction {
+  /** Stable key. Also the menu row's key. */
+  key: string;
+  /** The action in words. Names the icon-only button AND labels the overflow row. */
+  label: string;
+  /** The glyph, imported from its own subpath by the app. */
+  icon: BloomIconComponent;
+  /** Run the action. The editable surface is the app's, so what this does is too. */
+  onPress: () => void;
+  /**
+   * A TOGGLE's state — bold is on, the block is a list. Setting it (even to
+   * `false`) makes the action a toggle: it announces `aria-pressed` and
+   * `accessibilityState.pressed`, and collapses into a CHECKABLE menu row.
+   * Leave it `undefined` for a one-shot action (attach, link).
+   */
+  active?: boolean;
+  disabled?: boolean;
+  /**
+   * Never collapse this one. Bold and the list styles usually earn it; attach
+   * and link usually do not. More `alwaysVisible` actions than the row can hold
+   * will overflow it — the toolbar cannot collapse what it was told to keep.
+   */
+  alwaysVisible?: boolean;
+}
+
+/** The English words the toolbar composes. */
+export interface NoteEditorToolbarLabels {
+  /** Names the overflow button. Default `"More formatting"`. */
+  more?: string;
+  /** Names the overflow menu surface. Default `"More formatting"`. */
+  moreMenu?: string;
+}
+
+export interface NoteEditorToolbarProps {
+  /** The actions, in the order they are drawn. */
+  actions: ReadonlyArray<NoteEditorAction>;
+  /** The `ButtonGroup` rung. Default `medium` (34px items); `small` is 30. */
+  size?: 'medium' | 'small';
+  /** Disables every action and the overflow, without each caller writing it per action. */
+  disabled?: boolean;
+  /** Names the toolbar. Required in substance — a row of glyphs has no name of its own. */
+  accessibilityLabel: string;
+  labels?: NoteEditorToolbarLabels;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/notification/Notification.tsx

@@ -27,7 +27,7 @@ import type {
 
 /**
  * `Notification`: geometry is fixed to the pixel (see `shared.ts`); colours
- * come from Bloom's theme through the button ramp recipe.
+ * come from Bloom's paired semantic roles.
  *
  * A self-contained card: it owns its dismissal (exit animation, then unmount,
  * then `onDismiss`), its optional auto-dismiss countdown and its optional
@@ -253,12 +253,7 @@ function NotificationComponent({
             }}
           >
             {actions.map((action, index) => (
-              <Button
-                key={index}
-                size="small"
-                variant={action.variant ?? (index === 0 ? 'secondary' : 'primary')}
-                onPress={action.onPress}
-              >
+              <Button key={index} size="sm" appearance={action.appearance ?? (index === 0 ? 'subtle' : 'solid')} tone={action.tone ?? (index === 0 ? 'neutral' : 'accent')} onPress={action.onPress}>
                 {action.label}
               </Button>
             ))}

package/src/notification/shared.ts

@@ -1,10 +1,4 @@
-import {
-  ACCENT_TABLE,
-  DANGER_TABLE,
-  colorRamp,
-  mixColor,
-  resolveButtonRamps,
-} from '../button/shared';
+import { resolveAccentColors } from '../theme/accent-colors';
 import type { Theme } from '../theme/types';
 import type { NotificationPresence, NotificationStatus } from './types';
 
@@ -73,17 +67,6 @@ export interface NotificationPaint {
   status: Record<NotificationStatus, NotificationStatusPaint>;
 }
 
-/**
- * A tinted status disc: `<hue>-100` behind `<hue>-600` in light mode;
- * `<hue>-800` at 50% over the card behind `<hue>-300` in dark mode.
- */
-function tinted(theme: Theme, color: string, danger: boolean, surface: string): NotificationStatusPaint {
-  const ramp = colorRamp(color, danger ? DANGER_TABLE : ACCENT_TABLE);
-  return theme.isDark
-    ? { background: mixColor(surface, ramp[800], 0.5), foreground: ramp[300] }
-    : { background: ramp[100], foreground: ramp[600] };
-}
-
 /**
  * Every colour the card paints. Pure — takes the theme, so it can be walked over
  * every preset × mode without rendering.
@@ -94,29 +77,22 @@ function tinted(theme: Theme, color: string, danger: boolean, surface: string):
  * text/secondary glyph.
  */
 export function resolveNotificationPaint(theme: Theme): NotificationPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
   const c = theme.colors;
-  const dark = theme.isDark;
-  const surface = dark ? n[800] : c.card;
   return {
-    surface,
-    border: dark ? n[700] : n[200],
-    shadow: NOTIFICATION_SHADOW[dark ? 'dark' : 'light'],
+    surface: c.card,
+    border: c.borderLight,
+    shadow: NOTIFICATION_SHADOW[theme.isDark ? 'dark' : 'light'],
     title: c.text,
-    timestamp: dark ? n[600] : n[400],
-    description: n[500],
-    countdown: accent[600],
-    presence: {
-      online: colorRamp(c.success, ACCENT_TABLE)[500],
-      busy: colorRamp(c.error, DANGER_TABLE)[500],
-      offline: dark ? n[600] : n[400],
-    },
+    timestamp: c.textTertiary,
+    description: c.textSecondary,
+    countdown: c.primary,
+    presence: { online: c.success, busy: c.error, offline: c.textTertiary },
     status: {
-      neutral: { background: dark ? n[800] : n[200], foreground: n[500] },
-      information: tinted(theme, c.info, false, surface),
-      success: tinted(theme, c.success, false, surface),
-      warning: tinted(theme, c.warning, false, surface),
-      error: tinted(theme, c.error, true, surface),
+      neutral: resolveAccentColors(c, 'default', 'subtle'),
+      information: resolveAccentColors(c, 'info', 'subtle'),
+      success: resolveAccentColors(c, 'success', 'subtle'),
+      warning: resolveAccentColors(c, 'warning', 'subtle'),
+      error: resolveAccentColors(c, 'error', 'subtle'),
     },
   };
 }

package/src/notification/types.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { AvatarProps } from '../avatar';
-import type { ButtonVariant } from '../button';
+import type { ButtonProps } from '../button';
 import type { BloomIconComponent } from '../icons/icon-component';
 
 /**
@@ -26,8 +26,9 @@ export type NotificationAvatar = Omit<AvatarProps, 'size'> & {
 export interface NotificationAction {
   label: React.ReactNode;
   onPress?: () => void;
-  /** Defaults to `secondary` for the first action and `primary` after it. */
-  variant?: ButtonVariant;
+  /** Defaults to `subtle` for the first action and `solid` after it. */
+  appearance?: ButtonProps['appearance'];
+  tone?: ButtonProps['tone'];
 }
 
 export interface NotificationProps {

package/src/notification-center/NotificationCenter.tsx

@@ -3,7 +3,7 @@ import { ScrollView, View, type ViewStyle } from 'react-native';
 
 import { Avatar } from '../avatar';
 import { Button } from '../button';
-import { ACCENT_TABLE, colorRamp, DANGER_TABLE, resolveButtonRamps } from '../button/shared';
+import { resolveAccentColors } from '../theme/accent-colors';
 import { MENU_SHADOW } from '../floating/menu-palette';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
@@ -17,8 +17,6 @@ import {
   SegmentedControlItemText,
 } from '../segmented-control';
 import { borderRadius } from '../styles/tokens';
-import { parseRgba, withAlpha } from '../theme/color-utils';
-import { oklchToSrgb, srgbToOklch, srgbToRgbString } from '../theme/color-space';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -93,57 +91,21 @@ interface CenterPalette {
   avatar: Record<NotificationCenterAvatarColor, { background: string; foreground: string }>;
 }
 
-/**
- * Tailwind `pink-500` sits 95.1° of OKLCH hue past `blue-500`; the pink
- * avatar keeps that distance from the theme's accent, so a blue preset gives
- * that pink and any other preset rotates with it.
- */
-const PINK_HUE_OFFSET = 354.308 - 259.815;
-
-function rotateHue(color: string, degrees: number): string {
-  const rgba = parseRgba(color);
-  if (!rgba) return color;
-  const { l, c, h } = srgbToOklch(rgba);
-  return srgbToRgbString(oklchToSrgb({ l, c, h: (((h + degrees) % 360) + 360) % 360 }));
-}
-
 export function resolveNotificationCenterPalette(theme: Theme): CenterPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const info = colorRamp(theme.colors.info, ACCENT_TABLE);
-  const success = colorRamp(theme.colors.success, ACCENT_TABLE);
-  const error = colorRamp(theme.colors.negative, DANGER_TABLE);
-  const pink = colorRamp(rotateHue(theme.colors.primary, PINK_HUE_OFFSET), ACCENT_TABLE);
-  const dark = theme.isDark;
-  const disc = (ramp: typeof info) =>
-    dark
-      ? { background: withAlpha(ramp[800], 0.5), foreground: ramp[300] }
-      : { background: ramp[100], foreground: ramp[600] };
+  const c = theme.colors;
+  const pair = (tone: 'primary' | 'info' | 'success' | 'error' | 'tertiary') => {
+    const { background, foreground } = resolveAccentColors(c, tone, 'subtle');
+    return { background, foreground };
+  };
+  const neutral = { background: c.backgroundTertiary, foreground: c.textSecondary };
   return {
-    section: dark ? n[900] : theme.colors.card,
-    border: dark ? n[700] : n[200],
-    shadow: dark ? MENU_SHADOW.dark : MENU_SHADOW.light,
-    well: dark ? n[900] : n[100],
-    card: dark ? n[800] : theme.colors.card,
-    text: theme.colors.text,
-    textSecondary: n[500],
-    textTertiary: dark ? n[600] : n[400],
-    icon: n[500],
-    countBackground: dark ? n[800] : n[200],
-    unread: accent[500],
-    status: {
-      neutral: { background: dark ? n[800] : n[200], foreground: n[500] },
-      information: disc(info),
-      success: disc(success),
-      error: disc(error),
-    },
-    // Avatar tints: neutral bg avatar-neutral (300 / primary surface),
-    // blue 300/900, lime 200/700, pink 200/500.
-    avatar: {
-      neutral: { background: dark ? n[800] : n[300], foreground: n[500] },
-      blue: { background: accent[300], foreground: accent[900] },
-      lime: { background: success[200], foreground: success[700] },
-      pink: { background: pink[200], foreground: pink[500] },
-    },
+    section: c.backgroundSecondary, border: c.border,
+    shadow: theme.isDark ? MENU_SHADOW.dark : MENU_SHADOW.light,
+    well: c.backgroundSecondary, card: c.card, text: c.text,
+    textSecondary: c.textSecondary, textTertiary: c.textTertiary, icon: c.textSecondary,
+    countBackground: c.backgroundTertiary, unread: c.primary,
+    status: { neutral, information: pair('info'), success: pair('success'), error: pair('error') },
+    avatar: { neutral, blue: pair('primary'), lime: pair('success'), pink: pair('tertiary') },
   };
 }
 
@@ -303,7 +265,7 @@ const NotificationCenterComponent: React.FC<NotificationCenterProps> = ({
               {unreadCount === 0 ? 'No unread notifications' : `${unreadCount} unread`}
             </Text>
           </View>
-          <Button variant="ghost" size="small" onPress={markAllRead} disabled={unreadCount === 0}>
+          <Button size="sm" onPress={markAllRead} disabled={unreadCount === 0} appearance="subtle" tone="accent">
             Mark all read
           </Button>
         </View>
@@ -312,7 +274,7 @@ const NotificationCenterComponent: React.FC<NotificationCenterProps> = ({
           label="Notification category"
           type="tabs"
           value={activeTab}
-          onChange={setTab}
+          onValueChange={setTab}
           style={{ alignSelf: 'stretch', width: '100%' }}
         >
           {TABS.map(({ id, label }) => (
@@ -427,15 +389,10 @@ const NotificationCenterComponent: React.FC<NotificationCenterProps> = ({
                             }}
                           >
                             {item.actions.map((action) => (
-                              <Button
-                                key={action.id}
-                                size="small"
-                                variant={action.variant ?? 'secondary'}
-                                onPress={() => {
+                              <Button key={action.id} size="sm" appearance={action.appearance ?? 'subtle'} tone={action.tone ?? 'neutral'} onPress={() => {
                                   setReadIds((current) => new Set(current).add(item.id));
                                   onAction?.(item.id, action.id);
-                                }}
-                              >
+                                }}>
                                 {action.label}
                               </Button>
                             ))}

package/src/notification-center/types.ts

@@ -1,7 +1,7 @@
 import type { ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import type { ButtonVariant } from '../button/types';
+import type { ButtonProps } from '../button/types';
 import type { BloomIconComponent } from '../icons/icon-component';
 
 export type NotificationCenterTab = 'all' | 'mentions' | 'system';
@@ -32,8 +32,9 @@ export interface NotificationCenterAvatar {
 export interface NotificationCenterAction {
   id: string;
   label: string;
-  /** Any `Button` variant. Defaults to `secondary`. */
-  variant?: ButtonVariant;
+  /** Any `Button` appearance. Defaults to `subtle`. */
+  appearance?: ButtonProps['appearance'];
+  tone?: ButtonProps['tone'];
 }
 
 export interface NotificationCenterItem {

package/src/order-confirmation/OrderConfirmation.tsx

@@ -0,0 +1,192 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+
+import { AddressRow } from '../address';
+import { Chip } from '../chip';
+import { EmptyState } from '../empty-state';
+import { IconCircle } from '../icon-circle';
+import { RiCheckLine } from '../icons/remix/RiCheckLine';
+import { FactList } from '../listing-actions/parts';
+import { OrderStatusBar } from '../order-status';
+import { surfaceTextOn, useSurfaceFill } from '../styles/surface-levels';
+import { resolveAccentColors } from '../theme/accent-colors';
+import { useTheme } from '../theme/use-theme';
+import { Text } from '../typography';
+import {
+  ORDER_CONFIRMATION_GAP,
+  ORDER_CONFIRMATION_ITEMS_LABEL,
+  ORDER_CONFIRMATION_MARK,
+  ORDER_CONFIRMATION_REFERENCE_LABEL,
+  ORDER_CONFIRMATION_TITLE,
+} from './constants';
+import type { OrderConfirmationProps } from './types';
+
+/**
+ * A row nested inside this surface takes its own chrome off: `Item`'s
+ * `paddingLeft`/`paddingRight`, in the LONGHANDS it writes, so the reset is
+ * honoured by react-native-web's atomic sheet as well as by Yoga.
+ */
+const FLUSH_ROW = { paddingLeft: 0, paddingRight: 0 } as const;
+
+/**
+ * It is placed: what happened, which order it was, where it is going, what it
+ * cost, and the two things you do next.
+ *
+ *   mark      a check on a success-tinted disc, 56. STATIC: `AnimatedCheck`
+ *             draws itself on only when a caller kicks it through its ref, and
+ *             a mark that is invisible until someone calls a method — or under
+ *             reduce-motion — is not a mark. An app that wants the draw-on
+ *             passes `<AnimatedCheck>` (and its `play()`) as `mark`.
+ *   title     the "done" register — `EmptyState`'s own heading and line, which
+ *             is the same block `auth-card` and every finished flow draw
+ *   reference the order number as an outlined `Chip`, under its caption; it is
+ *             a chip because it is the one string a reader will read back to
+ *             someone on the phone, and a chip is the library's token
+ *   status    `order-status`'s `OrderStatusBar` — the ONE tracking strip in the
+ *             library, drawn here rather than copied
+ *   address   `address`'s `AddressRow`, flush with the block's edges
+ *   facts     the label/value box Bloom's action cards already draw
+ *   items     a slot: an order line is a dish, a parcel or a seat, and each has
+ *             a row family of its own
+ *   actions   track it, get help
+ *
+ * ## It IS an `EmptyState`
+ *
+ * Not "looks like one": a mark, a heading, a line of explanation, a block of
+ * content and up to two actions is exactly that family's shape, and a "done"
+ * screen is the same object as a "nothing here" screen with a different reason
+ * for existing. Building it a second time is how two centred columns with
+ * different paddings ship in one library.
+ *
+ * ## It computes nothing
+ *
+ * Every amount, every time and every reading is a string the app formatted.
+ */
+function OrderConfirmationComponent({
+  title = ORDER_CONFIRMATION_TITLE,
+  description,
+  mark,
+  markSize = ORDER_CONFIRMATION_MARK,
+  reference,
+  referenceLabel = ORDER_CONFIRMATION_REFERENCE_LABEL,
+  status,
+  address,
+  facts,
+  items,
+  itemsLabel = ORDER_CONFIRMATION_ITEMS_LABEL,
+  action,
+  secondaryAction,
+  footer,
+  variant = 'comfortable',
+  accessibilityLabel,
+  style,
+  testID,
+}: OrderConfirmationProps) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  const paint = useMemo(() => surfaceTextOn(theme, surface), [theme, surface]);
+  const success = useMemo(() => resolveAccentColors(theme.colors, 'success', 'subtle'), [theme]);
+  const id = (part: string) => (testID ? `${testID}-${part}` : undefined);
+
+  const keyFacts = useMemo(
+    () => (facts ?? []).map((fact) => ({ key: fact.id ?? fact.label, label: fact.label, value: fact.value })),
+    [facts],
+  );
+
+  const caption = (text: string, part: string) => (
+    <Text
+      variant="caption-2-bold"
+      testID={id(part)}
+      style={{ color: paint.textSecondary, textTransform: 'uppercase' }}
+    >
+      {text}
+    </Text>
+  );
+
+  const hasBody =
+    reference != null || status != null || address != null || keyFacts.length > 0 || items != null;
+
+  return (
+    <EmptyState
+      variant={variant}
+      // The mark is read for PRESENCE: `mark={null}` draws none, which is what
+      // a surface that already carries a brand header wants.
+      illustration={
+        mark !== undefined ? (
+          mark
+        ) : (
+          // The disc and the glyph are a resolved PAIR (`resolveAccentColors`),
+          // never one token with alpha appended — `IconCircle`'s own primary
+          // pair overridden together, which is the one way its docs allow.
+          <IconCircle
+            icon={RiCheckLine}
+            size="xl"
+            style={{ width: markSize, height: markSize, backgroundColor: success.background }}
+            iconStyle={{ color: success.foreground }}
+          />
+        )
+      }
+      title={title}
+      description={description}
+      action={action}
+      secondaryAction={secondaryAction}
+      footer={footer}
+      accessibilityLabel={
+        accessibilityLabel ??
+        [title, reference ? `${referenceLabel} ${reference}` : undefined, description]
+          .filter(Boolean)
+          .join('. ')
+      }
+      style={style}
+      testID={testID}
+    >
+      {hasBody ? (
+        <View style={{ gap: ORDER_CONFIRMATION_GAP }}>
+          {reference != null ? (
+            <View style={{ alignItems: 'center', gap: 6 }}>
+              {caption(referenceLabel, 'reference-label')}
+              <Chip
+                variant="outlined"
+                size="large"
+                // `Chip` pins itself to `alignSelf: 'flex-start'`, so a centred
+                // parent does not centre it — it has to say so itself.
+                style={{ alignSelf: 'center' }}
+                accessibilityLabel={`${referenceLabel} ${reference}`}
+                testID={id('reference')}
+              >
+                {reference}
+              </Chip>
+            </View>
+          ) : null}
+
+          {status ? <OrderStatusBar {...status} testID={status.testID ?? id('status')} /> : null}
+
+          {address ? (
+            <AddressRow
+              title={address.title}
+              subtitle={address.subtitle}
+              kind={address.kind}
+              icon={address.icon}
+              badge={address.badge}
+              meta={address.meta}
+              style={FLUSH_ROW}
+              testID={address.testID ?? id('address')}
+            />
+          ) : null}
+
+          {keyFacts.length > 0 ? <FactList facts={keyFacts} testID={id('facts')} /> : null}
+
+          {items != null ? (
+            <View style={{ gap: 8 }}>
+              {caption(itemsLabel, 'items-label')}
+              <View testID={id('items')}>{items}</View>
+            </View>
+          ) : null}
+        </View>
+      ) : null}
+    </EmptyState>
+  );
+}
+
+export const OrderConfirmation = memo(OrderConfirmationComponent);
+OrderConfirmation.displayName = 'OrderConfirmation';