@rovela-ai/sdk 0.19.3 → 0.19.5

package/templates/store-template/app/globals.css

@@ -0,0 +1,99 @@
+/**
+ * Global CSS Styles
+ *
+ * NOTE: This file is a placeholder. Claude Agent will regenerate it using:
+ *   import { generateGlobalsCss } from '@rovela-ai/sdk/theme'
+ *   const css = generateGlobalsCss(blueprint.theme)
+ *
+ * This default configuration provides basic styling for the initial build.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Default color palette (neutral gray) */
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+
+    /* Font variables */
+    --font-heading: 'Inter', system-ui, sans-serif;
+    --font-body: 'Inter', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', monospace;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-body);
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+  }
+  code, pre {
+    font-family: var(--font-mono);
+  }
+}

package/templates/store-template/app/layout.tsx

@@ -0,0 +1,269 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+import { headers, cookies } from 'next/headers'
+import { redirect, permanentRedirect } from 'next/navigation'
+import { Providers } from '@/components/Providers'
+import { LayoutContent } from './LayoutContent'
+import { getBlueprint, findSettings } from '@rovela-ai/sdk/core/server'
+import {
+  resolveStoreLocaleConfig,
+  resolveRequestLocale,
+  resolveLocaleRedirect,
+  stripLocalePrefix,
+  LOCALE_HEADER,
+  GEO_LOCALE_HEADER,
+  PATHNAME_HEADER,
+  LOCALE_COOKIE,
+} from '@rovela-ai/sdk/core'
+import { localizedAlternates } from '@rovela-ai/sdk/core/server'
+import { buildStoreJsonLdGraph, serializeJsonLd } from '@rovela-ai/sdk/core'
+import { supportEmail, returnPolicyInput, shipsToCountries } from '@/lib/store-policy'
+import { sanitizeCookieConsentConfig, consentRegionExempt } from '@rovela-ai/sdk/core/cookie-consent'
+
+/**
+ * Font Configuration
+ *
+ * NOTE: Claude Agent will modify this based on blueprint.theme.typography
+ * The fonts below are defaults that work for most stores.
+ */
+const fontBody = Inter({
+  subsets: ['latin'],
+  variable: '--font-body',
+  display: 'swap',
+})
+
+const fontHeading = Inter({
+  subsets: ['latin'],
+  variable: '--font-heading',
+  weight: ['500', '600', '700'],
+  display: 'swap',
+})
+
+/**
+ * Dynamic Metadata Configuration
+ *
+ * Reads store name from STORE_NAME env var (updated by branding editor)
+ * Favicon: prefers NEXT_PUBLIC_STORE_FAVICON_URL (custom upload),
+ *   falls back to NEXT_PUBLIC_STORE_LOGO_URL (logo doubles as favicon).
+ *   Merchants who don't upload a separate favicon get their logo as favicon
+ *   by default.
+ * Falls back to blueprint data for SEO description and keywords.
+ */
+export async function generateMetadata(): Promise<Metadata> {
+  // Try to load blueprint for rich SEO data
+  let blueprint = null
+  try {
+    blueprint = getBlueprint()
+  } catch {
+    // Blueprint might not exist during initial setup
+  }
+
+  // Live store settings — settings-first identity (name, favicon, logo).
+  // What the merchant edits in /admin must reach metadata without a redeploy.
+  // Fail-open: a DB hiccup falls back to env/blueprint.
+  const brandingSettings = await findSettings().catch(() => null)
+
+  // Store name: LIVE settings first, then the build-time env var, then blueprint.
+  const storeName =
+    brandingSettings?.storeName || process.env.STORE_NAME || blueprint?.store?.name || 'Store'
+
+  // SEO data from blueprint with fallbacks
+  const seoTitle = blueprint?.seo?.title || storeName
+  const seoDescription =
+    blueprint?.seo?.description ||
+    blueprint?.store?.description ||
+    `Shop at ${storeName}`
+  const seoKeywords = blueprint?.seo?.keywords || []
+
+  // Favicon: live store settings first (favicon_url / logo_url — updated
+  // instantly by the /admin branding page AND mirrored by the platform
+  // branding routes), then the build-time env vars for legacy stores whose
+  // settings row predates the mirror. Custom favicon wins; logo is the
+  // fallback mark. Fail-open — a DB hiccup falls back to env.
+  const faviconUrl =
+    brandingSettings?.faviconUrl ||
+    process.env.NEXT_PUBLIC_STORE_FAVICON_URL ||
+    brandingSettings?.logoUrl ||
+    process.env.NEXT_PUBLIC_STORE_LOGO_URL ||
+    null
+
+  // OpenGraph / Twitter share image: prefer a blueprint-supplied OG image,
+  // fall back to the store logo. Closes the "no OG image on storefronts" gap.
+  const storeUrl = process.env.NEXT_PUBLIC_APP_URL || ''
+  const ogImage =
+    blueprint?.seo?.ogImage ||
+    brandingSettings?.logoUrl ||
+    process.env.NEXT_PUBLIC_STORE_LOGO_URL ||
+    faviconUrl ||
+    null
+  let metadataBase: URL | undefined
+  try {
+    metadataBase = storeUrl ? new URL(storeUrl) : undefined
+  } catch {
+    metadataBase = undefined
+  }
+
+  // Locale alternates (self-canonical + hreflang) for every page that does
+  // not set its own — pages exporting `alternates` (PDP, listing, contact,
+  // legal, FAQ) override this field. Covers the homepage and any future page
+  // with zero per-page work. The header carries the ORIGINAL request path
+  // (locale prefix included); strip it to get the bare path.
+  let alternates: Metadata['alternates'] | undefined
+  try {
+    const hdrs = await headers()
+    const originalPath = hdrs.get(PATHNAME_HEADER) || '/'
+    alternates = await localizedAlternates(stripLocalePrefix(originalPath))
+  } catch {
+    // headers() unavailable (build-time) — omit alternates.
+  }
+
+  return {
+    ...(metadataBase && { metadataBase }),
+    ...(alternates && { alternates }),
+    title: {
+      default: seoTitle,
+      template: `%s | ${storeName}`,
+    },
+    description: seoDescription,
+    keywords: seoKeywords,
+    // Maximum rich-result + AI Overview eligibility: allow full snippets and
+    // large image previews for every search + AI shopping crawler.
+    robots: {
+      index: true,
+      follow: true,
+      googleBot: {
+        index: true,
+        follow: true,
+        'max-image-preview': 'large',
+        'max-snippet': -1,
+        'max-video-preview': -1,
+      },
+    },
+    ...(faviconUrl && {
+      icons: {
+        icon: faviconUrl,
+        shortcut: faviconUrl,
+        apple: faviconUrl,
+      },
+    }),
+    openGraph: {
+      siteName: storeName,
+      type: 'website',
+      title: seoTitle,
+      description: seoDescription,
+      ...(storeUrl && { url: storeUrl }),
+      ...(ogImage && { images: [{ url: ogImage }] }),
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: seoTitle,
+      description: seoDescription,
+      ...(ogImage && { images: [ogImage] }),
+    },
+  }
+}
+
+/**
+ * Root Layout
+ *
+ * This layout wraps all pages and provides:
+ * - Providers for SessionProvider (NextAuth)
+ * - LayoutContent for route-aware rendering (separates admin vs customer)
+ *
+ * Admin routes (/admin/*) get minimal wrapper - AdminLayout handles its own chrome.
+ * Customer routes get full store experience with Header, Footer, Cart.
+ *
+ * This separation ensures clear disconnection between admin panel and store.
+ */
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  // R021: read the merchant's cookie-banner master toggle once per
+  // request. Defaults to `true` for safety — if settings aren't seeded
+  // yet (very first render on a brand-new store) the banner shows and
+  // the merchant can turn it off in admin Settings.
+  let cookieBannerEnabled = true
+  let cookieConsentConfig: ReturnType<typeof sanitizeCookieConsentConfig> = {}
+  let settings: Awaited<ReturnType<typeof findSettings>> = null
+  try {
+    settings = await findSettings()
+    if (settings) {
+      cookieBannerEnabled = !!settings.cookieBannerEnabled
+      cookieConsentConfig = sanitizeCookieConsentConfig(settings.cookieConsent)
+    }
+  } catch {
+    // Settings table not reachable — fail open (banner shows). Safer
+    // than failing closed in EU jurisdictions.
+  }
+
+  // ── Locale (i18n core) ────────────────────────────────────────────────────
+  // The proxy parsed any /fr prefix into headers; here (where settings are
+  // available) we pick the render locale and apply locale-correctness
+  // redirects: strip prefixes the store doesn't serve, and route a visitor
+  // preference (explicit cookie, else IP-country hint) from a bare URL to
+  // its prefixed equivalent. See SDK core/i18n/resolve for the contract.
+  const hdrs = await headers()
+  const cookieStore = await cookies()
+  const localeConfig = resolveStoreLocaleConfig(settings)
+  const localeInput = {
+    prefixLocale: hdrs.get(LOCALE_HEADER),
+    cookieLocale: cookieStore.get(LOCALE_COOKIE)?.value,
+    geoLocale: hdrs.get(GEO_LOCALE_HEADER),
+    config: localeConfig,
+  }
+  const localeRedirect = resolveLocaleRedirect({
+    ...localeInput,
+    pathname: hdrs.get(PATHNAME_HEADER),
+  })
+  if (localeRedirect) {
+    // 308 for structural strips (URL shapes the store never serves), 307 for
+    // visitor-preference hops (cookie/geo dependent — never cacheable).
+    if (localeRedirect.permanent) permanentRedirect(localeRedirect.path)
+    redirect(localeRedirect.path)
+  }
+  const locale = resolveRequestLocale(localeInput)
+
+  // Site-wide Organization + WebSite JSON-LD (brand identity for AI assistants).
+  // Server-rendered so non-JS crawlers (GPTBot / OAI-SearchBot) can read it.
+  const storeJsonLd = buildStoreJsonLdGraph({
+    storeUrl: process.env.NEXT_PUBLIC_APP_URL || '',
+    storeName: settings?.storeName || process.env.STORE_NAME || 'Store',
+    logoUrl: settings?.logoUrl || process.env.NEXT_PUBLIC_STORE_LOGO_URL || null,
+    // Enriched entity signals (contactPoint + return policy + areaServed) from
+    // real configured data — see lib/store-policy. All optional in the builder,
+    // so a brand-new store with no settings still emits a valid base graph.
+    contactEmail: supportEmail(settings),
+    returnPolicy: returnPolicyInput(settings),
+    shipsToCountries: shipsToCountries(settings),
+  })
+
+  return (
+    <html lang={locale} className={`${fontBody.variable} ${fontHeading.variable}`}>
+      <body className="min-h-screen flex flex-col antialiased">
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: serializeJsonLd(storeJsonLd) }}
+        />
+        <Providers>
+          <LayoutContent
+          cookieBannerEnabled={cookieBannerEnabled}
+          cookieConsentConfig={cookieConsentConfig}
+          consentRegionExempt={consentRegionExempt(
+            cookieConsentConfig,
+            hdrs.get('x-rovela-country')
+          )}
+          locale={locale}
+          defaultLocale={localeConfig.defaultLocale}
+          enabledLocales={localeConfig.enabledLocales}
+        >
+            {children}
+          </LayoutContent>
+        </Providers>
+      </body>
+    </html>
+  )
+}

