@deneb-ui/ui 2.0.94 → 2.0.96

package/dist/EditableProductCard.js

@@ -2,24 +2,71 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableProductCard = EditableProductCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const EditableText_1 = require("./EditableText");
 const EditableImage_1 = require("./EditableImage");
-const EditableText_2 = require("./EditableText");
 const useCart_1 = require("./cart/useCart");
-// Clean inline SVG icons for zero external dependencies
+const productOptions_1 = require("./utils/productOptions");
+const COLOR_HEX_MAP = {
+    black: '#111827',
+    white: '#ffffff',
+    red: '#ef4444',
+    blue: '#3b82f6',
+    green: '#22c55e',
+    yellow: '#eab308',
+    orange: '#f97316',
+    purple: '#a855f7',
+    pink: '#ec4899',
+    navy: '#1e3a8a',
+    grey: '#6b7280',
+    gray: '#6b7280',
+    silver: '#d1d5db',
+    gold: '#f59e0b',
+    brown: '#78350f',
+    beige: '#f5f5dc',
+    maroon: '#800000',
+    olive: '#808000',
+    teal: '#14b8a6',
+    cyan: '#06b6d4',
+    rose: '#f43f5e',
+    emerald: '#10b981',
+    indigo: '#6366f1',
+    violet: '#8b5cf6',
+    sky: '#0ea5e9',
+    amber: '#f59e0b',
+    charcoal: '#374151',
+    cream: '#fffdd0',
+    burgundy: '#800020',
+};
 function WhatsAppIcon({ className = '', style = {} }) {
     return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "currentColor", className: className, style: { display: 'inline-block', verticalAlign: 'middle', flexShrink: 0, ...style }, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 0C5.398 0 .02 5.378.02 12.011c0 2.118.552 4.188 1.6 6.009L.055 24l6.16-1.615a11.97 11.97 0 005.816 1.488h.005c6.632 0 12.01-5.378 12.01-12.012 0-3.21-1.25-6.227-3.52-8.497A11.936 11.936 0 0012.031 0zm-.005 21.84a9.92 9.92 0 01-5.06-1.385l-.363-.216-3.762.986 1.004-3.668-.236-.376a9.924 9.924 0 01-1.52-5.37C2.089 6.52 6.549 2.06 12.026 2.06c2.652 0 5.147 1.033 7.02 2.906A9.878 9.878 0 0121.95 12c0 5.48-4.46 9.84-9.924 9.84zm5.438-7.389c-.298-.15-1.764-.87-2.037-.97-.273-.1-.472-.15-.67.15-.199.3-.77 9.7-.945 1.17-.174.199-.348.224-.646.075-.298-.15-1.258-.464-2.397-1.48a8.91 8.91 0 01-1.657-2.057c-.174-.299-.019-.46.13-.61.135-.133.298-.348.447-.522.15-.174.199-.298.298-.498.1-.199.05-.373-.025-.522-.075-.15-.67-1.618-.92-2.215-.243-.582-.49-.503-.67-.512l-.573-.01c-.198 0-.522.075-.795.373-.273.298-1.043 1.02-1.043 2.488s1.068 2.886 1.217 3.085c.15.199 2.102 3.21 5.093 4.502.711.308 1.267.492 1.7.63.715.228 1.365.196 1.88.119.573-.086 1.764-.72 2.012-1.416.248-.696.248-1.293.174-1.417-.075-.124-.273-.199-.572-.348z" }) }));
 }
 function CartIcon({ className = '', style = {} }) {
     return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, style: { display: 'inline-block', verticalAlign: 'middle', flexShrink: 0, ...style }, "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "21", r: "1" }), (0, jsx_runtime_1.jsx)("circle", { cx: "20", cy: "21", r: "1" }), (0, jsx_runtime_1.jsx)("path", { d: "M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6" })] }));
 }
