create-brainerce-store 1.15.0 → 1.15.2

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.15.0",
+      version: "1.15.2",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -76,6 +76,10 @@
     "addingToCart": "Adding...",
     "addedToCart": "Added to Cart!",
     "outOfStock": "Out of Stock",
+    "inStock": "In Stock",
+    "unavailable": "Unavailable",
+    "onlyLeft": "Only {available} left",
+    "availableInStock": "{available} in stock",
     "decreaseQuantity": "Decrease quantity",
     "increaseQuantity": "Increase quantity",
     "youMayAlsoLike": "You May Also Like",

package/messages/he.json

@@ -76,6 +76,10 @@
     "addingToCart": "...מוסיף",
     "addedToCart": "נוסף לעגלה!",
     "outOfStock": "אזל מהמלאי",
+    "inStock": "במלאי",
+    "unavailable": "לא זמין",
+    "onlyLeft": "נותרו {available} בלבד",
+    "availableInStock": "{available} במלאי",
     "decreaseQuantity": "הפחת כמות",
     "increaseQuantity": "הגדל כמות",
     "youMayAlsoLike": "אולי גם תאהבו",

package/package.json

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

package/templates/nextjs/base/src/app/checkout/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Suspense, useEffect, useState, useCallback } from 'react';
+import { Suspense, useEffect, useState, useCallback, useRef } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -76,53 +76,62 @@ function CheckoutContent() {
       .catch(() => {});
   }, [isLoggedIn]);
 
