@deneb-ui/ui 2.0.125 → 2.0.127

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" },
@@ -735,6 +743,63 @@ export function FullStorefrontDemo() {
 
 ---
 
+## EditableBox container styles
+
+Use `stylePath` to give a container its own card style target without treating
+its child text as a single content field. Contact starter cards use
+`contact.informationCard` and `contact.formCard` in both templates. For example,
+`styles['contact.informationCard'] = { backgroundColor: '#f0fdf4', paddingTop: 0,
+paddingBottom: 24, paddingLeft: 24, paddingRight: 24, marginTop: 8, gap: 16 }`.
+These are root `styles` entries, not new content fields. Unedited boxes retain
+their existing props and class-based appearance. Saved styles override defaults;
+legacy content-suffix spacing remains supported. Gap affects a box's direct
+flex/grid children, not a nested form's internal spacing.
+
+In Local Lab, select the card's empty background/padding area to target its
+container. Text remains independently editable. Test background, each padding
+edge (including zero), margins, and flex/grid gap, then save/reload. The bridge
+forwards card style metadata; actual Inspector controls depend on the connected
+Fivora editor. Run `node scripts/box-editing.test.cjs` after building core/UI.
+
+## Footer headings and contact icons
+
+Built-in `EditableIcon` glyphs with a `fieldPath` now use an HTML span as their
+editing boundary, matching the existing custom-icon branches. The SVG remains
+inside it with its original size and SVG attributes; the field and icon-picker
+markers occur only on the wrapper. This lets HTML-based editor selection resolve
+clicks on SVG paths to the icon field rather than a neighboring text field.
+Icons without a `fieldPath` continue to render a bare SVG.
+
+`Footer` reuses `EditableText` for `common.footerExploreHeading` and
+`common.footerContactHeading`, including text style targets. It reuses
+`EditableIcon` for `common.footerEmailIcon`, `common.footerPhoneIcon`, and
+`common.footerLocationIcon`. These are content-relative paths under
+`content.common`; default icon names are `mail`, `phone`, and `map-pin`.
+The starter schemas declare the icons as text with `control: 'icon-picker'`.
+Contact icons appear alongside their corresponding nonempty contact values.
+Missing fields retain the original headings/icons; blank headings remain
+editable through placeholders. Verify heading text/typography and icon selection
+in the Lab, then save/reload. Contact values and destinations are independent
+of icon selection.
+
+## Footer newsletter description
+
+The newsletter also exposes `content.common.newsletterSubscribeLabel` and
+`content.common.newsletterEmailPlaceholder`. The button label reuses
+`EditableText`; the email input uses the existing input-placeholder field binding
+pattern. The visitor's entered email remains separate from the editable
+placeholder. Both starter schemas declare these as text fields. Original copy
+is the fallback when fields are missing; blank placeholder values are preserved.
+Verify edits and save/reload in Local Lab, plus newsletter submission in Preview.
+
+`Footer` / `EditableFooter` reuses `EditableText` for
+`content.common.newsletterDescription`. Its field and text style target are
+`common.newsletterDescription`; saved typography lives at
+`styles['common.newsletterDescription']`. Missing data uses the original copy;
+an empty string keeps an editable placeholder. Both starter templates declare
+the field as a textarea. With newsletters enabled, edit the paragraph in the
+Lab, save, and reload to verify persistence.
+
 ## Authors
 
 Created and maintained by **[Chamika Gayashan](https://github.com/chamikathereal)** and **[Induranga Kawishwara](https://github.com/Induranga-kawishwara)**.

package/dist/EditableBox.d.ts

@@ -5,6 +5,8 @@ export type BoxSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | (st
 export type BoxAspectRatio = '1/1' | '16/9' | '4/3' | '3/4' | '9/16' | '2/3' | '3/2' | 'square' | 'video' | 'portrait' | 'landscape' | (string & {});
 export interface EditableBoxProps extends React.HTMLAttributes<HTMLElement> {
     as?: React.ElementType;
+    /** Independent container style target; does not mark child content as one text field. */
+    stylePath?: string;
     /**
      * Field path or item path in siteData.
      */
@@ -53,4 +55,4 @@ export interface EditableBoxProps extends React.HTMLAttributes<HTMLElement> {
  * EditableBox is a flexible, smart container ("div-like") component with built-in
  * width/height resizing, aspect-ratio controls, and auto-balancing for fivora cards.
  */
-export declare function EditableBox({ as: Component, id, 'data-preview-field-path': previewFieldPath, 'data-preview-item-path': previewItemPath, 'data-preview-static': previewStatic, width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, grow, shrink, padding, margin, bg, color, radius, shadow, border, display, direction, wrap, align, justify, gap, overflow, style, children, className, ...props }: EditableBoxProps): React.JSX.Element;
+export declare function EditableBox({ as: Component, stylePath, id, 'data-preview-field-path': previewFieldPath, 'data-preview-item-path': previewItemPath, 'data-preview-static': previewStatic, width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, grow, shrink, padding, margin, bg, color, radius, shadow, border, display, direction, wrap, align, justify, gap, overflow, style, children, className, ...props }: EditableBoxProps): React.JSX.Element;

package/dist/EditableBox.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableBox = EditableBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SiteDataProvider_1 = require("./SiteDataProvider");
+const useComponentStyle_1 = require("./hooks/useComponentStyle");
 const RADIUS_MAP = {
     none: '0px',
     sm: '4px',
@@ -46,7 +47,7 @@ const ASPECT_MAP = {
  * EditableBox is a flexible, smart container ("div-like") component with built-in
  * width/height resizing, aspect-ratio controls, and auto-balancing for fivora cards.
  */
-function EditableBox({ as: Component = 'div', id, 'data-preview-field-path': previewFieldPath, 'data-preview-item-path': previewItemPath, 'data-preview-static': previewStatic, width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, grow, shrink, padding, margin, bg, color, radius, shadow, border, display, direction, wrap, align, justify, gap, overflow, style, children, className = '', ...props }) {
+function EditableBox({ as: Component = 'div', stylePath, id, 'data-preview-field-path': previewFieldPath, 'data-preview-item-path': previewItemPath, 'data-preview-static': previewStatic, width, minWidth, maxWidth, height, minHeight, maxHeight, aspectRatio, balance, grow, shrink, padding, margin, bg, color, radius, shadow, border, display, direction, wrap, align, justify, gap, overflow, style, children, className = '', ...props }) {
     const resolvedRadius = radius !== undefined ? (RADIUS_MAP[String(radius)] || String(radius)) : undefined;
     const resolvedShadow = shadow ? (SHADOW_MAP[shadow] || shadow) : undefined;
     const resolvedPadding = padding !== undefined ? (SPACING_MAP[String(padding)] || String(padding)) : undefined;
@@ -72,6 +73,24 @@ function EditableBox({ as: Component = 'div', id, 'data-preview-field-path': pre
             ? border
             : undefined;
     const path = previewFieldPath || id || previewItemPath;
+    const effectiveStylePath = stylePath ?? path;
+    const { cssVars } = (0, useComponentStyle_1.useComponentStyle)(effectiveStylePath, 'card');
+    const variables = cssVars;
+    const containerStyle = {};
+    // Only set persisted values: unedited CSS classes and existing props keep their defaults.
+    const bindings = {
+        backgroundColor: '--deneb-card-bg',
+        paddingTop: '--deneb-card-pt', paddingBottom: '--deneb-card-pb',
+        paddingLeft: '--deneb-card-pl', paddingRight: '--deneb-card-pr',
+        marginTop: '--deneb-card-margin-top', marginBottom: '--deneb-card-margin-bottom',
+        marginLeft: '--deneb-card-margin-left', marginRight: '--deneb-card-margin-right',
+        gap: '--deneb-card-gap',
+    };
+    for (const [property, variable] of Object.entries(bindings)) {
+        if (variables[variable] !== undefined) {
+            Object.assign(containerStyle, { [property]: `var(${variable})` });
+        }
+    }
     const dynamicStyle = (0, SiteDataProvider_1.useFieldStyle)(path);
     const dynamicMarginTop = dynamicStyle?.spacingTop !== undefined && dynamicStyle?.spacingTop !== '' ? `${dynamicStyle.spacingTop}px` : undefined;
     const dynamicMarginBottom = dynamicStyle?.spacingBottom !== undefined && dynamicStyle?.spacingBottom !== '' ? `${dynamicStyle.spacingBottom}px` : undefined;
@@ -108,6 +127,8 @@ function EditableBox({ as: Component = 'div', id, 'data-preview-field-path': pre
         ...(dynamicMarginLeft ? { marginLeft: dynamicMarginLeft } : {}),
         ...(dynamicMarginRight ? { marginRight: dynamicMarginRight } : {}),
         ...(dynamicStyle?.color ? { color: String(dynamicStyle.color) } : {}),
+        ...cssVars,
+        ...containerStyle,
     };
-    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": previewFieldPath || id, "data-preview-item-path": previewItemPath, "data-preview-static": previewStatic, className: `editable-box ${className}`.trim(), style: boxStyle, ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": previewFieldPath || id, "data-preview-item-path": previewItemPath, "data-preview-static": previewStatic, "data-preview-style-target": effectiveStylePath, "data-preview-style-type": effectiveStylePath ? 'card' : undefined, className: `editable-box ${className}`.trim(), style: boxStyle, ...props, children: children }));
 }

package/dist/EditableFooter.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SiteDataProvider_1 = require("./SiteDataProvider");
 const EditableText_1 = require("./EditableText");
+const EditableIcon_1 = require("./EditableIcon");
 const DEFAULT_FOOTER_PAGES = [
     { id: 'home', label: 'Home', route: '/' },
     { id: 'about_us', label: 'About', route: '/about_us' },
@@ -226,14 +227,9 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                                     textDecoration: 'none',
                                                     transition: 'all 0.15s ease',
                                                 }, className: "w-8 h-8 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center text-slate-400 hover:text-white hover:border-slate-700 hover:bg-slate-800 transition-all", children: iconConfig.icon }, platformKey));
-                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { "data-preview-static": "footer-explore-heading", style: {
-                                            fontSize: '0.8125rem',
-                                            fontWeight: 700,
-                                            textTransform: 'uppercase',
-                                            letterSpacing: '0.08em',
-                                            color: '#f1f5f9',
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h4", fieldPath: "common.footerExploreHeading", defaultValue: common.footerExploreHeading ?? 'Explore', placeholder: "Add a navigation heading", size: "0.8125rem", weight: 700, transform: "uppercase", letterSpacing: "0.08em", color: "#f1f5f9", style: {
                                             marginBottom: '1.25rem',
-                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-5", children: "Explore" }), (0, jsx_runtime_1.jsx)("ul", { style: {
+                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-5" }), (0, jsx_runtime_1.jsx)("ul", { style: {
                                             listStyle: 'none',
                                             padding: 0,
                                             margin: 0,
@@ -265,20 +261,15 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                             }
                                             // Unselected route marker fallback (visible for strict schema coverage without route link)
                                             return ((0, jsx_runtime_1.jsx)("li", { className: "unavailable", children: (0, jsx_runtime_1.jsx)("span", { "data-target-page": link.id, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `common.navLabels.${link.id}`, children: label }) }) }, link.id));
-                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { "data-preview-static": "footer-contact-heading", style: {
-                                            fontSize: '0.8125rem',
-                                            fontWeight: 700,
-                                            textTransform: 'uppercase',
-                                            letterSpacing: '0.08em',
-                                            color: '#f1f5f9',
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h4", fieldPath: "common.footerContactHeading", defaultValue: common.footerContactHeading ?? 'Contact & Support', placeholder: "Add a contact heading", size: "0.8125rem", weight: 700, transform: "uppercase", letterSpacing: "0.08em", color: "#f1f5f9", style: {
                                             marginBottom: '1.25rem',
-                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-5", children: "Contact & Support" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-5" }), (0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'column',
                                             gap: '0.875rem',
                                             fontSize: '0.875rem',
                                             color: '#94a3b8',
-                                        }, className: "flex flex-col gap-3.5 text-sm text-slate-400", children: [emailContact && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-slate-500", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })] }), (0, jsx_runtime_1.jsx)("a", { href: `mailto:${emailContact}`, "data-preview-field-path": "contact.email", className: "hover:text-white transition-colors", style: { color: 'inherit', textDecoration: 'none' }, children: emailContact })] })), phone && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-slate-500", children: (0, jsx_runtime_1.jsx)("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), (0, jsx_runtime_1.jsx)("a", { href: `tel:${phone}`, "data-preview-field-path": "contact.phone", className: "hover:text-white transition-colors", style: { color: 'inherit', textDecoration: 'none' }, children: phone })] })), address && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-slate-500 mt-0.5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "10", r: "3" })] }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": "contact.address", children: address })] })), hasContact && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: '0.5rem' }, children: (0, jsx_runtime_1.jsxs)("a", { href: whatsappHref, target: "_blank", rel: "noopener noreferrer", "data-preview-field-path": "contact.whatsapp", "aria-label": "Direct message on WhatsApp", style: {
+                                        }, className: "flex flex-col gap-3.5 text-sm text-slate-400", children: [emailContact && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: "mail", fieldPath: "common.footerEmailIcon", size: 14, className: "text-slate-500" }), (0, jsx_runtime_1.jsx)("a", { href: `mailto:${emailContact}`, "data-preview-field-path": "contact.email", className: "hover:text-white transition-colors", style: { color: 'inherit', textDecoration: 'none' }, children: emailContact })] })), phone && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: "phone", fieldPath: "common.footerPhoneIcon", size: 14, className: "text-slate-500" }), (0, jsx_runtime_1.jsx)("a", { href: `tel:${phone}`, "data-preview-field-path": "contact.phone", className: "hover:text-white transition-colors", style: { color: 'inherit', textDecoration: 'none' }, children: phone })] })), address && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsx)(EditableIcon_1.EditableIcon, { name: "map-pin", fieldPath: "common.footerLocationIcon", size: 14, className: "text-slate-500 mt-0.5" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": "contact.address", children: address })] })), hasContact && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: '0.5rem' }, children: (0, jsx_runtime_1.jsxs)("a", { href: whatsappHref, target: "_blank", rel: "noopener noreferrer", "data-preview-field-path": "contact.whatsapp", "aria-label": "Direct message on WhatsApp", style: {
                                                         display: 'inline-flex',
                                                         alignItems: 'center',
                                                         gap: '0.375rem',
@@ -298,12 +289,9 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                             letterSpacing: '0.08em',
                                             color: '#f1f5f9',
                                             marginBottom: '1rem',
-                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-4", children: footerHeading }), showNewsletter && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-static": "newsletter-description", style: {
-                                                    fontSize: '0.8125rem',
-                                                    color: '#94a3b8',
-                                                    lineHeight: 1.5,
+                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-4", children: footerHeading }), showNewsletter && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", fieldPath: "common.newsletterDescription", defaultValue: common.newsletterDescription ?? 'Join our exclusive community for releases, updates, and special perks.', placeholder: "Add a newsletter description", size: "0.8125rem", color: "#94a3b8", lineHeight: 1.5, style: {
                                                     margin: 0,
-                                                }, className: "text-xs text-slate-400 leading-relaxed", children: "Join our exclusive community for releases, updates, and special perks." }), subscribed ? ((0, jsx_runtime_1.jsx)("p", { "data-preview-static": "newsletter-success", style: {
+                                                }, className: "text-xs text-slate-400 leading-relaxed" }), subscribed ? ((0, jsx_runtime_1.jsx)("p", { "data-preview-static": "newsletter-success", style: {
                                                     padding: '0.625rem 0.875rem',
                                                     borderRadius: '8px',
                                                     backgroundColor: 'rgba(34, 197, 94, 0.12)',
@@ -319,7 +307,7 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                                             display: 'flex',
                                                             alignItems: 'center',
                                                             position: 'relative',
-                                                        }, children: (0, jsx_runtime_1.jsx)("input", { type: "email", required: true, "data-preview-static": "newsletter-input", placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), style: {
+                                                        }, children: (0, jsx_runtime_1.jsx)("input", { type: "email", required: true, "data-preview-field-path": "common.newsletterEmailPlaceholder", placeholder: common.newsletterEmailPlaceholder ?? 'Enter your email', value: email, onChange: (e) => setEmail(e.target.value), style: {
                                                                 width: '100%',
                                                                 backgroundColor: '#0f172a', // slate-900
                                                                 border: '1px solid #1e293b', // slate-800
@@ -328,7 +316,7 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                                                 fontSize: '0.8125rem',
                                                                 color: '#ffffff',
                                                                 outline: 'none',
-                                                            }, className: "w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all" }) }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", "data-preview-static": "newsletter-btn", style: {
+                                                            }, className: "w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all" }) }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", style: {
                                                             backgroundColor: '#ffffff',
                                                             color: '#0f172a',
                                                             border: 'none',
@@ -338,7 +326,7 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                                             fontWeight: 600,
                                                             cursor: 'pointer',
                                                             transition: 'background-color 0.15s ease',
-                                                        }, className: "bg-white text-slate-900 hover:bg-slate-200 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 shadow-sm", children: ["Subscribe", (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })] }))] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                                        }, className: "bg-white text-slate-900 hover:bg-slate-200 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 shadow-sm", children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", fieldPath: "common.newsletterSubscribeLabel", defaultValue: common.newsletterSubscribeLabel ?? 'Subscribe', placeholder: "Subscribe" }), (0, jsx_runtime_1.jsx)("svg", { "data-preview-static": "newsletter-submit-arrow", "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })] }))] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                             paddingTop: '2rem',
                             borderTop: '1px solid rgba(255, 255, 255, 0.08)',
                             display: 'flex',