-/**
- * EditableProductCard is an elite, auto-balancing commerce card featuring
- * Sri Lankan Rupee (LKR) pricing, dual WhatsApp + Add to Cart actions,
- * brand attribution, and strict Fivora visual editing synchronization.
- */
-function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass', imageFallback, as: Component = 'article', currency = 'LKR', showBrand = true, showPrice = true, showDescription = true, showCategory = true, whatsappNumber = '94770000000', storeName, showWhatsAppButton = true, showAddToCartButton = true, whatsappActionLabel = 'Inquire on WhatsApp', addToCartLabel = 'Add to Cart', actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, className = '', style, ...props }) {
+function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant = 'modern-glass', imageFallback, as: Component = 'article', currency = 'LKR', showBrand = true, showPrice = true, showDescription = true, showCategory = true, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, showOptions, allowInteractiveSwatches, storeName, showWhatsAppButton = true, showAddToCartButton = true, whatsappActionLabel = 'Inquire on WhatsApp', addToCartLabel = 'Add to Cart', actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, className = '', style, ...props }) {
+    const product = (productProp || itemProp || {});
+    const whatsappNumber = whatsappPhoneProp || whatsappNumberProp || '94770000000';
     const cart = (0, useCart_1.useOptionalCart)();
+    // Dynamic Options, Measurements & Colors resolution
+    const resolvedOptions = (0, react_1.useMemo)(() => (0, productOptions_1.resolveProductOptions)(product), [product]);
+    const [selectedColor, setSelectedColor] = (0, react_1.useState)('');
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)('');
+    const [colorImage, setColorImage] = (0, react_1.useState)('');
+    // Sync if selection is no longer present in updated product (e.g. during live visual editing)
+    (0, react_1.useEffect)(() => {
+        if (selectedColor && !resolvedOptions.colors.some((c) => c.toLowerCase() === selectedColor.toLowerCase())) {
+            setSelectedColor('');
+            setColorImage('');
+        }
+    }, [product, resolvedOptions.colors]);
+    (0, react_1.useEffect)(() => {
+        if (selectedOption && !resolvedOptions.options.some((o) => o.toLowerCase() === selectedOption.toLowerCase())) {
+            setSelectedOption('');
+        }
+    }, [product, resolvedOptions.options]);
+    // Variant & Dynamic Price Resolution
+    const resolvedPrice = (0, react_1.useMemo)(() => (0, productOptions_1.resolveVariantPrice)(product, selectedOption, selectedColor, currency), [product, selectedOption, selectedColor, currency]);
     const titleKey = 'title' in (product || {}) && !('name' in (product || {}) && product.name)
         ? 'title'
         : ('productName' in (product || {}) && !('name' in (product || {}) && product.name)
@@ -28,17 +75,25 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
     const name = String(product?.name || product?.title || product?.productName || product?.itemTitle || 'Untitled Product');
     const brand = String(product?.brand || '');
     const rawPriceCandidate = product?.price ?? product?.cost ?? product?.amount ?? product?.productPrice;
-    const hasPrice = showPrice && rawPriceCandidate !== undefined && rawPriceCandidate !== null && String(rawPriceCandidate).trim() !== '';
-    const rawPrice = rawPriceCandidate;
-    const priceNum = typeof rawPrice === 'number' ? rawPrice : parseFloat(String(rawPrice || '').replace(/[^0-9.]/g, '')) || 0;
-    const formattedPrice = hasPrice ? (typeof rawPrice === 'string' && rawPrice.includes('LKR') ? rawPrice : (0, useCart_1.formatCurrency)(priceNum, currency)) : '';
+    const basePriceNum = typeof rawPriceCandidate === 'number'
+        ? rawPriceCandidate
+        : parseFloat(String(rawPriceCandidate || '').replace(/[^0-9.]/g, '')) || 0;
+    const baseFormattedPrice = rawPriceCandidate !== undefined && rawPriceCandidate !== null && String(rawPriceCandidate).trim() !== ''
+        ? typeof rawPriceCandidate === 'string' &&
+            (rawPriceCandidate.includes('LKR') || rawPriceCandidate.includes('-') || rawPriceCandidate.includes('–'))
+            ? rawPriceCandidate
+            : (0, useCart_1.formatCurrency)(basePriceNum, currency)
+        : '';
+    const displayPrice = resolvedPrice.formattedPrice || baseFormattedPrice;
+    const hasPrice = showPrice && Boolean(displayPrice && displayPrice.trim() !== '');
     const priceKey = 'cost' in (product || {}) && !('price' in (product || {}) && product.price !== undefined)
         ? 'cost'
         : ('amount' in (product || {}) && !('price' in (product || {}) && product.price !== undefined)
             ? 'amount'
             : 'price');
     const rawOriginalPrice = product?.originalPrice ?? product?.compareAtPrice;
-    const originalPrice = rawOriginalPrice !== undefined && rawOriginalPrice !== null ? String(rawOriginalPrice) : '';
+    const baseOriginalPrice = rawOriginalPrice !== undefined && rawOriginalPrice !== null ? String(rawOriginalPrice) : '';
+    const displayOriginalPrice = resolvedPrice.formattedOriginalPrice || baseOriginalPrice;
     const originalPriceKey = 'compareAtPrice' in (product || {}) && !('originalPrice' in (product || {}) && product.originalPrice !== undefined)
         ? 'compareAtPrice'
         : 'originalPrice';
@@ -50,21 +105,68 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
     const badgeKey = 'tag' in (product || {}) && !('badge' in (product || {}) && product.badge) ? 'tag' : 'badge';
     const badge = String(product?.badge || product?.tag || '');
     const fallbackImage = imageFallback || 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=80';
-    const rawImage = product?.imageUrl || product?.image || product?.photo || product?.thumbnail || product?.productImage || (Array.isArray(product?.gallery) && product.gallery[0]) || (Array.isArray(product?.images) && product.images[0]);
-    const imageUrl = String(rawImage || fallbackImage);
+    const rawImage = product?.imageUrl ||
+        product?.image ||
+        product?.photo ||
+        product?.thumbnail ||
+        product?.productImage ||
+        (Array.isArray(product?.gallery) && product.gallery[0]) ||
+        (Array.isArray(product?.images) && product.images[0]);
+    const baseImageUrl = String(rawImage || fallbackImage);
+    // Active image: clicked color image -> resolved variant image -> product base image
+    const currentImage = colorImage || resolvedPrice.variantImage || baseImageUrl;
     const imageKey = 'image' in (product || {}) && !('imageUrl' in (product || {}) && product.imageUrl)
         ? 'image'
         : ('photo' in (product || {}) && !('imageUrl' in (product || {}) && product.imageUrl)
             ? 'photo'
             : 'imageUrl');
-    // Resolved phone number for WhatsApp
     const resolvedPhone = String(product?.whatsappNumber || whatsappNumber || '94770000000');
     const resolvedWhatsAppText = String(product?.whatsappButtonText || whatsappActionLabel);
     const resolvedAddToCartText = String(product?.addToCartButtonText || addToCartLabel);
     const isHorizontal = cardVariant === 'horizontal';
+    const handleColorClick = (c, e) => {
+        e.stopPropagation();
+        if (selectedColor.toLowerCase() === c.name.toLowerCase()) {
+            setSelectedColor('');
+            setColorImage('');
+        }
+        else {
+            setSelectedColor(c.name);
+            if (c.image) {
+                setColorImage(c.image);
+            }
+            else {
+                const v = product.variants?.find((item) => String(item.color || '').trim().toLowerCase() === c.name.toLowerCase() &&
+                    (item.image || item.imageUrl || item.photo));
+                if (v) {
+                    setColorImage(v.image || v.imageUrl || v.photo);
+                }
+                else {
+                    setColorImage('');
+                }
+            }
+        }
+    };
+    const handleOptionClick = (opt, e) => {
+        e.stopPropagation();
+        if (selectedOption.toLowerCase() === opt.toLowerCase()) {
+            setSelectedOption('');
+        }
+        else {
+            setSelectedOption(opt);
+        }
+    };
     const handleWhatsAppClick = (e) => {
         e.stopPropagation();
-        const url = (0, useCart_1.getProductWhatsAppUrl)({ ...product, name, brand, price: formattedPrice }, resolvedPhone, { storeName, currency });
+        const url = (0, useCart_1.getProductWhatsAppUrl)({
+            ...product,
+            name,
+            brand,
+            price: displayPrice,
+            size: selectedOption || undefined,
+            color: selectedColor || undefined,
+            option: selectedOption || undefined,
+        }, resolvedPhone, { storeName, currency });
         if (onWhatsAppClick) {
             onWhatsAppClick(product, url);
         }
@@ -74,13 +176,19 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
     };
     const handleAddToCartClick = (e) => {
         e.stopPropagation();
+        const effectivePrice = resolvedPrice.numericPrice || basePriceNum;
+        const variantSuffix = [selectedColor, selectedOption].filter(Boolean).join('-');
         const itemToAdd = {
-            id: String(product?.id || name.toLowerCase().replace(/\s+/g, '-')),
+            id: String(product?.id || name.toLowerCase().replace(/\s+/g, '-')) +
+                (variantSuffix ? `-${variantSuffix}` : ''),
             name,
             brand,
-            price: priceNum,
-            image: imageUrl,
+            price: effectivePrice,
+            image: currentImage,
             quantity: 1,
+            size: selectedOption || undefined,
+            color: selectedColor || undefined,
+            option: selectedOption || undefined,
         };
         if (cart) {
             cart.addItem(itemToAdd);
@@ -138,7 +246,7 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                     overflow: 'hidden',
                     width: isHorizontal ? '40%' : '100%',
                     flexShrink: 0,
-                }, children: [(0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: imageUrl, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } }), badge && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: '10px', left: '10px', zIndex: 10 }, children: (0, jsx_runtime_1.jsx)(EditableText_2.EditableBadge, { id: `${itemPath}.${badgeKey}`, "data-preview-field-path": `${itemPath}.${badgeKey}`, defaultValue: badge, badgeVariant: "primary" }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: [(0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, "data-preview-field-path": `${itemPath}.${imageKey}`, src: currentImage, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } }), badge && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: '10px', left: '10px', zIndex: 10 }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableBadge, { id: `${itemPath}.${badgeKey}`, "data-preview-field-path": `${itemPath}.${badgeKey}`, defaultValue: badge, badgeVariant: "primary" }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     padding: '1.25rem',
                     display: 'flex',
                     flexDirection: 'column',
