@usequeek/theme-kit 0.1.20 → 0.1.21

package/README.md

@@ -92,6 +92,123 @@ provider that passes nothing renders exactly as today, in English.
   `strings/theme-strings.ts` itself); every other locale arrives via the
   host's dynamic `import()` per locale. `tests/theme-strings.test.tsx`
   gates this: any other static locale import fails the suite.
+- **Typed keys (optional, compile-time).** A theme opts in per call site —
+  existing untyped `t(key)` callers keep compiling unchanged.
+  `ThemeStringKey<typeof strings>` derives the key union from the theme's
+  English dictionary object (nested objects flatten to dotted keys, a
+  plural map counts as ONE key, flat literal dotted keys stay one key),
+  and `createThemeT` binds it to any `t`:
+
+  ```ts
+  import enDefault from './locales/en.default.json';
+  import { createThemeT } from '@usequeek/theme-kit/strings/theme-strings';
+
+  const { t } = await createThemeStrings({ locale });
+  const tt = createThemeT<typeof enDefault>(t); // server …
+  // … or client: const tt = createThemeT<typeof enDefault>(useThemeStrings());
+  tt('cart.title'); // ok
+  // tt('cart.titl'); // type error — typo keys fail, valid keys pass
+  ```
+
+  (`tests/theme-typed-keys.fixture.ts` proves this under
+  `npm run typecheck`: valid keys pass, typo/unknown/plural-form keys are
+  `@ts-expect-error` errors.)
+- **Pseudo-locale QA (dev/test only, never shipped).**
+  `pseudoLocalize(dictionary, options?)`
+  (`strings/pseudo-locale.ts`, pure: no `next/*`, no React) returns a
+  pseudo dictionary with identical keys and plural-map shape — every
+  value accent-mapped, ~30% longer, wrapped in `[!! … !!]` markers —
+  while `{placeholders}` and `{{`/`}}` escapes pass through and keys are
+  never touched. Use it two ways. As a dev-only locale, mount with the
+  pseudo dictionary as the `strings` prop: everything that went through
+  `t()` renders pseudo, so any text that remains plain English next to
+  pseudo text is a hard-coded (un-wrapped) string. In tests, render with
+  the pseudo dictionary and run the English-leak scan over the HTML —
+  the reusable primitive theme tests import (the storefront and
+  theme-tools import it from the same pure module):
+
+  ```tsx
+  import { pseudoLocalize, assertNoEnglishLeak } from '@usequeek/theme-kit/strings/pseudo-locale';
+
+  const pseudo = pseudoLocalize(enDefault, { rtl: true }); // spot-check RTL too
+  const html = renderToStaticMarkup(
+    <StorefrontProvider vendor={…} config={…} menus={[]} strings={pseudo}>
+      <MySection />
+    </StorefrontProvider>,
+  );
+  assertNoEnglishLeak(html, { allowlist: ['Queek'] }); // throws on any plain-English node
+  ```
+
+  `findEnglishLeaks(html, { allowlist, includeAttributes })` returns the
+  offending node texts instead of throwing; the scan covers visible text
+  nodes plus `aria-label`/`placeholder`/`title`/`alt` (opt out with
+  `includeAttributes: false`). Pseudo dictionaries are built on demand
+  in dev/test and never enter a client bundle.
+
+## Locale-aware dates, numbers and relative time
+
+Dates, counts, money and relative time follow the SHOPPER's locale (founder
+2/10/26). English renders in the British/Nigerian style — `2 October 2026`,
+never US `October 2, 2026` — so English stores look exactly as before.
+
+- **One mapping.** `resolveIntlLocale(locale)` (`utils/locale.ts`, pure: no
+  `next/*`, no React) is the single canonical storefront-code → Intl-locale
+  mapping every formatter goes through. Missing/invalid codes and every
+  English variant (`en`, `en-GB`, `en-NG`, `en-US`, …) become `en-NG`;
+  everything else passes through (`fr`, `ar`, `pt-BR`, `zh-CN`, `yo`, `ha`,
+  `sw`, …). `en-NG` — not `en-GB` — because only it reproduces current
+  output byte for byte: both print `2 October 2026`, but `en-GB` renders NGN
+  as `NGN 12,500` where the stores show `₦12,500` (verified on Node 22, full
+  ICU). `resolveSupportedLocale` falls back to English when the runtime's
+  ICU lacks a locale — formatting never throws.
+- **What themes call.** `formatThemeDate(value, locale?, options?)`
+  (`strings/theme-strings.ts`) instead of a hardcoded-`'en-GB'`
+  `toLocaleDateString`: pass the storefront locale — client components via
+  `useStorefrontLocale()`, server components via the request locale the host
+  already holds. Siblings: `formatThemeNumber`, `formatThemeMoney`, and
+  `formatThemeRelativeTime(-1, 'day', locale)` (`hier`, `أمس`, `ontem`, …,
+  `numeric: 'auto'`). `formatThemeMoney` keeps the K0 currency-default
+  decimals (`₦5,000.00`); `formatMoney` shows decimals only when present
+  (`₦5,000`, `₦0.28`). The fixed-zone display path is `formatShopperDate`
+  (`utils/format.ts`, Africa/Lagos, `''` for invalid dates as before);
+  `formatCount`/`formatMoney` take an optional locale, defaulting to the
+  pinned English output. `PostMeta` (`components/blog/post-meta.tsx`) already
+  renders its byline through the provider locale.
+- **Fallbacks.** Unknown locale → English style; invalid date → `''`;
+  minimal-ICU runtimes render English rather than throwing.
+- **Plural selection stays separate.** `canonicalThemeLocale`
+  (`strings/theme-strings.ts`) is for `t()` plural selection ONLY: it returns
+  a bare `'en'` tag, which is a US-order Intl tag. Never pass it to a date,
+  number, money or relative-time formatter — formatters use
+  `resolveIntlLocale` (en* → `en-NG`) instead. A test fails the suite if any
+  formatter body ever calls it.
+- **Shopify comparison.** Shopify's Liquid
+  [`date` filter](https://shopify.dev/docs/api/liquid/filters/date) formats
+  with explicit strftime strings, or locale-aware via named `format:` options
+  (`abbreviated_date`, `basic`, `date`, `date_at_time`, `default`, `on_date`)
+  whose patterns live in the theme's locale files (`date_formats`); the
+  [`money` filter](https://shopify.dev/docs/api/liquid/filters/money) renders
+  per the store's currency-formatting setting. This slice differs
+  intentionally: one code-level mapping (`resolveIntlLocale`) instead of
+  per-locale format files, every English variant pinned to `en-NG`
+  (British/Nigerian order, never US), and an English fallback when the
+  runtime's ICU lacks the locale. Number/relative-time have no Liquid
+  equivalent consulted — UNVERIFIED remainder, no parity claim made.
+
+```tsx
+import { useStorefrontLocale } from '@usequeek/theme-kit/provider';
+import { formatThemeDate } from '@usequeek/theme-kit/strings/theme-strings';
+
+const locale = useStorefrontLocale(); // null on the primary (English) locale
+formatThemeDate(post.published_at, locale, { year: 'numeric', month: 'long', day: 'numeric' });
+// en → "2 October 2026" · fr → "2 octobre 2026" · ar → "2 أكتوبر 2026"
+```
+
+`tests/display-format.test.ts` pins this: every existing English string is
+byte-identical with or without a locale, `fr`/`ar`/`pt-BR`/`zh-CN`/`yo`/
+`ha`/`sw` outputs are asserted against real `Intl` output (with the
+English fallback when ICU lacks a locale), and a scan fails the suite if a
+hardcoded English locale ever reaches a formatter again.
 
 ## Consumers
 

package/components/auth/auth-email-login-step.tsx

@@ -1,18 +1,20 @@
 'use client';
 import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
+import { useThemeStrings } from '../../provider';
 
 export function AuthEmailLoginStep(): JSX.Element {
   const { email, setEmail, password, setPassword, submitEmailLogin, loading, error, goToEmailRegister, goToEmailOtp } = useAuthFlow();
+  const t = useThemeStrings();
 
   return (
     <div className="core-auth__step core-auth__step--email-login">
-      <h2 className="core-auth__title">Sign in</h2>
-      <p className="core-auth__sub">Enter your email and password</p>
+      <h2 className="core-auth__title">{t('auth.login.title')}</h2>
+      <p className="core-auth__sub">{t('auth.login.subtitle')}</p>
       <input
         type="email"
         className="core-input"
-        placeholder="Email address"
+        placeholder={t('auth.login.email')}
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         autoComplete="email"
@@ -21,7 +23,7 @@ export function AuthEmailLoginStep(): JSX.Element {
       <input
         type="password"
         className="core-input"
-        placeholder="Password"
+        placeholder={t('auth.login.password')}
         value={password}
         onChange={(e) => setPassword(e.target.value)}
         onKeyDown={(e) => { if (e.key === 'Enter') void submitEmailLogin(); }}
@@ -34,13 +36,13 @@ export function AuthEmailLoginStep(): JSX.Element {
         onClick={() => void submitEmailLogin()}
         disabled={loading || !email.trim() || !password}
       >
-        {loading ? 'Signing in…' : 'Sign in'}
+        {loading ? t('auth.login.signing') : t('auth.login.title')}
       </button>
       <button type="button" className="core-auth__link" onClick={goToEmailRegister}>
-        Don&apos;t have an account? Create one
+        {t('auth.login.create')}
       </button>
       <button type="button" className="core-auth__link" onClick={goToEmailOtp}>
-        Use an email code instead
+        {t('auth.login.code')}
       </button>
     </div>
   );

package/components/auth/auth-email-otp-step.tsx

@@ -2,14 +2,16 @@
 
 import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
+import { useThemeStrings } from '../../provider';
 
 export function AuthEmailOtpStep(): JSX.Element {
   const { email, setEmail, submitEmailRequestOtp, loading, error, initiateGoogleAuth, goToEmailLogin } = useAuthFlow();
+  const t = useThemeStrings();
 
   return (
     <div className="core-auth__step core-auth__step--email-otp">
-      <h2 className="core-auth__title">Sign in</h2>
-      <p className="core-auth__sub">Enter your email to continue</p>
+      <h2 className="core-auth__title">{t('auth.email.title')}</h2>
+      <p className="core-auth__sub">{t('auth.email.subtitle')}</p>
 
       <button
         type="button"
@@ -23,15 +25,15 @@ export function AuthEmailOtpStep(): JSX.Element {
           <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
           <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
         </svg>
-        Continue with Google
+        {t('auth.email.google')}
       </button>
 
-      <div className="core-auth__divider"><span>or</span></div>
+      <div className="core-auth__divider"><span>{t('auth.email.or')}</span></div>
 
       <input
         type="email"
         className="core-input"
-        placeholder="your@email.com"
+        placeholder={t('auth.email.placeholder')}
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         onKeyDown={(e) => { if (e.key === 'Enter') void submitEmailRequestOtp(); }}
@@ -45,10 +47,10 @@ export function AuthEmailOtpStep(): JSX.Element {
         onClick={() => void submitEmailRequestOtp()}
         disabled={loading || !email.trim()}
       >
-        {loading ? 'Sending code…' : 'Continue'}
+        {loading ? t('auth.email.sending') : t('auth.email.continue')}
       </button>
       <button type="button" className="core-auth__link" onClick={goToEmailLogin}>
-        Have a password? Sign in with it instead
+        {t('auth.email.password')}
       </button>
     </div>
   );

package/components/auth/auth-email-otp-verify-step.tsx

@@ -3,11 +3,13 @@
 import type { JSX } from 'react';
 import { useRef } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
+import { useThemeStrings } from '../../provider';
 
 const OTP_LENGTH = 6;
 
 export function AuthEmailOtpVerifyStep(): JSX.Element {
   const { email, otp, setOtp, submitEmailVerifyOtp, submitEmailRequestOtp, goToEmailOtp, loading, error } = useAuthFlow();
+  const t = useThemeStrings();
   const refs = useRef<(HTMLInputElement | null)[]>([]);
 
   const focus = (i: number): void => {
@@ -40,9 +42,9 @@ export function AuthEmailOtpVerifyStep(): JSX.Element {
 
   return (
     <div className="core-auth__step core-auth__step--email-otp-verify">
-      <h2 className="core-auth__title">Enter code</h2>
+      <h2 className="core-auth__title">{t('auth.code.title')}</h2>
       <p className="core-auth__sub">
-        {OTP_LENGTH}-digit code sent to <strong>{email}</strong>
+        {t('auth.code.lead', { length: OTP_LENGTH })} <strong>{email}</strong>
       </p>
       <div className="core-auth-otp">
         {Array.from({ length: OTP_LENGTH }).map((_, i) => (
@@ -59,7 +61,7 @@ export function AuthEmailOtpVerifyStep(): JSX.Element {
             onFocus={(e) => e.target.select()}
             disabled={loading}
             autoComplete={i === 0 ? 'one-time-code' : 'off'}
-            aria-label={`Digit ${i + 1}`}
+            aria-label={t('auth.code.digit', { index: i + 1 })}
           />
         ))}
       </div>
@@ -70,13 +72,13 @@ export function AuthEmailOtpVerifyStep(): JSX.Element {
         onClick={() => void submitEmailVerifyOtp()}
         disabled={loading || otp.length < OTP_LENGTH}
       >
-        {loading ? 'Verifying…' : 'Verify'}
+        {loading ? t('auth.code.verifying') : t('auth.code.verify')}
       </button>
       <button type="button" className="core-auth__link" onClick={() => void submitEmailRequestOtp()}>
-        Resend code
+        {t('auth.code.resend')}
       </button>
       <button type="button" className="core-auth__link" onClick={goToEmailOtp}>
-        ← Change email
+        {t('auth.code.change')}
       </button>
     </div>
   );

package/components/auth/auth-email-register-step.tsx

@@ -1,18 +1,20 @@
 'use client';
 import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
+import { useThemeStrings } from '../../provider';
 
 export function AuthEmailRegisterStep(): JSX.Element {
   const { firstName, setFirstName, lastName, setLastName, email, setEmail, password, setPassword, submitEmailRegister, loading, error, goToEmailLogin } = useAuthFlow();
+  const t = useThemeStrings();
 
   return (
     <div className="core-auth__step core-auth__step--email-register">
-      <h2 className="core-auth__title">Create account</h2>
-      <p className="core-auth__sub">Fill in your details to get started</p>
+      <h2 className="core-auth__title">{t('auth.register.title')}</h2>
+      <p className="core-auth__sub">{t('auth.register.subtitle')}</p>
       <input
         type="text"
         className="core-input"
-        placeholder="First name"
+        placeholder={t('auth.register.first')}
         value={firstName}
         onChange={(e) => setFirstName(e.target.value)}
         autoComplete="given-name"
@@ -21,7 +23,7 @@ export function AuthEmailRegisterStep(): JSX.Element {
       <input
         type="text"
         className="core-input"
-        placeholder="Last name (optional)"
+        placeholder={t('auth.register.last')}
         value={lastName}
         onChange={(e) => setLastName(e.target.value)}
         autoComplete="family-name"
@@ -29,7 +31,7 @@ export function AuthEmailRegisterStep(): JSX.Element {
       <input
         type="email"
         className="core-input"
-        placeholder="Email address"
+        placeholder={t('auth.register.email')}
         value={email}
         onChange={(e) => setEmail(e.target.value)}
         autoComplete="email"
@@ -37,7 +39,7 @@ export function AuthEmailRegisterStep(): JSX.Element {
       <input
         type="password"
         className="core-input"
-        placeholder="Password (min 8 characters)"
+        placeholder={t('auth.register.password')}
         value={password}
         onChange={(e) => setPassword(e.target.value)}
         onKeyDown={(e) => { if (e.key === 'Enter') void submitEmailRegister(); }}
@@ -50,10 +52,10 @@ export function AuthEmailRegisterStep(): JSX.Element {
         onClick={() => void submitEmailRegister()}
         disabled={loading || !firstName.trim() || !email.trim() || password.length < 8}
       >
-        {loading ? 'Creating account…' : 'Create account'}
+        {loading ? t('auth.register.creating') : t('auth.register.title')}
       </button>
       <button type="button" className="core-auth__link" onClick={goToEmailLogin}>
-        Already have an account? Sign in
+        {t('auth.register.signin')}
       </button>
     </div>
   );

package/components/auth/auth-signup-step.tsx

@@ -2,6 +2,7 @@
 
 import type { JSX } from 'react';
 import { useAuthFlow } from '../../hooks/use-auth-flow';
+import { useThemeStrings } from '../../provider';
 
 export function AuthSignupStep(): JSX.Element {
   const {
@@ -11,16 +12,17 @@ export function AuthSignupStep(): JSX.Element {
     loading, error,
     goToEmailOtp,
   } = useAuthFlow();
+  const t = useThemeStrings();
 
   return (
     <div className="core-auth__step core-auth__step--signup">
-      <h2 className="core-auth__title">Create your account</h2>
-      <p className="core-auth__sub">Just a few details to get you started</p>
+      <h2 className="core-auth__title">{t('auth.signup.title')}</h2>
+      <p className="core-auth__sub">{t('auth.signup.subtitle')}</p>
 
       <input
         type="text"
         className="core-input"
-        placeholder="First name"
+        placeholder={t('auth.signup.first')}
         value={firstName}
         onChange={(e) => setFirstName(e.target.value)}
         autoComplete="given-name"
@@ -29,7 +31,7 @@ export function AuthSignupStep(): JSX.Element {
       <input
         type="text"
         className="core-input"
-        placeholder="Last name (optional)"
+        placeholder={t('auth.signup.last')}
         value={lastName}
         onChange={(e) => setLastName(e.target.value)}
         autoComplete="family-name"
@@ -43,11 +45,11 @@ export function AuthSignupStep(): JSX.Element {
         onKeyDown={(e) => { if (e.key === 'Enter') void submitRegister(); }}
         disabled={loading || !firstName.trim()}
       >
-        {loading ? 'Creating account…' : 'Create account'}
+        {loading ? t('auth.signup.creating') : t('auth.signup.create')}
       </button>
 
       <button type="button" className="core-auth__link" onClick={goToEmailOtp}>
-        ← Use a different email
+        {t('auth.signup.different')}
       </button>
     </div>
   );

package/components/blog/category-filter.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import { useStorefront, useThemeStrings } from '../../provider';
 import type { JSX } from 'react';
 import Link from 'next/link';
 import type { BlogCategory } from '../../types/page';
-import { useStorefront } from '../../provider';
 
 /**
  * Shared blog category browse bar. Links to `${basePath}/blog?category=slug`.
@@ -28,6 +28,7 @@ export function CategoryFilter({
   className?: string;
 }): JSX.Element | null {
   const { basePath } = useStorefront();
+  const t = useThemeStrings();
 
   if (!categories || categories.length === 0) {
     return null;
@@ -37,14 +38,14 @@ export function CategoryFilter({
     return (
       <nav
         className={`core-cat-tabs${className ? ` ${className}` : ''}`}
-        aria-label="Blog categories"
+        aria-label={t('blog.filter.nav')}
       >
         <Link
           href={`${basePath}/blog`}
           className={`core-cat-tabs__item${!active ? ' is-active' : ''}`}
           aria-current={!active ? 'page' : undefined}
         >
-          <span className="core-cat-tabs__label">All</span>
+          <span className="core-cat-tabs__label">{t('blog.filter.all')}</span>
         </Link>
         {categories.map((category) => {
           const isActive = active === category.slug;
@@ -67,13 +68,13 @@ export function CategoryFilter({
   }
 
   return (
-    <nav className={`core-cat-filter${className ? ` ${className}` : ''}`} aria-label="Blog categories">
+    <nav className={`core-cat-filter${className ? ` ${className}` : ''}`} aria-label={t('blog.filter.nav')}>
       <Link
         href={`${basePath}/blog`}
         className={`core-cat-filter__item${!active ? ' is-active' : ''}`}
         aria-current={!active ? 'page' : undefined}
       >
-        All
+        {t('blog.filter.all')}
       </Link>
       {categories.map((category) => {
         const isActive = active === category.slug;

package/components/blog/pagination.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import { useStorefront, useThemeStrings } from '../../provider';
 import type { JSX } from 'react';
 import Link from 'next/link';
 import type { Pagination } from '../../types/page';
-import { useStorefront } from '../../provider';
 
 /**
  * Shared blog pagination (Prev / "Page N" / Next). SSR page-based navigation
@@ -21,6 +21,7 @@ export function BlogPagination({
   className?: string;
 }): JSX.Element | null {
   const { basePath } = useStorefront();
+  const t = useThemeStrings();
 
   if (!pagination) {
     return null;
@@ -47,24 +48,24 @@ export function BlogPagination({
   };
 
   return (
-    <nav className={`core-pagination${className ? ` ${className}` : ''}`} aria-label="Blog pagination">
+    <nav className={`core-pagination${className ? ` ${className}` : ''}`} aria-label={t('blog.pagination.nav')}>
       {hasPrev ? (
         <Link href={buildHref(current - 1)} className="core-pagination__link" rel="prev">
-          ← Previous
+          {t('blog.pagination.prev')}
         </Link>
       ) : (
         <span className="core-pagination__link is-disabled" aria-disabled="true">
-          ← Previous
+          {t('blog.pagination.prev')}
         </span>
       )}
-      <span className="core-pagination__status">{`Page ${current}`}</span>
+      <span className="core-pagination__status">{t('blog.pagination.page', { current })}</span>
       {hasNext ? (
         <Link href={buildHref(current + 1)} className="core-pagination__link" rel="next">
-          Next →
+          {t('blog.pagination.next')}
         </Link>
       ) : (
         <span className="core-pagination__link is-disabled" aria-disabled="true">
-          Next →
+          {t('blog.pagination.next')}
         </span>
       )}
     </nav>

package/components/blog/post-meta.tsx

@@ -1,19 +1,25 @@
 'use client';
 
+import { useStorefront, useThemeStrings } from '../../provider';
 import type { JSX } from 'react';
 import type { Post } from '../../types/page';
-import { useStorefront } from '../../provider';
 import { Image } from '../image';
 import { formatDisplayDate } from '../../utils/format';
+import { resolveIntlLocale } from '../../utils/locale';
 
-function formatDate(value: string): string {
+function formatDate(value: string, locale: string | null): string {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) {
     return '';
   }
-  // en-US long form as before; the fixed zone keeps a post published near midnight
-  // UTC on the same day on the server and in the browser.
-  return formatDisplayDate(date, { year: 'numeric', month: 'long', day: 'numeric' }, 'en-US');
+  // Shopper's locale through the canonical mapping (English stays the
+  // British/Nigerian order, "15 February 2026"); the fixed zone keeps a post
+  // published near midnight UTC on the same day on the server and in the browser.
+  return formatDisplayDate(
+    date,
+    { year: 'numeric', month: 'long', day: 'numeric' },
+    resolveIntlLocale(locale),
+  );
 }
 
 /**
@@ -22,12 +28,13 @@ function formatDate(value: string): string {
  * style via `.core-post-meta*` selectors (colours inherit brand vars).
  */
 export function PostMeta({ post, className }: { post: Post; className?: string }): JSX.Element {
-  const { vendor } = useStorefront();
+  const { vendor, locale } = useStorefront();
+  const t = useThemeStrings();
 
   const authorName = post.author?.name ?? vendor.name ?? null;
   const authorAvatar = post.author?.avatar_url ?? vendor.logo ?? null;
-  const published = post.published_at ? formatDate(post.published_at) : '';
-  const readingTime = post.reading_time && post.reading_time > 0 ? `${post.reading_time} min read` : '';
+  const published = post.published_at ? formatDate(post.published_at, locale) : '';
+  const readingTime = post.reading_time && post.reading_time > 0 ? t('blog.meta.reading', { count: post.reading_time }) : '';
 
   return (
     <div className={`core-post-meta${className ? ` ${className}` : ''}`}>

package/components/blog/related-posts.tsx

@@ -1,9 +1,9 @@
 'use client';
 
+import { useStorefront, useThemeStrings } from '../../provider';
 import type { JSX } from 'react';
 import Link from 'next/link';
 import type { Post } from '../../types/page';
-import { useStorefront } from '../../provider';
 import { Image } from '../image';
 
 /**
@@ -13,13 +13,15 @@ import { Image } from '../image';
 export function RelatedPosts({
   posts,
   className,
-  heading = 'Related posts',
+  heading,
 }: {
   posts?: Post[] | null;
   className?: string;
   heading?: string;
 }): JSX.Element | null {
   const { basePath } = useStorefront();
+  const t = useThemeStrings();
+  const title = heading ?? t('blog.related.title');
 
   if (!posts || posts.length === 0) {
     return null;
@@ -27,7 +29,7 @@ export function RelatedPosts({
 
   return (
     <section className={`core-related${className ? ` ${className}` : ''}`}>
-      <h2 className="core-related__heading">{heading}</h2>
+      <h2 className="core-related__heading">{title}</h2>
       <div className="core-related__grid">
         {posts.map((post) => (
           <Link key={post.id ?? post.slug} href={`${basePath}/blog/${post.slug}`} className="core-related__card">

package/components/blog/share-buttons.tsx

@@ -2,6 +2,7 @@
 
 import type { JSX } from 'react';
 import { useEffect, useState } from 'react';
+import { useThemeStrings } from '../../provider';
 
 interface ShareButtonsProps {
   title: string;
@@ -18,6 +19,7 @@ export function ShareButtons({ title, className }: ShareButtonsProps): JSX.Eleme
   const [url, setUrl] = useState('');
   const [copied, setCopied] = useState(false);
   const [canNativeShare, setCanNativeShare] = useState(false);
+  const t = useThemeStrings();
 
   useEffect(() => {
     setUrl(window.location.href);
@@ -47,11 +49,11 @@ export function ShareButtons({ title, className }: ShareButtonsProps): JSX.Eleme
 
   return (
     <div className={`core-share${className ? ` ${className}` : ''}`}>
-      <span className="core-share__label">Share</span>
+      <span className="core-share__label">{t('blog.share.label')}</span>
       <div className="core-share__actions">
         {canNativeShare ? (
-          <button type="button" className="core-share__btn" onClick={nativeShare} aria-label="Share">
-            Share
+          <button type="button" className="core-share__btn" onClick={nativeShare} aria-label={t('blog.share.action')}>
+            {t('blog.share.action')}
           </button>
         ) : null}
         <a
@@ -59,7 +61,7 @@ export function ShareButtons({ title, className }: ShareButtonsProps): JSX.Eleme
           href={`https://x.com/intent/post?url=${encodedUrl}&text=${encodedTitle}`}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label="Share on X"
+          aria-label={t('blog.share.x')}
         >
           X
         </a>
@@ -68,7 +70,7 @@ export function ShareButtons({ title, className }: ShareButtonsProps): JSX.Eleme
           href={`https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label="Share on Facebook"
+          aria-label={t('blog.share.facebook')}
         >
           Facebook
         </a>
@@ -77,12 +79,12 @@ export function ShareButtons({ title, className }: ShareButtonsProps): JSX.Eleme
           href={`https://wa.me/?text=${encodedTitle}%20${encodedUrl}`}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label="Share on WhatsApp"
+          aria-label={t('blog.share.whatsapp')}
         >
           WhatsApp
         </a>
-        <button type="button" className="core-share__btn" onClick={copyLink} aria-label="Copy link">
-          {copied ? 'Copied' : 'Copy link'}
+        <button type="button" className="core-share__btn" onClick={copyLink} aria-label={t('blog.share.copy')}>
+          {copied ? t('blog.share.copied') : t('blog.share.copy')}
         </button>
       </div>
     </div>