@deneb-ui/ui 2.0.119 → 2.0.121

package/dist/DenebImage.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export type DenebImageAspectRatio = 'square' | '1/1' | 'video' | '16/9' | 'portrait' | '3/4' | '4/3' | '2/3' | '21/9' | (string & {});
+export type DenebImageRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});
+export declare const DEFAULT_IMAGE_FALLBACK_SVG = "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"400\" viewBox=\"0 0 600 400\" fill=\"none\"><rect width=\"600\" height=\"400\" fill=\"%23f1f5f9\"/><path d=\"M250 180a30 30 0 100-60 30 30 0 000 60zM170 300l80-90 60 70 70-100 90 120H170z\" fill=\"%23cbd5e1\"/></svg>";
+export interface DenebImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    id?: string;
+    'data-preview-field-path'?: string;
+    src?: string | null;
+    fallbackSrc?: string;
+    aspectRatio?: DenebImageAspectRatio;
+    radius?: DenebImageRadius;
+    fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+    hoverZoom?: boolean;
+}
+/**
+ * Universal auto-resolving image component for DENEB & Fivora templates.
+ *
+ * - Automatically prepends NEXT_PUBLIC_SITE_BASE_PATH to local assets
+ * - Preserves remote URLs (https://..., http://..., data:...)
+ * - Safely guards against empty string ("") triggers
+ * - Gracefully falls back to fallbackSrc or placeholder on error or missing src
+ */
+export declare function DenebImage({ id, 'data-preview-field-path': previewFieldPath, src, fallbackSrc, alt, aspectRatio, radius, fit, hoverZoom, style, className, onError, ...props }: DenebImageProps): React.JSX.Element;
+export { DenebImage as SafeImage };

