create-brainerce-store 1.63.0 → 1.65.0

package/templates/nextjs/base/src/app/robots.ts

@@ -1,14 +1,73 @@
-import type { MetadataRoute } from 'next';
-
-export default function robots(): MetadataRoute.Robots {
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
-
-  return {
-    rules: {
-      userAgent: '*',
-      allow: '/',
-      disallow: ['/api/', '/auth/', '/checkout/', '/account/'],
-    },
-    sitemap: `${baseUrl}/sitemap.xml`,
-  };
-}
+import type { MetadataRoute } from 'next';
+
+/**
+ * robots.txt with an explicit AI-crawler policy.
+ *
+ * Merchants WANT to be recommended by AI assistants, so the bots that power
+ * AI search/answers are allowed by name — an explicit allow survives any
+ * future tightening of the `*` rule and documents intent to auditors:
+ *
+ *   - OAI-SearchBot / ChatGPT-User  → ChatGPT search + shopping visibility
+ *   - Claude-SearchBot / Claude-User → Claude search + user-requested reads
+ *   - PerplexityBot / Perplexity-User → Perplexity shopping visibility
+ *   - Bingbot → also feeds Microsoft Copilot answers
+ *   - Applebot → Siri / Apple search surfaces
+ *   - Amazonbot → Alexa / Amazon shopping surfaces
+ *
+ * TRAINING bots (GPTBot, ClaudeBot, CCBot, Google-Extended, Meta-
+ * ExternalAgent, Applebot-Extended) are also allowed by default: model-weight
+ * familiarity with the store feeds zero-shot recommendations, which is what a
+ * store wants. A merchant who objects to AI training on their content can
+ * move those user-agents to a `disallow: '/'` rule — that does NOT affect
+ * search visibility (Google-Extended, for example, has no effect on Google
+ * Search or AI Overviews; it only gates Gemini training).
+ *
+ * Checkout/account/API paths stay disallowed for every agent.
+ */
+const DISALLOWED_PATHS = ['/api/', '/auth/', '/checkout/', '/account/'];
+
+const AI_SEARCH_BOTS = [
+  'OAI-SearchBot',
+  'ChatGPT-User',
+  'Claude-SearchBot',
+  'Claude-User',
+  'PerplexityBot',
+  'Perplexity-User',
+  'Bingbot',
+  'Applebot',
+  'Amazonbot',
+];
+
+const AI_TRAINING_BOTS = [
+  'GPTBot',
+  'ClaudeBot',
+  'CCBot',
+  'Google-Extended',
+  'Meta-ExternalAgent',
+  'Applebot-Extended',
+];
+
+export default function robots(): MetadataRoute.Robots {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: DISALLOWED_PATHS,
+      },
+      {
+        userAgent: AI_SEARCH_BOTS,
+        allow: '/',
+        disallow: DISALLOWED_PATHS,
+      },
+      {
+        userAgent: AI_TRAINING_BOTS,
+        allow: '/',
+        disallow: DISALLOWED_PATHS,
+      },
+    ],
+    sitemap: `${baseUrl}/sitemap.xml`,
+  };
+}

package/templates/nextjs/base/src/app/sitemap.ts

