@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/trial-countdown/TrialCountdownView.tsx

@@ -72,10 +72,10 @@ function Valid({
       <Box gap="s3">
         <Box gap="s2" style={{ borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken, padding: 16 }}>
           <Box row wrap align="flex-end" gap="s2">
-            <TickNumber value={v.days} fontSize={32} tone={v.warn ? 'apricot' : 'default'} label="Days left" />
+            <TickNumber value={v.days} fontSize={32} tone={v.warn ? 'apricot' : 'default'} label={config.daysLeftLabel} />
             <Text variant="caption" color="textSecondary" style={{ fontSize: 13, paddingBottom: 6, flexShrink: 1 }}>{v.caption}</Text>
           </Box>
-          <ProgressBar bare track="surface" label="Trial days used" value={v.used} max={config.totalDays} tone={v.barTone} format={() => v.usedLabel} />
+          <ProgressBar bare track="surface" label={config.daysUsedLabel} value={v.used} max={config.totalDays} tone={v.barTone} format={() => v.usedLabel} />
           <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{v.usedLabel}</Text>
         </Box>
         <Box gap="s2">
@@ -90,8 +90,8 @@ function Valid({
             ))}
           </Box>
         </Box>
-        {v.mode === 'expired' ? <Callout alert title="Your trial has ended">{config.expiredBody}</Callout> : null}
-        {state.run === 'failed' ? <Callout alert title="Couldn’t upgrade">Your card wasn’t charged. Check your payment details, then retry.</Callout> : null}
+        {v.mode === 'expired' ? <Callout alert title={config.expiredTitle}>{config.expiredBody}</Callout> : null}
+        {state.run === 'failed' ? <Callout alert title={config.failedTitle}>{config.failedBody}</Callout> : null}
       </Box>
     </OnboardingCard>
   );

package/src/components/onboarding/trial-countdown/contract.ts

@@ -20,6 +20,43 @@ export type TrialCountdownSettings = HeaderConfig & LoadCopy & {
   expiredBody: string;
   /** The ghost — "Compare plans". */
   secondaryLabel: string;
+  /** Status chip and primary while the upgrade runs, and once it's done. */
+  upgradingLabel: string;
+  upgradedLabel: string;
+  /** Status chip per mode: normal, ending soon, last day, ended. */
+  trialChipLabel: string;
+  soonChipLabel: string;
+  lastDayChipLabel: string;
+  endedChipLabel: string;
+  /** The caption beside the days-left figure; `{plan}` is `planName`. */
+  captionText: string;
+  lastDayCaptionText: string;
+  expiredCaptionText: string;
+  upgradedCaptionText: string;
+  /** Read out for the days-left figure and the days-used bar. */
+  daysLeftLabel: string;
+  daysUsedLabel: string;
+  /** Under the bar; `{used}` and `{total}` are day counts. */
+  usedText: string;
+  /** Above the kept / paused list (before and after the trial ends). */
+  bulletsTitle: string;
+  expiredBulletsTitle: string;
+  /** The tag on a bullet that's kept, paused after the trial, or paused now. */
+  keepTagLabel: string;
+  pausedAfterTagLabel: string;
+  pausedTagLabel: string;
+  /** Footer hint per mode; `{plan}` is `planName`. */
+  trialHint: string;
+  expiredHint: string;
+  upgradedHint: string;
+  /** The primary; `{plan}` is `planName`. */
+  upgradeLabel: string;
+  expiredUpgradeLabel: string;
+  /** The ended alert's title (its body is `expiredBody`). */
+  expiredTitle: string;
+  /** The failed-upgrade alert. */
+  failedTitle: string;
+  failedBody: string;
 };
 
 export const TRIAL_PRESETS = presetsJson as unknown as PresetsFile<TrialCountdownSettings>;

package/src/components/onboarding/trial-countdown/engine.ts

@@ -1,4 +1,5 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
 import type { TrialCountdownSettings, TrialScene } from './contract';
 
 /** **The Trial Countdown engine** — pure: days left, the trial's mode, and the upgrade. */
