@deneb-ui/ui 2.0.14 → 2.0.16

package/dist/EditableAnnouncementBar.js

@@ -23,12 +23,13 @@ function EditableAnnouncementBar({ fieldPath = 'site.announcement', defaultText
     const { siteData } = (0, SiteDataProvider_1.useSiteData)();
     const [isDismissed, setIsDismissed] = (0, react_1.useState)(false);
     // Resolve dynamic values from siteData if present
-    const announcementData = siteData?.site?.announcement;
-    const isEnabled = announcementData?.enabled !== false;
+    const announcementData = siteData?.content?.site?.announcement || siteData?.site?.announcement;
+    const isEnabled = announcementData ? announcementData?.enabled !== false : true;
     const text = announcementData?.text || defaultText;
     const badge = announcementData?.badge || defaultBadge;
     const linkText = announcementData?.linkText || defaultLinkText;
     const linkUrl = announcementData?.linkUrl || defaultLinkUrl;
+    const activeFieldPath = announcementData ? fieldPath : undefined;
     if (isDismissed || !isEnabled) {
         return null;
     }
@@ -85,7 +86,7 @@ function EditableAnnouncementBar({ fieldPath = 'site.announcement', defaultText
         borderRadius: '0.25rem',
         transition: 'color 0.15s ease',
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-announcement-bar relative z-40 bg-slate-900 text-white text-xs md:text-sm font-medium px-4 py-2 flex items-center justify-center text-center ${className}`, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center flex-wrap gap-1.5 max-w-7xl mx-auto pr-6", children: [badge && ((0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-badge bg-white/20 text-white px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase inline-flex items-center", style: badgeStyle, "data-preview-field-path": fieldPath ? `${fieldPath}.badge` : undefined, children: badge })), (0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-text", "data-preview-field-path": fieldPath ? `${fieldPath}.text` : undefined, children: text }), linkText && linkUrl && ((0, jsx_runtime_1.jsxs)("a", { href: linkUrl, className: "deneb-announcement-link underline font-semibold text-white hover:opacity-90 transition-opacity ml-1 inline-flex items-center gap-1", style: linkStyle, "data-preview-field-path": fieldPath ? `${fieldPath}.linkText` : undefined, children: [linkText, " \u2192"] }))] }), dismissible && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsDismissed(true), style: closeButtonStyle, "aria-label": "Dismiss announcement", className: "hover:text-white transition-colors", "data-preview-static": "announcement-dismiss", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-announcement-bar relative z-40 bg-slate-900 text-white text-xs md:text-sm font-medium px-4 py-2 flex items-center justify-center text-center ${className}`, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center flex-wrap gap-1.5 max-w-7xl mx-auto pr-6", children: [badge && ((0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-badge bg-white/20 text-white px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase inline-flex items-center", style: badgeStyle, "data-preview-field-path": activeFieldPath ? `${activeFieldPath}.badge` : undefined, children: badge })), (0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-text", "data-preview-field-path": activeFieldPath ? `${activeFieldPath}.text` : undefined, children: text }), linkText && linkUrl && ((0, jsx_runtime_1.jsxs)("a", { href: linkUrl, className: "deneb-announcement-link underline font-semibold text-white hover:opacity-90 transition-opacity ml-1 inline-flex items-center gap-1", style: linkStyle, "data-preview-field-path": activeFieldPath ? `${activeFieldPath}.linkText` : undefined, children: [linkText, " \u2192"] }))] }), dismissible && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsDismissed(true), style: closeButtonStyle, "aria-label": "Dismiss announcement", className: "hover:text-white transition-colors", "data-preview-static": "announcement-dismiss", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
 }
 // Canonical alias
 exports.AnnouncementBar = EditableAnnouncementBar;

package/dist/EditableCustomerReviews.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+export interface CustomerReviewItem {
+    id?: string | number;
+    author: string;
+    rating: number;
+    date?: string;
+    comment: string;
+    verified?: boolean;
+    productName?: string;
+    helpfulCount?: number;
+    [key: string]: unknown;
+}
+export interface EditableCustomerReviewsProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Field path prefix for live Fivora Visual Editing synchronization (e.g. "home").
+     */
+    sectionPath?: string;
+    /**
+     * Title of the reviews section.
+     */
+    title?: string;
+    /**
+     * Subtitle tag.
+     */
+    subtitle?: string;
+    /**
+     * Average score (e.g. 4.9).
+     */
+    averageRating?: number | string;
+    /**
+     * Total review count display.
+     */
+    totalReviews?: number | string;
+    /**
+     * Array of reviews.
+     */
+    reviews?: CustomerReviewItem[];
+    className?: string;
+}
+/**
+ * EditableCustomerReviews is an elite social-proof component featuring
+ * star breakdowns, verified buyer authentication badges, helpful counters,
+ * and live Fivora visual editing synchronization.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function EditableCustomerReviews({ sectionPath, title, subtitle, averageRating, totalReviews, reviews, className, style, ...props }: EditableCustomerReviewsProps): React.JSX.Element;
+export declare const CustomerReviews: typeof EditableCustomerReviews;

package/dist/EditableCustomerReviews.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomerReviews = void 0;
+exports.EditableCustomerReviews = EditableCustomerReviews;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DEFAULT_REVIEWS = [
+    {
+        id: 1,
+        author: 'Liam Vance',
+        rating: 5,
+        date: '2 days ago',
+        comment: 'The cushioning and responsiveness are unbelievable. Best performance shoe I have owned for tempo runs.',
+        verified: true,
+        productName: 'VANTA Aero X',
+        helpfulCount: 14,
+    },
+    {
+        id: 2,
+        author: 'Elena Rostova',
+        rating: 5,
+        date: '1 week ago',
+        comment: 'Sleek design, fits true to size, and the breathability is noticeable on 10k morning runs. Highly recommended!',
+        verified: true,
+        productName: 'VANTA Flux 01',
+        helpfulCount: 9,
+    },
+    {
+        id: 3,
+        author: 'Marcus Chen',
+        rating: 4,
+        date: '2 weeks ago',
+        comment: 'Exceptional build quality and premium materials. Fast shipping and very responsive WhatsApp support.',
+        verified: true,
+        productName: 'VANTA Stealth Pro',
+        helpfulCount: 6,
+    },
+];
+/**
+ * EditableCustomerReviews is an elite social-proof component featuring
+ * star breakdowns, verified buyer authentication badges, helpful counters,
+ * and live Fivora visual editing synchronization.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function EditableCustomerReviews({ sectionPath = 'home', title = 'Loved by Athletes & Runners Worldwide', subtitle = 'Verified Customer Reviews', averageRating = '4.9', totalReviews = '1,420+', reviews = DEFAULT_REVIEWS, className = '', style, ...props }) {
+    const [selectedStarFilter, setSelectedStarFilter] = (0, react_1.useState)(null);
+    const filteredReviews = (0, react_1.useMemo)(() => {
+        if (selectedStarFilter === null)
+            return reviews;
+        return reviews.filter((r) => r.rating === selectedStarFilter);
+    }, [reviews, selectedStarFilter]);
+    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-customer-reviews max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center max-w-2xl mx-auto mb-12", children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsSubtitle`, className: "text-xs font-black tracking-widest uppercase text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.reviewsTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-center justify-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex text-amber-400 text-lg", children: '★★★★★' }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white font-extrabold text-lg", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsAverage`, children: averageRating }), " / 5.0"] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-slate-400 text-sm", children: ["(", (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.reviewsCount`, children: totalReviews }), " reviews)"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center gap-2 mb-8", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedStarFilter(null), className: `px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all ${selectedStarFilter === null
+                            ? 'bg-lime-400 text-slate-950 font-extrabold shadow-sm'
+                            : 'bg-slate-900/60 text-slate-400 hover:text-white border border-slate-800'}`, children: "All Reviews" }), [5, 4, 3].map((stars) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setSelectedStarFilter(stars), className: `px-3.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1 ${selectedStarFilter === stars
+                            ? 'bg-lime-400 text-slate-950 font-extrabold shadow-sm'
+                            : 'bg-slate-900/60 text-slate-400 hover:text-white border border-slate-800'}`, children: [(0, jsx_runtime_1.jsxs)("span", { children: [stars, " Stars"] }), (0, jsx_runtime_1.jsx)("span", { className: "text-amber-400", children: "\u2605" })] }, stars)))] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: filteredReviews.map((review, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "p-6 rounded-2xl bg-gradient-to-b from-slate-900/60 to-slate-950/80 border border-slate-800/80 flex flex-col justify-between hover:border-slate-700 transition-all duration-200", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex text-amber-400 text-sm", children: Array.from({ length: review.rating }).map((_, idx) => ((0, jsx_runtime_1.jsx)("span", { children: "\u2605" }, idx))) }), review.verified !== false && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 fill-current", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }), "Verified Buyer"] }))] }), (0, jsx_runtime_1.jsxs)("p", { "data-preview-field-path": `${sectionPath}.review${i + 1}Comment`, className: "text-sm text-slate-300 leading-relaxed italic mb-4", children: ["\u201C", review.comment, "\u201D"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "pt-4 border-t border-slate-800/60 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.review${i + 1}Author`, className: "block text-xs font-bold text-white", children: review.author }), review.productName && ((0, jsx_runtime_1.jsxs)("span", { className: "text-[11px] text-slate-400 block", children: ["Purchased: ", review.productName] }))] }), review.date && ((0, jsx_runtime_1.jsx)("span", { className: "text-[11px] text-slate-500 font-mono", children: review.date }))] })] }, review.id || i))) })] }));
+}
+// Canonical alias
+exports.CustomerReviews = EditableCustomerReviews;

package/dist/EditableImage.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableImage = EditableImage;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("./utils");
 const ASPECT_MAP = {
     square: '1 / 1',
     '1/1': '1 / 1',
@@ -34,5 +35,7 @@ function EditableImage({ id, 'data-preview-field-path': previewFieldPath, src, f
         ...(hoverZoom ? { transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)' } : {}),
         ...style,
     };
-    return ((0, jsx_runtime_1.jsx)("img", { "data-preview-field-path": path, src: src || fallbackSrc, alt: alt, style: combinedStyle, className: `editable-image ${hoverZoom ? 'hover:scale-105' : ''} ${className}`.trim(), ...props }));
+    const imageSrc = src || fallbackSrc;
+    const finalSrc = typeof imageSrc === 'string' && imageSrc.startsWith('/') ? (0, utils_1.withBasePath)(imageSrc) : imageSrc;
+    return ((0, jsx_runtime_1.jsx)("img", { "data-preview-field-path": path, src: finalSrc, alt: alt, style: combinedStyle, className: `editable-image ${hoverZoom ? 'hover:scale-105' : ''} ${className}`.trim(), ...props }));
 }

package/dist/EditableProductDetail.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+export interface ProductDetailItem {
+    id?: string;
+    name?: string;
+    title?: string;
+    price?: string | number;
+    originalPrice?: string | number;
+    description?: string;
+    badge?: string;
+    featuredImage?: string;
+    imageUrl?: string;
+    gallery?: string[];
+    addToSelectionLabel?: string;
+    specsTitle?: string;
+    specs?: Array<{
+        label: string;
+        value: string;
+    }>;
+    shippingTitle?: string;
+    shippingSummary?: string;
+    shippingReturns?: string;
+    relatedLabel?: string;
+    relatedTitle?: string;
+    whatsappNumber?: string;
+    whatsappMessage?: string;
+    [key: string]: unknown;
+}
+export interface EditableProductDetailProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Field path prefix for live Fivora Visual Editing synchronization (e.g. "product").
+     */
+    sectionPath?: string;
+    /**
+     * Product data object.
+     */
+    product: ProductDetailItem;
+    /**
+     * Available sizes (e.g. ['40', '41', '42', '43', '44', '45', '46']).
+     */
+    sizes?: string[];
+    /**
+     * Available color swatches.
+     */
+    colors?: Array<{
+        name: string;
+        hex: string;
+    }>;
+    /**
+     * Callback on adding product to selection or cart.
+     */
+    onAddToSelection?: (product: ProductDetailItem, selectedSize?: string, selectedColor?: string) => void;
+    /**
+     * Optional custom WhatsApp order URL.
+     */
+    whatsappUrl?: string;
+    className?: string;
+}
+/**
+ * EditableProductDetail is an elite, fully calibrated Single Product View component
+ * engineered for high-conversion commerce and 100% compliant with Fivora Visual Editing.
+ *
+ * Features:
+ * - Multi-image gallery with active thumbnail selector and basePath resolution
+ * - Floating badges with conditional rendering (zero hidden marker contract violations)
+ * - Live synchronized field paths for Title, Price, Description, CTAs, and Policies
+ * - Interactive size & color pickers
+ * - Direct WhatsApp Click-to-Order integration
+ * - Specifications and Shipping & Returns tabs
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function EditableProductDetail({ sectionPath, product, sizes, colors, onAddToSelection, whatsappUrl, className, style, ...props }: EditableProductDetailProps): React.JSX.Element;

package/dist/EditableProductDetail.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableProductDetail = EditableProductDetail;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const urls_1 = require("./utils/urls");
+/**
+ * EditableProductDetail is an elite, fully calibrated Single Product View component
+ * engineered for high-conversion commerce and 100% compliant with Fivora Visual Editing.
+ *
+ * Features:
+ * - Multi-image gallery with active thumbnail selector and basePath resolution
+ * - Floating badges with conditional rendering (zero hidden marker contract violations)
+ * - Live synchronized field paths for Title, Price, Description, CTAs, and Policies
+ * - Interactive size & color pickers
+ * - Direct WhatsApp Click-to-Order integration
+ * - Specifications and Shipping & Returns tabs
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function EditableProductDetail({ sectionPath = 'product', product, sizes = ['40', '41', '42', '43', '44', '45', '46'], colors = [
+    { name: 'Ivory', hex: '#F0EFEB' },
+    { name: 'Obsidian', hex: '#1C2541' },
+], onAddToSelection, whatsappUrl, className = '', style, ...props }) {
+    const images = (product.gallery && product.gallery.length > 0)
+        ? product.gallery
+        : [product.featuredImage || product.imageUrl || '/products/vanta-aero-x.jpg'];
+    const [activeImage, setActiveImage] = (0, react_1.useState)(images[0] || '');
+    const [selectedSize, setSelectedSize] = (0, react_1.useState)(sizes[0] || '');
+    const [selectedColor, setSelectedColor] = (0, react_1.useState)(colors[0]?.name || '');
+    const [activeTab, setActiveTab] = (0, react_1.useState)('specs');
+    const name = String(product.name || product.title || 'Product Title');
+    const price = product.price !== undefined ? String(product.price) : 'LKR 0';
+    const description = String(product.description || '');
+    const badge = String(product.badge || '');
+    const addToSelectionLabel = String(product.addToSelectionLabel || 'Add to Selection');
+    const specsTitle = String(product.specsTitle || 'Specifications');
+    const shippingTitle = String(product.shippingTitle || 'Shipping & Returns');
+    const shippingSummary = String(product.shippingSummary || 'Free Islandwide Delivery within 2-3 business days. Cash on delivery available.');
+    const shippingReturns = String(product.shippingReturns || '14-day hassle-free exchanges for unworn items in original packaging.');
+    const resolvedWhatsappUrl = whatsappUrl || (product.whatsappNumber
+        ? (0, urls_1.createWhatsAppUrl)(product.whatsappNumber, product.whatsappMessage || `Hi, I would like to order ${name} (${selectedSize}, ${selectedColor}) - ${price}`)
+        : '');
+    return ((0, jsx_runtime_1.jsx)("section", { "data-preview-page-key": sectionPath, className: `editable-product-detail max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start", children: [(0, jsx_runtime_1.jsxs)("div", { className: "lg:col-span-7 flex flex-col-reverse md:flex-row gap-4", children: [images.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex md:flex-col gap-3 overflow-x-auto md:overflow-y-auto max-h-[580px] pb-2 md:pb-0 scrollbar-none", children: images.map((img, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveImage(img), className: `w-20 h-20 sm:w-24 sm:h-24 rounded-2xl overflow-hidden border-2 transition-all duration-200 flex-shrink-0 bg-slate-900/40 p-2 ${activeImage === img
+                                    ? 'border-brand-primary scale-98 shadow-md'
+                                    : '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.jsxs)("div", { className: "mt-4 flex items-baseline gap-3", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.price`, className: "text-3xl font-black text-lime-400 tracking-tight", children: price }), product.originalPrice ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-medium text-slate-500 line-through", children: String(product.originalPrice) })) : null] }), description && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.description`, className: "mt-6 text-base text-slate-300 leading-relaxed", children: description })), colors.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 gap-3", children: colors.map((c) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedColor(c.name), className: `w-9 h-9 rounded-full border-2 transition-all p-0.5 ${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 }, title: c.name, "aria-label": c.name }, c.name))) })] })), sizes.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: "Select Size" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 sm:grid-cols-7 gap-2", children: sizes.map((s) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedSize(s), className: `py-2.5 rounded-xl font-bold text-sm transition-all duration-150 ${selectedSize === s
+                                                ? 'bg-white text-slate-950 shadow-md font-extrabold scale-102'
+                                                : 'bg-slate-900/60 text-slate-300 border border-slate-800 hover:bg-slate-800 hover:text-white'}`, children: 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", onClick: () => onAddToSelection?.(product, selectedSize, selectedColor), 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", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.addToSelectionLabel`, children: addToSelectionLabel }) }), 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: product.specs && product.specs.length > 0 ? (product.specs.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: "Upper Material" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Engineered breathable mesh" })] }), (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: "Midsole Technology" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Dual-density responsive foam" })] }), (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: "Outsole Grip" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "High-abrasion tactical rubber" })] })] })) })) : ((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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ProductItem, ProductCardVariant } from './EditableProductCard';
+export interface EditableProductGridProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Field path prefix for live Fivora Visual Editing synchronization (e.g. "home").
+     */
+    sectionPath?: string;
+    /**
+     * Title of the product grid section.
+     */
+    title?: string;
+    /**
+     * Subtitle or category tag for the grid section.
+     */
+    subtitle?: string;
+    /**
+     * Array of product items.
+     */
+    products: ProductItem[];
+    /**
+     * Optional category filter tabs (e.g. ['All', 'Sneakers', 'Performance', 'Lifestyle']).
+     */
+    categories?: string[];
+    /**
+     * Card visual variant: 'modern-glass' | 'classic' | 'minimal' | 'horizontal'.
+     */
+    cardVariant?: ProductCardVariant;
+    /**
+     * Responsive columns configuration.
+     */
+    columns?: {
+        mobile?: number;
+        tablet?: number;
+        desktop?: number;
+    };
+    /**
+     * Callback when a user clicks the quick view action on a card.
+     */
+    onQuickView?: (product: ProductItem, itemPath: string) => void;
+    /**
+     * Custom field path prefix for individual cards (default: "product").
+     * e.g. "home.product1", "home.product2", etc.
+     */
+    cardPrefix?: string;
+    className?: string;
+}
+/**
+ * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
+ * with interactive category filtering, live Fivora visual editing synchronization,
+ * and built-in Quick View modal triggers.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+export declare function EditableProductGrid({ sectionPath, title, subtitle, products, categories, cardVariant, columns, onQuickView, cardPrefix, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
+export declare const ProductGrid: typeof EditableProductGrid;

package/dist/EditableProductGrid.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProductGrid = void 0;
+exports.EditableProductGrid = EditableProductGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const EditableProductCard_1 = require("./EditableProductCard");
+/**
+ * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
+ * with interactive category filtering, live Fivora visual editing synchronization,
+ * and built-in Quick View modal triggers.
+ *
+ * Created by Chamika Gayashan & Induranga Kawishwara
+ */
+function EditableProductGrid({ sectionPath = 'home', title = 'Featured Collection', subtitle = 'Just Dropped', products = [], categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', className = '', style, ...props }) {
+    const [activeCategory, setActiveCategory] = (0, react_1.useState)(categories[0] || 'All');
+    const filteredProducts = (0, react_1.useMemo)(() => {
+        if (!activeCategory || activeCategory.toLowerCase() === 'all') {
+            return products;
+        }
+        return products.filter((p) => {
+            const cat = String(p.category || '').toLowerCase();
+            return cat === activeCategory.toLowerCase();
+        });
+    }, [products, activeCategory]);
+    // Map column config to CSS grid class names
+    const gridColClasses = (0, react_1.useMemo)(() => {
+        const m = columns.mobile || 1;
+        const t = columns.tablet || 2;
+        const d = columns.desktop || 4;
+        const mClass = m === 2 ? 'grid-cols-2' : 'grid-cols-1';
+        const tClass = t === 3 ? 'sm:grid-cols-3' : 'sm:grid-cols-2';
+        const dClass = d === 3 ? 'lg:grid-cols-3' : d === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4';
+        return `${mClass} ${tClass} ${dClass}`;
+    }, [columns]);
+    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-product-grid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.gridSubtitle`, className: "text-xs font-black tracking-widest uppercase text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.gridTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: title })] }), categories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: categories.map((cat) => {
+                            const isActive = activeCategory.toLowerCase() === cat.toLowerCase();
+                            return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory(cat), className: `px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${isActive
+                                    ? 'bg-white text-slate-950 shadow-md scale-102 font-extrabold'
+                                    : 'bg-slate-900/60 text-slate-400 hover:text-white border border-slate-800/80 hover:bg-slate-850'}`, children: cat }, cat));
+                        }) }))] }), filteredProducts.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: `grid ${gridColClasses} gap-6 sm:gap-8`, children: filteredProducts.map((product, idx) => {
+                    const itemPath = `${sectionPath}.${cardPrefix}${idx + 1}`;
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
+                }) })) : (
+            /* Empty State */
+            (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-20 px-4 rounded-3xl border border-dashed border-slate-800 bg-slate-900/30", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-medium text-slate-400", children: ["No products found matching category \"", activeCategory, "\"."] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory('All'), className: "mt-4 px-4 py-2 rounded-xl text-xs font-bold bg-lime-400 text-slate-950 hover:bg-lime-300 transition-colors", children: "View All Products" })] }))] }));
+}
+// Canonical alias
+exports.ProductGrid = EditableProductGrid;

package/dist/ProductQuickView.d.ts

@@ -12,6 +12,7 @@ export interface ProductQuickViewItem {
     inStock?: boolean;
     rating?: number;
     reviewCount?: number;
+    [key: string]: unknown;
 }
 export interface ProductQuickViewProps {
     product: ProductQuickViewItem | null;
@@ -19,19 +20,20 @@ export interface ProductQuickViewProps {
     onClose: () => void;
     onAddToCart?: (product: ProductQuickViewItem, quantity: number) => void;
     className?: string;
+    /**
+     * Field path prefix for live visual editing synchronization in Fivora Lab.
+     * e.g. "home.product1" or "product"
+     */
+    itemPath?: string;
+    addToCartLabel?: string;
 }
 /**
  * DENEB UI — Product Quick View Modal
  *
  * High-converting instant lightbox inspection modal for products.
  * Enables shoppers to inspect details and buy without leaving page flow.
- *
- * Features:
- * - Image gallery thumbnail preview
- * - Live quantity counter with bounds protection
- * - Accessible keyboard interaction (Esc key to close)
- * - Backdrop blur with smooth animation
+ * Fully synchronized with Fivora Visual Editing contract.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-export declare function ProductQuickView({ product, isOpen, onClose, onAddToCart, className, }: ProductQuickViewProps): React.JSX.Element | null;
+export declare function ProductQuickView({ product, isOpen, onClose, onAddToCart, className, itemPath, addToCartLabel, }: ProductQuickViewProps): React.JSX.Element | null;

package/dist/ProductQuickView.js

@@ -3,21 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductQuickView = ProductQuickView;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const utils_1 = require("./utils");
 /**
  * DENEB UI — Product Quick View Modal
  *
  * High-converting instant lightbox inspection modal for products.
  * Enables shoppers to inspect details and buy without leaving page flow.
- *
- * Features:
- * - Image gallery thumbnail preview
- * - Live quantity counter with bounds protection
- * - Accessible keyboard interaction (Esc key to close)
- * - Backdrop blur with smooth animation
+ * Fully synchronized with Fivora Visual Editing contract.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '', }) {
+function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '', itemPath, addToCartLabel = 'Add to Selection', }) {
     const [quantity, setQuantity] = (0, react_1.useState)(1);
     const [selectedImage, setSelectedImage] = (0, react_1.useState)('');
     (0, react_1.useEffect)(() => {
@@ -56,8 +52,8 @@ function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '
     return ((0, jsx_runtime_1.jsx)("div", { role: "dialog", "aria-modal": "true", className: `fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/60 backdrop-blur-sm transition-opacity duration-200 ${className}`, onClick: (e) => {
             if (e.target === e.currentTarget)
                 onClose();
-        }, 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", { 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", { src: 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: 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 ${product.inStock !== false ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'}`, children: product.inStock !== false ? '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", { 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", { 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", { 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: product.inStock === false, 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: {
+        }, 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 ${product.inStock !== false ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700'}`, children: product.inStock !== false ? '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: product.inStock === false, 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" }) }), "Add to Cart"] })] })] })] }) }));
+                                    }, 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: addToCartLabel })] })] })] })] }) }));
 }

