@fayz-ai/storefront 0.9.0 → 0.11.0

package/src/pages/ProductDetailPage.tsx

@@ -1,264 +0,0 @@
-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 { 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 { ProductGallery } from '../components/ProductGallery'
-import { DeliveryEstimator } from '../components/DeliveryEstimator'
-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)
-  const [selectedOptions, setSelectedOptions] = useState<ProductOptionSelection>({})
-
-  const optionGroups = product ? getProductOptionGroups(product) : []
-  useStorefrontHead({
-    title: product ? `${product.name} — ${config.name}` : config.name,
-    description: product?.description,
-  })
-
-  useEffect(() => {
-    if (!product) return
-    const defaults = Object.fromEntries(
-      getProductOptionGroups(product).map((group) => [group.label, group.values[0] ?? '']),
-    )
-    setSelectedOptions(defaults)
-  }, [product?.id])
-
-  if (loading) {
-    return (
-      <main className="mx-auto max-w-5xl px-4 py-8 sm:px-6">
-        <div className="grid animate-pulse gap-10 md:grid-cols-2">
-          <div className="aspect-square rounded-2xl bg-muted" />
-          <div className="space-y-4 py-4">
-            <div className="h-8 w-3/4 rounded bg-muted" />
-            <div className="h-6 w-1/3 rounded bg-muted" />
-            <div className="h-24 rounded bg-muted" />
-          </div>
-        </div>
-      </main>
-    )
-  }
-
-  if (!product) {
-    return (
-      <main className="mx-auto max-w-5xl px-4 py-20 text-center sm:px-6">
-        <p className="text-lg text-muted-foreground">Produto não encontrado.</p>
-        <Link to="/" className="mt-4 inline-block text-primary underline">Voltar à loja</Link>
-      </main>
-    )
-  }
-
-  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
-  // Honours the ProductGallery override contract, which has existed in
-  // component-contracts.ts since before any component implemented it.
-  const GalleryComponent = components.ProductGallery ?? ProductGallery
-  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 {...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 grid-cols-1 gap-10 md:grid-cols-2">
-        <GalleryComponent
-          product={product}
-          images={product.images}
-          primaryImage={image}
-          config={config}
-          commerceMode={config.commerceMode}
-        />
-
-        <div className="flex flex-col py-2 lg:sticky lg:top-24 lg:self-start">
-          <nav className="mb-3 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
-            <Link to="/" className="transition-colors hover:text-foreground">Início</Link>
-            {product.categoryName && (
-              <>
-                <span aria-hidden>/</span>
-                <span>{product.categoryName}</span>
-              </>
-            )}
-            <span aria-hidden>/</span>
-            <span className="text-foreground">{product.name}</span>
-          </nav>
-
-          <h1 data-testid={TID.pdpName} className="sf-heading text-3xl font-bold tracking-tight">
-            {product.name}
-          </h1>
-
-          {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>
-          )}
-
-          <p data-testid={TID.pdpDescription} className="mt-5 leading-relaxed text-muted-foreground">
-            {product.description}
-          </p>
-
-          {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}
-            value={selectedOptions}
-            onChange={setSelectedOptions}
-          />
-
-          <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>
-
-          {/* Asked here, before the cart exists: "do you deliver to me and for
-              how much" is the question that decides whether this page converts,
-              and it used to be answerable only at the end of checkout. */}
-          {config.commerceMode === 'checkout' && <DeliveryEstimator />}
-
-          {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>
-
-      {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

@@ -1,324 +0,0 @@
-import type { StorefrontTheme } from './theme'
-import type { HomeConfig } from './sections'
-
-// ---------------------------------------------------------------------------
-// Template presets — recreations of the four Nuvemshop patterns selected in
-// docs/storefront-templates-research.md. Each is { theme, home() } so an app
-// (or the Fayz agent) starts from a complete professional store and overrides
-// copy, colors, hero images and sections — the saas-core theming workflow.
-// ---------------------------------------------------------------------------
-
-/** Real imagery for a template home — resolved at build time (e.g. via
- *  scripts/fetch-unsplash.mjs); falls back to gradient placeholders when omitted. */
-export interface TemplateImages {
-  hero?: Array<string | undefined>
-  banners?: Array<string | undefined>
-}
-
-export interface StorefrontTemplate {
-  id: string
-  /** The Nuvemshop pattern this recreates */
-  inspiration: string
-  theme: StorefrontTheme
-  /** Default home blueprint — pass the store name for copy interpolation */
-  home: (storeName: string, images?: TemplateImages) => HomeConfig
-  announcement?: string
-}
-
-/** maré — elegant fashion (Rio): airy warm paper, olive ink, sand CTA, centered logo. */
-export const mareTemplate: StorefrontTemplate = {
-  id: 'mare',
-  inspiration: 'Nuvemshop Rio',
-  announcement: 'FRETE GRÁTIS EM COMPRAS ACIMA DE R$ 300',
-  theme: {
-    name: 'mare',
-    colors: {
-      background: '40 14% 93%',
-      foreground: '90 8% 38%',
-      primary: '42 32% 61%',
-      primaryForeground: '40 30% 12%',
-      card: '40 20% 97%',
-      cardForeground: '90 10% 25%',
-      muted: '40 12% 88%',
-      mutedForeground: '90 6% 50%',
-      border: '40 10% 82%',
-      announcementBackground: '90 10% 30%',
-      announcementForeground: '40 20% 95%',
-    },
-    font: { heading: 'Plus Jakarta Sans', body: 'Plus Jakarta Sans' },
-    radius: 'soft',
-    header: { variant: 'centered' },
-    productCard: { style: 'editorial', imageAspect: 'portrait' },
-  },
-  home: (storeName, images) => ({
-    sections: [
-      {
-        type: 'hero',
-        variant: 'banner',
-        height: 'tall',
-        slides: [
-          { title: 'Feito para durar', subtitle: `A nova coleção ${storeName} chegou — peças atemporais em materiais honestos.`, cta: 'Ver coleção', hue: 75, image: images?.hero?.[0] },
-        ],
-      },
-      { type: 'categories', style: 'bubbles' },
-      { type: 'products', title: 'Destaques', filter: 'all', limit: 4 },
-      { type: 'banner', title: 'Até 30% off', eyebrow: 'por tempo limitado', subtitle: 'Peças selecionadas da estação', cta: 'Aproveitar', hue: 40, image: images?.banners?.[0] },
-      { type: 'products', title: 'Promoções', filter: 'sale', limit: 4 },
-      { type: 'products', title: 'Lançamentos', filter: 'new', limit: 4 },
-      { type: 'newsletter', title: 'Assine nossa newsletter', subtitle: 'Novidades e ofertas exclusivas, sem spam.' },
-    ],
-  }),
-}
-
-/** sertão — editorial organic (Uyuni): cream paper, coffee serif ink, boxed hero, manifesto. */
-export const sertaoTemplate: StorefrontTemplate = {
-  id: 'sertao',
-  inspiration: 'Nuvemshop Uyuni',
-  theme: {
-    name: 'sertao',
-    colors: {
-      background: '30 100% 98%',
-      foreground: '28 42% 32%',
-      primary: '28 42% 32%',
-      primaryForeground: '30 100% 97%',
-      card: '32 60% 96%',
-      cardForeground: '28 40% 26%',
-      muted: '32 40% 92%',
-      mutedForeground: '28 22% 48%',
-      border: '28 30% 80%',
-    },
-    font: { heading: 'Marcellus', body: 'Marcellus', fallback: 'serif' },
-    radius: 'none',
-    header: { variant: 'minimal', uppercaseNav: true },
-    productCard: { style: 'editorial', imageAspect: 'portrait' },
-    uppercaseButtons: true,
-  },
-  home: (storeName, images) => ({
-    sections: [
-      {
-        type: 'hero',
-        variant: 'banner',
-        height: 'tall',
-        slides: [
-          { title: 'Essenciais naturais', subtitle: 'Conheça nossa coleção', cta: 'Ver mais', hue: 28, boxed: true, image: images?.hero?.[0] },
-        ],
-      },
-      {
-        type: 'manifesto',
-        text: `Num mundo de pressa e excesso, ${storeName} escolhe o caminho lento: ingredientes honestos, produção pequena e cuidado em cada detalhe.`,
-      },
-      { type: 'categories', style: 'tiles' },
-      { type: 'products', title: 'ESSENCIAIS', filter: 'all', limit: 4 },
-      {
-        type: 'testimonials',
-        title: 'Nossos clientes',
-        items: [
-          { quote: 'Qualidade impecável e um cheiro que abraça.', author: 'Helena M.' },
-          { quote: 'Compro há dois anos e nunca me decepcionou.', author: 'Rafael T.' },
-          { quote: 'Entrega rápida e embalagem linda, dá gosto de presentear.', author: 'Cláudia P.' },
-        ],
-      },
-      { type: 'products', title: 'NOVIDADES', filter: 'new', limit: 4 },
-      {
-        type: 'benefits',
-        items: [
-          { icon: 'Truck', title: 'Frete para todo o Brasil', text: 'Envio em até 48h' },
-          { icon: 'Leaf', title: '100% vegano', text: 'Sem testes em animais' },
-          { icon: 'RotateCcw', title: 'Troca fácil', text: '30 dias para trocar' },
-        ],
-      },
-      { type: 'newsletter', title: 'NEWSLETTER', subtitle: 'Histórias, lançamentos e cuidado — direto no seu e-mail.' },
-    ],
-  }),
-}
-
-/** volt — bold tech (Brasília): white canvas, near-black ink, vivid CTA, dark search-first header, split hero. */
-export const voltTemplate: StorefrontTemplate = {
-  id: 'volt',
-  inspiration: 'Nuvemshop Brasília',
-  announcement: 'CUPOM BEMVINDO10 — 10% DE DESCONTO NA PRIMEIRA COMPRA',
-  theme: {
-    name: 'volt',
-    colors: {
-      background: '0 0% 100%',
-      foreground: '0 0% 7%',
-      primary: '341 100% 45%',
-      primaryForeground: '0 0% 100%',
-      card: '0 0% 98%',
-      cardForeground: '0 0% 10%',
-      muted: '0 0% 94%',
-      mutedForeground: '0 0% 40%',
-      border: '0 0% 88%',
-      headerBackground: '0 0% 6%',
-      headerForeground: '0 0% 98%',
-      announcementBackground: '341 100% 45%',
-      announcementForeground: '0 0% 100%',
-    },
-    font: { heading: 'Chakra Petch', body: 'Rubik' },
-    radius: 'soft',
-    header: { variant: 'search', uppercaseNav: true },
-    productCard: { style: 'card', imageAspect: 'square' },
-  },
-  home: (storeName, images) => ({
-    sections: [
-      {
-        type: 'hero',
-        variant: 'split',
-        slides: [
-          { title: 'Tecnologia', subtitle: 'O melhor do hardware e dos acessórios', hue: 250, image: images?.hero?.[0] },
-          { title: 'Ofertas', subtitle: `Descontos semanais ${storeName}`, hue: 341, href: '/catalog', image: images?.hero?.[1] },
-        ],
-      },
-      {
-        type: 'benefits',
-        items: [
-          { icon: 'CreditCard', title: '3x sem juros', text: 'Em todo o site' },
-          { icon: 'Truck', title: 'Envio em 24h', text: 'Para todo o Brasil' },
-          { icon: 'ShieldCheck', title: 'Compra segura', text: 'Seus dados protegidos' },
-        ],
-      },
-      { type: 'products', title: 'NOVIDADES', filter: 'new', limit: 4 },
-      { type: 'banner', title: 'DESCONTOS SEMANAIS', eyebrow: 'toda sexta', subtitle: 'Ofertas novas, estoque limitado', cta: 'Conferir', hue: 341, image: images?.banners?.[0] },
-      { type: 'products', title: 'PROMOÇÕES', filter: 'sale', limit: 4 },
-      { type: 'newsletter', title: 'Entre para o clube', subtitle: 'Cupons e lançamentos antes de todo mundo.' },
-    ],
-  }),
-}
-
-/** atelier — classic premium retail (Flex): white, near-black, gold accent, slider hero, trust badges. */
-export const atelierTemplate: StorefrontTemplate = {
-  id: 'atelier',
-  inspiration: 'Nuvemshop Flex',
-  theme: {
-    name: 'atelier',
-    colors: {
-      background: '0 0% 100%',
-      foreground: '0 0% 9%',
-      primary: '40 45% 48%',
-      primaryForeground: '0 0% 100%',
-      card: '0 0% 99%',
-      cardForeground: '0 0% 9%',
-      muted: '40 10% 95%',
-      mutedForeground: '0 0% 42%',
-      border: '0 0% 88%',
-      announcementBackground: '0 0% 9%',
-      announcementForeground: '0 0% 98%',
-    },
-    font: { heading: 'Outfit', body: 'Outfit' },
-    radius: 'none',
-    header: { variant: 'centered', uppercaseNav: true },
-    productCard: { style: 'card', imageAspect: 'square' },
-    uppercaseButtons: true,
-  },
-  announcement: 'PARCELE EM ATÉ 10X · 5% OFF NO PIX',
-  home: (storeName, images) => ({
-    sections: [
-      {
-        type: 'hero',
-        variant: 'slider',
-        height: 'medium',
-        slides: [
-          { title: 'Feito para quem valoriza detalhes', subtitle: `Coleção exclusiva ${storeName}`, cta: 'APROVEITE', hue: 40, image: images?.hero?.[0] },
-          { title: 'Clássicos que não saem de moda', subtitle: 'Peças autorais, produção limitada', cta: 'VER COLEÇÃO', hue: 210, image: images?.hero?.[1] },
-        ],
-      },
-      {
-        type: 'benefits',
-        items: [
-          { icon: 'CreditCard', title: 'Parcele em até 10x', text: 'Ou 5% off no PIX' },
-          { icon: 'Lock', title: 'Site 100% seguro', text: 'Seus dados protegidos' },
-          { icon: 'Award', title: 'Peças exclusivas', text: 'Produtos 100% autorais' },
-        ],
-      },
-      { type: 'categories', style: 'tiles' },
-      { type: 'products', title: 'Novidades', filter: 'new', limit: 4 },
-      { type: 'banner', title: 'Promoções', eyebrow: 'seleção especial', subtitle: 'Selecionados com até 25% off', cta: 'Ver ofertas', hue: 40, image: images?.banners?.[0] },
-      { type: 'products', title: 'Promoções', filter: 'sale', limit: 4 },
-      {
-        type: 'testimonials',
-        title: 'O que dizem sobre nós',
-        items: [
-          { quote: 'Acabamento perfeito, superou a expectativa.', author: 'Mariana C.' },
-          { quote: 'Atendimento impecável do pedido à entrega.', author: 'Jorge L.' },
-          { quote: 'Virou minha loja favorita para presentes.', author: 'Paula R.' },
-        ],
-      },
-      { type: 'newsletter' },
-    ],
-  }),
-}
-
-/** 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/product-options.ts

@@ -1,63 +0,0 @@
-import type { Product } from '@fayz-ai/shop/types'
-
-export interface ProductOptionGroup {
-  id: string
-  label: string
-  values: string[]
-}
-
-export type ProductOptionSelection = Record<string, string>
-
-function cleanValues(value: unknown): string[] {
-  if (!Array.isArray(value)) return []
-  return Array.from(new Set(value.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)))
-}
-
-function cleanOptionGroup(value: unknown): ProductOptionGroup | null {
-  if (!value || typeof value !== 'object') return null
-  const record = value as Record<string, unknown>
-  const id = typeof record.id === 'string' ? record.id : typeof record.name === 'string' ? record.name : null
-  const label = typeof record.label === 'string' ? record.label : typeof record.name === 'string' ? record.name : id
-  const values = cleanValues(record.values)
-  if (!id || !label || values.length === 0) return null
-  return { id, label, values }
-}
-
-export function getProductOptionGroups(product: Product): ProductOptionGroup[] {
-  const options = product.metadata.options
-  const explicit = Array.isArray(options)
-    ? options.map(cleanOptionGroup).filter((group): group is ProductOptionGroup => Boolean(group))
-    : []
-
-  if (explicit.length > 0) return explicit
-
-  const groups: ProductOptionGroup[] = []
-  const sizes = cleanValues(product.metadata.sizes)
-  const colors = cleanValues(product.metadata.colors)
-
-  if (sizes.length > 0) groups.push({ id: 'Tamanho', label: 'Tamanho', values: sizes })
-  if (colors.length > 0) groups.push({ id: 'Cor', label: 'Cor', values: colors })
-
-  return groups
-}
-
-export function normalizeProductOptionSelection(selection?: ProductOptionSelection | null): ProductOptionSelection {
-  if (!selection) return {}
-  return Object.fromEntries(
-    Object.entries(selection)
-      .filter((entry): entry is [string, string] => entry[0].trim().length > 0 && entry[1].trim().length > 0)
-      .sort(([a], [b]) => a.localeCompare(b)),
-  )
-}
-
-export function formatProductOptionSelection(selection?: ProductOptionSelection | null): string {
-  return Object.entries(normalizeProductOptionSelection(selection))
-    .map(([label, value]) => `${label}: ${value}`)
-    .join(' · ')
-}
-
-export function productOptionSelectionKey(selection?: ProductOptionSelection | null): string {
-  const normalized = normalizeProductOptionSelection(selection)
-  const entries = Object.entries(normalized)
-  return entries.length > 0 ? JSON.stringify(entries) : ''
-}