@vitrine-kit/vitrine 0.4.1 → 0.5.0

package/kit/templates/backend-vendure/files/lib/adapter/vendure-catalog.ts

@@ -4,6 +4,7 @@
 import type { CatalogSource, Category, Product, ProductQuery } from '@vitrine-kit/contracts';
 import { shopQuery } from './graphql.js';
 import { mapVendureCollection, mapVendureProduct } from './map.js';
+import { applyProductQuery } from './product-query.js';
 import type { VCollection, VProduct } from './vendure-types.js';
 
 const PRODUCT_FIELDS = `
@@ -19,24 +20,30 @@ export class VendureCatalogSource implements CatalogSource {
     const take = query.perPage ?? 24;
     const skip = ((query.page ?? 1) - 1) * take;
 
-    if (query.category) {
+    let products: Product[];
+    if (query.search?.trim()) {
+      products = await this.search(query.search.trim(), query.locale);
+    } else if (query.category) {
       const { data } = await shopQuery<{ collection: { productVariants: { items: { product: VProduct }[] } } | null }>(
         `query ($slug: String!) { collection(slug: $slug) { productVariants { items { product { ${PRODUCT_FIELDS} } } } } }`,
         { slug: query.category },
       );
       const byId = new Map<string, VProduct>();
       for (const it of data.collection?.productVariants.items ?? []) byId.set(String(it.product.id), it.product);
-      return [...byId.values()].map(mapVendureProduct);
+      products = [...byId.values()].map(mapVendureProduct);
+    } else {
+      const { data } = await shopQuery<{ products: { items: VProduct[] } }>(
+        `query ($take: Int, $skip: Int) { products(options: { take: $take, skip: $skip }) { items { ${PRODUCT_FIELDS} } } }`,
+        { take: Math.max(take, 100), skip: 0 },
+      );
+      products = data.products.items.map(mapVendureProduct);
     }
 
-    const { data } = await shopQuery<{ products: { items: VProduct[] } }>(
-      `query ($take: Int, $skip: Int) { products(options: { take: $take, skip: $skip }) { items { ${PRODUCT_FIELDS} } } }`,
-      { take, skip },
-    );
-    return data.products.items.map(mapVendureProduct);
+    products = applyProductQuery(products, query);
+    return products.slice(skip, skip + take);
   }
 
-  async getProduct(slug: string): Promise<Product | null> {
+  async getProduct(slug: string, _locale?: string): Promise<Product | null> {
     const { data } = await shopQuery<{ product: VProduct | null }>(
       `query ($slug: String!) { product(slug: $slug) { ${PRODUCT_FIELDS} } }`,
       { slug },
@@ -44,19 +51,19 @@ export class VendureCatalogSource implements CatalogSource {
     return data.product ? mapVendureProduct(data.product) : null;
   }
 
-  async listCategories(): Promise<Category[]> {
+  async listCategories(_locale?: string): Promise<Category[]> {
     const { data } = await shopQuery<{ collections: { items: VCollection[] } }>(
       `{ collections { items { id slug name description parent { id } } } }`,
     );
     return data.collections.items.map(mapVendureCollection);
   }
 
-  async search(term: string): Promise<Product[]> {
+  async search(term: string, locale?: string): Promise<Product[]> {
     const { data } = await shopQuery<{ search: { items: { slug: string }[] } }>(
       `query ($term: String!) { search(input: { term: $term, groupByProduct: true }) { items { slug } } }`,
       { term },
     );
-    const products = await Promise.all(data.search.items.map((i) => this.getProduct(i.slug)));
+    const products = await Promise.all(data.search.items.map((i) => this.getProduct(i.slug, locale)));
     return products.filter((p): p is Product => p !== null);
   }
 }

package/kit/templates/backend-vendure/files/vendure-config.ts

@@ -5,10 +5,36 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { DefaultJobQueuePlugin, DefaultSearchPlugin, type VendureConfig } from '@vendure/core';
 import { AssetServerPlugin } from '@vendure/asset-server-plugin';
+import { checkRateLimit } from '@vitrine-kit/core';
 
 const dirname = path.dirname(fileURLToPath(import.meta.url));
 const IS_DEV = process.env.NODE_ENV !== 'production';
 
+// Structural Express req/res shape — avoids a direct dependency on `express` (it's only a
+// transitive dep of @vendure/core); any real Express Request/Response satisfies this.
+interface MiddlewareRequest {
+  headers: Record<string, string | string[] | undefined>;
+  ip?: string;
+}
+interface MiddlewareResponse {
+  setHeader(name: string, value: string): void;
+  status(code: number): { json(body: unknown): void };
+}
+
+// Coarse per-IP rate limit on the whole admin API — brute-force protection for the
+// superadmin login mutation (Vendure has no built-in login lockout, unlike Payload).
+function adminApiRateLimit(req: MiddlewareRequest, res: MiddlewareResponse, next: () => void): void {
+  const forwardedFor = req.headers['x-forwarded-for'];
+  const ip = (Array.isArray(forwardedFor) ? forwardedFor[0] : forwardedFor?.split(',')[0].trim()) ?? req.ip ?? 'unknown';
+  const { allowed, retryAfterMs } = checkRateLimit(`admin-api:${ip}`, { limit: 60, windowMs: 60_000 });
+  if (!allowed) {
+    res.setHeader('Retry-After', String(Math.ceil((retryAfterMs ?? 0) / 1000)));
+    res.status(429).json({ error: 'too many requests' });
+    return;
+  }
+  next();
+}
+
 function dbConnectionOptions(): VendureConfig['dbConnectionOptions'] {
   const url = process.env.DATABASE_URL;
   if (url) {
@@ -26,17 +52,28 @@ function dbConnectionOptions(): VendureConfig['dbConnectionOptions'] {
   } as VendureConfig['dbConnectionOptions'];
 }
 
+if (!IS_DEV) {
+  // No silent fallback to the well-known dev defaults in production (mirrors the DATABASE_URL guard below).
+  if (!process.env.VENDURE_SUPERADMIN_PASSWORD) {
+    throw new Error('[vitrine] VENDURE_SUPERADMIN_PASSWORD is required in production');
+  }
+  if (!process.env.VENDURE_COOKIE_SECRET) {
+    throw new Error('[vitrine] VENDURE_COOKIE_SECRET is required in production');
+  }
+}
+
 export const config: VendureConfig = {
   apiOptions: {
     port: Number(process.env.VENDURE_PORT ?? 3001),
     adminApiPath: 'admin-api',
     shopApiPath: 'shop-api',
+    middleware: [{ handler: adminApiRateLimit, route: 'admin-api' }],
   },
   authOptions: {
     tokenMethod: ['bearer', 'cookie'],
     superadminCredentials: {
       identifier: process.env.VENDURE_SUPERADMIN_USERNAME ?? 'superadmin',
-      // dev default; for prod you must set VENDURE_SUPERADMIN_PASSWORD.
+      // dev default; production is guarded above.
       password: process.env.VENDURE_SUPERADMIN_PASSWORD ?? 'superadmin',
     },
     cookieOptions: { secret: process.env.VENDURE_COOKIE_SECRET ?? 'dev-cookie-secret' },

package/kit/templates/base/files/.claude/commands/update.md

@@ -5,7 +5,7 @@ argument-hint: [feature]
 
 Update features from the registry while keeping the client's edits:
 
-1. `vitrine kit update` — refresh the local registry/templates cache from GitHub
+1. `vitrine kit update` — refresh the local registry/templates cache from npm
    (needs `gh` and `tar`; cache in `~/.vitrine`).
 2. `vitrine kit status` — see what's newer than what's installed.
 3. `vitrine diff $ARGUMENTS` — preview changes without writing (for each feature being updated).

package/kit/templates/base/files/app/(frontend)/categories/[slug]/page.tsx

@@ -1,26 +1,78 @@
 // Category listing. Filtered by category slug via the CatalogSource contract.
+import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { Slot } from '@vitrine-kit/core/react';
 import { getCatalogSource } from '@/lib/adapter';
-import { loadCategories, loadProducts } from '@/lib/catalog/data';
+import {
+  collectOptionFacets,
+  loadCategories,
+  loadProducts,
+  parsePriceBound,
+  parseProductFilters,
+  parseProductSort,
+} from '@/lib/catalog/data';
+import { getRequestLocale } from '@/lib/i18n/locale';
 import { ProductGrid } from '@/components/catalog/ProductGrid';
+import { siteName } from '@/lib/site';
 
 interface PageProps {
   params: Promise<{ slug: string }>;
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
 }
 
-export default async function CategoryPage({ params }: PageProps) {
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
   const { slug } = await params;
+  const locale = await getRequestLocale();
   const source = await getCatalogSource();
-  const category = (await loadCategories(source)).find((c) => c.slug === slug);
+  const category = (await loadCategories(source, locale)).find((c) => c.slug === slug);
+  if (!category) return {};
+  return {
+    title: category.title,
+    description: category.description ?? `${category.title} — ${siteName}`,
+  };
+}
+
+export default async function CategoryPage({ params, searchParams }: PageProps) {
+  const { slug } = await params;
+  const sp = await searchParams;
+  const sort = parseProductSort(typeof sp.sort === 'string' ? sp.sort : undefined) ?? 'newest';
+  const filters = parseProductFilters(sp);
+  const priceMin = parsePriceBound(sp.priceMin);
+  const priceMax = parsePriceBound(sp.priceMax);
+  const locale = await getRequestLocale();
+  const source = await getCatalogSource();
+  const category = (await loadCategories(source, locale)).find((c) => c.slug === slug);
   if (!category) notFound();
 
-  const products = await loadProducts(source, { category: slug });
+  const facetSource = await loadProducts(source, { category: slug, perPage: 100, locale });
+  const facets = collectOptionFacets(facetSource);
+  const products = await loadProducts(source, {
+    category: slug,
+    sort,
+    filters,
+    priceMin,
+    priceMax,
+    locale,
+  });
 
   return (
     <div className="flex flex-col gap-section">
       <Slot name="category.header" category={category} />
-      <h1 className="font-heading text-fg">{category.title}</h1>
+      <header className="flex flex-col gap-unit">
+        <h1 className="font-heading text-fg">{category.title}</h1>
+        {category.description ? (
+          <p className="max-w-prose text-muted-fg">{category.description}</p>
+        ) : null}
+      </header>
+      <Slot
+        name="catalog.toolbar"
+        sort={sort}
+        action={`/categories/${slug}`}
+        facets={facets}
+        filters={filters ?? {}}
+        priceMin={typeof sp.priceMin === 'string' ? sp.priceMin : ''}
+        priceMax={typeof sp.priceMax === 'string' ? sp.priceMax : ''}
+      />
       <ProductGrid products={products} />
       <Slot name="category.below-products" />
     </div>

package/kit/templates/base/files/app/(frontend)/layout.tsx

@@ -5,27 +5,33 @@ import type { ReactNode } from 'react';
 import type { Metadata } from 'next';
 import '../globals.css';
 import { siteConfig } from '@/site.config';
+import { baseUrl, siteName } from '@/lib/site';
 import { registerSlots } from '@/lib/slots';
 import { Slot } from '@vitrine-kit/core/react';
+import { SlotsProvider } from '@/components/SlotsProvider';
 import { SiteHeader } from '@/components/layout/SiteHeader';
 import { SiteFooter } from '@/components/layout/SiteFooter';
 
-// Register installed features' slots (lib/slots.ts is generated by the CLI).
+// Register installed features' slots for SSR (lib/slots.ts is generated by the CLI).
+// SlotsProvider re-runs the same registration in the browser so <Slot> hydrates.
 registerSlots();
 
 export const metadata: Metadata = {
-  title: { default: 'Vitrine', template: '%s · Vitrine' },
+  metadataBase: new URL(baseUrl),
+  title: { default: siteName, template: `%s · ${siteName}` },
 };
 
 export default function FrontendLayout({ children }: { children: ReactNode }) {
   return (
     <html lang={siteConfig.i18n.defaultLocale}>
       <body className="min-h-screen bg-bg font-sans text-fg antialiased">
-        <Slot name="global.banner-top" />
-        <SiteHeader />
-        <main className="mx-auto w-full max-w-container px-gutter py-section">{children}</main>
-        <SiteFooter />
-        <Slot name="global.body-end" />
+        <SlotsProvider>
+          <Slot name="global.banner-top" />
+          <SiteHeader />
+          <main className="mx-auto w-full max-w-container px-gutter py-section">{children}</main>
+          <SiteFooter />
+          <Slot name="global.body-end" />
+        </SlotsProvider>
       </body>
     </html>
   );

package/kit/templates/base/files/app/(frontend)/not-found.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from 'next';
+import { siteName } from '@/lib/site';
+
+export const metadata: Metadata = {
+  title: 'Page not found',
+};
+
+export default function NotFound() {
+  return (
+    <div className="vt-not-found flex flex-col gap-section">
+      <header className="flex flex-col gap-unit">
+        <p className="text-sm text-muted-fg">404</p>
+        <h1 className="font-heading text-3xl text-fg">Page not found</h1>
+        <p className="max-w-prose text-muted-fg">
+          That page is missing or the product is no longer available in {siteName}.
+        </p>
+      </header>
+      <a
+        href="/"
+        className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+      >
+        Back to catalog
+      </a>
+    </div>
+  );
+}

package/kit/templates/base/files/app/(frontend)/page.tsx

@@ -1,21 +1,99 @@
 // Storefront home: catalog listing. Data via the CatalogSource contract
 // (backend-agnostic); the grid is the catalog feature's component.
+import type { Metadata } from 'next';
 import { Slot } from '@vitrine-kit/core/react';
 import { getCatalogSource } from '@/lib/adapter';
-import { loadProducts } from '@/lib/catalog/data';
+import {
+  collectOptionFacets,
+  loadProducts,
+  parsePriceBound,
+  parseProductFilters,
+  parseProductSort,
+} from '@/lib/catalog/data';
+import { getRequestLocale } from '@/lib/i18n/locale';
 import { ProductGrid } from '@/components/catalog/ProductGrid';
+import { siteName } from '@/lib/site';
 
-export default async function HomePage() {
+function DemoHero() {
+  return (
+    <section
+      aria-labelledby="demo-hero-heading"
+      className="flex flex-col gap-gutter border-b border-border pb-section"
+    >
+      <p className="text-sm uppercase tracking-wide text-muted-fg">Demo catalog</p>
+      <h1 id="demo-hero-heading" className="font-heading text-3xl text-fg md:text-4xl">
+        {siteName}
+      </h1>
+      <p className="max-w-prose text-muted-fg">
+        Zero-config seed data is loaded for local development — five products across Apparel and
+        Accessories. Browse a category, open a product with size or color options, add it to the
+        cart, then continue to checkout when a payment provider is configured.
+      </p>
+      <div className="flex flex-wrap gap-gutter">
+        <a
+          href="/categories/apparel"
+          className="rounded-md bg-primary px-gutter py-unit text-primary-fg transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          Shop apparel
+        </a>
+        <a
+          href="/products/classic-tee"
+          className="rounded-md border border-border px-gutter py-unit text-fg transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          Try Classic T-Shirt
+        </a>
+      </div>
+    </section>
+  );
+}
+
+interface PageProps {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: { absolute: siteName },
+    description: `${siteName} — product catalog.`,
+  };
+}
+
+export default async function HomePage({ searchParams }: PageProps) {
+  const params = await searchParams;
+  const sort = parseProductSort(typeof params.sort === 'string' ? params.sort : undefined) ?? 'newest';
+  const filters = parseProductFilters(params);
+  const priceMin = parsePriceBound(params.priceMin);
+  const priceMax = parsePriceBound(params.priceMax);
+  const locale = await getRequestLocale();
   const source = await getCatalogSource();
-  const products = await loadProducts(source, { perPage: 12 });
+
+  const facetSource = await loadProducts(source, { perPage: 100, locale });
+  const facets = collectOptionFacets(facetSource);
+  const products = await loadProducts(source, {
+    perPage: 12,
+    sort,
+    filters,
+    priceMin,
+    priceMax,
+    locale,
+  });
 
   return (
     <div className="flex flex-col gap-section">
-      <Slot name="home.hero" />
+      <Slot name="home.hero" fallback={<DemoHero />} />
       <section aria-labelledby="catalog-heading" className="flex flex-col gap-gutter">
-        <h1 id="catalog-heading" className="font-heading text-fg">
+        <h2 id="catalog-heading" className="font-heading text-fg">
           Catalog
-        </h1>
+        </h2>
+        <Slot
+          name="catalog.toolbar"
+          sort={sort}
+          action="/"
+          facets={facets}
+          filters={filters ?? {}}
+          priceMin={typeof params.priceMin === 'string' ? params.priceMin : ''}
+          priceMax={typeof params.priceMax === 'string' ? params.priceMax : ''}
+        />
         <Slot name="catalog.grid-top" />
         <ProductGrid products={products} />
         <Slot name="catalog.grid-bottom" />

package/kit/templates/base/files/app/(frontend)/products/[slug]/page.tsx

@@ -4,6 +4,7 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getCatalogSource } from '@/lib/adapter';
 import { loadProduct } from '@/lib/catalog/data';
+import { getRequestLocale } from '@/lib/i18n/locale';
 import { ProductView } from '@/components/product/ProductView';
 import { buildProductMetadata } from '@/lib/seo/metadata';
 import { productJsonLd } from '@/lib/seo/jsonld';
@@ -16,8 +17,9 @@ interface PageProps {
 
 export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
   const { slug } = await params;
+  const locale = await getRequestLocale();
   const source = await getCatalogSource();
-  const product = await loadProduct(source, slug);
+  const product = await loadProduct(source, slug, locale);
   if (!product) return {};
   const meta = buildProductMetadata(product, { baseUrl });
   return {
@@ -30,8 +32,9 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
 
 export default async function ProductPage({ params }: PageProps) {
   const { slug } = await params;
+  const locale = await getRequestLocale();
   const source = await getCatalogSource();
-  const product = await loadProduct(source, slug);
+  const product = await loadProduct(source, slug, locale);
   if (!product) notFound();
 
   return (

package/kit/templates/base/files/app/globals.css

@@ -4,3 +4,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Fallback if a design theme strips utilities — keep search label accessible. */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/kit/templates/base/files/components/SlotsProvider.tsx

@@ -0,0 +1,19 @@
+// Ensures feature slot mounts are registered in the browser bundle.
+// Server layout also calls registerSlots() for SSR; this covers hydration.
+'use client';
+
+import type { ReactNode } from 'react';
+import { registerSlots } from '@/lib/slots';
+
+let registered = false;
+
+function ensureRegistered(): void {
+  if (registered) return;
+  registerSlots();
+  registered = true;
+}
+
+export function SlotsProvider({ children }: { children: ReactNode }) {
+  ensureRegistered();
+  return children;
+}

package/kit/templates/base/files/components/layout/SiteFooter.tsx

@@ -1,5 +1,6 @@
 // Storefront footer. Hosts the global.footer slot.
 import { Slot } from '@vitrine-kit/core/react';
+import { siteName } from '@/lib/site';
 
 export function SiteFooter() {
   return (
@@ -7,7 +8,11 @@ export function SiteFooter() {
       <div className="mx-auto max-w-container px-gutter py-section text-muted-fg">
         <Slot
           name="global.footer"
-          fallback={<p>© {new Date().getFullYear()}</p>}
+          fallback={
+            <p>
+              © {new Date().getFullYear()} {siteName}
+            </p>
+          }
         />
       </div>
     </footer>

package/kit/templates/base/files/components/layout/SiteHeader.tsx

@@ -2,6 +2,8 @@
 // CategoryNav mounts) and passes it categories from the active CatalogSource.
 import { Slot } from '@vitrine-kit/core/react';
 import { getCatalogSource } from '@/lib/adapter';
+import { siteName } from '@/lib/site';
+import { siteConfig } from '@/site.config';
 
 export async function SiteHeader() {
   const source = await getCatalogSource();
@@ -11,11 +13,15 @@ export async function SiteHeader() {
     <header className="border-b border-border">
       <div className="mx-auto flex max-w-container items-center justify-between gap-gutter px-gutter py-unit">
         <a href="/" className="font-heading text-fg">
-          <Slot name="global.header-start" fallback={<span>Vitrine</span>} />
+          <Slot name="global.header-start" fallback={<span>{siteName}</span>} />
         </a>
         <Slot name="global.header-nav" categories={categories} />
         <div className="flex items-center gap-unit">
-          <Slot name="global.header-actions" />
+          <Slot
+            name="global.header-actions"
+            locales={siteConfig.i18n.locales}
+            defaultLocale={siteConfig.i18n.defaultLocale}
+          />
         </div>
       </div>
     </header>

package/kit/templates/base/files/lib/i18n/dictionary.ts

@@ -0,0 +1,36 @@
+// Minimal chrome dictionary (English). The `i18n` feature overwrites this file
+// with multi-locale dictionaries when installed.
+export type MessageKey =
+  | 'cart'
+  | 'search'
+  | 'checkout'
+  | 'wishlist'
+  | 'orders'
+  | 'account'
+  | 'continueShopping'
+  | 'addToCart'
+  | 'thankYou'
+  | 'signIn'
+  | 'createAccount';
+
+const en: Record<MessageKey, string> = {
+  cart: 'Cart',
+  search: 'Search',
+  checkout: 'Checkout',
+  wishlist: 'Wishlist',
+  orders: 'Orders',
+  account: 'Account',
+  continueShopping: 'Continue shopping',
+  addToCart: 'Add to cart',
+  thankYou: 'Thank you for your order',
+  signIn: 'Sign in',
+  createAccount: 'Create account',
+};
+
+export function t(key: MessageKey, _locale = 'en'): string {
+  return en[key] ?? key;
+}
+
+export function supportedLocales(): string[] {
+  return ['en'];
+}

package/kit/templates/base/files/lib/i18n/locale.ts

@@ -0,0 +1,11 @@
+// Request locale from the vitrine_locale cookie (set by i18n middleware / switcher).
+import { cookies } from 'next/headers';
+import { siteConfig } from '@/site.config';
+
+export async function getRequestLocale(): Promise<string> {
+  const jar = await cookies();
+  const fromCookie = jar.get('vitrine_locale')?.value;
+  const locales = siteConfig.i18n.locales;
+  if (fromCookie && locales.includes(fromCookie)) return fromCookie;
+  return siteConfig.i18n.defaultLocale;
+}

package/kit/templates/base/files/lib/i18n/useChromeLabel.ts

@@ -0,0 +1,28 @@
+// Client helper: resolve chrome copy from the locale cookie + dictionary.
+'use client';
+
+import { useEffect, useState } from 'react';
+import { t, type MessageKey } from './dictionary.js';
+
+const COOKIE = 'vitrine_locale';
+
+function readLocale(fallback: string): string {
+  if (typeof document === 'undefined') return fallback;
+  const match = document.cookie.match(new RegExp(`(?:^|; )${COOKIE}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]!) : fallback;
+}
+
+/** Reactive label for header/chrome controls (updates after mount from the locale cookie). */
+export function useChromeLabel(key: MessageKey, fallbackLocale = 'en'): string {
+  const [label, setLabel] = useState(() => t(key, fallbackLocale));
+
+  useEffect(() => {
+    setLabel(t(key, readLocale(fallbackLocale)));
+  }, [key, fallbackLocale]);
+
+  return label;
+}
+
+export function chromeLabel(key: MessageKey, locale = 'en'): string {
+  return t(key, locale);
+}

