@appinternalleads/ui 0.2.0

package/src/components/onboarding/shipping-update/presets.json

@@ -0,0 +1,204 @@
+{
+  "component": "shipping-update",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "schedule",
+    "icon": "truck",
+    "title": "Order #1042",
+    "subtitle": "Linen shirt, Canvas tote",
+    "trackLabel": "Tracking number",
+    "trackingNo": "1Z 999 AA1 01 2345 6784",
+    "status": "transit",
+    "currentIdx": 2,
+    "nodes": [
+      {
+        "label": "Ordered",
+        "date": "Mon 23 Sep"
+      },
+      {
+        "label": "Shipped",
+        "date": "Tue 24 Sep"
+      },
+      {
+        "label": "Out for delivery",
+        "date": "Today"
+      },
+      {
+        "label": "Delivered",
+        "date": "Expected today"
+      }
+    ],
+    "transitLabel": "In transit",
+    "deliveredLabel": "Delivered",
+    "timelineLabel": "Delivery progress",
+    "etaLine": "Arrives today by 18:00",
+    "deliveredLine": "Delivered today at 14:12 · left at front door",
+    "deliveredHint": "Signed for by Ana",
+    "updated": "12 min ago",
+    "delayTitle": "Delayed",
+    "delayBody": "Your parcel is held up in transit. We’ll send a new delivery date soon.",
+    "primaryLabel": "View order",
+    "emptyTitle": "No tracking yet",
+    "emptyBody": "Tracking appears once your order ships.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "action",
+      "icon": "refresh",
+      "title": "Return #R-311",
+      "subtitle": "Linen shirt · wrong size",
+      "trackingNo": "RT 4410 2291 08",
+      "ship": "delivered",
+      "nodes": [
+        {
+          "label": "Requested",
+          "date": "Thu 19 Sep"
+        },
+        {
+          "label": "Picked up",
+          "date": "Fri 20 Sep"
+        },
+        {
+          "label": "Received",
+          "date": "Mon 23 Sep"
+        },
+        {
+          "label": "Refunded",
+          "date": "Tue 24 Sep"
+        }
+      ],
+      "deliveredLabel": "Refunded",
+      "deliveredLine": "$48.00 refunded to Visa ••42",
+      "deliveredHint": "Refunds can take 3–5 days to show",
+      "primaryLabel": "View refund"
+    },
+    "case3": {
+      "type": "file",
+      "icon": "flask",
+      "title": "Blood test · J. Carter",
+      "subtitle": "Riverside Lab",
+      "trackLabel": "Sample ID",
+      "trackingNo": "RL-2026-09-4471",
+      "currentIdx": 1,
+      "nodes": [
+        {
+          "label": "Collected",
+          "date": "Today 08:40"
+        },
+        {
+          "label": "In lab",
+          "date": "Today 10:15"
+        },
+        {
+          "label": "Reviewed",
+          "date": "Expected tomorrow"
+        },
+        {
+          "label": "Results ready",
+          "date": "Expected tomorrow"
+        }
+      ],
+      "transitLabel": "In lab",
+      "deliveredLabel": "Results ready",
+      "etaLine": "Results expected tomorrow by 12:00",
+      "deliveredLine": "Results are in the patient portal",
+      "primaryLabel": "Open patient record",
+      "timelineLabel": "Sample progress"
+    },
+    "case4": {
+      "type": "action",
+      "icon": "laptop",
+      "title": "Laptop for Priya Nair",
+      "subtitle": "IT request #IT-882",
+      "trackingNo": "DHL 7730 1184 22",
+      "ship": "delayed",
+      "delayedIdx": 2,
+      "currentIdx": 2,
+      "nodes": [
+        {
+          "label": "Approved",
+          "date": "Mon 16 Sep"
+        },
+        {
+          "label": "Shipped",
+          "date": "Wed 18 Sep"
+        },
+        {
+          "label": "Customs",
+          "date": "Since Fri 20 Sep"
+        },
+        {
+          "label": "Delivered",
+          "date": "Was due Mon 23 Sep"
+        }
+      ],
+      "delayTitle": "Held at customs",
+      "delayBody": "Customs needs the commercial invoice. IT has sent it; expect an update within 24 hours.",
+      "primaryLabel": "View request"
+    },
+    "case5": {
+      "type": "file",
+      "icon": "doc",
+      "title": "Signed contract · Harbor Legal",
+      "subtitle": "Courier · original documents",
+      "trackingNo": "CX-55 8810 4",
+      "ship": "delivered",
+      "nodes": [
+        {
+          "label": "Sent",
+          "date": "Tue 17 Sep"
+        },
+        {
+          "label": "In transit",
+          "date": "Wed 18 Sep"
+        },
+        {
+          "label": "Signed",
+          "date": "Thu 19 Sep"
+        },
+        {
+          "label": "Returned",
+          "date": "Mon 23 Sep"
+        }
+      ],
+      "deliveredLabel": "Returned",
+      "deliveredLine": "Signed originals received by Finance",
+      "deliveredHint": "Filed in Contracts · 2026",
+      "primaryLabel": "View document"
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · E-commerce",
+      "title": "Order delivery",
+      "scenario": "An order is out for delivery."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · E-commerce",
+      "title": "Return",
+      "scenario": "A return has been received and refunded."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Clinic",
+      "title": "Lab sample",
+      "scenario": "A blood sample is in the lab."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · IT",
+      "title": "Hardware order",
+      "scenario": "A laptop is held at customs."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · Legal/Finance",
+      "title": "Document courier",
+      "scenario": "Signed originals are back with Finance."
+    }
+  }
+}

