@appinternalleads/ui 0.2.0

package/src/components/onboarding/rate-limit/RateLimitView.tsx

@@ -0,0 +1,116 @@
+import { useEffect } from 'react';
+import { Box, Icon, Select, Text } from '../../../core';
+import { Callout, ProgressBar } from '../../../ds';
+import { blockRadii, useDs, type DensityName } from '../../../tokens';
+import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { ONBOARDING_TIMING, type OnboardingOperation } from '../shared/mock';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { FieldLabel, OnboardingCard } from '../shared/OnboardingCard';
+import { CrossFadeText } from '../shared/parts';
+import { runOutcome, useDefaultOperation, usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { useOperationRunner } from '../../../runtime/operations';
+import { RATE_LIMIT_PRESETS, validateRateLimit, type RateLimitSettings } from './contract';
+import { initialRateLimit, rateLimitView, reduceRateLimit, type RateLimitSeed } from './engine';
+import { guarded } from '../shared/guard';
+
+export type RateLimitOperations = { save: OnboardingOperation<{ limit: number; overage: string }> };
+
+export type RateLimitProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<RateLimitSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: RateLimitOperations;
+  reload?: OnboardingOperation<void>;
+  initial?: RateLimitSeed;
+  onSave?: (value: { limit: number; overage: string }) => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/**
+ * **Rate Limit** — a limit select (C6), a usage well ("8,200 / 10,000 req/min", cross-fading; an 8px
+ * bar that turns apricot near, at or over the limit, with the warning in words), and an overage
+ * select with a line describing the choice. Save waits for a change.
+ */
+function RateLimitView(props: RateLimitProps) {
+  const config = resolveConfig(RATE_LIMIT_PRESETS, props.preset, props.config);
+  const issues = validateRateLimit(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status = 'ready', result, operations, reload, initial, onSave, onScene, testID,
+}: Omit<RateLimitProps, 'config'> & { config: RateLimitSettings }) {
+  const { colors, density: d } = useDs();
+  const runner = useOperationRunner();
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send, ref] = useSeededReducer(reduceRateLimit, () => initialRateLimit(config, initial), key, () => runner.cancel('save'));
+  const pattern = usePatternStatus(status, reload);
+  const v = rateLimitView(config, state);
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+  const save = useDefaultOperation(operations?.save, ONBOARDING_TIMING.save, () => result === 'error');
+  const run = () => {
+    const value = { limit: ref.current.limit, overage: ref.current.overage };
+    runOutcome(runner, 'save', save, value, { ok: () => { send({ type: 'saved' }); onSave?.(value); }, fail: () => send({ type: 'failed' }) });
+  };
+  useEffect(() => { if (ref.current.save === 'saving') run(); }, [key]);
+  const locked = state.save === 'saving';
+
+  return (
+    <OnboardingCard
+      testID={testID}
+      header={config}
+      copy={config}
+      density={density}
+      status={pattern.status}
+      onRetry={pattern.retry}
+      onEmptyAction={pattern.retry}
+      chip={v.chip}
+      hint={v.footerHint}
+      primary={{ label: v.primaryLabel, disabled: !v.canSave, busy: locked, onPress: () => { if (!rateLimitView(config, ref.current).canSave) return; send({ type: 'save' }); run(); } }}>
+      <Box style={{ gap: d.gap + 2 }}>
+        <Box gap="s1">
+          <FieldLabel>{config.limitLabel}</FieldLabel>
+          <Select
+            aria-label={config.limitLabel}
+            value={String(state.limit)}
+            disabled={locked}
+            onChange={x => send({ type: 'limit', limit: Number(x) })}
+            options={config.limits.map(x => ({ value: String(x), label: `${x.toLocaleString('en-US')} ${config.unit}` }))}
+          />
+        </Box>
+        <Box gap="s2" style={{ borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken, paddingVertical: 14, paddingHorizontal: 16 }}>
+          <Box row wrap justify="space-between" gap="s2">
+            <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{config.usageLabel}</Text>
+            <CrossFadeText value={v.usageText} style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }} />
+          </Box>
+          <ProgressBar bare track="surface" label={config.usageLabel} value={v.pct} tone={v.warn ? 'attention' : 'ink'} format={() => `${v.pct}% of the limit${v.warn ? ` · ${v.chip.label.toLowerCase()}` : ''}`} />
+          {v.warn ? (
+            <Box row gap="s2" align="flex-start">
+              <Icon name="alert" size={14} color={colors.status.needsUser} />
+              <Text variant="caption" style={{ fontSize: 12, color: colors.status.needsUser, flex: 1 }}>{v.note}</Text>
+            </Box>
+          ) : null}
+        </Box>
+        <Box gap="s1">
+          <FieldLabel>{config.overageLabel}</FieldLabel>
+          <Select
+            aria-label={config.overageLabel}
+            value={state.overage}
+            disabled={locked}
+            onChange={x => send({ type: 'overage', overage: x })}
+            options={config.overageOptions.map(o => ({ value: o.value, label: o.label }))}
+          />
+          <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{v.option.description}</Text>
+        </Box>
+        {state.save === 'failed' ? <Callout alert title={config.saveErrorTitle}>{config.saveErrorBody}</Callout> : null}
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+/** RateLimit, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const RateLimit = guarded(RateLimitView, RATE_LIMIT_PRESETS, 'RateLimit');

package/src/components/onboarding/rate-limit/contract.ts

@@ -0,0 +1,51 @@
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Rate Limit — "limit + usage + overage" (batch 2 §3.9)** — set a usage limit and what happens
+ * when it is exceeded. Near the limit, at it, or set below current usage, the bar and chip turn
+ * apricot and a line says what will happen, in words.
+ */
+
+export type OverageOption = { value: string; label: string; description: string; outcome: string };
+
+export const RATE_LIMIT_SCENES = ['default', 'normal', 'near', 'atLimit', 'below', 'saving', 'saved', 'failed', 'loading', 'empty', 'error'] as const;
+export type RateLimitScene = (typeof RATE_LIMIT_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const RATE_LIMIT_IN_FLIGHT: readonly string[] = ['saving'];
+
+export type RateLimitSettings = HeaderConfig & LoadCopy & {
+  limits: number[];
+  /** "req/min". */
+  unit: string;
+  /** "requests" — "Extra requests will be queued". */
+  unitNoun: string;
+  usage: number;
+  /** The limit saved today. */
+  defaultLimit: number;
+  /** A change the step opens with, not yet saved (case 5 lowers the limit below usage). */
+  pendingLimit?: number;
+  defaultOverage?: string;
+  overageOptions: OverageOption[];
+  /** At or above this share of the limit, usage is "near". */
+  attentionAt: number;
+  limitLabel: string;
+  usageLabel: string;
+  overageLabel: string;
+  primaryLabel: string;
+  savedHint: string;
+  saveErrorTitle: string;
+  saveErrorBody: string;
+};
+
+export const RATE_LIMIT_PRESETS = presetsJson as unknown as PresetsFile<RateLimitSettings>;
+
+export function validateRateLimit(c: RateLimitSettings): OnboardingIssue[] {
+  const issues: OnboardingIssue[] = [];
+  if (!Array.isArray(c.limits) || !c.limits.length) issues.push({ path: 'limits', message: 'Offer at least one limit.' });
+  else if (!c.limits.includes(c.defaultLimit)) issues.push({ path: 'defaultLimit', message: 'defaultLimit must be one of the limits.' });
+  if (c.pendingLimit !== undefined && !c.limits?.includes(c.pendingLimit)) issues.push({ path: 'pendingLimit', message: 'pendingLimit must be one of the limits.' });
+  if (!Array.isArray(c.overageOptions) || !c.overageOptions.length) issues.push({ path: 'overageOptions', message: 'Offer at least one overage behaviour.' });
+  if (!(c.attentionAt > 0 && c.attentionAt <= 1)) issues.push({ path: 'attentionAt', message: 'attentionAt is a share between 0 and 1.' });
+  return issues;
+}

package/src/components/onboarding/rate-limit/engine.ts

@@ -0,0 +1,85 @@
+import type { StateChipTone } from '../../../ds';
+import type { SavePhase } from '../shared/contract';
+import type { RateLimitScene, RateLimitSettings } from './contract';
+
+/** **The Rate Limit engine** — pure: the chosen limit and overage against what is saved, and usage. */
+
+export type RateLimitState = { usage: number; limit: number; overage: string; saved: { limit: number; overage: string }; save: SavePhase };
+export type RateLimitSeed = Partial<RateLimitState>;
+export type UsageMode = 'normal' | 'near' | 'at' | 'below';
+
+export type RateLimitAction =
+  | { type: 'limit'; limit: number }
+  | { type: 'overage'; overage: string }
+  | { type: 'save' }
+  | { type: 'saved' }
+  | { type: 'failed' };
+
+export function initialRateLimit(c: RateLimitSettings, seed: RateLimitSeed = {}): RateLimitState {
+  const overage = c.defaultOverage ?? c.overageOptions[0]?.value ?? '';
+  const saved = seed.saved ?? { limit: c.defaultLimit, overage };
+  return { usage: seed.usage ?? c.usage, limit: seed.limit ?? c.pendingLimit ?? c.defaultLimit, overage: seed.overage ?? overage, saved, save: seed.save ?? 'idle' };
+}
+
+/** The prototype's scenes: usage set against the saved limit, or a limit picked below usage. */
+export function rateLimitSeed(c: RateLimitSettings, scene: RateLimitScene): RateLimitSeed {
+  const base = initialRateLimit(c);
+  const L = c.limits;
+  const limit = base.saved.limit;
+  if (scene === 'normal') return { limit, usage: Math.round(limit * 0.55) };
+  if (scene === 'near') return { limit, usage: Math.round(limit * 0.86) };
+  if (scene === 'atLimit') return { limit, usage: limit };
+  if (scene === 'below') {
+    const lower = L.filter(x => x < base.usage);
+    return lower.length ? { limit: lower.at(-1)! } : { limit: L[0]!, usage: Math.round(L[0]! * 1.2) };
+  }
+  if (scene === 'saving' || scene === 'saved' || scene === 'failed') {
+    const next = L[Math.min(L.length - 1, L.indexOf(limit) + 1)]!;
+    return { limit: next, save: scene, ...(scene === 'saved' ? { saved: { limit: next, overage: base.overage } } : {}) };
+  }
+  return {};
+}
+
+export function reduceRateLimit(s: RateLimitState, a: RateLimitAction): RateLimitState {
+  switch (a.type) {
+    case 'limit': return s.save === 'saving' ? s : { ...s, limit: a.limit, save: 'idle' };
+    case 'overage': return s.save === 'saving' ? s : { ...s, overage: a.overage, save: 'idle' };
+    case 'save': return { ...s, save: 'saving' };
+    case 'saved': return s.save === 'saving' ? { ...s, save: 'saved', saved: { limit: s.limit, overage: s.overage } } : s;
+    case 'failed': return s.save === 'saving' ? { ...s, save: 'failed' } : s;
+  }
+}
+
+export function usageMode(c: RateLimitSettings, s: Pick<RateLimitState, 'usage' | 'limit'>): UsageMode {
+  const r = s.limit ? s.usage / s.limit : 0;
+  return s.usage > s.limit ? 'below' : s.usage === s.limit ? 'at' : r >= c.attentionAt ? 'near' : 'normal';
+}
+
+export function rateLimitView(c: RateLimitSettings, s: RateLimitState) {
+  const r = s.limit ? s.usage / s.limit : 0;
+  const mode = usageMode(c, s);
+  const warn = mode !== 'normal';
+  const opt = c.overageOptions.find(o => o.value === s.overage) ?? c.overageOptions[0]!;
+  const dirty = s.limit !== s.saved.limit || s.overage !== s.saved.overage;
+  const n = (x: number) => x.toLocaleString('en-US');
+  const chipLabel = s.save === 'saved' ? 'Saved' : mode === 'below' ? 'Over limit' : mode === 'at' ? 'At limit' : mode === 'near' ? 'Near limit' : `${Math.round(r * 100)}% used`;
+  return {
+    mode,
+    warn,
+    pct: Math.min(100, Math.round(r * 100)),
+    usageText: `${n(s.usage)} / ${n(s.limit)} ${c.unit}`,
+    option: opt,
+    note: mode === 'below' ? `Current usage (${n(s.usage)}) is above this limit. Extra ${c.unitNoun} will be ${opt.outcome} straight away.`
+      : mode === 'at' ? `You’ve reached the limit. New ${c.unitNoun} are ${opt.outcome}.`
+      : mode === 'near' ? `You’re at ${Math.round(r * 100)}% of the limit. At 100%, new ${c.unitNoun} will be ${opt.outcome}.` : '',
+    scene: (s.save !== 'idle' ? s.save : mode === 'below' ? 'below' : mode === 'at' ? 'atLimit' : mode === 'near' ? 'near' : 'default') as RateLimitScene,
+    chip: {
+      tone: (s.save === 'saving' ? 'neutral' : warn ? 'attention' : s.save === 'saved' ? 'success' : 'neutral') as StateChipTone,
+      label: s.save === 'saving' ? 'Saving…' : chipLabel,
+    },
+    dirty,
+    footerHint: s.save === 'saved' && !dirty ? c.savedHint : dirty ? 'Unsaved changes' : 'No changes yet',
+    primaryLabel: s.save === 'saving' ? 'Saving…' : s.save === 'saved' && !dirty ? 'Saved' : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
+    canSave: (dirty || s.save === 'failed') && s.save !== 'saving',
+  };
+}

package/src/components/onboarding/rate-limit/index.ts

@@ -0,0 +1,9 @@
+export {
+  RATE_LIMIT_IN_FLIGHT, RATE_LIMIT_PRESETS, RATE_LIMIT_SCENES, validateRateLimit,
+  type OverageOption, type RateLimitScene, type RateLimitSettings,
+} from './contract';
+export {
+  initialRateLimit, rateLimitSeed, rateLimitView, reduceRateLimit, usageMode,
+  type RateLimitAction, type RateLimitSeed, type RateLimitState, type UsageMode,
+} from './engine';
+export { RateLimit, type RateLimitOperations, type RateLimitProps } from './RateLimitView';

package/src/components/onboarding/rate-limit/presets.json

@@ -0,0 +1,213 @@
+{
+  "component": "rate-limit",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "data",
+    "icon": "pulse",
+    "title": "Set your API rate limit",
+    "subtitle": "Protects your service from traffic spikes.",
+    "unit": "req/min",
+    "unitNoun": "requests",
+    "usage": 5600,
+    "defaultLimit": 10000,
+    "limits": [
+      5000,
+      10000,
+      20000,
+      50000
+    ],
+    "attentionAt": 0.8,
+    "overageOptions": [
+      {
+        "value": "reject",
+        "label": "Reject (429)",
+        "description": "Extra requests get a 429 Too Many Requests response.",
+        "outcome": "rejected with a 429"
+      },
+      {
+        "value": "queue",
+        "label": "Queue",
+        "description": "Extra requests wait up to 30 seconds, then run in order.",
+        "outcome": "queued"
+      },
+      {
+        "value": "bill",
+        "label": "Allow and bill",
+        "description": "Extra requests go through and are billed at $0.40 per 1,000.",
+        "outcome": "allowed and billed"
+      }
+    ],
+    "limitLabel": "Limit",
+    "usageLabel": "Current usage",
+    "overageLabel": "When the limit is exceeded",
+    "primaryLabel": "Save limit",
+    "savedHint": "Saved · applies within a minute",
+    "saveErrorTitle": "Couldn’t save the limit",
+    "saveErrorBody": "Your previous limit is still in place. Retry when you’re ready.",
+    "emptyTitle": "No usage yet",
+    "emptyBody": "Make your first request to see usage and set a limit.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "action",
+      "icon": "mail",
+      "title": "Set a sending limit",
+      "subtitle": "Stops a campaign from flooding inboxes.",
+      "unit": "emails/hour",
+      "unitNoun": "emails",
+      "usage": 4400,
+      "defaultLimit": 5000,
+      "limits": [
+        1000,
+        2500,
+        5000,
+        10000
+      ],
+      "overageOptions": [
+        {
+          "value": "queue",
+          "label": "Queue",
+          "description": "Extra emails are sent in the next hour.",
+          "outcome": "queued for the next hour"
+        },
+        {
+          "value": "pause",
+          "label": "Pause campaign",
+          "description": "The campaign pauses until you resume it.",
+          "outcome": "held and the campaign paused"
+        }
+      ]
+    },
+    "case3": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Set a token budget",
+      "subtitle": "How much your assistant can use each day.",
+      "unit": "tokens/day",
+      "unitNoun": "requests",
+      "usage": 420000,
+      "defaultLimit": 1000000,
+      "limits": [
+        250000,
+        500000,
+        1000000,
+        2000000
+      ],
+      "overageOptions": [
+        {
+          "value": "pause",
+          "label": "Pause agent",
+          "description": "The assistant stops until midnight UTC.",
+          "outcome": "paused until tomorrow"
+        },
+        {
+          "value": "notify",
+          "label": "Notify only",
+          "description": "Keep working and email the owner.",
+          "outcome": "allowed, and the owner notified"
+        },
+        {
+          "value": "payg",
+          "label": "Pay as you go",
+          "description": "Keep working at $2 per extra million tokens.",
+          "outcome": "allowed and billed"
+        }
+      ]
+    },
+    "case4": {
+      "type": "file",
+      "icon": "hardDrive",
+      "title": "Set a storage quota",
+      "subtitle": "How much each person can store.",
+      "unit": "GB/user",
+      "unitNoun": "uploads",
+      "usage": 50,
+      "defaultLimit": 50,
+      "limits": [
+        10,
+        25,
+        50,
+        100
+      ],
+      "overageOptions": [
+        {
+          "value": "block",
+          "label": "Block uploads",
+          "description": "People can still view and delete files.",
+          "outcome": "blocked"
+        },
+        {
+          "value": "notify",
+          "label": "Notify admin",
+          "description": "Uploads continue and admins get an email.",
+          "outcome": "allowed, and admins notified"
+        }
+      ]
+    },
+    "case5": {
+      "type": "schedule",
+      "icon": "chat",
+      "title": "Set an SMS limit",
+      "subtitle": "Appointment reminders sent each month.",
+      "unit": "SMS/month",
+      "unitNoun": "reminders",
+      "usage": 1240,
+      "defaultLimit": 2000,
+      "pendingLimit": 1000,
+      "limits": [
+        500,
+        1000,
+        2000,
+        5000
+      ],
+      "overageOptions": [
+        {
+          "value": "stop",
+          "label": "Stop sending",
+          "description": "No more reminders until next month.",
+          "outcome": "not sent"
+        },
+        {
+          "value": "email",
+          "label": "Switch to email",
+          "description": "Patients with an email get it there instead.",
+          "outcome": "sent by email instead"
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · Platform",
+      "title": "API rate limit",
+      "scenario": "A developer sets a per-minute request limit and what happens to extra requests."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Email infra",
+      "title": "Sending limit",
+      "scenario": "A marketer caps hourly sends. Usage is already near the limit."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · AI agent",
+      "title": "Token budget",
+      "scenario": "A team lead sets a daily token budget for their assistant."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · SaaS",
+      "title": "Storage quota",
+      "scenario": "An admin sets per-person storage. Usage is exactly at the limit."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · Clinic",
+      "title": "SMS reminders",
+      "scenario": "A clinic lowers its monthly SMS limit below this month’s usage, so the warning shows before saving."
+    }
+  }
+}

