create-brainerce-store 1.62.0 → 1.63.0

package/templates/nextjs/ui-canvas/layout/announcement-bar.tsx.ejs

@@ -1,101 +1,101 @@
-/**
- * Storefront announcement bar (bare skeleton) — fully driven by the
- * merchant's dashboard.
- *
- * The merchant configures announcements in the Brainerce dashboard under
- *   Sell → Content → Announcement
- *
- * Everything below is generic rendering logic — it adapts automatically to
- * any announcement shape returned by the API, so **you should not 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.
- *
- * Each announcement carries `data.severity` ('info' | 'warning' | 'success')
- * — the skeleton ignores it visually; use it to tone your design.
- */
-'use client';
-
-import * as React from 'react';
-import type { Content } from 'brainerce';
-
-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">
-      {/* DESIGN ME — announcement bar(s) at the very top of every page; data.severity + message + optional CTA come from Content<'ANNOUNCEMENT'>[] pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      {visible.map((announcement) => (
-        <div key={announcement.id} data-severity={announcement.data.severity} className="flex items-center gap-3">
-          <span>
-            {announcement.data.message}
-            {announcement.data.ctaHref && announcement.data.ctaLabel ? (
-              <>
-                {' '}
-                <a href={announcement.data.ctaHref}>{announcement.data.ctaLabel}</a>
-              </>
-            ) : null}
-          </span>
-          {announcement.data.dismissible ? (
-            <button
-              type="button"
-              onClick={() => dismiss(announcement.id)}
-              aria-label="Dismiss announcement"
-            >
-              ×
-            </button>
-          ) : null}
-        </div>
-      ))}
-    </div>
-  );
-}
+/**
+ * Storefront announcement bar (bare skeleton) — fully driven by the
+ * merchant's dashboard.
+ *
+ * The merchant configures announcements in the Brainerce dashboard under
+ *   Sell → Content → Announcement
+ *
+ * Everything below is generic rendering logic — it adapts automatically to
+ * any announcement shape returned by the API, so **you should not 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.
+ *
+ * Each announcement carries `data.severity` ('info' | 'warning' | 'success')
+ * — the skeleton ignores it visually; use it to tone your design.
+ */
+'use client';
+
+import * as React from 'react';
+import type { Content } from 'brainerce';
+
+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">
+      {/* DESIGN ME — announcement bar(s) at the very top of every page; data.severity + message + optional CTA come from Content<'ANNOUNCEMENT'>[] pre-fetched in the layout. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      {visible.map((announcement) => (
+        <div key={announcement.id} data-severity={announcement.data.severity} className="flex items-center gap-3">
+          <span>
+            {announcement.data.message}
+            {announcement.data.ctaHref && announcement.data.ctaLabel ? (
+              <>
+                {' '}
+                <a href={announcement.data.ctaHref}>{announcement.data.ctaLabel}</a>
+              </>
+            ) : null}
+          </span>
+          {announcement.data.dismissible ? (
+            <button
+              type="button"
+              onClick={() => dismiss(announcement.id)}
+              aria-label="Dismiss announcement"
+            >
+              ×
+            </button>
+          ) : null}
+        </div>
+      ))}
+    </div>
+  );
+}

package/templates/nextjs/ui-canvas/layout/faq-section.tsx.ejs

@@ -1,71 +1,71 @@
-/**
- * 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>
-        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-        <h1>{heading}</h1>
-        <p>
-          <strong>{t('faqEmptyTitle')}</strong>
-          <br />
-          {t('faqEmptyBody')}
-        </p>
-        <a href="/contact">{t('faqContactCta')}</a>
-      </section>
-    );
-  }
-
-  return (
-    <section>
-      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      <h1>{heading}</h1>
-      <ul>
-        {items.map((item, idx) => (
-          <li key={idx}>
-            <details open={idx === 0}>
-              <summary>{item.question}</summary>
-              <div 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>
+        {/* DESIGN ME — FAQ empty state: heading + contact CTA; fed by Content<'FAQ'> pre-fetched in the /faq route. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+        <h1>{heading}</h1>
+        <p>
+          <strong>{t('faqEmptyTitle')}</strong>
+          <br />
+          {t('faqEmptyBody')}
+        </p>
+        <a href="/contact">{t('faqContactCta')}</a>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      {/* DESIGN ME — FAQ accordion: question/answer pairs from Content<'FAQ'> pre-fetched in the /faq route; answers are sanitized merchant HTML. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      <h1>{heading}</h1>
+      <ul>
+        {items.map((item, idx) => (
+          <li key={idx}>
+            <details open={idx === 0}>
+              <summary>{item.question}</summary>
+              <div dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.answer) }} />
+            </details>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/templates/nextjs/ui-canvas/layout/header-account.tsx

@@ -1,31 +1,31 @@
-'use client';
-
-/**
- * Auth-aware account control for the site header (bare skeleton).
- *
- * 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';
-
-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}>
-      {/* DESIGN ME — header account link; auth state via useAuth(), label via the `nav` translation namespace. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
-      {label}
-    </Link>
-  );
-}
+'use client';
+
+/**
+ * Auth-aware account control for the site header (bare skeleton).
+ *
+ * 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';
+
+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}>
+      {/* DESIGN ME — header account link; auth state via useAuth(), label via the `nav` translation namespace. Compose with the shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons. */}
+      {label}
+    </Link>
+  );
+}

