@fayz-ai/storefront 0.6.0 → 0.8.0

package/src/config.ts

@@ -1,14 +1,10 @@
 import React, { createContext, useContext } from 'react'
-import type { Product } from '@fayz-ai/shop/types'
 import type { ShopProvider } from '@fayz-ai/shop/provider'
 import type { MockShopSeed } from '@fayz-ai/shop/mock'
 import type { StorefrontTheme } from './theme'
 import type { HomeConfig, NavLink, FooterConfig } from './sections'
-import type { StorefrontAuthAdapter } from './auth'
-
-export interface ProductCardSlotProps {
-  product: Product
-}
+import type { StorefrontAuthConfig } from './auth'
+import type { StorefrontComponents } from './component-contracts'
 
 export type StorefrontRouteKind =
   | 'home'
@@ -28,6 +24,15 @@ export interface StorefrontRouteComponentProps {
 }
 
 export type StorefrontRouteChrome = 'default' | 'focused'
+export type StorefrontCommerceMode = 'checkout' | 'catalog' | 'enquiry'
+export type StorefrontImageLoadingMode = 'fade' | 'none'
+
+export interface StorefrontImageLoadingConfig {
+  mode?: StorefrontImageLoadingMode
+  durationMs?: number
+  easing?: string
+  blur?: boolean
+}
 
 export interface StorefrontRouteDefinition {
   /**
@@ -54,22 +59,21 @@ export interface StorefrontRouteDefinition {
   component: React.ComponentType<StorefrontRouteComponentProps>
 }
 
-export interface StorefrontSlots {
-  /**
-   * Product card renderer used by catalog grids and product rails.
-   *
-   * Custom renderers must preserve `productCardSlotContract` selectors so
-   * checkout smoke tests, QA, and agents can still operate the storefront.
-   */
-  ProductCard?: React.ComponentType<ProductCardSlotProps>
-}
-
 export interface StorefrontDiscountConfig {
   code: string
   percent: number
   title?: string
 }
 
