@deneb-ui/ui 2.0.126 → 2.0.128

package/README.md

@@ -637,6 +637,12 @@ export function PromoSection() {
 
 DENEB UI commerce components natively support both **Single Fixed Prices** and **Dynamic Price Ranges**, as well as apparel clothing options (color swatches with image swapping and size chips).
 
+Fivora uses one canonical catalog contract: `ProductCard` is the commerce
+renderer, `ServiceCard` is the service/quote renderer, and `UniversalCard` is
+reserved for other generic entity listings. Keep `imageUrl` as the primary
+image and `additionalImages` as the ordered gallery; DENEB normalizes them to
+`images`/`gallery` for detail and quick-view components.
+
 Keep `price`, `compareAtPrice`, `minPrice`, `maxPrice`, and variant prices as
 JSON numbers. Keep `currency` or a currency symbol as separate text. A formatted
 `priceRange` string is display-only; numeric filters and sorting must use the
@@ -653,7 +659,8 @@ import { ProductCard } from "@deneb-ui/ui";
     price: 3500,
     compareAtPrice: 4500,
     currency: "LKR",
-    imageUrl: "/images/shirt.jpg"
+    imageUrl: "/images/shirt.jpg",
+    additionalImages: ["/images/shirt-back.jpg", "/images/shirt-detail.jpg"]
   }}
   itemPath="products[0]"
 />
@@ -673,6 +680,7 @@ import { ProductCard } from "@deneb-ui/ui";
     isPriceRange: true,
     currency: "LKR",
     imageUrl: "/images/tunic-navy.jpg",