package/kit/templates/base/files/lib/site.ts

@@ -5,6 +5,9 @@ import { siteConfig } from '@/site.config';
 /** Base URL for canonical/OG. Overridden by NEXT_PUBLIC_SITE_URL. */
 export const baseUrl = process.env.NEXT_PUBLIC_SITE_URL ?? 'http://localhost:3000';
 
+/** Storefront display name from `vitrine init` (falls back for older clients). */
+export const siteName = siteConfig.name?.trim() || 'Store';
+
 export const currency = siteConfig.i18n.currency;
 export const defaultLocale = siteConfig.i18n.defaultLocale;
 export const locales = siteConfig.i18n.locales;

package/kit/templates/base/files/next.config.mjs

@@ -1,6 +1,40 @@
+// Baseline security headers (OWASP A05: Security Misconfiguration) applied to every route.
+// The CSP below is a conservative starting point — payment providers with client-side widgets
+// (e.g. embedded Stripe Elements) may need their domains added to script-src/connect-src/frame-src.
+// Next.js `pnpm dev` (webpack eval source maps / Fast Refresh) needs 'unsafe-eval'; omit it in
+// production builds so the shipped CSP stays tighter.
+const isDev = process.env.NODE_ENV !== 'production';
+const scriptSrc = isDev
+  ? "script-src 'self' 'unsafe-inline' 'unsafe-eval'"
+  : "script-src 'self' 'unsafe-inline'";
+
+const securityHeaders = [
+  { key: 'X-Content-Type-Options', value: 'nosniff' },
+  { key: 'X-Frame-Options', value: 'DENY' },
+  { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+  { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
+  { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
+  {
+    key: 'Content-Security-Policy',
+    value: `default-src 'self'; ${scriptSrc}; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; frame-ancestors 'none';`,
+  },
+];
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+  // Registry/template sources use TypeScript ESM-style relative imports (`.js` → `.ts`/`.tsx`).
+  // Webpack needs an explicit extensionAlias; without it, `pnpm dev` fails to resolve components.
+  webpack(config) {
+    config.resolve.extensionAlias = {
+      ...(config.resolve.extensionAlias ?? {}),
+      '.js': ['.ts', '.tsx', '.js', '.jsx'],
+    };
+    return config;
+  },
+  async headers() {
+    return [{ source: '/:path*', headers: securityHeaders }];
+  },
 };
 
 // backend-payload overwrites this file (wraps it in withPayload).