package/templates/nextjs/ui-canvas/layout/language-switcher.tsx.ejs

@@ -1,76 +1,76 @@
-<% if (i18nEnabled) { %>
-'use client';
-
-import { usePathname } from 'next/navigation';
-import { supportedLocales } from '@/i18n';
-
-const LOCALE_NAMES: Record<string, string> = {
-  en: 'English',
-  he: 'עברית',
-  ar: 'العربية',
-  es: 'Español',
-  fr: 'Français',
-  de: 'Deutsch',
-  it: 'Italiano',
-  pt: 'Português',
-  nl: 'Nederlands',
-  ja: '日本語',
-  ko: '한국어',
-  zh: '中文',
-  ru: 'Русский',
-  tr: 'Türkçe',
-  pl: 'Polski',
-  sv: 'Svenska',
-  da: 'Dansk',
-  no: 'Norsk',
-  fi: 'Suomi',
-  cs: 'Čeština',
-  th: 'ไทย',
-  vi: 'Tiếng Việt',
-};
-
-const defaultLocale = '<%= defaultLocale %>';
-
-/**
- * DESIGN ME — locale switcher in the header; reads supported locales from
- * `@/i18n` and swaps the URL prefix. Keep the aria-label and the redirect
- * logic exactly as-is.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-export function LanguageSwitcher() {
-  const pathname = usePathname();
-  const firstSeg = pathname.split('/')[1];
-  const currentLocale = supportedLocales.includes(firstSeg as (typeof supportedLocales)[number])
-    ? firstSeg
-    : defaultLocale;
-
-  function switchLocale(newLocale: string) {
-    // Strip any existing locale segment, then re-add only if the new one
-    // isn't the default — matches the as-needed prefix scheme in middleware.
-    const segments = pathname.split('/');
-    if (supportedLocales.includes(segments[1] as (typeof supportedLocales)[number])) {
-      segments.splice(1, 1);
-    }
-    const bare = segments.join('/') || '/';
-    window.location.href =
-      newLocale === defaultLocale ? bare : `/${newLocale}${bare === '/' ? '' : bare}`;
-  }
-
-  if (supportedLocales.length <= 1) return null;
-
-  return (
-    <select
-      value={currentLocale}
-      onChange={(e) => switchLocale(e.target.value)}
-      aria-label="Select language"
-    >
-      {supportedLocales.map((locale) => (
-        <option key={locale} value={locale}>
-          {LOCALE_NAMES[locale] || locale}
-        </option>
-      ))}
-    </select>
-  );
-}
-<% } %>
+<% if (i18nEnabled) { %>
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { supportedLocales } from '@/i18n';
+
+const LOCALE_NAMES: Record<string, string> = {
+  en: 'English',
+  he: 'עברית',
+  ar: 'العربية',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  it: 'Italiano',
+  pt: 'Português',
+  nl: 'Nederlands',
+  ja: '日本語',
+  ko: '한국어',
+  zh: '中文',
+  ru: 'Русский',
+  tr: 'Türkçe',
+  pl: 'Polski',
+  sv: 'Svenska',
+  da: 'Dansk',
+  no: 'Norsk',
+  fi: 'Suomi',
+  cs: 'Čeština',
+  th: 'ไทย',
+  vi: 'Tiếng Việt',
+};
+
+const defaultLocale = '<%= defaultLocale %>';
+
+/**
+ * DESIGN ME — locale switcher in the header; reads supported locales from
+ * `@/i18n` and swaps the URL prefix. Keep the aria-label and the redirect
+ * logic exactly as-is.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+export function LanguageSwitcher() {
+  const pathname = usePathname();
+  const firstSeg = pathname.split('/')[1];
+  const currentLocale = supportedLocales.includes(firstSeg as (typeof supportedLocales)[number])
+    ? firstSeg
+    : defaultLocale;
+
+  function switchLocale(newLocale: string) {
+    // Strip any existing locale segment, then re-add only if the new one
+    // isn't the default — matches the as-needed prefix scheme in middleware.
+    const segments = pathname.split('/');
+    if (supportedLocales.includes(segments[1] as (typeof supportedLocales)[number])) {
+      segments.splice(1, 1);
+    }
+    const bare = segments.join('/') || '/';
+    window.location.href =
+      newLocale === defaultLocale ? bare : `/${newLocale}${bare === '/' ? '' : bare}`;
+  }
+
+  if (supportedLocales.length <= 1) return null;
+
+  return (
+    <select
+      value={currentLocale}
+      onChange={(e) => switchLocale(e.target.value)}
+      aria-label="Select language"
+    >
+      {supportedLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {LOCALE_NAMES[locale] || locale}
+        </option>
+      ))}
+    </select>
+  );
+}
+<% } %>

package/templates/nextjs/ui-canvas/layout/rich-text-block.tsx.ejs

@@ -1,36 +1,36 @@
-/**
- * Inline rich-text block (bare skeleton) — fully driven by the merchant's
- * dashboard.
- *
- * The merchant configures rich-text blocks in the Brainerce dashboard
- * under Sell → Content → Rich Text. Use this component anywhere on a page
- * to drop a merchant-editable HTML block (intro copy, banner descriptions,
- * inline announcements that aren't tied to the top-of-page Announcement
- * bar, etc.).
- *
- * Security: HTML is sanitized via `sanitizeHtml` (isomorphic-dompurify)
- * before injecting via dangerouslySetInnerHTML.
- *
- * DESIGN ME — merchant-editable HTML block; fed by
- * `client.content.richText.get(key, locale)` pre-fetched in the route.
- * Style the injected HTML via the wrapper `className`.
- *
- * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
- */
-import * as React from 'react';
-import type { Content } from 'brainerce';
-import { sanitizeHtml } from '@/core/lib/sanitize';
-
-interface RichTextBlockProps {
-  /** Pre-fetched RICH_TEXT row, e.g. via `client.content.richText.get(key, locale)`. */
-  block: Content<'RICH_TEXT'> | null;
-  /** Optional wrapper className for layout positioning. */
-  className?: string;
-}
-
-export function RichTextBlock({ block, className }: RichTextBlockProps) {
-  if (!block?.data?.html) return null;
-  return (
-    <div className={className} dangerouslySetInnerHTML={{ __html: sanitizeHtml(block.data.html) }} />
-  );
-}
+/**
+ * Inline rich-text block (bare skeleton) — fully driven by the merchant's
+ * dashboard.
+ *
+ * The merchant configures rich-text blocks in the Brainerce dashboard
+ * under Sell → Content → Rich Text. Use this component anywhere on a page
+ * to drop a merchant-editable HTML block (intro copy, banner descriptions,
+ * inline announcements that aren't tied to the top-of-page Announcement
+ * bar, etc.).
+ *
+ * Security: HTML is sanitized via `sanitizeHtml` (isomorphic-dompurify)
+ * before injecting via dangerouslySetInnerHTML.
+ *
+ * DESIGN ME — merchant-editable HTML block; fed by
+ * `client.content.richText.get(key, locale)` pre-fetched in the route.
+ * Style the injected HTML via the wrapper `className`.
+ *
+ * Building blocks: shadcn/ui primitives in src/components/ui (Button, Card, Badge, Input, Select, Accordion, Dialog, Skeleton, ...) + lucide-react icons are installed and ready to compose with.
+ */
+import * as React from 'react';
+import type { Content } from 'brainerce';
+import { sanitizeHtml } from '@/core/lib/sanitize';
+
+interface RichTextBlockProps {
+  /** Pre-fetched RICH_TEXT row, e.g. via `client.content.richText.get(key, locale)`. */
+  block: Content<'RICH_TEXT'> | null;
+  /** Optional wrapper className for layout positioning. */
+  className?: string;
+}
+
+export function RichTextBlock({ block, className }: RichTextBlockProps) {
+  if (!block?.data?.html) return null;
+  return (
+    <div className={className} dangerouslySetInnerHTML={{ __html: sanitizeHtml(block.data.html) }} />
+  );
+}