@appinternalleads/ui 0.2.0

package/src/components/onboarding/shared/insight.ts

@@ -0,0 +1,182 @@
+/**
+ * **Batch 6 — the arithmetic the insight components share** (design_handoff_insights_batch6,
+ * 2026-09-26). Pure: no React, so engines and tests share it (docs/COMPONENT-RULES.md R4). The
+ * drawn parts are `./insight-parts`; M15's timing is `./m15`.
+ */
+
+/* ── Stars ─────────────────────────────────────────────────────────────────────────────── */
+
+export type StarFill = 'full' | 'half' | 'empty';
+
+/** Five stars for a rating out of `max` (5): half at ≥ .25 of a star, full at ≥ .75. */
+export function starFills(value: number, max = 5): StarFill[] {
+  const v = Number.isFinite(value) ? (value / (max || 5)) * 5 : 0;
+  return [0, 1, 2, 3, 4].map(i => {
+    const part = v - i;
+    return part >= 0.75 ? 'full' : part >= 0.25 ? 'half' : 'empty';
+  });
+}
+
+/** "4 out of 5 stars", "4.5 out of 5 stars" — the words a screen reader hears for the stars. */
+export function starsLabel(value: number, max = 5): string {
+  const v = Math.round(((value / (max || 5)) * 5) * 2) / 2;
+  return `${v} out of 5 stars`;
+}
+
+/* ── Bands ─────────────────────────────────────────────────────────────────────────────── */
+
+export type BandTone = 'mint' | 'plain' | 'apricot';
+export type Band = { min: number; label: string; tone: BandTone };
+
+/**
+ * The default bands, as a share of `max`: ≥ 90% Excellent (mint), ≥ 80% Great, ≥ 60% Good, below
+ * that Needs work (apricot) — Score Summary's 4.5 / 4 / 3 out of 5.
+ */
+export function defaultBands(max: number, veryGood = 'Great'): Band[] {
+  return [
+    { min: 0.9 * max, label: 'Excellent', tone: 'mint' },
+    { min: 0.8 * max, label: veryGood, tone: 'plain' },
+    { min: 0.6 * max, label: 'Good', tone: 'plain' },
+    { min: -Infinity, label: 'Needs work', tone: 'apricot' },
+  ];
+}
+
+/** The first band whose `min` the value reaches (bands sorted high to low); the last one otherwise. */
+export function bandOf(value: number, bands: Band[]): Band {
+  const sorted = [...bands].sort((a, b) => b.min - a.min);
+  return sorted.find(b => value >= b.min) ?? sorted[sorted.length - 1] ?? { min: 0, label: '', tone: 'plain' };
+}
+
+/* ── Numbers ───────────────────────────────────────────────────────────────────────────── */
+
+/** One decimal when the source has one ("4.7", "9.8"), none otherwise ("87", "42"). */
+export function decimalsOf(...values: number[]): number {
+  return values.some(v => Number.isFinite(v) && Math.round(v) !== v) ? 1 : 0;
+}
+export const fixed = (v: number, digits: number) => (Number.isFinite(v) ? v.toFixed(digits) : '0');
+
+/* ── Quantiles and tiers ───────────────────────────────────────────────────────────────── */
+
+/** The value at share `p` of a sorted list (the prototype's floor index). */
+export function quantile(sorted: number[], p: number): number {
+  return sorted.length ? sorted[Math.min(sorted.length - 1, Math.floor(p * sorted.length))]! : 0;
+}
+
+/**
+ * **Tag Cloud tiers** — 5 quantile bins by rank, heaviest first (tier 5 = 24px). With fewer than
+ * five words only the top tiers are used: the heaviest is 5, the next 4, and so on.
+ */
+export function tiersOf(words: { id: string; weight: number }[]): Record<string, number> {
+  const s = [...words].sort((a, b) => b.weight - a.weight);
+  const n = s.length;
+  const out: Record<string, number> = {};
+  s.forEach((w, i) => {
+    const r = n - 1 - i;
+    out[w.id] = n < 5 ? 5 - i : 1 + Math.min(4, Math.floor((r / n) * 5));
+  });
+  return out;
+}
+
+/** FNV-1a, 32-bit — the deterministic shuffle key for a word id. */
+export function fnv(s: string): number {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 0x01000193) >>> 0;
+  }
+  return h >>> 0;
+}
+
+/* ── Radar geometry (Criteria Spider) ──────────────────────────────────────────────────── */
+
+export const RADAR = { w: 400, h: 330, cx: 200, cy: 165, r: 112, rings: 5 } as const;
+
+/** Axis i of n, at radius r: clockwise from 12 o'clock. */
+export function radarPoint(i: number, n: number, r: number): [number, number] {
+  const a = -Math.PI / 2 + (i * 2 * Math.PI) / Math.max(1, n);
+  return [RADAR.cx + r * Math.cos(a), RADAR.cy + r * Math.sin(a)];
+}
+
+/** The polygon's vertices for values on a 0…max scale (negative values sit at the centre). */
+export function radarVertices(values: number[], max: number): [number, number][] {
+  return values.map((v, i) => radarPoint(i, values.length, (RADAR.r * Math.max(0, Math.min(v, max))) / (max || 1)));
+}
+
+/** Where an axis label sits, in % of the viewBox, and how it anchors (start / middle / end by angle). */
+export function radarLabel(i: number, n: number): { left: number; top: number; anchor: 'start' | 'middle' | 'end' } {
+  const [x, y] = radarPoint(i, n, RADAR.r + 18);
+  const dx = x - RADAR.cx;
+  const anchor = Math.abs(dx) < 8 ? 'middle' : dx > 0 ? 'start' : 'end';
+  return { left: (x / RADAR.w) * 100, top: (y / RADAR.h) * 100, anchor };
+}
+
+/* ── Dates (Activity Heatmap) — UTC, YYYY-MM-DD ────────────────────────────────────────── */
+
+export const DAY_MS = 864e5;
+export const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const;
+export const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] as const;
+
+export const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+/** "2026-03-14" → ms at UTC midnight; NaN when it is not a date. */
+export function parseDay(s: string): number {
+  if (typeof s !== 'string' || !ISO_DATE.test(s)) return NaN;
+  const [y, m, d] = s.split('-').map(Number) as [number, number, number];
+  const t = Date.UTC(y, m - 1, d);
+  return new Date(t).getUTCDate() === d ? t : NaN;
+}
+export function dayKey(t: number): string {
+  const d = new Date(t);
+  return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`;
+}
+/** 0 = Monday … 6 = Sunday. */
+export const weekday = (t: number) => (new Date(t).getUTCDay() + 6) % 7;
+/** "Sat, Mar 14" */
+export const longDay = (t: number) => `${WEEKDAYS[weekday(t)]}, ${MONTHS[new Date(t).getUTCMonth()]} ${new Date(t).getUTCDate()}`;
+/** "Mar 14" */
+export const shortDay = (t: number) => `${MONTHS[new Date(t).getUTCMonth()]} ${new Date(t).getUTCDate()}`;
+/** Today in UTC, as YYYY-MM-DD. */
+export const todayKey = () => dayKey(Date.now());
+
+/* ── Plural nouns ──────────────────────────────────────────────────────────────────────── */
+
+/** "1 review", "22 reviews" — `one` when given, else the noun without its trailing s. */
+export function countOf(n: number, noun: string, one?: string): string {
+  const single = one ?? noun.replace(/s$/, '');
+  return `${Math.round(n).toLocaleString('en-US')} ${Math.round(n) === 1 ? single : noun}`;
+}
+
+/* ── Colour — the Heatmap ramp ─────────────────────────────────────────────────────────── */
+
+const toLin = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+const toGamma = (c: number) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);
+function hexRgb(hex: string): [number, number, number] {
+  const h = hex.replace('#', '');
+  const f = h.length === 3 ? h.split('').map(x => x + x).join('') : h;
+  return [0, 2, 4].map(i => parseInt(f.slice(i, i + 2), 16) / 255) as [number, number, number];
+}
+function rgbOklab([r, g, b]: [number, number, number]): [number, number, number] {
+  const [R, G, B] = [toLin(r), toLin(g), toLin(b)];
+  const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B);
+  const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B);
+  const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B);
+  return [0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s];
+}
+function oklabRgb([L, a, b]: [number, number, number]): [number, number, number] {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s]
+    .map(c => toGamma(Math.max(0, Math.min(1, c)))) as [number, number, number];
+}
+/**
+ * `color-mix(in oklab, a, b t)` — `t` of `b`. The handoff mixes in OKLCH; between a hue's soft and
+ * deep rungs (one hue, two lightnesses) OKLab gives the same ramp without hue interpolation.
+ */
+export function mixColor(a: string, b: string, t: number): string {
+  const A = rgbOklab(hexRgb(a)), B = rgbOklab(hexRgb(b));
+  const rgb = oklabRgb([A[0] + (B[0] - A[0]) * t, A[1] + (B[1] - A[1]) * t, A[2] + (B[2] - A[2]) * t]);
+  return `#${rgb.map(c => Math.round(c * 255).toString(16).padStart(2, '0')).join('')}`.toUpperCase();
+}
+/** The Heatmap's four levels: soft → deep at 20 / 45 / 70 / 100%. */
+export const RAMP_STOPS = [0.2, 0.45, 0.7, 1] as const;
+export const rampOf = (soft: string, deep: string) => RAMP_STOPS.map(t => mixColor(soft, deep, t));

