@deneb-ui/ui 2.0.5 → 2.0.7

package/README.md

@@ -4,7 +4,7 @@
 
 > **DENEB UI — Build beautiful interfaces, effortlessly.**  
 > The premier visual-first React component ecosystem.  
-> Created by **Chamika Gayashan & Induranga Kawishwara**.
+> Proudly presented by **DENEB-UI Collaborate with FIVORA**.
 
 [![Framework: DENEB UI](https://img.shields.io/badge/Framework-DENEB_UI_v2.0-blue.svg)](https://github.com/chamikathereal)
 [![License: MIT](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT)

package/dist/EditableAnnouncementBar.js

@@ -85,8 +85,7 @@ function EditableAnnouncementBar({ fieldPath = 'site.announcement', defaultText
         borderRadius: '0.25rem',
         transition: 'color 0.15s ease',
     };
-    const hasDynamicField = Boolean(fieldPath && siteData?.site?.announcement);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-announcement-bar relative z-40 bg-slate-900 text-white text-xs md:text-sm font-medium px-4 py-2 flex items-center justify-center text-center ${className}`, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center flex-wrap gap-1.5 max-w-7xl mx-auto pr-6", children: [badge && ((0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-badge bg-white/20 text-white px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase inline-flex items-center", style: badgeStyle, ...(hasDynamicField ? { 'data-preview-field-path': `${fieldPath}.badge` } : { 'data-preview-static': 'announcement-badge' }), children: badge })), (0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-text", ...(hasDynamicField ? { 'data-preview-field-path': `${fieldPath}.text` } : { 'data-preview-static': 'announcement-text' }), children: text }), linkText && linkUrl && ((0, jsx_runtime_1.jsxs)("a", { href: linkUrl, className: "deneb-announcement-link underline font-semibold text-white hover:opacity-90 transition-opacity ml-1 inline-flex items-center gap-1", style: linkStyle, ...(hasDynamicField ? { 'data-preview-field-path': `${fieldPath}.linkText` } : { 'data-preview-static': 'announcement-link' }), children: [linkText, " \u2192"] }))] }), dismissible && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsDismissed(true), style: closeButtonStyle, "aria-label": "Dismiss announcement", className: "hover:text-white transition-colors", "data-preview-static": "announcement-dismiss", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-announcement-bar relative z-40 bg-slate-900 text-white text-xs md:text-sm font-medium px-4 py-2 flex items-center justify-center text-center ${className}`, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center flex-wrap gap-1.5 max-w-7xl mx-auto pr-6", children: [badge && ((0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-badge bg-white/20 text-white px-2 py-0.5 rounded-full text-[10px] font-bold tracking-wider uppercase inline-flex items-center", style: badgeStyle, "data-preview-field-path": fieldPath ? `${fieldPath}.badge` : undefined, children: badge })), (0, jsx_runtime_1.jsx)("span", { className: "deneb-announcement-text", "data-preview-field-path": fieldPath ? `${fieldPath}.text` : undefined, children: text }), linkText && linkUrl && ((0, jsx_runtime_1.jsxs)("a", { href: linkUrl, className: "deneb-announcement-link underline font-semibold text-white hover:opacity-90 transition-opacity ml-1 inline-flex items-center gap-1", style: linkStyle, "data-preview-field-path": fieldPath ? `${fieldPath}.linkText` : undefined, children: [linkText, " \u2192"] }))] }), dismissible && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsDismissed(true), style: closeButtonStyle, "aria-label": "Dismiss announcement", className: "hover:text-white transition-colors", "data-preview-static": "announcement-dismiss", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }));
 }
 // Canonical alias
 exports.AnnouncementBar = EditableAnnouncementBar;

package/dist/EditableContactForm.d.ts

@@ -5,7 +5,15 @@ export interface EditableContactFormProps extends React.FormHTMLAttributes<HTMLF
     formTitlePath?: string;
     submitButtonText?: string;
     submitLabelPath?: string;
+    nameLabelPath?: string;
+    namePlaceholderPath?: string;
+    emailLabelPath?: string;
+    emailPlaceholderPath?: string;
+    phoneLabelPath?: string;
+    phonePlaceholderPath?: string;
+    messageLabelPath?: string;
+    messagePlaceholderPath?: string;
     successMessage?: string;
     showPhone?: boolean;
 }
-export declare function EditableContactForm({ endpoint, formTitle, formTitlePath, submitButtonText, submitLabelPath, successMessage, showPhone, className, style, ...props }: EditableContactFormProps): React.JSX.Element;
+export declare function EditableContactForm({ endpoint, formTitle, formTitlePath, submitButtonText, submitLabelPath, nameLabelPath, namePlaceholderPath, emailLabelPath, emailPlaceholderPath, phoneLabelPath, phonePlaceholderPath, messageLabelPath, messagePlaceholderPath, successMessage, showPhone, className, style, ...props }: EditableContactFormProps): React.JSX.Element;

package/dist/EditableContactForm.js

