@deneb-ui/ui 2.0.107 → 2.0.109

package/dist/EditableCartDrawer.js

@@ -51,7 +51,9 @@ function EditableCartDrawer({ basePath = 'cart', whatsappNumber = '94770000000',
     const progressPercent = freeShippingThreshold
         ? Math.min(100, Math.round((subtotal / freeShippingThreshold) * 100))
         : 100;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-cart-drawer-root fixed inset-0 z-50 flex justify-end ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity", onClick: closeCart, "data-preview-static": "cart-backdrop", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("aside", { className: "relative z-10 flex h-full w-full max-w-md flex-col bg-neutral-900 text-white shadow-2xl transition-transform duration-300 ease-out border-l border-neutral-800", "aria-label": "Shopping Cart Drawer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-neutral-800 px-6 py-5", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold tracking-tight text-white", "data-preview-field-path": fieldPath('title'), children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400 mt-0.5", "data-preview-field-path": fieldPath('subtitle'), children: subtitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [items.length > 0 && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clearCart, className: "text-xs text-neutral-400 hover:text-red-400 transition-colors px-2 py-1 rounded", "data-preview-static": "cart-clear-btn", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('clearCartText'), children: clearCartText }) })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: closeCart, className: "rounded-full p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors", "data-preview-static": "cart-close-btn", "aria-label": "Close cart", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", 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" }) }) })] })] }), freeShippingThreshold && ((0, jsx_runtime_1.jsxs)("div", { className: "border-b border-neutral-800 bg-neutral-950/50 px-6 py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-xs text-neutral-400 mb-1.5", children: [(0, jsx_runtime_1.jsx)("span", { children: subtotal >= freeShippingThreshold ? ((0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-emerald-400", children: "\uD83C\uDF89 You unlocked free shipping!" })) : ((0, jsx_runtime_1.jsxs)("span", { children: ["Add ", (0, jsx_runtime_1.jsxs)("strong", { className: "text-white", children: [currency, (freeShippingThreshold - subtotal).toFixed(2)] }), " more for free shipping"] })) }), (0, jsx_runtime_1.jsxs)("span", { children: [progressPercent, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-neutral-800", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-emerald-500 transition-all duration-300", style: { width: `${progressPercent}%` } }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: items.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col items-center justify-center text-center py-12", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-neutral-800 text-neutral-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-white", "data-preview-field-path": fieldPath('emptyTitle'), children: emptyTitle }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-neutral-400 max-w-xs", "data-preview-field-path": fieldPath('emptyMessage'), children: emptyMessage })] })) : ((0, jsx_runtime_1.jsx)("ul", { className: "divide-y divide-neutral-800", "data-preview-list-path": fieldPath('items'), children: items.map((item, idx) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-4 py-4", "data-preview-item-path": `${fieldPath('items')}[${idx}]`, children: [item.image ? ((0, jsx_runtime_1.jsx)("img", { src: (0, urls_1.withBasePath)(item.image), alt: item.name, className: "h-20 w-20 flex-shrink-0 rounded-lg object-cover bg-neutral-800 border border-neutral-700", "data-preview-static": "cart-item-image" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-neutral-500 border border-neutral-700", "data-preview-static": "cart-item-placeholder", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-white line-clamp-1", children: item.name }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => removeItem(item.id, item.size, item.color), className: "text-neutral-500 hover:text-red-400 transition-colors p-1", "data-preview-static": "cart-item-remove", "aria-label": `Remove ${item.name}`, children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] }), (item.brand || item.size || item.color) && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-0.5 text-xs text-neutral-400", children: [item.brand && (0, jsx_runtime_1.jsx)("span", { className: "text-emerald-400 font-semibold", children: item.brand }), item.brand && (item.size || item.color) && ' · ', item.size && `Size: ${item.size}`, item.size && item.color && ' · ', item.color && `Color: ${item.color}`] })), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm font-semibold text-emerald-400", children: (0, useCart_1.formatCurrency)(item.price * item.quantity, currency) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2 mt-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center rounded-lg border border-neutral-700 bg-neutral-800", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => updateQuantity(item.id, item.quantity - 1, item.size, item.color), className: "h-7 w-7 flex items-center justify-center text-neutral-300 hover:text-white transition-colors", "data-preview-static": "cart-item-decrement", "aria-label": "Decrease quantity", children: "-" }), (0, jsx_runtime_1.jsx)("span", { className: "w-8 text-center text-xs font-semibold text-white", children: item.quantity }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => updateQuantity(item.id, item.quantity + 1, item.size, item.color), className: "h-7 w-7 flex items-center justify-center text-neutral-300 hover:text-white transition-colors", "data-preview-static": "cart-item-increment", "aria-label": "Increase quantity", children: "+" })] }) })] })] }, `${item.id}-${item.size || ''}-${item.color || ''}`))) })) }), items.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-neutral-800 bg-neutral-950 px-6 py-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-baseline mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", "data-preview-field-path": fieldPath('subtotalLabel'), children: subtotalLabel }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl font-bold text-white", children: (0, useCart_1.formatCurrency)(subtotal, currency) })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-500 mb-4", "data-preview-field-path": fieldPath('shippingNote'), children: shippingNote }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2.5", children: [(0, jsx_runtime_1.jsxs)("a", { href: whatsappHref, target: "_blank", rel: "noopener noreferrer", "data-preview-static": "cart-whatsapp-cta", className: "flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-emerald-900/30 hover:bg-emerald-500 transition-all active:scale-[0.98]", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.531 1.769.813 2.796.813h.001c3.182 0 5.768-2.586 5.768-5.766 0-3.18-2.586-5.766-5.769-5.766zm9.969 5.766c0 5.518-4.482 10-10 10-1.745 0-3.415-.453-4.887-1.258l-5.113 1.341 1.365-4.989c-.931-1.537-1.465-3.327-1.465-5.094 0-5.518 4.482-10 10-10 5.518 0 10 4.482 10 10z" }) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('whatsappButtonText'), children: whatsappButtonText })] }), (checkoutUrl || onCheckout) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-cart-drawer-root fixed inset-0 z-50 flex justify-end ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity", onClick: closeCart, "data-preview-static": "cart-backdrop", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("aside", { className: "relative z-10 flex h-full w-full max-w-md flex-col bg-neutral-900 text-white shadow-2xl transition-transform duration-300 ease-out border-l border-neutral-800", "aria-label": "Shopping Cart Drawer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b border-neutral-800 px-6 py-5", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold tracking-tight text-white", "data-preview-field-path": fieldPath('title'), children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-400 mt-0.5", "data-preview-field-path": fieldPath('subtitle'), children: subtitle })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [items.length > 0 && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: clearCart, className: "text-xs text-neutral-400 hover:text-red-400 transition-colors px-2 py-1 rounded", "data-preview-static": "cart-clear-btn", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('clearCartText'), children: clearCartText }) })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: closeCart, className: "rounded-full p-2 text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors", "data-preview-static": "cart-close-btn", "aria-label": "Close cart", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", 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" }) }) })] })] }), freeShippingThreshold && ((0, jsx_runtime_1.jsxs)("div", { className: "border-b border-neutral-800 bg-neutral-950/50 px-6 py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between text-xs text-neutral-400 mb-1.5", children: [(0, jsx_runtime_1.jsx)("span", { children: subtotal >= freeShippingThreshold ? ((0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-emerald-400", children: "\uD83C\uDF89 You unlocked free shipping!" })) : ((0, jsx_runtime_1.jsxs)("span", { children: ["Add ", (0, jsx_runtime_1.jsxs)("strong", { className: "text-white", children: [currency, (freeShippingThreshold - subtotal).toFixed(2)] }), " more for free shipping"] })) }), (0, jsx_runtime_1.jsxs)("span", { children: [progressPercent, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-neutral-800", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full bg-emerald-500 transition-all duration-300", style: { width: `${progressPercent}%` } }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: items.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col items-center justify-center text-center py-12", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-neutral-800 text-neutral-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-white", "data-preview-field-path": fieldPath('emptyTitle'), children: emptyTitle }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-neutral-400 max-w-xs", "data-preview-field-path": fieldPath('emptyMessage'), children: emptyMessage })] })) : ((0, jsx_runtime_1.jsx)("ul", { className: "divide-y divide-neutral-800", "data-preview-list-path": fieldPath('items'), children: items.map((item, idx) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-4 py-4", "data-preview-item-path": `${fieldPath('items')}[${idx}]`, children: [item.image ? ((0, jsx_runtime_1.jsx)("img", { src: (0, urls_1.withBasePath)(item.image), alt: item.name, className: "h-20 w-20 flex-shrink-0 rounded-lg object-cover bg-neutral-800 border border-neutral-700", "data-preview-static": "cart-item-image" })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-800 text-neutral-500 border border-neutral-700", "data-preview-static": "cart-item-placeholder", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-8 w-8", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-white line-clamp-1", children: item.name }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => removeItem(item.id, item.size, item.color), className: "text-neutral-500 hover:text-red-400 transition-colors p-1", "data-preview-static": "cart-item-remove", "aria-label": `Remove ${item.name}`, children: (0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] }), (item.brand || item.size || item.color) && ((0, jsx_runtime_1.jsxs)("p", { className: "mt-0.5 text-xs text-neutral-400", children: [item.brand && (0, jsx_runtime_1.jsx)("span", { className: "text-emerald-400 font-semibold", children: item.brand }), item.brand && (item.size || item.color) && ' · ', item.size && `Size: ${item.size}`, item.size && item.color && ' · ', item.color && `Color: ${item.color}`] })), item.showPrice === false ? ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs font-semibold text-neutral-400", children: "Price on Request" })) : ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm font-semibold text-emerald-400", children: (0, useCart_1.formatCurrency)(item.price * item.quantity, currency) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2 mt-2", children: (0, jsx_runtime_1.jsxs)("div", { className: "inline-flex items-center rounded-lg border border-neutral-700 bg-neutral-800", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => updateQuantity(item.id, item.quantity - 1, item.size, item.color), className: "h-7 w-7 flex items-center justify-center text-neutral-300 hover:text-white transition-colors", "data-preview-static": "cart-item-decrement", "aria-label": "Decrease quantity", children: "-" }), (0, jsx_runtime_1.jsx)("span", { className: "w-8 text-center text-xs font-semibold text-white", children: item.quantity }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => updateQuantity(item.id, item.quantity + 1, item.size, item.color), className: "h-7 w-7 flex items-center justify-center text-neutral-300 hover:text-white transition-colors", "data-preview-static": "cart-item-increment", "aria-label": "Increase quantity", children: "+" })] }) })] })] }, `${item.id}-${item.size || ''}-${item.color || ''}`))) })) }), items.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-neutral-800 bg-neutral-950 px-6 py-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-baseline mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm text-neutral-400", "data-preview-field-path": fieldPath('subtotalLabel'), children: subtotalLabel }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl font-bold text-white", children: items.length > 0 && items.every((i) => i.showPrice === false)