@@ -170,28 +278,69 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                     fontSize: '0.875rem',
                                     color: 'var(--muted-text, #94a3b8)',
                                     lineHeight: 1.5,
-                                    marginBottom: '0.75rem',
+                                    marginBottom: '0.625rem',
                                     display: '-webkit-box',
                                     WebkitLineClamp: 2,
                                     WebkitBoxOrient: 'vertical',
                                     overflow: 'hidden',
-                                } })) : null] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                } })) : null, resolvedOptions.detailedColors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '0.5rem', marginBottom: '0.375rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.25rem' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.7rem', fontWeight: 600, color: 'var(--muted-text, #94a3b8)', textTransform: 'uppercase', letterSpacing: '0.04em' }, children: product.colorsLabel ? String(product.colorsLabel) : 'Color' }), selectedColor ? ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.72rem', fontWeight: 700, color: 'var(--brand-accent, #a3e635)' }, children: selectedColor })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '0.375rem', alignItems: 'center' }, children: resolvedOptions.detailedColors.map((c) => {
+                                            const isSelected = selectedColor.toLowerCase() === c.name.toLowerCase();
+                                            const colorHex = c.hex || COLOR_HEX_MAP[c.name.toLowerCase()] || '#64748b';
+                                            const isLight = colorHex.toLowerCase() === '#ffffff' || colorHex.toLowerCase() === '#fff' || colorHex.toLowerCase() === '#fffdd0' || colorHex.toLowerCase() === '#f5f5dc';
+                                            return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => handleColorClick(c, e), title: c.name, "aria-label": `Select color ${c.name}`, style: {
+                                                    width: '20px',
+                                                    height: '20px',
+                                                    borderRadius: '9999px',
+                                                    backgroundColor: colorHex,
+                                                    border: isLight ? '1px solid #cbd5e1' : '1px solid rgba(255, 255, 255, 0.2)',
+                                                    outline: isSelected ? '2px solid var(--brand-accent, #a3e635)' : 'none',
+                                                    outlineOffset: '2px',
+                                                    cursor: 'pointer',
+                                                    padding: 0,
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    transition: 'transform 0.15s ease, outline 0.15s ease',
+                                                    transform: isSelected ? 'scale(1.15)' : 'scale(1)',
+                                                    boxShadow: isSelected ? '0 0 8px rgba(163, 230, 53, 0.4)' : '0 1px 2px rgba(0,0,0,0.1)',
+                                                } }, c.name));
+                                        }) })] })), resolvedOptions.options.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: { marginTop: '0.375rem', marginBottom: '0.5rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.25rem' }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.7rem', fontWeight: 600, color: 'var(--muted-text, #94a3b8)', textTransform: 'uppercase', letterSpacing: '0.04em' }, children: product.sizesLabel || product.optionsLabel ? String(product.sizesLabel || product.optionsLabel) : resolvedOptions.optionsLabel }), selectedOption ? ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '0.72rem', fontWeight: 700, color: 'var(--brand-accent, #a3e635)' }, children: resolvedOptions.formatSelectedDisplay(selectedOption) })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '0.35rem' }, children: resolvedOptions.options.map((opt) => {
+                                            const isSelected = selectedOption.toLowerCase() === opt.toLowerCase();
+                                            return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: (e) => handleOptionClick(opt, e), style: {
+                                                    padding: '2px 8px',
+                                                    borderRadius: '6px',
+                                                    fontSize: '0.72rem',
+                                                    fontWeight: isSelected ? 700 : 500,
+                                                    cursor: 'pointer',
+                                                    border: isSelected
+                                                        ? '1px solid var(--brand-accent, #a3e635)'
+                                                        : '1px solid var(--card-border, rgba(226, 232, 240, 0.4))',
+                                                    backgroundColor: isSelected
+                                                        ? 'var(--brand-accent, #a3e635)'
+                                                        : 'var(--tag-bg, rgba(255, 255, 255, 0.08))',
+                                                    color: isSelected
+                                                        ? '#020617'
+                                                        : 'var(--muted-text, #e2e8f0)',
+                                                    transition: 'all 0.15s ease',
+                                                    transform: isSelected ? 'scale(1.03)' : 'scale(1)',
+                                                }, children: resolvedOptions.formatOption(opt) }, opt));
+                                        }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             marginTop: '0.75rem',
                             paddingTop: '0.75rem',
                             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',
