@deneb-ui/ui 2.0.67 → 2.0.69

package/dist/EditableCategoryPills.js

@@ -102,9 +102,9 @@ function EditableCategoryPills({ categories, fieldPath = 'categories', selectedC
                     whiteSpace: 'nowrap',
                     cursor: 'pointer',
                     transition: 'all 0.2s ease',
-                    border: isSelected ? '1px solid var(--color-primary, #0f172a)' : '1px solid #e2e8f0',
-                    backgroundColor: isSelected ? 'var(--color-primary, #0f172a)' : '#ffffff',
-                    color: isSelected ? '#ffffff' : '#475569',
+                    border: isSelected ? '1px solid var(--brand-color, var(--color-primary, #0f172a))' : '1px solid var(--color-border, #e2e8f0)',
+                    backgroundColor: isSelected ? 'var(--brand-color, var(--color-primary, #0f172a))' : 'var(--card-bg, var(--color-surface, #ffffff))',
+                    color: isSelected ? '#ffffff' : 'var(--color-text-muted, var(--muted-text, #475569))',
                     boxShadow: isSelected ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
                 }, "data-preview-field-path": `${fieldPath}.${idx}`, "aria-pressed": isSelected, children: cat }, `${cat}-${idx}`));
         }) }));

package/dist/EditableContactForm.js

@@ -98,10 +98,11 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
-                            border: '1px solid #cbd5e1',
+                            border: '1px solid var(--input-border, #cbd5e1)',
                             fontSize: '0.95rem',
                             outline: 'none',
-                            backgroundColor: '#ffffff',
+                            backgroundColor: 'var(--input-bg, #ffffff)',
+                            color: 'var(--input-color, var(--page-text, inherit))',
                             boxSizing: 'border-box',
                         } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-email", "data-preview-field-path": emailLabelPath, style: {
                             display: 'block',
@@ -113,10 +114,11 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
-                            border: '1px solid #cbd5e1',
+                            border: '1px solid var(--input-border, #cbd5e1)',
                             fontSize: '0.95rem',
                             outline: 'none',
-                            backgroundColor: '#ffffff',
+                            backgroundColor: 'var(--input-bg, #ffffff)',
+                            color: 'var(--input-color, var(--page-text, inherit))',
                             boxSizing: 'border-box',
                         } })] }), showPhone && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-phone", "data-preview-field-path": phoneLabelPath, style: {
                             display: 'block',
@@ -143,10 +145,11 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
-                            border: '1px solid #cbd5e1',
+                            border: '1px solid var(--input-border, #cbd5e1)',
                             fontSize: '0.95rem',
                             outline: 'none',
