@deneb-ui/ui 2.0.14 → 2.0.15

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/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/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,7 @@ export * from './EditableBox';
 export * from './EditableGrid';
 export * from './EditableSection';
 export * from './EditableProductCard';
+export * from './EditableProductDetail';
 export * from './EditableServiceCard';
 export * from './EditableCard';
 export * from './EditablePricingCard';
@@ -47,6 +48,7 @@ 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 { EditableProductDetail as ProductDetail } from './EditableProductDetail';
 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.ProductDetail = 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,7 @@ __exportStar(require("./EditableBox"), exports);
 __exportStar(require("./EditableGrid"), exports);
 __exportStar(require("./EditableSection"), exports);
 __exportStar(require("./EditableProductCard"), exports);
+__exportStar(require("./EditableProductDetail"), exports);
 __exportStar(require("./EditableServiceCard"), exports);
 __exportStar(require("./EditableCard"), exports);
 __exportStar(require("./EditablePricingCard"), exports);
@@ -80,6 +81,8 @@ 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 EditableProductDetail_1 = require("./EditableProductDetail");
+Object.defineProperty(exports, "ProductDetail", { enumerable: true, get: function () { return EditableProductDetail_1.EditableProductDetail; } });
 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.15",
   "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",