-                        }, children: [hasPrice ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'baseline', gap: '0.5rem', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.${priceKey}`, "data-preview-field-path": `${itemPath}.${priceKey}`, defaultValue: formattedPrice, style: {
-                                            fontSize: '1.3rem',
+                        }, children: [hasPrice ? ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'baseline', gap: '0.5rem', flexWrap: 'wrap' }, children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.${priceKey}`, "data-preview-field-path": `${itemPath}.${priceKey}`, defaultValue: displayPrice, style: {
+                                            fontSize: '1.25rem',
                                             fontWeight: 800,
                                             color: 'var(--brand-color, #ffffff)',
                                             letterSpacing: '-0.02em',
-                                        } }), originalPrice ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.${originalPriceKey}`, "data-preview-field-path": `${itemPath}.${originalPriceKey}`, defaultValue: originalPrice, style: {
+                                        } }), displayOriginalPrice ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.${originalPriceKey}`, "data-preview-field-path": `${itemPath}.${originalPriceKey}`, defaultValue: displayOriginalPrice, style: {
                                             fontSize: '0.875rem',
                                             textDecoration: 'line-through',
                                             color: 'var(--muted-text, #94a3b8)',
-                                        } })) : null, product?.measurement ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.measurement`, "data-preview-field-path": `${itemPath}.measurement`, defaultValue: `/ ${String(product.measurement)}`, style: {
+                                        } })) : null, product?.measurement && !selectedOption ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.measurement`, "data-preview-field-path": `${itemPath}.measurement`, defaultValue: `/ ${String(product.measurement)}`, style: {
                                             fontSize: '0.8rem',
                                             fontWeight: 500,
                                             color: 'var(--muted-text, #64748b)',

package/dist/EditableProductDetail.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MeasurementUnit } from './utils/productOptions';
+import { MeasurementUnit, ProductVariant } from './utils/productOptions';
 export interface ProductDetailItem {
     id?: string | number;
     name?: string;
@@ -45,6 +45,13 @@ export interface ProductDetailItem {
     }> | string;
     colorsText?: string;
     colorsLabel?: string;
+    variants?: ProductVariant[];
+    variantPrices?: Record<string, number | string>;
+    minPrice?: string | number;
+    maxPrice?: string | number;
+    priceMin?: string | number;
+    priceMax?: string | number;
+    priceRange?: [number | string, number | string] | string;
     [key: string]: unknown;
 }
 export interface EditableProductDetailProps extends React.HTMLAttributes<HTMLElement> {
@@ -88,12 +95,10 @@ export interface EditableProductDetailProps extends React.HTMLAttributes<HTMLEle
  * - Truly Adaptive: Seamlessly renders shoes/apparel (sizes), liquids/cosmetics (ml, L),
  *   food/groceries (g, kg), single-dimension items, and simple products without variants.
  * - Multi-image gallery with active thumbnail selector and basePath resolution.
- * - Dynamic color swatches with optional color-to-image auto-switching.
+ * - Dynamic color swatches with optional color-to-image auto-switching and variant pricing.
+ * - Fixed prices vs price ranges (e.g., LKR 2,500 – LKR 4,500).
  * - Floating badges with conditional rendering (zero hidden marker contract violations).
  * - Live synchronized field paths for Title, Price, Description, CTAs, and Policies.
- * - Direct WhatsApp Click-to-Order integration with dynamic variant snippets.
- * - Context-aware specifications and Shipping & Returns tabs.
- *
- * Created by Chamika Gayashan & Induranga Kawishwara
+ * - Direct WhatsApp order link with dynamic variant & option injection.
  */
 export declare function EditableProductDetail({ sectionPath, product, sizes, colors, onAddToSelection, whatsappUrl, className, style, ...props }: EditableProductDetailProps): React.JSX.Element;

package/dist/EditableProductDetail.js

@@ -14,13 +14,11 @@ const urls_1 = require("./utils/urls");
  * - Truly Adaptive: Seamlessly renders shoes/apparel (sizes), liquids/cosmetics (ml, L),
  *   food/groceries (g, kg), single-dimension items, and simple products without variants.
  * - Multi-image gallery with active thumbnail selector and basePath resolution.
- * - Dynamic color swatches with optional color-to-image auto-switching.
+ * - Dynamic color swatches with optional color-to-image auto-switching and variant pricing.
+ * - Fixed prices vs price ranges (e.g., LKR 2,500 – LKR 4,500).
  * - Floating badges with conditional rendering (zero hidden marker contract violations).
  * - Live synchronized field paths for Title, Price, Description, CTAs, and Policies.
- * - Direct WhatsApp Click-to-Order integration with dynamic variant snippets.
- * - Context-aware specifications and Shipping & Returns tabs.
- *
- * Created by Chamika Gayashan & Induranga Kawishwara
+ * - Direct WhatsApp order link with dynamic variant & option injection.
  */
 function EditableProductDetail({ sectionPath = 'product', product, sizes, colors, onAddToSelection, whatsappUrl, className = '', style, ...props }) {
     // 1. Resolve Images: Support gallery, images array, and single image fields
@@ -100,16 +98,33 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes, colors
             setSelectedColor('');
         }
     }, [effectiveColors, selectedColor]);
