@vitrine-kit/vitrine 0.4.3 → 0.5.0

package/kit/registry/i18n/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/registry/i18n/files/middleware.ts

@@ -0,0 +1,51 @@
+// Locale path middleware: when site.config has multiple locales, prefix URLs
+// (`/en/cart`) and rewrite internally to the unprefixed App Router tree.
+// No-op when only one locale is configured.
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { siteConfig } from './site.config';
+
+const COOKIE = 'vitrine_locale';
+
+export function middleware(req: NextRequest) {
+  const locales = siteConfig.i18n.locales;
+  const defaultLocale = siteConfig.i18n.defaultLocale;
+  if (locales.length < 2) return NextResponse.next();
+
+  const { pathname } = req.nextUrl;
+
+  // Skip Next internals, Payload admin/API, and static assets.
+  if (
+    pathname.startsWith('/_next') ||
+    pathname.startsWith('/api') ||
+    pathname.startsWith('/admin') ||
+    pathname.includes('.') // files with extensions
+  ) {
+    return NextResponse.next();
+  }
+
+  const seg = pathname.split('/')[1] ?? '';
+  const hasLocale = locales.includes(seg);
+
+  if (!hasLocale) {
+    const cookieLocale = req.cookies.get(COOKIE)?.value;
+    const locale = cookieLocale && locales.includes(cookieLocale) ? cookieLocale : defaultLocale;
+    const url = req.nextUrl.clone();
+    url.pathname = pathname === '/' ? `/${locale}` : `/${locale}${pathname}`;
+    const res = NextResponse.redirect(url);
+    res.cookies.set(COOKIE, locale, { path: '/', maxAge: 31536000, sameSite: 'lax' });
+    return res;
+  }
+
+  const locale = seg;
+  const stripped = pathname.slice(locale.length + 1) || '/';
+  const rewrite = req.nextUrl.clone();
+  rewrite.pathname = stripped;
+  const res = NextResponse.rewrite(rewrite);
+  res.cookies.set(COOKIE, locale, { path: '/', maxAge: 31536000, sameSite: 'lax' });
+  return res;
+}
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
+};

package/kit/registry/product-page/feature.json

@@ -2,7 +2,7 @@
   "$schema": "../../schemas/feature.schema.json",
   "name": "product-page",
   "title": "Product page",
