@appinternalleads/ui 0.2.0

package/src/components/onboarding/password-expiry/presets.json

@@ -0,0 +1,179 @@
+{
+  "component": "password-expiry",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "action",
+    "icon": "key",
+    "title": "Workspace password",
+    "subtitle": "ayesha@northwind.com",
+    "credential": "password",
+    "daysLeft": 5,
+    "strength": "moderate",
+    "renewDays": 90,
+    "requirements": [
+      {
+        "label": "At least 12 characters",
+        "met": true
+      },
+      {
+        "label": "Upper and lower case letters",
+        "met": true
+      },
+      {
+        "label": "At least one number",
+        "met": true
+      },
+      {
+        "label": "Not used in your last 5 passwords",
+        "met": false
+      }
+    ],
+    "strengthLabel": "Current strength",
+    "reqTitle": "Your new password needs",
+    "policyNote": "Passwords expire every 90 days.",
+    "expiredCopy": "You can’t sign in until you change it.",
+    "changedLine": "Password changed just now.",
+    "primaryLabel": "Change password",
+    "busyLabel": "Updating…",
+    "timeHint": "Takes about a minute",
+    "changedHint": "You’ll stay signed in on this device",
+    "failTitle": "Couldn’t change your password",
+    "emptyTitle": "Nothing is expiring",
+    "emptyBody": "All your credentials are up to date.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "title": "Admin password",
+      "subtitle": "it-admin@northwind.com",
+      "daysLeft": -2,
+      "strength": "moderate",
+      "policyNote": "90-day policy set by IT.",
+      "expiredCopy": "Admin access is locked until you change it. Other admins can still sign in."
+    },
+    "case3": {
+      "type": "data",
+      "icon": "code",
+      "title": "Production API key",
+      "subtitle": "sk_live_••••7Q2F",
+      "credential": "API key",
+      "daysLeft": 3,
+      "strength": "strong",
+      "renewDays": 180,
+      "requirements": [
+        {
+          "label": "Scoped to read and write orders",
+          "met": true
+        },
+        {
+          "label": "Stored in your secrets manager",
+          "met": true
+        },
+        {
+          "label": "Used by 2 services",
+          "met": true
+        }
+      ],
+      "strengthLabel": "Key health",
+      "reqTitle": "Before you rotate",
+      "policyNote": "Keys rotate every 180 days.",
+      "primaryLabel": "Rotate key",
+      "busyLabel": "Rotating…",
+      "changedLine": "New key issued. The old one works for 24 hours.",
+      "changedHint": "Update your services within 24 hours",
+      "failTitle": "Couldn’t rotate the key"
+    },
+    "case4": {
+      "type": "schedule",
+      "icon": "building",
+      "title": "Clinic system password",
+      "subtitle": "reception@riverside.clinic",
+      "daysLeft": 1,
+      "strength": "weak",
+      "requirements": [
+        {
+          "label": "At least 12 characters",
+          "met": true
+        },
+        {
+          "label": "Upper and lower case letters",
+          "met": false
+        },
+        {
+          "label": "At least one number",
+          "met": false
+        },
+        {
+          "label": "Not your name or the clinic’s name",
+          "met": false
+        }
+      ],
+      "policyNote": "Required by patient-data rules."
+    },
+    "case5": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Google access for your assistant",
+      "subtitle": "Calendar, Gmail and Drive",
+      "credential": "connection",
+      "daysLeft": 7,
+      "strength": "strong",
+      "renewDays": 60,
+      "requirements": [
+        {
+          "label": "Calendar: read and edit",
+          "met": true
+        },
+        {
+          "label": "Gmail: read and draft",
+          "met": true
+        },
+        {
+          "label": "Drive: read only",
+          "met": true
+        }
+      ],
+      "strengthLabel": "Connection health",
+      "reqTitle": "Access your assistant keeps",
+      "policyNote": "Google asks you to reconnect every 60 days.",
+      "primaryLabel": "Reconnect Google",
+      "busyLabel": "Reconnecting…",
+      "changedLine": "Reconnected just now.",
+      "changedHint": "Your assistant can keep working",
+      "failTitle": "Couldn’t reconnect Google"
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS",
+      "title": "Workspace password",
+      "scenario": "A password expires in 5 days and is only moderately strong."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · IT",
+      "title": "Admin password",
+      "scenario": "An admin password has expired under a 90-day policy."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Platform",
+      "title": "API key rotation",
+      "scenario": "A production key is due for rotation in 3 days."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Healthcare ops",
+      "title": "Clinic system",
+      "scenario": "A weak front-desk password expires tomorrow."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Connected account token",
+      "scenario": "The assistant’s Google access needs reconnecting in 7 days."
+    }
+  }
+}