package/dist/DenebImage.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_IMAGE_FALLBACK_SVG = void 0;
+exports.DenebImage = DenebImage;
+exports.SafeImage = DenebImage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const ASPECT_MAP = {
+    square: '1 / 1',
+    '1/1': '1 / 1',
+    video: '16 / 9',
+    '16/9': '16 / 9',
+    portrait: '3 / 4',
+    '3/4': '3 / 4',
+    '4/3': '4 / 3',
+    '2/3': '2 / 3',
+    '21/9': '21 / 9',
+};
+const RADIUS_MAP = {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '12px',
+    xl: '16px',
+    '2xl': '24px',
+    full: '9999px',
+};
+exports.DEFAULT_IMAGE_FALLBACK_SVG = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400" fill="none"><rect width="600" height="400" fill="%23f1f5f9"/><path d="M250 180a30 30 0 100-60 30 30 0 000 60zM170 300l80-90 60 70 70-100 90 120H170z" fill="%23cbd5e1"/></svg>';
+/**
+ * Universal auto-resolving image component for DENEB & Fivora templates.
+ *
+ * - Automatically prepends NEXT_PUBLIC_SITE_BASE_PATH to local assets
+ * - Preserves remote URLs (https://..., http://..., data:...)
+ * - Safely guards against empty string ("") triggers
+ * - Gracefully falls back to fallbackSrc or placeholder on error or missing src
+ */
+function DenebImage({ id, 'data-preview-field-path': previewFieldPath, src, fallbackSrc = exports.DEFAULT_IMAGE_FALLBACK_SVG, alt = '', aspectRatio, radius, fit = 'cover', hoverZoom = false, style, className = '', onError, ...props }) {
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const path = previewFieldPath || id;
+    const resolvedAspect = aspectRatio ? (ASPECT_MAP[aspectRatio] || aspectRatio) : undefined;
+    const resolvedRadius = radius ? (RADIUS_MAP[radius] || radius) : undefined;
+    const combinedStyle = {
+        ...(resolvedAspect ? { aspectRatio: resolvedAspect } : {}),
+        ...(resolvedRadius ? { borderRadius: resolvedRadius } : {}),
+        ...(fit ? { objectFit: fit } : {}),
+        ...(hoverZoom ? { transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)' } : {}),
+        ...style,
+    };
+    const rawSrc = hasError || !src || (typeof src === 'string' && src.trim() === '')
+        ? fallbackSrc
+        : src;
+    const finalSrc = typeof rawSrc === 'string' ? (0, utils_1.withBasePath)(rawSrc) : rawSrc;
+    return ((0, jsx_runtime_1.jsx)("img", { "data-preview-field-path": path, src: finalSrc, alt: alt, style: combinedStyle, className: `deneb-image ${hoverZoom ? 'hover:scale-105' : ''} ${className}`.trim(), onError: (e) => {
+            if (!hasError && fallbackSrc && finalSrc !== (0, utils_1.withBasePath)(fallbackSrc)) {
+                setHasError(true);
+            }
+            onError?.(e);
+        }, ...props }));
+}

package/dist/EditableFooter.js

@@ -153,9 +153,9 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
     return ((0, jsx_runtime_1.jsxs)("footer", { style: {
             position: 'relative',
             width: '100%',
-            backgroundColor: '#020617', // slate-950
-            color: '#f8fafc',
-            borderTop: '1px solid rgba(255, 255, 255, 0.08)',
+            backgroundColor: 'var(--footer-bg, var(--page-background, #020617))',
+            color: 'var(--color-text, #f8fafc)',
+            borderTop: '1px solid var(--color-border, rgba(255, 255, 255, 0.08))',
             padding: '4.5rem 1.5rem 2rem',
             ...style,
         }, className: `deneb-footer relative w-full border-t border-slate-800/80 bg-slate-950 text-slate-100 ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsx)("div", { style: {

package/dist/EditableNavbar.d.ts

@@ -9,6 +9,17 @@ export interface EditableNavbarProps extends React.HTMLAttributes<HTMLElement> {
     sticky?: boolean;
     activeRoute?: string;
     basePath?: string;
+    showSearch?: boolean;
+    searchFieldPath?: string;
+    searchLabel?: string;
+    onSearchClick?: () => void;
+    searchUrl?: string;
+    showCart?: boolean;
+    cartCount?: number;
+    onCartClick?: () => void;
+    showWishlist?: boolean;
+    wishlistCount?: number;
+    onWishlistClick?: () => void;
 }
 /**
  * Next-Level DENEB UI Navbar / Header
@@ -23,6 +34,6 @@ export interface EditableNavbarProps extends React.HTMLAttributes<HTMLElement> {
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-export declare function EditableNavbar({ defaultLinks, sticky, activeRoute, basePath, className, style, ...props }: EditableNavbarProps): React.JSX.Element;
+export declare function EditableNavbar({ defaultLinks, sticky, activeRoute, basePath, showSearch, searchFieldPath, searchLabel: customSearchLabel, onSearchClick, searchUrl, showCart, cartCount, onCartClick, showWishlist, wishlistCount, onWishlistClick, className, style, ...props }: EditableNavbarProps): React.JSX.Element;
 export declare const Navbar: typeof EditableNavbar;
 export declare const Header: typeof EditableNavbar;

package/dist/EditableNavbar.js

@@ -25,7 +25,7 @@ const DEFAULT_PAGES = [
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRoute, basePath = '', className = '', style, ...props }) {
+function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRoute, basePath = "", showSearch = true, searchFieldPath = "common.header.searchFramesLabel", searchLabel: customSearchLabel, onSearchClick, searchUrl = "/shop", showCart = false, cartCount, onCartClick, showWishlist = false, wishlistCount, onWishlistClick, className = "", style, ...props }) {
     const siteData = (0, SiteDataProvider_1.useSiteData)();
     const [mobileMenuOpen, setMobileMenuOpen] = (0, react_1.useState)(false);
     const content = (siteData?.content || {});
@@ -35,6 +35,11 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
     const logoUrl = String(common?.logoUrl || shop?.logoUrl || '');
     const headerCtaLabel = String(common?.headerCtaLabel || 'Get in Touch');
     const navLabels = (common?.navLabels || {});
+    const searchLabel = String(customSearchLabel ||
+        common?.header?.searchFramesLabel ||
+        common?.searchFramesLabel ||
+        common?.searchPlaceholder ||
+        "Search frames");
     const requiredPages = Array.isArray(siteData?.requirements?.requiredPages)
         ? siteData.requirements.requiredPages
         : siteData?.template?.structure?.pages || ['home', 'contact'];
@@ -98,28 +103,46 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
                                     fontWeight: 700,
                                     letterSpacing: '-0.025em',
                                     color: 'var(--color-text, #0f172a)',
-                                }, className: "deneb-site-title text-xl font-bold tracking-tight text-slate-900 dark:text-white", children: siteName })] }), (0, jsx_runtime_1.jsx)("nav", { style: {
+                                }, className: "deneb-site-title text-xl font-bold tracking-tight text-slate-900 dark:text-white", children: siteName })] }), (0, jsx_runtime_1.jsxs)("nav", { style: {
                             alignItems: 'center',
                             gap: '0.375rem',
-                        }, className: "deneb-desktop-nav flex items-center gap-1.5", children: activeLinks.map((link) => {
-                            const label = navLabels[link.id] || link.label;
-                            const isActive = activeRoute === link.route;
-                            return ((0, jsx_runtime_1.jsx)("span", { "data-target-page": link.id, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate(link.route), style: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        padding: '0.45rem 0.875rem',
-                                        borderRadius: '9999px',
-                                        fontSize: '0.9rem',
-                                        fontWeight: isActive ? 600 : 500,
-                                        color: isActive ? 'var(--color-primary, #0f172a)' : 'var(--color-text-muted, #475569)',
-                                        backgroundColor: isActive ? 'var(--color-secondary, #f1f5f9)' : 'transparent',
-                                        border: 0,
-                                        cursor: 'pointer',
-                                        transition: 'all 0.15s ease',
-                                    }, className: `deneb-nav-item px-3.5 py-1.5 rounded-full text-sm font-medium transition-all border-0 cursor-pointer ${isActive
-                                        ? 'bg-slate-100 text-slate-900 font-semibold dark:bg-slate-800 dark:text-white'
-                                        : 'bg-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100/70 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800/70'}`, 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", { style: { display: 'flex', alignItems: 'center', gap: '0.75rem' }, className: "flex items-center gap-3", children: [hasContact ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate('/contact'), style: {
+                        }, className: "deneb-desktop-nav flex items-center gap-1.5", children: [showSearch && ((0, jsx_runtime_1.jsx)("div", { style: { marginBottom: "0.5rem" }, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => {
+                                        setMobileMenuOpen(false);
+                                        if (onSearchClick)
+                                            onSearchClick();
+                                        else
+                                            navigate(searchUrl);
+                                    }, "data-preview-static": "header-search-toggle", style: {
+                                        display: "flex",
+                                        width: "100%",
+                                        alignItems: "center",
+                                        gap: "0.75rem",
+                                        padding: "0.625rem 0.875rem",
+                                        borderRadius: "8px",
+                                        border: "1px solid var(--color-border, #e2e8f0)",
+                                        backgroundColor: "transparent",
+                                        color: "var(--color-text-muted, #64748b)",
+                                        cursor: "pointer",
+                                        fontSize: "0.9rem",
+                                    }, className: "w-full flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg border border-slate-200 text-slate-500 dark:border-slate-800 dark:text-slate-400", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", "data-preview-static": "decorative-icon", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "8" }), (0, jsx_runtime_1.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })] }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": searchFieldPath, children: searchLabel })] }) })), activeLinks.map((link) => {
+                                const label = navLabels[link.id] || link.label;
+                                const isActive = activeRoute === link.route;
+                                return ((0, jsx_runtime_1.jsx)("span", { "data-target-page": link.id, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate(link.route), style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            padding: '0.45rem 0.875rem',
+                                            borderRadius: '9999px',
+                                            fontSize: '0.9rem',
+                                            fontWeight: isActive ? 600 : 500,
+                                            color: isActive ? 'var(--color-primary, #0f172a)' : 'var(--color-text-muted, #475569)',
+                                            backgroundColor: isActive ? 'var(--color-secondary, #f1f5f9)' : 'transparent',
+                                            border: 0,
+                                            cursor: 'pointer',
+                                            transition: 'all 0.15s ease',
+                                        }, className: `deneb-nav-item px-3.5 py-1.5 rounded-full text-sm font-medium transition-all border-0 cursor-pointer ${isActive
+                                            ? 'bg-slate-100 text-slate-900 font-semibold dark:bg-slate-800 dark:text-white'
+                                            : 'bg-transparent text-slate-600 hover:text-slate-900 hover:bg-slate-100/70 dark:text-slate-400 dark:hover:text-white dark:hover:bg-slate-800/70'}`, 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", { style: { display: 'flex', alignItems: 'center', gap: '0.75rem' }, className: "flex items-center gap-3", children: [hasContact ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate('/contact'), style: {
                                         display: 'inline-flex',
                                         alignItems: 'center',
                                         justifyContent: 'center',

package/dist/SiteDataProvider.d.ts

@@ -1,6 +1,7 @@
 import React, { type ReactNode } from 'react';
 import type { ProductItem } from './EditableProductCard';
 import type { ServiceItem } from './EditableServiceCard';
+import { withBasePath, resolveAsset } from './utils';
 export declare const DENEB_PREVIEW_DATA_MESSAGE = "DENEB_PREVIEW_SITE_DATA";
 export declare const PREVIEW_DATA_MESSAGE = "FIVORA_PREVIEW_SITE_DATA";
 export declare const LEGACY_PREVIEW_DATA_MESSAGE: string;
@@ -90,6 +91,11 @@ export declare function useSiteData<T = SiteData>(): T;
 export declare function contentObject(value: unknown): GenericRecord;
 export declare function contentText(value: unknown): string;
 export declare function contentList<Item = unknown>(value: unknown): Item[];
+/**
+ * Safely extracts an image URL from siteData and ensures subpath base path is applied.
+ */
+export declare function contentImage(value: unknown, fallback?: string): string;
+export { withBasePath, resolveAsset };
 export declare function contentNumber(value: unknown, fallback?: number): number;
 export declare function parseFieldPath(path: string): Array<string | number>;
 export declare function getFieldStyle(content: unknown, path?: string): GenericRecord | null;

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.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.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;
@@ -14,6 +14,7 @@ exports.useSiteData = useSiteData;
 exports.contentObject = contentObject;
 exports.contentText = contentText;
 exports.contentList = contentList;
+exports.contentImage = contentImage;
 exports.contentNumber = contentNumber;
 exports.parseFieldPath = parseFieldPath;
 exports.getFieldStyle = getFieldStyle;
@@ -38,6 +39,9 @@ const DenebComponentStyles_1 = require("./DenebComponentStyles");
 const FontLoader_1 = require("./fonts/FontLoader");
 const ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
 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; } });
 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_`;
@@ -82,35 +86,16 @@ function isDarkColor(color) {
 function syncThemeToDocument(theme) {
     if (typeof document === "undefined" || !isRecord(theme))
         return;
+    const vars = (0, core_1.generateThemeVariables)(theme);
     const rootStyle = document.documentElement.style;
-    if (typeof theme.primaryColor === "string") {
-        rootStyle.setProperty("--brand-primary", theme.primaryColor);
-        rootStyle.setProperty("--brand-color", theme.primaryColor);
-        rootStyle.setProperty("--color-primary", theme.primaryColor);
-        const isPrimaryDark = isDarkColor(theme.primaryColor);
-        const autoBtnText = isPrimaryDark ? "#ffffff" : "#0f172a";
-        rootStyle.setProperty("--button-bg", String(theme.buttonBackgroundColor || theme.primaryColor));
-        rootStyle.setProperty("--button-text", String(theme.buttonTextColor || autoBtnText));
-    }
-    if (typeof theme.secondaryColor === "string") {
-        rootStyle.setProperty("--brand-secondary", theme.secondaryColor);
-    }
-    if (typeof theme.accentColor === "string") {
-        rootStyle.setProperty("--brand-accent", theme.accentColor);
-        rootStyle.setProperty("--color-accent", theme.accentColor);
-    }
-    if (typeof theme.backgroundColor === "string") {
-        const isDark = isDarkColor(theme.backgroundColor);
-        document.documentElement.classList.toggle("dark", isDark);
-        document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");
-        rootStyle.colorScheme = isDark ? "dark" : "light";
-        rootStyle.setProperty("--page-background", theme.backgroundColor);
-        rootStyle.setProperty("--card-bg", isDark ? "#111a2e" : "#ffffff");
-        rootStyle.setProperty("--product-card-bg", isDark ? "#111a2e" : "#ffffff");
-        rootStyle.setProperty("--color-surface", isDark ? "rgba(255,255,255,0.05)" : "#ffffff");
-        rootStyle.setProperty("--color-secondary", isDark ? "rgba(255,255,255,0.08)" : "#f1f5f9");
-        rootStyle.setProperty("--button-secondary-bg", isDark ? "rgba(255,255,255,0.08)" : "#f1f5f9");
-        rootStyle.setProperty("--button-secondary-text", isDark ? "#f8fafc" : "#0f172a");
+    const isDark = isDarkColor(theme.backgroundColor);
+    document.documentElement.classList.toggle("dark", isDark);
+    document.documentElement.setAttribute("data-theme", isDark ? "dark" : "light");
+    rootStyle.colorScheme = isDark ? "dark" : "light";
+    for (const [key, val] of Object.entries(vars)) {
+        if (key.startsWith("--")) {
+            rootStyle.setProperty(key, val);
+        }
     }
 }
 function mergeSiteData(current, incoming, depth = 0, seen = new WeakSet()) {
@@ -631,8 +616,21 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, liveCat
             }
         }
     }, [siteData]);
+    const resolvedTheme = (0, react_1.useMemo)(() => {
+        const raw = siteData;
+        return raw?.theme ||
+            raw?.template?.structure?.theme ||
+            initialSiteData?.theme ||
+            initialSiteData?.template?.structure?.theme ||
+            undefined;
+    }, [siteData, initialSiteData]);
+    (0, react_1.useEffect)(() => {
+        if (resolvedTheme) {
+            syncThemeToDocument(resolvedTheme);
+        }
+    }, [resolvedTheme]);
     const value = (0, react_1.useMemo)(() => siteData, [siteData]);
-    return ((0, jsx_runtime_1.jsxs)(exports.SiteDataContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(ThemeStyles_1.ThemeStyles, { theme: value?.theme }), (0, jsx_runtime_1.jsx)(FontLoader_1.FontLoader, {}), (0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), (0, jsx_runtime_1.jsx)(DenebComponentStyles_1.DenebComponentStyles, {}), children] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.SiteDataContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(ThemeStyles_1.ThemeStyles, { theme: resolvedTheme }), (0, jsx_runtime_1.jsx)(FontLoader_1.FontLoader, {}), (0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), (0, jsx_runtime_1.jsx)(DenebComponentStyles_1.DenebComponentStyles, {}), children] }));
 }
 function useSiteData() {
     const ctx = (0, react_1.useContext)(exports.SiteDataContext);
@@ -655,6 +653,13 @@ function contentText(value) {
 function contentList(value) {
     return Array.isArray(value) ? value : [];
 }
+/**
+ * Safely extracts an image URL from siteData and ensures subpath base path is applied.
+ */
+function contentImage(value, fallback = '') {
+    const val = typeof value === 'string' && value.trim() ? value.trim() : fallback;
+    return (0, utils_1.withBasePath)(val);
+}
 function contentNumber(value, fallback = 0) {
     return typeof value === 'number' && !Number.isNaN(value) ? value : fallback;
 }

package/dist/ThemeStyles.js

@@ -136,77 +136,10 @@ function getCategoryTheme(category, overrides) {
  * is automatically converted to a CSS variable (e.g. --card-bg: #111).
  */
 function getThemeCssProperties(theme) {
-    const customVars = {};
-    if (theme) {
-        for (const [key, val] of Object.entries(theme)) {
-            if (key !== 'dark' && key !== 'light' && (typeof val === 'string' || typeof val === 'number')) {
-                const cssVarName = `--${key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()}`;
-                customVars[cssVarName] = String(val);
-            }
-        }
-    }
-    const isDark = (0, core_1.isDarkColor)(theme?.backgroundColor);
-    const bgColor = theme?.backgroundColor || (isDark ? '#090d1a' : '#ffffff');
-    const textColor = theme?.textColor || (isDark ? '#f8fafc' : '#0f172a');
-    const mutedColor = theme?.mutedTextColor || (isDark ? 'rgba(248, 250, 252, 0.7)' : '#64748b');
-    const borderColor = isDark ? 'rgba(255, 255, 255, 0.1)' : '#e2e8f0';
-    const cardBg = isDark ? '#111a2e' : '#ffffff';
-    const cardBorder = isDark ? 'rgba(255, 255, 255, 0.09)' : '#e2e8f0';
-    const primaryColor = theme?.primaryColor || '#2563eb';
-    const buttonBg = String(theme?.buttonBackgroundColor || primaryColor || '#2563eb');
-    const autoButtonText = (0, core_1.getAutoContrastTextColor)(buttonBg);
-    const buttonText = String(theme?.buttonTextColor || autoButtonText);
-    const buttonSecondaryBg = isDark
-        ? 'rgba(255, 255, 255, 0.08)'
-        : (theme?.secondaryColor && !(0, core_1.isDarkColor)(theme.secondaryColor) ? theme.secondaryColor : '#f1f5f9');
-    const buttonSecondaryText = isDark ? '#f8fafc' : '#0f172a';
+    const vars = (0, core_1.generateThemeVariables)(theme);
     return {
-        '--brand-color': primaryColor,
-        '--brand-secondary': theme?.secondaryColor || (isDark ? '#1e293b' : '#0f172a'),
-        '--brand-accent': theme?.accentColor || '#14b8a6',
-        '--page-background': bgColor,
-        '--page-text': textColor,
-        '--heading-color': theme?.headingColor || (isDark ? '#ffffff' : theme?.secondaryColor || '#0f172a'),
-        '--muted-text': mutedColor,
-        '--link-color': theme?.linkColor || primaryColor,
-        '--hero-min-height': theme?.heroMinHeight || '72vh',
-        '--section-padding': theme?.sectionPadding || '5rem',
-        '--base-size': theme?.baseSize || '16px',
-        '--heading-font': theme?.headingFont || 'Inter, sans-serif',
-        '--body-font': theme?.bodyFont || 'Inter, sans-serif',
-        '--border-radius': theme?.borderRadius || '8px',
-        '--content-align': theme?.align || 'left',
-        // Canonical color system tokens for light & dark mode harmony
-        '--color-primary': primaryColor,
-        '--color-secondary': buttonSecondaryBg,
-        '--color-accent': theme?.accentColor || '#14b8a6',
-        '--color-text': textColor,
-        '--color-text-muted': mutedColor,
-        '--color-border': borderColor,
-        '--color-surface': isDark ? 'rgba(255,255,255,0.05)' : '#ffffff',
-        '--card-bg': cardBg,
-        '--card-border': cardBorder,
-        '--product-card-bg': cardBg,
-        '--product-card-border': cardBorder,
-        '--tag-bg': isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(241, 245, 249, 0.9)',
-        '--tag-color': mutedColor,
-        '--card-shadow': isDark ? '0 10px 25px -5px rgba(0, 0, 0, 0.4)' : '0 10px 25px -5px rgba(0, 0, 0, 0.05)',
-        '--header-bg': isDark ? 'rgba(15, 23, 42, 0.85)' : 'rgba(255, 255, 255, 0.82)',
-        '--input-bg': isDark ? '#1e293b' : '#ffffff',
-        '--input-border': isDark ? 'rgba(255, 255, 255, 0.15)' : '#cbd5e1',
-        '--input-color': textColor,
-        // Dedicated Button Design Tokens
-        '--button-bg': buttonBg,
-        '--button-text': buttonText,
-        '--button-primary-bg': buttonBg,
-        '--button-primary-text': buttonText,
-        '--button-secondary-bg': buttonSecondaryBg,
-        '--button-secondary-text': buttonSecondaryText,
-        '--button-outline-border': isDark ? 'rgba(255, 255, 255, 0.22)' : 'currentColor',
-        '--button-outline-text': isDark ? '#f8fafc' : textColor,
-        '--button-ghost-text': isDark ? '#f8fafc' : textColor,
+        ...vars,
         fontFamily: theme?.bodyFont || 'Inter, sans-serif',
-        ...customVars,
     };
 }
 /**
@@ -223,6 +156,10 @@ function ThemeStyles({ theme, enableDualMode = true, }) {
     :root {
 ${baseLines}
     }
+    html, body {
+      background-color: var(--page-background, var(--background, #ffffff));
+      color: var(--page-text, var(--color-text, #0f172a));
+    }
   `;
     if (enableDualMode) {
         const isDarkBase = (0, core_1.isDarkColor)(theme?.backgroundColor);
@@ -243,6 +180,10 @@ ${baseLines}
             css += `
     .light, [data-theme="light"] {
 ${lightLines}
+    }
+    .light body, [data-theme="light"] body {
+      background-color: var(--page-background, var(--background, #ffffff));
+      color: var(--page-text, var(--color-text, #0f172a));
     }
       `;
         }
@@ -263,6 +204,10 @@ ${lightLines}
             css += `
     .dark, [data-theme="dark"] {
 ${darkLines}
+    }
+    .dark body, [data-theme="dark"] body {
+      background-color: var(--page-background, var(--background, #090d1a));
+      color: var(--page-text, var(--color-text, #f8fafc));
     }
       `;
         }

package/dist/index.d.ts

@@ -5,6 +5,7 @@
 export * from './PreviewField';
 export * from './EditableText';
 export * from './EditableImage';
+export * from './DenebImage';
 export * from './EditableIcon';
 export * from './EditableMap';
 export * from './EditableList';
@@ -69,6 +70,7 @@ export { EditableParagraph as Paragraph } from './EditableText';
 export { EditableBadge as Badge } from './EditableText';
 export { EditableQuote as Quote } from './EditableText';
 export { EditableImage as Image } from './EditableImage';
+export { DenebImage, DenebImage as SafeImage } from './DenebImage';
 export { EditableMap as Map } from './EditableMap';
 export { EditableGrid as Grid } from './EditableGrid';
 export { EditableSection as Section } from './EditableSection';

package/dist/index.js

@@ -18,11 +18,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.GoogleFeedback = exports.CustomerReviews = exports.ProductDetail = exports.ProductShowcase = exports.ProductGrid = exports.EntityCard = exports.ListingCard = exports.UniversalCard = exports.VehicleCard = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Map = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
-exports.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.TestimonialCarousel = exports.BookingModal = exports.BeforeAfterSlider = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.Testimonials = exports.TestimonialSection = void 0;
+exports.ServiceCard = exports.GoogleFeedback = exports.CustomerReviews = exports.ProductDetail = exports.ProductShowcase = exports.ProductGrid = exports.EntityCard = exports.ListingCard = exports.UniversalCard = exports.VehicleCard = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Map = exports.SafeImage = exports.DenebImage = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
+exports.generateThemeVariables = exports.mergeVisualCustomizationIntoTheme = exports.customizationToTheme = exports.parseVisualCustomization = exports.normalizeHexColor = exports.toHexColor = exports.getAutoContrastTextColor = exports.isDarkColor = exports.FONT_PAIRINGS = exports.GLOBAL_FONT_OPTIONS = exports.THEME_PALETTES = exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.AdditionalPagesNav = exports.PlatformAdditionalPages = exports.TestimonialCarousel = exports.BookingModal = exports.BeforeAfterSlider = exports.FilterSidebar = exports.CartDrawer = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.Testimonials = exports.TestimonialSection = exports.TestimonialCard = exports.PricingCard = void 0;
 __exportStar(require("./PreviewField"), exports);
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
+__exportStar(require("./DenebImage"), exports);
 __exportStar(require("./EditableIcon"), exports);
 __exportStar(require("./EditableMap"), exports);
 __exportStar(require("./EditableList"), exports);
@@ -121,6 +122,9 @@ var EditableText_6 = require("./EditableText");
 Object.defineProperty(exports, "Quote", { enumerable: true, get: function () { return EditableText_6.EditableQuote; } });
 var EditableImage_1 = require("./EditableImage");
 Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return EditableImage_1.EditableImage; } });
+var DenebImage_1 = require("./DenebImage");
+Object.defineProperty(exports, "DenebImage", { enumerable: true, get: function () { return DenebImage_1.DenebImage; } });
+Object.defineProperty(exports, "SafeImage", { enumerable: true, get: function () { return DenebImage_1.DenebImage; } });
 var EditableMap_1 = require("./EditableMap");
 Object.defineProperty(exports, "Map", { enumerable: true, get: function () { return EditableMap_1.EditableMap; } });
 var EditableGrid_1 = require("./EditableGrid");

package/dist/utils/urls.d.ts

@@ -69,3 +69,8 @@ export declare function resolvePageRoute(pageKey: string, pages?: Array<{
     id: string;
     route: string;
 }>): string;
+/**
+ * Resolves static assets with subpath prefix support.
+ * Canonical alias for `withBasePath`.
+ */
+export declare const resolveAsset: typeof withBasePath;

package/dist/utils/urls.js

@@ -4,6 +4,7 @@
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAsset = void 0;
 exports.createWhatsAppUrl = createWhatsAppUrl;
 exports.createPhoneUrl = createPhoneUrl;
 exports.createEmailUrl = createEmailUrl;
@@ -162,3 +163,8 @@ function resolvePageRoute(pageKey, pages) {
     const match = pages?.find((page) => page.id === pageKey);
     return match?.route ?? `/${pageKey.replace(/_/g, '/')}`;
 }
+/**
+ * Resolves static assets with subpath prefix support.
+ * Canonical alias for `withBasePath`.
+ */
+exports.resolveAsset = withBasePath;

package/package.json

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