create-brainerce-store 1.54.0 → 1.57.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.54.0",
+      version: "1.57.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -399,6 +399,9 @@ async function scaffold(options) {
      *  must keep using the escaped storeNameJs / storeNameEnv variants. */
     storeName: cleanStoreName,
     storeNameJs: toJsStringLiteral(cleanStoreName),
+    /** Pre-escaped for splicing into a JSON string value (no wrapping
+     *  quotes) — used by the `{{storeName}}` token in messages-patch files. */
+    storeNameJsonEscaped: JSON.stringify(cleanStoreName).slice(1, -1),
     titleTemplateJs: toJsStringLiteral(`%s | ${cleanStoreName}`),
     storeNameEnv: toEnvLiteral(cleanStoreName),
     currencyEnv: toEnvLiteral(cleanCurrency),
@@ -479,7 +482,11 @@ async function scaffold(options) {
         if (!await import_fs_extra.default.pathExists(patchFile)) continue;
         const targetFile = import_path.default.join(targetMessages, file);
         const base = await import_fs_extra.default.readJson(targetFile);
-        const patch = await import_fs_extra.default.readJson(patchFile);
+        const patchText = (await import_fs_extra.default.readFile(patchFile, "utf-8")).replace(
+          /\{\{storeName\}\}/g,
+          templateVars.storeNameJsonEscaped
+        );
+        const patch = JSON.parse(patchText);
         await import_fs_extra.default.writeJson(targetFile, deepMerge(base, patch), { spaces: 2 });
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.54.0",
+  "version": "1.57.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/app/category/[slug]/page.tsx

@@ -6,6 +6,7 @@ import { buildMetaDescription } from '@/core/lib/seo';
 import { sanitizeHtml } from '@/core/lib/sanitize';
 import { decodeSlug } from '@/core/lib/utils';
 import { CategoryJsonLd } from '@/components/seo/category-json-ld';
+import { Breadcrumbs } from '@/components/seo/breadcrumbs';
 import { ProductGrid } from '@/ui/product/product-grid';
 
 type Props = {
@@ -29,8 +30,9 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
     const description =
       category.metaDescription || buildMetaDescription(category.description) || category.name;
     const canonicalSlug = category.slug || slug;
-    const canonicalPath =
-      locale ? `/${locale}/category/${canonicalSlug}` : `/category/${canonicalSlug}`;
+    const canonicalPath = locale
+      ? `/${locale}/category/${canonicalSlug}`
+      : `/category/${canonicalSlug}`;
     return {
       title: category.name,
       description,
@@ -69,11 +71,23 @@ export default async function CategoryPage({ params }: Props) {
 
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
   const url = `${baseUrl}/category/${category.slug || slug}`;
+  const localePrefix = locale ? `/${locale}` : '';
+  const breadcrumbItems = [
+    { name: 'Home', href: `${localePrefix}/` },
+    ...category.breadcrumb
+      .filter((ancestor) => ancestor.slug)
+      .map((ancestor) => ({
+        name: ancestor.name,
+        href: `${localePrefix}/category/${ancestor.slug}`,
+      })),
+    { name: category.name },
+  ];
 
   return (
     <>
       <CategoryJsonLd category={category} url={url} />
       <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs items={breadcrumbItems} />
         <header className="mb-6">
           <h1 className="text-3xl font-bold tracking-tight">{category.name}</h1>
         </header>

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -1,157 +1,175 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { getProductPriceInfo } from 'brainerce';
-import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
-import { resolveCurrency } from '@/core/lib/resolve-currency';
-import { buildMetaDescription } from '@/core/lib/seo';
-import { decodeSlug } from '@/core/lib/utils';
-import { ProductJsonLd } from '@/components/seo/product-json-ld';
-import { ReviewsSection } from '@/ui/product/reviews-section';
-import { ProductClientSection } from '@/ui/product/product-client-section';
-
-type Props = {
-  params: Promise<{ slug: string; locale?: string }>;
-};
-
-function buildHreflang(
-  baseUrl: string,
-  baseSlug: string,
-  localeSlugs: Record<string, string>,
-  locales: string[],
-  defaultLoc: string
-): Record<string, string> {
-  const langs: Record<string, string> = {};
-  for (const loc of locales) {
-    const locSlug = localeSlugs[loc] || baseSlug;
-    const path = loc === defaultLoc ? `/products/${locSlug}` : `/${loc}/products/${locSlug}`;
-    langs[loc] = `${baseUrl}${path}`;
-  }
-  // x-default points to the default-locale canonical (no prefix)
-  langs['x-default'] = `${baseUrl}/products/${localeSlugs[defaultLoc] || baseSlug}`;
-  return langs;
-}
-
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-
-  try {
-    const client = getServerClient(locale);
-    // Fetch product + store info in parallel; storeInfo gives us the live
-    // currency for OG price tags (with env-var + USD fallbacks so we never
-    // silently emit a wrong currency when the API is briefly unreachable).
-    const [product, storeInfo] = await Promise.all([
-      client.getProductBySlug(slug),
-      fetchStoreInfo(locale),
-    ]);
-    const imageUrl = product.images?.[0]?.url;
-    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
-    // version of the visible description, then product name. We must NEVER
-    // emit raw HTML or a mid-word cut into <meta name="description">.
-    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
-    const seoDescription =
-      (product as { seoDescription?: string | null }).seoDescription ||
-      buildMetaDescription(product.description) ||
-      product.name;
-
-    // OG product meta tags drive WhatsApp / Facebook / X link previews and
-    // Google Merchant Center product enrichment. Emitting the literal "0"
-    // here (the previous bug) causes price-zero link cards. Use the real
-    // effective price from the SDK helper.
-    const priceInfo = getProductPriceInfo(product);
-    const currency = resolveCurrency(storeInfo);
-    const priceAmount = priceInfo.price > 0 ? priceInfo.price.toFixed(2) : null;
-    const inStock = product.inventory?.canPurchase !== false;
-    const brandName = (product as { brand?: { name?: string } | null }).brand?.name;
-
-    // Multilingual SEO: hreflang tags + correct canonical per locale.
-    // Locales come from storeInfo.i18n — already fetched above, zero extra cost.
-    const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
-    const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
-    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-    const baseSlug = product.slug || slug;
-    const localeSlugs = product.localeSlugs ?? {};
-
-    // Canonical: use the locale-specific slug for this locale when available.
-    const canonicalSlug = (locale && localeSlugs[locale]) || baseSlug;
-    const canonicalPath =
-      locale && locale !== defaultLoc
-        ? `/${locale}/products/${canonicalSlug}`
-        : `/products/${canonicalSlug}`;
-
-    const hreflangLanguages =
-      supportedLocales.length > 1
-        ? buildHreflang(baseUrl, baseSlug, localeSlugs, supportedLocales, defaultLoc)
-        : undefined;
-
-    return {
-      title: seoTitle,
-      description: seoDescription,
-      alternates: {
-        canonical: canonicalPath,
-        ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
-      },
-      openGraph: {
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
-        type: 'website',
-      },
-      twitter: {
-        card: 'summary_large_image',
-        title: seoTitle,
-        description: seoDescription,
-        images: imageUrl ? [imageUrl] : [],
-      },
-      // Emit the OG product extension (Facebook / WhatsApp / X link previews,
-      // Google Merchant Center). Skips the price pair entirely when the SDK
-      // can't determine a positive amount, rather than shipping "0".
-      other: {
-        ...(priceAmount
-          ? {
-              'og:price:amount': priceAmount,
-              'og:price:currency': currency,
-              'product:price:amount': priceAmount,
-              'product:price:currency': currency,
-            }
-          : {}),
-        'product:availability': inStock ? 'in stock' : 'out of stock',
-        'product:condition': 'new',
-        ...(brandName ? { 'product:brand': brandName } : {}),
-      },
-    };
-  } catch {
-    return {
-      title: 'Product not found',
-    };
-  }
-}
-
-export default async function ProductDetailPage({ params }: Props) {
-  const { slug: rawSlug, locale } = await params;
-  const slug = decodeSlug(rawSlug);
-
-  let product;
-  try {
-    const client = getServerClient(locale);
-    product = await client.getProductBySlug(slug);
-  } catch {
-    notFound();
-  }
-
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-  const productUrl = `${baseUrl}/products/${slug}`;
-  // Reuse the cached storeInfo from generateMetadata's call — React cache()
-  // collapses both into one backend request per render. resolveCurrency owns
-  // the env-var + USD fallback chain so this stays a single source of truth.
-  const storeInfo = await fetchStoreInfo(locale);
-  const currency = resolveCurrency(storeInfo);
-
-  return (
-    <>
-      <ProductJsonLd product={product} url={productUrl} currency={currency} />
-      <ProductClientSection product={product} />
-      <ReviewsSection productId={product.id} />
-    </>
-  );
-}
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getProductPriceInfo } from 'brainerce';
+import { getServerClient, fetchStoreInfo } from '@/core/lib/brainerce';
+import { resolveCurrency } from '@/core/lib/resolve-currency';
+import { buildMetaDescription } from '@/core/lib/seo';
+import { decodeSlug } from '@/core/lib/utils';
+import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { Breadcrumbs } from '@/components/seo/breadcrumbs';
+import { ReviewsSection } from '@/ui/product/reviews-section';
+import { ProductClientSection } from '@/ui/product/product-client-section';
+
+type Props = {
+  params: Promise<{ slug: string; locale?: string }>;
+};
+
+function buildHreflang(
+  baseUrl: string,
+  baseSlug: string,
+  localeSlugs: Record<string, string>,
+  locales: string[],
+  defaultLoc: string
+): Record<string, string> {
+  const langs: Record<string, string> = {};
+  for (const loc of locales) {
+    const locSlug = localeSlugs[loc] || baseSlug;
+    const path = loc === defaultLoc ? `/products/${locSlug}` : `/${loc}/products/${locSlug}`;
+    langs[loc] = `${baseUrl}${path}`;
+  }
+  // x-default points to the default-locale canonical (no prefix)
+  langs['x-default'] = `${baseUrl}/products/${localeSlugs[defaultLoc] || baseSlug}`;
+  return langs;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+
+  try {
+    const client = getServerClient(locale);
+    // Fetch product + store info in parallel; storeInfo gives us the live
+    // currency for OG price tags (with env-var + USD fallbacks so we never
+    // silently emit a wrong currency when the API is briefly unreachable).
+    const [product, storeInfo] = await Promise.all([
+      client.getProductBySlug(slug),
+      fetchStoreInfo(locale),
+    ]);
+    const imageUrl = product.images?.[0]?.url;
+    // Prefer merchant-authored SEO copy; fall back to a stripped+truncated
+    // version of the visible description, then product name. We must NEVER
+    // emit raw HTML or a mid-word cut into <meta name="description">.
+    const seoTitle = (product as { seoTitle?: string | null }).seoTitle || product.name;
+    const seoDescription =
+      (product as { seoDescription?: string | null }).seoDescription ||
+      buildMetaDescription(product.description) ||
+      product.name;
+
+    // OG product meta tags drive WhatsApp / Facebook / X link previews and
+    // Google Merchant Center product enrichment. Emitting the literal "0"
+    // here (the previous bug) causes price-zero link cards. Use the real
+    // effective price from the SDK helper.
+    const priceInfo = getProductPriceInfo(product);
+    const currency = resolveCurrency(storeInfo);
+    const priceAmount = priceInfo.price > 0 ? priceInfo.price.toFixed(2) : null;
+    const inStock = product.inventory?.canPurchase !== false;
+    const brandName = (product as { brand?: { name?: string } | null }).brand?.name;
+
+    // Multilingual SEO: hreflang tags + correct canonical per locale.
+    // Locales come from storeInfo.i18n — already fetched above, zero extra cost.
+    const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
+    const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
+    const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+    const baseSlug = product.slug || slug;
+    const localeSlugs = product.localeSlugs ?? {};
+
+    // Canonical: use the locale-specific slug for this locale when available.
+    const canonicalSlug = (locale && localeSlugs[locale]) || baseSlug;
+    const canonicalPath =
+      locale && locale !== defaultLoc
+        ? `/${locale}/products/${canonicalSlug}`
+        : `/products/${canonicalSlug}`;
+
+    const hreflangLanguages =
+      supportedLocales.length > 1
+        ? buildHreflang(baseUrl, baseSlug, localeSlugs, supportedLocales, defaultLoc)
+        : undefined;
+
+    return {
+      title: seoTitle,
+      description: seoDescription,
+      alternates: {
+        canonical: canonicalPath,
+        ...(hreflangLanguages ? { languages: hreflangLanguages } : {}),
+      },
+      openGraph: {
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: seoTitle,
+        description: seoDescription,
+        images: imageUrl ? [imageUrl] : [],
+      },
+      // Emit the OG product extension (Facebook / WhatsApp / X link previews,
+      // Google Merchant Center). Skips the price pair entirely when the SDK
+      // can't determine a positive amount, rather than shipping "0".
+      other: {
+        ...(priceAmount
+          ? {
+              'og:price:amount': priceAmount,
+              'og:price:currency': currency,
+              'product:price:amount': priceAmount,
+              'product:price:currency': currency,
+            }
+          : {}),
+        'product:availability': inStock ? 'in stock' : 'out of stock',
+        'product:condition': 'new',
+        ...(brandName ? { 'product:brand': brandName } : {}),
+      },
+    };
+  } catch {
+    return {
+      title: 'Product not found',
+    };
+  }
+}
+
+export default async function ProductDetailPage({ params }: Props) {
+  const { slug: rawSlug, locale } = await params;
+  const slug = decodeSlug(rawSlug);
+
+  let product;
+  try {
+    const client = getServerClient(locale);
+    product = await client.getProductBySlug(slug);
+  } catch {
+    notFound();
+  }
+
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const productUrl = `${baseUrl}/products/${slug}`;
+  // Reuse the cached storeInfo from generateMetadata's call — React cache()
+  // collapses both into one backend request per render. resolveCurrency owns
+  // the env-var + USD fallback chain so this stays a single source of truth.
+  const storeInfo = await fetchStoreInfo(locale);
+  const currency = resolveCurrency(storeInfo);
+  const localePrefix = locale ? `/${locale}` : '';
+  const primaryCategory = product.categories?.find((c) => c.slug);
+  const breadcrumbItems = [
+    { name: 'Home', href: `${localePrefix}/` },
+    ...(primaryCategory
+      ? [{ name: primaryCategory.name, href: `${localePrefix}/category/${primaryCategory.slug}` }]
+      : []),
+    { name: product.name },
+  ];
+
+  return (
+    <>
+      <ProductJsonLd
+        product={product}
+        url={productUrl}
+        currency={currency}
+        shipping={storeInfo?.shipping}
+      />
+      <div className="mx-auto max-w-7xl px-4 pt-6 sm:px-6 lg:px-8">
+        <Breadcrumbs items={breadcrumbItems} />
+      </div>
+      <ProductClientSection product={product} />
+      <ReviewsSection productId={product.id} />
+    </>
+  );
+}

package/templates/nextjs/base/src/components/seo/breadcrumbs.tsx

@@ -0,0 +1,37 @@
+import Link from 'next/link';
+
+interface Crumb {
+  name: string;
+  /** Site-relative path, e.g. "/category/shoes". Omit on the current (last) crumb. */
+  href?: string;
+}
+
+/**
+ * Visible breadcrumb trail. Renders the exact same path structured data
+ * already declares (see category-json-ld.tsx / product-json-ld.tsx) as real
+ * `<Link>`s — search engines weight on-page navigation links much more than
+ * sitemap-only or script-only (JSON-LD) mentions of a URL.
+ */
+export function Breadcrumbs({ items }: { items: Crumb[] }) {
+  if (items.length < 2) return null;
+  return (
+    <nav aria-label="Breadcrumb" className="text-muted-foreground mb-4 text-sm">
+      <ol className="flex flex-wrap items-center gap-1.5">
+        {items.map((item, idx) => (
+          <li key={`${item.name}-${idx}`} className="flex items-center gap-1.5">
+            {idx > 0 && <span aria-hidden="true">/</span>}
+            {item.href ? (
+              <Link href={item.href} className="hover:text-foreground transition-colors">
+                {item.name}
+              </Link>
+            ) : (
+              <span aria-current="page" className="text-foreground">
+                {item.name}
+              </span>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -1,4 +1,4 @@
-import type { Product } from 'brainerce';
+import type { Product, ShippingSummaryEntry } from 'brainerce';
 import { getProductPriceInfo } from 'brainerce';
 import { getNonce } from '@/core/lib/nonce';
 import { resolveCurrency } from '@/core/lib/resolve-currency';
@@ -8,9 +8,11 @@ interface ProductJsonLdProps {
   product: Product;
   url: string;
   currency?: string;
+  /** From `storeInfo.shipping` — real flat-rate/free zones only. Omitted entirely when unset, never fabricated. */
+  shipping?: ShippingSummaryEntry[];
 }
 
-export async function ProductJsonLd({ product, url, currency }: ProductJsonLdProps) {
+export async function ProductJsonLd({ product, url, currency, shipping }: ProductJsonLdProps) {
   // Defer to the shared server helper so the env-var + USD fallback chain
   // lives in exactly one place across all server-side currency reads.
   const resolvedCurrency = resolveCurrency(null, currency);
@@ -24,6 +26,44 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
       ? 'https://schema.org/InStock'
       : 'https://schema.org/OutOfStock';
 
+  // All Brainerce catalog listings are first-party new-goods sales — no
+  // used/refurbished condition data exists anywhere in the product model, so
+  // this is a deliberate always-true assumption, not a per-product field.
+  const itemCondition = 'https://schema.org/NewCondition';
+
+  const shippingDetails = (shipping ?? [])
+    .filter((z) => z.amount !== null)
+    .map((z) => ({
+      '@type': 'OfferShippingDetails',
+      shippingRate: { '@type': 'MonetaryAmount', value: z.amount, currency: resolvedCurrency },
+      shippingDestination: { '@type': 'DefinedRegion', addressCountry: z.countries },
+      ...(z.handlingTime != null || z.minDeliveryDays != null || z.maxDeliveryDays != null
+        ? {
+            deliveryTime: {
+              '@type': 'ShippingDeliveryTime',
+              ...(z.handlingTime != null
+                ? {
+                    handlingTime: {
+                      '@type': 'QuantitativeValue',
+                      minValue: 0,
+                      maxValue: z.handlingTime,
+                    },
+                  }
+                : {}),
+              ...(z.minDeliveryDays != null || z.maxDeliveryDays != null
+                ? {
+                    transitTime: {
+                      '@type': 'QuantitativeValue',
+                      minValue: z.minDeliveryDays ?? z.maxDeliveryDays,
+                      maxValue: z.maxDeliveryDays ?? z.minDeliveryDays,
+                    },
+                  }
+                : {}),
+            },
+          }
+        : {}),
+    }));
+
   const isVariable = product.type === 'VARIABLE';
   const offers =
     isVariable && product.priceMin
@@ -34,6 +74,8 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
           offerCount: product.variants?.length ?? 1,
           priceCurrency: resolvedCurrency,
           availability,
+          itemCondition,
+          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
           url,
         }
       : {
@@ -41,6 +83,11 @@ export async function ProductJsonLd({ product, url, currency }: ProductJsonLdPro
           price: priceInfo.price,
           priceCurrency: resolvedCurrency,
           availability,
+          itemCondition,
+          ...(product.salePrice && product.salePriceEndsAt
+            ? { priceValidUntil: product.salePriceEndsAt }
+            : {}),
+          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
           url,
         };
 

package/templates/nextjs/base/src/core/lib/store-info.ts

@@ -23,6 +23,8 @@ export interface PublicStoreInfo {
   requireEmailVerification?: boolean;
   upsell?: StoreInfo['upsell'];
   i18n?: StoreInfo['i18n'];
+  /** Real flat-rate/free shipping zones — feeds Product JSON-LD `shippingDetails`. Public by design (merchants display shipping rates openly). */
+  shipping?: StoreInfo['shipping'];
 }
 
 /**
@@ -44,5 +46,6 @@ export function pickPublicStoreInfo(raw: StoreInfo): PublicStoreInfo {
     requireEmailVerification: raw.requireEmailVerification,
     upsell: raw.upsell,
     i18n: raw.i18n,
+    shipping: raw.shipping,
   };
 }

package/templates/nextjs/designs/atelier/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 /* ---------------------------------------------------------------------------
-   Design system — "Atelier" (premium modern jewelry commerce)
+   Design system — "Atelier" (premium modern handcrafted-goods commerce)
    Palette (5 total): warm white / warm ink / deep forest / warm sand (2 tints)
    + functional destructive. Tokens only — never raw colors in components.
 --------------------------------------------------------------------------- */
@@ -350,9 +350,10 @@
   .cart-bump { animation: cart-bump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
 }
 
-/* Full-page loader — a gem orbiting a ring band (Atelier's "polishing" mark).
-   Static ring + gem under reduced motion; the orbit/breathe are additive. */
-.loader-orbit {
+/* Full-page loader — a soft pulsing core inside a thin rotating ring
+   (Atelier's breathing mark). No iconography, so it fits any store niche.
+   Static ring + core under reduced motion; the spin/breathe are additive. */
+.loader-ring {
   position: relative;
   display: flex;
   height: 3.5rem;
@@ -360,35 +361,40 @@
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
-  border: 1px solid hsl(var(--primary) / 0.25);
-  box-shadow: inset 0 0 18px hsl(var(--primary) / 0.06);
+  border: 1px solid hsl(var(--primary) / 0.15);
 }
-.loader-orbit-dot {
-  position: absolute;
-  inset: 0;
-}
-.loader-orbit-dot::before {
+.loader-ring::before {
   content: '';
   position: absolute;
-  top: -3px;
-  inset-inline-start: 50%;
-  margin-inline-start: -3.5px;
-  height: 7px;
-  width: 7px;
+  inset: -1px;
+  border-radius: 9999px;
+  border: 1.5px solid transparent;
+  border-top-color: hsl(var(--primary) / 0.9);
+}
+.loader-ring-core {
+  height: 0.6rem;
+  width: 0.6rem;
   border-radius: 9999px;
   background: hsl(var(--primary));
-  box-shadow: 0 0 12px hsl(var(--primary) / 0.55);
+  box-shadow: 0 0 12px hsl(var(--primary) / 0.4);
 }
 @media (prefers-reduced-motion: no-preference) {
-  .loader-orbit-dot {
-    animation: orbit 1.5s cubic-bezier(0.55, 0.12, 0.45, 0.88) infinite;
+  .loader-ring::before {
+    animation: ring-spin 1.4s linear infinite;
+  }
+  .loader-ring-core {
+    animation: ring-breathe 2s ease-in-out infinite;
   }
   .loader-text {
     animation: loader-breathe 2.2s ease-in-out infinite;
   }
-  @keyframes orbit {
+  @keyframes ring-spin {
     to { transform: rotate(360deg); }
   }
+  @keyframes ring-breathe {
+    0%, 100% { opacity: 0.45; transform: scale(0.85); }
+    50% { opacity: 1; transform: scale(1); }
+  }
   @keyframes loader-breathe {
     0%, 100% { opacity: 0.55; }
     50% { opacity: 1; }