create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/designs/atelier/ui/home/testimonials-band.tsx

@@ -1,46 +1,46 @@
-'use client';
-
-/** Testimonials band — three quote cards, copy from translation keys. */
-import { useTranslations } from '@/core/lib/translations';
-import { IconStar, IconQuote } from '@/ui/shared/icons';
-
-const TESTIMONIALS = [1, 2, 3] as const;
-
-export function TestimonialsBand() {
-  const t = useTranslations('home');
-
-  return (
-    <section className="section-pad wash-sand">
-      <div className="container-page">
-        <div className="mb-8 max-w-xl lg:mb-10">
-          <span className="eyebrow">{t('testimonialsEyebrow')}</span>
-          <h2 className="text-4xl sm:text-5xl">{t('testimonialsTitle')}</h2>
-        </div>
-
-        <ul className="grid gap-4 sm:gap-6 lg:grid-cols-3">
-          {TESTIMONIALS.map((n) => (
-            <li key={n}>
-              <figure className={`card card-hover flex h-full flex-col gap-4 p-6 ${n === 2 ? 'lg:rotate-1' : 'lg:-rotate-1'} lg:hover:rotate-0`}>
-                <span className="text-primary/30" aria-hidden="true">
-                  <IconQuote size={28} />
-                </span>
-                <span className="inline-flex text-primary" aria-label="5/5">
-                  {[1, 2, 3, 4, 5].map((s) => (
-                    <IconStar key={s} size={16} filled />
-                  ))}
-                </span>
-                <blockquote className="flex-1 leading-7 text-foreground">
-                  “{t(`testimonial${n}Quote`)}”
-                </blockquote>
-                <figcaption className="border-t pt-4 text-sm">
-                  <span className="font-semibold text-foreground">{t(`testimonial${n}Name`)}</span>
-                  <span className="text-muted-foreground"> · {t(`testimonial${n}Meta`)}</span>
-                </figcaption>
-              </figure>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </section>
-  );
-}
+'use client';
+
+/** Testimonials band — three quote cards, copy from translation keys. */
+import { useTranslations } from '@/core/lib/translations';
+import { IconStar, IconQuote } from '@/ui/shared/icons';
+
+const TESTIMONIALS = [1, 2, 3] as const;
+
+export function TestimonialsBand() {
+  const t = useTranslations('home');
+
+  return (
+    <section className="section-pad wash-sand">
+      <div className="container-page">
+        <div className="mb-8 max-w-xl lg:mb-10">
+          <span className="eyebrow">{t('testimonialsEyebrow')}</span>
+          <h2 className="text-4xl sm:text-5xl">{t('testimonialsTitle')}</h2>
+        </div>
+
+        <ul className="grid gap-4 sm:gap-6 lg:grid-cols-3">
+          {TESTIMONIALS.map((n) => (
+            <li key={n}>
+              <figure className={`card card-hover flex h-full flex-col gap-4 p-6 ${n === 2 ? 'lg:rotate-1' : 'lg:-rotate-1'} lg:hover:rotate-0`}>
+                <span className="text-primary/30" aria-hidden="true">
+                  <IconQuote size={28} />
+                </span>
+                <span className="inline-flex text-primary" aria-label="5/5">
+                  {[1, 2, 3, 4, 5].map((s) => (
+                    <IconStar key={s} size={16} filled />
+                  ))}
+                </span>
+                <blockquote className="flex-1 leading-7 text-foreground">
+                  “{t(`testimonial${n}Quote`)}”
+                </blockquote>
+                <figcaption className="border-t pt-4 text-sm">
+                  <span className="font-semibold text-foreground">{t(`testimonial${n}Name`)}</span>
+                  <span className="text-muted-foreground"> · {t(`testimonial${n}Meta`)}</span>
+                </figcaption>
+              </figure>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/announcement-bar.tsx

@@ -1,118 +1,118 @@
-/**
- * Storefront announcement bar — fully driven by the merchant's dashboard.
- *
- * The merchant configures announcements in the Brainerce dashboard under
- *   Sell → Content → Announcement
- *
- * Rendering adapts automatically to any announcement shape returned by the
- * API — never hardcode the message or severity here.
- *
- * API contract:
- *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
- *   Empty array → renders nothing (page layout stays intact).
- *
- * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
- * timestamps. We filter client-side so the cached server response can be
- * shared across visitors regardless of the current time.
- *
- * Tone by `data.severity`: info/success ride the forest brand band;
- * warning switches to the destructive tone so it reads as urgent.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { IconX } from '@/ui/shared/icons';
-
-interface AnnouncementBarProps {
-  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
-  announcements: Content<'ANNOUNCEMENT'>[];
-}
-
-const STORAGE_KEY = 'brainerce_dismissed_announcements';
-
-export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
-  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
-
-  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
-  React.useEffect(() => {
-    if (typeof window === 'undefined') return;
-    try {
-      const raw = window.localStorage.getItem(STORAGE_KEY);
-      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
-    } catch {
-      // ignore malformed storage
-    }
-  }, []);
-
-  const dismiss = (id: string) => {
-    setDismissed((prev) => {
-      const next = new Set(prev);
-      next.add(id);
-      if (typeof window !== 'undefined') {
-        try {
-          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
-        } catch {
-          // ignore quota errors
-        }
-      }
-      return next;
-    });
-  };
-
-  const now = Date.now();
-  const visible = announcements.filter((a) => {
-    if (dismissed.has(a.id)) return false;
-    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
-    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
-    return startOk && endOk;
-  });
-
-  if (visible.length === 0) return null;
-
-  return (
-    <div role="region" aria-label="Site announcements">
-      {visible.map((announcement) => {
-        const isWarning = announcement.data.severity === 'warning';
-        return (
-          <div
-            key={announcement.id}
-            data-severity={announcement.data.severity}
-            className={
-              isWarning
-                ? 'bg-destructive text-destructive-foreground'
-                : 'bg-primary text-primary-foreground'
-            }
-          >
-            <div className="container-page flex min-h-9 items-center justify-center gap-3 py-1.5 text-center text-[13px] font-medium">
-              <span>
-                {announcement.data.message}
-                {announcement.data.ctaHref && announcement.data.ctaLabel ? (
-                  <>
-                    {' '}
-                    <a
-                      href={announcement.data.ctaHref}
-                      className="underline underline-offset-2 hover:opacity-80"
-                    >
-                      {announcement.data.ctaLabel}
-                    </a>
-                  </>
-                ) : null}
-              </span>
-              {announcement.data.dismissible ? (
-                <button
-                  type="button"
-                  onClick={() => dismiss(announcement.id)}
-                  aria-label="Dismiss announcement"
-                  className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-primary-foreground/15"
-                >
-                  <IconX size={16} />
-                </button>
-              ) : null}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
+/**
+ * Storefront announcement bar — fully driven by the merchant's dashboard.
+ *
+ * The merchant configures announcements in the Brainerce dashboard under
+ *   Sell → Content → Announcement
+ *
+ * Rendering adapts automatically to any announcement shape returned by the
+ * API — never hardcode the message or severity here.
+ *
+ * API contract:
+ *   GET → client.content.announcement.list(locale) → Content<'ANNOUNCEMENT'>[]
+ *   Empty array → renders nothing (page layout stays intact).
+ *
+ * Time-bounded: each announcement may have `startsAt` / `endsAt` ISO
+ * timestamps. We filter client-side so the cached server response can be
+ * shared across visitors regardless of the current time.
+ *
+ * Tone by `data.severity`: info/success ride the forest brand band;
+ * warning switches to the destructive tone so it reads as urgent.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { IconX } from '@/ui/shared/icons';
+
+interface AnnouncementBarProps {
+  /** Pre-fetched list from the server. Pass `[]` to render nothing. */
+  announcements: Content<'ANNOUNCEMENT'>[];
+}
+
+const STORAGE_KEY = 'brainerce_dismissed_announcements';
+
+export function AnnouncementBar({ announcements }: AnnouncementBarProps) {
+  const [dismissed, setDismissed] = React.useState<Set<string>>(() => new Set());
+
+  // Hydrate dismissals from localStorage on mount (avoids SSR/CSR mismatch).
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return;
+    try {
+      const raw = window.localStorage.getItem(STORAGE_KEY);
+      if (raw) setDismissed(new Set(JSON.parse(raw) as string[]));
+    } catch {
+      // ignore malformed storage
+    }
+  }, []);
+
+  const dismiss = (id: string) => {
+    setDismissed((prev) => {
+      const next = new Set(prev);
+      next.add(id);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(STORAGE_KEY, JSON.stringify([...next]));
+        } catch {
+          // ignore quota errors
+        }
+      }
+      return next;
+    });
+  };
+
+  const now = Date.now();
+  const visible = announcements.filter((a) => {
+    if (dismissed.has(a.id)) return false;
+    const startOk = !a.data.startsAt || new Date(a.data.startsAt).getTime() <= now;
+    const endOk = !a.data.endsAt || new Date(a.data.endsAt).getTime() >= now;
+    return startOk && endOk;
+  });
+
+  if (visible.length === 0) return null;
+
+  return (
+    <div role="region" aria-label="Site announcements">
+      {visible.map((announcement) => {
+        const isWarning = announcement.data.severity === 'warning';
+        return (
+          <div
+            key={announcement.id}
+            data-severity={announcement.data.severity}
+            className={
+              isWarning
+                ? 'bg-destructive text-destructive-foreground'
+                : 'bg-primary text-primary-foreground'
+            }
+          >
+            <div className="container-page flex min-h-9 items-center justify-center gap-3 py-1.5 text-center text-[13px] font-medium">
+              <span>
+                {announcement.data.message}
+                {announcement.data.ctaHref && announcement.data.ctaLabel ? (
+                  <>
+                    {' '}
+                    <a
+                      href={announcement.data.ctaHref}
+                      className="underline underline-offset-2 hover:opacity-80"
+                    >
+                      {announcement.data.ctaLabel}
+                    </a>
+                  </>
+                ) : null}
+              </span>
+              {announcement.data.dismissible ? (
+                <button
+                  type="button"
+                  onClick={() => dismiss(announcement.id)}
+                  aria-label="Dismiss announcement"
+                  className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-primary-foreground/15"
+                >
+                  <IconX size={16} />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/faq-section.tsx

@@ -1,96 +1,96 @@
-/**
- * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
- * configuration.
- *
- * The merchant configures FAQs in the Brainerce dashboard under
- *   Sell → Content → FAQ
- *
- * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
- * pre-fetched payload as `faq`; this component knows nothing about which
- * key it came from.
- *
- * Two render branches:
- *   1. `faq` has items → accordion of question/answer pairs
- *   2. `faq` is null OR has no items → friendly empty state with a contact
- *      CTA, so the /faq page never looks broken before the merchant seeds.
- *
- * Security: FAQ answers may contain merchant-authored HTML — we sanitize
- * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-
-interface FaqSectionProps {
-  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
-  faq: Content<'FAQ'> | null;
-}
-
-export function FaqSection({ faq }: FaqSectionProps) {
-  const t = useTranslations('content');
-
-  const items = faq?.data?.items ?? [];
-  const heading = faq?.name || t('faqTitle');
-
-  // Empty state — runs when the merchant hasn't created a FAQ row yet,
-  // or the row exists but contains no items.
-  if (!faq || items.length === 0) {
-    return (
-      <section className="container-page py-16 lg:py-24">
-        <div className="card mx-auto flex max-w-lg flex-col items-center gap-3 px-8 py-14 text-center">
-          <h1 className="text-3xl">{heading}</h1>
-          <p className="text-muted-foreground">
-            <strong className="mb-1 block font-semibold text-foreground">
-              {t('faqEmptyTitle')}
-            </strong>
-            {t('faqEmptyBody')}
-          </p>
-          <a href="/contact" className="btn-primary btn-md mt-3">
-            {t('faqContactCta')}
-          </a>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className="container-page max-w-3xl py-14 lg:py-20">
-      <h1 className="mb-8 text-center text-3xl sm:text-4xl">{heading}</h1>
-      <ul className="space-y-3">
-        {items.map((item, idx) => (
-          <li key={idx}>
-            <details open={idx === 0} className="group card overflow-hidden">
-              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-sans text-[15px] font-semibold text-foreground transition-colors hover:bg-secondary/60 [&::-webkit-details-marker]:hidden">
-                {item.question}
-                <span
-                  aria-hidden="true"
-                  className="shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
-                >
-                  <svg
-                    width="20"
-                    height="20"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.75"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  >
-                    <path d="m6 9 6 6 6-6" />
-                  </svg>
-                </span>
-              </summary>
-              <div
-                className="prose-store border-t px-5 py-4"
-                dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
-              />
-            </details>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
+/**
+ * FAQ accordion (bare skeleton) — fully driven by the merchant's dashboard
+ * configuration.
+ *
+ * The merchant configures FAQs in the Brainerce dashboard under
+ *   Sell → Content → FAQ
+ *
+ * Each FAQ row has a `key` (e.g. 'main', 'shipping', 'returns'). Pass the
+ * pre-fetched payload as `faq`; this component knows nothing about which
+ * key it came from.
+ *
+ * Two render branches:
+ *   1. `faq` has items → accordion of question/answer pairs
+ *   2. `faq` is null OR has no items → friendly empty state with a contact
+ *      CTA, so the /faq page never looks broken before the merchant seeds.
+ *
+ * Security: FAQ answers may contain merchant-authored HTML — we sanitize
+ * via `sanitizeHtml` before injecting via dangerouslySetInnerHTML.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+
+interface FaqSectionProps {
+  /** Pre-fetched FAQ row. `null` renders the empty-state fallback. */
+  faq: Content<'FAQ'> | null;
+}
+
+export function FaqSection({ faq }: FaqSectionProps) {
+  const t = useTranslations('content');
+
+  const items = faq?.data?.items ?? [];
+  const heading = faq?.name || t('faqTitle');
+
+  // Empty state — runs when the merchant hasn't created a FAQ row yet,
+  // or the row exists but contains no items.
+  if (!faq || items.length === 0) {
+    return (
+      <section className="container-page py-16 lg:py-24">
+        <div className="card mx-auto flex max-w-lg flex-col items-center gap-3 px-8 py-14 text-center">
+          <h1 className="text-3xl">{heading}</h1>
+          <p className="text-muted-foreground">
+            <strong className="mb-1 block font-semibold text-foreground">
+              {t('faqEmptyTitle')}
+            </strong>
+            {t('faqEmptyBody')}
+          </p>
+          <a href="/contact" className="btn-primary btn-md mt-3">
+            {t('faqContactCta')}
+          </a>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="container-page max-w-3xl py-14 lg:py-20">
+      <h1 className="mb-8 text-center text-3xl sm:text-4xl">{heading}</h1>
+      <ul className="space-y-3">
+        {items.map((item, idx) => (
+          <li key={idx}>
+            <details open={idx === 0} className="group card overflow-hidden">
+              <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-5 py-4 font-sans text-[15px] font-semibold text-foreground transition-colors hover:bg-secondary/60 [&::-webkit-details-marker]:hidden">
+                {item.question}
+                <span
+                  aria-hidden="true"
+                  className="shrink-0 text-muted-foreground transition-transform duration-200 group-open:rotate-180"
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.75"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                </span>
+              </summary>
+              <div
+                className="prose-store border-t px-5 py-4"
+                dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }}
+              />
+            </details>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/templates/nextjs/designs/atelier/ui/layout/header-account.tsx

@@ -1,36 +1,36 @@
-'use client';
-
-/**
- * Auth-aware account control for the site header.
- *
- * The header itself is a server component fed by merchant-configured Content,
- * so it can't read client auth state. This small client island bridges that:
- * it links to `/account` when the visitor is signed in (the account page shows
- * profile + orders + sign-out) and to `/login` otherwise.
- */
-import * as React from 'react';
-import { Link } from '@/core/lib/navigation';
-import { useAuth } from '@/core/providers/store-provider';
-import { useTranslations } from '@/core/lib/translations';
-import { IconUser } from '@/ui/shared/icons';
-
-export function HeaderAccount() {
-  const { isLoggedIn } = useAuth();
-  const t = useTranslations('nav');
-
-  // Guests land on /login; signed-in visitors go to /account (which itself
-  // bounces guests back to /login, so the link is safe even mid auth-resolve).
-  const href = isLoggedIn ? '/account' : '/login';
-  const label = isLoggedIn ? t('account') : t('login');
-
-  return (
-    <Link
-      href={href}
-      aria-label={label}
-      className="inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary"
-    >
-      <IconUser size={20} />
-      <span className="sr-only">{label}</span>
-    </Link>
-  );
-}
+'use client';
+
+/**
+ * Auth-aware account control for the site header.
+ *
+ * The header itself is a server component fed by merchant-configured Content,
+ * so it can't read client auth state. This small client island bridges that:
+ * it links to `/account` when the visitor is signed in (the account page shows
+ * profile + orders + sign-out) and to `/login` otherwise.
+ */
+import * as React from 'react';
+import { Link } from '@/core/lib/navigation';
+import { useAuth } from '@/core/providers/store-provider';
+import { useTranslations } from '@/core/lib/translations';
+import { IconUser } from '@/ui/shared/icons';
+
+export function HeaderAccount() {
+  const { isLoggedIn } = useAuth();
+  const t = useTranslations('nav');
+
+  // Guests land on /login; signed-in visitors go to /account (which itself
+  // bounces guests back to /login, so the link is safe even mid auth-resolve).
+  const href = isLoggedIn ? '/account' : '/login';
+  const label = isLoggedIn ? t('account') : t('login');
+
+  return (
+    <Link
+      href={href}
+      aria-label={label}
+      className="inline-flex h-10 w-10 items-center justify-center rounded-full text-foreground transition-colors hover:bg-secondary"
+    >
+      <IconUser size={20} />
+      <span className="sr-only">{label}</span>
+    </Link>
+  );
+}