@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/grid/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "grid",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -241,7 +243,14 @@
         "label": "Status",
         "type": "status",
         "width": 150,
-        "gen": null,
+        "gen": {
+          "pool": [
+            "Available",
+            "In a meeting",
+            "Out of office",
+            "Away"
+          ]
+        },
         "tones": {
           "Available": "mint",
           "In a meeting": "plain",
@@ -252,7 +261,173 @@
     ],
     "assigneeRoles": [
       "People ops"
-    ]
+    ],
+    "sortingLabel": "Sorting…",
+    "allLoadedLabel": "All {count} loaded",
+    "loadedOfLabel": "{n} of {count} loaded",
+    "selectedLabel": "{n} selected",
+    "notShownLabel": "{n} not shown",
+    "selectLoadedLabel": "Select {n} loaded",
+    "deleteTitle": "Delete {count}?",
+    "exportTitle": "Export {count}",
+    "assignToLabel": "Assign to {count}",
+    "replaceAssigneesLabel": "Replace assignees on {count}",
+    "assignTitle": "Assign {count}",
+    "assignedText": "Assigned {count} to {to}",
+    "peopleCountLabel": "{n} people",
+    "deleteFailedText": "Couldn’t delete {count}",
+    "deletedText": "{count} deleted",
+    "openedText": "Opened {title}",
+    "exportedText": "Exported {count}",
+    "assignLabel": "Assign",
+    "assignEmptyLabel": "Assign to…",
+    "searchPeoplePlaceholder": "Search people",
+    "dismissLabel": "Dismiss notification",
+    "deleteLabel": "Delete",
+    "deletingLabel": "Deleting…",
+    "cancelLabel": "Cancel",
+    "confirmDeleteLabel": "Confirm delete",
+    "deleteWarningText": "This can’t be undone.",
+    "closeExportLabel": "Close export",
+    "sortByLabel": "Sort by",
+    "sortNoneLabel": "None",
+    "sortAscOptionLabel": "{label}, ascending",
+    "sortDescOptionLabel": "{label}, descending",
+    "moreSortsLabel": "+{n} sort",
+    "multiSortLabel": "Multi-sort",
+    "multiSortCountLabel": "Multi-sort · {n}",
+    "sortOrderLabel": "Sort order",
+    "multiSortHint": "Click to cycle ascending, descending, off",
+    "ascendingLabel": "Ascending",
+    "descendingLabel": "Descending",
+    "sortOffLabel": "Off",
+    "clearSortLabel": "Clear sort",
+    "sortColumnLabel": "Sort by {label}. Shift to add a sort",
+    "sortColumnAscLabel": "Sort by {label}, currently ascending. Shift to add a sort",
+    "sortColumnDescLabel": "Sort by {label}, currently descending. Shift to add a sort",
+    "selectRowLabel": "Select {title}",
+    "clearLabel": "Clear",
+    "exportLabel": "Export",
+    "footerLoadingLabel": "Loading…",
+    "copyTextLabel": "Copy as text",
+    "copiedLabel": "Copied",
+    "loadMoreLabel": "Load more",
+    "loadingMoreLabel": "Loading more…",
+    "loadMoreErrorText": "Couldn’t load more",
+    "opensInNewTabLabel": "{text} (opens in a new tab)",
+    "scoreGoodLabel": "good",
+    "scoreFairLabel": "fair",
+    "scoreLowLabel": "low",
+    "monthNames": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    "relativePastText": "{t} ago",
+    "relativeFutureText": "in {t}",
+    "minutesShortText": "{n}m",
+    "hoursShortText": "{n}h",
+    "daysShortText": "{n}d",
+    "moreRowsText": "and {n} more",
+    "exportFormat": {
+      "loadingLabel": "Loading {title}",
+      "attentionLabel": "Needs attention",
+      "loadErrorTitle": "Couldn’t load this step",
+      "loadErrorBody": "Nothing was lost. Retry to load it again.",
+      "retryLabel": "Retry",
+      "emptyCta": "Refresh",
+      "type": "file",
+      "icon": "download",
+      "title": "Default export format",
+      "subtitle": "Used whenever someone exports from Analytics.",
+      "sampleName": "weekly-signups",
+      "defaultFormat": "csv",
+      "formats": [
+        {
+          "value": "csv",
+          "label": "CSV",
+          "ext": "csv",
+          "description": "Opens in any spreadsheet",
+          "preview": "date,signups,source\n2026-09-14,1284,organic\n2026-09-15,1310,paid\n2026-09-16,1197,referral\n2026-09-17,1352,organic",
+          "binary": false
+        },
+        {
+          "value": "json",
+          "label": "JSON",
+          "ext": "json",
+          "description": "For scripts and APIs",
+          "preview": "[\n  { \"date\": \"2026-09-14\", \"signups\": 1284, \"source\": \"organic\" },\n  { \"date\": \"2026-09-15\", \"signups\": 1310, \"source\": \"paid\" },\n  { \"date\": \"2026-09-16\", \"signups\": 1197, \"source\": \"referral\" }\n]",
+          "binary": false
+        },
+        {
+          "value": "xlsx",
+          "label": "XLSX",
+          "ext": "xlsx",
+          "description": "Excel workbook with types kept",
+          "preview": "Workbook · 1 sheet\nSheet 1 · 3 columns · 1,284 rows\nColumns: date (date), signups (number), source (text)",
+          "binary": true
+        },
+        {
+          "value": "parquet",
+          "label": "Parquet",
+          "ext": "parquet",
+          "description": "Columnar, for data warehouses",
+          "preview": "Parquet · snappy compression\n1 row group · 3 columns · 1,284 rows\nSchema: date DATE, signups INT32, source STRING",
+          "binary": true
+        }
+      ],
+      "exportLabel": "Export",
+      "exportingLabel": "Exporting…",
+      "exportedLabel": "Exported",
+      "exportedHint": "Saved to Downloads",
+      "copyLabel": "Copy",
+      "copiedLabel": "Copied",
+      "failTitle": "Export failed",
+      "failBody": "The file couldn’t be generated. Your settings haven’t changed; retry to try again.",
+      "emptyTitle": "No formats available",
+      "emptyBody": "Exports are turned off for this workspace.",
+      "failedChipLabel": "Export failed",
+      "generatingHintTemplate": "Generating {file}…",
+      "formatGroupLabel": "Export format",
+      "previewLabel": "Preview",
+      "copyAriaTemplate": "{copy} preview",
+      "structureLabel": "structure"
+    },
+    "assignPicker": {
+      "personCountOne": "{n} person",
+      "personCountOther": "{n} people",
+      "assignedToast": "Assigned {people}",
+      "assignFailedToast": "Couldn’t assign {people}",
+      "assignFailedInline": "Couldn’t assign. Nothing changed.",
+      "applyingLabel": "Assigning…",
+      "cancelLabel": "Cancel",
+      "maxHint": "Up to {max} people",
+      "selectedHead": "Selected · {n}",
+      "suggestedHead": "Suggested",
+      "resultsHead": "Results · {n}",
+      "resultsHeadEmpty": "Results",
+      "noResultsText": "No people match ‘{q}’",
+      "liveFoundOne": "{n} person found",
+      "liveFoundOther": "{n} people found",
+      "liveNoneFound": "No people found",
+      "searchingLabel": "Searching",
+      "clearSearchLabel": "Clear search",
+      "clearLabel": "Clear",
+      "listLabel": "People",
+      "noSuggText": "Type to search",
+      "searchErrorText": "Couldn’t search people",
+      "loadingMoreLabel": "Loading more…",
+      "loadMoreLabel": "Load more"
+    }
   },
   "cases": {
     "case1": {},
@@ -339,7 +514,14 @@
           "label": "Status",
           "type": "status",
           "width": 130,
-          "gen": null,
+          "gen": {
+            "pool": [
+              "Active",
+              "Low stock",
+              "Draft",
+              "Archived"
+            ]
+          },
           "tones": {
             "Active": "mint",
             "Low stock": "apricot",
@@ -540,7 +722,15 @@
           "label": "Stage",
           "type": "status",
           "width": 130,
-          "gen": null,
+          "gen": {
+            "pool": [
+              "Applied",
+              "Screen",
+              "Interview",
+              "Offer",
+              "On hold"
+            ]
+          },
           "tones": {
             "Applied": "plain",
             "Screen": "plain",
@@ -623,7 +813,14 @@
           "label": "Status",
           "type": "status",
           "width": 130,
-          "gen": null,
+          "gen": {
+            "pool": [
+              "Succeeded",
+              "Failed",
+              "Running",
+              "Cancelled"
+            ]
+          },
           "tones": {
             "Succeeded": "mint",
             "Failed": "apricot",

package/src/components/onboarding/help-center/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "help-center",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",

package/src/components/onboarding/id-verification/IdVerificationView.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo } from 'react';
 import { Box, Icon, Pressable, Text } from '../../../core';
 import { Button, Callout, ProgressBar } from '../../../ds';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import { ONBOARDING_TIMING, createMockProgressOperation, type OnboardingOperation, type ProgressOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
@@ -130,24 +130,24 @@ function Valid({
       <Box gap="s4">
         <Box row gap="s3">
           {state.sides.map((s, i) => (
-            <SideSlot key={i} side={s} label={config.sides[i]!} docLabel={config.docLabel} locked={v.locked} onUpload={() => startUpload(i)} />
+            <SideSlot key={i} side={s} label={config.sides[i]!} config={config} locked={v.locked} onUpload={() => startUpload(i)} />
           ))}
           {state.sides.length === 1 ? <Box flex={1} /> : null}
         </Box>
         <Box gap="s2">
-          <Text nativeID={`idv-checks-${config.docLabel.replace(/\W/g, '')}`} variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>Quality checks</Text>
+          <Text nativeID={`idv-checks-${config.docLabel.replace(/\W/g, '')}`} variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{config.checksTitle}</Text>
           <Box role="list" aria-labelledby={`idv-checks-${config.docLabel.replace(/\W/g, '')}`} gap="s2">
             {config.checks.map((label, i) => (
-              <CheckRow key={label} label={label} mark={v.checks[i]!} hint={config.failHint} onFix={() => startUpload(config.failSide)} />
+              <CheckRow key={label} label={label} mark={v.checks[i]!} config={config} onFix={() => startUpload(config.failSide)} />
             ))}
           </Box>
         </Box>
-        <StatusCallout {...v.callout} onRestart={() => send({ type: 'restart' })} />
-        {state.review === 'failed' ? <Callout alert strong title="Couldn’t submit your document">Nothing was sent. Check your connection, then retry.</Callout> : null}
+        <StatusCallout {...v.callout} againLabel={config.uploadAgainLabel} onRestart={() => send({ type: 'restart' })} />
+        {state.review === 'failed' ? <Callout alert strong title={config.submitErrorTitle}>{config.submitErrorBody}</Callout> : null}
         {/* A failed upload is said, not silently emptied — until that side is uploaded again. */}
         {state.sides.some(x => x.failed) ? (
-          <Callout alert strong title={`Couldn’t upload the ${config.sides.filter((_, i) => state.sides[i]?.failed).join(' and ').toLowerCase()}`}>
-            Nothing was saved. Check your connection, then upload it again.
+          <Callout alert strong title={fill(config.uploadErrorTitle, { sides: config.sides.filter((_, i) => state.sides[i]?.failed).join(` ${config.sidesJoinText} `).toLowerCase() })}>
+            {config.uploadErrorBody}
           </Callout>
         ) : null}
       </Box>
@@ -155,7 +155,8 @@ function Valid({
   );
 }
 
-function SideSlot({ side, label, docLabel, locked, onUpload }: { side: IdSide; label: string; docLabel: string; locked: boolean; onUpload: () => void }) {
+function SideSlot({ side, label, config: c, locked, onUpload }: { side: IdSide; label: string; config: IdVerificationSettings; locked: boolean; onUpload: () => void }) {
+  const names = { doc: c.docLabel, side: label };
   const { colors } = useDs();
   /* 16:10, and never shorter than what the slot says — at phone width a half-width slot would
      otherwise clip its own words. */
@@ -168,30 +169,30 @@ function SideSlot({ side, label, docLabel, locked, onUpload }: { side: IdSide; l
           <Pressable
             onPress={onUpload}
             disabled={locked}
-            aria-label={`Upload ${docLabel} · ${label}`}
+            aria-label={fill(c.uploadAriaLabel, names)}
             align="center"
             justify="center"
             gap="s1"
             style={{ ...frame, padding: 12, borderWidth: 1, borderStyle: 'dashed', borderColor: colors.hairlineStrong, backgroundColor: colors.surface1 }}>
             <Icon name="upload" size={18} color={colors.textSecondary} />
-            <Text variant="caption" color="textPrimary" align="center" style={{ fontSize: 12, fontWeight: '600' }}>Drop a file here or click to upload</Text>
-            <Text variant="caption" color="textSecondary" align="center" style={{ fontSize: 12 }}>JPG or PNG · up to 10 MB</Text>
+            <Text variant="caption" color="textPrimary" align="center" style={{ fontSize: 12, fontWeight: '600' }}>{c.dropLabel}</Text>
+            <Text variant="caption" color="textSecondary" align="center" style={{ fontSize: 12 }}>{c.dropHint}</Text>
           </Pressable>
         ) : null}
         {side.phase === 'busy' ? (
           <Box justify="center" gap="s2" aria-busy style={{ ...frame, padding: 16, borderWidth: 1, borderColor: colors.hairlineStrong }}>
             <Box row justify="space-between">
-              <Text variant="caption" color="textPrimary" style={{ fontSize: 12 }}>Uploading…</Text>
+              <Text variant="caption" color="textPrimary" style={{ fontSize: 12 }}>{c.uploadingLabel}</Text>
               <Text variant="caption" color="textPrimary" numeric style={{ fontSize: 12 }}>{`${side.pct}%`}</Text>
             </Box>
-            <ProgressBar bare tone="accent" label={`Upload ${docLabel} · ${label}`} value={side.pct} max={100} />
+            <ProgressBar bare tone="accent" label={fill(c.uploadAriaLabel, names)} value={side.pct} max={100} />
           </Box>
         ) : null}
         {side.phase === 'filled' ? (
           <Box align="center" justify="center" gap="s1" style={{ ...frame, padding: 12, borderWidth: 1, borderColor: colors.hairlineStrong, backgroundColor: colors.surfaceSunken }}>
-            <Box role="img" aria-label={`${label} uploaded · preview hidden`}><Icon name="id-card" size={28} color={colors.textSecondary} /></Box>
-            <Text variant="caption" color="textSecondary" numeric align="center" style={{ fontSize: 12 }}>{placeholderFileName(label)}</Text>
-            <Button variant="secondary" size="xsmall" disabled={locked} aria-label={`Replace ${label}`} onPress={onUpload}>Replace</Button>
+            <Box role="img" aria-label={fill(c.uploadedAriaLabel, names)}><Icon name="id-card" size={28} color={colors.textSecondary} /></Box>
+            <Text variant="caption" color="textSecondary" numeric align="center" style={{ fontSize: 12 }}>{placeholderFileName(label, c.placeholderFileText)}</Text>
+            <Button variant="secondary" size="xsmall" disabled={locked} aria-label={fill(c.replaceAriaLabel, names)} onPress={onUpload}>{c.replaceLabel}</Button>
           </Box>
         ) : null}
       </Slot>
@@ -199,9 +200,10 @@ function SideSlot({ side, label, docLabel, locked, onUpload }: { side: IdSide; l
   );
 }
 
-const CHECK_WORD: Record<CheckMark, string> = { pending: ', not checked yet', running: ', checking', pass: ', passed', fail: ', failed' };
+const checkWord = (c: IdVerificationSettings, mark: CheckMark) =>
+  (mark === 'pending' ? c.checkPendingText : mark === 'running' ? c.checkRunningText : mark === 'pass' ? c.checkPassedText : c.checkFailedText);
 
-function CheckRow({ label, mark, hint, onFix }: { label: string; mark: CheckMark; hint: string; onFix: () => void }) {
+function CheckRow({ label, mark, config: c, onFix }: { label: string; mark: CheckMark; config: IdVerificationSettings; onFix: () => void }) {
   const { colors } = useDs();
   return (
     <Box role="listitem" row align="flex-start" gap="s2">
@@ -215,16 +217,16 @@ function CheckRow({ label, mark, hint, onFix }: { label: string; mark: CheckMark
       </Box>
       <Box flex={1} gap="s1" style={{ minWidth: 0 }}>
         <Text variant="caption" style={{ fontSize: 13, color: mark === 'pass' || mark === 'fail' ? colors.textPrimary : colors.textSecondary }}>{label}</Text>
-        <Hidden>{CHECK_WORD[mark]}</Hidden>
-        {mark === 'fail' ? <Text variant="caption" style={{ fontSize: 12, fontWeight: '700', color: colors.status.needsUser }}>{hint}</Text> : null}
+        <Hidden>{`, ${checkWord(c, mark)}`}</Hidden>
+        {mark === 'fail' ? <Text variant="caption" style={{ fontSize: 12, fontWeight: '700', color: colors.status.needsUser }}>{c.failHint}</Text> : null}
       </Box>
-      {mark === 'fail' ? <Button variant="secondary" size="xsmall" onPress={onFix}>Upload again</Button> : null}
+      {mark === 'fail' ? <Button variant="secondary" size="xsmall" onPress={onFix}>{c.uploadAgainLabel}</Button> : null}
     </Box>
   );
 }
 
 /** D9: the review's status — the well (how it works, pending), mint (verified) or apricot (rejected, with Upload again). */
-function StatusCallout({ tone, title, body, onRestart }: { tone: 'plain' | 'mint' | 'apricot'; title: string; body: string; onRestart: () => void }) {
+function StatusCallout({ tone, title, body, againLabel, onRestart }: { tone: 'plain' | 'mint' | 'apricot'; title: string; body: string; againLabel: string; onRestart: () => void }) {
   const { colors } = useDs();
   const skin = tone === 'mint' ? { bg: colors.statusBg.executed, ink: colors.status.executed, icon: 'tick' as const }
     : tone === 'apricot' ? { bg: colors.statusBg.needsUser, ink: colors.status.needsUser, icon: 'alert' as const }
@@ -236,7 +238,7 @@ function StatusCallout({ tone, title, body, onRestart }: { tone: 'plain' | 'mint
         <Text variant="caption" style={{ fontSize: 13, color: skin.ink, fontWeight: tone === 'apricot' ? '700' : '600' }}>{title}</Text>
         <Text variant="caption" style={{ fontSize: 12, color: skin.ink }}>{body}</Text>
       </Box>
-      {tone === 'apricot' ? <Button variant="secondary" size="xsmall" onPress={onRestart}>Upload again</Button> : null}
+      {tone === 'apricot' ? <Button variant="secondary" size="xsmall" onPress={onRestart}>{againLabel}</Button> : null}
     </Box>
   );
 }

package/src/components/onboarding/id-verification/contract.ts

@@ -31,6 +31,53 @@ export type IdVerificationSettings = HeaderConfig & LoadCopy & {
   rejectReason: string;
   rejectBody: string;
   primaryLabel: string;
+  /** Header chip and button words, by review phase. */
+  notSubmittedLabel: string;
+  submittingLabel: string;
+  submittedLabel: string;
+  pendingLabel: string;
+  verifiedLabel: string;
+  rejectedLabel: string;
+  /** The status callout: before submitting, and while pending. */
+  infoTitle: string;
+  pendingTitle: string;
+  pendingBody: string;
+  /** `{reason}` is `rejectReason`. */
+  rejectedTitleTemplate: string;
+  /** Footer hints. */
+  submittedHint: string;
+  rejectedHint: string;
+  uploadBothHint: string;
+  uploadOneHint: string;
+  checkingHint: string;
+  fixCheckHint: string;
+  readyHint: string;
+  checksTitle: string;
+  /** Read out after each check's label, by its state. */
+  checkPendingText: string;
+  checkRunningText: string;
+  checkPassedText: string;
+  checkFailedText: string;
+  uploadAgainLabel: string;
+  /** An empty slot. */
+  dropLabel: string;
+  dropHint: string;
+  uploadingLabel: string;
+  /** `{doc}` is `docLabel`, `{side}` the side's label. */
+  uploadAriaLabel: string;
+  /** `{side}` is the side's label. */
+  uploadedAriaLabel: string;
+  /** The filled slot's placeholder file line; `{name}` is the side's label as a file name. */
+  placeholderFileText: string;
+  replaceLabel: string;
+  /** `{side}` is the side's label. */
+  replaceAriaLabel: string;
+  submitErrorTitle: string;
+  submitErrorBody: string;
+  /** `{sides}` lists the sides that failed, joined by `sidesJoinText`. */
+  uploadErrorTitle: string;
+  sidesJoinText: string;
+  uploadErrorBody: string;
   /** Demo-only: the scene this case ships in (B2-9). */
   ship?: IdScene;
 };

package/src/components/onboarding/id-verification/engine.ts

@@ -1,4 +1,5 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
 import type { IdScene, IdVerificationSettings } from './contract';
 
 /** **The ID Verification engine** — pure: each side's upload, the checks, and the review. */
@@ -71,32 +72,35 @@ export function idView(c: IdVerificationSettings, s: IdVerificationState) {
   const { allFilled, bad, canSubmit } = idView0(s);
   const r = s.review;
   const checks: CheckMark[] = c.checks.map((_, i) => (s.checks === 'running' ? 'running' : s.checks !== 'done' ? 'pending' : bad && i === c.failCheck ? 'fail' : 'pass'));
-  const chip: { tone: StateChipTone; label: string; dot: boolean } = r === 'submitting' ? { tone: 'neutral', label: 'Submitting…', dot: false }
-    : r === 'pending' ? { tone: 'neutral', label: 'Pending review', dot: true }
-    : r === 'verified' ? { tone: 'success', label: 'Verified', dot: true }
-    : r === 'rejected' ? { tone: 'attention', label: 'Rejected', dot: true }
-    : { tone: 'neutral', label: 'Not submitted', dot: false };
-  const callout = r === 'pending' ? { tone: 'plain' as const, title: 'Pending review', body: 'Usually under 24 hours. We’ll email you when it’s done.' }
+  const chip: { tone: StateChipTone; label: string; dot: boolean } = r === 'submitting' ? { tone: 'neutral', label: c.submittingLabel, dot: false }
+    : r === 'pending' ? { tone: 'neutral', label: c.pendingLabel, dot: true }
+    : r === 'verified' ? { tone: 'success', label: c.verifiedLabel, dot: true }
+    : r === 'rejected' ? { tone: 'attention', label: c.rejectedLabel, dot: true }
+    : { tone: 'neutral', label: c.notSubmittedLabel, dot: false };
+  const callout = r === 'pending' ? { tone: 'plain' as const, title: c.pendingTitle, body: c.pendingBody }
     : r === 'verified' ? { tone: 'mint' as const, title: c.verifiedTitle, body: c.verifiedBody }
-    : r === 'rejected' ? { tone: 'apricot' as const, title: `Rejected · ${c.rejectReason}`, body: c.rejectBody }
-    : { tone: 'plain' as const, title: 'How this works', body: c.infoLine };
+    : r === 'rejected' ? { tone: 'apricot' as const, title: fill(c.rejectedTitleTemplate, { reason: c.rejectReason }), body: c.rejectBody }
+    : { tone: 'plain' as const, title: c.infoTitle, body: c.infoLine };
   return {
     allFilled, bad, canSubmit, checks, chip, callout,
     locked: locked(s),
-    footerHint: r === 'pending' ? 'Submitted · in review'
+    footerHint: r === 'pending' ? c.submittedHint
       : r === 'verified' ? c.verifiedHint
-      : r === 'rejected' ? 'Upload a clearer photo to try again'
-      : !allFilled ? (c.sides.length > 1 ? 'Upload both sides to continue' : 'Upload your document to continue')
-      : s.checks !== 'done' ? 'Checking your photo…'
-      : bad ? 'Fix the failed check to continue' : 'Ready to submit',
-    primaryLabel: r === 'submitting' ? 'Submitting…' : r === 'pending' ? 'Submitted' : r === 'verified' ? 'Verified' : r === 'failed' ? c.retryLabel : c.primaryLabel,
+      : r === 'rejected' ? c.rejectedHint
+      : !allFilled ? (c.sides.length > 1 ? c.uploadBothHint : c.uploadOneHint)
+      : s.checks !== 'done' ? c.checkingHint
+      : bad ? c.fixCheckHint : c.readyHint,
+    primaryLabel: r === 'submitting' ? c.submittingLabel : r === 'pending' ? c.submittedLabel : r === 'verified' ? c.verifiedLabel : r === 'failed' ? c.retryLabel : c.primaryLabel,
     scene: (r === 'failed' ? 'submitFailed' : r !== 'none' && r !== 'submitting' ? r
       : s.sides.some(x => x.phase === 'busy') ? 'uploading'
       : bad ? 'checkFailed' : allFilled ? 'filled' : 'notStarted') as IdScene,
   };
 }
 
-/** "Photo page" → "photo-page.jpg · 1.2 MB" — the placeholder file line; the real file is the host's. */
-export function placeholderFileName(side: string): string {
-  return `${side.toLowerCase().replace(/[^a-z]+/g, '-')}.jpg · 1.2 MB`;
+/**
+ * "Photo page" → "photo-page.jpg · 1.2 MB" — the placeholder file line; the real file is the host's.
+ * `template` is the config's `placeholderFileText`; `{name}` is the side as a file name.
+ */
+export function placeholderFileName(side: string, template = '{name}.jpg · 1.2 MB'): string {
+  return fill(template, { name: side.toLowerCase().replace(/[^a-z]+/g, '-') });
 }

package/src/components/onboarding/id-verification/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "id-verification",
   "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,43 @@
     "primaryLabel": "Submit for review",
     "emptyTitle": "Verification isn’t needed",
     "emptyBody": "Your account doesn’t need an ID check right now.",
-    "emptyCta": "Back to account"
+    "emptyCta": "Back to account",
+    "notSubmittedLabel": "Not submitted",
+    "submittingLabel": "Submitting…",
+    "submittedLabel": "Submitted",
+    "pendingLabel": "Pending review",
+    "verifiedLabel": "Verified",
+    "rejectedLabel": "Rejected",
+    "infoTitle": "How this works",
+    "pendingTitle": "Pending review",
+    "pendingBody": "Usually under 24 hours. We’ll email you when it’s done.",
+    "rejectedTitleTemplate": "Rejected · {reason}",
+    "submittedHint": "Submitted · in review",
+    "rejectedHint": "Upload a clearer photo to try again",
+    "uploadBothHint": "Upload both sides to continue",
+    "uploadOneHint": "Upload your document to continue",
+    "checkingHint": "Checking your photo…",
+    "fixCheckHint": "Fix the failed check to continue",
+    "readyHint": "Ready to submit",
+    "checksTitle": "Quality checks",
+    "checkPendingText": "not checked yet",
+    "checkRunningText": "checking",
+    "checkPassedText": "passed",
+    "checkFailedText": "failed",
+    "uploadAgainLabel": "Upload again",
+    "dropLabel": "Drop a file here or click to upload",
+    "dropHint": "JPG or PNG · up to 10 MB",
+    "uploadingLabel": "Uploading…",
+    "uploadAriaLabel": "Upload {doc} · {side}",
+    "uploadedAriaLabel": "{side} uploaded · preview hidden",
+    "placeholderFileText": "{name}.jpg · 1.2 MB",
+    "replaceLabel": "Replace",
+    "replaceAriaLabel": "Replace {side}",
+    "submitErrorTitle": "Couldn’t submit your document",
+    "submitErrorBody": "Nothing was sent. Check your connection, then retry.",
+    "uploadErrorTitle": "Couldn’t upload the {sides}",
+    "sidesJoinText": "and",
+    "uploadErrorBody": "Nothing was saved. Check your connection, then upload it again."
   },
   "cases": {
     "case1": {},

package/src/components/onboarding/index.ts

@@ -14,7 +14,7 @@ export * from './budget-allocation';
 export * from './contact-import';
 export * from './brand-kit';
 export { ONBOARDING_PRESETS, ONBOARDING_VALIDATORS } from './presets';
-export { ONBOARDING_VIEWS } from './views';
+export { ONBOARDING_VIEWS, ONBOARDING_SCENES, type OnboardingScenes } from './views';
 export * from './setup-tasks';
 export * from './cicd-setup';
 export * from './completion';

package/src/components/onboarding/mark-read/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "mark-read",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",

package/src/components/onboarding/onboarding-step/OnboardingStepView.tsx

@@ -90,11 +90,11 @@ function Valid({
       onEmptyAction={pattern.retry}
       chip={v.chip}
       hint={v.footerHint}
-      secondary={v.canSkip ? { label: 'Skip', disabled: working, onPress: () => { if (!ref.current.finished && ref.current.phase !== 'working') move(true); } } : undefined}
+      secondary={v.canSkip ? { label: config.skipLabel, disabled: working, onPress: () => { if (!ref.current.finished && ref.current.phase !== 'working') move(true); } } : undefined}
       primary={{ label: v.primaryLabel, disabled: state.finished, busy: working, onPress: doIt }}>
       <Box gap="s3">
-        <Box role="list" aria-label="Setup progress" row align="center" gap="s2" style={{ gap: 6 }}>
-          {config.steps.map((s, i) => <StepDot key={i} state={v.dots[i]!} label={`Step ${i + 1}: ${s.title}, ${v.dots[i]}`} />)}
+        <Box role="list" aria-label={config.progressLabel} row align="center" gap="s2" style={{ gap: 6 }}>
+          {config.steps.map((_, i) => <StepDot key={i} state={v.dots[i]!} label={v.dotLabels[i]!} />)}
         </Box>
         {v.skipNote ? <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{v.skipNote}</Text> : null}
         <Slot slotKey={state.finished ? 'done' : `step-${state.current}`} align="flex-start">
@@ -115,7 +115,7 @@ function Valid({
               <>
                 <HueTile icon={iconFor(step.icon)} type={step.type} size={48} />
                 <Box flex={1} gap="s1" style={{ minWidth: 0 }}>
-                  <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{`Step ${state.current + 1} of ${n}`}</Text>
+                  <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{v.stepCount}</Text>
                   <Text variant="label" color="textPrimary" style={{ fontSize: 16, fontWeight: '600', letterSpacing: -0.24 }}>{step.title}</Text>
                   <Text variant="caption" color="textSecondary" style={{ fontSize: 13 }}>{step.description}</Text>
                 </Box>
@@ -127,7 +127,7 @@ function Valid({
           <Box row align="center" gap="s2" style={{ paddingVertical: 10, paddingHorizontal: 12, borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken }}>
             <HueTile icon={iconFor(v.next.icon)} tone="muted" size={24} />
             <Text variant="caption" color="textSecondary" style={{ fontSize: 12, flexShrink: 1 }}>
-              {'Up next · '}
+              {`${config.upNextLabel} · `}
               <Text variant="caption" color="textSecondary" style={{ fontSize: 12, fontWeight: '600' }}>{v.next.title}</Text>
             </Text>
           </Box>