@fayz-ai/storefront 0.6.0 → 0.7.0

package/src/hooks/useStorefront.ts

@@ -0,0 +1,58 @@
+import { getShopProvider } from '@fayz-ai/shop/runtime'
+import type { CreateProductEnquiryInput } from '@fayz-ai/shop/types'
+import { useStorefrontConfig } from '../config'
+import { navigateTo } from '../router'
+import { useCatalogStore } from '../stores/catalog.store'
+import { useCartStore } from '../stores/cart.store'
+import type { ProductOptionSelection } from '../product-options'
+import type { Product } from '@fayz-ai/shop/types'
+
+export function useStorefront() {
+  return useStorefrontConfig()
+}
+
+export function useCatalog() {
+  const config = useStorefrontConfig()
+  const catalog = useCatalogStore()
+  return {
+    ...catalog,
+    catalogPath: config.catalogPath,
+    config,
+  }
+}
+
+export function useCart() {
+  return useCartStore()
+}
+
+export function useEnquiry() {
+  const config = useStorefrontConfig()
+  const createProductEnquiry = async (input: CreateProductEnquiryInput) => {
+    const provider = getShopProvider()
+    if (!provider.createProductEnquiry) {
+      throw new Error('The active shop provider does not support product enquiries.')
+    }
+    return provider.createProductEnquiry(input)
+  }
+
+  return {
+    enquiry: config.enquiry,
+    createProductEnquiry,
+  }
+}
+
+export function useStorefrontActions() {
+  const addItem = useCartStore((state) => state.addItem)
+  const openDrawer = useCartStore((state) => state.openDrawer)
+  const closeDrawer = useCartStore((state) => state.closeDrawer)
+  const { createProductEnquiry } = useEnquiry()
+
+  return {
+    navigateTo,
+    addToCart: (product: Product, quantity?: number, options?: ProductOptionSelection) =>
+      addItem(product, quantity, options),
+    openCart: openDrawer,
+    closeCart: closeDrawer,
+    createProductEnquiry,
+  }
+}

package/src/index.ts

@@ -1,15 +1,44 @@
 // Factory
-export { createStorefrontApp, initStorefrontRuntime, StorefrontShell } from './createStorefrontApp'
+export { createStorefront, createStorefrontApp, initStorefrontRuntime, StorefrontShell } from './createStorefrontApp'
+export type { CreateStorefrontOptions } from './createStorefrontApp'
+export {
+  defineStorefrontConfig,
+  defineStorefrontComponents,
+  defineStorefrontRoutes,
+  defineStorefrontSections,
+  defineStorefrontApp,
+} from './define'
 export type {
   StorefrontConfig,
   ResolvedStorefrontConfig,
   StorefrontRouteComponentProps,
   StorefrontRouteChrome,
+  StorefrontCommerceMode,
+  StorefrontImageLoadingConfig,
+  StorefrontImageLoadingMode,
   StorefrontRouteDefinition,
   StorefrontRouteKind,
   StorefrontRouteParams,
+  StorefrontEnquiryConfig,
 } from './config'
-export { useStorefrontConfig } from './config'
+export type {
+  StorefrontActions,
+  StorefrontComponents,
+  ProductCardProps,
+  ProductDetailProps,
+  ProductGalleryProps,
+  ProductPriceProps,
+  ProductActionsProps,
+  ProductEnquiryFormContractProps,
+  CategoryCardProps,
+  CollectionSectionProps,
+  HeroSectionContractProps,
+  MediaCarouselProps as MediaCarouselContractProps,
+  ProductSliderProps as ProductSliderContractProps,
+  StorefrontChromeProps,
+  StorefrontStateProps,
+} from './component-contracts'
+export { useStorefrontConfig, useStorefrontConfigOptional } from './config'
 
 // Manifest path (renderApp(defineStorefront(config)) / storefront scaffold)
 export { defineStorefront, StorefrontScaffold } from './scaffold'
