create-brainerce-store 1.84.0 → 1.86.0

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

@@ -0,0 +1,18 @@
+'use client';
+
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { resolveStoreName } from '@/core/lib/store-name';
+
+/**
+ * Client twin of `resolveStoreName()` — the one call for "what is this store
+ * called?" inside `'use client'` components, exactly as `useCurrency()` is
+ * for the currency code. Live `storeInfo.name` wins; the build-time
+ * `NEXT_PUBLIC_STORE_NAME` and then the scaffold literal fill in before the
+ * provider has resolved. See `store-name.ts` for the chain.
+ *
+ * @param override pass when the caller already has a more specific name.
+ */
+export function useStoreName(override?: string | null): string {
+  const { storeInfo } = useStoreInfo();
+  return resolveStoreName(storeInfo, override);
+}

package/templates/nextjs/base/src/ui/home/hero-section.tsx

@@ -1,27 +1,27 @@
-'use client';
-
-import { Link } from '@/core/lib/navigation';
-import { useTranslations } from '@/core/lib/translations';
-import { Button } from '@/components/ui/button';
-
-/** Homepage hero: welcome headline, subtitle, and shop-now CTA. */
-export function HeroSection({ storeName }: { storeName?: string | null }) {
-  const t = useTranslations('home');
-  const tc = useTranslations('common');
-
-  return (
-    <section className="bg-muted">
-      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
-        <h1 className="text-foreground text-4xl font-bold tracking-tight sm:text-5xl">
-          {t('welcomeTo')} {storeName || tc('store')}
-        </h1>
-        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
-          {t('heroSubtitle')}
-        </p>
-        <Button asChild size="lg" className="mt-8 rounded px-6 text-base">
-          <Link href="/products">{tc('shopNow')}</Link>
-        </Button>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+import { Link } from '@/core/lib/navigation';
+import { useTranslations } from '@/core/lib/translations';
+import { Button } from '@/components/ui/button';
+
+/** Homepage hero: welcome headline, subtitle, and shop-now CTA. */
+export function HeroSection({ storeName }: { storeName?: string | null }) {
+  const t = useTranslations('home');
+  const tc = useTranslations('common');
+
+  return (
+    <section className="bg-muted">
+      <div className="mx-auto max-w-7xl px-4 py-20 text-center sm:px-6 lg:px-8">
+        <h1 className="text-foreground text-4xl font-bold ltr:tracking-tight sm:text-5xl">
+          {t('welcomeTo')} {storeName || tc('store')}
+        </h1>
+        <p className="text-muted-foreground mx-auto mt-4 max-w-2xl text-lg">
+          {t('heroSubtitle')}
+        </p>
+        <Button asChild size="lg" className="mt-8 rounded px-6 text-base">
+          <Link href="/products">{tc('shopNow')}</Link>
+        </Button>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/base/src/ui/layout/header-search.tsx

@@ -205,7 +205,7 @@ export function HeaderSearch({ className }: HeaderSearchProps) {
                   {index === 0 && productCount > 0 && (
                     <li
                       role="presentation"
-                      className="text-muted-foreground px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide"
+                      className="text-muted-foreground px-4 pb-1 pt-2 text-[11px] font-semibold ltr:uppercase ltr:tracking-wide"
                     >
                       {tp('pageTitle')}
                     </li>
@@ -213,7 +213,7 @@ export function HeaderSearch({ className }: HeaderSearchProps) {
                   {index === productCount && option.kind === 'category' && (
                     <li
                       role="presentation"
-                      className="text-muted-foreground px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide"
+                      className="text-muted-foreground px-4 pb-1 pt-2 text-[11px] font-semibold ltr:uppercase ltr:tracking-wide"
                     >
                       {t('categories')}
                     </li>

package/templates/nextjs/base/src/ui/layout/site-footer.tsx.ejs

@@ -1,160 +1,160 @@
-/**
- * Storefront footer — fully driven by the merchant's dashboard configuration.
- *
- * The merchant configures the footer in the Brainerce dashboard under
- *   Sell → Content → Footer
- *
- * Renders a brand block (store-name + social icons), the merchant's link
- * columns, and a copyright bar. Social icons come from lucide-react where
- * available; X (Twitter) and TikTok have no lucide glyph, so those two stay
- * as local inline SVGs. Unknown platforms fall back to a letter avatar.
- *
- * API contract:
- *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
- *   Returns null on 404 — we render a minimal fallback so the layout never
- *   crashes when the merchant hasn't seeded the footer yet.
- */
-import * as React from 'react';
-import { Facebook, Instagram, Linkedin, Youtube } from 'lucide-react';
-import type { Content } from 'brainerce';
-// Locale-aware Link (client component — fine to render from this server
-// component). Merchant-configured link columns keep plain <a> since their
-// URLs are arbitrary (may be external).
-import { Link } from '@/core/lib/navigation';
-// Client component — the signup posts from the browser, which is also what
-// satisfies the endpoint's browser-Origin requirement.
-import { NewsletterSignup } from './newsletter-signup';
-
-interface SiteFooterProps {
-  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
-  footer: Content<'FOOTER'> | null;
-  /** Store name shown in the brand block + fallback copyright. */
-  storeName?: string;
-}
-
-type SvgComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
-
-// No lucide equivalent — keep as local SVGs.
-const XIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-  </svg>
-);
-
-const TikTokIcon: SvgComponent = (props) => (
-  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
-    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z" />
-  </svg>
-);
-
-const SOCIAL_ICONS: Record<string, SvgComponent> = {
-  instagram: Instagram,
-  facebook: Facebook,
-  x: XIcon,
-  twitter: XIcon,
-  linkedin: Linkedin,
-  youtube: Youtube,
-  tiktok: TikTokIcon,
-};
-
-export function SiteFooter({ footer, storeName }: SiteFooterProps) {
-  const data = footer?.data;
-  const columns = data?.columns ?? [];
-  const social = data?.social ?? [];
-  const year = new Date().getFullYear();
-  const brandLabel = storeName ?? 'Store';
-
-  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
-    return (
-      <footer className="border-border bg-muted/30 text-muted-foreground mt-16 border-t py-8 text-sm">
-        <div className="mx-auto max-w-7xl space-y-6 px-4 text-center sm:px-6 lg:px-8">
-          <div className="mx-auto max-w-md text-start">
-            <NewsletterSignup />
-          </div>
-          <div>© {year} {brandLabel}. All rights reserved.</div>
-        </div>
-      </footer>
-    );
-  }
-
-  return (
-    <footer className="border-border bg-muted/30 mt-16 border-t">
-      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
-          <div className="md:col-span-4">
-            <Link
-              href="/"
-              className="text-foreground text-lg font-semibold tracking-tight"
-            >
-              {brandLabel}
-            </Link>
-            {social.length > 0 ? (
-              <div className="mt-4 flex flex-wrap items-center gap-2">
-                {social.map((entry, idx) => {
-                  const key = entry.platform.toLowerCase();
-                  const Icon = SOCIAL_ICONS[key];
-                  return (
-                    <a
-                      key={`${entry.platform}-${idx}`}
-                      href={entry.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      aria-label={entry.platform}
-                      className="border-border hover:border-foreground/40 hover:text-foreground text-muted-foreground inline-flex h-9 w-9 items-center justify-center rounded-full border transition-colors"
-                    >
-                      {Icon ? (
-                        <Icon className="h-4 w-4" />
-                      ) : (
-                        <span className="text-xs font-medium uppercase">
-                          {entry.platform.charAt(0)}
-                        </span>
-                      )}
-                    </a>
-                  );
-                })}
-              </div>
-            ) : null}
-
-            {/*
-              Newsletter signup. Remove this block if the merchant does not want
-              a mailing list — nothing else depends on it. Confirmed opt-in: the
-              address is not subscribed until the recipient clicks the link they
-              are mailed, which is why the success copy says "check your email".
-            */}
-            <div className="mt-8">
-              <NewsletterSignup />
-            </div>
-          </div>
-
-          {columns.length > 0 ? (
-            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
-              {columns.map((col, idx) => (
-                <div key={`${col.title}-${idx}`}>
-                  <h3 className="text-foreground mb-3 text-sm font-semibold tracking-wide">
-                    {col.title}
-                  </h3>
-                  <ul className="space-y-2">
-                    {col.links.map((link, linkIdx) => (
-                      <li key={`${link.url}-${linkIdx}`}>
-                        <a
-                          href={link.url}
-                          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                        >
-                          {link.label}
-                        </a>
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          ) : null}
-        </div>
-
-        <div className="border-border text-muted-foreground mt-10 flex flex-col items-center justify-between gap-2 border-t pt-6 text-xs sm:flex-row">
-          <span>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</span>
-        </div>
-      </div>
-    </footer>
-  );
-}
+/**
+ * Storefront footer — fully driven by the merchant's dashboard configuration.
+ *
+ * The merchant configures the footer in the Brainerce dashboard under
+ *   Sell → Content → Footer
+ *
+ * Renders a brand block (store-name + social icons), the merchant's link
+ * columns, and a copyright bar. Social icons come from lucide-react where
+ * available; X (Twitter) and TikTok have no lucide glyph, so those two stay
+ * as local inline SVGs. Unknown platforms fall back to a letter avatar.
+ *
+ * API contract:
+ *   GET → client.content.footer.get('main', locale) → Content<'FOOTER'> | null
+ *   Returns null on 404 — we render a minimal fallback so the layout never
+ *   crashes when the merchant hasn't seeded the footer yet.
+ */
+import * as React from 'react';
+import { Facebook, Instagram, Linkedin, Youtube } from 'lucide-react';
+import type { Content } from 'brainerce';
+// Locale-aware Link (client component — fine to render from this server
+// component). Merchant-configured link columns keep plain <a> since their
+// URLs are arbitrary (may be external).
+import { Link } from '@/core/lib/navigation';
+// Client component — the signup posts from the browser, which is also what
+// satisfies the endpoint's browser-Origin requirement.
+import { NewsletterSignup } from './newsletter-signup';
+
+interface SiteFooterProps {
+  /** Pre-fetched footer payload (server-side). `null` triggers fallback rendering. */
+  footer: Content<'FOOTER'> | null;
+  /** Store name shown in the brand block + fallback copyright. */
+  storeName?: string;
+}
+
+type SvgComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
+// No lucide equivalent — keep as local SVGs.
+const XIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+  </svg>
+);
+
+const TikTokIcon: SvgComponent = (props) => (
+  <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z" />
+  </svg>
+);
+
+const SOCIAL_ICONS: Record<string, SvgComponent> = {
+  instagram: Instagram,
+  facebook: Facebook,
+  x: XIcon,
+  twitter: XIcon,
+  linkedin: Linkedin,
+  youtube: Youtube,
+  tiktok: TikTokIcon,
+};
+
+export function SiteFooter({ footer, storeName }: SiteFooterProps) {
+  const data = footer?.data;
+  const columns = data?.columns ?? [];
+  const social = data?.social ?? [];
+  const year = new Date().getFullYear();
+  const brandLabel = storeName ?? 'Store';
+
+  if (!data || (columns.length === 0 && !data.copyright && social.length === 0)) {
+    return (
+      <footer className="border-border bg-muted/30 text-muted-foreground mt-16 border-t py-8 text-sm">
+        <div className="mx-auto max-w-7xl space-y-6 px-4 text-center sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-md text-start">
+            <NewsletterSignup />
+          </div>
+          <div>© {year} {brandLabel}. All rights reserved.</div>
+        </div>
+      </footer>
+    );
+  }
+
+  return (
+    <footer className="border-border bg-muted/30 mt-16 border-t">
+      <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 gap-10 md:grid-cols-12">
+          <div className="md:col-span-4">
+            <Link
+              href="/"
+              className="text-foreground text-lg font-semibold ltr:tracking-tight"
+            >
+              {brandLabel}
+            </Link>
+            {social.length > 0 ? (
+              <div className="mt-4 flex flex-wrap items-center gap-2">
+                {social.map((entry, idx) => {
+                  const key = entry.platform.toLowerCase();
+                  const Icon = SOCIAL_ICONS[key];
+                  return (
+                    <a
+                      key={`${entry.platform}-${idx}`}
+                      href={entry.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      aria-label={entry.platform}
+                      className="border-border hover:border-foreground/40 hover:text-foreground text-muted-foreground inline-flex h-9 w-9 items-center justify-center rounded-full border transition-colors"
+                    >
+                      {Icon ? (
+                        <Icon className="h-4 w-4" />
+                      ) : (
+                        <span className="text-xs font-medium uppercase">
+                          {entry.platform.charAt(0)}
+                        </span>
+                      )}
+                    </a>
+                  );
+                })}
+              </div>
+            ) : null}
+
+            {/*
+              Newsletter signup. Remove this block if the merchant does not want
+              a mailing list — nothing else depends on it. Confirmed opt-in: the
+              address is not subscribed until the recipient clicks the link they
+              are mailed, which is why the success copy says "check your email".
+            */}
+            <div className="mt-8">
+              <NewsletterSignup />
+            </div>
+          </div>
+
+          {columns.length > 0 ? (
+            <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:col-span-8">
+              {columns.map((col, idx) => (
+                <div key={`${col.title}-${idx}`}>
+                  <h3 className="text-foreground mb-3 text-sm font-semibold ltr:tracking-wide">
+                    {col.title}
+                  </h3>
+                  <ul className="space-y-2">
+                    {col.links.map((link, linkIdx) => (
+                      <li key={`${link.url}-${linkIdx}`}>
+                        <a
+                          href={link.url}
+                          className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                        >
+                          {link.label}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <div className="border-border text-muted-foreground mt-10 flex flex-col items-center justify-between gap-2 border-t pt-6 text-xs sm:flex-row">
+          <span>{data.copyright ?? `© ${year} ${brandLabel}. All rights reserved.`}</span>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/templates/nextjs/base/src/ui/layout/site-header.tsx.ejs

@@ -53,7 +53,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
     return (
       <header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-40 border-b backdrop-blur">
         <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
-          <Link href="/" className="text-lg font-semibold tracking-tight" aria-label={brandLabel}>
+          <Link href="/" className="text-lg font-semibold ltr:tracking-tight" aria-label={brandLabel}>
             {brandLabel}
           </Link>
           {/* Search lives in the fallback branch too — a store whose merchant
@@ -88,7 +88,7 @@ export function SiteHeader({ header, storeName }: SiteHeaderProps) {
       <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
         <Link
           href="/"
-          className="flex items-center gap-2 font-semibold tracking-tight"
+          className="flex items-center gap-2 font-semibold ltr:tracking-tight"
           aria-label={brandLabel}
         >
           {logo ? (

package/templates/nextjs/base/src/ui/product/price-display.tsx

@@ -1,62 +1,85 @@
-'use client';
-
-import { formatPrice } from 'brainerce';
-import { Badge } from '@/components/ui/badge';
-import { useCurrency } from '@/core/lib/use-currency';
-import { cn } from '@/core/lib/utils';
-
-interface PriceDisplayProps {
-  price: string | number;
-  salePrice?: string | number | null;
-  currency?: string;
-  className?: string;
-  size?: 'sm' | 'md' | 'lg';
-}
-
-const sizeClasses = {
-  sm: 'text-sm',
-  md: 'text-base',
-  lg: 'text-xl font-semibold',
-};
-
-export function PriceDisplay({
-  price,
-  salePrice,
-  currency,
-  className,
-  size = 'md',
-}: PriceDisplayProps) {
-  const currencyCode = useCurrency(currency);
-
-  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
-  const sale =
-    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
-  const isOnSale = sale !== null && sale < basePrice;
-
-  const discountPercent =
-    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
-
-  return (
-    <span className={cn('inline-flex items-center gap-2', sizeClasses[size], className)}>
-      {isOnSale ? (
-        <>
-          <span className="text-destructive font-medium">
-            {formatPrice(sale!, { currency: currencyCode }) as string}
-          </span>
-          <span className="text-muted-foreground text-[0.85em] line-through">
-            {formatPrice(basePrice, { currency: currencyCode }) as string}
-          </span>
-          {discountPercent > 0 && (
-            <Badge variant="destructive" className="rounded px-1.5 py-0.5 font-medium">
-              -{discountPercent}%
-            </Badge>
-          )}
-        </>
-      ) : (
-        <span className="text-foreground font-medium">
-          {formatPrice(basePrice, { currency: currencyCode }) as string}
-        </span>
-      )}
-    </span>
-  );
-}
+'use client';
+
+import { formatPrice } from 'brainerce';
+import { Badge } from '@/components/ui/badge';
+import { useCurrency } from '@/core/lib/use-currency';
+import { useTranslations } from '@/core/lib/translations';
+import { useStoreInfo } from '@/core/providers/store-provider';
+import { cn } from '@/core/lib/utils';
+
+interface PriceDisplayProps {
+  price: string | number;
+  salePrice?: string | number | null;
+  currency?: string;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const sizeClasses = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-xl font-semibold',
+};
+
+export function PriceDisplay({
+  price,
+  salePrice,
+  currency,
+  className,
+  size = 'md',
+}: PriceDisplayProps) {
+  const currencyCode = useCurrency(currency);
+  const { storeInfo } = useStoreInfo();
+  const t = useTranslations('common');
+
+  const basePrice = typeof price === 'string' ? parseFloat(price) : price;
+  const sale =
+    salePrice != null ? (typeof salePrice === 'string' ? parseFloat(salePrice) : salePrice) : null;
+  const isOnSale = sale !== null && sale < basePrice;
+
+  const discountPercent =
+    isOnSale && basePrice > 0 ? Math.round(((basePrice - sale!) / basePrice) * 100) : 0;
+
+  // FX overlay disclosure (see core/lib/display-price.ts): `currency` is the
+  // region-converted DISPLAY currency when it differs from the store's own
+  // base currency. The shopper is still charged in the base currency at
+  // checkout, so every converted price needs a visible "estimated" cue —
+  // otherwise nothing on screen explains why the cart/checkout total switches
+  // currency from what was just browsed.
+  const isConverted = !!currency && !!storeInfo?.currency && currency !== storeInfo.currency;
+
+  return (
+    <span className={cn('inline-flex flex-wrap items-center gap-2', sizeClasses[size], className)}>
+      {isOnSale ? (
+        <>
+          <span className="text-destructive font-medium">
+            {formatPrice(sale!, { currency: currencyCode }) as string}
+          </span>
+          <span className="text-muted-foreground text-[0.85em] line-through">
+            {formatPrice(basePrice, { currency: currencyCode }) as string}
+          </span>
+          {discountPercent > 0 && (
+            <Badge variant="destructive" className="rounded px-1.5 py-0.5 font-medium">
+              -{discountPercent}%
+            </Badge>
+          )}
+        </>
+      ) : (
+        <span className="text-foreground font-medium">
+          {formatPrice(basePrice, { currency: currencyCode }) as string}
+        </span>
+      )}
+      {isConverted && (
+        <span
+          className="text-muted-foreground cursor-help text-[0.7em] font-normal underline decoration-dotted"
+          title={t('estimatedPriceTooltip', {
+            currency: currencyCode,
+            baseCurrency: storeInfo!.currency,
+          })}
+        >
+          {t('estimatedPrice')}
+        </span>
+      )}
+    </span>
+  );
+}