@usequeek/theme-kit 0.1.20 → 0.1.22

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>

package/components/checkout/checkout-contact.tsx

@@ -3,16 +3,18 @@
 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';
 
 /**
  * First section of the checkout form — shows who's checking out. Ordering
- * requires auth (`canCheckout` in checkout-controller.tsx), so unlike
- * Shopify's guest-friendly email field this is purely an identity
- * confirmation: avatar + email when signed in, a sign-in prompt otherwise.
+ * requires auth (`canCheckout` in checkout-controller.tsx), so this is purely
+ * an identity confirmation, not an email field: avatar + email when signed in,
+ * a sign-in prompt otherwise.
  */
 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/components/image.tsx

@@ -35,11 +35,11 @@ type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
   fallback?: string;
   placeholder?: PlaceholderProp;
   /**
-   * The backend's srcset-ready tier map (product.media.image_variants,
+   * The API's srcset-ready tier map (product.media.image_variants,
    * vendor.logo_variants, collection.image_variants, mediaIndex[url], …).
-   * Purely additive: when absent — as it is at every call site that hasn't been
-   * migrated, and whenever the backend legitimately sends null (off-host image,
-   * SVG, legacy upload) — this component behaves exactly as it did before.
+   * Purely additive: when absent — and whenever the API legitimately sends null
+   * (off-host image, SVG, legacy upload) — this component renders the plain
+   * image URL.
    */
   variants?: ImageVariants | null;
   /**
@@ -133,7 +133,7 @@ export function Image({ fallback, placeholder, variants, intent = 'raw', onError
   // image is invisible until hover. Eager, a server-rendered grid of 24 cards
   // made React preload the first ~10 (also into the 103 Early Hints header) and
   // fetch every image at once, racing the page's render-blocking CSS: /shop's
-  // first paint went 1.8 s → 2.9 s on Slow 4G (24/9/26). Lazy is next/image's
+  // first paint went from 1.8 s to 2.9 s on Slow 4G. Lazy is next/image's
   // default as well. A theme whose card IS the page's main image passes
   // loading="eager" or fetchPriority="high".
   const lazyByDefault = (intent === 'card' || intent === 'card2x') && props.fetchPriority !== 'high';