@usequeek/theme-kit 0.1.20 → 0.1.21

package/components/checkout/checkout-contact.tsx

@@ -3,6 +3,7 @@
 import type { JSX } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useAuth } from '../../hooks/use-auth';
+import { useThemeStrings } from '../../provider';
 import { Image } from '../image';
 
 /**
@@ -13,6 +14,7 @@ import { Image } from '../image';
  */
 export function CheckoutContactSection(): JSX.Element {
   const { user, isAuthenticated, openAuthModal, logout } = useAuth();
+  const t = useThemeStrings();
   const [menuOpen, setMenuOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -31,13 +33,13 @@ export function CheckoutContactSection(): JSX.Element {
     return (
       <section className="core-checkout__section core-checkout-contact">
         <div className="core-checkout-contact__row">
-          <span className="core-checkout-contact__label">Contact</span>
+          <span className="core-checkout-contact__label">{t('checkout.contact.label')}</span>
           <button
             type="button"
             className="core-checkout-contact__signin"
             onClick={() => openAuthModal('login')}
           >
-            Sign in
+            {t('checkout.contact.signin')}
           </button>
         </div>
       </section>
@@ -62,7 +64,7 @@ export function CheckoutContactSection(): JSX.Element {
           <button
             type="button"
             className="core-checkout-contact__menu-btn"
-            aria-label="Account options"
+            aria-label={t('checkout.contact.options')}
             onClick={() => setMenuOpen((v) => !v)}
           >
             <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -74,7 +76,7 @@ export function CheckoutContactSection(): JSX.Element {
           {menuOpen ? (
             <div className="core-checkout-contact__menu">
               <button type="button" onClick={() => { setMenuOpen(false); logout(); }}>
-                Sign out
+                {t('checkout.contact.signout')}
               </button>
             </div>
           ) : null}

package/components/checkout/default-checkout-shell.tsx

@@ -5,6 +5,7 @@ import type { CheckoutShellProps } from '../../types/theme';
 import { formatMoney } from '../../utils/format';
 import { useHref } from '../../hooks/use-href';
 import { CheckoutContactSection } from './checkout-contact';
+import { useThemeStrings } from '../../provider';
 import { PolicyLinks } from './policy-links';
 
 export function DefaultCheckoutShell({
@@ -29,14 +30,15 @@ export function DefaultCheckoutShell({
   policies,
 }: CheckoutShellProps): JSX.Element {
   const href = useHref();
+  const t = useThemeStrings();
 
   if (mode === 'page') {
     if (totalCount === 0) {
       return (
         <div className="core-checkout core-checkout--page">
           <div className="core-checkout__empty">
-            <p>Your cart is empty.</p>
-            <Link href={href('/')} className="core-checkout__back-link">Browse products</Link>
+            <p>{t('checkout.empty.message')}</p>
+            <Link href={href('/')} className="core-checkout__back-link">{t('checkout.empty.browse')}</Link>
           </div>
         </div>
       );
@@ -52,23 +54,23 @@ export function DefaultCheckoutShell({
                 <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" width="14" height="14">
                   <path d="M10 13L5 8l5-5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
-                Continue shopping
+                {t('checkout.page.back')}
               </Link>
             </div>
             <CheckoutContactSection />
             <section className="core-checkout__section">
-              <h3 className="core-checkout__section-title">How you&apos;ll get it</h3>
+              <h3 className="core-checkout__section-title">{t('checkout.delivery.title')}</h3>
               {deliveryModes}
             </section>
             {shippingZonePicker ? (
               <section className="core-checkout__section">
-                <h3 className="core-checkout__section-title">Shipping zone</h3>
+                <h3 className="core-checkout__section-title">{t('checkout.zone.title')}</h3>
                 {shippingZonePicker}
               </section>
             ) : null}
             {addressPicker ? (
               <section className="core-checkout__section">
-                <h3 className="core-checkout__section-title">Delivery address</h3>
+                <h3 className="core-checkout__section-title">{t('checkout.address.title')}</h3>
                 {addressPicker}
               </section>
             ) : null}
@@ -79,13 +81,13 @@ export function DefaultCheckoutShell({
             ) : null}
             {schedulePicker ? (
               <section className="core-checkout__section">
-                <h3 className="core-checkout__section-title">Schedule</h3>
+                <h3 className="core-checkout__section-title">{t('checkout.schedule.title')}</h3>
                 {schedulePicker}
               </section>
             ) : null}
             <section className="core-checkout__section">
-              <h3 className="core-checkout__payment-title">Payment</h3>
-              <p className="core-checkout__payment-subtitle">All transactions are secure and encrypted.</p>
+              <h3 className="core-checkout__payment-title">{t('checkout.payment.title')}</h3>
+              <p className="core-checkout__payment-subtitle">{t('checkout.payment.secure')}</p>
               {paymentPicker}
             </section>
             <section className="core-checkout__section">
@@ -97,7 +99,7 @@ export function DefaultCheckoutShell({
           {/* Right pane: off-white — order summary */}
           <div className="core-checkout__page-summary">
             <div className="core-checkout__summary-card">
-              <h3 className="core-checkout__section-title">Order summary</h3>
+              <h3 className="core-checkout__section-title">{t('checkout.summary.title')}</h3>
               {cartItems}
               <div className="core-checkout__summary-promo">{promoInput}</div>
               <div className="core-checkout__summary-fees">{feesBreakdown}</div>
@@ -123,7 +125,7 @@ export function DefaultCheckoutShell({
           className={`core-checkout__tab${activeTab === 'summary' ? ' is-active' : ''}`}
           onClick={() => onTabChange('summary')}
         >
-          Summary {totalCount > 0 ? `(${totalCount})` : ''}
+          {t('checkout.tabs.summary')}{totalCount > 0 ? ` (${totalCount})` : ' '}
         </button>
         <button
           type="button"
@@ -131,24 +133,24 @@ export function DefaultCheckoutShell({
           onClick={() => onTabChange('checkout')}
           disabled={totalCount === 0}
         >
-          Checkout
+          {t('checkout.tabs.checkout')}
         </button>
       </div>
 
       {activeTab === 'summary' ? (
         <div className="core-checkout__summary">
           {totalCount === 0 ? (
-            <div className="core-checkout__empty"><p>Your cart is empty</p></div>
+            <div className="core-checkout__empty"><p>{t('checkout.summary.empty')}</p></div>
           ) : (
             <>
               {cartItems}
               <div className="core-checkout__summary-footer">
                 <div className="core-checkout__subtotal">
-                  <span>Subtotal</span>
+                  <span>{t('checkout.summary.subtotal')}</span>
                   <span>{formatMoney(subtotal, currency)}</span>
                 </div>
                 <button type="button" className="core-submit-btn" onClick={() => onTabChange('checkout')}>
-                  Proceed to checkout
+                  {t('checkout.summary.proceed')}
                 </button>
               </div>
             </>

package/components/checkout/policy-links.tsx

@@ -6,6 +6,7 @@ import { createPortal } from 'react-dom';
 import Link from 'next/link';
 import type { Page } from '../../types/page';
 import { useHref } from '../../hooks/use-href';
+import { useThemeStrings } from '../../provider';
 import { usePolicyModalStore } from '../../stores/policy-modal-store';
 import { PageRenderer } from '../../page-renderer';
 
@@ -23,6 +24,7 @@ function subscribeNoop(): () => void {
 }
 
 export function PolicyLinks({ policies }: { policies: Page[] }): JSX.Element | null {
+  const t = useThemeStrings();
   const activeSlug = usePolicyModalStore((s) => s.activeSlug);
   const open = usePolicyModalStore((s) => s.open);
   const close = usePolicyModalStore((s) => s.close);
@@ -59,7 +61,7 @@ export function PolicyLinks({ policies }: { policies: Page[] }): JSX.Element | n
         >
           <div className="core-policy-modal__head">
             <h2 className="core-policy-modal__title">{active.title}</h2>
-            <button type="button" className="core-policy-modal__close" aria-label="Close" onClick={close}>
+            <button type="button" className="core-policy-modal__close" aria-label={t('checkout.policy.close')} onClick={close}>
               <svg width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                 <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
               </svg>
@@ -70,7 +72,7 @@ export function PolicyLinks({ policies }: { policies: Page[] }): JSX.Element | n
           </div>
           <div className="core-policy-modal__foot">
             <Link href={href(`/${active.slug}`)} className="core-policy-modal__full-link" onClick={close}>
-              View full page
+              {t('checkout.policy.view')}
             </Link>
           </div>
         </div>
@@ -81,7 +83,7 @@ export function PolicyLinks({ policies }: { policies: Page[] }): JSX.Element | n
 
   return (
     <>
-      <nav className="core-checkout-policies" aria-label="Store policies">
+      <nav className="core-checkout-policies" aria-label={t('checkout.policy.list')}>
         {policies.map((policy) => (
           <button
             key={policy.id}

package/hooks/use-auth-flow.tsx

@@ -3,7 +3,7 @@
 import type { JSX } from 'react';
 import { createContext, useContext, useState, type ReactNode } from 'react';
 import { QueekSdkError, type EmailVerifyOtpResponse } from '@queekai/client-sdk';
-import { useStorefront } from '../provider';
+import { useStorefront, useThemeStrings } from '../provider';
 import { getQueekClient, setAuthTokens, QUEEK_AUTH_URL } from '../sdk/queek-client';
 import { useAuthModalStore } from '../stores/auth-modal-store';
 import { useUserStore } from '../stores/user-store';
@@ -63,32 +63,33 @@ interface PasswordAuthData {
   };
 }
 
-function mapEmailError(err: unknown): string {
+export function mapEmailError(err: unknown, t: (key: string) => string): string {
   if (err instanceof QueekSdkError) {
     switch (err.code) {
       case 'invalid_credentials':
-        return 'Wrong email or password. Please try again.';
+        return t('auth.error.credentials');
       case 'login_mode_mismatch':
-        return 'This account uses a different sign-in method (Google or phone).';
+        return t('auth.error.method');
       case 'account_already_exists':
-        return 'Email already registered. Please sign in instead.';
+        return t('auth.error.exists');
       case 'phone_already_exists':
-        return 'Phone number already in use.';
+        return t('auth.error.phone');
       case 'otp_resend_too_soon':
-        return 'Please wait before requesting another code.';
+        return t('auth.error.resend');
       case 'invalid_otp':
-        return 'Incorrect code. Please try again.';
+        return t('auth.error.code');
       default:
-        return err.message || 'Something went wrong. Please try again.';
+        return err.message || t('auth.error.generic');
     }
   }
-  return 'Something went wrong. Please try again.';
+  return t('auth.error.generic');
 }
 
 const AuthFlowContext = createContext<AuthFlowValue | null>(null);
 
 export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Element {
   const { vendor } = useStorefront();
+  const t = useThemeStrings();
   const closeModal = useAuthModalStore((s) => s.close);
   const setUser = useUserStore((s) => s.setUser);
 
@@ -131,7 +132,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Ele
       setOtp('');
       setStep('email-otp-verify');
     } catch (err) {
-      setError(mapEmailError(err));
+      setError(mapEmailError(err, t));
     } finally {
       setLoading(false);
     }
@@ -156,7 +157,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Ele
       applyUser(data.user);
       closeModal();
     } catch (err) {
-      setError(mapEmailError(err));
+      setError(mapEmailError(err, t));
       setOtp('');
     } finally {
       setLoading(false);
@@ -167,7 +168,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Ele
 
   const submitRegister = async (): Promise<void> => {
     if (!firstName.trim()) {
-      setError('Please enter your first name.');
+      setError(t('auth.error.firstname'));
       return;
     }
     setError(null);
@@ -183,7 +184,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Ele
       applyUser(res.user);
       closeModal();
     } catch (err) {
-      setError(err instanceof QueekSdkError ? err.message : 'Registration failed. Try again.');
+      setError(err instanceof QueekSdkError ? err.message : t('auth.error.register'));
     } finally {
       setLoading(false);
     }
@@ -206,7 +207,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Ele
       applyUser(res.data.user);
       closeModal();
     } catch (err) {
-      setError(mapEmailError(err));
+      setError(mapEmailError(err, t));
     } finally {
       setLoading(false);
     }
@@ -230,7 +231,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Ele
       applyUser(res.data.user);
       closeModal();
     } catch (err) {
-      setError(mapEmailError(err));
+      setError(mapEmailError(err, t));
     } finally {
       setLoading(false);
     }
@@ -272,7 +273,7 @@ export function AuthFlowProvider({ children }: { children: ReactNode }): JSX.Ele
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error('[google-auth] initiate failed', err);
-      setError('Could not connect to Google sign-in. Please try again.');
+      setError(t('auth.error.google'));
     } finally {
       setLoading(false);
     }

package/index.ts

@@ -48,9 +48,13 @@ export * from './utils/benefit-icon';
 export * from './utils/video-embed';
 export * from './utils/match-variant';
 export * from './utils/announcement';
+export * from './utils/locale';
 
 // Theme strings — the pure/server-safe i18n core (no next/*, no React).
 export * from './strings/theme-strings';
+// Pseudo-locale QA — dev/test-only dictionary transform + English-leak scan
+// (pure/server-safe: no next/*, no React, so theme-check can import it too).
+export * from './strings/pseudo-locale';
 
 // Rendering a theme's own demo.json — what makes local preview possible.
 export * from './demo';

package/locales/en.default.json

@@ -87,18 +87,29 @@
       "title": "Sign in",
       "subtitle": "Enter your email and password",
       "email": "Email address",
-      "password": "Password"
+      "password": "Password",
+      "signing": "Signing in…",
+      "create": "Don't have an account? Create one",
+      "code": "Use an email code instead"
     },
     "email": {
       "title": "Sign in",
       "subtitle": "Enter your email to continue",
+      "placeholder": "your@email.com",
       "or": "or",
-      "placeholder": "your@email.com"
+      "google": "Continue with Google",
+      "sending": "Sending code…",
+      "continue": "Continue",
+      "password": "Have a password? Sign in with it instead"
     },
     "code": {
       "title": "Enter code",
-      "sent": "{length}-digit code sent to {email}",
-      "digit": "Digit {index}"
+      "lead": "{length}-digit code sent to",
+      "digit": "Digit {index}",
+      "verifying": "Verifying…",
+      "verify": "Verify",
+      "resend": "Resend code",
+      "change": "← Change email"
     },
     "register": {
       "title": "Create account",
@@ -106,13 +117,30 @@
       "first": "First name",
       "last": "Last name (optional)",
       "email": "Email address",
-      "password": "Password (min 8 characters)"
+      "password": "Password (min 8 characters)",
+      "creating": "Creating account…",
+      "signin": "Already have an account? Sign in"
     },
     "signup": {
       "title": "Create your account",
       "subtitle": "Just a few details to get you started",
       "first": "First name",
-      "last": "Last name (optional)"
+      "last": "Last name (optional)",
+      "create": "Create account",
+      "creating": "Creating account…",
+      "different": "← Use a different email"
+    },
+    "error": {
+      "credentials": "Wrong email or password. Please try again.",
+      "method": "This account uses a different sign-in method (Google or phone).",
+      "exists": "Email already registered. Please sign in instead.",
+      "phone": "Phone number already in use.",
+      "resend": "Please wait before requesting another code.",
+      "code": "Incorrect code. Please try again.",
+      "generic": "Something went wrong. Please try again.",
+      "firstname": "Please enter your first name.",
+      "register": "Registration failed. Try again.",
+      "google": "Could not connect to Google sign-in. Please try again."
     }
   },
   "blog": {
@@ -132,7 +160,17 @@
       "x": "Share on X",
       "facebook": "Share on Facebook",
       "whatsapp": "Share on WhatsApp",
-      "copy": "Copy link"
+      "copy": "Copy link",
+      "copied": "Copied"
+    },
+    "related": {
+      "title": "Related posts"
+    },
+    "meta": {
+      "reading": {
+        "one": "{count} min read",
+        "other": "{count} min read"
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usequeek/theme-kit",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "private": false,
   "license": "MIT",
   "description": "The framework a Queek storefront theme is built against.",