@@ -4,13 +4,21 @@ exports.EditableContactForm = EditableContactForm;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SiteDataProvider_1 = require("./SiteDataProvider");
-function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact', formTitle, formTitlePath, submitButtonText = 'Send Message', submitLabelPath = 'contact.submitLabel', successMessage = 'Thank you! Your message has been sent successfully.', showPhone = false, className = '', style, ...props }) {
+function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact', formTitle, formTitlePath, submitButtonText = 'Send Message', submitLabelPath = 'contact.submitLabel', nameLabelPath = 'contact.nameLabel', namePlaceholderPath = 'contact.namePlaceholder', emailLabelPath = 'contact.emailLabel', emailPlaceholderPath = 'contact.emailPlaceholder', phoneLabelPath = 'contact.phoneLabel', phonePlaceholderPath = 'contact.phonePlaceholder', messageLabelPath = 'contact.messageLabel', messagePlaceholderPath = 'contact.messagePlaceholder', successMessage = 'Thank you! Your message has been sent successfully.', showPhone = false, className = '', style, ...props }) {
     const siteData = (0, SiteDataProvider_1.useSiteData)();
     const [status, setStatus] = (0, react_1.useState)('idle');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
     const contactContent = siteData?.content?.contact;
     const resolvedSubmitText = String(contactContent?.submitLabel || submitButtonText);
     const resolvedFormTitle = formTitle || contactContent?.formTitle;
+    const resolvedNameLabel = String(contactContent?.nameLabel || 'Your Name');
+    const resolvedNamePlaceholder = String(contactContent?.namePlaceholder || 'John Doe');
+    const resolvedEmailLabel = String(contactContent?.emailLabel || 'Email Address');
+    const resolvedEmailPlaceholder = String(contactContent?.emailPlaceholder || 'john@example.com');
+    const resolvedPhoneLabel = String(contactContent?.phoneLabel || 'Phone Number');
+    const resolvedPhonePlaceholder = String(contactContent?.phonePlaceholder || '+1 (555) 000-0000');
+    const resolvedMessageLabel = String(contactContent?.messageLabel || 'Message');
+    const resolvedMessagePlaceholder = String(contactContent?.messagePlaceholder || 'Tell us how we can help...');
     const handleSubmit = async (e) => {
         e.preventDefault();
         setStatus('submitting');
@@ -51,13 +59,13 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                     fontWeight: 700,
                     color: 'var(--heading-color, #0f172a)',
                     margin: '0 0 0.5rem 0',
-                }, children: resolvedFormTitle })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-name", "data-preview-static": "contact-label-name", style: {
+                }, children: resolvedFormTitle })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-name", "data-preview-field-path": nameLabelPath, style: {
                             display: 'block',
                             fontSize: '0.875rem',
                             fontWeight: 600,
                             marginBottom: '0.375rem',
                             color: 'var(--heading-color, #0f172a)',
-                        }, children: "Your Name" }), (0, jsx_runtime_1.jsx)("input", { id: "contact-name", name: "name", type: "text", required: true, placeholder: "John Doe", style: {
+                        }, children: resolvedNameLabel }), (0, jsx_runtime_1.jsx)("input", { id: "contact-name", name: "name", type: "text", required: true, placeholder: resolvedNamePlaceholder, "data-preview-field-path": namePlaceholderPath, style: {
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
@@ -66,13 +74,13 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             outline: 'none',
                             backgroundColor: '#ffffff',
                             boxSizing: 'border-box',
-                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-email", "data-preview-static": "contact-label-email", style: {
+                        } })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-email", "data-preview-field-path": emailLabelPath, style: {
                             display: 'block',
                             fontSize: '0.875rem',
                             fontWeight: 600,
                             marginBottom: '0.375rem',
                             color: 'var(--heading-color, #0f172a)',
-                        }, children: "Email Address" }), (0, jsx_runtime_1.jsx)("input", { id: "contact-email", name: "email", type: "email", required: true, placeholder: "john@example.com", style: {
+                        }, children: resolvedEmailLabel }), (0, jsx_runtime_1.jsx)("input", { id: "contact-email", name: "email", type: "email", required: true, placeholder: resolvedEmailPlaceholder, "data-preview-field-path": emailPlaceholderPath, style: {
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
@@ -81,13 +89,13 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             outline: 'none',
                             backgroundColor: '#ffffff',
                             boxSizing: 'border-box',
-                        } })] }), showPhone && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-phone", "data-preview-static": "contact-label-phone", style: {
+                        } })] }), showPhone && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-phone", "data-preview-field-path": phoneLabelPath, style: {
                             display: 'block',
                             fontSize: '0.875rem',
                             fontWeight: 600,
                             marginBottom: '0.375rem',
                             color: 'var(--heading-color, #0f172a)',
