@appinternalleads/ui 0.2.0 → 0.4.0

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

@@ -1,3 +1,4 @@
+import { fill } from '../shared/contract';
 import type { AchievementProgress, AchievementScene, AchievementSettings } from './contract';
 
 /** **The Achievement engine** — pure: locked or unlocked, the claim, and the share flash. */
@@ -41,22 +42,25 @@ export function achievementView(c: AchievementSettings, s: AchievementState) {
   const p = s.unlocked ? c.progress : c.lockedProgress ?? c.progress;
   const claimed = s.claim === 'claimed';
   const left = Math.max(0, p.target - p.current);
+  const u = unit(p);
   return {
     progress: p,
-    progressText: `${amount(p.current, p)} / ${amount(p.target, p)}${unit(p)}`,
-    progressWords: `${amount(p.current, p)} of ${amount(p.target, p)}${unit(p)}`,
+    progressText: `${amount(p.current, p)} / ${amount(p.target, p)}${u}`,
+    progressWords: fill(c.progressWordsTemplate, { current: amount(p.current, p), target: amount(p.target, p), unit: u }),
     rewardText: claimed ? c.claimedReward : `${c.reward.value}${c.reward.unit ? ` ${c.reward.unit}` : ''}`,
-    rewardLabel: s.unlocked ? 'Reward' : 'Reward when unlocked',
-    statusLine: s.unlocked ? c.unlockedLine : 'Not unlocked yet',
-    nextLabel: `Progress to ${s.unlocked ? c.nextTier : c.tier}`,
+    rewardLabel: s.unlocked ? c.rewardLabel : c.lockedRewardLabel,
+    statusLine: s.unlocked ? c.unlockedLine : c.lockedLine,
+    nextLabel: fill(c.progressToTemplate, { tier: s.unlocked ? c.nextTier : c.tier }),
     chip: s.claim === 'claiming'
-      ? { tone: 'neutral' as const, label: 'Claiming…' }
+      ? { tone: 'neutral' as const, label: c.claimingLabel }
       : s.unlocked
-        ? { tone: 'success' as const, label: claimed ? 'Claimed' : 'Unlocked' }
-        : { tone: 'neutral' as const, label: 'In progress' },
-    footerHint: claimed ? c.claimedHint : `${amount(left, p)}${unit(p)}${s.unlocked ? ` to ${c.nextTier}` : ' more to unlock'}`,
-    shareLabel: s.shared ? 'Link copied' : 'Share',
-    primaryLabel: s.claim === 'claiming' ? 'Claiming…' : claimed ? 'Claimed' : s.claim === 'failed' ? c.retryLabel : c.primaryLabel,
+        ? { tone: 'success' as const, label: claimed ? c.claimedLabel : c.unlockedChipLabel }
+        : { tone: 'neutral' as const, label: c.inProgressChipLabel },
+    footerHint: claimed
+      ? c.claimedHint
+      : fill(s.unlocked ? c.toNextTierTemplate : c.moreToUnlockTemplate, { amount: amount(left, p), unit: u, tier: c.nextTier }),
+    shareLabel: s.shared ? c.sharedLabel : c.shareLabel,
+    primaryLabel: s.claim === 'claiming' ? c.claimingLabel : claimed ? c.claimedLabel : s.claim === 'failed' ? c.retryLabel : c.primaryLabel,
     canClaim: s.unlocked && s.claim !== 'claiming' && s.claim !== 'claimed',
     scene: (s.claim !== 'idle' ? s.claim : s.shared ? 'shared' : s.unlocked ? 'unlocked' : 'inProgress') as AchievementScene,
   };

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

@@ -1,6 +1,8 @@
 {
   "component": "achievement",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -29,6 +31,21 @@
     "state": "unlocked",
     "primaryLabel": "Claim reward",
     "claimedHint": "Reward added · see Billing",
+    "progressWordsTemplate": "{current} of {target}{unit}",
+    "progressToTemplate": "Progress to {tier}",
+    "rewardLabel": "Reward",
+    "lockedRewardLabel": "Reward when unlocked",
+    "lockedLine": "Not unlocked yet",
+    "unlockedChipLabel": "Unlocked",
+    "inProgressChipLabel": "In progress",
+    "claimingLabel": "Claiming…",
+    "claimedLabel": "Claimed",
+    "toNextTierTemplate": "{amount}{unit} to {tier}",
+    "moreToUnlockTemplate": "{amount}{unit} more to unlock",
+    "shareLabel": "Share",
+    "sharedLabel": "Link copied",
+    "claimFailedTitle": "Couldn’t claim your reward",
+    "claimFailedBody": "Nothing was lost. Retry in a moment.",
     "emptyTitle": "No achievements yet",
     "emptyBody": "Finish a few tasks to earn your first one.",
     "emptyCta": "See how it works"

package/src/components/onboarding/activity-heatmap/ActivityHeatmapView.tsx

@@ -3,7 +3,7 @@ import { ScrollView, View } from 'react-native';
 import { Box, Icon, Pressable, Text } from '../../../core';
 import { Button } from '../../../ds';
 import { HUE, blockRadii, hueForType, 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 { OnboardingOutcome } from '../shared/mock';
 import type { OnboardingOperation } from '../shared/mock';
 import { InvalidConfig } from '../shared/InvalidConfig';
@@ -12,13 +12,13 @@ import { usePatternStatus, useSceneReport } from '../shared/runtime';
 import { guarded } from '../shared/guard';
 import { PlainChip } from '../shared/parts';
 import { ApricotAlert } from '../shared/insight-parts';
-import { countOf, longDay, parseDay, rampOf, shortDay } from '../shared/insight';
+import { rampOf } from '../shared/insight';
 import { M15, progress } from '../shared/m15';
 import { DataTip, useInView, useRevealClock } from '../shared/viz';
 import { useOperationRunner } from '../../../runtime/operations';
 import { HEATMAP_PRESETS, validateHeatmap, type HeatmapItem, type HeatmapReveal, type HeatmapSettings } from './contract';
 import {
-  HEAT_REVEAL_END, LEVEL_CHIP, cellDelay, comparedToAverage, headerTotal, heatModel, heatmapSeed, initialHeatmap, levelRanges, moveFocus, peakText,
+  HEAT_REVEAL_END, cellDelay, comparedToAverage, headerTotal, heatModel, heatmapCount, heatmapLevelChip, heatmapLongDay, heatmapSeed, heatmapShortDay, initialHeatmap, levelRanges, moveFocus, peakText,
   type HeatCell, type HeatSeed,
 } from './engine';
 
@@ -174,11 +174,14 @@ function Valid({
   useSceneReport(pattern.status === 'ready' ? (seed.loadReady ? 'loadReady' : popCell ? (popCell.count ? 'popover' : 'zeroDay') : 'default') : pattern.status, onScene);
 
   const noun = config.noun, one = config.nounOne;
-  const ranges = levelRanges(m, noun, one);
+  const count = (n: number) => heatmapCount(n, noun, one, config);
+  const longDay = (tm: number) => heatmapLongDay(tm, config);
+  const shortDay = (tm: number) => heatmapShortDay(tm, config);
+  const ranges = levelRanges(m, noun, one, config);
   const meta = (
     <Box row align="center" gap="s2" style={{ flexWrap: 'wrap', justifyContent: 'flex-end' }}>
       <PlainChip>{config.periodLabel}</PlainChip>
-      <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{headerTotal(m, noun, one)}</Text>
+      <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{headerTotal(m, noun, one, config)}</Text>
     </Box>
   );
 
@@ -190,7 +193,7 @@ function Valid({
     const colourIn = clock.done ? 1 : intensity ? progress(t, delay, 200) : 1;
     const shownQ = intensity ? 1 : q;
     const popped = pop?.index === i;
-    const label = `${longDay(c.t)} · ${c.future ? 'upcoming' : countOf(c.count, noun, one)}${c.today ? ' · today' : ''}`;
+    const label = `${longDay(c.t)} · ${c.future ? config.upcomingText : count(c.count)}${c.today ? ` · ${config.todayText}` : ''}`;
     return (
       <View key={c.key} style={{ width: CELL, height: CELL, zIndex: popped ? 3 : 0 }}>
         <Pressable
@@ -232,16 +235,16 @@ function Valid({
   return (
     <OnboardingCard testID={testID} header={config} copy={config} density={density} status={pattern.status} onRetry={pattern.retry} onEmptyAction={pattern.retry} meta={meta} metaWraps>
       <View ref={ref} style={{ opacity: clock.reduced ? clock.fade : 1, gap: 14 }}>
-        <View role={'list' as never} aria-label="Stats" style={{ flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 14, gap: 12, borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken }}>
+        <View role={'list' as never} aria-label={config.statsLabel} style={{ flexDirection: 'row', paddingVertical: 12, paddingHorizontal: 14, gap: 12, borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken }}>
           {[
-            ['Daily avg', stat(m.avg).toFixed(1), null],
-            ['Peak', m.peakDate ? `${Math.round(stat(m.peak))} on ${shortDay(parseDay(m.peakDate))}` : peakText(m), null],
-            ['Streak', `${Math.round(stat(m.streak))}d`, `best ${Math.round(stat(m.best))}d`],
-          ].map(([dt, dd, extra]) => (
-            <View key={dt as string} role={'listitem' as never} style={{ flex: 1, minWidth: 0, gap: 2 }}>
+            [config.dailyAvgLabel, stat(m.avg).toFixed(1), null],
+            [config.peakLabel, peakText(m, config, Math.round(stat(m.peak))), null],
+            [config.streakLabel, fill(config.streakText, { days: Math.round(stat(m.streak)) }), fill(config.bestStreakText, { days: Math.round(stat(m.best)) })],
+          ].map(([dt, dd, extra], k) => (
+            <View key={k} role={'listitem' as never} style={{ flex: 1, minWidth: 0, gap: 2 }}>
               <Text style={{ fontSize: 12, color: colors.textSecondary }}>{dt as string}</Text>
               <Box row align="center" gap="s1" style={{ flexWrap: 'wrap' }}>
-                {dt === 'Streak' ? <View aria-hidden><Icon name="flame" size={15} color={colors.textPrimary} /></View> : null}
+                {k === 2 ? <View aria-hidden><Icon name="flame" size={15} color={colors.textPrimary} /></View> : null}
                 <Text numeric style={{ fontSize: 20, fontWeight: '600', letterSpacing: -0.3, color: colors.textPrimary }}>{dd as string}</Text>
                 {extra ? <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{extra as string}</Text> : null}
               </Box>
@@ -253,7 +256,7 @@ function Valid({
           <View style={{ flexDirection: 'row' }}>
             <View aria-hidden style={{ width: LABEL_W, paddingTop: 16 }}>
               {[0, 1, 2, 3, 4, 5, 6].map(r => (
-                <Text key={r} style={{ height: PITCH, fontSize: 10, lineHeight: CELL, color: colors.textSecondary }}>{r % 2 === 0 && r < 6 ? ['Mon', '', 'Wed', '', 'Fri'][r] : ''}</Text>
+                <Text key={r} style={{ height: PITCH, fontSize: 10, lineHeight: CELL, color: colors.textSecondary }}>{r % 2 === 0 && r < 6 ? config.weekdayNames[r] ?? '' : ''}</Text>
               ))}
             </View>
             <ScrollView
@@ -283,7 +286,7 @@ function Valid({
 
           {hovered && !pop ? (
             <View pointerEvents="none" role="tooltip" style={{ position: 'absolute', zIndex: 4, left: Math.max(0, cellX(hover!) - 40), top: hovered.row * PITCH - 16, paddingVertical: 6, paddingHorizontal: 10, borderRadius: blockRadii.inset, backgroundColor: colors.textPrimary, boxShadow: lift2 } as object}>
-              <Text numeric style={{ fontSize: 12, color: colors.surface1 }}>{`${shortDay(hovered.t)} · ${hovered.future ? 'upcoming' : countOf(hovered.count, noun, one)}`}</Text>
+              <Text numeric style={{ fontSize: 12, color: colors.surface1 }}>{`${shortDay(hovered.t)} · ${hovered.future ? config.upcomingText : count(hovered.count)}`}</Text>
             </View>
           ) : null}
 
@@ -299,21 +302,21 @@ function Valid({
                 <Box row align="center" justify="space-between" gap="s2">
                   <View style={{ gap: 2, flexShrink: 1 }}>
                     <Text style={{ fontSize: 13, fontWeight: '600', color: colors.textPrimary }}>{longDay(popCell.t)}</Text>
-                    <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{countOf(popCell.count, noun, one)}</Text>
+                    <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{count(popCell.count)}</Text>
                   </View>
-                  {popCell.level ? <PlainChip height={22}>{String(LEVEL_CHIP[popCell.level])}</PlainChip> : null}
+                  {popCell.level ? <PlainChip height={22}>{heatmapLevelChip(popCell.level, config)}</PlainChip> : null}
                 </Box>
                 {!popCell.count ? (
-                  <Text style={{ fontSize: 13, color: colors.textSecondary }}>{`No ${noun} on this day`}</Text>
+                  <Text style={{ fontSize: 13, color: colors.textSecondary }}>{fill(config.noItemsText, { noun })}</Text>
                 ) : pop.phase === 'loading' ? (
                   <View aria-busy style={{ gap: 8 }}>
                     {[70, 55, 62].map(w => <View key={w} style={{ height: 10, width: `${w}%`, borderRadius: 999, backgroundColor: colors.band }} />)}
                   </View>
                 ) : pop.phase === 'failed' ? (
-                  <ApricotAlert title="Couldn’t load this day" action={<Button variant="secondary" size="xsmall" onPress={() => load(pop.index)}>Retry</Button>} />
+                  <ApricotAlert title={config.dayLoadErrorTitle} action={<Button variant="secondary" size="xsmall" onPress={() => load(pop.index)}>{config.retryLabel}</Button>} />
                 ) : (
                   <>
-                    <View role={'list' as never} aria-label={`${noun} on ${shortDay(popCell.t)}`} style={{ gap: 8 }}>
+                    <View role={'list' as never} aria-label={fill(config.dayItemsLabel, { noun, date: shortDay(popCell.t) })} style={{ gap: 8 }}>
                       {pop.items.map((it, k) => (
                         <View key={k} role={'listitem' as never} style={{ gap: 1 }}>
                           <Text numberOfLines={1} style={{ fontSize: 13, color: colors.textPrimary }}>{it.title}</Text>
@@ -321,8 +324,8 @@ function Valid({
                         </View>
                       ))}
                     </View>
-                    {comparedToAverage(popCell.count, m.avg) ? <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{comparedToAverage(popCell.count, m.avg)}</Text> : null}
-                    <Button variant="secondary" size="small" onPress={() => onOpen?.(popCell.key)}>{`View all ${popCell.count}`}</Button>
+                    {comparedToAverage(popCell.count, m.avg, config) ? <Text numeric style={{ fontSize: 12, color: colors.textSecondary }}>{comparedToAverage(popCell.count, m.avg, config)}</Text> : null}
+                    <Button variant="secondary" size="small" onPress={() => onOpen?.(popCell.key)}>{fill(config.viewAllLabel, { count: popCell.count })}</Button>
                   </>
                 )}
               </View>
@@ -332,15 +335,15 @@ function Valid({
 
         <Box row align="center" justify="space-between" gap="s2" style={{ flexWrap: 'wrap' }}>
           <Box row align="center" gap="s1">
-            <Text style={{ fontSize: 11, color: colors.textSecondary }}>Less</Text>
+            <Text style={{ fontSize: 11, color: colors.textSecondary }}>{config.lessLabel}</Text>
             {ramp.map((col, lv) => (
               <DataTip key={lv} label={ranges[lv]!} style={{ padding: 1 }}>
                 <View style={{ width: CELL, height: CELL, borderRadius: 4, backgroundColor: col }} />
               </DataTip>
             ))}
-            <Text style={{ fontSize: 11, color: colors.textSecondary }}>More</Text>
+            <Text style={{ fontSize: 11, color: colors.textSecondary }}>{config.moreLabel}</Text>
           </Box>
-          <Text style={{ fontSize: 11, color: colors.textSecondary }}>Click a day for details</Text>
+          <Text style={{ fontSize: 11, color: colors.textSecondary }}>{config.legendHint}</Text>
         </Box>
       </View>
     </OnboardingCard>

package/src/components/onboarding/activity-heatmap/contract.ts

@@ -19,7 +19,62 @@ export const HEATMAP_SCENES = ['default', 'popover', 'zeroDay', 'loadReady', 'lo
 export type HeatmapScene = (typeof HEATMAP_SCENES)[number];
 export const HEATMAP_IN_FLIGHT: readonly string[] = [];
 
-export type HeatmapSettings = HeaderConfig & LoadCopy & {
+/**
+ * **Every word the heatmap shows** — rename or translate freely. Templates are filled with `fill()`.
+ * Dates are built from `monthNames` / `weekdayNames`, never from the runtime's locale.
+ */
+export type HeatmapCopy = {
+  /** Twelve short month names, January first — the grid's month row and every date. */
+  monthNames: string[];
+  /** Seven short weekday names, Monday first — the grid's row labels (Mon, Wed, Fri) and every long date. */
+  weekdayNames: string[];
+  /** "{weekday}, {month} {day}" — a day's popover and its cell, read out. */
+  longDayText: string;
+  /** "{month} {day}" — the peak, the tooltip and the popover's list. */
+  shortDayText: string;
+  /** A count with its noun: "{count} {noun}" ("22 reviews"). */
+  countText: string;
+  /** The noun for days: "81 days", "1 day". */
+  dayNoun: string;
+  dayNounOne: string;
+  /** The header's total: "{total} in {days}" ("705 reviews in 81 days"). */
+  headerTotalText: string;
+  /** The stats well: its list read out, then Daily avg, Peak ("{count} on {date}") and Streak ("{days}d", "best {days}d"). */
+  statsLabel: string;
+  dailyAvgLabel: string;
+  peakLabel: string;
+  peakText: string;
+  streakLabel: string;
+  streakText: string;
+  bestStreakText: string;
+  /** A future day, and today, as a cell says them. */
+  upcomingText: string;
+  todayText: string;
+  /** The legend's tooltips: "Level {level} · {range}"; level 0 is "No {noun}", a span "{from}–{to} {noun}". */
+  levelText: string;
+  levelNoneText: string;
+  levelRangeText: string;
+  /** A day's chip, levels 1…4: Quiet day, Below median, Above median, Top 25% day. */
+  levelChipLabels: string[];
+  /** The popover's comparison: "{times}× your daily average", "About your daily average", "Below your daily average". */
+  aboveAverageText: string;
+  aboutAverageText: string;
+  belowAverageText: string;
+  /** A day with nothing: "No {noun} on this day". */
+  noItemsText: string;
+  /** The popover's failed load. Its Retry is `retryLabel`. */
+  dayLoadErrorTitle: string;
+  /** The popover's list, read out: "{noun} on {date}". */
+  dayItemsLabel: string;
+  /** "View all {count}". */
+  viewAllLabel: string;
+  /** The legend's ends and its hint. */
+  lessLabel: string;
+  moreLabel: string;
+  legendHint: string;
+};
+
+export type HeatmapSettings = HeaderConfig & LoadCopy & HeatmapCopy & {
   /** "reviews" / "review". */
   noun: string;
   nounOne: string;
@@ -63,6 +118,13 @@ export function validateHeatmap(c: HeatmapSettings): OnboardingIssue[] {
   }
   if (!(HEATMAP_REVEALS as readonly string[]).includes(c.reveal)) out.push({ path: 'reveal', message: `reveal is ${HEATMAP_REVEALS.join(', ')}.` });
   if (c.today !== null && c.today !== undefined && !Number.isFinite(parseDay(c.today))) out.push({ path: 'today', message: 'today is YYYY-MM-DD, or null for the real today.' });
+  const names = (key: 'monthNames' | 'weekdayNames' | 'levelChipLabels', n: number, what: string) => {
+    const v = c[key] as unknown;
+    if (v !== undefined && !(Array.isArray(v) && v.length === n && v.every(x => typeof x === 'string'))) out.push({ path: key, message: `${key} is ${n} ${what}.` });
+  };
+  names('monthNames', 12, 'month names, January first');
+  names('weekdayNames', 7, 'weekday names, Monday first');
+  names('levelChipLabels', 4, 'chip labels, levels 1 to 4');
   if (c.sample !== undefined && !(Array.isArray(c.sample) && c.sample.every(s => s && typeof s.title === 'string'))) out.push({ path: 'sample', message: 'sample is a list of { title, meta }.' });
   return out;
 }

package/src/components/onboarding/activity-heatmap/engine.ts

@@ -1,8 +1,22 @@
-import { DAY_MS, MONTHS, countOf, dayKey, parseDay, quantile, shortDay, todayKey, weekday } from '../shared/insight';
-import type { HeatmapReveal, HeatmapScene, HeatmapSettings } from './contract';
+import { fill } from '../shared/contract';
+import { DAY_MS, dayKey, parseDay, quantile, todayKey, weekday } from '../shared/insight';
+import { HEATMAP_PRESETS, type HeatmapCopy, type HeatmapReveal, type HeatmapScene, type HeatmapSettings } from './contract';
 
 /** **The Activity Heatmap engine** — pure: the grid, the levels, the stats and the reveal's timing. */
 
+/** The words when a caller gives none — the presets' own (`presets.json` base). */
+const COPY: HeatmapCopy = HEATMAP_PRESETS.base;
+
+/** "Sat, Mar 14" — from the copy's weekday and month names. */
+export const heatmapLongDay = (t: number, c: HeatmapCopy = COPY) =>
+  fill(c.longDayText, { weekday: c.weekdayNames[weekday(t)] ?? '', month: c.monthNames[new Date(t).getUTCMonth()] ?? '', day: new Date(t).getUTCDate() });
+/** "Mar 14" */
+export const heatmapShortDay = (t: number, c: HeatmapCopy = COPY) =>
+  fill(c.shortDayText, { month: c.monthNames[new Date(t).getUTCMonth()] ?? '', day: new Date(t).getUTCDate() });
+/** "22 reviews", "1 review" — grouped figures. */
+export const heatmapCount = (n: number, noun: string, one: string, c: HeatmapCopy = COPY) =>
+  fill(c.countText, { count: Math.round(n).toLocaleString('en-US'), noun: Math.round(n) === 1 ? one : noun });
+
 export type HeatCell = {
   key: string; t: number; col: number; row: number;
   /** Inside the range (a cell outside it is not drawn). */
@@ -77,40 +91,45 @@ export function heatModel(c: HeatmapSettings, today = c.today ?? todayKey()): He
   for (let col = 0; col < cols; col++) {
     const m = new Date(g0 + (col * 7 + 6) * DAY_MS).getUTCMonth();
     const prev = col ? new Date(g0 + ((col - 1) * 7 + 6) * DAY_MS).getUTCMonth() : -1;
-    if (m !== prev) months.push({ col, label: MONTHS[m]! });
+    if (m !== prev) months.push({ col, label: (c.monthNames ?? COPY.monthNames)[m] ?? '' });
   }
   return { cells, cols, days: n, total, active: nz.length, avg: n ? total / n : 0, peak, peakDate, zeroDate, streak: run, best, q, min: nz[0] ?? 0, max: nz[nz.length - 1] ?? 0, months };
 }
 
 /** The legend's ranges — "Level 3 · 8–14 reviews". Level 0 is "No reviews". */
-export function levelRanges(m: HeatModel, noun: string, one: string): string[] {
-  const span = (a: number, b: number) => (a >= b ? countOf(b, noun, one) : `${a}–${b} ${noun}`);
+export function levelRanges(m: HeatModel, noun: string, one: string, c: HeatmapCopy = COPY): string[] {
+  const span = (a: number, b: number) => (a >= b ? heatmapCount(b, noun, one, c) : fill(c.levelRangeText, { from: a, to: b, noun }));
+  const level = (n: number, range: string) => fill(c.levelText, { level: n, range });
   return [
-    `Level 0 · No ${noun}`,
-    `Level 1 · ${span(m.min, m.q[0])}`,
-    `Level 2 · ${span(m.q[0] + 1, m.q[1])}`,
-    `Level 3 · ${span(m.q[1] + 1, m.q[2])}`,
-    `Level 4 · ${span(m.q[2] + 1, m.max)}`,
+    level(0, fill(c.levelNoneText, { noun })),
+    level(1, span(m.min, m.q[0])),
+    level(2, span(m.q[0] + 1, m.q[1])),
+    level(3, span(m.q[1] + 1, m.q[2])),
+    level(4, span(m.q[2] + 1, m.max)),
   ];
 }
 
-/** A day's chip: Top 25% day, Above median, Below median, Quiet day. */
-export const LEVEL_CHIP = ['', 'Quiet day', 'Below median', 'Above median', 'Top 25% day'] as const;
+/** A day's chip, by level (0 has none): Quiet day, Below median, Above median, Top 25% day. */
+export const heatmapLevelChip = (level: number, c: HeatmapCopy = COPY) => (level > 0 ? c.levelChipLabels[level - 1] ?? '' : '');
+/** The default chips, level 0 first (''). Prefer `levelChip`, which reads the config. */
+export const LEVEL_CHIP: readonly string[] = ['', ...COPY.levelChipLabels];
 
 /** "2.8× your daily average" — or "About your daily average", or "Below your daily average". */
-export function comparedToAverage(count: number, avg: number): string {
+export function comparedToAverage(count: number, avg: number, c: HeatmapCopy = COPY): string {
   if (!avg) return '';
   const x = count / avg;
-  if (x >= 1.15) return `${x.toFixed(1)}× your daily average`;
-  if (x >= 0.85) return 'About your daily average';
-  return 'Below your daily average';
+  if (x >= 1.15) return fill(c.aboveAverageText, { times: x.toFixed(1) });
+  if (x >= 0.85) return c.aboutAverageText;
+  return c.belowAverageText;
 }
 
-/** "22 on Mar 14" */
-export const peakText = (m: HeatModel) => (m.peakDate ? `${m.peak} on ${shortDay(parseDay(m.peakDate))}` : '—');
+/** "22 on Mar 14" — `count` is the peak, or a value on its way to it. */
+export const peakText = (m: HeatModel, c: HeatmapCopy = COPY, count: number = m.peak) =>
+  (m.peakDate ? fill(c.peakText, { count, date: heatmapShortDay(parseDay(m.peakDate), c) }) : '—');
 
 /** "705 reviews in 81 days" — the days with activity. */
-export const headerTotal = (m: HeatModel, noun: string, one: string) => `${countOf(m.total, noun, one)} in ${countOf(m.active, 'days', 'day')}`;
+export const headerTotal = (m: HeatModel, noun: string, one: string, c: HeatmapCopy = COPY) =>
+  fill(c.headerTotalText, { total: heatmapCount(m.total, noun, one, c), days: heatmapCount(m.active, c.dayNoun, c.dayNounOne, c) });
 
 /**
  * **The reveal (all within 900ms)**. `sweep`: by column. `diagonal`: by column + row. `intensity`:

package/src/components/onboarding/activity-heatmap/index.ts

@@ -1,9 +1,10 @@
 export {
   HEATMAP_IN_FLIGHT, HEATMAP_PRESETS, HEATMAP_REVEALS, HEATMAP_SCENES, validateHeatmap,
-  type HeatmapDay, type HeatmapItem, type HeatmapReveal, type HeatmapScene, type HeatmapSettings,
+  type HeatmapCopy, type HeatmapDay, type HeatmapItem, type HeatmapReveal, type HeatmapScene, type HeatmapSettings,
 } from './contract';
 export {
-  HEAT_REVEAL_END, LEVEL_CHIP, cellDelay, comparedToAverage, dayCounts, headerTotal, heatModel, heatmapSeed, initialHeatmap, levelRanges, moveFocus, peakText, rangeOf,
+  HEAT_REVEAL_END, LEVEL_CHIP, cellDelay, comparedToAverage, dayCounts, headerTotal, heatModel, heatmapCount, heatmapLevelChip, heatmapLongDay, heatmapSeed, heatmapShortDay, initialHeatmap, levelRanges,
+  moveFocus, peakText, rangeOf,
   type HeatCell, type HeatModel, type HeatSeed, type HeatState,
 } from './engine';
 export { ActivityHeatmap, type ActivityHeatmapProps, type HeatmapOperations } from './ActivityHeatmapView';

package/src/components/onboarding/activity-heatmap/presets.json

@@ -1,6 +1,8 @@
 {
   "component": "activity-heatmap",
   "baseCopy": {
+    "loadingLabel": "Loading {title}",
+    "attentionLabel": "Needs attention",
     "loadErrorTitle": "Couldn’t load this step",
     "loadErrorBody": "Nothing was lost. Retry to load it again.",
     "retryLabel": "Retry",
@@ -405,6 +407,63 @@
         "meta": "4★ · Leather belt"
       }
     ],
+    "monthNames": [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ],
+    "weekdayNames": [
+      "Mon",
+      "Tue",
+      "Wed",
+      "Thu",
+      "Fri",
+      "Sat",
+      "Sun"
+    ],
+    "longDayText": "{weekday}, {month} {day}",
+    "shortDayText": "{month} {day}",
+    "countText": "{count} {noun}",
+    "dayNoun": "days",
+    "dayNounOne": "day",
+    "headerTotalText": "{total} in {days}",
+    "statsLabel": "Stats",
+    "dailyAvgLabel": "Daily avg",
+    "peakLabel": "Peak",
+    "peakText": "{count} on {date}",
+    "streakLabel": "Streak",
+    "streakText": "{days}d",
+    "bestStreakText": "best {days}d",
+    "upcomingText": "upcoming",
+    "todayText": "today",
+    "levelText": "Level {level} · {range}",
+    "levelNoneText": "No {noun}",
+    "levelRangeText": "{from}–{to} {noun}",
+    "levelChipLabels": [
+      "Quiet day",
+      "Below median",
+      "Above median",
+      "Top 25% day"
+    ],
+    "aboveAverageText": "{times}× your daily average",
+    "aboutAverageText": "About your daily average",
+    "belowAverageText": "Below your daily average",
+    "noItemsText": "No {noun} on this day",
+    "dayLoadErrorTitle": "Couldn’t load this day",
+    "dayItemsLabel": "{noun} on {date}",
+    "viewAllLabel": "View all {count}",
+    "lessLabel": "Less",
+    "moreLabel": "More",
+    "legendHint": "Click a day for details",
     "emptyTitle": "No reviews in this period",
     "emptyBody": "Try a longer range, or check back once reviews come in.",
     "emptyCta": "Show all time"

package/src/components/onboarding/brand-kit/BrandKitView.tsx

@@ -81,11 +81,23 @@ function Valid({
       <Box style={{ gap }}>
         <Box gap="s2">
           <Box row justify="space-between" gap="s2" wrap>
-            <FieldLabel>Logo</FieldLabel>
+            <FieldLabel>{config.logoLabel}</FieldLabel>
             <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{v.dropHint}</Text>
           </Box>
           <Dropzone
-            label="Logo"
+            label={config.logoLabel}
+            copy={{
+              empty: config.dropEmptyText,
+              dragOver: config.dropDragOverText,
+              uploading: config.dropUploadingText,
+              uploaded: config.dropUploadedText,
+              wrongType: config.dropWrongTypeText,
+              tooLarge: config.dropTooLargeText,
+              chooseAnother: config.dropChooseAnotherLabel,
+              replace: config.dropReplaceLabel,
+              remove: config.dropRemoveLabel,
+              cancel: config.dropCancelLabel,
+            }}
             value={s.file}
             accept={config.accept}
             maxSizeMB={config.maxSizeMB}
@@ -106,6 +118,7 @@ function Valid({
                 label={label}
                 showLabel
                 fluid
+                message={config.hexErrorText}
                 value={s.valid[i] ?? (isHex(s.colors[i]) ? s.colors[i]! : colors.surface1)}
                 text={s.colors[i] ?? ''}
                 touched={s.touched[i]}
@@ -116,9 +129,9 @@ function Valid({
             </Box>
           ))}
           <Box gap="s1" style={{ flexGrow: 1, flexBasis: 150, minWidth: 0 }}>
-            <FieldLabel>Font</FieldLabel>
+            <FieldLabel>{config.fontLabel}</FieldLabel>
             <Select
-              aria-label="Font"
+              aria-label={config.fontLabel}
               value={s.font}
               onChange={font => rt.dispatch({ type: 'font', font })}
               options={config.fontOptions.map(f => ({ value: f, label: f }))}

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

@@ -45,6 +45,39 @@ export type BrandKitSettings = HeaderConfig & LoadCopy & {
   savedHint: string;
   saveErrorTitle: string;
   saveErrorBody: string;
+  /** The header chip before anything is saved. */
+  draftLabel: string;
+  /** The logo field's label and accessible name. */
+  logoLabel: string;
+  /** The font select's label and accessible name. */
+  fontLabel: string;
+  /** The line beside the logo label: `{types}` are the accepted types, `{size}` is `maxSizeMB`. */
+  dropHintTemplate: string;
+  /** Joins the last two file types in `{types}` — "SVG or PNG". */
+  fileTypesOrText: string;
+  /** The demo logo's file name, without the extension: `{brand}` is the brand name as a slug. */
+  demoFileNameTemplate: string;
+  /** A colour field's message once touched and invalid. */
+  hexErrorText: string;
+  /** Footer hints, by state. `{color}` is the first colour field's label, lower-cased. */
+  savingHint: string;
+  failedHint: string;
+  uploadingHint: string;
+  needLogoAndColorHint: string;
+  needLogoHint: string;
+  needColorHint: string;
+  readyHint: string;
+  /** The Dropzone's words. `{max}` in `dropTooLargeText` is `maxSizeMB`. */
+  dropEmptyText: string;
+  dropDragOverText: string;
+  dropUploadingText: string;
+  dropUploadedText: string;
+  dropWrongTypeText: string;
+  dropTooLargeText: string;
+  dropChooseAnotherLabel: string;
+  dropReplaceLabel: string;
+  dropRemoveLabel: string;
+  dropCancelLabel: string;
 };
 
 export const BRAND_PRESETS = presetsJson as unknown as PresetsFile<BrandKitSettings>;
@@ -69,6 +102,9 @@ export function validateBrandKit(c: BrandKitSettings): OnboardingIssue[] {
   if (!Array.isArray(c.accept) || !c.accept.length) issues.push({ path: 'accept', message: 'Name at least one file type.' });
   if (!(c.maxSizeMB > 0)) issues.push({ path: 'maxSizeMB', message: 'maxSizeMB must be more than 0.' });
   if (!Array.isArray(c.fontOptions) || !c.fontOptions.length) issues.push({ path: 'fontOptions', message: 'Offer at least one font.' });
+  if (!Array.isArray(c.demoColors) || !c.demoColors.every(isHex)) issues.push({ path: 'demoColors', message: 'Each demo colour must be a 6-digit hex code, # then six digits or A–F.' });
+  const lastValid = c.defaults?.lastValid;
+  if (lastValid !== undefined && (!Array.isArray(lastValid) || !lastValid.every(v => v === null || isHex(v)))) issues.push({ path: 'defaults.lastValid', message: 'Each last valid colour must be a 6-digit hex, or null.' });
   if (!['appbar', 'email', 'login', 'invoice', 'ticket'].includes(c.previewKind)) issues.push({ path: 'previewKind', message: `“${c.previewKind}” is not a preview.` });
   return issues;
 }