@vitrine-kit/vitrine 0.4.3 → 0.5.0

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

@@ -1,21 +1,59 @@
 // 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">
@@ -26,6 +64,15 @@ export default async function CategoryPage({ params }: PageProps) {
           <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,9 +1,18 @@
 // 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';
 
 function DemoHero() {
   return (
@@ -13,7 +22,7 @@ function DemoHero() {
     >
       <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">
-        Vitrine
+        {siteName}
       </h1>
       <p className="max-w-prose text-muted-fg">
         Zero-config seed data is loaded for local development — five products across Apparel and
@@ -38,9 +47,36 @@ function DemoHero() {
   );
 }
 
-export default async function HomePage() {
+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">
@@ -49,6 +85,15 @@ export default async function HomePage() {
         <h2 id="catalog-heading" className="font-heading text-fg">
           Catalog
         </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,13 @@
 // 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' },
@@ -9,8 +16,7 @@ const securityHeaders = [
   { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
   {
     key: 'Content-Security-Policy',
-    value:
-      "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https:; frame-ancestors 'none';",
+    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';`,
   },
 ];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitrine-kit/vitrine",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "Vitrine CLI — feature install primitive, init (wizard), add, update, doctor, design apply.",
   "license": "MIT",
   "type": "module",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@clack/prompts": "^0.8.2",
     "commander": "^12.1.0",
-    "@vitrine-kit/contracts": "1.2.2"
+    "@vitrine-kit/contracts": "1.3.0"
   },
   "scripts": {
     "build": "node scripts/generate-kit-versions.mjs && tsup src/index.ts --format esm --clean && node scripts/copy-kit.mjs",