-                        }, children: "Phone Number" }), (0, jsx_runtime_1.jsx)("input", { id: "contact-phone", name: "phone", type: "tel", placeholder: "+1 (555) 000-0000", style: {
+                        }, children: resolvedPhoneLabel }), (0, jsx_runtime_1.jsx)("input", { id: "contact-phone", name: "phone", type: "tel", placeholder: resolvedPhonePlaceholder, "data-preview-field-path": phonePlaceholderPath, style: {
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',
@@ -96,13 +104,13 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                             outline: 'none',
                             backgroundColor: '#ffffff',
                             boxSizing: 'border-box',
-                        } })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-message", "data-preview-static": "contact-label-message", style: {
+                        } })] })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "contact-message", "data-preview-field-path": messageLabelPath, style: {
                             display: 'block',
                             fontSize: '0.875rem',
                             fontWeight: 600,
                             marginBottom: '0.375rem',
                             color: 'var(--heading-color, #0f172a)',
-                        }, children: "Message" }), (0, jsx_runtime_1.jsx)("textarea", { id: "contact-message", name: "message", rows: 5, required: true, placeholder: "Tell us how we can help...", style: {
+                        }, children: resolvedMessageLabel }), (0, jsx_runtime_1.jsx)("textarea", { id: "contact-message", name: "message", rows: 5, required: true, placeholder: resolvedMessagePlaceholder, "data-preview-field-path": messagePlaceholderPath, style: {
                             width: '100%',
                             padding: '0.75rem 1rem',
                             borderRadius: '10px',

package/dist/EditableDialog.js

@@ -82,17 +82,12 @@ function EditableDialog({ open = false, onClose, title, description, titleFieldP
                             alignItems: 'flex-start',
                             justifyContent: 'space-between',
                             marginBottom: description || descriptionFieldPath ? '0.5rem' : '1.25rem',
-                        }, children: [titleFieldPath ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: titleFieldPath, defaultValue: title, style: {
+                        }, children: [title ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h2", id: titleFieldPath || 'common.dialogTitle', defaultValue: title, style: {
                                     fontSize: '1.35rem',
                                     fontWeight: 700,
                                     color: 'var(--heading-color, #0f172a)',
                                     margin: 0,
-                                } })) : title ? ((0, jsx_runtime_1.jsx)("h2", { "data-preview-static": "dialog-title", style: {
-                                    fontSize: '1.35rem',
-                                    fontWeight: 700,
-                                    color: 'var(--heading-color, #0f172a)',
-                                    margin: 0,
-                                }, children: title })) : ((0, jsx_runtime_1.jsx)("div", {})), showCloseButton && onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "dialog-close-btn", onClick: onClose, "aria-label": "Close dialog", style: {
+                                } })) : ((0, jsx_runtime_1.jsx)("div", {})), showCloseButton && onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "dialog-close-btn", onClick: onClose, "aria-label": "Close dialog", style: {
                                     background: 'none',
                                     border: 'none',
                                     padding: '0.375rem',
@@ -109,18 +104,13 @@ function EditableDialog({ open = false, onClose, title, description, titleFieldP
                                 }, onMouseLeave: (e) => {
                                     e.currentTarget.style.backgroundColor = 'transparent';
                                     e.currentTarget.style.color = '#94a3b8';
-                                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] })), descriptionFieldPath ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: descriptionFieldPath, defaultValue: description, style: {
-                            fontSize: '0.925rem',
-                            color: 'var(--muted-text, #64748b)',
-                            marginBottom: '1.5rem',
-                            lineHeight: 1.5,
-                        } })) : description ? ((0, jsx_runtime_1.jsx)("p", { "data-preview-static": "dialog-description", style: {
+                                }, children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] })), description ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "p", id: descriptionFieldPath || 'common.dialogDescription', defaultValue: description, style: {
                             fontSize: '0.925rem',
                             color: 'var(--muted-text, #64748b)',
                             marginBottom: '1.5rem',
                             lineHeight: 1.5,
                             margin: '0 0 1.5rem 0',
-                        }, children: description })) : null, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, overflowY: 'auto' }, children: children }), footerSlot && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        } })) : null, (0, jsx_runtime_1.jsx)("div", { style: { flex: 1, overflowY: 'auto' }, children: children }), footerSlot && ((0, jsx_runtime_1.jsx)("div", { style: {
                             marginTop: '1.75rem',
                             paddingTop: '1rem',
                             borderTop: '1px solid #f1f5f9',

package/dist/EditableFooter.d.ts

@@ -9,6 +9,9 @@ export interface EditableFooterProps extends React.HTMLAttributes<HTMLElement> {
     links?: FooterLink[];
     basePath?: string;
     showNewsletter?: boolean;
+    socialMedia?: Record<string, string>;
+    whatsappUrl?: string;
+    directMessageText?: string;
 }
 /**
  * Next-Level DENEB UI Footer

package/dist/EditableFooter.js

@@ -6,12 +6,47 @@ exports.EditableFooter = EditableFooter;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SiteDataProvider_1 = require("./SiteDataProvider");
+const EditableText_1 = require("./EditableText");
 const DEFAULT_FOOTER_PAGES = [
     { id: 'home', label: 'Home', route: '/' },
     { id: 'about_us', label: 'About', route: '/about_us' },
     { id: 'services', label: 'Services', route: '/services' },
     { id: 'contact', label: 'Contact', route: '/contact' },
 ];
+const SOCIAL_ICONS = {
+    twitter: {
+        label: 'X (Twitter)',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })),
+    },
+    x: {
+        label: 'X (Twitter)',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })),
+    },
+    github: {
+        label: 'GitHub',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) })),
+    },
+    linkedin: {
+        label: 'LinkedIn',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" }) })),
+    },
+    instagram: {
+        label: 'Instagram',
+        icon: ((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", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "20", x: "2", y: "2", rx: "5", ry: "5" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" }), (0, jsx_runtime_1.jsx)("line", { x1: "17.5", x2: "17.51", y1: "6.5", y2: "6.5" })] })),
+    },
+    facebook: {
+        label: 'Facebook',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) })),
+    },
+    youtube: {
+        label: 'YouTube',
+        icon: ((0, jsx_runtime_1.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) })),
+    },
+    whatsapp: {
+        label: 'WhatsApp',
+        icon: ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.634.072-1.849-.434-1.464-.61-2.41-2.096-2.484-2.195-.072-.099-.6-0.798-.6-1.523 0-.726.379-1.084.514-1.231.135-.148.297-.185.396-.185.099 0 .198.002.284.006.091.004.213-.035.333.253.123.297.42 1.024.457 1.099.037.074.062.16.012.259-.049.099-.074.16-.148.247-.074.086-.156.193-.223.259-.074.074-.152.155-.065.304.086.148.384.633.824 1.024.567.505 1.045.661 1.194.735.148.074.235.062.321-.037.086-.099.37-.432.469-.58.099-.148.198-.123.333-.074.135.049.864.407 1.012.481.148.074.247.111.284.173.037.062.037.358-.107.763z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12c0 1.82.49 3.53 1.34 5L2 22l5.16-1.32c1.42.8 3.06 1.32 4.84 1.32 5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18.2c-1.59 0-3.07-.46-4.32-1.26l-.31-.2-3.06.78.82-2.98-.22-.33C4.05 14.93 3.6 13.51 3.6 12c0-4.63 3.77-8.4 8.4-8.4s8.4 3.77 8.4 8.4-3.77 8.4-8.4 8.4z" })] })),
+    },
+};
 /**
  * Next-Level DENEB UI Footer
  *
@@ -35,6 +70,7 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
     const [subscribed, setSubscribed] = (0, react_1.useState)(false);
     const content = (siteData?.content || {});
     const common = (content?.common || {});
+    const contact = (content?.contact || {});
     const business = (common?.business || {});
     // Auto-synchronized with Header
     const siteName = String(common?.websiteTitle || common?.siteName || 'Storefront');
@@ -45,9 +81,23 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
     const footerHeading = String(common?.footerHeading || 'Stay Connected');
     const copyright = String(common?.copyright || `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`);
     // Contact / business values
-    const phone = String(business?.phone || common?.phone || '');
-    const emailContact = String(business?.email || common?.email || '');
-    const address = String(business?.location?.address || common?.address || '');
+    const phone = String(business?.phone || common?.phone || contact?.phone || '');
+    const emailContact = String(business?.email || common?.email || contact?.email || '');
+    const address = String(business?.location?.address || common?.address || contact?.address || '');
+    // Social media mapping with live editable URL bindings
+    const rawSocial = (common?.socialMedia || content?.socialMedia || props.socialMedia || {});
+    const socialPlatforms = Object.keys(rawSocial).length > 0
+        ? Object.keys(rawSocial)
+        : ['twitter', 'github', 'linkedin', 'instagram'];
+    // Direct message / WhatsApp action
+    const directMessageLabel = String(contact?.directMessageText || common?.directMessageText || props.directMessageText || 'Send us a direct message');
+    const rawWhatsapp = String(contact?.whatsapp || contact?.whatsappUrl || common?.whatsapp || business?.whatsapp || props.whatsappUrl || phone || '');
+    const cleanDigits = rawWhatsapp.replace(/[^\d]/g, '');
+    const whatsappHref = rawWhatsapp.startsWith('http')
+        ? rawWhatsapp
+        : cleanDigits
+            ? `https://wa.me/${cleanDigits}`
+            : 'https://wa.me/';
     // Route filtering
     const navigationItems = links || defaultLinks;
     const requiredPages = Array.isArray(siteData?.requirements?.requiredPages)
@@ -118,14 +168,14 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                             padding: 0,
                                             cursor: 'pointer',
                                             textAlign: 'left',
-                                        }, className: "inline-flex items-center gap-3 group border-0 bg-transparent p-0 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("img", { src: withBase(logoUrl || '/placeholder.svg'), alt: siteName, "data-preview-static": "footer-brand-logo", style: {
+                                        }, className: "inline-flex items-center gap-3 group border-0 bg-transparent p-0 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("img", { src: withBase(logoUrl || '/placeholder.svg'), alt: siteName, "data-preview-field-path": "common.logoUrl", style: {
                                                     height: '32px',
                                                     width: 'auto',
                                                     maxWidth: '120px',
                                                     objectFit: 'contain',
                                                     borderRadius: '6px',
                                                     filter: 'brightness(1.1)',
-                                                }, className: "h-8 w-auto max-w-[120px] object-contain rounded-md group-hover:scale-105 transition-transform" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-static": "footer-brand-title", style: {
+                                                }, className: "h-8 w-auto max-w-[120px] object-contain rounded-md group-hover:scale-105 transition-transform" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": "common.websiteTitle", style: {
                                                     fontSize: '1.25rem',
                                                     fontWeight: 700,
                                                     letterSpacing: '-0.025em',
@@ -136,12 +186,20 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                             color: '#94a3b8', // slate-400
                                             margin: 0,
                                             maxWidth: '320px',
-                                        }, className: "text-sm text-slate-400 leading-relaxed max-w-sm mt-1", children: shortDescription }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                        }, className: "text-sm text-slate-400 leading-relaxed max-w-sm mt-1", children: shortDescription }), (0, jsx_runtime_1.jsx)("div", { style: {
                                             display: 'flex',
                                             alignItems: 'center',
+                                            flexWrap: 'wrap',
                                             gap: '0.625rem',
                                             marginTop: '0.75rem',
-                                        }, className: "flex items-center gap-2.5 mt-3", children: [(0, jsx_runtime_1.jsx)("a", { href: "https://twitter.com", target: "_blank", rel: "noreferrer", "data-preview-static": "social-twitter", "aria-label": "Twitter", style: {
+                                        }, className: "flex items-center flex-wrap gap-2.5 mt-3", children: socialPlatforms.map((platformKey) => {
+                                            const key = platformKey.toLowerCase();
+                                            const iconConfig = SOCIAL_ICONS[key] || {
+                                                label: platformKey,
+                                                icon: ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: '10px', fontWeight: 700, textTransform: 'uppercase' }, children: platformKey.slice(0, 2) })),
+                                            };
+                                            const url = rawSocial[platformKey] || rawSocial[key] || `https://${key}.com`;
+                                            return ((0, jsx_runtime_1.jsx)("a", { href: url, target: "_blank", rel: "noopener noreferrer", "data-preview-field-path": `common.socialMedia.${key}`, "aria-label": iconConfig.label, title: `Edit ${iconConfig.label} URL in Fivora`, style: {
                                                     width: '34px',
                                                     height: '34px',
                                                     borderRadius: '8px',
@@ -153,31 +211,8 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                                     color: '#94a3b8',
                                                     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: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) }) }), (0, jsx_runtime_1.jsx)("a", { href: "https://github.com", target: "_blank", rel: "noreferrer", "data-preview-static": "social-github", "aria-label": "GitHub", style: {
-                                                    width: '34px',
-                                                    height: '34px',
-                                                    borderRadius: '8px',
-                                                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                                                    border: '1px solid rgba(255, 255, 255, 0.1)',
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    color: '#94a3b8',
-                                                    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: (0, jsx_runtime_1.jsx)("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" }) }) }), (0, jsx_runtime_1.jsx)("a", { href: "https://linkedin.com", target: "_blank", rel: "noreferrer", "data-preview-static": "social-linkedin", "aria-label": "LinkedIn", style: {
-                                                    width: '34px',
-                                                    height: '34px',
-                                                    borderRadius: '8px',
-                                                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                                                    border: '1px solid rgba(255, 255, 255, 0.1)',
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    color: '#94a3b8',
-                                                    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: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" }) }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { "data-preview-static": "footer-explore-heading", style: {
+                                                }, 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',
@@ -229,19 +264,20 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                             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-static": "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-static": "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-static": "contact-address", children: address })] })), hasContact && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: '0.5rem' }, children: (0, jsx_runtime_1.jsx)("span", { "data-target-page": "contact", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", "data-preview-static": "contact-cta-btn", onClick: () => navigate('/contact'), style: {
-                                                            display: 'inline-flex',
-                                                            alignItems: 'center',
-                                                            gap: '0.375rem',
-                                                            fontSize: '0.8125rem',
-                                                            fontWeight: 600,
-                                                            color: '#818cf8', // indigo-400
-                                                            background: 'transparent',
-                                                            border: 0,
-                                                            padding: 0,
-                                                            cursor: 'pointer',
-                                                            transition: 'color 0.15s ease',
-                                                        }, className: "inline-flex items-center gap-1.5 text-xs font-semibold text-indigo-400 hover:text-indigo-300 transition-colors border-0 bg-transparent p-0 cursor-pointer", children: ["Send us a direct message", (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", { children: [(0, jsx_runtime_1.jsx)("h4", { "data-preview-field-path": "common.footerHeading", 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.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: {
+                                                        display: 'inline-flex',
+                                                        alignItems: 'center',
+                                                        gap: '0.375rem',
+                                                        fontSize: '0.8125rem',
+                                                        fontWeight: 600,
+                                                        color: '#34d399', // emerald-400
+                                                        background: 'transparent',
+                                                        border: 0,
+                                                        padding: 0,
+                                                        cursor: 'pointer',
+                                                        textDecoration: 'none',
+                                                        transition: 'color 0.15s ease',
+                                                    }, className: "inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-400 hover:text-emerald-300 transition-colors border-0 bg-transparent p-0 cursor-pointer", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", style: { flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)("path", { d: "M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.312.045-.634.072-1.849-.434-1.464-.61-2.41-2.096-2.484-2.195-.072-.099-.6-0.798-.6-1.523 0-.726.379-1.084.514-1.231.135-.148.297-.185.396-.185.099 0 .198.002.284.006.091.004.213-.035.333.253.123.297.42 1.024.457 1.099.037.074.062.16.012.259-.049.099-.074.16-.148.247-.074.086-.156.193-.223.259-.074.074-.152.155-.065.304.086.148.384.633.824 1.024.567.505 1.045.661 1.194.735.148.074.235.062.321-.037.086-.099.37-.432.469-.58.099-.148.198-.123.333-.074.135.049.864.407 1.012.481.148.074.247.111.284.173.037.062.037.358-.107.763z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12c0 1.82.49 3.53 1.34 5L2 22l5.16-1.32c1.42.8 3.06 1.32 4.84 1.32 5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18.2c-1.59 0-3.07-.46-4.32-1.26l-.31-.2-3.06.78.82-2.98-.22-.33C4.05 14.93 3.6 13.51 3.6 12c0-4.63 3.77-8.4 8.4-8.4s8.4 3.77 8.4 8.4-3.77 8.4-8.4 8.4z" })] }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: "contact.directMessageText", defaultValue: directMessageLabel, style: { color: 'inherit', fontWeight: 600 } }), (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", { children: [(0, jsx_runtime_1.jsx)("h4", { "data-preview-field-path": "common.footerHeading", style: {
                                             fontSize: '0.8125rem',
                                             fontWeight: 700,
                                             textTransform: 'uppercase',
@@ -313,7 +349,7 @@ function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath =
                                                     padding: '0.15rem 0.5rem',
                                                     borderRadius: '6px',
                                                     letterSpacing: '0.025em',
-                                                }, className: "inline-flex items-center gap-1 font-semibold text-slate-200 bg-slate-900 border border-slate-800 px-2 py-0.5 rounded-md text-xs shadow-inner", children: [(0, jsx_runtime_1.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", className: "text-indigo-400", children: (0, jsx_runtime_1.jsx)("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }), "DENEB UI"] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "back-to-top", onClick: scrollToTop, "aria-label": "Back to top", style: {
+                                                }, className: "inline-flex items-center gap-1 font-semibold text-slate-200 bg-slate-900 border border-slate-800 px-2 py-0.5 rounded-md text-xs shadow-inner", children: [(0, jsx_runtime_1.jsx)("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "currentColor", className: "text-cyan-400", children: (0, jsx_runtime_1.jsx)("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }), "Fivora"] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "back-to-top", onClick: scrollToTop, "aria-label": "Back to top", style: {
                                             display: 'inline-flex',
                                             alignItems: 'center',
                                             justifyContent: 'center',

package/dist/EditableNavbar.js

@@ -171,7 +171,7 @@ function EditableNavbar({ defaultLinks = DEFAULT_PAGES, sticky = true, activeRou
                                 cursor: 'pointer',
                             }, className: `block w-full text-left px-3.5 py-2.5 rounded-lg text-base font-medium transition-colors border-0 cursor-pointer ${isActive
                                 ? 'bg-slate-100 text-slate-900 font-semibold dark:bg-slate-800 dark:text-white'
-                                : 'bg-transparent text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-static": "mobile-nav-item", children: label }) }) }, link.id));
+                                : 'bg-transparent text-slate-700 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `common.navLabels.${link.id}`, children: label }) }) }, link.id));
                 }) }))] }));
 }
 exports.Navbar = EditableNavbar;

package/dist/EditableProductCard.d.ts

@@ -51,10 +51,18 @@ export interface EditableProductCardProps extends React.HTMLAttributes<HTMLEleme
      * Optional custom action slot (e.g. Add to Cart button).
      */
     actionSlot?: React.ReactNode;
+    /**
+     * Label for the action button (default: 'Buy Now' or product.buttonText).
+     */
+    actionLabel?: string;
+    /**
+     * Custom field path for the action button label.
+     */
+    actionLabelPath?: string;
 }
 /**
  * EditableProductCard is an elite, auto-balancing commerce card supporting
  * four visual variants (modern-glass, classic, minimal, horizontal) and
  * strict Fivora visual editing synchronization.
  */
-export declare function EditableProductCard({ itemPath, product, cardVariant, imageFallback, as: Component, showPrice, showDescription, showCategory, actionSlot, className, style, ...props }: EditableProductCardProps): React.JSX.Element;
+export declare function EditableProductCard({ itemPath, product, cardVariant, imageFallback, as: Component, showPrice, showDescription, showCategory, actionSlot, actionLabel, actionLabelPath, className, style, ...props }: EditableProductCardProps): React.JSX.Element;

package/dist/EditableProductCard.js

@@ -10,7 +10,7 @@ const EditableText_2 = require("./EditableText");
  * four visual variants (modern-glass, classic, minimal, horizontal) and
  * strict Fivora visual editing synchronization.
  */
-function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass', imageFallback, as: Component = 'article', showPrice = true, showDescription = true, showCategory = true, actionSlot, className = '', style, ...props }) {
+function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass', imageFallback, as: Component = 'article', showPrice = true, showDescription = true, showCategory = true, actionSlot, actionLabel, actionLabelPath, className = '', style, ...props }) {
     const name = String(product?.name || product?.title || '');
     const price = product?.price !== undefined ? String(product.price) : '';
     const originalPrice = product?.originalPrice !== undefined ? String(product.originalPrice) : '';
@@ -102,7 +102,7 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                             fontSize: '0.875rem',
                                             textDecoration: 'line-through',
                                             color: 'var(--muted-text, #94a3b8)',
-                                        } })) : null] })), actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", "data-preview-static": "product-action-btn", style: {
+                                        } })) : null] })), actionSlot ? ((0, jsx_runtime_1.jsx)("div", { children: actionSlot })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", style: {
                                     backgroundColor: 'var(--brand-color, #2563eb)',
                                     color: '#ffffff',
                                     border: 'none',
@@ -112,5 +112,5 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
                                     fontWeight: 600,
                                     cursor: 'pointer',
                                     transition: 'opacity 0.2s ease',
-                                }, children: "Buy Now" }))] })] })] }));
+                                }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "span", id: actionLabelPath || `${itemPath}.buttonText`, defaultValue: actionLabel || product?.buttonText || 'Buy Now', style: { color: '#ffffff', fontWeight: 600 } }) }))] })] })] }));
 }

