@brainerce/mcp-server 1.3.0 → 2.0.1

package/dist/index.mjs

@@ -73,7 +73,7 @@ function getTypeQuickReference() {
 - \`SetShippingAddressDto.email\` is **required** \u2014 always include email
 
 **Mandatory helpers (import from \`'brainerce'\`):**
-\`getCartTotals\`, \`getCartItemName\`, \`getCartItemImage\`, \`formatPrice\`, \`getProductPriceInfo\`, \`getVariantPrice\`, \`getStockStatus\`, \`getVariantOptions\`, \`getDescriptionContent\`, \`getProductMetafieldValue\``;
+\`getCartTotals\`, \`getCartItemName\`, \`getCartItemImage\`, \`formatPrice\`, \`getProductPriceInfo\`, \`getVariantPrice\`, \`getStockStatus\`, \`getVariantOptions\`, \`getProductSwatches\`, \`getDescriptionContent\`, \`getProductMetafieldValue\``;
 }
 function getSdkSetupSection(connectionId) {
   return `## SDK Setup
@@ -561,6 +561,25 @@ const material = getProductMetafieldValue(product, 'material');
 
 **Metafield fields:** \`definitionName\` (display label), \`definitionKey\` (lookup key), \`value\`, \`type\` (IMAGE, GALLERY, URL, COLOR, BOOLEAN, DATE, DATETIME, TEXT, TEXTAREA, NUMBER, DIMENSION, WEIGHT, JSON)
 
+### Downloadable / Digital Products
+
+Products with \`isDownloadable: true\` are digital products. Show a digital badge instead of stock badge, list included files, and note that download links appear after purchase.
+
+\`\`\`typescript
+import type { DownloadFile } from 'brainerce';
+
+// Check if product is digital
+if (product.isDownloadable) {
+  // Show "Instant Download" badge instead of StockBadge
+  // List files: product.downloads?.map((file: DownloadFile) => file.name)
+  // Show "Download available after purchase" note
+}
+
+// After purchase \u2014 get download links from order
+const downloads = await client.getOrderDownloads(orderId);
+// downloads[]: { fileName, downloadUrl, downloadsUsed, downloadLimit, expiresAt }
+\`\`\`
+
 ### Categories
 
 \`\`\`typescript
@@ -1141,60 +1160,6 @@ ${getAdminApiSection()}
 
 Start building with the SDK!`;
 }