package/src/components/onboarding/shared/m15.ts

@@ -0,0 +1,72 @@
+/**
+ * **M15 · Data reveal — the arithmetic** (batch 5 handoff, PRD §3). Pure: no React, so the engines
+ * and tests share it (docs/COMPONENT-RULES.md R4). The hooks and parts that run it are `./viz`.
+ *
+ * - Rows: opacity 0→1 and translateY −6→0 over 160ms; delay `min(i, 7) × 60ms` (rows past the 8th
+ *   land with the 8th).
+ * - Bars: scaleX 0→value over 600ms, starting when the row lands (delay + 160ms).
+ * - Funnel: 400ms per stage, stage i starting at i × 200ms.
+ * - Numbers count with their bar; tones cross-fade in after the count ends.
+ * - Easing everywhere: cubic-bezier(.2, 0, 0, 1).
+ */
+
+import { DATA_REVEAL } from '../../../tokens/profile';
+
+/** The token (`DATA_REVEAL`, tokens/profile) — M15's timings live with the other motion tokens. */
+export const M15 = DATA_REVEAL;
+
+/** cubic-bezier(.2, 0, 0, 1) — solved for t by bisection, as the prototype's `ease` does. */
+export function ease(p: number): number {
+  if (p <= 0) return 0;
+  if (p >= 1) return 1;
+  let lo = 0, hi = 1, t = p;
+  for (let i = 0; i < 24; i++) {
+    t = (lo + hi) / 2;
+    const x = 0.6 * (1 - t) * (1 - t) * t + t * t * t;   // x(t) for P1 = (.2, 0), P2 = (0, 1)
+    if (x < p) lo = t; else hi = t;
+  }
+  return 3 * (1 - t) * t * t + t * t * t;                  // y(t)
+}
+
+const clamp01 = (x: number) => (x < 0 ? 0 : x > 1 ? 1 : x);
+/** Eased progress of a step that starts at `start` and lasts `dur`, at time `t`. */
+export const progress = (t: number, start: number, dur: number) => ease(clamp01((t - start) / dur));
+
+export const rowDelay = (i: number) => Math.min(i, M15.cap) * M15.stepMs;
+/** A row's reveal: opacity and the drop, at time t. */
+export function rowReveal(i: number, t: number): { opacity: number; y: number } {
+  const p = progress(t, rowDelay(i), M15.rowMs);
+  return { opacity: p, y: -M15.dropPx * (1 - p) };
+}
+/** When a row's bar starts, and its fill progress at time t. */
+export const barStart = (i: number) => rowDelay(i) + M15.rowMs;
+export const barFill = (i: number, t: number) => progress(t, barStart(i), M15.fillMs);
+/** A tone (mint, apricot) fades in after its count ends. */
+export const toneIn = (endsAt: number, t: number) => progress(t, endsAt, M15.toneMs);
+/** When the whole reveal of n rows is over. */
+export const revealEnd = (n: number) => barStart(Math.max(n - 1, 0)) + M15.fillMs + M15.toneMs;
+
+/* Funnel cascade. */
+export const stageStart = (i: number) => i * M15.cascadeStepMs;
+export const stageFill = (i: number, t: number) => progress(t, stageStart(i), M15.cascadeMs);
+export const cascadeEnd = (n: number) => Math.max(n - 1, 0) * M15.cascadeStepMs + M15.cascadeMs;
+
+/* ── Figures — tabular, compact where the handoff says so ─────────────────────────────── */
+
+export function compactCurrency(v: number, currency = 'USD'): string {
+  try { return new Intl.NumberFormat('en-US', { style: 'currency', currency, notation: 'compact', maximumSignificantDigits: 3 }).format(v); }
+  catch { return `$${Math.round(v)}`; }
+}
+export function money(v: number, currency = 'USD'): string {
+  try { return new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 }).format(v); }
+  catch { return `$${Math.round(v)}`; }
+}
+export const grouped = (v: number) => Math.round(v).toLocaleString('en-US');
+/** Compact at 10,000 and above ("12K", "48.2K"), grouped below ("8,412"). */
+export function compactCount(v: number): string {
+  const r = Math.round(v);
+  if (Math.abs(r) < 10000) return grouped(r);
+  try { return new Intl.NumberFormat('en-US', { notation: 'compact', maximumSignificantDigits: 3 }).format(r); }
+  catch { return grouped(r); }
+}
+export const pct = (v: number, digits = 0) => `${v.toFixed(digits)}%`;

