@appinternalleads/ui 0.2.0 → 0.3.0

package/src/components/onboarding/brand-kit/engine.ts

@@ -1,7 +1,7 @@
 import type { PickedFile } from '../../../core';
 import { checkFile } from '../../../core';
 import type { DropzoneValue, StateChipTone } from '../../../ds';
-import type { SavePhase } from '../shared/contract';
+import { fill, type SavePhase } from '../shared/contract';
 import { isHex, type BrandKitSettings, type BrandScene } from './contract';
 
 /** **The Brand Kit engine** — pure: the logo, the colour fields (raw, touched, last valid), the font, the save. */
@@ -36,10 +36,11 @@ const slug = (t: string) => t.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(
 /** The demo's logo, by state — named after the brand, sized like the real thing. */
 export function demoLogo(c: BrandKitSettings, kind: 'empty' | 'uploading' | 'filled' | 'invalid'): DropzoneValue {
   const ext = c.accept[0] ?? 'png';
-  const file: PickedFile = { name: `${slug(c.brandName)}-logo.${ext}`, sizeBytes: ext === 'svg' ? 14336 : 186368, ext };
+  const base = fill(c.demoFileNameTemplate, { brand: slug(c.brandName) });
+  const file: PickedFile = { name: `${base}.${ext}`, sizeBytes: ext === 'svg' ? 14336 : 186368, ext };
   if (kind === 'filled') return { status: 'filled', file };
   if (kind === 'uploading') return { status: 'uploading', file, progress: 0.36 };
-  if (kind === 'invalid') return { status: 'invalid', reason: 'type', file: { name: `${slug(c.brandName)}-logo.gif`, sizeBytes: 9000, ext: 'gif' } };
+  if (kind === 'invalid') return { status: 'invalid', reason: 'type', file: { name: `${base}.gif`, sizeBytes: 9000, ext: 'gif' } };
   return { status: 'empty' };
 }
 
@@ -120,16 +121,16 @@ export function brandView(c: BrandKitSettings, s: BrandState) {
   const first = (c.colorLabels[0] ?? 'primary').toLowerCase();
   const chip: { tone: StateChipTone; label: string } = s.save === 'saving' ? { tone: 'neutral', label: c.savingLabel }
     : s.save === 'saved' ? { tone: 'success', label: c.savedLabel }
-    : s.save === 'failed' || invalidHex || s.file.status === 'invalid' ? { tone: 'attention', label: 'Needs attention' }
-    : { tone: 'neutral', label: 'Draft' };
+    : s.save === 'failed' || invalidHex || s.file.status === 'invalid' ? { tone: 'attention', label: c.attentionLabel ?? 'Needs attention' }
+    : { tone: 'neutral', label: c.draftLabel };
   const footerHint = s.save === 'saved' ? c.savedHint
-    : s.save === 'saving' ? 'Saving your changes…'
-    : s.save === 'failed' ? 'Not saved · retry when ready'
-    : s.file.status === 'uploading' ? 'Waiting for the upload to finish…'
-    : needLogo && needColor ? `Add a logo and a valid ${first} colour to continue`
-    : needLogo ? 'Add a logo to continue'
-    : needColor ? `Fix the ${first} colour to continue`
-    : 'Ready to save';
+    : s.save === 'saving' ? c.savingHint
+    : s.save === 'failed' ? c.failedHint
+    : s.file.status === 'uploading' ? c.uploadingHint
+    : needLogo && needColor ? fill(c.needLogoAndColorHint, { color: first })
+    : needLogo ? c.needLogoHint
+    : needColor ? fill(c.needColorHint, { color: first })
+    : c.readyHint;
   const scene: BrandScene = s.save !== 'idle' ? s.save
     : s.dragOver ? 'dragover'
     : s.file.status === 'uploading' ? 'uploading'
@@ -143,7 +144,10 @@ export function brandView(c: BrandKitSettings, s: BrandState) {
     footerHint,
     canSave: !needLogo && !needColor && s.save !== 'saving' && s.save !== 'saved',
     primaryLabel: s.save === 'saving' ? c.savingLabel : s.save === 'saved' ? c.savedLabel : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
-    dropHint: `${types.length > 1 ? `${types.slice(0, -1).join(', ')} or ${types.at(-1)}` : types[0]} · up to ${c.maxSizeMB} MB`,
+    dropHint: fill(c.dropHintTemplate, {
+      types: types.length > 1 ? `${types.slice(0, -1).join(', ')} ${c.fileTypesOrText} ${types.at(-1)}` : types[0] ?? '',
+      size: c.maxSizeMB,
+    }),
     /** What the preview paints: the last valid colour of each field (`null` until there is one). */
     previewColors: s.valid,
   };

package/src/components/onboarding/brand-kit/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "brand-kit",
   "base": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "type": "file",
     "icon": "palette",
     "previewKind": "appbar",
@@ -46,7 +48,31 @@
     "loadErrorBody": "Your saved settings are safe. Retry to load them again.",
     "emptyTitle": "No brand kit yet",
     "emptyBody": "Add a logo and colours so what you share looks like your brand.",
-    "emptyCta": "Set up brand kit"
+    "emptyCta": "Set up brand kit",
+    "draftLabel": "Draft",
+    "logoLabel": "Logo",
+    "fontLabel": "Font",
+    "dropHintTemplate": "{types} · up to {size} MB",
+    "fileTypesOrText": "or",
+    "demoFileNameTemplate": "{brand}-logo",
+    "hexErrorText": "Use a 6-digit hex, like #1F6FEB",
+    "savingHint": "Saving your changes…",
+    "failedHint": "Not saved · retry when ready",
+    "uploadingHint": "Waiting for the upload to finish…",
+    "needLogoAndColorHint": "Add a logo and a valid {color} colour to continue",
+    "needLogoHint": "Add a logo to continue",
+    "needColorHint": "Fix the {color} colour to continue",
+    "readyHint": "Ready to save",
+    "dropEmptyText": "Drop a file here or click to upload",
+    "dropDragOverText": "Release to upload",
+    "dropUploadingText": "Uploading…",
+    "dropUploadedText": "Uploaded",
+    "dropWrongTypeText": "This file type isn’t supported",
+    "dropTooLargeText": "File is larger than {max} MB",
+    "dropChooseAnotherLabel": "Choose another file",
+    "dropReplaceLabel": "Replace",
+    "dropRemoveLabel": "Remove file",
+    "dropCancelLabel": "Cancel upload"
   },
   "cases": {
     "case1": {},

package/src/components/onboarding/budget-allocation/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "budget-allocation",
   "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/budget-tracker/BudgetTrackerView.tsx

@@ -8,10 +8,10 @@ import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
 import { usePatternStatus, useSceneReport } from '../shared/runtime';
 import { guarded } from '../shared/guard';
-import { M15, barFill, barStart, compactCurrency, progress, revealEnd, rowReveal, toneIn } from '../shared/m15';
+import { M15, barFill, barStart, progress, revealEnd, rowReveal, toneIn } from '../shared/m15';
 import { DataTip, RevealRow, ToneText, VizBar, useInView, useRevealClock, useTweenedValues } from '../shared/viz';
 import { BUDGET_TRACKER_PRESETS, validateBudgetTracker, type BudgetTrackerSettings } from './contract';
-import { budgetRows, budgetScene, budgetTotals, budgetTrackerSeed, initialBudgetTracker, type BudgetTrackerSeed } from './engine';
+import { budgetRows, budgetScene, compactBudgetMoney, budgetTotals, budgetTrackerSeed, initialBudgetTracker, type BudgetTrackerSeed } from './engine';
 
 export type BudgetTrackerProps = {
   preset?: OnboardingPreset;
@@ -83,7 +83,7 @@ function Valid({
   const meta = config.periods.length > 1 ? (
     <Box style={{ minWidth: 132 }}>
       <Select
-        aria-label="Period"
+        aria-label={config.periodSelectLabel}
         value={period}
         options={config.periods.map(p => ({ value: p, label: p }))}
         onChange={p => { setPeriod(p); onPeriodChange?.(p); }}
@@ -94,19 +94,19 @@ function Valid({
   return (
     <OnboardingCard testID={testID} header={config} copy={config} density={density} status={pattern.status} onRetry={pattern.retry} onEmptyAction={pattern.retry} meta={meta}>
       <View ref={ref} style={{ opacity: clock.reduced ? clock.fade : 1, gap: 14 }}>
-        <Box row gap="s2" role={'list' as never} aria-label="Summary" style={{ flexWrap: 'wrap' }}>
+        <Box row gap="s2" role={'list' as never} aria-label={config.summaryLabel} style={{ flexWrap: 'wrap' }}>
           {[
-            ['Allocated', compactCurrency(stat(0, totals.allocated), config.currency)],
-            ['Spent', compactCurrency(stat(1, totals.spent), config.currency)],
-            ['Utilization', `${Math.round(stat(2, totals.utilization))}%`],
+            [config.allocatedLabel, compactBudgetMoney(stat(0, totals.allocated), config.currency, config)],
+            [config.spentLabel, compactBudgetMoney(stat(1, totals.spent), config.currency, config)],
+            [config.utilizationLabel, `${Math.round(stat(2, totals.utilization))}%`],
           ].map(([dt, dd], k) => (
-            <Box key={dt} role={'listitem' as never} style={{ flexGrow: 1, flexBasis: 96, padding: 12, borderRadius: blockRadii.inset + 4, backgroundColor: colors.surfaceSunken }}>
+            <Box key={k} role={'listitem' as never} style={{ flexGrow: 1, flexBasis: 96, padding: 12, borderRadius: blockRadii.inset + 4, backgroundColor: colors.surfaceSunken }}>
               <Text style={{ fontSize: 12, color: colors.textSecondary }}>{dt}</Text>
               <Text numeric style={{ fontSize: 20, fontWeight: '600', letterSpacing: -0.3, color: colors.textPrimary, textAlign: k === 2 ? 'right' : 'left' }}>{dd}</Text>
             </Box>
           ))}
         </Box>
-        <Box role={'list' as never} aria-label="Categories" gap="s1">
+        <Box role={'list' as never} aria-label={config.categoriesLabel} gap="s1">
           {rows.map((r, i) => {
             const rv = clock.reduced ? { opacity: 1, y: 0 } : rowReveal(i, t);
             const toneP = clock.done ? 1 : toneIn(barStart(i) + M15.fillMs, t);
@@ -118,7 +118,7 @@ function Valid({
                       <Box row align="center" gap="s2">
                         <Text numberOfLines={1} style={{ flex: 1, fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{r.name}</Text>
                         <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>
-                          {`${compactCurrency(spentOf(i), config.currency)} / ${compactCurrency(r.allocated, config.currency)}`}
+                          {`${compactBudgetMoney(spentOf(i), config.currency, config)} / ${compactBudgetMoney(r.allocated, config.currency, config)}`}
                         </Text>
                         <View style={{ opacity: toneP, minWidth: 104 }}>
                           <ToneText color={colors.textSecondary} tone={tones[r.varianceTone]} toneOpacity={1} weight="600" align="right">{r.variance}</ToneText>

package/src/components/onboarding/budget-tracker/contract.ts

@@ -15,7 +15,38 @@ export type BudgetTrackerScene = (typeof BUDGET_TRACKER_SCENES)[number];
 /** Nothing is in flight: the view only reads. */
 export const BUDGET_TRACKER_IN_FLIGHT: readonly string[] = [];
 
-export type BudgetTrackerSettings = HeaderConfig & LoadCopy & {
+/**
+ * **Every word the tracker shows** — rename or translate freely. Templates are filled with `fill()`:
+ * `{amount}` a compact figure ("$16.4K"), `{percent}` a whole number, `{spent}` / `{allocated}` full figures.
+ */
+export type BudgetTrackerCopy = {
+  /** The three wells' list, read out. */
+  summaryLabel: string;
+  allocatedLabel: string;
+  spentLabel: string;
+  utilizationLabel: string;
+  /** The category list, read out. */
+  categoriesLabel: string;
+  /** The period select's name, read out. */
+  periodSelectLabel: string;
+  /** A row's variance: "+{amount} left", "−{amount} over", and near the limit "+{amount} left · {percent}% used". */
+  leftText: string;
+  overText: string;
+  nearText: string;
+  /** A progressbar's value text: "{percent}% — {amount} left" / "… over" / "… exactly on budget". */
+  valueLeftText: string;
+  valueOverText: string;
+  valueExactText: string;
+  /** A row's tooltip: "Spent {spent} of {allocated} · {percent}%". */
+  tooltipText: string;
+  /** Compact figures: "$35K", "$1.2M", "$3B", "$1T". */
+  thousandsSuffix: string;
+  millionsSuffix: string;
+  billionsSuffix: string;
+  trillionsSuffix: string;
+};
+
+export type BudgetTrackerSettings = HeaderConfig & LoadCopy & BudgetTrackerCopy & {
   /** ISO 4217 — every figure is formatted in it. */
   currency: string;
   period: string;

package/src/components/onboarding/budget-tracker/engine.ts

@@ -1,8 +1,34 @@
-import { compactCurrency, money } from '../shared/m15';
-import type { BudgetTrackerCategory, BudgetTrackerScene, BudgetTrackerSettings } from './contract';
+import { fill } from '../shared/contract';
+import { money } from '../shared/m15';
+import type { BudgetTrackerCategory, BudgetTrackerCopy, BudgetTrackerScene, BudgetTrackerSettings } from './contract';
 
 /** **The Budget Tracker engine** — pure: which categories, their figures, tones and words. */
 
+type Suffixes = Pick<BudgetTrackerCopy, 'thousandsSuffix' | 'millionsSuffix' | 'billionsSuffix' | 'trillionsSuffix'>;
+
+/**
+ * A compact money figure — "$35K", "$16.4K", "$1.2M" — three significant digits, with the suffixes
+ * from config (Intl's own compact notation would bake in English "K" / "M"). The currency's symbol
+ * and placement still come from Intl.
+ */
+export function compactBudgetMoney(v: number, currency: string, c: Suffixes): string {
+  const tiers: [number, string][] = [[1, ''], [1e3, c.thousandsSuffix], [1e6, c.millionsSuffix], [1e9, c.billionsSuffix], [1e12, c.trillionsSuffix]];
+  let tier = 0;
+  while (tier < tiers.length - 1 && Math.abs(v) >= tiers[tier + 1]![0]) tier++;
+  let scaled = Number((v / tiers[tier]![0]).toPrecision(3));
+  /* 999,600 rounds to 1,000K: say it as 1M instead. */
+  if (Math.abs(scaled) >= 1000 && tier < tiers.length - 1) { tier++; scaled = Number((v / tiers[tier]![0]).toPrecision(3)); }
+  const suffix = tiers[tier]![1] ?? '';
+  try {
+    const parts = new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumSignificantDigits: 3 }).formatToParts(scaled);
+    let last = -1;
+    parts.forEach((p, i) => { if (p.type === 'integer' || p.type === 'fraction') last = i; });
+    return parts.map((p, i) => (i === last ? `${p.value}${suffix}` : p.value)).join('');
+  } catch {
+    return `${scaled}${suffix}`;
+  }
+}
+
 /** `mod` reshapes the spend for the demo scenes, as the prototype's `cats` does. */
 export type BudgetTrackerState = { period: string; mod: 'none' | 'under' | 'over' | 'some'; loadReady: boolean };
 export type BudgetTrackerSeed = Partial<BudgetTrackerState>;
@@ -60,15 +86,16 @@ export function budgetRows(c: BudgetTrackerSettings, s: BudgetTrackerState): Bud
     /* Near the limit: money left, but past `attentionAt`. Exactly on budget is a muted $0, never near. */
     const near = d > 0 && c.attentionAt !== null && c.attentionAt !== undefined && ratio >= c.attentionAt;
     const pctUsed = Number.isFinite(ratio) ? Math.round(ratio * 100) : 100;
-    const variance = over ? `−${compactCurrency(-d, c.currency)} over`
-      : d === 0 ? compactCurrency(0, c.currency)
-      : `+${compactCurrency(d, c.currency)} left${near ? ` · ${pctUsed}% used` : ''}`;
+    const amount = compactBudgetMoney(Math.abs(d), c.currency, c);
+    const variance = over ? fill(c.overText, { amount, percent: pctUsed })
+      : d === 0 ? amount
+      : fill(near ? c.nearText : c.leftText, { amount, percent: pctUsed });
     return {
       ...x, ratio, over, near, variance,
       varianceTone: over || near ? 'apricot' : d === 0 ? 'muted' : 'mint',
       overlay: over ? 'over' : near ? 'near' : null,
-      valueText: `${pctUsed}% — ${over ? `${compactCurrency(-d, c.currency)} over` : d === 0 ? 'exactly on budget' : `${compactCurrency(d, c.currency)} left`}`,
-      tooltip: `Spent ${money(x.spent, c.currency)} of ${money(x.allocated, c.currency)} · ${pctUsed}%`,
+      valueText: fill(over ? c.valueOverText : d === 0 ? c.valueExactText : c.valueLeftText, { amount, percent: pctUsed }),
+      tooltip: fill(c.tooltipText, { spent: money(x.spent, c.currency), allocated: money(x.allocated, c.currency), percent: pctUsed }),
     };
   });
 }

package/src/components/onboarding/budget-tracker/index.ts

@@ -1,9 +1,9 @@
 export {
   BUDGET_TRACKER_IN_FLIGHT, BUDGET_TRACKER_PRESETS, BUDGET_TRACKER_SCENES, validateBudgetTracker,
-  type BudgetTrackerCategory, type BudgetTrackerScene, type BudgetTrackerSettings,
+  type BudgetTrackerCategory, type BudgetTrackerCopy, type BudgetTrackerScene, type BudgetTrackerSettings,
 } from './contract';
 export {
-  budgetRows, budgetScene, budgetTotals, budgetTrackerSeed, categoriesOf, initialBudgetTracker,
+  budgetRows, budgetScene, compactBudgetMoney, budgetTotals, budgetTrackerSeed, categoriesOf, initialBudgetTracker,
   type BudgetTrackerRow, type BudgetTrackerSeed, type BudgetTrackerState,
 } from './engine';
 export { BudgetTracker, type BudgetTrackerProps } from './BudgetTrackerView';

package/src/components/onboarding/budget-tracker/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "budget-tracker",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -49,6 +51,23 @@
         "spent": 214600
       }
     ],
+    "summaryLabel": "Summary",
+    "allocatedLabel": "Allocated",
+    "spentLabel": "Spent",
+    "utilizationLabel": "Utilization",
+    "categoriesLabel": "Categories",
+    "periodSelectLabel": "Period",
+    "leftText": "+{amount} left",
+    "overText": "−{amount} over",
+    "nearText": "+{amount} left · {percent}% used",
+    "valueLeftText": "{percent}% — {amount} left",
+    "valueOverText": "{percent}% — {amount} over",
+    "valueExactText": "{percent}% — exactly on budget",
+    "tooltipText": "Spent {spent} of {allocated} · {percent}%",
+    "thousandsSuffix": "K",
+    "millionsSuffix": "M",
+    "billionsSuffix": "B",
+    "trillionsSuffix": "T",
     "emptyTitle": "No categories yet",
     "emptyBody": "Add a category to start tracking spend against it.",
     "emptyCta": "Add category",
@@ -295,4 +314,4 @@
       "scenario": "Costs load, then reveal. The research agent is over budget."
     }
   }
-}
+}

package/src/components/onboarding/calendar-sync/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "calendar-sync",
   "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/carousel/CarouselView.tsx

@@ -3,7 +3,7 @@ import { View, type ViewProps } from 'react-native';
 import { Box, Icon, MotionView, Pressable, Text, isKeyboardModality, useSwap } from '../../../core';
 import { DotPager, TypeTile } from '../../../ds';
 import { blockRadii, focusRingFor, useDs, type DensityName } from '../../../tokens';
-import { iconFor, resolveConfig, type OnboardingPreset, type PatternStatus } from '../shared/contract';
+import { fill, iconFor, resolveConfig, type OnboardingPreset, type PatternStatus } from '../shared/contract';
 import type { OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
@@ -92,7 +92,7 @@ function Valid({ config, density, status, reload, initial, onFinish, onScene, te
       onRetry={pattern.retry}
       onEmptyAction={pattern.retry}
       meta={skip}
-      chip={state.done ? { tone: 'success', label: 'Done' } : undefined}
+      chip={state.done ? { tone: 'success', label: config.doneChip } : undefined}
       hint={v.footerHint}
       secondary={{
         label: v.secondaryLabel,
@@ -140,12 +140,12 @@ function Valid({ config, density, status, reload, initial, onFinish, onScene, te
           <Text>{v.live}</Text>
         </Box>
         <DotPager
-          label={`${config.title} slides`}
+          label={fill(config.pagerLabelTemplate, { title: config.title })}
           tone="accent"
           count={n}
           index={state.done ? -1 : state.index}
           onChange={i => send({ type: 'go', index: i })}
-          itemLabel={(i, m) => `Slide ${i + 1} of ${m}`}
+          itemLabel={(i, m) => fill(config.slideDotTemplate, { n: i + 1, total: m })}
         />
       </Region>
     </OnboardingCard>

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

@@ -26,6 +26,16 @@ export type CarouselSettings = HeaderConfig & LoadCopy & {
   restartLabel: string;
   doneTitle: string;
   doneBody: string;
+  /** The header chip once the tour is finished. */
+  doneChip: string;
+  /** Announced on each move: `{n}`, `{total}`, `{title}`. */
+  slideLiveTemplate: string;
+  /** The footer: `{n}` of `{total}`. */
+  progressTemplate: string;
+  /** The dot pager's name: `{title}` is the tour's. */
+  pagerLabelTemplate: string;
+  /** Each dot's name: `{n}`, `{total}`. */
+  slideDotTemplate: string;
 };
 
 export const CAROUSEL_PRESETS = presetsJson as unknown as PresetsFile<CarouselSettings>;

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

@@ -1,3 +1,4 @@
+import { fill } from '../shared/contract';
 import type { CarouselScene, CarouselSettings } from './contract';
 
 /** **The Carousel engine** — pure: which slide, and whether the tour is finished. */
@@ -46,8 +47,8 @@ export function carouselView(c: CarouselSettings, s: CarouselState) {
   return {
     scene: (s.done ? 'done' : s.index === 0 ? 'default' : last ? 'last' : 'middle') as CarouselScene,
     last,
-    live: s.done ? c.doneTitle : n ? `Slide ${s.index + 1} of ${n}: ${c.slides[s.index]!.title}` : '',
-    footerHint: `${s.done ? n : s.index + 1} of ${n} slides`,
+    live: s.done ? c.doneTitle : n ? fill(c.slideLiveTemplate, { n: s.index + 1, total: n, title: c.slides[s.index]!.title }) : '',
+    footerHint: fill(c.progressTemplate, { n: s.done ? n : s.index + 1, total: n }),
     secondaryLabel: s.done ? c.restartLabel : c.prevLabel,
     secondaryDisabled: !s.done && s.index === 0,
     primaryLabel: last ? c.finalLabel : c.nextLabel,

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

@@ -1,6 +1,8 @@
 {
   "component": "carousel",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -19,6 +21,11 @@
     "restartLabel": "Replay tour",
     "doneTitle": "You’re all set",
     "doneBody": "You can replay this tour from Help at any time.",
+    "doneChip": "Done",
+    "slideLiveTemplate": "Slide {n} of {total}: {title}",
+    "progressTemplate": "{n} of {total} slides",
+    "pagerLabelTemplate": "{title} slides",
+    "slideDotTemplate": "Slide {n} of {total}",
     "emptyTitle": "No slides in this tour",
     "emptyBody": "This tour hasn’t been set up yet.",
     "emptyCta": "Reload",

package/src/components/onboarding/cicd-setup/CicdSetupView.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon, MotionView, Text, useSwap, useTween } from '../../../core';
 import { Button, Callout, MetaChip } from '../../../ds';
 import { 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';
@@ -87,10 +87,10 @@ function StageRowView({ i, state, config, onConfigure }: { i: number; state: Cic
     : next ? { bg: colors.surface1, ink: colors.accentInk, edge: colors.accentFill }
     : { bg: colors.band, ink: colors.textSecondary, edge: colors.band };
   const slot = locked ? 'locked' : done ? 'ok' : failed ? 'bad' : 'btn';
-  const state_ = locked ? 'locked' : done ? config.configuredLabel : failed ? config.failedLabel : 'not configured';
+  const state_ = locked ? config.lockedStateLabel : done ? config.configuredLabel : failed ? config.failedLabel : config.notConfiguredLabel;
 
   return (
-    <Box role="listitem" row gap="s3" aria-label={`Stage ${i + 1} of ${config.stages.length}: ${stage.title}, ${state_}`}>
+    <Box role="listitem" row gap="s3" aria-label={fill(config.stageAriaLabel, { n: i + 1, total: config.stages.length, title: stage.title, state: state_ })}>
       <Box align="center" style={{ width: 24 }}>
         <Box width={24} height={24} radius="pill" align="center" justify="center" style={{ backgroundColor: node.bg, borderWidth: 1.5, borderColor: node.edge }}>
           <MotionView style={{ opacity: markFade }}>

package/src/components/onboarding/cicd-setup/contract.ts

@@ -32,6 +32,22 @@ export type CicdSetupSettings = HeaderConfig & LoadCopy & {
   failBody: string;
   primaryLabel: string;
   finishedHint: string;
+  /** The chip: `{n}` of `{total}` stages, then `{noun}`. */
+  countLabel: string;
+  /** The failure title when a stage has none of its own (`{title}`: the stage). */
+  failTitle: string;
+  /** Footer hints: every stage done; order enforced; any order. */
+  allConfiguredHint: string;
+  inOrderHint: string;
+  anyOrderHint: string;
+  /** The primary button while finishing, and once finished. */
+  finishingLabel: string;
+  finishedPrimaryLabel: string;
+  /** A stage row's accessible name: `{n}`, `{total}`, `{title}`, `{state}`. */
+  stageAriaLabel: string;
+  /** `{state}` for a locked stage, and for one not configured yet. */
+  lockedStateLabel: string;
+  notConfiguredLabel: string;
 };
 
 export const CICD_PRESETS = presetsJson as unknown as PresetsFile<CicdSetupSettings>;

package/src/components/onboarding/cicd-setup/engine.ts

@@ -1,4 +1,5 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
 import type { CicdScene, CicdSetupSettings } from './contract';
 
 /** **The CI/CD Setup engine** — pure: each stage's phase, which are locked, and the finish. */
@@ -70,10 +71,10 @@ export function cicdView(c: CicdSetupSettings, s: CicdState) {
   return {
     configured: n,
     scene: (finished ? 'finished' : all ? 'all' : failed ? 'failed' : s.rows.some(r => r.phase === 'busy') ? 'configuring' : n > 0 ? 'partial' : 'default') as CicdScene,
-    chip: { tone: (all ? 'success' : failed ? 'attention' : 'neutral') as StateChipTone, label: `${n} of ${total} ${c.noun}` },
-    failure: failed ? { title: failed.failTitle ?? `Couldn’t configure ${failed.title}`, body: failed.failBody ?? c.failBody } : null,
-    footerHint: finished ? c.finishedHint : all ? 'Every stage is configured' : c.enforceOrder ? 'Configure each stage in order' : 'Configure these in any order',
-    primaryLabel: s.finish === 'finishing' ? 'Finishing…' : finished ? 'Done' : c.primaryLabel,
+    chip: { tone: (all ? 'success' : failed ? 'attention' : 'neutral') as StateChipTone, label: fill(c.countLabel, { n, total, noun: c.noun }) },
+    failure: failed ? { title: failed.failTitle ?? fill(c.failTitle, { title: failed.title }), body: failed.failBody ?? c.failBody } : null,
+    footerHint: finished ? c.finishedHint : all ? c.allConfiguredHint : c.enforceOrder ? c.inOrderHint : c.anyOrderHint,
+    primaryLabel: s.finish === 'finishing' ? c.finishingLabel : finished ? c.finishedPrimaryLabel : c.primaryLabel,
     canFinish: all && s.finish === 'idle',
   };
 }

package/src/components/onboarding/cicd-setup/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "cicd-setup",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -44,6 +46,16 @@
     "failBody": "Nothing was changed. Check the settings for this stage, then retry.",
     "primaryLabel": "Finish setup",
     "finishedHint": "Pipeline is live · runs on every push",
+    "countLabel": "{n} of {total} {noun}",
+    "failTitle": "Couldn’t configure {title}",
+    "allConfiguredHint": "Every stage is configured",
+    "inOrderHint": "Configure each stage in order",
+    "anyOrderHint": "Configure these in any order",
+    "finishingLabel": "Finishing…",
+    "finishedPrimaryLabel": "Done",
+    "stageAriaLabel": "Stage {n} of {total}: {title}, {state}",
+    "lockedStateLabel": "locked",
+    "notConfiguredLabel": "not configured",
     "emptyTitle": "No stages yet",
     "emptyBody": "Choose a template to add stages.",
     "emptyCta": "Refresh"