-function buildMcpStorePrompt(options) {
-  const { connectionId, storeName, currency, storeType, storeStyle } = options;
-  const styleDesc = storeStyle ? ` with a ${storeStyle} aesthetic` : "";
-  return `# Build a Brainerce E-Commerce Store
-
-## Task
-Build a **${storeType}** called **${storeName}**${styleDesc}.
-Use the Brainerce SDK (\`npm install brainerce\`) to fetch all data \u2014 never hardcode products.
-
-## Connection
-- **Connection ID:** \`${connectionId}\`
-- **Currency:** ${currency}
-
-${getCriticalRulesSection()}
-
-${getTypeQuickReference()}
-
-## Required Pages
-- \`/\` \u2014 Home (hero, featured products, categories)
-- \`/products\` \u2014 Product list with infinite scroll
-- \`/products/[slug]\` \u2014 Product detail (images, variants, add to cart)
-- \`/cart\` \u2014 Cart with checkboxes, quantities, coupon input
-- \`/checkout\` \u2014 Customer info \u2192 Shipping \u2192 Payment
-- \`/order-confirmation\` \u2014 MUST call \`waitForOrder()\` + \`handlePaymentSuccess()\`
-- \`/login\` \u2014 Email/password + social login
-- \`/register\` \u2014 Registration + social signup
-- \`/verify-email\` \u2014 6-digit code verification (always build, even if disabled)
-- \`/auth/callback\` \u2014 OAuth redirect handler
-- \`/account\` \u2014 Profile + order history (protected)
-- Header \u2014 Logo, nav, cart count, search bar with autocomplete
-
-## How to Build (Use MCP Tools!)
-Build pages in this order. For each page, call the MCP tools to get the code and docs you need:
-
-1. **SDK Setup** \u2014 \`get-code-example\` \u2192 \`sdk-setup\`, then \`store-provider\`
-2. **Layout** \u2014 \`get-code-example\` \u2192 \`layout\`
-3. **Header** \u2014 \`get-code-example\` \u2192 \`header\`
-4. **Home** \u2014 \`get-code-example\` \u2192 \`home-page\`
-5. **Products** \u2014 \`get-code-example\` \u2192 \`product-listing\`, then \`product-detail\`
-6. **Cart** \u2014 \`get-code-example\` \u2192 \`cart-page\`, then \`coupon-input\`
-7. **Checkout** \u2014 \`get-code-example\` \u2192 \`checkout-page\` | \`get-sdk-docs\` \u2192 topic: \`checkout\`
-8. **Payment** \u2014 \`get-code-example\` \u2192 \`stripe-payment\` / \`grow-payment\` / \`paypal-payment\`
-9. **Order Confirmation** \u2014 \`get-code-example\` \u2192 \`order-confirmation\`
-10. **Auth** \u2014 \`get-code-example\` \u2192 \`login-page\`, \`register-page\`, \`verify-email\`, \`oauth-callback\`
-11. **Account** \u2014 \`get-code-example\` \u2192 \`account-page\`
-
-**Additional tools:**
-- \`get-sdk-docs\` \u2014 Detailed API docs per topic (setup, products, cart, checkout, payment, auth, inventory, discounts, tax, etc.)
-- \`get-type-definitions\` \u2014 Full TypeScript type definitions for any SDK type
-- \`get-required-pages\` \u2014 Complete pages checklist with design guidelines
-- \`get-store-info\` \u2014 Fetch live store data (name, currency, product count)
-
-Start with step 1 \u2014 call \`get-code-example\` with useCase \`sdk-setup\` now!`;
-}
 function getSectionByTopic(topic, connectionId, currency) {
   const cid = connectionId || "vc_YOUR_CONNECTION_ID";
   const cur = currency || "USD";
@@ -1297,10 +1262,21 @@ interface Product {
   brands?: Array<{ id: string; name: string }>;
   tags?: string[];
   metafields?: ProductMetafield[];
+  productAttributeOptions?: Array<{
+    id: string;
+    attributeId: string;
+    attributeOptionId: string;
+    platform: string;
+    attribute: { id: string; name: string; displayType?: 'DEFAULT' | 'COLOR_SWATCH' | 'IMAGE_SWATCH' } | null;
+    attributeOption: { id: string; name: string; value?: string | null; swatchColor?: string | null; swatchColor2?: string | null; swatchImageUrl?: string | null } | null;
+  }>;
   createdAt: string;
   updatedAt: string;
 }
 
+// Use getProductSwatches(product) to get grouped swatch data for storefront rendering.
+// Returns Array<{ attributeName, displayType, options: Array<{ name, swatchColor?, swatchColor2?, swatchImageUrl? }> }>
+
 interface ProductImage {
   url: string;
   position?: number;
@@ -1348,7 +1324,7 @@ interface ProductQueryParams {
   page?: number;
   limit?: number;
   search?: string;
-  status?: 'active' | 'draft' | 'archived';
+  status?: 'active' | 'draft';
   categories?: string | string[];
   brands?: string | string[];
   tags?: string | string[];
@@ -1908,6 +1884,17 @@ export function setStoredCartId(cartId: string | null): void {
 export function initClient(): BrainerceClient {
   return getClient();
 }
+
+// Server-side client \u2014 calls backend directly (no proxy needed for public data)
+// Used by Server Components for SSR data fetching (generateMetadata, page rendering)
+export function getServerClient(): BrainerceClient {
+  const apiUrl = process.env.BRAINERCE_API_URL || 'https://api.brainerce.com';
+  return new BrainerceClient({
+    connectionId: CONNECTION_ID,
+    baseUrl: apiUrl,
+    origin: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
+  });
+}
 `,
   "src/lib/auth.ts": `/**
  * Client-side auth helpers that call the BFF proxy API routes.
@@ -1992,6 +1979,7 @@ export async function proxyRegister(data: {
   lastName: string;
   email: string;
   password: string;
+  acceptsMarketing?: boolean;
 }): Promise<RegisterResult> {
   const response = await fetch(\`/api/store/api/vc/\${CONNECTION_ID}/customers/register\`, {
     method: 'POST',
@@ -2347,12 +2335,34 @@ import './globals.css';
 
 <%- fontVariable %>
 
+const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
 export const metadata: Metadata = {
-  title: 'My Store',
+  metadataBase: new URL(baseUrl),
+  title: {
+    default: 'My Store',
+    template: \`%s | My Store\`,
+  },
   description: 'My Store',
+  alternates: {
+    canonical: '/',
+  },
   openGraph: {
+    siteName: 'My Store',
     locale: '<%= ogLocale %>',
+    type: 'website',
   },
+  robots: {
+    index: true,
+    follow: true,
+  },
+};
+
+const organizationJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'Organization',
+  name: 'My Store',
+  url: baseUrl,
 };
 
 export default function RootLayout({
@@ -2362,6 +2372,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang="<%= language %>" dir="<%= direction %>">
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationJsonLd) }}
+        />
+      </head>
       <body className={font.className}>
         <StoreProvider>
           <div className="min-h-screen flex flex-col">
@@ -2406,6 +2422,7 @@ const sortOptions: SortOption[] = [
 interface CategoryNode {
   id: string;
   name: string;
+  image?: string | null;
   parentId?: string | null;
   children: CategoryNode[];
 }
@@ -2446,24 +2463,24 @@ function ChevronDown({ className }: { className?: string }) {
 
 /** Recursive dropdown items for nested categories */
 function CategoryDropdownItems({
-  children,
+  items,
   depth,
   selectedId,
   onSelect,
 }: {
-  children: CategoryNode[];
+  items: CategoryNode[];
   depth: number;
   selectedId: string;
   onSelect: (id: string) => void;
 }) {
   return (
     <>
-      {children.map((child) => (
+      {items.map((child) => (
         <div key={child.id}>
           <button
             onClick={() => onSelect(child.id)}
             className={cn(
-              'w-full text-start px-4 py-2 text-sm transition-colors hover:bg-muted',
+              'hover:bg-muted w-full px-4 py-2 text-start text-sm transition-colors',
               selectedId === child.id && 'bg-primary/10 text-primary font-medium'
             )}
             style={{ paddingInlineStart: \`\${(depth + 1) * 16}px\` }}
@@ -2472,7 +2489,7 @@ function CategoryDropdownItems({
           </button>
           {child.children.length > 0 && (
             <CategoryDropdownItems
-              children={child.children}
+              items={child.children}
               depth={depth + 1}
               selectedId={selectedId}
               onSelect={onSelect}
@@ -2559,9 +2576,7 @@ function CategoryChip({
             {'\xB7'} {selectedChildName}
           </span>
         )}
-        <ChevronDown
-          className={cn('transition-transform ms-0.5', open && 'rotate-180')}
-        />
+        <ChevronDown className={cn('ms-0.5 transition-transform', open && 'rotate-180')} />
       </button>
 
       {open && (
@@ -2573,7 +2588,7 @@ function CategoryChip({
               setOpen(false);
             }}
             className={cn(
-              'w-full text-start px-4 py-2 text-sm font-medium transition-colors hover:bg-muted',
+              'hover:bg-muted w-full px-4 py-2 text-start text-sm font-medium transition-colors',
               selectedId === category.id && 'bg-primary/10 text-primary'
             )}
           >
@@ -2581,11 +2596,9 @@ function CategoryChip({
           </button>
           <div className="bg-border mx-2 h-px" />
           {/* Recursive children */}
-          <div
-            onClick={() => setOpen(false)}
-          >
+          <div onClick={() => setOpen(false)}>
             <CategoryDropdownItems
-              children={category.children}
+              items={category.children}
               depth={0}
               selectedId={selectedId}
               onSelect={onSelect}
@@ -2810,513 +2823,71 @@ export default function ProductsPage() {
   );
 }
 `,
-  "src/app/products/[slug]/page.tsx": `'use client';
+  "src/app/products/[slug]/page.tsx": `import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { getServerClient } from '@/lib/brainerce';
+import { ProductJsonLd } from '@/components/seo/product-json-ld';
+import { ProductClientSection } from './product-client-section';
+
+type Props = {
+  params: Promise<{ slug: string }>;
+};
 
-import { useEffect, useState, useMemo } from 'react';
-import { useParams } from 'next/navigation';
-import Image from 'next/image';
-import Link from 'next/link';
-import type {
-  Product,
-  ProductVariant,
-  ProductImage,
-  ProductMetafield,
-  ProductRecommendationsResponse,
-  DownloadFile,
-} from 'brainerce';
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
 
-type ProductWithRecommendations = Product & {
-  recommendations?: ProductRecommendationsResponse;
-};
-import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useCart } from '@/providers/store-provider';
-import { PriceDisplay } from '@/components/shared/price-display';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { VariantSelector } from '@/components/products/variant-selector';
-import { StockBadge } from '@/components/products/stock-badge';
-import { RecommendationSection } from '@/components/products/recommendation-section';
-import { useTranslations } from '@/lib/translations';
-import { cn } from '@/lib/utils';
+  try {
+    const client = getServerClient();
+    const product = await client.getProductBySlug(slug);
+    const imageUrl = product.images?.[0]?.url;
+    const description = product.description?.substring(0, 160) || product.name;
 
-/** Render a metafield value based on its type */
-function MetafieldValue({ field }: { field: ProductMetafield }) {
-  const tc = useTranslations('common');
-  switch (field.type) {
-    case 'IMAGE': {
-      if (!field.value) return <span className="text-muted-foreground">-</span>;
-      return (
-        <img
-          src={field.value}
-          alt={field.definitionName}
-          className="h-16 w-16 rounded object-cover"
-        />
-      );
-    }
-    case 'GALLERY': {
-      let urls: string[] = [];
-      try {
-        const parsed = JSON.parse(field.value);
-        urls = Array.isArray(parsed)
-          ? parsed.filter((u: unknown) => typeof u === 'string' && u)
-          : [];
-      } catch {
-        urls = field.value ? [field.value] : [];
-      }
-      if (urls.length === 0) return <span className="text-muted-foreground">-</span>;
-      return (
-        <div className="flex flex-wrap gap-2">
-          {urls.map((url, i) => (
-            <img
-              key={i}
-              src={url}
-              alt={\`\${field.definitionName} \${i + 1}\`}
-              className="h-16 w-16 rounded object-cover"
-            />
-          ))}
-        </div>
-      );
-    }
-    case 'URL':
-      return field.value ? (
-        <a
-          href={field.value}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-primary break-all hover:underline"
-        >
-          {field.value}
-        </a>
-      ) : (
-        <span className="text-muted-foreground">-</span>
-      );
-    case 'COLOR':
-      return field.value ? (
-        <span className="inline-flex items-center gap-2">
-          <span
-            className="border-border inline-block h-4 w-4 rounded-full border"
-            style={{ backgroundColor: field.value }}
-          />
-          {field.value}
-        </span>
-      ) : (
-        <span className="text-muted-foreground">-</span>
-      );
-    case 'BOOLEAN':
-      return <span>{field.value === 'true' ? tc('yes') : tc('no')}</span>;
-    case 'DATE':
-    case 'DATETIME': {
-      if (!field.value) return <span className="text-muted-foreground">-</span>;
-      try {
-        const date = new Date(field.value);
-        return (
-          <span>
-            {field.type === 'DATETIME' ? date.toLocaleString() : date.toLocaleDateString()}
-          </span>
-        );
-      } catch {
-        return <span>{field.value}</span>;
-      }
-    }
-    default:
-      return <span>{field.value || '-'}</span>;
+    return {
+      title: product.name,
+      description,
+      alternates: {
+        canonical: \`/products/\${slug}\`,
+      },
+      openGraph: {
+        title: product.name,
+        description,
+        images: imageUrl ? [{ url: imageUrl, alt: product.name }] : [],
+        type: 'website',
+      },
+      twitter: {
+        card: 'summary_large_image',
+        title: product.name,
+        description,
+        images: imageUrl ? [imageUrl] : [],
+      },
+    };
+  } catch {
+    return {
+      title: 'Product not found',
+    };
   }
 }
 
-export default function ProductDetailPage() {
-  const params = useParams();
-  const slug = params.slug as string;
-  const { refreshCart } = useCart();
-  const t = useTranslations('productDetail');
-  const tc = useTranslations('common');
-  const [product, setProduct] = useState<ProductWithRecommendations | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [selectedVariant, setSelectedVariant] = useState<ProductVariant | null>(null);
-  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
-  const [quantity, setQuantity] = useState(1);
-  const [addingToCart, setAddingToCart] = useState(false);
-  const [addedMessage, setAddedMessage] = useState(false);
-
-  const recommendations = product?.recommendations ?? null;
-
-  // Load product
-  useEffect(() => {
-    async function load() {
-      try {
-        setLoading(true);
-        setError(null);
-        const client = getClient();
-        const p = await client.getProductBySlug(slug);
-        setProduct(p as ProductWithRecommendations);
-
-        // Auto-select first variant
-        if (p.variants && p.variants.length > 0) {
-          setSelectedVariant(p.variants[0]);
-        }
-      } catch {
-        setError(t('notFound'));
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [slug]);
-
-  // Images list - switch main image when variant changes
-  const images: ProductImage[] = useMemo(() => {
-    return product?.images || [];
-  }, [product]);
-
-  // When variant changes, update selected image to variant image if available
-  useEffect(() => {
-    if (!selectedVariant?.image || !product) return;
-
-    const variantImgUrl =
-      typeof selectedVariant.image === 'string' ? selectedVariant.image : selectedVariant.image.url;
-
-    // Find if variant image exists in product images
-    const idx = images.findIndex((img) => img.url === variantImgUrl);
-    if (idx >= 0) {
-      setSelectedImageIndex(idx);
-    } else {
-      // Variant image not in product images - select index 0 as fallback
-      // (The variant image will be shown as the main image via override)
-      setSelectedImageIndex(-1);
-    }
-  }, [selectedVariant, images, product]);
-
-  // Determine which image to show
-  const mainImageUrl = useMemo(() => {
-    if (selectedImageIndex === -1 && selectedVariant?.image) {
-      const img = selectedVariant.image;
-      return typeof img === 'string' ? img : img.url;
-    }
-    return images[selectedImageIndex]?.url || null;
-  }, [selectedImageIndex, selectedVariant, images]);
-
-  // Price info - use variant price if selected, else product price
-  const priceInfo = useMemo(() => {
-    if (selectedVariant?.price) {
-      return {
-        price: parseFloat(selectedVariant.salePrice || selectedVariant.price),
-        originalPrice: parseFloat(selectedVariant.price),
-        isOnSale:
-          selectedVariant.salePrice != null &&
-          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price),
-        discountPercent:
-          selectedVariant.salePrice != null &&
-          parseFloat(selectedVariant.salePrice) < parseFloat(selectedVariant.price)
-            ? Math.round(
-                ((parseFloat(selectedVariant.price) - parseFloat(selectedVariant.salePrice)) /
-                  parseFloat(selectedVariant.price)) *
-                  100
-              )
-            : 0,
-      };
-    }
-    return getProductPriceInfo(product);
-  }, [product, selectedVariant]);
-
-  // Inventory: use variant inventory if selected, else product inventory
-  const inventory = selectedVariant?.inventory ?? product?.inventory ?? null;
-  const canPurchase = inventory?.canPurchase !== false;
-
-  // Description
-  const description = useMemo(() => {
-    return product ? getDescriptionContent(product) : null;
-  }, [product]);
-
-  async function handleAddToCart() {
-    if (!product || addingToCart) return;
-
-    try {
-      setAddingToCart(true);
-      const client = getClient();
-      await client.smartAddToCart({
-        productId: product.id,
-        variantId: selectedVariant?.id,
-        quantity,
-        name: product.name,
-        price: String(priceInfo.price),
-        image: mainImageUrl || undefined,
-      });
-      await refreshCart();
-      setAddedMessage(true);
-      setTimeout(() => setAddedMessage(false), 2000);
-    } catch (err) {
-      console.error('Failed to add to cart:', err);
-    } finally {
-      setAddingToCart(false);
-    }
-  }
+export default async function ProductDetailPage({ params }: Props) {
+  const { slug } = await params;
 
-  if (loading) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center">
-        <LoadingSpinner size="lg" />
-      </div>
-    );
+  let product;
+  try {
+    const client = getServerClient();
+    product = await client.getProductBySlug(slug);
+  } catch {
+    notFound();
   }
 
-  if (error || !product) {
-    return (
-      <div className="mx-auto max-w-7xl px-4 py-16 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground text-2xl font-bold">{error || t('notFound')}</h1>
-        <Link href="/products" className="text-primary mt-4 inline-block hover:underline">
-          {t('backToProducts')}
-        </Link>
-      </div>
-    );
-  }
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+  const productUrl = \`\${baseUrl}/products/\${slug}\`;
+  const currency = process.env.NEXT_PUBLIC_STORE_CURRENCY || 'USD';
 
   return (
-    <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
-        {/* Image Gallery */}
-        <div className="space-y-4">
-          {/* Main Image */}
-          <div className="bg-muted relative aspect-square overflow-hidden rounded-lg">
-            {mainImageUrl ? (
-              <Image
-                src={mainImageUrl}
-                alt={product.name}
-                fill
-                sizes="(max-width: 1024px) 100vw, 50vw"
-                className="object-contain"
-                priority
-              />
-            ) : (
-              <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-                <svg className="h-24 w-24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={1}
-                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                  />
-                </svg>
-              </div>
-            )}
-          </div>
-
-          {/* Thumbnails */}
-          {images.length > 1 && (
-            <div className="flex gap-2 overflow-x-auto pb-2">
-              {images.map((img, idx) => (
-                <button
-                  key={idx}
-                  type="button"
-                  onClick={() => setSelectedImageIndex(idx)}
-                  className={cn(
-                    'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded border-2 transition-colors',
-                    selectedImageIndex === idx
-                      ? 'border-primary'
-                      : 'border-border hover:border-muted-foreground'
-                  )}
-                >
-                  <Image
-                    src={img.url}
-                    alt={img.alt || \`\${product.name} \${idx + 1}\`}
-                    fill
-                    sizes="64px"
-                    className="object-cover"
-                  />
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* Product Info */}
-        <div className="space-y-6">
-          {/* Categories */}
-          {product.categories && product.categories.length > 0 && (
-            <div className="flex flex-wrap gap-2">
-              {product.categories.map((cat) => (
-                <span
-                  key={cat.id}
-                  className="text-muted-foreground bg-muted rounded px-2 py-1 text-xs"
-                >
-                  {cat.name}
-                </span>
-              ))}
-            </div>
-          )}
-
-          {/* Title */}
-          <h1 className="text-foreground text-2xl font-bold sm:text-3xl">{product.name}</h1>
-
-          {/* Price */}
-          <PriceDisplay
-            price={priceInfo.originalPrice}
-            salePrice={priceInfo.isOnSale ? priceInfo.price : undefined}
-            size="lg"
-          />
-
-          {/* Stock / Digital badge */}
-          {product.isDownloadable ? (
-            <span className="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800 dark:bg-green-950/30 dark:text-green-400">
-              <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
-              </svg>
-              {t('instantDownload')}
-            </span>
-          ) : (
-            <StockBadge inventory={inventory} lowStockThreshold={5} />
-          )}
-
-          {/* Downloadable files info */}
-          {product.isDownloadable && product.downloads && product.downloads.length > 0 && (
-            <div className="bg-muted/50 rounded-lg border p-4">
-              <p className="text-foreground mb-2 text-sm font-medium">
-                {t('filesIncluded', { count: product.downloads.length })}
-              </p>
-              <ul className="space-y-1.5">
-                {product.downloads.map((file: DownloadFile) => (
-                  <li key={file.id} className="text-muted-foreground flex items-center gap-2 text-sm">
-                    <svg className="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                    </svg>
-                    <span className="truncate">{file.name}</span>
-                    {file.size && (
-                      <span className="flex-shrink-0 text-xs">
-                        ({file.size < 1024 * 1024
-                          ? \`\${(file.size / 1024).toFixed(0)} KB\`
-                          : \`\${(file.size / (1024 * 1024)).toFixed(1)} MB\`})
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-
-          {/* Variant Selector */}
-          {product.type === 'VARIABLE' && product.variants && product.variants.length > 0 && (
-            <VariantSelector
-              product={product}
-              selectedVariant={selectedVariant}
-              onVariantChange={setSelectedVariant}
-            />
-          )}
-
-          {/* Quantity + Add to Cart */}
-          <div className="flex items-center gap-4">
-            <div className="border-border flex items-center rounded border">
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => Math.max(1, q - 1))}
-                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
-                aria-label={t('decreaseQuantity')}
-              >
-                -
-              </button>
-              <span className="text-foreground min-w-[3rem] px-4 py-2 text-center text-sm font-medium">
-                {quantity}
-              </span>
-              <button
-                type="button"
-                onClick={() => setQuantity((q) => q + 1)}
-                className="text-foreground hover:bg-muted px-3 py-2 transition-colors"
-                aria-label={t('increaseQuantity')}
-              >
-                +
-              </button>
-            </div>
-
-            <button
-              type="button"
-              onClick={handleAddToCart}
-              disabled={!canPurchase || addingToCart}
-              className={cn(
-                'flex-1 rounded px-6 py-3 text-sm font-medium transition-all',
-                canPurchase
-                  ? 'bg-primary text-primary-foreground hover:opacity-90'
-                  : 'bg-muted text-muted-foreground cursor-not-allowed'
-              )}
-            >
-              {addingToCart ? (
-                <span className="inline-flex items-center gap-2">
-                  <LoadingSpinner
-                    size="sm"
-                    className="border-primary-foreground/30 border-t-primary-foreground"
-                  />
-                  {t('addingToCart')}
-                </span>
-              ) : addedMessage ? (
-                t('addedToCart')
-              ) : !canPurchase ? (
-                t('outOfStock')
-              ) : (
-                t('addToCart')
-              )}
-            </button>
-          </div>
-
-          {/* Download after purchase note */}
-          {product.isDownloadable && (
-            <p className="text-muted-foreground text-sm">
-              {t('downloadAfterPurchase')}
-            </p>
-          )}
-
-          {/* Description */}
-          {description && (
-            <div className="border-border border-t pt-4">
-              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('description')}</h2>
-              {'html' in description ? (
-                <div
-                  className="prose prose-sm text-muted-foreground max-w-none"
-                  dangerouslySetInnerHTML={{ __html: description.html }}
-                />
-              ) : (
-                <p className="text-muted-foreground whitespace-pre-wrap">{description.text}</p>
-              )}
-            </div>
-          )}
-
-          {/* Metafields / Specifications */}
-          {product.metafields && product.metafields.length > 0 && (
-            <div className="border-border border-t pt-4">
-              <h2 className="text-foreground mb-3 text-lg font-semibold">{t('specifications')}</h2>
-              <table className="w-full text-sm">
-                <tbody>
-                  {product.metafields.map((field) => (
-                    <tr key={field.id} className="border-border border-b last:border-0">
-                      <td className="text-foreground whitespace-nowrap py-2 pe-4 font-medium">
-                        {field.definitionName}
-                      </td>
-                      <td className="text-muted-foreground py-2">
-                        <MetafieldValue field={field} />
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Upsells \u2014 premium alternatives (product page) */}
-      {recommendations?.upsells && recommendations.upsells.length > 0 && (
-        <RecommendationSection
-          title={t('upgradeYourChoice')}
-          items={recommendations.upsells}
-          className="mt-12"
-        />
-      )}
-
-      {/* Related products \u2014 similar items (bottom of product page) */}
-      {recommendations?.related && recommendations.related.length > 0 && (
-        <RecommendationSection
-          title={t('similarProducts')}
-          items={recommendations.related}
-          className="mt-12"
-        />
-      )}
-    </div>
+    <>
+      <ProductJsonLd product={product} url={productUrl} currency={currency} />
+      <ProductClientSection product={product} />
+    </>
   );
 }
 `,
@@ -3349,7 +2920,10 @@ export default function CartPage() {
       return;
     }
     const client = getClient();
-    client.getCartRecommendations(cart.id, 4).then(setCartRecs).catch(() => {});
+    client
+      .getCartRecommendations(cart.id, 4)
+      .then(setCartRecs)
+      .catch(() => {});
   }, [cart?.id, cart?.items.length]);
 
   if (cartLoading) {
@@ -3457,7 +3031,7 @@ export default function CartPage() {
 `,
   "src/app/checkout/page.tsx": `'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';
@@ -3470,7 +3044,7 @@ import type {
 } from 'brainerce';
 import { formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
-import { useStoreInfo, useAuth, useCart } from '@/providers/store-provider';
+import { useStoreInfo, useCart, useAuth } from '@/providers/store-provider';
 import { CheckoutForm } from '@/components/checkout/checkout-form';
 import { ShippingStep } from '@/components/checkout/shipping-step';
 import { PaymentStep } from '@/components/checkout/payment-step';
@@ -3488,8 +3062,8 @@ type CheckoutStep = 'method' | 'address' | 'shipping' | 'pickup' | 'payment';
 function CheckoutContent() {
   const searchParams = useSearchParams();
   const { storeInfo } = useStoreInfo();
-  const { isLoggedIn } = useAuth();
   const { cart, refreshCart } = useCart();
+  const { isLoggedIn } = useAuth();
   const currency = storeInfo?.currency || 'USD';
   const t = useTranslations('checkout');
   const tc = useTranslations('common');
@@ -3504,90 +3078,125 @@ function CheckoutContent() {
   const [destinations, setDestinations] = useState<ShippingDestinations | null>(null);
   const [pickupLocations, setPickupLocations] = useState<PickupLocation[]>([]);
   const [deliveryType, setDeliveryType] = useState<'shipping' | 'pickup'>('shipping');
+  const [isAllDigital, setIsAllDigital] = useState(false);
+  const [prefillAddress, setPrefillAddress] = useState<SetShippingAddressDto | null>(null);
+  const [prefillCustomer, setPrefillCustomer] = useState<{
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+  } | null>(null);
+  const [hasSavedAddress, setHasSavedAddress] = useState(false);
 
   // Check for returning from canceled payment
   const canceled = searchParams.get('canceled') === 'true';
   const existingCheckoutId = searchParams.get('checkout_id');
 
-  // 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(() => {});
-
-      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
-        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');
+  // Pre-fill address and customer data from profile when logged in
+  useEffect(() => {
+    if (!isLoggedIn) return;
+    getClient()
+      .getCheckoutPrefillData()
+      .then((data) => {
+        if (data.customer) setPrefillCustomer(data.customer);
+        if (data.shippingAddress) {
+          setPrefillAddress(data.shippingAddress);
+          setHasSavedAddress(true);
         }
-        return;
-      }
+      })
+      .catch(() => {});
+  }, [isLoggedIn]);
 
-      // Create new checkout \u2014 cart is always server-side now
-      if (cart && cart.id) {
-        if (isLoggedIn) {
-          // Logged-in user: create checkout from customer cart
-          const newCheckout = await client.createCheckout({ cartId: cart.id });
-          setCheckout(newCheckout);
-        } else {
-          // Guest user: start guest checkout (creates checkout from session cart)
-          const result = await client.startGuestCheckout();
-          if (result.tracked) {
-            const newCheckout = await client.getCheckout(result.checkoutId);
-            setCheckout(newCheckout);
-          } else {
-            setError(t('failedToStartCheckout'));
+  // Initialize or resume checkout (only once)
+  const checkoutInitRef = useRef(false);
+  const cartIdRef = useRef<string | null>(null);
+
+  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;
+
+    const initCheckout = async () => {
+      try {
+        setInitializing(true);
+        setError(null);
+        const client = getClient();
+
+        // 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;
+        }
+
+        // Create new checkout \u2014 cart is always server-side now
+        const newCheckout = await client.createCheckout({ cartId: cart.id });
+        setCheckout(newCheckout);
+
+        // If all items are downloadable, skip shipping \u2014 show contact info step
+        const allDigital = newCheckout.lineItems.every(
+          (i) => (i.product as unknown as { isDownloadable?: boolean }).isDownloadable
+        );
+        setIsAllDigital(allDigital);
+        if (allDigital) {
+          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, isLoggedIn, 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(address: SetShippingAddressDto) {
+  async function handleAddressSubmit(
+    address: SetShippingAddressDto,
+    consent: { acceptsMarketing: boolean; saveDetails: boolean }
+  ) {
     if (!checkout) return;
 
     try {
@@ -3595,10 +3204,52 @@ function CheckoutContent() {
       setError(null);
       const client = getClient();
 
-      const response = await client.setShippingAddress(checkout.id, address);
-      setCheckout(response.checkout);
-      setShippingRates(response.rates);
-      setStep('shipping');
+      if (isAllDigital) {
+        // Digital products: set customer info only, skip shipping
+        const updated = await client.setCheckoutCustomer(checkout.id, {
+          email: address.email,
+          firstName: address.firstName,
+          lastName: address.lastName,
+          phone: address.phone,
+          acceptsMarketing: consent.acceptsMarketing,
+        });
+        setCheckout(updated);
+        setStep('payment');
+      } else {
+        const response = await client.setShippingAddress(checkout.id, address);
+        setCheckout(response.checkout);
+        setShippingRates(response.rates);
+        setStep('shipping');
+      }
+
+      // Update marketing preference for logged-in users
+      if (isLoggedIn) {
+        try {
+          await client.updateMyProfile({ acceptsMarketing: consent.acceptsMarketing });
+        } catch {
+          // non-critical
+        }
+      }
+
+      // Save address to profile if checkbox was checked and no existing saved address
+      if (isLoggedIn && consent.saveDetails && !hasSavedAddress && !isAllDigital) {
+        try {
+          await client.addMyAddress({
+            firstName: address.firstName,
+            lastName: address.lastName,
+            line1: address.line1,
+            line2: address.line2,
+            city: address.city,
+            region: address.region,
+            postalCode: address.postalCode,
+            country: address.country,
+            phone: address.phone,
+            isDefault: true,
+          });
+        } catch {
+          // non-critical
+        }
+      }
     } catch (err) {
       const message = err instanceof Error ? err.message : t('failedToSaveAddress');
       setError(message);
@@ -3735,8 +3386,12 @@ function CheckoutContent() {
     );
   }
 
-  const steps: { key: CheckoutStep; label: string }[] =
-    pickupLocations.length > 0
+  const steps: { key: CheckoutStep; label: string }[] = isAllDigital
+    ? [
+        { key: 'address', label: t('stepContactInfo') },
+        { key: 'payment', label: t('stepPayment') },
+      ]
+    : pickupLocations.length > 0
       ? deliveryType === 'pickup'
         ? [
             { key: 'method', label: t('stepMethod') },
@@ -3846,8 +3501,10 @@ function CheckoutContent() {
           {step === 'address' && (
             <div>
               <div className="mb-4 flex items-center justify-between">
-                <h2 className="text-foreground text-lg font-semibold">{t('shippingAddress')}</h2>
-                {pickupLocations.length > 0 && (
+                <h2 className="text-foreground text-lg font-semibold">
+                  {isAllDigital ? t('contactInfo') : t('shippingAddress')}
+                </h2>
+                {!isAllDigital && pickupLocations.length > 0 && (
                   <button
                     type="button"
                     onClick={() => setStep('method')}
@@ -3860,7 +3517,9 @@ function CheckoutContent() {
               <CheckoutForm
                 onSubmit={handleAddressSubmit}
                 loading={loading}
-                destinations={destinations}
+                destinations={isAllDigital ? null : destinations}
+                showSaveDetails={isLoggedIn && !hasSavedAddress && !isAllDigital}
+                emailOnly={isAllDigital}
                 initialValues={
                   checkout?.shippingAddress
                     ? {
@@ -3875,7 +3534,27 @@ function CheckoutContent() {
                         country: checkout.shippingAddress.country,
                         phone: checkout.shippingAddress.phone || '',
                       }
-                    : undefined
+                    : prefillAddress
+                      ? {
+                          email: prefillAddress.email,
+                          firstName: prefillAddress.firstName,
+                          lastName: prefillAddress.lastName,
+                          line1: prefillAddress.line1,
+                          line2: prefillAddress.line2 || '',
+                          city: prefillAddress.city,
+                          region: prefillAddress.region || '',
+                          postalCode: prefillAddress.postalCode,
+                          country: prefillAddress.country,
+                          phone: prefillAddress.phone || '',
+                        }
+                      : prefillCustomer
+                        ? {
+                            email: prefillCustomer.email,
+                            firstName: prefillCustomer.firstName || '',
+                            lastName: prefillCustomer.lastName || '',
+                            phone: prefillCustomer.phone || '',
+                          }
+                        : undefined
                 }
               />
             </div>
@@ -3931,13 +3610,15 @@ function CheckoutContent() {
             <div>
               <div className="mb-4 flex items-center justify-between">
                 <h2 className="text-foreground text-lg font-semibold">{t('payment')}</h2>
-                <button
-                  type="button"
-                  onClick={() => setStep(deliveryType === 'pickup' ? 'pickup' : 'shipping')}
-                  className="text-primary text-sm hover:underline"
-                >
-                  {deliveryType === 'pickup' ? t('changePickup') : t('changeShipping')}
-                </button>
+                {!isAllDigital && (
+                  <button
+                    type="button"
+                    onClick={() => setStep(deliveryType === 'pickup' ? 'pickup' : 'shipping')}
+                    className="text-primary text-sm hover:underline"
+                  >
+                    {deliveryType === 'pickup' ? t('changePickup') : t('changeShipping')}
+                  </button>
+                )}
               </div>
 
               <PaymentStep checkoutId={checkout.id} />
@@ -4013,12 +3694,13 @@ function CheckoutContent() {
               )
             )}
 
-            {/* Coupon input \u2014 show from shipping/pickup step onwards */}
-            {cart && (step === 'shipping' || step === 'pickup' || step === 'payment') && (
-              <div className="border-border border-t pt-4">
-                <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
-              </div>
-            )}
+            {/* Coupon input \u2014 show from shipping/pickup step onwards (or immediately if digital) */}
+            {cart &&
+              (isAllDigital || step === 'shipping' || step === 'pickup' || step === 'payment') && (
+                <div className="border-border border-t pt-4">
+                  <CouponInput cart={cart} onUpdate={handleCouponUpdate} />
+                </div>
+              )}
 
             {/* Totals */}
             {checkout && (
@@ -4140,7 +3822,7 @@ export default function CheckoutPage() {
 import { Suspense, useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Link from 'next/link';
-import type { WaitForOrderResult } from 'brainerce';
+import type { WaitForOrderResult, OrderDownloadLink } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
@@ -4256,6 +3938,10 @@ function OrderConfirmationContent() {
 
         <p className="text-muted-foreground mt-2">{t('confirmationEmail')}</p>
 
+        {result.status.orderId && (
+          <ConfirmationDownloads orderId={result.status.orderId} checkoutId={checkoutId!} />
+        )}
+
         <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
           <Link
             href="/products"
@@ -4315,6 +4001,63 @@ function OrderConfirmationContent() {
   );
 }
 
+function ConfirmationDownloads({ orderId, checkoutId }: { orderId: string; checkoutId: string }) {
+  const t = useTranslations('orderConfirmation');
+  const [downloads, setDownloads] = useState<OrderDownloadLink[] | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function fetchDownloads() {
+      const client = getClient();
+      // Retry a few times \u2014 the worker may still be writing downloadMeta
+      for (let attempt = 0; attempt < 3; attempt++) {
+        try {
+          const links = await client.getOrderDownloads(orderId, { checkoutId });
+          if (!cancelled && links.length > 0) {
+            setDownloads(links);
+            return;
+          }
+        } catch {
+          // Not all orders have downloads
+        }
+        if (attempt < 2 && !cancelled) {
+          await new Promise((r) => setTimeout(r, 1500));
+        }
+      }
+    }
+    fetchDownloads();
+    return () => {
+      cancelled = true;
+    };
+  }, [orderId, checkoutId]);
+
+  if (!downloads || downloads.length === 0) return null;
+
+  return (
+    <div className="border-border bg-muted/30 mx-auto mt-8 max-w-md rounded-lg border p-6 text-start">
+      <h3 className="text-foreground mb-3 text-sm font-semibold">{t('yourDownloads')}</h3>
+      <div className="space-y-2">
+        {downloads.map((link, idx) => (
+          <div key={idx} className="flex items-center justify-between gap-3">
+            <div className="min-w-0 flex-1">
+              <p className="text-foreground truncate text-sm">{link.fileName}</p>
+              <p className="text-muted-foreground truncate text-xs">{link.productName}</p>
+            </div>
+            <a
+              href={link.downloadUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-primary text-primary-foreground flex-shrink-0 rounded px-3 py-1.5 text-xs font-medium hover:opacity-90"
+            >
+              {t('download')}
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default function OrderConfirmationPage() {
   return (
     <Suspense
@@ -4411,6 +4154,7 @@ export default function RegisterPage() {
     lastName: string;
     email: string;
     password: string;
+    acceptsMarketing: boolean;
   }) {
     try {
       setError(null);
@@ -4636,7 +4380,7 @@ function VerifyEmailContent() {
 
         <form onSubmit={handleFormSubmit} className="space-y-6">
           {/* Digit inputs */}
-          <div className="flex justify-center gap-2 sm:gap-3" onPaste={handlePaste}>
+          <div dir="ltr" className="flex justify-center gap-2 sm:gap-3" onPaste={handlePaste}>
             {digits.map((digit, index) => (
               <input
                 key={index}
@@ -4713,108 +4457,355 @@ export default function VerifyEmailPage() {
   );
 }
 `,
-  "src/app/auth/callback/page.tsx": `'use client';
+  "src/app/forgot-password/page.tsx": `'use client';
 
-import { Suspense, useEffect, useState, useRef } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useAuth } from '@/providers/store-provider';
+import { useState } from 'react';
+import Link from 'next/link';
+import { getClient } from '@/lib/brainerce';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { useTranslations } from '@/lib/translations';
 
-function OAuthCallbackContent() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const auth = useAuth();
-  const [error, setError] = useState<string | null>(null);
-  const processedRef = useRef(false);
+export default function ForgotPasswordPage() {
   const t = useTranslations('auth');
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  const oauthSuccess = searchParams.get('oauth_success');
-  const oauthError = searchParams.get('oauth_error');
-  // Token is no longer in URL \u2014 it was set as httpOnly cookie by /api/auth/oauth-callback
-
-  useEffect(() => {
-    // Prevent double-processing in React StrictMode
-    if (processedRef.current) return;
-    processedRef.current = true;
-
-    if (oauthError) {
-      setError(oauthError);
-      return;
-    }
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
 
-    if (oauthSuccess === 'true') {
-      // Cookie was already set by the API route; refresh auth state
-      auth.login().then(() => {
-        router.push('/');
-      });
-    } else {
-      setError(t('authFailedDesc'));
+    try {
+      setLoading(true);
+      setError(null);
+      const client = getClient();
+      const resetUrl = \`\${window.location.origin}/api/auth/reset-callback\`;
+      await client.forgotPassword(email, { resetUrl });
+      setSent(true);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
+      setError(message);
+    } finally {
+      setLoading(false);
     }
-  }, [oauthSuccess, oauthError, auth, router, t]);
-
-  if (error) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-        <div className="w-full max-w-md space-y-4 text-center">
-          <svg
-            className="text-destructive mx-auto h-12 w-12"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
-            />
-          </svg>
-          <h1 className="text-foreground text-2xl font-bold">{t('authFailed')}</h1>
-          <p className="text-muted-foreground text-sm">{error}</p>
-          <button
-            type="button"
-            onClick={() => router.push('/login')}
-            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-          >
-            {t('backToLogin')}
-          </button>
-        </div>
-      </div>
-    );
   }
 
   return (
-    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 py-12">
-      <LoadingSpinner size="lg" />
-      <p className="text-muted-foreground mt-4">{t('completingSignIn')}</p>
-    </div>
-  );
-}
-
-export default function OAuthCallbackPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[60vh] items-center justify-center">
-          <LoadingSpinner size="lg" />
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('forgotPasswordTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('forgotPasswordSubtitle')}</p>
         </div>
-      }
-    >
-      <OAuthCallbackContent />
-    </Suspense>
+
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
+            {error}
+          </div>
+        )}
+
+        {sent ? (
+          <div className="space-y-4">
+            <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+              {t('resetLinkSent')}
+            </div>
+            <Link
+              href="/login"
+              className="text-primary block text-center text-sm font-medium hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="forgot-email"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('email')}
+              </label>
+              <input
+                id="forgot-email"
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder={t('emailPlaceholder')}
+                autoComplete="email"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  {t('sendingResetLink')}
+                </>
+              ) : (
+                t('sendResetLink')
+              )}
+            </button>
+
+            <Link
+              href="/login"
+              className="text-muted-foreground block text-center text-sm hover:underline"
+            >
+              {t('backToLogin')}
+            </Link>
+          </form>
+        )}
+      </div>
+    </div>
   );
 }
 `,
-  "src/app/account/page.tsx": `'use client';
+  "src/app/reset-password/page.tsx": `'use client';
 
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import type { CustomerProfile, Order } from 'brainerce';
-import { getClient } from '@/lib/brainerce';
-import { useAuth } from '@/providers/store-provider';
+import Link from 'next/link';
+import { proxyResetPassword } from '@/lib/auth';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { ProfileSection } from '@/components/account/profile-section';
+import { useTranslations } from '@/lib/translations';
+
+export default function ResetPasswordPage() {
+  const router = useRouter();
+  const t = useTranslations('auth');
+
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState(false);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (loading) return;
+
+    if (newPassword !== confirmPassword) {
+      setError(t('passwordsMustMatch'));
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+      await proxyResetPassword(newPassword);
+      setSuccess(true);
+      setTimeout(() => router.push('/login'), 2000);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'Something went wrong. Please try again.';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('resetPasswordTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('resetPasswordSubtitle')}</p>
+        </div>
+
+        {error && (
+          <div className="bg-destructive/10 border-destructive/20 text-destructive space-y-2 rounded-lg border px-4 py-3 text-sm">
+            <p>{error}</p>
+            <Link
+              href="/forgot-password"
+              className="text-primary block font-medium hover:underline"
+            >
+              {t('sendResetLink')}
+            </Link>
+          </div>
+        )}
+
+        {success ? (
+          <div className="rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-800 dark:bg-green-950/30 dark:text-green-300">
+            {t('passwordResetSuccess')}
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label
+                htmlFor="new-password"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('newPassword')}
+              </label>
+              <input
+                id="new-password"
+                type="password"
+                required
+                minLength={8}
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                placeholder={t('newPasswordPlaceholder')}
+                autoComplete="new-password"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="confirm-password"
+                className="text-foreground mb-1.5 block text-sm font-medium"
+              >
+                {t('confirmPassword')}
+              </label>
+              <input
+                id="confirm-password"
+                type="password"
+                required
+                minLength={8}
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                placeholder={t('confirmPasswordPlaceholder')}
+                autoComplete="new-password"
+                className="border-border bg-background text-foreground placeholder:text-muted-foreground focus:ring-primary/20 focus:border-primary h-10 w-full rounded border px-3 text-sm focus:outline-none focus:ring-2"
+              />
+            </div>
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="bg-primary text-primary-foreground flex h-10 w-full items-center justify-center gap-2 rounded text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {loading ? (
+                <>
+                  <LoadingSpinner
+                    size="sm"
+                    className="border-primary-foreground/30 border-t-primary-foreground"
+                  />
+                  {t('resettingPassword')}
+                </>
+              ) : (
+                t('resetPassword')
+              )}
+            </button>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
+`,
+  "src/app/auth/callback/page.tsx": `'use client';
+
+import { Suspense, useEffect, useState, useRef } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useAuth } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+function OAuthCallbackContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const auth = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const processedRef = useRef(false);
+  const t = useTranslations('auth');
+
+  const oauthSuccess = searchParams.get('oauth_success');
+  const oauthError = searchParams.get('oauth_error');
+  // Token is no longer in URL \u2014 it was set as httpOnly cookie by /api/auth/oauth-callback
+
+  useEffect(() => {
+    // Prevent double-processing in React StrictMode
+    if (processedRef.current) return;
+    processedRef.current = true;
+
+    if (oauthError) {
+      setError(oauthError);
+      return;
+    }
+
+    if (oauthSuccess === 'true') {
+      // Cookie was already set by the API route; refresh auth state
+      auth.login().then(() => {
+        router.push('/');
+      });
+    } else {
+      setError(t('authFailedDesc'));
+    }
+  }, [oauthSuccess, oauthError, auth, router, t]);
+
+  if (error) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md space-y-4 text-center">
+          <svg
+            className="text-destructive mx-auto h-12 w-12"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+          <h1 className="text-foreground text-2xl font-bold">{t('authFailed')}</h1>
+          <p className="text-muted-foreground text-sm">{error}</p>
+          <button
+            type="button"
+            onClick={() => router.push('/login')}
+            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            {t('backToLogin')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 py-12">
+      <LoadingSpinner size="lg" />
+      <p className="text-muted-foreground mt-4">{t('completingSignIn')}</p>
+    </div>
+  );
+}
+
+export default function OAuthCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <OAuthCallbackContent />
+    </Suspense>
+  );
+}
+`,
+  "src/app/account/page.tsx": `'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import type { CustomerProfile, Order } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
+import { useAuth } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { ProfileSection } from '@/components/account/profile-section';
+import { AddressBook } from '@/components/account/address-book';
 import { OrderHistory } from '@/components/account/order-history';
 import { useTranslations } from '@/lib/translations';
 
@@ -4907,7 +4898,16 @@ export default function AccountPage() {
 
       {/* Profile Section */}
       {profile && (
-        <ProfileSection profile={profile} onProfileUpdate={setProfile} className="mb-8" />
+        <ProfileSection profile={profile} onProfileUpdate={setProfile} className="mb-6" />
+      )}
+
+      {/* Address Book */}
+      {profile && (
+        <AddressBook
+          addresses={profile.addresses ?? []}
+          onUpdate={(updated) => setProfile((p) => (p ? { ...p, addresses: updated } : p))}
+          className="mb-8"
+        />
       )}
 
       {/* Order History */}
@@ -4996,9 +4996,11 @@ async function proxyRequest(
   };
 
   // Forward Origin/Referer so backend BrowserOriginGuard accepts proxied requests
-  const origin = request.headers.get('origin');
+  // Always send Origin \u2014 same-origin GET requests may not include it, but the backend
+  // uses its presence to distinguish fetch() calls from direct browser navigation
+  const origin = request.headers.get('origin') || request.nextUrl.origin;
   const referer = request.headers.get('referer');
-  if (origin) headers['Origin'] = origin;
+  headers['Origin'] = origin;
   if (referer) headers['Referer'] = referer;
 
   // Forward SDK version header if present
@@ -5177,7 +5179,7 @@ export async function GET(request: NextRequest) {
 }
 `,
   "src/app/api/auth/me/route.ts": `import { NextResponse } from 'next/server';
-import { cookies } from 'next/headers';
+import { cookies, headers } from 'next/headers';
 
 const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
   /\\/$/,
@@ -5201,12 +5203,19 @@ export async function GET() {
     return NextResponse.json({ isLoggedIn: false });
   }
 
+  // Derive Origin from the incoming request so the backend's BrowserOriginGuard accepts it
+  const requestHeaders = await headers();
+  const host = requestHeaders.get('host') || 'localhost:3000';
+  const proto = requestHeaders.get('x-forwarded-proto') || 'http';
+  const origin = requestHeaders.get('origin') || \`\${proto}://\${host}\`;
+
   try {
     // Validate token by calling backend profile endpoint
     const response = await fetch(\`\${BACKEND_URL}/api/vc/\${CONNECTION_ID}/customers/me\`, {
       headers: {
         Authorization: \`Bearer \${tokenCookie.value}\`,
         'Content-Type': 'application/json',
+        Origin: origin,
       },
     });
 
@@ -5240,6 +5249,126 @@ export async function POST() {
   response.cookies.delete(LOGGED_IN_COOKIE);
   return response;
 }
+`,
+  "src/app/api/auth/reset-callback/route.ts": `import { NextRequest, NextResponse } from 'next/server';
+
+const RESET_TOKEN_COOKIE = 'brainerce_reset_token';
+const RESET_TOKEN_MAX_AGE = 10 * 60; // 10 minutes
+
+function isSecure(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
+
+/**
+ * Password-reset callback handler.
+ * The email link redirects here with ?token=... from the backend.
+ * We store the token in an httpOnly cookie and redirect to /reset-password (clean URL).
+ * This mirrors the OAuth callback pattern \u2014 the token never reaches client JS.
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const token = searchParams.get('token');
+
+  if (!token) {
+    const redirectUrl = new URL('/forgot-password', request.url);
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  const redirectUrl = new URL('/reset-password', request.url);
+  const response = NextResponse.redirect(redirectUrl);
+
+  // Set httpOnly cookie with the reset token (short-lived)
+  response.cookies.set(RESET_TOKEN_COOKIE, token, {
+    httpOnly: true,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: RESET_TOKEN_MAX_AGE,
+  });
+
+  // Prevent token leaking via Referer header
+  response.headers.set('Referrer-Policy', 'no-referrer');
+
+  return response;
+}
+`,
+  "src/app/api/auth/reset-password/route.ts": `import { NextRequest, NextResponse } from 'next/server';
+import { cookies, headers } from 'next/headers';
+
+const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
+  /\\/$/,
+  ''
+);
+
+const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '';
+
+const RESET_TOKEN_COOKIE = 'brainerce_reset_token';
+const CSRF_HEADER = 'x-requested-with';
+const CSRF_VALUE = 'brainerce';
+
+/**
+ * BFF endpoint for password reset.
+ * Reads the reset token from the httpOnly cookie (set by /api/auth/reset-callback)
+ * and proxies the request to the backend. The token never touches client JS.
+ */
+export async function POST(request: NextRequest) {
+  // CSRF check
+  const csrfHeader = request.headers.get(CSRF_HEADER);
+  if (csrfHeader !== CSRF_VALUE) {
+    return NextResponse.json({ error: 'CSRF validation failed' }, { status: 403 });
+  }
+
+  // Read reset token from httpOnly cookie
+  const cookieStore = await cookies();
+  const resetTokenCookie = cookieStore.get(RESET_TOKEN_COOKIE);
+
+  if (!resetTokenCookie?.value) {
+    return NextResponse.json(
+      { error: 'No reset token found. Please request a new password reset link.' },
+      { status: 400 }
+    );
+  }
+
+  // Parse request body
+  const body = await request.json();
+  const { newPassword } = body;
+
+  if (!newPassword) {
+    return NextResponse.json({ error: 'New password is required' }, { status: 400 });
+  }
+
+  // Derive Origin from the incoming request so the backend's BrowserOriginGuard accepts it
+  const requestHeaders = await headers();
+  const host = requestHeaders.get('host') || 'localhost:3000';
+  const proto = requestHeaders.get('x-forwarded-proto') || 'http';
+  const origin = requestHeaders.get('origin') || \`\${proto}://\${host}\`;
+
+  // Proxy to backend
+  const backendUrl = \`\${BACKEND_URL}/api/vc/\${CONNECTION_ID}/customers/reset-password\`;
+
+  const backendResponse = await fetch(backendUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Origin: origin,
+    },
+    body: JSON.stringify({
+      token: resetTokenCookie.value,
+      newPassword,
+    }),
+  });
+
+  const data = await backendResponse.json();
+
+  const response = NextResponse.json(data, {
+    status: backendResponse.status,
+  });
+
+  // Always clear the reset token cookie after use (success or failure)
+  response.cookies.delete(RESET_TOKEN_COOKIE);
+
+  return response;
+}
 `,
   "src/middleware.ts": `import { NextRequest, NextResponse } from 'next/server';
 
@@ -5269,14 +5398,17 @@ export const config = {
 `,
   "src/components/products/product-card.tsx": `'use client';
 
+import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import type { Product } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
+import { getProductPriceInfo, getVariantPrice, formatPrice } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
 import { PriceDisplay } from '@/components/shared/price-display';
 import { StockBadge } from '@/components/products/stock-badge';
 import { DiscountBadge } from '@/components/products/discount-badge';
+import { useCart, useStoreInfo } from '@/providers/store-provider';
 import { cn } from '@/lib/utils';
 
 interface ProductCardProps {
@@ -5284,60 +5416,167 @@ interface ProductCardProps {
   className?: string;
 }
 
+function VariantPriceRange({ product }: { product: Product }) {
+  const { storeInfo } = useStoreInfo();
+  const currency = storeInfo?.currency || 'USD';
+  const variants = product.variants ?? [];
+  if (variants.length === 0) return null;
+
+  const prices = variants.map((v) => getVariantPrice(v, product.basePrice));
+  const min = Math.min(...prices);
+  const max = Math.max(...prices);
+
+  return (
+    <span className="text-foreground text-sm font-medium">
+      {min === max
+        ? (formatPrice(min, { currency }) as string)
+        : \`\${formatPrice(min, { currency })} \u2013 \${formatPrice(max, { currency })}\`}
+    </span>
+  );
+}
+
 export function ProductCard({ product, className }: ProductCardProps) {
   const t = useTranslations('common');
   const tp = useTranslations('productDetail');
+  const tProd = useTranslations('products');
+  const router = useRouter();
+  const { refreshCart } = useCart();
   const { price, originalPrice, isOnSale } = getProductPriceInfo(product);
   const mainImage = product.images?.[0];
   const imageUrl = mainImage?.url || null;
   const slug = product.slug || product.id;
+  const isVariable = product.type === 'VARIABLE';
+
+  const [adding, setAdding] = useState(false);
+  const [added, setAdded] = useState(false);
+
+  const canPurchase = product.inventory?.canPurchase !== false;
+
+  async function handleAddToCart(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isVariable) {
+      router.push(\`/products/\${slug}\`);
+      return;
+    }
+
+    if (adding || !canPurchase) return;
+
+    try {
+      setAdding(true);
+      const { getClient } = await import('@/lib/brainerce');
+      const client = getClient();
+      await client.smartAddToCart({ productId: product.id, quantity: 1 });
+      await refreshCart();
+      setAdded(true);
+      setTimeout(() => setAdded(false), 2000);
+    } catch (err) {
+      console.error('Failed to add to cart:', err);
+    } finally {
+      setAdding(false);
+    }
+  }
 
   return (
-    <Link
-      href={\`/products/\${slug}\`}
+    <div
       className={cn(
         'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
         className
       )}
     >
-      {/* Image */}
-      <div className="bg-muted relative aspect-square overflow-hidden">
-        {imageUrl ? (
-          <Image
-            src={imageUrl}
-            alt={mainImage?.alt || product.name}
-            fill
-            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
-            className="object-cover transition-transform duration-300 group-hover:scale-105"
-          />
-        ) : (
-          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
-            <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
+      {/* Image \u2014 clickable */}
+      <Link href={\`/products/\${slug}\`} className="block">
+        <div className="bg-muted relative aspect-square overflow-hidden">
+          {imageUrl ? (
+            <Image
+              src={imageUrl}
+              alt={mainImage?.alt || product.name}
+              fill
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              className="object-cover transition-transform duration-300 group-hover:scale-105"
+            />
+          ) : (
+            <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+              <svg className="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+            </div>
+          )}
+
+          {/* Badges */}
+          <div className="absolute start-2 top-2 flex flex-col gap-1">
+            {isOnSale && (
+              <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
+                {t('sale')}
+              </span>
+            )}
+            <DiscountBadge discount={product.discount} />
+            {product.isDownloadable && (
+              <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
+                {tp('digitalProduct')}
+              </span>
+            )}
           </div>
-        )}
 
-        {/* Badges */}
-        <div className="absolute start-2 top-2 flex flex-col gap-1">
-          {isOnSale && (
-            <span className="bg-destructive text-destructive-foreground rounded px-2 py-1 text-xs font-bold">
-              {t('sale')}
-            </span>
-          )}
-          <DiscountBadge discount={product.discount} />
-          {product.isDownloadable && (
-            <span className="bg-primary text-primary-foreground rounded px-2 py-1 text-xs font-bold">
-              {tp('digitalProduct')}
-            </span>
+          {/* Add to cart overlay button */}
+          {(isVariable || canPurchase) && (
+            <button
+              onClick={handleAddToCart}
+              disabled={adding}
+              aria-label={isVariable ? tProd('selectOptions') : tp('addToCart')}
+              className={cn(
+                'absolute bottom-2 end-2 flex h-8 w-8 items-center justify-center rounded-full shadow-md transition-all',
+                'translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100',
+                added
+                  ? 'bg-green-500 text-white'
+                  : 'bg-primary text-primary-foreground hover:opacity-90'
+              )}
+            >
+              {added ? (
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2.5}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              ) : isVariable ? (
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+                </svg>
+              ) : (
+                <svg
+                  className="h-4 w-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
+                  />
+                </svg>
+              )}
+            </button>
           )}
         </div>
-      </div>
+      </Link>
 
       {/* Content */}
       <div className="space-y-2 p-3">
@@ -5355,18 +5594,24 @@ export function ProductCard({ product, className }: ProductCardProps) {
           </div>
         )}
 
-        {/* Name */}
-        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
-          {product.name}
-        </h3>
+        {/* Name \u2014 clickable */}
+        <Link href={\`/products/\${slug}\`}>
+          <h3 className="text-foreground hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+            {product.name}
+          </h3>
+        </Link>
 
         {/* Price */}
-        <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+        {isVariable ? (
+          <VariantPriceRange product={product} />
+        ) : (
+          <PriceDisplay price={originalPrice} salePrice={isOnSale ? price : undefined} size="sm" />
+        )}
 
         {/* Stock */}
         <StockBadge inventory={product.inventory} />
       </div>
-    </Link>
+    </div>
   );
 }
 `,
@@ -5410,8 +5655,10 @@ export function ProductGrid({ products, className }: ProductGridProps) {
 
 import { useMemo } from 'react';
 import type { Product, ProductVariant } from 'brainerce';
-import { getVariantOptions, getStockStatus, formatPrice } 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 {
@@ -5423,8 +5670,12 @@ interface VariantSelectorProps {
 
 interface AttributeGroup {
   name: string;
+  displayType: string;
   values: Array<{
     value: string;
+    swatchColor?: string | null;
+    swatchColor2?: string | null;
+    swatchImageUrl?: string | null;
     variants: ProductVariant[];
   }>;
 }
@@ -5436,10 +5687,49 @@ export function VariantSelector({
   className,
 }: VariantSelectorProps) {
   const { storeInfo } = useStoreInfo();
+  const t = useTranslations('productDetail');
   const currency = storeInfo?.currency || 'USD';
   const variants = useMemo(() => product.variants || [], [product.variants]);
 
-  // Build attribute groups from product attribute options or variant data
+  // 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[]>>();
 
@@ -5457,14 +5747,24 @@ export function VariantSelector({
       }
     }
 
-    return Array.from(groups.entries()).map(([name, valuesMap]) => ({
-      name,
-      values: Array.from(valuesMap.entries()).map(([value, variantList]) => ({
-        value,
-        variants: variantList,
-      })),
-    }));
-  }, [variants]);
+    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(() => {
@@ -5504,33 +5804,111 @@ export function VariantSelector({
             )}
           </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;
+            {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>
+                  );
+                }
 
-              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>
-              );
-            })}
+                // 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>
       ))}
@@ -5547,18 +5925,30 @@ export function VariantSelector({
               }
             </span>
           )}
-          <span>{getStockStatus(selectedVariant.inventory)}</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));
+}
 `,
   "src/components/products/stock-badge.tsx": `'use client';
 
-import { getStockStatus } from 'brainerce';
 import type { InventoryInfo } from 'brainerce';
 import { cn } from '@/lib/utils';
+import { useTranslations } from '@/lib/translations';
 
 interface StockBadgeProps {
   inventory: InventoryInfo | null | undefined;
@@ -5567,27 +5957,56 @@ interface StockBadgeProps {
 }
 
 export function StockBadge({ inventory, lowStockThreshold = 5, className }: StockBadgeProps) {
-  const status = getStockStatus(inventory, { lowStockThreshold });
-
-  const colorClasses =
-    status === 'Out of Stock' || status === 'Unavailable'
-      ? 'bg-red-100 text-red-800'
-      : status === 'Low Stock'
-        ? 'bg-yellow-100 text-yellow-800'
-        : 'bg-green-100 text-green-800';
+  const t = useTranslations('productDetail');
+  const label = getStockLabel(inventory, lowStockThreshold, t);
+  const color = getStockColor(inventory, lowStockThreshold);
 
   return (
     <span
       className={cn(
         'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-        colorClasses,
+        color,
         className
       )}
     >
-      {status}
+      {label}
     </span>
   );
 }
+
+function getStockLabel(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number,
+  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');
+
+  // TRACKED \u2014 show actual quantity
+  if (available <= lowStockThreshold) {
+    return t('onlyLeft').replace('{available}', String(available));
+  }
+  return t('availableInStock').replace('{available}', String(available));
+}
+
+function getStockColor(
+  inventory: InventoryInfo | null | undefined,
+  lowStockThreshold: number
+): string {
+  if (!inventory) return 'bg-red-100 text-red-800';
+
+  const { trackingMode, inStock, available } = inventory;
+
+  if (trackingMode === 'DISABLED' || !inStock) return 'bg-red-100 text-red-800';
+  if (trackingMode === 'TRACKED' && available <= lowStockThreshold)
+    return 'bg-yellow-100 text-yellow-800';
+  return 'bg-green-100 text-green-800';
+}
 `,
   "src/components/products/discount-badge.tsx": `import type { ProductDiscount } from 'brainerce';
 import { cn } from '@/lib/utils';
@@ -5617,7 +6036,7 @@ export function DiscountBadge({ discount, className }: DiscountBadgeProps) {
 import { useState } from 'react';
 import Image from 'next/image';
 import type { CartItem as CartItemType } from 'brainerce';
-import { getCartItemName, getCartItemImage, formatPrice } from 'brainerce';
+import { getCartItemImage, formatPrice } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useTranslations } from '@/lib/translations';
 import { useStoreInfo } from '@/providers/store-provider';
@@ -5638,7 +6057,7 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
   const [updating, setUpdating] = useState(false);
   const [removing, setRemoving] = useState(false);
 
-  const name = getCartItemName(item);
+  const productName = item.product.name;
   const imageUrl = getCartItemImage(item);
   const variantName = item.variant?.name;
   const unitPrice = parseFloat(item.unitPrice);
@@ -5685,7 +6104,7 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
       {/* Image */}
       <div className="bg-muted relative h-20 w-20 flex-shrink-0 overflow-hidden rounded">
         {imageUrl ? (
-          <Image src={imageUrl} alt={name} fill sizes="80px" className="object-cover" />
+          <Image src={imageUrl} alt={productName} fill sizes="80px" className="object-cover" />
         ) : (
           <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
             <svg className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -5702,7 +6121,7 @@ export function CartItem({ item, onUpdate, className }: CartItemProps) {
 
       {/* Details */}
       <div className="min-w-0 flex-1">
-        <h3 className="text-foreground truncate text-sm font-medium">{name}</h3>
+        <h3 className="text-foreground truncate text-sm font-medium">{productName}</h3>
 
         {/* Variant name */}
         {variantName && <p className="text-muted-foreground mt-1 text-xs">{variantName}</p>}
@@ -6156,17 +6575,24 @@ export function ReservationCountdown({ reservation, className }: ReservationCoun
 `,
   "src/components/checkout/checkout-form.tsx": `'use client';
 
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import type { SetShippingAddressDto, ShippingDestinations } from 'brainerce';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
+interface CheckoutConsent {
+  acceptsMarketing: boolean;
+  saveDetails: boolean;
+}
+
 interface CheckoutFormProps {
-  onSubmit: (address: SetShippingAddressDto) => void;
+  onSubmit: (address: SetShippingAddressDto, consent: CheckoutConsent) => void;
   loading?: boolean;
   initialValues?: Partial<SetShippingAddressDto>;
   destinations?: ShippingDestinations | null;
   className?: string;
+  showSaveDetails?: boolean;
+  emailOnly?: boolean;
 }
 
 export function CheckoutForm({
@@ -6175,6 +6601,8 @@ export function CheckoutForm({
   initialValues,
   destinations,
   className,
+  showSaveDetails = false,
+  emailOnly = false,
 }: CheckoutFormProps) {
   const [formData, setFormData] = useState<SetShippingAddressDto>({
     email: initialValues?.email || '',
@@ -6189,8 +6617,30 @@ export function CheckoutForm({
     phone: initialValues?.phone || '',
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [privacyAccepted, setPrivacyAccepted] = useState(false);
+  const [acceptsMarketing, setAcceptsMarketing] = useState(false);
+  const [saveDetails, setSaveDetails] = useState(true);
   const t = useTranslations('checkoutForm');
   const tc = useTranslations('common');
+  const hasAppliedPrefill = useRef(!!initialValues);
+
+  // Sync prefill data when it arrives async (e.g. from getCheckoutPrefillData)
+  useEffect(() => {
+    if (!initialValues || hasAppliedPrefill.current) return;
+    hasAppliedPrefill.current = true;
+    setFormData((prev) => ({
+      email: initialValues.email || prev.email,
+      firstName: initialValues.firstName || prev.firstName,
+      lastName: initialValues.lastName || prev.lastName,
+      line1: initialValues.line1 || prev.line1,
+      line2: initialValues.line2 || prev.line2 || '',
+      city: initialValues.city || prev.city,
+      region: initialValues.region || prev.region || '',
+      postalCode: initialValues.postalCode || prev.postalCode,
+      country: initialValues.country || prev.country,
+      phone: initialValues.phone || prev.phone || '',
+    }));
+  }, [initialValues]);
 
   const hasCountryOptions = destinations && destinations.countries.length > 0;
   const countryRegions = destinations?.regions[formData.country];
@@ -6211,17 +6661,22 @@ export function CheckoutForm({
     if (!formData.lastName.trim()) {
       newErrors.lastName = t('lastNameRequired');
     }
-    if (!formData.line1.trim()) {
-      newErrors.line1 = t('addressRequired');
-    }
-    if (!formData.city.trim()) {
-      newErrors.city = t('cityRequired');
-    }
-    if (!formData.postalCode.trim()) {
-      newErrors.postalCode = t('postalCodeRequired');
+    if (!emailOnly) {
+      if (!formData.line1.trim()) {
+        newErrors.line1 = t('addressRequired');
+      }
+      if (!formData.city.trim()) {
+        newErrors.city = t('cityRequired');
+      }
+      if (!formData.postalCode.trim()) {
+        newErrors.postalCode = t('postalCodeRequired');
+      }
+      if (!formData.country.trim()) {
+        newErrors.country = t('countryRequired');
+      }
     }
-    if (!formData.country.trim()) {
-      newErrors.country = t('countryRequired');
+    if (!privacyAccepted) {
+      newErrors.privacy = t('privacyRequired');
     }
 
     setErrors(newErrors);
@@ -6231,7 +6686,7 @@ export function CheckoutForm({
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (validate()) {
-      onSubmit(formData);
+      onSubmit(formData, { acceptsMarketing, saveDetails: showSaveDetails && saveDetails });
     }
   }
 
@@ -6307,154 +6762,228 @@ export function CheckoutForm({
         </div>
       </div>
 
-      {/* 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>
-          ) : (
+      {!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>
+              ) : (
+                <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>
+          </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>
+
+          {/* 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>
+        </>
+      )}
 
-      {/* Address line 1 */}
+      {/* Privacy Policy (required) */}
       <div>
-        <label htmlFor="line1" className="text-foreground mb-1 block text-sm font-medium">
-          {t('address')} <span className="text-destructive">*</span>
+        <label className="flex cursor-pointer items-start gap-2">
+          <input
+            type="checkbox"
+            checked={privacyAccepted}
+            onChange={(e) => {
+              setPrivacyAccepted(e.target.checked);
+              if (e.target.checked && errors.privacy) {
+                setErrors((prev) => {
+                  const next = { ...prev };
+                  delete next.privacy;
+                  return next;
+                });
+              }
+            }}
+            className="accent-primary mt-0.5"
+          />
+          <span className="text-muted-foreground text-sm">
+            {t('privacyAcceptPrefix')}{' '}
+            <a
+              href="/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary underline underline-offset-2"
+            >
+              {t('privacyPolicyLink')}
+            </a>{' '}
+            <span className="text-destructive">*</span>
+          </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>}
+        {errors.privacy && <p className="text-destructive mt-1 text-xs">{errors.privacy}</p>}
       </div>
 
-      {/* Address line 2 */}
-      <div>
-        <label htmlFor="line2" className="text-foreground mb-1 block text-sm font-medium">
-          {t('apartmentSuite')}
-        </label>
+      {/* Marketing consent (optional) */}
+      <label className="flex cursor-pointer items-start gap-2">
         <input
-          id="line2"
-          type="text"
-          value={formData.line2 || ''}
-          onChange={(e) => updateField('line2', e.target.value)}
-          className={cn(inputClass, 'border-border')}
-          placeholder={t('aptPlaceholder')}
+          type="checkbox"
+          checked={acceptsMarketing}
+          onChange={(e) => setAcceptsMarketing(e.target.checked)}
+          className="accent-primary mt-0.5"
         />
-      </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>
+        <span className="text-muted-foreground text-sm">{t('acceptsMarketing')}</span>
+      </label>
 
-        <div>
-          <label htmlFor="postalCode" className="text-foreground mb-1 block text-sm font-medium">
-            {t('postalCode')} <span className="text-destructive">*</span>
-          </label>
+      {/* Save details for next time (logged-in users only) */}
+      {showSaveDetails && (
+        <label className="flex cursor-pointer items-start gap-2">
           <input
-            id="postalCode"
-            type="text"
-            value={formData.postalCode}
-            onChange={(e) => updateField('postalCode', e.target.value)}
-            className={cn(inputClass, errors.postalCode ? 'border-destructive' : 'border-border')}
+            type="checkbox"
+            checked={saveDetails}
+            onChange={(e) => setSaveDetails(e.target.checked)}
+            className="accent-primary mt-0.5"
           />
-          {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')}
+          <span className="text-muted-foreground text-sm">{t('saveDetailsForNextTime')}</span>
         </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>
+      )}
 
       <button
         type="submit"
         disabled={loading}
         className="bg-primary text-primary-foreground w-full rounded px-6 py-3 text-sm font-medium transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
       >
-        {loading ? tc('saving') : t('continueToShipping')}
+        {loading ? tc('saving') : emailOnly ? t('continueToPayment') : t('continueToShipping')}
       </button>
     </form>
   );
@@ -6574,112 +7103,95 @@ export function ShippingStep({
   "src/components/checkout/payment-step.tsx": `'use client';
 
 import { useEffect, useState, useRef, useCallback } from 'react';
-import type { PaymentIntent } from 'brainerce';
+import type { PaymentIntent, PaymentClientSdk } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useTranslations } from '@/lib/translations';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { cn } from '@/lib/utils';
 
-// SDK-specific globals injected by external payment scripts
-declare global {
-  interface Window {
-    growPayment?: {
-      init: (config: {
-        environment: string;
-        version: number;
-        events: {
-          onSuccess?: (response: unknown) => void;
-          onFailure?: (response: unknown) => void;
-          onError?: (response: unknown) => void;
-          onTimeout?: (response: unknown) => void;
-          onWalletChange?: (state: string) => void;
-          onPaymentStart?: (response: unknown) => void;
-          onPaymentCancel?: (response: unknown) => void;
-        };
-      }) => void;
-      renderPaymentOptions: (authCode: string) => void;
-    };
-  }
-}
-
-// Payment SDK script URLs \u2014 resolved per provider
-// SRI hashes must be regenerated when the provider updates their SDK
-const PAYMENT_SDK_URL = 'https://cdn.meshulam.co.il/sdk/gs.min.js';
-const PAYMENT_SDK_SRI = 'sha384-e1OYzZERZLgbR8Zw1I4Ww/J7qXGyEsZb7LF0z5W/sbnTsFwtxop7sKZsLGNp6CB1';
-const APPLE_PAY_SDK_URL = 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js';
-const APPLE_PAY_SDK_SRI = 'sha384-CG67HXmWBeyuRR/jqFsYr6dGEMFyuZw3/hRmcyACJRYHGb/1ebEkQZyzdJXDc9/u';
+/**
+ * Backward-compat defaults when backend doesn't return clientSdk.
+ */
+const LEGACY_GROW_SDK: PaymentClientSdk = {
+  renderType: 'sdk-widget',
+  scriptUrl: 'https://cdn.meshulam.co.il/sdk/gs.min.js',
+  globalName: 'growPayment',
+  initMethod: 'init',
+  renderMethod: 'renderPaymentOptions',
+  containerId: 'grow-payment-container',
+  initConfig: { version: 1, environment: 'DEV' },
+  additionalScripts: [
+    { url: 'https://meshulam.co.il/_media/js/apple_pay_sdk/sdk.min.js', optional: true },
+  ],
+  bodyStyles:
+    '[id*="Gr0W8-"],[id*="Gr0W8-"] *,[class*="Gr0W8-"],[class*="Gr0W8-"] *{direction:ltr !important;text-align:left}',
+};
 
 interface PaymentStepProps {
   checkoutId: string;
   className?: string;
 }
 
-/**
- * Load a script tag if not already present in the DOM.
- * Resolves when the script loads (or immediately if already present).
- */
-function loadScript(src: string, optional = false, integrity?: string): Promise<void> {
-  return new Promise((resolve) => {
-    if (document.querySelector(\`script[src="\${src}"]\`)) {
-      resolve();
-      return;
-    }
-    const script = document.createElement('script');
-    script.src = src;
-    script.async = true;
-    if (integrity) {
-      script.integrity = integrity;
-      script.crossOrigin = 'anonymous';
-    }
-    script.onload = () => resolve();
-    script.onerror = () => {
-      if (optional) {
-        resolve(); // Non-blocking for optional SDKs
-      } else {
-        resolve(); // Still resolve \u2014 caller handles missing global
-      }
+function resolveClientSdk(
+  intent: PaymentIntent | null,
+  preloadedSdk?: PaymentClientSdk | null
+): PaymentClientSdk {
+  const fullSdk = [preloadedSdk, intent?.clientSdk].find((s) => s?.renderType);
+  const runtimeSdk = intent?.clientSdk;
+  if (fullSdk) {
+    if (!runtimeSdk || runtimeSdk === fullSdk) return fullSdk;
+    return {
+      ...fullSdk,
+      ...(runtimeSdk.renderArg ? { renderArg: runtimeSdk.renderArg } : {}),
+      ...(runtimeSdk.initConfig
+        ? { initConfig: { ...fullSdk.initConfig, ...runtimeSdk.initConfig } }
+        : {}),
     };
-    document.head.appendChild(script);
-  });
+  }
+  const legacy = intent?.provider === 'grow' ? LEGACY_GROW_SDK : null;
+  if (legacy && runtimeSdk) {
+    return {
+      ...legacy,
+      ...(runtimeSdk.renderArg ? { renderArg: runtimeSdk.renderArg } : {}),
+      ...(runtimeSdk.initConfig
+        ? { initConfig: { ...legacy.initConfig, ...runtimeSdk.initConfig } }
+        : {}),
+    };
+  }
+  if (legacy) return legacy;
+  return { renderType: 'redirect' };
 }
 
-/**
- * Wait for the payment SDK global to become available (set by the SDK script).
- */
-function waitForPaymentSdkGlobal(timeoutMs = 5000): Promise<boolean> {
-  return new Promise((resolve) => {
-    if (window.growPayment) {
-      resolve(true);
-      return;
-    }
-    const start = Date.now();
-    const check = setInterval(() => {
-      if (window.growPayment) {
-        clearInterval(check);
-        resolve(true);
-      } else if (Date.now() - start > timeoutMs) {
-        clearInterval(check);
-        resolve(false);
-      }
-    }, 50);
-  });
+function extractMessage(response: unknown): string {
+  if (typeof response === 'string') return response;
+  return (response as { message?: string })?.message || '';
 }
 
 export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
   const t = useTranslations('checkout');
   const [paymentIntent, setPaymentIntent] = useState<PaymentIntent | null>(null);
+  const [preloadedSdk, setPreloadedSdk] = useState<PaymentClientSdk | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [sdkReady, setSdkReady] = useState(false);
-  const [sdkScriptLoaded, setSdkScriptLoaded] = useState(false);
-  const renderAttempted = useRef(false);
+  const walletOpenRef = useRef(false);
+  const initialized = useRef(false);
+
+  // Stable refs for SDK event callbacks (avoids stale closures in onload)
+  const cbRef = useRef({
+    onSuccess: (_r: unknown) => {},
+    onFailure: (_r: unknown) => {},
+    onError: (_r: unknown) => {},
+    onTimeout: () => {},
+    onWalletChange: (_s: string) => {},
+    retryRender: () => {},
+  });
 
-  const handleSdkPaymentSuccess = useCallback(
+  const handleSuccess = useCallback(
     async (response: unknown) => {
       console.info('Payment SDK success:', JSON.stringify(response));
       try {
         const client = getClient();
-        // Try response.data first, fall back to response itself
         const resp = response as Record<string, unknown>;
         const data = (resp?.data && typeof resp.data === 'object' ? resp.data : resp) as
           | Record<string, unknown>
@@ -6693,188 +7205,286 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     [checkoutId]
   );
 
-  const handleSdkPaymentFailure = useCallback((response: unknown) => {
-    console.error('Payment SDK failure:', response);
-    const msg = (response as { message?: string })?.message || t('paymentError');
-    setError(msg);
-  }, []);
-
-  const handleSdkPaymentError = useCallback((response: unknown) => {
-    const TRANSIENT_SDK_ERRORS = [
-      'Wallet not initialized',
-      "SDK was not loaded as needed and therefore can't run",
-    ];
-
-    const msg = (response as { message?: string })?.message || '';
-    // Grow SDK fires transient errors during startup before its internal
-    // state is ready. The polling mechanism in Step 3 retries
-    // renderPaymentOptions() until the SDK is fully initialized.
-    if (TRANSIENT_SDK_ERRORS.some((e) => msg.includes(e))) {
-      console.info('Payment SDK: transient startup error, waiting for retry...', msg);
-      return;
-    }
-    console.error('Payment SDK error:', response);
-    setError(msg || t('paymentError'));
-  }, []);
+  cbRef.current = {
+    onSuccess: handleSuccess,
+    onFailure: (response: unknown) => {
+      console.error('Payment SDK failure:', response);
+      setError(extractMessage(response) || t('paymentError'));
+    },
+    onError: (response: unknown) => {
+      const TRANSIENT = [
+        'Wallet not initialized',
+        "SDK was not loaded as needed and therefore can't run",
+      ];
+      const msg = extractMessage(response);
+      if (TRANSIENT.some((e) => msg.includes(e))) {
+        console.info('Payment SDK: transient error, retrying render in 1s:', msg);
+        setTimeout(() => cbRef.current.retryRender(), 1000);
+        return;
+      }
+      console.error('Payment SDK error:', response);
+      setError(msg || t('paymentError'));
+    },
+    onTimeout: () => {
+      console.warn('Payment SDK: wallet timed out');
+      setError(t('paymentTimedOut'));
+    },
+    onWalletChange: (state: string) => {
+      console.info('Payment SDK wallet state:', state);
+      if (state === 'open') {
+        walletOpenRef.current = true;
+        setSdkReady(true);
+      }
+      if (state === 'close') setSdkReady(false);
+    },
+    retryRender: () => {},
+  };
 
-  // Step 1: Load SDK scripts \u2014 just load, don't init yet
+  // =========================================================================
+  // MAIN EFFECT \u2014 Follows Grow SDK docs exactly:
+  //
+  // Step 1: Load gs.min.js (insertBefore, as docs show)
+  // Step 2: s.onload \u2192 growPayment.init({ environment, version, events })
+  //         This triggers the SDK to load mp.min.js \u2192 CSS, HTML, params, services
+  // Step 3: createPaymentIntent (starts wallet timer \u2014 should be AFTER init)
+  // Step 4: growPayment.renderPaymentOptions(authCode)
+  //
+  // "call createPaymentProcess right before you need to render the wallet"
+  // =========================================================================
   useEffect(() => {
-    let cancelled = false;
-
-    async function loadSdkScripts() {
-      // Load Apple Pay SDK (optional)
-      await loadScript(APPLE_PAY_SDK_URL, true, APPLE_PAY_SDK_SRI);
+    if (initialized.current) return;
+    initialized.current = true;
 
-      // Load payment SDK script
-      await loadScript(PAYMENT_SDK_URL, false, PAYMENT_SDK_SRI);
+    const client = getClient();
+    const successUrl = \`\${window.location.origin}/order-confirmation?checkout_id=\${checkoutId}\`;
+    const cancelUrl = \`\${window.location.origin}/checkout?checkout_id=\${checkoutId}&canceled=true\`;
+
+    let sdkInitDone = false;
+    let currentSdk: PaymentClientSdk | null = null;
+    const cleanups: (() => void)[] = [];
+
+    // --- Load SDK script exactly as Grow docs show ---
+    function loadScript(sdk: PaymentClientSdk) {
+      if (!sdk.scriptUrl || !sdk.globalName) return;
+
+      // Inject bodyStyles
+      if (sdk.bodyStyles && !document.querySelector('style[data-payment-sdk]')) {
+        const style = document.createElement('style');
+        style.setAttribute('data-payment-sdk', 'true');
+        style.textContent = sdk.bodyStyles;
+        document.head.appendChild(style);
+        cleanups.push(() => style.remove());
+      }
 
-      // Wait for SDK global to be set by the script
-      const available = await waitForPaymentSdkGlobal();
+      // Additional scripts (Apple Pay etc.) \u2014 fire and forget
+      if (sdk.additionalScripts) {
+        for (const extra of sdk.additionalScripts) {
+          if (document.querySelector(\`script[src="\${extra.url}"]\`)) continue;
+          const s = document.createElement('script');
+          s.type = 'text/javascript';
+          s.async = true;
+          s.src = extra.url;
+          const ref = document.getElementsByTagName('script')[0];
+          if (ref?.parentNode) ref.parentNode.insertBefore(s, ref);
+          else document.head.appendChild(s);
+        }
+      }
 
-      if (cancelled) return;
+      // Already loaded? Init immediately
+      if ((window as any)[sdk.globalName]) {
+        initSdk(sdk);
+        return;
+      }
 
-      if (!available) {
-        setError(t('failedToLoadPaymentSdk'));
+      // Already loading (from a previous call)? Wait for it instead of duplicating
+      if (document.querySelector(\`script[src="\${sdk.scriptUrl}"]\`)) {
+        const waitId = setInterval(() => {
+          if ((window as any)[sdk.globalName!]) {
+            clearInterval(waitId);
+            initSdk(sdk);
+          }
+        }, 100);
+        cleanups.push(() => clearInterval(waitId));
         return;
       }
 
-      setSdkScriptLoaded(true);
+      // Load main SDK \u2014 insertBefore first <script> as Grow docs show
+      const s = document.createElement('script');
+      s.type = 'text/javascript';
+      s.async = true;
+      s.src = sdk.scriptUrl;
+      s.onload = () => initSdk(sdk); // init DIRECTLY in onload
+      s.onerror = () => {
+        console.error('Payment SDK: script load failed');
+        setError(t('failedToLoadPaymentSdk'));
+      };
+      const ref = document.getElementsByTagName('script')[0];
+      if (ref?.parentNode) ref.parentNode.insertBefore(s, ref);
+      else document.head.appendChild(s);
     }
 
-    loadSdkScripts();
+    // --- Init: called in s.onload (as Grow docs require) ---
+    function initSdk(sdk: PaymentClientSdk) {
+      if (sdkInitDone) return; // Guard against double init
 
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+      const global = (window as any)[sdk.globalName!];
+      if (!global) {
+        setError(t('failedToLoadPaymentSdk'));
+        return;
+      }
 
-  // Step 2: Create payment intent (API call)
-  // Use ref to prevent double-creation in React StrictMode
-  const intentCreated = useRef(false);
-  useEffect(() => {
-    if (intentCreated.current) return;
-    intentCreated.current = true;
+      const method = sdk.initMethod || 'init';
+      const config = {
+        ...(sdk.initConfig || {}),
+        events: {
+          onSuccess: (r: unknown) => cbRef.current.onSuccess(r),
+          onFailure: (r: unknown) => cbRef.current.onFailure(r),
+          onError: (r: unknown) => cbRef.current.onError(r),
+          onTimeout: () => cbRef.current.onTimeout(),
+          onWalletChange: (s: string) => cbRef.current.onWalletChange(s),
+        },
+      };
 
-    async function createIntent() {
-      try {
-        setLoading(true);
-        setError(null);
-        const client = getClient();
+      console.info(\`Payment SDK: calling \${method}()\`);
+      global[method](config);
+      sdkInitDone = true;
+    }
 
-        const successUrl = \`\${window.location.origin}/order-confirmation?checkout_id=\${checkoutId}\`;
-        const cancelUrl = \`\${window.location.origin}/checkout?checkout_id=\${checkoutId}&canceled=true\`;
+    // --- Render: call once, then safety-net retries if wallet doesn't open ---
+    // Grow SDK sometimes silently swallows renderPaymentOptions when its
+    // internal resources (mp.min.js etc.) aren't fully loaded yet.
+    // Strategy: render once, then retry up to 3 times with increasing delays
+    // (2s, 3s, 4s) if onWalletChange("open") hasn't fired.
+    let pendingRender: { sdk: PaymentClientSdk; intent: PaymentIntent } | null = null;
+    let renderAttempts = 0;
+    const MAX_RENDER_ATTEMPTS = 4;
 
-        const intent = await client.createPaymentIntent(checkoutId, {
-          successUrl,
-          cancelUrl,
-        });
+    function renderPayment(sdk: PaymentClientSdk, intent: PaymentIntent) {
+      const global = (window as any)[sdk.globalName!];
+      if (!global || walletOpenRef.current) return;
 
-        setPaymentIntent(intent);
+      const renderMethod = sdk.renderMethod || 'renderPaymentOptions';
+      const renderArg = sdk.renderArg || intent.clientSecret;
+      renderAttempts++;
 
-        // Auto-redirect for Stripe
-        if (intent.provider === 'stripe') {
-          window.location.href = intent.clientSecret;
-        }
+      try {
+        global[renderMethod](renderArg);
+        console.info(\`Payment SDK: renderPaymentOptions called (attempt \${renderAttempts})\`);
       } catch (err) {
-        const message = err instanceof Error ? err.message : t('paymentError');
-        setError(message);
-      } finally {
-        setLoading(false);
+        console.info('Payment SDK: render threw, will retry in 1s');
       }
-    }
 
-    createIntent();
-  }, [checkoutId]);
+      // Safety net: if wallet doesn't open within a delay, retry
+      if (renderAttempts < MAX_RENDER_ATTEMPTS) {
+        const delay = 1000 + renderAttempts * 1000; // 2s, 3s, 4s
+        const retryId = setTimeout(() => {
+          if (!walletOpenRef.current) {
+            console.info(\`Payment SDK: wallet not open after \${delay}ms, retrying render...\`);
+            renderPayment(sdk, intent);
+          }
+        }, delay);
+        cleanups.push(() => clearTimeout(retryId));
+      }
+    }
 
-  // Step 3: When BOTH SDK script is loaded AND payment intent is ready:
-  //   - init() with the CORRECT environment from the payment intent
-  //   - wait for onWalletChange signal before calling renderPaymentOptions()
-  useEffect(() => {
-    if (!sdkScriptLoaded) return;
-    if (!paymentIntent || paymentIntent.provider !== 'grow') return;
-    if (!window.growPayment) return;
-    if (renderAttempted.current) return;
-
-    renderAttempted.current = true;
-
-    // Parse environment and authCode from clientSecret (format: "ENV|authCode")
-    const pipeIndex = paymentIntent.clientSecret.indexOf('|');
-    const env = pipeIndex !== -1 ? paymentIntent.clientSecret.substring(0, pipeIndex) : 'DEV';
-    const authCode =
-      pipeIndex !== -1
-        ? paymentIntent.clientSecret.substring(pipeIndex + 1)
-        : paymentIntent.clientSecret;
-
-    let rendered = false;
-    let walletReady = false;
-    let pollId: ReturnType<typeof setInterval>;
-
-    function tryRenderPaymentOptions() {
-      if (rendered) return;
-      try {
-        window.growPayment?.renderPaymentOptions(authCode);
-        rendered = true;
-        clearInterval(pollId);
-        setSdkReady(true);
-        console.info('Payment SDK: renderPaymentOptions succeeded');
-      } catch (err) {
-        console.info('Payment SDK: renderPaymentOptions not ready yet', err);
+    function retryRender() {
+      if (pendingRender && !walletOpenRef.current) {
+        renderPayment(pendingRender.sdk, pendingRender.intent);
       }
     }
 
-    console.info('Payment SDK: init with environment:', env);
-    window.growPayment.init({
-      environment: env,
-      version: 1,
-      events: {
-        onSuccess: handleSdkPaymentSuccess,
-        onFailure: handleSdkPaymentFailure,
-        onError: handleSdkPaymentError,
-        onWalletChange: (state: string) => {
-          console.info('Payment SDK wallet state:', state);
-          walletReady = true;
-          tryRenderPaymentOptions();
-        },
-      },
+    // =============================================
+    // Execution flow
+    // =============================================
+
+    // A) Get SDK config from providers (fast, no wallet timer)
+    const providerPromise = client
+      .getPaymentProviders()
+      .then((res) => {
+        const sdk = res.defaultProvider?.clientSdk;
+        if (sdk) setPreloadedSdk(sdk);
+        return sdk || null;
+      })
+      .catch(() => null);
+
+    // B) Load + init SDK as early as possible
+    providerPromise.then((providerSdk) => {
+      if (providerSdk?.renderType === 'sdk-widget' && providerSdk.scriptUrl) {
+        currentSdk = providerSdk;
+        loadScript(providerSdk);
+      }
     });
 
-    // Poll as fallback \u2014 but respect the SDK's readiness signal:
-    //  - First 4s: only render if onWalletChange has fired (SDK says it's ready)
-    //  - After 4s: force-attempt even without wallet signal (onWalletChange may not fire)
-    const WALLET_GRACE_PERIOD = 4000;
-    const initTime = Date.now();
-
-    const timeoutId = setTimeout(() => {
-      if (walletReady) tryRenderPaymentOptions();
-      if (!rendered) {
-        let attempts = 0;
-        const maxAttempts = 16; // 16 * 500ms = 8s after initial 1s delay
-        pollId = setInterval(() => {
-          attempts++;
-          const elapsed = Date.now() - initTime;
-          if (walletReady || elapsed > WALLET_GRACE_PERIOD) {
-            tryRenderPaymentOptions();
-          }
-          if (!rendered && attempts >= maxAttempts) {
-            clearInterval(pollId);
-            console.error('Payment SDK: renderPaymentOptions failed after max attempts');
-            setError(t('paymentError'));
+    // C) Create payment intent (starts wallet timer)
+    const intentPromise = client
+      .createPaymentIntent(checkoutId, { successUrl, cancelUrl })
+      .then((intent) => {
+        setPaymentIntent(intent);
+        return intent;
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : t('paymentError'));
+        return null;
+      })
+      .finally(() => setLoading(false));
+
+    // D) When both ready: resolve final SDK config and render
+    Promise.all([providerPromise, intentPromise]).then(([providerSdk, intent]) => {
+      if (!intent) return;
+
+      const sdk = resolveClientSdk(intent, providerSdk);
+      currentSdk = sdk;
+
+      if (sdk.renderType === 'redirect') {
+        window.location.href = intent.clientSecret;
+        return;
+      }
+      if (sdk.renderType !== 'sdk-widget' || !sdk.globalName) return;
+
+      // Store for retryRender from onError callback
+      pendingRender = { sdk, intent };
+      cbRef.current.retryRender = retryRender;
+
+      // If SDK wasn't loaded from providers, load + init now
+      if (!sdkInitDone) {
+        loadScript(sdk);
+        // Wait for init to complete, then render once
+        const id = setInterval(() => {
+          if (sdkInitDone) {
+            clearInterval(id);
+            renderPayment(sdk, intent);
           }
-        }, 500);
+        }, 100);
+        cleanups.push(() => clearInterval(id));
+        return;
       }
-    }, 1000);
 
-    return () => {
-      clearTimeout(timeoutId);
-      clearInterval(pollId);
-    };
-  }, [
-    sdkScriptLoaded,
-    paymentIntent,
-    handleSdkPaymentSuccess,
-    handleSdkPaymentFailure,
-    handleSdkPaymentError,
-  ]);
+      // Re-init with final config if environment changed
+      if (sdk.initConfig?.environment && currentSdk) {
+        const global = (window as any)[sdk.globalName];
+        if (global) {
+          const method = sdk.initMethod || 'init';
+          global[method]({
+            ...(sdk.initConfig || {}),
+            events: {
+              onSuccess: (r: unknown) => cbRef.current.onSuccess(r),
+              onFailure: (r: unknown) => cbRef.current.onFailure(r),
+              onError: (r: unknown) => cbRef.current.onError(r),
+              onTimeout: () => cbRef.current.onTimeout(),
+              onWalletChange: (s: string) => cbRef.current.onWalletChange(s),
+            },
+          });
+        }
+      }
+
+      // SDK ready \u2014 render once
+      renderPayment(sdk, intent);
+    });
+
+    return () => cleanups.forEach((fn) => fn());
+  }, [checkoutId]);
+
+  // --- UI ---
 
   if (loading) {
     return (
@@ -6890,7 +7500,6 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
       error.toLowerCase().includes('not configured') ||
       error.toLowerCase().includes('no payment') ||
       error.toLowerCase().includes('provider');
-
     return (
       <div className={cn('py-12 text-center', className)}>
         <svg
@@ -6916,8 +7525,13 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
     );
   }
 
-  // SDK-based provider: render the payment widget container
-  if (paymentIntent?.provider === 'grow') {
+  if (!paymentIntent) return null;
+
+  const sdk = resolveClientSdk(paymentIntent, preloadedSdk);
+
+  if (sdk.renderType === 'sdk-widget') {
+    const containerId =
+      sdk.containerId || \`\${paymentIntent.provider || 'payment'}-payment-container\`;
     return (
       <div className={cn('py-4', className)}>
         {!sdkReady && (
@@ -6926,29 +7540,38 @@ export function PaymentStep({ checkoutId, className }: PaymentStepProps) {
             <p className="text-muted-foreground mt-4 text-sm">{t('loadingPaymentOptions')}</p>
           </div>
         )}
-        <div id="grow-payment-container" />
+        <div id={containerId} />
       </div>
     );
   }
 
-  // Stripe/other redirect-based: show redirecting state
-  if (paymentIntent) {
+  if (sdk.renderType === 'iframe') {
     return (
-      <div className={cn('flex flex-col items-center justify-center py-12', className)}>
-        <LoadingSpinner size="lg" />
-        <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">
-            {t('clickHere')}
-          </a>
-          .
-        </p>
+      <div className={cn('py-4', className)}>
+        <iframe
+          src={paymentIntent.clientSecret}
+          className="w-full border-0"
+          style={{ minHeight: '500px' }}
+          title={t('payment')}
+          allow="payment"
+        />
       </div>
     );
   }
 
-  return null;
+  return (
+    <div className={cn('flex flex-col items-center justify-center py-12', className)}>
+      <LoadingSpinner size="lg" />
+      <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">
+          {t('clickHere')}
+        </a>
+        .
+      </p>
+    </div>
+  );
 }
 `,
   "src/components/checkout/tax-display.tsx": `'use client';
@@ -7131,6 +7754,7 @@ interface RegisterData {
   lastName: string;
   email: string;
   password: string;
+  acceptsMarketing: boolean;
 }
 
 interface RegisterFormProps {
@@ -7162,6 +7786,9 @@ export function RegisterForm({ onSubmit, error, className }: RegisterFormProps)
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [privacyAccepted, setPrivacyAccepted] = useState(false);
+  const [privacyError, setPrivacyError] = useState(false);
+  const [acceptsMarketing, setAcceptsMarketing] = useState(false);
   const [loading, setLoading] = useState(false);
 
   const strength = useMemo(() => getPasswordStrength(password), [password]);
@@ -7170,9 +7797,14 @@ export function RegisterForm({ onSubmit, error, className }: RegisterFormProps)
     e.preventDefault();
     if (loading) return;
 
+    if (!privacyAccepted) {
+      setPrivacyError(true);
+      return;
+    }
+
     try {
       setLoading(true);
-      await onSubmit({ firstName, lastName, email, password });
+      await onSubmit({ firstName, lastName, email, password, acceptsMarketing });
     } finally {
       setLoading(false);
     }
@@ -7283,6 +7915,45 @@ export function RegisterForm({ onSubmit, error, className }: RegisterFormProps)
         )}
       </div>
 
+      {/* Privacy Policy (required) */}
+      <div>
+        <label className="flex cursor-pointer items-start gap-2">
+          <input
+            type="checkbox"
+            checked={privacyAccepted}
+            onChange={(e) => {
+              setPrivacyAccepted(e.target.checked);
+              setPrivacyError(false);
+            }}
+            className="accent-primary mt-0.5"
+          />
+          <span className="text-muted-foreground text-sm">
+            {t('privacyAcceptPrefix')}{' '}
+            <a
+              href="/privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary underline underline-offset-2"
+            >
+              {t('privacyPolicyLink')}
+            </a>{' '}
+            <span className="text-destructive">*</span>
+          </span>
+        </label>
+        {privacyError && <p className="text-destructive mt-1 text-xs">{t('privacyRequired')}</p>}
+      </div>
+
+      {/* Marketing consent (optional) */}
+      <label className="flex cursor-pointer items-start gap-2">
+        <input
+          type="checkbox"
+          checked={acceptsMarketing}
+          onChange={(e) => setAcceptsMarketing(e.target.checked)}
+          className="accent-primary mt-0.5"
+        />
+        <span className="text-muted-foreground text-sm">{t('acceptsMarketing')}</span>
+      </label>
+
       <button
         type="submit"
         disabled={loading}
@@ -7748,7 +8419,8 @@ function OrderCard({ order }: { order: Order }) {
   const t = useTranslations('account');
   const tc = useTranslations('common');
   const [expanded, setExpanded] = useState(false);
-  const statusConfig = STATUS_CONFIG[order.status] || STATUS_CONFIG.pending;
+  const statusConfig =
+    STATUS_CONFIG[order.status?.toLowerCase() as OrderStatus] || STATUS_CONFIG.pending;
   const currency = order.currency || 'USD';
   const totalAmount = order.totalAmount || order.total || '0';
 
@@ -7860,9 +8532,7 @@ function OrderCard({ order }: { order: Order }) {
           ))}
 
           {/* Downloads section */}
-          {order.hasDownloads && (
-            <OrderDownloads orderId={order.id} />
-          )}
+          {order.hasDownloads && <OrderDownloads orderId={order.id} />}
 
           <OrderFinancialSummary order={order} currency={currency} />
         </div>
@@ -7890,7 +8560,9 @@ function OrderDownloads({ orderId }: { orderId: string }) {
       }
     }
     fetch();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [orderId]);
 
   if (loading) {
@@ -7914,11 +8586,11 @@ function OrderDownloads({ orderId }: { orderId: string }) {
               {link.productName}
               {' \xB7 '}
               {link.downloadLimit != null
-                ? t('downloadsRemaining', { used: link.downloadsUsed, limit: link.downloadLimit })
+                ? \`\${link.downloadsUsed}/\${link.downloadLimit} \${t('downloadsRemaining')}\`
                 : t('unlimitedDownloads')}
               {' \xB7 '}
               {link.expiresAt
-                ? t('expiresAt', { date: new Date(link.expiresAt).toLocaleDateString() })
+                ? \`\${t('expiresAt')} \${new Date(link.expiresAt).toLocaleDateString()}\`
                 : t('noExpiry')}
             </p>
           </div>
@@ -8102,7 +8774,7 @@ export function Header() {
         <div className="flex h-16 items-center justify-between gap-4">
           {/* Logo / Store Name */}
           <Link href="/" className="text-foreground flex-shrink-0 text-xl font-bold">
-            {storeInfo?.name || tc('store')}
+            {storeInfo?.name || process.env.NEXT_PUBLIC_STORE_NAME || tc('store')}
           </Link>
 
           {/* Desktop Navigation */}
@@ -8113,12 +8785,14 @@ export function Header() {
             >
               {t('products')}
             </Link>
-            <Link
-              href="/account"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {t('account')}
-            </Link>
+            {isLoggedIn && (
+              <Link
+                href="/account"
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {t('account')}
+              </Link>
+            )}
           </nav>
 
           {/* Search */}
@@ -8308,13 +8982,15 @@ export function Header() {
             >
               {t('products')}
             </Link>
-            <Link
-              href="/account"
-              onClick={() => setMobileMenuOpen(false)}
-              className="text-foreground hover:bg-muted block rounded px-2 py-2 text-sm"
-            >
-              {t('account')}
-            </Link>
+            {isLoggedIn && (
+              <Link
+                href="/account"
+                onClick={() => setMobileMenuOpen(false)}
+                className="text-foreground hover:bg-muted block rounded px-2 py-2 text-sm"
+              >
+                {t('account')}
+              </Link>
+            )}
             {isLoggedIn ? (
               <button
                 onClick={() => {
@@ -8356,12 +9032,13 @@ export function Header() {
 
 import Link from 'next/link';
 import { useTranslations } from '@/lib/translations';
-import { useStoreInfo } from '@/providers/store-provider';
+import { useStoreInfo, useAuth } from '@/providers/store-provider';
 
 export function Footer() {
   const t = useTranslations('common');
   const tn = useTranslations('nav');
   const { storeInfo } = useStoreInfo();
+  const { isLoggedIn } = useAuth();
   const year = new Date().getFullYear();
 
   return (
@@ -8378,12 +9055,14 @@ export function Footer() {
             >
               {tn('products')}
             </Link>
-            <Link
-              href="/account"
-              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-            >
-              {tn('account')}
-            </Link>
+            {isLoggedIn && (
+              <Link
+                href="/account"
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+              >
+                {tn('account')}
+              </Link>
+            )}
           </nav>
         </div>
       </div>
@@ -8638,6 +9317,12 @@ var USE_CASE_FILES = {
     { path: "src/components/auth/oauth-buttons.tsx", label: "OAuth Buttons Component" }
   ],
   "verify-email": [{ path: "src/app/verify-email/page.tsx", label: "Verify Email Page" }],
+  "forgot-password": [{ path: "src/app/forgot-password/page.tsx", label: "Forgot Password Page" }],
+  "reset-password": [
+    { path: "src/app/reset-password/page.tsx", label: "Reset Password Page" },
+    { path: "src/app/api/auth/reset-callback/route.ts", label: "Reset Callback API Route" },
+    { path: "src/app/api/auth/reset-password/route.ts", label: "Reset Password API Route" }
+  ],
   "oauth-callback": [{ path: "src/app/auth/callback/page.tsx", label: "OAuth Callback Page" }],
   "account-page": [
     { path: "src/app/account/page.tsx", label: "Account Page" },
@@ -8714,6 +9399,8 @@ var GET_CODE_EXAMPLE_SCHEMA = {
     "login-page",
     "register-page",
     "verify-email",
+    "forgot-password",
+    "reset-password",
     "oauth-callback",
     "account-page",
     "header",
@@ -8754,6 +9441,8 @@ var TOPIC_MAP = {
   "login-page": "auth",
   "register-page": "auth",
   "verify-email": "auth",
+  "forgot-password": "auth",
+  "reset-password": "auth",
   "oauth-callback": "auth",
   "account-page": "auth",
   header: "products",
@@ -8993,6 +9682,735 @@ async function handleGetStoreInfo(args) {
   }
 }
 
+// src/tools/get-store-capabilities.ts
+import { z as z6 } from "zod";
+
+// src/utils/fetch-store-capabilities.ts
+import https2 from "https";
+import http2 from "http";
+async function fetchStoreCapabilities(connectionId, baseUrl = "https://api.brainerce.com") {
+  const url = `${baseUrl}/api/vc/${connectionId}/capabilities`;
+  return new Promise((resolve, reject) => {
+    const client = url.startsWith("https") ? https2 : http2;
+    const req = client.get(url, { timeout: 1e4 }, (res) => {
+      let data = "";
+      res.on("data", (chunk) => {
+        data += chunk;
+      });
+      res.on("end", () => {
+        if (res.statusCode && res.statusCode >= 400) {
+          if (res.statusCode === 404) {
+            reject(new Error(`Connection ID "${connectionId}" not found. Check your dashboard.`));
+          } else {
+            reject(new Error(`API returned status ${res.statusCode}`));
+          }
+          return;
+        }
+        try {
+          resolve(JSON.parse(data));
+        } catch {
+          reject(new Error("Invalid response from API"));
+        }
+      });
+    });
+    req.on("error", (err) => {
+      reject(new Error(`Failed to connect to Brainerce API: ${err.message}`));
+    });
+    req.on("timeout", () => {
+      req.destroy();
+      reject(new Error("Request timed out"));
+    });
+  });
+}
+
+// src/tools/get-store-capabilities.ts
+var GET_STORE_CAPABILITIES_NAME = "get-store-capabilities";
+var GET_STORE_CAPABILITIES_DESCRIPTION = "Get live store capabilities and configured features for a vibe-coded connection. Returns what payment providers, OAuth, shipping, discounts, and other features are set up. Use this to discover what your store supports and what pages/components to build.";
+var GET_STORE_CAPABILITIES_SCHEMA = {
+  connectionId: z6.string().describe("Vibe-coded connection ID (starts with vc_)")
+};
+function formatCapabilities(caps) {
+  const lines = [];
+  lines.push(`## Store: ${caps.store.name} (${caps.store.currency})`);
+  lines.push(`Language: ${caps.store.language}`);
+  lines.push("");
+  lines.push("## Configured Features");
+  if (caps.features.paymentProviders.length > 0) {
+    const providers = caps.features.paymentProviders.map((p) => p.name).join(", ");
+    lines.push(`\u2705 Payment: ${providers}`);
+  } else {
+    lines.push("\u274C No payment providers configured \u2014 customers cannot pay!");
+  }
+  if (caps.features.oauthProviders.length > 0) {
+    const enabled = caps.features.oauthProviders.filter((o) => o.isEnabled).map((o) => o.provider).join(", ");
+    if (enabled) {
+      lines.push(`\u2705 OAuth: ${enabled}`);
+    } else {
+      lines.push("\u26A0\uFE0F OAuth providers configured but disabled");
+    }
+  } else {
+    lines.push("\u274C No OAuth providers \u2014 email/password login only");
+  }
+  lines.push(
+    caps.features.hasShippingZones ? "\u2705 Shipping zones configured" : "\u274C No shipping zones"
+  );
+  lines.push(caps.features.hasDiscountRules ? "\u2705 Discount rules active" : "\u274C No discount rules");
+  lines.push(
+    caps.features.hasDownloadableProducts ? "\u2705 Downloadable products available" : "\u274C No downloadable products"
+  );
+  lines.push(caps.features.hasCoupons ? "\u2705 Coupons available" : "\u274C No coupons");
+  lines.push("");
+  lines.push("## Connection Settings");
+  lines.push(
+    `- Guest checkout tracking: ${caps.connection.guestCheckoutTracking ? "enabled" : "disabled"}`
+  );
+  lines.push(
+    `- Email verification: ${caps.connection.requireEmailVerification ? "required" : "not required"}`
+  );
+  lines.push(
+    `- Inventory reservation: ${caps.connection.reservationStrategy} (${caps.connection.reservationTimeout} min timeout)`
+  );
+  if (caps.connection.lowStockWarning) {
+    lines.push(`- Low stock warning: enabled (threshold: ${caps.connection.lowStockThreshold})`);
+  }
+  lines.push(`- Orders write: ${caps.connection.ordersWriteEnabled ? "enabled" : "disabled"}`);
+  lines.push(`- Scopes: ${caps.connection.allowedScopes.join(", ")}`);
+  lines.push("");
+  lines.push("## Build Suggestions");
+  const suggestions = [];
+  if (caps.features.paymentProviders.length > 0) {
+    suggestions.push(
+      'Build a checkout page with payment. Use get-code-example("checkout-page") and get-code-example("stripe-payment").'
+    );
+  }
+  if (caps.features.oauthProviders.some((o) => o.isEnabled)) {
+    suggestions.push(
+      'Add OAuth login buttons. Use get-code-example("login-page") \u2014 it includes OAuth support.'
+    );
+  }
+  if (caps.features.hasDownloadableProducts) {
+    suggestions.push(
+      "Build a downloads page for digital products. Customers need to access their purchased files."
+    );
+  }
+  if (caps.features.hasDiscountRules) {
+    suggestions.push(
+      'Show discount badges and banners. Use get-code-example("discount-badge") and get-sdk-docs("discounts").'
+    );
+  }
+  if (caps.features.hasCoupons) {
+    suggestions.push('Add a coupon input to the cart. Use get-code-example("coupon-input").');
+  }
+  if (caps.connection.requireEmailVerification) {
+    suggestions.push(
+      'Email verification is required \u2014 ALWAYS build the verify-email page. Use get-code-example("verify-email").'
+    );
+  }
+  if (caps.connection.reservationStrategy !== "ON_PAYMENT") {
+    suggestions.push(
+      'Inventory reservation is active \u2014 show a countdown timer. Use get-code-example("reservation-countdown").'
+    );
+  }
+  if (suggestions.length === 0) {
+    suggestions.push(
+      "Start by building the required pages. Use get-required-pages() for the checklist."
+    );
+  }
+  suggestions.forEach((s) => lines.push(`- ${s}`));
+  return lines.join("\n");
+}
+async function handleGetStoreCapabilities(args) {
+  try {
+    const caps = await fetchStoreCapabilities(args.connectionId);
+    return {
+      content: [{ type: "text", text: formatCapabilities(caps) }]
+    };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Failed to fetch store capabilities";
+    return {
+      content: [{ type: "text", text: `Error: ${message}` }],
+      isError: true
+    };
+  }
+}
+
+// src/tools/build-store.ts
+import { z as z7 } from "zod";
+
+// src/content/compressed-bundle.ts
+var SETUP_FILES = [
+  "src/lib/brainerce.ts.ejs",
+  "src/lib/auth.ts",
+  "src/lib/utils.ts",
+  "src/providers/store-provider.tsx.ejs",
+  "src/app/layout.tsx.ejs",
+  "src/middleware.ts"
+];
+var PAGE_FILES = [
+  { path: "src/app/page.tsx", route: "/", label: "Home" },
+  { path: "src/app/products/page.tsx", route: "/products", label: "Product Listing" },
+  { path: "src/app/products/[slug]/page.tsx", route: "/products/[slug]", label: "Product Detail" },
+  { path: "src/app/cart/page.tsx", route: "/cart", label: "Cart" },
+  { path: "src/app/checkout/page.tsx", route: "/checkout", label: "Checkout" },
+  {
+    path: "src/app/order-confirmation/page.tsx",
+    route: "/order-confirmation",
+    label: "Order Confirmation"
+  },
+  { path: "src/app/login/page.tsx", route: "/login", label: "Login" },
+  { path: "src/app/register/page.tsx", route: "/register", label: "Register" },
+  { path: "src/app/verify-email/page.tsx", route: "/verify-email", label: "Verify Email" },
+  { path: "src/app/forgot-password/page.tsx", route: "/forgot-password", label: "Forgot Password" },
+  { path: "src/app/reset-password/page.tsx", route: "/reset-password", label: "Reset Password" },
+  { path: "src/app/auth/callback/page.tsx", route: "/auth/callback", label: "OAuth Callback" },
+  { path: "src/app/account/page.tsx", route: "/account", label: "Account" }
+];
+var COMPONENT_FILES = [
+  { path: "src/components/layout/header.tsx", label: "Header" },
+  { path: "src/components/layout/footer.tsx", label: "Footer" },
+  { path: "src/components/products/product-card.tsx", label: "Product Card" },
+  { path: "src/components/products/product-grid.tsx", label: "Product Grid" },
+  { path: "src/components/products/variant-selector.tsx", label: "Variant Selector" },
+  { path: "src/components/products/stock-badge.tsx", label: "Stock Badge" },
+  { path: "src/components/products/discount-badge.tsx", label: "Discount Badge" },
+  { path: "src/components/cart/cart-item.tsx", label: "Cart Item" },
+  { path: "src/components/cart/cart-summary.tsx", label: "Cart Summary" },
+  { path: "src/components/cart/coupon-input.tsx", label: "Coupon Input" },
+  { path: "src/components/cart/cart-nudges.tsx", label: "Cart Nudges" },
+  { path: "src/components/cart/reservation-countdown.tsx", label: "Reservation Countdown" },
+  { path: "src/components/checkout/checkout-form.tsx", label: "Checkout Form" },
+  { path: "src/components/checkout/shipping-step.tsx", label: "Shipping Step" },
+  { path: "src/components/checkout/payment-step.tsx", label: "Payment Step" },
+  { path: "src/components/checkout/tax-display.tsx", label: "Tax Display" },
+  { path: "src/components/auth/login-form.tsx", label: "Login Form" },
+  { path: "src/components/auth/register-form.tsx", label: "Register Form" },
+  { path: "src/components/auth/oauth-buttons.tsx", label: "OAuth Buttons" },
+  { path: "src/components/account/profile-section.tsx", label: "Profile Section" },
+  { path: "src/components/account/order-history.tsx", label: "Order History" },
+  { path: "src/components/shared/price-display.tsx", label: "Price Display" },
+  { path: "src/components/shared/loading-spinner.tsx", label: "Loading Spinner" },
+  { path: "src/hooks/use-search.ts", label: "Search Hook" }
+];
+var API_ROUTE_FILES = [
+  "src/app/api/store/[...path]/route.ts",
+  "src/app/api/auth/oauth-callback/route.ts",
+  "src/app/api/auth/me/route.ts",
+  "src/app/api/auth/logout/route.ts",
+  "src/app/api/auth/reset-callback/route.ts",
+  "src/app/api/auth/reset-password/route.ts"
+];
+function replaceEjsVars(content, vars) {
+  let result = content;
+  for (const [key, value] of Object.entries(vars)) {
+    result = result.replace(new RegExp(`<%[=-]\\s*${key}\\s*%>`, "g"), value);
+  }
+  return result;
+}
+function renderFile(path, ejsVars) {
+  const content = EMBEDDED_TEMPLATES[path];
+  if (!content) return null;
+  const rendered = path.endsWith(".ejs") ? replaceEjsVars(content, ejsVars) : content;
+  const displayPath = path.replace(/\.ejs$/, "");
+  return `// \u2500\u2500 ${displayPath} \u2500\u2500
+${rendered}`;
+}
+function formatCapabilitiesSummary(caps) {
+  const lines = [];
+  lines.push(`## Store: ${caps.store.name}`);
+  lines.push(`Currency: ${caps.store.currency} | Language: ${caps.store.language}`);
+  lines.push("");
+  lines.push("### Configured Features");
+  if (caps.features.paymentProviders.length > 0) {
+    const providers = caps.features.paymentProviders.map((p) => `${p.name} (${p.provider})`).join(", ");
+    lines.push(`- Payment: ${providers}`);
+  } else {
+    lines.push(
+      "- Payment: NONE configured \u2014 customers cannot pay! Tell the store owner to configure a payment provider."
+    );
+  }
+  const enabledOAuth = caps.features.oauthProviders.filter((o) => o.isEnabled).map((o) => o.provider);
+  if (enabledOAuth.length > 0) {
+    lines.push(`- OAuth: ${enabledOAuth.join(", ")} \u2014 show OAuth buttons on login/register`);
+  } else {
+    lines.push(
+      "- OAuth: None currently configured \u2014 STILL include the OAuthButtons component on login/register pages (it auto-hides when empty, but store owner may enable providers later)"
+    );
+  }
+  lines.push(
+    caps.features.hasShippingZones ? "- Shipping: configured" : "- Shipping: no zones configured"
+  );
+  lines.push(
+    caps.features.hasDiscountRules ? "- Discounts: active \u2014 show banners and badges" : "- Discounts: none active"
+  );
+  lines.push(
+    caps.features.hasDownloadableProducts ? "- Downloadable products: yes \u2014 show download badges" : "- Downloadable products: no"
+  );
+  lines.push(
+    caps.features.hasCoupons ? "- Coupons: active \u2014 show coupon input on cart" : "- Coupons: none"
+  );
+  lines.push("");
+  lines.push("### Connection Settings");
+  lines.push(
+    `- Email verification: ${caps.connection.requireEmailVerification ? "REQUIRED \u2014 verify-email page is critical" : "not required (still build the page)"}`
+  );
+  lines.push(
+    `- Inventory reservation: ${caps.connection.reservationStrategy} (${caps.connection.reservationTimeout} min)`
+  );
+  lines.push(
+    `- Guest checkout tracking: ${caps.connection.guestCheckoutTracking ? "enabled" : "disabled"}`
+  );
+  return lines.join("\n");
+}
+function buildStoreBundle(options) {
+  const { connectionId, storeName, storeType, currency, storeStyle, capabilities } = options;
+  const styleDesc = storeStyle ? ` with a ${storeStyle} aesthetic` : "";
+  const ejsVars = {
+    connectionId,
+    storeName,
+    currency,
+    language: capabilities?.store.language || "en",
+    apiUrl: "https://api.brainerce.com"
+  };
+  const sections = [];
+  sections.push(`# Build: ${storeName} \u2014 ${storeType}${styleDesc}
+Connection ID: \`${connectionId}\` | Currency: ${currency}
+
+Install the SDK first: \`npm install brainerce @stripe/stripe-js @stripe/react-stripe-js\`
+
+## MANDATORY: Every page and component below MUST be built
+
+**Do NOT skip any page or component.** Even features that appear unused (OAuth buttons, coupon input, discount badges, verify-email) MUST be included because:
+- They auto-hide when not configured \u2014 zero visual impact
+- Store owners can enable them at any time from the dashboard
+- A store without these is incomplete and will break when features are enabled
+
+**Every file in this bundle is required. Build them ALL.**`);
+  if (capabilities) {
+    sections.push(formatCapabilitiesSummary(capabilities));
+  }
+  sections.push(getCriticalRulesSection());
+  sections.push(getTypeQuickReference());
+  const setupSection = ["## Setup Files\n"];
+  for (const path of SETUP_FILES) {
+    const rendered = renderFile(path, ejsVars);
+    if (rendered) setupSection.push(rendered);
+  }
+  sections.push(setupSection.join("\n\n"));
+  const pagesSection = ["## Pages (ALL 13 required \u2014 build every single one!)\n"];
+  for (const page of PAGE_FILES) {
+    const rendered = renderFile(page.path, ejsVars);
+    if (rendered) {
+      pagesSection.push(`### ${page.route} \u2014 ${page.label}
+
+${rendered}`);
+    }
+  }
+  sections.push(pagesSection.join("\n\n"));
+  const componentsSection = ["## Components\n"];
+  for (const comp of COMPONENT_FILES) {
+    const rendered = renderFile(comp.path, ejsVars);
+    if (rendered) componentsSection.push(rendered);
+  }
+  sections.push(componentsSection.join("\n\n"));
+  const apiSection = ["## API Routes (BFF Proxy + Auth)\n"];
+  for (const path of API_ROUTE_FILES) {
+    const rendered = renderFile(path, ejsVars);
+    if (rendered) apiSection.push(rendered);
+  }
+  sections.push(apiSection.join("\n\n"));
+  sections.push(`## Verification Checklist
+
+After building, verify you created ALL of these files:
+
+### Setup
+- [ ] \`lib/brainerce.ts\` \u2014 SDK client singleton
+- [ ] \`lib/auth.ts\` \u2014 Auth helpers (BFF pattern)
+- [ ] \`providers/store-provider.tsx\` \u2014 Global store context
+- [ ] \`app/layout.tsx\` \u2014 Root layout with StoreProvider
+- [ ] \`middleware.ts\` \u2014 Auth middleware
+
+### Pages (ALL 13 required!)
+- [ ] \`app/page.tsx\` \u2014 Home (hero, featured products)
+- [ ] \`app/products/page.tsx\` \u2014 Product listing with filters
+- [ ] \`app/products/[slug]/page.tsx\` \u2014 Product detail
+- [ ] \`app/cart/page.tsx\` \u2014 Cart with checkboxes, coupon
+- [ ] \`app/checkout/page.tsx\` \u2014 Address \u2192 Shipping \u2192 Payment
+- [ ] \`app/order-confirmation/page.tsx\` \u2014 waitForOrder() + handlePaymentSuccess()
+- [ ] \`app/login/page.tsx\` \u2014 Login
+- [ ] \`app/register/page.tsx\` \u2014 Register
+- [ ] \`app/verify-email/page.tsx\` \u2014 Email verification
+- [ ] \`app/forgot-password/page.tsx\` \u2014 Forgot password
+- [ ] \`app/reset-password/page.tsx\` \u2014 Reset password
+- [ ] \`app/auth/callback/page.tsx\` \u2014 OAuth callback
+- [ ] \`app/account/page.tsx\` \u2014 Account dashboard
+
+### Components
+- [ ] Header with cart count + search autocomplete
+- [ ] Product card, grid, variant selector
+- [ ] Cart item, summary, coupon input
+- [ ] Checkout form, shipping step, payment step
+- [ ] Auth forms (login, register, OAuth buttons)
+
+### API Routes
+- [ ] \`api/store/[...path]/route.ts\` \u2014 BFF proxy
+- [ ] \`api/auth/\` routes \u2014 OAuth callback, me, logout, reset
+
+DO NOT STOP until every item is checked. A store with missing pages is broken.`);
+  return sections.join("\n\n---\n\n");
+}
+
+// src/tools/build-store.ts
+var BUILD_STORE_NAME = "build-store";
+var BUILD_STORE_DESCRIPTION = "Get EVERYTHING needed to build a complete Brainerce store in one call. Returns: critical rules, type reference, ALL page templates (13 pages + header), all components, API routes, and a verification checklist. This is the primary tool \u2014 call this first, then build all pages.";
+var BUILD_STORE_SCHEMA = {
+  connectionId: z7.string().describe("Vibe-coded connection ID (starts with vc_)"),
+  storeName: z7.string().describe('Name of the store (e.g., "Urban Threads")'),
+  storeType: z7.string().describe('Type of store (e.g., "Clothing store", "Electronics shop", "Bakery")'),
+  currency: z7.string().optional().default("USD").describe("Store currency code (e.g., USD, ILS, EUR)"),
+  storeStyle: z7.string().optional().describe('Design style (e.g., "minimalist", "luxury", "playful", "dark mode")')
+};
+async function handleBuildStore(args) {
+  let capabilities = null;
+  try {
+    capabilities = await fetchStoreCapabilities(args.connectionId);
+  } catch {
+  }
+  const bundle = buildStoreBundle({
+    connectionId: args.connectionId,
+    storeName: args.storeName,
+    storeType: args.storeType,
+    currency: args.currency || capabilities?.store.currency || "USD",
+    storeStyle: args.storeStyle,
+    capabilities
+  });
+  return {
+    content: [{ type: "text", text: bundle }]
+  };
+}
+
+// src/tools/validate-store.ts
+import { z as z8 } from "zod";
+var VALIDATE_STORE_NAME = "validate-store";
+var VALIDATE_STORE_DESCRIPTION = "Check if a Brainerce store has all required pages and files. Pass the list of files you created and get back which required pages are missing. Call this after building the store to verify completeness.";
+var VALIDATE_STORE_SCHEMA = {
+  files: z8.array(z8.string()).describe('List of file paths created (e.g., ["app/page.tsx", "app/products/page.tsx", ...])')
+};
+var REQUIRED_PAGES = [
+  {
+    route: "/",
+    label: "Home",
+    patterns: ["app/page.tsx", "page.tsx", "pages/index"],
+    critical: true
+  },
+  {
+    route: "/products",
+    label: "Product Listing",
+    patterns: ["app/products/page.tsx", "products/page.tsx", "pages/products"],
+    critical: true
+  },
+  {
+    route: "/products/[slug]",
+    label: "Product Detail",
+    patterns: ["app/products/[slug]", "products/[slug]", "pages/products/[slug]"],
+    critical: true
+  },
+  {
+    route: "/cart",
+    label: "Cart",
+    patterns: ["app/cart/page.tsx", "cart/page.tsx", "pages/cart"],
+    critical: true
+  },
+  {
+    route: "/checkout",
+    label: "Checkout",
+    patterns: ["app/checkout/page.tsx", "checkout/page.tsx", "pages/checkout"],
+    critical: true
+  },
+  {
+    route: "/order-confirmation",
+    label: "Order Confirmation",
+    patterns: ["app/order-confirmation", "order-confirmation", "checkout/success"],
+    critical: true
+  },
+  {
+    route: "/login",
+    label: "Login",
+    patterns: ["app/login/page.tsx", "login/page.tsx", "pages/login"],
+    critical: true
+  },
+  {
+    route: "/register",
+    label: "Register",
+    patterns: ["app/register/page.tsx", "register/page.tsx", "pages/register", "signup"],
+    critical: true
+  },
+  {
+    route: "/verify-email",
+    label: "Verify Email",
+    patterns: ["app/verify-email", "verify-email", "email-verification"],
+    critical: true
+  },
+  {
+    route: "/forgot-password",
+    label: "Forgot Password",
+    patterns: ["app/forgot-password", "forgot-password"],
+    critical: true
+  },
+  {
+    route: "/reset-password",
+    label: "Reset Password",
+    patterns: ["app/reset-password", "reset-password"],
+    critical: true
+  },
+  {
+    route: "/auth/callback",
+    label: "OAuth Callback",
+    patterns: ["app/auth/callback", "auth/callback", "oauth/callback"],
+    critical: true
+  },
+  {
+    route: "/account",
+    label: "Account",
+    patterns: ["app/account/page.tsx", "account/page.tsx", "pages/account", "profile"],
+    critical: true
+  }
+];
+var REQUIRED_COMPONENTS = [
+  { label: "Header", patterns: ["header", "Header", "navbar", "Navbar", "nav-bar"] },
+  { label: "SDK Setup (lib/brainerce.ts)", patterns: ["lib/brainerce", "brainerce.ts", "sdk"] },
+  { label: "Store Provider", patterns: ["store-provider", "StoreProvider", "provider"] },
+  { label: "BFF Proxy (api/store)", patterns: ["api/store", "api/proxy"] }
+];
+function fileMatchesPattern(file, patterns) {
+  const normalized = file.replace(/\\/g, "/").toLowerCase();
+  return patterns.some((pattern) => normalized.includes(pattern.toLowerCase()));
+}
+async function handleValidateStore(args) {
+  const { files } = args;
+  const missingPages = [];
+  const foundPages = [];
+  for (const page of REQUIRED_PAGES) {
+    if (files.some((f) => fileMatchesPattern(f, page.patterns))) {
+      foundPages.push({ route: page.route, label: page.label });
+    } else {
+      missingPages.push({ route: page.route, label: page.label });
+    }
+  }
+  const missingComponents = [];
+  const foundComponents = [];
+  for (const comp of REQUIRED_COMPONENTS) {
+    if (files.some((f) => fileMatchesPattern(f, comp.patterns))) {
+      foundComponents.push(comp.label);
+    } else {
+      missingComponents.push(comp.label);
+    }
+  }
+  const totalRequired = REQUIRED_PAGES.length + REQUIRED_COMPONENTS.length;
+  const totalFound = foundPages.length + foundComponents.length;
+  const lines = [];
+  if (missingPages.length === 0 && missingComponents.length === 0) {
+    lines.push("# Store Validation: COMPLETE");
+    lines.push(`All ${totalRequired} required items found. The store is complete.`);
+    lines.push("");
+    lines.push("## Pages Found");
+    for (const page of foundPages) {
+      lines.push(`- [x] ${page.route} \u2014 ${page.label}`);
+    }
+    lines.push("");
+    lines.push("## Components Found");
+    for (const comp of foundComponents) {
+      lines.push(`- [x] ${comp}`);
+    }
+  } else {
+    lines.push(`# Store Validation: INCOMPLETE (${totalFound}/${totalRequired})`);
+    lines.push("");
+    if (missingPages.length > 0) {
+      lines.push(`## Missing Pages (${missingPages.length})`);
+      for (const page of missingPages) {
+        lines.push(
+          `- [ ] **${page.route}** \u2014 ${page.label} \u2014 Use \`get-page-code\` with page "${page.label.toLowerCase().replace(/\s+/g, "-")}" to get the template`
+        );
+      }
+      lines.push("");
+    }
+    if (missingComponents.length > 0) {
+      lines.push(`## Missing Components (${missingComponents.length})`);
+      for (const comp of missingComponents) {
+        lines.push(`- [ ] **${comp}**`);
+      }
+      lines.push("");
+    }
+    lines.push("## Found");
+    for (const page of foundPages) {
+      lines.push(`- [x] ${page.route} \u2014 ${page.label}`);
+    }
+    for (const comp of foundComponents) {
+      lines.push(`- [x] ${comp}`);
+    }
+    lines.push("");
+    lines.push("**Build the missing pages before considering the store complete!**");
+  }
+  return {
+    content: [{ type: "text", text: lines.join("\n") }]
+  };
+}
+
+// src/tools/get-page-code.ts
+import { z as z9 } from "zod";
+var GET_PAGE_CODE_NAME = "get-page-code";
+var GET_PAGE_CODE_DESCRIPTION = "Get production-ready template code for specific pages. Returns deduplicated code for the requested pages and their components. Use this to drill down into specific pages after calling build-store, or to get code for missing pages.";
+var GET_PAGE_CODE_SCHEMA = {
+  pages: z9.array(
+    z9.enum([
+      "home",
+      "products",
+      "product-detail",
+      "cart",
+      "checkout",
+      "order-confirmation",
+      "login",
+      "register",
+      "verify-email",
+      "forgot-password",
+      "reset-password",
+      "oauth-callback",
+      "account",
+      "header",
+      "setup"
+    ])
+  ).describe('Pages to get code for (e.g., ["checkout", "login", "account"])')
+};
+var PAGE_TO_FILES = {
+  setup: [
+    { path: "src/lib/brainerce.ts.ejs", label: "SDK Client" },
+    { path: "src/lib/auth.ts", label: "Auth Helpers" },
+    { path: "src/lib/utils.ts", label: "Utilities" },
+    { path: "src/providers/store-provider.tsx.ejs", label: "Store Provider" },
+    { path: "src/app/layout.tsx.ejs", label: "Root Layout" },
+    { path: "src/middleware.ts", label: "Middleware" },
+    { path: "src/app/api/store/[...path]/route.ts", label: "BFF Proxy" }
+  ],
+  home: [
+    { path: "src/app/page.tsx", label: "Home Page" },
+    { path: "src/components/products/product-card.tsx", label: "Product Card" },
+    { path: "src/components/products/product-grid.tsx", label: "Product Grid" },
+    { path: "src/components/shared/price-display.tsx", label: "Price Display" }
+  ],
+  products: [
+    { path: "src/app/products/page.tsx", label: "Products Page" },
+    { path: "src/components/products/product-card.tsx", label: "Product Card" },
+    { path: "src/components/products/product-grid.tsx", label: "Product Grid" },
+    { path: "src/components/shared/price-display.tsx", label: "Price Display" }
+  ],
+  "product-detail": [
+    { path: "src/app/products/[slug]/page.tsx", label: "Product Detail Page" },
+    { path: "src/components/products/variant-selector.tsx", label: "Variant Selector" },
+    { path: "src/components/products/stock-badge.tsx", label: "Stock Badge" },
+    { path: "src/components/products/discount-badge.tsx", label: "Discount Badge" },
+    { path: "src/components/shared/price-display.tsx", label: "Price Display" }
+  ],
+  cart: [
+    { path: "src/app/cart/page.tsx", label: "Cart Page" },
+    { path: "src/components/cart/cart-item.tsx", label: "Cart Item" },
+    { path: "src/components/cart/cart-summary.tsx", label: "Cart Summary" },
+    { path: "src/components/cart/coupon-input.tsx", label: "Coupon Input" },
+    { path: "src/components/cart/cart-nudges.tsx", label: "Cart Nudges" },
+    { path: "src/components/cart/reservation-countdown.tsx", label: "Reservation Countdown" }
+  ],
+  checkout: [
+    { path: "src/app/checkout/page.tsx", label: "Checkout Page" },
+    { path: "src/components/checkout/checkout-form.tsx", label: "Checkout Form" },
+    { path: "src/components/checkout/shipping-step.tsx", label: "Shipping Step" },
+    { path: "src/components/checkout/payment-step.tsx", label: "Payment Step" },
+    { path: "src/components/checkout/tax-display.tsx", label: "Tax Display" }
+  ],
+  "order-confirmation": [
+    { path: "src/app/order-confirmation/page.tsx", label: "Order Confirmation Page" }
+  ],
+  login: [
+    { path: "src/app/login/page.tsx", label: "Login Page" },
+    { path: "src/components/auth/login-form.tsx", label: "Login Form" },
+    { path: "src/components/auth/oauth-buttons.tsx", label: "OAuth Buttons" }
+  ],
+  register: [
+    { path: "src/app/register/page.tsx", label: "Register Page" },
+    { path: "src/components/auth/register-form.tsx", label: "Register Form" },
+    { path: "src/components/auth/oauth-buttons.tsx", label: "OAuth Buttons" }
+  ],
+  "verify-email": [{ path: "src/app/verify-email/page.tsx", label: "Verify Email Page" }],
+  "forgot-password": [{ path: "src/app/forgot-password/page.tsx", label: "Forgot Password Page" }],
+  "reset-password": [
+    { path: "src/app/reset-password/page.tsx", label: "Reset Password Page" },
+    { path: "src/app/api/auth/reset-callback/route.ts", label: "Reset Callback API" },
+    { path: "src/app/api/auth/reset-password/route.ts", label: "Reset Password API" }
+  ],
+  "oauth-callback": [
+    { path: "src/app/auth/callback/page.tsx", label: "OAuth Callback Page" },
+    { path: "src/app/api/auth/oauth-callback/route.ts", label: "OAuth Callback API" }
+  ],
+  account: [
+    { path: "src/app/account/page.tsx", label: "Account Page" },
+    { path: "src/components/account/profile-section.tsx", label: "Profile Section" },
+    { path: "src/components/account/order-history.tsx", label: "Order History" }
+  ],
+  header: [
+    { path: "src/components/layout/header.tsx", label: "Header" },
+    { path: "src/components/layout/footer.tsx", label: "Footer" },
+    { path: "src/hooks/use-search.ts", label: "Search Hook" }
+  ]
+};
+async function handleGetPageCode(args) {
+  const emitted = /* @__PURE__ */ new Set();
+  const results = [];
+  for (const page of args.pages) {
+    const files = PAGE_TO_FILES[page];
+    if (!files) {
+      results.push(
+        `# Unknown page: "${page}"
+Available: ${Object.keys(PAGE_TO_FILES).join(", ")}`
+      );
+      continue;
+    }
+    const pageResults = [];
+    for (const file of files) {
+      if (emitted.has(file.path)) continue;
+      emitted.add(file.path);
+      const content = EMBEDDED_TEMPLATES[file.path];
+      if (!content) continue;
+      const displayPath = file.path.replace(/\.ejs$/, "");
+      pageResults.push(`// \u2500\u2500 ${displayPath} (${file.label}) \u2500\u2500
+${content}`);
+    }
+    if (pageResults.length > 0) {
+      results.push(`# ${page}
+
+${pageResults.join("\n\n")}`);
+    }
+  }
+  if (results.length === 0) {
+    return {
+      content: [
+        {
+          type: "text",
+          text: `No files found. Available pages: ${Object.keys(PAGE_TO_FILES).join(", ")}`
+        }
+      ]
+    };
+  }
+  return {
+    content: [
+      {
+        type: "text",
+        text: `# Page Code (${args.pages.join(", ")})
+
+Production-ready template code. Use as-is \u2014 customize only the design/styling.
+
+${results.join("\n\n---\n\n")}`
+      }
+    ]
+  };
+}
+
 // src/resources/sdk-types.ts
 var SDK_TYPES_URI = "brainerce://sdk/types";
 var SDK_TYPES_NAME = "Brainerce SDK Types";
@@ -9147,24 +10565,57 @@ async function handleProjectTemplate(uri) {
 }
 
 // src/prompts/create-store.ts
-import { z as z6 } from "zod";
+import { z as z10 } from "zod";
 var CREATE_STORE_NAME = "create-store";
-var CREATE_STORE_DESCRIPTION = "Generate a personalized prompt for building a complete Brainerce e-commerce store. Returns all SDK docs, code examples, and the required pages checklist customized with the store details.";
+var CREATE_STORE_DESCRIPTION = "Generate a personalized prompt for building a complete Brainerce e-commerce store. Instructs the AI to call build-store for all templates and validate-store when done.";
 var CREATE_STORE_SCHEMA = {
-  connectionId: z6.string().describe("Vibe-coded connection ID (starts with vc_)"),
-  storeName: z6.string().describe('Name of the store (e.g., "Urban Threads")'),
-  storeType: z6.string().describe('Type of store (e.g., "Clothing store", "Electronics shop", "Bakery")'),
-  currency: z6.string().optional().default("USD").describe("Store currency code (e.g., USD, ILS, EUR)"),
-  storeStyle: z6.string().optional().describe('Design style (e.g., "minimalist", "luxury", "playful", "dark mode")')
+  connectionId: z10.string().describe("Vibe-coded connection ID (starts with vc_)"),
+  storeName: z10.string().describe('Name of the store (e.g., "Urban Threads")'),
+  storeType: z10.string().describe('Type of store (e.g., "Clothing store", "Electronics shop", "Bakery")'),
+  currency: z10.string().optional().default("USD").describe("Store currency code (e.g., USD, ILS, EUR)"),
+  storeStyle: z10.string().optional().describe('Design style (e.g., "minimalist", "luxury", "playful", "dark mode")')
 };
 function handleCreateStore(args) {
-  const prompt = buildMcpStorePrompt({
-    connectionId: args.connectionId,
-    storeName: args.storeName,
-    storeType: args.storeType,
-    currency: args.currency || "USD",
-    storeStyle: args.storeStyle
-  });
+  const styleDesc = args.storeStyle ? ` with a ${args.storeStyle} design style` : "";
+  const prompt = `# Build a Brainerce E-Commerce Store
+
+## Task
+Build a complete **${args.storeType}** called **${args.storeName}**${styleDesc}.
+Connection ID: \`${args.connectionId}\` | Currency: ${args.currency || "USD"}
+
+## Step 1: Get Everything You Need (ONE call)
+Call the \`build-store\` tool with:
+- connectionId: "${args.connectionId}"
+- storeName: "${args.storeName}"
+- storeType: "${args.storeType}"
+- currency: "${args.currency || "USD"}"${args.storeStyle ? `
+- storeStyle: "${args.storeStyle}"` : ""}
+
+This returns ALL the code templates, critical rules, type reference, and component code you need.
+
+## Step 2: Build ALL 13 Pages + Header
+Using the templates from build-store, create every page listed. Customize the design and styling to match the store type, but keep the SDK integration logic exactly as shown.
+
+DO NOT STOP until all 13 pages + header are implemented:
+1. \`/\` \u2014 Home
+2. \`/products\` \u2014 Product listing
+3. \`/products/[slug]\` \u2014 Product detail
+4. \`/cart\` \u2014 Cart
+5. \`/checkout\` \u2014 Checkout
+6. \`/order-confirmation\` \u2014 Order confirmation
+7. \`/login\` \u2014 Login
+8. \`/register\` \u2014 Register
+9. \`/verify-email\` \u2014 Email verification
+10. \`/forgot-password\` \u2014 Forgot password
+11. \`/reset-password\` \u2014 Reset password
+12. \`/auth/callback\` \u2014 OAuth callback
+13. \`/account\` \u2014 Account dashboard
+14. Header component with cart count + search
+
+## Step 3: Validate
+After building all pages, call \`validate-store\` with the list of files you created to verify nothing is missing.
+
+**Start now \u2014 call \`build-store\` to get all the templates.**`;
   return {
     messages: [
       {
@@ -9179,11 +10630,11 @@ function handleCreateStore(args) {
 }
 
 // src/prompts/add-feature.ts
-import { z as z7 } from "zod";
+import { z as z11 } from "zod";
 var ADD_FEATURE_NAME = "add-feature";
 var ADD_FEATURE_DESCRIPTION = "Generate a focused prompt for adding a specific feature to an existing Brainerce store. Returns targeted SDK docs, types, and code examples for just that feature.";
 var ADD_FEATURE_SCHEMA = {
-  feature: z7.enum([
+  feature: z11.enum([
     "products",
     "cart",
     "checkout",
@@ -9196,8 +10647,8 @@ var ADD_FEATURE_SCHEMA = {
     "search",
     "tax"
   ]).describe("The feature to add"),
-  connectionId: z7.string().optional().describe("Vibe-coded connection ID (starts with vc_)"),
-  currency: z7.string().optional().default("USD").describe("Store currency code")
+  connectionId: z11.string().optional().describe("Vibe-coded connection ID (starts with vc_)"),
+  currency: z11.string().optional().default("USD").describe("Store currency code")
 };
 var FEATURE_TO_TOPICS = {
   products: { topics: ["products"], domains: ["products"] },
@@ -9266,7 +10717,7 @@ ${types}
 function createServer() {
   const server = new McpServer({
     name: "brainerce",
-    version: "1.0.0"
+    version: "2.0.0"
   });
   server.tool(GET_SDK_DOCS_NAME, GET_SDK_DOCS_DESCRIPTION, GET_SDK_DOCS_SCHEMA, handleGetSdkDocs);
   server.tool(
@@ -9293,6 +10744,25 @@ function createServer() {
     GET_STORE_INFO_SCHEMA,
     handleGetStoreInfo
   );
+  server.tool(
+    GET_STORE_CAPABILITIES_NAME,
+    GET_STORE_CAPABILITIES_DESCRIPTION,
+    GET_STORE_CAPABILITIES_SCHEMA,
+    handleGetStoreCapabilities
+  );
+  server.tool(BUILD_STORE_NAME, BUILD_STORE_DESCRIPTION, BUILD_STORE_SCHEMA, handleBuildStore);
+  server.tool(
+    VALIDATE_STORE_NAME,
+    VALIDATE_STORE_DESCRIPTION,
+    VALIDATE_STORE_SCHEMA,
+    handleValidateStore
+  );
+  server.tool(
+    GET_PAGE_CODE_NAME,
+    GET_PAGE_CODE_DESCRIPTION,
+    GET_PAGE_CODE_SCHEMA,
+    handleGetPageCode
+  );
   server.resource(
     SDK_TYPES_NAME,
     SDK_TYPES_URI,
@@ -9318,7 +10788,9 @@ export {
   AVAILABLE_DOMAINS,
   PROJECT_TEMPLATE,
   buildFullStorePrompt,
+  buildStoreBundle,
   createServer,
+  fetchStoreCapabilities,
   fetchStoreInfo,
   getAllTypes,
   getSectionByTopic,