@@ -41,17 +70,31 @@ export {
   getCustomerAuthAdapter,
   resolveAuthAdapter,
 } from './auth'
-export type { StorefrontAuthAdapter, EstablishSessionOptions } from './auth'
+export type { StorefrontAuthAdapter, StorefrontAuthConfig, EstablishSessionOptions } from './auth'
 export { useCatalogStore } from './stores/catalog.store'
 export type { CatalogState, CatalogSort } from './stores/catalog.store'
 
 // Hooks
-export { useProducts, useProduct, useCategories, useMyOrders, useDiscountValidator } from './hooks'
+export {
+  useProducts,
+  useProduct,
+  useCategories,
+  useStorefront,
+  useCatalog,
+  useCart,
+  useEnquiry,
+  useStorefrontActions,
+  useMyOrders,
+  useDiscountValidator,
+} from './hooks'
 
 // Components (for custom layouts)
 export { StorefrontHeader } from './components/StorefrontHeader'
+export { SmoothImage } from './components/SmoothImage'
+export type { SmoothImageProps } from './components/SmoothImage'
 export { ProductCard } from './components/ProductCard'
-export type { ProductCardProps } from './components/ProductCard'
+export { ProductEnquiryForm } from './components/ProductEnquiryForm'
+export type { ProductEnquiryFormProps } from './components/ProductEnquiryForm'
 export { OrderTrackingTimeline } from './components/OrderTrackingTimeline'
 export { ProductGrid } from './components/ProductGrid'
 export { FiltersPanel } from './components/FiltersPanel'
@@ -93,7 +136,7 @@ export type {
   HeroVariant,
   CardStyle,
 } from './theme'
