@appinternalleads/ui 0.2.0

package/src/components/onboarding/two-factor/TwoFactorView.tsx

@@ -0,0 +1,207 @@
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+import { Box, Icon, MotionView, Text, useSwap } from '../../../core';
+import { Button, OtpInput } 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 { MintCheck } from '../shared/parts';
+import { runOutcome, useDefaultOperation, usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { abortableDelay, useOperationRunner } from '../../../runtime/operations';
+import { CODE_LENGTH, TWO_FACTOR_PRESETS, validateTwoFactor, type TwoFactorSettings } from './contract';
+import { initialTwoFactor, reduceTwoFactor, twoFactorSeed, twoFactorView, type TwoFactorSeed } from './engine';
+import { guarded } from '../shared/guard';
+
+export type TwoFactorOperations = {
+  verify: OnboardingOperation<{ code: string }>;
+  /** Send the code again. Default: succeeds at once; "Sent" shows for 3s. */
+  resend?: OnboardingOperation<void>;
+};
+
+export type TwoFactorProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<TwoFactorSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: TwoFactorOperations;
+  reload?: OnboardingOperation<void>;
+  initial?: TwoFactorSeed;
+  /** The host's clipboard. Omitted on the web, the browser's is used. */
+  onCopy?: (text: string) => void | Promise<void>;
+  /** Native: save the backup codes (the web downloads `backup-codes.txt`). */
+  onDownloadCodes?: (codes: string[]) => void;
+  onVerified?: () => void;
+  onDone?: () => void;
+  onSkip?: () => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/**
+ * **Two Factor** — the setup layer (a QR slot and a copyable manual key, or where the code was sent
+ * with Resend), six code slots (C9 `slots`), and Verify, disabled until all six are in. An invalid
+ * code is apricot with the reason; the slots clear and focus returns to the first. Verified swaps
+ * (M4) to a mint confirmation and, optionally, the backup codes with Copy and Download.
+ */
+function TwoFactorView(props: TwoFactorProps) {
+  const config = resolveConfig(TWO_FACTOR_PRESETS, props.preset, props.config);
+  const issues = validateTwoFactor(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, onCopy, onDownloadCodes, onVerified, onDone, onSkip, onScene, testID,
+}: Omit<TwoFactorProps, 'config'> & { config: TwoFactorSettings }) {
+  const { colors, fonts } = useDs();
+  const runner = useOperationRunner();
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send, ref] = useSeededReducer(
+    reduceTwoFactor,
+    () => initialTwoFactor(config, initial ?? (config.ship ? twoFactorSeed(config, config.ship) : {})),
+    key,
+    () => runner.cancel('verify'),
+  );
+  const pattern = usePatternStatus(status, reload);
+  const v = twoFactorView(config, state);
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+  const verify = useDefaultOperation(operations?.verify, 1200, () => result === 'error');
+  const resend = useDefaultOperation(operations?.resend, 0, () => false);
+  const [focusKey, setFocusKey] = useState(0);
+  const [copied, setCopied] = useState<'' | 'key' | 'codes'>('');
+  const [sent, setSent] = useState(false);
+  const layer = useSwap(state.run === 'verified' ? 'done' : 'setup');
+
+  const run = () => {
+    runOutcome(runner, 'verify', verify, { code: ref.current.code }, {
+      ok: () => { send({ type: 'verified' }); onVerified?.(); },
+      fail: () => { send({ type: 'invalid' }); setFocusKey(k => k + 1); },
+    });
+  };
+  useEffect(() => { if (ref.current.run === 'verifying') run(); }, [key]);
+  const submit = () => { if (!twoFactorView(config, ref.current).canVerify) return; send({ type: 'verify' }); run(); };
+
+  const copy = async (text: string, which: 'key' | 'codes') => {
+    const clip = (globalThis as { navigator?: { clipboard?: { writeText: (s: string) => Promise<void> } } }).navigator?.clipboard;
+    try { if (onCopy) await onCopy(text); else await clip?.writeText(text); } catch { return; }
+    setCopied(which);
+    runner.run('copied', ctx => abortableDelay(ONBOARDING_TIMING.copied, ctx.signal), { onOk: () => setCopied(''), onError: () => setCopied('') });
+  };
+  const download = () => {
+    if (Platform.OS === 'web' && typeof document !== 'undefined' && typeof URL.createObjectURL === 'function') {
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(new Blob([config.codes.join('\n')], { type: 'text/plain' }));
+      a.download = 'backup-codes.txt';
+      a.click();
+    } else onDownloadCodes?.(config.codes);
+    onScene?.('downloaded');
+  };
+
+  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}
+      secondary={v.showSkip ? { label: 'Skip', onPress: () => { onSkip?.(); onScene?.('skipped'); } } : undefined}
+      primary={{
+        label: v.primaryLabel, busy: state.run === 'verifying',
+        disabled: state.run !== 'verified' && !v.canVerify,
+        onPress: () => { if (ref.current.run === 'verified') { onDone?.(); onScene?.('done'); } else submit(); },
+      }}>
+      <MotionView style={{ opacity: layer }}>
+        {state.run === 'verified' ? (
+          <Box gap="s3">
+            <Box row align="center" gap="s3">
+              <MintCheck size={32} />
+              <Box flex={1}>
+                <Text variant="caption" color="textPrimary" style={{ fontWeight: '600', fontSize: 14 }}>{config.verifiedTitle}</Text>
+                <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{config.showBackupCodes ? config.backupBody : config.verifiedBody}</Text>
+              </Box>
+            </Box>
+            {config.showBackupCodes ? (
+              <Box gap="s2" style={{ borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken, padding: 14 }}>
+                <Box role="list" aria-label="Backup codes" row wrap style={{ rowGap: 6 }}>
+                  {config.codes.map(code => (
+                    <Box key={code} role="listitem" style={{ width: '50%' }}>
+                      <Text style={{ fontFamily: fonts.mono, fontSize: 13, letterSpacing: 0.78, color: colors.textPrimary }}>{code}</Text>
+                    </Box>
+                  ))}
+                </Box>
+                <Box row gap="s2">
+                  <Button variant="secondary" size="xsmall" onPress={() => { void copy(config.codes.join('\n'), 'codes'); }} aria-label={copied === 'codes' ? 'Copied' : 'Copy backup codes'}>{copied === 'codes' ? 'Copied' : 'Copy'}</Button>
+                  <Button variant="secondary" size="xsmall" onPress={download} aria-label="Download backup codes">Download</Button>
+                </Box>
+              </Box>
+            ) : null}
+          </Box>
+        ) : (
+          <Box gap="s3">
+            {config.showQr ? (
+              <Box row wrap gap="s4" align="flex-start">
+                <Box width={112} height={112} role="img" aria-label="QR code for your authenticator app" align="center" justify="center" style={{ borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken, borderWidth: 1, borderStyle: 'dashed', borderColor: colors.hairlineStrong }}>
+                  <Icon name="qr" size={48} color={colors.textSecondary} />
+                </Box>
+                <Box flex={1} gap="s2" style={{ minWidth: 180 }}>
+                  <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>Can’t scan it? Enter this key</Text>
+                  <Box row wrap align="center" gap="s2">
+                    <Box style={{ borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken, paddingVertical: 6, paddingHorizontal: 10 }}>
+                      <Text style={{ fontFamily: fonts.mono, fontSize: 13, letterSpacing: 0.78, color: colors.textPrimary }}>{config.secret}</Text>
+                    </Box>
+                    <Button variant="secondary" size="xsmall" onPress={() => { void copy(config.secret.replace(/ /g, ''), 'key'); }} aria-label={copied === 'key' ? 'Copied' : 'Copy setup key'}>{copied === 'key' ? 'Copied' : 'Copy'}</Button>
+                  </Box>
+                  <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{config.appHint}</Text>
+                </Box>
+              </Box>
+            ) : config.destinationHint ? (
+              <Box row wrap align="center" justify="space-between" gap="s2" style={{ borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken, paddingVertical: 12, paddingHorizontal: 14 }}>
+                <Text variant="caption" color="textPrimary" style={{ flex: 1 }}>{config.destinationHint}</Text>
+                {config.canResend ? (
+                  <Button
+                    variant="secondary"
+                    size="xsmall"
+                    disabled={sent}
+                    onPress={() => {
+                      runOutcome(runner, 'resend', resend, undefined, {
+                        ok: () => { setSent(true); runner.run('sent', ctx => abortableDelay(3000, ctx.signal), { onOk: () => setSent(false), onError: () => setSent(false) }); },
+                        fail: () => {},
+                      });
+                    }}>
+                    {sent ? 'Sent' : 'Resend'}
+                  </Button>
+                ) : null}
+              </Box>
+            ) : null}
+            <Box gap="s2">
+              <OtpInput
+                mode="slots"
+                label="Verification code"
+                value={state.code}
+                onChange={code => send({ type: 'code', code })}
+                length={CODE_LENGTH}
+                error={state.run === 'invalid'}
+                disabled={state.run === 'verifying'}
+                onSubmit={submit}
+                focusKey={focusKey}
+              />
+              <Box role="status" aria-live="polite">
+                {state.run === 'invalid' ? <Text variant="caption" style={{ fontSize: 12, color: colors.status.needsUser }}>{config.invalidText}</Text> : null}
+              </Box>
+            </Box>
+          </Box>
+        )}
+      </MotionView>
+    </OnboardingCard>
+  );
+}
+
+/** TwoFactor, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const TwoFactor = guarded(TwoFactorView, TWO_FACTOR_PRESETS, 'TwoFactor');

package/src/components/onboarding/two-factor/contract.ts

@@ -0,0 +1,47 @@
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Two Factor (batch 2 §3.15)** — set up or confirm a 6-digit code: an authenticator (QR + key),
+ * a texted code, or a confirmation; then, optionally, backup codes.
+ */
+
+export const TWO_FACTOR_SCENES = ['default', 'partial', 'verifying', 'invalid', 'verified', 'loading', 'empty', 'error'] as const;
+export type TwoFactorScene = (typeof TWO_FACTOR_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const TWO_FACTOR_IN_FLIGHT: readonly string[] = ['verifying'];
+
+export const CODE_LENGTH = 6;
+
+export type TwoFactorSettings = HeaderConfig & LoadCopy & {
+  /** Show the QR slot and the manual key (authenticator setup). */
+  showQr: boolean;
+  /** No Skip. */
+  required: boolean;
+  showBackupCodes: boolean;
+  /** A texted code can be sent again. */
+  canResend: boolean;
+  /** Without a QR: where the code went, or what is being confirmed. */
+  destinationHint: string;
+  /** The manual setup key. */
+  secret: string;
+  codes: string[];
+  appHint: string;
+  invalidText: string;
+  verifyLabel: string;
+  doneLabel: string;
+  verifiedTitle: string;
+  verifiedBody: string;
+  backupBody: string;
+  verifiedHint: string;
+  ship?: TwoFactorScene;
+};
+
+export const TWO_FACTOR_PRESETS = presetsJson as unknown as PresetsFile<TwoFactorSettings>;
+
+export function validateTwoFactor(c: TwoFactorSettings): OnboardingIssue[] {
+  const issues: OnboardingIssue[] = [];
+  if (c.showQr && !c.secret) issues.push({ path: 'secret', message: 'A QR setup needs its manual key.' });
+  if (c.showBackupCodes && !c.codes?.length) issues.push({ path: 'codes', message: 'Backup codes are on but none are listed.' });
+  return issues;
+}

package/src/components/onboarding/two-factor/engine.ts

@@ -0,0 +1,48 @@
+import type { StateChipTone } from '../../../ds';
+import { CODE_LENGTH, type TwoFactorScene, type TwoFactorSettings } from './contract';
+
+/** **The Two Factor engine** — pure: the code, and verifying it. */
+
+export type VerifyRun = 'idle' | 'verifying' | 'invalid' | 'verified';
+export type TwoFactorState = { code: string; run: VerifyRun };
+export type TwoFactorSeed = Partial<TwoFactorState>;
+export type TwoFactorAction = { type: 'code'; code: string } | { type: 'verify' } | { type: 'verified' } | { type: 'invalid' };
+
+export function initialTwoFactor(_c: TwoFactorSettings, seed: TwoFactorSeed = {}): TwoFactorState {
+  return { code: seed.code ?? '', run: seed.run ?? 'idle' };
+}
+
+export function twoFactorSeed(_c: TwoFactorSettings, scene: TwoFactorScene): TwoFactorSeed {
+  if (scene === 'partial') return { code: '481' };
+  if (scene === 'verifying') return { code: '481902', run: 'verifying' };
+  if (scene === 'invalid') return { run: 'invalid' };
+  if (scene === 'verified') return { code: '481902', run: 'verified' };
+  return {};
+}
+
+export function reduceTwoFactor(s: TwoFactorState, a: TwoFactorAction): TwoFactorState {
+  switch (a.type) {
+    /* Typing after an invalid code clears the "Try again". */
+    case 'code': return s.run === 'verifying' || s.run === 'verified' ? s : { code: a.code.replace(/\D/g, '').slice(0, CODE_LENGTH), run: s.run === 'invalid' ? 'idle' : s.run };
+    case 'verify': return s.code.length === CODE_LENGTH && s.run !== 'verifying' && s.run !== 'verified' ? { ...s, run: 'verifying' } : s;
+    case 'verified': return s.run === 'verifying' ? { ...s, run: 'verified' } : s;
+    /* Invalid: the slots clear, and focus returns to the first. */
+    case 'invalid': return s.run === 'verifying' ? { code: '', run: 'invalid' } : s;
+  }
+}
+
+export function twoFactorView(c: TwoFactorSettings, s: TwoFactorState) {
+  const n = s.code.length;
+  const full = n === CODE_LENGTH;
+  return {
+    full,
+    scene: (s.run === 'idle' ? (n ? 'partial' : 'default') : s.run) as TwoFactorScene,
+    chip: s.run === 'verified' ? { tone: 'success' as StateChipTone, label: 'Verified' }
+      : s.run === 'invalid' ? { tone: 'attention' as StateChipTone, label: 'Try again' }
+      : { tone: 'neutral' as StateChipTone, label: `${n} of ${CODE_LENGTH}` },
+    footerHint: s.run === 'verified' ? c.verifiedHint : s.run === 'verifying' ? 'Checking the code…' : full ? 'Ready to verify' : `Enter all ${CODE_LENGTH} digits`,
+    primaryLabel: s.run === 'verifying' ? 'Verifying…' : s.run === 'verified' ? c.doneLabel : c.verifyLabel,
+    canVerify: full && s.run !== 'verifying',
+    showSkip: !c.required && s.run !== 'verified',
+  };
+}

package/src/components/onboarding/two-factor/index.ts

@@ -0,0 +1,9 @@
+export {
+  CODE_LENGTH, TWO_FACTOR_IN_FLIGHT, TWO_FACTOR_PRESETS, TWO_FACTOR_SCENES, validateTwoFactor,
+  type TwoFactorScene, type TwoFactorSettings,
+} from './contract';
+export {
+  initialTwoFactor, reduceTwoFactor, twoFactorSeed, twoFactorView,
+  type TwoFactorAction, type TwoFactorSeed, type TwoFactorState, type VerifyRun,
+} from './engine';
+export { TwoFactor, type TwoFactorOperations, type TwoFactorProps } from './TwoFactorView';

package/src/components/onboarding/two-factor/presets.json

@@ -0,0 +1,128 @@
+{
+  "component": "two-factor",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "action",
+    "icon": "shield",
+    "title": "Set up two-factor sign-in",
+    "subtitle": "Use an authenticator app for a 6-digit code.",
+    "showQr": true,
+    "required": false,
+    "showBackupCodes": true,
+    "canResend": false,
+    "secret": "JBSW Y3DP EHPK 3PXP",
+    "codes": [
+      "7KQ2-9WFD",
+      "M3XP-4R8T",
+      "Z6HN-2JCV",
+      "B9LA-7YEQ",
+      "T4GS-8KMW",
+      "P2VD-6NZR",
+      "H8CE-3QXL",
+      "F5RY-9BTJ",
+      "W7MK-2DHS",
+      "N3ZU-5PGA"
+    ],
+    "appHint": "Works with any authenticator app. The code changes every 30 seconds.",
+    "destinationHint": "",
+    "invalidText": "That code didn’t work. Check the app and try again.",
+    "verifyLabel": "Verify",
+    "doneLabel": "Done",
+    "verifiedTitle": "Two-factor sign-in is on",
+    "verifiedBody": "You’re verified.",
+    "backupBody": "Save these codes somewhere safe. Use one if you lose your phone.",
+    "verifiedHint": "Keep your backup codes somewhere safe",
+    "emptyTitle": "Two-factor isn’t available",
+    "emptyBody": "Your organisation manages sign-in for this account.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "data",
+      "title": "Two-factor is required",
+      "subtitle": "Your admin requires it for every member.",
+      "required": true,
+      "ship": "partial"
+    },
+    "case3": {
+      "type": "file",
+      "icon": "phone",
+      "title": "Confirm your phone",
+      "subtitle": "We texted you a 6-digit code.",
+      "showQr": false,
+      "showBackupCodes": false,
+      "canResend": true,
+      "destinationHint": "Sent to ••• 42",
+      "invalidText": "That code didn’t work. Check the text or resend it.",
+      "verifiedTitle": "Phone confirmed",
+      "verifiedBody": "We’ll text a code when you sign in on a new device.",
+      "verifiedHint": "Phone ending 42 confirmed",
+      "doneLabel": "Continue"
+    },
+    "case4": {
+      "type": "data",
+      "icon": "cash",
+      "title": "Confirm payout change",
+      "subtitle": "Enter the code from your authenticator.",
+      "showQr": false,
+      "showBackupCodes": false,
+      "required": true,
+      "ship": "invalid",
+      "destinationHint": "Changing payouts to the account ending 7781",
+      "verifyLabel": "Confirm change",
+      "verifiedTitle": "Payout account updated",
+      "verifiedBody": "Future payouts go to the account ending 7781.",
+      "verifiedHint": "Change confirmed",
+      "doneLabel": "Back to payouts"
+    },
+    "case5": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Approve assistant action",
+      "subtitle": "Payments over $100 need your code.",
+      "showQr": false,
+      "showBackupCodes": false,
+      "required": true,
+      "ship": "verified",
+      "destinationHint": "Confirm to let the assistant send $120 to Harbor Legal",
+      "verifyLabel": "Approve",
+      "verifiedTitle": "Payment approved",
+      "verifiedBody": "The assistant sent $120 to Harbor Legal.",
+      "verifiedHint": "Approved just now",
+      "doneLabel": "Back to chat"
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · Security",
+      "title": "Authenticator setup",
+      "scenario": "A user turns on two-factor sign-in with an authenticator app, then saves backup codes."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Workspace admin",
+      "title": "Admin-enforced 2FA",
+      "scenario": "An admin requires two-factor sign-in, so there’s no Skip. The board ships part-typed."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Consumer",
+      "title": "SMS code",
+      "scenario": "A user confirms their phone with a texted code. There’s no QR, and they can resend the code."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Finance",
+      "title": "Payout change check",
+      "scenario": "A user confirms a change of payout account. The board ships with an invalid code."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Approve agent action",
+      "scenario": "A user approves a payment the assistant wants to make. The board ships verified."
+    }
+  }
+}