-  // Initialize or resume checkout
-  const initCheckout = useCallback(async () => {
-    try {
-      setInitializing(true);
-      setError(null);
-      const client = getClient();
-
-      // Fetch shipping destinations and pickup locations in parallel
-      client
-        .getShippingDestinations()
-        .then(setDestinations)
-        .catch(() => {});
+  // Initialize or resume checkout (only once)
+  const checkoutInitRef = useRef(false);
+  const cartIdRef = useRef<string | null>(null);
 
-      const locations = await client.getPickupLocations().catch(() => [] as PickupLocation[]);
-      setPickupLocations(locations);
+  useEffect(() => {
+    // Only init once, or if cart ID actually changed (e.g. cart was replaced)
+    if (!cart?.id) return;
+    if (checkoutInitRef.current && cartIdRef.current === cart.id) return;
+    checkoutInitRef.current = true;
+    cartIdRef.current = cart.id;
 
-      // If returning with existing checkout ID, resume it
-      if (existingCheckoutId) {
-        const existing = await client.getCheckout(existingCheckoutId);
-        setCheckout(existing);
+    const initCheckout = async () => {
+      try {
+        setInitializing(true);
+        setError(null);
+        const client = getClient();
 
-        // Determine step based on checkout state
-        const allDigital = existing.lineItems.every(
-          (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
-        );
-        setIsAllDigital(allDigital);
-        if (allDigital) {
-          // Digital products: show contact info step if email not set, else payment
-          setStep(existing.email ? 'payment' : 'address');
-        } else if (existing.deliveryType === 'pickup' && existing.pickupLocation) {
-          setDeliveryType('pickup');
-          setStep('payment');
-        } else if (existing.shippingAddress && existing.shippingRateId) {
-          setStep('payment');
-        } else if (existing.shippingAddress) {
-          // Fetch shipping rates
-          const rates = await client.getShippingRates(existing.id);
-          setShippingRates(rates);
-          setStep('shipping');
-        } else if (locations.length > 0) {
-          setStep('method');
+        // Fetch shipping destinations and pickup locations in parallel
+        client
+          .getShippingDestinations()
+          .then(setDestinations)
+          .catch(() => {});
+
+        const locations = await client.getPickupLocations().catch(() => [] as PickupLocation[]);
+        setPickupLocations(locations);
+
+        // If returning with existing checkout ID, resume it
+        if (existingCheckoutId) {
+          const existing = await client.getCheckout(existingCheckoutId);
+          setCheckout(existing);
+
+          // Determine step based on checkout state
+          const allDigital = existing.lineItems.every(
+            (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
+          );
+          setIsAllDigital(allDigital);
+          if (allDigital) {
+            // Digital products: show contact info step if email not set, else payment
+            setStep(existing.email ? 'payment' : 'address');
+          } else if (existing.deliveryType === 'pickup' && existing.pickupLocation) {
+            setDeliveryType('pickup');
+            setStep('payment');
+          } else if (existing.shippingAddress && existing.shippingRateId) {
+            setStep('payment');
+          } else if (existing.shippingAddress) {
+            // Fetch shipping rates
+            const rates = await client.getShippingRates(existing.id);
+            setShippingRates(rates);
+            setStep('shipping');
+          } else if (locations.length > 0) {
+            setStep('method');
+          }
+          return;
         }
-        return;
-      }
 
-      // Create new checkout — cart is always server-side now
-      if (cart && cart.id) {
+        // Create new checkout — cart is always server-side now
         const newCheckout = await client.createCheckout({ cartId: cart.id });
         setCheckout(newCheckout);
 
@@ -135,28 +144,22 @@ function CheckoutContent() {
           setStep('address');
           return;
         }
-      } else {
-        setError(t('cartIsEmpty'));
-      }
 
-      // If pickup locations exist, start with delivery method selection
-      if (locations.length > 0) {
-        setStep('method');
+        // If pickup locations exist, start with delivery method selection
+        if (locations.length > 0) {
+          setStep('method');
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : t('failedToInitCheckout');
+        setError(message);
+      } finally {
+        setInitializing(false);
       }
-    } catch (err) {
-      const message = err instanceof Error ? err.message : t('failedToInitCheckout');
-      setError(message);
-    } finally {
-      setInitializing(false);
-    }
-  }, [existingCheckoutId, cart]);
+    };
 
-  const cartLoaded = cart !== null;
-  useEffect(() => {
-    if (cartLoaded) {
-      initCheckout();
-    }
-  }, [cartLoaded, initCheckout]);
+    initCheckout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cart?.id, existingCheckoutId]);
 
   // Handle shipping address submission
   async function handleAddressSubmit(

package/templates/nextjs/base/src/components/checkout/checkout-form.tsx

@@ -189,147 +189,159 @@ export function CheckoutForm({
 
       {!emailOnly && (
         <>
-      {/* Country + Region row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="country" className="text-foreground mb-1 block text-sm font-medium">
-            {t('country')} <span className="text-destructive">*</span>
-          </label>
-          {hasCountryOptions ? (
-            <select
-              id="country"
-              value={formData.country}
-              onChange={(e) => updateField('country', e.target.value)}
-              className={cn(selectClass, errors.country ? 'border-destructive' : 'border-border')}
-            >
-              <option value="">{t('selectCountry')}</option>
-              {destinations.countries.map((c) => (
-                <option key={c.code} value={c.code}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
-          ) : (
+          {/* Country + Region row */}
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <label htmlFor="country" className="text-foreground mb-1 block text-sm font-medium">
+                {t('country')} <span className="text-destructive">*</span>
+              </label>
+              {hasCountryOptions ? (
+                <select
+                  id="country"
+                  value={formData.country}
+                  onChange={(e) => updateField('country', e.target.value)}
+                  className={cn(
+                    selectClass,
+                    errors.country ? 'border-destructive' : 'border-border'
+                  )}
+                >
+                  <option value="">{t('selectCountry')}</option>
+                  {destinations.countries.map((c) => (
+                    <option key={c.code} value={c.code}>
+                      {c.name}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  id="country"
+                  type="text"
+                  value={formData.country}
+                  onChange={(e) => updateField('country', e.target.value)}
+                  className={cn(
+                    inputClass,
+                    errors.country ? 'border-destructive' : 'border-border'
+                  )}
+                  placeholder={t('countryPlaceholder')}
+                />
+              )}
+              {errors.country && <p className="text-destructive mt-1 text-xs">{errors.country}</p>}
+            </div>
+
+            <div>
+              <label htmlFor="region" className="text-foreground mb-1 block text-sm font-medium">
+                {t('stateRegion')}
+              </label>
+              {hasRegionOptions ? (
+                <select
+                  id="region"
+                  value={formData.region || ''}
+                  onChange={(e) => updateField('region', e.target.value)}
+                  className={cn(selectClass, 'border-border')}
+                >
+                  <option value="">{t('selectRegion')}</option>
+                  {countryRegions.map((r) => (
+                    <option key={r.code} value={r.code}>
+                      {r.name}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  id="region"
+                  type="text"
+                  value={formData.region || ''}
+                  onChange={(e) => updateField('region', e.target.value)}
+                  className={cn(inputClass, 'border-border')}
+                />
+              )}
+            </div>
+          </div>
+
+          {/* Address line 1 */}
+          <div>
+            <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
+              {t('address')} <span className="text-destructive">*</span>
+            </label>
             <input
-              id="country"
+              id="line1"
               type="text"
-              value={formData.country}
-              onChange={(e) => updateField('country', e.target.value)}
-              className={cn(inputClass, errors.country ? 'border-destructive' : 'border-border')}
-              placeholder={t('countryPlaceholder')}
+              value={formData.line1}
+              onChange={(e) => updateField('line1', e.target.value)}
+              className={cn(inputClass, errors.line1 ? 'border-destructive' : 'border-border')}
+              placeholder={t('streetAddress')}
             />
-          )}
-          {errors.country && <p className="text-destructive mt-1 text-xs">{errors.country}</p>}
-        </div>
+            {errors.line1 && <p className="text-destructive mt-1 text-xs">{errors.line1}</p>}
+          </div>
 
-        <div>
-          <label htmlFor="region" className="text-foreground mb-1 block text-sm font-medium">
-            {t('stateRegion')}
-          </label>
-          {hasRegionOptions ? (
-            <select
-              id="region"
-              value={formData.region || ''}
-              onChange={(e) => updateField('region', e.target.value)}
-              className={cn(selectClass, 'border-border')}
-            >
-              <option value="">{t('selectRegion')}</option>
-              {countryRegions.map((r) => (
-                <option key={r.code} value={r.code}>
-                  {r.name}
-                </option>
-              ))}
-            </select>
-          ) : (
+          {/* Address line 2 */}
+          <div>
+            <label htmlFor="line2" className="text-foreground mb-1 block text-sm font-medium">
+              {t('apartmentSuite')}
+            </label>
             <input
-              id="region"
+              id="line2"
               type="text"
-              value={formData.region || ''}
-              onChange={(e) => updateField('region', e.target.value)}
+              value={formData.line2 || ''}
+              onChange={(e) => updateField('line2', e.target.value)}
               className={cn(inputClass, 'border-border')}
+              placeholder={t('aptPlaceholder')}
             />
-          )}
-        </div>
-      </div>
-
-      {/* Address line 1 */}
-      <div>
-        <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
-          {t('address')} <span className="text-destructive">*</span>
-        </label>
-        <input
-          id="line1"
-          type="text"
-          value={formData.line1}
-          onChange={(e) => updateField('line1', e.target.value)}
-          className={cn(inputClass, errors.line1 ? 'border-destructive' : 'border-border')}
-          placeholder={t('streetAddress')}
-        />
-        {errors.line1 && <p className="text-destructive mt-1 text-xs">{errors.line1}</p>}
-      </div>
-
-      {/* Address line 2 */}
-      <div>
-        <label htmlFor="line2" className="text-foreground mb-1 block text-sm font-medium">
-          {t('apartmentSuite')}
-        </label>
-        <input
-          id="line2"
-          type="text"
-          value={formData.line2 || ''}
-          onChange={(e) => updateField('line2', e.target.value)}
-          className={cn(inputClass, 'border-border')}
-          placeholder={t('aptPlaceholder')}
-        />
-      </div>
+          </div>
 
-      {/* City + Postal code row */}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-        <div>
-          <label htmlFor="city" className="text-foreground mb-1 block text-sm font-medium">
-            {t('city')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="city"
-            type="text"
-            value={formData.city}
-            onChange={(e) => updateField('city', e.target.value)}
-            className={cn(inputClass, errors.city ? 'border-destructive' : 'border-border')}
-          />
-          {errors.city && <p className="text-destructive mt-1 text-xs">{errors.city}</p>}
-        </div>
+          {/* City + Postal code row */}
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div>
+              <label htmlFor="city" className="text-foreground mb-1 block text-sm font-medium">
+                {t('city')} <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="city"
+                type="text"
+                value={formData.city}
+                onChange={(e) => updateField('city', e.target.value)}
+                className={cn(inputClass, errors.city ? 'border-destructive' : 'border-border')}
+              />
+              {errors.city && <p className="text-destructive mt-1 text-xs">{errors.city}</p>}
+            </div>
 
-        <div>
-          <label htmlFor="postalCode" className="text-foreground mb-1 block text-sm font-medium">
-            {t('postalCode')} <span className="text-destructive">*</span>
-          </label>
-          <input
-            id="postalCode"
-            type="text"
-            value={formData.postalCode}
-            onChange={(e) => updateField('postalCode', e.target.value)}
-            className={cn(inputClass, errors.postalCode ? 'border-destructive' : 'border-border')}
-          />
-          {errors.postalCode && (
-            <p className="text-destructive mt-1 text-xs">{errors.postalCode}</p>
-          )}
-        </div>
-      </div>
+            <div>
+              <label
+                htmlFor="postalCode"
+                className="text-foreground mb-1 block text-sm font-medium"
+              >
+                {t('postalCode')} <span className="text-destructive">*</span>
+              </label>
+              <input
+                id="postalCode"
+                type="text"
+                value={formData.postalCode}
+                onChange={(e) => updateField('postalCode', e.target.value)}
+                className={cn(
+                  inputClass,
+                  errors.postalCode ? 'border-destructive' : 'border-border'
+                )}
+              />
+              {errors.postalCode && (
+                <p className="text-destructive mt-1 text-xs">{errors.postalCode}</p>
+              )}
+            </div>
+          </div>
 
-      {/* Phone */}
-      <div>
-        <label htmlFor="phone" className="text-foreground mb-1 block text-sm font-medium">
-          {t('phone')}
-        </label>
-        <input
-          id="phone"
-          type="tel"
-          value={formData.phone || ''}
-          onChange={(e) => updateField('phone', e.target.value)}
-          className={cn(inputClass, 'border-border')}
-          placeholder={t('phonePlaceholder')}
-        />
-      </div>
+          {/* Phone */}
+          <div>
+            <label htmlFor="phone" className="text-foreground mb-1 block text-sm font-medium">
+              {t('phone')}
+            </label>
+            <input
+              id="phone"
+              type="tel"
+              value={formData.phone || ''}
+              onChange={(e) => updateField('phone', e.target.value)}
+              className={cn(inputClass, 'border-border')}
+              placeholder={t('phonePlaceholder')}
+            />
+          </div>
         </>
       )}
 

package/templates/nextjs/base/src/components/products/stock-badge.tsx

@@ -2,6 +2,7 @@
 
 import type { InventoryInfo } from 'brainerce';
 import { cn } from '@/lib/utils';
+import { useTranslations } from '@/lib/translations';
 
 interface StockBadgeProps {
   inventory: InventoryInfo | null | undefined;
@@ -10,7 +11,8 @@ interface StockBadgeProps {
 }
 
 export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const label = getStockLabel(inventory, lowStockThreshold);
+  const t = useTranslations('productDetail');
+  const label = getStockLabel(inventory, lowStockThreshold, t);
   const color = getStockColor(inventory, lowStockThreshold);
 
   return (
@@ -28,21 +30,22 @@ export function StockBadge({ inventory, lowStockThreshold = 5, className }: Stoc
 
 function getStockLabel(
   inventory: InventoryInfo | null | undefined,
-  lowStockThreshold: number
+  lowStockThreshold: number,
+  t: (key: string) => string
 ): string {
-  if (!inventory) return 'Out of Stock';
+  if (!inventory) return t('outOfStock');
 
   const { trackingMode, inStock, available } = inventory;
 
-  if (trackingMode === 'DISABLED') return 'Unavailable';
-  if (!inStock) return 'Out of Stock';
-  if (trackingMode === 'UNLIMITED') return 'In Stock';
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
 
   // TRACKED — show actual quantity
   if (available <= lowStockThreshold) {
-    return `Only ${available} left`;
+    return t('onlyLeft').replace('{available}', String(available));
   }
-  return `${available} in stock`;
+  return t('availableInStock').replace('{available}', String(available));
 }
 
 function getStockColor(

package/templates/nextjs/base/src/components/products/variant-selector.tsx

@@ -1,147 +1,292 @@
-'use client';
-
-import { useMemo } from 'react';
-import type { Product, ProductVariant } from 'brainerce';
-import { getVariantOptions, getStockStatus, formatPrice } from 'brainerce';
-import { useStoreInfo } from '@/providers/store-provider';
-import { cn } from '@/lib/utils';
-
-interface VariantSelectorProps {
-  product: Product;
-  selectedVariant: ProductVariant | null;
-  onVariantChange: (variant: ProductVariant) => void;
-  className?: string;
-}
-
-interface AttributeGroup {
-  name: string;
-  values: Array<{
-    value: string;
-    variants: ProductVariant[];
-  }>;
-}
-
-export function VariantSelector({
-  product,
-  selectedVariant,
-  onVariantChange,
-  className,
-}: VariantSelectorProps) {
-  const { storeInfo } = useStoreInfo();
-  const currency = storeInfo?.currency || 'USD';
-  const variants = useMemo(() => product.variants || [], [product.variants]);
-
-  // Build attribute groups from product attribute options or variant data
-  const attributeGroups = useMemo<AttributeGroup[]>(() => {
-    const groups = new Map<string, Map<string, ProductVariant[]>>();
-
-    for (const variant of variants) {
-      const options = getVariantOptions(variant);
-      for (const { name, value } of options) {
-        if (!groups.has(name)) {
-          groups.set(name, new Map());
-        }
-        const valuesMap = groups.get(name)!;
-        if (!valuesMap.has(value)) {
-          valuesMap.set(value, []);
-        }
-        valuesMap.get(value)!.push(variant);
-      }
-    }
-
-    return Array.from(groups.entries()).map(([name, valuesMap]) => ({
-      name,
-      values: Array.from(valuesMap.entries()).map(([value, variantList]) => ({
-        value,
-        variants: variantList,
-      })),
-    }));
-  }, [variants]);
-
-  // Get currently selected attribute values
-  const selectedOptions = useMemo(() => {
-    if (!selectedVariant) return new Map<string, string>();
-    const opts = getVariantOptions(selectedVariant);
-    return new Map(opts.map(({ name, value }) => [name, value]));
-  }, [selectedVariant]);
-
-  // Find the variant that matches all selected attributes
-  function findMatchingVariant(
-    attributeName: string,
-    newValue: string
-  ): ProductVariant | undefined {
-    const nextSelection = new Map(selectedOptions);
-    nextSelection.set(attributeName, newValue);
-
-    return variants.find((v) => {
-      const opts = getVariantOptions(v);
-      return Array.from(nextSelection.entries()).every(([name, value]) =>
-        opts.some((o) => o.name === name && o.value === value)
-      );
-    });
-  }
-
-  if (attributeGroups.length === 0) return null;
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      {attributeGroups.map((group) => (
-        <div key={group.name}>
-          <label className="text-foreground mb-2 block text-sm font-medium">
-            {group.name}
-            {selectedOptions.get(group.name) && (
-              <span className="text-muted-foreground ms-1 font-normal">
-                : {selectedOptions.get(group.name)}
-              </span>
-            )}
-          </label>
-          <div className="flex flex-wrap gap-2">
-            {group.values.map(({ value, variants: matchingVariants }) => {
-              const isSelected = selectedOptions.get(group.name) === value;
-              const matchedVariant = findMatchingVariant(group.name, value);
-              const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
-
-              return (
-                <button
-                  key={value}
-                  type="button"
-                  disabled={!isAvailable}
-                  onClick={() => {
-                    const variant = matchedVariant || matchingVariants[0];
-                    if (variant) onVariantChange(variant);
-                  }}
-                  className={cn(
-                    'rounded border px-4 py-2 text-sm transition-colors',
-                    isSelected
-                      ? 'border-primary bg-primary text-primary-foreground'
-                      : isAvailable
-                        ? 'border-border bg-background text-foreground hover:border-primary'
-                        : 'border-border bg-muted text-muted-foreground cursor-not-allowed line-through opacity-50'
-                  )}
-                >
-                  {value}
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-
-      {/* Variant-specific info */}
-      {selectedVariant && (
-        <div className="text-muted-foreground flex items-center gap-3 pt-1 text-sm">
-          {selectedVariant.price && (
-            <span>
-              {
-                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
-                  currency,
-                }) as string
-              }
-            </span>
-          )}
-          <span>{getStockStatus(selectedVariant.inventory)}</span>
-        </div>
-      )}
-    </div>
-  );
-}
+'use client';
+
+import { useMemo } from 'react';
+import type { Product, ProductVariant } from 'brainerce';
+import { getVariantOptions, getProductSwatches, formatPrice } from 'brainerce';
+import type { InventoryInfo } from 'brainerce';
+import { useStoreInfo } from '@/providers/store-provider';
+import { useTranslations } from '@/lib/translations';
+import { cn } from '@/lib/utils';
+
+interface VariantSelectorProps {
+  product: Product;
+  selectedVariant: ProductVariant | null;
+  onVariantChange: (variant: ProductVariant) => void;
+  className?: string;
+}
+
+interface AttributeGroup {
+  name: string;
+  displayType: string;
+  values: Array<{
+    value: string;
+    swatchColor?: string | null;
+    swatchColor2?: string | null;
+    swatchImageUrl?: string | null;
+    variants: ProductVariant[];
+  }>;
+}
+
+export function VariantSelector({
+  product,
+  selectedVariant,
+  onVariantChange,
+  className,
+}: VariantSelectorProps) {
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('productDetail');
+  const currency = storeInfo?.currency || 'USD';
+  const variants = useMemo(() => product.variants || [], [product.variants]);
+
+  // Get swatch metadata from product attribute options
+  const swatchData = useMemo(() => getProductSwatches(product), [product]);
+  const swatchMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        displayType: string;
+        options: Map<
+          string,
+          {
+            swatchColor?: string | null;
+            swatchColor2?: string | null;
+            swatchImageUrl?: string | null;
+          }
+        >;
+      }
+    >();
+    for (const attr of swatchData) {
+      const optMap = new Map<
+        string,
+        {
+          swatchColor?: string | null;
+          swatchColor2?: string | null;
+          swatchImageUrl?: string | null;
+        }
+      >();
+      for (const opt of attr.options) {
+        optMap.set(opt.name, {
+          swatchColor: opt.swatchColor,
+          swatchColor2: opt.swatchColor2,
+          swatchImageUrl: opt.swatchImageUrl,
+        });
+      }
+      map.set(attr.attributeName, { displayType: attr.displayType, options: optMap });
+    }
+    return map;
+  }, [swatchData]);
+
+  // Build attribute groups from variant data, enriched with swatch info
+  const attributeGroups = useMemo<AttributeGroup[]>(() => {
+    const groups = new Map<string, Map<string, ProductVariant[]>>();
+
+    for (const variant of variants) {
+      const options = getVariantOptions(variant);
+      for (const { name, value } of options) {
+        if (!groups.has(name)) {
+          groups.set(name, new Map());
+        }
+        const valuesMap = groups.get(name)!;
+        if (!valuesMap.has(value)) {
+          valuesMap.set(value, []);
+        }
+        valuesMap.get(value)!.push(variant);
+      }
+    }
+
+    return Array.from(groups.entries()).map(([name, valuesMap]) => {
+      const attrSwatch = swatchMap.get(name);
+      return {
+        name,
+        displayType: attrSwatch?.displayType || 'DROPDOWN',
+        values: Array.from(valuesMap.entries()).map(([value, variantList]) => {
+          const optSwatch = attrSwatch?.options.get(value);
+          return {
+            value,
+            swatchColor: optSwatch?.swatchColor,
+            swatchColor2: optSwatch?.swatchColor2,
+            swatchImageUrl: optSwatch?.swatchImageUrl,
+            variants: variantList,
+          };
+        }),
+      };
+    });
+  }, [variants, swatchMap]);
+
+  // Get currently selected attribute values
+  const selectedOptions = useMemo(() => {
+    if (!selectedVariant) return new Map<string, string>();
+    const opts = getVariantOptions(selectedVariant);
+    return new Map(opts.map(({ name, value }) => [name, value]));
+  }, [selectedVariant]);
+
+  // Find the variant that matches all selected attributes
+  function findMatchingVariant(
+    attributeName: string,
+    newValue: string
+  ): ProductVariant | undefined {
+    const nextSelection = new Map(selectedOptions);
+    nextSelection.set(attributeName, newValue);
+
+    return variants.find((v) => {
+      const opts = getVariantOptions(v);
+      return Array.from(nextSelection.entries()).every(([name, value]) =>
+        opts.some((o) => o.name === name && o.value === value)
+      );
+    });
+  }
+
+  if (attributeGroups.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {attributeGroups.map((group) => (
+        <div key={group.name}>
+          <label className="text-foreground mb-2 block text-sm font-medium">
+            {group.name}
+            {selectedOptions.get(group.name) && (
+              <span className="text-muted-foreground ms-1 font-normal">
+                : {selectedOptions.get(group.name)}
+              </span>
+            )}
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {group.values.map(
+              ({
+                value,
+                swatchColor,
+                swatchColor2,
+                swatchImageUrl,
+                variants: matchingVariants,
+              }) => {
+                const isSelected = selectedOptions.get(group.name) === value;
+                const matchedVariant = findMatchingVariant(group.name, value);
+                const isAvailable = matchedVariant?.inventory?.canPurchase !== false;
+
+                // Color swatch rendering
+                if (group.displayType === 'COLOR_SWATCH' && swatchColor) {
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      disabled={!isAvailable}
+                      title={value}
+                      onClick={() => {
+                        const variant = matchedVariant || matchingVariants[0];
+                        if (variant) onVariantChange(variant);
+                      }}
+                      className={cn(
+                        'h-9 w-9 rounded-full border-2 transition-all',
+                        isSelected
+                          ? 'border-primary ring-primary/30 ring-2'
+                          : isAvailable
+                            ? 'border-border hover:border-primary'
+                            : 'cursor-not-allowed opacity-40'
+                      )}
+                      style={{
+                        background: swatchColor2
+                          ? `linear-gradient(135deg, ${swatchColor} 50%, ${swatchColor2} 50%)`
+                          : swatchColor,
+                      }}
+                    >
+                      {!isAvailable && (
+                        <span
+                          className="bg-muted-foreground block h-full w-full rounded-full opacity-50"
+                          style={{
+                            backgroundImage:
+                              'linear-gradient(135deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%)',
+                          }}
+                        />
+                      )}
+                    </button>
+                  );
+                }
+
+                // Image swatch rendering
+                if (group.displayType === 'IMAGE_SWATCH' && swatchImageUrl) {
+                  return (
+                    <button
+                      key={value}
+                      type="button"
+                      disabled={!isAvailable}
+                      title={value}
+                      onClick={() => {
+                        const variant = matchedVariant || matchingVariants[0];
+                        if (variant) onVariantChange(variant);
+                      }}
+                      className={cn(
+                        'h-10 w-10 overflow-hidden rounded-lg border-2 transition-all',
+                        isSelected
+                          ? 'border-primary ring-primary/30 ring-2'
+                          : isAvailable
+                            ? 'border-border hover:border-primary'
+                            : 'cursor-not-allowed opacity-40'
+                      )}
+                    >
+                      <img
+                        src={swatchImageUrl}
+                        alt={value}
+                        className="h-full w-full object-cover"
+                      />
+                    </button>
+                  );
+                }
+
+                // Default button rendering (BUTTON, DROPDOWN, or fallback)
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    disabled={!isAvailable}
+                    onClick={() => {
+                      const variant = matchedVariant || matchingVariants[0];
+                      if (variant) onVariantChange(variant);
+                    }}
+                    className={cn(
+                      'rounded border px-4 py-2 text-sm transition-colors',
+                      isSelected
+                        ? 'border-primary bg-primary text-primary-foreground'
+                        : isAvailable
+                          ? 'border-border bg-background text-foreground hover:border-primary'
+                          : 'border-border bg-muted text-muted-foreground cursor-not-allowed line-through opacity-50'
+                    )}
+                  >
+                    {value}
+                  </button>
+                );
+              }
+            )}
+          </div>
+        </div>
+      ))}
+
+      {/* Variant-specific info */}
+      {selectedVariant && (
+        <div className="text-muted-foreground flex items-center gap-3 pt-1 text-sm">
+          {selectedVariant.price && (
+            <span>
+              {
+                formatPrice(selectedVariant.salePrice || selectedVariant.price, {
+                  currency,
+                }) as string
+              }
+            </span>
+          )}
+          <span>{getTranslatedStockStatus(selectedVariant.inventory, t)}</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function getTranslatedStockStatus(
+  inventory: InventoryInfo | null | undefined,
+  t: (key: string) => string
+): string {
+  if (!inventory) return t('outOfStock');
+  const { trackingMode, inStock, available } = inventory;
+  if (trackingMode === 'DISABLED') return t('unavailable');
+  if (!inStock) return t('outOfStock');
+  if (trackingMode === 'UNLIMITED') return t('inStock');
+  return t('availableInStock').replace('{available}', String(available));
+}