package/dist/EditableIcon.js

@@ -233,17 +233,17 @@ const EditableIcon = ({ name = 'circle', fieldPath, size = 16, strokeWidth = 2,
     }
     // 3. Built-in SVG lookup
     const renderer = BUILTIN_ICONS[normalized] || BUILTIN_ICONS[fallback] || BUILTIN_ICONS.circle;
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, className: `deneb-editable-icon ${className}`, style: {
+    const svg = ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round", width: size, height: size, className: `deneb-editable-icon ${className}`, style: {
             display: 'inline-block',
             verticalAlign: 'middle',
             flexShrink: 0,
             ...style,
-        }, "aria-hidden": !title, role: title ? 'img' : undefined, ...(fieldPath ? {
-            'data-preview-field-path': fieldPath,
-            'data-preview-control': 'icon-picker',
-            'data-preview-icon-type': 'lucide',
-            'data-preview-icon': activeName,
-        } : {}), ...svgProps, children: [title && (0, jsx_runtime_1.jsx)("title", { children: title }), renderer({ strokeWidth })] }));
+        }, "aria-hidden": !title, role: title ? 'img' : undefined, ...svgProps, children: [title && (0, jsx_runtime_1.jsx)("title", { children: title }), renderer({ strokeWidth })] }));
+    if (!fieldPath)
+        return svg;
+    // Match the HTML selection target used by customIcon/iconMap above.
+    // SVG descendants bubble into this target even in HTMLElement-only bridges.
+    return ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath, "data-preview-control": "icon-picker", "data-preview-icon-type": "lucide", "data-preview-icon": activeName, style: { display: 'inline-flex', alignItems: 'center', flexShrink: 0, lineHeight: 1 }, children: svg }));
 };
 exports.EditableIcon = EditableIcon;
 // Aliases for developer convenience