package/dist/index.d.ts

@@ -9,6 +9,9 @@ export * from './EditableBox';
 export * from './EditableGrid';
 export * from './EditableSection';
 export * from './EditableProductCard';
+export * from './EditableProductGrid';
+export * from './EditableProductDetail';
+export * from './EditableCustomerReviews';
 export * from './EditableServiceCard';
 export * from './EditableCard';
 export * from './EditablePricingCard';
@@ -47,6 +50,9 @@ export { EditableSection as Section } from './EditableSection';
 export { EditableBox as Box } from './EditableBox';
 export { EditableList as List } from './EditableList';
 export { EditableProductCard as ProductCard } from './EditableProductCard';
+export { EditableProductGrid as ProductGrid } from './EditableProductGrid';
+export { EditableProductDetail as ProductDetail } from './EditableProductDetail';
+export { EditableCustomerReviews as CustomerReviews } from './EditableCustomerReviews';
 export { EditableServiceCard as ServiceCard } from './EditableServiceCard';
 export { EditablePricingCard as PricingCard } from './EditablePricingCard';
 export { EditableTestimonialCard as TestimonialCard } from './EditableTestimonialCard';

package/dist/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CEEG_AUTHOR = exports.CEEG_FRAMEWORK_VERSION = exports.CEEG_FRAMEWORK_NAME = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FloatingContactWidget = exports.CookieConsentBanner = exports.ProductQuickView = exports.TrustBadges = exports.StickyMobileBar = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = void 0;
+exports.CEEG_AUTHOR = exports.CEEG_FRAMEWORK_VERSION = exports.CEEG_FRAMEWORK_NAME = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FloatingContactWidget = exports.CookieConsentBanner = exports.ProductQuickView = exports.TrustBadges = exports.StickyMobileBar = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.CustomerReviews = exports.ProductDetail = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = void 0;
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
 __exportStar(require("./EditableList"), exports);