+    // Dynamic Price & Variant Resolution
+    const resolvedPrice = (0, react_1.useMemo)(() => (0, productOptions_1.resolveVariantPrice)(product, selectedSize, selectedColor), [product, selectedSize, selectedColor]);
+    // Sync variant image if variant has a dedicated image
+    (0, react_1.useEffect)(() => {
+        if (resolvedPrice.variantImage && resolvedPrice.variantImage !== activeImage) {
+            setActiveImage(resolvedPrice.variantImage);
+        }
+    }, [resolvedPrice.variantImage]);
     const handleSelectColor = (c) => {
         setSelectedColor(c.name);
         if (c.image) {
             setActiveImage(c.image);
         }
+        else {
+            const v = product.variants?.find((item) => String(item.color || '').trim().toLowerCase() === c.name.toLowerCase() &&
+                (item.image || item.imageUrl || item.photo));
+            if (v) {
+                setActiveImage(v.image || v.imageUrl || v.photo);
+            }
+        }
     };
     const name = String(product.name || product.title || product.productName || product.itemTitle || 'Product Title');
     const rawPriceCandidate = product.price ?? product.cost ?? product.amount ?? product.productPrice;
-    const price = rawPriceCandidate !== undefined && rawPriceCandidate !== null ? String(rawPriceCandidate) : 'LKR 0';
+    const basePrice = rawPriceCandidate !== undefined && rawPriceCandidate !== null ? String(rawPriceCandidate) : 'LKR 0';
     const originalPrice = product.originalPrice ?? product.compareAtPrice;
+    const displayPrice = resolvedPrice.formattedPrice || basePrice;
+    const displayOriginalPrice = resolvedPrice.formattedOriginalPrice || (originalPrice ? String(originalPrice) : undefined);
     const isAvailable = product.isAvailable !== false;
     const description = String(product.description || '');
     const badge = String(product.badge || '');
@@ -120,7 +135,7 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes, colors
     const shippingReturns = String(product.shippingReturns || '14-day hassle-free exchanges for unworn items in original packaging.');
     const orderSnippet = resolved.formatOrderSnippet(effectiveOptions.length > 0 ? selectedSize : undefined, effectiveColors.length > 0 ? selectedColor : undefined);
     const resolvedWhatsappUrl = whatsappUrl || (product.whatsappNumber
-        ? (0, urls_1.createWhatsAppUrl)(product.whatsappNumber, product.whatsappMessage || `Hi, I would like to order ${name}${orderSnippet ? ` ${orderSnippet}` : ''} - ${price}`)
+        ? (0, urls_1.createWhatsAppUrl)(product.whatsappNumber, product.whatsappMessage || `Hi, I would like to order ${name}${orderSnippet ? ` ${orderSnippet}` : ''} - ${displayPrice}`)
         : '');
     // Dynamic Specs: Use explicit specs if provided, else fallback to available product metadata
     const effectiveSpecs = (0, react_1.useMemo)(() => {
@@ -144,9 +159,9 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes, colors
                                     ? 'border-lime-400 scale-98 shadow-md ring-2 ring-lime-400/20'
                                     : 'border-slate-800/80 opacity-60 hover:opacity-100 hover:border-slate-700'}`, children: (0, jsx_runtime_1.jsx)("img", { src: (0, utils_1.withBasePath)(img), alt: "", className: "w-full h-full object-contain" }) }, idx))) })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 aspect-square rounded-3xl bg-gradient-to-b from-slate-900/50 to-slate-950/80 border border-slate-800/80 p-8 flex items-center justify-center overflow-hidden group", children: [badge && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.badge`, className: "absolute top-6 left-6 z-10 px-3.5 py-1 text-xs font-black tracking-wider uppercase rounded-full bg-lime-400 text-slate-950 shadow-lg", children: badge })), (0, jsx_runtime_1.jsx)("img", { "data-preview-field-path": `${sectionPath}.featuredImage`, src: (0, utils_1.withBasePath)(activeImage), alt: name, className: "w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-5 flex flex-col justify-between", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { "data-preview-field-path": `${sectionPath}.name`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: name }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.isAvailable`, className: `mt-3 inline-flex rounded-full px-3 py-1 text-xs font-bold ${isAvailable
                                     ? 'bg-emerald-500/15 text-emerald-300'
-                                    : 'bg-rose-500/15 text-rose-300'}`, children: isAvailable ? 'In Stock' : 'Out of Stock' }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-baseline gap-3", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.price`, className: "text-3xl font-black text-lime-400 tracking-tight", children: price }), originalPrice ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-medium text-slate-500 line-through", children: String(originalPrice) })) : null] }), description && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.description`, className: "mt-6 text-base text-slate-300 leading-relaxed", children: description })), effectiveColors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: ["Color \u2014 ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: selectedColor })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-3", children: effectiveColors.map((c) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleSelectColor(c), className: `w-9 h-9 rounded-full border-2 transition-all p-0.5 relative flex items-center justify-center ${selectedColor === c.name
+                                    : 'bg-rose-500/15 text-rose-300'}`, children: isAvailable ? 'In Stock' : 'Out of Stock' }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-baseline gap-3", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.price`, className: "text-3xl font-black text-lime-400 tracking-tight", children: displayPrice }), displayOriginalPrice ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-medium text-slate-500 line-through", children: String(displayOriginalPrice) })) : null] }), description && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.description`, className: "mt-6 text-base text-slate-300 leading-relaxed", children: description })), effectiveColors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: ["Color \u2014 ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: selectedColor })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-3", children: effectiveColors.map((c) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => handleSelectColor(c), className: `w-9 h-9 rounded-full border-2 transition-all p-0.5 relative flex items-center justify-center ${selectedColor === c.name
                                                 ? 'border-lime-400 ring-2 ring-lime-400/30 scale-105'
                                                 : 'border-slate-700 hover:border-slate-500'}`, style: { backgroundColor: c.hex || '#334155' }, title: c.name, "aria-label": c.name, children: !c.hex && ((0, jsx_runtime_1.jsx)("span", { className: "text-[9px] font-bold text-white uppercase px-1 truncate", children: c.name.slice(0, 3) })) }, c.name))) })] })), effectiveOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.${product.optionsLabel ? 'optionsLabel' : 'sizesLabel'}`, className: "block text-xs font-bold uppercase tracking-wider text-slate-400", children: effectiveOptionsLabel }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-semibold text-slate-300", children: resolved.formatSelectedDisplay(selectedSize) })] }), (0, jsx_runtime_1.jsx)("div", { className: "deneb-product-detail-sizes flex flex-wrap gap-2.5", children: effectiveOptions.map((s) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedSize(s), className: `py-2.5 px-3.5 min-w-[48px] rounded-xl font-bold text-sm transition-all duration-150 text-center ${selectedSize === s
                                                 ? 'bg-white text-slate-950 shadow-md font-extrabold scale-102 ring-2 ring-white/20'
