@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/data-view/registry.ts

@@ -1,4 +1,5 @@
-import { COLUMN_TYPES, type ColumnDef, type ColumnType, type DataRow, type StatusTone } from './contract';
+import { fill } from '../shared/contract';
+import { COLUMN_TYPES, type ColumnDef, type ColumnType, type DataRow, type DataViewCopy, type StatusTone } from './contract';
 
 /**
  * **The renderer registry (`REG`) — nine seed types, each with a cell value, a card value and
@@ -10,7 +11,39 @@ import { COLUMN_TYPES, type ColumnDef, type ColumnType, type DataRow, type Statu
  * type's default). Unknown types fall back to `text`.
  */
 
-const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** The words a value can carry onto the screen — the views pass the config's; see `DataViewCopy`. */
+export type RegistryCopy = Pick<DataViewCopy,
+  | 'monthNames' | 'relativePastText' | 'relativeFutureText' | 'minutesShortText' | 'hoursShortText' | 'daysShortText'
+  | 'peopleCountLabel' | 'scoreGoodLabel' | 'scoreFairLabel' | 'scoreLowLabel' | 'opensInNewTabLabel' | 'moreRowsText'>;
+
+/**
+ * The English a caller without a config gets (the library's own tests, a host drawing one cell). The
+ * views never rely on it: Table's and Grid's `presets.json` carry the same words, and the config wins.
+ */
+const REGISTRY_EN: RegistryCopy = {
+  monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+  relativePastText: '{t} ago',
+  relativeFutureText: 'in {t}',
+  minutesShortText: '{n}m',
+  hoursShortText: '{n}h',
+  daysShortText: '{n}d',
+  peopleCountLabel: '{n} people',
+  scoreGoodLabel: 'good',
+  scoreFairLabel: 'fair',
+  scoreLowLabel: 'low',
+  opensInNewTabLabel: '{text} (opens in a new tab)',
+  moreRowsText: 'and {n} more',
+};
+
+/** The config's words over the English, key by key — a missing or non-text value keeps the English. */
+export function registryCopy(c: Partial<Record<keyof RegistryCopy, unknown>> = {}): RegistryCopy {
+  const out = { ...REGISTRY_EN } as Record<string, unknown>;
+  (Object.keys(REGISTRY_EN) as (keyof RegistryCopy)[]).forEach(k => {
+    const v = c[k];
+    if (k === 'monthNames' ? Array.isArray(v) && v.length === 12 && v.every(x => typeof x === 'string') : typeof v === 'string') out[k] = v;
+  });
+  return out as RegistryCopy;
+}
 
 export function typeOf(col: ColumnDef): ColumnType {
   return (COLUMN_TYPES as readonly string[]).includes(col.type) ? (col.type as ColumnType) : 'text';
@@ -43,23 +76,27 @@ export function money(v: number, currency?: string): string {
 
 const pad2 = (n: number) => (n < 10 ? '0' : '') + n;
 
-/** "2h ago", "in 3d" — relative to `now`. */
-export function relTime(ts: number, now: number): string {
+/** "2h ago", "in 3d" — relative to `now`, in the config's words. */
+export function relTime(ts: number, now: number, copy?: Partial<RegistryCopy>): string {
+  const w = registryCopy(copy);
   const d = (ts - now) / 36e5;
   const a = Math.abs(d);
-  const s = a < 1 ? `${Math.max(1, Math.round(a * 60))}m` : a < 24 ? `${Math.round(a)}h` : `${Math.round(a / 24)}d`;
-  return d < 0 ? `${s} ago` : `in ${s}`;
+  const s = a < 1 ? fill(w.minutesShortText, { n: Math.max(1, Math.round(a * 60)) })
+    : a < 24 ? fill(w.hoursShortText, { n: Math.round(a) })
+    : fill(w.daysShortText, { n: Math.round(a / 24) });
+  return fill(d < 0 ? w.relativePastText : w.relativeFutureText, { t: s });
 }
 
-/** "24 Sep 2026", or "26 Sep · 09:30" with time. UTC, so a board renders the same everywhere. */
-export function absTime(ts: number, withTime?: boolean): string {
+/** "24 Sep 2026", or "26 Sep · 09:30" with time. UTC, so a board renders the same everywhere. `months`: the config's twelve names. */
+export function absTime(ts: number, withTime?: boolean, months?: string[]): string {
+  const mon = registryCopy({ monthNames: months }).monthNames;
   const d = new Date(ts);
-  if (withTime) return `${d.getUTCDate()} ${MON[d.getUTCMonth()]} · ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}`;
-  return `${d.getUTCDate()} ${MON[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
+  if (withTime) return `${d.getUTCDate()} ${mon[d.getUTCMonth()]} · ${pad2(d.getUTCHours())}:${pad2(d.getUTCMinutes())}`;
+  return `${d.getUTCDate()} ${mon[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
 }
 
 /** `toText()` per type — "Copy as text", and the text a cell is announced by. */
-const TO_TEXT: Record<ColumnType, (col: ColumnDef, v: unknown) => string> = {
+const TO_TEXT: Record<ColumnType, (col: ColumnDef, v: unknown, w: RegistryCopy) => string> = {
   text: (_c, v) => String(v),
   number: (c, v) => fmtN(Number(v)) + (c.suffix ?? ''),
   currency: (c, v) => money(Number(v), c.currency),
@@ -70,7 +107,7 @@ const TO_TEXT: Record<ColumnType, (col: ColumnDef, v: unknown) => string> = {
   avatars: (_c, v) => ([] as unknown[]).concat(v).join(', '),
   progress: (_c, v) => `${Math.round(Number(v))}%`,
   bar: (_c, v) => fmtN(Number(v)),
-  score: (c, v) => `${Math.round(Number(v))} (${scoreTier(c, Number(v))})`,
+  score: (c, v, w) => `${Math.round(Number(v))} (${tierLabel(scoreTier(c, Number(v)), w)})`,
 };
 
 /** A `score`'s tier by its thresholds — [good, fair], default [85, 70]. */
@@ -79,13 +116,19 @@ export function scoreTier(col: ColumnDef, v: number): 'good' | 'fair' | 'low' {
   return v >= good ? 'good' : v >= fair ? 'fair' : 'low';
 }
 
+/** A tier in the config's words. */
+export function tierLabel(tier: 'good' | 'fair' | 'low', copy?: Partial<RegistryCopy>): string {
+  const w = registryCopy(copy);
+  return tier === 'good' ? w.scoreGoodLabel : tier === 'fair' ? w.scoreFairLabel : w.scoreLowLabel;
+}
+
 /** "48.2K", "1.1K", "982" — a bar's value, compact. */
 export function compactValue(v: number): string {
   try { return new Intl.NumberFormat('en-US', { notation: 'compact', maximumSignificantDigits: 3 }).format(v); } catch { return fmtN(v); }
 }
 
-export function toTextValue(col: ColumnDef, v: unknown): string {
-  return isEmptyValue(v) ? '' : TO_TEXT[typeOf(col)](col, v);
+export function toTextValue(col: ColumnDef, v: unknown, copy?: Partial<RegistryCopy>): string {
+  return isEmptyValue(v) ? '' : TO_TEXT[typeOf(col)](col, v, registryCopy(copy));
 }
 
 /**
@@ -97,13 +140,16 @@ export type CellModel =
   | { kind: 'status'; text: string; tone: StatusTone }
   | { kind: 'avatar'; text: string; initials: string }
   | { kind: 'avatars'; text: string; title: string; avatars: string[]; group: boolean }
-  | { kind: 'link'; text: string; href: string; external: boolean }
+  /** `label`: the link's accessible name — "Docs (opens in a new tab)" when external. */
+  | { kind: 'link'; text: string; href: string; external: boolean; label: string }
   | { kind: 'progress'; text: string; pct: number; label: string }
   /** `ratio`: value ÷ the largest loaded value (0–1). */
   | { kind: 'bar'; text: string; value: number; ratio: number; label: string }
-  | { kind: 'score'; text: string; value: number; tier: 'good' | 'fair' | 'low' };
+  /** `tierLabel`: the tier in words, read after the figure. */
+  | { kind: 'score'; text: string; value: number; tier: 'good' | 'fair' | 'low'; tierLabel: string };
 
-export function cellModel(col: ColumnDef, v: unknown, where: 'cell' | 'card', now: number, ctx: { max?: number } = {}): CellModel {
+export function cellModel(col: ColumnDef, v: unknown, where: 'cell' | 'card', now: number, ctx: { max?: number; copy?: Partial<RegistryCopy> } = {}): CellModel {
+  const w = registryCopy(ctx.copy);
   const t = typeOf(col);
   const card = where === 'card';
   const end = !card && isEnd(col);
@@ -114,14 +160,17 @@ export function cellModel(col: ColumnDef, v: unknown, where: 'cell' | 'card', no
     return {
       kind: 'avatars',
       /* Card value: the names. Cell: the name when there is one person, "3 people" otherwise. */
-      text: card ? people.join(', ') : people.length === 1 ? people[0]! : `${people.length} people`,
+      text: card ? people.join(', ') : people.length === 1 ? people[0]! : fill(w.peopleCountLabel, { n: people.length }),
       title: people.join(', '),
       avatars: people.slice(0, 3).map(initials).concat(people.length > 3 ? [`+${people.length - 3}`] : []),
       group: !card,
     };
   }
   if (t === 'avatar') return { kind: 'avatar', text: String(v), initials: initials(String(v)) };
-  if (t === 'link') return { kind: 'link', text: String(v), href: (col.href ?? '#') + String(v), external: Boolean(col.external) };
+  if (t === 'link') {
+    const external = Boolean(col.external);
+    return { kind: 'link', text: String(v), href: (col.href ?? '#') + String(v), external, label: external ? fill(w.opensInNewTabLabel, { text: String(v) }) : String(v) };
+  }
   if (t === 'progress') {
     const pct = Math.round(Number(v));
     return { kind: 'progress', text: `${pct}%`, pct, label: col.label };
@@ -133,13 +182,15 @@ export function cellModel(col: ColumnDef, v: unknown, where: 'cell' | 'card', no
   }
   if (t === 'score') {
     const value = Math.round(Number(v));
-    return { kind: 'score', text: String(value), value, tier: scoreTier(col, value) };
+    const tier = scoreTier(col, value);
+    return { kind: 'score', text: String(value), value, tier, tierLabel: tierLabel(tier, w) };
   }
   if (t === 'date') {
     const ts = Number(v);
-    return { kind: 'text', text: card || col.withTime ? absTime(ts, col.withTime) : relTime(ts, now), title: absTime(ts, col.withTime), end, clamp: card };
+    const abs = absTime(ts, col.withTime, w.monthNames);
+    return { kind: 'text', text: card || col.withTime ? abs : relTime(ts, now, w), title: abs, end, clamp: card };
   }
-  return { kind: 'text', text: TO_TEXT[t](col, v), title: t === 'text' ? String(v) : undefined, end, clamp: card };
+  return { kind: 'text', text: TO_TEXT[t](col, v, w), title: t === 'text' ? String(v) : undefined, end, clamp: card };
 }
 
 /** "5 invoices", "1 invoice". */
@@ -152,15 +203,16 @@ export function countNoun(n: number, noun: string, nouns: string): string {
  * `Label: value` lines, up to 20 rows, then "and N more".
  */
 export function dataViewToText(
-  c: { title: string; noun: string; nouns: string; columns: ColumnDef[] },
+  c: { title: string; noun: string; nouns: string; columns: ColumnDef[] } & Partial<RegistryCopy>,
   rows: DataRow[],
   total: number,
 ): string {
+  const w = registryCopy(c);
   const lines = [`${c.title} · ${countNoun(total, c.noun, c.nouns)}`];
   rows.slice(0, 20).forEach(r => {
     lines.push('');
-    c.columns.forEach(col => lines.push(`${col.label}: ${toTextValue(col, r[col.id])}`));
+    c.columns.forEach(col => lines.push(`${col.label}: ${toTextValue(col, r[col.id], w)}`));
   });
-  if (rows.length > 20) lines.push('', `and ${rows.length - 20} more`);
+  if (rows.length > 20) lines.push('', fill(w.moreRowsText, { n: rows.length - 20 }));
   return lines.join('\n');
 }

package/src/components/onboarding/data-view/runtime.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import { useBlockMotion } from '../../../core';
 import { abortableDelay, useOperationRunner } from '../../../runtime/operations';
-import type { OnboardingResult } from '../shared/contract';
+import { fill, type OnboardingResult } from '../shared/contract';
 import { useSeededReducer } from '../shared/runtime';
 import type { ComboboxOperations } from '../combobox/runtime';
 import type { ComboboxSettings } from '../combobox/contract';
@@ -99,14 +99,14 @@ export function useDataView({
     const n = ids.length;
     runner.run('bulk', ctx => ops.bulk({ action: 'delete', ids }, ctx), {
       onOk: r => {
-        if (!r.ok) { send({ type: 'deleteFailed', toast: toast('apricot', `Couldn’t delete ${countNoun(n, config.noun, config.nouns)}`, 'delete') }); return; }
-        send({ type: 'deleteDone', ids, animate: !m.reduced, toast: toast('neutral', `${countNoun(n, config.noun, config.nouns)} deleted`) });
+        if (!r.ok) { send({ type: 'deleteFailed', toast: toast('apricot', fill(config.deleteFailedText, { count: countNoun(n, config.noun, config.nouns) }), 'delete') }); return; }
+        send({ type: 'deleteDone', ids, animate: !m.reduced, toast: toast('neutral', fill(config.deletedText, { count: countNoun(n, config.noun, config.nouns) })) });
         onBulk?.('delete', ids);
         if (!m.reduced) setTimeout(() => send({ type: 'deleteGone', ids }), DATA_VIEW_TIMING.leave);
       },
-      onError: () => send({ type: 'deleteFailed', toast: toast('apricot', `Couldn’t delete ${countNoun(n, config.noun, config.nouns)}`, 'delete') }),
+      onError: () => send({ type: 'deleteFailed', toast: toast('apricot', fill(config.deleteFailedText, { count: countNoun(n, config.noun, config.nouns) }), 'delete') }),
     });
-  }, [runner, ops.bulk, config.noun, config.nouns, m.reduced, onBulk]);
+  }, [runner, ops.bulk, config.noun, config.nouns, config.deleteFailedText, config.deletedText, m.reduced, onBulk]);
 
   /* A restored scene finishes what it was doing: a sort, a page, a delete in flight. */
   useEffect(() => {
@@ -137,14 +137,15 @@ export function useDataView({
   /* ── C14 for Assign: search and suggest are the host's; apply is the bulk `assign`. ───────── */
   const people = useMemo(() => peopleOf(config), [configKey]);
   const comboConfig: ComboboxSettings = {
+    ...config.assignPicker,
     people,
     value: [],
     suggestions: people.slice(0, 5).map(p => p.id),
-    fieldLabel: 'Assign',
-    emptyLabel: 'Assign to…',
+    fieldLabel: config.assignLabel,
+    emptyLabel: config.assignEmptyLabel,
     dialogLabel: model.assignTitle,
     sheetTitle: model.assignTitle,
-    placeholder: 'Search people',
+    placeholder: config.searchPeoplePlaceholder,
     applyLabel: model.applyLabel,
     max: 0,
     demoQuery: 'ay',
@@ -213,7 +214,7 @@ export function useDataView({
       runDelete();
     },
     open: (id: string, title: string) => {
-      send({ type: 'toast', toast: toast('neutral', `Opened ${title}`) });
+      send({ type: 'toast', toast: toast('neutral', fill(config.openedText, { title })) });
       onOpen?.(id);
     },
     dropToast: () => { const t = ref.current.toast; if (t) send({ type: 'dropToast', id: t.id }); },
@@ -228,7 +229,7 @@ export function useDataView({
       setTimeout(() => {
         const ids = ref.current.sel.slice();
         send({ type: 'overlay', overlay: null });
-        send({ type: 'toast', toast: toast('mint', `Exported ${countNoun(ids.length, config.noun, config.nouns)}`) });
+        send({ type: 'toast', toast: toast('mint', fill(config.exportedText, { count: countNoun(ids.length, config.noun, config.nouns) })) });
         onBulk?.('export', ids);
       }, DATA_VIEW_TIMING.exportClose);
     },

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

@@ -1,6 +1,8 @@
 {
   "component": "department-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",

package/src/components/onboarding/event-reminder/EventReminderView.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon, Text } from '../../../core';
 import { ActionMenu, AvatarGroup, Button } from '../../../ds';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import { ONBOARDING_TIMING, type OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
@@ -75,14 +75,14 @@ function Valid({
     <>
       <Slot slotKey={state.snooze ? 'snoozed' : 'snooze'}>
         {state.snooze ? (
-          <Button variant="secondary" size="small" aria-label={`${v.snoozeLabel}. Un-snooze`} onPress={() => { send({ type: 'unsnooze' }); onSnooze?.(null); }} style={{ minHeight: d.controlH }}>
+          <Button variant="secondary" size="small" aria-label={fill(config.unsnoozeLabel, { label: v.snoozeLabel })} onPress={() => { send({ type: 'unsnooze' }); onSnooze?.(null); }} style={{ minHeight: d.controlH }}>
             {v.snoozeLabel}
           </Button>
         ) : (
           <ActionMenu
-            label="Snooze for"
-            triggerLabel="Snooze"
-            trigger="Snooze"
+            label={config.snoozeMenuLabel}
+            triggerLabel={config.snoozeLabel}
+            trigger={config.snoozeLabel}
             side="above"
             align="end"
             width={160}
@@ -130,10 +130,10 @@ function Valid({
         {state.noLink ? (
           <Box row align="center" gap="s2" style={{ paddingVertical: 10, paddingHorizontal: 12, borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken }}>
             <Icon name="map-pin" size={16} color={colors.textSecondary} />
-            <Text variant="caption" color="textPrimary" style={{ fontSize: 13, flexShrink: 1 }}>{config.location ?? 'Location to be confirmed'}</Text>
+            <Text variant="caption" color="textPrimary" style={{ fontSize: 13, flexShrink: 1 }}>{config.location ?? config.locationFallback}</Text>
           </Box>
         ) : (
-          <CopyField nativeID={`er-link-${config.link.replace(/[^a-z0-9]/gi, '')}`} label={config.linkLabel} value={config.link} copyLabel="Copy link" onCopy={onCopyLink} />
+          <CopyField nativeID={`er-link-${config.link.replace(/[^a-z0-9]/gi, '')}`} label={config.linkLabel} value={config.link} copyLabel={config.copyLinkLabel} onCopy={onCopyLink} />
         )}
       </Box>
     </OnboardingCard>

package/src/components/onboarding/event-reminder/contract.ts

@@ -33,6 +33,30 @@ export type EventReminderSettings = HeaderConfig & LoadCopy & {
   altDone: string;
   altDoneHint: string;
   snoozeOptions: string[];
+  /** The count of people — "{count} attendees"; with externals, "{count} attendees · {external} external". */
+  attendeesLabel: string;
+  attendeesExternalLabel: string;
+  /** The header chip once it has ended, while snoozed, and once it starts. */
+  endedChipLabel: string;
+  snoozedChipLabel: string;
+  nowChipLabel: string;
+  /** Join while joining, and once joined (with a link). */
+  joiningLabel: string;
+  joinedLabel: string;
+  /** The Snooze button, its menu's name, and — snoozed — "Snoozed · {option}" with its "{label}. Un-snooze" name. */
+  snoozeLabel: string;
+  snoozeMenuLabel: string;
+  snoozedLabel: string;
+  unsnoozeLabel: string;
+  /** Footer hints: joined, "Ended at {time}", "We’ll remind you again in {option}", now, "Starts {startsIn}". */
+  joinedHint: string;
+  endedHint: string;
+  snoozedHint: string;
+  nowHint: string;
+  startsHint: string;
+  /** With no link and no `location`. */
+  locationFallback: string;
+  copyLinkLabel: string;
   /** Demo-only: the scene this case ships in (B2-9). */
   ship?: EventScene;
 };

package/src/components/onboarding/event-reminder/engine.ts

@@ -1,3 +1,4 @@
+import { fill } from '../shared/contract';
 import type { EventReminderSettings, EventScene } from './contract';
 
 /** **The Event Reminder engine** — pure: where the event is in time, the snooze, and joining. */
@@ -44,18 +45,19 @@ export function eventView(c: EventReminderSettings, s: EventReminderState) {
   const total = Math.max(c.attendeeTotal ?? c.attendees.length, c.attendees.length);
   return {
     ended, now,
-    attendeeLabel: total === 1 ? c.attendees[0]! : `${total.toLocaleString('en-US')} attendees${c.external ? ` · ${c.external} external` : ''}`,
+    attendeeLabel: total === 1 ? c.attendees[0]!
+      : fill(c.external ? c.attendeesExternalLabel : c.attendeesLabel, { count: total.toLocaleString('en-US'), external: c.external ?? 0 }),
     total,
-    chip: { tone: 'neutral' as const, label: ended ? 'Ended' : s.snooze ? 'Snoozed' : now ? 'Now' : c.startsIn, dot: now && !s.snooze && !ended },
-    joinLabel: s.join === 'joining' ? (s.noLink ? c.altBusy : 'Joining…') : s.join === 'joined' ? (s.noLink ? c.altDone : 'Joined') : (s.noLink ? c.altAction : c.joinLabel),
+    chip: { tone: 'neutral' as const, label: ended ? c.endedChipLabel : s.snooze ? c.snoozedChipLabel : now ? c.nowChipLabel : c.startsIn, dot: now && !s.snooze && !ended },
+    joinLabel: s.join === 'joining' ? (s.noLink ? c.altBusy : c.joiningLabel) : s.join === 'joined' ? (s.noLink ? c.altDone : c.joinedLabel) : (s.noLink ? c.altAction : c.joinLabel),
     joinPrimary: now,
     canJoin: !ended && s.join === 'idle',
     canSnooze: !ended && s.join !== 'joined',
-    snoozeLabel: s.snooze ? `Snoozed · ${s.snooze}` : 'Snooze',
-    footerHint: s.join === 'joined' ? (s.noLink ? c.altDoneHint : 'Opened in a new tab')
-      : ended ? `Ended at ${c.endTime}`
-      : s.snooze ? `We’ll remind you again in ${s.snooze}`
-      : now ? 'Starting now' : `Starts ${c.startsIn.toLowerCase()}`,
+    snoozeLabel: s.snooze ? fill(c.snoozedLabel, { option: s.snooze }) : c.snoozeLabel,
+    footerHint: s.join === 'joined' ? (s.noLink ? c.altDoneHint : c.joinedHint)
+      : ended ? fill(c.endedHint, { time: c.endTime })
+      : s.snooze ? fill(c.snoozedHint, { option: s.snooze })
+      : now ? c.nowHint : fill(c.startsHint, { startsIn: c.startsIn.toLowerCase() }),
     scene: (s.join === 'joining' ? 'joining' : s.join === 'joined' ? 'joined' : ended ? 'ended' : s.snooze ? 'snoozed' : now ? 'now' : s.noLink ? 'noLink' : 'upcoming') as string,
   };
 }

package/src/components/onboarding/event-reminder/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "event-reminder",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -35,6 +37,24 @@
       "10 min",
       "1 hour"
     ],
+    "attendeesLabel": "{count} attendees",
+    "attendeesExternalLabel": "{count} attendees · {external} external",
+    "endedChipLabel": "Ended",
+    "snoozedChipLabel": "Snoozed",
+    "nowChipLabel": "Now",
+    "joiningLabel": "Joining…",
+    "joinedLabel": "Joined",
+    "snoozeLabel": "Snooze",
+    "snoozeMenuLabel": "Snooze for",
+    "snoozedLabel": "Snoozed · {option}",
+    "unsnoozeLabel": "{label}. Un-snooze",
+    "joinedHint": "Opened in a new tab",
+    "endedHint": "Ended at {time}",
+    "snoozedHint": "We’ll remind you again in {option}",
+    "nowHint": "Starting now",
+    "startsHint": "Starts {startsIn}",
+    "locationFallback": "Location to be confirmed",
+    "copyLinkLabel": "Copy link",
     "emptyTitle": "No upcoming events",
     "emptyBody": "Nothing on your calendar for the next hour.",
     "emptyCta": "Open calendar"

package/src/components/onboarding/expandable-feed/ExpandableFeedView.tsx

@@ -134,7 +134,7 @@ function Valid({
     <Box row align="center" gap="s2" style={{ flexWrap: 'wrap', justifyContent: 'flex-end' }}>
       {typeof shownRating === 'number' ? (
         <Box row align="center" gap="s1">
-          <Stars value={rating as number} size={13} />
+          <Stars value={rating as number} size={13} labelTemplate={config.starsTemplate} />
           <Text numeric style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{shownRating.toFixed(1)}</Text>
         </Box>
       ) : null}
@@ -158,6 +158,8 @@ function Valid({
                   last={i === rows.length - 1}
                   mobile={viewport === 'mobile'}
                   verifiedLabel={config.verifiedLabel}
+                  starsTemplate={config.starsTemplate}
+                  clamp={{ moreLabel: config.showMoreLabel, lessLabel: config.showLessLabel }}
                   onToggle={() => toggle(row.id)}
                   onKey={dir => move(i, dir)}
                   setRef={el => { buttons.current[row.id] = el as never; }}
@@ -177,10 +179,10 @@ function Valid({
 }
 
 function FeedRowView({
-  row, uid, open, last, mobile, verifiedLabel, onToggle, onKey, setRef, votes, voteFailed, onVote, reduced,
+  row, uid, open, last, mobile, verifiedLabel, starsTemplate, clamp, onToggle, onKey, setRef, votes, voteFailed, onVote, reduced,
 }: {
-  row: FeedRow; uid: string; open: boolean; last: boolean; mobile: boolean; verifiedLabel?: string;
-  onToggle: () => void; onKey: (dir: 1 | -1) => void; setRef: (el: unknown) => void;
+  row: FeedRow; uid: string; open: boolean; last: boolean; mobile: boolean; verifiedLabel?: string; starsTemplate?: string;
+  clamp: ClampLabels; onToggle: () => void; onKey: (dir: 1 | -1) => void; setRef: (el: unknown) => void;
   votes?: { pressed: boolean; count: number }; voteFailed: boolean; onVote: (b: Extract<FeedBlock, { kind: 'feedback' }>) => void; reduced: boolean;
 }) {
   const { colors, density } = useDs();
@@ -222,7 +224,7 @@ function FeedRowView({
           </View>
           {typeof row.rating === 'number' || row.meta.length ? (
             <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {typeof row.rating === 'number' ? <Stars value={row.rating} size={12} /> : null}
+              {typeof row.rating === 'number' ? <Stars value={row.rating} size={12} labelTemplate={starsTemplate} /> : null}
               {row.meta.length ? (
                 <Text numeric numberOfLines={1} style={{ flexShrink: 1, fontSize: 12, color: colors.textSecondary }}>
                   {`${typeof row.rating === 'number' ? '· ' : ''}${row.meta.join(' · ')}`}
@@ -239,7 +241,7 @@ function FeedRowView({
         <View style={{ paddingLeft: leading ? 44 : 8, paddingRight: 8, paddingTop: 4, paddingBottom: 16, gap: 12 }}>
           {row.detail.map((b, j) => (
             <BlockIn key={j} open={open} j={j} reduced={reduced}>
-              <Block block={b} id={`${regionId}-${j}`} mobile={mobile} votes={votes} voteFailed={voteFailed} onVote={onVote} />
+              <Block block={b} id={`${regionId}-${j}`} mobile={mobile} clamp={clamp} votes={votes} voteFailed={voteFailed} onVote={onVote} />
             </BlockIn>
           ))}
         </View>
@@ -260,8 +262,11 @@ function BlockIn({ open, j, reduced, children }: { open: boolean; j: number; red
   return <Animated.View style={{ opacity: v }}>{children}</Animated.View>;
 }
 
-function Block({ block, id, mobile, votes, voteFailed, onVote }: {
-  block: FeedBlock; id: string; mobile: boolean;
+/** Show more / Show less, renamed by the config (`showMoreLabel` / `showLessLabel`). */
+type ClampLabels = { moreLabel?: string; lessLabel?: string };
+
+function Block({ block, id, mobile, clamp, votes, voteFailed, onVote }: {
+  block: FeedBlock; id: string; mobile: boolean; clamp: ClampLabels;
   votes?: { pressed: boolean; count: number }; voteFailed: boolean; onVote: (b: Extract<FeedBlock, { kind: 'feedback' }>) => void;
 }) {
   const { colors } = useDs();
@@ -276,7 +281,7 @@ function Block({ block, id, mobile, votes, voteFailed, onVote }: {
         </View>
       );
     case 'text':
-      return <ClampText body={block.body} limit={TEXT_LIMIT} lines={6} nativeID={`${id}-t`} style={{ lineHeight: 21 }} />;
+      return <ClampText body={block.body} limit={TEXT_LIMIT} lines={6} nativeID={`${id}-t`} style={{ lineHeight: 21 }} {...clamp} />;
     case 'split':
       return <SplitWells positiveTitle={block.positiveTitle} positive={block.positive} negativeTitle={block.negativeTitle} negative={block.negative} stacked={mobile} />;
     case 'keyvalue':

package/src/components/onboarding/expandable-feed/contract.ts

@@ -42,6 +42,11 @@ export type FeedSettings = HeaderConfig & LoadCopy & {
   count: string | null;
   /** The hidden words for the mint check — "Verified purchase". */
   verifiedLabel?: string;
+  /** What a screen reader hears for the stars: `{value}` — "4.5 out of 5 stars". */
+  starsTemplate: string;
+  /** The long-text toggle, closed and open (default "Show more" / "Show less"). */
+  showMoreLabel?: string;
+  showLessLabel?: string;
   /** The header's right side: stars and the rating (counts up), then up to three muted items. */
   summary: { rating?: number | null; items?: string[] } | null;
   /** The footer well strip: one line left, one right. */

package/src/components/onboarding/expandable-feed/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "expandable-feed",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -12,7 +14,10 @@
     "title": "Customer reviews",
     "subtitle": "Verified buyers, most recent first",
     "count": "5 reviews",
+    "starsTemplate": "{value} out of 5 stars",
     "verifiedLabel": "Verified purchase",
+    "showMoreLabel": "Show more",
+    "showLessLabel": "Show less",
     "summary": {
       "rating": 4.4,
       "items": [

package/src/components/onboarding/export-format/ExportFormatView.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon, MotionView, Pressable, Text, useSwap } from '../../../core';
 import { Callout, CodeBlock, RadioGroup } from '../../../ds';
 import { blockRadii, useDs, type DensityName } from '../../../tokens';
-import { resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { fill, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import type { OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
 import { OnboardingCard } from '../shared/OnboardingCard';
@@ -67,7 +67,7 @@ function Valid({
       primary={{ label: v.primaryLabel, onPress: rt.exportNow, disabled: !v.canExport, busy: rt.state.exp === 'exporting' }}>
       <Box gap="s3">
         <RadioGroup
-          label="Export format"
+          label={config.formatGroupLabel}
           variant="rows"
           value={rt.state.format}
           onChange={rt.pick}
@@ -77,9 +77,9 @@ function Valid({
         {f ? (
           <Box gap="s2" style={{ borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken, padding: 12 }}>
             <Box row align="center" justify="space-between">
-              <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>Preview</Text>
+              <Text variant="caption" color="textPrimary" style={{ fontSize: 12, fontWeight: '600' }}>{config.previewLabel}</Text>
               <Pressable
-                aria-label={rt.state.copied ? config.copiedLabel : `${config.copyLabel} preview`}
+                aria-label={rt.state.copied ? config.copiedLabel : fill(config.copyAriaTemplate, { copy: config.copyLabel })}
                 onPress={() => { void rt.copy(); }}
                 height={28}
                 px="s2"
@@ -98,7 +98,7 @@ function Valid({
             </Box>
             <MotionView style={{ opacity: previewFade, gap: 6 }}>
               <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>
-                {`${config.sampleName}.${f.ext}${f.binary ? ' · structure' : ''}`}
+                {`${config.sampleName}.${f.ext}${f.binary ? ` · ${config.structureLabel}` : ''}`}
               </Text>
               <CodeBlock bare code={f.preview} minHeight={132} />
             </MotionView>

package/src/components/onboarding/export-format/contract.ts

@@ -36,6 +36,18 @@ export type ExportFormatSettings = HeaderConfig & LoadCopy & {
   copiedLabel: string;
   failTitle: string;
   failBody: string;
+  /** The header chip after an export failed. */
+  failedChipLabel: string;
+  /** The footer hint while exporting: `{file}` is the file name. */
+  generatingHintTemplate: string;
+  /** The format list's accessible name. */
+  formatGroupLabel: string;
+  /** The preview well's label. */
+  previewLabel: string;
+  /** The Copy button's accessible name: `{copy}` is `copyLabel`. */
+  copyAriaTemplate: string;
+  /** After a binary format's file name — its preview is a structure summary. */
+  structureLabel: string;
 };
 
 export const EXPORT_PRESETS = presetsJson as unknown as PresetsFile<ExportFormatSettings>;

package/src/components/onboarding/export-format/engine.ts

@@ -1,4 +1,5 @@
 import type { StateChipTone } from '../../../ds';
+import { fill } from '../shared/contract';
 import type { ExportFormatSettings, ExportScene } from './contract';
 
 /** **The Export Format engine** — pure: the chosen format, the copy flash and the export lifecycle. */
@@ -53,12 +54,12 @@ export function exportView(c: ExportFormatSettings, s: ExportState) {
   const file = fileNameOf(c, s);
   const chip: { tone: StateChipTone; label: string } = s.exp === 'exporting' ? { tone: 'neutral', label: c.exportingLabel }
     : s.exp === 'exported' ? { tone: 'success', label: c.exportedLabel }
-    : s.exp === 'failed' ? { tone: 'attention', label: 'Export failed' }
+    : s.exp === 'failed' ? { tone: 'attention', label: c.failedChipLabel }
     : { tone: 'neutral', label: (f?.label ?? '') };
   return {
     scene: (s.exp !== 'idle' ? s.exp : s.copied ? 'copied' : s.format === c.defaultFormat ? 'default' : 'other') as ExportScene,
     chip,
-    footerHint: s.exp === 'exported' ? `${c.exportedHint} · ${file}` : s.exp === 'exporting' ? `Generating ${file}…` : file,
+    footerHint: s.exp === 'exported' ? `${c.exportedHint} · ${file}` : s.exp === 'exporting' ? fill(c.generatingHintTemplate, { file }) : file,
     primaryLabel: s.exp === 'exporting' ? c.exportingLabel : s.exp === 'exported' ? c.exportedLabel : s.exp === 'failed' ? c.retryLabel : `${c.exportLabel} ${(f?.label ?? '')}`,
     canExport: s.exp !== 'exporting' && s.exp !== 'exported',
     locked: s.exp === 'exporting',

package/src/components/onboarding/export-format/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "export-format",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -57,7 +59,13 @@
     "failBody": "The file couldn’t be generated. Your settings haven’t changed; retry to try again.",
     "emptyTitle": "No formats available",
     "emptyBody": "Exports are turned off for this workspace.",
-    "emptyCta": "Refresh"
+    "emptyCta": "Refresh",
+    "failedChipLabel": "Export failed",
+    "generatingHintTemplate": "Generating {file}…",
+    "formatGroupLabel": "Export format",
+    "previewLabel": "Preview",
+    "copyAriaTemplate": "{copy} preview",
+    "structureLabel": "structure"
   },
   "cases": {
     "case1": {},