@@ -26,6 +26,9 @@ __exportStar(require("./EditableBox"), exports);
 __exportStar(require("./EditableGrid"), exports);
 __exportStar(require("./EditableSection"), exports);
 __exportStar(require("./EditableProductCard"), exports);
+__exportStar(require("./EditableProductGrid"), exports);
+__exportStar(require("./EditableProductDetail"), exports);
+__exportStar(require("./EditableCustomerReviews"), exports);
 __exportStar(require("./EditableServiceCard"), exports);
 __exportStar(require("./EditableCard"), exports);
 __exportStar(require("./EditablePricingCard"), exports);
@@ -80,6 +83,12 @@ var EditableList_1 = require("./EditableList");
 Object.defineProperty(exports, "List", { enumerable: true, get: function () { return EditableList_1.EditableList; } });
 var EditableProductCard_1 = require("./EditableProductCard");
 Object.defineProperty(exports, "ProductCard", { enumerable: true, get: function () { return EditableProductCard_1.EditableProductCard; } });
+var EditableProductGrid_1 = require("./EditableProductGrid");
+Object.defineProperty(exports, "ProductGrid", { enumerable: true, get: function () { return EditableProductGrid_1.EditableProductGrid; } });
+var EditableProductDetail_1 = require("./EditableProductDetail");
+Object.defineProperty(exports, "ProductDetail", { enumerable: true, get: function () { return EditableProductDetail_1.EditableProductDetail; } });
+var EditableCustomerReviews_1 = require("./EditableCustomerReviews");
+Object.defineProperty(exports, "CustomerReviews", { enumerable: true, get: function () { return EditableCustomerReviews_1.EditableCustomerReviews; } });
 var EditableServiceCard_1 = require("./EditableServiceCard");
 Object.defineProperty(exports, "ServiceCard", { enumerable: true, get: function () { return EditableServiceCard_1.EditableServiceCard; } });
 var EditablePricingCard_1 = require("./EditablePricingCard");

