@deneb-ui/ui 2.0.108 → 2.0.110

package/dist/EditableProductGrid.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const EditableProductCard_1 = require("./EditableProductCard");
 const SiteDataProvider_1 = require("./SiteDataProvider");
+const EditableFilterSidebar_1 = require("./EditableFilterSidebar");
 /**
  * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
  * with interactive category filtering, live Fivora visual editing synchronization,
@@ -14,12 +15,69 @@ const SiteDataProvider_1 = require("./SiteDataProvider");
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone, sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', showSearch = true, searchPlaceholder = 'Search products by name, brand, or tag...', enableBackendSearch = true, onSearchChange, enablePagination = true, pageSize = 8, pageSizeOptions = [8, 16, 24, 48], showPageSizeSelector = false, paginationVariant = 'numbers', hidePaginationOnSinglePage = true, currentPage: controlledPage, initialPage = 1, onPageChange, scrollToTopOnPageChange = true, totalProducts, className = '', style, ...props }) {
+function parseProductNumericPrice(p) {
+    if (typeof p.minPrice === "number" && !isNaN(p.minPrice))
+        return p.minPrice;
+    if (typeof p.price === "number" && !isNaN(p.price))
+        return p.price;
+    const raw = String(p.minPrice || p.price || p.amount || p.cost || "");
+    if (!raw)
+        return null;
+    const cleaned = raw.replace(/,/g, "").match(/\d+(?:\.\d+)?/);
+    if (!cleaned)
+        return null;
+    const val = parseFloat(cleaned[0]);
+    return isNaN(val) ? null : val;
+}
+function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone, sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', showSearch = true, searchPlaceholder = 'Search products by name, brand, or tag...', enableBackendSearch = true, onSearchChange, enablePagination = true, pageSize = 8, pageSizeOptions = [8, 16, 24, 48], showPageSizeSelector = false, paginationVariant = 'numbers', hidePaginationOnSinglePage = true, currentPage: controlledPage, initialPage = 1, onPageChange, scrollToTopOnPageChange = true, totalProducts, filters: controlledFilters, initialFilters, onFilterChange: onFilterChangeProp, showFilterSidebar = false, filterSidebarProps, showDetailLink = true, showDetailButton, detailActionLabel, className = '', style, ...props }) {
     const sectionRef = (0, react_1.useRef)(null);
     const siteData = (0, SiteDataProvider_1.useSiteData)();
     const siteApi = (0, SiteDataProvider_1.useSiteApi)();
     const liveProducts = (0, SiteDataProvider_1.useProducts)();
     const baseProducts = userProducts && userProducts.length > 0 ? userProducts : liveProducts;
+    const computedMaxPrice = (0, react_1.useMemo)(() => {
+        let highest = 100;
+        for (const p of baseProducts) {
+            const num = parseProductNumericPrice(p);
+            if (num !== null && num > highest) {
+                highest = Math.ceil(num);
+            }
+        }
+        if (highest > 1000)
+            return Math.ceil(highest / 500) * 500;
+        if (highest > 100)
+            return Math.ceil(highest / 50) * 50;
+        return Math.ceil(highest / 10) * 10;
+    }, [baseProducts]);
+    const effectiveMaxPrice = filterSidebarProps?.maxPrice ?? computedMaxPrice;
+    const [internalFilters, setInternalFilters] = (0, react_1.useState)(() => ({
+        selectedCategories: initialFilters?.categories || [],
+        priceRange: [initialFilters?.priceRange ? initialFilters.priceRange[0] : 0, initialFilters?.maxPrice ?? (initialFilters?.priceRange ? initialFilters.priceRange[1] : effectiveMaxPrice)],
+        selectedSizes: initialFilters?.sizes || [],
+        inStockOnly: Boolean(initialFilters?.inStockOnly),
+    }));
+    const activeFilters = (0, react_1.useMemo)(() => {
+        return {
+            selectedCategories: controlledFilters?.categories !== undefined
+                ? controlledFilters.categories
+                : internalFilters.selectedCategories,
+            maxPrice: controlledFilters?.maxPrice !== undefined
+                ? controlledFilters.maxPrice
+                : controlledFilters?.priceRange !== undefined
+                    ? controlledFilters.priceRange[1]
+                    : internalFilters.priceRange[1],
+            selectedSizes: controlledFilters?.sizes !== undefined
+                ? controlledFilters.sizes
+                : internalFilters.selectedSizes,
+            inStockOnly: controlledFilters?.inStockOnly !== undefined
+                ? Boolean(controlledFilters.inStockOnly)
+                : Boolean(internalFilters.inStockOnly),
+        };
+    }, [controlledFilters, internalFilters]);
+    const handleFilterChange = (nextFilters) => {
+        setInternalFilters(nextFilters);
+        onFilterChangeProp?.(nextFilters);
+    };
     const resolvedListPath = (0, react_1.useMemo)(() => {
         if (listPath && listPath !== 'products') {
             return listPath;
@@ -50,6 +108,7 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
     const [isSearchingBackend, setIsSearchingBackend] = (0, react_1.useState)(false);
     const [backendProducts, setBackendProducts] = (0, react_1.useState)(null);
+    const [backendTotalProducts, setBackendTotalProducts] = (0, react_1.useState)(null);
     // Pagination internal state
     const [internalPage, setInternalPage] = (0, react_1.useState)(initialPage);
     const activePage = controlledPage !== undefined ? controlledPage : internalPage;
@@ -62,37 +121,95 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
         }
     }, [pageSize]);
     // Use backend search results if available, else fallback to baseProducts
-    const products = backendProducts && backendProducts.length > 0 ? backendProducts : baseProducts;
-    // Live backend catalog search when query changes
+    const products = backendProducts !== null ? backendProducts : baseProducts;
+    // Live backend catalog search & filter when query or filters change
     (0, react_1.useEffect)(() => {
-        if (!enableBackendSearch || !searchQuery.trim()) {
+        if (!enableBackendSearch) {
             setBackendProducts(null);
+            setBackendTotalProducts(null);
             return;
         }
+        const candidateSlug = siteData?.siteInstance?.slug ||
+            siteData?.project?.slug ||
+            siteData?.project?.id;
         const catalogUrl = siteApi?.catalogUrl ||
-            (siteData?.siteInstance?.slug ? `/site-catalog/${siteData.siteInstance.slug}` : null);
-        const slug = siteData?.siteInstance?.slug;
-        const isPreviewMode = typeof window !== 'undefined' &&
-            (window.location.pathname.includes('/template-preview/') ||
-                window.location.pathname.includes('/preview/'));
+            (candidateSlug && siteApi?.baseUrl
+                ? `${siteApi.baseUrl.replace(/\/+$/, '')}/site-catalog/${candidateSlug}/live-data`
+                : candidateSlug
+                    ? `/site-catalog/${candidateSlug}/live-data`
+                    : null);
+        const slug = siteData?.siteInstance?.slug || siteData?.project?.slug;
+        const isPreviewMode = (0, SiteDataProvider_1.isPreviewValidation)(siteData) ||
+            (typeof window !== 'undefined' &&
+                (window.parent !== window ||
+                    window.location.pathname.includes('/template-preview') ||
+                    window.location.pathname.includes('/preview')));
         if (!catalogUrl ||
             isPreviewMode ||
             slug === 'template-validation' ||
-            catalogUrl.includes('/template-validation/')) {
+            catalogUrl.includes('/template-validation')) {
+            // In Visual Editor preview or template validation, NEVER query remote backend.
+            // All search, category filters, price sliders, sizes, and in-stock toggles
+            // operate directly in-memory on data.json / visual editor siteData without errors!
+            setBackendProducts(null);
+            setBackendTotalProducts(null);
             return;
         }
+        const hasSearch = Boolean(searchQuery.trim());
+        const hasCategories = Boolean(activeFilters.selectedCategories && activeFilters.selectedCategories.length > 0);
+        const hasMaxPrice = Boolean(activeFilters.maxPrice !== undefined &&
+            activeFilters.maxPrice < effectiveMaxPrice);
+        const hasSizes = Boolean(activeFilters.selectedSizes && activeFilters.selectedSizes.length > 0);
+        const hasInStock = Boolean(activeFilters.inStockOnly);
+        const hasAnyFilterOrSearch = hasSearch ||
+            hasCategories ||
+            hasMaxPrice ||
+            hasSizes ||
+            hasInStock;
+        if (!hasAnyFilterOrSearch) {
+            setBackendProducts(null);
+            setBackendTotalProducts(null);
+            return;
+        }
+        const params = new URLSearchParams();
+        if (hasSearch)
+            params.set('q', searchQuery.trim());
+        if (hasCategories && activeFilters.selectedCategories) {
+            params.set('category', activeFilters.selectedCategories.join(','));
+        }
+        if (hasMaxPrice && activeFilters.maxPrice !== undefined) {
+            params.set('maxPrice', String(activeFilters.maxPrice));
+        }
+        if (hasSizes && activeFilters.selectedSizes) {
+            params.set('sizes', activeFilters.selectedSizes.join(','));
+        }
+        if (hasInStock) {
+            params.set('inStockOnly', 'true');
+        }
+        if (enablePagination) {
+            params.set('page', String(activePage));
+            params.set('limit', String(activePageSize));
+        }
         let active = true;
         const timer = setTimeout(async () => {
             try {
                 setIsSearchingBackend(true);
                 const sep = catalogUrl.includes('?') ? '&' : '?';
-                const url = `${catalogUrl}${sep}q=${encodeURIComponent(searchQuery.trim())}`;
+                const url = `${catalogUrl}${sep}${params.toString()}`;
                 const res = await fetch(url, { headers: { Accept: 'application/json' } });
                 if (res.ok) {
                     const data = await res.json();
                     const items = Array.isArray(data) ? data : (data.products || data.items || []);
-                    if (active && Array.isArray(items) && items.length > 0) {
+                    if (active && Array.isArray(items)) {
                         setBackendProducts(items);
+                        const totalCount = typeof data.totalProducts === 'number'
+                            ? data.totalProducts
+                            : typeof data.pagination?.total === 'number'
+                                ? data.pagination.total
+                                : null;
+                        if (totalCount !== null) {
+                            setBackendTotalProducts(totalCount);
+                        }
                     }
                 }
             }
@@ -108,33 +225,98 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
             active = false;
             clearTimeout(timer);
         };
-    }, [searchQuery, enableBackendSearch, siteApi, siteData]);
+    }, [searchQuery, activeFilters, effectiveMaxPrice, enableBackendSearch, activePage, activePageSize, enablePagination, siteApi, siteData]);
     const resolvedCategories = (0, react_1.useMemo)(() => {
+        const rawList = [];
         if (categories && categories.length > 1) {
-            return categories;
+            rawList.push(...categories);
+        }
+        else {
+            const siteCatList = siteData?.categories || siteData?.content?.categories;
+            if (Array.isArray(siteCatList) && siteCatList.length > 0) {
+                rawList.push(...siteCatList);
+            }
+            for (const p of products) {
+                if (typeof p.category === "string" && p.category.trim().length > 0) {
+                    rawList.push(p.category);
+                }
+            }
+        }
+        const map = new Map();
+        for (const item of rawList) {
+            if (typeof item !== "string")
+                continue;
+            const trimmed = item.trim();
+            if (!trimmed || trimmed.toLowerCase() === "all")
+                continue;
+            const lower = trimmed.toLowerCase();
+            if (!map.has(lower)) {
+                map.set(lower, trimmed);
+            }
         }
-        const distinct = Array.from(new Set(products
-            .map((p) => p.category)
-            .filter((cat) => typeof cat === 'string' && cat.trim().length > 0)));
-        return distinct.length > 0 ? ['All', ...distinct] : categories;
+        const distinct = Array.from(map.values());
+        return distinct.length > 1 ? ["All", ...distinct] : [];
     }, [categories, products]);
     const [activeCategory, setActiveCategory] = (0, react_1.useState)(categories[0] || 'All');
-    // Reset to page 1 whenever category or search query changes
+    // Reset to page 1 whenever category, filters, or search query changes
     (0, react_1.useEffect)(() => {
         setInternalPage(1);
         setLoadedCount(activePageSize);
         onPageChange?.(1);
-    }, [searchQuery, activeCategory, activePageSize, onPageChange]);
+    }, [searchQuery, activeCategory, activeFilters, activePageSize, onPageChange]);
     const filteredProducts = (0, react_1.useMemo)(() => {
         let result = products;
-        // Filter by category
-        if (activeCategory && activeCategory.toLowerCase() !== 'all') {
+        // 1. Filter by top category tab (if not "All")
+        if (activeCategory && activeCategory.trim().toLowerCase() !== "all") {
             result = result.filter((p) => {
-                const cat = String(p.category || '').toLowerCase();
-                return cat === activeCategory.toLowerCase();
+                const cat = String(p.category || "").trim().toLowerCase();
+                return cat === activeCategory.trim().toLowerCase();
+            });
+        }
+        // 2. Filter by sidebar selectedCategories (multi-select)
+        if (activeFilters.selectedCategories && activeFilters.selectedCategories.length > 0) {
+            result = result.filter((p) => {
+                const cat = String(p.category || "").trim().toLowerCase();
+                return activeFilters.selectedCategories.some((c) => c.trim().toLowerCase() === cat);
+            });
+        }
+        // 3. Filter by maxPrice (matches numeric price against slider)
+        if (activeFilters.maxPrice !== undefined && activeFilters.maxPrice < effectiveMaxPrice) {
+            result = result.filter((p) => {
+                const num = parseProductNumericPrice(p);
+                if (num === null)
+                    return true;
+                return num <= activeFilters.maxPrice;
+            });
+        }
+        // 4. Filter by sizes / options
+        if (activeFilters.selectedSizes && activeFilters.selectedSizes.length > 0) {
+            result = result.filter((p) => {
+                const pSizes = [];
+                if (Array.isArray(p.sizes)) {
+                    pSizes.push(...p.sizes.map((s) => String(s).trim().toLowerCase()));
+                }
+                else if (typeof p.sizes === "string") {
+                    pSizes.push(...p.sizes.split(",").map((s) => s.trim().toLowerCase()));
+                }
+                if (Array.isArray(p.options)) {
+                    pSizes.push(...p.options.map((o) => String(o).trim().toLowerCase()));
+                }
+                else if (typeof p.options === "string") {
+                    pSizes.push(...p.options.split(",").map((o) => o.trim().toLowerCase()));
+                }
+                return activeFilters.selectedSizes.some((s) => pSizes.includes(s.trim().toLowerCase()));
+            });
+        }
+        // 5. Filter by inStock availability
+        if (activeFilters.inStockOnly) {
+            result = result.filter((p) => {
+                return (p.inStock !== false &&
+                    p.isAvailable !== false &&
+                    p.available !== false);
             });
         }
-        // Filter by search query
+        // 6. Filter by search query
         if (searchQuery.trim()) {
             const q = searchQuery.trim().toLowerCase();
             result = result.filter((p) => {
@@ -148,22 +330,49 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
             });
         }
         return result;
-    }, [products, activeCategory, searchQuery]);
-    // Total count calculation
-    const totalItems = totalProducts !== undefined ? totalProducts : filteredProducts.length;
+    }, [products, activeCategory, activeFilters, effectiveMaxPrice, searchQuery]);
+    const activeFiltersCount = (activeCategory && activeCategory.trim().toLowerCase() !== "all" ? 1 : 0) +
+        activeFilters.selectedCategories.length +
+        (activeFilters.maxPrice < effectiveMaxPrice ? 1 : 0) +
+        activeFilters.selectedSizes.length +
+        (activeFilters.inStockOnly ? 1 : 0);
+    const handleClearAllFilters = () => {
+        setActiveCategory("All");
+        setSearchQuery("");
+        setInternalFilters({
+            selectedCategories: [],
+            priceRange: [0, effectiveMaxPrice],
+            selectedSizes: [],
+            inStockOnly: false,
+        });
+        onFilterChangeProp?.({
+            selectedCategories: [],
+            priceRange: [0, effectiveMaxPrice],
+            selectedSizes: [],
+            inStockOnly: false,
+        });
+    };
+    // Total count calculation: prefers explicit totalProducts prop, then remote backend total, else filtered list length
+    const totalItems = totalProducts !== undefined
+        ? totalProducts
+        : (backendTotalProducts !== null ? backendTotalProducts : filteredProducts.length);
     const totalPages = Math.max(1, Math.ceil(totalItems / activePageSize));
     // Products to render based on pagination mode
     const displayedProducts = (0, react_1.useMemo)(() => {
         if (!enablePagination) {
             return filteredProducts;
         }
+        // If backend already returned server-paginated items for this activePage, render directly
+        if (backendProducts !== null && backendTotalProducts !== null) {
+            return filteredProducts;
+        }
         if (paginationVariant === 'load-more') {
             return filteredProducts.slice(0, loadedCount);
         }
         const startIndex = (activePage - 1) * activePageSize;
         const endIndex = startIndex + activePageSize;
         return filteredProducts.slice(startIndex, endIndex);
-    }, [filteredProducts, enablePagination, paginationVariant, loadedCount, activePage, activePageSize]);
+    }, [filteredProducts, enablePagination, paginationVariant, loadedCount, activePage, activePageSize, backendProducts, backendTotalProducts]);
     // Smart page numbers calculation with ellipsis (e.g. 1 ... 4 5 6 ... 10)
     const visiblePages = (0, react_1.useMemo)(() => {
         if (totalPages <= 7) {
@@ -203,8 +412,53 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
         return `${mClass} ${tClass} ${dClass}`;
     }, [columns]);
     const shouldShowPagination = enablePagination && !(hidePaginationOnSinglePage && totalPages <= 1);
+    const productsGridContent = ((0, jsx_runtime_1.jsx)("div", { ...(resolvedListPath ? { 'data-preview-list-path': resolvedListPath } : {}), className: displayedProducts.length > 0
+            ? `deneb-product-grid grid ${gridColClasses} gap-6 sm:gap-8`
+            : 'deneb-product-grid-empty w-full', children: displayedProducts.length > 0 ? (displayedProducts.map((product, idx) => {
+            // Determine true index in baseProducts for exact Fivora visual editing focus targeting
+            const baseIndex = baseProducts.findIndex((bp) => (bp.id && product.id ? String(bp.id) === String(product.id) : false) ||
+                (bp.name && product.name ? bp.name === product.name : false) ||
+                (bp.title && product.title ? bp.title === product.title : false) ||
+                (bp.productName && product.productName ? bp.productName === product.productName : false));
+            const effectiveIndex = baseIndex !== -1 ? baseIndex : (activePage - 1) * activePageSize + idx;
+            const itemPath = resolvedListPath
+                ? `${resolvedListPath}[${effectiveIndex}]`
+                : `${sectionPath}.${cardPrefix}${effectiveIndex + 1}`;
+            return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, currency: currency, whatsappPhone: whatsappPhone || whatsappNumber, showDetailLink: showDetailLink, showDetailButton: showDetailButton, actionLabel: detailActionLabel, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
+        })) : (
+        /* Empty State — strictly inside the listPath container */
+        (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-16 px-4 rounded-3xl border border-dashed border-slate-300 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/30 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 mx-auto mb-4 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: "No products found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-sm mx-auto", children: searchQuery
+                        ? `No products matched "${searchQuery}"${activeCategory !== 'All' ? ` in category "${activeCategory}"` : ''}.`
+                        : activeFiltersCount > 0
+                            ? "No products matched your active filters."
+                            : `No products available in category "${activeCategory}".` }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-5 flex items-center justify-center gap-3", children: [searchQuery && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSearchQuery(''), className: "px-4 py-2 rounded-xl text-xs font-bold bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors cursor-pointer", children: "Clear Search" })), activeCategory !== 'All' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory('All'), className: "px-4 py-2 rounded-xl text-xs font-bold bg-lime-400 text-slate-950 hover:bg-lime-300 transition-colors shadow-sm cursor-pointer", children: "View All Products" })), activeFiltersCount > 0 && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClearAllFilters, className: "px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 text-white dark:bg-white dark:text-slate-950 hover:bg-slate-800 transition-colors shadow-sm cursor-pointer", children: "Clear All Filters" }))] })] })) }));
+    /* Pagination Controls */
+    const paginationContent = shouldShowPagination ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: paginationVariant === 'load-more' ? (
+        /* Progressive "Load More" Variant */
+        (0, jsx_runtime_1.jsxs)("div", { className: "mt-12 flex flex-col items-center justify-center gap-3 text-center", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-slate-500 dark:text-slate-400 font-medium", children: ["Showing ", (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white", children: displayedProducts.length }), " of", ' ', (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white", children: totalItems }), " products"] }), displayedProducts.length < totalItems && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleLoadMore, className: "px-8 py-3 rounded-2xl font-bold text-sm bg-slate-900 text-white hover:bg-slate-800 dark:bg-lime-400 dark:text-slate-950 dark:hover:bg-lime-300 shadow-md transition-all active:scale-95 cursor-pointer", children: ["Load More Products (", totalItems - displayedProducts.length, " remaining)"] }))] })) : (
+        /* Numbered & Simple Pagination Navigation */
+        (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Product pagination", className: "mt-12 pt-8 border-t border-slate-200 dark:border-slate-800/80 flex flex-col sm:flex-row items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Showing", ' ', (0, jsx_runtime_1.jsxs)("strong", { className: "text-slate-900 dark:text-white font-semibold", children: [Math.min((activePage - 1) * activePageSize + 1, totalItems), "\u2013", Math.min(activePage * activePageSize, totalItems)] }), ' ', "of ", (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white font-semibold", children: totalItems }), " products"] }), showPageSizeSelector && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 border-l border-slate-200 dark:border-slate-800 pl-3", children: [(0, jsx_runtime_1.jsx)("span", { children: "Show" }), (0, jsx_runtime_1.jsx)("select", { value: activePageSize, onChange: (e) => {
+                                        const newSize = Number(e.target.value);
+                                        setActivePageSize(newSize);
+                                        setInternalPage(1);
+                                        onPageChange?.(1);
+                                    }, className: "bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg px-2 py-1 text-xs font-semibold text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-lime-400", children: pageSizeOptions.map((size) => ((0, jsx_runtime_1.jsx)("option", { value: size, children: size }, size))) }), (0, jsx_runtime_1.jsx)("span", { children: "per page" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePageChange(activePage - 1), disabled: activePage <= 1, "aria-label": "Previous page", className: `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1 border ${activePage <= 1
+                                ? 'opacity-40 cursor-not-allowed border-slate-200 dark:border-slate-800 text-slate-400'
+                                : 'border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/80 dark:text-slate-300 dark:hover:bg-slate-800 active:scale-95 shadow-xs cursor-pointer'}`, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Previous" })] }), paginationVariant === 'numbers' ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: visiblePages.map((pageNum, idx) => {
+                                if (pageNum === 'ellipsis') {
+                                    return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "px-2 text-slate-400 dark:text-slate-600 select-none text-xs font-bold", children: "\u2026" }, `ellipsis-${idx}`));
+                                }
+                                const isCurrent = pageNum === activePage;
+                                return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handlePageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": isCurrent ? 'page' : undefined, className: `min-w-[34px] h-[34px] px-2 rounded-xl text-xs font-bold transition-all flex items-center justify-center cursor-pointer ${isCurrent
+                                        ? 'bg-slate-900 text-white dark:bg-lime-400 dark:text-slate-950 font-black shadow-md scale-105'
+                                        : 'bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800/80 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'}`, children: pageNum }, pageNum));
+                            }) })) : (
+                        /* Simple Indicator */
+                        (0, jsx_runtime_1.jsxs)("span", { className: "px-3 py-1.5 text-xs font-bold text-slate-700 dark:text-slate-300", children: ["Page ", activePage, " of ", totalPages] })), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePageChange(activePage + 1), disabled: activePage >= totalPages, "aria-label": "Next page", className: `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1 border ${activePage >= totalPages
+                                ? 'opacity-40 cursor-not-allowed border-slate-200 dark:border-slate-800 text-slate-400'
+                                : 'border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/80 dark:text-slate-300 dark:hover:bg-slate-800 active:scale-95 shadow-xs cursor-pointer'}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Next" }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) })] })] })] })) })) : null;
     return ((0, jsx_runtime_1.jsxs)("section", { id: props.id || "products", ref: sectionRef, "data-design-section": props["data-design-section"] || "products", "data-section-id": props["data-section-id"] || "products", "data-preview-page-key": sectionPath, className: `editable-product-grid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-8 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.gridSubtitle`, className: "text-xs font-black tracking-widest uppercase text-emerald-600 dark:text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.gridTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-tight", children: title })] }), resolvedCategories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: resolvedCategories.map((cat) => {
-                            const isActive = activeCategory.toLowerCase() === cat.toLowerCase();
+                            const isActive = activeCategory.trim().toLowerCase() === cat.trim().toLowerCase();
                             return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory(cat), className: `px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${isActive
                                     ? 'bg-slate-900 text-white dark:bg-white dark:text-slate-950 shadow-md scale-102 font-extrabold'
                                     : 'bg-slate-100 text-slate-600 hover:text-slate-900 border border-slate-200 hover:bg-slate-200/70 dark:bg-slate-900/60 dark:text-slate-400 dark:hover:text-white dark:border-slate-800/80 dark:hover:bg-slate-850'}`, children: cat }, cat));
