@fayz-ai/storefront 0.8.3 → 0.8.5

package/dist/pages/CheckoutPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutPage.d.ts","sourceRoot":"","sources":["../../src/pages/CheckoutPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AA0GlD,wBAAgB,YAAY,sBAkkB3B"}
+{"version":3,"file":"CheckoutPage.d.ts","sourceRoot":"","sources":["../../src/pages/CheckoutPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AA0GlD,wBAAgB,YAAY,sBAskB3B"}

package/dist/scaffold.d.ts

@@ -11,4 +11,5 @@ export declare function StorefrontScaffold({ manifest, surface }: {
 export declare namespace StorefrontScaffold {
     var displayName: string;
 }
+export declare function registerStorefrontScaffold(): void;
 //# sourceMappingURL=scaffold.d.ts.map

package/dist/scaffold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../src/scaffold.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAmB,MAAM,eAAe,CAAA;AAEjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAIhD,OAAO,UAAU,CAAA;AAgBjB,oEAAoE;AACpE,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,WAAW,CAiCtE;AAgCD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,qBAanG;yBAbe,kBAAkB"}
+{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../src/scaffold.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAmB,MAAM,eAAe,CAAA;AAEjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAIhD,OAAO,UAAU,CAAA;AAgBjB,oEAAoE;AACpE,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,WAAW,CAiCtE;AAgCD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;IAAE,QAAQ,EAAE,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,qBAanG;yBAbe,kBAAkB;;;AAoBlC,wBAAgB,0BAA0B,IAAI,IAAI,CAIjD"}

package/package.json

@@ -3,36 +3,33 @@
   "fayz": {
     "status": "beta"
   },
-  "version": "0.8.3",
+  "version": "0.8.5",
   "description": "Fayz SDK storefront kit — Shopify-style customer-facing ecommerce template components",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "sideEffects": false,
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./ui": {
       "source": "./src/ui.ts",
       "types": "./dist/ui.d.ts",
-      "import": "./dist/ui.js",
-      "require": "./dist/ui.cjs"
+      "import": "./dist/ui.js"
     },
     "./catalog": {
       "source": "./src/catalog.ts",
       "types": "./dist/catalog.d.ts",
-      "import": "./dist/catalog.js",
-      "require": "./dist/catalog.cjs"
+      "import": "./dist/catalog.js"
     },
     "./shop": {
       "source": "./src/shop.ts",
       "types": "./dist/shop.d.ts",
-      "import": "./dist/shop.js",
-      "require": "./dist/shop.cjs"
+      "import": "./dist/shop.js"
     }
   },
   "files": [
@@ -40,25 +37,28 @@
     "src"
   ],
   "dependencies": {
-    "@supabase/supabase-js": "^2.45.0",
-    "lucide-react": "^0.400.0",
-    "zustand": "^4.5.0",
-    "@fayz-ai/auth": "^0.8.3",
-    "@fayz-ai/core": "^0.8.3",
-    "@fayz-ai/plugin-auth": "^0.8.0",
-    "@fayz-ai/sdk": "^0.8.3",
-    "@fayz-ai/shop": "^0.8.3",
-    "@fayz-ai/ui": "^0.8.3"
+    "@fayz-ai/auth": "^0.8.5",
+    "@fayz-ai/sdk": "^0.8.5",
+    "@fayz-ai/ui": "^0.8.5",
+    "@fayz-ai/shop": "^0.8.4",
+    "@fayz-ai/core": "^0.8.5",
+    "@fayz-ai/plugin-auth": "^0.8.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "zustand": "^4.5.0",
+    "@supabase/supabase-js": "^2.45.0",
+    "lucide-react": ">=0.400.0 <1.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",
     "react": "^18.3.0",
     "tsup": "^8.2.0",
-    "typescript": "^5.5.0"
+    "typescript": "^5.5.0",
+    "zustand": "^4.5.0",
+    "@supabase/supabase-js": "^2.45.0",
+    "lucide-react": "^0.400.0"
   },
   "keywords": [
     "fayz",

package/src/blocks.tsx

@@ -39,8 +39,8 @@ export function registerStorefrontBlocks(): void {
   registerBlock('newsletter', NewsletterBand, { source: 'sdk', label: 'Newsletter band' })
 }
 
-// Register on import so any consumer of the storefront package has the blocks.
-registerStorefrontBlocks()
+// Registration happens in initStorefrontRuntime (both the scaffold and
+// createStorefront call it) so importing this module stays side-effect-free.
 
 /** Convert the typed storefront section blueprint into a generic block tree. */
 export function sectionsToBlocks(sections: readonly StorefrontSection[]): BlockNode[] {

package/src/components/StorefrontHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { CreditCard, LogOut, Mail, Package, Phone, Search, ShoppingBag, User, UserCircle, X } from 'lucide-react'
+import { CreditCard, LogOut, Mail, Menu, Package, Phone, Search, ShoppingBag, User, UserCircle, X } from 'lucide-react'
 import { signOutCustomer } from '../auth'
 import { useCartStore, selectCount } from '../stores/cart.store'
 import { useCatalogStore } from '../stores/catalog.store'
@@ -151,7 +151,7 @@ function SearchInput({ className, iconOnly = false }: { className?: string; icon
   )
 }
 
-function HeaderActions() {
+function HeaderActions({ onMenuClick }: { onMenuClick?: () => void }) {
   const config = useStorefrontConfig()
   const count = useCartStore(selectCount)
   const openDrawer = useCartStore((s) => s.openDrawer)
@@ -251,6 +251,16 @@ function HeaderActions() {
           )}
         </button>
       )}
+      {onMenuClick && (
+        <button
+          type="button"
+          aria-label="Abrir menu"
+          onClick={onMenuClick}
+          className="relative rounded-full p-2.5 transition-opacity hover:opacity-70 md:hidden"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
+      )}
     </nav>
   )
 }
@@ -296,12 +306,99 @@ function NavLinks({ className }: { className?: string }) {
   )
 }
 
