storefront-layouts-staging 1.0.0-staging.0

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

@@ -0,0 +1,274 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button.js';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
+import { Sheet } from '../../../components/ui/sheet.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { ProductCard } from '../../../components/ui/product-card.js';
+import { ProductGridSkeleton } from '../../../components/ui/skeletons/index.js';
+import { CategoryTree } from '../../../components/ui/category-tree.js';
+import { useStore } from '../../../lib/store-context.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { useLoading } from '../../../lib/loading-context.js';
+import { useAnalytics } from '../../../hooks/use-analytics.js';
+import { ChevronDown, ChevronUp, Star, Check, Search, RotateCcw, SlidersHorizontal } from 'lucide-react';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+import { useState, useMemo, useEffect, Suspense } from 'react';
+import { formatCurrency, isEditorPreviewMode, resolveStoreProductsForDisplay } from '../../../lib/utils/index.js';
+import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
+import { useCatalogPriceRange } from '../../../hooks/use-catalog-price-range.js';
+import { getAllCategoryIds, flattenCategoryTree, buildCategoryTree } from '../../../lib/utils/category-tree.js';
+import { getBannerImage, getLayoutText } from '../../../lib/utils/asset-helpers.js';
+import { shouldUseAPI } from '../../../lib/utils/demo-detection.js';
+import { getStoreUrl } from '../../../lib/utils/url-helpers.js';
+import { encodePayazaFieldKey } from '../../../preview/canvas/field-key.js';
+function ProductsPageContent({ storeConfig: initialConfig }) {
+    const { store, addToCart } = useStore();
+    const storeConfig = store || initialConfig;
+    const isPreview = isEditorPreviewMode(storeConfig);
+    const payaza = (sectionKey, segments) => isPreview ? encodePayazaFieldKey(sectionKey, segments) : undefined;
+    const { products: loadedProducts, categories: loadedCategories, isLoading: isLoadingProducts } = useCatalogLoader(storeConfig, { fetchServices: false });
+    const searchParams = useSearchParams();
+    const categoryParam = searchParams.get('category');
+    const [products, setProducts] = useState(() => {
+        let initialProducts = resolveStoreProductsForDisplay(loadedProducts, isPreview);
+        // Ensure all products have unique IDs just in case mock data has duplicates
+        // or if we are artificially duplicating for grid demo
+        if (initialProducts.length > 0) {
+            // If very few products, duplicate them to show grid structure
+            if (initialProducts.length < 4) {
+                initialProducts = [...initialProducts, ...initialProducts].map((p, i) => ({
+                    ...p,
+                    id: `${p.id}-copy-${i}`,
+                    name: `${p.name} ${i > 0 ? '(Copy)' : ''}`
+                }));
+            }
+            else {
+                // Even if enough products, ensure IDs are unique strings
+                // (Mock data usually is fine, but this is a safeguard)
+                const seenIds = new Set();
+                initialProducts = initialProducts.map((p, i) => {
+                    if (seenIds.has(p.id)) {
+                        return { ...p, id: `${p.id}-${i}` };
+                    }
+                    seenIds.add(p.id);
+                    return p;
+                });
+            }
+        }
+        return initialProducts;
+    });
+    const categories = loadedCategories;
+    useEffect(() => {
+        if (loadedProducts.length > 0) {
+            setProducts(resolveStoreProductsForDisplay(loadedProducts, isPreview));
+        }
+    }, [loadedProducts, isPreview]);
+    const { addToast } = useToast();
+    const { startBackendLoading, stopBackendLoading } = useLoading();
+    const { trackEvent } = useAnalytics();
+    // State for filters & sort
+    const { priceRange, setPriceRange, catalogBounds, sliderMax, resetPriceRange, hasActivePriceFilter, } = useCatalogPriceRange(products);
+    const [selectedBrands, setSelectedBrands] = useState([]);
+    const [selectedCategories, setSelectedCategories] = useState([]);
+    const [selectedCategoryFilter, setSelectedCategoryFilter] = useState(null);
+    // Initialize filters from URL
+    useEffect(() => {
+        if (categoryParam) {
+            setSelectedCategoryFilter(categoryParam);
+        }
+    }, [categoryParam]);
+    const [minRating, setMinRating] = useState(null);
+    const [showInStockOnly, setShowInStockOnly] = useState(false);
+    const [showMoreBrands, setShowMoreBrands] = useState(false);
+    const [isFilterOpen, setIsFilterOpen] = useState(false);
+    const [sortBy, setSortBy] = useState('featured');
+    const [visibleProducts, setVisibleProducts] = useState(12);
+    const [isFiltering, setIsFiltering] = useState(false);
+    // Extract unique brands
+    const brands = useMemo(() => {
+        const brandSet = new Set();
+        products.forEach(product => {
+            // First check specifications for Brand
+            if (product.specifications?.Brand) {
+                brandSet.add(product.specifications.Brand);
+            }
+            else {
+                // Fallback to regex matching common brand names
+                const brandMatch = product.name.match(/\b(Reebok|Nike|Adidas|Puma|Zara|Dickies|Vans|Uniqlo|New Balance|Converse|Sony|Samsung|Apple|Dell|HP|Gucci|Prada|Versace|Armani|Calvin Klein|Tommy Hilfiger|Levi's|Gap|H&M|Forever 21|ASOS|Shein|Amazon|Microsoft|LG|Canon|Nikon|Bose|JBL|Beats|Ray-Ban|Oakley)\b/i);
+                if (brandMatch) {
+                    brandSet.add(brandMatch[1]);
+                }
+            }
+        });
+        return Array.from(brandSet).sort();
+    }, [products]);
+    // Track filter changes and show loading
+    useEffect(() => {
+        setIsFiltering(true);
+        const timer = setTimeout(() => setIsFiltering(false), 300);
+        return () => clearTimeout(timer);
+    }, [selectedBrands, selectedCategories, priceRange, selectedCategoryFilter, minRating, showInStockOnly, sortBy]);
+    // Build category tree for filtering
+    const categoryTree = useMemo(() => buildCategoryTree(categories), [categories]);
+    // Get all category IDs to filter (including children of selected parent categories)
+    const effectiveCategoryIds = useMemo(() => {
+        if (selectedCategories.length === 0)
+            return [];
+        const allIds = new Set();
+        const flatCategories = flattenCategoryTree(categoryTree);
+        selectedCategories.forEach(selectedId => {
+            allIds.add(selectedId);
+            // Find the category and add all its children
+            const category = flatCategories.find(c => c.id === selectedId);
+            if (category) {
+                const childIds = getAllCategoryIds(category);
+                childIds.forEach(id => allIds.add(id));
+            }
+        });
+        return Array.from(allIds);
+    }, [selectedCategories, categoryTree]);
+    // Filter & Sort Logic
+    const filteredAndSortedProducts = useMemo(() => {
+        let result = products.filter(product => {
+            // Brand filter
+            if (selectedBrands.length > 0) {
+                const productBrand = product.specifications?.Brand ||
+                    product.name.match(/\b(Reebok|Nike|Adidas|Puma|Zara|Dickies|Vans|Uniqlo|New Balance|Converse|Sony|Samsung|Apple|Dell|HP|Gucci|Prada|Versace|Armani|Calvin Klein|Tommy Hilfiger|Levi's|Gap|H&M|Forever 21|ASOS|Shein|Amazon|Microsoft|LG|Canon|Nikon|Bose|JBL|Beats|Ray-Ban|Oakley)\b/i)?.[1];
+                if (!productBrand || !selectedBrands.includes(productBrand)) {
+                    return false;
+                }
+            }
+            // Category filter (Sidebar) - includes parent and child categories
+            if (effectiveCategoryIds.length > 0) {
+                if (!effectiveCategoryIds.includes(product.categoryId)) {
+                    return false;
+                }
+            }
+            // Price filter
+            if (product.price < priceRange[0] || product.price > priceRange[1]) {
+                return false;
+            }
+            // Category Filter (Top Buttons)
+            if (selectedCategoryFilter) {
+                const category = categories.find(c => c.slug === selectedCategoryFilter);
+                if (category && product.categoryId !== category.id) {
+                    return false;
+                }
+            }
+            // Rating Filter
+            if (minRating !== null) {
+                const productRating = product.rating || 0;
+                if (productRating < minRating) {
+                    return false;
+                }
+            }
+            // Availability Filter
+            if (showInStockOnly) {
+                if (!product.inStock) {
+                    return false;
+                }
+            }
+            return true;
+        });
+        // Sorting
+        switch (sortBy) {
+            case 'price-asc':
+                result.sort((a, b) => a.price - b.price);
+                break;
+            case 'price-desc':
+                result.sort((a, b) => b.price - a.price);
+                break;
+            case 'newest':
+                // Simulating newness by ID or reverse original order
+                result.reverse();
+                break;
+            case 'rating':
+                result.sort((a, b) => (b.rating || 0) - (a.rating || 0));
+                break;
+            default:
+                // Featured - keep original order
+                break;
+        }
+        return result;
+    }, [products, selectedBrands, effectiveCategoryIds, priceRange, selectedCategoryFilter, minRating, showInStockOnly, sortBy, categories]);
+    const displayedProducts = filteredAndSortedProducts.slice(0, visibleProducts);
+    const hasMore = visibleProducts < filteredAndSortedProducts.length;
+    const handleAddToCart = (product) => {
+        addToCart(product);
+        addToast(`${product.name} added to cart`, 'success');
+    };
+    const handleQuickView = (product) => {
+        addToast(`Quick view for ${product.name}`, 'info');
+    };
+    const clearAllFilters = () => {
+        setSelectedBrands([]);
+        setSelectedCategories([]);
+        resetPriceRange();
+        setSelectedCategoryFilter(null);
+        setMinRating(null);
+        setShowInStockOnly(false);
+    };
+    const hasActiveFilters = selectedBrands.length > 0 ||
+        selectedCategories.length > 0 ||
+        hasActivePriceFilter ||
+        minRating !== null ||
+        showInStockOnly;
+    // Breadcrumbs
+    const breadcrumbItems = [
+        { label: storeConfig.name, href: getStoreUrl(storeConfig.slug, '/') },
+        { label: 'Products', href: getStoreUrl(storeConfig.slug, '/products') },
+    ];
+    // Get layout config and category header image
+    const layoutConfig = storeConfig.layoutConfig;
+    const isRealStore = shouldUseAPI(storeConfig.slug);
+    // Debug logging for category header
+    console.log('[ProductsPage] LayoutConfig:', {
+        hasLayoutConfig: !!layoutConfig,
+        hasAssignedAssets: !!layoutConfig?.assignedAssets,
+        categoryHeaderFromAssets: layoutConfig?.assignedAssets?.category_header ? 'found' : 'not found',
+        hasAssignedText: !!layoutConfig?.assignedText,
+        categoryHeaderTitle: layoutConfig?.assignedText?.['category_header:title'],
+    });
+    // Get category header image from assignedAssets; fall back to a minimal fashion default
+    const categoryHeaderImage = layoutConfig?.assignedAssets?.category_header ||
+        getBannerImage(storeConfig, 'category_header', 'https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2070&auto=format&fit=crop');
+    console.log('[ProductsPage] Category header image:', categoryHeaderImage ? 'found' : 'not found', categoryHeaderImage);
+    // Get category header title from assignedText
+    const categoryHeaderTitle = layoutConfig?.assignedText?.['category_header:title'] ||
+        getLayoutText(storeConfig, 'category_header:title', `Explore The Collections of ${storeConfig.name}`);
+    // Get category header buttons from configuration (if available)
+    // assignedText values are always strings
+    const categoryHeaderPrimaryButton = layoutConfig?.assignedText?.['category_header:primaryButton'];
+    const categoryHeaderSecondaryButton = layoutConfig?.assignedText?.['category_header:secondaryButton'];
+    // Determine button text - use database value if available and not empty, otherwise use fallback
+    // If database explicitly provides empty string, button will be hidden
+    const hasPrimaryButtonFromConfig = categoryHeaderPrimaryButton !== undefined && categoryHeaderPrimaryButton !== null;
+    const hasSecondaryButtonFromConfig = categoryHeaderSecondaryButton !== undefined && categoryHeaderSecondaryButton !== null;
+    const primaryButtonText = hasPrimaryButtonFromConfig
+        ? (categoryHeaderPrimaryButton && categoryHeaderPrimaryButton.trim() !== '' ? categoryHeaderPrimaryButton.trim() : null)
+        : getLayoutText(storeConfig, 'common.shopNow', 'Start Shopping');
+    const secondaryButtonText = hasSecondaryButtonFromConfig
+        ? (categoryHeaderSecondaryButton && categoryHeaderSecondaryButton.trim() !== '' ? categoryHeaderSecondaryButton.trim() : null)
+        : getLayoutText(storeConfig, 'sections.categories.viewAll', 'View Categories');
+    return (_jsxs("div", { className: "min-h-screen bg-white font-sans text-slate-900", children: [layoutConfig?.sections?.productsHeader?.show !== false && (_jsxs("div", { "data-section": "productsHeader", "data-payaza-section-key": "productsHeader", "data-payaza-page": "products", className: "relative overflow-hidden bg-white", children: [(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute inset-0 z-0", "data-payaza-image": payaza('productsHeader', ['image']), children: [_jsx(ImageWithFallback, { src: layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage, alt: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || storeConfig.name, className: "w-full h-full object-cover", skeletonAspectRatio: "16/9" }), _jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-black/60" })] })), !(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) && (_jsxs("div", { className: "absolute top-0 left-0 w-full h-full overflow-hidden z-0 pointer-events-none", children: [_jsx("div", { className: "absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-gray-100 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow" }), _jsx("div", { className: "absolute bottom-[-10%] left-[-10%] w-[400px] h-[400px] bg-gray-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-pulse-slow", style: { animationDelay: '2s' } })] })), _jsx("div", { className: `container mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-12 pb-16 lg:pt-20 lg:pb-24 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'min-h-[500px] flex items-center' : ''}`, children: _jsx("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: _jsxs("div", { className: `w-full text-center lg:text-left animate-fade-in-up ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : ''}`, children: [_jsx("div", { className: "flex justify-center lg:justify-start mb-6", children: _jsx(Breadcrumbs, { items: breadcrumbItems, variant: (layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'light' : 'default' }) }), _jsx("h1", { className: `text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 leading-[1.1] ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white' : 'text-gray-900'}`, "data-payaza-edit": payaza('productsHeader', ['title']), children: layoutConfig?.sections?.productsHeader?.title || categoryHeaderTitle || (_jsxs(_Fragment, { children: ["Explore The Collections of ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-gray-900 via-gray-700 to-gray-900", children: storeConfig.name })] })) }), _jsx("p", { className: `text-lg mb-8 leading-relaxed max-w-lg mx-auto lg:mx-0 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'text-white/90' : 'text-gray-600'}`, "data-payaza-edit": payaza('productsHeader', ['description']), children: layoutConfig?.sections?.productsHeader?.description || getLayoutText(storeConfig, 'category_header:description', "Don't miss out on shopping our latest collection! curated for quality and style. Experience the perfect blend of modern aesthetics and premium craftsmanship.") }), _jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center lg:justify-start", children: [(layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText) && (layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText).trim() !== '' && (_jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white text-gray-900 hover:bg-gray-100' : ''}`, onClick: () => {
+                                                    const element = document.getElementById('product-grid');
+                                                    element?.scrollIntoView({ behavior: 'smooth' });
+                                                }, children: _jsx("span", { "data-payaza-edit": payaza('productsHeader', ['primaryButtonText']), children: layoutConfig?.sections?.productsHeader?.primaryButtonText || primaryButtonText }) })), (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText) && (layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText).trim() !== '' && (_jsx(Link, { href: getStoreUrl(storeConfig.slug, layoutConfig?.sections?.productsHeader?.secondaryButtonLink || '/categories'), children: _jsx(Button, { className: `h-12 px-8 rounded-full text-base font-medium shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 ${(layoutConfig?.sections?.productsHeader?.image || categoryHeaderImage) ? 'bg-white/10 backdrop-blur-md text-white border border-white/30 hover:bg-white/20' : 'bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-200'}`, children: _jsx("span", { "data-payaza-edit": payaza('productsHeader', ['secondaryButtonText']), children: layoutConfig?.sections?.productsHeader?.secondaryButtonText || secondaryButtonText }) }) }))] })] }) }) })] })), _jsxs("div", { "data-content-ready": true, "data-section": "productsGrid", "data-payaza-section-key": "productsGrid", "data-payaza-page": "products", className: "container mx-auto px-4 sm:px-6 lg:px-8 py-8", children: [_jsxs("div", { className: "flex gap-3 mb-8 overflow-x-auto pb-2 scrollbar-hide", children: [_jsx("button", { onClick: () => setSelectedCategoryFilter(null), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all ${!selectedCategoryFilter
+                                    ? 'bg-gray-900 text-white hover:bg-blue-600'
+                                    : 'bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600'}`, children: "All" }), categories.map((category) => (_jsx("button", { onClick: () => setSelectedCategoryFilter(selectedCategoryFilter === category.slug ? null : category.slug), className: `px-6 py-2.5 rounded-lg text-sm font-semibold whitespace-nowrap transition-all ${selectedCategoryFilter === category.slug
+                                    ? 'bg-gray-900 text-white hover:bg-blue-600'
+                                    : 'bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600'}`, children: category.name }, category.id)))] }), _jsxs("div", { id: "product-grid", className: "grid grid-cols-1 lg:grid-cols-4 gap-8", children: [_jsxs("aside", { className: "hidden lg:block col-span-1 space-y-8 sticky top-24 h-fit max-h-[calc(100vh-8rem)] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent", children: [_jsxs("div", { className: "flex items-center justify-between pb-4 border-b border-gray-100", children: [_jsx("h2", { className: "text-xl font-bold text-gray-900", children: "Filters" }), hasActiveFilters && (_jsxs("button", { onClick: clearAllFilters, className: "text-xs font-medium text-red-500 hover:text-red-700 flex items-center gap-1", children: [_jsx(RotateCcw, { className: "h-3 w-3" }), " Reset"] }))] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-gray-50 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded border flex items-center justify-center transition-colors ${showInStockOnly ? 'bg-black border-black' : 'border-gray-300 group-hover:border-black'}`, children: showInStockOnly && _jsx(Check, { className: "h-3 w-3 text-white" }) }), _jsx("input", { type: "checkbox", className: "hidden", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly) }), _jsx("span", { className: "text-sm text-gray-700 font-medium", children: "In Stock Only" })] })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide", children: "Brand" }), selectedBrands.length > 0 && (_jsx("button", { onClick: () => setSelectedBrands([]), className: "text-xs text-gray-600 hover:text-blue-600 font-medium transition-colors", children: "Clear" }))] }), brands.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [(showMoreBrands ? brands : brands.slice(0, 6)).map((brand) => (_jsx("label", { className: "flex items-center justify-between cursor-pointer group hover:bg-blue-50 hover:text-blue-600 p-2 rounded-lg -ml-2 -mr-2 transition-colors", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: selectedBrands.includes(brand), onChange: () => setSelectedBrands(prev => prev.includes(brand) ? prev.filter(b => b !== brand) : [...prev, brand]), className: "w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" }), _jsx("span", { className: "text-sm text-gray-700 font-medium group-hover:text-blue-600", children: brand })] }) }, brand))), brands.length > 6 && (_jsx("button", { onClick: () => setShowMoreBrands(!showMoreBrands), className: "text-sm text-gray-600 hover:text-blue-600 font-medium mt-2 flex items-center gap-1 transition-colors", children: showMoreBrands ? _jsxs(_Fragment, { children: ["Show less ", _jsx(ChevronUp, { className: "h-4 w-4" })] }) : _jsxs(_Fragment, { children: ["Show more ", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }))] })) : (_jsx("p", { className: "text-xs text-gray-500 italic", children: "No brands available" }))] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Category" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
+                                                    setSelectedCategories(prev => isSelected
+                                                        ? [...prev, categoryId]
+                                                        : prev.filter(id => id !== categoryId));
+                                                }, mode: "checkbox" })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide", children: "Price Range" }), (priceRange[0] > 0 || hasActivePriceFilter) && (_jsx("button", { onClick: () => resetPriceRange(), className: "text-xs text-gray-600 hover:text-blue-600 font-medium transition-colors", children: "Reset" }))] }), _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("input", { type: "range", min: "0", max: sliderMax, step: "50", value: priceRange[1], onChange: (e) => setPriceRange([priceRange[0], parseInt(e.target.value)]), className: "flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-gray-900" }) }), _jsxs("div", { className: "flex items-center justify-between text-sm font-medium", children: [_jsx("span", { className: "text-gray-900", children: formatCurrency(priceRange[0], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }), _jsx("span", { className: "text-gray-900", children: formatCurrency(priceRange[1], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) })] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("button", { onClick: () => setPriceRange([0, 100]), className: "px-3 py-2 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), " - ", formatCurrency(100, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 })] }), _jsxs("button", { onClick: () => setPriceRange([0, 500]), className: "px-3 py-2 text-xs font-semibold rounded-lg bg-gray-100 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), " - ", formatCurrency(500, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 })] })] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4", children: "Rating" }), _jsx("div", { className: "space-y-2", children: [4, 3, 2, 1].map((rating) => (_jsxs("label", { className: "flex items-center gap-3 cursor-pointer group p-2 -ml-2 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition-colors", children: [_jsx("div", { className: `w-5 h-5 rounded-full border flex items-center justify-center transition-colors ${minRating === rating ? 'border-blue-600 bg-blue-600' : 'border-gray-300 group-hover:border-blue-400'}`, children: minRating === rating && _jsx("div", { className: "w-2.5 h-2.5 bg-white rounded-full" }) }), _jsx("input", { type: "radio", name: "rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "hidden" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3.5 w-3.5 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "lg:col-span-3", children: [_jsxs("div", { className: "lg:hidden mb-6 flex items-center justify-between", children: [_jsxs(Button, { onClick: () => setIsFilterOpen(true), variant: "outline", className: "flex items-center gap-2", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), " Filters"] }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-700 focus:outline-none", children: [_jsx("option", { value: "featured", children: "Sort by: Featured" }), _jsx("option", { value: "newest", children: "Sort by: Newest" }), _jsx("option", { value: "price-asc", children: "Sort by: Price Low-High" }), _jsx("option", { value: "price-desc", children: "Sort by: Price High-Low" })] })] }), _jsxs("div", { className: "hidden lg:flex items-center justify-between mb-6", children: [_jsxs("p", { className: "text-sm text-gray-600", children: ["Showing ", _jsx("span", { className: "font-semibold text-gray-900", children: filteredAndSortedProducts.length }), " products"] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-500", children: "Sort by:" }), _jsxs("select", { value: sortBy, onChange: (e) => setSortBy(e.target.value), className: "bg-transparent text-sm font-medium text-gray-900 focus:outline-none cursor-pointer hover:text-blue-600 transition-colors", children: [_jsx("option", { value: "featured", children: "Featured" }), _jsx("option", { value: "newest", children: "Newest Arrivals" }), _jsx("option", { value: "price-asc", children: "Price: Low to High" }), _jsx("option", { value: "price-desc", children: "Price: High to Low" }), _jsx("option", { value: "rating", children: "Top Rated" })] })] })] }), isLoadingProducts || isFiltering ? (_jsx(ProductGridSkeleton, { count: 12, columns: 3 })) : displayedProducts.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: displayedProducts.map((product) => (_jsx(ProductCard, { product: product, storeSlug: storeConfig.slug, onAddToCart: handleAddToCart, onQuickView: handleQuickView }, product.id))) }), hasMore && (_jsx("div", { className: "mt-12 text-center", children: _jsx(Button, { onClick: () => setVisibleProducts(prev => prev + 12), variant: "outline", className: "min-w-[200px]", children: "Load More" }) }))] })) : (_jsxs("div", { className: "flex flex-col items-center justify-center py-20 bg-white rounded-lg border border-dashed border-gray-200 text-center", children: [_jsx("div", { className: "w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-4 text-gray-400", children: _jsx(Search, { className: "h-6 w-6" }) }), _jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: "No products found" }), _jsx("p", { className: "text-sm text-gray-500 mb-6", children: "Try adjusting your filters or search criteria." }), _jsx(Button, { onClick: clearAllFilters, variant: "outline", children: "Clear All Filters" })] }))] })] })] }), _jsxs(Sheet, { isOpen: isFilterOpen, onClose: () => setIsFilterOpen(false), title: "Filters", side: "right", children: [_jsxs("div", { className: "flex flex-col h-full overflow-y-auto pb-20 space-y-8 p-1", children: [_jsxs("div", { className: "pb-6 border-b border-gray-100", children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Availability" }), _jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: showInStockOnly, onChange: () => setShowInStockOnly(!showInStockOnly), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: "In Stock Only" })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Price Range" }), _jsx("input", { type: "range", min: "0", max: sliderMax, step: "50", value: priceRange[1], onChange: (e) => setPriceRange([priceRange[0], parseInt(e.target.value)]), className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black mb-4" }), _jsxs("div", { className: "flex justify-between font-bold text-sm", children: [_jsx("span", { children: formatCurrency(0, storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) }), _jsxs("span", { children: [formatCurrency(priceRange[1], storeConfig.settings?.currency || 'USD', { minimumFractionDigits: 0, maximumFractionDigits: 0 }), "+"] })] })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Categories" }), _jsx(CategoryTree, { categories: categories, selectedCategoryIds: selectedCategories, onCategoryToggle: (categoryId, isSelected) => {
+                                            setSelectedCategories(prev => isSelected
+                                                ? [...prev, categoryId]
+                                                : prev.filter(id => id !== categoryId));
+                                        }, mode: "checkbox" })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Brand" }), brands.length > 0 ? (_jsx("div", { className: "space-y-3", children: brands.map(brand => (_jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "checkbox", checked: selectedBrands.includes(brand), onChange: () => setSelectedBrands(prev => prev.includes(brand) ? prev.filter(b => b !== brand) : [...prev, brand]), className: "rounded border-gray-300 text-black focus:ring-black" }), _jsx("span", { className: "text-sm text-gray-700", children: brand })] }, brand))) })) : (_jsx("p", { className: "text-xs text-gray-500 italic", children: "No brands available" }))] }), _jsxs("div", { children: [_jsx("h3", { className: "font-bold text-sm uppercase tracking-widest mb-4", children: "Rating" }), _jsx("div", { className: "space-y-3", children: [4, 3, 2, 1].map(rating => (_jsxs("label", { className: "flex items-center gap-3", children: [_jsx("input", { type: "radio", name: "mobile-rating", checked: minRating === rating, onChange: () => setMinRating(minRating === rating ? null : rating), className: "rounded-full border-gray-300 text-black focus:ring-black" }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "flex text-yellow-400", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Star, { className: `h-3 w-3 ${i < rating ? 'fill-current' : 'text-gray-200 fill-gray-200'}` }, i))) }), _jsx("span", { className: "text-sm text-gray-600", children: "& Up" })] })] }, rating))) })] })] }), _jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100 flex gap-3", children: [_jsx(Button, { onClick: clearAllFilters, variant: "outline", className: "flex-1 h-12 font-bold rounded-lg border-gray-300", children: "Reset" }), _jsx(Button, { onClick: () => setIsFilterOpen(false), className: "flex-[2] bg-black text-white hover:bg-blue-600 h-12 font-bold rounded-lg transition-colors", children: "View Results" })] })] })] }));
+}
+export function ClothingMinimalProductsPage(props) {
+    return (_jsx(Suspense, { fallback: _jsx("div", { className: "min-h-screen flex items-center justify-center", children: _jsx("div", { className: "w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin" }) }), children: _jsx(ProductsPageContent, { ...props }) }));
+}

package/dist/layouts/electronics/components/ElectronicsCategoriesPage.d.ts

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

package/dist/layouts/electronics/components/ElectronicsCategoriesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElectronicsCategoriesPage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsCategoriesPage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAWhD,UAAU,8BAA8B;IACtC,WAAW,EAAE,WAAW,CAAC;CAC1B;AAWD,wBAAgB,yBAAyB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,8BAA8B,2CAgFvG"}

package/dist/layouts/electronics/components/ElectronicsCategoriesPage.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Zap, Smartphone, Laptop, Headphones, Watch, Camera } from 'lucide-react';
+import { Breadcrumbs } from '../../../components/ui/breadcrumbs.js';
+import { useStore } from '../../../lib/store-context.js';
+import { useCatalogLoader } from '../../../hooks/use-catalog-loader.js';
+import { isEditorPreviewMode, resolveStoreCategoriesForDisplay } from '../../../lib/utils/index.js';
+import { ElectronicsStoreHeader } from './ElectronicsStoreHeader.js';
+import { ElectronicsStoreFooter } from './ElectronicsStoreFooter.js';
+import { motion } from 'framer-motion';
+import { CategoryMasonryGrid } from '../../../components/categories/category-masonry-grid.js';
+function getCategoryIcon(slug) {
+    if (slug.includes('phone'))
+        return _jsx(Smartphone, { className: "h-6 w-6" });
+    if (slug.includes('laptop') || slug.includes('computer'))
+        return _jsx(Laptop, { className: "h-6 w-6" });
+    if (slug.includes('audio') || slug.includes('headphone'))
+        return _jsx(Headphones, { className: "h-6 w-6" });
+    if (slug.includes('watch') || slug.includes('wearable'))
+        return _jsx(Watch, { className: "h-6 w-6" });
+    if (slug.includes('camera'))
+        return _jsx(Camera, { className: "h-6 w-6" });
+    return _jsx(Zap, { className: "h-6 w-6" });
+}
+export function ElectronicsCategoriesPage({ storeConfig: initialConfig }) {
+    const { store } = useStore();
+    const storeConfig = store || initialConfig;
+    const isPreview = isEditorPreviewMode(storeConfig);
+    const { categories: loadedCategories } = useCatalogLoader(storeConfig, {
+        fetchProducts: false,
+        fetchServices: false,
+    });
+    const categories = resolveStoreCategoriesForDisplay(loadedCategories, isPreview);
+    const categoryGridConfig = storeConfig.layoutConfig?.pages?.categories?.categoryGrid;
+    const breadcrumbItems = [
+        { label: storeConfig.name, href: `/${storeConfig.slug}` },
+        { label: 'Collections', href: `/${storeConfig.slug}/categories` },
+    ];
+    return (_jsxs("div", { className: "min-h-screen bg-slate-50 text-slate-900 font-sans selection:bg-blue-600 selection:text-white", children: [_jsx(ElectronicsStoreHeader, { storeConfig: storeConfig }), _jsxs("div", { className: "pt-32 pb-20 bg-slate-950 text-white relative overflow-hidden", children: [_jsx("div", { className: "absolute inset-0 bg-blue-600/10 pointer-events-none" }), _jsx("div", { className: "absolute top-0 right-0 w-[600px] h-[600px] bg-indigo-600/20 rounded-full blur-[120px] pointer-events-none" }), _jsx("div", { className: "container mx-auto px-6 relative z-10", children: _jsxs("div", { className: "max-w-3xl", children: [_jsx("div", { className: "mb-6 opacity-60", children: _jsx(Breadcrumbs, { items: breadcrumbItems }) }), _jsxs(motion.h1, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, className: "text-5xl lg:text-7xl font-black tracking-tight mb-6", children: ["Curated ", _jsx("br", {}), _jsx("span", { className: "text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-400", children: "Ecosystems." })] }), _jsx(motion.p, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, className: "text-lg text-slate-400 leading-relaxed max-w-2xl font-light", children: "Dive into our specialized collections. Each category is meticulously curated to offer the best performance and value in its class." })] }) })] }), _jsx("div", { className: "container mx-auto px-6 py-24", children: categories.length === 0 ? (_jsxs("div", { className: "text-center py-20 bg-white rounded-2xl border border-slate-200", children: [_jsx("h3", { className: "text-xl font-semibold text-slate-900 mb-2", children: "No categories available" }), _jsx("p", { className: "text-slate-500", children: "Categories will appear here once they are added to the store." })] })) : (_jsx(CategoryMasonryGrid, { categories: categories, mode: "page", columns: categoryGridConfig?.columns ?? 3, showImages: categoryGridConfig?.showImages !== false, showDescriptions: categoryGridConfig?.showDescriptions !== false, getHref: (category) => `/${storeConfig.slug}/products?category=${category.slug}`, exploreLabel: "View Products", variant: "electronics", renderCardOverlay: (category) => (_jsx("div", { className: "mb-4 text-white/60 group-hover:text-blue-400 transition-colors", children: getCategoryIcon(category.slug) })) })) }), _jsx(ElectronicsStoreFooter, { storeConfig: storeConfig })] }));
+}

package/dist/layouts/electronics/components/ElectronicsGridProductCard.d.ts

@@ -0,0 +1,10 @@
+import { StoreProduct } from '../../../lib/store-types';
+interface ElectronicsGridProductCardProps {
+    product: StoreProduct;
+    storeSlug: string;
+    onAddToCart: (product: StoreProduct) => void;
+    index: number;
+}
+export declare function ElectronicsGridProductCard({ product, storeSlug, onAddToCart, index }: ElectronicsGridProductCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ElectronicsGridProductCard.d.ts.map

package/dist/layouts/electronics/components/ElectronicsGridProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElectronicsGridProductCard.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsGridProductCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAejD,UAAU,+BAA+B;IACvC,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,0BAA0B,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,+BAA+B,2CA+PrH"}

package/dist/layouts/electronics/components/ElectronicsGridProductCard.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/ui/button.js';
+import { ImageWithFallback } from '../../../components/ui/image-with-fallback.js';
+import { ProductRating } from '../../../components/ui/product-rating.js';
+import { Heart, Plus } from 'lucide-react';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { useStore } from '../../../lib/store-context.js';
+import { useToast } from '../../../components/ui/toast.js';
+import { ButtonLoader } from '../../../components/ui/page-loader.js';
+import { useLoading } from '../../../lib/loading-context.js';
+import { cn, formatCurrency } from '../../../lib/utils/index.js';
+import { OutOfStockOverlay } from '../../../components/ui/out-of-stock-overlay.js';
+export function ElectronicsGridProductCard({ product, storeSlug, onAddToCart, index }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const { toggleWishlist, isInWishlist, isWishlistLoading } = useStore();
+    const { addToast } = useToast();
+    const { startPageLoading } = useLoading();
+    const [localWishlistLoading, setLocalWishlistLoading] = useState(false);
+    const [justAdded, setJustAdded] = useState(false);
+    const handleProductClick = () => {
+        startPageLoading(`/${storeSlug}/products/${product.slug}`);
+    };
+    // Discount calculation
+    const discountPercentage = product.compareAtPrice
+        ? Math.round(((product.compareAtPrice - product.price) / product.compareAtPrice) * 100)
+        : 0;
+    const handleWishlistClick = async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Prevent multiple clicks
+        if (localWishlistLoading || isWishlistLoading) {
+            console.log('[ElectronicsGridProductCard] Wishlist action already in progress');
+            return;
+        }
+        const wasInWishlist = isInWishlist(product.id);
+        console.log('[ElectronicsGridProductCard] Wishlist button clicked:', {
+            productId: product.id,
+            productName: product.name,
+            isInWishlist: wasInWishlist
+        });
+        // Immediate visual feedback
+        setJustAdded(!wasInWishlist);
+        setLocalWishlistLoading(true);
+        try {
+            console.log('[ElectronicsGridProductCard] Toggling wishlist:', { productId: product.id, wasInWishlist });
+            await toggleWishlist(product.id);
+            // Verify the state was updated
+            const nowInWishlist = isInWishlist(product.id);
+            console.log('[ElectronicsGridProductCard] Wishlist toggled successfully. New state:', {
+                productId: product.id,
+                isInWishlist: nowInWishlist,
+                wasInWishlist
+            });
+            // Show success message
+            addToast(nowInWishlist
+                ? `✓ ${product.name} added to wishlist`
+                : `${product.name} removed from wishlist`, 'success');
+            // Reset animation after a delay
+            setTimeout(() => {
+                setJustAdded(false);
+            }, 2000);
+        }
+        catch (error) {
+            console.error('[ElectronicsGridProductCard] Failed to toggle wishlist:', error);
+            setJustAdded(false);
+            addToast('Failed to update wishlist. Please try again.', 'error');
+        }
+        finally {
+            setLocalWishlistLoading(false);
+        }
+    };
+    const inWishlist = isInWishlist(product.id);
+    const isLoading = localWishlistLoading || isWishlistLoading;
+    const isOutOfStock = !product.inStock;
+    return (_jsxs(motion.div, { "data-product-card": true, initial: { opacity: 0, y: 20 }, whileInView: { opacity: 1, y: 0 }, viewport: { once: true, margin: "-50px" }, transition: { duration: 0.5, delay: index * 0.05, ease: "easeOut" }, className: "group relative bg-white overflow-hidden border border-gray-100 hover:border-gray-200 transition-all duration-200", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { className: "relative aspect-[4/5] overflow-hidden bg-slate-50", children: [_jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, onClick: handleProductClick, className: "block w-full h-full relative z-10", onMouseDown: (e) => {
+                            // Don't navigate if clicking on wishlist button area
+                            const target = e.target;
+                            if (target.closest('[data-wishlist-button]')) {
+                                e.preventDefault();
+                            }
+                        }, children: _jsx(motion.div, { animate: { scale: isHovered ? 1.05 : 1 }, transition: { duration: 0.6, ease: [0.33, 1, 0.68, 1] }, className: "w-full h-full", children: _jsx(ImageWithFallback, { src: product.images?.[0], alt: product.name, className: cn("w-full h-full object-cover transition-opacity duration-300", isOutOfStock && "grayscale"), skeletonAspectRatio: "4/5" }) }) }), isOutOfStock && (_jsx(OutOfStockOverlay, { badgePosition: "center" })), _jsx("button", { type: "button", "data-wishlist-button": true, onClick: handleWishlistClick, disabled: isLoading, onMouseDown: (e) => {
+                            // Prevent event bubbling to parent Link
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }, onMouseUp: (e) => {
+                            // Prevent event bubbling
+                            e.stopPropagation();
+                        }, className: cn("absolute top-4 right-4 z-50 w-10 h-10 rounded-full backdrop-blur-sm flex items-center justify-center shadow-sm hover:shadow-md cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", "focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2", "pointer-events-auto transition-all duration-200", justAdded && "ring-2 ring-red-500 ring-offset-2 bg-red-50 scale-110", inWishlist
+                            ? "text-red-500 bg-red-50/50 hover:bg-red-50 hover:scale-110"
+                            : "text-gray-400 bg-white/95 hover:text-red-500 hover:bg-red-50/50 hover:scale-110"), title: inWishlist ? "Remove from wishlist" : "Add to wishlist", "aria-label": inWishlist ? "Remove from wishlist" : "Add to wishlist", children: isLoading ? (_jsx(ButtonLoader, { className: inWishlist ? "text-red-500" : "text-gray-400" })) : (_jsx(motion.div, { animate: {
+                                scale: justAdded ? [1, 1.2, 1] : 1,
+                                rotate: justAdded ? [0, 10, -10, 0] : 0
+                            }, transition: { duration: 0.4, ease: "easeOut" }, children: _jsx(Heart, { className: cn("w-5 h-5 transition-all", inWishlist && "fill-current", justAdded && "text-red-500 fill-current") }) })) }), _jsx("div", { className: "absolute top-4 left-4 z-20 flex flex-col gap-2", children: product.compareAtPrice && (_jsxs("span", { className: "bg-slate-900 text-white text-[10px] font-bold px-3 py-1.5 rounded-full tracking-wide", children: ["-", discountPercentage, "%"] })) }), _jsx("div", { className: "hidden lg:block absolute inset-x-4 bottom-4 z-20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out opacity-0 group-hover:opacity-100", children: _jsxs(Button, { onClick: (e) => {
+                                e.preventDefault();
+                                if (!isOutOfStock) {
+                                    onAddToCart(product);
+                                }
+                            }, disabled: isOutOfStock, className: cn("w-full bg-gray-900 hover:bg-gray-800 text-white border-none rounded-none h-11 font-normal text-sm transition-colors", isOutOfStock && "opacity-50 cursor-not-allowed"), children: [_jsx(Plus, { className: "w-4 h-4 mr-2" }), " Quick Add"] }) }), _jsx("button", { disabled: isOutOfStock, className: cn("lg:hidden absolute bottom-3 right-3 z-30 w-10 h-10 rounded-full bg-gray-900 text-white flex items-center justify-center hover:bg-gray-800 active:scale-95 transition-colors", isOutOfStock && "opacity-50 cursor-not-allowed"), onClick: (e) => {
+                            e.preventDefault();
+                            if (!isOutOfStock) {
+                                onAddToCart(product);
+                            }
+                        }, children: _jsx(Plus, { className: "w-5 h-5" }) })] }), _jsxs("div", { className: "p-6 flex flex-col gap-2", children: [_jsxs("div", { className: "flex justify-between items-start gap-2", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-normal text-gray-400 uppercase tracking-wide mb-1.5", children: product.specifications?.Brand || 'Brand' }), _jsx(Link, { href: `/${storeSlug}/products/${product.slug}`, className: "group/title", onClick: () => startPageLoading(`/${storeSlug}/products/${product.slug}`), children: _jsx("h3", { className: "font-normal text-gray-900 text-base leading-tight hover:text-gray-600 transition-colors line-clamp-1", children: product.name }) })] }), _jsx(ProductRating, { rating: product.rating, reviewCount: product.reviewCount, size: "sm", showReviewCount: false, className: "shrink-0" })] }), _jsxs("div", { className: "flex items-baseline gap-2 mt-2", children: [_jsx("span", { className: "text-lg font-medium text-gray-900", children: formatCurrency(product.price, product.currency || 'USD') }), product.compareAtPrice && (_jsx("span", { className: "text-sm text-gray-400 line-through font-normal", children: formatCurrency(product.compareAtPrice, product.currency || 'USD') }))] })] })] }));
+}

package/dist/layouts/electronics/components/ElectronicsHomePage.d.ts

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

package/dist/layouts/electronics/components/ElectronicsHomePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElectronicsHomePage.d.ts","sourceRoot":"","sources":["../../../../src/layouts/electronics/components/ElectronicsHomePage.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAgB,MAAM,mBAAmB,CAAC;AAmB9D,UAAU,wBAAwB;IAC/B,WAAW,EAAE,WAAW,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,wBAAwB,2CAwa3F"}