@@ -214,47 +468,7 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
                                 }, placeholder: searchPlaceholder, className: "w-full pl-10 pr-10 py-2.5 rounded-2xl text-sm bg-slate-100/90 dark:bg-slate-900/90 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-lime-400 dark:focus:ring-lime-400 transition-all shadow-sm" }), searchQuery && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
                                     setSearchQuery('');
                                     onSearchChange?.('');
-                                }, className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors", title: "Clear search", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [isSearchingBackend && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1.5 text-emerald-600 dark:text-lime-400 font-medium animate-pulse", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-lime-400" }), "Searching live catalog..."] })), (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold bg-slate-100 dark:bg-slate-900/80 px-3 py-1.5 rounded-xl border border-slate-200/80 dark:border-slate-800", children: ["Showing ", (0, jsx_runtime_1.jsx)("span", { className: "text-slate-900 dark:text-white font-bold", children: filteredProducts.length }), " of ", products.length, " products"] })] })] })), (0, jsx_runtime_1.jsx)("div", { ...(resolvedListPath ? { 'data-preview-list-path': resolvedListPath } : {}), className: displayedProducts.length > 0
-                    ? `deneb-product-grid grid ${gridColClasses} gap-6 sm:gap-8`
-                    : 'deneb-product-grid-empty w-full', children: displayedProducts.length > 0 ? (displayedProducts.map((product, idx) => {
-                    // Determine true index in baseProducts for exact Fivora visual editing focus targeting
-                    const baseIndex = baseProducts.findIndex((bp) => (bp.id && product.id ? String(bp.id) === String(product.id) : false) ||
-                        (bp.name && product.name ? bp.name === product.name : false) ||
-                        (bp.title && product.title ? bp.title === product.title : false) ||
-                        (bp.productName && product.productName ? bp.productName === product.productName : false));
-                    const effectiveIndex = baseIndex !== -1 ? baseIndex : (activePage - 1) * activePageSize + idx;
-                    const itemPath = resolvedListPath
-                        ? `${resolvedListPath}[${effectiveIndex}]`
-                        : `${sectionPath}.${cardPrefix}${effectiveIndex + 1}`;
-                    return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, currency: currency, whatsappPhone: whatsappPhone || whatsappNumber, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
-                })) : (
-                /* Empty State — strictly inside the listPath container */
-                (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-16 px-4 rounded-3xl border border-dashed border-slate-300 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/30 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 mx-auto mb-4 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: "No products found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-sm mx-auto", children: searchQuery
-                                ? `No products matched "${searchQuery}"${activeCategory !== 'All' ? ` in category "${activeCategory}"` : ''}.`
-                                : `No products available in category "${activeCategory}".` }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-5 flex items-center justify-center gap-3", children: [searchQuery && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSearchQuery(''), className: "px-4 py-2 rounded-xl text-xs font-bold bg-slate-200 dark:bg-slate-800 text-slate-800 dark:text-white hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors", children: "Clear Search" })), activeCategory !== 'All' && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory('All'), className: "px-4 py-2 rounded-xl text-xs font-bold bg-lime-400 text-slate-950 hover:bg-lime-300 transition-colors shadow-sm", children: "View All Products" }))] })] })) }), shouldShowPagination && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: paginationVariant === 'load-more' ? (
-                /* Progressive "Load More" Variant */
-                (0, jsx_runtime_1.jsxs)("div", { className: "mt-12 flex flex-col items-center justify-center gap-3 text-center", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-slate-500 dark:text-slate-400 font-medium", children: ["Showing ", (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white", children: displayedProducts.length }), " of", ' ', (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white", children: totalItems }), " products"] }), displayedProducts.length < totalItems && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleLoadMore, className: "px-8 py-3 rounded-2xl font-bold text-sm bg-slate-900 text-white hover:bg-slate-800 dark:bg-lime-400 dark:text-slate-950 dark:hover:bg-lime-300 shadow-md transition-all active:scale-95 cursor-pointer", children: ["Load More Products (", totalItems - displayedProducts.length, " remaining)"] }))] })) : (
-                /* Numbered & Simple Pagination Navigation */
-                (0, jsx_runtime_1.jsxs)("nav", { role: "navigation", "aria-label": "Product pagination", className: "mt-12 pt-8 border-t border-slate-200 dark:border-slate-800/80 flex flex-col sm:flex-row items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [(0, jsx_runtime_1.jsxs)("span", { children: ["Showing", ' ', (0, jsx_runtime_1.jsxs)("strong", { className: "text-slate-900 dark:text-white font-semibold", children: [Math.min((activePage - 1) * activePageSize + 1, totalItems), "\u2013", Math.min(activePage * activePageSize, totalItems)] }), ' ', "of ", (0, jsx_runtime_1.jsx)("strong", { className: "text-slate-900 dark:text-white font-semibold", children: totalItems }), " products"] }), showPageSizeSelector && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 ml-2 border-l border-slate-200 dark:border-slate-800 pl-3", children: [(0, jsx_runtime_1.jsx)("span", { children: "Show" }), (0, jsx_runtime_1.jsx)("select", { value: activePageSize, onChange: (e) => {
-                                                const newSize = Number(e.target.value);
-                                                setActivePageSize(newSize);
-                                                setInternalPage(1);
-                                                onPageChange?.(1);
-                                            }, className: "bg-slate-100 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg px-2 py-1 text-xs font-semibold text-slate-800 dark:text-slate-200 focus:outline-none focus:ring-1 focus:ring-lime-400", children: pageSizeOptions.map((size) => ((0, jsx_runtime_1.jsx)("option", { value: size, children: size }, size))) }), (0, jsx_runtime_1.jsx)("span", { children: "per page" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePageChange(activePage - 1), disabled: activePage <= 1, "aria-label": "Previous page", className: `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1 border ${activePage <= 1
-                                        ? 'opacity-40 cursor-not-allowed border-slate-200 dark:border-slate-800 text-slate-400'
-                                        : 'border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/80 dark:text-slate-300 dark:hover:bg-slate-800 active:scale-95 shadow-xs cursor-pointer'}`, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }), (0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Previous" })] }), paginationVariant === 'numbers' ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-1", children: visiblePages.map((pageNum, idx) => {
-                                        if (pageNum === 'ellipsis') {
-                                            return ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", className: "px-2 text-slate-400 dark:text-slate-600 select-none text-xs font-bold", children: "\u2026" }, `ellipsis-${idx}`));
-                                        }
-                                        const isCurrent = pageNum === activePage;
-                                        return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handlePageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": isCurrent ? 'page' : undefined, className: `min-w-[34px] h-[34px] px-2 rounded-xl text-xs font-bold transition-all flex items-center justify-center cursor-pointer ${isCurrent
-                                                ? 'bg-slate-900 text-white dark:bg-lime-400 dark:text-slate-950 font-black shadow-md scale-105'
-                                                : 'bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800/80 text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'}`, children: pageNum }, pageNum));
-                                    }) })) : (
-                                /* Simple Indicator */
-                                (0, jsx_runtime_1.jsxs)("span", { className: "px-3 py-1.5 text-xs font-bold text-slate-700 dark:text-slate-300", children: ["Page ", activePage, " of ", totalPages] })), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => handlePageChange(activePage + 1), disabled: activePage >= totalPages, "aria-label": "Next page", className: `px-3 py-2 rounded-xl text-xs font-bold transition-all flex items-center gap-1 border ${activePage >= totalPages
-                                        ? 'opacity-40 cursor-not-allowed border-slate-200 dark:border-slate-800 text-slate-400'
-                                        : 'border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/80 dark:text-slate-300 dark:hover:bg-slate-800 active:scale-95 shadow-xs cursor-pointer'}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Next" }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) })] })] })] })) }))] }));
+                                }, className: "absolute inset-y-0 right-0 pr-3.5 flex items-center text-slate-400 hover:text-slate-600 dark:hover:text-white transition-colors", title: "Clear search", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 text-xs text-slate-500 dark:text-slate-400", children: [isSearchingBackend && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1.5 text-emerald-600 dark:text-lime-400 font-medium animate-pulse", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-lime-400" }), "Searching live catalog..."] })), (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold bg-slate-100 dark:bg-slate-900/80 px-3 py-1.5 rounded-xl border border-slate-200/80 dark:border-slate-800", children: ["Showing ", (0, jsx_runtime_1.jsx)("span", { className: "text-slate-900 dark:text-white font-bold", children: filteredProducts.length }), " of ", products.length, " products"] })] })] })), showFilterSidebar ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col lg:flex-row gap-8 items-start w-full", children: [(0, jsx_runtime_1.jsx)("aside", { className: "w-full lg:w-72 shrink-0", children: (0, jsx_runtime_1.jsx)(EditableFilterSidebar_1.EditableFilterSidebar, { categories: categories.length > 1 ? categories : resolvedCategories.filter((c) => c !== "All"), minPrice: filterSidebarProps?.minPrice ?? 0, maxPrice: effectiveMaxPrice, currency: currency, initialFilters: activeFilters, onFilterChange: handleFilterChange, ...filterSidebarProps }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 w-full min-w-0", children: [productsGridContent, paginationContent] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [productsGridContent, paginationContent] }))] }));
 }
 // Canonical alias
 exports.ProductGrid = EditableProductGrid;