-                                                : 'bg-slate-900/60 text-slate-300 border border-slate-800 hover:bg-slate-800 hover:text-white'}`, children: resolved.formatOption(s) }, s))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: !isAvailable, onClick: () => onAddToSelection?.(product, selectedSize || undefined, selectedColor || undefined), className: "w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-wider bg-lime-400 text-slate-950 hover:bg-lime-300 active:scale-98 transition-all duration-150 shadow-lg shadow-lime-400/20 flex items-center justify-center gap-2 disabled:cursor-not-allowed disabled:bg-slate-700 disabled:text-slate-300 disabled:shadow-none", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.addToSelectionLabel`, children: isAvailable ? addToSelectionLabel : 'Out of Stock' }) }), isAvailable && resolvedWhatsappUrl && ((0, jsx_runtime_1.jsxs)("a", { href: resolvedWhatsappUrl, target: "_blank", rel: "noopener noreferrer", className: "w-full py-3.5 px-6 rounded-2xl font-bold text-sm bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30 border border-emerald-500/30 transition-all duration-150 flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.472 14.382c-.301-.15-1.78-.879-2.056-.98-.276-.1-.477-.15-.678.15-.201.3-.78 0.98-.956 1.18-.175.2-.351.226-.652.075-.301-.15-1.272-.469-2.423-1.496-.896-.799-1.501-1.787-1.677-2.088-.175-.301-.019-.464.132-.614.136-.135.301-.351.452-.527.15-.176.201-.301.301-.502.1-.2.05-.376-.025-.527-.075-.15-.678-1.635-.93-2.242-.244-.592-.493-.512-.678-.521-.175-.009-.376-.009-.577-.009-.201 0-.527.075-.803.376-.276.301-1.054 1.03-1.054 2.512 0 1.482 1.079 2.912 1.23 3.113.15.201 2.124 3.243 5.145 4.548.718.311 1.279.497 1.716.636.722.23 1.378.197 1.898.12.579-.087 1.78-.728 2.03-1.431.251-.703.251-1.305.176-1.431-.075-.126-.276-.201-.577-.351zM12.004 2C6.48 2 2 6.48 2 12c0 1.82.49 3.52 1.34 4.99L2 22l5.14-1.35c1.42.78 3.04 1.22 4.86 1.22 5.52 0 10-4.48 10-10S17.524 2 12.004 2z" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Order Directly via WhatsApp" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-10 border-t border-slate-800/80 pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6 border-b border-slate-800 pb-3 mb-4", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('specs'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'specs' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.specsTitle`, children: specsTitle }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('shipping'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'shipping' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.shippingTitle`, children: shippingTitle }) })] }), activeTab === 'specs' ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: effectiveSpecs.length > 0 ? (effectiveSpecs.map((spec, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs py-1 border-b border-slate-900", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-400 font-medium", children: spec.label }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: spec.value })] }, i)))) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-400 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Status" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: isAvailable ? 'Verified Authentic & In Stock' : 'Out of Stock' })] }), product.category && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Category" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: String(product.category) })] }))] })) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-300 space-y-3 leading-relaxed", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingSummary`, children: shippingSummary }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingReturns`, className: "text-slate-400", children: shippingReturns })] }))] })] }) })] }) }));
+                                                : 'bg-slate-900/60 text-slate-300 border border-slate-800 hover:bg-slate-800 hover:text-white'}`, children: resolved.formatOption(s) }, s))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", disabled: !isAvailable, onClick: () => onAddToSelection?.({ ...product, price: resolvedPrice.numericPrice || product.price }, selectedSize || undefined, selectedColor || undefined), className: "w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-wider bg-lime-400 text-slate-950 hover:bg-lime-300 active:scale-98 transition-all duration-150 shadow-lg shadow-lime-400/20 flex items-center justify-center gap-2 disabled:cursor-not-allowed disabled:bg-slate-700 disabled:text-slate-300 disabled:shadow-none", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.addToSelectionLabel`, children: isAvailable ? addToSelectionLabel : 'Out of Stock' }) }), isAvailable && resolvedWhatsappUrl && ((0, jsx_runtime_1.jsxs)("a", { href: resolvedWhatsappUrl, target: "_blank", rel: "noopener noreferrer", className: "w-full py-3.5 px-6 rounded-2xl font-bold text-sm bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30 border border-emerald-500/30 transition-all duration-150 flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.472 14.382c-.301-.15-1.78-.879-2.056-.98-.276-.1-.477-.15-.678.15-.201.3-.78 0.98-.956 1.18-.175.2-.351.226-.652.075-.301-.15-1.272-.469-2.423-1.496-.896-.799-1.501-1.787-1.677-2.088-.175-.301-.019-.464.132-.614.136-.135.301-.351.452-.527.15-.176.201-.301.301-.502.1-.2.05-.376-.025-.527-.075-.15-.678-1.635-.93-2.242-.244-.592-.493-.512-.678-.521-.175-.009-.376-.009-.577-.009-.201 0-.527.075-.803.376-.276.301-1.054 1.03-1.054 2.512 0 1.482 1.079 2.912 1.23 3.113.15.201 2.124 3.243 5.145 4.548.718.311 1.279.497 1.716.636.722.23 1.378.197 1.898.12.579-.087 1.78-.728 2.03-1.431.251-.703.251-1.305.176-1.431-.075-.126-.276-.201-.577-.351zM12.004 2C6.48 2 2 6.48 2 12c0 1.82.49 3.52 1.34 4.99L2 22l5.14-1.35c1.42.78 3.04 1.22 4.86 1.22 5.52 0 10-4.48 10-10S17.524 2 12.004 2z" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Order Directly via WhatsApp" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-10 border-t border-slate-800/80 pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6 border-b border-slate-800 pb-3 mb-4", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('specs'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'specs' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.specsTitle`, children: specsTitle }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('shipping'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'shipping' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.shippingTitle`, children: shippingTitle }) })] }), activeTab === 'specs' ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: effectiveSpecs.length > 0 ? (effectiveSpecs.map((spec, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs py-1 border-b border-slate-900", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-400 font-medium", children: spec.label }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: spec.value })] }, i)))) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-400 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Status" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: isAvailable ? 'Verified Authentic & In Stock' : 'Out of Stock' })] }), product.category && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Category" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: String(product.category) })] }))] })) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-300 space-y-3 leading-relaxed", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingSummary`, children: shippingSummary }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingReturns`, className: "text-slate-400", children: shippingReturns })] }))] })] }) })] }) }));
 }

