@deneb-ui/ui 2.0.50 → 2.0.52

package/dist/EditableContactForm.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 export interface EditableContactFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
     endpoint?: string;
+    whatsappUrl?: string;
+    whatsappUrlPath?: string;
+    submitMode?: 'whatsapp' | 'api' | 'both';
     formTitle?: string;
     formTitlePath?: string;
     submitButtonText?: string;
@@ -16,4 +19,4 @@ export interface EditableContactFormProps extends React.FormHTMLAttributes<HTMLF
     successMessage?: string;
     showPhone?: boolean;
 }
-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;
+export declare function EditableContactForm({ endpoint, whatsappUrl, whatsappUrlPath, submitMode, 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,7 +4,8 @@ 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', 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 useWhatsAppForm_1 = require("./hooks/useWhatsAppForm");
+function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact', whatsappUrl, whatsappUrlPath = 'contact.formWhatsappUrl', submitMode = 'whatsapp', 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)('');
@@ -19,6 +20,18 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
     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 { submitViaWhatsApp, resolvedWhatsappUrl } = (0, useWhatsAppForm_1.useWhatsAppForm)({
+        whatsappUrl,
+        whatsappUrlPath,
+        formName: resolvedFormTitle || 'Contact Form',
+        onSuccess: () => {
+            setStatus('success');
+        },
+        onError: (err) => {
+            setStatus('error');
+            setErrorMessage(err.message || 'Something went wrong. Please try again.');
+        },
+    });
     const handleSubmit = async (e) => {
         e.preventDefault();
         setStatus('submitting');
@@ -32,22 +45,38 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
             phone: showPhone ? formData.get('phone') : undefined,
             message: formData.get('message'),
         };
-        try {
-            const res = await fetch(endpoint, {
+        if (submitMode === 'api') {
+            try {
+                const res = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload),
+                });
+                if (!res.ok) {
+                    throw new Error(`Submission error: ${res.statusText || 'Unable to send message'}`);
+                }
+                setStatus('success');
+                form.reset();
+            }
+            catch (err) {
+                setStatus('error');
+                setErrorMessage(err.message || 'Something went wrong. Please try again.');
+            }
+            return;
+        }
+        // Default to WhatsApp dispatch (or both if requested)
+        if (submitMode === 'both') {
+            fetch(endpoint, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload),
-            });
-            if (!res.ok) {
-                throw new Error(`Submission error: ${res.statusText || 'Unable to send message'}`);
-            }
+            }).catch(() => { });
+        }
+        const success = submitViaWhatsApp(form);
+        if (success) {
             setStatus('success');
             form.reset();
         }
-        catch (err) {
-            setStatus('error');
-            setErrorMessage(err.message || 'Something went wrong. Please try again.');
-        }
     };
     return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-fivora-contact-disabled": true, style: {
             display: 'flex',
@@ -132,7 +161,7 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                     opacity: status === 'submitting' ? 0.7 : 1,
                     boxShadow: '0 4px 14px 0 rgba(37, 99, 235, 0.35)',
                     transition: 'all 0.2s ease',