package/dist/EditableProductShowcase.d.ts

@@ -19,6 +19,8 @@ export interface ProductShowcaseItem {
     badge?: string;
     colors?: Array<ProductShowcaseColor | string>;
     isAvailable?: boolean;
+    href?: string;
+    detailHref?: string;
     [key: string]: unknown;
 }
 export interface EditableProductShowcaseProps extends React.HTMLAttributes<HTMLElement> {

package/dist/EditableProductShowcase.js

@@ -6,6 +6,7 @@ exports.ProductShowcase = EditableProductShowcase;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SiteDataProvider_1 = require("./SiteDataProvider");
+const PlatformProductDetail_1 = require("./PlatformProductDetail");
 const DEFAULT_PRODUCTS = [
     {
         id: 'phone-iphone-16-pro',
@@ -194,8 +195,8 @@ function EditableProductShowcase({ sectionPath = 'home', listPath = 'featuredPho
                             const activeColorIdx = selectedColors[phoneId] ?? 0;
                             const colorsList = phone.colors || [];
                             const activeColor = colorsList[activeColorIdx] || colorsList[0] || { name: 'Default', hex: '#9d9890' };
-                            const detailUrl = `${productDetailRoutePrefix}/?id=${encodeURIComponent(phoneId)}`;
-                            return ((0, jsx_runtime_1.jsxs)("li", { "data-preview-item-path": `${sectionPath}.${listPath}[${idx}]`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].card`, "data-preview-style-type": "card", className: "group relative flex flex-col justify-between p-6 sm:p-7 rounded-3xl border border-black/[0.08] bg-white/95 hover:border-cyan-400/60 transition-all duration-300 hover:-translate-y-1.5 shadow-[0_10px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(0,240,255,0.12)]", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-widest text-cyan-600 font-mono", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-type": "text", children: phone.brand }), (0, jsx_runtime_1.jsx)("h3", { className: "mt-1 text-xl font-bold text-zinc-950 tracking-tight group-hover:text-cyan-600 transition-colors", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-type": "text", children: (0, jsx_runtime_1.jsx)("a", { href: detailUrl, className: "hover:underline", children: phone.name }) }), phone.subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-type": "text", children: phone.subtitle }))] }), phone.badge && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 rounded-full border border-black/[0.08] bg-black/[0.03] px-2.5 py-0.5 text-[10px] font-semibold text-zinc-700 backdrop-blur-md", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-type": "text", children: phone.badge }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative my-6 h-60 w-full overflow-clip rounded-2xl border border-black/[0.06] bg-slate-100 flex items-center justify-center", children: [(0, jsx_runtime_1.jsx)("img", { src: phone.image, alt: phone.name || 'Product Image', "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].image`, className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-108" }), (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-30" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-black/[0.06]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", "data-preview-list-path": `${sectionPath}.${listPath}[${idx}].colors`, children: [colorsList.map((c, colorIdx) => ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": `${sectionPath}.${listPath}[${idx}].colors[${colorIdx}]`, className: "inline-flex items-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
+                            const detailUrl = phone.href || phone.detailHref || (0, PlatformProductDetail_1.platformProductDetailHref)(phoneId, productDetailRoutePrefix);
+                            return ((0, jsx_runtime_1.jsxs)("li", { "data-preview-item-path": `${sectionPath}.${listPath}[${idx}]`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].card`, "data-preview-style-type": "card", className: "group relative flex flex-col justify-between p-6 sm:p-7 rounded-3xl border border-black/[0.08] bg-white/95 hover:border-cyan-400/60 transition-all duration-300 hover:-translate-y-1.5 shadow-[0_10px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(0,240,255,0.12)]", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[11px] font-bold uppercase tracking-widest text-cyan-600 font-mono", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].brand`, "data-preview-style-type": "text", children: phone.brand }), (0, jsx_runtime_1.jsx)("h3", { className: "mt-1 text-xl font-bold text-zinc-950 tracking-tight group-hover:text-cyan-600 transition-colors", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].name`, "data-preview-style-type": "text", children: (0, jsx_runtime_1.jsx)("a", { href: detailUrl, className: "hover:underline", "data-preview-static": "Open the stable live product detail page", children: phone.name }) }), phone.subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].subtitle`, "data-preview-style-type": "text", children: phone.subtitle }))] }), phone.badge && ((0, jsx_runtime_1.jsx)("span", { className: "shrink-0 rounded-full border border-black/[0.08] bg-black/[0.03] px-2.5 py-0.5 text-[10px] font-semibold text-zinc-700 backdrop-blur-md", "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-target": `${sectionPath}.${listPath}[${idx}].badge`, "data-preview-style-type": "text", children: phone.badge }))] }), (0, jsx_runtime_1.jsxs)("a", { href: detailUrl, "data-preview-static": "Open the stable live product detail page", className: "relative my-6 h-60 w-full overflow-clip rounded-2xl border border-black/[0.06] bg-slate-100 flex items-center justify-center block", children: [(0, jsx_runtime_1.jsx)("img", { src: phone.image, alt: phone.name || 'Product Image', "data-preview-field-path": `${sectionPath}.${listPath}[${idx}].image`, className: "h-full w-full object-cover transition-transform duration-500 group-hover:scale-108" }), (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-30" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-2 border-t border-black/[0.06]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5", "data-preview-list-path": `${sectionPath}.${listPath}[${idx}].colors`, children: [colorsList.map((c, colorIdx) => ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": `${sectionPath}.${listPath}[${idx}].colors[${colorIdx}]`, className: "inline-flex items-center", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => {
                                                                             e.stopPropagation();
                                                                             setSelectedColors((prev) => ({ ...prev, [phoneId]: colorIdx }));
                                                                         }, "aria-label": c.name, title: c.name, className: `h-4 w-4 rounded-full transition-all cursor-pointer ${activeColorIdx === colorIdx
@@ -208,6 +209,6 @@ function EditableProductShowcase({ sectionPath = 'home', listPath = 'featuredPho
                                                                 // eslint-disable-next-line @next/next/no-location-assign-relative-destination
                                                                 window.location.href = detailUrl;
                                                             }
-                                                        }, className: "flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-black/[0.02] text-zinc-600 hover:text-cyan-600 hover:border-cyan-400/50 hover:bg-cyan-50/50 transition-all cursor-pointer", title: "Quick View", "aria-label": "Quick View Product", children: (0, jsx_runtime_1.jsxs)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => handleWhatsAppOrder(phone, activeColor.name, e), className: "w-full flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-cyan-400 via-sky-400 to-blue-600 py-3 px-4 text-xs font-bold text-white shadow-[0_4px_15px_rgba(0,240,255,0.25)] hover:shadow-[0_6px_25px_rgba(0,240,255,0.45)] transition-all hover:scale-[1.01] active:scale-[0.99] cursor-pointer", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 fill-white", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.634.055-.992-.061-.635-.206-1.464-.567-2.527-1.63-1.341-1.341-1.849-2.531-2.006-2.986-.157-.455-.015-.81.212-1.037.202-.202.455-.253.606-.253.152 0 .303.004.436.012.141.008.329-.053.515.394.192.465.657 1.602.714 1.719.057.116.096.253.019.405-.076.152-.114.248-.228.38-.114.133-.24.296-.343.397-.114.114-.233.238-.1.467.133.228.591.976 1.269 1.58 1.077.959 1.83 1.157 2.058 1.271.228.114.362.096.495-.057.133-.152.571-.666.723-.894.152-.228.303-.19.515-.114.212.076 1.346.635 1.575.749.228.114.38.171.436.266.057.095.057.553-.087.958z" }) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-target": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-type": "text", children: whatsappOrderLabel })] })] })] }, phoneId));
+                                                        }, className: "flex h-9 w-9 items-center justify-center rounded-full border border-black/10 bg-black/[0.02] text-zinc-600 hover:text-cyan-600 hover:border-cyan-400/50 hover:bg-cyan-50/50 transition-all cursor-pointer", title: "Quick View", "aria-label": "Quick View Product", "data-preview-static": "Open the product quick view or detail page", children: (0, jsx_runtime_1.jsxs)("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: (e) => handleWhatsAppOrder(phone, activeColor.name, e), className: "w-full flex items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-cyan-400 via-sky-400 to-blue-600 py-3 px-4 text-xs font-bold text-white shadow-[0_4px_15px_rgba(0,240,255,0.25)] hover:shadow-[0_6px_25px_rgba(0,240,255,0.45)] transition-all hover:scale-[1.01] active:scale-[0.99] cursor-pointer", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 fill-white", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.634.055-.992-.061-.635-.206-1.464-.567-2.527-1.63-1.341-1.341-1.849-2.531-2.006-2.986-.157-.455-.015-.81.212-1.037.202-.202.455-.253.606-.253.152 0 .303.004.436.012.141.008.329-.053.515.394.192.465.657 1.602.714 1.719.057.116.096.253.019.405-.076.152-.114.248-.228.38-.114.133-.24.296-.343.397-.114.114-.233.238-.1.467.133.228.591.976 1.269 1.58 1.077.959 1.83 1.157 2.058 1.271.228.114.362.096.495-.057.133-.152.571-.666.723-.894.152-.228.303-.19.515-.114.212.076 1.346.635 1.575.749.228.114.38.171.436.266.057.095.057.553-.087.958z" }) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-target": `${sectionPath}.whatsappOrderLabel`, "data-preview-style-type": "text", children: whatsappOrderLabel })] })] })] }, phoneId));
                         }) })] })] }));
 }

package/dist/ProductQuickView.d.ts

@@ -13,6 +13,8 @@ export interface ProductQuickViewItem {
     isAvailable?: boolean;
     rating?: number;
     reviewCount?: number;
+    href?: string;
+    detailHref?: string;
     [key: string]: unknown;
 }
 export interface ProductQuickViewProps {
@@ -27,6 +29,8 @@ export interface ProductQuickViewProps {
      */
     itemPath?: string;
     addToCartLabel?: string;
+    showDetailLink?: boolean;
+    detailLinkText?: string;
 }
 /**
  * DENEB UI — Product Quick View Modal
@@ -37,4 +41,4 @@ export interface ProductQuickViewProps {
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-export declare function ProductQuickView({ product, isOpen, onClose, onAddToCart, className, itemPath, addToCartLabel, }: ProductQuickViewProps): React.JSX.Element | null;
+export declare function ProductQuickView({ product, isOpen, onClose, onAddToCart, className, itemPath, addToCartLabel, showDetailLink, detailLinkText, }: ProductQuickViewProps): React.JSX.Element | null;