create-brainerce-store 1.55.0 → 1.58.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.55.0",
+      version: "1.58.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/package.json

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

package/templates/nextjs/base/src/components/checkout/payment-step.tsx

@@ -77,6 +77,13 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   const { storeInfo } = useStoreInfo();
 
   const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
+
+  // The provider's payment URL. `clientSdk.renderArg` is the URL; `clientSecret`
+  // is only a fallback for providers that duplicate it there. Reading
+  // clientSecret alone breaks providers that return a real identifier (MAX,
+  // Takbull) — the iframe/link silently points at an id instead of a page.
+  const paymentIntentUrl =
+    paymentIntent?.clientSdk?.renderArg || paymentIntent?.clientSecret || '';
   const [preloadedSdk, setPreloadedSdk] = useState<PaymentClientSdk | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -368,12 +375,20 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       // Sandbox mode — no SDK to load, UI handles it
       if (sdk.renderType === 'sandbox') return;
 
+      // The URL to send the customer to is `renderArg`; `clientSecret` is only
+      // a fallback for providers that duplicate the URL into it. Reading
+      // clientSecret first silently breaks any provider that puts a real
+      // identifier there (MAX, Takbull) — the host check rejects the id and the
+      // customer never reaches the payment page. Mirrors the sdk-widget branch
+      // above, which already prefers renderArg.
+      const paymentUrl = sdk.renderArg || intent.clientSecret;
+
       if (sdk.renderType === 'redirect') {
-        if (!isAllowedPaymentUrl(intent.clientSecret)) {
+        if (!isAllowedPaymentUrl(paymentUrl)) {
           setError(t('paymentRedirectBlocked'));
           return;
         }
-        safePaymentRedirect(intent.clientSecret);
+        safePaymentRedirect(paymentUrl);
         return;
       }
 
@@ -383,13 +398,13 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       //   (2) a Brainerce-hosted embed page on an allowlisted payment host
       //       that wraps provider-specific logic (e.g. Cardcom OpenFields).
       if (sdk.renderType === 'iframe') {
-        if (!isAllowedPaymentUrl(intent.clientSecret)) {
+        if (!isAllowedPaymentUrl(paymentUrl)) {
           setError(t('paymentRedirectBlocked'));
           return;
         }
         const iframeOrigin = (() => {
           try {
-            return new URL(intent.clientSecret).origin;
+            return new URL(paymentUrl).origin;
           } catch {
             return '';
           }
@@ -622,7 +637,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       return (
         <div className={cn('w-full', className)}>
           <iframe
-            src={paymentIntent.clientSecret}
+            src={paymentIntentUrl}
             className="block w-full border-0"
             style={iframeStyle}
             title={t('payment')}
@@ -681,7 +696,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
             </div>
             {/* Iframe body */}
             <iframe
-              src={paymentIntent.clientSecret}
+              src={paymentIntentUrl}
               className="w-full border-0"
               style={iframeStyle}
               title={t('payment')}
@@ -724,7 +739,7 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       <p className="text-muted-foreground mt-4 text-sm">{t('redirectingToPayment')}</p>
       <p className="text-muted-foreground mt-2 text-xs">
         {t('redirectingHint')}
-        <a href={paymentIntent.clientSecret} className="text-primary hover:underline">
+        <a href={paymentIntentUrl} className="text-primary hover:underline">
           {t('clickHere')}
         </a>
         .

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

@@ -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; }

package/templates/nextjs/designs/atelier/ui/cart/cart-drawer.tsx

@@ -75,7 +75,7 @@ export function CartDrawer() {
         onClick={close}
         aria-hidden="true"
         className={cn(
-          'absolute inset-0 bg-foreground/35 backdrop-blur-[2px] transition-opacity duration-300 motion-reduce:transition-none',
+          'bg-foreground/35 absolute inset-0 backdrop-blur-[2px] transition-opacity duration-300 motion-reduce:transition-none',
           open ? 'opacity-100' : 'opacity-0'
         )}
       />
@@ -86,14 +86,14 @@ export function CartDrawer() {
         aria-modal="true"
         aria-label={t('title')}
         className={cn(
-          'absolute inset-y-0 end-0 flex w-full max-w-md flex-col bg-background shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:rounded-s-3xl sm:border-s',
+          'bg-background absolute inset-y-0 end-0 flex w-full max-w-md flex-col shadow-2xl transition-transform duration-300 ease-out motion-reduce:transition-none sm:rounded-s-3xl sm:border-s',
           open ? 'translate-x-0' : 'ltr:translate-x-full rtl:-translate-x-full'
         )}
       >
         <header className="flex items-center gap-3 border-b px-5 py-4">
-          <h2 className="font-display text-xl font-semibold text-foreground">{t('title')}</h2>
+          <h2 className="font-display text-foreground text-xl font-semibold">{t('title')}</h2>
           {itemCount > 0 && (
-            <span className="flex h-6 min-w-6 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-bold text-primary-foreground">
+            <span className="bg-primary text-primary-foreground flex h-6 min-w-6 items-center justify-center rounded-full px-1.5 text-xs font-bold">
               {itemCount}
             </span>
           )}
@@ -102,7 +102,7 @@ export function CartDrawer() {
             type="button"
             onClick={close}
             aria-label={tc('close')}
-            className="ms-auto flex h-10 w-10 items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary"
+            className="text-foreground hover:bg-secondary ms-auto flex h-10 w-10 items-center justify-center rounded-full transition-colors"
           >
             <IconX size={20} />
           </button>
@@ -110,11 +110,11 @@ export function CartDrawer() {
 
         {items.length === 0 ? (
           <div className="flex flex-1 flex-col items-center justify-center gap-3 px-6 text-center">
-            <span className="flex h-16 w-16 items-center justify-center rounded-full bg-secondary text-muted-foreground">
+            <span className="bg-secondary text-muted-foreground flex h-16 w-16 items-center justify-center rounded-full">
               <IconBag size={24} />
             </span>
-            <p className="font-display text-lg font-semibold text-foreground">{t('emptyTitle')}</p>
-            <p className="max-w-xs text-sm text-muted-foreground">{t('emptySubtitle')}</p>
+            <p className="font-display text-foreground text-lg font-semibold">{t('emptyTitle')}</p>
+            <p className="text-muted-foreground max-w-xs text-sm">{t('emptySubtitle')}</p>
             <Link href="/products" onClick={close} className="btn-primary btn-sm mt-2">
               {tc('continueShopping')}
             </Link>
@@ -132,25 +132,25 @@ export function CartDrawer() {
               </ul>
             </div>
 
-            <footer className="border-t bg-secondary/40 px-5 py-4">
+            <footer className="bg-secondary/40 border-t px-5 py-4">
               <div className="flex items-center justify-between text-sm">
                 <span className="text-muted-foreground">{tc('subtotal')}</span>
-                <strong className="text-base text-foreground">
+                <strong className="text-foreground text-base">
                   {formatPrice(totals.subtotal, { currency }) as string}
                 </strong>
               </div>
               {totals.discount > 0 && (
-                <div className="mt-1 flex items-center justify-between text-sm text-primary">
+                <div className="text-primary mt-1 flex items-center justify-between text-sm">
                   <span>{tc('discount')}</span>
                   <span>-{formatPrice(totals.discount, { currency }) as string}</span>
                 </div>
               )}
-              <p className="mt-1 text-xs text-muted-foreground">{t('shippingAtCheckout')}</p>
+              <p className="text-muted-foreground mt-1 text-xs">{t('shippingAtCheckout')}</p>
               <div className="mt-4 grid gap-2">
-                <Link href="/checkout" onClick={close} className="btn-primary w-full">
+                <Link href="/checkout" onClick={close} className="btn-primary btn-lg w-full">
                   {t('proceedToCheckout')}
                 </Link>
-                <Link href="/cart" onClick={close} className="btn-outline w-full">
+                <Link href="/cart" onClick={close} className="btn-outline btn-lg w-full">
                   {t('viewCart')}
                 </Link>
               </div>

package/templates/nextjs/designs/atelier/ui/home/benefits-band.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import { useTranslations } from '@/core/lib/translations';
-import { IconTruck, IconShield, IconGem, IconReturn } from '@/ui/shared/icons';
+import { IconTruck, IconShield, IconBadgeCheck, IconReturn } from '@/ui/shared/icons';
 
 const BENEFITS = [
   { icon: IconTruck, titleKey: 'benefit1Title', descKey: 'benefit1Desc' },
   { icon: IconShield, titleKey: 'benefit2Title', descKey: 'benefit2Desc' },
-  { icon: IconGem, titleKey: 'benefit3Title', descKey: 'benefit3Desc' },
+  { icon: IconBadgeCheck, titleKey: 'benefit3Title', descKey: 'benefit3Desc' },
   { icon: IconReturn, titleKey: 'benefit4Title', descKey: 'benefit4Desc' },
 ] as const;
 
@@ -19,12 +19,12 @@ export function BenefitsBand() {
       <ul className="container-page grid grid-cols-2 gap-x-6 gap-y-8 pb-10 pt-16 lg:grid-cols-4">
         {BENEFITS.map(({ icon: Icon, titleKey, descKey }) => (
           <li key={titleKey} className="flex items-start gap-3.5">
-            <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-secondary text-primary">
+            <span className="bg-secondary text-primary flex h-11 w-11 shrink-0 items-center justify-center rounded-full">
               <Icon size={24} />
             </span>
             <div>
-              <p className="text-sm font-semibold text-foreground">{t(titleKey)}</p>
-              <p className="mt-0.5 text-[13px] leading-5 text-muted-foreground">{t(descKey)}</p>
+              <p className="text-foreground text-sm font-semibold">{t(titleKey)}</p>
+              <p className="text-muted-foreground mt-0.5 text-[13px] leading-5">{t(descKey)}</p>
             </div>
           </li>
         ))}

package/templates/nextjs/designs/atelier/ui/product/product-client-section.tsx

@@ -22,7 +22,7 @@ import {
   IconMinus,
   IconPlus,
   IconTruck,
-  IconGem,
+  IconBadgeCheck,
   IconDownload,
 } from '@/ui/shared/icons';
 
@@ -159,7 +159,10 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
         {/* Image Gallery */}
         <figure className="lg:sticky lg:top-24 lg:self-start">
           {/* `relative` + `aspect-square` are layout-critical for next/image fill */}
-          <div data-pdp-gallery className="relative aspect-square overflow-hidden rounded-3xl border bg-secondary shadow-[0_28px_60px_-30px_hsl(var(--primary)/0.3)]">
+          <div
+            data-pdp-gallery
+            className="bg-secondary relative aspect-square overflow-hidden rounded-3xl border shadow-[0_28px_60px_-30px_hsl(var(--primary)/0.3)]"
+          >
             {mainImageUrl ? (
               <Image
                 src={mainImageUrl}
@@ -184,10 +187,10 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                   onClick={() => setSelectedImageIndex(idx)}
                   aria-pressed={selectedImageIndex === idx}
                   className={cn(
-                    'relative h-[4.5rem] w-[4.5rem] overflow-hidden rounded-lg border-2 bg-secondary transition-colors',
+                    'bg-secondary relative h-[4.5rem] w-[4.5rem] overflow-hidden rounded-lg border-2 transition-colors',
                     selectedImageIndex === idx
                       ? 'border-primary'
-                      : 'border-transparent hover:border-border'
+                      : 'hover:border-border border-transparent'
                   )}
                 >
                   <Image
@@ -220,9 +223,9 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           {/* Brand */}
           {(product as { brands?: Array<{ id: string; name: string }> }).brands &&
             (product as { brands: Array<{ id: string; name: string }> }).brands.length > 0 && (
-              <p className="mb-1 text-sm text-muted-foreground">
+              <p className="text-muted-foreground mb-1 text-sm">
                 {t('by')}{' '}
-                <span className="font-medium text-foreground">
+                <span className="text-foreground font-medium">
                   {(product as { brands: Array<{ id: string; name: string }> }).brands
                     .map((b) => b.name)
                     .join(', ')}
@@ -237,7 +240,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           {(product as unknown as { tags?: Array<{ id: string; name: string }> }).tags &&
             (product as unknown as { tags: Array<{ id: string; name: string }> }).tags.length >
               0 && (
-              <ul className="mt-2 flex flex-wrap gap-1.5 text-xs text-muted-foreground">
+              <ul className="text-muted-foreground mt-2 flex flex-wrap gap-1.5 text-xs">
                 {(product as unknown as { tags: Array<{ id: string; name: string }> }).tags.map(
                   (tag) => (
                     <li key={tag.id}>#{tag.name}</li>
@@ -265,11 +268,11 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
 
           {/* Downloadable files info */}
           {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
-            <section className="mt-6 rounded-xl border bg-secondary/60 p-4">
+            <section className="bg-secondary/60 mt-6 rounded-xl border p-4">
               <h2 className="text-sm font-semibold">
                 {t('filesIncluded').replace('{count}', String(product.downloads.length))}
               </h2>
-              <ul className="mt-2 space-y-1.5 text-sm text-muted-foreground">
+              <ul className="text-muted-foreground mt-2 space-y-1.5 text-sm">
                 {product.downloads.map((file: DownloadFile) => (
                   <li key={file.id} className="flex items-center gap-2">
                     <IconDownload size={16} />
@@ -322,7 +325,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                 />
               ))}
               {modifierError && (
-                <p role="alert" className="text-sm font-medium text-destructive">
+                <p role="alert" className="text-destructive text-sm font-medium">
                   {modifierError}
                 </p>
               )}
@@ -340,7 +343,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                 type="button"
                 onClick={() => setQuantity((q) => Math.max(1, q - 1))}
                 aria-label={t('decreaseQuantity')}
-                className="flex h-full w-11 items-center justify-center rounded-s-full text-foreground transition-colors hover:bg-secondary disabled:opacity-40"
+                className="text-foreground hover:bg-secondary flex h-full w-11 items-center justify-center rounded-s-full transition-colors disabled:opacity-40"
                 disabled={quantity <= 1}
               >
                 <IconMinus size={16} />
@@ -352,7 +355,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                 type="button"
                 onClick={() => setQuantity((q) => q + 1)}
                 aria-label={t('increaseQuantity')}
-                className="flex h-full w-11 items-center justify-center rounded-e-full text-foreground transition-colors hover:bg-secondary"
+                className="text-foreground hover:bg-secondary flex h-full w-11 items-center justify-center rounded-e-full transition-colors"
               >
                 <IconPlus size={16} />
               </button>
@@ -360,7 +363,10 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
 
             <button
               type="button"
-              onClick={() => { flyToCart(firstVisible('[data-pdp-gallery]')); handleAddToCart(); }}
+              onClick={() => {
+                flyToCart(firstVisible('[data-pdp-gallery]'));
+                handleAddToCart();
+              }}
               disabled={!canPurchase || addingToCart}
               className={cn(
                 'btn-primary btn-lg flex-1 sm:min-w-64 sm:flex-none',
@@ -379,7 +385,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
           </div>
 
           {/* Reassurance row */}
-          <ul className="mt-6 space-y-2 border-t pt-5 text-sm text-muted-foreground">
+          <ul className="text-muted-foreground mt-6 space-y-2 border-t pt-5 text-sm">
             <li className="flex items-center gap-2.5">
               <span className="text-primary">
                 <IconTruck size={20} />
@@ -388,7 +394,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
             </li>
             <li className="flex items-center gap-2.5">
               <span className="text-primary">
-                <IconGem size={20} />
+                <IconBadgeCheck size={20} />
               </span>
               {t('guaranteeNote')}
             </li>
@@ -396,7 +402,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
 
           {/* Download after purchase note */}
           {product.isDownloadable && (
-            <p className="mt-4 text-sm text-muted-foreground">{t('downloadAfterPurchase')}</p>
+            <p className="text-muted-foreground mt-4 text-sm">{t('downloadAfterPurchase')}</p>
           )}
 
           {/* Description */}
@@ -424,7 +430,7 @@ export function ProductClientSection({ product: initialProduct }: ProductClientS
                     <tr key={field.id} className="odd:bg-secondary/50">
                       <th
                         scope="row"
-                        className="w-1/3 px-4 py-3 text-start font-medium text-muted-foreground"
+                        className="text-muted-foreground w-1/3 px-4 py-3 text-start font-medium"
                       >
                         {field.definitionName}
                       </th>

package/templates/nextjs/designs/atelier/ui/product/product-grid.tsx

@@ -5,7 +5,7 @@ import { Link } from '@/core/lib/navigation';
 import { useTranslations } from '@/core/lib/translations';
 import { ProductCard } from '@/ui/product/product-card';
 import { cn } from '@/core/lib/utils';
-import { IconGem } from '@/ui/shared/icons';
+import { IconSparkle } from '@/ui/shared/icons';
 
 interface ProductGridProps {
   products: Product[];
@@ -20,11 +20,11 @@ export function ProductGrid({ products, className }: ProductGridProps) {
   if (products.length === 0) {
     return (
       <div className="card mx-auto flex max-w-md flex-col items-center gap-3 px-8 py-14 text-center">
-        <span className="flex h-14 w-14 items-center justify-center rounded-full bg-secondary text-primary">
-          <IconGem size={28} />
+        <span className="bg-secondary text-primary flex h-14 w-14 items-center justify-center rounded-full">
+          <IconSparkle size={28} />
         </span>
-        <p className="font-display text-xl text-foreground">{t('emptyTitle')}</p>
-        <p className="text-sm text-muted-foreground">{t('emptyBody')}</p>
+        <p className="font-display text-foreground text-xl">{t('emptyTitle')}</p>
+        <p className="text-muted-foreground text-sm">{t('emptyBody')}</p>
         <Link href="/products" className="btn-soft btn-sm mt-2">
           {tc('viewAll')}
         </Link>
@@ -33,12 +33,7 @@ export function ProductGrid({ products, className }: ProductGridProps) {
   }
 
   return (
-    <div
-      className={cn(
-        'grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6',
-        className
-      )}
-    >
+    <div className={cn('grid grid-cols-2 gap-3 sm:gap-5 lg:grid-cols-4 lg:gap-6', className)}>
       {products.map((product) => (
         <ProductCard key={product.id} product={product} />
       ))}

package/templates/nextjs/designs/atelier/ui/shared/icons.tsx

@@ -1,269 +1,276 @@
-/**
- * Inline icon set — minimal 24px-grid stroke icons (lucide-style).
- * The project ships no icon dependency; every icon in the storefront comes
- * from here so sizing (16/20/24) and stroke weight stay consistent.
- * All icons are decorative by default (aria-hidden) — pair with sr-only text.
- */
-import * as React from 'react';
-
-export type IconProps = {
-  size?: 16 | 18 | 20 | 24 | 28 | 32 | 56;
-  className?: string;
-  /** stroke width — 1.75 default matches the light, boutique-grade look */
-  strokeWidth?: number;
-};
-
-function Base({
-  size = 20,
-  className,
-  strokeWidth = 1.75,
-  children,
-  fill = 'none',
-}: IconProps & { children: React.ReactNode; fill?: string }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill={fill}
-      stroke="currentColor"
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      className={className}
-    >
-      {children}
-    </svg>
-  );
-}
-
-export function IconBag(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M6 7h12l1.2 12.2a1.8 1.8 0 0 1-1.8 1.8H6.6a1.8 1.8 0 0 1-1.8-1.8L6 7Z" />
-      <path d="M9 10V6a3 3 0 0 1 6 0v4" />
-    </Base>
-  );
-}
-
-export function IconUser(p: IconProps) {
-  return (
-    <Base {...p}>
-      <circle cx="12" cy="8" r="3.5" />
-      <path d="M5 20c1.4-3 4-4.5 7-4.5s5.6 1.5 7 4.5" />
-    </Base>
-  );
-}
-
-export function IconMenu(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 7h16M4 12h16M4 17h16" />
-    </Base>
-  );
-}
-
-export function IconX(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M6 6l12 12M18 6L6 18" />
-    </Base>
-  );
-}
-
-export function IconPlus(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 5v14M5 12h14" />
-    </Base>
-  );
-}
-
-export function IconMinus(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M5 12h14" />
-    </Base>
-  );
-}
-
-export function IconTrash(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13a1.5 1.5 0 0 0 1.5 1.3h7A1.5 1.5 0 0 0 17 20l1-13M9 7V5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5v2" />
-    </Base>
-  );
-}
-
-export function IconCheck(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M5 12.5 10 17.5 19 7" />
-    </Base>
-  );
-}
-
-export function IconStar({ filled = true, ...p }: IconProps & { filled?: boolean }) {
-  return (
-    <Base {...p} fill={filled ? 'currentColor' : 'none'} strokeWidth={filled ? 0 : 1.5}>
-      <path d="M12 3.2 14.7 8.7 20.8 9.6 16.4 13.9 17.4 20 12 17.1 6.6 20 7.6 13.9 3.2 9.6 9.3 8.7 12 3.2Z" />
-    </Base>
-  );
-}
-
-export function IconTruck(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M3 6.5h11v10H3zM14 10h3.5l3 3v3.5h-3" />
-      <circle cx="7" cy="17.5" r="1.8" />
-      <circle cx="17" cy="17.5" r="1.8" />
-    </Base>
-  );
-}
-
-export function IconShield(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 3.5 19 6v5.5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-2.5Z" />
-      <path d="m9 11.8 2.2 2.2L15.5 9.5" />
-    </Base>
-  );
-}
-
-export function IconGem(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M7 4h10l3.5 5L12 20.5 1.5 9 5 4Z M1.5 9h21M9.5 4 12 9l2.5-5M12 20.5 9.5 9M12 20.5 14.5 9" strokeWidth={1.4} />
-    </Base>
-  );
-}
-
-export function IconReturn(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 9h11a5 5 0 0 1 0 10H8" />
-      <path d="M8 5 4 9l4 4" />
-    </Base>
-  );
-}
-
-export function IconChevronDown(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="m6 9 6 6 6-6" />
-    </Base>
-  );
-}
-
-/** Points toward the inline-end (reading direction). Add className="rtl-flip". */
-export function IconArrowEnd(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M4 12h16M14 6l6 6-6 6" />
-    </Base>
-  );
-}
-
-export function IconSparkle(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 4c.7 3.6 2.4 5.3 6 6-3.6.7-5.3 2.4-6 6-.7-3.6-2.4-5.3-6-6 3.6-.7 5.3-2.4 6-6Z" />
-      <path d="M19 15.5c.3 1.5 1 2.2 2.5 2.5-1.5.3-2.2 1-2.5 2.5-.3-1.5-1-2.2-2.5-2.5 1.5-.3 2.2-1 2.5-2.5Z" strokeWidth={1.4} />
-    </Base>
-  );
-}
-
-export function IconQuote(p: IconProps) {
-  return (
-    <Base {...p} fill="currentColor" strokeWidth={0}>
-      <path d="M5 6.5A4.5 4.5 0 0 0 3 11v6.5h6.5V11H6a3 3 0 0 1 2.5-3V6.5H5Zm10 0A4.5 4.5 0 0 0 13 11v6.5h6.5V11H16a3 3 0 0 1 2.5-3V6.5H15Z" />
-    </Base>
-  );
-}
-
-export function IconMail(p: IconProps) {
-  return (
-    <Base {...p}>
-      <rect x="3" y="5.5" width="18" height="13" rx="2" />
-      <path d="m4 7.5 8 6 8-6" />
-    </Base>
-  );
-}
-
-export function IconClock(p: IconProps) {
-  return (
-    <Base {...p}>
-      <circle cx="12" cy="12" r="8.5" />
-      <path d="M12 7.5V12l3 2" />
-    </Base>
-  );
-}
-
-export function IconTag(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="m3.5 12.5 8-8H20v8.5l-8 8a1.7 1.7 0 0 1-2.4 0l-6.1-6.1a1.7 1.7 0 0 1 0-2.4Z" />
-      <circle cx="15.5" cy="8.5" r="1.4" />
-    </Base>
-  );
-}
-
-export function IconDownload(p: IconProps) {
-  return (
-    <Base {...p}>
-      <path d="M12 4v11M7 10.5 12 15.5l5-5M5 19.5h14" />
-    </Base>
-  );
-}
-
-/** Social glyphs for the footer (filled, single-color). */
-export function IconSocial({ platform, ...p }: IconProps & { platform: string }) {
-  const key = platform.toLowerCase();
-  if (key.includes('instagram')) {
-    return (
-      <Base {...p} strokeWidth={1.6}>
-        <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" />
-        <circle cx="12" cy="12" r="4" />
-        <circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" stroke="none" />
-      </Base>
-    );
-  }
-  if (key.includes('facebook')) {
-    return (
-      <Base {...p} fill="currentColor" strokeWidth={0}>
-        <path d="M13.5 21v-7h2.4l.4-3h-2.8V9.1c0-.9.3-1.5 1.6-1.5h1.3V4.9c-.2 0-1-.1-1.9-.1-1.9 0-3.3 1.2-3.3 3.4V11H8.5v3h2.7v7h2.3Z" />
-      </Base>
-    );
-  }
-  if (key.includes('tiktok')) {
-    return (
-      <Base {...p} fill="currentColor" strokeWidth={0}>
-        <path d="M16.6 3c.3 2 1.5 3.3 3.4 3.6v2.8c-1.3 0-2.5-.4-3.4-1.1v5.9a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v2.9a2.7 2.7 0 1 0 1.9 2.6V3h2.8Z" />
-      </Base>
-    );
-  }
-  if (key.includes('whatsapp')) {
-    return (
-      <Base {...p} strokeWidth={1.6}>
-        <path d="M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5Z" />
-        <path d="M9 8.8c-.3 2.5 3.7 6.5 6.2 6.2l.6-1.5-2-1-.8.6c-.8-.4-1.7-1.3-2.1-2.1l.6-.8-1-2-1.5.6Z" strokeWidth={1.3} />
-      </Base>
-    );
-  }
-  if (key.includes('youtube')) {
-    return (
-      <Base {...p} strokeWidth={1.6}>
-        <rect x="2.5" y="6" width="19" height="12" rx="3" />
-        <path d="m10 9.5 5 2.5-5 2.5v-5Z" fill="currentColor" stroke="none" />
-      </Base>
-    );
-  }
-  // Fallback: globe
-  return (
-    <Base {...p} strokeWidth={1.6}>
-      <circle cx="12" cy="12" r="8.5" />
-      <path d="M3.5 12h17M12 3.5c-4.7 4.7-4.7 12.3 0 17 4.7-4.7 4.7-12.3 0-17Z" />
-    </Base>
-  );
-}
+/**
+ * Inline icon set — minimal 24px-grid stroke icons (lucide-style).
+ * The project ships no icon dependency; every icon in the storefront comes
+ * from here so sizing (16/20/24) and stroke weight stay consistent.
+ * All icons are decorative by default (aria-hidden) — pair with sr-only text.
+ */
+import * as React from 'react';
+
+export type IconProps = {
+  size?: 16 | 18 | 20 | 24 | 28 | 32 | 56;
+  className?: string;
+  /** stroke width — 1.75 default matches the light, boutique-grade look */
+  strokeWidth?: number;
+};
+
+function Base({
+  size = 20,
+  className,
+  strokeWidth = 1.75,
+  children,
+  fill = 'none',
+}: IconProps & { children: React.ReactNode; fill?: string }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill={fill}
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function IconBag(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M6 7h12l1.2 12.2a1.8 1.8 0 0 1-1.8 1.8H6.6a1.8 1.8 0 0 1-1.8-1.8L6 7Z" />
+      <path d="M9 10V6a3 3 0 0 1 6 0v4" />
+    </Base>
+  );
+}
+
+export function IconUser(p: IconProps) {
+  return (
+    <Base {...p}>
+      <circle cx="12" cy="8" r="3.5" />
+      <path d="M5 20c1.4-3 4-4.5 7-4.5s5.6 1.5 7 4.5" />
+    </Base>
+  );
+}
+
+export function IconMenu(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 7h16M4 12h16M4 17h16" />
+    </Base>
+  );
+}
+
+export function IconX(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M6 6l12 12M18 6L6 18" />
+    </Base>
+  );
+}
+
+export function IconPlus(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 5v14M5 12h14" />
+    </Base>
+  );
+}
+
+export function IconMinus(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M5 12h14" />
+    </Base>
+  );
+}
+
+export function IconTrash(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13a1.5 1.5 0 0 0 1.5 1.3h7A1.5 1.5 0 0 0 17 20l1-13M9 7V5a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 5v2" />
+    </Base>
+  );
+}
+
+export function IconCheck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M5 12.5 10 17.5 19 7" />
+    </Base>
+  );
+}
+
+export function IconStar({ filled = true, ...p }: IconProps & { filled?: boolean }) {
+  return (
+    <Base {...p} fill={filled ? 'currentColor' : 'none'} strokeWidth={filled ? 0 : 1.5}>
+      <path d="M12 3.2 14.7 8.7 20.8 9.6 16.4 13.9 17.4 20 12 17.1 6.6 20 7.6 13.9 3.2 9.6 9.3 8.7 12 3.2Z" />
+    </Base>
+  );
+}
+
+export function IconTruck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M3 6.5h11v10H3zM14 10h3.5l3 3v3.5h-3" />
+      <circle cx="7" cy="17.5" r="1.8" />
+      <circle cx="17" cy="17.5" r="1.8" />
+    </Base>
+  );
+}
+
+export function IconShield(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 3.5 19 6v5.5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-2.5Z" />
+      <path d="m9 11.8 2.2 2.2L15.5 9.5" />
+    </Base>
+  );
+}
+
+export function IconBadgeCheck(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M8 3.5h8l4.5 4.5v8L16 20.5H8L3.5 16V8L8 3.5Z" />
+      <path d="m9 12 2.2 2.2L15.5 10" />
+    </Base>
+  );
+}
+
+export function IconReturn(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 9h11a5 5 0 0 1 0 10H8" />
+      <path d="M8 5 4 9l4 4" />
+    </Base>
+  );
+}
+
+export function IconChevronDown(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="m6 9 6 6 6-6" />
+    </Base>
+  );
+}
+
+/** Points toward the inline-end (reading direction). Add className="rtl-flip". */
+export function IconArrowEnd(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M4 12h16M14 6l6 6-6 6" />
+    </Base>
+  );
+}
+
+export function IconSparkle(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 4c.7 3.6 2.4 5.3 6 6-3.6.7-5.3 2.4-6 6-.7-3.6-2.4-5.3-6-6 3.6-.7 5.3-2.4 6-6Z" />
+      <path
+        d="M19 15.5c.3 1.5 1 2.2 2.5 2.5-1.5.3-2.2 1-2.5 2.5-.3-1.5-1-2.2-2.5-2.5 1.5-.3 2.2-1 2.5-2.5Z"
+        strokeWidth={1.4}
+      />
+    </Base>
+  );
+}
+
+export function IconQuote(p: IconProps) {
+  return (
+    <Base {...p} fill="currentColor" strokeWidth={0}>
+      <path d="M5 6.5A4.5 4.5 0 0 0 3 11v6.5h6.5V11H6a3 3 0 0 1 2.5-3V6.5H5Zm10 0A4.5 4.5 0 0 0 13 11v6.5h6.5V11H16a3 3 0 0 1 2.5-3V6.5H15Z" />
+    </Base>
+  );
+}
+
+export function IconMail(p: IconProps) {
+  return (
+    <Base {...p}>
+      <rect x="3" y="5.5" width="18" height="13" rx="2" />
+      <path d="m4 7.5 8 6 8-6" />
+    </Base>
+  );
+}
+
+export function IconClock(p: IconProps) {
+  return (
+    <Base {...p}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M12 7.5V12l3 2" />
+    </Base>
+  );
+}
+
+export function IconTag(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="m3.5 12.5 8-8H20v8.5l-8 8a1.7 1.7 0 0 1-2.4 0l-6.1-6.1a1.7 1.7 0 0 1 0-2.4Z" />
+      <circle cx="15.5" cy="8.5" r="1.4" />
+    </Base>
+  );
+}
+
+export function IconDownload(p: IconProps) {
+  return (
+    <Base {...p}>
+      <path d="M12 4v11M7 10.5 12 15.5l5-5M5 19.5h14" />
+    </Base>
+  );
+}
+
+/** Social glyphs for the footer (filled, single-color). */
+export function IconSocial({ platform, ...p }: IconProps & { platform: string }) {
+  const key = platform.toLowerCase();
+  if (key.includes('instagram')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <rect x="3.5" y="3.5" width="17" height="17" rx="4.5" />
+        <circle cx="12" cy="12" r="4" />
+        <circle cx="17.2" cy="6.8" r="0.6" fill="currentColor" stroke="none" />
+      </Base>
+    );
+  }
+  if (key.includes('facebook')) {
+    return (
+      <Base {...p} fill="currentColor" strokeWidth={0}>
+        <path d="M13.5 21v-7h2.4l.4-3h-2.8V9.1c0-.9.3-1.5 1.6-1.5h1.3V4.9c-.2 0-1-.1-1.9-.1-1.9 0-3.3 1.2-3.3 3.4V11H8.5v3h2.7v7h2.3Z" />
+      </Base>
+    );
+  }
+  if (key.includes('tiktok')) {
+    return (
+      <Base {...p} fill="currentColor" strokeWidth={0}>
+        <path d="M16.6 3c.3 2 1.5 3.3 3.4 3.6v2.8c-1.3 0-2.5-.4-3.4-1.1v5.9a5.6 5.6 0 1 1-5.6-5.6c.3 0 .6 0 .9.1v2.9a2.7 2.7 0 1 0 1.9 2.6V3h2.8Z" />
+      </Base>
+    );
+  }
+  if (key.includes('whatsapp')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <path d="M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5Z" />
+        <path
+          d="M9 8.8c-.3 2.5 3.7 6.5 6.2 6.2l.6-1.5-2-1-.8.6c-.8-.4-1.7-1.3-2.1-2.1l.6-.8-1-2-1.5.6Z"
+          strokeWidth={1.3}
+        />
+      </Base>
+    );
+  }
+  if (key.includes('youtube')) {
+    return (
+      <Base {...p} strokeWidth={1.6}>
+        <rect x="2.5" y="6" width="19" height="12" rx="3" />
+        <path d="m10 9.5 5 2.5-5 2.5v-5Z" fill="currentColor" stroke="none" />
+      </Base>
+    );
+  }
+  // Fallback: globe
+  return (
+    <Base {...p} strokeWidth={1.6}>
+      <circle cx="12" cy="12" r="8.5" />
+      <path d="M3.5 12h17M12 3.5c-4.7 4.7-4.7 12.3 0 17 4.7-4.7 4.7-12.3 0-17Z" />
+    </Base>
+  );
+}