+export interface StorefrontEnquiryConfig {
+  label?: string
+  successMessage?: string
+  subjectPrefix?: string
+  email?: string
+  whatsappUrl?: string
+  requirePhone?: boolean
+}
+
 export interface StorefrontConfig {
   /** Store display name (header, page title) */
   name: string
@@ -81,6 +85,8 @@ export interface StorefrontConfig {
   locale?: string
   /** Visual identity: colors, fonts, radius, header/card personality */
   theme?: StorefrontTheme
+  /** Checkout-first default, catalog-only browsing, or product enquiry flow. */
+  commerceMode?: StorefrontCommerceMode
   /** Promo message above the header (e.g. 'FRETE GRÁTIS ACIMA DE R$ 300') */
   announcement?: string
   /** Home page blueprint. When set, `/` renders it and the catalog moves to /catalog. */
@@ -108,7 +114,7 @@ export interface StorefrontConfig {
    */
   legal?: { privacy?: string; terms?: string; returns?: string }
   /** Customer auth — same AuthAdapter contract as createSaasApp. Default: mock. */
-  auth?: { adapter?: StorefrontAuthAdapter }
+  auth?: StorefrontAuthConfig
   /** Shipping pricing — default { flatRate: 0 } */
   shipping?: { flatRate?: number; freeAbove?: number }
   /**
@@ -117,12 +123,16 @@ export interface StorefrontConfig {
    * a real payment webhook confirms settlement.
    */
   payments?: { mode?: 'mock' | 'pix-mercadopago' }
-  /** Feature toggles — discounts default off; accounts default on */
-  features?: { discounts?: boolean; accounts?: boolean }
-  /** Code-level customization slots. Kept out of serialized manifests. */
-  slots?: StorefrontSlots
+  /** Product enquiry behavior for catalog/enquiry stores. */
+  enquiry?: StorefrontEnquiryConfig
+  /** Feature toggles — defaults depend on commerceMode. */
+  features?: { discounts?: boolean; accounts?: boolean; cart?: boolean; checkout?: boolean }
+  /** Global storefront image reveal behavior. Default is a soft fade. */
+  imageLoading?: StorefrontImageLoadingConfig
+  /** Code-level component replacements. Kept out of serialized manifests. */
+  components?: StorefrontComponents
   /** Code-level route overrides/custom routes. Kept out of serialized manifests. */
-  routes?: StorefrontRouteDefinition[]
+  routes?: readonly StorefrontRouteDefinition[]
 }
 
 export interface ResolvedStorefrontConfig extends StorefrontConfig {
@@ -130,7 +140,11 @@ export interface ResolvedStorefrontConfig extends StorefrontConfig {
   locale: string
   shipping: { flatRate: number; freeAbove?: number }
   payments: { mode: 'mock' | 'pix-mercadopago' }
-  features: { discounts: boolean; accounts: boolean }
+  commerceMode: StorefrontCommerceMode
+  enquiry: Required<Pick<StorefrontEnquiryConfig, 'label' | 'successMessage' | 'subjectPrefix'>> &
+    Omit<StorefrontEnquiryConfig, 'label' | 'successMessage' | 'subjectPrefix'>
+  features: { discounts: boolean; accounts: boolean; cart: boolean; checkout: boolean }
+  imageLoading: Required<StorefrontImageLoadingConfig>
   /** Where the full product list lives ('/' without a home page, '/catalog' with one) */
   catalogPath: string
   nav: NavLink[]
@@ -138,12 +152,23 @@ export interface ResolvedStorefrontConfig extends StorefrontConfig {
 
 export function resolveConfig(config: StorefrontConfig): ResolvedStorefrontConfig {
   const catalogPath = config.home ? '/catalog' : '/'
+  const commerceMode = config.commerceMode ?? 'checkout'
+  const checkoutEnabled = commerceMode === 'checkout'
   return {
     ...config,
     currency: config.currency ?? 'BRL',
     locale: config.locale ?? 'pt-BR',
     shipping: { flatRate: config.shipping?.flatRate ?? 0, freeAbove: config.shipping?.freeAbove },
     payments: { mode: config.payments?.mode ?? 'mock' },
+    commerceMode,
+    enquiry: {
+      label: config.enquiry?.label ?? 'Contact me',
+      successMessage: config.enquiry?.successMessage ?? 'Thanks. We received your enquiry.',
+      subjectPrefix: config.enquiry?.subjectPrefix ?? 'Product enquiry',
+      email: config.enquiry?.email,
+      whatsappUrl: config.enquiry?.whatsappUrl,
+      requirePhone: config.enquiry?.requirePhone,
+    },
     features: {
       // Auto-enable the coupon UI when the store actually ships discount codes
       // (via config.discounts or a seeded catalog), unless explicitly overridden —
@@ -151,7 +176,15 @@ export function resolveConfig(config: StorefrontConfig): ResolvedStorefrontConfi
       discounts:
         config.features?.discounts ??
         Boolean(config.discounts?.length || config.catalog?.discounts?.length),
-      accounts: config.features?.accounts ?? true,
+      accounts: config.features?.accounts ?? checkoutEnabled,
+      cart: config.features?.cart ?? checkoutEnabled,
+      checkout: config.features?.checkout ?? checkoutEnabled,
+    },
+    imageLoading: {
+      mode: config.imageLoading?.mode ?? 'fade',
+      durationMs: config.imageLoading?.durationMs ?? 420,
+      easing: config.imageLoading?.easing ?? 'cubic-bezier(0.22, 1, 0.36, 1)',
+      blur: config.imageLoading?.blur ?? true,
     },
     catalogPath,
     nav:
@@ -174,3 +207,11 @@ export function useStorefrontConfig(): ResolvedStorefrontConfig {
   if (!ctx) throw new Error('useStorefrontConfig must be used inside createStorefrontApp')
   return ctx
 }
+
+export function useStorefrontConfigOptional(): ResolvedStorefrontConfig | null {
+  return useContext(StorefrontConfigContext)
+}
+
+export function getStorefrontComponents(config: ResolvedStorefrontConfig): StorefrontComponents {
+  return config.components ?? {}
+}

package/src/createStorefrontApp.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
-import { setShopProvider } from '@fayz-ai/shop/runtime'
+import { setShopProvider, getShopProvider } from '@fayz-ai/shop/runtime'
 import { createMockShopProvider } from '@fayz-ai/shop/mock'
 import type { MockShopSeed } from '@fayz-ai/shop/mock'
 import type { Discount } from '@fayz-ai/shop/types'
+import type { ShopProvider } from '@fayz-ai/shop/provider'
 import { initCustomerAuth, resolveAuthAdapter } from './auth'
-import { StorefrontConfigProvider, resolveConfig, useStorefrontConfig } from './config'
+import { getStorefrontComponents, StorefrontConfigProvider, resolveConfig, useStorefrontConfig } from './config'
 import type { StorefrontConfig, StorefrontDiscountConfig } from './config'
+import type { StorefrontComponents } from './component-contracts'
+import type { StorefrontSection } from './sections'
 import { useHashPath, matchPath } from './router'
+import { useCartStore } from './stores/cart.store'
 import { StorefrontThemeStyle } from './theme'
 import { StorefrontHeader } from './components/StorefrontHeader'
 import { StorefrontFooter } from './components/StorefrontFooter'
@@ -51,8 +55,8 @@ function RouteSwitch({ path }: { path: string }) {
   const order = matchPath('/order/:id', path)
   if (order?.id) return <OrderConfirmationPage orderId={order.id} />
 
-  if (matchPath('/checkout', path)) return <CheckoutPage />
-  if (matchPath('/account', path)) return <MyPurchasesPage />
+  if (matchPath('/checkout', path) && config.features.checkout) return <CheckoutPage />
+  if (matchPath('/account', path) && config.features.accounts) return <MyPurchasesPage />
   if (matchPath('/catalog', path)) return <CatalogPage />
   if (matchPath('/privacy', path)) return <PolicyPage kind="privacy" />
   if (matchPath('/terms', path)) return <PolicyPage kind="terms" />
@@ -112,7 +116,12 @@ function buildMockSeed(config: StorefrontConfig): MockShopSeed | undefined {
 }
 
 export function initStorefrontRuntime(config: StorefrontConfig): void {
-  initCustomerAuth(resolveAuthAdapter(config.auth?.adapter))
+  if (resolveConfig(config).features.accounts) {
+    initCustomerAuth(resolveAuthAdapter(config.auth, {
+      supabaseUrl: config.supabaseUrl,
+      supabaseAnonKey: config.supabaseAnonKey,
+    }))
+  }
 
   if (config.provider) {
     setShopProvider(config.provider)
@@ -120,6 +129,22 @@ export function initStorefrontRuntime(config: StorefrontConfig): void {
     setShopProvider(createMockShopProvider(buildMockSeed(config)))
   }
 
+  // Drop any persisted cart line the active backend can't resolve (e.g. a cart
+  // built in an earlier mock-mode session, whose ids don't exist live) so stale
+  // ids never reach checkout and 400 the order. Keeps a line on any error so a
+  // transient failure never discards a valid item. Runs AFTER the persisted cart
+  // has hydrated — zustand/persist rehydrates asynchronously, so reconciling at
+  // init would see an empty cart and no-op.
+  const reconcileCart = () => {
+    const provider = getShopProvider()
+    void useCartStore.getState().reconcile(async (line) => {
+      const product = await provider.getProduct(line.productId)
+      return product != null
+    })
+  }
+  if (useCartStore.persist.hasHydrated()) reconcileCart()
+  else useCartStore.persist.onFinishHydration(reconcileCart)
+
   if (config.supabaseUrl || config.supabaseAnonKey) {
     console.warn(
       '@fayz-ai/shop: supabaseUrl/supabaseAnonKey are legacy fields. Pass an explicit provider/adapter or use the Fayz SDK broker path.',
@@ -133,16 +158,34 @@ export function StorefrontShell() {
   const config = useStorefrontConfig()
   const path = useHashPath()
   const focused = isFocusedRoute(config, path)
-  return (
-    <div className="min-h-screen bg-background text-foreground">
+  const components = getStorefrontComponents(config)
+  const chromeProps = { config, commerceMode: config.commerceMode }
+  const body = (
+    <>
       {config.theme && <StorefrontThemeStyle theme={config.theme} />}
-      {!focused && <StorefrontHeader />}
+      {!focused &&
+        (components.Header ? <components.Header {...chromeProps} /> : <StorefrontHeader />)}
       <StorefrontErrorBoundary key={path}>
         <RouteSwitch path={path} />
       </StorefrontErrorBoundary>
-      {!focused && <CartDrawer />}
-      {!focused && <StorefrontFooter />}
+      {!focused && config.features.cart && <CartDrawer />}
+      {!focused &&
+        (components.Footer ? <components.Footer {...chromeProps} /> : <StorefrontFooter />)}
       <Toaster />
+    </>
+  )
+
+  if (components.Shell) {
+    return (
+      <components.Shell {...chromeProps}>
+        {body}
+      </components.Shell>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      {body}
     </div>
   )
 }
@@ -169,3 +212,30 @@ export function createStorefrontApp(config: StorefrontConfig): React.ComponentTy
   StorefrontApp.displayName = 'StorefrontApp'
   return StorefrontApp
 }
+
+export interface CreateStorefrontOptions {
+  config: StorefrontConfig
+  provider?: ShopProvider
+  components?: StorefrontComponents
+  routes?: StorefrontConfig['routes']
+  pages?: StorefrontConfig['routes']
+  sections?: readonly StorefrontSection[]
+}
+
+export function createStorefront(options: CreateStorefrontOptions): React.ComponentType {
+  const routes = [...(options.pages ?? []), ...(options.routes ?? [])]
+  const config: StorefrontConfig = {
+    ...options.config,
+    provider: options.provider ?? options.config.provider,
+    components: {
+      ...options.config.components,
+      ...options.components,
+    },
+    routes: routes.length > 0 ? routes : options.config.routes,
+    home: options.sections
+      ? { ...(options.config.home ?? { sections: [] }), sections: options.sections }
+      : options.config.home,
+  }
+
+  return createStorefrontApp(config)
+}

package/src/define.ts

@@ -0,0 +1,34 @@
+import type {
+  StorefrontConfig,
+  StorefrontRouteDefinition,
+} from './config'
+import type { StorefrontComponents } from './component-contracts'
+import type { StorefrontSection } from './sections'
+import type { CreateStorefrontOptions } from './createStorefrontApp'
+
+/**
+ * Identity helpers for generated/custom storefronts.
+ *
+ * They do not add runtime behavior; they make the intended client-app shape
+ * explicit and keep TypeScript inference tight across config, components, routes,
+ * sections and app creation options.
+ */
+export function defineStorefrontConfig<const T extends StorefrontConfig>(config: T): T {
+  return config
+}
+
+export function defineStorefrontComponents<const T extends StorefrontComponents>(components: T): T {
+  return components
+}
+
+export function defineStorefrontRoutes<const T extends readonly StorefrontRouteDefinition[]>(routes: T): T {
+  return routes
+}
+
+export function defineStorefrontSections<const T extends readonly StorefrontSection[]>(sections: T): T {
+  return sections
+}
+
+export function defineStorefrontApp<const T extends CreateStorefrontOptions>(options: T): T {
+  return options
+}

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export { useProducts } from './useProducts'
 export { useProduct } from './useProduct'
 export { useCategories } from './useCategories'
+export { useStorefront, useCatalog, useCart, useEnquiry, useStorefrontActions } from './useStorefront'
 export { useMyOrders } from './useMyOrders'
 export { useDiscountValidator } from './useDiscountValidator'

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,
@@ -101,14 +144,19 @@ export {
   sertaoTemplate,
   voltTemplate,
   atelierTemplate,
+  foodTemplate,
 } from './presets'
 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 +174,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>