@@ -39,24 +40,22 @@ export function trialView(c: TrialCountdownSettings, s: TrialState) {
   const warn = m === 'soon' || m === 'last' || m === 'expired';
   const used = Math.min(c.totalDays, c.totalDays - Math.max(0, s.left));
   const n = (x: number) => x.toLocaleString('en-US');
+  const plan = { plan: c.planName };
   return {
     mode: m,
     warn,
     used,
     days: Math.max(0, s.left),
     scene: (s.run !== 'idle' ? s.run : m === 'expired' ? 'expired' : m === 'last' ? 'lastDay' : m === 'soon' ? 'soon' : 'default') as TrialScene,
-    chip: s.run === 'upgrading' ? { tone: 'neutral' as StateChipTone, label: 'Upgrading…' }
-      : { tone: (m === 'upgraded' ? 'success' : warn ? 'attention' : 'neutral') as StateChipTone, label: m === 'upgraded' ? 'Upgraded' : m === 'expired' ? 'Trial ended' : m === 'last' ? 'Last day' : m === 'soon' ? 'Ending soon' : 'Trial' },
-    caption: m === 'upgraded' ? `You’re on ${c.planName} now`
-      : m === 'expired' ? `days left · your ${c.planName} trial has ended`
-      : m === 'last' ? `day left · your ${c.planName} trial ends tonight`
-      : `days left in your ${c.planName} trial`,
-    usedLabel: `${n(used)} of ${n(c.totalDays)} days used`,
+    chip: s.run === 'upgrading' ? { tone: 'neutral' as StateChipTone, label: c.upgradingLabel }
+      : { tone: (m === 'upgraded' ? 'success' : warn ? 'attention' : 'neutral') as StateChipTone, label: m === 'upgraded' ? c.upgradedLabel : m === 'expired' ? c.endedChipLabel : m === 'last' ? c.lastDayChipLabel : m === 'soon' ? c.soonChipLabel : c.trialChipLabel },
+    caption: fill(m === 'upgraded' ? c.upgradedCaptionText : m === 'expired' ? c.expiredCaptionText : m === 'last' ? c.lastDayCaptionText : c.captionText, plan),
+    usedLabel: fill(c.usedText, { used: n(used), total: n(c.totalDays) }),
     barTone: (m === 'upgraded' ? 'success' : warn ? 'attention' : 'ink') as 'success' | 'attention' | 'ink',
-    bulletsTitle: m === 'expired' ? 'What’s changed' : 'When the trial ends',
-    tag: (keep: boolean) => (keep ? 'You keep' : m === 'expired' ? 'Paused' : 'Paused after the trial'),
-    footerHint: m === 'upgraded' ? `Thanks · the ${c.planName} plan is active` : m === 'expired' ? 'Your data is kept for 30 days' : 'No charge until you upgrade',
-    primaryLabel: s.run === 'upgrading' ? 'Upgrading…' : m === 'upgraded' ? 'Upgraded' : s.run === 'failed' ? c.retryLabel : m === 'expired' ? 'Upgrade to keep access' : `Upgrade to ${c.planName}`,
+    bulletsTitle: m === 'expired' ? c.expiredBulletsTitle : c.bulletsTitle,
+    tag: (keep: boolean) => (keep ? c.keepTagLabel : m === 'expired' ? c.pausedTagLabel : c.pausedAfterTagLabel),
+    footerHint: fill(m === 'upgraded' ? c.upgradedHint : m === 'expired' ? c.expiredHint : c.trialHint, plan),
+    primaryLabel: s.run === 'upgrading' ? c.upgradingLabel : m === 'upgraded' ? c.upgradedLabel : s.run === 'failed' ? c.retryLabel : m === 'expired' ? c.expiredUpgradeLabel : fill(c.upgradeLabel, plan),
     canUpgrade: s.run !== 'upgrading' && s.run !== 'upgraded',
   };
 }

package/src/components/onboarding/trial-countdown/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "trial-countdown",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -33,7 +35,33 @@
     "expiredBody": "Team features are paused. Upgrade to pick up where you left off.",
     "emptyTitle": "No active trial",
     "emptyBody": "Start a trial to try paid features.",