-export type { HomeSection, HomeConfig, HeroSlide, NavLink, FooterConfig } from './sections'
+export type { StorefrontSection, HomeSection, HomeConfig, HeroSlide, MediaCarouselItem, NavLink, FooterConfig } from './sections'
 export { bannerPlaceholder } from './sections'
 export {
   storefrontTemplates,
@@ -105,10 +148,14 @@ export {
 export type { StorefrontTemplate, StorefrontTemplateId } from './presets'
 
 // Home sections (for custom compositions)
-export { HomePage } from './pages/HomePage'
+export { HomePage, StorefrontSections } from './pages/HomePage'
 export { HeroSection } from './components/sections/HeroSection'
+export { MediaCarousel } from './components/sections/MediaCarousel'
+export type { MediaCarouselProps } from './components/sections/MediaCarousel'
 export { CategoryShowcase } from './components/sections/CategoryShowcase'
 export { ProductRail } from './components/sections/ProductRail'
+export { ProductSlider } from './components/sections/ProductSlider'
+export type { ProductSliderProps } from './components/sections/ProductSlider'
 export {
   BenefitsRow,
   PromoBanner,
@@ -126,10 +173,13 @@ export type { RevealProps } from './motion'
 export { formatMoney, roundCents } from './format'
 export { TID } from './testids'
 export {
-  productCardSlotContract,
-  storefrontSlotContracts,
-} from './slot-contracts'
-export type { ProductCardSlotContract } from './slot-contracts'
+  productCardComponentContract,
+  storefrontComponentContracts,
+} from './component-selectors'
+export type {
+  ProductCardComponentContract,
+  ProductDetailComponentContract,
+} from './component-selectors'
 
 // ---------------------------------------------------------------------------
 // Front-door re-exports: storefront apps depend on @fayz-ai/storefront alone.

package/src/pages/CheckoutPage.tsx

@@ -18,6 +18,7 @@ import { useDiscountValidator } from '../hooks/useDiscountValidator'
 import { toast } from '../stores/toast.store'
 import { useStorefrontHead } from '../hooks/useStorefrontHead'
 import { SignInModal } from '../components/SignInModal'
+import { SmoothImage } from '../components/SmoothImage'
 
 interface CheckoutForm {
   email: string
@@ -471,7 +472,7 @@ export function CheckoutPage() {
             {cart.lines.map((line) => (
               <li key={line.lineId ?? line.productId} className="flex gap-3 text-sm">
                 <div className="relative h-16 w-16 flex-none overflow-hidden rounded-lg border bg-background">
-                  {line.imageUrl && <img src={line.imageUrl} alt={line.name} className="h-full w-full object-cover" />}
+                  {line.imageUrl && <SmoothImage src={line.imageUrl} alt={line.name} className="h-full w-full object-cover" />}
                   <span className="absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-muted-foreground px-1.5 text-[10px] font-bold text-background">
                     {line.quantity}
                   </span>

package/src/pages/HomePage.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
 import { renderBlocks } from '@fayz-ai/core'
-import type { HomeSection } from '../sections'
+import type { StorefrontSection } from '../sections'
 import { sectionsToBlocks } from '../blocks'
 
 // The home page is now a block tree resolved through the universal block
 // registry (see ../blocks). Section components and their props are unchanged;
 // only the dispatch mechanism moved from a switch to the registry, so the same
 // composition works from a pure-data AppManifest.
-export function HomePage({ sections }: { sections: HomeSection[] }) {
+export function StorefrontSections({ sections }: { sections: readonly StorefrontSection[] }) {
   return <main>{renderBlocks(sectionsToBlocks(sections))}</main>
 }
+
+export function HomePage({ sections }: { sections: readonly StorefrontSection[] }) {
+  return <StorefrontSections sections={sections} />
+}

package/src/pages/MyPurchasesPage.tsx

@@ -12,6 +12,7 @@ import { CustomerAccountShell, type AccountSection } from '../components/Custome
 import { OrderTrackingTimeline } from '../components/OrderTrackingTimeline'
 import { financialStatusBadge } from '../order-status'
 import { useStorefrontHead } from '../hooks/useStorefrontHead'
+import { SmoothImage } from '../components/SmoothImage'
 
 function AuthForm() {
   const [mode, setMode] = useState<'signin' | 'signup'>('signin')
@@ -155,7 +156,7 @@ function OrdersPanel() {
           <ul className="mt-3 flex flex-wrap gap-2">
             {order.items.map((item) => (
               <li key={item.id} className="flex items-center gap-2 rounded-lg border px-2 py-1 text-xs">
-                {item.imageUrl && <img src={item.imageUrl} alt={item.name} className="h-6 w-6 rounded object-cover" />}
+                {item.imageUrl && <SmoothImage src={item.imageUrl} alt={item.name} className="h-6 w-6 rounded object-cover" />}
                 {item.name} × {item.quantity}
               </li>
             ))}

package/src/pages/OrderConfirmationPage.tsx

@@ -10,6 +10,7 @@ import { CustomerAccountShell } from '../components/CustomerAccountShell'
 import { OrderTrackingTimeline } from '../components/OrderTrackingTimeline'
 import { financialStatusBadge } from '../order-status'
 import { useStorefrontHead } from '../hooks/useStorefrontHead'
+import { SmoothImage } from '../components/SmoothImage'
 
 const CONFETTI_COLORS = ['hsl(var(--primary))', '#f59e0b', '#10b981', '#3b82f6', '#ec4899']
 
@@ -139,7 +140,7 @@ export function OrderConfirmationPage({ orderId }: { orderId: string }) {
         <ul className="mt-8 space-y-3 text-left">
           {order.items.map((item) => (
             <li key={item.id} className="flex items-center gap-3 text-sm">
-              {item.imageUrl && <img src={item.imageUrl} alt={item.name} className="h-12 w-12 rounded-lg border object-cover" />}
+              {item.imageUrl && <SmoothImage src={item.imageUrl} alt={item.name} className="h-12 w-12 rounded-lg border object-cover" />}
               <span className="flex-1">
                 {item.name} <span className="text-muted-foreground">× {item.quantity}</span>
               </span>

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/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/testids.ts

@@ -15,6 +15,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 +56,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',