@deneb-ui/ui 2.0.118 → 2.0.120

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.js

@@ -82,35 +82,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 +612,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);

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/package.json

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