@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/combobox/ComboboxView.tsx

@@ -71,7 +71,7 @@ function Valid({
     ?? (!status && config.ship ? comboSeed(config, config.ship as ComboScene, { toasts }) : undefined);
   const api = useCombobox({ config, operations, result, initial: seed, value, max, toasts, onChange, onScene });
   const mobile = (viewport ?? config.viewport) === 'mobile';
-  const label = applyLabel ?? config.applyLabel ?? 'Assign ({n})';
+  const label = applyLabel ?? (config.applyLabel || COMBO_PRESETS.base.applyLabel);
 
   const trigger = <ComboTrigger api={api} config={config} bare={bare} disabled={disabled} />;
   /* The board's inner width: the 320px panel never overflows a narrower board. */
@@ -84,7 +84,7 @@ function Valid({
     <CardToast
       tone={api.state.toast.tone}
       text={api.state.toast.text}
-      action={api.state.toast.retry ? 'Retry' : undefined}
+      action={api.state.toast.retry ? api.model.words.retryLabel : undefined}
       onAction={api.retryApply}
       onClose={api.dismissToast}
       style={{ bottom: 16, alignSelf: 'center' }}
@@ -168,7 +168,7 @@ export function ComboPanel({ api, config, applyLabel, placement, align, maxWidth
   return (
     <Animated.View
       role="dialog"
-      aria-label={config.dialogLabel || 'Choose people'}
+      aria-label={config.dialogLabel || COMBO_PRESETS.base.dialogLabel}
       {...webOnly<WebEvents>({ onKeyDown: e => { if (e.key === 'Escape') { e.preventDefault(); api.close(); } } })}
       style={{
         position: 'absolute', zIndex: 10, width: maxWidth ? Math.min(320, maxWidth) : 320, maxHeight: 400, padding: 8, gap: 8,
@@ -177,10 +177,10 @@ export function ComboPanel({ api, config, applyLabel, placement, align, maxWidth
         borderWidth: 1, borderColor: colors.hairlineStrong, borderRadius: blockRadii.mid, backgroundColor: colors.surface1, boxShadow: lift2,
         opacity: p.opacity, transform: [{ translateY: p.translateY }],
       }}>
-      <PickerBody api={api} placeholder={config.placeholder || 'Search people'} />
-      {api.state.apply === 'failed' ? <InlineApplyFailed /> : null}
+      <PickerBody api={api} placeholder={config.placeholder || COMBO_PRESETS.base.placeholder} />
+      {api.state.apply === 'failed' ? <InlineApplyFailed text={api.model.words.assignFailedInline} /> : null}
       <Box row justify="flex-end" gap="s2" style={{ paddingTop: 8, borderTopWidth: 1, borderTopColor: colors.hairline }}>
-        <Ghost label="Cancel" onPress={api.close} height={36} />
+        <Ghost label={api.model.words.cancelLabel} onPress={api.close} height={36} />
         <ApplyButton api={api} label={applyLabel} />
       </Box>
     </Animated.View>
@@ -194,7 +194,7 @@ export function ComboSheet({ api, config, applyLabel }: { api: ComboboxApi; conf
     <View
       role="dialog"
       aria-modal
-      aria-label={config.dialogLabel || 'Choose people'}
+      aria-label={config.dialogLabel || COMBO_PRESETS.base.dialogLabel}
       {...webOnly<WebEvents>({ onKeyDown: e => { if (e.key === 'Escape') { e.preventDefault(); api.close(); } } })}
       style={{
         position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 10, gap: 8, paddingHorizontal: 12, paddingBottom: 12,
@@ -203,26 +203,26 @@ export function ComboSheet({ api, config, applyLabel }: { api: ComboboxApi; conf
       <Box row align="center" style={{ minHeight: 52, marginHorizontal: -12, paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: colors.hairline }}>
         <Box flex={1} align="flex-start">
           <Pressable onPress={api.close} height={44} style={{ paddingHorizontal: 8, marginLeft: -8, borderRadius: blockRadii.inset }}>
-            <Text style={{ fontSize: 15, color: colors.textPrimary }}>Cancel</Text>
+            <Text style={{ fontSize: 15, color: colors.textPrimary }}>{api.model.words.cancelLabel}</Text>
           </Pressable>
         </Box>
         <Text numberOfLines={1} role="heading" aria-level={2} style={{ fontSize: 15, fontWeight: '600', letterSpacing: -0.2, color: colors.textPrimary }}>
-          {config.sheetTitle || 'Assign'}
+          {config.sheetTitle || COMBO_PRESETS.base.sheetTitle}
         </Text>
         <Box flex={1} align="flex-end"><ApplyButton api={api} label={applyLabel} height={36} /></Box>
       </Box>
-      <PickerBody api={api} placeholder={config.placeholder || 'Search people'} />
-      {api.state.apply === 'failed' ? <InlineApplyFailed /> : null}
+      <PickerBody api={api} placeholder={config.placeholder || COMBO_PRESETS.base.placeholder} />
+      {api.state.apply === 'failed' ? <InlineApplyFailed text={api.model.words.assignFailedInline} /> : null}
     </View>
   );
 }
 
-function InlineApplyFailed() {
+function InlineApplyFailed({ text }: { text: string }) {
   const { colors } = useDs();
   return (
     <Box role="alert" row align="center" gap="s2" style={{ paddingVertical: 8, paddingHorizontal: 10, borderRadius: blockRadii.inset, backgroundColor: colors.statusBg.needsUser }}>
       <Icon name="alert" size={14} color={colors.status.needsUser} />
-      <Text style={{ fontSize: 12, fontWeight: '700', color: colors.status.needsUser }}>Couldn’t assign. Nothing changed.</Text>
+      <Text style={{ fontSize: 12, fontWeight: '700', color: colors.status.needsUser }}>{text}</Text>
     </Box>
   );
 }
@@ -321,9 +321,9 @@ function PickerBody({ api, placeholder }: { api: ComboboxApi; placeholder: strin
           aria-autocomplete="list"
           style={[{ flex: 1, minWidth: 0, height: '100%', fontSize: 13, color: colors.textPrimary }, NO_OUTLINE]}
         />
-        {m.searching ? <Spinner size={16} label="Searching" /> : null}
+        {m.searching ? <Spinner size={16} label={m.words.searchingLabel} /> : null}
         {s.q ? (
-          <Pressable aria-label="Clear search" onPress={api.clearQuery} width={28} height={28} radius="pill">
+          <Pressable aria-label={m.words.clearSearchLabel} onPress={api.clearQuery} width={28} height={28} radius="pill">
             <Icon name="close" size={14} color={colors.textSecondary} />
           </Pressable>
         ) : null}
@@ -341,30 +341,30 @@ function PickerBody({ api, placeholder }: { api: ComboboxApi; placeholder: strin
           if (contentOffset.y + layoutMeasurement.height > contentSize.height - 40) api.loadMore();
         }}>
         {/* The listbox owns options only; its section heads are plain text, its states and buttons follow it. */}
-        <View {...({ nativeID: listId, role: 'listbox', 'aria-multiselectable': true, 'aria-label': 'People' } as object)} style={{ gap: 2 }}>
+        <View {...({ nativeID: listId, role: 'listbox', 'aria-multiselectable': true, 'aria-label': m.words.listLabel } as object)} style={{ gap: 2 }}>
           {m.selected.length ? (
             <>
               <Head>{m.selectedHead}</Head>
               {m.selected.map((p, i) => row(p, i, true))}
             </>
           ) : null}
-          {m.showSuggHead ? <Head>Suggested</Head> : null}
+          {m.showSuggHead ? <Head>{m.words.suggestedHead}</Head> : null}
           {m.showResultsHead ? <Head>{m.resultsHead}</Head> : null}
           <MotionView style={{ opacity: fade, gap: 2 }}>
             {m.others.map((p, i) => row(p, i + m.selected.length, false))}
           </MotionView>
         </View>
         {m.suggLoading ? [0, 1, 2, 3].map(i => <SkeletonRow key={i} i={i} />) : null}
-        {m.noSugg ? <Text style={{ paddingVertical: 16, paddingHorizontal: 10, fontSize: 12, color: colors.textSecondary, textAlign: 'center' }}>Type to search</Text> : null}
+        {m.noSugg ? <Text style={{ paddingVertical: 16, paddingHorizontal: 10, fontSize: 12, color: colors.textSecondary, textAlign: 'center' }}>{m.words.noSuggText}</Text> : null}
         {m.noResults ? (
           <Box align="center" gap="s2" style={{ paddingVertical: 20, paddingHorizontal: 10 }}>
             <Text style={{ fontSize: 13, color: colors.textPrimary, textAlign: 'center' }}>{m.noResultsText}</Text>
-            <Ghost label="Clear" onPress={api.clearQuery} height={28} />
+            <Ghost label={m.words.clearLabel} onPress={api.clearQuery} height={28} />
           </Box>
         ) : null}
-        {m.searchError ? <Box style={{ marginVertical: 6 }}><AlertRow text="Couldn’t search people" action="Retry" onAction={api.retrySearch} /></Box> : null}
-        {m.moreLoading ? <Box row justify="center" style={{ minHeight: 40 }}><LoadingMore /></Box> : null}
-        {m.canMore ? <Box row justify="center" style={{ paddingVertical: 6 }}><Ghost label="Load more" onPress={api.loadMore} height={28} /></Box> : null}
+        {m.searchError ? <Box style={{ marginVertical: 6 }}><AlertRow text={m.words.searchErrorText} action={m.words.retryLabel} onAction={api.retrySearch} /></Box> : null}
+        {m.moreLoading ? <Box row justify="center" style={{ minHeight: 40 }}><LoadingMore label={m.words.loadingMoreLabel} /></Box> : null}
+        {m.canMore ? <Box row justify="center" style={{ paddingVertical: 6 }}><Ghost label={m.words.loadMoreLabel} onPress={api.loadMore} height={28} /></Box> : null}
       </ScrollView>
     </>
   );

package/src/components/onboarding/combobox/contract.ts

@@ -47,6 +47,41 @@ export type ComboboxSettings = {
   loadErrorBody: string;
   retryLabel: string;
   emptyCta: string;
+} & Partial<ComboboxCopy>;
+
+/**
+ * **Every word the picker shows**, so an agent can rename or translate each one. The defaults are
+ * `presets.json` `base`; a host that builds its own settings (Table's bulk Assign) may leave them out.
+ * Templates: `{n}` a count, `{max}` the limit, `{q}` the query, `{people}` a person count ("2 people").
+ */
+export type ComboboxCopy = {
+  /** The trigger's text when nothing is chosen. */
+  emptyLabel: string;
+  personCountOne: string;
+  personCountOther: string;
+  assignedToast: string;
+  assignFailedToast: string;
+  /** Inline, when a host shows its own toasts. */
+  assignFailedInline: string;
+  applyingLabel: string;
+  cancelLabel: string;
+  maxHint: string;
+  selectedHead: string;
+  suggestedHead: string;
+  resultsHead: string;
+  resultsHeadEmpty: string;
+  noResultsText: string;
+  liveFoundOne: string;
+  liveFoundOther: string;
+  liveNoneFound: string;
+  searchingLabel: string;
+  clearSearchLabel: string;
+  clearLabel: string;
+  listLabel: string;
+  noSuggText: string;
+  searchErrorText: string;
+  loadingMoreLabel: string;
+  loadMoreLabel: string;
 };
 
 export const COMBO_SCENES = [
@@ -59,6 +94,19 @@ export const COMBO_IN_FLIGHT: readonly string[] = ['suggLoading', 'debounce', 's
 
 export const COMBO_PRESETS = presetsJson as unknown as PresetsFile<ComboboxSettings>;
 
+const COPY_KEYS: (keyof ComboboxCopy)[] = [
+  'emptyLabel', 'personCountOne', 'personCountOther', 'assignedToast', 'assignFailedToast', 'assignFailedInline', 'applyingLabel',
+  'cancelLabel', 'maxHint', 'selectedHead', 'suggestedHead', 'resultsHead', 'resultsHeadEmpty', 'noResultsText', 'liveFoundOne',
+  'liveFoundOther', 'liveNoneFound', 'searchingLabel', 'clearSearchLabel', 'clearLabel', 'listLabel', 'noSuggText', 'searchErrorText',
+  'loadingMoreLabel', 'loadMoreLabel',
+];
+/** The picker's words: the config's, else `base`'s. */
+export function comboCopy(c: Partial<ComboboxSettings> = {}): ComboboxCopy & Pick<ComboboxSettings, 'retryLabel'> {
+  const base = { ...COMBO_PRESETS.baseCopy, ...COMBO_PRESETS.base } as unknown as ComboboxSettings;
+  const pick = (k: keyof ComboboxCopy | 'retryLabel') => (typeof c[k] === 'string' && c[k] ? c[k] : base[k]) as string;
+  return Object.fromEntries([...COPY_KEYS, 'retryLabel'].map(k => [k, pick(k as keyof ComboboxCopy)])) as ComboboxCopy & Pick<ComboboxSettings, 'retryLabel'>;
+}
+
 export function validateCombobox(c: ComboboxSettings): OnboardingIssue[] {
   if (!Array.isArray(c.people)) return [{ path: 'people', message: 'people must be a list.' }];
   const issues: OnboardingIssue[] = [];

package/src/components/onboarding/combobox/engine.ts

@@ -1,5 +1,6 @@
 import { matchPeople } from '../data-view/demoSource';
-import type { ComboboxSettings, ComboScene, Person } from './contract';
+import { fill } from '../shared/contract';
+import { comboCopy, type ComboboxCopy, type ComboboxSettings, type ComboScene, type Person } from './contract';
 
 /**
  * **The C14 engine** — pure. `value` is what was applied; `draft` is the working selection while the
@@ -63,8 +64,11 @@ export function initialCombo(c: ComboboxSettings, seed: ComboSeed = {}, value?:
   };
 }
 
-/** "2 people", "1 person". */
-export const peopleCount = (n: number) => `${n} ${n === 1 ? 'person' : 'people'}`;
+/** "2 people", "1 person" — from the config's `personCountOne` / `personCountOther`. */
+export const peopleCount = (n: number, c: Partial<ComboboxCopy> = {}) => {
+  const w = comboCopy(c);
+  return fill(n === 1 ? w.personCountOne : w.personCountOther, { n });
+};
 
 /**
  * **A demo-board scene as a seed** — the prototype's `sceneState`, on the config's directory.
@@ -95,10 +99,10 @@ export function comboSeed(c: ComboboxSettings, scene: ComboScene | 'loading' | '
     case 'searchError': case 'error': return { ...openWith(null), q: c.demoQuery, phase: 'error' };
     case 'atMax': return { open: true, draft: first(c.max || 3) };
     case 'applying': return { open: true, draft: c.openDraft ? byIds(c.people, c.openDraft) : first(2), apply: 'working' };
-    case 'applied': return { value: first(2), toast: { id: 1, tone: 'mint', text: `Assigned ${peopleCount(2)}`, retry: false } };
+    case 'applied': return { value: first(2), toast: { id: 1, tone: 'mint', text: fill(comboCopy(c).assignedToast, { people: peopleCount(2, c) }), retry: false } };
     case 'applyFailed': {
       const draft = first(2);
-      const toast: ComboToast = { id: 1, tone: 'apricot', text: `Couldn’t assign ${peopleCount(2)}`, retry: true };
+      const toast: ComboToast = { id: 1, tone: 'apricot', text: fill(comboCopy(c).assignFailedToast, { people: peopleCount(2, c) }), retry: true };
       return opts.toasts === false ? { open: true, draft, apply: 'failed' } : { draft, toast };
     }
     default: return {};
@@ -148,31 +152,33 @@ export function comboModel(c: ComboboxSettings, s: ComboState, max: number) {
     : s.sugg === 'ready' ? s.suggestions.filter(p => !inDraft(p)) : [];
   const n = s.draft.length;
   const atMax = Boolean(max) && n >= max;
+  const w = comboCopy(c);
   return {
+    words: w,
     hasQ,
     selected: s.draft,
     others,
     ordered: s.draft.concat(others),
     n,
     atMax,
-    maxHint: `Up to ${max} people`,
-    selectedHead: `Selected · ${n}`,
+    maxHint: fill(w.maxHint, { max }),
+    selectedHead: fill(w.selectedHead, { n }),
     showSuggHead: !hasQ && s.sugg !== 'none',
     suggLoading: !hasQ && s.sugg === 'loading',
     noSugg: !hasQ && s.sugg === 'none' && n === 0,
     showResultsHead: showResults && s.phase !== 'error' && (others.length > 0 || s.phase === 'debounce' || s.phase === 'searching'),
-    resultsHead: s.total ? `Results · ${s.total}` : 'Results',
+    resultsHead: s.total ? fill(w.resultsHead, { n: s.total }) : w.resultsHeadEmpty,
     noResults: showResults && s.phase === 'results' && s.total === 0,
-    noResultsText: `No people match ‘${s.q.trim()}’`,
+    noResultsText: fill(w.noResultsText, { q: s.q.trim() }),
     searchError: hasQ && s.phase === 'error',
     moreLoading: s.phase === 'more',
     canMore: s.phase === 'results' && Boolean(s.cursor),
     searching: s.phase === 'searching',
     dim: s.phase === 'debounce' || s.phase === 'searching',
-    liveText: s.phase === 'results' && hasQ ? (s.total ? `${s.total} ${s.total === 1 ? 'person' : 'people'} found` : 'No people found') : '',
-    applyText: (label: string) => (s.apply === 'working' ? 'Assigning…' : s.apply === 'failed' ? 'Retry' : label.replace('{n}', String(n))),
+    liveText: s.phase === 'results' && hasQ ? (s.total ? fill(s.total === 1 ? w.liveFoundOne : w.liveFoundOther, { n: s.total }) : w.liveNoneFound) : '',
+    applyText: (label: string) => (s.apply === 'working' ? w.applyingLabel : s.apply === 'failed' ? w.retryLabel : fill(label, { n })),
     canApply: n > 0 && s.apply !== 'working',
-    triggerLabel: s.value.length ? peopleCount(s.value.length) : (c.emptyLabel || 'Assign to…'),
-    triggerAria: s.value.length ? `${c.fieldLabel}: ${s.value.map(p => p.name).join(', ')}` : (c.emptyLabel || 'Assign to…'),
+    triggerLabel: s.value.length ? peopleCount(s.value.length, c) : w.emptyLabel,
+    triggerAria: s.value.length ? `${c.fieldLabel}: ${s.value.map(p => p.name).join(', ')}` : w.emptyLabel,
   };
 }

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

@@ -1,6 +1,8 @@
 {
   "component": "combobox",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -746,7 +748,32 @@
     "demoQuery": "ay",
     "noMatchQuery": "zoe",
     "viewport": "web",
-    "openDraft": null
+    "openDraft": null,
+    "emptyLabel": "Assign to…",
+    "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": {

package/src/components/onboarding/combobox/runtime.ts

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { abortableDelay, useOperationRunner } from '../../../runtime/operations';
-import type { OnboardingResult } from '../shared/contract';
+import { fill, type OnboardingResult } from '../shared/contract';
 import type { OnboardingOperation } from '../shared/mock';
 import { useSeededReducer } from '../shared/runtime';
 import { DATA_VIEW_TIMING } from '../data-view/contract';
 import { matchPeople, type SearchOperation, type SuggestOperation } from '../data-view/demoSource';
-import type { ComboboxSettings, Person } from './contract';
+import { comboCopy, type ComboboxSettings, type Person } from './contract';
 import { comboModel, initialCombo, peopleCount, reduceCombo, type ComboAction, type ComboSeed, type ComboState, type ComboToast } from './engine';
 
 export type ComboboxOperations = {
@@ -120,21 +120,21 @@ export function useCombobox({
     runner.run('apply', ctx => ops.apply({ people: draft }, { signal: ctx.signal }), {
       onOk: r => {
         if (r.ok) {
-          send({ type: 'applied', value: draft, toast: toasts ? nextToast('mint', `Assigned ${peopleCount(draft.length)}`, false) : null });
+          send({ type: 'applied', value: draft, toast: toasts ? nextToast('mint', fill(comboCopy(config).assignedToast, { people: peopleCount(draft.length, config) }), false) : null });
           onChange?.(draft);
           focusLater(triggerRef);
           report('applied');
         } else {
-          send({ type: 'applyFailed', embedded: !toasts, toast: toasts ? nextToast('apricot', `Couldn’t assign ${peopleCount(draft.length)}`, true) : null });
+          send({ type: 'applyFailed', embedded: !toasts, toast: toasts ? nextToast('apricot', fill(comboCopy(config).assignFailedToast, { people: peopleCount(draft.length, config) }), true) : null });
           report('applyFailed');
         }
       },
       onError: () => {
-        send({ type: 'applyFailed', embedded: !toasts, toast: toasts ? nextToast('apricot', `Couldn’t assign ${peopleCount(draft.length)}`, true) : null });
+        send({ type: 'applyFailed', embedded: !toasts, toast: toasts ? nextToast('apricot', fill(comboCopy(config).assignFailedToast, { people: peopleCount(draft.length, config) }), true) : null });
         report('applyFailed');
       },
     });
-  }, [runner, ops, toasts, onChange]);
+  }, [runner, ops, toasts, onChange, configKey]);
 
   /* A restored scene finishes what it was doing: a pending search, a load, an apply in flight. */
   useEffect(() => {

package/src/components/onboarding/completion/contract.ts

@@ -33,6 +33,10 @@ export type CompletionSettings = HeaderConfig & LoadCopy & {
   primaryLabel: string;
   secondaryLabel: string;
   successHint: string;
+  /** The footer when one thing was skipped: `{count}`. */
+  partialHintOne: string;
+  /** The footer when several were: `{count}`. */
+  partialHintMany: string;
 };
 
 export const COMPLETION_PRESETS = presetsJson as unknown as PresetsFile<CompletionSettings>;

package/src/components/onboarding/completion/engine.ts

@@ -1,3 +1,4 @@
+import { fill } from '../shared/contract';
 import type { CompletionScene, CompletionSettings } from './contract';
 
 /** **The Completion engine** — pure: success or partial, and what each shows. */
@@ -24,7 +25,7 @@ export function completionView(c: CompletionSettings, s: CompletionState) {
     stats: partial ? c.partialStats ?? c.stats : c.successStats ?? c.stats,
     items: partial ? c.partialItems ?? c.items : c.successItems ?? c.items,
     skipped,
-    footerHint: partial ? `${skipped.length} ${skipped.length === 1 ? 'item' : 'items'} to finish later` : c.successHint,
+    footerHint: partial ? fill(skipped.length === 1 ? c.partialHintOne : c.partialHintMany, { count: skipped.length }) : c.successHint,
     showSecondary: partial,
   };
 }

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

@@ -1,6 +1,8 @@
 {
   "component": "completion",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -66,6 +68,8 @@
     "primaryLabel": "Go to workspace",
     "secondaryLabel": "Finish later",
     "successHint": "Everything is set up",
+    "partialHintOne": "{count} item to finish later",
+    "partialHintMany": "{count} items to finish later",
     "emptyTitle": "Nothing to summarise yet",
     "emptyBody": "Finish at least one setup step to see a summary.",
     "emptyCta": "Back to setup"

package/src/components/onboarding/contact-import/ContactImportView.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon, MotionView, Pressable, Text, useSwap } from '../../../core';
 import { Callout, Dropzone, ProgressBar, RadioGroup } 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 type { OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
@@ -72,9 +72,9 @@ function Valid({
       secondary={v.showSecondary ? { label: config.secondaryLabel!, onPress: () => { onSkip?.(); onScene?.('skipped'); }, disabled: v.locked } : undefined}
       primary={{ label: v.primaryLabel, onPress: rt.primary, disabled: s.run !== 'done' && !v.canImport, busy: s.run === 'importing' }}>
       <Box gap="s3" aria-busy={s.run === 'importing' || undefined}>
-        <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>Source</Text>
+        <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{config.sourceFieldLabel}</Text>
         <RadioGroup
-          label="Source"
+          label={config.sourceFieldLabel}
           variant="rows"
           value={s.source ?? undefined}
           onChange={rt.pick}
@@ -84,12 +84,24 @@ function Valid({
         <MotionView style={{ opacity: slotFade, minHeight: 72 }}>
           {v.isCsv ? (
             <Dropzone
-              label={`${config.noun} file`}
+              label={fill(config.fileLabel, { noun: config.noun })}
               variant="file"
               value={s.file}
               accept={['csv']}
               maxSizeMB={config.maxSizeMB}
-              hint={`CSV · up to ${config.maxSizeMB} MB`}
+              hint={fill(config.csvHint, { max: config.maxSizeMB })}
+              copy={{
+                empty: config.dropEmptyText,
+                dragOver: config.dropDragOverText,
+                uploading: config.dropUploadingText,
+                uploaded: config.dropUploadedText,
+                wrongType: config.wrongFileTypeText,
+                tooLarge: config.fileTooLargeText,
+                chooseAnother: config.chooseAnotherLabel,
+                replace: config.replaceFileLabel,
+                remove: config.removeFileLabel,
+                cancel: config.cancelUploadLabel,
+              }}
               onFiles={([f]) => { if (f) rt.file(f); }}
               onPick={onPickFile}
               onRemove={rt.removeFile}
@@ -109,29 +121,29 @@ function Valid({
                 <Text variant="caption" color="textPrimary" style={{ fontWeight: '600' }}>{config.importingLabel}</Text>
                 <Text variant="caption" color="textSecondary" numeric>{`${pct}%`}</Text>
               </Box>
-              <ProgressBar bare tone="accent" label={`Importing ${config.noun}`} value={pct} />
+              <ProgressBar bare tone="accent" label={fill(config.importingProgressLabel, { noun: config.noun })} value={pct} />
             </Box>
           ) : s.run === 'done' ? (
             <Box gap="s2">
               <Box row align="center" gap="s2" style={{ borderRadius: blockRadii.inset, backgroundColor: colors.statusBg.executed, paddingVertical: 10, paddingHorizontal: 12 }}>
                 <Icon name="tick" size={14} color={colors.status.executed} />
-                <Text variant="caption" numeric style={{ fontWeight: '600', color: colors.status.executed }}>{`${s.found.toLocaleString('en-US')} ${config.noun} found`}</Text>
+                <Text variant="caption" numeric style={{ fontWeight: '600', color: colors.status.executed }}>{fill(config.foundText, { n: s.found.toLocaleString('en-US'), noun: config.noun })}</Text>
               </Box>
               {s.skippedTotal > 0 ? (
                 <Box gap="s2">
                   <Box row align="center" gap="s2" style={{ borderRadius: blockRadii.inset, backgroundColor: colors.statusBg.needsUser, paddingVertical: 6, paddingLeft: 12, paddingRight: 6 }}>
                     <Icon name="alert" size={14} color={colors.status.needsUser} />
                     <Text variant="caption" numeric style={{ fontWeight: '600', color: colors.status.needsUser, flex: 1 }}>
-                      {`${s.skippedTotal.toLocaleString('en-US')} skipped — ${config.skipReason}`}
+                      {fill(config.skippedText, { n: s.skippedTotal.toLocaleString('en-US'), reason: config.skipReason })}
                     </Text>
-                    <SkippedToggle open={s.showSkipped} onPress={rt.toggleSkipped} controls="ci-skipped" />
+                    <SkippedToggle open={s.showSkipped} onPress={rt.toggleSkipped} controls="ci-skipped" config={config} />
                   </Box>
                   {s.showSkipped ? (
-                    <Box nativeID="ci-skipped" role="list" aria-label="Skipped rows" gap="s1" style={{ borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken, padding: 12 }}>
+                    <Box nativeID="ci-skipped" role="list" aria-label={config.skippedRowsLabel} gap="s1" style={{ borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken, padding: 12 }}>
                       {s.skipped.map(r => (
                         <Box key={r.row} role="listitem"><Text variant="caption" numeric style={{ fontSize: 12 }}>{`${r.row} · ${r.reason}`}</Text></Box>
                       ))}
-                      {more > 0 ? <Box role="listitem"><Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{`and ${more.toLocaleString('en-US')} more`}</Text></Box> : null}
+                      {more > 0 ? <Box role="listitem"><Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{fill(config.moreRowsText, { n: more.toLocaleString('en-US') })}</Text></Box> : null}
                     </Box>
                   ) : null}
                 </Box>
@@ -147,19 +159,19 @@ function Valid({
 }
 
 /** A disclosure, so it says whether it is open and what it opens (`aria-expanded`, `aria-controls`). */
-function SkippedToggle({ open, onPress, controls }: { open: boolean; onPress: () => void; controls: string }) {
+function SkippedToggle({ open, onPress, controls, config }: { open: boolean; onPress: () => void; controls: string; config: ContactImportSettings }) {
   const { colors } = useDs();
   return (
     <Pressable
       onPress={onPress}
-      aria-label={open ? 'Hide skipped rows' : 'View skipped rows'}
+      aria-label={open ? config.hideSkippedLabel : config.viewSkippedLabel}
       aria-expanded={open}
       aria-controls={controls}
       height={28}
       px="s3"
       radius="field"
       style={{ backgroundColor: colors.surface1, borderWidth: 1, borderColor: colors.hairlineStrong }}>
-      <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{open ? 'Hide' : 'View'}</Text>
+      <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{open ? config.hideLabel : config.viewLabel}</Text>
     </Pressable>
   );
 }

package/src/components/onboarding/contact-import/contract.ts

@@ -31,6 +31,52 @@ export type ContactImportSettings = HeaderConfig & LoadCopy & {
   failBody: string;
   /** `{source}` is the chosen source's label. */
   oauthNote: string;
+  /** The source radio group's label. */
+  sourceFieldLabel: string;
+  /** The header chip before an import; `{n}` is the number of sources. */
+  sourcesChipOne: string;
+  sourcesChipOther: string;
+  importedLabel: string;
+  /** `{noun}` is `noun`. */
+  importLabel: string;
+  /** Footer hints. `{source}` is the chosen source's label. */
+  fromSourceHint: string;
+  keepOpenHint: string;
+  readyHint: string;
+  nothingImportedHint: string;
+  addCsvHint: string;
+  /** The CSV Dropzone's accessible name; `{noun}` is `noun`. */
+  fileLabel: string;
+  /** `{max}` is `maxSizeMB`. */
+  csvHint: string;
+  dropEmptyText: string;
+  dropDragOverText: string;
+  dropUploadingText: string;
+  dropUploadedText: string;
+  wrongFileTypeText: string;
+  /** `{max}` is `maxSizeMB`. */
+  fileTooLargeText: string;
+  chooseAnotherLabel: string;
+  replaceFileLabel: string;
+  removeFileLabel: string;
+  cancelUploadLabel: string;
+  /** The refused file the "invalidFile" demo scene shows. Demo boards only. */
+  demoInvalidFileName: string;
+  /** The progress bar's name; `{noun}` is `noun`. */
+  importingProgressLabel: string;
+  /** `{n}` found, `{noun}` is `noun`. */
+  foundText: string;
+  /** `{n}` skipped, `{reason}` is `skipReason`. */
+  skippedText: string;
+  skippedRowsLabel: string;
+  /** A skipped row's name; `{n}` is its row number. */
+  rowLabel: string;
+  /** `{n}` more skipped rows than listed. */
+  moreRowsText: string;
+  viewLabel: string;
+  hideLabel: string;
+  viewSkippedLabel: string;
+  hideSkippedLabel: string;
 };
 
 export const CONTACT_PRESETS = presetsJson as unknown as PresetsFile<ContactImportSettings>;

package/src/components/onboarding/contact-import/engine.ts

@@ -47,15 +47,19 @@ export function initialContact(c: ContactImportSettings, seed: ContactSeed = {})
 }
 
 /** The prototype's skipped list: three named rows, then "and N more". */
-export function demoSkipped(c: Pick<ContactImportSettings, 'skipReason'>, count: number): SkippedRow[] {
-  return Array.from({ length: Math.min(3, count) }, (_, k) => ({ row: `Row ${14 + k * 37}`, reason: c.skipReason }));
+export function demoSkipped(c: Pick<ContactImportSettings, 'skipReason' | 'rowLabel'>, count: number): SkippedRow[] {
+  return Array.from({ length: Math.min(3, count) }, (_, k) => ({ row: fill(c.rowLabel, { n: 14 + k * 37 }), reason: c.skipReason }));
 }
 
 export function contactSeed(c: ContactImportSettings, scene: ContactScene): ContactSeed {
   const csv = c.sources.some(s => s.value === CSV_SOURCE) ? CSV_SOURCE : c.sources[0]?.value;
   switch (scene) {
     case 'csv': return { source: csv };
-    case 'invalidFile': return { source: csv, file: { status: 'invalid', reason: 'type', file: { name: 'contacts.xlsx', sizeBytes: 48 * 1024, ext: 'xlsx' } } };
+    case 'invalidFile': {
+      const name = c.demoInvalidFileName;
+      const ext = name.includes('.') ? name.slice(name.lastIndexOf('.') + 1).toLowerCase() : 'xlsx';
+      return { source: csv, file: { status: 'invalid', reason: 'type', file: { name, sizeBytes: 48 * 1024, ext } } };
+    }
     case 'importing': return { run: 'importing', progress: 0.64 };
     case 'done': return { run: 'done' };
     case 'partial': {
@@ -90,9 +94,9 @@ export function contactView(c: ContactImportSettings, s: ContactState) {
   const isCsv = s.source === CSV_SOURCE;
   const blocked = isCsv && s.file.status !== 'filled';
   const chip: { tone: StateChipTone; label: string } = s.run === 'importing' ? { tone: 'neutral', label: c.importingLabel }
-    : s.run === 'done' ? { tone: 'success', label: 'Imported' }
-    : s.run === 'failed' ? { tone: 'attention', label: 'Needs attention' }
-    : { tone: 'neutral', label: `${c.sources.length} sources` };
+    : s.run === 'done' ? { tone: 'success', label: c.importedLabel }
+    : s.run === 'failed' ? { tone: 'attention', label: c.attentionLabel ?? '' }
+    : { tone: 'neutral', label: fill(c.sources.length === 1 ? c.sourcesChipOne : c.sourcesChipOther, { n: c.sources.length }) };
   const scene: ContactScene = s.run === 'importing' ? 'importing'
     : s.run === 'done' ? (s.skippedTotal > 0 ? 'partial' : 'done')
     : s.run === 'failed' ? 'failed'
@@ -105,12 +109,12 @@ export function contactView(c: ContactImportSettings, s: ContactState) {
     sourceLabel: src?.label ?? '',
     oauthNote: fill(c.oauthNote, { source: src?.label ?? '' }),
     failTitle: fill(c.failTitle, { source: src?.label ?? '' }),
-    footerHint: s.run === 'importing' ? 'Keep this window open'
-      : s.run === 'done' ? 'Ready to review'
-      : s.run === 'failed' ? 'Nothing was imported'
-      : blocked ? 'Add a CSV file to continue'
-      : `From ${src?.label ?? ''}`,
-    primaryLabel: s.run === 'importing' ? c.importingLabel : s.run === 'done' ? c.continueLabel : s.run === 'failed' ? c.retryLabel : `Import ${c.noun}`,
+    footerHint: s.run === 'importing' ? c.keepOpenHint
+      : s.run === 'done' ? c.readyHint
+      : s.run === 'failed' ? c.nothingImportedHint
+      : blocked ? c.addCsvHint
+      : fill(c.fromSourceHint, { source: src?.label ?? '' }),
+    primaryLabel: s.run === 'importing' ? c.importingLabel : s.run === 'done' ? c.continueLabel : s.run === 'failed' ? c.retryLabel : fill(c.importLabel, { noun: c.noun }),
     canImport: s.run !== 'importing' && s.run !== 'done' && !blocked,
     showSecondary: s.run !== 'done' && Boolean(c.secondaryLabel),
     locked: s.run === 'importing',