package/src/components/onboarding/receipt-printer/ReceiptPaper.tsx

@@ -0,0 +1,50 @@
+import { Box, Text } from '../../../core';
+import { HUE, blockRadii, useDs } from '../../../tokens';
+import type { ReceiptLines, PrinterPhase } from './engine';
+
+/**
+ * **The receipt as a still** — the golden roller and the paper at rest, drawn with the primitives.
+ * It is what React Native shows (the Rive runtime used on the web has no native half here), and
+ * what the web shows if that runtime cannot load, so a print always ends with a receipt on screen.
+ * Idle, only the torn tip and the message show below the roller, as in the Rive file. It is as long
+ * as its lines, one row per item, and grows rather than keeping the Rive stage's ratio.
+ */
+export function ReceiptPaper({ lines, phase, maxWidth, label, testID }: { lines: ReceiptLines; phase: PrinterPhase; maxWidth: number; label: string; testID?: string }) {
+  const { colors, fonts } = useDs();
+  const butter = HUE.butter;
+  const mono = { fontFamily: fonts.mono, color: butter.on };
+  const row = (left: string, right: string, strong = false) => (
+    <Box row justify="space-between" gap="s2">
+      <Text numberOfLines={1} style={{ ...mono, fontSize: 11, flexShrink: 1, color: strong ? butter.hd : colors.textSecondary }}>{left}</Text>
+      <Text numberOfLines={1} style={{ ...mono, fontSize: 11, flexShrink: 1, textAlign: 'right', ...(strong ? { color: butter.hd, fontWeight: '600' } : null) }}>{right}</Text>
+    </Box>
+  );
+  const rule = <Box style={{ height: 1, backgroundColor: butter.hs, marginVertical: 8 }} />;
+  const open = phase !== 'idle';
+  return (
+    <Box testID={testID} role="img" aria-label={label} align="center" style={{ width: '100%', maxWidth, borderRadius: blockRadii.mid, backgroundColor: butter.hs, paddingTop: 24, paddingBottom: 24, overflow: 'hidden' }}>
+      <Box style={{ width: '88%', height: 28, borderRadius: 14, backgroundColor: butter.h, zIndex: 1 }} />
+      <Box style={{ width: '76%', marginTop: -6, backgroundColor: colors.surface1, paddingHorizontal: 14, paddingTop: open ? 18 : 10, paddingBottom: 12, borderBottomLeftRadius: 2, borderBottomRightRadius: 2 }}>
+        {open ? (
+          <>
+            {lines.title ? <Text numberOfLines={1} style={{ ...mono, fontSize: 10, letterSpacing: 1 }}>{lines.title}</Text> : null}
+            <Text numberOfLines={1} style={{ ...mono, fontSize: 20, fontWeight: '600', marginTop: 2 }}>{lines.total}</Text>
+            <Text numberOfLines={1} style={{ ...mono, fontSize: 9, color: colors.textSecondary, marginTop: 2 }}>{lines.meta}</Text>
+            {rule}
+            {lines.details.map((d, i) => <Box key={i}>{row(d.label, d.value)}</Box>)}
+            {rule}
+            <Box role="list" gap="s1">
+              {lines.items.map((it, i) => <Box key={i} role="listitem">{row(it.line, it.amount)}</Box>)}
+            </Box>
+            {rule}
+            {row(lines.paymentLabel, lines.paymentMethod)}
+            {rule}
+            {row(lines.totalLabel, lines.total, true)}
+            {rule}
+          </>
+        ) : null}
+        <Text numberOfLines={1} style={{ ...mono, fontSize: 10, letterSpacing: 1, textAlign: 'center', marginTop: open ? 10 : 0 }}>{lines.message}</Text>
+      </Box>
+    </Box>
+  );
+}