@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/receipt-printer/engine.ts

@@ -1,6 +1,7 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
 import {
-  FIELD_KEY, RECEIPT_MAX_AMOUNT, RECEIPT_MAX_FIELDS, RECEIPT_MAX_ITEMS, RECEIPT_MAX_LENGTH, RECEIPT_MAX_QUANTITY,
+  FIELD_KEY, RECEIPT_MONTHS, messagesOf, RECEIPT_MAX_AMOUNT, RECEIPT_MAX_FIELDS, RECEIPT_MAX_ITEMS, RECEIPT_MAX_LENGTH, RECEIPT_MAX_QUANTITY,
   type ReceiptCurrency, type ReceiptField, type ReceiptItemField, type ReceiptPaymentMethod, type ReceiptPrinterScene,
   type ReceiptPrinterSettings, type ReceiptValues,
 } from './contract';
@@ -150,39 +151,40 @@ const decimalsOf = (s: string) => (s.includes('.') ? s.split('.')[1]!.length : 0
 /** The form's problems, one message per field, in plain words. Empty when it can print. */
 export function formErrors(draft: ReceiptDraft, c: ReceiptPrinterSettings): ReceiptErrors {
   const e: ReceiptErrors = {};
-  if (draft.message.trim().length > RECEIPT_MAX_LENGTH.message) e.message = `Keep it to ${RECEIPT_MAX_LENGTH.message} characters — it has to fit the receipt.`;
+  const m = messagesOf(c);
+  if (draft.message.trim().length > RECEIPT_MAX_LENGTH.message) e.message = fill(m.tooLong, { max: RECEIPT_MAX_LENGTH.message });
   const keys = new Set<string>();
   draft.fields.forEach((f, i) => {
     const label = f.label.trim();
-    if (!label) e[`fields.${i}.label`] = 'Give the field a label.';
-    else if (label.length > RECEIPT_MAX_LENGTH.fieldLabel) e[`fields.${i}.label`] = `Keep the label to ${RECEIPT_MAX_LENGTH.fieldLabel} characters.`;
-    if (!FIELD_KEY.test(f.key)) e[`fields.${i}.key`] = 'A key starts with a letter and uses letters, digits and _.';
-    else if (keys.has(f.key)) e[`fields.${i}.key`] = `${f.key} is already a key.`;
+    if (!label) e[`fields.${i}.label`] = m.labelMissing;
+    else if (label.length > RECEIPT_MAX_LENGTH.fieldLabel) e[`fields.${i}.label`] = fill(m.labelTooLong, { max: RECEIPT_MAX_LENGTH.fieldLabel });
+    if (!FIELD_KEY.test(f.key)) e[`fields.${i}.key`] = m.keyInvalid;
+    else if (keys.has(f.key)) e[`fields.${i}.key`] = fill(m.keyTaken, { key: f.key });
     keys.add(f.key);
     const v = f.value.trim();
     const max = f.heading ? RECEIPT_MAX_LENGTH.heading : RECEIPT_MAX_LENGTH.fieldValue;
-    if (!v) e[`fields.${i}.value`] = `Enter ${label ? label.toLowerCase() : 'a value'}.`;
-    else if (v.length > max) e[`fields.${i}.value`] = `Keep it to ${max} characters — it has to fit the receipt.`;
+    if (!v) e[`fields.${i}.value`] = label ? fill(m.valueMissing, { label: label.toLowerCase() }) : m.valueMissingNoLabel;
+    else if (v.length > max) e[`fields.${i}.value`] = fill(m.tooLong, { max });
   });
   const currency = currenciesOf(c).find(x => x.code === draft.currency);
-  if (!draft.items.length) e.items = 'Add at least one item.';
-  if (draft.items.length > RECEIPT_MAX_ITEMS) e.items = `A receipt prints at most ${RECEIPT_MAX_ITEMS} lines.`;
+  if (!draft.items.length) e.items = m.noItems;
+  if (draft.items.length > RECEIPT_MAX_ITEMS) e.items = fill(m.tooManyItems, { max: RECEIPT_MAX_ITEMS });
   draft.items.forEach((it, i) => {
     const name = it.name.trim();
-    if (!name) e[`items.${i}.name`] = 'Enter what was paid for.';
-    else if (name.length > RECEIPT_MAX_LENGTH.itemName!) e[`items.${i}.name`] = `Keep it to ${RECEIPT_MAX_LENGTH.itemName} characters — it has to fit the receipt.`;
+    if (!name) e[`items.${i}.name`] = m.itemNameMissing;
+    else if (name.length > RECEIPT_MAX_LENGTH.itemName!) e[`items.${i}.name`] = fill(m.tooLong, { max: RECEIPT_MAX_LENGTH.itemName! });
     const q = it.quantity.trim();
-    if (!/^\d+$/.test(q) || Number(q) < 1 || Number(q) > RECEIPT_MAX_QUANTITY) e[`items.${i}.quantity`] = `Enter a whole number from 1 to ${RECEIPT_MAX_QUANTITY}.`;
+    if (!/^\d+$/.test(q) || Number(q) < 1 || Number(q) > RECEIPT_MAX_QUANTITY) e[`items.${i}.quantity`] = fill(m.quantityInvalid, { max: RECEIPT_MAX_QUANTITY });
     const a = it.amount.trim();
-    if (!/^\d+(\.\d+)?$/.test(a) || Number(a) <= 0) e[`items.${i}.amount`] = 'Enter an amount above zero.';
-    else if (Number(a) > RECEIPT_MAX_AMOUNT) e[`items.${i}.amount`] = `Enter an amount up to ${RECEIPT_MAX_AMOUNT.toLocaleString('en-US')}.`;
+    if (!/^\d+(\.\d+)?$/.test(a) || Number(a) <= 0) e[`items.${i}.amount`] = m.amountInvalid;
+    else if (Number(a) > RECEIPT_MAX_AMOUNT) e[`items.${i}.amount`] = fill(m.amountTooLarge, { max: RECEIPT_MAX_AMOUNT.toLocaleString('en-US') });
     else if (currency && decimalsOf(a) > currency.decimals) {
-      e[`items.${i}.amount`] = currency.decimals === 0 ? `${currency.code} has no minor unit — enter a whole amount.` : `${currency.code} has ${currency.decimals} decimal places at most.`;
+      e[`items.${i}.amount`] = currency.decimals === 0 ? fill(m.noMinorUnit, { code: currency.code }) : fill(m.tooManyDecimals, { code: currency.code, decimals: currency.decimals });
     }
   });
-  if (!currency) e.currency = 'Choose a currency.';
-  if (!methodsOf(c).some(x => x.id === draft.paymentMethod)) e.paymentMethod = 'Choose how it was paid.';
-  if (!validDate(draft.date.trim())) e.date = 'Enter a date as YYYY-MM-DD, like 2026-09-27.';
+  if (!currency) e.currency = m.currencyMissing;
+  if (!methodsOf(c).some(x => x.id === draft.paymentMethod)) e.paymentMethod = m.paymentMethodMissing;
+  if (!validDate(draft.date.trim())) e.date = m.dateInvalid;
   return e;
 }
 
@@ -200,12 +202,10 @@ export function valuesOf(draft: ReceiptDraft): ReceiptValues {
 
 /* ── The printed lines ────────────────────────────────────────────────────────────────────── */
 
-const MONTHS = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
-
 /** `2026-09-27` → `27 SEP 2026`. */
-export function receiptDate(iso: string): string {
+export function receiptDate(iso: string, months: readonly string[] = RECEIPT_MONTHS): string {
   const m = DATE.exec(iso);
-  return m ? `${Number(m[3])} ${MONTHS[Number(m[2]) - 1] ?? ''} ${m[1]}` : iso;
+  return m ? `${Number(m[3])} ${months[Number(m[2]) - 1] ?? RECEIPT_MONTHS[Number(m[2]) - 1] ?? ''} ${m[1]}` : iso;
 }
 
 /** `₹1,240.00`, `¥7,500` — grouped, and to the currency's own minor unit. Deterministic: no locale. */
@@ -233,9 +233,9 @@ export function receiptLines(v: ReceiptValues, c: ReceiptPrinterSettings, defs:
     title: title.toUpperCase(),
     badge: (title.match(/[\p{L}\p{N}]/u)?.[0] ?? '•').toUpperCase(),
     total: formatMoney(total, currency),
-    meta: `${receiptDate(v.date)} | ${method.toUpperCase()}${paid}`,
+    meta: `${receiptDate(v.date, c.monthNames?.length === 12 ? c.monthNames : RECEIPT_MONTHS)} | ${method.toUpperCase()}${paid}`,
     details: defs.filter(f => !f.heading).map(f => ({ label: f.label, value: v.fields[f.key] ?? '' })),
-    items: v.items.map(it => ({ line: `${it.quantity}X ${it.name}`, amount: formatMoney(it.quantity * it.amount, currency) })),
+    items: v.items.map(it => ({ line: fill(messagesOf(c).itemLine, { quantity: it.quantity, name: it.name }), amount: formatMoney(it.quantity * it.amount, currency) })),
     paymentMethod: method,
     message: v.message.toUpperCase(),
     paymentLabel: word(c.paymentLabel, 'Payment'),
@@ -340,8 +340,8 @@ export function receiptPrinterView(c: ReceiptPrinterSettings, s: ReceiptPrinterS
     canRemoveItem: s.run !== 'printing' && s.draft.items.length > 1,
     canAddField: s.run !== 'printing' && s.draft.fields.length < RECEIPT_MAX_FIELDS,
     chip: s.run === 'printed' ? { tone: 'success' as StateChipTone, label: c.printedChip }
-      : s.run === 'failed' ? { tone: 'attention' as StateChipTone, label: 'Didn’t print' }
-      : count ? { tone: 'attention' as StateChipTone, label: count === 1 ? '1 to fix' : `${count} to fix` }
+      : s.run === 'failed' ? { tone: 'attention' as StateChipTone, label: messagesOf(c).failedChip }
+      : count ? { tone: 'attention' as StateChipTone, label: fill(count === 1 ? messagesOf(c).toFixOne : messagesOf(c).toFixMany, { count }) }
       : undefined,
     hint: s.run === 'printing' ? c.printingHint : s.run === 'printed' ? c.printedHint : count ? c.invalidHint : c.readyHint,
     primaryLabel: s.run === 'printing' ? c.printingLabel : s.run === 'printed' || s.run === 'failed' ? c.againLabel : c.printLabel,

package/src/components/onboarding/receipt-printer/index.ts

@@ -1,7 +1,7 @@
 export {
   FIELD_KEY, RECEIPT_FIELDS, RECEIPT_MAX_AMOUNT, RECEIPT_MAX_FIELDS, RECEIPT_MAX_ITEMS, RECEIPT_MAX_LENGTH, RECEIPT_MAX_QUANTITY, RECEIPT_PRINTER_IN_FLIGHT, RECEIPT_PRINTER_PRESETS, RECEIPT_PRINTER_SCENES,
-  validateReceiptPrinter,
-  type ReceiptCurrency, type ReceiptField, type ReceiptFieldDef, type ReceiptFormLabels, type ReceiptItem, type ReceiptItemField, type ReceiptPaperLabels, type ReceiptPaymentMethod, type ReceiptPrinterScene, type ReceiptPrinterSettings, type ReceiptValues,
+  RECEIPT_MESSAGES, RECEIPT_MONTHS, messagesOf, validateReceiptPrinter,
+  type ReceiptCurrency, type ReceiptField, type ReceiptFieldDef, type ReceiptFormLabels, type ReceiptItem, type ReceiptItemField, type ReceiptMessages, type ReceiptPaperLabels, type ReceiptPaymentMethod, type ReceiptPrinterScene, type ReceiptPrinterSettings, type ReceiptValues,
 } from './contract';
 export {
   blankItem, fieldDrafts, formErrors, keyFromLabel, formatMoney, initialDraft, initialReceiptPrinter, previewLines, receiptDate, receiptLines, receiptPrinterSeed, receiptPrinterView,

package/src/components/onboarding/receipt-printer/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "receipt-printer",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load the receipt printer",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -114,7 +116,51 @@
     "invalidHint": "Fix the highlighted fields to print",
     "printedChip": "Printed",
     "failTitle": "The receipt didn’t print",
-    "failBody": "Nothing was charged again. Try printing it once more."
+    "failBody": "Nothing was charged again. Try printing it once more.",
+    "messages": {
+      "labelMissing": "Give the field a label.",
+      "labelTooLong": "Keep the label to {max} characters.",
+      "keyInvalid": "A key starts with a letter and uses letters, digits and _.",
+      "keyTaken": "{key} is already a key.",
+      "valueMissing": "Enter {label}.",
+      "valueMissingNoLabel": "Enter a value.",
+      "tooLong": "Keep it to {max} characters — it has to fit the receipt.",
+      "noItems": "Add at least one item.",
+      "tooManyItems": "A receipt prints at most {max} lines.",
+      "itemNameMissing": "Enter what was paid for.",
+      "quantityInvalid": "Enter a whole number from 1 to {max}.",
+      "amountInvalid": "Enter an amount above zero.",
+      "amountTooLarge": "Enter an amount up to {max}.",
+      "noMinorUnit": "{code} has no minor unit — enter a whole amount.",
+      "tooManyDecimals": "{code} has {decimals} decimal places at most.",
+      "currencyMissing": "Choose a currency.",
+      "paymentMethodMissing": "Choose how it was paid.",
+      "dateInvalid": "Enter a date as YYYY-MM-DD, like 2026-09-27.",
+      "datePlaceholder": "YYYY-MM-DD",
+      "failedChip": "Didn’t print",
+      "toFixOne": "{count} to fix",
+      "toFixMany": "{count} to fix",
+      "fixFieldDefinition": "{editFields} to fix its label or key.",
+      "printerReady": "Receipt printer, ready",
+      "printerPrinting": "Receipt printer, printing receipt",
+      "printerPrinted": "Receipt printer, printed receipt",
+      "printedAnnouncement": "Receipt printed.",
+      "itemLine": "{quantity}X {name}"
+    },
+    "monthNames": [
+      "JAN",
+      "FEB",
+      "MAR",
+      "APR",
+      "MAY",
+      "JUN",
+      "JUL",
+      "AUG",
+      "SEP",
+      "OCT",
+      "NOV",
+      "DEC"
+    ]
   },
   "cases": {
     "case1": {},
@@ -274,7 +320,21 @@
       "removeFieldLabel": "Retirer le champ",
       "fieldLabelLabel": "Libellé",
       "fieldKeyLabel": "Clé",
-      "headingLabel": "Titre"
+      "headingLabel": "Titre",
+      "monthNames": [
+        "JANV",
+        "FÉVR",
+        "MARS",
+        "AVR",
+        "MAI",
+        "JUIN",
+        "JUIL",
+        "AOÛT",
+        "SEPT",
+        "OCT",
+        "NOV",
+        "DÉC"
+      ]
     },
     "case5": {
       "type": "action",

package/src/components/onboarding/score-summary/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "score-summary",
   "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/seat-allocation/SeatAllocationView.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { Box, Text } from '../../../core';
 import { Callout, NumberStepper, ProgressBar, TickNumber, TypeTile } from '../../../ds';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { iconFor, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, iconFor, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import { ONBOARDING_TIMING, type OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
@@ -80,8 +80,8 @@ function Valid({
       chip={v.chip}
       hint={(
         <Box row align="center" gap="s1">
-          <TickNumber value={Math.max(0, v.rem)} fontSize={12} tone={v.full ? 'apricot' : 'default'} label="Remaining" />
-          <Text variant="caption" style={{ fontSize: 12, color: v.full ? colors.status.needsUser : colors.textSecondary }}>remaining</Text>
+          <TickNumber value={Math.max(0, v.rem)} fontSize={12} tone={v.full ? 'apricot' : 'default'} label={config.remainingLabel} />
+          <Text variant="caption" style={{ fontSize: 12, color: v.full ? colors.status.needsUser : colors.textSecondary }}>{config.remainingText}</Text>
         </Box>
       )}
       primary={{ label: v.primaryLabel, disabled: !v.canSave, busy: locked, onPress: () => { if (!seatView(config, ref.current).canSave) return; send({ type: 'save' }); run(); } }}>
@@ -92,10 +92,10 @@ function Valid({
             <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{config.unitHint}</Text>
           </Box>
           <Box row align="flex-end" gap="s2">
-            <TickNumber value={v.used} fontSize={24} label={`${config.statLabel} used`} />
-            <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 13, paddingBottom: 4 }}>{`of ${n(config.totalSeats)} used`}</Text>
+            <TickNumber value={v.used} fontSize={24} label={fill(config.usedLabelTemplate, { stat: config.statLabel })} />
+            <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 13, paddingBottom: 4 }}>{fill(config.ofTotalTemplate, { total: n(config.totalSeats) })}</Text>
           </Box>
-          <ProgressBar bare track="surface" label={`${config.statLabel} used`} value={v.used} max={config.totalSeats} tone={v.full ? 'attention' : 'ink'} format={() => `${n(v.used)} of ${n(config.totalSeats)} used${v.full ? ' · all seats used' : ''}`} />
+          <ProgressBar bare track="surface" label={fill(config.usedLabelTemplate, { stat: config.statLabel })} value={v.used} max={config.totalSeats} tone={v.full ? 'attention' : 'ink'} format={() => fill(v.full ? config.progressFullTemplate : config.progressTemplate, { used: n(v.used), total: n(config.totalSeats) })} />
         </Box>
         <Box role="list" aria-label={config.title}>
           {config.groups.map((g, i) => {
@@ -108,13 +108,15 @@ function Valid({
                   <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{v.hint(i)}</Text>
                 </Box>
                 <NumberStepper
-                  label={`${g.name} ${config.statLabel.toLowerCase()}`}
+                  label={fill(config.groupLabelTemplate, { group: g.name, stat: config.statLabel.toLowerCase() })}
+                  increaseLabel={fill(config.increaseTemplate, { group: g.name, stat: config.statLabel.toLowerCase() })}
+                  decreaseLabel={fill(config.decreaseTemplate, { group: g.name, stat: config.statLabel.toLowerCase() })}
                   value={seats}
                   onChange={x => send({ type: 'set', index: i, seats: x })}
                   min={g.min}
                   max={seats + Math.max(0, v.rem)}
                   disabled={locked}
-                  format={x => `${x} ${config.statLabel.toLowerCase()}`}
+                  format={x => fill(config.stepperValueTemplate, { count: x, stat: config.statLabel.toLowerCase() })}
                 />
               </Box>
             );

package/src/components/onboarding/seat-allocation/contract.ts

@@ -22,6 +22,29 @@ export type SeatAllocationSettings = HeaderConfig & LoadCopy & {
   primaryLabel: string;
   saveErrorTitle: string;
   saveErrorBody: string;
+  savingLabel: string;
+  savedLabel: string;
+  /** The chip when every seat is given out. */
+  allUsedChip: string;
+  /** The chip otherwise: `{count}` seats left. */
+  freeChipTemplate: string;
+  /** A group's hint at its minimum: `{min}`. */
+  minimumHintTemplate: string;
+  /** The remaining figure's name, and the word after it. */
+  remainingLabel: string;
+  remainingText: string;
+  /** `{stat}` is `statLabel`. */
+  usedLabelTemplate: string;
+  /** Beside the used figure: `{total}`. */
+  ofTotalTemplate: string;
+  /** The bar, read out: `{used}`, `{total}`; the second when every seat is used. */
+  progressTemplate: string;
+  progressFullTemplate: string;
+  /** A group's stepper: `{group}`, `{stat}` (lower case); its value: `{count}`, `{stat}`. */
+  groupLabelTemplate: string;
+  increaseTemplate: string;
+  decreaseTemplate: string;
+  stepperValueTemplate: string;
 };
 
 export const SEAT_PRESETS = presetsJson as unknown as PresetsFile<SeatAllocationSettings>;

package/src/components/onboarding/seat-allocation/engine.ts

@@ -1,5 +1,5 @@
 import type { StateChipTone } from '../../../ds';
-import type { SavePhase } from '../shared/contract';
+import { fill, type SavePhase } from '../shared/contract';
 import type { SeatAllocationSettings, SeatScene } from './contract';
 
 /** **The Seat Allocation engine** — pure: seats per group within the total and each minimum. */
@@ -47,10 +47,10 @@ export function seatView(c: SeatAllocationSettings, s: SeatState) {
     rem,
     full,
     scene: (s.save !== 'idle' ? s.save : full ? 'allUsed' : c.groups.some((g, i) => s.seats[i] === g.min && g.min > 0) ? 'atMin' : 'default') as SeatScene,
-    chip: s.save === 'saving' ? { tone: 'neutral' as StateChipTone, label: 'Saving…' }
-      : { tone: (s.save === 'saved' ? 'success' : full ? 'attention' : 'neutral') as StateChipTone, label: s.save === 'saved' ? 'Saved' : full ? 'All seats used' : `${rem.toLocaleString('en-US')} free` },
-    hint: (i: number) => (s.seats[i]! <= c.groups[i]!.min ? `Minimum ${c.groups[i]!.min}` : c.groups[i]!.detail),
-    primaryLabel: s.save === 'saving' ? 'Saving…' : s.save === 'saved' ? 'Saved' : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
+    chip: s.save === 'saving' ? { tone: 'neutral' as StateChipTone, label: c.savingLabel }
+      : { tone: (s.save === 'saved' ? 'success' : full ? 'attention' : 'neutral') as StateChipTone, label: s.save === 'saved' ? c.savedLabel : full ? c.allUsedChip : fill(c.freeChipTemplate, { count: rem.toLocaleString('en-US') }) },
+    hint: (i: number) => (s.seats[i]! <= c.groups[i]!.min ? fill(c.minimumHintTemplate, { min: c.groups[i]!.min }) : c.groups[i]!.detail),
+    primaryLabel: s.save === 'saving' ? c.savingLabel : s.save === 'saved' ? c.savedLabel : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
     canSave: s.save !== 'saving' && s.save !== 'saved' && rem >= 0,
   };
 }

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

@@ -1,6 +1,8 @@
 {
   "component": "seat-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",
@@ -43,6 +45,21 @@
     "primaryLabel": "Save seats",
     "saveErrorTitle": "Couldn’t save seats",
     "saveErrorBody": "Nothing was changed. Retry when you’re ready.",
+    "savingLabel": "Saving…",
+    "savedLabel": "Saved",
+    "allUsedChip": "All seats used",
+    "freeChipTemplate": "{count} free",
+    "minimumHintTemplate": "Minimum {min}",
+    "remainingLabel": "Remaining",
+    "remainingText": "remaining",
+    "usedLabelTemplate": "{stat} used",
+    "ofTotalTemplate": "of {total} used",
+    "progressTemplate": "{used} of {total} used",
+    "progressFullTemplate": "{used} of {total} used · all seats used",
+    "groupLabelTemplate": "{group} {stat}",
+    "increaseTemplate": "Increase {group} {stat}",
+    "decreaseTemplate": "Decrease {group} {stat}",
+    "stepperValueTemplate": "{count} {stat}",
     "emptyTitle": "No groups yet",
     "emptyBody": "Create a group before you hand out seats.",
     "emptyCta": "Refresh"

package/src/components/onboarding/setup-tasks/SetupTasksView.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon, MotionView, Text, useSwap } from '../../../core';
 import { Button, MetaChip, TypeTile } from '../../../ds';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { iconFor, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, iconFor, 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';
@@ -120,7 +120,7 @@ function TaskTile({
         {done ? (
           <>
             <MetaChip kind="status" status="executed">{config.doneLabel}</MetaChip>
-            <Button variant="secondary" size="xsmall" onPress={onUndo} disabled={locked} aria-label={`Undo ${task.title}`}>Undo</Button>
+            <Button variant="secondary" size="xsmall" onPress={onUndo} disabled={locked} aria-label={fill(config.undoAriaLabel, { title: task.title })}>{config.undoLabel}</Button>
           </>
         ) : (
           <BusyGhost label={task.ctaLabel ?? config.startLabel} busyLabel={config.busyLabel} busy={phase === 'busy'} onPress={onStart} name={task.title} disabled={locked} />

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

@@ -28,6 +28,20 @@ export type SetupTasksSettings = HeaderConfig & LoadCopy & {
   primaryLabel: string;
   secondaryLabel?: string;
   finishedHint: string;
+  /** The chip once every task is done. */
+  allSetLabel: string;
+  /** The chip before that: `{n}` done of `{total}`. */
+  doneCountLabel: string;
+  /** Footer hints: all done; Continue waits for every task; tasks in any order. */
+  allReadyHint: string;
+  requireAllHint: string;
+  anyOrderHint: string;
+  /** Continue while the finish runs, and once it has. */
+  continuingLabel: string;
+  finishedPrimaryLabel: string;
+  /** A done task's Undo button, and its accessible name (`{title}`: the task). */
+  undoLabel: string;
+  undoAriaLabel: string;
 };
 
 export const SETUP_TASKS_PRESETS = presetsJson as unknown as PresetsFile<SetupTasksSettings>;

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

@@ -1,4 +1,5 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
 import type { SetupTasksScene, SetupTasksSettings } from './contract';
 
 /** **The Setup Tasks engine** — pure: each task's phase, and the step's finish. */
@@ -56,9 +57,9 @@ export function setupTasksView(c: SetupTasksSettings, s: SetupTasksState) {
     done: n,
     all,
     scene: (finished ? 'finished' : all ? 'allDone' : s.tasks.includes('busy') ? 'inProgress' : n > 0 ? 'oneDone' : 'default') as SetupTasksScene,
-    chip: { tone: (all ? 'success' : 'neutral') as StateChipTone, label: all ? 'All set' : `${n} of ${s.tasks.length} done` },
-    footerHint: finished ? c.finishedHint : all ? 'Everything is ready' : c.requireAll ? 'Finish every task to continue' : 'Do these in any order',
-    primaryLabel: s.finish === 'finishing' ? 'Continuing…' : finished ? 'Done' : c.primaryLabel,
+    chip: { tone: (all ? 'success' : 'neutral') as StateChipTone, label: all ? c.allSetLabel : fill(c.doneCountLabel, { n, total: s.tasks.length }) },
+    footerHint: finished ? c.finishedHint : all ? c.allReadyHint : c.requireAll ? c.requireAllHint : c.anyOrderHint,
+    primaryLabel: s.finish === 'finishing' ? c.continuingLabel : finished ? c.finishedPrimaryLabel : c.primaryLabel,
     canContinue: (!c.requireAll || all) && s.finish === 'idle',
     showSecondary: !finished && Boolean(c.secondaryLabel),
   };

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

@@ -1,6 +1,8 @@
 {
   "component": "setup-tasks",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -50,6 +52,15 @@
     "primaryLabel": "Continue",
     "secondaryLabel": "Skip",
     "finishedHint": "Setup finished",
+    "allSetLabel": "All set",
+    "doneCountLabel": "{n} of {total} done",
+    "allReadyHint": "Everything is ready",
+    "requireAllHint": "Finish every task to continue",
+    "anyOrderHint": "Do these in any order",
+    "continuingLabel": "Continuing…",
+    "finishedPrimaryLabel": "Done",
+    "undoLabel": "Undo",
+    "undoAriaLabel": "Undo {title}",
     "emptyTitle": "No setup tasks",
     "emptyBody": "This workspace is already set up.",
     "emptyCta": "Refresh"

package/src/components/onboarding/shared/OnboardingCard.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { MotionView, Text, useSwap } from '../../../core';
 import { BlockCard, Button, StateChip, type StateChipTone } from '../../../ds';
 import { DensityScope, useDs, type DensityName } from '../../../tokens';
-import { iconFor, type HeaderConfig, type LoadCopy, type PatternStatus } from './contract';
+import { fill, iconFor, type HeaderConfig, type LoadCopy, type PatternStatus } from './contract';
 
 /**
  * **The one card shell all seven onboarding components sit in** — `BlockCard` (S1) with the
@@ -71,13 +71,14 @@ function Shell({
       footer={footer}
       metaWraps={metaWraps}
       status={status}
+      loadingLabel={copy.loadingLabel ? fill(copy.loadingLabel, { title: header.title }) : undefined}
       empty={{
         title: copy.emptyTitle,
         body: copy.emptyBody,
         icon: iconFor(header.icon),
         action: <Button variant="primary" size="small" onPress={onEmptyAction} style={{ minWidth: 140, minHeight: density.controlH }}>{copy.emptyCta}</Button>,
       }}
-      error={{ title: copy.loadErrorTitle, body: copy.loadErrorBody, onRetry, retryLabel: copy.retryLabel }}
+      error={{ title: copy.loadErrorTitle, body: copy.loadErrorBody, onRetry, retryLabel: copy.retryLabel, chipLabel: copy.attentionLabel || undefined }}
       hint={hint}
       actions={actions !== undefined ? actions : hasActions ? (
         <>

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

@@ -66,6 +66,10 @@ export type CaseMeta = { eyebrow: string; title: string; scenario: string };
 
 /** The copy every component's load states share. */
 export type LoadCopy = {
+  /** Read out while the step loads; `{title}` is the step's title. Default: "Loading {title}". */
+  loadingLabel?: string;
+  /** The header chip while the step failed to load. Default: "Needs attention". */
+  attentionLabel?: string;
   loadErrorTitle: string;
   loadErrorBody: string;
   retryLabel: string;

package/src/components/onboarding/shared/describe.ts

@@ -0,0 +1,79 @@
+import { ONBOARDING_PRESETS } from '../presets';
+import { presetsOf, resolveConfig, type OnboardingComponent } from './contract';
+
+/**
+ * **What an agent can set on a New component — every key, described from the component's own
+ * presets.** Pure (no React), so a server route, `/llms.txt` and the MCP tools can all read it.
+ *
+ * Each setting says what kind of value it takes, its default, and whether it is **copy** (words the
+ * component shows — rename or translate them freely) or a **choice** (an id, a status, a date, a
+ * currency code: it must name something real). Lists describe their items the same way, so an agent
+ * knows it can add, remove and rename rows. `fields` marks a component whose fields the host
+ * defines itself (key, label, value) — the Receipt Printer's model.
+ */
+
+/** Keys whose values select behaviour or carry data rather than words. The agent-editable test uses the same rule. */
+export const CHOICE_KEYS = /^(type|icon|ship|id|key|status|tone|sentiment|kind|variant|format|currency|paymentMethod|value|mode|unit|date|when|time|href|url|ext|code|symbol|period|layout|state|strength|priority|previewKind|defaultPlan|defaultSelected|suggestions|range|start|end|today|hue|color|colour|primary|accent|font|avatar|initials|column|sortKey|field)$/i;
+
+export type SettingKind = 'text' | 'number' | 'yes/no' | 'list' | 'object';
+export type SettingDescription = {
+  key: string;
+  kind: SettingKind;
+  /** Words shown on screen — an agent may rename or translate them. */
+  copy: boolean;
+  default: unknown;
+  /** The case studies that set it differently. */
+  setBy?: string[];
+  /** For a list of objects: each item's keys, described the same way. */
+  item?: SettingDescription[];
+  /** For a list of strings: its items are copy (e.g. month names), or choices. */
+  itemsAreCopy?: boolean;
+};
+export type ConfigDescription = {
+  component: OnboardingComponent;
+  settings: SettingDescription[];
+  /** How many settings are copy — every word the component shows is one of these. */
+  copyCount: number;
+  /** The host defines this component's fields itself (`fields: { key, label, value }[]`). */
+  hostDefinedFields: boolean;
+};
+
+const kindOf = (v: unknown): SettingKind =>
+  Array.isArray(v) ? 'list' : typeof v === 'number' ? 'number' : typeof v === 'boolean' ? 'yes/no' : v && typeof v === 'object' ? 'object' : 'text';
+
+function describeValue(key: string, v: unknown, parentChoice = false): SettingDescription {
+  const choice = parentChoice || CHOICE_KEYS.test(key);
+  const kind = kindOf(v);
+  const d: SettingDescription = { key, kind, copy: kind === 'text' && !choice, default: v };
+  if (Array.isArray(v)) {
+    const objects = v.filter((x): x is Record<string, unknown> => Boolean(x) && typeof x === 'object' && !Array.isArray(x));
+    if (objects.length) {
+      const keys = [...new Set(objects.flatMap(o => Object.keys(o)))];
+      d.item = keys.map(k => describeValue(k, objects.find(o => o[k] !== undefined)?.[k], choice));
+      d.default = `${v.length} items`;
+    } else if (v.every(x => typeof x === 'string')) {
+      d.itemsAreCopy = !choice;
+    }
+  } else if (kind === 'object') {
+    d.item = Object.entries(v as Record<string, unknown>).map(([k, x]) => describeValue(k, x, choice));
+  }
+  return d;
+}
+
+/** Every setting of a New component, from its presets — the base values, and which case studies change each. */
+export function describeConfig(component: OnboardingComponent): ConfigDescription {
+  const presets = ONBOARDING_PRESETS[component];
+  const base = resolveConfig(presets) as Record<string, unknown>;
+  const settings = Object.entries(base).map(([k, v]) => {
+    const d = describeValue(k, v);
+    const setBy = presetsOf(presets).filter(p => presets.cases[p] && k in (presets.cases[p] as object));
+    return setBy.length ? { ...d, setBy } : d;
+  });
+  const fields = base.fields;
+  return {
+    component,
+    settings,
+    copyCount: settings.filter(s => s.copy || s.itemsAreCopy || s.item?.some(i => i.copy)).length,
+    hostDefinedFields: Array.isArray(fields) && fields.every(f => f && typeof f === 'object' && 'key' in f && 'label' in f),
+  };
+}

package/src/components/onboarding/shared/index.ts

@@ -17,3 +17,4 @@ export { shapeIssues } from './shape';
 /* The data half (server-importable) and the runner (React Native's Linking) — separate modules, so a server can read the buttons. */
 export { BUTTON_ACTION_TYPES, ONBOARDING_BUTTONS, actionIssues, type ButtonAction, type ButtonActionContext, type ButtonActionFn, type ButtonActionSpec, type ButtonActions } from './actions-data';
 export { runButtonAction } from './actions';
+export { CHOICE_KEYS, describeConfig, type ConfigDescription, type SettingDescription, type SettingKind } from './describe';

package/src/components/onboarding/shared/insight-parts.tsx

@@ -15,7 +15,7 @@ import { starFills, starsLabel } from './insight';
  * **Five stars: ink fill on line** — half at ≥ .25, full at ≥ .75 — and the words ("4 out of 5
  * stars") for a screen reader. `pop(i)` is star i's M15 pop (opacity, scale .6→1), when it has one.
  */
-export function Stars({ value, max = 5, size = 12, pop }: { value: number; max?: number; size?: number; pop?: (i: number) => { opacity: number; scale: number } }) {
+export function Stars({ value, max = 5, size = 12, pop, labelTemplate }: { value: number; max?: number; size?: number; labelTemplate?: string; pop?: (i: number) => { opacity: number; scale: number } }) {
   const { colors } = useDs();
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
@@ -30,7 +30,7 @@ export function Stars({ value, max = 5, size = 12, pop }: { value: number; max?:
           );
         })}
       </View>
-      <Hidden>{starsLabel(value, max)}</Hidden>
+      <Hidden>{starsLabel(value, max, labelTemplate)}</Hidden>
     </View>
   );
 }
@@ -89,16 +89,18 @@ export function InlineAction({ label, onPress, expanded, controls, accessibility
 
 /**
  * **Text that clamps past `limit` characters** — to `lines` lines, with Show more / Show less
- * (`aria-expanded`). At or under the limit it is simply the text.
+ * (`aria-expanded`; `moreLabel` / `lessLabel` rename them). At or under the limit it is simply the text.
  */
-export function ClampText({ body, limit, lines, nativeID, style }: { body: string; limit: number; lines: number; nativeID: string; style?: object }) {
+export function ClampText({ body, limit, lines, nativeID, style, moreLabel = 'Show more', lessLabel = 'Show less' }: {
+  body: string; limit: number; lines: number; nativeID: string; style?: object; moreLabel?: string; lessLabel?: string;
+}) {
   const { colors } = useDs();
   const [open, setOpen] = useState(false);
   const long = body.length > limit;
   return (
     <View style={{ gap: 4 }}>
       <Text nativeID={nativeID} numberOfLines={long && !open ? lines : undefined} style={{ fontSize: 13, lineHeight: 21, color: colors.textPrimary, ...style }}>{body}</Text>
-      {long ? <InlineAction label={open ? 'Show less' : 'Show more'} expanded={open} controls={nativeID} onPress={() => setOpen(o => !o)} /> : null}
+      {long ? <InlineAction label={open ? lessLabel : moreLabel} expanded={open} controls={nativeID} onPress={() => setOpen(o => !o)} /> : null}
     </View>
   );
 }

package/src/components/onboarding/shared/insight.ts

@@ -17,10 +17,10 @@ export function starFills(value: number, max = 5): StarFill[] {
   });
 }
 
-/** "4 out of 5 stars", "4.5 out of 5 stars" — the words a screen reader hears for the stars. */
-export function starsLabel(value: number, max = 5): string {
+/** "4 out of 5 stars", "4.5 out of 5 stars" — the words a screen reader hears for the stars. `template` renames them: `{value}`. */
+export function starsLabel(value: number, max = 5, template = '{value} out of 5 stars'): string {
   const v = Math.round(((value / (max || 5)) * 5) * 2) / 2;
-  return `${v} out of 5 stars`;
+  return template.replace('{value}', String(v));
 }
 
 /* ── Bands ─────────────────────────────────────────────────────────────────────────────── */