package/templates/store-template/app/not-found.tsx

@@ -0,0 +1,35 @@
+/**
+ * Localized 404 page — server component. Without this file Next.js serves
+ * its default English, unbranded 404. Locale comes from the proxy header via
+ * getRequestLocale (fail-open to the store default), so /fr/unknown-path
+ * renders French chrome.
+ */
+
+import { LocaleLink as Link, getT } from '@rovela-ai/sdk/core'
+import { getRequestLocale } from '@rovela-ai/sdk/core/server'
+
+export default async function NotFound() {
+  const { locale } = await getRequestLocale().catch(() => ({ locale: 'en' as const }))
+  const t = getT(locale)
+
+  return (
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-24">
+      <div className="mx-auto max-w-md text-center">
+        <p className="text-sm font-semibold text-primary">404</p>
+        <h1 className="mt-2 text-3xl font-bold font-heading">{t('notFound.title')}</h1>
+        <p className="mt-4 text-muted-foreground">{t('notFound.body')}</p>
+        <div className="mt-8 flex items-center justify-center gap-4">
+          <Link
+            href="/"
+            className="rounded-md bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:bg-primary/90 transition-colors"
+          >
+            {t('notFound.backHome')}
+          </Link>
+          <Link href="/products" className="text-sm font-medium text-primary hover:underline">
+            {t('footer.allProducts')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/store-template/app/page.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+/**
+ * Homepage
+ *
+ * Pre-baked with theme-aware sections for instant branded preview.
+ * Claude Code will replace these section components with custom versions
+ * that include business-specific content from the questionnaire and brand identity.
+ */
+
+import Hero from '@/components/sections/Hero'
+import Features from '@/components/sections/Features'
+import CTA from '@/components/sections/CTA'
+
+export default function HomePage() {
+  return (
+    <>
+      <Hero />
+      <Features />
+      <CTA />
+    </>
+  )
+}