@appinternalleads/ui 0.2.0 → 0.4.0

package/src/components/onboarding/data-view/DataView.tsx

@@ -3,7 +3,7 @@ import { Platform, ScrollView, View, type NativeScrollEvent, type NativeSyntheti
 import { Box, Icon, MotionView, Pressable, Select, Text, useSwap, useTween } from '../../../core';
 import { gridColumns } from '../../../ds';
 import { blockRadii, blockScrim, useDs, type DensityName } from '../../../tokens';
-import type { OnboardingResult, PatternStatus } from '../shared/contract';
+import { fill, type OnboardingResult, type PatternStatus } from '../shared/contract';
 import type { OnboardingOperation } from '../shared/mock';
 import { OnboardingCard } from '../shared/OnboardingCard';
 import { usePatternStatus, useSceneReport } from '../shared/runtime';
@@ -113,7 +113,7 @@ export function DataView({ mode, config, ...props }: DataViewProps & { mode: 'ta
     if (contentOffset.y + layoutMeasurement.height > contentSize.height - 60) dv.loadMore();
   };
 
-  const open = (r: DataRow) => dv.open(r.id, toTextValue(config.columns[0]!, r[config.columns[0]!.id]));
+  const open = (r: DataRow) => dv.open(r.id, toTextValue(config.columns[0]!, r[config.columns[0]!.id], config));
   /* M15 (config.m15): the first reveal waits until the table is 30% in view; every page staggers. */
   const [revealRef, inView] = useInView();
   const osReduced = useReduceMotion();
@@ -133,25 +133,25 @@ export function DataView({ mode, config, ...props }: DataViewProps & { mode: 'ta
           onScroll={onScroll}
           scrollEventThrottle={64}>
           <Cards dv={dv} config={config} width={width} narrow={narrow} gap={dens.gap} skeleton={skeleton} now={now} open={open} />
-          {skeleton ? null : <Sentinel state={v.sentinel} endLabel={v.endLabel} onMore={dv.loadMore} />}
+          {skeleton ? null : <Sentinel state={v.sentinel} endLabel={v.endLabel} onMore={dv.loadMore} copy={config} />}
         </ScrollView>
       ) : (
         <TableScroll dv={dv} config={config} width={width} rowH={dens.rowH} skeleton={skeleton} now={now} open={open} scrollRef={scrollRef} onScroll={onScroll} />
       )}
-      <Footer dv={dv} skeleton={skeleton} onExport={openExport} onCopy={() => { void dv.copy(props.onCopy); }}>
+      <Footer dv={dv} config={config} skeleton={skeleton} onExport={openExport} onCopy={() => { void dv.copy(props.onCopy); }}>
         <ComboTrigger api={combo} config={dv.comboConfig} bare />
         {combo.state.open && !narrow ? <ComboPanel api={combo} config={dv.comboConfig} applyLabel={v.applyLabel} placement="top" align="end" /> : null}
         <View style={{ position: 'relative' }}>
           <Ghost
             ref={delRef}
-            label="Delete"
+            label={config.deleteLabel}
             tone="apricot"
             onPress={() => (s.overlay === 'delete' ? closeDelete() : openDelete())}
             haspopup="dialog"
             expanded={s.overlay === 'delete'}
           />
           {s.overlay === 'delete' ? (
-            <DeleteConfirm title={v.deleteTitle} deleting={s.bulk === 'deleting'} cancelRef={cancelRef} onCancel={closeDelete} onConfirm={dv.deleteNow} />
+            <DeleteConfirm config={config} title={v.deleteTitle} deleting={s.bulk === 'deleting'} cancelRef={cancelRef} onCancel={closeDelete} onConfirm={dv.deleteNow} />
           ) : null}
         </View>
       </Footer>
@@ -160,9 +160,10 @@ export function DataView({ mode, config, ...props }: DataViewProps & { mode: 'ta
           key={s.toast.id}
           tone={s.toast.tone}
           text={s.toast.text}
-          action={s.toast.retry ? 'Retry' : undefined}
+          action={s.toast.retry ? config.retryLabel : undefined}
           onAction={dv.toastAction}
           onClose={dv.dropToast}
+          dismissLabel={config.dismissLabel}
           style={{ right: 16, bottom: 64 }}
         />
       ) : null}
@@ -182,12 +183,12 @@ export function DataView({ mode, config, ...props }: DataViewProps & { mode: 'ta
             <ScrollView contentContainerStyle={{ gap: 10 }}>
               <Box row align="center" justify="space-between" gap="s3" style={{ paddingLeft: 4 }}>
                 <Text numeric style={{ fontSize: 14, fontWeight: '600', letterSpacing: -0.2, color: colors.textPrimary }}>{v.exportTitle}</Text>
-                <Pressable ref={modalCloseRef} aria-label="Close export" onPress={() => dv.overlay(null)} width={32} height={32} radius="pill">
+                <Pressable ref={modalCloseRef} aria-label={config.closeExportLabel} onPress={() => dv.overlay(null)} width={32} height={32} radius="pill">
                   <Icon name="close" size={15} color={colors.textSecondary} />
                 </Pressable>
               </Box>
               <View style={{ width: 580, maxWidth: '100%' }}>
-                <ExportFormat preset="case1" density={props.density} result={props.result} onScene={sc => { if (sc === 'exported') dv.exported(); }} />
+                <ExportFormat preset="case1" config={config.exportFormat} density={props.density} result={props.result} onScene={sc => { if (sc === 'exported') dv.exported(); }} />
               </View>
             </ScrollView>
           </View>
@@ -222,9 +223,9 @@ function CardsHeader({ mode, narrow, dv, config, disabled }: {
   const { colors } = useDs();
   const v = dv.model;
   const sortable = config.columns.filter(c => c.sortable !== false);
-  const options = [{ value: '', label: 'None' }].concat(sortable.flatMap(c => [
-    { value: `${c.id}:asc`, label: `${c.label}, ascending` },
-    { value: `${c.id}:desc`, label: `${c.label}, descending` },
+  const options = [{ value: '', label: config.sortNoneLabel }].concat(sortable.flatMap(c => [
+    { value: `${c.id}:asc`, label: fill(config.sortAscOptionLabel, { label: c.label }) },
+    { value: `${c.id}:desc`, label: fill(config.sortDescOptionLabel, { label: c.label }) },
   ]));
   const s0 = v.shownSort[0];
   const multiRef = useRef<View>(null);
@@ -240,13 +241,13 @@ function CardsHeader({ mode, narrow, dv, config, disabled }: {
       <Box row wrap align="center" gap="s2">
         {narrow && v.shownSort.length > 1 ? (
           <Box row align="center" height={24} radius="pill" style={{ paddingHorizontal: 10, backgroundColor: colors.band }}>
-            <Text numeric style={{ fontSize: 12, fontWeight: '600', color: colors.textSecondary }}>{`+${v.shownSort.length - 1} sort`}</Text>
+            <Text numeric style={{ fontSize: 12, fontWeight: '600', color: colors.textSecondary }}>{fill(config.moreSortsLabel, { n: v.shownSort.length - 1 })}</Text>
           </Box>
         ) : null}
-        <Text style={{ fontSize: 12, color: colors.textSecondary }}>Sort by</Text>
+        <Text style={{ fontSize: 12, color: colors.textSecondary }}>{config.sortByLabel}</Text>
         <Box style={{ width: 190 }}>
           <Select
-            aria-label="Sort by"
+            aria-label={config.sortByLabel}
             value={s0 ? `${s0.id}:${s0.dir}` : ''}
             options={options}
             onChange={val => {
@@ -259,7 +260,7 @@ function CardsHeader({ mode, narrow, dv, config, disabled }: {
           <View style={{ position: 'relative' }}>
             <Ghost
               ref={multiRef}
-              label={v.shownSort.length > 1 ? `Multi-sort · ${v.shownSort.length}` : 'Multi-sort'}
+              label={v.shownSort.length > 1 ? fill(config.multiSortCountLabel, { n: v.shownSort.length }) : config.multiSortLabel}
               onPress={() => dv.overlay(multiOpen ? null : 'sort')}
               haspopup="dialog"
               expanded={multiOpen}
@@ -267,6 +268,7 @@ function CardsHeader({ mode, narrow, dv, config, disabled }: {
             {multiOpen ? (
               <MultiSort
                 dv={dv}
+                config={config}
                 columns={sortable}
                 onClose={() => { dv.overlay(null); setTimeout(() => multiRef.current?.focus?.(), 40); }}
               />
@@ -279,7 +281,7 @@ function CardsHeader({ mode, narrow, dv, config, disabled }: {
 }
 
 /** The Multi-sort popover (web Grid): one row per sortable column — priority, label, Off / Ascending / Descending. */
-function MultiSort({ dv, columns, onClose }: { dv: ReturnType<typeof useDataView>; columns: ColumnDef[]; onClose: () => void }) {
+function MultiSort({ dv, config, columns, onClose }: { dv: ReturnType<typeof useDataView>; config: DataViewSettings; columns: ColumnDef[]; onClose: () => void }) {
   const { colors, lift2 } = useDs();
   const firstRef = useRef<View>(null);
   useEffect(() => { setTimeout(() => firstRef.current?.focus?.(), 40); }, []);
@@ -287,13 +289,13 @@ function MultiSort({ dv, columns, onClose }: { dv: ReturnType<typeof useDataView
   return (
     <View
       role="dialog"
-      aria-label="Sort order"
+      aria-label={config.sortOrderLabel}
       {...webOnly<WebEvents>({ onKeyDown: e => { if (e.key === 'Escape') { e.preventDefault(); onClose(); } } })}
       style={{
         position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 6, width: 250, gap: 2, padding: 4,
         borderWidth: 1, borderColor: colors.hairlineStrong, borderRadius: blockRadii.mid, backgroundColor: colors.surface1, boxShadow: lift2,
       }}>
-      <Text style={{ paddingTop: 6, paddingHorizontal: 8, paddingBottom: 4, fontSize: 12, color: colors.textSecondary }}>Click to cycle ascending, descending, off</Text>
+      <Text style={{ paddingTop: 6, paddingHorizontal: 8, paddingBottom: 4, fontSize: 12, color: colors.textSecondary }}>{config.multiSortHint}</Text>
       {columns.map((c, i) => {
         const k = shown.findIndex(x => x.id === c.id);
         const st = k === -1 ? null : shown[k]!;
@@ -308,11 +310,11 @@ function MultiSort({ dv, columns, onClose }: { dv: ReturnType<typeof useDataView
             style={{ paddingVertical: 8, paddingHorizontal: 10, borderRadius: blockRadii.inset }}>
             <Text numeric style={{ width: 16, fontSize: 12, fontWeight: '600', color: colors.textSecondary }}>{st ? String(k + 1) : ''}</Text>
             <Text style={{ flex: 1, fontSize: 13, color: colors.textPrimary }}>{c.label}</Text>
-            <Text style={{ fontSize: 12, color: st ? colors.textPrimary : colors.textSecondary }}>{st ? (st.dir === 'asc' ? 'Ascending' : 'Descending') : 'Off'}</Text>
+            <Text style={{ fontSize: 12, color: st ? colors.textPrimary : colors.textSecondary }}>{st ? (st.dir === 'asc' ? config.ascendingLabel : config.descendingLabel) : config.sortOffLabel}</Text>
           </Pressable>
         );
       })}
-      <Box row style={{ padding: 4 }}><Ghost label="Clear sort" onPress={() => dv.setSort([])} height={28} /></Box>
+      <Box row style={{ padding: 4 }}><Ghost label={config.clearSortLabel} onPress={() => dv.setSort([])} height={28} /></Box>
     </View>
   );
 }
@@ -365,7 +367,7 @@ export function RecordCard({ row, config, selected, onToggle, onOpen, now }: {
   const [hover, setHover] = useState(false);
   const ring = useTween(selected ? 1 : 0);
   const t0 = config.columns[0]!;
-  const title = toTextValue(t0, row[t0.id]);
+  const title = toTextValue(t0, row[t0.id], config);
   const rv = useRowReveal();
   const r = rv.row(row.id);
   return (
@@ -392,13 +394,13 @@ export function RecordCard({ row, config, selected, onToggle, onOpen, now }: {
       <Box row align="center" gap="s2" style={{ minHeight: 44 }}>
         {t0.type === 'avatar' ? <Initials text={initials(title)} size={32} /> : null}
         <OpenButton title={title} onPress={onOpen} size={14} />
-        {config.selectable === false ? null : <SelectBox checked={selected} onChange={onToggle} label={`Select ${title}`} />}
+        {config.selectable === false ? null : <SelectBox checked={selected} onChange={onToggle} label={fill(config.selectRowLabel, { title })} />}
       </Box>
       <View role="list" style={{ gap: 6, paddingRight: 10 }}>
         {config.columns.slice(1).filter(col => col.card !== false).slice(0, 4).map(col => (
           <View key={col.id} role="listitem" style={{ flexDirection: 'row', alignItems: 'center', gap: 8, minHeight: 22 }}>
             <Text style={{ width: 96, fontSize: 12, color: colors.textSecondary }}>{col.label}</Text>
-            <View style={{ flex: 1, minWidth: 0 }}><Cell m={cellModel(col, row[col.id], 'card', now, { max: rv.max(col.id) })} card fill={r.fill} tone={r.tone} scale={rv.scale(col.id, Number(row[col.id]))} /></View>
+            <View style={{ flex: 1, minWidth: 0 }}><Cell m={cellModel(col, row[col.id], 'card', now, { max: rv.max(col.id), copy: config })} card fill={r.fill} tone={r.tone} scale={rv.scale(col.id, Number(row[col.id]))} /></View>
           </View>
         ))}
       </View>
@@ -468,7 +470,7 @@ function TableScroll({ dv, config, width, rowH, skeleton, now, open, scrollRef,
               <SelectBox checked={v.allOn ? true : v.mixed ? 'mixed' : false} onChange={dv.toggleAll} label={v.selectAllLabel} disabled={skeleton || !s.rows.length} />
             </View>
           )}
-          {cols.map((c, i) => <HeaderCell key={c.id} col={c} width={w(c)} end={i > 0 && isEnd(c)} dv={dv} />)}
+          {cols.map((c, i) => <HeaderCell key={c.id} col={c} config={config} width={w(c)} end={i > 0 && isEnd(c)} dv={dv} />)}
         </View>
         <MotionView role="rowgroup" style={{ opacity: fade }}>
           {skeleton
@@ -482,7 +484,7 @@ function TableScroll({ dv, config, width, rowH, skeleton, now, open, scrollRef,
         {/* The sentinel is the table's last row (one cell), so role="table" owns only rows. */}
         {skeleton ? null : (
           <View role="row" style={{ width: wide ? width : tableW }}>
-            <View role="cell"><Sentinel state={v.sentinel} endLabel={v.endLabel} onMore={dv.loadMore} /></View>
+            <View role="cell"><Sentinel state={v.sentinel} endLabel={v.endLabel} onMore={dv.loadMore} copy={config} /></View>
           </View>
         )}
       </ScrollView>
@@ -495,7 +497,7 @@ function TableScroll({ dv, config, width, rowH, skeleton, now, open, scrollRef,
  * sits at .35 when unsorted and turns 180° for descending; priority digits appear with 2+ keys.
  * Click cycles asc → desc → none; Shift-click, or Shift+Enter, adds or cycles the key.
  */
-function HeaderCell({ col, width, end, dv }: { col: ColumnDef; width: number; end: boolean; dv: ReturnType<typeof useDataView> }) {
+function HeaderCell({ col, config, width, end, dv }: { col: ColumnDef; config: DataViewSettings; width: number; end: boolean; dv: ReturnType<typeof useDataView> }) {
   const { colors } = useDs();
   const shown = dv.model.shownSort;
   const k = shown.findIndex(x => x.id === col.id);
@@ -511,7 +513,7 @@ function HeaderCell({ col, width, end, dv }: { col: ColumnDef; width: number; en
         <Pressable
           onPress={((e?: { nativeEvent?: { shiftKey?: boolean }; shiftKey?: boolean }) => dv.sort(col.id, Boolean(e?.nativeEvent?.shiftKey ?? e?.shiftKey))) as () => void}
           onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); dv.sort(col.id, Boolean((e as { shiftKey?: boolean }).shiftKey)); } }}
-          aria-label={`Sort by ${col.label}${st ? `, currently ${st.dir === 'asc' ? 'ascending' : 'descending'}` : ''}. Shift to add a sort`}
+          aria-label={fill(!st ? config.sortColumnLabel : st.dir === 'asc' ? config.sortColumnAscLabel : config.sortColumnDescLabel, { label: col.label })}
           row
           gap="s1"
           height={32}
@@ -538,7 +540,7 @@ function TableRow({ row, config, widths, checkW, rowH, selected, onToggle, onOpe
   const [hover, setHover] = useState(false);
   const cols = config.columns;
   const t0 = cols[0]!;
-  const title = toTextValue(t0, row[t0.id]);
+  const title = toTextValue(t0, row[t0.id], config);
   const rv = useRowReveal();
   const r = rv.row(row.id);
   const selectable = config.selectable !== false;
@@ -564,7 +566,7 @@ function TableRow({ row, config, widths, checkW, rowH, selected, onToggle, onOpe
       }}>
       {selectable ? (
         <View role="cell" style={{ width: checkW, paddingLeft: 8, justifyContent: 'center' }}>
-          <SelectBox checked={selected} onChange={onToggle} label={`Select ${title}`} />
+          <SelectBox checked={selected} onChange={onToggle} label={fill(config.selectRowLabel, { title })} />
         </View>
       ) : null}
       {cell(
@@ -574,7 +576,7 @@ function TableRow({ row, config, widths, checkW, rowH, selected, onToggle, onOpe
         </Box>,
         widths[0]!, t0.id, false, true,
       )}
-      {cols.slice(1).map((c, i) => cell(<Cell m={cellModel(c, row[c.id], 'cell', now, { max: rv.max(c.id) })} fill={r.fill} tone={r.tone} scale={rv.scale(c.id, Number(row[c.id]))} />, widths[i + 1]!, c.id, isEnd(c) && typeOf(c) !== 'bar'))}
+      {cols.slice(1).map((c, i) => cell(<Cell m={cellModel(c, row[c.id], 'cell', now, { max: rv.max(c.id), copy: config })} fill={r.fill} tone={r.tone} scale={rv.scale(c.id, Number(row[c.id]))} />, widths[i + 1]!, c.id, isEnd(c) && typeOf(c) !== 'bar'))}
     </View>
   );
 }
@@ -596,7 +598,9 @@ function SkeletonRow({ i, rowH }: { i: number; rowH: number }) {
 
 /* ── Footer: "loaded" + Copy as text ⇄ the bulk bar, one cell (M4) ──────────────────────── */
 
-function Footer({ dv, skeleton, onCopy, onExport, children }: { dv: ReturnType<typeof useDataView>; skeleton: boolean; onCopy: () => void; onExport: () => void; children: ReactNode }) {
+function Footer({ dv, config, skeleton, onCopy, onExport, children }: {
+  dv: ReturnType<typeof useDataView>; config: DataViewSettings; skeleton: boolean; onCopy: () => void; onExport: () => void; children: ReactNode;
+}) {
   const { colors } = useDs();
   const v = dv.model;
   const s = dv.state;
@@ -612,15 +616,15 @@ function Footer({ dv, skeleton, onCopy, onExport, children }: { dv: ReturnType<t
               <Text style={{ fontWeight: '400', color: colors.textSecondary }}>{v.notShownLabel}</Text>
             </Text>
             <Box row wrap align="center" justify="flex-end" gap="s2" style={{ flexShrink: 1, minWidth: 0, maxWidth: '100%' }}>
-              <Ghost label="Clear" onPress={dv.clearSel} />
-              <Ghost label="Export" onPress={onExport} haspopup="dialog" />
+              <Ghost label={config.clearLabel} onPress={dv.clearSel} />
+              <Ghost label={config.exportLabel} onPress={onExport} haspopup="dialog" />
               {children}
             </Box>
           </Box>
         ) : (
           <Box row align="center" justify="space-between" gap="s3" style={{ paddingVertical: 12, paddingHorizontal: 20 }}>
-            <Text aria-live="polite" numeric style={{ fontSize: 12, color: colors.textSecondary }}>{skeleton ? 'Loading…' : v.loadedLabel}</Text>
-            <Ghost label={s.copied ? 'Copied' : 'Copy as text'} onPress={onCopy} height={28} disabled={skeleton || !s.rows.length} />
+            <Text aria-live="polite" numeric style={{ fontSize: 12, color: colors.textSecondary }}>{skeleton ? config.footerLoadingLabel : v.loadedLabel}</Text>
+            <Ghost label={s.copied ? config.copiedLabel : config.copyTextLabel} onPress={onCopy} height={28} disabled={skeleton || !s.rows.length} />
           </Box>
         )}
       </MotionView>
@@ -633,14 +637,14 @@ function Footer({ dv, skeleton, onCopy, onExport, children }: { dv: ReturnType<t
  * can’t be undone.", Cancel and a bold apricot-deep Delete that becomes "Deleting…" (`aria-busy`).
  * Focus moves to Cancel on open; Esc closes and returns focus to the trigger.
  */
-function DeleteConfirm({ title, deleting, cancelRef, onCancel, onConfirm }: {
-  title: string; deleting: boolean; cancelRef: { current: View | null }; onCancel: () => void; onConfirm: () => void;
+function DeleteConfirm({ config, title, deleting, cancelRef, onCancel, onConfirm }: {
+  config: DataViewSettings; title: string; deleting: boolean; cancelRef: { current: View | null }; onCancel: () => void; onConfirm: () => void;
 }) {
   const { colors, lift2 } = useDs();
   return (
     <View
       role="dialog"
-      aria-label="Confirm delete"
+      aria-label={config.confirmDeleteLabel}
       {...webOnly<WebEvents>({ onKeyDown: e => { if (e.key === 'Escape') { e.preventDefault(); onCancel(); } } })}
       style={{
         position: 'absolute', right: 0, bottom: '100%', marginBottom: 8, zIndex: 6, width: 260, gap: 12, padding: 14,
@@ -648,11 +652,11 @@ function DeleteConfirm({ title, deleting, cancelRef, onCancel, onConfirm }: {
       }}>
       <Box gap="s1">
         <Text numeric style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{title}</Text>
-        <Text style={{ fontSize: 12, color: colors.textSecondary }}>This can’t be undone.</Text>
+        <Text style={{ fontSize: 12, color: colors.textSecondary }}>{config.deleteWarningText}</Text>
       </Box>
       <Box row justify="flex-end" gap="s2">
-        <Ghost ref={cancelRef as never} label="Cancel" onPress={onCancel} disabled={deleting} />
-        <Ghost label={deleting ? 'Deleting…' : 'Delete'} tone="apricot" onPress={onConfirm} busy={deleting} />
+        <Ghost ref={cancelRef as never} label={config.cancelLabel} onPress={onCancel} disabled={deleting} />
+        <Ghost label={deleting ? config.deletingLabel : config.deleteLabel} tone="apricot" onPress={onConfirm} busy={deleting} />
       </Box>
     </View>
   );

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

@@ -1,4 +1,6 @@
 import type { HeaderConfig, LoadCopy } from '../shared/contract';
+import type { ExportFormatSettings } from '../export-format/contract';
+import type { ComboboxCopy } from '../combobox/contract';
 
 /**
  * **The data-view contract Table and Grid share (batch 4 PRD §4, with C14's changes).**
@@ -27,6 +29,8 @@ export type DemoGen = {
   days?: [number, number]; hours?: [number, number]; min?: number; max?: number; dec?: number;
   /** Batch 5: `list` in order (row i takes `list[i % n]`); `desc` from `[hi, lo]`, geometric over the rows. */
   list?: string[]; desc?: [number, number];
+  /** `hex`: the sixteen characters the id is written in, 0 to f (default "0123456789abcdef"). */
+  digits?: string;
 } | null;
 
 export type ColumnDef = {
@@ -65,8 +69,100 @@ export type Person = { id: string; name: string; avatarUrl?: string; meta?: stri
 
 export type BulkAction = 'export' | 'delete' | 'assign';
 
-/** The config both views take — the prototypes' `BASE` keys, verbatim. */
-export type DataViewSettings = HeaderConfig & LoadCopy & {
+/**
+ * **Every word the views and the engine write themselves** — so an agent sending config can rename or
+ * translate all of it. `{n}` is a number, `{count}` a number with its noun ("5 invoices"), `{label}` a
+ * column's label, `{title}` a row's title. The English lives in each component's `presets.json` `base`.
+ */
+export type DataViewCopy = {
+  /** The header chip while a sort is in flight. */
+  sortingLabel: string;
+  /** "All {count} loaded" — the footer and the list's end. */
+  allLoadedLabel: string;
+  /** "{n} of {count} loaded". */
+  loadedOfLabel: string;
+  /** "{n} selected" — the bulk bar. */
+  selectedLabel: string;
+  /** "{n} not shown" — selected rows that are not loaded. */
+  notShownLabel: string;
+  /** "Select {n} loaded" — the select-all box. */
+  selectLoadedLabel: string;
+  deleteTitle: string;
+  exportTitle: string;
+  assignToLabel: string;
+  replaceAssigneesLabel: string;
+  assignTitle: string;
+  /** "Assigned {count} to {to}" — `{to}` is a name, or `peopleCountLabel`. */
+  assignedText: string;
+  /** "{n} people" — several assignees, in a cell or a toast. */
+  peopleCountLabel: string;
+  deleteFailedText: string;
+  deletedText: string;
+  /** "Opened {title}". */
+  openedText: string;
+  exportedText: string;
+  /** The Assign field (C14). */
+  assignLabel: string;
+  assignEmptyLabel: string;
+  searchPeoplePlaceholder: string;
+  dismissLabel: string;
+  deleteLabel: string;
+  deletingLabel: string;
+  cancelLabel: string;
+  confirmDeleteLabel: string;
+  deleteWarningText: string;
+  closeExportLabel: string;
+  sortByLabel: string;
+  sortNoneLabel: string;
+  /** "{label}, ascending" — a Sort by option. */
+  sortAscOptionLabel: string;
+  sortDescOptionLabel: string;
+  /** "+{n} sort" — the mobile chip. */
+  moreSortsLabel: string;
+  multiSortLabel: string;
+  /** "Multi-sort · {n}". */
+  multiSortCountLabel: string;
+  sortOrderLabel: string;
+  multiSortHint: string;
+  ascendingLabel: string;
+  descendingLabel: string;
+  sortOffLabel: string;
+  clearSortLabel: string;
+  /** A header's name: "Sort by {label}. Shift to add a sort", and the two sorted forms. */
+  sortColumnLabel: string;
+  sortColumnAscLabel: string;
+  sortColumnDescLabel: string;
+  /** "Select {title}" — a row's checkbox. */
+  selectRowLabel: string;
+  clearLabel: string;
+  exportLabel: string;
+  /** The footer while the first page loads. */
+  footerLoadingLabel: string;
+  copyTextLabel: string;
+  copiedLabel: string;
+  loadMoreLabel: string;
+  loadingMoreLabel: string;
+  loadMoreErrorText: string;
+  /** "{text} (opens in a new tab)" — an external link cell's name. */
+  opensInNewTabLabel: string;
+  /** A score's tier, read out after the figure. */
+  scoreGoodLabel: string;
+  scoreFairLabel: string;
+  scoreLowLabel: string;
+  /** Twelve short month names, January first — every date a cell shows. */
+  monthNames: string[];
+  /** "{t} ago" / "in {t}" — a relative date; `{t}` is one of the three below. */
+  relativePastText: string;
+  relativeFutureText: string;
+  minutesShortText: string;
+  hoursShortText: string;
+  daysShortText: string;
+  /** "and {n} more" — the end of "Copy as text". */
+  moreRowsText: string;
+};
+
+/** The config both views take — the prototypes' `BASE` keys, verbatim, and the views' own words. */
+export type DataViewSettings = HeaderConfig & LoadCopy & DataViewCopy & {
   columns: ColumnDef[];
   /** Demo row count (60 or more). A real host's first page carries `totalCount`. */
   totalCount: number;
@@ -91,6 +187,13 @@ export type DataViewSettings = HeaderConfig & LoadCopy & {
   selectable?: boolean;
   /** M15 data reveal: rows stagger in (every page), bars fill and numbers count. */
   m15?: boolean;
+  /**
+   * The Export modal's Export Format step (its case 1), and every word it shows — merged over that
+   * preset, so an agent renames or translates the modal here like the rest of the view.
+   */
+  exportFormat?: Partial<ExportFormatSettings>;
+  /** The Assign picker's (C14's) own words — its heads, hints, Cancel and live text. The field's label, placeholder and apply come from this view's keys. */
+  assignPicker?: Partial<ComboboxCopy>;
 };
 
 export const DATA_VIEW_SCENES = [

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

@@ -34,7 +34,12 @@ export function generateRows(c: Pick<DataViewSettings, 'columns' | 'totalCount'
       if (g.seq != null) v = g.seq + ((g.start ?? 0) + i);
       else if (g.list) v = g.list[i % g.list.length];
       else if (g.desc) v = Math.round(g.desc[0] * Math.pow(g.desc[1] / g.desc[0], i / Math.max(1, c.totalCount - 1)));
-      else if (g.hex) v = (Math.floor(rnd(i, 99) * 0xfffffff) + 0x1000000).toString(16).slice(0, 7);
+      else if (g.hex) {
+        const hex = (Math.floor(rnd(i, 99) * 0xfffffff) + 0x1000000).toString(16).slice(0, 7);
+        /* Written in the config's own digits, so every character a board shows is the config's. */
+        const digits = g.digits || '0123456789abcdef';
+        v = Array.from(hex, ch => digits[parseInt(ch, 16) % digits.length]).join('');
+      }
       else if (col.type === 'avatars' && g.pool) {
         const n = Math.floor(u * 3);
         const names: string[] = [];
@@ -60,6 +65,7 @@ export function generateRows(c: Pick<DataViewSettings, 'columns' | 'totalCount'
         const p = Math.pow(10, g.dec ?? 0);
         v = Math.round((g.min + u * (g.max - g.min)) * p) / p;
       } else if (col.type === 'status') {
+        /* Without a `gen.pool`, a status is one of its `tones` keys. */
         const ks = Object.keys(col.tones ?? {});
         v = ks[Math.floor(u * ks.length)];
       }

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

@@ -1,3 +1,4 @@
+import { fill } from '../shared/contract';
 import type { DataRow, DataViewScene, DataViewSettings, Person, SortKey } from './contract';
 import { countNoun } from './registry';
 import { generateRows, sortRows } from './demoSource';
@@ -103,7 +104,7 @@ export function dataViewSeed(c: DataViewSettings, scene: DataViewScene): DataVie
     case 'notShown': return { ...page, sel: pick(n - 2).concat(ids.slice(c.pageSize + 5, c.pageSize + 7)) };
     case 'deleteConfirm': return { ...page, sel: pick(n), overlay: 'delete' };
     case 'deleting': return { ...page, sel: pick(n), overlay: 'delete', bulk: 'deleting' };
-    case 'deleteFailed': return { ...page, sel: pick(n), toast: { id: 1, tone: 'apricot', text: `Couldn’t delete ${countNoun(n, c.noun, c.nouns)}`, retry: 'delete' } };
+    case 'deleteFailed': return { ...page, sel: pick(n), toast: { id: 1, tone: 'apricot', text: fill(c.deleteFailedText, { count: countNoun(n, c.noun, c.nouns) }), retry: 'delete' } };
     case 'assignOpen': return { ...page, sel: pick(n), assign: { open: true, nonce: 0 } };
     case 'exportOpen': return { ...page, sel: pick(n), overlay: 'export' };
     case 'mobile': return { ...page, mobile: true };
@@ -195,6 +196,8 @@ export function dataViewModel(c: DataViewSettings, s: DataViewState) {
   const selN = s.sel.length;
   const notShown = s.sel.filter(id => !loadedIds.includes(id)).length;
   const count = (n: number) => countNoun(n, c.noun, c.nouns);
+  const fmt = (n: number) => n.toLocaleString('en-US');
+  const allLoaded = fill(c.allLoadedLabel, { count: count(s.total) });
   const atEnd = s.cursor === null;
   /* "Replace assignees on 5 tickets" when any selected row already has a value in `assignCol`. */
   const had = Boolean(c.assignCol) && s.sel.some(id => {
@@ -210,16 +213,16 @@ export function dataViewModel(c: DataViewSettings, s: DataViewState) {
     mixed: onCount > 0 && !allOn,
     selN,
     notShown,
-    chipLabel: s.pend ? 'Sorting…' : count(s.total),
-    loadedLabel: atEnd ? `All ${count(s.total)} loaded` : `${Math.min(s.rows.length, s.total).toLocaleString('en-US')} of ${count(s.total)} loaded`,
-    endLabel: `All ${count(s.total)} loaded`,
-    selLabel: `${selN.toLocaleString('en-US')} selected`,
-    notShownLabel: notShown ? ` · ${notShown} not shown` : '',
-    selectAllLabel: `Select ${loadedIds.length.toLocaleString('en-US')} loaded`,
-    deleteTitle: `Delete ${count(selN)}?`,
-    exportTitle: `Export ${count(selN)}`,
-    applyLabel: had ? `Replace assignees on ${count(selN)}` : `Assign to ${count(selN)}`,
-    assignTitle: `Assign ${count(selN)}`,
+    chipLabel: s.pend ? c.sortingLabel : count(s.total),
+    loadedLabel: atEnd ? allLoaded : fill(c.loadedOfLabel, { n: fmt(Math.min(s.rows.length, s.total)), count: count(s.total) }),
+    endLabel: allLoaded,
+    selLabel: fill(c.selectedLabel, { n: fmt(selN) }),
+    notShownLabel: notShown ? ` · ${fill(c.notShownLabel, { n: fmt(notShown) })}` : '',
+    selectAllLabel: fill(c.selectLoadedLabel, { n: fmt(loadedIds.length) }),
+    deleteTitle: fill(c.deleteTitle, { count: count(selN) }),
+    exportTitle: fill(c.exportTitle, { count: count(selN) }),
+    applyLabel: fill(had ? c.replaceAssigneesLabel : c.assignToLabel, { count: count(selN) }),
+    assignTitle: fill(c.assignTitle, { count: count(selN) }),
     sentinel: (s.more === 'loading' ? 'loading' : s.more === 'error' ? 'error' : atEnd ? (s.total > 0 ? 'end' : 'none') : 'idle') as 'loading' | 'error' | 'end' | 'idle' | 'none',
     count,
   };
@@ -227,6 +230,6 @@ export function dataViewModel(c: DataViewSettings, s: DataViewState) {
 
 /** "Assigned 5 tickets to Sam Ortiz" · "… to 3 people". */
 export function assignedText(c: DataViewSettings, n: number, people: Person[]): string {
-  const to = people.length === 1 ? people[0]!.name : `${people.length} people`;
-  return `Assigned ${countNoun(n, c.noun, c.nouns)} to ${to}`;
+  const to = people.length === 1 ? people[0]!.name : fill(c.peopleCountLabel, { n: people.length });
+  return fill(c.assignedText, { count: countNoun(n, c.noun, c.nouns), to });
 }

package/src/components/onboarding/data-view/parts.tsx

@@ -98,8 +98,12 @@ export type ToastTone = 'neutral' | 'mint' | 'apricot';
  * and a close icon button. Enters with M10 (opacity and a 4px rise). `role="alert"` for apricot.
  */
 export function CardToast({
-  tone, text, action, onAction, onClose, style,
-}: { tone: ToastTone; text: string; action?: string; onAction?: () => void; onClose: () => void; style?: object }) {
+  tone, text, action, onAction, onClose, style, dismissLabel = 'Dismiss notification',
+}: {
+  tone: ToastTone; text: string; action?: string; onAction?: () => void; onClose: () => void; style?: object;
+  /** The close button's name — Table and Grid pass their config's `dismissLabel`. */
+  dismissLabel?: string;
+}) {
   const { colors, lift2 } = useDs();
   const p = usePresence(true, { appear: true, distance: -4 });
   const tile = tone === 'mint' ? { bg: colors.statusBg.executed, fg: colors.status.executed, icon: 'tick' as IconName }
@@ -120,7 +124,7 @@ export function CardToast({
         <Text numeric style={{ fontSize: 13, fontWeight: tone === 'apricot' ? '700' : '600', color: tone === 'apricot' ? colors.status.needsUser : colors.textPrimary }}>{text}</Text>
         {action && onAction ? <Box row><Ghost label={action} onPress={onAction} height={28} /></Box> : null}
       </Box>
-      <Pressable aria-label="Dismiss notification" onPress={onClose} width={32} height={32} radius="pill">
+      <Pressable aria-label={dismissLabel} onPress={onClose} width={32} height={32} radius="pill">
         <Icon name="close" size={15} color={colors.textSecondary} />
       </Pressable>
     </Animated.View>
@@ -215,7 +219,7 @@ export function Cell({ m, card = false, fill = 1, tone = 1, scale }: {
             {String(Math.round(m.value * fill))}
           </ToneText>
           {/* The tier in words — colour never carries it alone. */}
-          <Text style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}>{` (${m.tier})`}</Text>
+          <Text style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', opacity: 0 }}>{` (${m.tierLabel})`}</Text>
         </View>
       );
     }
@@ -248,7 +252,7 @@ export function Cell({ m, card = false, fill = 1, tone = 1, scale }: {
       return (
         <ExternalLink
           href={m.href}
-          aria-label={m.external ? `${m.text} (opens in a new tab)` : m.text}
+          aria-label={m.label}
           style={{ alignSelf: 'flex-start', flexDirection: 'row', alignItems: 'center', gap: 4, paddingHorizontal: 4, paddingVertical: 2, marginHorizontal: -4, marginVertical: -2, borderRadius: blockRadii.key }}>
           <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '600', color: colors.accentInk }}>{m.text}</Text>
           {m.external ? <Icon name="external" size={12} color={colors.accentInk} /> : null}
@@ -313,18 +317,21 @@ export function LoadingMore({ label = 'Loading more…' }: { label?: string }) {
   );
 }
 
+/** The sentinel's words — from the config (`loadMoreLabel`, `loadingMoreLabel`, `loadMoreErrorText`, `retryLabel`). */
+export type SentinelCopy = { loadMoreLabel: string; loadingMoreLabel: string; loadMoreErrorText: string; retryLabel: string };
+
 /**
  * **The sentinel at the end of the list** — idle: a ghost Load more (keyboard and reduced-motion
  * users; scrolling near the end also loads); loading: the spinner; error: the apricot row with
  * Retry; end: "All 64 invoices loaded".
  */
-export function Sentinel({ state, endLabel, onMore }: { state: 'idle' | 'loading' | 'error' | 'end' | 'none'; endLabel: string; onMore: () => void }) {
+export function Sentinel({ state, endLabel, onMore, copy }: { state: 'idle' | 'loading' | 'error' | 'end' | 'none'; endLabel: string; onMore: () => void; copy: SentinelCopy }) {
   const { colors } = useDs();
   return (
     <Box row align="center" justify="center" gap="s2" style={{ minHeight: 52, paddingVertical: 8, paddingHorizontal: 12 }}>
-      {state === 'loading' ? <LoadingMore /> : null}
-      {state === 'error' ? <AlertRow text="Couldn’t load more" action="Retry" onAction={onMore} /> : null}
-      {state === 'idle' ? <Ghost label="Load more" onPress={onMore} height={28} /> : null}
+      {state === 'loading' ? <LoadingMore label={copy.loadingMoreLabel} /> : null}
+      {state === 'error' ? <AlertRow text={copy.loadMoreErrorText} action={copy.retryLabel} onAction={onMore} /> : null}
+      {state === 'idle' ? <Ghost label={copy.loadMoreLabel} onPress={onMore} height={28} /> : null}
       {state === 'end' ? <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{endLabel}</Text> : null}
     </Box>
   );