@usequeek/theme-kit 0.1.20 → 0.1.21

package/tests/display-format.test.ts

@@ -1,7 +1,9 @@
 import { readFileSync, readdirSync, statSync } from 'node:fs';
 import { join, relative, resolve } from 'node:path';
 import { describe, expect, it } from 'vitest';
-import { DISPLAY_LOCALE, DISPLAY_TIME_ZONE, formatCount, formatDisplayDate, formatMoney } from '../utils/format';
+import { DISPLAY_LOCALE, DISPLAY_TIME_ZONE, formatCount, formatDisplayDate, formatMoney, formatRelativeTime, formatShopperDate } from '../utils/format';
+import { ENGLISH_DISPLAY_LOCALE, resolveIntlLocale, resolveSupportedLocale } from '../utils/locale';
+import { formatThemeDate, formatThemeMoney, formatThemeNumber, formatThemeRelativeTime } from '../strings/theme-strings';
 
 /**
  * Storefront pages render on the server first. A date formatted with the
@@ -23,7 +25,11 @@ describe('display formatting is the same on the server and in the browser', () =
     // browser (Lagos) used to print different days for this review.
     expect(formatDisplayDate('2026-02-14T23:30:00Z')).toBe('15 Feb 2026');
     expect(formatDisplayDate('2026-02-14', {})).toBe('14/02/2026');
-    expect(formatDisplayDate('2026-02-14T23:30:00Z', { year: 'numeric', month: 'long', day: 'numeric' }, 'en-US')).toBe('February 15, 2026');
+    // Founder 2/10/26: English is British/Nigerian order, never US order — the
+    // locale parameter is routed through resolveIntlLocale, so even an explicit
+    // 'en'/'en-US' renders "15 February 2026" (was "February 15, 2026" before).
+    expect(formatDisplayDate('2026-02-14T23:30:00Z', { year: 'numeric', month: 'long', day: 'numeric' }, 'en-US')).toBe('15 February 2026');
+    expect(formatDisplayDate('2026-02-14T23:30:00Z', { year: 'numeric', month: 'long', day: 'numeric' }, 'en')).toBe('15 February 2026');
     expect(formatDisplayDate('not a date')).toBe('');
   });
 
@@ -47,3 +53,359 @@ describe('display formatting is the same on the server and in the browser', () =
     expect(offenders).toEqual([]);
   });
 });
+
+/**
+ * Founder 2/10/26: dates and numbers follow the SHOPPER's locale, with
+ * English in the British/Nigerian style so English stores do not change
+ * visibly ("2 October 2026", never US "October 2, 2026").
+ */
+describe('canonical locale mapping (shopper locale -> Intl locale)', () => {
+  const LONG_LAGOS = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'Africa/Lagos' } as const;
+
+  it('maps every English variant and every missing/invalid code to en-NG', () => {
+    expect(ENGLISH_DISPLAY_LOCALE).toBe('en-NG');
+    expect(DISPLAY_LOCALE).toBe(ENGLISH_DISPLAY_LOCALE);
+    for (const locale of [null, undefined, 'en', 'en-GB', 'en-NG', 'en-US', 'not a locale!!', '']) {
+      expect(resolveIntlLocale(locale), String(locale)).toBe('en-NG');
+    }
+  });
+
+  it('passes every other well-formed code through unchanged', () => {
+    for (const code of ['fr', 'ar', 'pt-BR', 'zh-CN', 'yo', 'ha', 'sw', 'es', 'de', 'ig']) {
+      expect(resolveIntlLocale(code)).toBe(code);
+    }
+  });
+
+  it('evidence: en-NG is the mapping that reproduces current English output byte for byte', () => {
+    // Dates are identical under en-GB and en-NG …
+    expect(new Date('2026-10-02T10:00:00Z').toLocaleDateString('en-GB', { ...LONG_LAGOS })).toBe('2 October 2026');
+    expect(new Date('2026-10-02T10:00:00Z').toLocaleDateString('en-NG', { ...LONG_LAGOS })).toBe('2 October 2026');
+    // … but money is NOT: only en-NG keeps the naira sign the stores show.
+    expect(
+      new Intl.NumberFormat('en-NG', { style: 'currency', currency: 'NGN', minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(12500),
+    ).toBe('₦12,500');
+    expect(
+      new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'NGN', minimumFractionDigits: 0, maximumFractionDigits: 2 }).format(12500),
+    ).not.toBe('₦12,500');
+    // So the mapping pins the sign the pinned tests assert.
+    expect(formatMoney(12500)).toBe('₦12,500');
+  });
+
+  it('falls back to English when the runtime ICU lacks the locale, and never throws', () => {
+    expect(resolveSupportedLocale('fr', (l) => Intl.DateTimeFormat.supportedLocalesOf(l))).toBe('fr');
+    expect(resolveSupportedLocale('xx', (l) => Intl.DateTimeFormat.supportedLocalesOf(l))).toBe('en-NG');
+    expect(resolveSupportedLocale('fr', () => { throw new Error('no ICU'); })).toBe('en-NG');
+  });
+});
+
+describe('English output is byte-identical with or without a locale', () => {
+  const LONG_LAGOS: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'Africa/Lagos' };
+
+  it('format.ts helpers render the pinned strings for null/en', () => {
+    for (const locale of [undefined, null, 'en'] as const) {
+      expect(formatShopperDate('2026-02-14T10:00:00Z', locale)).toBe('14 Feb 2026');
+      expect(formatShopperDate('2026-02-14T23:30:00Z', locale, LONG_LAGOS)).toBe('15 February 2026');
+      expect(formatCount(1234567, locale)).toBe('1,234,567');
+      expect(formatMoney(12500, 'NGN', locale)).toBe('₦12,500');
+      expect(formatMoney(0.28, 'NGN', locale)).toBe('₦0.28');
+      expect(formatRelativeTime(-1, 'day', locale)).toBe('yesterday');
+    }
+    expect(formatRelativeTime(-3, 'day')).toBe('3 days ago');
+  });
+
+  it('formatTheme* helpers render English in the British/Nigerian style', () => {
+    for (const locale of [undefined, null, 'en'] as const) {
+      expect(formatThemeNumber(1234567, locale)).toBe('1,234,567');
+      expect(formatThemeDate('2026-02-14T23:30:00Z', locale, LONG_LAGOS)).toBe('15 February 2026');
+      expect(formatThemeMoney(5000, 'NGN', locale)).toBe('₦5,000.00');
+      expect(formatThemeRelativeTime(-1, 'day', locale)).toBe('yesterday');
+    }
+  });
+});
+
+describe('shopper locales format through real Intl output', () => {
+  const LONG_LAGOS: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'Africa/Lagos' };
+  const dateSupported = (code: string): boolean => {
+    try {
+      return Intl.DateTimeFormat.supportedLocalesOf([code]).length > 0;
+    } catch {
+      return false;
+    }
+  };
+  const numberSupported = (code: string): boolean => {
+    try {
+      return Intl.NumberFormat.supportedLocalesOf([code]).length > 0;
+    } catch {
+      return false;
+    }
+  };
+  const relativeSupported = (code: string): boolean => {
+    try {
+      return Intl.RelativeTimeFormat.supportedLocalesOf([code]).length > 0;
+    } catch {
+      return false;
+    }
+  };
+
+  // Observed on Node 22 (full ICU) 2/10/26; each row falls back to the
+  // English style when the runtime's ICU lacks the locale.
+  it.each([
+    ['fr', '15 février 2026'],
+    ['ar', '15 فبراير 2026'],
+    ['pt-BR', '15 de fevereiro de 2026'],
+    ['zh-CN', '2026年2月15日'],
+    ['yo', '15 Oṣù Èrèlè 2026'],
+    ['ha', '15 Faburairu, 2026'],
+    ['sw', '15 Februari 2026'],
+  ])('long date in %s (Lagos day boundary preserved)', (code, native) => {
+    expect(formatThemeDate('2026-02-14T23:30:00Z', code, LONG_LAGOS)).toBe(
+      dateSupported(code) ? native : '15 February 2026',
+    );
+    // Same through the fixed-zone display path post-meta uses.
+    expect(formatShopperDate('2026-02-14T23:30:00Z', code, LONG_LAGOS)).toBe(
+      dateSupported(code) ? native : '15 February 2026',
+    );
+  });
+
+  it.each([
+    ['fr', '14 févr. 2026'],
+    ['ar', '14 فبراير 2026'],
+    ['pt-BR', '14 de fev. de 2026'],
+    ['zh-CN', '2026年2月14日'],
+    ['yo', '14 Oṣù Èrèlè 2026'],
+    ['ha', '14 Fab, 2026'],
+    ['sw', '14 Feb 2026'],
+  ])('short date in %s', (code, native) => {
+    expect(formatShopperDate('2026-02-14T10:00:00Z', code)).toBe(
+      dateSupported(code) ? native : '14 Feb 2026',
+    );
+  });
+
+  it.each([
+    ['fr', '1\u202f234\u202f567'],
+    ['ar', '1,234,567'],
+    ['pt-BR', '1.234.567'],
+    ['zh-CN', '1,234,567'],
+    ['yo', '1,234,567'],
+    ['ha', '1,234,567'],
+    ['sw', '1,234,567'],
+  ])('grouped count in %s', (code, native) => {
+    expect(formatThemeNumber(1234567, code)).toBe(numberSupported(code) ? native : '1,234,567');
+    expect(formatCount(1234567, code)).toBe(numberSupported(code) ? native : '1,234,567');
+  });
+
+  it('money follows the shopper locale, English keeps the naira sign', () => {
+    expect(formatThemeMoney(12500, 'NGN', 'fr')).toBe(
+      numberSupported('fr') ? '12\u202f500,00\u00a0NGN' : '₦12,500.00',
+    );
+    expect(formatMoney(12500, 'NGN', 'fr')).toBe(
+      numberSupported('fr') ? '12\u202f500\u00a0NGN' : '₦12,500',
+    );
+  });
+
+  it.each([
+    ['fr', 'hier'],
+    ['ar', 'أمس'],
+    ['pt-BR', 'ontem'],
+    ['zh-CN', '昨天'],
+    ['yo', 'Àná'],
+    ['ha', 'jiya'],
+    ['sw', 'jana'],
+  ])('relative yesterday in %s', (code, native) => {
+    expect(formatThemeRelativeTime(-1, 'day', code)).toBe(
+      relativeSupported(code) ? native : 'yesterday',
+    );
+    expect(formatRelativeTime(-1, 'day', code)).toBe(
+      relativeSupported(code) ? native : 'yesterday',
+    );
+  });
+
+  it('an unknown but well-formed locale renders English and never throws', () => {
+    expect(formatThemeNumber(1234567, 'xx')).toBe('1,234,567');
+    expect(formatThemeDate('2026-02-14T23:30:00Z', 'xx', LONG_LAGOS)).toBe('15 February 2026');
+    expect(formatThemeMoney(12500, 'NGN', 'xx')).toBe('₦12,500.00');
+    expect(formatThemeRelativeTime(-1, 'day', 'xx')).toBe('yesterday');
+    expect(formatCount(1234567, 'xx')).toBe('1,234,567');
+    expect(formatShopperDate('2026-02-14T10:00:00Z', 'xx')).toBe('14 Feb 2026');
+    expect(formatMoney(12500, 'NGN', 'xx')).toBe('₦12,500');
+    expect(formatRelativeTime(-1, 'day', 'xx')).toBe('yesterday');
+  });
+
+  it('invalid dates are handled as before in every locale', () => {
+    expect(formatThemeDate('not a date', 'fr')).toBe('');
+    expect(formatShopperDate('not a date', 'fr')).toBe('');
+    expect(formatThemeDate('not a date', null)).toBe('');
+  });
+});
+
+describe('no kit source hardcodes an English locale into a formatter', () => {
+  it('every date/number/relative call goes through the canonical mapping', () => {
+    const ROOT = resolve(__dirname, '..');
+    const walk = (dir: string): string[] => readdirSync(dir).flatMap((entry) => {
+      const path = join(dir, entry);
+      if (entry === 'node_modules' || entry === 'tests' || entry.startsWith('.')) return [];
+      if (statSync(path).isDirectory()) return walk(path);
+      return /\.(ts|tsx)$/.test(entry) ? [path] : [];
+    });
+    const offenders = walk(ROOT).flatMap((file) => {
+      const source = readFileSync(file, 'utf8');
+      const hits: string[] = [];
+      // A literal English tag handed straight to a formatter bypasses the
+      // shopper locale — use resolveIntlLocale (or a resolved tag) instead.
+      if (/\.toLocale(?:Date|Time)?String\(\s*['"]en(-[A-Za-z]+)?['"]/.test(source)) hits.push('toLocale*');
+      if (/new Intl\.(?:DateTimeFormat|NumberFormat|RelativeTimeFormat)\(\s*['"]en(-[A-Za-z]+)?['"]/.test(source)) hits.push('new Intl*');
+      return hits.length > 0 ? [`${relative(ROOT, file)}: ${hits.join(',')}`] : [];
+    });
+    expect(offenders).toEqual([]);
+  });
+});
+
+describe("no exported formatter lets an 'en*' tag reach Intl unmapped", () => {
+  const LONG_LAGOS: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'Africa/Lagos' };
+
+  it("explicit 'en'/'en-US' renders British order through every formatter", () => {
+    for (const locale of ['en', 'en-US'] as const) {
+      expect(formatDisplayDate('2026-02-14T23:30:00Z', LONG_LAGOS, locale)).toBe('15 February 2026');
+      expect(formatShopperDate('2026-02-14T23:30:00Z', locale, LONG_LAGOS)).toBe('15 February 2026');
+      expect(formatCount(1234567, locale)).toBe('1,234,567');
+      expect(formatMoney(12500, 'NGN', locale)).toBe('₦12,500');
+      expect(formatRelativeTime(-1, 'day', locale)).toBe('yesterday');
+      expect(formatThemeNumber(1234567, locale)).toBe('1,234,567');
+      expect(formatThemeDate('2026-02-14T23:30:00Z', locale, LONG_LAGOS)).toBe('15 February 2026');
+      expect(formatThemeMoney(5000, 'NGN', locale)).toBe('₦5,000.00');
+      expect(formatThemeRelativeTime(-1, 'day', locale)).toBe('yesterday');
+    }
+  });
+
+  it("constructor call sites receive the mapped tag, never bare 'en'/'en-US'", () => {
+    // Date/Number.prototype.toLocale* use V8 intrinsics and bypass a patched
+    // global (verified live on this Node), so this spy covers only the
+    // `new Intl.*` call sites; the toLocale* sites are pinned behaviorally above.
+    const seen: string[] = [];
+    const originals = {
+      DateTimeFormat: Intl.DateTimeFormat,
+      NumberFormat: Intl.NumberFormat,
+      RelativeTimeFormat: Intl.RelativeTimeFormat,
+    };
+    const box = Intl as unknown as Record<string, unknown>;
+    const wrap = (kind: string, Orig: new (...args: never[]) => object) => {
+      box[kind] = function (this: unknown, ...args: unknown[]) {
+        seen.push(typeof args[0] === 'string' ? args[0] : JSON.stringify(args[0]));
+        return new Orig(...(args as never[]));
+      };
+    };
+    wrap('DateTimeFormat', originals.DateTimeFormat as new (...args: never[]) => object);
+    wrap('NumberFormat', originals.NumberFormat as new (...args: never[]) => object);
+    wrap('RelativeTimeFormat', originals.RelativeTimeFormat as new (...args: never[]) => object);
+    try {
+      formatThemeNumber(1234567, 'en-US');
+      formatThemeDate('2026-02-14T12:00:00Z', 'en-US');
+      formatThemeMoney(5000, 'NGN', 'en-US');
+      formatThemeRelativeTime(-1, 'day', 'en-US');
+      formatMoney(5000, 'NGN', 'en-US');
+      formatRelativeTime(-1, 'day', 'en-US');
+    } finally {
+      box.DateTimeFormat = originals.DateTimeFormat;
+      box.NumberFormat = originals.NumberFormat;
+      box.RelativeTimeFormat = originals.RelativeTimeFormat;
+    }
+    expect(seen.length).toBeGreaterThan(0);
+    expect(seen).toEqual(seen.map(() => 'en-NG'));
+  });
+
+  it('formatDisplayDate routes its locale parameter through resolveIntlLocale', () => {
+    const source = readFileSync(resolve(__dirname, '..', 'utils', 'format.ts'), 'utf8');
+    expect(source).toContain('date.toLocaleDateString(resolveIntlLocale(locale)');
+  });
+});
+
+describe('English money before/after (S7 table, measured on old vs new code)', () => {
+  // BEFORE (f7ee395, scratch worktree run): formatMoney was hardcoded 'en-NG';
+  // formatThemeMoney used bare 'en' via canonicalThemeLocale. AFTER: both use
+  // en-NG. Decision: en-NG ('US$') wins because live English stores already
+  // render formatMoney — the only money helper any theme imports (atelier
+  // blocks/components import it; ZERO themes import formatThemeMoney, so the
+  // old bare-'en' '$5,000.00' never reached a live store). GBP/EUR symbols are
+  // identical under 'en' vs 'en-NG'; only the helper decimal contract differs
+  // (formatMoney: decimals only when present; formatThemeMoney: K0 2-decimals).
+  it.each([
+    ['NGN', '₦5,000', '₦5,000.00'],
+    ['USD', 'US$5,000', 'US$5,000.00'],
+    ['GBP', '£5,000', '£5,000.00'],
+    ['EUR', '€5,000', '€5,000.00'],
+  ])('%s renders the live-store English output', (currency, money, themeMoney) => {
+    expect(formatMoney(5000, currency)).toBe(money);
+    expect(formatMoney(5000, currency, 'en')).toBe(money);
+    expect(formatThemeMoney(5000, currency, 'en')).toBe(themeMoney);
+    expect(formatThemeMoney(5000, currency, undefined)).toBe(themeMoney);
+  });
+
+  it('September abbreviates as Intl prints it', () => {
+    expect(formatDisplayDate('2026-09-05T10:00:00Z')).toBe('5 Sept 2026');
+    expect(formatDisplayDate('2026-09-05T10:00:00Z', { day: 'numeric', month: 'short', year: 'numeric' }, 'en-US')).toBe('5 Sept 2026');
+  });
+});
+
+describe('malformed currency before/after (normalize-then-format is intended)', () => {
+  // BEFORE (f7ee395): formatMoney passed the raw value to Intl — an invalid
+  // code threw RangeError internally and the fallback echoed the RAW token
+  // (' ngn  5,000', 'null 5,000'). AFTER: normalizeCurrencyCode runs first, so
+  // fixable/invalid codes resolve to the platform default instead of echoing
+  // raw input into shopper-facing money. Already-valid inputs are unchanged:
+  // 'usd' (Intl is case-insensitive) and 'XXX' (real ISO 4217 code) render
+  // byte-identical to before. formatThemeMoney already normalized at base —
+  // its malformed handling is untouched by this slice.
+  it.each([
+    ['usd', 'US$5,000'],
+    [' ngn ', '₦5,000'],
+    ['', '₦5,000'],
+    ['XXX', '¤5,000'],
+    ['NGN ', '₦5,000'],
+  ])('%s normalizes before formatting', (input, expected) => {
+    expect(formatMoney(5000, input)).toBe(expected);
+  });
+
+  it('null resolves to the platform default instead of echoing', () => {
+    expect(formatMoney(5000, null as unknown as string)).toBe('₦5,000');
+  });
+});
+
+describe('canonicalThemeLocale is plural-selection only', () => {
+  // canonicalThemeLocale returns bare 'en' (a US-order Intl tag). If a future
+  // formatter routes through it, English stores regress to US order. t() is
+  // its only legitimate caller: plural selection needs the bare language tag,
+  // and Intl.PluralRules('en') vs ('en-NG') select identically for our rules.
+  it('t() still selects plurals through it', () => {
+    const source = readFileSync(resolve(__dirname, '..', 'strings', 'theme-strings.ts'), 'utf8');
+    expect(source).toContain('canonicalThemeLocale(locale)');
+  });
+
+  it('no date/number/money/relative-time formatter calls it', () => {
+    // Static source scan: every formatter body lives in its own
+    // `export function <name>` segment, so a future edit that routes a
+    // formatter through canonicalThemeLocale trips this test even though the
+    // compiled function source would not reveal the call.
+    const formatSource = readFileSync(resolve(__dirname, '..', 'utils', 'format.ts'), 'utf8');
+    expect(formatSource).not.toContain('canonicalThemeLocale');
+    const themeSource = readFileSync(resolve(__dirname, '..', 'strings', 'theme-strings.ts'), 'utf8');
+    const segments = themeSource.split(/\n(?:export )?function /);
+    const bodyOf = (name: string): string => {
+      const segment = segments.find((s) => s.startsWith(`${name}(`));
+      expect(segment, `${name} formatter source found`).toBeDefined();
+      return segment as string;
+    };
+    for (const name of ['formatThemeNumber', 'formatThemeDate', 'formatThemeMoney', 'formatThemeRelativeTime']) {
+      expect(bodyOf(name)).not.toContain('canonicalThemeLocale');
+    }
+    // The shared tag helper all four formatters use maps en* -> en-NG.
+    expect(bodyOf('themeFormatTag')).toContain('resolveIntlLocale');
+    expect(bodyOf('themeFormatTag')).not.toContain('canonicalThemeLocale');
+  });
+
+  it('the guard fires when a formatter body is mutated to call it', () => {
+    const mutated = `\nexport function formatThemeDate(\n  const tag = canonicalThemeLocale(locale);\n}`;
+    const segments = mutated.split(/\n(?:export )?function /);
+    const body = segments.find((s) => s.startsWith('formatThemeDate(')) as string;
+    expect(body).toContain('canonicalThemeLocale');
+  });
+});

package/tests/shopper-chrome-strings.test.tsx

@@ -0,0 +1,272 @@
+/**
+ * Shopper-chrome theme strings (checkout / auth / blog) — English-safety guard.
+ *
+ * Stage A: every state below was rendered against the PRE-migration code and
+ * stored in `tests/fixtures/shopper-chrome-baseline.json`. Each case asserts
+ * `.toBe` equality against that stored OLD markup, so ANY English change
+ * (value, markup, attribute, plural) fails here. S4 drift guard + S7 proof.
+ */
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import type { JSX, ReactNode } from 'react';
+import { StorefrontProvider } from '../provider';
+import { CheckoutContactSection } from '../components/checkout/checkout-contact';
+import { DefaultCheckoutShell } from '../components/checkout/default-checkout-shell';
+import { PolicyLinks } from '../components/checkout/policy-links';
+import { AuthEmailLoginStep } from '../components/auth/auth-email-login-step';
+import { AuthEmailOtpStep } from '../components/auth/auth-email-otp-step';
+import { AuthEmailOtpVerifyStep } from '../components/auth/auth-email-otp-verify-step';
+import { AuthEmailRegisterStep } from '../components/auth/auth-email-register-step';
+import { AuthSignupStep } from '../components/auth/auth-signup-step';
+import { CategoryFilter } from '../components/blog/category-filter';
+import { BlogPagination } from '../components/blog/pagination';
+import { RelatedPosts } from '../components/blog/related-posts';
+import { ShareButtons } from '../components/blog/share-buttons';
+import { PostMeta } from '../components/blog/post-meta';
+import type { Page } from '../types/page';
+import { t, defaultThemeStrings } from '../strings/theme-strings';
+
+vi.mock('../hooks/use-auth-flow', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../hooks/use-auth-flow')>();
+  return {
+    ...actual,
+    useAuthFlow: () => (globalThis as unknown as { __flow: unknown }).__flow,
+  };
+});
+
+vi.mock('../hooks/use-auth', () => ({
+  useAuth: () => (globalThis as unknown as { __auth: unknown }).__auth,
+}));
+
+const G = globalThis as unknown as { __flow: unknown; __auth: unknown };
+
+function baseFlow(over: Record<string, unknown> = {}): void {
+  G.__flow = {
+    step: 'email-otp',
+    otp: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+    password: '',
+    loading: false,
+    error: null,
+    setOtp: vi.fn(),
+    setFirstName: vi.fn(),
+    setLastName: vi.fn(),
+    setEmail: vi.fn(),
+    setPassword: vi.fn(),
+    submitEmailRequestOtp: vi.fn(),
+    submitEmailVerifyOtp: vi.fn(),
+    submitRegister: vi.fn(),
+    submitEmailLogin: vi.fn(),
+    submitEmailRegister: vi.fn(),
+    initiateGoogleAuth: vi.fn(),
+    reset: vi.fn(),
+    goToEmailOtp: vi.fn(),
+    goToEmailLogin: vi.fn(),
+    goToEmailRegister: vi.fn(),
+    ...over,
+  };
+}
+
+function signedOut(): void {
+  G.__auth = {
+    user: null,
+    isAuthenticated: false,
+    openAuthModal: vi.fn(),
+    logout: vi.fn(),
+  };
+}
+
+function signedIn(over: Record<string, unknown> = {}): void {
+  G.__auth = {
+    user: {
+      id: 'u1',
+      name: 'Adaeze Okafor',
+      first_name: 'Adaeze',
+      last_name: 'Okafor',
+      email: 'ada@example.com',
+      phone: '',
+      avatar: null,
+    },
+    isAuthenticated: true,
+    openAuthModal: vi.fn(),
+    logout: vi.fn(),
+    ...over,
+  };
+}
+
+const AVATAR_USER = {
+  id: 'u1',
+  name: 'Adaeze Okafor',
+  first_name: 'Adaeze',
+  last_name: 'Okafor',
+  email: 'ada@example.com',
+  phone: '',
+  avatar: 'https://cdn.example.com/a.png',
+};
+
+function render(children: ReactNode): string {
+  return renderToStaticMarkup(
+    <StorefrontProvider
+      vendor={{ id: 'v1', slug: 'kili-foods', name: 'Kili Foods' } as never}
+      config={{} as never}
+      menus={[]}
+    >
+      {children}
+    </StorefrontProvider>,
+  );
+}
+
+function PICK({ label }: { label: string }): JSX.Element {
+  return <span data-pick={label}>{label}</span>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function shellProps(over: Record<string, unknown> = {}): any {
+  return {
+    cartItems: <PICK label="items" />,
+    deliveryModes: <PICK label="modes" />,
+    addressPicker: <PICK label="address" />,
+    deliverySourcePicker: null,
+    shippingZonePicker: <PICK label="zone" />,
+    schedulePicker: <PICK label="schedule" />,
+    paymentPicker: <PICK label="pay" />,
+    promoInput: <PICK label="promo" />,
+    noteInputs: <PICK label="notes" />,
+    feesBreakdown: <PICK label="fees" />,
+    deliveryMessage: null,
+    submitButton: <PICK label="submit" />,
+    activeTab: 'summary',
+    onTabChange: () => {},
+    totalCount: 0,
+    subtotal: 0,
+    currency: 'NGN',
+    mode: 'page',
+    policies: [],
+    ...over,
+  };
+}
+
+const POLICIES = [
+  { id: 'p1', slug: 'refund', type: 'page', title: 'Refund policy', content: [], excerpt: null, cover_image_url: null },
+  { id: 'p2', slug: 'shipping', type: 'page', title: 'Shipping policy', content: [], excerpt: null, cover_image_url: null },
+] as unknown as Page[];
+
+const CATS = [
+  { slug: 'news', name: 'News', posts_count: 4 },
+  { slug: 'recipes', name: 'Recipes' },
+];
+
+function post(over: Record<string, unknown> = {}): Record<string, unknown> {
+  return {
+    id: 'post1',
+    slug: 'hello-world',
+    type: 'post',
+    title: 'Hello world',
+    content: [],
+    excerpt: null,
+    cover_image_url: null,
+    author: { name: 'Adaeze Okafor', avatar_url: null },
+    published_at: '2026-09-15T12:00:00.000Z',
+    reading_time: 5,
+    ...over,
+  };
+}
+
+const REL = [
+  post({ id: 'r1', slug: 'p-one' }),
+  post({ id: 'r2', slug: 'p-two' }),
+];
+
+/** Every covered state: mock setup + element. Keys match the JSON fixture. */
+const STATES: Record<string, () => string> = {
+  'contact.out': () => { signedOut(); return render(<CheckoutContactSection />); },
+  'contact.in.initial': () => { signedIn(); return render(<CheckoutContactSection />); },
+  'contact.in.avatar': () => { signedIn({ user: AVATAR_USER }); return render(<CheckoutContactSection />); },
+
+  'shell.page.empty': () => { signedOut(); return render(<DefaultCheckoutShell {...shellProps({ totalCount: 0 })} />); },
+  'shell.page.full': () => { signedOut(); return render(<DefaultCheckoutShell {...shellProps({ totalCount: 3, subtotal: 4500, policies: POLICIES })} />); },
+  'shell.page.minimal': () => { signedOut(); return render(<DefaultCheckoutShell {...shellProps({ totalCount: 2, subtotal: 1000, addressPicker: null, shippingZonePicker: null, schedulePicker: null, deliveryMessage: { type: 'warning', message: 'Slow courier' } })} />); },
+  'shell.panel.summary.empty': () => { signedOut(); return render(<DefaultCheckoutShell {...shellProps({ mode: 'panel', activeTab: 'summary', totalCount: 0 })} />); },
+  'shell.panel.summary.items3': () => { signedOut(); return render(<DefaultCheckoutShell {...shellProps({ mode: 'panel', activeTab: 'summary', totalCount: 3, subtotal: 4500 })} />); },
+  'shell.panel.summary.items1': () => { signedOut(); return render(<DefaultCheckoutShell {...shellProps({ mode: 'panel', activeTab: 'summary', totalCount: 1, subtotal: 1500 })} />); },
+  'shell.panel.checkout': () => { signedOut(); return render(<DefaultCheckoutShell {...shellProps({ mode: 'panel', activeTab: 'checkout', totalCount: 2, subtotal: 2000 })} />); },
+
+  'policies.empty': () => { signedOut(); return render(<PolicyLinks policies={[]} />); },
+  'policies.list': () => { signedOut(); return render(<PolicyLinks policies={POLICIES} />); },
+
+  'login.default': () => { baseFlow(); return render(<AuthEmailLoginStep />); },
+  'login.loading': () => { baseFlow({ loading: true, email: 'ada@example.com', password: 'secret123' }); return render(<AuthEmailLoginStep />); },
+  'login.error': () => { baseFlow({ email: 'ada@example.com', password: 'secret123', error: 'Wrong email or password. Please try again.' }); return render(<AuthEmailLoginStep />); },
+
+  'otp.default': () => { baseFlow(); return render(<AuthEmailOtpStep />); },
+  'otp.loading': () => { baseFlow({ loading: true, email: 'ada@example.com' }); return render(<AuthEmailOtpStep />); },
+  'otp.error': () => { baseFlow({ email: 'ada@example.com', error: 'Something went wrong. Please try again.' }); return render(<AuthEmailOtpStep />); },
+
+  'verify.empty': () => { baseFlow({ email: 'ada@example.com', otp: '' }); return render(<AuthEmailOtpVerifyStep />); },
+  'verify.partial': () => { baseFlow({ email: 'ada@example.com', otp: '123' }); return render(<AuthEmailOtpVerifyStep />); },
+  'verify.loading': () => { baseFlow({ email: 'ada@example.com', otp: '123456', loading: true }); return render(<AuthEmailOtpVerifyStep />); },
+  'verify.error': () => { baseFlow({ email: 'ada@example.com', otp: '12', error: 'Incorrect code. Please try again.' }); return render(<AuthEmailOtpVerifyStep />); },
+
+  'register.default': () => { baseFlow(); return render(<AuthEmailRegisterStep />); },
+  'register.loading': () => { baseFlow({ loading: true, firstName: 'Adaeze', email: 'ada@example.com', password: 'secret123' }); return render(<AuthEmailRegisterStep />); },
+  'register.error': () => { baseFlow({ firstName: 'Adaeze', email: 'ada@example.com', password: 'secret123', error: 'Email already registered. Please sign in instead.' }); return render(<AuthEmailRegisterStep />); },
+
+  'signup.default': () => { baseFlow(); return render(<AuthSignupStep />); },
+  'signup.loading': () => { baseFlow({ loading: true, firstName: 'Adaeze', lastName: 'Okafor' }); return render(<AuthSignupStep />); },
+  'signup.error': () => { baseFlow({ firstName: 'Adaeze', error: 'Please enter your first name.' }); return render(<AuthSignupStep />); },
+
+  'filter.pills': () => render(<CategoryFilter categories={CATS} />),
+  'filter.pills.active': () => render(<CategoryFilter categories={CATS} active="news" />),
+  'filter.tabs': () => render(<CategoryFilter categories={CATS} variant="tabs" />),
+  'filter.tabs.active': () => render(<CategoryFilter categories={CATS} variant="tabs" active="recipes" />),
+  'filter.empty': () => render(<CategoryFilter categories={[]} />),
+  'filter.null': () => render(<CategoryFilter categories={null} />),
+
+  'page.mid': () => render(<BlogPagination pagination={{ current_page: 2, per_page: 12, has_more: true }} category="news" />),
+  'page.last': () => render(<BlogPagination pagination={{ current_page: 4, has_more: false }} />),
+  'page.first.next': () => render(<BlogPagination pagination={{ current_page: 1, has_more: true }} />),
+  'page.lone': () => render(<BlogPagination pagination={{ current_page: 1, has_more: false }} />),
+  'page.unset': () => render(<BlogPagination pagination={undefined} />),
+
+  'related.default': () => render(<RelatedPosts posts={REL as never} />),
+  'related.custom': () => render(<RelatedPosts posts={REL as never} heading="Keep reading" />),
+  'related.empty': () => render(<RelatedPosts posts={[]} />),
+  'related.null': () => render(<RelatedPosts posts={null} />),
+
+  'share.default': () => render(<ShareButtons title="Hello world" />),
+
+  'meta.full': () => render(<PostMeta post={post() as never} />),
+  'meta.reading1': () => render(<PostMeta post={post({ reading_time: 1 }) as never} />),
+  'meta.noauthor': () => render(<PostMeta post={post({ author: null }) as never} />),
+  'meta.minimal': () => render(<PostMeta post={post({ author: null, published_at: null, reading_time: 0 }) as never} />),
+};
+
+const root = dirname(fileURLToPath(import.meta.url));
+const BASELINES = JSON.parse(
+  readFileSync(join(root, 'fixtures', 'shopper-chrome-baseline.json'), 'utf-8'),
+) as Record<string, string>;
+
+describe('shopper chrome English safety (checkout/auth/blog)', () => {
+  it('covers every baseline state (fixture and STATES map stay in sync)', () => {
+    expect(Object.keys(STATES).sort()).toEqual(Object.keys(BASELINES).sort());
+  });
+
+  for (const [name, renderState] of Object.entries(STATES)) {
+    it(`${name}: byte-identical to the stored OLD markup`, () => {
+      expect(renderState()).toBe(BASELINES[name]);
+    });
+  }
+
+  // S4 value guard: ShareButtons renders its copied branch only after a
+  // client-side clipboard write (internal useState, no prop), so no static
+  // baseline can capture it. Pin the English through the real `t` instead —
+  // any change to blog.share.copied fails here.
+  it("share.copied: English value pinned ('Copied')", () => {
+    expect(t(defaultThemeStrings, 'blog.share.copied')).toBe('Copied');
+  });
+});