-                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": submitLabelPath, children: status === 'submitting' ? 'Sending Message...' : resolvedSubmitText }) }), status === 'success' && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": submitLabelPath, children: status === 'submitting' ? 'Sending Message...' : resolvedSubmitText }) }), (0, jsx_runtime_1.jsx)("span", { hidden: true, "aria-hidden": "true", "data-preview-field-path": whatsappUrlPath, children: resolvedWhatsappUrl }), status === 'success' && ((0, jsx_runtime_1.jsx)("div", { style: {
                     padding: '1rem',
                     borderRadius: '10px',
                     backgroundColor: 'rgba(34, 197, 94, 0.1)',

package/dist/contact/ContactActions.d.ts

@@ -17,8 +17,7 @@ export interface ContactActionsProps {
     style?: React.CSSProperties;
 }
 /**
- * Smart container that automatically renders available contact channels.
- * When a merchant adds phone, WhatsApp, or email in site-data.json,
- * the corresponding action button appears automatically with zero template code changes.
+ * Always-mounted contact channels so Fivora empty-state validation keeps
+ * the field markers clickable when values are blank.
  */
-export declare function ContactActions({ phone, whatsapp, email, phoneFieldPath, whatsappFieldPath, emailFieldPath, labels, size, layout, className, style, }: ContactActionsProps): React.JSX.Element | null;
+export declare function ContactActions({ phone, whatsapp, email, phoneFieldPath, whatsappFieldPath, emailFieldPath, labels, size, layout, className, style, }: ContactActionsProps): React.JSX.Element;

package/dist/contact/ContactActions.js

@@ -7,17 +7,10 @@ const WhatsAppButton_1 = require("./WhatsAppButton");
 const PhoneButton_1 = require("./PhoneButton");
 const EmailButton_1 = require("./EmailButton");
 /**
- * Smart container that automatically renders available contact channels.
- * When a merchant adds phone, WhatsApp, or email in site-data.json,
- * the corresponding action button appears automatically with zero template code changes.
+ * Always-mounted contact channels so Fivora empty-state validation keeps
+ * the field markers clickable when values are blank.
  */
 function ContactActions({ phone, whatsapp, email, phoneFieldPath = 'common.business.phone', whatsappFieldPath = 'common.business.whatsapp', emailFieldPath = 'common.business.email', labels = {}, size = 'md', layout = 'row', className = '', style, }) {
-    const hasPhone = Boolean(phone && phone.trim());
-    const hasWhatsApp = Boolean(whatsapp && whatsapp.trim());
-    const hasEmail = Boolean(email && email.trim());
-    if (!hasPhone && !hasWhatsApp && !hasEmail) {
-        return null;
-    }
     const layoutStyles = {
         display: 'flex',
         flexDirection: layout === 'column' ? 'column' : 'row',
@@ -26,5 +19,5 @@ function ContactActions({ phone, whatsapp, email, phoneFieldPath = 'common.busin
         gap: '0.75rem',
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-contact-actions deneb-layout-${layout} ${className}`.trim(), style: layoutStyles, children: [hasPhone && ((0, jsx_runtime_1.jsx)(PhoneButton_1.PhoneButton, { value: phone, fieldPath: phoneFieldPath, label: labels.phone || 'Call Us', size: size })), hasWhatsApp && ((0, jsx_runtime_1.jsx)(WhatsAppButton_1.WhatsAppButton, { value: whatsapp, fieldPath: whatsappFieldPath, label: labels.whatsapp || 'Chat on WhatsApp', size: size })), hasEmail && ((0, jsx_runtime_1.jsx)(EmailButton_1.EmailButton, { value: email, fieldPath: emailFieldPath, label: labels.email || 'Email Us', size: size }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-contact-actions deneb-layout-${layout} ${className}`.trim(), style: layoutStyles, children: [(0, jsx_runtime_1.jsx)(PhoneButton_1.PhoneButton, { value: phone ?? '', fieldPath: phoneFieldPath, label: labels.phone || 'Call Us', size: size }), (0, jsx_runtime_1.jsx)(WhatsAppButton_1.WhatsAppButton, { value: whatsapp ?? '', fieldPath: whatsappFieldPath, label: labels.whatsapp || 'Chat on WhatsApp', size: size }), (0, jsx_runtime_1.jsx)(EmailButton_1.EmailButton, { value: email ?? '', fieldPath: emailFieldPath, label: labels.email || 'Email Us', size: size })] }));
 }

package/dist/contact/PhoneButton.js

@@ -5,7 +5,7 @@ exports.PhoneButton = PhoneButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContactButton_1 = require("./ContactButton");
 function PhoneButton({ phoneNumber, value, label = 'Call Us', fieldPath = 'common.business.phone', variant = 'primary', ...rest }) {
-    const number = phoneNumber || value;
+    const number = phoneNumber ?? value;
     if (!number && !fieldPath)
         return null;
     return ((0, jsx_runtime_1.jsx)(ContactButton_1.ContactButton, { type: "phone", value: number, label: label, fieldPath: fieldPath, variant: variant, ...rest }));

package/dist/hooks/useWhatsAppForm.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export interface UseWhatsAppFormOptions {
+    /** The WhatsApp URL or phone number (e.g. "https://wa.me/1234567890", "+1234567890") */
+    whatsappUrl?: string | null;
+    /** Field path to query in siteData (e.g. "contact.formWhatsappUrl") */
+    whatsappUrlPath?: string;
+    /** Form name for message header (e.g. "Contact Inquiry", "Book Repair") */
+    formName?: string;
+    /** Business name for message header */
+    businessName?: string;
+    /** Custom message formatter callback */
+    formatMessage?: (data: Record<string, any>) => string;
+    /** Callback fired after opening WhatsApp */
+    onSuccess?: (details: {
+        data: Record<string, any>;
+        url: string;
+    }) => void;
+    /** Callback fired if submission encounters an error */
+    onError?: (error: Error) => void;
+}
+export interface UseWhatsAppFormReturn {
+    /** Submit directly from an HTML form element or submit FormEvent */
+    submitViaWhatsApp: (eOrForm: React.FormEvent<HTMLFormElement> | HTMLFormElement, extraData?: Record<string, any>) => boolean;
+    /** Submit explicit key-value data */
+    submitDataViaWhatsApp: (data: Record<string, any>) => boolean;
+    /** Construct full WhatsApp URL without triggering window navigation */
+    buildWhatsAppUrl: (data: Record<string, any>) => string;
+    /** Resolved target phone or URL */
+    resolvedWhatsappUrl: string;
+    /** The most recently generated WhatsApp link */
+    whatsAppLink: string | null;
+    /** Submission state */
+    isSubmitting: boolean;
+}
+/**
+ * Extracts digits from a raw phone number, full wa.me link, or WhatsApp API link.
+ */
+export declare function resolveWhatsAppNumber(target?: string | null): string;
+/**
+ * Extracts form field labels and values from an HTMLFormElement.
+ */
+export declare function extractFormData(form: HTMLFormElement): Record<string, any>;
+export declare function defaultFormatMessage(data: Record<string, any>, options?: {
+    formName?: string;
+    businessName?: string;
+}): string;
+/**
+ * Universal Form-to-WhatsApp Hook.
+ * Supports HTMLFormElement submission, controlled component state data,
+ * automatic siteData URL lookup, and popup-blocker safe redirection.
+ */
+export declare function useWhatsAppForm(options?: UseWhatsAppFormOptions): UseWhatsAppFormReturn;

package/dist/hooks/useWhatsAppForm.js

@@ -0,0 +1,228 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveWhatsAppNumber = resolveWhatsAppNumber;
+exports.extractFormData = extractFormData;
+exports.defaultFormatMessage = defaultFormatMessage;
+exports.useWhatsAppForm = useWhatsAppForm;
+const react_1 = require("react");
+const SiteDataProvider_1 = require("../SiteDataProvider");
+/**
+ * Extracts digits from a raw phone number, full wa.me link, or WhatsApp API link.
+ */
+function resolveWhatsAppNumber(target) {
+    if (!target)
+        return '';
+    const trimmed = String(target).trim();
+    const waMatch = trimmed.match(/wa\.me\/([0-9+]+)/i);
+    if (waMatch && waMatch[1]) {
+        return waMatch[1].replace(/[^0-9]/g, '');
+    }
+    const queryMatch = trimmed.match(/[?&]phone=([0-9+]+)/i);
+    if (queryMatch && queryMatch[1]) {
+        return queryMatch[1].replace(/[^0-9]/g, '');
+    }
+    return trimmed.replace(/[^0-9]/g, '');
+}
+function getValueByPath(obj, path) {
+    if (!obj || !path)
+        return undefined;
+    const parts = path.replace(/\[(\d+)\]/g, '.$1').split('.').filter(Boolean);
+    let curr = obj;
+    for (const part of parts) {
+        if (curr == null)
+            return undefined;
+        curr = curr[part];
+    }
+    return curr;
+}
+function humanizeFieldName(name) {
+    return name
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/[-_]+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/**
+ * Extracts form field labels and values from an HTMLFormElement.
+ */
+function extractFormData(form) {
+    const result = {};
+    const elements = Array.from(form.elements);
+    for (const el of elements) {
+        if (!(el instanceof HTMLInputElement ||
+            el instanceof HTMLTextAreaElement ||
+            el instanceof HTMLSelectElement)) {
+            continue;
+        }
+        if (!el.name || el.disabled || el.type === 'submit' || el.type === 'reset' || el.type === 'button') {
+            continue;
+        }
+        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
+            continue;
+        }
+        let fieldLabel = '';
+        if (el.id) {
+            const labelEl = form.querySelector(`label[for="${el.id}"]`);
+            if (labelEl && labelEl.textContent) {
+                fieldLabel = labelEl.textContent.trim();
+            }
+        }
+        if (!fieldLabel) {
+            const parentLabel = el.closest('label');
+            if (parentLabel) {
+                const clone = parentLabel.cloneNode(true);
+                clone.querySelectorAll('input, select, textarea').forEach((n) => n.remove());
+                fieldLabel = clone.textContent?.trim() || '';
+            }
+        }
+        if (!fieldLabel && el.getAttribute('aria-label')) {
+            fieldLabel = el.getAttribute('aria-label') || '';
+        }
+        if (!fieldLabel && 'placeholder' in el && el.placeholder) {
+            fieldLabel = el.placeholder.trim();
+        }
+        if (!fieldLabel) {
+            fieldLabel = humanizeFieldName(el.name);
+        }
+        result[fieldLabel] = el.value;
+    }
+    return result;
+}
+function defaultFormatMessage(data, options = {}) {
+    const lines = [];
+    if (options.formName && options.businessName) {
+        lines.push(`*${options.formName} - ${options.businessName}*`);
+    }
+    else if (options.formName) {
+        lines.push(`*${options.formName}*`);
+    }
+    else if (options.businessName) {
+        lines.push(`*New Message for ${options.businessName}*`);
+    }
+    else {
+        lines.push(`*New Form Submission*`);
+    }
+    lines.push('────────────────────────');
+    for (const [key, val] of Object.entries(data)) {
+        if (val === undefined || val === null || val === '')
+            continue;
+        if (Array.isArray(val)) {
+            lines.push(`*${key}*:`);
+            val.forEach((item, idx) => {
+                if (typeof item === 'object' && item !== null) {
+                    lines.push(`  ${idx + 1}. ${JSON.stringify(item)}`);
+                }
+                else {
+                    lines.push(`  • ${item}`);
+                }
+            });
+        }
+        else if (typeof val === 'object' && val !== null) {
+            lines.push(`*${key}*: ${JSON.stringify(val)}`);
+        }
+        else {
+            lines.push(`*${key}*: ${val}`);
+        }
+    }
+    lines.push('────────────────────────');
+    lines.push('_Sent via website form_');
+    return lines.join('\n');
+}
+/**
+ * Universal Form-to-WhatsApp Hook.
+ * Supports HTMLFormElement submission, controlled component state data,
+ * automatic siteData URL lookup, and popup-blocker safe redirection.
+ */
+function useWhatsAppForm(options = {}) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [whatsAppLink, setWhatsAppLink] = (0, react_1.useState)(null);
+    // 1. Resolve WhatsApp URL from options, siteData path, or fallback siteData fields
+    const content = siteData?.content;
+    const business = siteData?.business;
+    let resolvedUrl = options.whatsappUrl;
+    if (!resolvedUrl && options.whatsappUrlPath) {
+        resolvedUrl =
+            getValueByPath(content, options.whatsappUrlPath) ||
+                getValueByPath(siteData, options.whatsappUrlPath);
+    }
+    if (!resolvedUrl) {
+        resolvedUrl =
+            content?.contact?.formWhatsappUrl ||
+                content?.contact?.whatsappUrl ||
+                content?.home?.contact?.formWhatsappUrl ||
+                business?.whatsapp ||
+                siteData?.contact?.whatsapp ||
+                'https://wa.me/1234567890';
+    }
+    const resolvedBusinessName = options.businessName ||
+        business?.name ||
+        content?.common?.business?.name ||
+        siteData?.project?.name ||
+        '';
+    const buildUrl = (0, react_1.useCallback)((data) => {
+        const number = resolveWhatsAppNumber(resolvedUrl);
+        const message = options.formatMessage
+            ? options.formatMessage(data)
+            : defaultFormatMessage(data, {
+                formName: options.formName,
+                businessName: resolvedBusinessName,
+            });
+        if (number) {
+            return `https://wa.me/${number}?text=${encodeURIComponent(message)}`;
+        }
+        if (resolvedUrl && /^https?:\/\//i.test(resolvedUrl)) {
+            const separator = resolvedUrl.includes('?') ? '&' : '?';
+            return `${resolvedUrl}${separator}text=${encodeURIComponent(message)}`;
+        }
+        return `https://wa.me/?text=${encodeURIComponent(message)}`;
+    }, [resolvedUrl, options.formatMessage, options.formName, resolvedBusinessName]);
+    const dispatchUrl = (0, react_1.useCallback)((url, data) => {
+        setIsSubmitting(true);
+        setWhatsAppLink(url);
+        try {
+            if (typeof window !== 'undefined') {
+                const opened = window.open(url, '_blank', 'noopener,noreferrer');
+                if (!opened || opened.closed || typeof opened.closed === 'undefined') {
+                    window.location.href = url;
+                }
+            }
+            options.onSuccess?.({ data, url });
+            return true;
+        }
+        catch (err) {
+            options.onError?.(err);
+            return false;
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [options]);
+    const submitDataViaWhatsApp = (0, react_1.useCallback)((data) => {
+        const url = buildUrl(data);
+        return dispatchUrl(url, data);
+    }, [buildUrl, dispatchUrl]);
+    const submitViaWhatsApp = (0, react_1.useCallback)((eOrForm, extraData) => {
+        let form = null;
+        if ('preventDefault' in eOrForm && typeof eOrForm.preventDefault === 'function') {
+            eOrForm.preventDefault();
+            form = (eOrForm.currentTarget || eOrForm.target);
+        }
+        else if (eOrForm instanceof HTMLElement) {
+            form = eOrForm;
+        }
+        const extracted = form ? extractFormData(form) : {};
+        const merged = extraData ? { ...extracted, ...extraData } : extracted;
+        const url = buildUrl(merged);
+        return dispatchUrl(url, merged);
+    }, [buildUrl, dispatchUrl]);
+    return {
+        submitViaWhatsApp,
+        submitDataViaWhatsApp,
+        buildWhatsAppUrl: buildUrl,
+        resolvedWhatsappUrl: String(resolvedUrl),
+        whatsAppLink,
+        isSubmitting,
+    };
+}

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { DenebComponentStyles } from './DenebComponentStyles';
 export { FontLoader, DENEB_FONTS_LINK_ID } from './fonts/FontLoader';
 export { useDenebFonts } from './fonts/useDenebFonts';
 export * from './hooks/useComponentStyle';
+export * from './hooks/useWhatsAppForm';
 export { DENEB_FONT_REGISTRY, DENEB_GOOGLE_FONT_COUNT, buildGoogleFontsStylesheetUrl, collectFontIdsFromSiteData, listFontsByCategory, lookupFontDefinition, normalizeFontId, resolveInstallableFont, formatResponsiveFontSize, } from '@deneb-ui/core';
 export { STYLE_PATCH_MESSAGE, DENEB_STYLE_PATCH_MESSAGE, STYLE_TARGET_ATTRIBUTE, STYLE_TYPE_ATTRIBUTE, patchElementStyle, patchStyleByPath, styleToCssVariables, validateStyleTree, collectStyleTargetsFromHtml, } from '@deneb-ui/core';
 export * from './utils';

package/dist/index.js

@@ -65,6 +65,7 @@ Object.defineProperty(exports, "DENEB_FONTS_LINK_ID", { enumerable: true, get: f
 var useDenebFonts_1 = require("./fonts/useDenebFonts");
 Object.defineProperty(exports, "useDenebFonts", { enumerable: true, get: function () { return useDenebFonts_1.useDenebFonts; } });
 __exportStar(require("./hooks/useComponentStyle"), exports);
+__exportStar(require("./hooks/useWhatsAppForm"), exports);
 var core_1 = require("@deneb-ui/core");
 Object.defineProperty(exports, "DENEB_FONT_REGISTRY", { enumerable: true, get: function () { return core_1.DENEB_FONT_REGISTRY; } });
 Object.defineProperty(exports, "DENEB_GOOGLE_FONT_COUNT", { enumerable: true, get: function () { return core_1.DENEB_GOOGLE_FONT_COUNT; } });

package/dist/social/SocialButton.d.ts

@@ -8,4 +8,4 @@ export interface SocialButtonProps extends React.AnchorHTMLAttributes<HTMLAnchor
     variant?: 'icon' | 'pill' | 'button';
     size?: 'sm' | 'md' | 'lg';
 }
-export declare function SocialButton({ platform, url, href, label, fieldPath, variant, size, className, style, ...rest }: SocialButtonProps): React.JSX.Element | null;
+export declare function SocialButton({ platform, url, href, label, fieldPath, variant, size, className, style, ...rest }: SocialButtonProps): React.JSX.Element;

package/dist/social/SocialButton.js

@@ -61,11 +61,7 @@ const PLATFORM_CONFIG = {
 };
 function SocialButton({ platform, url, href, label, fieldPath, variant = 'icon', size = 'md', className = '', style, ...rest }) {
     const derivedFieldPath = fieldPath || `common.business.social.${platform}`;
-    const hasFieldPath = Boolean(fieldPath);
-    const targetUrl = url || href || (hasFieldPath ? '#' : '');
-    // Don't render broken button if no valid URL and no fieldPath
-    if (!targetUrl)
-        return null;
+    const targetUrl = url ?? href ?? '#';
     const config = PLATFORM_CONFIG[platform] || PLATFORM_CONFIG.x;
     const iconSize = size === 'sm' ? 16 : size === 'lg' ? 22 : 18;
     const baseStyles = {

package/dist/social/SocialLinks.d.ts

@@ -8,7 +8,6 @@ export interface SocialLinksProps {
     style?: React.CSSProperties;
 }
 /**
- * Smart container rendering active social buttons.
- * Automatically filters out any unconfigured or empty platforms.
+ * Always-mounted social buttons so empty-state preview keeps field markers.
  */
-export declare function SocialLinks({ social, fieldPathPrefix, variant, size, className, style, }: SocialLinksProps): React.JSX.Element | null;
+export declare function SocialLinks({ social, fieldPathPrefix, variant, size, className, style, }: SocialLinksProps): React.JSX.Element;

package/dist/social/SocialLinks.js

@@ -16,17 +16,11 @@ const SUPPORTED_PLATFORMS = [
     'github',
 ];
 /**
- * Smart container rendering active social buttons.
- * Automatically filters out any unconfigured or empty platforms.
+ * Always-mounted social buttons so empty-state preview keeps field markers.
  */
 function SocialLinks({ social = {}, fieldPathPrefix = 'common.business.social', variant = 'icon', size = 'md', className = '', style, }) {
-    // Find platforms with valid URLs
-    const activePlatforms = Object.entries(social).filter(([platform, url]) => {
-        return Boolean(url && typeof url === 'string' && url.trim().length > 0);
-    });
-    if (activePlatforms.length === 0) {
-        return null;
-    }
+    const platforms = SUPPORTED_PLATFORMS.filter((platform) => Object.prototype.hasOwnProperty.call(social, platform) || Object.keys(social).length === 0);
+    const rendered = platforms.length ? platforms : SUPPORTED_PLATFORMS;
     const containerStyles = {
         display: 'inline-flex',
         alignItems: 'center',
@@ -34,9 +28,5 @@ function SocialLinks({ social = {}, fieldPathPrefix = 'common.business.social',
         gap: '0.625rem',
         ...style,
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: `deneb-social-links ${className}`.trim(), style: containerStyles, children: activePlatforms.map(([key, url]) => {
-            const lowerKey = key.toLowerCase();
-            const platform = SUPPORTED_PLATFORMS.includes(lowerKey) ? lowerKey : 'x';
-            return ((0, jsx_runtime_1.jsx)(SocialButton_1.SocialButton, { platform: platform, url: url, fieldPath: `${fieldPathPrefix}.${key}`, variant: variant, size: size }, key));
-        }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: `deneb-social-links ${className}`.trim(), style: containerStyles, children: rendered.map((platform) => ((0, jsx_runtime_1.jsx)(SocialButton_1.SocialButton, { platform: platform, url: social[platform] ?? '', fieldPath: `${fieldPathPrefix}.${platform}`, variant: variant, size: size }, platform))) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.50",
+  "version": "2.0.52",
   "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",
@@ -49,7 +49,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.50"
+    "@deneb-ui/core": "^2.0.52"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",