+                                            ? "Price on Request"
+                                            : (0, useCart_1.formatCurrency)(subtotal, currency) })] }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-neutral-500 mb-4", "data-preview-field-path": fieldPath('shippingNote'), children: shippingNote }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2.5", children: [(0, jsx_runtime_1.jsxs)("a", { href: whatsappHref, target: "_blank", rel: "noopener noreferrer", "data-preview-static": "cart-whatsapp-cta", className: "flex w-full items-center justify-center gap-2 rounded-xl bg-emerald-600 px-5 py-3.5 text-sm font-semibold text-white shadow-lg shadow-emerald-900/30 hover:bg-emerald-500 transition-all active:scale-[0.98]", children: [(0, jsx_runtime_1.jsx)("svg", { className: "h-4 w-4 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.711 2.598 2.664-.699c.971.531 1.769.813 2.796.813h.001c3.182 0 5.768-2.586 5.768-5.766 0-3.18-2.586-5.766-5.769-5.766zm9.969 5.766c0 5.518-4.482 10-10 10-1.745 0-3.415-.453-4.887-1.258l-5.113 1.341 1.365-4.989c-.931-1.537-1.465-3.327-1.465-5.094 0-5.518 4.482-10 10-10 5.518 0 10 4.482 10 10z" }) }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath('whatsappButtonText'), children: whatsappButtonText })] }), (checkoutUrl || onCheckout) && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => {
                                             if (onCheckout)
                                                 onCheckout(items, subtotal);
                                             if (checkoutUrl)

package/dist/EditableProductCard.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import { MeasurementUnit, ProductVariant } from './utils/productOptions';
 export interface ProductItem {
+    href?: string;
+    detailHref?: string;
     id?: string | number;
     name?: string;
     title?: string;
+    showPrice?: boolean;
     isPriceRange?: boolean;
     productName?: string;
     itemTitle?: string;
@@ -58,6 +61,7 @@ export interface ProductItem {
     priceMin?: string | number;
     priceMax?: string | number;
     priceRange?: [number | string, number | string] | string;
+    customData?: Record<string, unknown>;
     [key: string]: unknown;
 }
 export type ProductCardVariant = 'modern-glass' | 'classic' | 'minimal' | 'horizontal';
@@ -85,7 +89,13 @@ export interface EditableProductCardProps extends React.HTMLAttributes<HTMLEleme
     actionSlot?: React.ReactNode;
     actionLabel?: string;
     actionLabelPath?: string;
+    href?: string;
+    detailHref?: string;
+    showDetailLink?: boolean;
+    showDetailButton?: boolean;
+    detailButtonText?: string;
+    onDetailClick?: (product: ProductItem, url: string) => void;
     onAddToCart?: (product: ProductItem) => void;
     onWhatsAppClick?: (product: ProductItem, url: string) => void;
 }
-export declare function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant, imageFallback, as: Component, currency, showBrand, showPrice, showDescription, showCategory, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, storeName, showWhatsAppButton, showAddToCartButton, whatsappActionLabel, addToCartLabel, actionSlot, onAddToCart, onWhatsAppClick, className, style, ...props }: EditableProductCardProps): React.JSX.Element;
+export declare function EditableProductCard({ itemPath, product: productProp, item: itemProp, cardVariant, imageFallback, as: Component, currency, showBrand, showPrice, showDescription, showCategory, whatsappNumber: whatsappNumberProp, whatsappPhone: whatsappPhoneProp, storeName, showWhatsAppButton, showAddToCartButton, whatsappActionLabel, addToCartLabel, actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, href, detailHref, showDetailLink, showDetailButton, detailButtonText, onDetailClick, className, style, ...props }: EditableProductCardProps): React.JSX.Element;