+function MobileMenuDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const config = useStorefrontConfig()
+  const { categories } = useCategories()
+  const setCategoryId = useCatalogStore((s) => s.setCategoryId)
+  const showCategories = config.theme?.header?.showCategories !== false
+
+  const goCategory = (categoryId: string) => {
+    useCatalogStore.getState().reset()
+    setCategoryId(categoryId)
+    navigateTo(config.catalogPath)
+    onClose()
+  }
+
+  // a11y: close on Escape
+  React.useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-50 md:hidden">
+      <div
+        className="absolute inset-0 animate-fade-in bg-black/40"
+        aria-hidden
+        onClick={onClose}
+      />
+      <div
+        data-testid="mobile-menu-drawer"
+        role="dialog"
+        aria-label="Menu Principal"
+        className="absolute right-0 top-0 flex h-full w-full max-w-[280px] animate-slide-in-from-right flex-col bg-background shadow-2xl"
+      >
+        <div className="flex items-center justify-between border-b px-5 py-4">
+          <h2 className="text-lg font-semibold">Menu</h2>
+          <button
+            type="button"
+            aria-label="Fechar menu"
+            onClick={onClose}
+            className="rounded-full p-1.5 hover:bg-muted"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-5">
+          <nav className="flex flex-col gap-4">
+            {config.nav.map((link) => (
+              <Link
+                key={link.to}
+                to={link.to}
+                onClick={onClose}
+                className="text-base font-semibold transition-opacity hover:opacity-70"
+              >
+                {link.label}
+              </Link>
+            ))}
+            {showCategories && categories.length > 0 && (
+              <>
+                <div className="my-2 border-t" />
+                <div className="mb-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
+                  Categorias
+                </div>
+                {categories.map((c) => (
+                  <button
+                    key={c.id}
+                    type="button"
+                    onClick={() => goCategory(c.id)}
+                    className="text-left text-sm font-medium transition-opacity hover:opacity-80"
+                  >
+                    {c.name}
+                  </button>
+                ))}
+              </>
+            )}
+          </nav>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export function StorefrontHeader() {
   const config = useStorefrontConfig()
   const variant = config.theme?.header?.variant ?? 'classic'
   const scrolled = useScrolled()
   const showSearch = config.theme?.header?.showSearch !== false
   const iconSearch = config.theme?.header?.searchStyle === 'icon'
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const logo = (
     <Link to="/" className="sf-heading shrink-0 text-xl font-bold tracking-tight">
       {config.logo ?? config.name}
@@ -359,15 +456,21 @@ export function StorefrontHeader() {
           </div>
         </div>
       ) : (
-        // classic: logo left, nav, then a right-aligned search + actions cluster
-        <div className="mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6">
-          {logo}
-          <NavLinks className="hidden md:flex" />
-          <div className="ml-auto flex items-center gap-2 sm:gap-3">
-            {showSearch && <SearchInput iconOnly={iconSearch} className={iconSearch ? '' : 'hidden w-full max-w-sm sm:block'} />}
-            <HeaderActions />
+        // classic: logo left, nav, then a right-aligned search + actions cluster.
+        // NavLinks is hidden below md in the primary row (no room for it there) —
+        // below md a hamburger opens MobileMenuDrawer instead, otherwise mobile
+        // has no way to reach nav/category links at all.
+        <>
+          <div className="mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6">
+            {logo}
+            <NavLinks className="hidden md:flex" />
+            <div className="ml-auto flex items-center gap-2 sm:gap-3">
+              {showSearch && <SearchInput iconOnly={iconSearch} className={iconSearch ? '' : 'hidden w-full max-w-sm sm:block'} />}
+              <HeaderActions onMenuClick={() => setMobileMenuOpen(true)} />
+            </div>
           </div>
-        </div>
+          <MobileMenuDrawer open={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)} />
+        </>
       )}
     </header>
   )

