@fayz-ai/storefront 0.6.0 → 0.8.0

package/src/pages/ProductDetailPage.tsx

@@ -2,19 +2,24 @@ import React, { useEffect, useState } from 'react'
 import { ChevronLeft, RefreshCcw, ShieldCheck, Truck } from 'lucide-react'
 import { useProduct } from '../hooks/useProduct'
 import { useCartStore } from '../stores/cart.store'
-import { useStorefrontConfig } from '../config'
+import { getStorefrontComponents, useStorefrontConfig } from '../config'
 import { useStorefrontHead } from '../hooks/useStorefrontHead'
+import { useStorefrontActions } from '../hooks/useStorefront'
 import { Link } from '../router'
 import { Price } from '../components/Price'
 import { QuantityInput } from '../components/QuantityInput'
 import { ProductOptionSelector } from '../components/ProductOptionSelector'
 import { ProductSpecs } from '../components/ProductSpecs'
 import { RelatedProducts } from '../components/RelatedProducts'
+import { ProductEnquiryForm } from '../components/ProductEnquiryForm'
+import { SmoothImage } from '../components/SmoothImage'
 import { getProductOptionGroups, type ProductOptionSelection } from '../product-options'
+import { storefrontComponentContracts } from '../component-selectors'
 import { TID } from '../testids'
 
 export function ProductDetailPage({ slug }: { slug: string }) {
   const config = useStorefrontConfig()
+  const actions = useStorefrontActions()
   const { product, loading } = useProduct(slug)
   const addItem = useCartStore((s) => s.addItem)
   const [qty, setQty] = useState(1)
@@ -61,21 +66,52 @@ export function ProductDetailPage({ slug }: { slug: string }) {
   const soldOut = product.inventoryCount <= 0
   const lowStock = !soldOut && product.inventoryCount <= 5
   const image = product.images.find((i) => i.isPrimary) ?? product.images[0]
+  const components = getStorefrontComponents(config)
+  const ProductDetailComponent = components.ProductDetail
+  const addToCart = () => addItem(product, qty, selectedOptions)
+  const openEnquiry = () => {
+    document.getElementById('storefront-product-enquiry')?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
   const discountPct =
     product.compareAtPrice && product.compareAtPrice > product.price
       ? Math.round((1 - product.price / product.compareAtPrice) * 100)
       : 0
 
+  if (ProductDetailComponent) {
+    return (
+      <ProductDetailComponent
+        product={product}
+        config={config}
+        commerceMode={config.commerceMode}
+        primaryImage={image}
+        optionGroups={optionGroups}
+        selectedOptions={selectedOptions}
+        setSelectedOptions={setSelectedOptions}
+        quantity={qty}
+        setQuantity={setQty}
+        soldOut={soldOut}
+        lowStock={lowStock}
+        actions={actions}
+        addToCart={addToCart}
+        openEnquiry={openEnquiry}
+      />
+    )
+  }
+
   return (
-    <main className="mx-auto max-w-5xl px-4 py-8 sm:px-6">
+    <main {...storefrontComponentContracts.productDetail.root} className="mx-auto max-w-5xl px-4 py-8 sm:px-6">
       <Link to="/" className="mb-6 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
         <ChevronLeft className="h-4 w-4" /> Continuar comprando
       </Link>
 
       <div className="grid animate-fade-up gap-10 md:grid-cols-2">
-        <div className="group overflow-hidden border bg-muted" style={{ borderRadius: 'var(--sf-radius-card)' }}>
+        <div
+          {...storefrontComponentContracts.productDetail.gallery}
+          className="group overflow-hidden border bg-muted"
+          style={{ borderRadius: 'var(--sf-radius-card)' }}
+        >
           {image && (
-            <img
+            <SmoothImage
               src={image.url}
               alt={image.altText ?? product.name}
               className="aspect-square w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
@@ -100,43 +136,47 @@ export function ProductDetailPage({ slug }: { slug: string }) {
             {product.name}
           </h1>
 
-          <div className="mt-3 flex items-center gap-3">
-            <div className="text-xl">
-              <Price
-                value={product.price}
-                compareAt={product.compareAtPrice}
-                testId={TID.pdpPrice}
-                compareTestId={TID.pdpComparePrice}
-              />
+          {config.commerceMode === 'checkout' && (
+            <div className="mt-3 flex items-center gap-3">
+              <div className="text-xl">
+                <Price
+                  value={product.price}
+                  compareAt={product.compareAtPrice}
+                  testId={TID.pdpPrice}
+                  compareTestId={TID.pdpComparePrice}
+                />
+              </div>
+              {discountPct > 0 && (
+                <span className="rounded-full bg-primary/10 px-2.5 py-1 text-xs font-bold text-primary">
+                  −{discountPct}%
+                </span>
+              )}
             </div>
-            {discountPct > 0 && (
-              <span className="rounded-full bg-primary/10 px-2.5 py-1 text-xs font-bold text-primary">
-                −{discountPct}%
-              </span>
-            )}
-          </div>
+          )}
 
           <p data-testid={TID.pdpDescription} className="mt-5 leading-relaxed text-muted-foreground">
             {product.description}
           </p>
 
-          <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
-            {soldOut ? (
-              <span className="inline-flex items-center gap-2 font-medium text-muted-foreground">
-                <span className="h-2 w-2 rounded-full bg-muted-foreground" /> Sem estoque
-              </span>
-            ) : lowStock ? (
-              <span className="inline-flex items-center gap-2 font-semibold text-amber-600">
-                <span className="h-2 w-2 animate-pulse rounded-full bg-amber-500" />
-                Últimas unidades — só {product.inventoryCount} restantes
-              </span>
-            ) : (
-              <span className="inline-flex items-center gap-2 font-medium text-emerald-600">
-                <span className="h-2 w-2 rounded-full bg-emerald-500" /> Em estoque
-              </span>
-            )}
-            {product.sku && <span className="text-muted-foreground">SKU: {product.sku}</span>}
-          </div>
+          {config.commerceMode === 'checkout' && (
+            <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
+              {soldOut ? (
+                <span className="inline-flex items-center gap-2 font-medium text-muted-foreground">
+                  <span className="h-2 w-2 rounded-full bg-muted-foreground" /> Sem estoque
+                </span>
+              ) : lowStock ? (
+                <span className="inline-flex items-center gap-2 font-semibold text-amber-600">
+                  <span className="h-2 w-2 animate-pulse rounded-full bg-amber-500" />
+                  Últimas unidades — só {product.inventoryCount} restantes
+                </span>
+              ) : (
+                <span className="inline-flex items-center gap-2 font-medium text-emerald-600">
+                  <span className="h-2 w-2 rounded-full bg-emerald-500" /> Em estoque
+                </span>
+              )}
+              {product.sku && <span className="text-muted-foreground">SKU: {product.sku}</span>}
+            </div>
+          )}
 
           <ProductOptionSelector
             groups={optionGroups}
@@ -144,39 +184,75 @@ export function ProductDetailPage({ slug }: { slug: string }) {
             onChange={setSelectedOptions}
           />
 
-          <div className="mt-8 flex items-center gap-4">
-            <QuantityInput
-              value={qty}
-              onChange={setQty}
-              max={soldOut ? 1 : product.inventoryCount}
-              testId={TID.pdpQtyInput}
-            />
-            <button
-              type="button"
-              data-testid={TID.pdpAddToCart}
-              disabled={soldOut}
-              onClick={() => addItem(product, qty, selectedOptions)}
-              className="sf-cta flex-1 bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:translate-y-0"
-              style={{ borderRadius: 'var(--sf-radius-button)' }}
-            >
-              {soldOut ? 'Esgotado' : 'Adicionar ao carrinho'}
-            </button>
+          <div {...storefrontComponentContracts.productDetail.actions} className="mt-8">
+            {config.commerceMode === 'checkout' ? (
+              <div className="flex items-center gap-4">
+                <QuantityInput
+                  value={qty}
+                  onChange={setQty}
+                  max={soldOut ? 1 : product.inventoryCount}
+                  testId={TID.pdpQtyInput}
+                />
+                <button
+                  type="button"
+                  data-testid={TID.pdpAddToCart}
+                  disabled={soldOut}
+                  onClick={addToCart}
+                  className="sf-cta flex-1 bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:translate-y-0"
+                  style={{ borderRadius: 'var(--sf-radius-button)' }}
+                >
+                  {soldOut ? 'Esgotado' : 'Adicionar ao carrinho'}
+                </button>
+              </div>
+            ) : config.commerceMode === 'enquiry' ? (
+              <button
+                type="button"
+                  {...storefrontComponentContracts.productDetail.enquiryButton}
+                onClick={openEnquiry}
+                className="sf-cta w-full bg-primary py-3.5 font-semibold text-primary-foreground shadow-md transition-all hover:-translate-y-0.5 hover:shadow-lg"
+                style={{ borderRadius: 'var(--sf-radius-button)' }}
+              >
+                {config.enquiry.label}
+              </button>
+            ) : (
+              <Link
+                to={config.catalogPath}
+                className="inline-flex border px-5 py-3 text-sm font-semibold transition-colors hover:bg-muted"
+                style={{ borderRadius: 'var(--sf-radius-button)' }}
+              >
+                Voltar ao catálogo
+              </Link>
+            )}
           </div>
 
-          <div className="mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center">
-            <div className="flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
-              <Truck className="h-5 w-5 text-primary" /> Envio rápido
-            </div>
-            <div className="flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
-              <RefreshCcw className="h-5 w-5 text-primary" /> Troca fácil
-            </div>
-            <div className="flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
-              <ShieldCheck className="h-5 w-5 text-primary" /> Pagamento seguro
+          {config.commerceMode === 'checkout' && (
+            <div className="mt-6 grid grid-cols-3 gap-3 border-t pt-6 text-center">
+              <div className="flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
+                <Truck className="h-5 w-5 text-primary" /> Envio rápido
+              </div>
+              <div className="flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
+                <RefreshCcw className="h-5 w-5 text-primary" /> Troca fácil
+              </div>
+              <div className="flex flex-col items-center gap-1.5 text-[11px] font-medium text-muted-foreground">
+                <ShieldCheck className="h-5 w-5 text-primary" /> Pagamento seguro
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
 
+      {config.commerceMode === 'enquiry' && (
+        <section id="storefront-product-enquiry" className="mt-12 border-t pt-10">
+          <div className="mx-auto max-w-3xl">
+            <h2 className="sf-heading text-2xl font-semibold">Need more information?</h2>
+            <p className="mt-2 text-muted-foreground">Send an enquiry about this product.</p>
+            <div className="mt-6">
+              <ProductEnquiryForm product={product} />
+            </div>
+          </div>
+        </section>
+      )}
+
       <ProductSpecs product={product} />
       <RelatedProducts product={product} />
     </main>

package/src/presets.ts

@@ -248,11 +248,77 @@ export const atelierTemplate: StorefrontTemplate = {
   }),
 }
 
+/** food — warm appetizing delivery (steakhouse / burger / comfort food): dark inviting
+ *  header, ember CTA, cream canvas, rounded cards, menu-first home with "mais pedidos"
+ *  rail and social proof. Built for restaurant/food stores — override to go fully dark. */
+export const foodTemplate: StorefrontTemplate = {
+  id: 'food',
+  inspiration: 'Delivery / restaurant storefront',
+  announcement: 'ENTREGA GRÁTIS ACIMA DE R$ 150 · PEÇA JÁ',
+  theme: {
+    name: 'food',
+    colors: {
+      background: '30 33% 97%',
+      foreground: '20 14% 15%',
+      primary: '14 84% 50%',
+      primaryForeground: '0 0% 100%',
+      card: '30 33% 99%',
+      cardForeground: '20 14% 15%',
+      muted: '28 20% 92%',
+      mutedForeground: '22 10% 42%',
+      border: '28 18% 85%',
+      headerBackground: '20 14% 11%',
+      headerForeground: '30 24% 96%',
+      announcementBackground: '14 84% 50%',
+      announcementForeground: '0 0% 100%',
+    },
+    font: { heading: 'Poppins', body: 'Inter' },
+    radius: 'round',
+    header: { variant: 'classic' },
+    productCard: { style: 'card', imageAspect: 'square' },
+  },
+  home: (storeName, images) => ({
+    sections: [
+      {
+        type: 'hero',
+        variant: 'banner',
+        height: 'tall',
+        slides: [
+          { title: 'Sabor de verdade, na sua porta', subtitle: `${storeName} — feito na hora, do jeito que você ama.`, cta: 'Ver cardápio', href: '/catalog', hue: 20, image: images?.hero?.[0] },
+        ],
+      },
+      {
+        type: 'benefits',
+        items: [
+          { icon: 'Flame', title: 'Feito na hora', text: 'Preparado com capricho' },
+          { icon: 'Truck', title: 'Entrega rápida', text: 'Frete grátis acima de R$ 150' },
+          { icon: 'CreditCard', title: 'Pagamento fácil', text: 'Pix, cartão e mais' },
+        ],
+      },
+      { type: 'categories', style: 'tiles', title: 'Nosso cardápio' },
+      { type: 'products', title: 'Mais pedidos', eyebrow: 'favoritos da casa', filter: 'all', limit: 8 },
+      { type: 'banner', title: 'Combo do dia', eyebrow: 'oferta', subtitle: 'Seleção especial com desconto', cta: 'Aproveitar', hue: 14, image: images?.banners?.[0] },
+      { type: 'products', title: 'Novidades no cardápio', filter: 'new', limit: 4 },
+      {
+        type: 'testimonials',
+        title: 'O que dizem por aí',
+        items: [
+          { quote: 'Chegou quentinho e absurdo de bom. Virei cliente!', author: 'Rafael M.' },
+          { quote: 'Sabor de restaurante em casa, sem complicação.', author: 'Beatriz L.' },
+          { quote: 'Entrega rápida e porção generosa. Recomendo demais.', author: 'Diego S.' },
+        ],
+      },
+      { type: 'newsletter', title: 'Receba nossas ofertas', subtitle: 'Promoções e novidades do cardápio, direto no seu e-mail.' },
+    ],
+  }),
+}
+
 export const storefrontTemplates = {
   mare: mareTemplate,
   sertao: sertaoTemplate,
   volt: voltTemplate,
   atelier: atelierTemplate,
+  food: foodTemplate,
 } as const
 
 export type StorefrontTemplateId = keyof typeof storefrontTemplates

package/src/scaffold.tsx

@@ -80,7 +80,7 @@ function manifestToStorefrontConfig(manifest: AppManifest, surfaceName: string):
       provider: manifest.backend?.provider as StorefrontBackendProvider,
       url: manifest.backend?.url,
     },
-    slots: runtimeConfig?.slots,
+    components: runtimeConfig?.components,
     routes: runtimeConfig?.routes,
     provider: runtimeConfig?.provider,
     auth: runtimeConfig?.auth,

package/src/sections.ts

@@ -1,4 +1,5 @@
 import type { HeroVariant } from './theme'
+import type React from 'react'
 
 // ---------------------------------------------------------------------------
 // Home-page section blueprint — the storefront's PageConfig equivalent.
@@ -19,8 +20,27 @@ export interface HeroSlide {
   boxed?: boolean
 }
 
-export type HomeSection =
+export interface MediaCarouselItem {
+  title: string
+  subtitle?: string
+  eyebrow?: string
+  cta?: string
+  href?: string
+  image: string
+  imageAlt?: string
+  align?: 'start' | 'center' | 'end'
+}
+
+export type StorefrontSection =
   | { type: 'hero'; variant: HeroVariant; slides: HeroSlide[]; height?: 'tall' | 'medium' }
+  | {
+      type: 'mediaCarousel'
+      items: MediaCarouselItem[]
+      height?: 'medium' | 'tall' | 'screen'
+      autoplayMs?: number
+      overlay?: 'dark' | 'soft' | 'none'
+      className?: string
+    }
   | { type: 'categories'; style: 'bubbles' | 'tiles'; title?: string }
   | {
       type: 'products'
@@ -32,14 +52,30 @@ export type HomeSection =
       filter?: 'sale' | 'new' | 'all'
       limit?: number
     }
+  | {
+      type: 'productSlider'
+      title: string
+      subtitle?: string
+      eyebrow?: string
+      filter?: 'sale' | 'new' | 'all'
+      categoryName?: string
+      collection?: string
+      limit?: number
+      cta?: string
+      href?: string
+      className?: string
+    }
   | { type: 'benefits'; items: Array<{ icon: string; title: string; text?: string }> }
   | { type: 'banner'; title: string; subtitle?: string; eyebrow?: string; cta?: string; href?: string; image?: string; hue?: number }
   | { type: 'manifesto'; title?: string; text: string }
   | { type: 'testimonials'; title?: string; items: Array<{ quote: string; author: string }> }
   | { type: 'newsletter'; title?: string; subtitle?: string }
 
+/** @deprecated Use StorefrontSection. Kept for existing generated stores. */
+export type HomeSection = StorefrontSection
+
 export interface HomeConfig {
-  sections: HomeSection[]
+  sections: readonly StorefrontSection[]
 }
 
 export interface NavLink {
@@ -51,6 +87,17 @@ export interface FooterConfig {
   about?: string
   contact?: { phone?: string; email?: string; address?: string }
   social?: Array<{ label: string; href: string }>
+  credit?: React.ReactNode
+  labels?: {
+    categories?: string
+    navigation?: string
+    contact?: string
+    viewAll?: string
+    purchases?: string
+    privacy?: string
+    terms?: string
+    returns?: string
+  }
 }
 
 /** Wide gradient SVG data-URI — deterministic hero/banner art, no network. */

package/src/stores/cart.store.ts

@@ -40,11 +40,16 @@ export interface CartState {
   clear(): void
   openDrawer(): void
   closeDrawer(): void
+  /** Drop persisted lines the active backend can no longer resolve (e.g. a cart
+   *  built in an earlier mock-mode session, whose ids don't exist live). The
+   *  resolver returns false only for a definitive "not found"; on error it must
+   *  return true so a transient failure never discards a legit line. */
+  reconcile(resolve: (line: CartLine) => Promise<boolean>): Promise<void>
 }
 
 export const useCartStore = create<CartState>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       lines: [],
       discountCode: null,
       discountPercent: 0,
@@ -106,6 +111,16 @@ export const useCartStore = create<CartState>()(
       clear: () => set({ lines: [], discountCode: null, discountPercent: 0 }),
       openDrawer: () => set({ isOpen: true }),
       closeDrawer: () => set({ isOpen: false, justAddedLineId: null }),
+
+      reconcile: async (resolve) => {
+        const lines = get().lines
+        if (lines.length === 0) return
+        const keep = await Promise.all(
+          lines.map((line) => resolve(line).catch(() => true)),
+        )
+        const kept = lines.filter((_, i) => keep[i])
+        if (kept.length !== lines.length) set({ lines: kept })
+      },
     }),
     {
       name: 'fayz.storefront.cart.v1',

package/src/testids.ts

@@ -3,6 +3,7 @@
 export const TID = {
   // header
   headerSearch: 'header-search',
+  headerSearchToggle: 'header-search-toggle',
   cartButton: 'cart-button',
   cartCount: 'cart-count',
   accountLink: 'account-link',
@@ -15,6 +16,13 @@ export const TID = {
   hero: 'home-hero',
   heroPrev: 'hero-prev',
   heroNext: 'hero-next',
+  mediaCarousel: 'media-carousel',
+  mediaCarouselPrev: 'media-carousel-prev',
+  mediaCarouselNext: 'media-carousel-next',
+  productSlider: 'product-slider',
+  productSliderViewport: 'product-slider-viewport',
+  productSliderPrev: 'product-slider-prev',
+  productSliderNext: 'product-slider-next',
   categoryShowcase: 'category-showcase',
   productRail: 'product-rail',
   benefits: 'benefits-row',
@@ -49,6 +57,19 @@ export const TID = {
   productOptionValue: (id: string, value: string) => `product-option-${id.toLowerCase().replace(/\s+/g, '-')}-${value.toLowerCase().replace(/\s+/g, '-')}`,
   pdpQtyInput: 'pdp-qty-input',
   pdpAddToCart: 'pdp-add-to-cart',
+  pdpRoot: 'pdp-root',
+  pdpGallery: 'pdp-gallery',
+  pdpActions: 'pdp-actions',
+  pdpEnquiryButton: 'pdp-enquiry-button',
+  enquiryForm: 'enquiry-form',
+  enquiryName: 'enquiry-name',
+  enquiryEmail: 'enquiry-email',
+  enquiryPhone: 'enquiry-phone',
+  enquirySubject: 'enquiry-subject',
+  enquiryMessage: 'enquiry-message',
+  enquirySubmit: 'enquiry-submit',
+  enquirySuccess: 'enquiry-success',
+  enquiryError: 'enquiry-error',
   // cart
   cartDrawer: 'cart-drawer',
   cartLine: 'cart-line',

package/src/theme.ts

@@ -33,6 +33,10 @@ export interface StorefrontThemeColors {
   /** Announcement bar */
   announcementBackground?: string
   announcementForeground?: string
+  /** Secondary brand accent (e.g. a gourmet gold beside the primary). Emitted
+   *  as `--sf-accent` / `--sf-accent-foreground` and the `accent` tailwind token. */
+  accent?: string
+  accentForeground?: string
 }
 
 export interface StorefrontThemeFont {
@@ -40,7 +44,11 @@ export interface StorefrontThemeFont {
   heading: string
   /** Body font, e.g. 'Rubik' */
   body: string
-  /** Google Fonts families to load (defaults to heading+body) */
+  /** Optional oversized display face for hero words (emitted as `--sf-font-display`). */
+  display?: string
+  /** Optional serif accent for quotes/editorial (emitted as `--sf-font-serif`). */
+  serif?: string
+  /** Google Fonts families to load (defaults to heading+body+display+serif) */
   googleFonts?: string[]
   /** Fallback stack — default sans-serif; use 'serif' for editorial themes */
   fallback?: 'sans-serif' | 'serif'
@@ -56,6 +64,13 @@ export interface StorefrontTheme {
     variant?: HeaderVariant
     /** Uppercase nav links (premium retail tone) */
     uppercaseNav?: boolean
+    /** Show category shortcuts after primary nav links. Default true. */
+    showCategories?: boolean
+    /** Show the storefront search in the header. Default true. */
+    showSearch?: boolean
+    /** Header search presentation: a full input ('full', default) or a compact
+     *  icon button that expands into an input on click ('icon'). */
+    searchStyle?: 'full' | 'icon'
   }
   productCard?: {
     style?: CardStyle
@@ -63,6 +78,11 @@ export interface StorefrontTheme {
   }
   /** Uppercase CTA buttons with letter-spacing (Uyuni/Flex tone) */
   uppercaseButtons?: boolean
+  /** Brand-token passthrough. Each entry is emitted verbatim as a `--<key>` CSS
+   *  custom property, so a store can add gradients, glows, extra colors, or
+   *  letter-spacing the fixed schema doesn't enumerate — without editing the SDK.
+   *  e.g. { 'grad-ember': 'linear-gradient(...)', 'glow-ember': '0 0 0 1px ...' }. */
+  tokens?: Record<string, string>
 }
 
 const RADIUS_MAP: Record<StorefrontRadius, { button: string; card: string; input: string }> = {
@@ -86,6 +106,8 @@ const COLOR_VAR_MAP: Record<keyof StorefrontThemeColors, string> = {
   headerForeground: '--sf-header-fg',
   announcementBackground: '--sf-announcement-bg',
   announcementForeground: '--sf-announcement-fg',
+  accent: '--sf-accent',
+  accentForeground: '--sf-accent-foreground',
 }
 
 export function themeToCss(theme: StorefrontTheme): string {
@@ -107,6 +129,14 @@ export function themeToCss(theme: StorefrontTheme): string {
     const fallback = theme.font.fallback ?? 'sans-serif'
     lines.push(`--font-family: '${theme.font.body}', ${fallback};`)
     lines.push(`--sf-font-heading: '${theme.font.heading}', ${fallback};`)
+    if (theme.font.display) lines.push(`--sf-font-display: '${theme.font.display}', ${fallback};`)
+    if (theme.font.serif) lines.push(`--sf-font-serif: '${theme.font.serif}', serif;`)
+  }
+
+  // Brand-token passthrough — emit each entry as a raw CSS custom property.
+  for (const [key, value] of Object.entries(theme.tokens ?? {})) {
+    const name = key.startsWith('--') ? key : `--${key}`
+    lines.push(`${name}: ${value};`)
   }
 
   const radius = RADIUS_MAP[theme.radius ?? 'soft']
@@ -131,7 +161,11 @@ export function themeToCss(theme: StorefrontTheme): string {
 
 function googleFontsHref(theme: StorefrontTheme): string | null {
   if (!theme.font) return null
-  const families = theme.font.googleFonts ?? [theme.font.heading, theme.font.body]
+  const families =
+    theme.font.googleFonts ??
+    [theme.font.heading, theme.font.body, theme.font.display, theme.font.serif].filter(
+      (f): f is string => Boolean(f),
+    )
   const unique = [...new Set(families)]
   const params = unique
     .map((f) => `family=${encodeURIComponent(f).replace(/%20/g, '+')}:wght@300;400;500;600;700`)

package/src/workflows/checkout.ts

@@ -67,7 +67,7 @@ export async function placeStorefrontOrder({
   }
 
   // Trusted placement: send only product ids + quantities. The provider
-  // (shop_place_order RPC on Supabase, in-memory parity in mock) re-reads
+  // (shop_place_order RPC on Supabase, in-memory provider in mock) re-reads
   // prices, validates the discount, and decrements inventory server-side.
   const order = await provider.placeOrder({
     customerId: customerId ?? undefined,
@@ -84,7 +84,10 @@ export async function placeStorefrontOrder({
   })
 
   if (markPaid) {
-    await provider.updateOrder(order.id, { financialStatus: 'paid' })
+    // Prefer the RPC seam — anon storefronts have no UPDATE grant on the
+    // orders table, so a direct updateOrder 401s on pool backends.
+    if (provider.confirmPayment) await provider.confirmPayment(order.id)
+    else await provider.updateOrder(order.id, { financialStatus: 'paid' })
   }
 
   return { order, customerId: customerId ?? order.customerId ?? '' }

package/dist/slot-contracts.d.ts

@@ -1,34 +0,0 @@
-/**
- * Stable selectors that custom storefront slots must preserve.
- *
- * Apps can fully customize the visual tree, but catalog/product-rail slots still
- * need these anchors so checkout smoke tests, QA, and agents can operate stores.
- */
-export declare const productCardSlotContract: {
-    readonly root: {
-        readonly 'data-testid': "product-card";
-    };
-    readonly name: {
-        readonly 'data-testid': "product-card-name";
-    };
-    readonly priceTestId: "product-card-price";
-    readonly addButton: {
-        readonly 'data-testid': "product-card-add";
-    };
-};
-export declare const storefrontSlotContracts: {
-    readonly productCard: {
-        readonly root: {
-            readonly 'data-testid': "product-card";
-        };
-        readonly name: {
-            readonly 'data-testid': "product-card-name";
-        };
-        readonly priceTestId: "product-card-price";
-        readonly addButton: {
-            readonly 'data-testid': "product-card-add";
-        };
-    };
-};
-export type ProductCardSlotContract = typeof productCardSlotContract;
-//# sourceMappingURL=slot-contracts.d.ts.map

package/dist/slot-contracts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slot-contracts.d.ts","sourceRoot":"","sources":["../src/slot-contracts.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;;;CAK1B,CAAA;AAEV,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAE1B,CAAA;AAEV,MAAM,MAAM,uBAAuB,GAAG,OAAO,uBAAuB,CAAA"}