package/dist/EditableProductCard.js

@@ -8,6 +8,7 @@ const EditableText_1 = require("./EditableText");
 const EditableImage_1 = require("./EditableImage");
 const useCart_1 = require("./cart/useCart");
 const productOptions_1 = require("./utils/productOptions");
+const PlatformProductDetail_1 = require("./PlatformProductDetail");
 const COLOR_HEX_MAP = {
     black: '#111827',
     white: '#ffffff',
@@ -45,8 +46,45 @@ function WhatsAppIcon({ className = '', style = {} }) {
 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" })] }));
 }
-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, storeName, showWhatsAppButton = true, showAddToCartButton = true, whatsappActionLabel = 'Inquire on WhatsApp', addToCartLabel = 'Add to Cart', actionSlot, onAddToCart, onWhatsAppClick, className = '', style, ...props }) {
-    const product = (0, react_1.useMemo)(() => (productProp || itemProp || {}), [productProp, itemProp]);
+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, storeName, showWhatsAppButton = true, showAddToCartButton = true, whatsappActionLabel = 'Inquire on WhatsApp', addToCartLabel = 'Add to Cart', actionSlot, actionLabel, actionLabelPath, onAddToCart, onWhatsAppClick, href, detailHref, showDetailLink = true, showDetailButton, detailButtonText, onDetailClick, className = '', style, ...props }) {
+    const anyProps = props;
+    const product = (0, react_1.useMemo)(() => {
+        const base = (productProp || itemProp || {});
+        return {
+            ...base,
+            id: base.id ?? anyProps.id,
+            name: base.name || anyProps.name,
+            title: base.title || anyProps.title,
+            productName: base.productName || anyProps.productName,
+            brand: base.brand || anyProps.brand,
+            price: base.price ?? anyProps.price,
+            originalPrice: base.originalPrice ?? anyProps.originalPrice ?? anyProps.compareAtPrice,
+            compareAtPrice: base.compareAtPrice ?? anyProps.compareAtPrice,
+            description: base.description || anyProps.description || anyProps.desc,
+            category: base.category || anyProps.category,
+            badge: base.badge || anyProps.badge || anyProps.tag,
+            imageUrl: base.imageUrl || anyProps.imageUrl || anyProps.image || anyProps.photo,
+            currency: base.currency || anyProps.currency,
+            measurement: base.measurement || anyProps.measurement,
+            unit: base.unit || anyProps.unit,
+            href: base.href || anyProps.href,
+        };
+    }, [productProp, itemProp, anyProps]);
+    const rawId = product?.id ?? product?.productId;
+    const resolvedDetailHref = (0, react_1.useMemo)(() => {
+        if (href && typeof href === 'string' && href.trim() !== '')
+            return href.trim();
+        if (detailHref && typeof detailHref === 'string' && detailHref.trim() !== '')
+            return detailHref.trim();
+        if (product?.href && typeof product.href === 'string' && product.href.trim() !== '') {
+            return product.href.trim();
+        }
+        if (rawId !== undefined && rawId !== null && String(rawId).trim() !== '') {
+            return (0, PlatformProductDetail_1.platformProductDetailHref)(rawId);
+        }
+        return undefined;
+    }, [href, detailHref, product?.href, rawId]);
+    const resolvedActionLabel = String(actionLabel || detailButtonText || 'View details');
     const whatsappNumber = whatsappPhoneProp || whatsappNumberProp || '94770000000';
     const cart = (0, useCart_1.useOptionalCart)();
     // Dynamic Options, Measurements & Colors resolution
@@ -99,8 +137,14 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
             ? rawPriceCandidate
             : (0, useCart_1.formatCurrency)(basePriceNum, currency)
         : '');