package/templates/nextjs/designs/atelier/ui/shared/loading-spinner.tsx

@@ -2,7 +2,6 @@
 
 import { useTranslations } from '@/core/lib/translations';
 import { cn } from '@/core/lib/utils';
-import { IconGem } from '@/ui/shared/icons';
 
 interface LoadingSpinnerProps {
   size?: 'sm' | 'md' | 'lg';
@@ -16,10 +15,11 @@ const RING_SIZE: Record<'sm' | 'md', string> = {
 
 /**
  * Loading indicator. `sm`/`md` stay quiet ring spinners for buttons and
- * inline waits; `lg` (the full-page state) is the Atelier "polishing" mark —
- * a gem resting inside a ring band with a light orbiting around it, plus the
- * visible loading line. Static under prefers-reduced-motion.
- * Keeps `role="status"` and the sm/md/lg `size` contract.
+ * inline waits; `lg` (the full-page state) is the Atelier breathing mark —
+ * a soft pulsing core inside a thin rotating ring band, no niche-specific
+ * iconography, plus the visible loading line. Static under
+ * prefers-reduced-motion. Keeps `role="status"` and the sm/md/lg `size`
+ * contract.
  */
 export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps) {
   const t = useTranslations('common');
@@ -34,11 +34,10 @@ export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps)
           className
         )}
       >
-        <span aria-hidden="true" className="loader-orbit">
-          <span className="loader-orbit-dot" />
-          <IconGem size={20} className="text-primary/80" />
+        <span aria-hidden="true" className="loader-ring">
+          <span className="loader-ring-core" />
         </span>
-        <span className="loader-text font-display text-sm italic text-muted-foreground">
+        <span className="loader-text font-display text-muted-foreground text-sm italic">
           {t('loading')}
         </span>
       </span>
@@ -54,7 +53,7 @@ export function LoadingSpinner({ size = 'md', className }: LoadingSpinnerProps)
       <span
         aria-hidden="true"
         className={cn(
-          'spin inline-block rounded-full border-primary/25 border-t-primary',
+          'spin border-primary/25 border-t-primary inline-block rounded-full',
           RING_SIZE[size]
         )}
       />