package/dist/EditableProductGrid.d.ts

@@ -111,6 +111,9 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
      * Total products count override when backend performs server-side pagination slicing.
      */
     totalProducts?: number;
+    currency?: string;
+    whatsappNumber?: string;
+    whatsappPhone?: string;
     className?: string;
 }
 /**
@@ -121,6 +124,6 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-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 function EditableProductGrid({ currency, whatsappNumber, whatsappPhone, 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;
 export type ProductGridItem = ProductItem;

package/dist/EditableProductGrid.js

@@ -14,7 +14,7 @@ const SiteDataProvider_1 = require("./SiteDataProvider");
  *
  * 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', 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 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 }) {
     const sectionRef = (0, react_1.useRef)(null);
     const siteData = (0, SiteDataProvider_1.useSiteData)();
     const siteApi = (0, SiteDataProvider_1.useSiteApi)();
@@ -203,7 +203,7 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
         return `${mClass} ${tClass} ${dClass}`;
     }, [columns]);
     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) => {
+    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();
                             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'
@@ -226,7 +226,7 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
                     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, 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));
+                    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

package/dist/EditableProductShowcase.js

@@ -180,7 +180,7 @@ function EditableProductShowcase({ sectionPath = 'home', listPath = 'featuredPho
             window.open(url, '_blank', 'noopener,noreferrer');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)("section", { id: "shop", className: `relative py-20 sm:py-28 overflow-clip bg-white ${className}`, ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute top-10 right-10 h-96 w-96 rounded-full bg-cyan-500/10 blur-[120px]" }), (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute bottom-10 left-10 h-96 w-96 rounded-full bg-blue-600/10 blur-[120px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "container relative z-10 mx-auto px-4 sm:px-6 lg:px-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-12 sm:mb-16 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl", children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2 rounded-full border border-cyan-400/30 bg-cyan-500/10 px-3.5 py-1 text-xs font-semibold uppercase tracking-wider text-cyan-700 mb-4", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.featuredProductsBadge`, "data-preview-style-target": `${sectionPath}.featuredProductsBadge`, "data-preview-style-type": "text", children: resolvedBadge }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-3xl sm:text-5xl font-extrabold text-zinc-950 tracking-tight", "data-preview-field-path": `${sectionPath}.featuredProductsHeading`, "data-preview-style-target": `${sectionPath}.featuredProductsHeading`, "data-preview-style-type": "text", children: resolvedHeading }), (0, jsx_runtime_1.jsx)("p", { className: "mt-3 text-sm sm:text-base text-zinc-600 leading-relaxed", "data-preview-field-path": `${sectionPath}.featuredProductsDescription`, "data-preview-style-target": `${sectionPath}.featuredProductsDescription`, "data-preview-style-type": "text", children: resolvedDescription })] }), resolvedCategories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-1.5 p-1 rounded-2xl border border-black/[0.08] bg-black/[0.02] backdrop-blur-md self-start md:self-auto", children: resolvedCategories.map((filter) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "category-filter-pill", onClick: () => setSelectedFilter(filter), className: `rounded-xl px-3.5 sm:px-4 py-1.5 sm:py-2 text-xs font-semibold transition-all duration-200 cursor-pointer ${selectedFilter === filter
+    return ((0, jsx_runtime_1.jsxs)("section", { id: props.id || "featured-products", "data-design-section": "featured-products", "data-section-id": "featured-products", className: `relative py-20 sm:py-28 overflow-clip bg-white ${className}`, ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute top-10 right-10 h-96 w-96 rounded-full bg-cyan-500/10 blur-[120px]" }), (0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute bottom-10 left-10 h-96 w-96 rounded-full bg-blue-600/10 blur-[120px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "container relative z-10 mx-auto px-4 sm:px-6 lg:px-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-12 sm:mb-16 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "max-w-2xl", children: [(0, jsx_runtime_1.jsx)("div", { className: "inline-flex items-center gap-2 rounded-full border border-cyan-400/30 bg-cyan-500/10 px-3.5 py-1 text-xs font-semibold uppercase tracking-wider text-cyan-700 mb-4", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.featuredProductsBadge`, "data-preview-style-target": `${sectionPath}.featuredProductsBadge`, "data-preview-style-type": "text", children: resolvedBadge }) }), (0, jsx_runtime_1.jsx)("h2", { className: "text-3xl sm:text-5xl font-extrabold text-zinc-950 tracking-tight", "data-preview-field-path": `${sectionPath}.featuredProductsHeading`, "data-preview-style-target": `${sectionPath}.featuredProductsHeading`, "data-preview-style-type": "text", children: resolvedHeading }), (0, jsx_runtime_1.jsx)("p", { className: "mt-3 text-sm sm:text-base text-zinc-600 leading-relaxed", "data-preview-field-path": `${sectionPath}.featuredProductsDescription`, "data-preview-style-target": `${sectionPath}.featuredProductsDescription`, "data-preview-style-type": "text", children: resolvedDescription })] }), resolvedCategories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-1.5 p-1 rounded-2xl border border-black/[0.08] bg-black/[0.02] backdrop-blur-md self-start md:self-auto", children: resolvedCategories.map((filter) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "category-filter-pill", onClick: () => setSelectedFilter(filter), className: `rounded-xl px-3.5 sm:px-4 py-1.5 sm:py-2 text-xs font-semibold transition-all duration-200 cursor-pointer ${selectedFilter === filter
                                         ? 'bg-zinc-950 text-white shadow-md'
                                         : 'text-zinc-600 hover:text-black hover:bg-black/5'}`, children: filter }, filter))) }))] }), (0, jsx_runtime_1.jsx)("ul", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 list-none p-0 m-0", "data-preview-list-path": `${sectionPath}.${listPath}`, "data-preview-style-target": `${sectionPath}.${listPath}.grid`, "data-preview-style-type": "grid", children: filteredProducts.map((phone) => {
                             const idx = phone._index;

package/dist/EditableSection.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-import { BoxSpacing } from './EditableBox';
+import React from "react";
+import { BoxSpacing } from "./EditableBox";
 export interface EditableSectionProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
     /**
-     * Required fivora design section identifier (e.g. 'home-hero', 'home-introduction', 'home-features').
-     * Automatically sets `data-design-section` to satisfy strict Fivora validator rules.
+     * Required fivora design section identifier (e.g. "home-hero", "home-features", "products", "testimonials").
+     * Automatically sets `data-design-section`, `data-section-id`, and `id` for full editor targeting.
      */
     name: string;
     /**
-     * Vertical section padding ('none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' or custom CSS).
+     * Vertical section padding ("none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" or custom CSS).
      */
     padding?: BoxSpacing;
     /**
@@ -27,9 +27,34 @@ export interface EditableSectionProps extends React.HTMLAttributes<HTMLElement>
      * Section border style.
      */
     border?: string | boolean;
+    /**
+     * Content alignment: "left" | "center" | "right".
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Quick toggle to center all content and text horizontally.
+     */
+    center?: boolean;
+    /**
+     * Whether this section is hidden or deleted.
+     */
+    hidden?: boolean;
+    /**
+     * Visual flexbox order for section reordering (e.g. 1, 2, 3).
+     */
+    order?: number | string;
+    /**
+     * Whether to wrap children in a responsive inner container.
+     */
+    container?: boolean;
+    /**
+     * Class name for the inner container if container=true.
+     */
+    containerClassName?: string;
 }
 /**
  * EditableSection standardizes section spacing and automatically applies the required
- * `data-design-section` marker for 100% fivora contract compliance.
+ * `data-design-section` and `data-section-id` markers for 100% fivora contract compliance,
+ * with first-class support for section deletion/hiding and instant centering.
  */
-export declare function EditableSection({ as: Component, name, padding, bg, color, maxWidth, border, className, style, children, ...props }: EditableSectionProps): React.JSX.Element;
+export declare function EditableSection({ as: Component, name, padding, bg, color, maxWidth, border, align, center, hidden, order, container, containerClassName, className, style, id, children, ...props }: EditableSectionProps): React.JSX.Element;