+    const itemShowPrice = product?.showPrice !== undefined
+        ? Boolean(product.showPrice)
+        : (product?.customData?.showPrice !== undefined
+            ? Boolean(product.customData.showPrice)
+            : true);
+    const effectiveShowPrice = showPrice && itemShowPrice;
     const displayPrice = resolvedPrice.formattedPrice || baseFormattedPrice;
-    const hasPrice = showPrice && Boolean(displayPrice && displayPrice.trim() !== '');
+    const hasPrice = effectiveShowPrice && 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)
@@ -187,7 +231,8 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
             ...product,
             name,
             brand,
-            price: displayPrice,
+            price: effectiveShowPrice ? displayPrice : undefined,
+            showPrice: effectiveShowPrice,
             size: selectedOption || undefined,
             color: selectedColor || undefined,
             option: selectedOption || undefined,
@@ -214,6 +259,7 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
             size: selectedOption || undefined,
             color: selectedColor || undefined,
             option: selectedOption || undefined,
+            showPrice: effectiveShowPrice,
         };
         if (cart) {
             cart.addItem(itemToAdd);
@@ -271,7 +317,11 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
                     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: 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: {
+                }, children: [resolvedDetailHref && showDetailLink ? ((0, jsx_runtime_1.jsx)("a", { href: resolvedDetailHref, onClick: () => {
+                            if (onDetailClick) {
+                                onDetailClick(product, resolvedDetailHref);
+                            }
+                        }, "data-preview-static": "Open the stable live product detail page", style: { display: 'block', width: '100%', height: '100%', textDecoration: 'none' }, title: `View details for ${name}`, 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' } }) })) : ((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',
@@ -293,13 +343,27 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
                                             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}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: name, style: {
+                                        } })) : null] }), resolvedDetailHref && showDetailLink ? ((0, jsx_runtime_1.jsx)("a", { href: resolvedDetailHref, onClick: () => {
+                                    if (onDetailClick) {
+                                        onDetailClick(product, resolvedDetailHref);
+                                    }
+                                }, "data-preview-static": "Open the stable live product detail page", style: {
+                                    color: 'inherit',
+                                    textDecoration: 'none',
+                                    display: 'inline-block',
+                                }, className: "hover:underline", children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: name, style: {
+                                        fontSize: '1.125rem',
+                                        fontWeight: 700,
+                                        lineHeight: 1.35,
+                                        color: 'var(--heading-color, #ffffff)',
+                                        marginBottom: '0.375rem',
+                                    } }) })) : ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: `${itemPath}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: name, style: {
                                     fontSize: '1.125rem',
                                     fontWeight: 700,
                                     lineHeight: 1.35,
                                     color: 'var(--heading-color, #ffffff)',
                                     marginBottom: '0.375rem',
-                                } }), showDescription && description ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.${descriptionKey}`, "data-preview-field-path": `${itemPath}.${descriptionKey}`, defaultValue: description, style: {
+                                } })), showDescription && description ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.${descriptionKey}`, "data-preview-field-path": `${itemPath}.${descriptionKey}`, defaultValue: description, style: {
                                     fontSize: '0.875rem',
                                     color: 'var(--muted-text, #94a3b8)',
                                     lineHeight: 1.5,
@@ -361,7 +425,7 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
                                             fontWeight: 800,
                                             color: 'var(--brand-color, #ffffff)',
                                             letterSpacing: '-0.02em',
-                                        } }), displayOriginalPrice ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.${originalPriceKey}`, "data-preview-field-path": `${itemPath}.${originalPriceKey}`, defaultValue: displayOriginalPrice, style: {
+                                        } }), displayOriginalPrice && !isRange ? ((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)',
@@ -369,40 +433,70 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
                                             fontSize: '0.8rem',
                                             fontWeight: 500,
                                             color: 'var(--muted-text, #64748b)',
-                                        } })) : null] })) : null, actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsxs)("div", { style: {
-                                    display: 'grid',
-                                    gridTemplateColumns: showWhatsAppButton && showAddToCartButton ? '1fr 1fr' : '1fr',
-                                    gap: '0.5rem',
-                                    width: '100%',
-                                }, children: [showWhatsAppButton && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleWhatsAppClick, title: "Chat directly on WhatsApp about this product", style: {
-                                            backgroundColor: '#25D366',
-                                            color: '#ffffff',
-                                            border: 'none',
-                                            padding: '0.55rem 0.75rem',
-                                            borderRadius: '10px',
-                                            fontSize: '0.8125rem',
-                                            fontWeight: 600,
-                                            cursor: 'pointer',
+                                        } })) : null] })) : !effectiveShowPrice ? ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        padding: '4px 10px',
+                                        borderRadius: '8px',
+                                        fontSize: '0.8125rem',
+                                        fontWeight: 600,
+                                        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                                        color: 'var(--muted-text, #94a3b8)',
+                                        border: '1px solid rgba(255, 255, 255, 0.12)',
+                                        letterSpacing: '0.01em',
+                                    }, children: "Price on Request" }) })) : null, actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem', width: '100%' }, children: [(showWhatsAppButton || showAddToCartButton) && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'grid',
+                                            gridTemplateColumns: showWhatsAppButton && showAddToCartButton ? '1fr 1fr' : '1fr',
+                                            gap: '0.5rem',
+                                            width: '100%',
+                                        }, children: [showWhatsAppButton && ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleWhatsAppClick, title: "Chat directly on WhatsApp about this product", style: {
+                                                    backgroundColor: '#25D366',
+                                                    color: '#ffffff',
+                                                    border: 'none',
+                                                    padding: '0.55rem 0.75rem',
+                                                    borderRadius: '10px',
+                                                    fontSize: '0.8125rem',
+                                                    fontWeight: 600,
+                                                    cursor: 'pointer',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    gap: '0.375rem',
+                                                    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(--button-bg, var(--brand-color, #2563eb))',
+                                                    color: 'var(--button-text, #ffffff)',
+                                                    border: 'none',
+                                                    padding: '0.55rem 0.75rem',
+                                                    borderRadius: '10px',
+                                                    fontSize: '0.8125rem',
+                                                    fontWeight: 600,
+                                                    cursor: 'pointer',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                    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: 'var(--button-text, #ffffff)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] })), resolvedDetailHref && (showDetailButton || Boolean(actionLabel || actionLabelPath)) && ((0, jsx_runtime_1.jsx)("a", { href: resolvedDetailHref, onClick: () => {
+                                            if (onDetailClick) {
+                                                onDetailClick(product, resolvedDetailHref);
+                                            }
+                                        }, "data-preview-static": "Open the stable live product detail page", style: {
                                             display: 'flex',
                                             alignItems: 'center',
                                             justifyContent: 'center',
-                                            gap: '0.375rem',
-                                            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(--button-bg, var(--brand-color, #2563eb))',
-                                            color: 'var(--button-text, #ffffff)',
-                                            border: 'none',
+                                            width: '100%',
+                                            textAlign: 'center',
                                             padding: '0.55rem 0.75rem',
                                             borderRadius: '10px',
                                             fontSize: '0.8125rem',
                                             fontWeight: 600,
-                                            cursor: 'pointer',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            gap: '0.375rem',
+                                            backgroundColor: 'var(--button-secondary-bg, rgba(255, 255, 255, 0.08))',
+                                            color: 'var(--button-secondary-text, var(--muted-text, #e2e8f0))',
+                                            border: '1px solid var(--card-border, rgba(226, 232, 240, 0.25))',
+                                            textDecoration: 'none',
                                             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: 'var(--button-text, #ffffff)', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } })] }))] }))] })] })] }));