package/dist/EditableProductCard.d.ts

@@ -29,6 +29,7 @@ export interface ProductItem {
     productImage?: string;
     gallery?: string[];
     images?: string[];
+    additionalImages?: string[];
     badge?: string;
     tag?: string;
     rating?: number | 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)

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

@@ -10,6 +10,9 @@ export interface ServiceItem {
     description?: string;
     imageUrl?: string;
     image?: string;
+    gallery?: string[];
+    images?: string[];
+    additionalImages?: string[];
     features?: unknown[];
     [key: string]: unknown;
 }

package/dist/EditableServiceCard.js

@@ -4,6 +4,7 @@ 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");
 /**
  * EditableServiceCard standardizes service presentation across Home and Services pages.
  * Supports service name, description, image, and repeatable features checklist.
@@ -28,7 +29,8 @@ function EditableServiceCard({ itemPath, service, imageFallback = '/placeholder.
                 ? String(rawPriceCandidate)
                 : 'LKR ' + String(rawPriceCandidate)
         : '';
-    const imageUrl = String(service?.imageUrl || service?.image || '');
+    const serviceImages = (0, catalogMedia_1.resolveCatalogImages)(service);
+    const imageUrl = serviceImages[0] || '';
     const features = Array.isArray(service?.features) ? service.features : [];
     const mergedStyle = {
         textAlign: align,

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

@@ -11,6 +11,7 @@ export declare const LEGACY_PREVIEW_READY_MESSAGE: string;
 export declare const DENEB_PREVIEW_FOCUS_MESSAGE = "DENEB_PREVIEW_FOCUS_PAGE";
 export declare const PREVIEW_FOCUS_MESSAGE = "FIVORA_PREVIEW_FOCUS_PAGE";
 export declare const LEGACY_PREVIEW_FOCUS_MESSAGE: string;
+export declare const DENEB_REFRESH_LIVE_CATALOG_EVENT = "deneb:refresh-live-catalog";
 export declare const PREVIEW_FIELD_ATTRIBUTE = "data-preview-field-path";
 export { STYLE_PATCH_MESSAGE, DENEB_STYLE_PATCH_MESSAGE } from '@deneb-ui/core';
 export type GenericRecord = Record<string, any>;

package/dist/SiteDataProvider.js

@@ -1,7 +1,7 @@
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DUMMY_PREVIEW_SHOP_NAME = exports.DUMMY_PREVIEW_ADDRESS = exports.DUMMY_PREVIEW_EMAIL = exports.DUMMY_PREVIEW_WHATSAPP = exports.DUMMY_PREVIEW_PHONE = exports.DenebDataContext = exports.useDenebData = exports.DenebDataProvider = exports.resolveAsset = exports.withBasePath = exports.SiteDataContext = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.PREVIEW_FIELD_ATTRIBUTE = exports.LEGACY_PREVIEW_FOCUS_MESSAGE = exports.PREVIEW_FOCUS_MESSAGE = exports.DENEB_PREVIEW_FOCUS_MESSAGE = exports.LEGACY_PREVIEW_READY_MESSAGE = exports.PREVIEW_READY_MESSAGE = exports.DENEB_PREVIEW_READY_MESSAGE = exports.LEGACY_PREVIEW_DATA_MESSAGE = exports.PREVIEW_DATA_MESSAGE = exports.DENEB_PREVIEW_DATA_MESSAGE = void 0;
+exports.DUMMY_PREVIEW_SHOP_NAME = exports.DUMMY_PREVIEW_ADDRESS = exports.DUMMY_PREVIEW_EMAIL = exports.DUMMY_PREVIEW_WHATSAPP = exports.DUMMY_PREVIEW_PHONE = exports.DenebDataContext = exports.useDenebData = exports.DenebDataProvider = exports.resolveAsset = exports.withBasePath = exports.SiteDataContext = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.PREVIEW_FIELD_ATTRIBUTE = exports.DENEB_REFRESH_LIVE_CATALOG_EVENT = exports.LEGACY_PREVIEW_FOCUS_MESSAGE = exports.PREVIEW_FOCUS_MESSAGE = exports.DENEB_PREVIEW_FOCUS_MESSAGE = exports.LEGACY_PREVIEW_READY_MESSAGE = exports.PREVIEW_READY_MESSAGE = exports.DENEB_PREVIEW_READY_MESSAGE = exports.LEGACY_PREVIEW_DATA_MESSAGE = exports.PREVIEW_DATA_MESSAGE = exports.DENEB_PREVIEW_DATA_MESSAGE = void 0;
 exports.isRecord = isRecord;
 exports.isDarkColor = isDarkColor;
 exports.syncThemeToDocument = syncThemeToDocument;
@@ -43,6 +43,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_`;
@@ -55,6 +56,7 @@ exports.LEGACY_PREVIEW_READY_MESSAGE = previousPreviewMessage('READY');
 exports.DENEB_PREVIEW_FOCUS_MESSAGE = 'DENEB_PREVIEW_FOCUS_PAGE';
 exports.PREVIEW_FOCUS_MESSAGE = 'FIVORA_PREVIEW_FOCUS_PAGE';
 exports.LEGACY_PREVIEW_FOCUS_MESSAGE = previousPreviewMessage('FOCUS_PAGE');
+exports.DENEB_REFRESH_LIVE_CATALOG_EVENT = 'deneb:refresh-live-catalog';
 exports.PREVIEW_FIELD_ATTRIBUTE = 'data-preview-field-path';
 var core_2 = require("@deneb-ui/core");
 Object.defineProperty(exports, "STYLE_PATCH_MESSAGE", { enumerable: true, get: function () { return core_2.STYLE_PATCH_MESSAGE; } });
@@ -366,6 +368,9 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
                 }
                 return {
                     ...current,
+                    liveCatalogUpdatedAt: typeof live.updatedAt === 'string'
+                        ? live.updatedAt
+                        : new Date().toISOString(),
                     shop: nextShop,
                     merchant: nextMerchant,
                     reviews: nextReviews ?? current.reviews,
@@ -388,6 +393,36 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
                         ...(currentContent?.store && typeof currentContent.store === 'object' && nextProducts !== undefined
                             ? { store: { ...currentContent.store, products: nextProducts } }
                             : {}),
+                        ...(currentContent?.servicesPage &&
+                            typeof currentContent.servicesPage === 'object' &&
+                            nextServices !== undefined
+                            ? {
+                                servicesPage: {
+                                    ...currentContent.servicesPage,
+                                    services: nextServices,
+                                },
+                            }
+                            : {}),
+                        ...(currentContent?.company &&
+                            typeof currentContent.company === 'object' &&
+                            nextServices !== undefined
+                            ? {
+                                company: {
+                                    ...currentContent.company,
+                                    services: nextServices,
+                                },
+                            }
+                            : {}),
+                        ...(currentContent?.business &&
+                            typeof currentContent.business === 'object' &&
+                            nextServices !== undefined
+                            ? {
+                                business: {
+                                    ...currentContent.business,
+                                    services: nextServices,
+                                },
+                            }
+                            : {}),
                         ...(currentHome || Object.keys(nextHome).length > 0
                             ? {
                                 home: {
@@ -458,9 +493,19 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
                 void loadLiveCatalog();
             }
         };
+        const refreshNow = () => {
+            if (document.visibilityState !== 'visible')
+                return;
+            if (retryTimer !== null)
+                window.clearTimeout(retryTimer);
+            retryTimer = null;
+            void loadLiveCatalog();
+        };
         void loadLiveCatalog();
         window.addEventListener("focus", refreshIfStale);
         window.addEventListener("online", refreshIfStale);
+        window.addEventListener('pageshow', refreshIfStale);
+        window.addEventListener(exports.DENEB_REFRESH_LIVE_CATALOG_EVENT, refreshNow);
         document.addEventListener("visibilitychange", refreshIfStale);
         return () => {
             stopped = true;
@@ -469,6 +514,8 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
                 window.clearTimeout(retryTimer);
             window.removeEventListener("focus", refreshIfStale);
             window.removeEventListener("online", refreshIfStale);
+            window.removeEventListener('pageshow', refreshIfStale);
+            window.removeEventListener(exports.DENEB_REFRESH_LIVE_CATALOG_EVENT, refreshNow);
             document.removeEventListener("visibilitychange", refreshIfStale);
         };
     }, [liveCatalogEndpoint, siteSlug, initialSiteData]);
@@ -875,7 +922,9 @@ 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;
@@ -918,6 +967,13 @@ function normalizeProductItem(p) {
                 productImage: imageCandidate,
             }
             : {}),
+        ...(catalogImages.length > 0
+            ? {
+                gallery: catalogImages,
+                images: catalogImages,
+                additionalImages: catalogImages.slice(1),
+            }
+            : {}),
         ...(badgeCandidate !== undefined
             ? {
                 badge: badgeCandidate,
@@ -943,7 +999,15 @@ 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);
     return {
         ...customData,
         ...s,
@@ -951,6 +1015,13 @@ function normalizeServiceItem(s) {
         title: titleCandidate,
         ...(descCandidate !== undefined ? { description: descCandidate, desc: descCandidate, details: descCandidate } : {}),
         ...(imageCandidate !== undefined ? { imageUrl: imageCandidate, image: imageCandidate, photo: imageCandidate } : {}),
+        ...(catalogImages.length > 0
+            ? {
+                gallery: catalogImages,
+                images: catalogImages,
+                additionalImages: catalogImages.slice(1),
+            }
+            : {}),
     };
 }
 function useProducts(fallback = []) {
@@ -958,6 +1029,13 @@ function useProducts(fallback = []) {
     const content = isRecord(siteData?.content) ? siteData.content : null;
     if (!content)
         return fallback;
+    // Once the public catalog endpoint has answered, its top-level collection is
+    // authoritative even when it is empty. This prevents deleted products from
+    // falling back to stale products embedded in the generated site bundle.
+    if (typeof siteData.liveCatalogUpdatedAt === 'string' &&
+        Array.isArray(content.products)) {
+        return content.products.map(normalizeProductItem);
+    }
     let rawList = null;
     const candidates = [
         content.products,
@@ -990,6 +1068,12 @@ function useServices(fallback = []) {
     const content = isRecord(siteData?.content) ? siteData.content : null;
     if (!content)
         return fallback;
+    // An empty live response is meaningful: all services were removed. Do not
+    // resurrect build-time services from a nested legacy collection or fallback.
+    if (typeof siteData.liveCatalogUpdatedAt === 'string' &&
+        Array.isArray(content.services)) {
+        return content.services.map(normalizeServiceItem);
+    }
     const candidates = [
         content.services,
         content.servicesPage?.services,

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.125",
+  "version": "2.0.127",
   "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.125"
+    "@deneb-ui/core": "^2.0.127"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",