package/src/components/onboarding/payment-alert/PaymentAlertView.tsx

@@ -0,0 +1,190 @@
+import { useEffect } from 'react';
+import { Box, Icon, MotionView, Pressable, Text, useTween } from '../../../core';
+import { Button } 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 { OnboardingCard } from '../shared/OnboardingCard';
+import { ExpandRegion, PlainChip } from '../shared/parts';
+import { runOutcome, useDefaultOperation, usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { useOperationRunner } from '../../../runtime/operations';
+import { PAYMENT_PRESETS, validatePaymentAlert, type PaymentAlertSettings, type PaymentEvent, type PaymentStatus } from './contract';
+import { initialPaymentAlert, money, paymentSeed, paymentView, reducePaymentAlert, type PaymentAlertSeed, type PaymentRow } from './engine';
+import { guarded } from '../shared/guard';
+
+export type PaymentAlertOperations = { retry: OnboardingOperation<{ index: number; title: string; amount: number }> };
+
+export type PaymentAlertProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<PaymentAlertSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: PaymentAlertOperations;
+  reload?: OnboardingOperation<void>;
+  initial?: PaymentAlertSeed;
+  onPaid?: (event: PaymentEvent) => void;
+  onUpdateCard?: (event: PaymentEvent) => void;
+  onContactSupport?: (event: PaymentEvent) => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+const WORD: Record<PaymentStatus, string> = { paid: 'Paid', failed: 'Failed', pending: 'Pending', refunded: 'Refunded' };
+
+/**
+ * **Payment Alert** — one row per billing event: a 10px status dot (mint filled · apricot-deep ring
+ * · muted ring · muted filled), the title, the status in words · the meta, and the amount. Only a
+ * failed row is a button (`aria-expanded`, `aria-controls`, a chevron that turns); one open at a
+ * time, its panel (M3) showing the reason and Retry payment · Update card · Contact support.
+ */
+function PaymentAlertView(props: PaymentAlertProps) {
+  const config = resolveConfig(PAYMENT_PRESETS, props.preset, props.config);
+  const issues = validatePaymentAlert(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status, result, operations, reload, initial, onPaid, onUpdateCard, onContactSupport, onScene, testID,
+}: Omit<PaymentAlertProps, 'config'> & { config: PaymentAlertSettings }) {
+  const runner = useOperationRunner();
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send, ref] = useSeededReducer(
+    reducePaymentAlert,
+    () => initialPaymentAlert(config, initial ?? (config.ship ? paymentSeed(config, config.ship) : {})),
+    key,
+    () => config.events.forEach((_, i) => runner.cancel(`retry-p${i}`)),
+  );
+  const pattern = usePatternStatus(status ?? (config.events.length ? 'ready' : 'empty'), reload);
+  const v = paymentView(state);
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+  const retry = useDefaultOperation(operations?.retry, ONBOARDING_TIMING.change, () => result === 'error');
+  const run = (id: string) => {
+    const index = ref.current.rows.findIndex(r => r.id === id);
+    const e = config.events[index]!;
+    runOutcome(runner, `retry-${id}`, retry, { index, title: e.title, amount: e.amount }, {
+      ok: () => { send({ type: 'paid', id }); onPaid?.(e); },
+      fail: () => send({ type: 'declined', id }),
+    });
+  };
+  useEffect(() => { ref.current.rows.forEach(r => { if (r.busy) run(r.id); }); }, [key]);
+
+  return (
+    <OnboardingCard
+      testID={testID}
+      header={config}
+      copy={config}
+      density={density}
+      status={pattern.status}
+      onRetry={pattern.retry}
+      onEmptyAction={pattern.retry}
+      chip={v.chip}>
+      <Box>
+        <Box role="list" aria-label={config.title}>
+          {state.rows.map((row, i) => (
+            <EventRow
+              key={row.id}
+              row={row}
+              event={config.events[i]!}
+              open={state.open === row.id && row.status === 'failed'}
+              last={i === state.rows.length - 1}
+              onToggle={() => send({ type: 'toggle', id: row.id })}
+              onRetry={() => { if (ref.current.rows.find(r => r.id === row.id)?.busy) return; send({ type: 'retry', id: row.id }); run(row.id); }}
+              onUpdateCard={() => { send({ type: 'note', note: 'Opening billing settings to update your card…' }); onUpdateCard?.(config.events[i]!); }}
+              onContact={() => { send({ type: 'note', note: 'Support chat opened. Average reply in 4 minutes.' }); onContactSupport?.(config.events[i]!); }}
+            />
+          ))}
+        </Box>
+        <Box role="status" aria-live="polite">
+          {state.note ? <Text variant="caption" color="textSecondary" style={{ fontSize: 12, paddingTop: 10 }}>{state.note}</Text> : null}
+        </Box>
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+function StatusDot({ status }: { status: PaymentStatus }) {
+  const { colors } = useDs();
+  const look = status === 'paid' ? { backgroundColor: colors.status.executed }
+    : status === 'failed' ? { backgroundColor: colors.surface1, borderWidth: 3, borderColor: colors.status.needsUser }
+    : status === 'pending' ? { backgroundColor: colors.surface1, borderWidth: 1.5, borderColor: colors.textSecondary }
+    : { backgroundColor: colors.textSecondary };
+  return <Box width={10} height={10} radius="pill" aria-hidden style={{ flexShrink: 0, ...look }} />;
+}
+
+function EventRow({ row, event, open, last, onToggle, onRetry, onUpdateCard, onContact }: {
+  row: PaymentRow; event: PaymentEvent; open: boolean; last: boolean;
+  onToggle: () => void; onRetry: () => void; onUpdateCard: () => void; onContact: () => void;
+}) {
+  const { colors, density } = useDs();
+  const turn = useTween(open ? 1 : 0);
+  const failed = row.status === 'failed';
+  const word = failed && row.retried ? 'Failed · retry declined' : WORD[row.status];
+  const ink = row.status === 'paid' ? colors.status.executed : failed ? colors.status.needsUser : colors.textSecondary;
+  const amount = money(event, row.status);
+  const reason = row.retried ? 'Declined again · try another card' : event.reason;
+  const panelId = `pa-panel-${row.id}-${event.title.replace(/\W/g, '').slice(0, 24)}`;
+  const text = (
+    <Box flex={1} gap="s1" style={{ minWidth: 0 }}>
+      <Box row wrap align="center" gap="s2">
+        <Text variant="caption" color="textPrimary" style={{ fontSize: 13, fontWeight: '600' }}>{event.title}</Text>
+        {row.status === 'refunded' ? <PlainChip>Refund</PlainChip> : null}
+      </Box>
+      <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>
+        <Text variant="caption" style={{ fontSize: 12, color: ink, fontWeight: failed ? '700' : '400' }}>{word}</Text>
+        {` · ${event.meta}`}
+      </Text>
+    </Box>
+  );
+  return (
+    <Box role="listitem" style={{ borderBottomWidth: last ? 0 : 1, borderBottomColor: colors.hairline }}>
+      {failed ? (
+        <>
+          <Pressable
+            onPress={onToggle}
+            aria-expanded={open}
+            aria-controls={panelId}
+            aria-label={`${event.title}, ${word}, ${amount}`}
+            row
+            align="center"
+            justify="flex-start"
+            gap="s3"
+            style={{ marginHorizontal: -8, marginVertical: 4, padding: 8, minHeight: density.rowH, borderRadius: blockRadii.inset }}>
+            <StatusDot status={row.status} />
+            {text}
+            <Text variant="caption" numeric color="textPrimary" style={{ fontSize: 13, fontWeight: '600' }}>{amount}</Text>
+            <MotionView aria-hidden style={{ transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] }) }] }}>
+              <Icon name="chev-d" size={16} color={colors.textSecondary} />
+            </MotionView>
+          </Pressable>
+          <ExpandRegion open={open} nativeID={panelId} role="region" label={`${event.title} details`}>
+            <Box gap="s2" style={{ paddingTop: 2, paddingBottom: 14, paddingLeft: 22 }}>
+              <Box row align="center" gap="s1" alignSelf="flex-start" height={24} radius="pill" style={{ paddingHorizontal: 10, backgroundColor: colors.statusBg.needsUser }}>
+                <Icon name="alert" size={13} color={colors.status.needsUser} />
+                <Text variant="caption" style={{ fontSize: 12, fontWeight: '700', color: colors.status.needsUser }}>{reason}</Text>
+              </Box>
+              <Box row wrap gap="s2">
+                <Button variant="primary" size="small" busy={row.busy} onPress={onRetry} style={{ minWidth: 100, minHeight: density.controlH }}>
+                  {row.busy ? 'Retrying…' : 'Retry payment'}
+                </Button>
+                <Button variant="secondary" size="small" onPress={onUpdateCard} style={{ minHeight: density.controlH }}>Update card</Button>
+                <Button variant="secondary" size="small" onPress={onContact} style={{ minHeight: density.controlH }}>Contact support</Button>
+              </Box>
+            </Box>
+          </ExpandRegion>
+        </>
+      ) : (
+        <Box row align="center" gap="s3" style={{ minHeight: density.rowH, paddingVertical: 12 }}>
+          <StatusDot status={row.status} />
+          {text}
+          <Text variant="caption" numeric color="textPrimary" style={{ fontSize: 13, fontWeight: '600', paddingRight: 24 }}>{amount}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/** PaymentAlert, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const PaymentAlert = guarded(PaymentAlertView, PAYMENT_PRESETS, 'PaymentAlert');

package/src/components/onboarding/payment-alert/contract.ts

@@ -0,0 +1,34 @@
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Payment Alert (batch 3 §3.8)** — billing events; only a failed one expands, to its reason and
+ * recovery (Retry payment · Update card · Contact support). A failure is a 3px apricot-deep ring and
+ * bold "Failed" — no red.
+ */
+
+export type PaymentStatus = 'paid' | 'failed' | 'pending' | 'refunded';
+export type PaymentEvent = { status: PaymentStatus; title: string; meta: string; amount: number; currency: string; reason: string };
+
+export const PAYMENT_SCENES = ['default', 'expanded', 'collapsed', 'retrying', 'paid', 'loading', 'empty', 'error'] as const;
+export type PaymentScene = (typeof PAYMENT_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const PAYMENT_IN_FLIGHT: readonly string[] = ['retrying'];
+
+export type PaymentAlertSettings = HeaderConfig & LoadCopy & {
+  events: PaymentEvent[];
+  /** Demo-only: the scene this case ships in (B2-9); "" ships at rest. */
+  ship?: PaymentScene | '';
+};
+
+export const PAYMENT_PRESETS = presetsJson as unknown as PresetsFile<PaymentAlertSettings>;
+
+export function validatePaymentAlert(c: PaymentAlertSettings): OnboardingIssue[] {
+  if (!Array.isArray(c.events)) return [{ path: 'events', message: 'events must be a list.' }];
+  const issues: OnboardingIssue[] = [];
+  c.events.forEach((e, i) => {
+    if (!['paid', 'failed', 'pending', 'refunded'].includes(e.status)) issues.push({ path: `events[${i}].status`, message: `“${e.status}” is not paid, failed, pending or refunded.` });
+    if (typeof e.amount !== 'number' || !Number.isFinite(e.amount)) issues.push({ path: `events[${i}].amount`, message: 'amount must be a number.' });
+  });
+  return issues;
+}

package/src/components/onboarding/payment-alert/engine.ts

@@ -0,0 +1,60 @@
+import type { StateChipTone } from '../../../ds';
+import type { PaymentAlertSettings, PaymentEvent, PaymentScene, PaymentStatus } from './contract';
+
+/** **The Payment Alert engine** — pure: each event's status, the one open row, and retries. */
+
+export type PaymentRow = { id: string; status: PaymentStatus; busy: boolean; retried: boolean };
+export type PaymentAlertState = { rows: PaymentRow[]; open: string | null; note: string };
+export type PaymentAlertSeed = Partial<PaymentAlertState>;
+export type PaymentAlertAction =
+  | { type: 'toggle'; id: string } | { type: 'retry'; id: string } | { type: 'paid'; id: string } | { type: 'declined'; id: string }
+  | { type: 'note'; note: string };
+
+export function initialPaymentAlert(c: PaymentAlertSettings, seed: PaymentAlertSeed = {}): PaymentAlertState {
+  return {
+    rows: seed.rows ?? c.events.map((e, i) => ({ id: `p${i}`, status: e.status, busy: false, retried: false })),
+    open: seed.open ?? null,
+    note: seed.note ?? '',
+  };
+}
+
+export function paymentSeed(c: PaymentAlertSettings, scene: PaymentScene): PaymentAlertSeed {
+  const rows = initialPaymentAlert(c).rows;
+  const f = rows.find(r => r.status === 'failed');
+  if (!f) return {};
+  if (scene === 'expanded') return { open: f.id };
+  if (scene === 'retrying') return { open: f.id, rows: rows.map(r => (r.id === f.id ? { ...r, busy: true } : r)) };
+  if (scene === 'paid') return { rows: rows.map(r => (r.id === f.id ? { ...r, status: 'paid' } : r)) };
+  return {};
+}
+
+const patch = (s: PaymentAlertState, id: string, f: (r: PaymentRow) => PaymentRow) => ({ ...s, rows: s.rows.map(r => (r.id === id ? f(r) : r)) });
+
+export function reducePaymentAlert(s: PaymentAlertState, a: PaymentAlertAction): PaymentAlertState {
+  switch (a.type) {
+    case 'toggle': {
+      const r = s.rows.find(x => x.id === a.id);
+      return r?.status === 'failed' ? { ...s, open: s.open === a.id ? null : a.id } : s;
+    }
+    case 'retry': return patch(s, a.id, r => (r.status === 'failed' && !r.busy ? { ...r, busy: true } : r));
+    case 'paid': return { ...patch(s, a.id, r => (r.busy ? { ...r, busy: false, status: 'paid' } : r)), open: s.open === a.id ? null : s.open };
+    case 'declined': return patch(s, a.id, r => (r.busy ? { ...r, busy: false, retried: true } : r));
+    case 'note': return { ...s, note: a.note };
+  }
+}
+
+/** "$144.00", "−$40.00" for a refund. */
+export function money(e: Pick<PaymentEvent, 'amount' | 'currency'>, status: PaymentStatus): string {
+  const v = Number(e.amount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  return `${status === 'refunded' ? '−' : ''}${e.currency || '$'}${v}`;
+}
+
+export function paymentView(s: PaymentAlertState) {
+  const failed = s.rows.filter(r => r.status === 'failed').length;
+  const pending = s.rows.filter(r => r.status === 'pending').length;
+  const chip: { tone: StateChipTone; label: string; dot: boolean } = failed ? { tone: 'attention', label: `${failed} failed`, dot: true }
+    : pending ? { tone: 'neutral', label: `${pending} pending`, dot: true }
+    : { tone: 'success', label: 'All paid', dot: true };
+  const scene: PaymentScene = s.rows.some(r => r.busy) ? 'retrying' : s.open ? 'expanded' : failed ? 'collapsed' : 'paid';
+  return { chip, scene };
+}

package/src/components/onboarding/payment-alert/index.ts

@@ -0,0 +1,9 @@
+export {
+  PAYMENT_IN_FLIGHT, PAYMENT_PRESETS, PAYMENT_SCENES, validatePaymentAlert,
+  type PaymentAlertSettings, type PaymentEvent, type PaymentScene, type PaymentStatus,
+} from './contract';
+export {
+  initialPaymentAlert, money as paymentMoney, paymentSeed, paymentView, reducePaymentAlert,
+  type PaymentAlertAction, type PaymentAlertSeed, type PaymentAlertState, type PaymentRow,
+} from './engine';
+export { PaymentAlert, type PaymentAlertOperations, type PaymentAlertProps } from './PaymentAlertView';

package/src/components/onboarding/payment-alert/presets.json

@@ -0,0 +1,199 @@
+{
+  "component": "payment-alert",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "data",
+    "icon": "receipt",
+    "title": "Billing activity",
+    "subtitle": "Team plan · Visa ••42",
+    "ship": "expanded",
+    "events": [
+      {
+        "status": "failed",
+        "title": "September invoice",
+        "meta": "Visa ••42 · 24 Sep",
+        "amount": 144,
+        "reason": "Card declined · insufficient funds",
+        "currency": "$"
+      },
+      {
+        "status": "paid",
+        "title": "August invoice",
+        "meta": "Visa ••42 · 24 Aug",
+        "amount": 144,
+        "reason": "",
+        "currency": "$"
+      },
+      {
+        "status": "paid",
+        "title": "July invoice",
+        "meta": "Visa ••42 · 24 Jul",
+        "amount": 132,
+        "reason": "",
+        "currency": "$"
+      },
+      {
+        "status": "paid",
+        "title": "June invoice",
+        "meta": "Visa ••42 · 24 Jun",
+        "amount": 132,
+        "reason": "",
+        "currency": "$"
+      }
+    ],
+    "emptyTitle": "No billing activity yet",
+    "emptyBody": "Invoices and payments will appear here.",
+    "emptyCta": "View plans"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "data",
+      "icon": "cash",
+      "title": "Payouts",
+      "subtitle": "To Current account ••7781",
+      "ship": "",
+      "events": [
+        {
+          "status": "paid",
+          "title": "Weekly payout",
+          "meta": "23 Sep · 42 orders",
+          "amount": 2380.5,
+          "reason": "",
+          "currency": "$"
+        },
+        {
+          "status": "pending",
+          "title": "Weekly payout",
+          "meta": "Arrives 30 Sep · 38 orders",
+          "amount": 1964,
+          "reason": "",
+          "currency": "$"
+        },
+        {
+          "status": "paid",
+          "title": "Weekly payout",
+          "meta": "16 Sep · 51 orders",
+          "amount": 2912.25,
+          "reason": "",
+          "currency": "$"
+        }
+      ]
+    },
+    "case3": {
+      "type": "schedule",
+      "icon": "building",
+      "title": "Patient billing",
+      "subtitle": "Riverside Clinic",
+      "ship": "",
+      "events": [
+        {
+          "status": "paid",
+          "title": "Check-up · Maria Lopez",
+          "meta": "Card ••18 · 20 Sep",
+          "amount": 85,
+          "reason": "",
+          "currency": "$"
+        },
+        {
+          "status": "refunded",
+          "title": "Cancelled visit · Tom Reed",
+          "meta": "Card ••05 · 18 Sep",
+          "amount": 40,
+          "reason": "",
+          "currency": "$"
+        },
+        {
+          "status": "failed",
+          "title": "Physio · Ken Ito",
+          "meta": "Card ••33 · 17 Sep",
+          "amount": 120,
+          "reason": "Card declined · contact the bank",
+          "currency": "$"
+        }
+      ]
+    },
+    "case4": {
+      "type": "action",
+      "icon": "code",
+      "title": "Usage charges",
+      "subtitle": "API · Pro tier",
+      "ship": "retrying",
+      "events": [
+        {
+          "status": "failed",
+          "title": "September usage",
+          "meta": "Mastercard ••09 · 24 Sep",
+          "amount": 412.8,
+          "reason": "Card expired · 08/26",
+          "currency": "$"
+        }
+      ]
+    },
+    "case5": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Assistant purchases",
+      "subtitle": "Spending limit $200 a month",
+      "ship": "",
+      "events": [
+        {
+          "status": "paid",
+          "title": "Assistant bought: domain",
+          "meta": "northwind.shop · 1 year · 22 Sep",
+          "amount": 12,
+          "reason": "",
+          "currency": "$"
+        },
+        {
+          "status": "pending",
+          "title": "Assistant bought: office supplies",
+          "meta": "Staples · awaiting confirmation",
+          "amount": 48.2,
+          "reason": "",
+          "currency": "$"
+        },
+        {
+          "status": "paid",
+          "title": "Assistant bought: train ticket",
+          "meta": "London → Leeds · 19 Sep",
+          "amount": 64,
+          "reason": "",
+          "currency": "$"
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS",
+      "title": "Subscription",
+      "scenario": "Three invoices paid and one failed. The failed row ships expanded."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Marketplace",
+      "title": "Payouts",
+      "scenario": "A seller’s weekly payouts, one of them pending."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Clinic",
+      "title": "Patient billing",
+      "scenario": "A paid visit, a refund and a failed card."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Platform",
+      "title": "Usage charges",
+      "scenario": "A charge failed because the card expired. The board ships mid-retry."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Agent purchases",
+      "scenario": "Purchases the assistant made. Two are paid and one is pending."
+    }
+  }
+}