+                                        }, className: "hover:brightness-110 active:scale-95", children: actionLabelPath ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: actionLabelPath, "data-preview-field-path": actionLabelPath, defaultValue: resolvedActionLabel })) : ((0, jsx_runtime_1.jsx)("span", { children: resolvedActionLabel })) }))] }))] })] })] }));
 }

package/dist/EditableProductDetail.d.ts

@@ -30,6 +30,9 @@ export interface ProductDetailItem {
     whatsappNumber?: string;
     whatsappMessage?: string;
     isAvailable?: boolean;
+    showPrice?: boolean;
+    isPriceRange?: boolean;
+    customData?: Record<string, unknown>;
     unit?: MeasurementUnit;
     measurement?: string;
     optionsLabel?: string;

package/dist/EditableProductDetail.js

@@ -124,8 +124,32 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes, colors
     };
     const name = String(product.name || product.title || product.productName || product.itemTitle || 'Product Title');
     const rawPriceCandidate = product.price ?? product.cost ?? product.amount ?? product.productPrice;
-    const basePrice = rawPriceCandidate !== undefined && rawPriceCandidate !== null ? String(rawPriceCandidate) : 'LKR 0';
+    const isRange = Boolean(product.isPriceRange ||
+        (product.minPrice !== undefined && product.maxPrice !== undefined) ||
+        product.priceRange);
+    let rangePriceString = '';
+    if (isRange) {
+        if (product.priceRange) {
+            rangePriceString = String(product.priceRange);
+        }
+        else {
+            const minNum = typeof product.minPrice === 'number' ? product.minPrice : parseFloat(String(product.minPrice || '').replace(/[^0-9.]/g, '')) || 0;
+            const maxNum = typeof product.maxPrice === 'number' ? product.maxPrice : parseFloat(String(product.maxPrice || '').replace(/[^0-9.]/g, '')) || 0;
+            rangePriceString = `LKR ${minNum.toLocaleString()} – LKR ${maxNum.toLocaleString()}`;
+        }
+    }
+    const basePrice = rangePriceString ||
+        (rawPriceCandidate !== undefined && rawPriceCandidate !== null
+            ? typeof rawPriceCandidate === 'number'
+                ? `LKR ${rawPriceCandidate.toLocaleString()}`
+                : String(rawPriceCandidate)
+            : 'LKR 0');
     const originalPrice = product.originalPrice ?? product.compareAtPrice;
+    const itemShowPrice = product.showPrice !== undefined
+        ? Boolean(product.showPrice)
+        : (product.customData?.showPrice !== undefined
+            ? Boolean(product.customData.showPrice)
+            : true);
     const displayPrice = resolvedPrice.formattedPrice || basePrice;
     const displayOriginalPrice = resolvedPrice.formattedOriginalPrice || (originalPrice ? String(originalPrice) : undefined);
     const isAvailable = product.isAvailable !== false;