@@ -1,66 +1,89 @@
-import type { MetadataRoute } from 'next';
-import { getBlogSitemapEntries, getCategorySitemapEntries } from 'brainerce';
-import { getServerClient } from '@/core/lib/brainerce';
-
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
-
-  const client = getServerClient();
-  const storeInfo = await client.getStoreInfo().catch(() => null);
-  const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
-  const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
-  const isMultiLocale = supportedLocales.length > 1;
-
-  const staticPages: MetadataRoute.Sitemap = isMultiLocale
-    ? supportedLocales.flatMap((loc) => {
-        const prefix = loc === defaultLoc ? '' : `/${loc}`;
-        return [
-          { url: `${baseUrl}${prefix || '/'}`, lastModified: new Date(), priority: 1 },
-          { url: `${baseUrl}${prefix}/products`, lastModified: new Date(), priority: 0.9 },
-        ];
-      })
-    : [
-        { url: baseUrl, lastModified: new Date(), priority: 1 },
-        { url: `${baseUrl}/products`, lastModified: new Date(), priority: 0.9 },
-      ];
-
-  try {
-    const { data: products } = await client.getProducts({ limit: 1000 });
-
-    const productPages: MetadataRoute.Sitemap = products.flatMap((product) => {
-      const baseSlug = product.slug || product.id;
-      const localeSlugs = product.localeSlugs ?? {};
-      const lastMod = product.updatedAt ? new Date(product.updatedAt) : new Date();
-
-      if (!isMultiLocale) {
-        return [{ url: `${baseUrl}/products/${baseSlug}`, lastModified: lastMod, priority: 0.8 }];
-      }
-
-      return supportedLocales.map((loc) => {
-        const locSlug = localeSlugs[loc] || baseSlug;
-        const path = loc === defaultLoc ? `/products/${locSlug}` : `/${loc}/products/${locSlug}`;
-        return { url: `${baseUrl}${path}`, lastModified: lastMod, priority: 0.8 };
-      });
-    });
-
-    // Category (collection) pages — the highest-value organic-SEO surface;
-    // must be crawlable so they can rank for broad research-intent queries.
-    const categoryPages: MetadataRoute.Sitemap = await getCategorySitemapEntries(client, {
-      siteUrl: baseUrl,
-      locales: isMultiLocale ? supportedLocales : undefined,
-      defaultLocale: defaultLoc,
-    }).catch(() => []);
-
-    // Blog posts — the SEO Autopilot (and manual publishes) must be
-    // discoverable; missing blog entries = articles never get crawled.
-    const blogPages: MetadataRoute.Sitemap = await getBlogSitemapEntries(client, {
-      siteUrl: baseUrl,
-      locales: isMultiLocale ? supportedLocales : undefined,
-      defaultLocale: defaultLoc,
-    }).catch(() => []);
-
-    return [...staticPages, ...productPages, ...categoryPages, ...blogPages];
-  } catch {
-    return staticPages;
-  }
-}
+import type { MetadataRoute } from 'next';
+import {
+  getBlogSitemapEntries,
+  getCategorySitemapEntries,
+  getProductSitemapEntries,
+} from 'brainerce';
+import { getServerClient } from '@/core/lib/brainerce';
+
+/**
+ * Storefront sitemap: static pages + every published product, category,
+ * blog post, and merchant-authored content page.
+ *
+ * Products MUST go through `getProductSitemapEntries` — the public listing
+ * API clamps `limit` to 100, so a naive `getProducts({ limit: 1000 })` call
+ * silently truncates the sitemap for any store with more than 100 products.
+ * The helper uses a dedicated lightweight endpoint with a 5000-product cap.
+ */
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com';
+
+  const client = getServerClient();
+  const storeInfo = await client.getStoreInfo().catch(() => null);
+  const supportedLocales = storeInfo?.i18n?.supportedLocales ?? [];
+  const defaultLoc = storeInfo?.i18n?.defaultLocale ?? storeInfo?.language ?? '';
+  const isMultiLocale = supportedLocales.length > 1;
+  const locales = isMultiLocale ? supportedLocales : undefined;
+
+  // Indexable static routes. Cart/checkout/account/login are noindex — never
+  // list them here.
+  const staticPaths: Array<{ path: string; priority: number }> = [
+    { path: '/', priority: 1 },
+    { path: '/products', priority: 0.9 },
+    { path: '/faq', priority: 0.5 },
+    { path: '/contact', priority: 0.5 },
+  ];
+  const staticPages: MetadataRoute.Sitemap = (isMultiLocale ? supportedLocales : ['']).flatMap(
+    (loc) => {
+      const prefix = !isMultiLocale || loc === defaultLoc ? '' : `/${loc}`;
+      return staticPaths.map(({ path, priority }) => ({
+        url: `${baseUrl}${prefix}${path === '/' ? (prefix ? '' : '/') : path}`,
+        lastModified: new Date(),
+        priority,
+      }));
+    }
+  );
+
+  // Each section fails independently to an empty list — a transient API error
+  // on one content type must not blank the whole sitemap.
+  const [productPages, categoryPages, blogPages, contentPages] = await Promise.all([
+    getProductSitemapEntries(client, {
+      siteUrl: baseUrl,
+      locales,
+      defaultLocale: defaultLoc,
+    }).catch(() => []),
+    // Category (collection) pages — the highest-value organic-SEO surface;
+    // must be crawlable so they can rank for broad research-intent queries.
+    getCategorySitemapEntries(client, {
+      siteUrl: baseUrl,
+      locales,
+      defaultLocale: defaultLoc,
+    }).catch(() => []),
+    // Blog posts — the SEO Autopilot (and manual publishes) must be
+    // discoverable; missing blog entries = articles never get crawled.
+    getBlogSitemapEntries(client, {
+      siteUrl: baseUrl,
+      locales,
+      defaultLocale: defaultLoc,
+    }).catch(() => []),
+    // Merchant-authored content pages (About, policies, …) at /pages/{slug}.
+    client.content.page
+      .list()
+      .then((pages) =>
+        pages.flatMap((page) => {
+          const slug = (page.data as { slug?: string }).slug;
+          if (!slug) return [];
+          return [
+            {
+              url: `${baseUrl}/pages/${slug}`,
+              lastModified: page.updatedAt ? new Date(page.updatedAt) : undefined,
+              priority: 0.5,
+            },
+          ];
+        })
+      )
+      .catch(() => []),
+  ]);
+
+  return [...staticPages, ...productPages, ...categoryPages, ...blogPages, ...contentPages];
+}

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