+    additionalImages: ["/images/tunic-back.jpg", "/images/tunic-detail.jpg"],
     colors: [
       { name: "Navy Blue", hex: "#1e3a8a", imageUrl: "/images/tunic-navy.jpg" },
       { name: "Olive Green", hex: "#3f6212", imageUrl: "/images/tunic-olive.jpg" },

package/dist/EditableProductCard.d.ts

@@ -29,12 +29,19 @@ export interface ProductItem {
     productImage?: string;
     gallery?: string[];
     images?: string[];
+    additionalImages?: string[];
     badge?: string;
     tag?: string;
     rating?: number | string;
     reviewsCount?: number | string;
     isNew?: boolean;
     isBestSeller?: boolean;
+    isAvailable?: boolean;
+    inStock?: boolean;
+    available?: boolean;
+    isActive?: boolean;
+    active?: boolean;
+    status?: string;
     whatsappNumber?: string;
     whatsappButtonText?: string;
     addToCartButtonText?: string;

package/dist/EditableProductCard.js

@@ -9,6 +9,7 @@ const EditableImage_1 = require("./EditableImage");
 const useCart_1 = require("./cart/useCart");
 const productOptions_1 = require("./utils/productOptions");
 const PlatformProductDetail_1 = require("./PlatformProductDetail");
+const catalogMedia_1 = require("./utils/catalogMedia");
 const COLOR_HEX_MAP = {
     black: '#111827',
     white: '#ffffff',
@@ -166,14 +167,7 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
     const badge = String(product?.badge || product?.tag || '');
     const hasBadgeField = Boolean(product && ('badge' in product || 'tag' in product));
     const fallbackImage = imageFallback || 'https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=800&q=80';
-    const rawImage = product?.imageUrl ||
-        product?.image ||
-        product?.photo ||
-        product?.thumbnail ||
-        product?.productImage ||
-        (Array.isArray(product?.gallery) && product.gallery[0]) ||
-        (Array.isArray(product?.images) && product.images[0]);
-    const baseImageUrl = String(rawImage || fallbackImage);
+    const baseImageUrl = (0, catalogMedia_1.resolveCatalogPrimaryImage)(product, fallbackImage);
     // Active image: clicked color image -> resolved variant image -> product base image
     const currentImage = colorImage || resolvedPrice.variantImage || baseImageUrl;
     const imageKey = 'image' in (product || {}) && !('imageUrl' in (product || {}) && product.imageUrl)
@@ -457,7 +451,7 @@ function EditableProductCard({ itemPath, product: productProp, item: itemProp, c
                                             fontSize: '0.8rem',
                                             fontWeight: 500,
                                             color: 'var(--muted-text, #64748b)',
-                                        } })) : null] })) : !effectiveShowPrice ? ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                        } })) : null] })) : (!effectiveShowPrice || !hasPrice) ? ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: (0, jsx_runtime_1.jsx)("span", { style: {
                                         display: 'inline-flex',
                                         alignItems: 'center',
                                         padding: '4px 10px',

package/dist/EditableProductDetail.d.ts

@@ -16,6 +16,7 @@ export interface ProductDetailItem {
     image?: string;
     gallery?: string[];
     images?: string[];
+    additionalImages?: string[];
     addToSelectionLabel?: string;
     specsTitle?: string;
     specs?: Array<{

package/dist/EditableProductDetail.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const utils_1 = require("./utils");
 const productOptions_1 = require("./utils/productOptions");
 const urls_1 = require("./utils/urls");
+const catalogMedia_1 = require("./utils/catalogMedia");
 /**
  * EditableProductDetail is an elite, fully calibrated Single Product View component
  * engineered for high-conversion commerce and 100% compliant with Fivora Visual Editing.
@@ -28,14 +29,11 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes, colors
     const productRecord = (product || {});
     const productPhoto = productRecord.photo;
     const productThumbnail = productRecord.thumbnail;
-    const validImages = (0, react_1.useMemo)(() => {
-        const rawList = (product.gallery && product.gallery.length > 0)
-            ? product.gallery
-            : (product.images && product.images.length > 0)
-                ? product.images
-                : [product.featuredImage || product.imageUrl || product.image || productPhoto || productThumbnail || '/products/vanta-aero-x.jpg'];
-        return rawList.filter(Boolean);
-    }, [product.gallery, product.images, product.featuredImage, product.imageUrl, product.image, productPhoto, productThumbnail]);
+    const validImages = (0, react_1.useMemo)(() => (0, catalogMedia_1.resolveCatalogImages)({
+        ...product,
+        photo: productPhoto,
+        thumbnail: productThumbnail,
+    }, '/products/vanta-aero-x.jpg'), [product, productPhoto, productThumbnail]);
     // 2. Resolve Options (Sizes, Volumes, Weights, Counts)
     const resolved = (0, productOptions_1.resolveProductOptions)(product);
     const effectiveOptions = (0, react_1.useMemo)(() => {

package/dist/EditableServiceCard.d.ts

@@ -4,13 +4,30 @@ export interface ServiceItem {
     name?: string;
     title?: string;
     price?: string | number;
+    cost?: string | number;
+    amount?: string | number;
+    rate?: string | number;
+    serviceFee?: string | number;
+    servicePrice?: string | number;
+    compareAtPrice?: string | number;
+    originalPrice?: string | number;
     priceLabel?: string;
     showPrice?: boolean;
+    currency?: string;
     customData?: Record<string, unknown>;
     description?: string;
     imageUrl?: string;
     image?: string;
+    gallery?: string[];
+    images?: string[];
+    additionalImages?: string[];
     features?: unknown[];
+    badge?: string;
+    tag?: string;
+    isActive?: boolean;
+    active?: boolean;
+    isAvailable?: boolean;
+    available?: boolean;
     [key: string]: unknown;
 }
 export interface EditableServiceCardProps extends React.HTMLAttributes<HTMLElement> {
@@ -35,9 +52,17 @@ export interface EditableServiceCardProps extends React.HTMLAttributes<HTMLEleme
      */
     align?: 'left' | 'center' | 'right';
     showPrice?: boolean;
+    /**
+     * Whether to show active/inactive status badge (default: true).
+     */
+    showStatusBadge?: boolean;
+    /**
+     * Currency code override (e.g. "LKR", "USD"). If omitted, auto-resolves from live shop profile.
+     */
+    currency?: string;
 }
 /**
  * EditableServiceCard standardizes service presentation across Home and Services pages.
  * Supports service name, description, image, and repeatable features checklist.
  */
-export declare function EditableServiceCard({ itemPath, service, imageFallback, as: Component, align, showPrice, className, style, children, ...props }: EditableServiceCardProps): React.JSX.Element;
+export declare function EditableServiceCard({ itemPath, service, imageFallback, as: Component, align, showPrice, showStatusBadge, currency: currencyOverride, className, style, children, ...props }: EditableServiceCardProps): React.JSX.Element;

package/dist/EditableServiceCard.js

@@ -4,11 +4,18 @@ exports.EditableServiceCard = EditableServiceCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const EditableText_1 = require("./EditableText");
 const EditableImage_1 = require("./EditableImage");
+const catalogMedia_1 = require("./utils/catalogMedia");
+const SiteDataProvider_1 = require("./SiteDataProvider");
 /**
  * EditableServiceCard standardizes service presentation across Home and Services pages.
  * Supports service name, description, image, and repeatable features checklist.
  */
-function EditableServiceCard({ itemPath, service, imageFallback = '/placeholder.svg', as: Component = 'article', align = 'left', showPrice = true, className = '', style, children, ...props }) {
+function EditableServiceCard({ itemPath, service, imageFallback = '/placeholder.svg', as: Component = 'article', align = 'left', showPrice = true, showStatusBadge = true, currency: currencyOverride, className = '', style, children, ...props }) {
+    const isServiceActive = service?.isActive !== false &&
+        service?.active !== false &&
+        service?.isAvailable !== false &&
+        service?.available !== false;
+    const badgeCandidate = service?.badge || service?.tag;
     const name = String(service?.name || service?.title || '');
     const description = String(service?.description || '');
     const itemShowPrice = service.showPrice !== undefined
@@ -21,37 +28,95 @@ function EditableServiceCard({ itemPath, service, imageFallback = '/placeholder.
     const hasRawPrice = rawPriceCandidate !== undefined && rawPriceCandidate !== null && String(rawPriceCandidate).trim() !== '';
     const priceLabel = service?.priceLabel ? String(service.priceLabel) : '';
     const hasPrice = effectiveShowPrice && (hasRawPrice || Boolean(priceLabel));
+    const liveCurrency = (0, SiteDataProvider_1.useCurrency)();
+    const currency = currencyOverride || service?.currency || liveCurrency;
     const formattedPrice = hasRawPrice
         ? typeof rawPriceCandidate === 'number'
-            ? 'LKR ' + rawPriceCandidate.toLocaleString()
-            : String(rawPriceCandidate).includes('LKR')
+            ? currency + ' ' + rawPriceCandidate.toLocaleString()
+            : String(rawPriceCandidate).match(/^[A-Z]{3}\s/) || String(rawPriceCandidate).includes(currency)
                 ? String(rawPriceCandidate)
-                : 'LKR ' + String(rawPriceCandidate)
+                : currency + ' ' + String(rawPriceCandidate)
         : '';
-    const imageUrl = String(service?.imageUrl || service?.image || '');
+    const rawCompareCandidate = service?.compareAtPrice || service?.originalPrice;
+    const hasComparePrice = effectiveShowPrice &&
+        rawCompareCandidate !== undefined &&
+        rawCompareCandidate !== null &&
+        String(rawCompareCandidate).trim() !== '' &&
+        Number(rawCompareCandidate) > Number(rawPriceCandidate);
+    const formattedComparePrice = hasComparePrice
+        ? typeof rawCompareCandidate === 'number'
+            ? currency + ' ' + rawCompareCandidate.toLocaleString()
+            : String(rawCompareCandidate).match(/^[A-Z]{3}\s/) || String(rawCompareCandidate).includes(currency)
+                ? String(rawCompareCandidate)
+                : currency + ' ' + String(rawCompareCandidate)
+        : '';
+    const serviceImages = (0, catalogMedia_1.resolveCatalogImages)(service);
+    const imageUrl = serviceImages[0] || '';
     const features = Array.isArray(service?.features) ? service.features : [];
     const mergedStyle = {
         textAlign: align,
+        opacity: !isServiceActive ? 0.72 : 1,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, className: `editable-service-card ${className}`.trim(), style: mergedStyle, ...props, children: [(imageUrl || service?.imageUrl !== undefined || service?.image !== undefined) && ((0, jsx_runtime_1.jsx)("div", { className: "service-card-image-wrap", children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.imageUrl`, "data-preview-field-path": `${itemPath}.imageUrl`, src: imageUrl, fallbackSrc: imageFallback, alt: name, className: "service-card-image" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "service-card-body", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: `${itemPath}.name`, "data-preview-field-path": `${itemPath}.name`, defaultValue: name, className: "service-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.description`, "data-preview-field-path": `${itemPath}.description`, defaultValue: description, className: "service-card-description" }), hasPrice ? ((0, jsx_runtime_1.jsxs)("div", { className: "service-card-price-wrap", style: { margin: '0.5rem 0', display: 'flex', alignItems: 'baseline', gap: '0.375rem', flexWrap: 'wrap' }, children: [hasRawPrice && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.price`, "data-preview-field-path": `${itemPath}.price`, defaultValue: formattedPrice, className: "service-card-price", style: {
+    const badgeElement = (badgeCandidate || (!isServiceActive && showStatusBadge)) ? ((0, jsx_runtime_1.jsx)("div", { className: "service-card-badge-wrap", style: {
+            position: 'absolute',
+            top: '0.75rem',
+            left: '0.75rem',
+            zIndex: 3,
+            display: 'flex',
+            gap: '0.375rem',
+            pointerEvents: 'none',
+        }, children: !isServiceActive && showStatusBadge ? ((0, jsx_runtime_1.jsxs)("span", { className: "service-card-status-badge inactive", style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: '0.25rem',
+                padding: '0.25rem 0.625rem',
+                borderRadius: '9999px',
+                fontSize: '0.6875rem',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                backgroundColor: 'rgba(239, 68, 68, 0.95)',
+                color: '#ffffff',
+                boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
+            }, children: [(0, jsx_runtime_1.jsx)("span", { style: { width: 6, height: 6, borderRadius: '50%', backgroundColor: 'currentColor' } }), "Unavailable"] })) : badgeCandidate ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.badge`, "data-preview-field-path": `${itemPath}.badge`, defaultValue: String(badgeCandidate), className: "service-card-badge", style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: '0.25rem 0.625rem',
+                borderRadius: '9999px',
+                fontSize: '0.6875rem',
+                fontWeight: 700,
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                backgroundColor: 'var(--brand-color, #2563eb)',
+                color: '#ffffff',
+                boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
+                pointerEvents: 'auto',
+            } })) : null })) : null;
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, className: `editable-service-card ${!isServiceActive ? 'is-inactive is-unavailable' : ''} ${className}`.trim(), style: mergedStyle, ...props, children: [(imageUrl || service?.imageUrl !== undefined || service?.image !== undefined) ? ((0, jsx_runtime_1.jsxs)("div", { className: "service-card-image-wrap", style: { position: 'relative' }, children: [badgeElement, (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.imageUrl`, "data-preview-field-path": `${itemPath}.imageUrl`, src: imageUrl, fallbackSrc: imageFallback, alt: name, className: "service-card-image" })] })) : badgeElement ? ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: '100%', height: '1.75rem', marginBottom: '0.5rem' }, children: badgeElement })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "service-card-body", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: `${itemPath}.name`, "data-preview-field-path": `${itemPath}.name`, defaultValue: name, className: "service-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: `${itemPath}.description`, "data-preview-field-path": `${itemPath}.description`, defaultValue: description, className: "service-card-description" }), hasPrice ? ((0, jsx_runtime_1.jsxs)("div", { className: "service-card-price-wrap", style: { margin: '0.5rem 0', display: 'flex', alignItems: 'baseline', gap: '0.5rem', flexWrap: 'wrap' }, children: [hasRawPrice && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.price`, "data-preview-field-path": `${itemPath}.price`, defaultValue: formattedPrice, className: "service-card-price", style: {
                                     fontSize: '1.125rem',
                                     fontWeight: 700,
                                     color: 'var(--brand-color, #2563eb)',
-                                } })), priceLabel && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.priceLabel`, "data-preview-field-path": `${itemPath}.priceLabel`, defaultValue: priceLabel, className: "service-card-price-label", style: {
+                                } })), hasComparePrice && ((0, jsx_runtime_1.jsx)("span", { className: "service-card-compare-price", style: {
+                                    fontSize: '0.875rem',
+                                    fontWeight: 500,
+                                    color: 'var(--muted-text, #94a3b8)',
+                                    textDecoration: 'line-through',
+                                }, children: formattedComparePrice })), priceLabel && ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: `${itemPath}.priceLabel`, "data-preview-field-path": `${itemPath}.priceLabel`, defaultValue: priceLabel, className: "service-card-price-label", style: {
                                     fontSize: '0.8125rem',
                                     fontWeight: 500,
                                     color: 'var(--muted-text, #94a3b8)',
-                                } }))] })) : !effectiveShowPrice ? ((0, jsx_runtime_1.jsx)("div", { className: "service-card-price-wrap", style: { margin: '0.5rem 0' }, children: (0, jsx_runtime_1.jsx)("span", { style: {
+                                } }))] })) : (!effectiveShowPrice || (!hasRawPrice && !priceLabel)) ? ((0, jsx_runtime_1.jsx)("div", { className: "service-card-price-wrap", style: { margin: '0.5rem 0' }, children: (0, jsx_runtime_1.jsx)("span", { style: {
                                 display: 'inline-flex',
                                 alignItems: 'center',
-                                padding: '3px 8px',
-                                borderRadius: '6px',
-                                fontSize: '0.75rem',
+                                padding: '4px 10px',
+                                borderRadius: '8px',
+                                fontSize: '0.8125rem',
                                 fontWeight: 600,
                                 backgroundColor: 'rgba(255, 255, 255, 0.08)',
                                 color: 'var(--muted-text, #94a3b8)',
                                 border: '1px solid rgba(255, 255, 255, 0.12)',
+                                letterSpacing: '0.01em',
                             }, children: "Quote on Request" }) })) : null, (features.length > 0 || Array.isArray(service?.features)) && ((0, jsx_runtime_1.jsx)("ul", { "data-preview-list-path": `${itemPath}.features`, className: "service-card-features", children: features.map((feature, featureIndex) => {
                             const featureText = typeof feature === 'string'
                                 ? feature

package/dist/EditableUniversalCard.d.ts

@@ -1,13 +1,15 @@
 /**
  * EditableUniversalCard — DENEB UI Framework
  *
- * Universal, multi-industry listing card for all commerce and business templates:
+ * Universal, multi-industry listing renderer for non-catalog entities. Fivora
+ * products and services should use EditableProductCard/EditableServiceCard so
+ * their backend catalog behavior is preserved:
  * - 🚗 Automotive & Equipment: Make/model, year & condition, mileage, fuel, gearbox, price
  * - 📚 Bookshops & Publishers: Cover photo, book title, author, published year, pages, price
  * - 🏋️ Gyms & Fitness: Membership tier, duration, meal plan, 24/7 access, trainer, price
- * - 🍽️ Restaurants & Menus: Dish photo, title, dietary tags, ingredients, prep time, price
+ * - 🍽️ Editorial Menus: Dish photo, title, dietary tags, ingredients, prep time, price
  * - 🏠 Real Estate & Rentals: Property image, location, beds, baths, sqft, price
- * - 💼 Services & Agencies: Service title, duration, deliverable checklist, pricing
+ * - 💼 Agency Portfolios: Offering title, duration, deliverable checklist, pricing
  *
  * Designed with strict editability architecture:
  * 1. Automatically resolves fields from `useSiteData()` via `itemPath` or explicit field paths.

package/dist/PlatformProductDetail.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const EditableProductDetail_1 = require("./EditableProductDetail");
 const SiteDataProvider_1 = require("./SiteDataProvider");
 const utils_1 = require("./utils");
+const catalogMedia_1 = require("./utils/catalogMedia");
 const DEFAULT_QUERY_PARAM = 'id';
 const DEFAULT_DETAIL_ROUTE = '/products/detail/';
 const DEFAULT_RETRY_DELAYS = [0, 750, 2_000];
@@ -93,13 +94,7 @@ function normalizeProductForDetail(product, siteData) {
         (typeof mergedProduct.thumbnail === 'string' && mergedProduct.thumbnail) ||
         undefined;
     const price = mergedProduct.price ?? mergedProduct.cost ?? mergedProduct.amount ?? mergedProduct.productPrice;
-    const images = Array.isArray(mergedProduct.gallery)
-        ? mergedProduct.gallery
-        : Array.isArray(mergedProduct.images)
-            ? mergedProduct.images
-            : Array.isArray(mergedProduct.additionalImages)
-                ? mergedProduct.additionalImages.filter((value) => typeof value === 'string' && Boolean(value.trim()))
-                : undefined;
+    const images = (0, catalogMedia_1.resolveCatalogImages)(mergedProduct);
     const compareAtPrice = mergedProduct.compareAtPrice ?? mergedProduct.originalPrice;
     const shop = (0, SiteDataProvider_1.isRecord)(siteData.shop) ? siteData.shop : {};
     const merchant = (0, SiteDataProvider_1.isRecord)(siteData.merchant) ? siteData.merchant : {};
@@ -122,7 +117,7 @@ function normalizeProductForDetail(product, siteData) {
             ? { featuredImage: image, imageUrl: image, image }
             : {}),
         ...(price !== undefined ? { price } : {}),
-        ...(images ? { gallery: images, images } : {}),
+        ...(images.length > 0 ? { gallery: images, images } : {}),
         ...(compareAtPrice !== undefined
             ? { compareAtPrice, originalPrice: compareAtPrice }
             : {}),

package/dist/ProductQuickView.d.ts

@@ -9,6 +9,8 @@ export interface ProductQuickViewItem {
     description?: string;
     imageUrl?: string;
     gallery?: string[];
+    images?: string[];
+    additionalImages?: string[];
     inStock?: boolean;
     isAvailable?: boolean;
     rating?: number;

package/dist/ProductQuickView.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const utils_1 = require("./utils");
 const PlatformProductDetail_1 = require("./PlatformProductDetail");
+const catalogMedia_1 = require("./utils/catalogMedia");
 /**
  * DENEB UI — Product Quick View Modal
  *
@@ -20,7 +21,7 @@ function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '
     (0, react_1.useEffect)(() => {
         if (product) {
             setQuantity(1);
-            setSelectedImage(product.imageUrl || (product.gallery && product.gallery[0]) || '');
+            setSelectedImage((0, catalogMedia_1.resolveCatalogImages)(product)[0] || '');
         }
     }, [product]);
     // Handle ESC key to close
@@ -42,7 +43,7 @@ function ProductQuickView({ product, isOpen, onClose, onAddToCart, className = '
     if (!isOpen || !product) {
         return null;
     }
-    const images = product.gallery && product.gallery.length > 0 ? product.gallery : [product.imageUrl || ''];
+    const images = (0, catalogMedia_1.resolveCatalogImages)(product);
     const currency = product.currency || '$';
     const isAvailable = product.isAvailable !== false && product.inStock !== false;
     const handleAddToCart = () => {

package/dist/SiteDataProvider.d.ts

@@ -112,14 +112,24 @@ export declare function formatWeeklyHoursToString(value: unknown): string;
 export declare function normalizeProductItem(p: unknown): ProductItem;
 /**
  * Universal Service Normalizer
+ * Ensures every service object has both canonical and alias keys simultaneously populated
+ * with clean numbers and resolved image URLs, matching the product normalizer's robustness.
  */
 export declare function normalizeServiceItem(s: unknown): ServiceItem;
-export declare function useProducts(fallback?: ProductItem[]): ProductItem[];
+export interface UseProductsOptions {
+    inStockOnly?: boolean;
+    activeOnly?: boolean;
+}
+export declare function useProducts(fallback?: ProductItem[], options?: UseProductsOptions): ProductItem[];
+export interface UseServicesOptions {
+    activeOnly?: boolean;
+}
 /**
  * Hook to retrieve services cleanly from SiteData, supporting both
  * top-level content.services and nested content.home.services.
+ * Supports optional { activeOnly: true } filtering to mirror product availability.
  */
-export declare function useServices(fallback?: ServiceItem[]): ServiceItem[];
+export declare function useServices(fallback?: ServiceItem[], options?: UseServicesOptions): ServiceItem[];
 /**
  * Hook to access official Fivora backend API endpoints (catalogUrl, contactUrl, analyticsUrl).
  */
@@ -178,3 +188,31 @@ export interface SyncedBranding {
  * Hierarchy: Visual Editor Edits (content.common) -> Live Merchant Shop Profile -> Template Fallback.
  */
 export declare function useSyncedBranding(fallback?: Partial<SyncedBranding>): SyncedBranding;
+/**
+ * Hook to retrieve the live store currency code (e.g. "LKR", "USD", "EUR").
+ * Auto-hydrates from the merchant portal's shop profile.
+ * Hierarchy: shop.currency → content.common.currency → merchant.currency → fallback.
+ */
+export declare function useCurrency(fallback?: string): string;
+export interface SocialLinksMap {
+    facebook: string;
+    instagram: string;
+    tiktok: string;
+    youtube: string;
+    linkedin: string;
+    twitter: string;
+    website: string;
+    [key: string]: string;
+}
+/**
+ * Hook to retrieve the live social links map from the merchant profile.
+ * Auto-hydrates from the shop owner's Fivora Portal social configuration.
+ * Returns a map like { facebook: "https://...", instagram: "https://...", ... }.
+ */
+export declare function useSocial(fallback?: Partial<SocialLinksMap>): SocialLinksMap;
+/**
+ * Hook to retrieve the live shop front / cover / banner image URL.
+ * Auto-hydrates from the merchant portal's shop profile.
+ * Hierarchy: shop.coverImage → shop.shopImage → shop.bannerImage → shop.heroImage → content.common.shopImage → fallback.
+ */
+export declare function useShopImage(fallback?: string): string;

package/dist/SiteDataProvider.js

@@ -32,6 +32,9 @@ exports.isPreviewValidation = isPreviewValidation;
 exports.useCommon = useCommon;
 exports.useContact = useContact;
 exports.useSyncedBranding = useSyncedBranding;
+exports.useCurrency = useCurrency;
+exports.useSocial = useSocial;
+exports.useShopImage = useShopImage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useCart_1 = require("./cart/useCart");
 const react_1 = require("react");
@@ -43,6 +46,7 @@ const ThemeStyles_1 = require("./ThemeStyles");
 const utils_1 = require("./utils");
 Object.defineProperty(exports, "withBasePath", { enumerable: true, get: function () { return utils_1.withBasePath; } });
 Object.defineProperty(exports, "resolveAsset", { enumerable: true, get: function () { return utils_1.resolveAsset; } });
+const catalogMedia_1 = require("./utils/catalogMedia");
 exports.DENEB_PREVIEW_DATA_MESSAGE = 'DENEB_PREVIEW_SITE_DATA';
 exports.PREVIEW_DATA_MESSAGE = 'FIVORA_PREVIEW_SITE_DATA';
 const PREVIOUS_PREVIEW_PREFIX = `${['MARKET', 'PLACE'].join('')}_PREVIEW_`;
@@ -875,13 +879,36 @@ function normalizeProductItem(p) {
         p.src ??
         p.productImage ??
         (Array.isArray(p.gallery) ? p.gallery[0] : undefined) ??
-        (Array.isArray(p.images) ? p.images[0] : undefined);
+        (Array.isArray(p.images) ? p.images[0] : undefined) ??
+        (Array.isArray(p.additionalImages) ? p.additionalImages[0] : undefined);
+    const catalogImages = (0, catalogMedia_1.resolveCatalogImages)(p);
     const badgeCandidate = p.badge ?? p.tag ?? p.label ?? p.badgeText ?? p.chip;
     const descCandidate = p.description ?? p.desc ?? p.details ?? p.shortDescription ?? p.subtitle;
     const explicitMin = p.minPrice ?? customData.minPrice;
     const explicitMax = p.maxPrice ?? customData.maxPrice;
     const explicitRange = p.priceRange ?? customData.priceRange;
     const isRange = Boolean(p.isPriceRange || customData.isPriceRange || (explicitMax && explicitMin));
+    const isAvailableCandidate = p.isAvailable !== undefined
+        ? Boolean(p.isAvailable)
+        : p.available !== undefined
+            ? Boolean(p.available)
+            : p.inStock !== undefined
+                ? Boolean(p.inStock)
+                : customData.isAvailable !== undefined
+                    ? Boolean(customData.isAvailable)
+                    : true;
+    const isActiveCandidate = p.isActive !== undefined
+        ? Boolean(p.isActive)
+        : p.active !== undefined
+            ? Boolean(p.active)
+            : customData.isActive !== undefined
+                ? Boolean(customData.isActive)
+                : true;
+    const showPriceCandidate = p.showPrice !== undefined
+        ? Boolean(p.showPrice)
+        : customData.showPrice !== undefined
+            ? Boolean(customData.showPrice)
+            : true;
     return {
         ...customData,
         ...p,
@@ -889,6 +916,12 @@ function normalizeProductItem(p) {
         title: titleCandidate,
         productName: (titleCandidate ?? nameCandidate),
         itemTitle: (titleCandidate ?? nameCandidate),
+        isAvailable: isAvailableCandidate,
+        inStock: isAvailableCandidate,
+        available: isAvailableCandidate,
+        isActive: isActiveCandidate,
+        active: isActiveCandidate,
+        showPrice: showPriceCandidate,
         minPrice: explicitMin !== undefined ? explicitMin : undefined,
         priceMin: (explicitMin ?? p.priceMin) !== undefined ? (explicitMin ?? p.priceMin) : undefined,
         maxPrice: explicitMax !== undefined ? explicitMax : undefined,
@@ -918,6 +951,13 @@ function normalizeProductItem(p) {
                 productImage: imageCandidate,
             }
             : {}),
+        ...(catalogImages.length > 0
+            ? {
+                gallery: catalogImages,
+                images: catalogImages,
+                additionalImages: catalogImages.slice(1),
+            }
+            : {}),
         ...(badgeCandidate !== undefined
             ? {
                 badge: badgeCandidate,
@@ -935,6 +975,8 @@ function normalizeProductItem(p) {
 }
 /**
  * Universal Service Normalizer
+ * Ensures every service object has both canonical and alias keys simultaneously populated
+ * with clean numbers and resolved image URLs, matching the product normalizer's robustness.
  */
 function normalizeServiceItem(s) {
     if (!isRecord(s))
@@ -943,17 +985,126 @@ function normalizeServiceItem(s) {
     const nameCandidate = s.name ?? s.title ?? s.serviceName ?? s.heading;
     const titleCandidate = s.title ?? s.name ?? s.serviceName ?? s.heading;
     const descCandidate = s.description ?? s.desc ?? s.details ?? s.shortDescription;
-    const imageCandidate = s.imageUrl ?? s.image ?? s.photo ?? s.thumbnail ?? s.picture;
+    const imageCandidate = s.imageUrl ??
+        s.image ??
+        s.photo ??
+        s.thumbnail ??
+        s.picture ??
+        (Array.isArray(s.gallery) ? s.gallery[0] : undefined) ??
+        (Array.isArray(s.images) ? s.images[0] : undefined) ??
+        (Array.isArray(s.additionalImages) ? s.additionalImages[0] : undefined);
+    const catalogImages = (0, catalogMedia_1.resolveCatalogImages)(s);
+    // Price normalization — parse string prices to clean numbers, support aliases
+    const rawPrice = s.price !== undefined
+        ? s.price
+        : s.cost !== undefined
+            ? s.cost
+            : s.amount !== undefined
+                ? s.amount
+                : s.rate !== undefined
+                    ? s.rate
+                    : s.serviceFee !== undefined
+                        ? s.serviceFee
+                        : s.servicePrice !== undefined
+                            ? s.servicePrice
+                            : customData.price !== undefined
+                                ? customData.price
+                                : undefined;
+    let numPrice = rawPrice;
+    if (typeof rawPrice === "string" && rawPrice.trim()) {
+        const isRangeStr = rawPrice.includes("-") || rawPrice.includes("–") || rawPrice.includes("—") || /\bto\b/i.test(rawPrice);
+        if (!isRangeStr) {
+            const match = rawPrice.match(/-?\d+(?:,\d{3})*(?:\.\d+)?|-?\d+(?:\.\d+)?/);
+            if (match) {
+                const parsed = parseFloat(match[0].replace(/,/g, ""));
+                if (!isNaN(parsed) && Number.isFinite(parsed)) {
+                    numPrice = parsed;
+                }
+            }
+        }
+    }
+    // Compare/original price normalization for services
+    const rawCompare = s.compareAtPrice !== undefined
+        ? s.compareAtPrice
+        : s.originalPrice !== undefined
+            ? s.originalPrice
+            : s.oldPrice !== undefined
+                ? s.oldPrice
+                : s.regularPrice !== undefined
+                    ? s.regularPrice
+                    : customData.compareAtPrice !== undefined
+                        ? customData.compareAtPrice
+                        : undefined;
+    let numCompare = rawCompare;
+    if (typeof rawCompare === "string" && rawCompare.trim()) {
+        const match = rawCompare.match(/-?\d+(?:,\d{3})*(?:\.\d+)?|-?\d+(?:\.\d+)?/);
+        if (match) {
+            const parsed = parseFloat(match[0].replace(/,/g, ""));
+            if (!isNaN(parsed) && Number.isFinite(parsed)) {
+                numCompare = parsed;
+            }
+        }
+    }
+    const priceLabelCandidate = s.priceLabel ?? customData.priceLabel;
+    const isActiveCandidate = s.isActive !== undefined
+        ? Boolean(s.isActive)
+        : s.active !== undefined
+            ? Boolean(s.active)
+            : s.isAvailable !== undefined
+                ? Boolean(s.isAvailable)
+                : s.available !== undefined
+                    ? Boolean(s.available)
+                    : customData.isActive !== undefined
+                        ? Boolean(customData.isActive)
+                        : customData.isAvailable !== undefined
+                            ? Boolean(customData.isAvailable)
+                            : true;
+    const showPriceCandidate = s.showPrice !== undefined
+        ? Boolean(s.showPrice)
+        : customData.showPrice !== undefined
+            ? Boolean(customData.showPrice)
+            : true;
+    const badgeCandidate = s.badge ?? s.tag ?? s.label ?? customData.badge ?? customData.tag;
     return {
         ...customData,
         ...s,
         name: nameCandidate,
         title: titleCandidate,
+        isActive: isActiveCandidate,
+        active: isActiveCandidate,
+        isAvailable: isActiveCandidate,
+        available: isActiveCandidate,
+        showPrice: showPriceCandidate,
         ...(descCandidate !== undefined ? { description: descCandidate, desc: descCandidate, details: descCandidate } : {}),
         ...(imageCandidate !== undefined ? { imageUrl: imageCandidate, image: imageCandidate, photo: imageCandidate } : {}),
+        ...(badgeCandidate !== undefined ? { badge: String(badgeCandidate), tag: String(badgeCandidate) } : {}),
+        ...(catalogImages.length > 0
+            ? {
+                gallery: catalogImages,
+                images: catalogImages,
+                additionalImages: catalogImages.slice(1),
+            }
+            : {}),
+        ...(numPrice !== undefined
+            ? {
+                price: numPrice,
+                cost: numPrice,
+                amount: numPrice,
+                rate: numPrice,
+                serviceFee: numPrice,
+                servicePrice: numPrice,
+            }
+            : {}),
+        ...(numCompare !== undefined
+            ? {
+                compareAtPrice: numCompare,
+                originalPrice: numCompare,
+            }
+            : {}),
+        ...(priceLabelCandidate !== undefined ? { priceLabel: priceLabelCandidate } : {}),
     };
 }
-function useProducts(fallback = []) {
+function useProducts(fallback = [], options) {
     const siteData = useSiteData();
     const content = isRecord(siteData?.content) ? siteData.content : null;
     if (!content)
@@ -979,17 +1130,26 @@ function useProducts(fallback = []) {
     }
     if (!rawList)
         return fallback;
-    return rawList.map(normalizeProductItem);
+    let list = rawList.map(normalizeProductItem);
+    if (options?.activeOnly) {
+        list = list.filter((p) => p.isActive !== false && p.status !== 'ARCHIVED' && p.status !== 'DRAFT');
+    }
+    if (options?.inStockOnly) {
+        list = list.filter((p) => p.isAvailable !== false && p.inStock !== false);
+    }
+    return list;
 }
 /**
  * Hook to retrieve services cleanly from SiteData, supporting both
  * top-level content.services and nested content.home.services.
+ * Supports optional { activeOnly: true } filtering to mirror product availability.
  */
-function useServices(fallback = []) {
+function useServices(fallback = [], options) {
     const siteData = useSiteData();
     const content = isRecord(siteData?.content) ? siteData.content : null;
     if (!content)
         return fallback;
+    let rawList = null;
     const candidates = [
         content.services,
         content.servicesPage?.services,
@@ -1000,10 +1160,15 @@ function useServices(fallback = []) {
     ];
     for (const candidate of candidates) {
         if (Array.isArray(candidate) && candidate.length > 0) {
-            return candidate.map(normalizeServiceItem);
+            rawList = candidate;
+            break;
         }
     }
-    return fallback;
+    const list = rawList ? rawList.map(normalizeServiceItem) : fallback;
+    if (options?.activeOnly) {
+        return list.filter((s) => s.isActive !== false && s.isAvailable !== false);
+    }
+    return list;
 }
 /**
  * Hook to access official Fivora backend API endpoints (catalogUrl, contactUrl, analyticsUrl).
@@ -1230,3 +1395,79 @@ function useSyncedBranding(fallback = {}) {
         faviconUrl,
     };
 }
+/**
+ * Hook to retrieve the live store currency code (e.g. "LKR", "USD", "EUR").
+ * Auto-hydrates from the merchant portal's shop profile.
+ * Hierarchy: shop.currency → content.common.currency → merchant.currency → fallback.
+ */
+function useCurrency(fallback = 'LKR') {
+    const siteData = useSiteData();
+    const content = isRecord(siteData?.content) ? siteData.content : null;
+    const common = isRecord(content?.common) ? content.common : {};
+    const shop = useShop();
+    return ((typeof shop.currency === 'string' && shop.currency.trim()) ||
+        (typeof common.currency === 'string' && common.currency.trim()) ||
+        (typeof shop.currencyCode === 'string' && shop.currencyCode.trim()) ||
+        (typeof common.currencyCode === 'string' && common.currencyCode.trim()) ||
+        fallback);
+}
+/**
+ * Hook to retrieve the live social links map from the merchant profile.
+ * Auto-hydrates from the shop owner's Fivora Portal social configuration.
+ * Returns a map like { facebook: "https://...", instagram: "https://...", ... }.
+ */
+function useSocial(fallback = {}) {
+    const siteData = useSiteData();
+    const content = isRecord(siteData?.content) ? siteData.content : null;
+    const common = isRecord(content?.common) ? content.common : {};
+    const shop = useShop();
+    const shopSocial = isRecord(shop.socialLinks) ? shop.socialLinks : (isRecord(shop.social) ? shop.social : {});
+    const commonSocial = isRecord(common.socialLinks) ? common.socialLinks : (isRecord(common.social) ? common.social : {});
+    const extractString = (key) => {
+        const candidates = [
+            shopSocial[key],
+            commonSocial[key],
+            shop[key],
+            common[key],
+            fallback[key],
+        ];
+        for (const candidate of candidates) {
+            if (typeof candidate === 'string' && candidate.trim()) {
+                return candidate.trim();
+            }
+        }
+        return '';
+    };
+    return {
+        facebook: extractString('facebook') || extractString('facebookUrl'),
+        instagram: extractString('instagram') || extractString('instagramUrl'),
+        tiktok: extractString('tiktok') || extractString('tiktokUrl'),
+        youtube: extractString('youtube') || extractString('youtubeUrl'),
+        linkedin: extractString('linkedin') || extractString('linkedinUrl'),
+        twitter: extractString('twitter') || extractString('twitterUrl') || extractString('x'),
+        website: extractString('website') || extractString('websiteUrl'),
+        ...Object.fromEntries(Object.entries({ ...fallback, ...commonSocial, ...shopSocial })
+            .filter(([, v]) => typeof v === 'string' && v.trim())
+            .map(([k, v]) => [k, String(v).trim()])),
+    };
+}
+/**
+ * Hook to retrieve the live shop front / cover / banner image URL.
+ * Auto-hydrates from the merchant portal's shop profile.
+ * Hierarchy: shop.coverImage → shop.shopImage → shop.bannerImage → shop.heroImage → content.common.shopImage → fallback.
+ */
+function useShopImage(fallback = '') {
+    const siteData = useSiteData();
+    const content = isRecord(siteData?.content) ? siteData.content : null;
+    const common = isRecord(content?.common) ? content.common : {};
+    const shop = useShop();
+    return ((typeof shop.coverImage === 'string' && shop.coverImage.trim()) ||
+        (typeof shop.shopImage === 'string' && shop.shopImage.trim()) ||
+        (typeof shop.bannerImage === 'string' && shop.bannerImage.trim()) ||
+        (typeof shop.heroImage === 'string' && shop.heroImage.trim()) ||
+        (typeof shop.shopFrontImage === 'string' && shop.shopFrontImage.trim()) ||
+        (typeof common.shopImage === 'string' && common.shopImage.trim()) ||
+        (typeof common.coverImage === 'string' && common.coverImage.trim()) ||
+        (typeof common.bannerImage === 'string' && common.bannerImage.trim()) ||
+        fallback);
+}

package/dist/utils/catalogMedia.d.ts

@@ -0,0 +1,18 @@
+export interface CatalogMediaItem {
+    featuredImage?: unknown;
+    imageUrl?: unknown;
+    image?: unknown;
+    photo?: unknown;
+    thumbnail?: unknown;
+    productImage?: unknown;
+    gallery?: unknown;
+    images?: unknown;
+    additionalImages?: unknown;
+    [key: string]: unknown;
+}
+/**
+ * Resolves Fivora's catalog media contract while retaining legacy template
+ * aliases. The primary image stays first and duplicate URLs are removed.
+ */
+export declare function resolveCatalogImages(item?: CatalogMediaItem | null, fallbackImage?: string): string[];
+export declare function resolveCatalogPrimaryImage(item?: CatalogMediaItem | null, fallbackImage?: string): string;

package/dist/utils/catalogMedia.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveCatalogImages = resolveCatalogImages;
+exports.resolveCatalogPrimaryImage = resolveCatalogPrimaryImage;
+function appendImage(images, seen, candidate) {
+    if (typeof candidate !== 'string')
+        return;
+    const normalized = candidate.trim();
+    if (!normalized || seen.has(normalized))
+        return;
+    seen.add(normalized);
+    images.push(normalized);
+}
+function appendImageList(images, seen, candidate) {
+    if (!Array.isArray(candidate))
+        return;
+    candidate.forEach((value) => appendImage(images, seen, value));
+}
+/**
+ * Resolves Fivora's catalog media contract while retaining legacy template
+ * aliases. The primary image stays first and duplicate URLs are removed.
+ */
+function resolveCatalogImages(item, fallbackImage) {
+    const images = [];
+    const seen = new Set();
+    const source = item || {};
+    appendImage(images, seen, source.featuredImage);
+    appendImage(images, seen, source.imageUrl);
+    appendImage(images, seen, source.image);
+    appendImage(images, seen, source.photo);
+    appendImage(images, seen, source.thumbnail);
+    appendImage(images, seen, source.productImage);
+    appendImageList(images, seen, source.gallery);
+    appendImageList(images, seen, source.images);
+    appendImageList(images, seen, source.additionalImages);
+    if (images.length === 0) {
+        appendImage(images, seen, fallbackImage);
+    }
+    return images;
+}
+function resolveCatalogPrimaryImage(item, fallbackImage) {
+    return resolveCatalogImages(item, fallbackImage)[0] || '';
+}

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './urls';
 export * from './responsive';
 export * from './productOptions';
+export * from './catalogMedia';

package/dist/utils/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./urls"), exports);
 __exportStar(require("./responsive"), exports);
 __exportStar(require("./productOptions"), exports);
+__exportStar(require("./catalogMedia"), exports);

package/package.json

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