-    "emptyCta": "Start a trial"
+    "emptyCta": "Start a trial",
+    "upgradingLabel": "Upgrading…",
+    "upgradedLabel": "Upgraded",
+    "trialChipLabel": "Trial",
+    "soonChipLabel": "Ending soon",
+    "lastDayChipLabel": "Last day",
+    "endedChipLabel": "Trial ended",
+    "captionText": "days left in your {plan} trial",
+    "lastDayCaptionText": "day left · your {plan} trial ends tonight",
+    "expiredCaptionText": "days left · your {plan} trial has ended",
+    "upgradedCaptionText": "You’re on {plan} now",
+    "daysLeftLabel": "Days left",
+    "daysUsedLabel": "Trial days used",
+    "usedText": "{used} of {total} days used",
+    "bulletsTitle": "When the trial ends",
+    "expiredBulletsTitle": "What’s changed",
+    "keepTagLabel": "You keep",
+    "pausedAfterTagLabel": "Paused after the trial",
+    "pausedTagLabel": "Paused",
+    "trialHint": "No charge until you upgrade",
+    "expiredHint": "Your data is kept for 30 days",
+    "upgradedHint": "Thanks · the {plan} plan is active",
+    "upgradeLabel": "Upgrade to {plan}",
+    "expiredUpgradeLabel": "Upgrade to keep access",
+    "expiredTitle": "Your trial has ended",
+    "failedTitle": "Couldn’t upgrade",
+    "failedBody": "Your card wasn’t charged. Check your payment details, then retry."
   },
   "cases": {
     "case1": {},

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

@@ -111,7 +111,7 @@ function Valid({
       onEmptyAction={pattern.retry}
       chip={v.chip}
       hint={v.footerHint}
-      secondary={v.showSkip ? { label: 'Skip', onPress: () => { onSkip?.(); onScene?.('skipped'); } } : undefined}
+      secondary={v.showSkip ? { label: config.skipLabel, onPress: () => { onSkip?.(); onScene?.('skipped'); } } : undefined}
       primary={{
         label: v.primaryLabel, busy: state.run === 'verifying',
         disabled: state.run !== 'verified' && !v.canVerify,
@@ -129,7 +129,7 @@ function Valid({
             </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 }}>
+                <Box role="list" aria-label={config.backupCodesLabel} 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>
@@ -137,8 +137,8 @@ function Valid({
                   ))}
                 </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>
+                  <Button variant="secondary" size="xsmall" onPress={() => { void copy(config.codes.join('\n'), 'codes'); }} aria-label={copied === 'codes' ? config.copiedLabel : config.copyCodesLabel}>{copied === 'codes' ? config.copiedLabel : config.copyLabel}</Button>
+                  <Button variant="secondary" size="xsmall" onPress={download} aria-label={config.downloadCodesLabel}>{config.downloadLabel}</Button>
                 </Box>
               </Box>
             ) : null}
@@ -147,16 +147,16 @@ function Valid({
           <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 }}>
+                <Box width={112} height={112} role="img" aria-label={config.qrLabel} 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>
+                  <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{config.manualKeyTitle}</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>
+                    <Button variant="secondary" size="xsmall" onPress={() => { void copy(config.secret.replace(/ /g, ''), 'key'); }} aria-label={copied === 'key' ? config.copiedLabel : config.copyKeyLabel}>{copied === 'key' ? config.copiedLabel : config.copyLabel}</Button>
                   </Box>
                   <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{config.appHint}</Text>
                 </Box>
@@ -175,7 +175,7 @@ function Valid({
                         fail: () => {},
                       });
                     }}>
-                    {sent ? 'Sent' : 'Resend'}
+                    {sent ? config.sentLabel : config.resendLabel}
                   </Button>
                 ) : null}
               </Box>