@@ -1,179 +1,71 @@
-import type { Product, ShippingSummaryEntry } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
-import { getNonce } from '@/core/lib/nonce';
-import { resolveCurrency } from '@/core/lib/resolve-currency';
-import { stripHtmlForSeo } from '@/core/lib/seo';
-
-interface ProductJsonLdProps {
-  product: Product;
-  url: string;
-  currency?: string;
-  /** From `storeInfo.shipping` — real flat-rate/free zones only. Omitted entirely when unset, never fabricated. */
-  shipping?: ShippingSummaryEntry[];
-}
-
-export async function ProductJsonLd({ product, url, currency, shipping }: ProductJsonLdProps) {
-  // Defer to the shared server helper so the env-var + USD fallback chain
-  // lives in exactly one place across all server-side currency reads.
-  const resolvedCurrency = resolveCurrency(null, currency);
-  const nonce = await getNonce();
-  const priceInfo = getProductPriceInfo(product);
-  const imageUrl = product.images?.[0]?.url;
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  const availability =
-    product.inventory?.canPurchase !== false
-      ? 'https://schema.org/InStock'
-      : 'https://schema.org/OutOfStock';
-
-  // All Brainerce catalog listings are first-party new-goods sales — no
-  // used/refurbished condition data exists anywhere in the product model, so
-  // this is a deliberate always-true assumption, not a per-product field.
-  const itemCondition = 'https://schema.org/NewCondition';
-
-  const shippingDetails = (shipping ?? [])
-    .filter((z) => z.amount !== null)
-    .map((z) => ({
-      '@type': 'OfferShippingDetails',
-      shippingRate: { '@type': 'MonetaryAmount', value: z.amount, currency: resolvedCurrency },
-      shippingDestination: { '@type': 'DefinedRegion', addressCountry: z.countries },
-      ...(z.handlingTime != null || z.minDeliveryDays != null || z.maxDeliveryDays != null
-        ? {
-            deliveryTime: {
-              '@type': 'ShippingDeliveryTime',
-              ...(z.handlingTime != null
-                ? {
-                    handlingTime: {
-                      '@type': 'QuantitativeValue',
-                      minValue: 0,
-                      maxValue: z.handlingTime,
-                    },
-                  }
-                : {}),
-              ...(z.minDeliveryDays != null || z.maxDeliveryDays != null
-                ? {
-                    transitTime: {
-                      '@type': 'QuantitativeValue',
-                      minValue: z.minDeliveryDays ?? z.maxDeliveryDays,
-                      maxValue: z.maxDeliveryDays ?? z.minDeliveryDays,
-                    },
-                  }
-                : {}),
-            },
-          }
-        : {}),
-    }));
-
-  const isVariable = product.type === 'VARIABLE';
-  const offers =
-    isVariable && product.priceMin
-      ? {
-          '@type': 'AggregateOffer',
-          lowPrice: product.priceMin,
-          highPrice: product.priceMax ?? product.priceMin,
-          offerCount: product.variants?.length ?? 1,
-          priceCurrency: resolvedCurrency,
-          availability,
-          itemCondition,
-          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
-          url,
-        }
-      : {
-          '@type': 'Offer',
-          price: priceInfo.price,
-          priceCurrency: resolvedCurrency,
-          availability,
-          itemCondition,
-          ...(product.salePrice && product.salePriceEndsAt
-            ? { priceValidUntil: product.salePriceEndsAt }
-            : {}),
-          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
-          url,
-        };
-
-  // schema.org/Product.description must be plain text — Google's Rich Results
-  // and AI Overviews ingest this field directly and reject markup. Strip HTML
-  // first; if the description is empty after stripping, fall back to the name.
-  const cleanDescription = stripHtmlForSeo(product.description) || product.name;
-  const brandName = product.brands?.[0]?.name;
-  const productJsonLd: Record<string, unknown> = {
-    '@context': 'https://schema.org',
-    '@type': 'Product',
-    name: product.name,
-    description: cleanDescription,
-    image: imageUrl,
-    url,
-    sku: product.sku || product.id,
-    // Brand + identifiers qualify the PDP for Google's free merchant listings
-    // (no Merchant Center feed needed). Emitted only when present — Google
-    // penalizes fabricated identifiers.
-    ...(brandName ? { brand: { '@type': 'Brand', name: brandName } } : {}),
-    ...(product.gtin ? { gtin: product.gtin } : {}),
-    ...(product.mpn ? { mpn: product.mpn } : {}),
-    offers,
-  };
-
-  // Emit aggregateRating only when there is real review data — Google rejects
-  // self-serving / faked ratings and stores with 0 reviews shouldn't claim any.
-  if (product.reviewCount && product.reviewCount > 0) {
-    productJsonLd.aggregateRating = {
-      '@type': 'AggregateRating',
-      ratingValue: product.avgRating,
-      reviewCount: product.reviewCount,
-      bestRating: 5,
-      worstRating: 1,
-    };
-  }
-
-  const breadcrumbJsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    itemListElement: [
-      {
-        '@type': 'ListItem',
-        position: 1,
-        name: 'Home',
-        item: baseUrl || '/',
-      },
-      {
-        '@type': 'ListItem',
-        position: 2,
-        name: 'Products',
-        item: `${baseUrl}/products`,
-      },
-      {
-        '@type': 'ListItem',
-        position: 3,
-        name: product.name,
-        item: url,
-      },
-    ],
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
-      />
-    </>
-  );
-}
-
-// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
-// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
-// break out of the script element with `</script>` or inject HTML.
-function serializeJsonLd(value: unknown): string {
-  return JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/>/g, '\\u003e')
-    .replace(/&/g, '\\u0026');
-}
+import type { Product, ShippingSummaryEntry } from 'brainerce';
+import { buildProductJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+import { resolveCurrency } from '@/core/lib/resolve-currency';
+
+interface ProductJsonLdProps {
+  product: Product;
+  url: string;
+  currency?: string;
+  /** From `storeInfo.shipping` — real flat-rate/free zones only. Omitted entirely when unset, never fabricated. */
+  shipping?: ShippingSummaryEntry[];
+}
+
+/**
+ * Product + BreadcrumbList structured data for a product detail page (PDP).
+ *
+ * Uses the SDK's `buildProductJsonLd` — NEVER hand-roll the schema object
+ * here. The builder owns the availability mapping (InStock / BackOrder /
+ * OutOfStock from the backend's pre-computed inventory flags), the
+ * Offer/AggregateOffer split, identifier emission (gtin/mpn/sku), shipping
+ * details, and the aggregateRating gating; a local copy WILL drift from it.
+ * The <script> is rendered locally only to attach the CSP nonce (the SDK's
+ * jsonLdScriptProps can't).
+ */
+export async function ProductJsonLd({ product, url, currency, shipping }: ProductJsonLdProps) {
+  // Defer to the shared server helper so the env-var + USD fallback chain
+  // lives in exactly one place across all server-side currency reads.
+  const resolvedCurrency = resolveCurrency(null, currency);
+  const nonce = await getNonce();
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const productJsonLd = buildProductJsonLd(product, {
+    siteUrl: baseUrl,
+    path: url,
+    currency: resolvedCurrency,
+    shipping,
+  });
+
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
+    { name: 'Home', url: baseUrl || '/' },
+    { name: 'Products', url: `${baseUrl}/products` },
+    { name: product.name, url },
+  ]);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(productJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Serialize a JSON-LD object for embedding in a <script> tag. Escapes
+// `<`, `>`, and `&` to \uXXXX so seller-controlled product fields cannot
+// break out of the script element with `</script>` or inject HTML.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}

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

@@ -33,6 +33,13 @@ export interface PublicStoreInfo {
    * `<TrackingBootstrap>`; nothing else should read them.
    */
   tracking?: StoreInfo['tracking'];
+  /**
+   * SEO surface: IndexNow key (served at /indexnow-key.txt) and the Google
+   * site-verification token (rendered as a meta tag in the root layout so the
+   * merchant can verify the domain in Search Console / claim it in Merchant
+   * Center). Both public by protocol design.
+   */
+  seo?: StoreInfo['seo'];
 }
 
 /**
@@ -56,5 +63,6 @@ export function pickPublicStoreInfo(raw: StoreInfo): PublicStoreInfo {
     i18n: raw.i18n,
     shipping: raw.shipping,
     tracking: raw.tracking,
+    seo: raw.seo,
   };
 }

package/templates/nextjs/base/src/ui/cart/cart-nudges.tsx

@@ -20,7 +20,7 @@ export function CartNudges({ nudges, className }: CartNudgesProps) {
           className="bg-primary/5 border-primary/20 flex items-start gap-3 rounded-lg border px-4 py-3"
         >
           <Info className="text-primary mt-0.5 h-5 w-5 flex-shrink-0" aria-hidden="true" />
-          <p className="text-foreground flex-1 text-sm">{nudge.text}</p>
+          <p className="text-foreground flex-1 text-sm whitespace-pre-line">{nudge.text}</p>
         </div>
       ))}
     </div>

package/templates/nextjs/base/src/ui/home/discount-banner-strip.tsx

@@ -11,7 +11,9 @@ export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] })
       <div className="mx-auto max-w-7xl px-4 py-2 sm:px-6 lg:px-8">
         <div className="flex items-center justify-center gap-4 overflow-x-auto text-sm font-medium">
           {banners.map((banner) => (
-            <span key={banner.ruleId}>{banner.text}</span>
+            <span key={banner.ruleId} className="whitespace-pre-line text-center">
+              {banner.text}
+            </span>
           ))}
         </div>
       </div>

package/templates/nextjs/designs/atelier/app-overlay/layout.tsx.ejs

@@ -104,6 +104,16 @@ export default async function RootLayout({
               .replace(/&/g, '\\u0026'),
           }}
         />
+        {/* Google Search Console verification — token set by the merchant in
+            the dashboard (channel settings → Google site verification). Also
+            what the Merchant Center website claim checks for. Renders nothing
+            until a token is configured. */}
+        {storeInfo?.seo?.googleSiteVerification ? (
+          <meta name="google-site-verification" content={storeInfo.seo.googleSiteVerification} />
+        ) : null}
+        {/* RSS autodiscovery — feed readers and aggregators find the blog feed
+            from any page. The route itself lives at /blog/rss.xml. */}
+        <link rel="alternate" type="application/rss+xml" title="Blog" href="/blog/rss.xml" />
         {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
             SPA route changes. Cookieless (no consent banner needed); the
             merchant can toggle it per sales channel in the dashboard. */}