-                            backgroundColor: '#ffffff',
+                            backgroundColor: 'var(--input-bg, #ffffff)',
+                            color: 'var(--input-color, var(--page-text, inherit))',
                             boxSizing: 'border-box',
                             fontFamily: 'inherit',
                         } })] }), (0, jsx_runtime_1.jsx)("button", { type: "submit", disabled: status === 'submitting', style: {

package/dist/EditableDialog.js

@@ -66,7 +66,9 @@ function EditableDialog({ open = false, onClose, title, description, titleFieldP
                     position: 'relative',
                     width: '100%',
                     maxWidth,
-                    backgroundColor: '#ffffff',
+                    backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+                    color: 'var(--page-text, inherit)',
+                    border: '1px solid var(--color-border, rgba(0, 0, 0, 0.05))',
                     borderRadius: '20px',
                     boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05)',
                     padding: '2rem',

package/dist/EditableNavbar.js

@@ -62,10 +62,10 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
             top: 0,
             zIndex: 50,
             width: '100%',
-            backgroundColor: 'rgba(255, 255, 255, 0.82)',
+            backgroundColor: 'var(--header-bg, rgba(255, 255, 255, 0.82))',
             backdropFilter: 'blur(16px)',
             WebkitBackdropFilter: 'blur(16px)',
-            borderBottom: '1px solid rgba(226, 232, 240, 0.8)',
+            borderBottom: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))',
             transition: 'all 0.2s ease',
             ...style,
         }, className: `deneb-navbar sticky top-0 z-50 w-full border-b border-slate-200/80 bg-white/80 backdrop-blur-md dark:border-slate-800/80 dark:bg-slate-950/80 ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
@@ -144,7 +144,7 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
                                     cursor: 'pointer',
                                 }, className: "deneb-mobile-toggle md:hidden flex items-center justify-center w-10 h-10 rounded-lg border border-slate-200 text-slate-700 hover:bg-slate-100 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800 transition-colors", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: mobileMenuOpen ? ((0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" })) : ((0, jsx_runtime_1.jsx)("path", { d: "M4 6h16M4 12h16M4 18h16" })) }) })] })] }), mobileMenuOpen && ((0, jsx_runtime_1.jsxs)("div", { style: {
                     borderTop: '1px solid var(--color-border, #e2e8f0)',
-                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+                    backgroundColor: 'var(--card-bg, var(--page-background, rgba(255, 255, 255, 0.98)))',
                     padding: '1.25rem 1.5rem',
                     display: 'flex',
                     flexDirection: 'column',
@@ -170,7 +170,7 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
                                 }, className: `block w-full text-left px-3.5 py-2.5 rounded-lg text-base font-medium transition-colors border-0 cursor-pointer ${isActive
                                     ? 'bg-slate-100 text-slate-900 font-semibold dark:bg-slate-800 dark:text-white'
                                     : 'bg-transparent text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `common.navLabels.${link.id}`, children: label }) }) }, `mobile-${link.id}`));
-                    }), hasContact ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", style: { marginTop: '0.5rem', paddingTop: '0.75rem', borderTop: '1px solid rgba(226,232,240,0.8)' }, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+                    }), hasContact ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", style: { marginTop: '0.5rem', paddingTop: '0.75rem', borderTop: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))' }, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
                                 setMobileMenuOpen(false);
                                 navigate('/contact');
                             }, style: {

package/dist/EditablePricingCard.js

@@ -20,8 +20,8 @@ function EditablePricingCard({ itemPath, item, as: Component = 'div', isPopular
     const popular = item?.isPopular || isPopular;
     const cardStyle = {
         position: 'relative',
-        backgroundColor: popular ? '#ffffff' : 'rgba(255, 255, 255, 0.85)',
-        border: popular ? '2px solid var(--brand-color, #2563eb)' : '1px solid #e2e8f0',
+        backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+        border: popular ? '2px solid var(--brand-color, #2563eb)' : '1px solid var(--card-border, var(--color-border, #e2e8f0))',
         borderRadius: '20px',
         padding: '2.5rem 2rem',
         boxShadow: popular

package/dist/EditableProductCard.js

@@ -67,10 +67,10 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
     };
     const variantStyles = {
         'modern-glass': {
-            backgroundColor: 'var(--product-card-bg, #0F1424)',
+            backgroundColor: 'var(--product-card-bg, var(--card-bg, var(--color-surface, rgba(255, 255, 255, 0.85))))',
             backdropFilter: 'blur(16px)',
             WebkitBackdropFilter: 'blur(16px)',
-            border: '1px solid var(--product-card-border, #1E2638)',
+            border: '1px solid var(--product-card-border, var(--card-border, var(--color-border, rgba(226, 232, 240, 0.8))))',
             borderRadius: '16px',
             boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.4)',
             overflow: 'hidden',
@@ -79,8 +79,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
             flexDirection: 'column',
         },
         classic: {
-            backgroundColor: '#ffffff',
-            border: '1px solid #e2e8f0',
+            backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+            border: '1px solid var(--card-border, var(--color-border, #e2e8f0))',
             borderRadius: '14px',
             boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.05)',
             overflow: 'hidden',
@@ -96,8 +96,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
             flexDirection: 'column',
         },
         horizontal: {
-            backgroundColor: '#ffffff',
-            border: '1px solid #e2e8f0',
+            backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+            border: '1px solid var(--card-border, var(--color-border, #e2e8f0))',
             borderRadius: '16px',
             overflow: 'hidden',
             display: 'flex',
@@ -131,8 +131,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                             fontWeight: 700,
                                             letterSpacing: '0.08em',
                                             textTransform: 'uppercase',
-                                            color: '#94a3b8',
-                                            backgroundColor: 'rgba(30, 41, 59, 0.8)',
+                                            color: 'var(--tag-color, var(--muted-text, var(--color-muted, #64748b)))',
+                                            backgroundColor: 'var(--tag-bg, var(--color-secondary, rgba(241, 245, 249, 0.9)))',
                                             padding: '2px 8px',
                                             borderRadius: '6px',
                                         } })) : null] }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.name`, "data-preview-field-path": `${itemPath}.name`, defaultValue: name, style: {
@@ -153,7 +153,7 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                 } })) : null] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             marginTop: '0.75rem',
                             paddingTop: '0.75rem',
-                            borderTop: cardVariant === 'minimal' ? 'none' : '1px solid rgba(51, 65, 85, 0.6)',
+                            borderTop: cardVariant === 'minimal' ? 'none' : '1px solid var(--card-border, var(--color-border, rgba(226, 232, 240, 0.7)))',
                             display: 'flex',
                             flexDirection: 'column',
                             gap: '0.75rem',
@@ -191,8 +191,8 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                             transition: 'all 0.2s ease',
                                             boxShadow: '0 2px 8px rgba(37, 211, 102, 0.25)',
                                         }, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(WhatsAppIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.whatsappButtonText`, "data-preview-field-path": `${itemPath}.whatsappButtonText`, defaultValue: resolvedWhatsAppText, style: { color: '#ffffff', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] })), showAddToCartButton && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleAddToCartClick, title: "Add this product to shopping cart", style: {
-                                            backgroundColor: 'var(--brand-color, #2563eb)',
-                                            color: '#ffffff',
+                                            backgroundColor: 'var(--button-bg, var(--brand-color, #2563eb))',
+                                            color: 'var(--button-text, #ffffff)',
                                             border: 'none',
                                             padding: '0.55rem 0.75rem',
                                             borderRadius: '10px',
@@ -205,5 +205,5 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                             gap: '0.375rem',
                                             transition: 'all 0.2s ease',
                                             boxShadow: '0 2px 8px rgba(37, 99, 235, 0.25)',
-                                        }, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(CartIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.addToCartButtonText`, "data-preview-field-path": `${itemPath}.addToCartButtonText`, defaultValue: resolvedAddToCartText, style: { color: '#ffffff', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] }))] })] })] }));
+                                        }, className: "hover:brightness-105 active:scale-95", children: [(0, jsx_runtime_1.jsx)(CartIcon, {}), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.addToCartButtonText`, "data-preview-field-path": `${itemPath}.addToCartButtonText`, defaultValue: resolvedAddToCartText, style: { color: 'var(--button-text, #ffffff)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] }))] })] })] }));
 }

package/dist/EditableProductGrid.d.ts

@@ -48,14 +48,78 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
      * e.g. "home.product1", "home.product2", etc.
      */
     cardPrefix?: string;
+    /**
+     * Whether to display the live search bar above the product grid (default: true).
+     */
+    showSearch?: boolean;
+    /**
+     * Custom placeholder text for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether to enable live backend catalog search when query is typed (default: true).
+     */
+    enableBackendSearch?: boolean;
+    /**
+     * Callback fired whenever the search query changes.
+     */
+    onSearchChange?: (query: string) => void;
+    /**
+     * Whether to enable pagination for the product grid (default: true).
+     */
+    enablePagination?: boolean;
+    /**
+     * Number of products to display per page (default: 8).
+     */
+    pageSize?: number;
+    /**
+     * Selectable page size options for the dropdown selector (e.g. [8, 16, 24, 48]).
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Whether to show the page size selector dropdown (default: false).
+     */
+    showPageSizeSelector?: boolean;
+    /**
+     * Pagination visual display variant:
+     * - 'numbers': Standard numbered buttons with smart ellipsis and Prev/Next (default)
+     * - 'simple': Minimal Previous / Next controls with page indicator
+     * - 'load-more': Progressive infinite-style "Load More Products" button
+     */
+    paginationVariant?: 'numbers' | 'simple' | 'load-more';
+    /**
+     * Whether to automatically hide pagination controls when all products fit on a single page (default: true).
+     */
+    hidePaginationOnSinglePage?: boolean;
+    /**
+     * Controlled active page number (1-indexed).
+     */
+    currentPage?: number;
+    /**
+     * Initial page number when uncontrolled (default: 1).
+     */
+    initialPage?: number;
+    /**
+     * Callback fired when the active page changes.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Whether to smoothly scroll to the top of the grid section when the page changes (default: true).
+     */
+    scrollToTopOnPageChange?: boolean;
+    /**
+     * Total products count override when backend performs server-side pagination slicing.
+     */
+    totalProducts?: number;
     className?: string;
 }
 /**
  * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
  * with interactive category filtering, live Fivora visual editing synchronization,
- * automatic useProducts() fallback rehydration, and built-in Quick View modal triggers.
+ * smart multi-variant pagination, automatic useProducts() fallback rehydration,
+ * and built-in Quick View modal triggers.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-export declare function EditableProductGrid({ sectionPath, listPath, title, subtitle, products: userProducts, categories, cardVariant, columns, onQuickView, cardPrefix, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
+export declare function EditableProductGrid({ sectionPath, listPath, title, subtitle, products: userProducts, categories, cardVariant, columns, onQuickView, cardPrefix, showSearch, searchPlaceholder, enableBackendSearch, onSearchChange, enablePagination, pageSize, pageSizeOptions, showPageSizeSelector, paginationVariant, hidePaginationOnSinglePage, currentPage: controlledPage, initialPage, onPageChange, scrollToTopOnPageChange, totalProducts, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
 export declare const ProductGrid: typeof EditableProductGrid;

package/dist/EditableProductGrid.js

@@ -9,13 +9,71 @@ const SiteDataProvider_1 = require("./SiteDataProvider");
 /**
  * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
  * with interactive category filtering, live Fivora visual editing synchronization,
- * automatic useProducts() fallback rehydration, and built-in Quick View modal triggers.
+ * smart multi-variant pagination, automatic useProducts() fallback rehydration,
+ * and built-in Quick View modal triggers.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function EditableProductGrid({ 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', className = '', style, ...props }) {
+function EditableProductGrid({ 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 }) {
+    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 products = userProducts && userProducts.length > 0 ? userProducts : liveProducts;
+    const baseProducts = userProducts && userProducts.length > 0 ? userProducts : liveProducts;
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [isSearchingBackend, setIsSearchingBackend] = (0, react_1.useState)(false);
+    const [backendProducts, setBackendProducts] = (0, react_1.useState)(null);
+    // Pagination internal state
+    const [internalPage, setInternalPage] = (0, react_1.useState)(initialPage);
+    const activePage = controlledPage !== undefined ? controlledPage : internalPage;
+    const [activePageSize, setActivePageSize] = (0, react_1.useState)(pageSize);
+    const [loadedCount, setLoadedCount] = (0, react_1.useState)(pageSize);
+    // Sync internal page size if prop changes
+    (0, react_1.useEffect)(() => {
+        if (pageSize) {
+            setActivePageSize(pageSize);
+        }
+    }, [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
+    (0, react_1.useEffect)(() => {
+        if (!enableBackendSearch || !searchQuery.trim()) {
+            setBackendProducts(null);
+            return;
+        }
+        const catalogUrl = siteApi?.catalogUrl ||
+            (siteData?.siteInstance?.slug ? `/site-catalog/${siteData.siteInstance.slug}` : null);
+        if (!catalogUrl)
+            return;
+        let active = true;
+        const timer = setTimeout(async () => {
+            try {
+                setIsSearchingBackend(true);
+                const sep = catalogUrl.includes('?') ? '&' : '?';
+                const url = `${catalogUrl}${sep}q=${encodeURIComponent(searchQuery.trim())}`;
+                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) {
+                        setBackendProducts(items);
+                    }
+                }
+            }
+            catch {
+                // Fallback to client-side filtering cleanly
+            }
+            finally {
+                if (active)
+                    setIsSearchingBackend(false);
+            }
+        }, 300);
+        return () => {
+            active = false;
+            clearTimeout(timer);
+        };
+    }, [searchQuery, enableBackendSearch, siteApi, siteData]);
     const resolvedCategories = (0, react_1.useMemo)(() => {
         if (categories && categories.length > 1) {
             return categories;
@@ -26,15 +84,78 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
         return distinct.length > 0 ? ['All', ...distinct] : categories;
     }, [categories, products]);
     const [activeCategory, setActiveCategory] = (0, react_1.useState)(categories[0] || 'All');
+    // Reset to page 1 whenever category or search query changes
+    (0, react_1.useEffect)(() => {
+        setInternalPage(1);
+        setLoadedCount(activePageSize);
+        onPageChange?.(1);
+    }, [searchQuery, activeCategory, activePageSize]);
     const filteredProducts = (0, react_1.useMemo)(() => {
-        if (!activeCategory || activeCategory.toLowerCase() === 'all') {
-            return products;
-        }
-        return products.filter((p) => {
-            const cat = String(p.category || '').toLowerCase();
-            return cat === activeCategory.toLowerCase();
-        });
-    }, [products, activeCategory]);
+        let result = products;
+        // Filter by category
+        if (activeCategory && activeCategory.toLowerCase() !== 'all') {
+            result = result.filter((p) => {
+                const cat = String(p.category || '').toLowerCase();
+                return cat === activeCategory.toLowerCase();
+            });
+        }
+        // Filter by search query
+        if (searchQuery.trim()) {
+            const q = searchQuery.trim().toLowerCase();
+            result = result.filter((p) => {
+                const name = String(p.name || p.title || '').toLowerCase();
+                const desc = String(p.description || '').toLowerCase();
+                const brand = String(p.brand || '').toLowerCase();
+                const cat = String(p.category || '').toLowerCase();
+                const tags = Array.isArray(p.tags) ? p.tags.join(' ').toLowerCase() : '';
+                return name.includes(q) || desc.includes(q) || brand.includes(q) || cat.includes(q) || tags.includes(q);
+            });
+        }
+        return result;
+    }, [products, activeCategory, searchQuery]);
+    // Total count calculation
+    const totalItems = totalProducts !== undefined ? totalProducts : 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 (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]);
+    // Smart page numbers calculation with ellipsis (e.g. 1 ... 4 5 6 ... 10)
+    const visiblePages = (0, react_1.useMemo)(() => {
+        if (totalPages <= 7) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        if (activePage <= 4) {
+            return [1, 2, 3, 4, 5, 'ellipsis', totalPages];
+        }
+        if (activePage >= totalPages - 3) {
+            return [1, 'ellipsis', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+        }
+        return [1, 'ellipsis', activePage - 1, activePage, activePage + 1, 'ellipsis', totalPages];
+    }, [activePage, totalPages]);
+    // Page navigation handler
+    const handlePageChange = (newPage) => {
+        if (newPage < 1 || newPage > totalPages || newPage === activePage)
+            return;
+        if (controlledPage === undefined) {
+            setInternalPage(newPage);
+        }
+        onPageChange?.(newPage);
+        if (scrollToTopOnPageChange && sectionRef.current) {
+            sectionRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+    };
+    const handleLoadMore = () => {
+        setLoadedCount((prev) => Math.min(prev + activePageSize, filteredProducts.length));
+    };
     // Map column config to CSS grid class names
     const gridColClasses = (0, react_1.useMemo)(() => {
         const m = columns.mobile || 1;
@@ -45,19 +166,58 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
         const dClass = d === 3 ? 'lg:grid-cols-3' : d === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4';
         return `${mClass} ${tClass} ${dClass}`;
     }, [columns]);
-    return ((0, jsx_runtime_1.jsxs)("section", { "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-10 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 shouldShowPagination = enablePagination && !(hidePaginationOnSinglePage && totalPages <= 1);
+    return ((0, jsx_runtime_1.jsxs)("section", { ref: sectionRef, "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();
                             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));
-                        }) }))] }), filteredProducts.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { ...(listPath ? { 'data-preview-list-path': listPath } : {}), className: `deneb-product-grid grid ${gridColClasses} gap-6 sm:gap-8`, children: filteredProducts.map((product, idx) => {
+                        }) }))] }), showSearch && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-8 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 max-w-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400", 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: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: searchQuery, onChange: (e) => {
+                                    setSearchQuery(e.target.value);
+                                    onSearchChange?.(e.target.value);
+                                }, 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", { ...(listPath ? { 'data-preview-list-path': listPath } : {}), 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));
+                    const effectiveIndex = baseIndex !== -1 ? baseIndex : (activePage - 1) * activePageSize + idx;
                     const itemPath = listPath
-                        ? `${listPath}[${idx}]`
-                        : `${sectionPath}.${cardPrefix}${idx + 1}`;
+                        ? `${listPath}[${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, 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 */
-            (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-20 px-4 rounded-3xl border border-dashed border-slate-800 bg-slate-900/30", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-slate-400", children: ["No products found matching category \"", activeCategory, "\"."] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory('All'), className: "mt-4 px-4 py-2 rounded-xl text-xs font-bold bg-lime-400 text-slate-950 hover:bg-lime-300 transition-colors", children: "View All Products" })] }))] }));
+                })) : (
+                /* 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" }) })] })] })] })) }))] }));
 }
 // Canonical alias
 exports.ProductGrid = EditableProductGrid;

package/dist/EditableTestimonialCard.js

@@ -11,8 +11,8 @@ function EditableTestimonialCard({ itemPath, item, as: Component = 'div', classN
     const avatar = String(item?.avatar || '');
     const rating = Number(item?.rating || 5);
     const cardStyle = {
-        backgroundColor: 'var(--color-surface, #ffffff)',
-        border: '1px solid var(--color-border, #f1f5f9)',
+        backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+        border: '1px solid var(--card-border, var(--color-border, #f1f5f9))',
         borderRadius: '16px',
         padding: '2rem',
         boxShadow: 'var(--card-shadow, 0 4px 20px -2px rgba(0, 0, 0, 0.04))',

package/dist/EditableText.js

@@ -251,37 +251,37 @@ function EditableButton({ id, 'data-preview-field-path': previewFieldPath, defau
     };
     const variantStyles = {
         primary: {
-            backgroundColor: 'var(--brand-color, #2563eb)',
-            color: '#ffffff',
+            backgroundColor: 'var(--button-bg, var(--brand-color, #2563eb))',
+            color: 'var(--button-text, #ffffff)',
             border: 'none',
             boxShadow: '0 4px 14px 0 rgba(37, 99, 235, 0.35)',
         },
         secondary: {
-            backgroundColor: 'var(--brand-secondary, #0f172a)',
-            color: '#ffffff',
-            border: 'none',
+            backgroundColor: 'var(--button-secondary-bg, var(--color-secondary, var(--brand-secondary, #0f172a)))',
+            color: 'var(--button-secondary-text, var(--color-text, #ffffff))',
+            border: '1px solid var(--button-secondary-border, var(--color-border, transparent))',
         },
         accent: {
             backgroundColor: 'var(--brand-accent, #14b8a6)',
-            color: '#ffffff',
+            color: 'var(--button-accent-text, #ffffff)',
             border: 'none',
         },
         outline: {
             backgroundColor: 'transparent',
-            color: 'var(--page-text, #0f172a)',
-            border: '1.5px solid currentColor',
+            color: 'var(--button-outline-text, var(--color-text, var(--page-text, #0f172a)))',
+            border: '1.5px solid var(--button-outline-border, var(--color-border, currentColor))',
         },
         ghost: {
             backgroundColor: 'transparent',
-            color: 'var(--page-text, #0f172a)',
+            color: 'var(--button-ghost-text, var(--color-text, var(--page-text, #0f172a)))',
             border: 'none',
         },
         glass: {
-            backgroundColor: 'rgba(255, 255, 255, 0.25)',
+            backgroundColor: 'var(--glass-bg, rgba(255, 255, 255, 0.15))',
             backdropFilter: 'blur(12px)',
             WebkitBackdropFilter: 'blur(12px)',
-            color: 'var(--page-text, #0f172a)',
-            border: '1px solid rgba(255, 255, 255, 0.4)',
+            color: 'var(--color-text, var(--page-text, #0f172a))',
+            border: '1px solid var(--card-border, rgba(255, 255, 255, 0.2))',
         },
     };
     const baseStyle = {

package/dist/SiteDataProvider.d.ts

@@ -59,6 +59,8 @@ export type SiteData = {
 };
 export declare const SiteDataContext: React.Context<SiteData>;
 export declare function isRecord(value: unknown): value is GenericRecord;
+export declare function isDarkColor(color?: unknown): boolean;
+export declare function syncThemeToDocument(theme: unknown): void;
 export declare function mergeSiteData(current: unknown, incoming: unknown, depth?: number, seen?: WeakSet<object>): unknown;
 export declare function normalizeOrigin(value?: string | null, baseOrigin?: string | null): string | null;
 /**

package/dist/SiteDataProvider.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DenebDataContext = exports.useDenebData = exports.DenebDataProvider = exports.SiteDataContext = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.PREVIEW_FIELD_ATTRIBUTE = exports.LEGACY_PREVIEW_FOCUS_MESSAGE = exports.PREVIEW_FOCUS_MESSAGE = exports.DENEB_PREVIEW_FOCUS_MESSAGE = exports.LEGACY_PREVIEW_READY_MESSAGE = exports.PREVIEW_READY_MESSAGE = exports.DENEB_PREVIEW_READY_MESSAGE = exports.LEGACY_PREVIEW_DATA_MESSAGE = exports.PREVIEW_DATA_MESSAGE = exports.DENEB_PREVIEW_DATA_MESSAGE = void 0;
 exports.isRecord = isRecord;
+exports.isDarkColor = isDarkColor;
+exports.syncThemeToDocument = syncThemeToDocument;
 exports.mergeSiteData = mergeSiteData;
 exports.normalizeOrigin = normalizeOrigin;
 exports.resolveParentOrigin = resolveParentOrigin;
@@ -52,6 +54,54 @@ exports.SiteDataContext = (0, react_1.createContext)({});
 function isRecord(value) {
     return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
 }
+function isDarkColor(color) {
+    if (typeof color !== "string" || !color)
+        return false;
+    const hex = color.trim().toLowerCase();
+    if (!/^#[0-9a-f]{3,6}$/.test(hex))
+        return false;
+    const fullHex = hex.length === 4
+        ? "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3]
+        : hex;
+    const r = Number.parseInt(fullHex.slice(1, 3), 16);
+    const g = Number.parseInt(fullHex.slice(3, 5), 16);
+    const b = Number.parseInt(fullHex.slice(5, 7), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 < 130;
+}
+function syncThemeToDocument(theme) {
+    if (typeof document === "undefined" || !isRecord(theme))
+        return;
+    const rootStyle = document.documentElement.style;
+    if (typeof theme.primaryColor === "string") {
+        rootStyle.setProperty("--brand-primary", theme.primaryColor);
+        rootStyle.setProperty("--brand-color", theme.primaryColor);
+        rootStyle.setProperty("--color-primary", theme.primaryColor);
+        const isPrimaryDark = isDarkColor(theme.primaryColor);
+        const autoBtnText = isPrimaryDark ? "#ffffff" : "#0f172a";
+        rootStyle.setProperty("--button-bg", String(theme.buttonBackgroundColor || theme.primaryColor));
+        rootStyle.setProperty("--button-text", String(theme.buttonTextColor || autoBtnText));
+    }
+    if (typeof theme.secondaryColor === "string") {
+        rootStyle.setProperty("--brand-secondary", theme.secondaryColor);
+    }
+    if (typeof theme.accentColor === "string") {
+        rootStyle.setProperty("--brand-accent", theme.accentColor);
+        rootStyle.setProperty("--color-accent", theme.accentColor);
+    }
+    if (typeof theme.backgroundColor === "string") {
+        const isDark = isDarkColor(theme.backgroundColor);
+        document.documentElement.classList.toggle("dark", isDark);
+        document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");
+        rootStyle.colorScheme = isDark ? "dark" : "light";
+        rootStyle.setProperty("--page-background", theme.backgroundColor);
+        rootStyle.setProperty("--card-bg", isDark ? "#111a2e" : "#ffffff");
+        rootStyle.setProperty("--product-card-bg", isDark ? "#111a2e" : "#ffffff");
+        rootStyle.setProperty("--color-surface", isDark ? "rgba(255,255,255,0.05)" : "#ffffff");
+        rootStyle.setProperty("--color-secondary", isDark ? "rgba(255,255,255,0.08)" : "#f1f5f9");
+        rootStyle.setProperty("--button-secondary-bg", isDark ? "rgba(255,255,255,0.08)" : "#f1f5f9");
+        rootStyle.setProperty("--button-secondary-text", isDark ? "#f8fafc" : "#0f172a");
+    }
+}
 function mergeSiteData(current, incoming, depth = 0, seen = new WeakSet()) {
     if (depth > 50)
         return incoming;
@@ -237,16 +287,7 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
             });
             // Dynamic theme variable injection for instant color updates
             if (isRecord(live.theme)) {
-                const rootStyle = document.documentElement.style;
-                if (typeof live.theme.primaryColor === "string") {
-                    rootStyle.setProperty("--brand-primary", live.theme.primaryColor);
-                }
-                if (typeof live.theme.secondaryColor === "string") {
-                    rootStyle.setProperty("--brand-secondary", live.theme.secondaryColor);
-                }
-                if (typeof live.theme.accentColor === "string") {
-                    rootStyle.setProperty("--brand-accent", live.theme.accentColor);
-                }
+                syncThemeToDocument(live.theme);
             }
         };
         const loadLiveCatalog = async (attempt = 0) => {
@@ -312,6 +353,17 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
             if (!isRecord(incoming))
                 return;
             setSiteData((current) => mergeSiteData(current, incoming));
+            try {
+                const inc = incoming;
+                const theme = (isRecord(inc.template) && isRecord(inc.template.structure))
+                    ? inc.template.structure?.theme
+                    : inc.theme;
+                if (theme)
+                    syncThemeToDocument(theme);
+            }
+            catch {
+                // Best-effort
+            }
             try {
                 window[SITE_DATA_GLOBAL_KEY] =
                     incoming;

package/dist/StickyMobileBar.js

@@ -71,10 +71,10 @@ function StickyMobileBar({ fieldPath, actions, showOnDesktop = false, className
         }
     };
     return ((0, jsx_runtime_1.jsx)("aside", { className: `deneb-sticky-mobile-bar fixed bottom-0 left-0 right-0 z-50 p-2 sm:p-3 transition-transform duration-300 ${showOnDesktop ? 'block' : 'lg:hidden'} ${className}`, "data-preview-field-path": fieldPath, style: {
-            backgroundColor: 'rgba(255, 255, 255, 0.92)',
+            backgroundColor: 'var(--header-bg, var(--card-bg, rgba(255, 255, 255, 0.92)))',
             backdropFilter: 'blur(12px)',
             WebkitBackdropFilter: 'blur(12px)',
-            borderTop: '1px solid rgba(226, 232, 240, 0.8)',
+            borderTop: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))',
             boxShadow: '0 -4px 20px rgba(0, 0, 0, 0.08)',
             ...style,
         }, children: (0, jsx_runtime_1.jsx)("div", { className: "max-w-md mx-auto flex items-center justify-between gap-2", children: resolvedActions.map((action) => {

package/dist/ThemeStyles.d.ts

@@ -15,6 +15,8 @@ export interface TemplateTheme {
     bodyFont?: string;
     borderRadius?: string;
     align?: 'left' | 'center' | 'right';
+    buttonBackgroundColor?: string;
+    buttonTextColor?: string;
     [key: string]: unknown;
 }
 /**

package/dist/ThemeStyles.js

@@ -5,6 +5,7 @@ exports.getCategoryTheme = getCategoryTheme;
 exports.getThemeCssProperties = getThemeCssProperties;
 exports.ThemeStyles = ThemeStyles;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@deneb-ui/core");
 const ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
 /**
  * Pre-configured, high-converting theme presets tailored for different business categories.
@@ -144,15 +145,30 @@ function getThemeCssProperties(theme) {
             }
         }
     }
+    const isDark = (0, core_1.isDarkColor)(theme?.backgroundColor);
+    const bgColor = theme?.backgroundColor || (isDark ? '#0f172a' : '#ffffff');
+    const textColor = theme?.textColor || (isDark ? '#f8fafc' : '#0f172a');
+    const mutedColor = theme?.mutedTextColor || (isDark ? 'rgba(248, 250, 252, 0.7)' : '#64748b');
+    const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : '#e2e8f0';
+    const cardBg = isDark ? '#111a2e' : '#ffffff';
+    const cardBorder = isDark ? 'rgba(255, 255, 255, 0.09)' : '#e2e8f0';
+    const primaryColor = theme?.primaryColor || '#2563eb';
+    const buttonBg = String(theme?.buttonBackgroundColor || primaryColor || '#2563eb');
+    const autoButtonText = (0, core_1.getAutoContrastTextColor)(buttonBg);
+    const buttonText = String(theme?.buttonTextColor || autoButtonText);
+    const buttonSecondaryBg = isDark
+        ? 'rgba(255, 255, 255, 0.08)'
+        : (theme?.secondaryColor && !(0, core_1.isDarkColor)(theme.secondaryColor) ? theme.secondaryColor : '#f1f5f9');
+    const buttonSecondaryText = isDark ? '#f8fafc' : '#0f172a';
     return {
-        '--brand-color': theme?.primaryColor || '#2563eb',
-        '--brand-secondary': theme?.secondaryColor || '#0f172a',
+        '--brand-color': primaryColor,
+        '--brand-secondary': theme?.secondaryColor || (isDark ? '#1e293b' : '#0f172a'),
         '--brand-accent': theme?.accentColor || '#14b8a6',
-        '--page-background': theme?.backgroundColor || '#ffffff',
-        '--page-text': theme?.textColor || '#0f172a',
-        '--heading-color': theme?.headingColor || theme?.secondaryColor || '#0f172a',
-        '--muted-text': theme?.mutedTextColor || '#64748b',
-        '--link-color': theme?.linkColor || theme?.primaryColor || '#2563eb',
+        '--page-background': bgColor,
+        '--page-text': textColor,
+        '--heading-color': theme?.headingColor || (isDark ? '#ffffff' : theme?.secondaryColor || '#0f172a'),
+        '--muted-text': mutedColor,
+        '--link-color': theme?.linkColor || primaryColor,
         '--hero-min-height': theme?.heroMinHeight || '72vh',
         '--section-padding': theme?.sectionPadding || '5rem',
         '--base-size': theme?.baseSize || '16px',
@@ -160,6 +176,35 @@ function getThemeCssProperties(theme) {
         '--body-font': theme?.bodyFont || 'Inter, sans-serif',
         '--border-radius': theme?.borderRadius || '8px',
         '--content-align': theme?.align || 'left',
+        // Canonical color system tokens for light & dark mode harmony
+        '--color-primary': primaryColor,
+        '--color-secondary': buttonSecondaryBg,
+        '--color-accent': theme?.accentColor || '#14b8a6',
+        '--color-text': textColor,
+        '--color-text-muted': mutedColor,
+        '--color-border': borderColor,
+        '--color-surface': isDark ? 'rgba(255,255,255,0.05)' : '#ffffff',
+        '--card-bg': cardBg,
+        '--card-border': cardBorder,
+        '--product-card-bg': cardBg,
+        '--product-card-border': cardBorder,
+        '--tag-bg': isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(241, 245, 249, 0.9)',
+        '--tag-color': mutedColor,
+        '--card-shadow': isDark ? '0 10px 25px -5px rgba(0, 0, 0, 0.4)' : '0 10px 25px -5px rgba(0, 0, 0, 0.05)',
+        '--header-bg': isDark ? 'rgba(15, 23, 42, 0.85)' : 'rgba(255, 255, 255, 0.82)',
+        '--input-bg': isDark ? '#1e293b' : '#ffffff',
+        '--input-border': isDark ? 'rgba(255, 255, 255, 0.15)' : '#cbd5e1',
+        '--input-color': textColor,
+        // Dedicated Button Design Tokens
+        '--button-bg': buttonBg,
+        '--button-text': buttonText,
+        '--button-primary-bg': buttonBg,
+        '--button-primary-text': buttonText,
+        '--button-secondary-bg': buttonSecondaryBg,
+        '--button-secondary-text': buttonSecondaryText,
+        '--button-outline-border': isDark ? 'rgba(255, 255, 255, 0.22)' : 'currentColor',
+        '--button-outline-text': isDark ? '#f8fafc' : textColor,
+        '--button-ghost-text': isDark ? '#f8fafc' : textColor,
         fontFamily: theme?.bodyFont || 'Inter, sans-serif',
         ...customVars,
     };

package/dist/contact/ContactButton.js

@@ -58,22 +58,23 @@ function ContactButton({ type = 'whatsapp', value, href, label, children, fieldP
     };
     const variantStyles = {
         primary: {
-            backgroundColor: 'var(--color-primary, #0f172a)',
-            color: '#ffffff',
+            backgroundColor: 'var(--button-bg, var(--color-primary, #0f172a))',
+            color: 'var(--button-text, #ffffff)',
             boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
         },
         secondary: {
-            backgroundColor: 'var(--color-secondary, #f1f5f9)',
-            color: 'var(--color-text, #0f172a)',
+            backgroundColor: 'var(--button-secondary-bg, var(--color-secondary, #f1f5f9))',
+            color: 'var(--button-secondary-text, var(--color-text, #0f172a))',
+            border: '1px solid var(--button-secondary-border, var(--color-border, transparent))',
         },
         outline: {
             backgroundColor: 'transparent',
-            border: '1px solid var(--color-border, #e2e8f0)',
-            color: 'var(--color-text, #0f172a)',
+            border: '1px solid var(--button-outline-border, var(--color-border, #e2e8f0))',
+            color: 'var(--button-outline-text, var(--color-text, #0f172a))',
         },
         ghost: {
             backgroundColor: 'transparent',
-            color: 'var(--color-text, #0f172a)',
+            color: 'var(--button-ghost-text, var(--color-text, #0f172a))',
         },
         whatsapp: {
             backgroundColor: '#25D366',

package/dist/contact/FloatingContactWidget.js

@@ -58,10 +58,11 @@ function FloatingContactWidget({ fieldPath = 'contact', defaultPhone, defaultWha
         [isRight ? 'right' : 'left']: '0',
         width: 'min(18rem, calc(100vw - 2rem))',
         maxWidth: 'calc(100vw - 2rem)',
-        backgroundColor: '#ffffff',
+        backgroundColor: 'var(--card-bg, var(--color-surface, #ffffff))',
+        color: 'var(--page-text, inherit)',
         borderRadius: '1rem',
         boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-        border: '1px solid rgba(226, 232, 240, 0.8)',
+        border: '1px solid var(--color-border, rgba(226, 232, 240, 0.8))',
         overflow: 'hidden',
         animation: 'deneb-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
     };

package/dist/index.d.ts

@@ -94,3 +94,5 @@ export { PlatformAdditionalPages, AdditionalPagesNav } from './PlatformAdditiona
 export declare const DENEB_FRAMEWORK_NAME = "DENEB UI";
 export declare const DENEB_FRAMEWORK_VERSION = "2.0.0";
 export declare const DENEB_AUTHOR = "Chamika Gayashan & Induranga Kawishwara";
+export { THEME_PALETTES, GLOBAL_FONT_OPTIONS, FONT_PAIRINGS, isDarkColor, getAutoContrastTextColor, toHexColor, normalizeHexColor, parseVisualCustomization, customizationToTheme, mergeVisualCustomizationIntoTheme, generateThemeVariables, } from '@deneb-ui/core';
+export type { ThemePalette, FontPairing, GlobalFontOption, VisualCustomization, VisualCustomizationColors, VisualCustomizationTypography, VisualCustomizationSpacing, VisualCustomizationLayout, VisualCustomizationComponents, VisualCustomizationSectionOverride, VisualCustomizationElementStyle, TemplateThemeShape, } from '@deneb-ui/core';

package/dist/index.js

@@ -19,7 +19,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FAQ = exports.Accordion = exports.Testimonials = exports.TestimonialSection = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.GoogleFeedback = exports.CustomerReviews = exports.ProductDetail = exports.ProductShowcase = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Map = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
-exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = void 0;
+exports.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = void 0;
 __exportStar(require("./PreviewField"), exports);
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
@@ -176,3 +176,15 @@ Object.defineProperty(exports, "AdditionalPagesNav", { enumerable: true, get: fu
 exports.DENEB_FRAMEWORK_NAME = 'DENEB UI';
 exports.DENEB_FRAMEWORK_VERSION = '2.0.0';
 exports.DENEB_AUTHOR = 'Chamika Gayashan & Induranga Kawishwara';
+var core_3 = require("@deneb-ui/core");
+Object.defineProperty(exports, "THEME_PALETTES", { enumerable: true, get: function () { return core_3.THEME_PALETTES; } });
+Object.defineProperty(exports, "GLOBAL_FONT_OPTIONS", { enumerable: true, get: function () { return core_3.GLOBAL_FONT_OPTIONS; } });
+Object.defineProperty(exports, "FONT_PAIRINGS", { enumerable: true, get: function () { return core_3.FONT_PAIRINGS; } });
+Object.defineProperty(exports, "isDarkColor", { enumerable: true, get: function () { return core_3.isDarkColor; } });
+Object.defineProperty(exports, "getAutoContrastTextColor", { enumerable: true, get: function () { return core_3.getAutoContrastTextColor; } });
+Object.defineProperty(exports, "toHexColor", { enumerable: true, get: function () { return core_3.toHexColor; } });
+Object.defineProperty(exports, "normalizeHexColor", { enumerable: true, get: function () { return core_3.normalizeHexColor; } });
+Object.defineProperty(exports, "parseVisualCustomization", { enumerable: true, get: function () { return core_3.parseVisualCustomization; } });
+Object.defineProperty(exports, "customizationToTheme", { enumerable: true, get: function () { return core_3.customizationToTheme; } });
+Object.defineProperty(exports, "mergeVisualCustomizationIntoTheme", { enumerable: true, get: function () { return core_3.mergeVisualCustomizationIntoTheme; } });
+Object.defineProperty(exports, "generateThemeVariables", { enumerable: true, get: function () { return core_3.generateThemeVariables; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.67",
+  "version": "2.0.69",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -50,7 +50,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.67"
+    "@deneb-ui/core": "^2.0.69"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -68,6 +68,10 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./platform-contract": "./platform-contract.json"
+    "./platform-contract": "./platform-contract.json",
+    "./theme": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
   }
 }