storefront-layouts 1.0.0

package/dist/layouts/clothing-minimal/components/ClothingHomePageMinimal.js

@@ -0,0 +1,171 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button.js';
+import { useStore } from '../../../lib/store-context.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { ArrowUpRight, Plus } from 'lucide-react';
+import Link from 'next/link';
+import { formatCurrency, filterActiveProducts } from '../../../lib/utils/index.js';
+import { getPrimaryProductImageUrl, EDITOR_PRODUCT_IMAGE_PLACEHOLDER } from '../../../lib/utils/product-images.js';
+import { getLayoutText, getBannerImage, getTextContent } from '../../../lib/utils/asset-helpers.js';
+import { PromoBanner } from '../../shared/components/PromoBanner.js';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
+import { getPayazaSectionInlineStyle } from '../../../lib/payaza-section-styles.js';
+import { encodePayazaFieldKey, payazaInlineBindingProps, payazaIconBindingProps } from '../../../preview/canvas/field-key.js';
+import { richFieldHtmlForRender } from '../../../lib/rich-html.js';
+import { compactArrayItems, readItemIconName } from '../../../lib/compact-array-items.js';
+import { showLayoutDecorativeBadges } from '../../../lib/layout-badges.js';
+import { heroUsesBlocks, renderHeroBlocks, renderFeaturesBlocks, renderCategoriesHeaderBlocks, renderFeaturedIntroBlocks, renderShopTheLookBlocks, promoConfigFromBlocks, } from './clothing-minimal-block-render.js';
+import { trackStorefrontEvent } from '../../../lib/mixpanel.js';
+function hasPayazaBlocks(section) {
+    if (section === null || typeof section !== 'object')
+        return false;
+    const b = section.blocks;
+    return Array.isArray(b) && b.length > 0;
+}
+export function ClothingHomePageMinimal({ storeConfig: initialConfig }) {
+    const { store, addToCart } = useStore();
+    const storeConfig = store || initialConfig;
+    const layoutConfig = storeConfig.layoutConfig;
+    // In preview mode, use mock data if none are available
+    const isPreview = (typeof window !== 'undefined' && window.__IS_PREVIEW__) || storeConfig.layoutConfig?.isPreview;
+    const payazaImg = (sectionKey, segments) => isPreview ? { 'data-payaza-image': encodePayazaFieldKey(sectionKey, segments) } : {};
+    const categories = (storeConfig.categories && storeConfig.categories.length > 0)
+        ? storeConfig.categories
+        : (isPreview ? [
+            { id: 'cat1', name: 'Essentials', slug: 'essentials', image: 'https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=800' },
+            { id: 'cat2', name: 'Accessories', slug: 'accessories', image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=800' },
+            { id: 'cat3', name: 'Collections', slug: 'collections', image: 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=800' }
+        ] : []);
+    const rawProducts = storeConfig.products || [];
+    const activeProducts = filterActiveProducts(rawProducts);
+    // Use real active products if available, otherwise if in preview, use all products (including drafts), 
+    // and if still none, use mock data
+    const products = activeProducts.length > 0
+        ? activeProducts
+        : (isPreview && rawProducts.length > 0
+            ? rawProducts
+            : (isPreview ? [
+                { id: 'p1', name: 'Minimal Tee', price: 40, currency: 'USD', images: ['https://images.unsplash.com/photo-1521572267360-ee0c2909d518?q=80&w=800'], slug: 'minimal-tee' },
+                { id: 'p2', name: 'Cotton Shirt', price: 75, currency: 'USD', images: ['https://images.unsplash.com/photo-1596755094514-f87e34085b2c?q=80&w=800'], slug: 'cotton-shirt' },
+                { id: 'p3', name: 'Wool Trousers', price: 120, currency: 'USD', images: ['https://images.unsplash.com/photo-1624378439575-d8705ad7ae80?q=80&w=800'], slug: 'wool-trousers' },
+                { id: 'p4', name: 'Linen Jacket', price: 180, currency: 'USD', images: ['https://images.unsplash.com/photo-1591047139829-d91aecb6caea?q=80&w=800'], slug: 'linen-jacket' }
+            ] : []));
+    const { addToast } = useToast();
+    const handleAddToCart = (product) => {
+        addToCart(product);
+        addToast(`${product.name} added to cart`, 'success');
+    };
+    const heroSectionStyle = getPayazaSectionInlineStyle(storeConfig, 'home', 'hero');
+    return (_jsxs("div", { className: "min-h-screen bg-white text-black font-sans selection:bg-black selection:text-white", children: [layoutConfig?.sections?.hero?.show !== false &&
+                (heroUsesBlocks(layoutConfig?.sections?.hero)
+                    ? renderHeroBlocks(layoutConfig.sections.hero, {
+                        isPreview,
+                        storeConfig,
+                        slug: storeConfig.slug,
+                        bannerFallback: getBannerImage(storeConfig, 'hero_main', 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1887&auto=format&fit=crop'),
+                        getLayoutText,
+                        getTextContent,
+                        heroSectionStyle,
+                    })
+                    : (_jsx("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "home", style: heroSectionStyle, className: "lg:h-screen h-auto w-full", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 h-full", children: [_jsx("div", { className: "relative bg-[#F4F4F4] flex flex-col justify-center px-12 md:px-24 lg:order-1 order-2 py-20 lg:py-0", children: _jsxs("div", { className: "space-y-6 md:space-y-8 max-w-lg animate-fade-in-up", children: [showLayoutDecorativeBadges() && (_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.2em] text-gray-500", ...payazaInlineBindingProps(isPreview, 'hero', ['badge'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                                    __html: richFieldHtmlForRender(layoutConfig?.sections?.hero?.badge, getTextContent(storeConfig, 'hero_badge', '')),
+                                                } })), _jsx("h1", { className: "text-4xl md:text-7xl font-light tracking-tight leading-[1.1]", ...payazaInlineBindingProps(isPreview, 'hero', ['title'], { rich: 'inline' }), children: (() => {
+                                                    const stored = layoutConfig?.sections?.hero?.title;
+                                                    if (stored && typeof stored === 'object' && stored.sanitizedHtml) {
+                                                        return _jsx("span", { dangerouslySetInnerHTML: { __html: stored.sanitizedHtml } });
+                                                    }
+                                                    const titleText = (typeof stored === 'string' ? stored : null) || getLayoutText(storeConfig, 'hero.title', 'Simplicity is the ultimate sophistication.');
+                                                    if (titleText.includes('sophistication')) {
+                                                        const parts = titleText.split('sophistication');
+                                                        return (_jsxs(_Fragment, { children: [parts[0], _jsx("span", { className: "font-serif italic", children: "sophistication" }), parts[1]] }));
+                                                    }
+                                                    return titleText;
+                                                })() }), _jsx("p", { className: "text-gray-600 text-lg leading-relaxed", ...payazaInlineBindingProps(isPreview, 'hero', ['subtitle'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                                    __html: richFieldHtmlForRender(layoutConfig?.sections?.hero?.subtitle, getLayoutText(storeConfig, 'hero.subtitle', storeConfig.description
+                                                        ? `${storeConfig.description} Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.`
+                                                        : 'Discover our latest arrivals, crafted for the modern individual who values quality and timeless design.')),
+                                                } }), _jsx("div", { className: "pt-4", children: _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "h-14 px-10 rounded-full bg-black text-white hover:bg-gray-800 text-base transition-all hover:scale-105", children: _jsx("span", { ...payazaInlineBindingProps(isPreview, 'hero', ['primaryCTA'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                                                __html: richFieldHtmlForRender(layoutConfig?.sections?.hero?.primaryCTA, getLayoutText(storeConfig, 'common.shopNow', 'Shop Collection')),
+                                                            } }) }) }) })] }) }), _jsx("div", { className: "relative h-[60vh] lg:h-full w-full lg:order-2 order-1 overflow-hidden group", children: _jsx(ImageWithFallback, { src: getBannerImage(storeConfig, 'hero_main', 'https://images.unsplash.com/photo-1539109136881-3be0616acf4b?q=80&w=1887&auto=format&fit=crop'), alt: "Minimal Fashion", className: "absolute inset-0 w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-[2s]", ...payazaImg('hero', ['image']) }) })] }) }))), layoutConfig?.sections?.features?.show !== false &&
+                (hasPayazaBlocks(layoutConfig?.sections?.features)
+                    ? renderFeaturesBlocks(layoutConfig.sections.features, {
+                        isPreview,
+                        storeConfig,
+                        slug: storeConfig.slug,
+                    })
+                    : (_jsx("section", { "data-section": "features", "data-payaza-section-key": "features", "data-payaza-page": "home", className: "py-12 border-b border-gray-100 bg-white", children: _jsx("div", { className: "container mx-auto px-4 md:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: compactArrayItems(layoutConfig?.sections?.features?.items || [
+                                    { icon: 'Truck', title: 'Global Delivery', description: 'Free on orders over $200' },
+                                    { icon: 'ShieldCheck', title: 'Secure Payment', description: '100% secure checkout' },
+                                    { icon: 'RefreshCw', title: 'Easy Returns', description: '30-day return policy' },
+                                ]).map((item, idx) => (_jsxs("div", { className: "flex items-center gap-4 group", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-colors duration-300", ...payazaIconBindingProps(isPreview, 'features', ['items', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: readItemIconName(item, 'Truck'), className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wider", ...payazaInlineBindingProps(isPreview, 'features', ['items', String(idx), 'title'], {
+                                                        rich: 'inline',
+                                                    }), dangerouslySetInnerHTML: {
+                                                        __html: richFieldHtmlForRender(item.title, 'Global Delivery'),
+                                                    } }), _jsx("p", { className: "text-xs text-gray-500", ...payazaInlineBindingProps(isPreview, 'features', ['items', String(idx), 'description'], {
+                                                        rich: 'inline',
+                                                    }), dangerouslySetInnerHTML: {
+                                                        __html: richFieldHtmlForRender(item.description, 'Free on orders over $200'),
+                                                    } })] })] }, idx))) }) }) }))), layoutConfig?.sections?.categories?.show !== false && (_jsx("section", { "data-section": "categories", "data-payaza-section-key": "categories", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 md:px-8", children: _jsxs("div", { className: "container mx-auto", children: [hasPayazaBlocks(layoutConfig?.sections?.categories)
+                            ? renderCategoriesHeaderBlocks(layoutConfig.sections.categories, {
+                                isPreview,
+                                storeConfig,
+                                slug: storeConfig.slug,
+                            })
+                            : (_jsxs("div", { className: "flex justify-between items-end mb-8 md:mb-12", children: [_jsx("h2", { className: "text-3xl font-light", ...payazaInlineBindingProps(isPreview, 'categories', ['title'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                            __html: richFieldHtmlForRender(layoutConfig?.sections?.categories?.title, getLayoutText(storeConfig, 'sections.categories.title', 'Categories')),
+                                        } }), _jsx(Link, { href: `/${storeConfig.slug}/categories`, className: "text-sm font-bold uppercase tracking-wider border-b border-black pb-1 hover:text-gray-600 hover:border-gray-600 transition-colors", children: _jsx("span", { ...payazaInlineBindingProps(isPreview, 'categories', ['viewAllLabel'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                                __html: richFieldHtmlForRender(layoutConfig?.sections?.categories?.viewAllLabel, getLayoutText(storeConfig, 'sections.categories.viewAll', 'View All')),
+                                            } }) })] })), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: categories.slice(0, 3).map((category, idx) => (_jsxs(Link, { href: `/${storeConfig.slug}/categories/${category.slug}`, className: "group block cursor-pointer", children: [_jsxs("div", { className: "relative aspect-[3/4] overflow-hidden bg-[#F4F4F4] mb-4", children: [_jsx(ImageWithFallback, { src: category.image, alt: category.name, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-110", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500" }), _jsx("div", { className: "absolute top-4 right-4 bg-white rounded-full p-2 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300", children: _jsx(ArrowUpRight, { className: "h-5 w-5" }) })] }), _jsx("h3", { className: "text-xl font-medium mb-1", children: category.name }), isPreview && _jsxs("p", { className: "text-sm text-gray-500", children: [12 + idx * 5, " Items"] })] }, category.id))) })] }) })), layoutConfig?.sections?.featuredProducts?.show !== false && (_jsx("section", { "data-section": "featuredProducts", "data-payaza-section-key": "featuredProducts", "data-payaza-page": "home", className: "py-16 md:py-24 bg-[#FAFAFA]", children: _jsxs("div", { className: "container mx-auto px-4 md:px-8", children: [hasPayazaBlocks(layoutConfig?.sections?.featuredProducts) ? (renderFeaturedIntroBlocks(layoutConfig.sections.featuredProducts, {
+                            isPreview,
+                            storeConfig,
+                            slug: storeConfig.slug,
+                        })) : (_jsxs("div", { className: "max-w-2xl mx-auto text-center mb-10 md:mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-light mb-4", ...payazaInlineBindingProps(isPreview, 'featuredProducts', ['title'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                        __html: richFieldHtmlForRender(layoutConfig?.sections?.featuredProducts?.title, 'The Essentials'),
+                                    } }), _jsx("p", { className: "text-gray-500", ...payazaInlineBindingProps(isPreview, 'featuredProducts', ['subtitle'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                        __html: richFieldHtmlForRender(layoutConfig?.sections?.featuredProducts?.subtitle, 'Timeless pieces designed to build the foundation of your wardrobe.'),
+                                    } })] })), _jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-12 md:gap-8", children: products.slice(0, 4).map((product) => (_jsx("div", { className: "group", children: _jsxs(Link, { href: `/${storeConfig.slug}/products/${product.slug}`, onClick: () => trackStorefrontEvent('Product_clicked', {
+                                        storeId: storeConfig.id,
+                                        storeSlug: storeConfig.slug,
+                                        productId: product.id,
+                                        productName: product.name,
+                                        categoryId: product.categoryId,
+                                        price: product.price,
+                                    }), children: [_jsxs("div", { className: "aspect-[3/4] bg-white overflow-hidden relative mb-4", children: [_jsx(ImageWithFallback, { src: getPrimaryProductImageUrl(product.images, {
+                                                        placeholder: isPreview ? EDITOR_PRODUCT_IMAGE_PLACEHOLDER : undefined,
+                                                    }), alt: product.name, className: "w-full h-full object-cover mix-blend-multiply group-hover:scale-105 transition-transform duration-500", skeletonAspectRatio: "3/4" }), _jsx("div", { className: "hidden lg:flex absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity items-end justify-center pb-6", children: _jsx("button", { onClick: (e) => {
+                                                            e.preventDefault();
+                                                            handleAddToCart(product);
+                                                        }, className: "bg-white text-black px-8 py-3 rounded-full text-sm font-bold shadow-lg transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 hover:bg-black hover:text-white", children: "Quick Add" }) }), _jsx("button", { onClick: (e) => {
+                                                        e.preventDefault();
+                                                        handleAddToCart(product);
+                                                    }, className: "lg:hidden absolute bottom-3 right-3 bg-white text-black h-10 w-10 flex items-center justify-center rounded-full shadow-lg z-10 active:scale-95 transition-transform", children: _jsx(Plus, { className: "h-5 w-5" }) }), product.compareAtPrice && (_jsx("span", { className: "absolute top-2 left-2 text-[10px] font-bold uppercase tracking-wider bg-black text-white px-2 py-1", children: getLayoutText(storeConfig, 'common.sale', 'Sale') }))] }), _jsxs("div", { className: "flex justify-between items-start", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium text-base mb-1 group-hover:underline decoration-1 underline-offset-4", children: product.name }), _jsx("div", { className: "flex gap-2 mb-2", children: ['#D4D4D4', '#171717', '#737373'].map((color, i) => (_jsx("div", { className: "w-3 h-3 rounded-full border border-gray-200", style: { backgroundColor: color } }, i))) })] }), _jsx("span", { className: "font-medium text-sm", children: formatCurrency(product.price, product.currency || 'USD') })] })] }) }, product.id))) })] }) })), layoutConfig?.sections?.about?.show !== false && (_jsx("section", { "data-section": "about", "data-payaza-section-key": "about", "data-payaza-page": "home", className: "py-16 md:py-24 px-4 md:px-8 border-t border-gray-100", children: _jsx("div", { className: "container mx-auto", children: hasPayazaBlocks(layoutConfig?.sections?.about)
+                        ? renderShopTheLookBlocks(layoutConfig.sections.about, {
+                            isPreview,
+                            storeConfig,
+                            slug: storeConfig.slug,
+                            products,
+                            onQuickAdd: handleAddToCart,
+                        })
+                        : (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-gray-100 group overflow-hidden", children: [_jsx(ImageWithFallback, { src: "https://images.unsplash.com/photo-1483985988355-763728e1935b?q=80&w=2070&auto=format&fit=crop", alt: "Shop the look", className: "w-full h-full object-cover" }), _jsxs("div", { className: "absolute top-[30%] left-[45%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute left-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Oversized Wool Coat" }), _jsx("p", { className: "text-xs text-gray-500", children: "$299.00" })] })] }), _jsxs("div", { className: "absolute bottom-[25%] right-[40%] group/spot", children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: "absolute right-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity pointer-events-none group-hover/spot:pointer-events-auto", children: [_jsx("p", { className: "font-bold text-xs mb-1", children: "Leather Ankle Boots" }), _jsx("p", { className: "text-xs text-gray-500", children: "$189.00" })] })] })] }), _jsxs("div", { className: "space-y-8", children: [_jsx("h2", { className: "text-4xl font-light", ...payazaInlineBindingProps(isPreview, 'about', ['title'], { rich: 'inline' }), children: (() => {
+                                                const stored = layoutConfig?.sections?.about?.title;
+                                                if (stored && typeof stored === 'object' && stored.sanitizedHtml) {
+                                                    return _jsx("span", { dangerouslySetInnerHTML: { __html: stored.sanitizedHtml } });
+                                                }
+                                                const titleText = (typeof stored === 'string' ? stored : null) || 'Winter Layering';
+                                                if (titleText === 'Winter Layering' || titleText.includes('Layering')) {
+                                                    const parts = titleText.split('Layering');
+                                                    return (_jsxs(_Fragment, { children: [parts[0], _jsx("span", { className: "font-serif italic", children: "Layering" }), parts[1]] }));
+                                                }
+                                                return titleText;
+                                            })() }), _jsx("p", { className: "text-gray-600 leading-relaxed max-w-md", ...payazaInlineBindingProps(isPreview, 'about', ['description'], { rich: 'inline' }), dangerouslySetInnerHTML: {
+                                                __html: richFieldHtmlForRender(layoutConfig?.sections?.about?.description, 'Master the art of layering with our winter collection. Combining warmth with style, these pieces are designed to work together seamlessly.'),
+                                            } }), _jsx("div", { className: "space-y-4", children: products.slice(0, 3).map((item, i) => (_jsxs("div", { className: "flex gap-4 items-center p-2 hover:bg-gray-50 rounded-lg transition-colors group cursor-pointer", children: [_jsx("div", { className: "w-16 h-20 bg-white relative", children: _jsx(ImageWithFallback, { src: item.images[0], alt: item.name, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm mb-1", children: item.name }), _jsx("p", { className: "text-xs text-gray-500", children: formatCurrency(item.price, item.currency || storeConfig.settings?.currency || 'USD') })] }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => handleAddToCart(item), className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(Plus, { className: "h-4 w-4" }) })] }, i))) }), _jsx(Link, { href: `/${storeConfig.slug}/products`, children: _jsx(Button, { className: "w-full bg-black text-white hover:bg-gray-800 h-12 rounded-none uppercase tracking-widest text-xs font-bold", children: getLayoutText(storeConfig, 'common.shopNow', 'Shop The Edit') }) })] })] })) }) })), _jsx(PromoBanner, { config: (() => {
+                    const pb = layoutConfig?.sections?.promoBanner;
+                    const merged = pb && Array.isArray(pb.blocks) && pb.blocks.length > 0 ? promoConfigFromBlocks(pb) : null;
+                    if (merged)
+                        return { ...(layoutConfig?.sections?.promoBanner || {}), ...merged };
+                    return layoutConfig?.sections?.promoBanner;
+                })(), storeSlug: storeConfig.slug, layoutStyle: "clothing", sectionKey: "promoBanner", page: "home" })] }));
+}

package/dist/layouts/clothing-minimal/components/clothing-minimal-block-render.d.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties } from 'react';
+import type { PayazaSerializedBlock } from '../../../editor/blocks/types';
+import type { StoreConfig, StoreProduct } from '../../../lib/store-types';
+/** Preview/mock products omit fields; storefront grid only uses a subset. */
+export type MinimalGridProduct = StoreProduct | {
+    id: string;
+    name: string;
+    slug: string;
+    price: number;
+    currency?: string;
+    images: string[];
+};
+export declare function blkAttr(block: PayazaSerializedBlock): Record<string, unknown>;
+export declare function heroUsesBlocks(sec: Record<string, unknown> | undefined | null): boolean;
+export type MinimalBlockPreviewCtx = {
+    isPreview?: boolean;
+    storeConfig: StoreConfig;
+    slug: string;
+};
+export declare function renderHeroBlocks(section: Record<string, unknown>, ctx: MinimalBlockPreviewCtx & {
+    bannerFallback: string;
+    getLayoutText: (c: StoreConfig, k: string, d: string) => string;
+    getTextContent: (c: StoreConfig, k: string, d: string) => string;
+    heroSectionStyle?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function renderFeaturesBlocks(sec: Record<string, unknown>, ctx: MinimalBlockPreviewCtx): import("react/jsx-runtime").JSX.Element;
+export declare function renderCategoriesHeaderBlocks(sec: Record<string, unknown>, ctx: MinimalBlockPreviewCtx): import("react/jsx-runtime").JSX.Element;
+export declare function renderFeaturedIntroBlocks(sec: Record<string, unknown>, ctx: MinimalBlockPreviewCtx): import("react/jsx-runtime").JSX.Element;
+export declare function renderShopTheLookBlocks(sec: Record<string, unknown>, ctx: MinimalBlockPreviewCtx & {
+    products: MinimalGridProduct[];
+    onQuickAdd?: (product: MinimalGridProduct) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Map serialized promo blocks → PromoBanner-compatible config. */
+export declare function promoConfigFromBlocks(sec: Record<string, unknown>): {
+    show: boolean;
+    subtitle?: string;
+    buttonText?: string;
+    buttonLink?: string;
+} | null;
+//# sourceMappingURL=clothing-minimal-block-render.d.ts.map

package/dist/layouts/clothing-minimal/components/clothing-minimal-block-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clothing-minimal-block-render.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/components/clothing-minimal-block-render.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE1E,6EAA6E;AAC7E,MAAM,MAAM,kBAAkB,GAC1B,YAAY,GACZ;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC;AAOnG,wBAAgB,OAAO,CAAC,KAAK,EAAE,qBAAqB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAI7E;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,GAAG,IAAI,GAAG,OAAO,CAEvF;AAOD,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,WAAW,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AA8BF,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,GAAG,EAAE,sBAAsB,GAAG;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAChE,cAAc,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACjE,gBAAgB,CAAC,EAAE,aAAa,CAAC;CAClC,2CA+IF;AAED,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,sBAAsB,2CAsC7F;AAED,wBAAgB,4BAA4B,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,sBAAsB,2CA+BrG;AAED,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,EAAE,sBAAsB,2CAyBlG;AAED,wBAAgB,uBAAuB,CACrC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC5B,GAAG,EAAE,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACpD,2CA8HF;AAED,mEAAmE;AACnE,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAwBP"}

package/dist/layouts/clothing-minimal/components/clothing-minimal-block-render.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { Button } from '../../../components/ui/button.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { Plus } from 'lucide-react';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
+import { encodePayazaFieldKey, payazaInlineBindingProps, payazaGroupBindingProps, payazaIconBindingProps } from '../../../preview/canvas/field-key.js';
+import { richFieldHtmlForRender } from '../../../lib/rich-html.js';
+import { formatCurrency } from '../../../lib/utils/index.js';
+import { readItemIconName } from '../../../lib/compact-array-items.js';
+import { getPayazaBlockDefinition } from '../../../editor/blocks/registry.js';
+export function blkAttr(block) {
+    const a = block.attributes;
+    if (a && typeof a === 'object' && !Array.isArray(a))
+        return a;
+    return {};
+}
+export function heroUsesBlocks(sec) {
+    return Array.isArray(sec?.blocks) && sec.blocks.length > 0;
+}
+function attrRich(blockName, attrKey) {
+    const def = getPayazaBlockDefinition(blockName);
+    return Boolean(def?.attrFields?.some((f) => f.key === attrKey && f._inlineRichText));
+}
+function segs(...parts) {
+    return parts.map(String);
+}
+function hrefWithSlug(slug, path) {
+    const raw = typeof path === 'string' ? path.trim() : '/products';
+    if (raw.startsWith('http'))
+        return raw;
+    const p = raw.startsWith('/') ? raw : `/${raw}`;
+    return `/${slug}${p}`;
+}
+function payazaImg(ctx, sectionKey, parts) {
+    if (!ctx?.isPreview)
+        return {};
+    return { 'data-payaza-image': encodePayazaFieldKey(sectionKey, segs(...parts)) };
+}
+function pbRich(ctx, sectionKey, parts, blockName, attrKey) {
+    if (!ctx?.isPreview)
+        return {};
+    const inline = attrRich(blockName, attrKey) ? { rich: 'inline' } : {};
+    return payazaInlineBindingProps(true, sectionKey, segs(...parts), inline);
+}
+export function renderHeroBlocks(section, ctx) {
+    const blocks = section.blocks;
+    if (!blocks?.length)
+        return null;
+    const left = blocks.find((b) => b.name === 'payaza/group' && String(blkAttr(b).variant) === 'hero-left');
+    const right = blocks.find((b) => b.name === 'payaza/group' && String(blkAttr(b).variant) === 'hero-right');
+    const leftIdx = left ? blocks.indexOf(left) : 0;
+    const leftInner = left?.innerBlocks ?? [];
+    const badgeB = leftInner.find((x) => x.name === 'payaza/badge');
+    const headingB = leftInner.find((x) => x.name === 'payaza/heading');
+    const parB = leftInner.find((x) => x.name === 'payaza/paragraph');
+    const btnB = leftInner.find((x) => x.name === 'payaza/button');
+    const li = (b) => (b ? leftInner.indexOf(b) : -1);
+    const heroImg = right?.innerBlocks?.find((x) => x.name === 'payaza/image');
+    const capGroup = right?.innerBlocks?.find((x) => x.name === 'payaza/group' && String(blkAttr(x).variant) === 'hero-caption');
+    const capLines = capGroup?.innerBlocks?.filter((x) => x.name === 'payaza/paragraph') ?? [];
+    const rightGrpIdx = right ? blocks.indexOf(right) : 1;
+    const heroImgIx = heroImg && right?.innerBlocks ? right.innerBlocks.indexOf(heroImg) : 0;
+    const capGrpIxInRight = capGroup && right?.innerBlocks ? right.innerBlocks.indexOf(capGroup) : 2;
+    return (_jsx("section", { "data-section": "hero", "data-payaza-section-key": "hero", "data-payaza-page": "home", style: (ctx.heroSectionStyle || {}), className: "lg:h-screen h-auto w-full", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 h-full", children: [_jsx("div", { className: "relative bg-[#F4F4F4] flex flex-col justify-center px-12 md:px-24 lg:order-1 order-2 py-20 lg:py-0", ...payazaGroupBindingProps(ctx.isPreview ?? false, 'hero', ['blocks', String(leftIdx)]), style: {
+                        ...blkAttr(left ?? {}).payazaStyle,
+                        ...(left && blkAttr(left).show === false ? { display: 'none' } : {}),
+                    }, children: _jsxs("div", { className: "space-y-6 md:space-y-8 max-w-lg animate-fade-in-up", children: [badgeB ? (_jsx("span", { className: "text-xs font-bold uppercase tracking-[0.2em] text-gray-500", dangerouslySetInnerHTML: {
+                                    __html: richFieldHtmlForRender(blkAttr(badgeB).text, ctx.getTextContent(ctx.storeConfig, 'hero_badge', '')),
+                                }, ...pbRich(ctx, 'hero', ['blocks', 0, 'innerBlocks', li(badgeB), 'attributes', 'text'], 'payaza/badge', 'text') })) : null, headingB ? (_jsx("h1", { className: "text-4xl md:text-7xl font-light tracking-tight leading-[1.1]", dangerouslySetInnerHTML: {
+                                    __html: richFieldHtmlForRender(blkAttr(headingB).content, ctx.getLayoutText(ctx.storeConfig, 'hero.title', 'Simplicity is the ultimate sophistication.')),
+                                }, ...pbRich(ctx, 'hero', ['blocks', 0, 'innerBlocks', li(headingB), 'attributes', 'content'], 'payaza/heading', 'content') })) : null, parB ? (_jsx("p", { className: "text-gray-600 text-lg leading-relaxed", dangerouslySetInnerHTML: {
+                                    __html: richFieldHtmlForRender(blkAttr(parB).content, ctx.getLayoutText(ctx.storeConfig, 'hero.subtitle', ctx.storeConfig.description ||
+                                        'Discover our latest arrivals, crafted for the modern individual.')),
+                                }, ...pbRich(ctx, 'hero', ['blocks', 0, 'innerBlocks', li(parB), 'attributes', 'content'], 'payaza/paragraph', 'content') })) : null, btnB ? (_jsx("div", { className: "pt-4", children: _jsx(Link, { href: hrefWithSlug(ctx.slug, blkAttr(btnB).url), children: _jsx(Button, { className: "h-14 px-10 rounded-full bg-black text-white hover:bg-gray-800 text-base transition-all hover:scale-105", children: _jsx("span", { dangerouslySetInnerHTML: {
+                                                __html: richFieldHtmlForRender(blkAttr(btnB).text, ctx.getLayoutText(ctx.storeConfig, 'common.shopNow', 'Shop Collection')),
+                                            }, ...pbRich(ctx, 'hero', ['blocks', 0, 'innerBlocks', li(btnB), 'attributes', 'text'], 'payaza/button', 'text') }) }) }) })) : null] }) }), _jsxs("div", { className: "relative h-[60vh] lg:h-full w-full lg:order-2 order-1 overflow-hidden group", ...payazaGroupBindingProps(ctx.isPreview ?? false, 'hero', ['blocks', String(rightGrpIdx)]), style: {
+                        ...blkAttr(right ?? {}).payazaStyle,
+                        ...(right && blkAttr(right).show === false ? { display: 'none' } : {}),
+                    }, children: [heroImg ? (_jsx(ImageWithFallback, { src: String(blkAttr(heroImg).url || ctx.bannerFallback), alt: String(blkAttr(heroImg).alt || 'Minimal Fashion'), className: "absolute inset-0 w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-[2s]", ...payazaImg(ctx, 'hero', ['blocks', rightGrpIdx, 'innerBlocks', heroImgIx, 'attributes', 'url']) })) : (_jsx(ImageWithFallback, { src: ctx.bannerFallback, alt: "", className: "absolute inset-0 w-full h-full object-cover object-center" })), capLines.length ? (_jsx("div", { className: "absolute bottom-8 right-8 bg-white/90 backdrop-blur p-4 rounded-lg hidden md:block", children: capLines.map((line, ix) => {
+                                const pix = capGroup?.innerBlocks?.indexOf(line) ?? ix;
+                                return (_jsx("p", { className: ix === 0 ? 'text-xs font-bold uppercase tracking-wider mb-1' : 'text-sm text-gray-600', dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(blkAttr(line).content, '') }, ...pbRich(ctx, 'hero', ['blocks', rightGrpIdx, 'innerBlocks', capGrpIxInRight, 'innerBlocks', pix, 'attributes', 'content'], 'payaza/paragraph', 'content') }, line.clientId ?? ix));
+                            }) })) : null] })] }) }));
+}
+export function renderFeaturesBlocks(sec, ctx) {
+    const blocks = sec.blocks;
+    if (!blocks?.length)
+        return null;
+    const feats = blocks.filter((b) => b?.name === 'payaza/feature-item');
+    return (_jsx("section", { "data-section": "features", "data-payaza-section-key": "features", "data-payaza-page": "home", className: "py-12 border-b border-gray-100 bg-white", children: _jsx("div", { className: "container mx-auto px-4 md:px-8", children: _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: feats.map((fb, ix) => {
+                    const ai = blkAttr(fb);
+                    const r = blocks.indexOf(fb);
+                    return (_jsxs("div", { className: "flex items-center gap-4 group", children: [_jsx("div", { className: "w-12 h-12 rounded-full bg-gray-50 flex items-center justify-center group-hover:bg-black group-hover:text-white transition-colors duration-300", ...payazaIconBindingProps(!!ctx?.isPreview, 'features', ['blocks', String(r), 'attributes', 'icon']), children: _jsx(DynamicIcon, { name: readItemIconName(ai, 'Circle'), className: "w-5 h-5" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-bold uppercase tracking-wider", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(ai.title, 'Feature') }, ...pbRich(ctx, 'features', ['blocks', r, 'attributes', 'title'], 'payaza/feature-item', 'title') }), _jsx("p", { className: "text-xs text-gray-500", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(ai.description, '') }, ...pbRich(ctx, 'features', ['blocks', r, 'attributes', 'description'], 'payaza/feature-item', 'description') })] })] }, fb.clientId || ix));
+                }) }) }) }));
+}
+export function renderCategoriesHeaderBlocks(sec, ctx) {
+    const blocks = sec.blocks;
+    if (!blocks?.length)
+        return null;
+    const h = blocks.find((b) => b.name === 'payaza/heading');
+    const btn = blocks.find((b) => b.name === 'payaza/button');
+    const ih = h ? blocks.indexOf(h) : -1;
+    const ib = btn ? blocks.indexOf(btn) : -1;
+    return (_jsxs("div", { className: "flex justify-between items-end mb-8 md:mb-12", children: [h ? (_jsx("h2", { className: "text-3xl font-light", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(blkAttr(h).content, 'Categories') }, ...pbRich(ctx, 'categories', ['blocks', ih, 'attributes', 'content'], 'payaza/heading', 'content') })) : (_jsx("h2", { className: "text-3xl font-light", children: "Categories" })), btn ? (_jsx(Link, { href: hrefWithSlug(ctx.slug, blkAttr(btn).url || '/categories'), className: "text-sm font-bold uppercase tracking-wider border-b border-black pb-1 hover:text-gray-600 hover:border-gray-600 transition-colors", children: _jsx("span", { dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(blkAttr(btn).text, 'View All') }, ...pbRich(ctx, 'categories', ['blocks', ib, 'attributes', 'text'], 'payaza/button', 'text') }) })) : null] }));
+}
+export function renderFeaturedIntroBlocks(sec, ctx) {
+    const blocks = sec.blocks;
+    if (!blocks?.length)
+        return null;
+    const h = blocks.find((b) => b.name === 'payaza/heading');
+    const p = blocks.find((b) => b.name === 'payaza/paragraph');
+    const ih = h ? blocks.indexOf(h) : -1;
+    const ip = p ? blocks.indexOf(p) : -1;
+    return (_jsxs("div", { className: "max-w-2xl mx-auto text-center mb-10 md:mb-16", children: [h ? (_jsx("h2", { className: "text-3xl md:text-4xl font-light mb-4", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(blkAttr(h).content, 'The Essentials') }, ...pbRich(ctx, 'featuredProducts', ['blocks', ih, 'attributes', 'content'], 'payaza/heading', 'content') })) : null, p ? (_jsx("p", { className: "text-gray-500", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(blkAttr(p).content, '') }, ...pbRich(ctx, 'featuredProducts', ['blocks', ip, 'attributes', 'content'], 'payaza/paragraph', 'content') })) : null] }));
+}
+export function renderShopTheLookBlocks(sec, ctx) {
+    const blocks = sec.blocks;
+    if (!blocks?.length)
+        return null;
+    const visual = blocks.find((b) => b.name === 'payaza/group' && String(blkAttr(b).variant) === 'shop-look-visual');
+    const copyG = blocks.find((b) => b.name === 'payaza/group' && String(blkAttr(b).variant) === 'shop-look-copy');
+    if (!visual || !copyG)
+        return null;
+    const vi = blocks.indexOf(visual);
+    const ci = blocks.indexOf(copyG);
+    const img = visual.innerBlocks?.find((x) => x.name === 'payaza/image');
+    const hotspots = visual.innerBlocks?.filter((x) => x.name === 'payaza/hotspot') ?? [];
+    const imgIx = img && visual.innerBlocks ? visual.innerBlocks.indexOf(img) : 0;
+    const h2 = copyG.innerBlocks?.find((x) => x.name === 'payaza/heading');
+    const body = copyG.innerBlocks?.find((x) => x.name === 'payaza/paragraph');
+    const hi = h2 && copyG.innerBlocks ? copyG.innerBlocks.indexOf(h2) : 0;
+    const bi = body && copyG.innerBlocks ? copyG.innerBlocks.indexOf(body) : 1;
+    return (_jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center", children: [_jsxs("div", { className: "relative aspect-[4/5] bg-gray-100 group overflow-hidden", ...payazaGroupBindingProps(ctx.isPreview ?? false, 'about', ['blocks', String(vi)]), style: {
+                    ...blkAttr(visual).payazaStyle,
+                    ...(blkAttr(visual).show === false ? { display: 'none' } : {}),
+                }, children: [img ? (_jsx(ImageWithFallback, { src: String(blkAttr(img).url), alt: String(blkAttr(img).alt || ''), className: "w-full h-full object-cover", ...payazaImg(ctx, 'about', ['blocks', vi, 'innerBlocks', imgIx, 'attributes', 'url']) })) : null, hotspots.map((hs, ix) => {
+                        const hai = blkAttr(hs);
+                        const top = Number(hai.topPct ?? 30);
+                        const left = Number(hai.leftPct ?? 50);
+                        const align = hai.align === 'right' ? 'right' : 'left';
+                        const spotIdx = visual.innerBlocks.indexOf(hs);
+                        return (_jsxs("div", { className: "absolute group/spot", style: {
+                                top: `${top}%`,
+                                ...(align === 'left' ? { left: `${left}%` } : { left: `${left}%`, marginLeft: '-8px' }),
+                            }, children: [_jsx("div", { className: "w-4 h-4 bg-white rounded-full animate-pulse cursor-pointer relative z-10 hover:scale-125 transition-transform" }), _jsxs("div", { className: align === 'right'
+                                        ? 'absolute right-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity'
+                                        : 'absolute left-6 top-1/2 -translate-y-1/2 bg-white p-3 rounded shadow-lg w-48 opacity-0 group-hover/spot:opacity-100 transition-opacity', children: [_jsx("p", { className: "font-bold text-xs mb-1", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(hai.productName, '') }, ...pbRich(ctx, 'about', ['blocks', vi, 'innerBlocks', spotIdx, 'attributes', 'productName'], 'payaza/hotspot', 'productName') }), _jsx("p", { className: "text-xs text-gray-500", children: String(hai.productPrice) })] })] }, hs.clientId || ix));
+                    })] }), _jsxs("div", { className: "space-y-8", ...payazaGroupBindingProps(ctx.isPreview ?? false, 'about', ['blocks', String(ci)]), style: {
+                    ...blkAttr(copyG).payazaStyle,
+                    ...(blkAttr(copyG).show === false ? { display: 'none' } : {}),
+                }, children: [h2 ? (_jsx("h2", { className: "text-4xl font-light", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(blkAttr(h2).content, '') }, ...pbRich(ctx, 'about', ['blocks', ci, 'innerBlocks', hi, 'attributes', 'content'], 'payaza/heading', 'content') })) : null, body ? (_jsx("p", { className: "text-gray-600 leading-relaxed max-w-md", dangerouslySetInnerHTML: { __html: richFieldHtmlForRender(blkAttr(body).content, '') }, ...pbRich(ctx, 'about', ['blocks', ci, 'innerBlocks', bi, 'attributes', 'content'], 'payaza/paragraph', 'content') })) : null, _jsx("div", { className: "space-y-4", children: ctx.products.slice(0, 3).map((item, i) => (_jsxs("div", { className: "flex gap-4 items-center p-2 hover:bg-gray-50 rounded-lg transition-colors group cursor-pointer", children: [_jsx("div", { className: "w-16 h-20 bg-white relative", children: _jsx(ImageWithFallback, { src: item.images[0], alt: item.name, className: "w-full h-full object-cover" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("h4", { className: "font-medium text-sm mb-1", children: item.name }), _jsx("p", { className: "text-xs text-gray-500", children: formatCurrency(item.price, item.currency || 'USD') })] }), ctx.onQuickAdd ? (_jsx(Button, { variant: "ghost", size: "icon", onClick: () => ctx.onQuickAdd?.(item), className: "opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(Plus, { className: "h-4 w-4" }) })) : null] }, i))) }), _jsx(Link, { href: `/${ctx.slug}/products`, children: _jsx(Button, { className: "w-full bg-black text-white hover:bg-gray-800 h-12 rounded-none uppercase tracking-widest text-xs font-bold", children: "Shop The Edit" }) })] })] }));
+}
+/** Map serialized promo blocks → PromoBanner-compatible config. */
+export function promoConfigFromBlocks(sec) {
+    const blocks = sec.blocks;
+    if (!blocks?.length)
+        return null;
+    let subtitle = '';
+    let buttonText;
+    let buttonLink;
+    for (const b of blocks) {
+        if (b.name === 'payaza/paragraph') {
+            const c = blkAttr(b).content;
+            subtitle = typeof c === 'string' ? c : String(c ?? '');
+        }
+        if (b.name === 'payaza/button') {
+            const t = blkAttr(b).text;
+            buttonText = typeof t === 'string' ? t : String(t ?? '');
+            const urlRaw = blkAttr(b).url;
+            buttonLink = typeof urlRaw === 'string' ? urlRaw : String(urlRaw ?? '/products');
+        }
+    }
+    return {
+        show: sec.show !== false,
+        subtitle: subtitle.replace(/<[^>]*>/g, '').trim(),
+        buttonText,
+        buttonLink,
+    };
+}

package/dist/layouts/clothing-minimal/index.d.ts

@@ -0,0 +1,8 @@
+export { ClothingHomePageMinimal } from './components/ClothingHomePageMinimal';
+export { ClothingMinimalProductsPage } from './pages/ProductsPage';
+export { ClothingMinimalProductDetailPage } from './pages/ProductDetailPage';
+export { ClothingMinimalCategoryPage } from './pages/CategoryPage';
+export { ClothingMinimalCategoriesPage } from './pages/CategoriesPage';
+export { ClothingMinimalAboutPage } from './pages/AboutPage';
+export { ClothingMinimalContactPage } from './pages/ContactPage';
+//# sourceMappingURL=index.d.ts.map

package/dist/layouts/clothing-minimal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layouts/clothing-minimal/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,6BAA6B,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/layouts/clothing-minimal/index.js

@@ -0,0 +1,8 @@
+// Fashion Minimal (clothing-minimal) layout — fully sandboxed exports
+export { ClothingHomePageMinimal } from './components/ClothingHomePageMinimal.js';
+export { ClothingMinimalProductsPage } from './pages/ProductsPage.js';
+export { ClothingMinimalProductDetailPage } from './pages/ProductDetailPage.js';
+export { ClothingMinimalCategoryPage } from './pages/CategoryPage.js';
+export { ClothingMinimalCategoriesPage } from './pages/CategoriesPage.js';
+export { ClothingMinimalAboutPage } from './pages/AboutPage.js';
+export { ClothingMinimalContactPage } from './pages/ContactPage.js';

package/dist/layouts/clothing-minimal/pages/AboutPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface AboutPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ClothingMinimalAboutPage({ storeConfig: initialConfig }: AboutPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AboutPage.d.ts.map

package/dist/layouts/clothing-minimal/pages/AboutPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AboutPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/AboutPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AASvD,UAAU,cAAc;IACtB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAgBD,wBAAgB,wBAAwB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,cAAc,2CA+WtF"}

package/dist/layouts/clothing-minimal/pages/AboutPage.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Heart, ArrowRight } from 'lucide-react';
+import { Button } from '../../../components/ui/button.js';
+import { DotPattern } from '../../../components/ui/background-patterns.js';
+import { DynamicIcon } from '../../../components/ui/dynamic-icon.js';
+import { useStore } from '../../../lib/store-context.js';
+import Image from 'next/image';
+import { encodePayazaFieldKey, payazaInlineBindingProps, payazaIconBindingProps } from '../../../preview/canvas/field-key.js';
+const DEFAULT_VALUES = [
+    { icon: 'Award', title: 'Pure Materials', description: 'We use only the highest quality organic and sustainable fabrics.' },
+    { icon: 'Users', title: 'Inclusive Design', description: 'Fashion designed for every body and every style.' },
+    { icon: 'Heart', title: 'Ethical Craft', description: 'Our garments are made in ethical workshops with fair wages.' },
+    { icon: 'Leaf', title: 'Eco-Conscious', description: 'Minimal waste production and plastic-free packaging.' },
+];
+const DEFAULT_STATS = [
+    { value: '12k+', label: 'Happy Shoppers' },
+    { value: '60+', label: 'Active Designs' },
+    { value: '30+', label: 'Countries Served' },
+    { value: '100%', label: 'Eco Impact' },
+];
+export function ClothingMinimalAboutPage({ storeConfig: initialConfig }) {
+    const { store } = useStore();
+    const storeConfig = store || initialConfig;
+    const isPreview = !!storeConfig.isPreview;
+    const payaza = (sectionKey, segments) => isPreview ? encodePayazaFieldKey(sectionKey, segments) : undefined;
+    const primaryColor = storeConfig.branding.primaryColor;
+    const secondaryColor = storeConfig.branding.secondaryColor || primaryColor;
+    const aboutConfig = storeConfig.layoutConfig?.pages?.about;
+    // ── aboutHeader ──────────────────────────────────────────────────────────
+    const heroImage = aboutConfig?.aboutHeader?.heroImage ||
+        aboutConfig?.heroImage ||
+        'https://images.unsplash.com/photo-1558769132-cb1aea458c5e?q=80&w=2074&auto=format&fit=crop';
+    const pageTitle = aboutConfig?.aboutHeader?.title ||
+        aboutConfig?.title ||
+        'Crafting Experiences, Delivering Joy.';
+    const missionStatement = aboutConfig?.aboutHeader?.missionStatement ||
+        aboutConfig?.missionStatement ||
+        storeConfig.description ||
+        'We create timeless pieces built for everyday confidence.';
+    // ── aboutContent ─────────────────────────────────────────────────────────
+    const subLabel = aboutConfig?.aboutContent?.subLabel || 'Who We Are';
+    const storyHeading = aboutConfig?.aboutContent?.heading || 'Our Journey';
+    const pageContent = aboutConfig?.aboutContent?.content || aboutConfig?.content || storeConfig.description;
+    const teamImage = aboutConfig?.aboutContent?.teamImage || 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2071&auto=format&fit=crop';
+    const teamCaption = aboutConfig?.aboutContent?.teamCaption || 'The Dream Team';
+    const teamSubCaption = aboutConfig?.aboutContent?.teamSubCaption || 'Working together to serve you better';
+    const values = aboutConfig?.aboutContent?.values || DEFAULT_VALUES;
+    // ── statsSection ─────────────────────────────────────────────────────────
+    const stats = aboutConfig?.statsSection?.items ||
+        DEFAULT_STATS.map((s, i) => i === 1 && storeConfig.products?.length
+            ? { ...s, value: `${storeConfig.products.length}+` }
+            : s);
+    // ── contactSection ───────────────────────────────────────────────────────
+    const contactTitle = aboutConfig?.contactSection?.title || 'Get in Touch';
+    const contactDescription = aboutConfig?.contactSection?.description || "Have questions? We'd love to hear from you. Reach out to our team via email, phone, or visit us at our store.";
+    const visitLabel = aboutConfig?.contactSection?.visitLabel || 'Visit Us';
+    const visitAddress = aboutConfig?.contactSection?.visitAddress || `123 Store Street\nCommerce City, ST 12345`;
+    const emailLabel = aboutConfig?.contactSection?.emailLabel || 'Email Us';
+    const email1 = aboutConfig?.contactSection?.email1 || `hello@${storeConfig.slug}.com`;
+    const email2 = aboutConfig?.contactSection?.email2 || `support@${storeConfig.slug}.com`;
+    const hoursLabel = aboutConfig?.contactSection?.hoursLabel || 'Opening Hours';
+    const hoursLine1 = aboutConfig?.contactSection?.hoursLine1 || 'Mon - Fri: 9am - 6pm';
+    const hoursLine2 = aboutConfig?.contactSection?.hoursLine2 || 'Sat - Sun: 10am - 4pm';
+    const visitIcon = aboutConfig?.contactSection?.visitIcon || 'MapPin';
+    const emailIcon = aboutConfig?.contactSection?.emailIcon || 'Mail';
+    const hoursIcon = aboutConfig?.contactSection?.hoursIcon || 'Clock';
+    return (_jsxs("div", { className: "min-h-screen bg-white pb-20 overflow-hidden", children: [aboutConfig?.aboutHeader?.show !== false && (_jsxs("section", { "data-section": "aboutHeader", "data-payaza-section-key": "aboutHeader", "data-payaza-page": "about", className: "relative h-[60vh] min-h-[500px] w-full overflow-hidden", children: [_jsxs("div", { className: "absolute inset-0", "data-payaza-image": payaza('aboutHeader', ['heroImage']), children: [_jsx(Image, { src: heroImage, alt: "About Us", fill: true, className: "w-full h-full object-cover transform scale-105 animate-pulse-slow", unoptimized: true }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" })] }), _jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("div", { className: "container mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "max-w-3xl animate-fade-in-up", children: [_jsx("h1", { className: "text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight leading-tight", "data-payaza-edit": payaza('aboutHeader', ['title']), children: pageTitle }), _jsx("p", { className: "text-xl md:text-2xl text-gray-200 max-w-2xl leading-relaxed font-light", "data-payaza-edit": payaza('aboutHeader', ['missionStatement']), children: missionStatement })] }) }) })] })), aboutConfig?.aboutContent?.show !== false && (_jsxs("section", { "data-section": "aboutContent", "data-payaza-section-key": "aboutContent", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 relative", children: [_jsx("div", { className: "absolute top-0 right-0 -mt-24 -mr-24 w-96 h-96 bg-gray-50 rounded-full blur-3xl -z-10" }), _jsx("div", { className: "container mx-auto max-w-7xl", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-16 items-center", children: [_jsxs("div", { className: "relative", children: [aboutConfig?.gallerySection && aboutConfig.gallerySection.length > 0 ? (_jsx("div", { className: "grid grid-cols-2 gap-4", children: aboutConfig.gallerySection.slice(0, 4).map((img, i) => (_jsx("div", { className: `relative overflow-hidden rounded-2xl shadow-lg ${i === 0 ? 'col-span-2 aspect-[16/9]' : 'aspect-square'}`, children: _jsx(Image, { src: img.image, alt: img.caption || 'Gallery Image', fill: true, className: "w-full h-full object-cover hover:scale-110 transition-transform duration-500", unoptimized: true }) }, i))) })) : (_jsxs("div", { className: "relative aspect-[4/5] rounded-[2rem] overflow-hidden shadow-2xl", children: [_jsx("div", { "data-payaza-image": payaza('aboutContent', ['teamImage']), className: "absolute inset-0", children: _jsx(Image, { src: teamImage, alt: "Our Team", fill: true, className: "w-full h-full object-cover", unoptimized: true }) }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60" }), _jsxs("div", { className: "absolute bottom-8 left-8 text-white", children: [_jsx("p", { className: "font-bold text-lg", "data-payaza-edit": payaza('aboutContent', ['teamCaption']), children: teamCaption }), _jsx("p", { className: "text-white/80 text-sm", "data-payaza-edit": payaza('aboutContent', ['teamSubCaption']), children: teamSubCaption })] })] })), _jsx("div", { className: "absolute -bottom-6 -right-6 w-24 h-24 bg-white rounded-2xl shadow-xl flex items-center justify-center p-4 animate-bounce duration-[3000ms]", children: _jsx(Heart, { className: "w-10 h-10", style: { color: primaryColor, fill: primaryColor } }) })] }), _jsxs("div", { className: "space-y-10", children: [_jsxs("div", { children: [_jsx("span", { className: "text-sm font-bold uppercase tracking-widest mb-3 block", style: { color: primaryColor }, "data-payaza-edit": payaza('aboutContent', ['subLabel']), children: subLabel }), _jsx("h2", { className: "text-4xl md:text-5xl font-black text-gray-900 mb-6 tracking-tight", "data-payaza-edit": payaza('aboutContent', ['heading']), children: storyHeading }), _jsxs("div", { className: "prose prose-lg text-gray-600 leading-relaxed space-y-6", "data-payaza-edit": payaza('aboutContent', ['content']), children: [pageContent?.split('\n').map((paragraph, idx) => (_jsx("p", { children: paragraph }, idx))), !pageContent && (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Founded with a bold vision to redefine excellence in the", ' ', _jsx("span", { className: "font-semibold text-gray-900", children: storeConfig.type }), " industry,", ' ', storeConfig.name, " has grown from a small passion project into a beloved brand."] }), _jsx("p", { children: "Every day, we strive to bring you the best products, curated with care and delivered with a smile." })] }))] })] }), _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-8", children: values.map((item, idx) => {
+                                                return (_jsxs("div", { className: "flex gap-4 group", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-14 h-14 rounded-2xl flex items-center justify-center transition-colors group-hover:bg-gray-100", style: { backgroundColor: `${primaryColor}10` }, ...payazaIconBindingProps(isPreview, 'aboutContent', ['values', String(idx), 'icon']), children: _jsx(DynamicIcon, { name: item.icon || 'Award', className: "h-7 w-7 transition-transform group-hover:scale-110", style: { color: primaryColor } }) }) }), _jsxs("div", { children: [_jsx("h4", { className: "font-bold text-gray-900 mb-2 text-lg", "data-payaza-edit": payaza('aboutContent', ['values', String(idx), 'title']), children: item.title }), _jsx("p", { className: "text-gray-600 text-sm leading-relaxed", "data-payaza-edit": payaza('aboutContent', ['values', String(idx), 'description']), children: item.description })] })] }, idx));
+                                            }) })] })] }) })] })), aboutConfig?.statsSection?.show !== false && (_jsxs("section", { "data-section": "statsSection", "data-payaza-section-key": "statsSection", "data-payaza-page": "about", className: "py-20 relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 opacity-10", children: _jsx(DotPattern, { color: primaryColor, cx: 2, cy: 2, cr: 2, width: 30, height: 30 }) }), _jsx("div", { className: "absolute inset-0", style: { backgroundColor: `${secondaryColor}15` } }), _jsx("div", { className: "container mx-auto px-4 relative z-10", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12", children: stats.map((stat, idx) => (_jsxs("div", { className: "text-center group", children: [_jsx("div", { className: "text-5xl md:text-6xl font-black mb-2 tracking-tight transition-transform group-hover:scale-110 duration-300", style: { color: primaryColor }, "data-payaza-edit": payaza('statsSection', ['items', String(idx), 'value']), children: stat.value }), _jsx("div", { className: "text-gray-600 font-bold uppercase tracking-widest text-xs md:text-sm", "data-payaza-edit": payaza('statsSection', ['items', String(idx), 'label']), children: stat.label })] }, idx))) }) })] })), aboutConfig?.contactSection?.show !== false && (_jsx("section", { "data-section": "contactSection", "data-payaza-section-key": "contactSection", "data-payaza-page": "about", className: "py-24 px-4 sm:px-6 lg:px-8 bg-white", children: _jsxs("div", { className: "container mx-auto max-w-6xl", children: [_jsxs("div", { className: "text-center mb-16", children: [_jsx("h2", { className: "text-3xl md:text-4xl font-bold text-gray-900 mb-4", ...payazaInlineBindingProps(isPreview, 'contactSection', ['title']), children: contactTitle }), _jsx("p", { className: "text-gray-500 max-w-xl mx-auto", ...payazaInlineBindingProps(isPreview, 'contactSection', ['description']), children: contactDescription })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", children: [_jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...payazaIconBindingProps(isPreview, 'contactSection', ['visitIcon']), children: _jsx(DynamicIcon, { name: visitIcon, className: "h-8 w-8 text-gray-400 group-hover:text-blue-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", "data-payaza-edit": payaza('contactSection', ['visitLabel']), children: visitLabel }), _jsx("p", { className: "text-gray-600 leading-relaxed whitespace-pre-line", "data-payaza-edit": payaza('contactSection', ['visitAddress']), children: visitAddress })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 border-2 border-transparent group-hover:border-orange-100 rounded-[2rem] transition-colors pointer-events-none" }), _jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...payazaIconBindingProps(isPreview, 'contactSection', ['emailIcon']), children: _jsx(DynamicIcon, { name: emailIcon, className: "h-8 w-8 text-gray-400 group-hover:text-orange-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", "data-payaza-edit": payaza('contactSection', ['emailLabel']), children: emailLabel }), _jsxs("p", { className: "text-gray-600 leading-relaxed mb-4", children: [_jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['email1']), children: email1 }), _jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['email2']), children: email2 })] }), _jsxs(Button, { variant: "link", className: "text-orange-600 font-bold p-0 h-auto hover:no-underline group-hover:translate-x-1 transition-transform", children: ["Send a message ", _jsx(ArrowRight, { className: "ml-1 h-4 w-4" })] })] }), _jsxs("div", { className: "group p-8 rounded-[2rem] bg-gray-50 border border-gray-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300 text-center", children: [_jsx("div", { className: "w-16 h-16 mx-auto mb-6 rounded-2xl bg-white shadow-sm flex items-center justify-center group-hover:scale-110 transition-transform", ...payazaIconBindingProps(isPreview, 'contactSection', ['hoursIcon']), children: _jsx(DynamicIcon, { name: hoursIcon, className: "h-8 w-8 text-gray-400 group-hover:text-green-500 transition-colors" }) }), _jsx("h3", { className: "font-bold text-xl text-gray-900 mb-3", "data-payaza-edit": payaza('contactSection', ['hoursLabel']), children: hoursLabel }), _jsxs("p", { className: "text-gray-600 leading-relaxed", children: [_jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['hoursLine1']), children: hoursLine1 }), _jsx("span", { className: "block", "data-payaza-edit": payaza('contactSection', ['hoursLine2']), children: hoursLine2 })] })] })] })] }) }))] }));
+}

package/dist/layouts/clothing-minimal/pages/CategoriesPage.d.ts

@@ -0,0 +1,7 @@
+import { StoreConfig } from '../../../lib/store-types';
+interface CategoriesPageProps {
+    storeConfig: StoreConfig;
+}
+export declare function ClothingMinimalCategoriesPage({ storeConfig: initialConfig }: CategoriesPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CategoriesPage.d.ts.map

package/dist/layouts/clothing-minimal/pages/CategoriesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/clothing-minimal/pages/CategoriesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AASvD,UAAU,mBAAmB;IAC3B,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,wBAAgB,6BAA6B,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,mBAAmB,2CA8GhG"}