@@ -230,6 +240,16 @@ export default async function RootLayout({
               .replace(/&/g, '\\u0026'),
           }}
         />
+        {/* Google Search Console verification — token set by the merchant in
+            the dashboard (channel settings → Google site verification). Also
+            what the Merchant Center website claim checks for. Renders nothing
+            until a token is configured. */}
+        {storeInfo?.seo?.googleSiteVerification ? (
+          <meta name="google-site-verification" content={storeInfo.seo.googleSiteVerification} />
+        ) : null}
+        {/* RSS autodiscovery — feed readers and aggregators find the blog feed
+            from any page. The route itself lives at /blog/rss.xml. */}
+        <link rel="alternate" type="application/rss+xml" title="Blog" href="/blog/rss.xml" />
         {/* Brainerce cookieless traffic analytics — auto-tracks pageviews +
             SPA route changes. Cookieless (no consent banner needed); the
             merchant can toggle it per sales channel in the dashboard. */}

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

@@ -21,7 +21,7 @@ export function CartNudges({ nudges, className }: CartNudgesProps) {
       {nudges.map((nudge) => (
         <li
           key={nudge.ruleId}
-          className="flex items-center gap-2.5 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-medium text-foreground"
+          className="flex items-center gap-2.5 rounded-lg bg-secondary px-3.5 py-2.5 text-sm font-medium whitespace-pre-line text-foreground"
         >
           <span aria-hidden="true" className="shrink-0 text-primary">
             <IconSparkle size={18} />

package/templates/nextjs/designs/atelier/ui/home/discount-banner-strip.tsx

@@ -13,7 +13,7 @@ export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] })
         {banners.map((banner) => (
           <li
             key={banner.ruleId}
-            className="inline-flex items-center gap-2 text-[13px] font-semibold text-foreground"
+            className="inline-flex items-center gap-2 text-[13px] font-semibold whitespace-pre-line text-foreground"
           >
             <span aria-hidden="true" className="text-primary">
               <IconTag size={16} />

package/templates/nextjs/ui-canvas/cart/cart-nudges.tsx

@@ -20,7 +20,9 @@ export function CartNudges({ nudges, className }: CartNudgesProps) {
   return (
     <ul className={cn(className)} aria-label="Cart suggestions">
       {nudges.map((nudge) => (
-        <li key={nudge.ruleId}>{nudge.text}</li>
+        <li key={nudge.ruleId} className="whitespace-pre-line">
+          {nudge.text}
+        </li>
       ))}
     </ul>
   );

package/templates/nextjs/ui-canvas/home/discount-banner-strip.tsx

@@ -11,7 +11,9 @@ export function DiscountBannerStrip({ banners }: { banners: DiscountBanner[] })
       {/* DESIGN ME — discount banner strip: active discount-rule texts; banners come from useHomeData() in the parent. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
       <ul className="flex items-center gap-4">
         {banners.map((banner) => (
-          <li key={banner.ruleId}>{banner.text}</li>
+          <li key={banner.ruleId} className="whitespace-pre-line">
+            {banner.text}
+          </li>
         ))}
       </ul>
     </div>