@@ -183,7 +183,7 @@ function Valid({
             <Box gap="s2">
               <OtpInput
                 mode="slots"
-                label="Verification code"
+                label={config.codeLabel}
                 value={state.code}
                 onChange={code => send({ type: 'code', code })}
                 length={CODE_LENGTH}

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

@@ -34,6 +34,38 @@ export type TwoFactorSettings = HeaderConfig & LoadCopy & {
   verifiedBody: string;
   backupBody: string;
   verifiedHint: string;
+  /** Secondary button when the code is optional. */
+  skipLabel: string;
+  /** Accessible name of the code slots. */
+  codeLabel: string;
+  /** Accessible name of the QR slot. */
+  qrLabel: string;
+  /** Above the manual key. */
+  manualKeyTitle: string;
+  copyLabel: string;
+  /** Copy's label for a moment after copying. */
+  copiedLabel: string;
+  /** Accessible name of the key's Copy. */
+  copyKeyLabel: string;
+  /** Accessible name of the codes' Copy. */
+  copyCodesLabel: string;
+  downloadLabel: string;
+  /** Accessible name of Download. */
+  downloadCodesLabel: string;
+  /** Accessible name of the backup-code list. */
+  backupCodesLabel: string;
+  resendLabel: string;
+  /** Resend's label for 3s after sending. */
+  sentLabel: string;
+  verifiedChip: string;
+  invalidChip: string;
+  /** Chip while typing: `{n}` digits in, of `{total}`. */
+  progressChip: string;
+  checkingHint: string;
+  readyHint: string;
+  /** Footer hint until every digit is in. */
+  enterHint: string;
+  verifyingLabel: string;
   ship?: TwoFactorScene;
 };
 

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

@@ -1,4 +1,5 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
 import { CODE_LENGTH, type TwoFactorScene, type TwoFactorSettings } from './contract';
 
 /** **The Two Factor engine** — pure: the code, and verifying it. */
@@ -37,11 +38,11 @@ export function twoFactorView(c: TwoFactorSettings, s: TwoFactorState) {
   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,
+    chip: s.run === 'verified' ? { tone: 'success' as StateChipTone, label: c.verifiedChip }
+      : s.run === 'invalid' ? { tone: 'attention' as StateChipTone, label: c.invalidChip }
+      : { tone: 'neutral' as StateChipTone, label: fill(c.progressChip, { n, total: CODE_LENGTH }) },
+    footerHint: s.run === 'verified' ? c.verifiedHint : s.run === 'verifying' ? c.checkingHint : full ? c.readyHint : fill(c.enterHint, { total: CODE_LENGTH }),
+    primaryLabel: s.run === 'verifying' ? c.verifyingLabel : s.run === 'verified' ? c.doneLabel : c.verifyLabel,
     canVerify: full && s.run !== 'verifying',
     showSkip: !c.required && s.run !== 'verified',
   };

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

@@ -1,6 +1,8 @@
 {
   "component": "two-factor",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -37,6 +39,26 @@
     "verifiedBody": "You’re verified.",
     "backupBody": "Save these codes somewhere safe. Use one if you lose your phone.",
     "verifiedHint": "Keep your backup codes somewhere safe",
+    "skipLabel": "Skip",
+    "codeLabel": "Verification code",
+    "qrLabel": "QR code for your authenticator app",
+    "manualKeyTitle": "Can’t scan it? Enter this key",
+    "copyLabel": "Copy",
+    "copiedLabel": "Copied",
+    "copyKeyLabel": "Copy setup key",
+    "copyCodesLabel": "Copy backup codes",
+    "downloadLabel": "Download",
+    "downloadCodesLabel": "Download backup codes",
+    "backupCodesLabel": "Backup codes",
+    "resendLabel": "Resend",
+    "sentLabel": "Sent",
+    "verifiedChip": "Verified",
+    "invalidChip": "Try again",
+    "progressChip": "{n} of {total}",
+    "checkingHint": "Checking the code…",
+    "readyHint": "Ready to verify",
+    "enterHint": "Enter all {total} digits",
+    "verifyingLabel": "Verifying…",
     "emptyTitle": "Two-factor isn’t available",
     "emptyBody": "Your organisation manages sign-in for this account.",
     "emptyCta": "Refresh"

package/src/components/onboarding/views.ts

@@ -47,6 +47,56 @@ import { ActivityHeatmap } from './activity-heatmap/ActivityHeatmapView';
 import { TagCloud } from './tag-cloud/TagCloudView';
 import { ReceiptPrinter } from './receipt-printer/ReceiptPrinterView';
 import type { ComponentType } from 'react';
+import { AB_TESTS_IN_FLIGHT, AB_TESTS_SCENES, abTestsSeed } from './ab-tests';
+import { ACHIEVEMENT_IN_FLIGHT, ACHIEVEMENT_SCENES, achievementSeed } from './achievement';
+import { HEATMAP_IN_FLIGHT, HEATMAP_SCENES, heatmapSeed } from './activity-heatmap';
+import { BRAND_IN_FLIGHT, BRAND_SCENES, brandSeed } from './brand-kit';
+import { BUDGET_IN_FLIGHT, BUDGET_SCENES, budgetSeed } from './budget-allocation';
+import { BUDGET_TRACKER_IN_FLIGHT, BUDGET_TRACKER_SCENES, budgetTrackerSeed } from './budget-tracker';
+import { CALENDAR_IN_FLIGHT, CALENDAR_SCENES, calendarSeed } from './calendar-sync';
+import { CAROUSEL_IN_FLIGHT, CAROUSEL_SCENES, carouselSeed } from './carousel';
+import { CICD_IN_FLIGHT, CICD_SCENES, cicdSeed } from './cicd-setup';
+import { COMBO_IN_FLIGHT, COMBO_SCENES, comboSeed } from './combobox';
+import { COMPLETION_IN_FLIGHT, COMPLETION_SCENES, completionSeed } from './completion';
+import { CONTACT_IN_FLIGHT, CONTACT_SCENES, contactSeed } from './contact-import';
+import { FUNNEL_IN_FLIGHT, FUNNEL_SCENES, funnelSeed } from './conversion-funnel';
+import { SPIDER_IN_FLIGHT, SPIDER_SCENES, spiderSeed } from './criteria-spider';
+import { DASHBOARD_IN_FLIGHT, DASHBOARD_SCENES, dashboardSeed } from './dashboard-config';
+import { dataViewSeed } from './data-view';
+import { DEPARTMENT_IN_FLIGHT, DEPARTMENT_SCENES, departmentSeed } from './department-setup';
+import { EVENT_IN_FLIGHT, EVENT_SCENES, eventSeed } from './event-reminder';
+import { FEED_IN_FLIGHT, FEED_SCENES, feedSeed } from './expandable-feed';
+import { EXPORT_IN_FLIGHT, EXPORT_SCENES, exportSeed } from './export-format';
+import { FALLBACK_IN_FLIGHT, FALLBACK_SCENES, fallbackSeed } from './fallback';
+import { FILE_SHARED_IN_FLIGHT, FILE_SHARED_SCENES, fileSharedSeed } from './file-shared';
+import { FILTER_IN_FLIGHT, FILTER_SCENES, filterSeed } from './filter-panel';
+import { FLOATING_IN_FLIGHT, FLOATING_SCENES, floatingSeed } from './floating';
+import { GRID_IN_FLIGHT, GRID_SCENES } from './grid';
+import { HELP_IN_FLIGHT, HELP_SCENES, helpSeed } from './help-center';
+import { ID_IN_FLIGHT, ID_SCENES, idSeed } from './id-verification';
+import { MARK_READ_IN_FLIGHT, MARK_READ_SCENES, markReadSeed } from './mark-read';
+import { STEP_IN_FLIGHT, STEP_SCENES, stepSeed } from './onboarding-step';
+import { PASSWORD_IN_FLIGHT, PASSWORD_SCENES, passwordSeed } from './password-expiry';
+import { PAYMENT_IN_FLIGHT, PAYMENT_SCENES, paymentSeed } from './payment-alert';
+import { PERMISSIONS_IN_FLIGHT, PERMISSIONS_SCENES, permissionsSeed } from './permissions-setup';
+import { PLAN_IN_FLIGHT, PLAN_SCENES, planSeed } from './plan-selection';
+import { QUEUE_IN_FLIGHT, QUEUE_SCENES, queueSeed } from './queue-status';
+import { QUICK_ACTIONS_IN_FLIGHT, QUICK_ACTIONS_SCENES, quickActionsSeed } from './quick-actions';
+import { RATE_LIMIT_IN_FLIGHT, RATE_LIMIT_SCENES, rateLimitSeed } from './rate-limit';
+import { RECEIPT_PRINTER_IN_FLIGHT, RECEIPT_PRINTER_SCENES, receiptPrinterSeed } from './receipt-printer';
+import { SCORE_IN_FLIGHT, SCORE_SCENES, scoreSeed } from './score-summary';
+import { SEAT_IN_FLIGHT, SEAT_SCENES, seatSeed } from './seat-allocation';
+import { SETUP_TASKS_IN_FLIGHT, SETUP_TASKS_SCENES, setupTasksSeed } from './setup-tasks';
+import { SHIPPING_IN_FLIGHT, SHIPPING_SCENES, shippingSeed } from './shipping-update';
+import { STATUS_IN_FLIGHT, STATUS_SCENES, statusSeed } from './status-page';
+import { TABBED_IN_FLIGHT, TABBED_SCENES, tabbedSeed } from './tabbed';
+import { TABLE_IN_FLIGHT, TABLE_SCENES } from './table';
+import { TAG_CLOUD_IN_FLIGHT, TAG_CLOUD_SCENES, tagCloudSeed } from './tag-cloud';
+import { TAG_IN_FLIGHT, TAG_SCENES, tagSeed } from './tag-creation';
+import { TERMS_IN_FLIGHT, TERMS_SCENES, termsSeed } from './terms-consent';
+import { TRIAL_IN_FLIGHT, TRIAL_SCENES, trialSeed } from './trial-countdown';
+import { TWO_FACTOR_IN_FLIGHT, TWO_FACTOR_SCENES, twoFactorSeed } from './two-factor';
+
 import type { OnboardingComponent } from './shared/contract';
 import type { GuardProps } from './shared/guard';
 
@@ -105,3 +155,61 @@ export const ONBOARDING_VIEWS: Record<OnboardingComponent, ComponentType<Record<
   'tag-cloud': TagCloud,
   'receipt-printer': ReceiptPrinter,
 } as unknown as Record<OnboardingComponent, ComponentType<Record<string, unknown> & GuardProps>>;
+
+/**
+ * **Every New component's scenes, by name** — the scene list, the seed that puts the component in
+ * each scene, and which scenes are an operation in flight (hold its operation to keep them still).
+ * With `sceneProps` this reaches every state a component draws; the agent-editable test walks it, and
+ * an agent can ask for any of them.
+ */
+export type OnboardingScenes = { scenes: readonly string[]; seed: (config: never, scene: never) => unknown; inFlight: readonly string[] };
+export const ONBOARDING_SCENES: Record<OnboardingComponent, OnboardingScenes> = {
+  'ab-tests': { scenes: AB_TESTS_SCENES, seed: abTestsSeed as OnboardingScenes['seed'], inFlight: AB_TESTS_IN_FLIGHT },
+  'achievement': { scenes: ACHIEVEMENT_SCENES, seed: achievementSeed as OnboardingScenes['seed'], inFlight: ACHIEVEMENT_IN_FLIGHT },
+  'activity-heatmap': { scenes: HEATMAP_SCENES, seed: heatmapSeed as OnboardingScenes['seed'], inFlight: HEATMAP_IN_FLIGHT },
+  'brand-kit': { scenes: BRAND_SCENES, seed: brandSeed as OnboardingScenes['seed'], inFlight: BRAND_IN_FLIGHT },
+  'budget-allocation': { scenes: BUDGET_SCENES, seed: budgetSeed as OnboardingScenes['seed'], inFlight: BUDGET_IN_FLIGHT },
+  'budget-tracker': { scenes: BUDGET_TRACKER_SCENES, seed: budgetTrackerSeed as OnboardingScenes['seed'], inFlight: BUDGET_TRACKER_IN_FLIGHT },
+  'calendar-sync': { scenes: CALENDAR_SCENES, seed: calendarSeed as OnboardingScenes['seed'], inFlight: CALENDAR_IN_FLIGHT },
+  'carousel': { scenes: CAROUSEL_SCENES, seed: carouselSeed as OnboardingScenes['seed'], inFlight: CAROUSEL_IN_FLIGHT },
+  'cicd-setup': { scenes: CICD_SCENES, seed: cicdSeed as OnboardingScenes['seed'], inFlight: CICD_IN_FLIGHT },
+  'combobox': { scenes: COMBO_SCENES, seed: comboSeed as OnboardingScenes['seed'], inFlight: COMBO_IN_FLIGHT },
+  'completion': { scenes: COMPLETION_SCENES, seed: completionSeed as OnboardingScenes['seed'], inFlight: COMPLETION_IN_FLIGHT },
+  'contact-import': { scenes: CONTACT_SCENES, seed: contactSeed as OnboardingScenes['seed'], inFlight: CONTACT_IN_FLIGHT },
+  'conversion-funnel': { scenes: FUNNEL_SCENES, seed: funnelSeed as OnboardingScenes['seed'], inFlight: FUNNEL_IN_FLIGHT },
+  'criteria-spider': { scenes: SPIDER_SCENES, seed: spiderSeed as OnboardingScenes['seed'], inFlight: SPIDER_IN_FLIGHT },
+  'dashboard-config': { scenes: DASHBOARD_SCENES, seed: dashboardSeed as OnboardingScenes['seed'], inFlight: DASHBOARD_IN_FLIGHT },
+  'department-setup': { scenes: DEPARTMENT_SCENES, seed: departmentSeed as OnboardingScenes['seed'], inFlight: DEPARTMENT_IN_FLIGHT },
+  'event-reminder': { scenes: EVENT_SCENES, seed: eventSeed as OnboardingScenes['seed'], inFlight: EVENT_IN_FLIGHT },
+  'expandable-feed': { scenes: FEED_SCENES, seed: feedSeed as OnboardingScenes['seed'], inFlight: FEED_IN_FLIGHT },
+  'export-format': { scenes: EXPORT_SCENES, seed: exportSeed as OnboardingScenes['seed'], inFlight: EXPORT_IN_FLIGHT },
+  'fallback': { scenes: FALLBACK_SCENES, seed: fallbackSeed as OnboardingScenes['seed'], inFlight: FALLBACK_IN_FLIGHT },
+  'file-shared': { scenes: FILE_SHARED_SCENES, seed: fileSharedSeed as OnboardingScenes['seed'], inFlight: FILE_SHARED_IN_FLIGHT },
+  'filter-panel': { scenes: FILTER_SCENES, seed: filterSeed as OnboardingScenes['seed'], inFlight: FILTER_IN_FLIGHT },
+  'floating': { scenes: FLOATING_SCENES, seed: floatingSeed as OnboardingScenes['seed'], inFlight: FLOATING_IN_FLIGHT },
+  'grid': { scenes: GRID_SCENES, seed: dataViewSeed as OnboardingScenes['seed'], inFlight: GRID_IN_FLIGHT },
+  'help-center': { scenes: HELP_SCENES, seed: helpSeed as OnboardingScenes['seed'], inFlight: HELP_IN_FLIGHT },
+  'id-verification': { scenes: ID_SCENES, seed: idSeed as OnboardingScenes['seed'], inFlight: ID_IN_FLIGHT },
+  'mark-read': { scenes: MARK_READ_SCENES, seed: markReadSeed as OnboardingScenes['seed'], inFlight: MARK_READ_IN_FLIGHT },
+  'onboarding-step': { scenes: STEP_SCENES, seed: stepSeed as OnboardingScenes['seed'], inFlight: STEP_IN_FLIGHT },
+  'password-expiry': { scenes: PASSWORD_SCENES, seed: passwordSeed as OnboardingScenes['seed'], inFlight: PASSWORD_IN_FLIGHT },
+  'payment-alert': { scenes: PAYMENT_SCENES, seed: paymentSeed as OnboardingScenes['seed'], inFlight: PAYMENT_IN_FLIGHT },
+  'permissions-setup': { scenes: PERMISSIONS_SCENES, seed: permissionsSeed as OnboardingScenes['seed'], inFlight: PERMISSIONS_IN_FLIGHT },
+  'plan-selection': { scenes: PLAN_SCENES, seed: planSeed as OnboardingScenes['seed'], inFlight: PLAN_IN_FLIGHT },
+  'queue-status': { scenes: QUEUE_SCENES, seed: queueSeed as OnboardingScenes['seed'], inFlight: QUEUE_IN_FLIGHT },
+  'quick-actions': { scenes: QUICK_ACTIONS_SCENES, seed: quickActionsSeed as OnboardingScenes['seed'], inFlight: QUICK_ACTIONS_IN_FLIGHT },
+  'rate-limit': { scenes: RATE_LIMIT_SCENES, seed: rateLimitSeed as OnboardingScenes['seed'], inFlight: RATE_LIMIT_IN_FLIGHT },
+  'receipt-printer': { scenes: RECEIPT_PRINTER_SCENES, seed: receiptPrinterSeed as OnboardingScenes['seed'], inFlight: RECEIPT_PRINTER_IN_FLIGHT },
+  'score-summary': { scenes: SCORE_SCENES, seed: scoreSeed as OnboardingScenes['seed'], inFlight: SCORE_IN_FLIGHT },
+  'seat-allocation': { scenes: SEAT_SCENES, seed: seatSeed as OnboardingScenes['seed'], inFlight: SEAT_IN_FLIGHT },
+  'setup-tasks': { scenes: SETUP_TASKS_SCENES, seed: setupTasksSeed as OnboardingScenes['seed'], inFlight: SETUP_TASKS_IN_FLIGHT },
+  'shipping-update': { scenes: SHIPPING_SCENES, seed: shippingSeed as OnboardingScenes['seed'], inFlight: SHIPPING_IN_FLIGHT },
+  'status-page': { scenes: STATUS_SCENES, seed: statusSeed as OnboardingScenes['seed'], inFlight: STATUS_IN_FLIGHT },
+  'tabbed': { scenes: TABBED_SCENES, seed: tabbedSeed as OnboardingScenes['seed'], inFlight: TABBED_IN_FLIGHT },
+  'table': { scenes: TABLE_SCENES, seed: dataViewSeed as OnboardingScenes['seed'], inFlight: TABLE_IN_FLIGHT },
+  'tag-cloud': { scenes: TAG_CLOUD_SCENES, seed: tagCloudSeed as OnboardingScenes['seed'], inFlight: TAG_CLOUD_IN_FLIGHT },
+  'tag-creation': { scenes: TAG_SCENES, seed: tagSeed as OnboardingScenes['seed'], inFlight: TAG_IN_FLIGHT },
+  'terms-consent': { scenes: TERMS_SCENES, seed: termsSeed as OnboardingScenes['seed'], inFlight: TERMS_IN_FLIGHT },
+  'trial-countdown': { scenes: TRIAL_SCENES, seed: trialSeed as OnboardingScenes['seed'], inFlight: TRIAL_IN_FLIGHT },
+  'two-factor': { scenes: TWO_FACTOR_SCENES, seed: twoFactorSeed as OnboardingScenes['seed'], inFlight: TWO_FACTOR_IN_FLIGHT },
+};

package/src/components/threshold-flow/ThresholdFlowView.tsx

@@ -6,8 +6,8 @@ import {
 import { AmountField, BlockCard, Button, Callout, MetaChip } from '../../ds';
 import { DENSITIES, useDs, type DataType, type DensityName } from '../../tokens';
 import {
-  copyFor, nounFor, validateThresholdFlow,
-  type ThresholdFlowConfig, type ThresholdFlowDocument, type ThresholdItem,
+  THRESHOLD_FLOW_COPY, copyFor, fillCopy, validateThresholdFlow,
+  type ThresholdFlowConfig, type ThresholdFlowCopy, type ThresholdFlowDocument, type ThresholdItem,
 } from './contract';
 import { liveStages, type DraftStage, type ThresholdFlowSeed } from './engine';
 import { useThresholdFlow, type ThresholdFlowOperations } from './runtime';
@@ -50,10 +50,14 @@ export type ThresholdFlowViewProps = {
 export function ThresholdFlowView(props: ThresholdFlowViewProps) {
   const issues = useMemo(() => validateThresholdFlow(props.doc), [props.doc]);
   if (issues.length) {
-    /* Refused, deterministically, and said out loud — an invalid document never half-renders. */
+    /* Refused, deterministically, and said out loud — an invalid document never half-renders. Its
+       copy is read defensively: the document is the thing that failed validation. */
+    const given = props.doc?.props?.copy;
+    const word = (k: 'refused' | 'untitled') =>
+      given && typeof given === 'object' && typeof given[k] === 'string' && given[k].trim() ? given[k] : THRESHOLD_FLOW_COPY[k];
     return (
-      <BlockCard title={typeof props.doc?.props?.title === 'string' ? props.doc.props.title : 'ThresholdFlow'} testID={props.testID}>
-        <Callout alert title="This flow can’t be shown">
+      <BlockCard title={typeof props.doc?.props?.title === 'string' ? props.doc.props.title : word('untitled')} testID={props.testID}>
+        <Callout alert title={word('refused')}>
           {issues.map(i => i.message).join(' ')}
         </Callout>
       </BlockCard>
@@ -82,18 +86,19 @@ function ValidFlow({ doc, operations, initial, loading = false, density, onChang
   const initialIds = useRef(new Set(state.stages.map(s => s.id))).current;
 
   /* ── Header status (M9 swaps between these) ── */
-  const chip = state.phase === 'live' ? <MetaChip kind="status" status="executed">Live</MetaChip>
+  const countText = fillCopy(total === 1 ? copy.countOne : copy.countOther, { count: total });
+  const chip = state.phase === 'live' ? <MetaChip kind="status" status="executed">{copy.statusLive}</MetaChip>
     : state.phase === 'activating' ? <MetaChip kind="count" hue="neutral">{copy.activating}</MetaChip>
-    : state.phase === 'error' || errCount ? <MetaChip kind="status" status="needsUser">Needs attention</MetaChip>
-    : <MetaChip kind="count" hue="neutral">{`${total} ${nounFor(config, total)}`}</MetaChip>;
+    : state.phase === 'error' || errCount ? <MetaChip kind="status" status="needsUser">{copy.statusAttention}</MetaChip>
+    : <MetaChip kind="count" hue="neutral">{countText}</MetaChip>;
   const chipKey = state.phase === 'editing' && errCount ? 'attention' : state.phase === 'editing' ? `count-${total}` : state.phase;
   const chipFade = useSwap(chipKey);
 
   /* ── Footer ── */
   const hint = state.phase === 'live' ? copy.live
     : state.phase === 'activating' ? copy.checking
-    : errCount ? (errCount === 1 ? `1 ${nounFor(config, 1)} needs fixing` : `${errCount} ${nounFor(config, errCount)} need fixing`)
-    : `${total} ${nounFor(config, total)}${copy.unit ? ` · ${copy.unit}` : ''}`;
+    : errCount ? fillCopy(errCount === 1 ? copy.fixOne : copy.fixOther, { count: errCount })
+    : `${countText}${copy.unit ? ` · ${copy.unit}` : ''}`;
   const primaryLabel = state.phase === 'activating' ? copy.activating : state.phase === 'error' ? copy.retry : copy.action;
   const primaryFade = useSwap(primaryLabel);
 
@@ -103,7 +108,7 @@ function ValidFlow({ doc, operations, initial, loading = false, density, onChang
       <>
         {(config.templates?.length ?? 0) > total ? (
           <Button variant="ghost" size="small" leadingGlyph="plus" disabled={!rt.canAdd} onPress={() => rt.dispatch({ type: 'add' })}>
-            {`Add ${nounFor(config, 1)}`}
+            {copy.add}
           </Button>
         ) : null}
         <MotionView style={{ opacity: primaryFade }}>
@@ -133,6 +138,7 @@ function ValidFlow({ doc, operations, initial, loading = false, density, onChang
       hue={config.hue}
       meta={loading ? undefined : <MotionView style={{ opacity: chipFade }}>{chip}</MotionView>}
       status={status}
+      loadingLabel={fillCopy(copy.loading, { title: config.title })}
       empty={{
         title: copy.emptyTitle,
         body: copy.emptyBody,
@@ -145,13 +151,14 @@ function ValidFlow({ doc, operations, initial, loading = false, density, onChang
       {state.phase === 'error' ? <Callout alert title={copy.errorTitle}>{state.error?.message ?? ''}</Callout> : null}
       {/* Locked (activating, live) is carried by disabled fields and the absence of Remove — NOT the
           prototype's 55% opacity, which would take secondary text below AA contrast. */}
-      <Box role="list" aria-label={`${config.title} ${nounFor(config, 2)}`}>
+      <Box role="list" aria-label={fillCopy(copy.listLabel, { title: config.title })}>
         {state.stages.map(stage => (
           <StageRow
             key={stage.id}
             stage={stage}
             index={live.findIndex(x => x.id === stage.id)}
             config={config}
+            copy={copy}
             error={stage.leaving ? undefined : errors[stage.id]}
             flagged={state.phase === 'error' && state.error?.stageId === stage.id}
             live={state.phase === 'live'}
@@ -172,12 +179,13 @@ function ValidFlow({ doc, operations, initial, loading = false, density, onChang
 }
 
 function StageRow({
-  stage, index, config, error, flagged, live, locked, last, appear, controlH, pad,
+  stage, index, config, copy, error, flagged, live, locked, last, appear, controlH, pad,
   onEdit, onToggle, onRemove, onGone,
 }: {
   stage: DraftStage;
   index: number;
   config: ThresholdFlowConfig;
+  copy: ThresholdFlowCopy;
   error?: string;
   flagged: boolean;
   live: boolean;
@@ -228,7 +236,7 @@ function StageRow({
               {stage.role ? <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{stage.role}</Text> : null}
             </Box>
             {!locked && !stage.leaving ? (
-              <Pressable aria-label={`Remove ${stage.title}`} onPress={onRemove} width={32} height={32} radius="pill">
+              <Pressable aria-label={fillCopy(copy.remove, { title: stage.title })} onPress={onRemove} width={32} height={32} radius="pill">
                 <Icon name="trash" size={15} color={colors.textSecondary} />
               </Pressable>
             ) : null}