package/src/components/sections/MiscSections.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import * as LucideIcons from 'lucide-react'
+import { getLucideIcon } from '@fayz-ai/ui/icons'
 import { bannerPlaceholder } from '../../sections'
 import { Reveal } from '../../motion'
 import { Link } from '../../router'
@@ -7,7 +7,7 @@ import { TID } from '../../testids'
 import { SmoothImage } from '../SmoothImage'
 
 function Icon({ name, className }: { name: string; className?: string }) {
-  const C = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[name]
+  const C = getLucideIcon(name)
   return C ? <C className={className} /> : null
 }
 

package/src/createStorefrontApp.tsx

@@ -5,6 +5,7 @@ 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 { registerStorefrontBlocks } from './blocks'
 import { getStorefrontComponents, StorefrontConfigProvider, resolveConfig, useStorefrontConfig } from './config'
 import type { StorefrontConfig, StorefrontDiscountConfig } from './config'
 import type { StorefrontComponents } from './component-contracts'
@@ -93,6 +94,10 @@ function storefrontDiscountToSeed(discount: StorefrontDiscountConfig): Discount
     value: discount.percent,
     usageLimit: null,
     oncePerCustomer: false,
+    minSubtotal: null,
+    appliesTo: 'all',
+    productIds: [],
+    categoryIds: [],
     startsAt: ts,
     endsAt: null,
     status: 'active',
@@ -116,6 +121,7 @@ function buildMockSeed(config: StorefrontConfig): MockShopSeed | undefined {
 }
 
 export function initStorefrontRuntime(config: StorefrontConfig): void {
+  registerStorefrontBlocks()
   if (resolveConfig(config).features.accounts) {
     initCustomerAuth(resolveAuthAdapter(config.auth, {
       supabaseUrl: config.supabaseUrl,

package/src/index.ts

@@ -188,4 +188,15 @@ export type {
 // live on their own subpaths (./ui, ./catalog, ./shop) to keep module graphs
 // separate. Mirrors the @fayz-ai/saas front door.
 // ---------------------------------------------------------------------------
-export { renderApp, getSupabaseClientOptional } from '@fayz-ai/core'
+// renderApp is wrapped (not re-exported) so the 'storefront' scaffold registers
+// on first render instead of at import time — keeps the barrel side-effect-free.
+import { renderApp as coreRenderApp } from '@fayz-ai/core'
+import { registerStorefrontScaffold } from './scaffold'
+
+export const renderApp: typeof coreRenderApp = (...args) => {
+  registerStorefrontScaffold()
+  return coreRenderApp(...args)
+}
+
+export { getSupabaseClientOptional } from '@fayz-ai/core'
+export { registerStorefrontScaffold } from './scaffold'

package/src/pages/CheckoutPage.tsx

@@ -346,7 +346,7 @@ export function CheckoutPage() {
     ]
     const minDuration = sleep(stepMs * 2)
     try {
-      const { order } = await placeStorefrontOrder({
+      const { order, customerId } = await placeStorefrontOrder({
         config,
         cart,
         session,
@@ -369,6 +369,10 @@ export function CheckoutPage() {
         // declare it settled. The order is now born `pending` and only the
         // merchant (or a PSP webhook) can confirm the money arrived.
       })
+      // placeStorefrontOrder resolves/creates the customer record but doesn't persist
+      // it — without this, "My purchases" right after checkout queries by email, which
+      // anon can't read under RLS, and silently comes back empty.
+      if (customerId) session.setSession({ customerId, email: form.email, name: form.name })
 
       await minDuration
       cart.clear()

package/src/scaffold.tsx

@@ -104,6 +104,12 @@ export function StorefrontScaffold({ manifest, surface }: { manifest: AppManifes
 }
 StorefrontScaffold.displayName = 'StorefrontScaffold'
 
-// Self-register so `renderApp(manifest)` can resolve the 'storefront' scaffold
-// whenever this package is imported.
-registerScaffold('storefront', StorefrontScaffold, { source: 'sdk', label: 'Storefront' })
+// Registration is lazy (called from the storefront renderApp wrapper and
+// createStorefront*) so that importing the @fayz-ai/storefront barrel stays
+// side-effect-free and tree-shakable.
+let storefrontScaffoldRegistered = false
+export function registerStorefrontScaffold(): void {
+  if (storefrontScaffoldRegistered) return
+  storefrontScaffoldRegistered = true
+  registerScaffold('storefront', StorefrontScaffold, { source: 'sdk', label: 'Storefront' })
+}

package/dist/catalog.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var catalog = require('@fayz-ai/shop/catalog');
-
-
-
-Object.keys(catalog).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return catalog[k]; }
-	});
-});
-//# sourceMappingURL=catalog.cjs.map
-//# sourceMappingURL=catalog.cjs.map

package/dist/catalog.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"catalog.cjs","sourcesContent":[]}