package/dist/utils/urls.d.ts

@@ -30,3 +30,11 @@ export declare function createMapUrl(location?: MapLocationInput | string | null
  * Validates if a string is a safe, valid external link (prevents script injection).
  */
 export declare function isSafeExternalLink(url?: string | null): boolean;
+/**
+ * Resolves static assets and routes with subpath prefix support (e.g. Fivora preview lab).
+ */
+export declare function withBasePath(value?: string | null): string;
+/**
+ * Resolves standard page route from pageKey.
+ */
+export declare function pageRoute(pageKey: string): string;

package/dist/utils/urls.js

@@ -9,6 +9,8 @@ exports.createPhoneUrl = createPhoneUrl;
 exports.createEmailUrl = createEmailUrl;
 exports.createMapUrl = createMapUrl;
 exports.isSafeExternalLink = isSafeExternalLink;
+exports.withBasePath = withBasePath;
+exports.pageRoute = pageRoute;
 /**
  * Creates a valid WhatsApp click-to-chat URL.
  * Automatically cleans spaces, dashes, and special characters from the phone number.
@@ -89,3 +91,20 @@ function isSafeExternalLink(url) {
         trimmed.startsWith('/') ||
         trimmed.startsWith('#'));
 }
+/**
+ * Resolves static assets and routes with subpath prefix support (e.g. Fivora preview lab).
+ */
+function withBasePath(value) {
+    const url = value?.trim() ?? '';
+    if (!url || /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(url))
+        return url;
+    const basePath = (typeof process !== 'undefined' ? process.env?.NEXT_PUBLIC_SITE_BASE_PATH ?? '' : '').replace(/\/$/, '');
+    const path = url.startsWith('/') ? url : `/${url}`;
+    return `${basePath}${path}`;
+}
+/**
+ * Resolves standard page route from pageKey.
+ */
+function pageRoute(pageKey) {
+    return pageKey === 'home' ? '/' : `/${pageKey}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "DENEB UI - The premier visual-first React component framework for the modern web. Created by Chamika Gayashan & Induranga Kawishwara.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",