package/src/components/onboarding/status-page/StatusPageView.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useRef } from 'react';
+import type { TextInput } from 'react-native';
+import { Box, Input, MotionView, Select, Text, useBlockMotion, usePresence } from '../../../core';
+import { ActionMenu, Callout } from '../../../ds';
+import { 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 { Slot } from '../shared/parts';
+import { runOutcome, useDefaultOperation, usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { useOperationRunner } from '../../../runtime/operations';
+import { STATUS_PRESETS, validateStatusPage, type ServiceStatus, type StatusPageSettings } from './contract';
+import {
+  initialStatusPage, reduceStatusPage, statusSeed, statusView,
+  type ServiceRow, type StatusPageAction, type StatusPageSeed, type StatusPageState,
+} from './engine';
+import { guarded } from '../shared/guard';
+
+export type StatusPageOperations = { publish: OnboardingOperation<{ slug: string; services: { name: string; status: ServiceStatus }[] }> };
+
+export type StatusPageProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<StatusPageSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: StatusPageOperations;
+  reload?: OnboardingOperation<void>;
+  initial?: StatusPageSeed;
+  onPublish?: (page: { slug: string; services: { name: string; status: ServiceStatus }[] }) => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+const LABEL: Record<ServiceStatus, string> = { operational: 'Operational', degraded: 'Degraded', down: 'Down' };
+
+/**
+ * **Status Page** — the page address (`https://` … `.status.page`; invalid or taken is apricot and
+ * blocks Publish), then one row per service: a status dot (mint filled · apricot filled · apricot
+ * **ring** for down), the name and status in words ("Down" bold), a status select, and a ⋯ menu with
+ * Rename (inline; Enter saves, Esc cancels) and Remove (danger, with its consequence; M14).
+ */
+function StatusPageView(props: StatusPageProps) {
+  const config = resolveConfig(STATUS_PRESETS, props.preset, props.config);
+  const issues = validateStatusPage(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, onPublish, onScene, testID,
+}: Omit<StatusPageProps, 'config'> & { config: StatusPageSettings }) {
+  const { colors } = useDs();
+  const motion = useBlockMotion();
+  const runner = useOperationRunner();
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send, ref] = useSeededReducer(
+    reduceStatusPage,
+    () => initialStatusPage(config, initial ?? (config.ship ? statusSeed(config, config.ship) : {})),
+    key,
+    () => runner.cancel('publish'),
+  );
+  const pattern = usePatternStatus(status ?? (config.services.length ? 'ready' : 'empty'), reload);
+  const v = statusView(config, state);
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+  const publish = useDefaultOperation(operations?.publish, ONBOARDING_TIMING.save, () => result === 'error');
+  const pageOf = (s: StatusPageState) => ({ slug: s.slug, services: s.rows.filter(r => !r.leaving).map(r => ({ name: r.name, status: r.status })) });
+  const run = () => {
+    const page = pageOf(ref.current);
+    runOutcome(runner, 'publish', publish, page, { ok: () => { send({ type: 'published' }); onPublish?.(page); }, fail: () => send({ type: 'failed' }) });
+  };
+  useEffect(() => { if (ref.current.pub === 'publishing') run(); }, [key]);
+  const locked = state.pub === 'publishing';
+
+  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.canPublish, busy: locked, onPress: () => { if (!statusView(config, ref.current).canPublish) return; send({ type: 'publish' }); run(); } }}>
+      <Box gap="s3">
+        <Box gap="s1">
+          <FieldLabel>Page address</FieldLabel>
+          <Input
+            value={state.slug}
+            onChangeText={slug => send({ type: 'slug', slug })}
+            prefix="https://"
+            suffix=".status.page"
+            disabled={locked}
+            error={Boolean(v.urlError)}
+            aria-invalid={Boolean(v.urlError)}
+            aria-describedby={v.urlError ? 'status-url-error' : undefined}
+            aria-label="Page address"
+          />
+          {v.urlError ? <Text nativeID="status-url-error" variant="caption" style={{ fontSize: 12, color: colors.status.needsUser }}>{v.urlError}</Text> : null}
+        </Box>
+        <Box role="list" aria-label="Services">
+          {state.rows.map(r => <ServiceRowView key={r.id} row={r} state={state} send={send} locked={locked} immediate={motion.reduced} />)}
+        </Box>
+        {state.pub === 'failed' ? <Callout alert title="Couldn’t publish the page">Your changes are saved as a draft. Retry to publish them.</Callout> : null}
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+function ServiceRowView({ row, state, send, locked, immediate }: {
+  row: ServiceRow; state: StatusPageState; send: (a: StatusPageAction) => void; locked: boolean; immediate: boolean;
+}) {
+  const { colors, density } = useDs();
+  const presence = usePresence(!row.leaving, { speed: 'list' });
+  useEffect(() => { if (row.leaving && !presence.mounted) send({ type: 'drop', id: row.id }); }, [row.leaving, presence.mounted]);
+  const editing = state.editId === row.id;
+  const editRef = useRef<TextInput>(null);
+  useEffect(() => { if (editing) setTimeout(() => editRef.current?.focus(), 30); }, [editing]);
+  if (!presence.mounted) return null;
+  const s = row.status;
+  const ink = s === 'operational' ? colors.status.executed : colors.status.needsUser;
+
+  return (
+    <MotionView role="listitem" aria-hidden={row.leaving || undefined} style={{ opacity: presence.opacity, transform: [{ translateY: presence.translateY }] }}>
+      <Box row wrap align="center" gap="s3" style={{ minHeight: density.rowH, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: colors.hairline }}>
+        <Box
+          width={10}
+          height={10}
+          radius="pill"
+          aria-hidden
+          style={s === 'down'
+            ? { backgroundColor: colors.surface1, borderWidth: 3, borderColor: colors.status.needsUser }
+            : { backgroundColor: ink }}
+        />
+        <Box flex={1} style={{ minWidth: 140 }}>
+          <Slot slotKey={editing ? 'edit' : 'view'} align="flex-start">
+            {editing ? (
+              <Box flex={1} gap="s1">
+                <Input
+                  ref={editRef}
+                  value={state.edit}
+                  onChangeText={text => send({ type: 'editText', text })}
+                  onSubmit={() => send({ type: 'saveEdit' })}
+                  onKey={k => { if (k === 'Escape') send({ type: 'cancelEdit' }); }}
+                  aria-label={`Rename ${row.name}`}
+                  aria-describedby={`svc-edit-${row.id}`}
+                />
+                <Text nativeID={`svc-edit-${row.id}`} variant="caption" color="textSecondary" style={{ fontSize: 12 }}>Enter to save · Esc to cancel</Text>
+              </Box>
+            ) : (
+              <Box>
+                <Text variant="caption" color="textPrimary" style={{ fontWeight: '600', fontSize: 13 }}>{row.name}</Text>
+                <Text variant="caption" style={{ fontSize: 12, color: ink, fontWeight: s === 'down' ? '700' : '400' }}>{LABEL[s]}</Text>
+              </Box>
+            )}
+          </Slot>
+        </Box>
+        <Box style={{ width: 150 }}>
+          <Select
+            aria-label={`${row.name} status`}
+            value={s}
+            disabled={locked}
+            onChange={x => send({ type: 'status', id: row.id, status: x as ServiceStatus })}
+            options={(['operational', 'degraded', 'down'] as const).map(x => ({ value: x, label: LABEL[x] }))}
+          />
+        </Box>
+        <ActionMenu
+          label={`Actions for ${row.name}`}
+          triggerLabel={`More actions for ${row.name}`}
+          triggerIcon="more"
+          disabled={locked}
+          open={state.menuId === row.id}
+          onOpenChange={open => send({ type: 'menu', id: open ? row.id : null })}
+          items={[
+            { value: 'rename', label: 'Rename' },
+            { value: 'remove', label: 'Remove', detail: 'Stops showing on the public page', tone: 'danger' },
+          ]}
+          onSelect={choice => send(choice === 'rename' ? { type: 'rename', id: row.id } : { type: 'remove', id: row.id, immediate })}
+        />
+      </Box>
+    </MotionView>
+  );
+}
+
+/** StatusPage, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const StatusPage = guarded(StatusPageView, STATUS_PRESETS, 'StatusPage');

package/src/components/onboarding/status-page/contract.ts

@@ -0,0 +1,39 @@
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Status Page (batch 2 §3.11)** — set up a public status page and each service's status. No red:
+ * "Down" is apricot deep, bold, with a hollow ring dot (decision §5.1, approved).
+ */
+
+export type ServiceStatus = 'operational' | 'degraded' | 'down';
+export type StatusService = { name: string; status: ServiceStatus };
+
+export const STATUS_SCENES = [
+  'default', 'allOperational', 'degraded', 'down', 'urlInvalid', 'urlTaken', 'publishing', 'published', 'failed', 'loading', 'empty', 'error',
+] as const;
+export type StatusScene = (typeof STATUS_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const STATUS_IN_FLIGHT: readonly string[] = ['publishing'];
+
+export type StatusPageSettings = HeaderConfig & LoadCopy & {
+  slug: string;
+  /** Addresses already in use. */
+  takenSlugs: string[];
+  services: StatusService[];
+  ship?: StatusScene;
+  primaryLabel: string;
+};
+
+export const STATUS_PRESETS = presetsJson as unknown as PresetsFile<StatusPageSettings>;
+
+export const SLUG_PATTERN = /^[a-z0-9-]{3,30}$/;
+
+export function validateStatusPage(c: StatusPageSettings): OnboardingIssue[] {
+  if (!Array.isArray(c.services)) return [{ path: 'services', message: 'services must be a list.' }];
+  const issues: OnboardingIssue[] = [];
+  c.services.forEach((s, i) => {
+    if (!['operational', 'degraded', 'down'].includes(s.status)) issues.push({ path: `services[${i}].status`, message: `“${s.status}” is not a status.` });
+  });
+  return issues;
+}

package/src/components/onboarding/status-page/engine.ts

@@ -0,0 +1,96 @@
+import type { StateChipTone } from '../../../ds';
+import { SLUG_PATTERN, type ServiceStatus, type StatusPageSettings, type StatusScene } from './contract';
+
+/** **The Status Page engine** — pure: the address, the services, and publishing. */
+
+export type ServiceRow = { id: string; name: string; status: ServiceStatus; leaving: boolean };
+export type PublishPhase = 'idle' | 'publishing' | 'published' | 'failed';
+export type StatusPageState = { slug: string; rows: ServiceRow[]; pub: PublishPhase; menuId: string | null; editId: string | null; edit: string };
+export type StatusPageSeed = Partial<StatusPageState>;
+
+export type StatusPageAction =
+  | { type: 'slug'; slug: string }
+  | { type: 'status'; id: string; status: ServiceStatus }
+  | { type: 'menu'; id: string | null }
+  | { type: 'rename'; id: string }
+  | { type: 'editText'; text: string }
+  | { type: 'saveEdit' }
+  | { type: 'cancelEdit' }
+  | { type: 'remove'; id: string; immediate?: boolean }
+  | { type: 'drop'; id: string }
+  | { type: 'publish' }
+  | { type: 'published' }
+  | { type: 'failed' };
+
+export function initialStatusPage(c: StatusPageSettings, seed: StatusPageSeed = {}): StatusPageState {
+  return {
+    slug: seed.slug ?? c.slug,
+    rows: seed.rows ?? c.services.map((s, i) => ({ id: `s${i}`, name: s.name, status: s.status, leaving: false })),
+    pub: seed.pub ?? 'idle', menuId: seed.menuId ?? null, editId: seed.editId ?? null, edit: seed.edit ?? '',
+  };
+}
+
+export function statusSeed(c: StatusPageSettings, scene: StatusScene): StatusPageSeed {
+  const rows = initialStatusPage(c).rows;
+  if (scene === 'allOperational') return { rows: rows.map(r => ({ ...r, status: 'operational' })) };
+  if (scene === 'degraded') return { rows: rows.map((r, i) => (i === 1 ? { ...r, status: 'degraded' } : r)) };
+  if (scene === 'down') return { rows: rows.map((r, i) => (i === 0 ? { ...r, status: 'down' } : r)) };
+  if (scene === 'urlInvalid') return { slug: 'My Status!' };
+  if (scene === 'urlTaken') return { slug: c.takenSlugs[0] ?? c.slug };
+  if (scene === 'publishing' || scene === 'published' || scene === 'failed') return { pub: scene };
+  return {};
+}
+
+export function urlError(c: StatusPageSettings, slug: string): string | null {
+  if (!SLUG_PATTERN.test(slug)) return 'Use 3–30 lowercase letters, numbers or hyphens';
+  if (c.takenSlugs.includes(slug)) return 'That address is taken. Try another.';
+  return null;
+}
+
+const unpublish = (p: PublishPhase): PublishPhase => (p === 'published' ? 'idle' : p);
+
+export function reduceStatusPage(s: StatusPageState, a: StatusPageAction): StatusPageState {
+  const locked = s.pub === 'publishing';
+  switch (a.type) {
+    case 'slug': return locked ? s : { ...s, slug: a.slug, pub: unpublish(s.pub) };
+    case 'status': return locked ? s : { ...s, rows: s.rows.map(r => (r.id === a.id ? { ...r, status: a.status } : r)), pub: unpublish(s.pub) };
+    case 'menu': return { ...s, menuId: a.id };
+    case 'rename': {
+      const r = s.rows.find(x => x.id === a.id);
+      return r && !locked ? { ...s, menuId: null, editId: r.id, edit: r.name } : s;
+    }
+    case 'editText': return { ...s, edit: a.text };
+    case 'saveEdit': {
+      const v = s.edit.trim();
+      return { ...s, editId: null, rows: v ? s.rows.map(r => (r.id === s.editId ? { ...r, name: v } : r)) : s.rows, pub: v ? unpublish(s.pub) : s.pub };
+    }
+    case 'cancelEdit': return { ...s, editId: null };
+    case 'remove':
+      if (locked) return s;
+      return { ...s, menuId: null, pub: unpublish(s.pub), rows: a.immediate ? s.rows.filter(r => r.id !== a.id) : s.rows.map(r => (r.id === a.id ? { ...r, leaving: true } : r)) };
+    case 'drop': return { ...s, rows: s.rows.filter(r => r.id !== a.id) };
+    case 'publish': return s.pub === 'publishing' || s.pub === 'published' ? s : { ...s, pub: 'publishing' };
+    case 'published': return s.pub === 'publishing' ? { ...s, pub: 'published' } : s;
+    case 'failed': return s.pub === 'publishing' ? { ...s, pub: 'failed' } : s;
+  }
+}
+
+export function statusView(c: StatusPageSettings, s: StatusPageState) {
+  const live = s.rows.filter(r => !r.leaving);
+  const down = live.filter(r => r.status === 'down').length;
+  const deg = live.filter(r => r.status === 'degraded').length;
+  const err = urlError(c, s.slug);
+  const chip: { tone: StateChipTone; label: string } = s.pub === 'publishing' ? { tone: 'neutral', label: 'Publishing…' }
+    : s.pub === 'published' ? { tone: 'success', label: 'Published' }
+    : down ? { tone: 'attention', label: `${down} down` }
+    : deg ? { tone: 'attention', label: `${deg} degraded` }
+    : { tone: 'success', label: 'All operational' };
+  return {
+    urlError: err,
+    chip,
+    scene: (s.pub !== 'idle' ? s.pub : err ? (err.includes('taken') ? 'urlTaken' : 'urlInvalid') : down ? 'down' : deg ? 'degraded' : 'default') as StatusScene,
+    footerHint: s.pub === 'published' ? `Live at https://${s.slug}.status.page` : err ? 'Fix the address to publish' : 'Draft · not public yet',
+    primaryLabel: s.pub === 'publishing' ? 'Publishing…' : s.pub === 'published' ? 'Published' : s.pub === 'failed' ? c.retryLabel : c.primaryLabel,
+    canPublish: !err && s.pub !== 'publishing' && s.pub !== 'published',
+  };
+}

package/src/components/onboarding/status-page/index.ts

@@ -0,0 +1,9 @@
+export {
+  SLUG_PATTERN, STATUS_IN_FLIGHT, STATUS_PRESETS, STATUS_SCENES, validateStatusPage,
+  type ServiceStatus, type StatusPageSettings, type StatusScene, type StatusService,
+} from './contract';
+export {
+  initialStatusPage, reduceStatusPage, statusSeed, statusView, urlError as statusUrlError,
+  type PublishPhase, type ServiceRow, type StatusPageAction, type StatusPageSeed, type StatusPageState,
+} from './engine';
+export { StatusPage, type StatusPageOperations, type StatusPageProps } from './StatusPageView';