package/dist/EditableText.d.ts

@@ -32,6 +32,11 @@ export interface EditableTextProps extends React.HTMLAttributes<HTMLElement> {
      */
     'data-preview-field-path'?: string;
     defaultValue?: string;
+    /**
+     * Placeholder text displayed when defaultValue or children is empty.
+     * Remains 100% interactive and editable inside the Fivora live editor.
+     */
+    placeholder?: string;
     as?: React.ElementType;
     /**
      * Semantic typography variant providing instant preset styles (h1-h6, p, lead, eyebrow, caption, badge).
@@ -76,7 +81,7 @@ export interface EditableTextProps extends React.HTMLAttributes<HTMLElement> {
  * EditableText provides full typography controls (color, size, weight, line-height, alignment, transform, variants)
  * alongside strict Fivora visual editing bindings.
  */
-export declare function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, ...props }: EditableTextProps): React.JSX.Element;
+export declare function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, placeholder, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, ...props }: EditableTextProps): React.JSX.Element;
 export interface EditableHeadingProps extends Omit<EditableTextProps, 'variant'> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }

package/dist/EditableText.js

@@ -106,9 +106,14 @@ function toCssUnit(value) {
  * EditableText provides full typography controls (color, size, weight, line-height, alignment, transform, variants)
  * alongside strict Fivora visual editing bindings.
  */
-function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, ...props }) {
+function EditableText({ id, 'data-preview-field-path': previewFieldPath, defaultValue, placeholder, children, as: ComponentOverride, variant, color, size, weight, lineHeight, align, transform, letterSpacing, fontFamily, style, ...props }) {
     const path = previewFieldPath || id;
-    const content = children !== undefined ? children : defaultValue;
+    const rawContent = children !== undefined ? children : defaultValue;
+    const isContentEmpty = rawContent === undefined ||
+        rawContent === null ||
+        (typeof rawContent === 'string' && rawContent.trim() === '');
+    const isPlaceholderActive = isContentEmpty && Boolean(placeholder);
+    const displayContent = isPlaceholderActive ? placeholder : rawContent;
     const dynamicStyle = (0, SiteDataProvider_1.useFieldStyle)(path);
     const variantDefaults = variant ? exports.VARIANT_DEFAULTS[variant] : undefined;
     const Component = ComponentOverride || variantDefaults?.as || 'span';
@@ -148,6 +153,11 @@ function EditableText({ id, 'data-preview-field-path': previewFieldPath, default
     const dynamicMarginLeft = toCssUnit(dynamicStyle?.spacingLeft);
     const dynamicMarginRight = toCssUnit(dynamicStyle?.spacingRight);
     const typographyStyle = {
+        // Minimum dimensions ensure empty/placeholder elements never collapse to 0x0 and remain 100% clickable in Fivora
+        minHeight: '1.2em',
+        minWidth: '1.5ch',
+        ...(Component === 'span' || ComponentOverride === 'span' ? { display: 'inline-block' } : {}),
+        ...(isPlaceholderActive ? { opacity: 0.55, fontStyle: 'italic' } : {}),
         ...(resolvedColor ? { color: resolvedColor } : {}),
         ...(resolvedSize ? { fontSize: resolvedSize } : {}),
         ...(resolvedWeight ? { fontWeight: resolvedWeight } : {}),
@@ -168,7 +178,7 @@ function EditableText({ id, 'data-preview-field-path': previewFieldPath, default
         ...(dynamicMarginLeft !== undefined ? { marginLeft: dynamicMarginLeft } : {}),
         ...(dynamicMarginRight !== undefined ? { marginRight: dynamicMarginRight } : {}),
     };
-    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, style: typographyStyle, ...props, children: content }));
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, "data-preview-placeholder": isPlaceholderActive ? 'true' : undefined, style: typographyStyle, ...props, children: displayContent }));
 }
 function EditableHeading({ level = 2, as, ...props }) {
     const variant = `h${level}`;

package/dist/business/BusinessHours.js

@@ -67,7 +67,7 @@ function BusinessHours({ hours, title = 'Business Hours', fieldPath = 'common.bu
         backgroundColor: 'var(--color-surface, #ffffff)',
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-business-hours ${className}`.trim(), style: containerStyles, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' }, children: [(0, jsx_runtime_1.jsx)("h4", { style: { margin: 0, fontSize: '1.1rem', fontWeight: 600, color: 'var(--color-text, #0f172a)' }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-static": "business-hours-title", children: title }) }), showStatusBadge && currentStatus && ((0, jsx_runtime_1.jsxs)("span", { "data-preview-static": "business-hours-status", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-business-hours ${className}`.trim(), style: containerStyles, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' }, children: [(0, jsx_runtime_1.jsx)("h4", { style: { margin: 0, fontSize: '1.1rem', fontWeight: 600, color: 'var(--color-text, #0f172a)' }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": fieldPath ? `${fieldPath}.title` : 'contact.businessHoursTitle', children: title }) }), showStatusBadge && currentStatus && ((0, jsx_runtime_1.jsxs)("span", { "data-preview-static": "business-hours-status", style: {
                             display: 'inline-flex',
                             alignItems: 'center',
                             gap: '0.35rem',

package/dist/location/LocationCard.js

@@ -37,5 +37,5 @@ function LocationCard({ title = 'Our Location', titleFieldPath, address, city, c
         alignItems: 'center',
         justifyContent: 'center',
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-location-card ${className}`.trim(), style: cardStyles, children: [(0, jsx_runtime_1.jsx)("div", { style: iconCircleStyles, children: (0, jsx_runtime_1.jsxs)("svg", { "data-preview-static": "location-card-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" })] }) }), titleFieldPath ? ((0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { as: "h3", id: titleFieldPath, defaultValue: title, style: { margin: 0, fontSize: '1.25rem', fontWeight: 600, color: 'var(--color-text, #0f172a)' } })) : ((0, jsx_runtime_1.jsx)("h3", { "data-preview-static": "location-card-title", style: { margin: 0, fontSize: '1.25rem', fontWeight: 600, color: 'var(--color-text, #0f172a)' }, children: title })), (0, jsx_runtime_1.jsx)(Address_1.Address, { address: address, city: city, country: country, postalCode: postalCode, fieldPath: fieldPath, addressFieldPath: addressFieldPath }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '0.5rem', width: '100%' }, children: (0, jsx_runtime_1.jsx)(MapLink_1.MapLink, { mapUrl: mapUrl, address: address, city: city, country: country, label: directionsLabel, fieldPath: mapUrlFieldPath, variant: "primary", size: "md", style: { width: '100%' } }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-location-card ${className}`.trim(), style: cardStyles, children: [(0, jsx_runtime_1.jsx)("div", { style: iconCircleStyles, children: (0, jsx_runtime_1.jsxs)("svg", { "data-preview-static": "location-card-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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)(EditableText_1.EditableText, { as: "h3", id: titleFieldPath || (fieldPath ? `${fieldPath}.title` : 'contact.locationTitle'), defaultValue: title, style: { margin: 0, fontSize: '1.25rem', fontWeight: 600, color: 'var(--color-text, #0f172a)' } }), (0, jsx_runtime_1.jsx)(Address_1.Address, { address: address, city: city, country: country, postalCode: postalCode, fieldPath: fieldPath, addressFieldPath: addressFieldPath }), (0, jsx_runtime_1.jsx)("div", { style: { marginTop: '0.5rem', width: '100%' }, children: (0, jsx_runtime_1.jsx)(MapLink_1.MapLink, { mapUrl: mapUrl, address: address, city: city, country: country, label: directionsLabel, fieldPath: mapUrlFieldPath, variant: "primary", size: "md", style: { width: '100%' } }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "DENEB UI - The premier visual-first React component framework for the modern web. Created by Chamika Gayashan & Induranga Kawishwara.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",