package/src/components/onboarding/shared/mock.ts

@@ -0,0 +1,110 @@
+import { abortableDelay, resolveLatency } from '../../../runtime/operations';
+
+/**
+ * **Every timer in the onboarding components lives here** — the prototypes' placeholder timings,
+ * and the deterministic mock operations built on them. Same constraints as ThresholdFlow's mock:
+ * latency is a number or a function of the call, failure is a predicate of the call, and there is
+ * no `Math.random` and no `Date.now`, so a test can prove a superseded attempt is discarded.
+ */
+export const ONBOARDING_TIMING = {
+  /** Calendar Sync: one connect. */
+  connect: 1200,
+  /** Brand Kit, Budget, Dashboard: save. Export: export. */
+  save: 1400,
+  /** Calendar Sync and Carousel: Continue → Done. */
+  finish: 900,
+  /** Retry from the load-error state: loading, then ready. */
+  reload: 900,
+  /** Upload and import progress: one tick. */
+  tick: 160,
+  /** Export Format: "Copied" before it reverts. */
+  copied: 1600,
+  /* Batch 3 (notification + verification) — the handoff's placeholder timings, verbatim. */
+  /** Achievement: claim. ID Verification: submit. */
+  claim: 1200,
+  /** Password Expiry: change. Payment Alert: retry payment. */
+  change: 1300,
+  /** File Shared: one download. Queue Status: one job. */
+  download: 1400,
+  /** ID Verification: one upload tick of 15%. */
+  uploadTick: 180,
+  /** ID Verification: the quality checks. */
+  checks: 900,
+  /** Floating: a toast without an action, before it dismisses itself. */
+  toast: 6000,
+  /** Receipt Printer: the host's print. Shorter than the paper's feed, so a failure lands mid-feed. */
+  print: 900,
+} as const;
+
+export type OnboardingOutcome = { ok: true } | { ok: false; message?: string };
+
+/** One boundary operation: a request in, an outcome out, abortable. */
+export type OnboardingOperation<Req> = (req: Req, ctx: { signal: AbortSignal }) => Promise<OnboardingOutcome>;
+
+export type MockOperationOptions<Req> = {
+  latencyMs?: number | ((req: Req, callIndex: number) => number);
+  /** Fail this call. Deterministic by construction — a function of the call. */
+  fail?: (req: Req, callIndex: number) => boolean | string;
+  onCall?: (req: Req, callIndex: number) => void;
+};
+
+/** A deterministic mock of one operation. `fail` returning a string makes that the message. */
+export function createMockOperation<Req>(opts: MockOperationOptions<Req> = {}): OnboardingOperation<Req> {
+  let calls = 0;
+  return async (req, { signal }) => {
+    const callIndex = calls++;
+    opts.onCall?.(req, callIndex);
+    await abortableDelay(resolveLatency(opts.latencyMs, req, callIndex), signal);
+    const failed = opts.fail?.(req, callIndex);
+    return failed ? { ok: false, ...(typeof failed === 'string' ? { message: failed } : {}) } : { ok: true };
+  };
+}
+
+/**
+ * **A progress stream** — upload or import. `onProgress(fraction)` is called every `tickMs` with a
+ * step of `step`, then the outcome resolves. Deterministic: the same options always produce the
+ * same sequence.
+ */
+export type ProgressOperation<Req> = (
+  req: Req,
+  ctx: { signal: AbortSignal; onProgress: (fraction: number) => void },
+) => Promise<OnboardingOutcome>;
+
+export function createMockProgressOperation<Req>(opts: {
+  tickMs?: number;
+  step?: number;
+  fail?: (req: Req, callIndex: number) => boolean | string;
+  /** Where a failing run stops (0–1). Default 1: it runs to the end, then fails — the prototype. */
+  failAt?: number;
+  onCall?: (req: Req, callIndex: number) => void;
+} = {}): ProgressOperation<Req> {
+  let calls = 0;
+  return async (req, { signal, onProgress }) => {
+    const callIndex = calls++;
+    opts.onCall?.(req, callIndex);
+    const step = opts.step ?? 0.09;
+    let p = 0;
+    while (p < 1) {
+      await abortableDelay(opts.tickMs ?? ONBOARDING_TIMING.tick, signal);
+      p = Math.min(1, p + step);
+      const failed = opts.fail?.(req, callIndex);
+      if (failed && p >= (opts.failAt ?? 1)) return { ok: false, ...(typeof failed === 'string' ? { message: failed } : {}) };
+      onProgress(p);
+    }
+    return { ok: true };
+  };
+}
+
+/** The load that Retry runs from the load-error state — resolves after `reload`. */
+export const mockReload = createMockOperation<void>({ latencyMs: ONBOARDING_TIMING.reload });
+
+/**
+ * **An operation that never settles** — it only ends when aborted. For a preview or a visual test
+ * that must hold an in-flight scene (Saving…, Connecting…, Importing… 64%) still, rather than race
+ * a timer to the screenshot.
+ */
+export function holdOperation<Req = unknown, Res = OnboardingOutcome>(): (req: Req, ctx: { signal: AbortSignal }) => Promise<Res> {
+  return (_req, { signal }) => new Promise<Res>((_, reject) => {
+    signal.addEventListener('abort', () => reject(new DOMException('Aborted', 'AbortError')), { once: true });
+  });
+}