package/src/components/onboarding/views.ts

@@ -0,0 +1,107 @@
+import { BrandKit } from './brand-kit/BrandKitView';
+import { BudgetAllocation } from './budget-allocation/BudgetAllocationView';
+import { CalendarSync } from './calendar-sync/CalendarSyncView';
+import { Carousel } from './carousel/CarouselView';
+import { ContactImport } from './contact-import/ContactImportView';
+import { DashboardConfig } from './dashboard-config/DashboardConfigView';
+import { ExportFormat } from './export-format/ExportFormatView';
+import { SetupTasks } from './setup-tasks/SetupTasksView';
+import { CicdSetup } from './cicd-setup/CicdSetupView';
+import { Completion } from './completion/CompletionView';
+import { DepartmentSetup } from './department-setup/DepartmentSetupView';
+import { HelpCenter } from './help-center/HelpCenterView';
+import { PermissionsSetup } from './permissions-setup/PermissionsSetupView';
+import { PlanSelection } from './plan-selection/PlanSelectionView';
+import { QuickActions } from './quick-actions/QuickActionsView';
+import { RateLimit } from './rate-limit/RateLimitView';
+import { SeatAllocation } from './seat-allocation/SeatAllocationView';
+import { StatusPage } from './status-page/StatusPageView';
+import { TagCreation } from './tag-creation/TagCreationView';
+import { TermsConsent } from './terms-consent/TermsConsentView';
+import { TrialCountdown } from './trial-countdown/TrialCountdownView';
+import { TwoFactor } from './two-factor/TwoFactorView';
+import { Achievement } from './achievement/AchievementView';
+import { EventReminder } from './event-reminder/EventReminderView';
+import { FileShared } from './file-shared/FileSharedView';
+import { FilterPanel } from './filter-panel/FilterPanelView';
+import { Floating } from './floating/FloatingView';
+import { MarkRead } from './mark-read/MarkReadView';
+import { PasswordExpiry } from './password-expiry/PasswordExpiryView';
+import { PaymentAlert } from './payment-alert/PaymentAlertView';
+import { OnboardingStep } from './onboarding-step/OnboardingStepView';
+import { QueueStatus } from './queue-status/QueueStatusView';
+import { ShippingUpdate } from './shipping-update/ShippingUpdateView';
+import { IDVerification } from './id-verification/IdVerificationView';
+import { Table } from './table/TableView';
+import { Grid } from './grid/GridView';
+import { Combobox } from './combobox/ComboboxView';
+import { Tabbed } from './tabbed/TabbedView';
+import { Fallback } from './fallback/FallbackView';
+import { BudgetTracker } from './budget-tracker/BudgetTrackerView';
+import { AbTests } from './ab-tests/AbTestsView';
+import { ConversionFunnel } from './conversion-funnel/ConversionFunnelView';
+import { ExpandableFeed } from './expandable-feed/ExpandableFeedView';
+import { ScoreSummary } from './score-summary/ScoreSummaryView';
+import { CriteriaSpider } from './criteria-spider/CriteriaSpiderView';
+import { ActivityHeatmap } from './activity-heatmap/ActivityHeatmapView';
+import { TagCloud } from './tag-cloud/TagCloudView';
+import { ReceiptPrinter } from './receipt-printer/ReceiptPrinterView';
+import type { ComponentType } from 'react';
+import type { OnboardingComponent } from './shared/contract';
+import type { GuardProps } from './shared/guard';
+
+/**
+ * **Every New component, by name** — the rendered export (guarded). The one list tests and tools
+ * iterate, so a new component is tested by every conformance suite the moment it is added here
+ * (`docs/COMPONENT-RULES.md`, R1).
+ */
+export const ONBOARDING_VIEWS: Record<OnboardingComponent, ComponentType<Record<string, unknown> & GuardProps>> = {
+  'brand-kit': BrandKit,
+  'budget-allocation': BudgetAllocation,
+  'calendar-sync': CalendarSync,
+  carousel: Carousel,
+  'contact-import': ContactImport,
+  'dashboard-config': DashboardConfig,
+  'export-format': ExportFormat,
+  'setup-tasks': SetupTasks,
+  'cicd-setup': CicdSetup,
+  completion: Completion,
+  'department-setup': DepartmentSetup,
+  'help-center': HelpCenter,
+  'permissions-setup': PermissionsSetup,
+  'plan-selection': PlanSelection,
+  'quick-actions': QuickActions,
+  'rate-limit': RateLimit,
+  'seat-allocation': SeatAllocation,
+  'status-page': StatusPage,
+  'tag-creation': TagCreation,
+  'terms-consent': TermsConsent,
+  'trial-countdown': TrialCountdown,
+  'two-factor': TwoFactor,
+  achievement: Achievement,
+  'event-reminder': EventReminder,
+  'file-shared': FileShared,
+  'filter-panel': FilterPanel,
+  floating: Floating,
+  'mark-read': MarkRead,
+  'password-expiry': PasswordExpiry,
+  'payment-alert': PaymentAlert,
+  'onboarding-step': OnboardingStep,
+  'queue-status': QueueStatus,
+  'shipping-update': ShippingUpdate,
+  'id-verification': IDVerification,
+  table: Table,
+  grid: Grid,
+  combobox: Combobox,
+  tabbed: Tabbed,
+  fallback: Fallback,
+  'budget-tracker': BudgetTracker,
+  'ab-tests': AbTests,
+  'conversion-funnel': ConversionFunnel,
+  'expandable-feed': ExpandableFeed,
+  'score-summary': ScoreSummary,
+  'criteria-spider': CriteriaSpider,
+  'activity-heatmap': ActivityHeatmap,
+  'tag-cloud': TagCloud,
+  'receipt-printer': ReceiptPrinter,
+} as unknown as Record<OnboardingComponent, ComponentType<Record<string, unknown> & GuardProps>>;