@appinternalleads/ui 0.2.0 → 0.3.0

package/src/components/onboarding/fallback/FallbackView.tsx

@@ -2,14 +2,14 @@ import { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { Box, Icon, Text } from '../../../core';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { resolveConfig, type OnboardingPreset, type PatternStatus } from '../shared/contract';
+import { fill, resolveConfig, type OnboardingPreset, type PatternStatus } from '../shared/contract';
 import type { OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
 import { usePatternStatus, useSceneReport } from '../shared/runtime';
 import { Ghost } from '../data-view/parts';
 import { DATA_VIEW_TIMING } from '../data-view/contract';
-import { FALLBACK_PRESETS, validateFallback, type FallbackSettings } from './contract';
+import { FALLBACK_PRESETS, validateFallback, type FallbackCopy, type FallbackSettings } from './contract';
 import { flatten, flatToText, noteBody, typeLabel, type Flat, type FallbackSeed } from './engine';
 import { guarded } from '../shared/guard';
 
@@ -42,13 +42,13 @@ function FallbackView(props: FallbackProps) {
 function Valid({ config, density, status, reload, initial, onCopy, onScene, testID }: Omit<FallbackProps, 'config'> & { config: FallbackSettings }) {
   const pattern = usePatternStatus(status ?? 'ready', reload);
   const data = initial && 'data' in initial ? initial.data : config.data;
-  const flat = flatten(data);
+  const flat = flatten(data, config);
   const [copied, setCopied] = useState(false);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
   useSceneReport(pattern.status === 'ready' ? (copied ? 'copied' : 'default') : pattern.status, onScene);
   const copy = async () => {
-    const text = flatToText(flat);
+    const text = flatToText(flat, config);
     const clip = (globalThis as { navigator?: { clipboard?: { writeText: (t: string) => Promise<void> } } }).navigator?.clipboard;
     try {
       if (onCopy) await onCopy(text);
@@ -69,23 +69,28 @@ function Valid({ config, density, status, reload, initial, onCopy, onScene, test
       status={pattern.status}
       onRetry={pattern.retry}
       onEmptyAction={pattern.retry}
-      chip={{ tone: 'neutral', label: 'Simplified view' }}
-      hint={`Declared as ${typeLabel(config.declared)} · ${config.failure}`}
-      actions={<Ghost label={copied ? 'Copied' : 'Copy as text'} onPress={() => { void copy(); }} height={28} />}>
-      <FlatView flat={flat} declared={config.declared} showNote={config.showNote !== false} />
+      chip={{ tone: 'neutral', label: config.chipLabel }}
+      hint={fill(config.declaredText, { declared: typeLabel(config.declared, config.typeLabels), failure: config.failure })}
+      actions={<Ghost label={copied ? config.copiedLabel : config.copyLabel} onPress={() => { void copy(); }} height={28} />}>
+      <FlatView flat={flat} declared={config.declared} showNote={config.showNote !== false} copy={config} />
     </OnboardingCard>
   );
 }
 
-/** The D9 note — "Showing a simplified view" on the well, with a 15px info glyph. */
-export function SimplifiedNote({ declared }: { declared: string }) {
+type NoteCopy = Pick<FallbackCopy, 'noteTitle' | 'noteText' | 'typeLabels'>;
+type EmptyCopy = Pick<FallbackCopy, 'noDataLabel' | 'noDataText' | 'typeLabels'>;
+/** The words when a caller gives none (Tabbed) — the presets' own. */
+const DEFAULT_COPY: FallbackCopy = FALLBACK_PRESETS.base;
+
+/** The D9 note — "Showing a simplified view" on the well, with a 15px info glyph. `copy`: its words (default: the presets'). */
+export function SimplifiedNote({ declared, copy = DEFAULT_COPY }: { declared: string; copy?: NoteCopy }) {
   const { colors } = useDs();
   return (
     <View {...({ role: 'note' } as object)} style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 10, paddingVertical: 10, paddingHorizontal: 12, borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken }}>
       <View style={{ marginTop: 1 }}><Icon name="info" size={15} color={colors.textSecondary} /></View>
       <Box flex={1} gap="s1">
-        <Text style={{ fontSize: 12, fontWeight: '600', color: colors.textPrimary }}>Showing a simplified view</Text>
-        <Text style={{ fontSize: 12, color: colors.textSecondary }}>{noteBody(declared)}</Text>
+        <Text style={{ fontSize: 12, fontWeight: '600', color: colors.textPrimary }}>{copy.noteTitle}</Text>
+        <Text style={{ fontSize: 12, color: colors.textSecondary }}>{noteBody(declared, copy)}</Text>
       </Box>
     </View>
   );
@@ -113,15 +118,15 @@ export function FlatGroups({ flat }: { flat: Flat }) {
   );
 }
 
-export function FlatView({ flat, declared, showNote = true }: { flat: Flat; declared: string; showNote?: boolean }) {
+export function FlatView({ flat, declared, showNote = true, copy = DEFAULT_COPY }: { flat: Flat; declared: string; showNote?: boolean; copy?: NoteCopy & EmptyCopy }) {
   const { colors } = useDs();
   return (
     <Box style={{ gap: 14 }}>
-      {showNote && !flat.empty ? <SimplifiedNote declared={declared} /> : null}
+      {showNote && !flat.empty ? <SimplifiedNote declared={declared} copy={copy} /> : null}
       {flat.empty ? (
         <Box align="center" gap="s1" style={{ paddingVertical: 28, paddingHorizontal: 16, borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken }}>
-          <Text style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>No data</Text>
-          <Text style={{ fontSize: 12, color: colors.textSecondary }}>{`This ${typeLabel(declared)} came back empty.`}</Text>
+          <Text style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{copy.noDataLabel}</Text>
+          <Text style={{ fontSize: 12, color: colors.textSecondary }}>{fill(copy.noDataText, { declared: typeLabel(declared, copy.typeLabels) })}</Text>
         </Box>
       ) : <FlatGroups flat={flat} />}
     </Box>

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

@@ -6,7 +6,48 @@ import presetsJson from './presets.json';
  * fails its declared type's schema, and shows it as label/value rows (`keyvalue`) — never as raw
  * text or JSON. A muted D9 note says so ("Showing a simplified view"; `showNote: false` hides it).
  */
-export type FallbackSettings = HeaderConfig & LoadCopy & {
+/**
+ * **The words the rows are built from** — shared with Tabbed's invalid panel, which uses the
+ * presets' defaults. Templates are filled with `fill()`.
+ */
+export type FlatCopy = {
+  /** A missing value ("" or null), and the whole-body empty state's title. */
+  noDataLabel: string;
+  yesLabel: string;
+  noLabel: string;
+  /** The label of a lone value, and of a list of plain values. */
+  valueLabel: string;
+  valuesLabel: string;
+  /** "Item {n}" — an unnamed item of a list. */
+  itemLabel: string;
+  /** Anything deeper, summarised: "{count} fields" / "{count} field", "{count} items" / "{count} item". */
+  fieldsText: string;
+  fieldsOneText: string;
+  itemsText: string;
+  itemsOneText: string;
+  /** What each data key is called on screen (`averageOrder` → "Average order"). A key not listed is humanised. */
+  fieldLabels?: Record<string, string>;
+};
+
+/** **Every word the Fallback shows** besides the rows'. */
+export type FallbackCopy = FlatCopy & {
+  /** The header chip. */
+  chipLabel: string;
+  /** The footer: "Declared as {declared} · {failure}". */
+  declaredText: string;
+  /** How copy names each declared type ("keyvalue" → "key-value"). A type not listed is named as it is. */
+  typeLabels: Record<string, string>;
+  /** The D9 note: its title, and "This {declared} didn’t match its expected format, so its fields are listed instead." */
+  noteTitle: string;
+  noteText: string;
+  /** The "No data" well: "This {declared} came back empty." (its title is `noDataLabel`). */
+  noDataText: string;
+  /** The copy button, and what it reads once copied. */
+  copyLabel: string;
+  copiedLabel: string;
+};
+
+export type FallbackSettings = HeaderConfig & LoadCopy & FallbackCopy & {
   /** The type the data was declared as — "stats", "table", "comparison". */
   declared: string;
   /** Why it failed — "a value is missing". */

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

@@ -1,4 +1,8 @@
-import type { FallbackScene, FallbackSettings } from './contract';
+import { fill } from '../shared/contract';
+import { FALLBACK_PRESETS, type FallbackCopy, type FallbackScene, type FallbackSettings, type FlatCopy } from './contract';
+
+/** The words when a caller gives none (Tabbed's invalid panel) — the presets' own (`presets.json` base), without its field labels. */
+const COPY: FallbackCopy = { ...FALLBACK_PRESETS.base, fieldLabels: {} };
 
 /**
  * **`flatten(data)` — any value as label/value rows (batch 4 PRD §6.2).** Pure, and shared with
@@ -23,32 +27,38 @@ export function humanise(k: string): string {
   return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase();
 }
 
-function fmt(v: unknown): { text: string; muted: boolean } {
-  if (v === null || v === undefined || v === '') return { text: 'No data', muted: true };
+function fmt(v: unknown, c: FlatCopy): { text: string; muted: boolean } {
+  if (v === null || v === undefined || v === '') return { text: c.noDataLabel, muted: true };
   if (typeof v === 'number') return { text: v.toLocaleString('en-US'), muted: false };
-  if (typeof v === 'boolean') return { text: v ? 'Yes' : 'No', muted: false };
+  if (typeof v === 'boolean') return { text: v ? c.yesLabel : c.noLabel, muted: false };
   return { text: String(v), muted: false };
 }
 
-function summary(v: object): { text: string; muted: boolean } {
+function summary(v: object, c: FlatCopy): { text: string; muted: boolean } {
   if (Array.isArray(v)) {
-    if (v.every(prim)) return v.length ? { text: v.map(x => fmt(x).text).join(', '), muted: false } : { text: 'No data', muted: true };
-    return { text: `${v.length} ${v.length === 1 ? 'item' : 'items'}`, muted: true };
+    if (v.every(prim)) return v.length ? { text: v.map(x => fmt(x, c).text).join(', '), muted: false } : { text: c.noDataLabel, muted: true };
+    return { text: fill(v.length === 1 ? c.itemsOneText : c.itemsText, { count: v.length }), muted: true };
   }
   const n = Object.keys(v).length;
-  return { text: `${n} ${n === 1 ? 'field' : 'fields'}`, muted: true };
+  return { text: fill(n === 1 ? c.fieldsOneText : c.fieldsText, { count: n }), muted: true };
 }
 
-const cell = (label: string, v: unknown): FlatCell => ({ label, ...(prim(v) ? fmt(v) : summary(v as object)) });
+const cell = (label: string, v: unknown, c: FlatCopy): FlatCell => ({ label, ...(prim(v) ? fmt(v, c) : summary(v as object, c)) });
 const isLabelled = (x: unknown) => Boolean(x) && !prim(x) && 'label' in (x as object);
+/** A data key as the screen names it: the copy's label for it, or the key humanised. */
+const labelOf = (k: string, c: FlatCopy) => {
+  const l = c.fieldLabels && Object.prototype.hasOwnProperty.call(c.fieldLabels, k) ? c.fieldLabels[k] : undefined;
+  return typeof l === 'string' && l ? l : humanise(k);
+};
+const itemOf = (i: number, c: FlatCopy) => fill(c.itemLabel, { n: i + 1 });
 
-function rowsOf(o: unknown): FlatCell[] {
-  if (prim(o)) return [cell('Value', o)];
+function rowsOf(o: unknown, c: FlatCopy): FlatCell[] {
+  if (prim(o)) return [cell(c.valueLabel, o, c)];
   if (Array.isArray(o)) {
-    if (o.length && o.every(isLabelled)) return o.map(x => cell(String((x as { label: unknown }).label), (x as { value: unknown }).value));
-    return o.map((x, i) => cell(`Item ${i + 1}`, x));
+    if (o.length && o.every(isLabelled)) return o.map(x => cell(String((x as { label: unknown }).label), (x as { value: unknown }).value, c));
+    return o.map((x, i) => cell(itemOf(i, c), x, c));
   }
-  return Object.keys(o as object).map(k => cell(humanise(k), (o as Record<string, unknown>)[k]));
+  return Object.keys(o as object).map(k => cell(labelOf(k, c), (o as Record<string, unknown>)[k], c));
 }
 
 function isRecordMap(v: unknown): boolean {
@@ -62,45 +72,47 @@ export function isNoData(d: unknown): boolean {
     || (!prim(d) && !Array.isArray(d) && !Object.keys(d as object).length);
 }
 
-export function flatten(d: unknown): Flat {
+/** `copy`: the words rows are built from — a Fallback passes its config; without it, the presets' defaults. */
+export function flatten(d: unknown, copy: FlatCopy = COPY): Flat {
+  const c = copy;
   if (isNoData(d)) return { empty: true, groups: [] };
-  if (prim(d)) return { empty: false, groups: [{ title: '', rows: [cell('Value', d)] }] };
+  if (prim(d)) return { empty: false, groups: [{ title: '', rows: [cell(c.valueLabel, d, c)] }] };
   if (Array.isArray(d)) {
-    if (d.every(prim)) return { empty: false, groups: [{ title: '', rows: [cell('Values', d)] }] };
-    if (d.every(isLabelled)) return { empty: false, groups: [{ title: '', rows: rowsOf(d) }] };
-    return { empty: false, groups: d.map((x, i) => ({ title: `Item ${i + 1}`, rows: rowsOf(x) })) };
+    if (d.every(prim)) return { empty: false, groups: [{ title: '', rows: [cell(c.valuesLabel, d, c)] }] };
+    if (d.every(isLabelled)) return { empty: false, groups: [{ title: '', rows: rowsOf(d, c) }] };
+    return { empty: false, groups: d.map((x, i) => ({ title: itemOf(i, c), rows: rowsOf(x, c) })) };
   }
   const top: FlatCell[] = [];
   const groups: FlatGroup[] = [];
   Object.keys(d as object).forEach(k => {
     const v = (d as Record<string, unknown>)[k];
-    if (prim(v) || (Array.isArray(v) && v.every(prim))) top.push(cell(humanise(k), v));
-    else if (Array.isArray(v)) v.forEach((x, i) => groups.push({ title: `${humanise(k)} · ${i + 1}`, rows: rowsOf(x) }));
-    else if (isRecordMap(v)) Object.keys(v as object).forEach(sk => groups.push({ title: `${humanise(k)} · ${sk}`, rows: rowsOf((v as Record<string, unknown>)[sk]) }));
-    else groups.push({ title: humanise(k), rows: rowsOf(v) });
+    if (prim(v) || (Array.isArray(v) && v.every(prim))) top.push(cell(labelOf(k, c), v, c));
+    else if (Array.isArray(v)) v.forEach((x, i) => groups.push({ title: `${labelOf(k, c)} · ${i + 1}`, rows: rowsOf(x, c) }));
+    else if (isRecordMap(v)) Object.keys(v as object).forEach(sk => groups.push({ title: `${labelOf(k, c)} · ${sk}`, rows: rowsOf((v as Record<string, unknown>)[sk], c) }));
+    else groups.push({ title: labelOf(k, c), rows: rowsOf(v, c) });
   });
   if (top.length) groups.unshift({ title: '', rows: top });
   return { empty: false, groups };
 }
 
 /** **Fallback `toText()`** — each group title, then `Label: value` lines, indented 2 spaces under a titled group. */
-export function flatToText(f: Flat): string {
+export function flatToText(f: Flat, copy: Pick<FlatCopy, 'noDataLabel'> = COPY): string {
   const out: string[] = [];
   f.groups.forEach(g => {
     if (g.title) out.push(g.title);
     g.rows.forEach(r => out.push(`${g.title ? '  ' : ''}${r.label}: ${r.text}`));
   });
-  return out.length ? out.join('\n') : 'No data';
+  return out.length ? out.join('\n') : copy.noDataLabel;
 }
 
-/** How a declared type is named in copy — "This key-value didn’t match…". */
-export const TYPE_LABEL: Record<string, string> = {
-  stats: 'stats', table: 'table', Table: 'table', comparison: 'comparison', keyvalue: 'key-value', sequence: 'sequence',
-  artifact: 'files', collection: 'collection', text: 'text',
+/** How a declared type is named in copy — "This key-value didn’t match…" — the presets' `typeLabels`. */
+export const TYPE_LABEL: Record<string, string> = COPY.typeLabels;
+export const typeLabel = (t: string, labels: Record<string, string> = COPY.typeLabels) => {
+  const l = labels && Object.prototype.hasOwnProperty.call(labels, t) ? labels[t] : undefined;
+  return typeof l === 'string' && l ? l : t;
 };
-export const typeLabel = (t: string) => TYPE_LABEL[t] ?? t;
 
-export const noteBody = (declared: string) => `This ${typeLabel(declared)} didn’t match its expected format, so its fields are listed instead.`;
+export const noteBody = (declared: string, c: Pick<FallbackCopy, 'noteText' | 'typeLabels'> = COPY) => fill(c.noteText, { declared: typeLabel(declared, c.typeLabels) });
 
 /** A demo-board scene → the data it shows. */
 export function fallbackData(c: FallbackSettings, scene: FallbackScene): unknown {

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

@@ -1,4 +1,4 @@
-export { FALLBACK_PRESETS, FALLBACK_SCENES, FALLBACK_IN_FLIGHT, validateFallback, type FallbackSettings, type FallbackScene } from './contract';
+export { FALLBACK_PRESETS, FALLBACK_SCENES, FALLBACK_IN_FLIGHT, validateFallback, type FallbackSettings, type FallbackScene, type FallbackCopy, type FlatCopy } from './contract';
 export {
   fallbackData, fallbackSeed, flatten, flatToText, humanise, isNoData, noteBody, typeLabel, TYPE_LABEL,
   type Flat, type FlatCell, type FlatGroup, type FallbackSeed,

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

@@ -1,6 +1,8 @@
 {
   "component": "fallback",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -47,6 +49,56 @@
         "Custom roles"
       ]
     },
+    "fieldLabels": {
+      "revenue": "Revenue",
+      "orders": "Orders",
+      "averageOrder": "Average order",
+      "period": "Period",
+      "status": "Status",
+      "owner": "Owner",
+      "seats": "Seats",
+      "renews": "Renews",
+      "customer": "Customer",
+      "name": "Name",
+      "company": "Company",
+      "address": "Address",
+      "plan": "Plan",
+      "columns": "Columns",
+      "rows": "Rows",
+      "total": "Total",
+      "items": "Items",
+      "shipping": "Shipping",
+      "price": "Price",
+      "features": "Features"
+    },
+    "chipLabel": "Simplified view",
+    "declaredText": "Declared as {declared} · {failure}",
+    "typeLabels": {
+      "stats": "stats",
+      "table": "table",
+      "Table": "table",
+      "comparison": "comparison",
+      "keyvalue": "key-value",
+      "sequence": "sequence",
+      "artifact": "files",
+      "collection": "collection",
+      "text": "text"
+    },
+    "noteTitle": "Showing a simplified view",
+    "noteText": "This {declared} didn’t match its expected format, so its fields are listed instead.",
+    "noDataLabel": "No data",
+    "noDataText": "This {declared} came back empty.",
+    "yesLabel": "Yes",
+    "noLabel": "No",
+    "valueLabel": "Value",
+    "valuesLabel": "Values",
+    "itemLabel": "Item {n}",
+    "fieldsText": "{count} fields",
+    "fieldsOneText": "{count} field",
+    "itemsText": "{count} items",
+    "itemsOneText": "{count} item",
+    "copyLabel": "Copy as text",
+    "copiedLabel": "Copied",
     "emptyTitle": "Nothing to show",
     "emptyBody": "This step didn’t return any output.",
     "emptyCta": "Run again"

package/src/components/onboarding/file-shared/FileSharedView.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { Box, Icon, Text } from '../../../core';
 import { Button, IconButton } from '../../../ds';
 import { 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';
@@ -59,7 +59,7 @@ function Valid({
     () => { started.current.forEach(id => runner.cancel(id)); started.current.clear(); },
   );
   const pattern = usePatternStatus(status ?? (config.ship === 'empty' || !config.files.length ? 'empty' : 'ready'), reload);
-  const v = fileSharedView(state);
+  const v = fileSharedView(state, config);
   useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
   const download = useDefaultOperation(operations?.download, ONBOARDING_TIMING.download, r => result === 'error' && r.index === config.failIndex && r.attempt === 0);
   const run = (row: FileRow) => {
@@ -97,6 +97,7 @@ function Valid({
             file={config.files[i]!}
             last={i === state.rows.length - 1}
             type={config.type}
+            copy={config}
             onOpen={() => { send({ type: 'open', id: row.id }); onOpen?.(config.files[i]!); }}
             onDownload={() => start(row)}
           />
@@ -106,9 +107,10 @@ function Valid({
   );
 }
 
-function FileRowView({ row, file, last, onOpen, onDownload }: {
-  row: FileRow; file: SharedFile; last: boolean; type: FileSharedSettings['type']; onOpen: () => void; onDownload: () => void;
+function FileRowView({ row, file, last, copy, onOpen, onDownload }: {
+  row: FileRow; file: SharedFile; last: boolean; type: FileSharedSettings['type']; copy: FileSharedSettings; onOpen: () => void; onDownload: () => void;
 }) {
+  const named = (template: string) => fill(template, { name: file.name });
   const { colors, density } = useDs();
   const failed = row.phase === 'failed';
   return (
@@ -123,23 +125,23 @@ function FileRowView({ row, file, last, onOpen, onDownload }: {
         <Box row align="center" gap="s2" style={{ minWidth: 0 }}>
           <Text variant="caption" color="textPrimary" numberOfLines={1} style={{ fontSize: 13, fontWeight: row.isNew ? '700' : '600', flexShrink: 1 }}>{file.name}</Text>
           <PlainChip height={20}>{file.type}</PlainChip>
-          {row.isNew ? <><Box width={8} height={8} radius="pill" aria-hidden style={{ backgroundColor: colors.textPrimary, flexShrink: 0 }} /><Hidden>New</Hidden></> : null}
+          {row.isNew ? <><Box width={8} height={8} radius="pill" aria-hidden style={{ backgroundColor: colors.textPrimary, flexShrink: 0 }} /><Hidden>{copy.newLabel}</Hidden></> : null}
         </Box>
         <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{`${file.sharedBy} · ${file.when} · ${file.size}`}</Text>
         {failed ? (
           <Box row align="center" gap="s1" role="alert">
             <Icon name="alert" size={13} color={colors.status.needsUser} />
-            <Text variant="caption" style={{ fontSize: 12, fontWeight: '700', color: colors.status.needsUser, flexShrink: 1 }}>Download failed · check your connection</Text>
+            <Text variant="caption" style={{ fontSize: 12, fontWeight: '700', color: colors.status.needsUser, flexShrink: 1 }}>{copy.downloadFailedText}</Text>
           </Box>
         ) : null}
       </Box>
-      <Button variant="secondary" size="small" aria-label={`Open ${file.name}`} onPress={onOpen} style={{ minHeight: density.controlH }}>Open</Button>
+      <Button variant="secondary" size="small" aria-label={named(copy.openAriaTemplate)} onPress={onOpen} style={{ minHeight: density.controlH }}>{copy.openLabel}</Button>
       <Box style={{ minWidth: 72, alignItems: 'flex-end' }}>
         <Slot slotKey={row.phase}>
-          {row.phase === 'idle' ? <IconButton icon="download" label={`Download ${file.name}`} onPress={onDownload} /> : null}
-          {row.phase === 'busy' ? <Box width={32} height={32} align="center" justify="center"><Spinner label={`Downloading ${file.name}`} /></Box> : null}
-          {row.phase === 'done' ? <Box width={32} height={32} align="center" justify="center" role="img" aria-label={`Downloaded ${file.name}`}><StatusMark tone="mint" /></Box> : null}
-          {failed ? <Button variant="secondary" size="xsmall" aria-label={`Retry download of ${file.name}`} onPress={onDownload}>Retry</Button> : null}
+          {row.phase === 'idle' ? <IconButton icon="download" label={named(copy.downloadAriaTemplate)} onPress={onDownload} /> : null}
+          {row.phase === 'busy' ? <Box width={32} height={32} align="center" justify="center"><Spinner label={named(copy.downloadingAriaTemplate)} /></Box> : null}
+          {row.phase === 'done' ? <Box width={32} height={32} align="center" justify="center" role="img" aria-label={named(copy.downloadedAriaTemplate)}><StatusMark tone="mint" /></Box> : null}
+          {failed ? <Button variant="secondary" size="xsmall" aria-label={named(copy.retryAriaTemplate)} onPress={onDownload}>{copy.retryLabel}</Button> : null}
         </Slot>
       </Box>
     </Box>

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

@@ -16,8 +16,29 @@ export type FileSharedSettings = HeaderConfig & LoadCopy & {
   failIndex: number;
   /** Demo-only: the scene this case ships in (B2-9) — `empty` ships the empty state. */
   ship?: FileSharedScene;
+  /** The header chip while a download failed. */
+  failedChipLabel: string;
+  /** The header chip while files are new: `{n}` is how many. */
+  newCountTemplate: string;
+  /** The header chip otherwise: `{n}` files — one, and any other count. */
+  fileCountOneTemplate: string;
+  fileCountOtherTemplate: string;
+  /** Read out beside a new file's dot. */
+  newLabel: string;
+  /** The line under a file whose download failed. */
+  downloadFailedText: string;
+  openLabel: string;
+  /** Accessible names per file: `{name}` is the file's name. */
+  openAriaTemplate: string;
+  downloadAriaTemplate: string;
+  downloadingAriaTemplate: string;
+  downloadedAriaTemplate: string;
+  retryAriaTemplate: string;
 };
 
+/** The words `fileSharedView` needs — the chip's. */
+export type FileSharedChipCopy = Pick<FileSharedSettings, 'failedChipLabel' | 'newCountTemplate' | 'fileCountOneTemplate' | 'fileCountOtherTemplate'>;
+
 export const FILE_SHARED_PRESETS = presetsJson as unknown as PresetsFile<FileSharedSettings>;
 
 export function validateFileShared(c: FileSharedSettings): OnboardingIssue[] {

package/src/components/onboarding/file-shared/engine.ts

@@ -1,5 +1,6 @@
 import type { StateChipTone } from '../../../ds';
-import type { FileSharedScene, FileSharedSettings } from './contract';
+import { fill } from '../shared/contract';
+import { FILE_SHARED_PRESETS, type FileSharedChipCopy, type FileSharedScene, type FileSharedSettings } from './contract';
 
 /** **The File Shared engine** — pure: each file's new flag and its download. */
 
@@ -36,12 +37,14 @@ export function reduceFileShared(s: FileSharedState, a: FileSharedAction): FileS
   }
 }
 
-export function fileSharedView(s: FileSharedState) {
+/** The chip and scene. `c` is the config's chip words — the presets' English by default. */
+export function fileSharedView(s: FileSharedState, c: FileSharedChipCopy = FILE_SHARED_PRESETS.base as FileSharedChipCopy) {
   const fresh = s.rows.filter(r => r.isNew).length;
   const bad = s.rows.some(r => r.phase === 'failed');
-  const chip: { tone: StateChipTone; label: string } = bad ? { tone: 'attention', label: 'Download failed' }
-    : fresh ? { tone: 'neutral', label: `${fresh} new` }
-    : { tone: 'neutral', label: `${s.rows.length} ${s.rows.length === 1 ? 'file' : 'files'}` };
+  const n = s.rows.length;
+  const chip: { tone: StateChipTone; label: string } = bad ? { tone: 'attention', label: c.failedChipLabel }
+    : fresh ? { tone: 'neutral', label: fill(c.newCountTemplate, { n: fresh }) }
+    : { tone: 'neutral', label: fill(n === 1 ? c.fileCountOneTemplate : c.fileCountOtherTemplate, { n }) };
   const scene = bad ? 'failed' : s.rows.some(r => r.phase === 'busy') ? 'downloading' : s.rows.some(r => r.phase === 'done') ? 'downloaded' : fresh ? 'newItem' : 'default';
   return { chip, scene };
 }

package/src/components/onboarding/file-shared/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "file-shared",
   "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,7 +45,19 @@
     ],
     "emptyTitle": "Nothing shared yet",
     "emptyBody": "Files people share with you will appear here.",
-    "emptyCta": "Refresh"
+    "emptyCta": "Refresh",
+    "failedChipLabel": "Download failed",
+    "newCountTemplate": "{n} new",
+    "fileCountOneTemplate": "{n} file",
+    "fileCountOtherTemplate": "{n} files",
+    "newLabel": "New",
+    "downloadFailedText": "Download failed · check your connection",
+    "openLabel": "Open",
+    "openAriaTemplate": "Open {name}",
+    "downloadAriaTemplate": "Download {name}",
+    "downloadingAriaTemplate": "Downloading {name}",
+    "downloadedAriaTemplate": "Downloaded {name}",
+    "retryAriaTemplate": "Retry download of {name}"
   },
   "cases": {
     "case1": {},

package/src/components/onboarding/filter-panel/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "filter-panel",
   "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/floating/presets.json

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