@@ -138,7 +162,9 @@ 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}` : ''} - ${displayPrice}`)
+        ? (0, urls_1.createWhatsAppUrl)(product.whatsappNumber, product.whatsappMessage || (itemShowPrice
+            ? `Hi, I would like to order ${name}${orderSnippet ? ` ${orderSnippet}` : ''} - ${displayPrice}`
+            : `Hi, I am interested in ${name}${orderSnippet ? ` ${orderSnippet}` : ''}. Could you please share the pricing, availability, and details?`))
         : '');
     // Dynamic Specs: Use explicit specs if provided, else fallback to available product metadata
     const effectiveSpecs = (0, react_1.useMemo)(() => {
@@ -162,9 +188,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: 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
+                                    : 'bg-rose-500/15 text-rose-300'}`, children: isAvailable ? 'In Stock' : 'Out of Stock' }), itemShowPrice ? ((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 && !isRange ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-medium text-slate-500 line-through", children: String(displayOriginalPrice) })) : null] })) : ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 flex items-center gap-3", children: (0, jsx_runtime_1.jsx)("span", { className: "inline-flex items-center px-3.5 py-1.5 rounded-xl text-sm font-bold bg-slate-800/80 text-slate-300 border border-slate-700/60", children: "Price on Request" }) })), 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, 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 })] }))] })] }) })] }) }));
+                                                : '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, showPrice: itemShowPrice }, 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

@@ -114,6 +114,9 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
     currency?: string;
     whatsappNumber?: string;
     whatsappPhone?: string;
+    showDetailLink?: boolean;
+    showDetailButton?: boolean;
+    detailActionLabel?: string;
     className?: string;
 }
 /**
@@ -124,6 +127,6 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-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 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, showDetailLink, showDetailButton, detailActionLabel, 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({ currency = 'LKR', whatsappNumber, whatsappPhone, sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', showSearch = true, searchPlaceholder = 'Search products by name, brand, or tag...', enableBackendSearch = true, onSearchChange, enablePagination = true, pageSize = 8, pageSizeOptions = [8, 16, 24, 48], showPageSizeSelector = false, paginationVariant = 'numbers', hidePaginationOnSinglePage = true, currentPage: controlledPage, initialPage = 1, onPageChange, scrollToTopOnPageChange = true, totalProducts, className = '', style, ...props }) {
+function 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, showDetailLink = true, showDetailButton, detailActionLabel, className = '', style, ...props }) {
     const sectionRef = (0, react_1.useRef)(null);
     const siteData = (0, SiteDataProvider_1.useSiteData)();
     const siteApi = (0, SiteDataProvider_1.useSiteApi)();
@@ -226,7 +226,7 @@ function EditableProductGrid({ currency = 'LKR', whatsappNumber, whatsappPhone,
                     const itemPath = resolvedListPath
                         ? `${resolvedListPath}[${effectiveIndex}]`
                         : `${sectionPath}.${cardPrefix}${effectiveIndex + 1}`;
-                    return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, currency: currency, whatsappPhone: whatsappPhone || whatsappNumber, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
+                    return ((0, jsx_runtime_1.jsxs)("div", { "data-preview-item-path": itemPath, className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, currency: currency, whatsappPhone: whatsappPhone || whatsappNumber, showDetailLink: showDetailLink, showDetailButton: showDetailButton, actionLabel: detailActionLabel, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
                 })) : (
                 /* Empty State — strictly inside the listPath container */
                 (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-16 px-4 rounded-3xl border border-dashed border-slate-300 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/30 w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 mx-auto mb-4 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" }) }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: "No products found" }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400 mt-1 max-w-sm mx-auto", children: searchQuery

package/dist/EditableProductShowcase.d.ts

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

package/dist/EditableProductShowcase.js

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

package/dist/EditableServiceCard.d.ts

@@ -4,6 +4,9 @@ export interface ServiceItem {
     name?: string;
     title?: string;
     price?: string | number;
+    priceLabel?: string;
+    showPrice?: boolean;
+    customData?: Record<string, unknown>;
     description?: string;
     imageUrl?: string;
     image?: string;

package/dist/EditableServiceCard.js

@@ -11,18 +11,48 @@ const EditableImage_1 = require("./EditableImage");
 function EditableServiceCard({ itemPath, service, imageFallback = '/placeholder.svg', as: Component = 'article', align = 'left', showPrice = true, className = '', style, children, ...props }) {
     const name = String(service?.name || service?.title || '');
     const description = String(service?.description || '');
-    const hasPrice = showPrice && service?.price !== undefined && service?.price !== null && String(service.price).trim() !== '';
+    const itemShowPrice = service.showPrice !== undefined
+        ? Boolean(service.showPrice)
+        : (service.customData?.showPrice !== undefined
+            ? Boolean(service.customData.showPrice)
+            : true);
+    const effectiveShowPrice = showPrice && itemShowPrice;
+    const rawPriceCandidate = service?.price;
+    const hasRawPrice = rawPriceCandidate !== undefined && rawPriceCandidate !== null && String(rawPriceCandidate).trim() !== '';
+    const priceLabel = service?.priceLabel ? String(service.priceLabel) : '';
+    const hasPrice = effectiveShowPrice && (hasRawPrice || Boolean(priceLabel));
+    const formattedPrice = hasRawPrice
+        ? typeof rawPriceCandidate === 'number'
+            ? 'LKR ' + rawPriceCandidate.toLocaleString()
+            : String(rawPriceCandidate).includes('LKR')
+                ? String(rawPriceCandidate)
+                : 'LKR ' + String(rawPriceCandidate)
+        : '';
     const imageUrl = String(service?.imageUrl || service?.image || '');
     const features = Array.isArray(service?.features) ? service.features : [];
     const mergedStyle = {
         textAlign: align,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, className: `editable-service-card ${className}`.trim(), style: mergedStyle, ...props, children: [(imageUrl || service?.imageUrl !== undefined || service?.image !== undefined) && ((0, jsx_runtime_1.jsx)("div", { className: "service-card-image-wrap", children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.imageUrl`, "data-preview-field-path": `${itemPath}.imageUrl`, src: imageUrl, fallbackSrc: imageFallback, alt: name, className: "service-card-image" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "service-card-body", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: `${itemPath}.name`, "data-preview-field-path": `${itemPath}.name`, defaultValue: name, className: "service-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.description`, "data-preview-field-path": `${itemPath}.description`, defaultValue: description, className: "service-card-description" }), hasPrice && ((0, jsx_runtime_1.jsx)("div", { className: "service-card-price-wrap", style: { margin: '0.5rem 0' }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.price`, "data-preview-field-path": `${itemPath}.price`, defaultValue: String(service.price), className: "service-card-price", style: {
-                                fontSize: '1.125rem',
-                                fontWeight: 700,
-                                color: 'var(--brand-color, #2563eb)',
-                            } }) })), (features.length > 0 || Array.isArray(service?.features)) && ((0, jsx_runtime_1.jsx)("ul", { "data-preview-list-path": `${itemPath}.features`, className: "service-card-features", children: features.map((feature, featureIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, className: `editable-service-card ${className}`.trim(), style: mergedStyle, ...props, children: [(imageUrl || service?.imageUrl !== undefined || service?.image !== undefined) && ((0, jsx_runtime_1.jsx)("div", { className: "service-card-image-wrap", children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.imageUrl`, "data-preview-field-path": `${itemPath}.imageUrl`, src: imageUrl, fallbackSrc: imageFallback, alt: name, className: "service-card-image" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "service-card-body", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: `${itemPath}.name`, "data-preview-field-path": `${itemPath}.name`, defaultValue: name, className: "service-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.description`, "data-preview-field-path": `${itemPath}.description`, defaultValue: description, className: "service-card-description" }), hasPrice ? ((0, jsx_runtime_1.jsxs)("div", { className: "service-card-price-wrap", style: { margin: '0.5rem 0', display: 'flex', alignItems: 'baseline', gap: '0.375rem', flexWrap: 'wrap' }, children: [hasRawPrice && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.price`, "data-preview-field-path": `${itemPath}.price`, defaultValue: formattedPrice, className: "service-card-price", style: {
+                                    fontSize: '1.125rem',
+                                    fontWeight: 700,
+                                    color: 'var(--brand-color, #2563eb)',
+                                } })), priceLabel && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.priceLabel`, "data-preview-field-path": `${itemPath}.priceLabel`, defaultValue: priceLabel, className: "service-card-price-label", style: {
+                                    fontSize: '0.8125rem',
+                                    fontWeight: 500,
+                                    color: 'var(--muted-text, #94a3b8)',
+                                } }))] })) : !effectiveShowPrice ? ((0, jsx_runtime_1.jsx)("div", { className: "service-card-price-wrap", style: { margin: '0.5rem 0' }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                padding: '3px 8px',
+                                borderRadius: '6px',
+                                fontSize: '0.75rem',
+                                fontWeight: 600,
+                                backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                                color: 'var(--muted-text, #94a3b8)',
+                                border: '1px solid rgba(255, 255, 255, 0.12)',
+                            }, children: "Quote on Request" }) })) : null, (features.length > 0 || Array.isArray(service?.features)) && ((0, jsx_runtime_1.jsx)("ul", { "data-preview-list-path": `${itemPath}.features`, className: "service-card-features", children: features.map((feature, featureIndex) => {
                             const featureText = typeof feature === 'string'
                                 ? feature
                                 : typeof feature?.title === 'string'

package/dist/ProductQuickView.d.ts

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

package/dist/ProductQuickView.js

@@ -4,6 +4,7 @@ exports.ProductQuickView = ProductQuickView;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("./utils");
+const PlatformProductDetail_1 = require("./PlatformProductDetail");
 /**
  * DENEB UI — Product Quick View Modal
  *
@@ -13,7 +14,7 @@ const utils_1 = require("./utils");
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '', itemPath, addToCartLabel = 'Add to Selection', }) {
+function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '', itemPath, addToCartLabel = 'Add to Selection', showDetailLink = true, detailLinkText = 'View full product details', }) {
     const [quantity, setQuantity] = (0, react_1.useState)(1);
     const [selectedImage, setSelectedImage] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
@@ -58,5 +59,5 @@ function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '
         }, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full max-w-2xl overflow-hidden rounded-3xl bg-white shadow-2xl border border-slate-100 flex flex-col md:flex-row max-h-[90vh]", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClose, className: "absolute top-4 right-4 z-10 p-2 text-slate-400 hover:text-slate-700 bg-white/80 hover:bg-white rounded-full shadow-sm backdrop-blur transition-colors", "aria-label": "Close modal", children: (0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", 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: "md:w-1/2 p-6 flex flex-col items-center justify-center bg-slate-50 border-b md:border-b-0 md:border-r border-slate-100", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative w-full aspect-square rounded-2xl overflow-hidden bg-white shadow-sm flex items-center justify-center", children: [product.badge && ((0, jsx_runtime_1.jsx)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.badge` } : {}), className: "absolute top-3 left-3 px-2.5 py-1 text-xs font-bold text-white bg-red-500 rounded-lg shadow-sm", children: product.badge })), selectedImage ? ((0, jsx_runtime_1.jsx)("img", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.image` } : {}), src: (0, utils_1.withBasePath)(selectedImage), alt: product.title, className: "w-full h-full object-cover" })) : ((0, jsx_runtime_1.jsx)("div", { className: "text-slate-300 text-sm", children: "No image available" }))] }), images.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex gap-2 mt-4 overflow-x-auto max-w-full pb-1", children: images.map((img, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedImage(img), className: `w-12 h-12 rounded-lg overflow-hidden border-2 transition-all flex-shrink-0 ${selectedImage === img ? 'border-primary shadow-sm' : 'border-slate-200 opacity-60 hover:opacity-100'}`, children: (0, jsx_runtime_1.jsx)("img", { src: (0, utils_1.withBasePath)(img), alt: "", className: "w-full h-full object-cover" }) }, idx))) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "md:w-1/2 p-6 flex flex-col justify-between overflow-y-auto", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold ${isAvailable ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'}`, children: isAvailable ? 'In Stock' : 'Out of Stock' }), product.rating && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-amber-500 flex items-center gap-1 font-medium", children: ["\u2605 ", product.rating, " ", product.reviewCount ? `(${product.reviewCount})` : ''] }))] }), (0, jsx_runtime_1.jsx)("h3", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.name` } : {}), className: "text-xl font-bold text-slate-900 leading-tight", children: product.title }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex items-baseline gap-2", children: [(0, jsx_runtime_1.jsxs)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.price` } : {}), className: "text-2xl font-black text-slate-900", children: [currency, product.price] }), product.originalPrice && ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-slate-400 line-through", children: [currency, product.originalPrice] }))] }), product.description && ((0, jsx_runtime_1.jsx)("p", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.description` } : {}), className: "mt-4 text-sm text-slate-600 leading-relaxed", children: product.description }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 pt-6 border-t border-slate-100", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-slate-700", children: "Quantity" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center rounded-xl border border-slate-200 bg-slate-50 p-1", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setQuantity((q) => Math.max(1, q - 1)), className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white text-slate-600 font-bold transition-colors", children: "-" }), (0, jsx_runtime_1.jsx)("span", { className: "w-10 text-center font-bold text-sm text-slate-800", children: quantity }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setQuantity((q) => q + 1), className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white text-slate-600 font-bold transition-colors", children: "+" })] })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", disabled: !isAvailable, onClick: handleAddToCart, className: "w-full py-3.5 px-4 rounded-xl font-bold text-sm text-white shadow-lg transition-all duration-200 active:scale-98 disabled:opacity-50 disabled:cursor-not-allowed hover:brightness-110 flex items-center justify-center gap-2", style: {
                                         backgroundColor: 'var(--color-primary, #0f172a)',
                                         boxShadow: '0 4px 14px rgba(15, 23, 42, 0.25)',
-                                    }, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), (0, jsx_runtime_1.jsx)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.addToSelectionLabel` } : {}), children: isAvailable ? addToCartLabel : 'Out of Stock' })] })] })] })] }) }));
+                                    }, children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), (0, jsx_runtime_1.jsx)("span", { ...(itemPath ? { 'data-preview-field-path': `${itemPath}.addToSelectionLabel` } : {}), children: isAvailable ? addToCartLabel : 'Out of Stock' })] }), showDetailLink && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-center", children: (0, jsx_runtime_1.jsxs)("a", { href: product.href || product.detailHref || (0, PlatformProductDetail_1.platformProductDetailHref)(product.id), "data-preview-static": "Open the stable live product detail page", className: "text-xs font-semibold text-slate-500 hover:text-slate-900 transition-colors inline-flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { children: detailLinkText }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: "\u2192" })] }) }))] })] })] }) }));
 }

package/dist/cart/useCart.d.ts

@@ -11,6 +11,7 @@ export interface CartItem {
     quantity: number;
     sku?: string;
     metadata?: Record<string, unknown>;
+    showPrice?: boolean;
 }
 export declare function parseNumericPrice(value: unknown): number;
 export declare function formatCurrency(amount: number, currency?: string): string;
@@ -19,6 +20,7 @@ export declare function getProductWhatsAppUrl(product: {
     title?: string;
     brand?: string;
     price?: string | number;
+    showPrice?: boolean;
     size?: string | number;
     color?: string;
     option?: string | number;

package/dist/cart/useCart.js

@@ -42,18 +42,22 @@ function getProductWhatsAppUrl(product, whatsappNumber, options) {
     if (product.option && product.option !== product.size)
         variantParts.push(`Option: ${product.option}`);
     const variantStr = variantParts.length > 0 ? ` [${variantParts.join(", ")}]` : "";
+    const isPriceVisible = product.showPrice !== false && product.price !== undefined && product.price !== null && String(product.price).trim() !== '';
     const rawPriceStr = typeof product.price === "string" && product.price.trim() ? product.price.trim() : "";
     const priceNum = typeof product.price === "number" ? product.price : parseNumericPrice(product.price);
-    const priceStr = rawPriceStr
-        ? `\nPrice: ${rawPriceStr}`
-        : (priceNum > 0 ? `\nPrice: ${formatCurrency(priceNum, options?.currency || "LKR")}` : "");
+    const priceStr = isPriceVisible
+        ? (rawPriceStr ? `\nPrice: ${rawPriceStr}` : (priceNum > 0 ? `\nPrice: ${formatCurrency(priceNum, options?.currency || "LKR")}` : ""))
+        : "";
     const store = options?.storeName ? ` at ${options.storeName}` : "";
+    const closingPrompt = isPriceVisible
+        ? `Could you please share more details, availability, and ordering instructions? Thank you!`
+        : `Could you please share the pricing, availability, and ordering instructions? Thank you!`;
     const message = [
         `Hello${store}! 👋`,
         `I am interested in this product:`,
         `*${title}*${brand}${variantStr}${priceStr}`,
         "",
-        `Could you please share more details, availability, and ordering instructions? Thank you!`,
+        closingPrompt,
     ].join("\n");
     return `https://wa.me/${cleanNumber}?text=${encodeURIComponent(message)}`;
 }
@@ -128,7 +132,7 @@ function CartProvider({ children, storageKey = STORAGE_KEY, }) {
     }, []);
     const clearCart = (0, react_1.useCallback)(() => setItems([]), []);
     const totalCount = (0, react_1.useMemo)(() => items.reduce((acc, item) => acc + item.quantity, 0), [items]);
-    const subtotal = (0, react_1.useMemo)(() => items.reduce((acc, item) => acc + item.price * item.quantity, 0), [items]);
+    const subtotal = (0, react_1.useMemo)(() => items.reduce((acc, item) => (item.showPrice !== false ? acc + item.price * item.quantity : acc), 0), [items]);
     const getWhatsAppOrderUrl = (0, react_1.useCallback)((whatsappNumber, options) => {
         const cleanNumber = (whatsappNumber || '').replace(/\D/g, '');
         const currency = options?.currency || 'LKR';
@@ -148,11 +152,26 @@ function CartProvider({ children, storageKey = STORAGE_KEY, }) {
                 variantParts.push(`Color: ${item.color}`);
             const variantStr = variantParts.length > 0 ? ` [${variantParts.join(', ')}]` : '';
             lines.push(`${index + 1}. *${item.name}*${brandStr}${variantStr}`);
-            lines.push(`   Qty: ${item.quantity} x ${formatCurrency(item.price, currency)} = *${formatCurrency(item.price * item.quantity, currency)}*`);
+            if (item.showPrice === false) {
+                lines.push(`   Qty: ${item.quantity} x *Price on Request*`);
+            }
+            else {
+                lines.push(`   Qty: ${item.quantity} x ${formatCurrency(item.price, currency)} = *${formatCurrency(item.price * item.quantity, currency)}*`);
+            }
         });
+        const hasHiddenItems = items.some((item) => item.showPrice === false);
+        const allHidden = items.length > 0 && items.every((item) => item.showPrice === false);
         lines.push('');
         lines.push('──────────────────────────────');
-        lines.push(`💰 *Grand Total: ${formatCurrency(subtotal, currency)}*`);
+        if (allHidden) {
+            lines.push(`💰 *Grand Total: Price on Request*`);
+        }
+        else if (hasHiddenItems) {
+            lines.push(`💰 *Grand Total: ${formatCurrency(subtotal, currency)}* _(Excluding Price on Request items)_`);
+        }
+        else {
+            lines.push(`💰 *Grand Total: ${formatCurrency(subtotal, currency)}*`);
+        }
         lines.push(`📊 Total Items: ${totalCount}`);
         lines.push('');
         lines.push('Please confirm availability and delivery details. Thank you! 🙏');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.107",
+  "version": "2.0.109",
   "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.107"
+    "@deneb-ui/core": "^2.0.109"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",