package/src/components/onboarding/shared/parts.tsx

@@ -0,0 +1,307 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { Animated, Platform, View, type ViewProps } from 'react-native';
+import { Box, Icon, Input, MotionView, Text, easingFor, useBlockMotion, useLoop, useSwap, useTick, useTween, type IconName } from '../../../core';
+import { Button, COPIED_MS, IconButton } from '../../../ds';
+import { HUE, blockRadii, focusRingFor, hueForType, useDs, type DataType } from '../../../tokens';
+
+/**
+ * **Row parts the onboarding components share** — each is a composition of existing blocks, named
+ * once so fifteen components draw them the same way.
+ */
+
+/**
+ * A ghost action with the M8 lifecycle: "Configure" → "Configuring…" (busy: `aria-busy`, the well
+ * ground, scale .98). The accessible name says which row it belongs to.
+ */
+export function BusyGhost({
+  label, busyLabel, busy = false, onPress, name, disabled,
+}: { label: string; busyLabel: string; busy?: boolean; onPress: () => void; name: string; disabled?: boolean }) {
+  const { colors } = useDs();
+  return (
+    <Button
+      variant="secondary"
+      size="small"
+      busy={busy}
+      disabled={disabled}
+      onPress={onPress}
+      aria-label={`${busy ? busyLabel : label}: ${name}`}
+      style={busy ? { backgroundColor: colors.surfaceSunken, transform: [{ scale: 0.98 }] } : undefined}>
+      {busy ? busyLabel : label}
+    </Button>
+  );
+}
+
+/** A mint check in a circle — "tried", "verified". Decorative: the words beside it carry the state. */
+export function MintCheck({ size = 24 }: { size?: number }) {
+  const { colors } = useDs();
+  return (
+    <Box width={size} height={size} radius="pill" align="center" justify="center" aria-hidden style={{ backgroundColor: colors.statusBg.executed }}>
+      <Icon name="tick" size={Math.round(size * 0.55)} color={colors.status.executed} />
+    </Box>
+  );
+}
+
+/** A plain D1 chip — ink on line-soft. "New", "Popular", "Current", a count. Never coloured. */
+export function PlainChip({ children, height = 24, dashed = false }: { children: string; height?: number; dashed?: boolean }) {
+  const { colors } = useDs();
+  return (
+    <Box
+      row
+      align="center"
+      alignSelf="flex-start"
+      height={height}
+      radius="pill"
+      style={{
+        paddingHorizontal: height < 24 ? 8 : 10,
+        backgroundColor: dashed ? colors.surface1 : colors.band,
+        ...(dashed ? { borderWidth: 1, borderStyle: 'dashed', borderColor: colors.hairlineStrong } : null),
+      }}>
+      <Text variant="caption" numeric numberOfLines={1} style={{ fontSize: height < 24 ? 11 : 12, fontWeight: '600', color: dashed ? colors.textSecondary : colors.textPrimary }}>
+        {children}
+      </Text>
+    </Box>
+  );
+}
+
+/** M4: one slot whose content cross-fades when `slotKey` changes; the layout never holds two. */
+export function Slot({ slotKey, children, minWidth, align = 'flex-end' }: { slotKey: string; children: ReactNode; minWidth?: number; align?: 'flex-start' | 'flex-end' }) {
+  const fade = useSwap(slotKey);
+  return (
+    <MotionView style={{ opacity: fade, minWidth, flexDirection: 'row', alignItems: 'center', justifyContent: align, gap: 8, flexWrap: 'wrap' }}>
+      {children}
+    </MotionView>
+  );
+}
+
+/** Visually hidden text — still read by a screen reader ("(opens in a new tab)"). */
+export function Hidden({ children }: { children: string }) {
+  return (
+    <Box style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', left: -10000 }}>
+      <Text>{children}</Text>
+    </Box>
+  );
+}
+
+/**
+ * **M5 for words as well as numbers** — "On", "2,410", "$29": the old value fades out while the new
+ * one fades in, in one cell; only the current value is read. Reduced motion: it simply changes.
+ */
+export function CrossFadeText({ value, style }: { value: string; style?: object }) {
+  const { previous, progress } = useTick(value);
+  return (
+    <Box style={{ alignSelf: 'flex-start' }}>
+      <MotionView style={{ opacity: progress }}><Text numeric style={style}>{value}</Text></MotionView>
+      {previous !== null ? (
+        <MotionView aria-hidden style={{ position: 'absolute', left: 0, top: 0, opacity: progress.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) }}>
+          <Text numeric style={style}>{previous}</Text>
+        </MotionView>
+      ) : null}
+    </Box>
+  );
+}
+
+/** react-native-web forwards pointer and focus events on a View; React Native's types do not list them. */
+type RevealProps = ViewProps & { onMouseEnter?: () => void; onMouseLeave?: () => void; onFocus?: () => void; onBlur?: () => void };
+const RevealView = View as unknown as React.ComponentType<RevealProps>;
+
+/**
+ * **A row whose actions appear on hover or focus-within** — so a keyboard user sees them the moment
+ * focus reaches the row. Touch has no hover, so on native they are always shown. `force` keeps them
+ * shown (a menu open from the row). The children receive whether to show them.
+ */
+export function RevealRow({ children, style, force = false, role }: { children: (reveal: boolean) => ReactNode; style?: ViewProps['style']; force?: boolean; role?: 'listitem' }) {
+  const [hover, setHover] = useState(false);
+  const [focus, setFocus] = useState(false);
+  const reveal = Platform.OS !== 'web' || hover || focus || force;
+  return (
+    <RevealView
+      role={role}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onFocus={() => setFocus(true)}
+      onBlur={() => setFocus(false)}
+      style={style}>
+      {children(reveal)}
+    </RevealView>
+  );
+}
+
+/* ── Batch 3 (notification + verification) ─────────────────────────────────────────────── */
+
+/**
+ * **The handoff's spinner — a 16px arc turning every 900ms.** It stops under reduced motion (the
+ * glyph stays, still). `label` makes it a named `status` ("Downloading Brief.pdf"); without one it
+ * is decoration beside its own words.
+ */
+export function Spinner({ size = 16, color, label }: { size?: number; color?: string; label?: string }) {
+  const { colors } = useDs();
+  const turn = useLoop({ duration: 900 });
+  return (
+    <MotionView
+      role={label ? 'status' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+      style={{ width: size, height: size, transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) }] }}>
+      <Icon name="spinner" size={size} color={color ?? colors.textPrimary} />
+    </MotionView>
+  );
+}
+
+/**
+ * **An icon tile in one of the handoff's grounds** — the hue of a data type (the default), or muted
+ * (`#F1EFE7` / muted ink: a locked hero, an "Up next" tile), or apricot / mint (a failed toast, a
+ * done step). `round` is the 50% circle a status mark uses. Always decoration: its row names it.
+ */
+export function HueTile({
+  icon, size = 32, type, tone = 'hue', round = false, glyph,
+}: { icon: IconName; size?: number; type?: DataType; tone?: 'hue' | 'muted' | 'apricot' | 'mint'; round?: boolean; glyph?: number }) {
+  const { colors } = useDs();
+  const hue = HUE[hueForType(type)];
+  const skin = tone === 'muted' ? { bg: colors.band, ink: colors.textSecondary }
+    : tone === 'apricot' ? { bg: colors.statusBg.needsUser, ink: colors.status.needsUser }
+    : tone === 'mint' ? { bg: colors.statusBg.executed, ink: colors.status.executed }
+    : { bg: hue.hs, ink: hue.hd };
+  return (
+    <Box width={size} height={size} align="center" justify="center" aria-hidden style={{ flexShrink: 0, backgroundColor: skin.bg, borderRadius: round ? size / 2 : blockRadii.tile }}>
+      <Icon name={icon} size={glyph ?? (size >= 48 ? 22 : size <= 24 ? 13 : 17)} color={skin.ink} />
+    </Box>
+  );
+}
+
+/** A status mark in a 24px circle — the mint check, the apricot "!". Decoration: the row says it in words. */
+export function StatusMark({ tone, size = 24 }: { tone: 'mint' | 'apricot'; size?: number }) {
+  return <HueTile icon={tone === 'mint' ? 'tick' : 'exclamation'} tone={tone} size={size} round glyph={Math.round(size * 0.55)} />;
+}
+
+/**
+ * **The read-only copy field (C7 of batch 3)** — a label, then a well with a real read-only input
+ * (focusable, selectable), an `aria-live` "Copied" (mint deep, 1600ms) and a 32px copy button. The
+ * coral ring sits on the wrapper while the input has focus (`:focus-within`). `onCopy` is the host's
+ * clipboard; on the web the browser's is used when it exists. A refused clipboard is not "Copied".
+ */
+export function CopyField({
+  label, value, copyLabel, mono = false, onCopy, nativeID,
+}: { label: string; value: string; copyLabel: string; mono?: boolean; onCopy?: (value: string) => void | Promise<void>; nativeID: string }) {
+  const { colors, density, fonts } = useDs();
+  const [focused, setFocused] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+  const copy = async () => {
+    const clip = (globalThis as { navigator?: { clipboard?: { writeText: (s: string) => Promise<void> } } }).navigator?.clipboard;
+    try {
+      if (onCopy) await onCopy(value);
+      else await clip?.writeText(value);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), COPIED_MS);
+  };
+  return (
+    <Box gap="s1">
+      <Text nativeID={`${nativeID}-label`} variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{label}</Text>
+      <Box
+        row
+        align="center"
+        gap="s1"
+        style={{
+          height: density.controlH, paddingLeft: 12, paddingRight: 2, borderRadius: blockRadii.inset, borderWidth: 1,
+          borderColor: focused ? colors.accentFill : colors.hairlineStrong, backgroundColor: colors.surfaceSunken,
+          boxShadow: focused ? focusRingFor(colors) : 'none',
+        }}>
+        <Box flex={1} style={{ minWidth: 0 }}>
+          <Input
+            nativeID={nativeID}
+            value={value}
+            onChangeText={() => {}}
+            readOnly
+            aria-labelledby={`${nativeID}-label`}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            /* The wrapper draws the focus ring (`:focus-within`); the field's own ring is switched off. */
+            style={{
+              boxShadow: 'none', backgroundColor: 'transparent', paddingHorizontal: 0, paddingVertical: 0, borderRadius: 0,
+              fontSize: 13, fontFamily: mono ? fonts.mono : fonts.sans, letterSpacing: mono ? 0.52 : 0,
+            }}
+          />
+        </Box>
+        <Box role="status" aria-live="polite">
+          <Text variant="caption" style={{ fontSize: 12, color: colors.status.executed }}>{copied ? 'Copied' : ''}</Text>
+        </Box>
+        <IconButton icon="copy" label={copyLabel} onPress={() => { void copy(); }} />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * **M3 expand / M14 collapse for a region that stays mounted** — the height eases between 0 and
+ * its measured size while the opacity follows (and `lift` px of travel, for a list row leaving);
+ * reduced motion jumps. Closed, it is `aria-hidden` and `inert` on the web, so nothing inside is
+ * focusable or read — a filtered-out row, a collapsed payment panel.
+ */
+export function ExpandRegion({
+  open, children, nativeID, role, label, labelledBy, lift = 0,
+}: {
+  open: boolean;
+  children: ReactNode;
+  nativeID?: string;
+  role?: 'region' | 'listitem';
+  label?: string;
+  labelledBy?: string;
+  /** Travel while closing — M14's −6px. */
+  lift?: number;
+}) {
+  const t = useTween(open ? 1 : 0);
+  const [height, setHeight] = useState<number | null>(null);
+  const body = useRef<View>(null);
+  useEffect(() => {
+    const el = body.current as unknown as { setAttribute?: (k: string, v: string) => void; removeAttribute?: (k: string) => void } | null;
+    if (!el?.setAttribute) return;
+    if (open) el.removeAttribute?.('inert');
+    else el.setAttribute('inert', '');
+  }, [open]);
+  return (
+    <MotionView
+      nativeID={nativeID}
+      role={role}
+      aria-label={label}
+      aria-labelledby={labelledBy}
+      aria-hidden={!open || undefined}
+      style={{
+        overflow: 'hidden',
+        opacity: t,
+        height: height === null ? (open ? undefined : 0) : t.interpolate({ inputRange: [0, 1], outputRange: [0, height] }),
+        ...(lift ? { transform: [{ translateY: t.interpolate({ inputRange: [0, 1], outputRange: [-lift, 0] }) }] } : null),
+      }}>
+      <View
+        ref={body}
+        style={{ pointerEvents: open ? 'auto' : 'none' }}
+        onLayout={e => {
+          const h = e.nativeEvent.layout.height;
+          if (h > 0 && h !== height) setHeight(h);
+        }}>
+        {children}
+      </View>
+    </MotionView>
+  );
+}
+
+/**
+ * **The 8px ink unread dot** — it fades out when the row is read: at `--motion-state` (160ms) in a
+ * filtered list, at `--motion-list` (240ms, M14) in an inbox. Opacity only, so reduced motion keeps
+ * the fade. Decoration: the row's name says "unread".
+ */
+export function UnreadDot({ on, speed = 'state' }: { on: boolean; speed?: 'state' | 'list' }) {
+  const { colors } = useDs();
+  const m = useBlockMotion();
+  const v = useRef(new Animated.Value(on ? 1 : 0)).current;
+  useEffect(() => {
+    const a = Animated.timing(v, { toValue: on ? 1 : 0, duration: m[speed], easing: easingFor(m), useNativeDriver: false });
+    a.start();
+    return () => a.stop();
+  }, [on]);
+  return <MotionView aria-hidden style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: colors.textPrimary, opacity: v }} />;
+}