-  "kitVersion": "0.4.3",
+  "kitVersion": "0.5.0",
   "requiresContracts": ">=1.0.0 <2.0.0",
   "tier": [
     "catalog",

package/kit/registry/product-page/files/components/product/ProductGallery.tsx

@@ -1,4 +1,6 @@
-// Product gallery — presentational, neutral.
+// Product gallery — client component so thumbnails switch the cover image.
+'use client';
+import { useState } from 'react';
 import type { ProductImage } from '@vitrine-kit/contracts';
 
 export interface ProductGalleryProps {
@@ -7,11 +9,12 @@ export interface ProductGalleryProps {
 }
 
 export function ProductGallery({ images, title }: ProductGalleryProps) {
-  const cover = images[0];
+  const [active, setActive] = useState(0);
+  const cover = images[active] ?? images[0];
   if (!cover) {
     return <div className="aspect-square w-full rounded-md bg-muted" aria-hidden="true" />;
   }
-  const rest = images.slice(1);
+
   return (
     <div className="vt-product-gallery">
       <img
@@ -19,15 +22,25 @@ export function ProductGallery({ images, title }: ProductGalleryProps) {
         alt={cover.alt ?? title}
         className="w-full rounded-md object-cover"
       />
-      {rest.length > 0 ? (
+      {images.length > 1 ? (
         <ul role="list" className="mt-gutter flex gap-gutter">
-          {rest.map((img, i) => (
+          {images.map((img, i) => (
             <li key={img.url}>
-              <img
-                src={img.url}
-                alt={img.alt ?? `${title} — image ${i + 2}`}
-                className="h-16 w-16 rounded-md object-cover"
-              />
+              <button
+                type="button"
+                onClick={() => setActive(i)}
+                aria-label={`Show image ${i + 1}`}
+                aria-current={i === active ? 'true' : undefined}
+                className={`rounded-md focus-visible:outline-none focus-visible:ring-2 ring-ring ${
+                  i === active ? 'ring-2 ring-ring' : 'opacity-80 hover:opacity-100'
+                }`}
+              >
+                <img
+                  src={img.url}
+                  alt={img.alt ?? `${title} — image ${i + 1}`}
+                  className="h-16 w-16 rounded-md object-cover"
+                />
+              </button>
             </li>
           ))}
         </ul>

package/kit/registry/product-page/files/components/product/ProductView.tsx

@@ -31,15 +31,15 @@ export function ProductView({ product }: ProductViewProps) {
               : formatPrice(price, currency)}
           </p>
         ) : null}
-        <Slot name="product.below-price" />
+        <Slot name="product.below-price" product={product} />
         <div className="vt-product-purchase">
           <Slot name="product.purchase" product={product} />
         </div>
         {product.description ? (
           <div className="vt-product-description text-fg">{product.description}</div>
         ) : null}
-        <Slot name="product.below-description" />
-        <Slot name="product.tabs" />
+        <Slot name="product.below-description" product={product} />
+        <Slot name="product.tabs" product={product} />
       </div>
     </article>
   );

package/kit/registry/reviews/docs/reviews.md

@@ -0,0 +1,11 @@
+# Feature: reviews
+
+Customer reviews stored as a JSON array on the product document (`reviews` field via blueprint).
+
+## Modules
+- `ReviewList` — renders existing reviews + form (`product.below-description`)
+- `POST /api/reviews` — appends a review (rate-limited)
+- `lib/reviews/blueprint.ts` — additive `reviews` json field on products
+
+## Note
+Moderation is not included — submissions are public immediately. Tighten access before production.

package/kit/registry/reviews/feature.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "../../schemas/feature.schema.json",
+  "name": "reviews",
+  "title": "Product reviews",
+  "kitVersion": "0.5.0",
+  "requiresContracts": ">=1.0.0 <2.0.0",
+  "tier": [
+    "catalog",
+    "simple-store",
+    "full-store"
+  ],
+  "registryDependencies": [
+    "product-page"
+  ],
+  "corePackages": {
+    "@vitrine-kit/core": ">=0.1.0"
+  },
+  "npm": [],
+  "files": [
+    {
+      "from": "files/components/reviews/",
+      "to": "components/reviews/"
+    },
+    {
+      "from": "files/lib/reviews/",
+      "to": "lib/reviews/"
+    },
+    {
+      "from": "files/app/",
+      "to": "app/"
+    }
+  ],
+  "config": {
+    "set": {
+      "features.reviews": true
+    }
+  },
+  "slots": [
+    {
+      "slot": "product.below-description",
+      "component": "ReviewList",
+      "order": 20
+    }
+  ],
+  "blueprint": {
+    "extend": "product",
+    "addFields": [
+      "reviews"
+    ]
+  },
+  "env": [],
+  "claudeDoc": "docs/reviews.md",
+  "conflicts": [],
+  "removable": true
+}

package/kit/registry/reviews/files/app/api/reviews/route.ts

@@ -0,0 +1,55 @@
+// POST /api/reviews — append a review onto the product.reviews JSON array.
+import { NextResponse } from 'next/server';
+import { getPayload } from 'payload';
+import config from '@payload-config';
+import { checkRateLimit, clientIpFromHeaders } from '@vitrine-kit/core';
+import { parseReviews, type ProductReview } from '@/lib/reviews/types';
+
+const RATE_LIMIT = { limit: 10, windowMs: 60_000 };
+
+export async function POST(req: Request) {
+  const { allowed, retryAfterMs } = checkRateLimit(`reviews:${clientIpFromHeaders(req.headers)}`, RATE_LIMIT);
+  if (!allowed) {
+    return NextResponse.json(
+      { error: 'too many requests' },
+      { status: 429, headers: { 'Retry-After': String(Math.ceil((retryAfterMs ?? 0) / 1000)) } },
+    );
+  }
+
+  const body = (await req.json().catch(() => null)) as {
+    productId?: unknown;
+    author?: unknown;
+    rating?: unknown;
+    body?: unknown;
+  } | null;
+  const productId = typeof body?.productId === 'string' ? body.productId : '';
+  const author = typeof body?.author === 'string' ? body.author.trim().slice(0, 80) : '';
+  const text = typeof body?.body === 'string' ? body.body.trim().slice(0, 2000) : '';
+  const rating = typeof body?.rating === 'number' ? body.rating : Number(body?.rating);
+  if (!productId || !author || !text || !Number.isInteger(rating) || rating < 1 || rating > 5) {
+    return NextResponse.json({ error: 'invalid body' }, { status: 400 });
+  }
+
+  const payload = await getPayload({ config });
+  const doc = await payload.findByID({ collection: 'products', id: productId, depth: 0 }).catch(() => null);
+  if (!doc) return NextResponse.json({ error: 'product not found' }, { status: 404 });
+
+  const review: ProductReview = {
+    id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+    author,
+    rating,
+    body: text,
+    createdAt: new Date().toISOString(),
+  };
+  const existing = parseReviews((doc as { reviews?: unknown }).reviews);
+  const reviews = [review, ...existing].slice(0, 100);
+
+  await payload.update({
+    collection: 'products',
+    id: productId,
+    data: { reviews },
+    overrideAccess: true,
+  });
+
+  return NextResponse.json({ review });
+}

package/kit/registry/reviews/files/components/reviews/ReviewList.tsx

@@ -0,0 +1,119 @@
+'use client';
+import { useMemo, useState, type FormEvent } from 'react';
+import type { Product } from '@vitrine-kit/contracts';
+import { parseReviews, type ProductReview } from '../../lib/reviews/types.js';
+
+export interface ReviewListProps {
+  product?: Product;
+}
+
+export function ReviewList({ product }: ReviewListProps) {
+  const initial = useMemo(
+    () => parseReviews(product?.extensions?.reviews),
+    [product?.extensions?.reviews],
+  );
+  const [reviews, setReviews] = useState<ProductReview[]>(initial);
+  const [author, setAuthor] = useState('');
+  const [rating, setRating] = useState(5);
+  const [body, setBody] = useState('');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!product) return null;
+
+  async function submit(e: FormEvent): Promise<void> {
+    e.preventDefault();
+    setPending(true);
+    setError(null);
+    try {
+      const res = await fetch('/api/reviews', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ productId: product!.id, author, rating, body }),
+      });
+      const data = (await res.json().catch(() => ({}))) as { review?: ProductReview; error?: string };
+      if (!res.ok || !data.review) {
+        setError(data.error ?? 'Could not submit review.');
+        return;
+      }
+      setReviews((prev) => [data.review!, ...prev]);
+      setAuthor('');
+      setBody('');
+      setRating(5);
+    } catch {
+      setError('Could not submit review.');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <section className="vt-reviews flex flex-col gap-gutter border-t border-border pt-section" aria-labelledby="reviews-heading">
+      <h2 id="reviews-heading" className="font-heading text-fg">
+        Reviews
+      </h2>
+      {reviews.length === 0 ? (
+        <p className="text-muted-fg">No reviews yet — be the first.</p>
+      ) : (
+        <ul role="list" className="flex flex-col gap-gutter">
+          {reviews.map((r) => (
+            <li key={r.id} className="flex flex-col gap-unit border-b border-border pb-unit">
+              <p className="text-fg">
+                <span className="font-medium">{r.author}</span>
+                <span className="text-muted-fg"> — {r.rating}/5</span>
+              </p>
+              <p className="text-fg">{r.body}</p>
+            </li>
+          ))}
+        </ul>
+      )}
+      <form onSubmit={submit} className="flex max-w-md flex-col gap-gutter">
+        <label className="flex flex-col gap-unit text-sm">
+          <span className="text-fg">Name</span>
+          <input
+            required
+            value={author}
+            onChange={(e) => setAuthor(e.target.value)}
+            className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+          />
+        </label>
+        <label className="flex flex-col gap-unit text-sm">
+          <span className="text-fg">Rating</span>
+          <select
+            value={rating}
+            onChange={(e) => setRating(Number(e.target.value))}
+            className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+          >
+            {[5, 4, 3, 2, 1].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="flex flex-col gap-unit text-sm">
+          <span className="text-fg">Review</span>
+          <textarea
+            required
+            rows={3}
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            className="rounded-md border border-input bg-surface px-gutter py-unit text-surface-fg focus-visible:outline-none focus-visible:ring-2 ring-ring"
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={pending}
+          className="w-fit rounded-md bg-primary px-gutter py-unit text-primary-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          {pending ? 'Submitting…' : 'Submit review'}
+        </button>
+        {error ? (
+          <p role="alert" className="text-danger">
+            {error}
+          </p>
+        ) : null}
+      </form>
+    </section>
+  );
+}

package/kit/registry/reviews/files/lib/reviews/blueprint.ts

@@ -0,0 +1,13 @@
+import type { Extend } from '@vitrine-kit/contracts';
+
+export function extendReviewsBlueprint(blueprint: { extend: Extend }): void {
+  blueprint.extend('product', {
+    addFields: [
+      {
+        name: 'reviews',
+        type: 'json',
+        label: 'Reviews',
+      },
+    ],
+  });
+}

package/kit/registry/reviews/files/lib/reviews/register.ts

@@ -0,0 +1,6 @@
+import { registerSlot } from '@vitrine-kit/core';
+import { ReviewList } from '../../components/reviews/ReviewList.js';
+
+export function registerReviewsSlots(): void {
+  registerSlot({ slot: 'product.below-description', component: ReviewList, order: 20 });
+}

package/kit/registry/reviews/files/lib/reviews/types.ts

@@ -0,0 +1,22 @@
+export interface ProductReview {
+  id: string;
+  author: string;
+  rating: number;
+  body: string;
+  createdAt: string;
+}
+
+export function parseReviews(value: unknown): ProductReview[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((r): r is ProductReview => {
+    if (!r || typeof r !== 'object') return false;
+    const o = r as Record<string, unknown>;
+    return (
+      typeof o.id === 'string' &&
+      typeof o.author === 'string' &&
+      typeof o.rating === 'number' &&
+      typeof o.body === 'string' &&
+      typeof o.createdAt === 'string'
+    );
+  });
+}

package/kit/registry/search/docs/search.md

@@ -0,0 +1,12 @@
+# Feature: search
+
+Header search form and `/search` results page over the `CatalogSource` contract.
+
+## Modules
+- `components/search/SearchForm` — GET form → `/search?q=` (slot `global.header-actions`)
+- `components/search/SearchResults` — results grid + empty state (hosts `search.*` slots)
+- `lib/search/data` — `loadSearch(source, term)` via `CatalogSource.search`
+- `app/(frontend)/search/page.tsx` — results page
+
+## Contracts
+`@vitrine-kit/contracts` (`CatalogSource.search`) + `@vitrine-kit/core` slots.

package/kit/registry/search/feature.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "../../schemas/feature.schema.json",
+  "name": "search",
+  "title": "Product search",
+  "kitVersion": "0.5.0",
+  "requiresContracts": ">=1.0.0 <2.0.0",
+  "tier": [
+    "catalog",
+    "simple-store",
+    "full-store"
+  ],
+  "registryDependencies": [
+    "catalog"
+  ],
+  "corePackages": {
+    "@vitrine-kit/core": ">=0.1.0"
+  },
+  "npm": [],
+  "files": [
+    {
+      "from": "files/components/search/",
+      "to": "components/search/"
+    },
+    {
+      "from": "files/lib/search/",
+      "to": "lib/search/"
+    },
+    {
+      "from": "files/app/",
+      "to": "app/"
+    }
+  ],
+  "config": {
+    "set": {
+      "features.search": true
+    }
+  },
+  "slots": [
+    {
+      "slot": "global.header-actions",
+      "component": "SearchForm",
+      "order": 5
+    }
+  ],
+  "env": [],
+  "claudeDoc": "docs/search.md",
+  "conflicts": [],
+  "removable": true
+}

package/kit/registry/search/files/app/(frontend)/search/page.tsx

@@ -0,0 +1,34 @@
+// Search results page. Query string `q` → CatalogSource.search.
+import type { Metadata } from 'next';
+import { getCatalogSource } from '@/lib/adapter';
+import { loadSearch } from '@/lib/search/data';
+import { SearchResults } from '@/components/search/SearchResults';
+
+interface PageProps {
+  searchParams: Promise<{ q?: string }>;
+}
+
+export async function generateMetadata({ searchParams }: PageProps): Promise<Metadata> {
+  const { q } = await searchParams;
+  const term = q?.trim() ?? '';
+  return {
+    title: term ? `Search: ${term}` : 'Search',
+    robots: { index: false, follow: true },
+  };
+}
+
+export default async function SearchPage({ searchParams }: PageProps) {
+  const { q } = await searchParams;
+  const term = q?.trim() ?? '';
+  const source = await getCatalogSource();
+  const products = term ? await loadSearch(source, term) : [];
+
+  return (
+    <div className="flex flex-col gap-section">
+      <header className="flex flex-col gap-unit">
+        <h1 className="font-heading text-fg">Search</h1>
+      </header>
+      <SearchResults term={term} products={products} />
+    </div>
+  );
+}

package/kit/registry/search/files/components/search/SearchForm.tsx

@@ -0,0 +1,32 @@
+// Header search form — GET /search?q= so results are shareable and crawlable.
+'use client';
+
+import { useChromeLabel } from '@/lib/i18n/useChromeLabel';
+
+export function SearchForm() {
+  const search = useChromeLabel('search');
+
+  return (
+    <search className="vt-search-form">
+      <form action="/search" method="get" className="flex items-center gap-unit">
+        <label className="sr-only" htmlFor="vt-search-q">
+          {search} products
+        </label>
+        <input
+          id="vt-search-q"
+          type="search"
+          name="q"
+          placeholder={search}
+          autoComplete="off"
+          className="w-28 rounded-md border border-input bg-surface px-unit py-unit text-sm text-surface-fg md:w-40 focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        />
+        <button
+          type="submit"
+          className="rounded-md border border-border px-unit py-unit text-sm text-fg transition hover:bg-muted focus-visible:outline-none focus-visible:ring-2 ring-ring"
+        >
+          {search}
+        </button>
+      </form>
+    </search>
+  );
+}

package/kit/registry/search/files/components/search/SearchResults.tsx

@@ -0,0 +1,87 @@
+// Search results — presentational. Hosts search.results-top / search.empty slots.
+// Inline cards (not ProductGrid) so the feature typechecks without cross-feature imports.
+import type { Product } from '@vitrine-kit/contracts';
+import { Slot } from '@vitrine-kit/core/react';
+
+export interface SearchResultsProps {
+  term: string;
+  products: Product[];
+}
+
+function formatPrice(amount: number, currency: string): string {
+  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(amount / 100);
+}
+
+export function SearchResults({ term, products }: SearchResultsProps) {
+  if (!term) {
+    return (
+      <p className="text-muted-fg">Type a query in the header search to find products.</p>
+    );
+  }
+
+  if (products.length === 0) {
+    return (
+      <div className="vt-search-empty flex flex-col gap-gutter">
+        <Slot name="search.empty" term={term} />
+        <p className="text-muted-fg">
+          No products matched <span className="text-fg">“{term}”</span>.
+        </p>
+        <a
+          href="/"
+          className="w-fit 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"
+        >
+          Browse catalog
+        </a>
+      </div>
+    );
+  }
+
+  return (
+    <div className="vt-search-results flex flex-col gap-gutter">
+      <Slot name="search.results-top" term={term} products={products} />
+      <p className="text-sm text-muted-fg">
+        {products.length} result{products.length === 1 ? '' : 's'} for “{term}”
+      </p>
+      <ul role="list" className="grid grid-cols-1 gap-gutter sm:grid-cols-2 lg:grid-cols-3">
+        {products.map((product) => {
+          const price = product.priceRange?.min ?? product.variants[0]?.price;
+          const currency = product.priceRange?.currency ?? product.variants[0]?.currency ?? 'USD';
+          const image = product.images[0];
+          return (
+            <li key={product.id}>
+              <article className="vt-product-card rounded-md border border-border bg-surface text-surface-fg">
+                <a
+                  href={`/products/${product.slug}`}
+                  className="block focus-visible:outline-none focus-visible:ring-2 ring-ring"
+                >
+                  {image ? (
+                    <img
+                      src={image.url}
+                      alt={image.alt ?? product.title}
+                      width={image.width}
+                      height={image.height}
+                      loading="lazy"
+                      className="aspect-square w-full rounded-t-md object-cover"
+                    />
+                  ) : (
+                    <div className="aspect-square w-full rounded-t-md bg-muted" aria-hidden="true" />
+                  )}
+                  <div className="p-gutter">
+                    <h3 className="font-heading text-fg">{product.title}</h3>
+                    {price != null ? (
+                      <p className="text-price">
+                        {product.priceRange && product.priceRange.min !== product.priceRange.max
+                          ? `From ${formatPrice(price, currency)}`
+                          : formatPrice(price, currency)}
+                      </p>
+                    ) : null}
+                  </div>
+                </a>
+              </article>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}