create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/base/src/components/checkout/tax-display.tsx

@@ -1,74 +1,74 @@
-'use client';
-
-import type { TaxBreakdown } from 'brainerce';
-import { formatPrice } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface TaxDisplayProps {
-  /** Whether shipping address has been set */
-  addressSet: boolean;
-  /** Tax amount string from checkout (only available after address is set) */
-  taxAmount?: string;
-  /** Detailed tax breakdown (optional) */
-  taxBreakdown?: TaxBreakdown | null;
-  className?: string;
-}
-
-export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: TaxDisplayProps) {
-  const t = useTranslations('checkout');
-  const tc = useTranslations('common');
-  const currency = useCurrency();
-
-  // Before address is set
-  if (!addressSet) {
-    return (
-      <div className={cn('flex items-center justify-between text-sm', className)}>
-        <span className="text-muted-foreground">{tc('tax')}</span>
-        <span className="text-muted-foreground text-xs">{t('calculatedAfterAddress')}</span>
-      </div>
-    );
-  }
-
-  // Inclusive-pricing stores back the tax out of the displayed price, so
-  // `checkout.taxAmount` is stored as 0 and the real VAT lives on the
-  // aggregated breakdown. Surface whichever is present.
-  const explicitTax = taxAmount ? parseFloat(taxAmount) : 0;
-  const tax =
-    explicitTax > 0
-      ? explicitTax
-      : typeof taxBreakdown?.totalTax === 'number'
-        ? taxBreakdown.totalTax
-        : 0;
-
-  // When there's a per-rate breakdown, prefer per-row display ("VAT 18% ₪3.05").
-  // Otherwise show a single aggregated tax line.
-  const hasBreakdown = !!taxBreakdown?.breakdown && taxBreakdown.breakdown.length > 0;
-
-  if (hasBreakdown) {
-    return (
-      <div className={cn('space-y-1', className)}>
-        {taxBreakdown!.breakdown.map((item, index) => (
-          <div key={index} className="flex items-center justify-between text-sm">
-            <span className="text-muted-foreground">
-              {item.name} ({(item.rate * 100).toFixed(1)}%)
-            </span>
-            <span className="text-foreground font-medium">
-              {formatPrice(item.amount, { currency }) as string}
-            </span>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn('flex items-center justify-between text-sm', className)}>
-      <span className="text-muted-foreground">{tc('tax')}</span>
-      <span className="text-foreground font-medium">
-        {tax > 0 ? (formatPrice(tax, { currency }) as string) : t('noTax')}
-      </span>
-    </div>
-  );
-}
+'use client';
+
+import type { TaxBreakdown } from 'brainerce';
+import { formatPrice } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { useCurrency } from '@/core/lib/use-currency';
+import { cn } from '@/core/lib/utils';
+
+interface TaxDisplayProps {
+  /** Whether shipping address has been set */
+  addressSet: boolean;
+  /** Tax amount string from checkout (only available after address is set) */
+  taxAmount?: string;
+  /** Detailed tax breakdown (optional) */
+  taxBreakdown?: TaxBreakdown | null;
+  className?: string;
+}
+
+export function TaxDisplay({ addressSet, taxAmount, taxBreakdown, className }: TaxDisplayProps) {
+  const t = useTranslations('checkout');
+  const tc = useTranslations('common');
+  const currency = useCurrency();
+
+  // Before address is set
+  if (!addressSet) {
+    return (
+      <div className={cn('flex items-center justify-between text-sm', className)}>
+        <span className="text-muted-foreground">{tc('tax')}</span>
+        <span className="text-muted-foreground text-xs">{t('calculatedAfterAddress')}</span>
+      </div>
+    );
+  }
+
+  // Inclusive-pricing stores back the tax out of the displayed price, so
+  // `checkout.taxAmount` is stored as 0 and the real VAT lives on the
+  // aggregated breakdown. Surface whichever is present.
+  const explicitTax = taxAmount ? parseFloat(taxAmount) : 0;
+  const tax =
+    explicitTax > 0
+      ? explicitTax
+      : typeof taxBreakdown?.totalTax === 'number'
+        ? taxBreakdown.totalTax
+        : 0;
+
+  // When there's a per-rate breakdown, prefer per-row display ("VAT 18% ₪3.05").
+  // Otherwise show a single aggregated tax line.
+  const hasBreakdown = !!taxBreakdown?.breakdown && taxBreakdown.breakdown.length > 0;
+
+  if (hasBreakdown) {
+    return (
+      <div className={cn('space-y-1', className)}>
+        {taxBreakdown!.breakdown.map((item, index) => (
+          <div key={index} className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              {item.name} ({(item.rate * 100).toFixed(1)}%)
+            </span>
+            <span className="text-foreground font-medium">
+              {formatPrice(item.amount, { currency }) as string}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('flex items-center justify-between text-sm', className)}>
+      <span className="text-muted-foreground">{tc('tax')}</span>
+      <span className="text-foreground font-medium">
+        {tax > 0 ? (formatPrice(tax, { currency }) as string) : t('noTax')}
+      </span>
+    </div>
+  );
+}

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

@@ -1,59 +1,59 @@
-import type { BlogPost } from 'brainerce';
-import { buildArticleJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
-import { getNonce } from '@/core/lib/nonce';
-
-interface ArticleJsonLdProps {
-  post: BlogPost;
-  url: string;
-  /** Store display name — feeds Article.publisher (and the author fallback). */
-  organizationName?: string;
-}
-
-/**
- * Article + BreadcrumbList structured data for a blog post page.
- *
- * Uses the SDK builders for the schema shape, but renders the <script> here so
- * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
- */
-export async function ArticleJsonLd({ post, url, organizationName }: ArticleJsonLdProps) {
-  const nonce = await getNonce();
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  const articleJsonLd = buildArticleJsonLd(post, {
-    siteUrl: baseUrl,
-    path: url,
-    organizationName,
-  });
-
-  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
-    { name: 'Home', url: baseUrl || '/' },
-    { name: 'Blog', url: `${baseUrl}/blog` },
-    { name: post.title, url },
-  ]);
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(articleJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
-      />
-    </>
-  );
-}
-
-// Escape `<`, `>`, `&` so AI-generated article copy can't break out of the
-// <script> element or inject HTML.
-function serializeJsonLd(value: unknown): string {
-  return JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/>/g, '\\u003e')
-    .replace(/&/g, '\\u0026');
-}
+import type { BlogPost } from 'brainerce';
+import { buildArticleJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+
+interface ArticleJsonLdProps {
+  post: BlogPost;
+  url: string;
+  /** Store display name — feeds Article.publisher (and the author fallback). */
+  organizationName?: string;
+}
+
+/**
+ * Article + BreadcrumbList structured data for a blog post page.
+ *
+ * Uses the SDK builders for the schema shape, but renders the <script> here so
+ * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
+ */
+export async function ArticleJsonLd({ post, url, organizationName }: ArticleJsonLdProps) {
+  const nonce = await getNonce();
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const articleJsonLd = buildArticleJsonLd(post, {
+    siteUrl: baseUrl,
+    path: url,
+    organizationName,
+  });
+
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
+    { name: 'Home', url: baseUrl || '/' },
+    { name: 'Blog', url: `${baseUrl}/blog` },
+    { name: post.title, url },
+  ]);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(articleJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` so AI-generated article copy can't break out of the
+// <script> element 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/components/seo/breadcrumbs.tsx

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

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

@@ -1,61 +1,61 @@
-import type { CategoryDetail } from 'brainerce';
-import { buildCollectionPageJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
-import { getNonce } from '@/core/lib/nonce';
-
-interface CategoryJsonLdProps {
-  category: CategoryDetail;
-  url: string;
-}
-
-/**
- * CollectionPage + BreadcrumbList structured data for a category (collection)
- * landing page. NEVER emit Product markup on a listing page — Google's Product
- * rich results are single-product only (see ProductJsonLd for PDPs).
- *
- * Uses the SDK builders for the schema shape, but renders the <script> here so
- * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
- */
-export async function CategoryJsonLd({ category, url }: CategoryJsonLdProps) {
-  const nonce = await getNonce();
-  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
-
-  const collectionJsonLd = buildCollectionPageJsonLd(category, { siteUrl: baseUrl, path: url });
-
-  // Breadcrumb: Home → ancestor categories → this category.
-  const crumbs: Array<{ name: string; url: string }> = [
-    { name: 'Home', url: baseUrl || '/' },
-  ];
-  for (const ancestor of category.breadcrumb) {
-    if (ancestor.slug) {
-      crumbs.push({ name: ancestor.name, url: `${baseUrl}/category/${ancestor.slug}` });
-    }
-  }
-  crumbs.push({ name: category.name, url });
-  const breadcrumbJsonLd = buildBreadcrumbJsonLd(crumbs);
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(collectionJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
-      />
-    </>
-  );
-}
-
-// Escape `<`, `>`, `&` so merchant-authored category copy can't break out of
-// the <script> element or inject HTML.
-function serializeJsonLd(value: unknown): string {
-  return JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/>/g, '\\u003e')
-    .replace(/&/g, '\\u0026');
-}
+import type { CategoryDetail } from 'brainerce';
+import { buildCollectionPageJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+
+interface CategoryJsonLdProps {
+  category: CategoryDetail;
+  url: string;
+}
+
+/**
+ * CollectionPage + BreadcrumbList structured data for a category (collection)
+ * landing page. NEVER emit Product markup on a listing page — Google's Product
+ * rich results are single-product only (see ProductJsonLd for PDPs).
+ *
+ * Uses the SDK builders for the schema shape, but renders the <script> here so
+ * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
+ */
+export async function CategoryJsonLd({ category, url }: CategoryJsonLdProps) {
+  const nonce = await getNonce();
+  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
+
+  const collectionJsonLd = buildCollectionPageJsonLd(category, { siteUrl: baseUrl, path: url });
+
+  // Breadcrumb: Home → ancestor categories → this category.
+  const crumbs: Array<{ name: string; url: string }> = [
+    { name: 'Home', url: baseUrl || '/' },
+  ];
+  for (const ancestor of category.breadcrumb) {
+    if (ancestor.slug) {
+      crumbs.push({ name: ancestor.name, url: `${baseUrl}/category/${ancestor.slug}` });
+    }
+  }
+  crumbs.push({ name: category.name, url });
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd(crumbs);
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(collectionJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` so merchant-authored category copy can't break out of
+// the <script> element 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/components/seo/organization-json-ld.tsx

@@ -1,97 +1,97 @@
-import type { StoreInfo } from 'brainerce';
-import { getNonce } from '@/core/lib/nonce';
-import { stripHtmlForSeo } from '@/core/lib/seo';
-
-interface OrganizationJsonLdProps {
-  storeInfo: StoreInfo;
-  baseUrl: string;
-}
-
-// Emits Organization + WebSite JSON-LD on the storefront homepage.
-//
-// Why these two specifically:
-//   - Organization → feeds the Google Knowledge Panel (store name, logo,
-//     description) and is the primary signal AI Overviews / ChatGPT /
-//     Perplexity ingest when citing the store.
-//   - WebSite → enables Sitelinks Searchbox (Google) and tells crawlers
-//     the canonical site URL. The `potentialAction` block is what makes
-//     the search box appear in branded SERP results.
-export async function OrganizationJsonLd({ storeInfo, baseUrl }: OrganizationJsonLdProps) {
-  const nonce = await getNonce();
-
-  const cleanDescription = stripHtmlForSeo(storeInfo.metaDescription ?? undefined);
-  const logo =
-    typeof storeInfo.logo === 'string' && storeInfo.logo.trim() ? storeInfo.logo : undefined;
-  const contactEmail =
-    typeof storeInfo.contactEmail === 'string' && storeInfo.contactEmail.trim()
-      ? storeInfo.contactEmail.trim()
-      : undefined;
-  const contactPhone =
-    typeof storeInfo.contactPhone === 'string' && storeInfo.contactPhone.trim()
-      ? storeInfo.contactPhone.trim()
-      : undefined;
-  // sameAs is the JSON-LD property Google uses to associate a brand with its
-  // social profiles. Order doesn't matter; we just filter out empties.
-  const sameAs = storeInfo.socialLinks
-    ? Object.values(storeInfo.socialLinks).filter(
-        (url): url is string => typeof url === 'string' && url.trim().length > 0
-      )
-    : [];
-
-  const organizationJsonLd: Record<string, unknown> = {
-    '@context': 'https://schema.org',
-    '@type': 'Organization',
-    name: storeInfo.name,
-    url: baseUrl,
-    ...(logo ? { logo } : {}),
-    ...(cleanDescription ? { description: cleanDescription } : {}),
-    ...(contactEmail ? { email: contactEmail } : {}),
-    ...(contactPhone ? { telephone: contactPhone } : {}),
-    ...(sameAs.length > 0 ? { sameAs } : {}),
-  };
-
-  const websiteJsonLd: Record<string, unknown> = {
-    '@context': 'https://schema.org',
-    '@type': 'WebSite',
-    name: storeInfo.name,
-    url: baseUrl,
-    potentialAction: {
-      '@type': 'SearchAction',
-      target: {
-        // Must match the storefront's real search param — the product listing
-        // reads `?search=` (see use-product-listing.ts), not `?q=`. A wrong
-        // param makes the sitelinks search box land on an empty listing.
-        '@type': 'EntryPoint',
-        urlTemplate: `${baseUrl}/products?search={search_term_string}`,
-      },
-      'query-input': 'required name=search_term_string',
-    },
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(organizationJsonLd) }}
-      />
-      <script
-        type="application/ld+json"
-        nonce={nonce}
-        suppressHydrationWarning
-        dangerouslySetInnerHTML={{ __html: serializeJsonLd(websiteJsonLd) }}
-      />
-    </>
-  );
-}
-
-// Escape `<`, `>`, `&` to \uXXXX so seller-controlled fields can't break out
-// of the <script> with `</script>` or inject HTML. Same approach as
-// product-json-ld.tsx — keep the two in sync.
-function serializeJsonLd(value: unknown): string {
-  return JSON.stringify(value)
-    .replace(/</g, '\\u003c')
-    .replace(/>/g, '\\u003e')
-    .replace(/&/g, '\\u0026');
-}
+import type { StoreInfo } from 'brainerce';
+import { getNonce } from '@/core/lib/nonce';
+import { stripHtmlForSeo } from '@/core/lib/seo';
+
+interface OrganizationJsonLdProps {
+  storeInfo: StoreInfo;
+  baseUrl: string;
+}
+
+// Emits Organization + WebSite JSON-LD on the storefront homepage.
+//
+// Why these two specifically:
+//   - Organization → feeds the Google Knowledge Panel (store name, logo,
+//     description) and is the primary signal AI Overviews / ChatGPT /
+//     Perplexity ingest when citing the store.
+//   - WebSite → enables Sitelinks Searchbox (Google) and tells crawlers
+//     the canonical site URL. The `potentialAction` block is what makes
+//     the search box appear in branded SERP results.
+export async function OrganizationJsonLd({ storeInfo, baseUrl }: OrganizationJsonLdProps) {
+  const nonce = await getNonce();
+
+  const cleanDescription = stripHtmlForSeo(storeInfo.metaDescription ?? undefined);
+  const logo =
+    typeof storeInfo.logo === 'string' && storeInfo.logo.trim() ? storeInfo.logo : undefined;
+  const contactEmail =
+    typeof storeInfo.contactEmail === 'string' && storeInfo.contactEmail.trim()
+      ? storeInfo.contactEmail.trim()
+      : undefined;
+  const contactPhone =
+    typeof storeInfo.contactPhone === 'string' && storeInfo.contactPhone.trim()
+      ? storeInfo.contactPhone.trim()
+      : undefined;
+  // sameAs is the JSON-LD property Google uses to associate a brand with its
+  // social profiles. Order doesn't matter; we just filter out empties.
+  const sameAs = storeInfo.socialLinks
+    ? Object.values(storeInfo.socialLinks).filter(
+        (url): url is string => typeof url === 'string' && url.trim().length > 0
+      )
+    : [];
+
+  const organizationJsonLd: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'Organization',
+    name: storeInfo.name,
+    url: baseUrl,
+    ...(logo ? { logo } : {}),
+    ...(cleanDescription ? { description: cleanDescription } : {}),
+    ...(contactEmail ? { email: contactEmail } : {}),
+    ...(contactPhone ? { telephone: contactPhone } : {}),
+    ...(sameAs.length > 0 ? { sameAs } : {}),
+  };
+
+  const websiteJsonLd: Record<string, unknown> = {
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: storeInfo.name,
+    url: baseUrl,
+    potentialAction: {
+      '@type': 'SearchAction',
+      target: {
+        // Must match the storefront's real search param — the product listing
+        // reads `?search=` (see use-product-listing.ts), not `?q=`. A wrong
+        // param makes the sitelinks search box land on an empty listing.
+        '@type': 'EntryPoint',
+        urlTemplate: `${baseUrl}/products?search={search_term_string}`,
+      },
+      'query-input': 'required name=search_term_string',
+    },
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(organizationJsonLd) }}
+      />
+      <script
+        type="application/ld+json"
+        nonce={nonce}
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: serializeJsonLd(websiteJsonLd) }}
+      />
+    </>
+  );
+}
+
+// Escape `<`, `>`, `&` to \uXXXX so seller-controlled fields can't break out
+// of the <script> with `</script>` or inject HTML. Same approach as
+// product-json-ld.tsx — keep the two in sync.
+function serializeJsonLd(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    .replace(/&/g, '\\u0026');
+}