@deneb-ui/ui 2.0.0

package/dist/EditableFooter.js

@@ -0,0 +1,330 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+exports.EditableFooter = EditableFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+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' },
+];
+/**
+ * Next-Level DENEB UI Footer
+ *
+ * Features:
+ * - High-end Shadcn-inspired dark aesthetic with subtle borders and ambient highlights
+ * - 100% Real-Time Auto-Synchronization with Header (Logo, Website Title, Nav labels)
+ * - 4-Column Responsive Layout:
+ *    Col 1: Synced Brand (Logo + Site Name + Short Description + Social Icons)
+ *    Col 2: Synced Explore Navigation (Routes dynamically synced with Header nav items)
+ *    Col 3: Contact & Support (Direct contact shortcuts, address, email, phone)
+ *    Col 4: Dynamic Footer Heading & Sleek Interactive Newsletter Card
+ * - Strict Visual Editing Marker Support (`common.shortDescription`, `common.footerHeading`, `common.copyright`)
+ * - Route Filtering Compliance (`data-target-page` wrappers)
+ * - Tailored Tailwind CSS utility classes + resilient inline CSS fallbacks
+ *
+ * Created by Chamika Gayashan (CEE G)
+ */
+function EditableFooter({ defaultLinks = DEFAULT_FOOTER_PAGES, links, basePath = '', showNewsletter = true, className = '', style, ...props }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const [email, setEmail] = (0, react_1.useState)('');
+    const [subscribed, setSubscribed] = (0, react_1.useState)(false);
+    const content = (siteData?.content || {});
+    const common = (content?.common || {});
+    const business = (common?.business || {});
+    // Auto-synchronized with Header
+    const siteName = String(common?.websiteTitle || common?.siteName || 'Storefront');
+    const logoUrl = String(common?.logoUrl || '');
+    const navLabels = (common?.navLabels || {});
+    // Footer-specific editable fields
+    const shortDescription = String(common?.shortDescription || 'A modern digital storefront engineered for high conversion and seamless visual editing.');
+    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 || '');
+    // Route filtering
+    const navigationItems = links || defaultLinks;
+    const requiredPages = Array.isArray(siteData?.requirements?.requiredPages)
+        ? siteData.requirements.requiredPages
+        : siteData?.template?.structure?.pages || ['home', 'contact'];
+    const activeLinks = navigationItems.filter((item) => item.id === 'home' || requiredPages.includes(item.id));
+    const hasContact = requiredPages.includes('contact');
+    const basePathEnv = typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_SITE_BASE_PATH
+        ? process.env.NEXT_PUBLIC_SITE_BASE_PATH
+        : '';
+    const effectiveBasePath = basePath || basePathEnv;
+    const navigate = (path) => {
+        if (typeof window !== 'undefined') {
+            const cleanBase = effectiveBasePath.replace(/\/$/, '');
+            const cleanPath = path.startsWith('/') ? path : `/${path}`;
+            window.location.href = `${cleanBase}${cleanPath}` || '/';
+        }
+    };
+    const withBase = (path) => {
+        if (!path || /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(path))
+            return path;
+        const cleanBase = effectiveBasePath.replace(/\/$/, '');
+        const cleanPath = path.startsWith('/') ? path : `/${path}`;
+        return `${cleanBase}${cleanPath}` || '/';
+    };
+    const handleSubscribe = (e) => {
+        e.preventDefault();
+        if (email.trim()) {
+            setSubscribed(true);
+            setTimeout(() => setSubscribed(false), 4000);
+            setEmail('');
+        }
+    };
+    const scrollToTop = () => {
+        if (typeof window !== 'undefined') {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("footer", { style: {
+            position: 'relative',
+            width: '100%',
+            backgroundColor: '#020617', // slate-950
+            color: '#f8fafc',
+            borderTop: '1px solid rgba(255, 255, 255, 0.08)',
+            padding: '4.5rem 1.5rem 2rem',
+            ...style,
+        }, className: `deneb-footer relative w-full border-t border-slate-800/80 bg-slate-950 text-slate-100 ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: '10%',
+                    right: '10%',
+                    height: '1px',
+                    background: 'linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent)',
+                }, className: "pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-indigo-500/40 to-transparent" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                    maxWidth: '1280px',
+                    margin: '0 auto',
+                }, className: "max-w-7xl mx-auto", children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+                            gap: '3rem',
+                            marginBottom: '4rem',
+                        }, className: "grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4 lg:gap-8 mb-16", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", "data-preview-static": "footer-brand-link", onClick: () => navigate('/'), style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            gap: '0.75rem',
+                                            background: 'transparent',
+                                            border: 0,
+                                            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: {
+                                                    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: {
+                                                    fontSize: '1.25rem',
+                                                    fontWeight: 700,
+                                                    letterSpacing: '-0.025em',
+                                                    color: '#ffffff',
+                                                }, className: "text-xl font-bold tracking-tight text-white", children: siteName })] }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": "common.shortDescription", style: {
+                                            fontSize: '0.875rem',
+                                            lineHeight: 1.6,
+                                            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: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            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: {
+                                                    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: "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: {
+                                            fontSize: '0.8125rem',
+                                            fontWeight: 700,
+                                            textTransform: 'uppercase',
+                                            letterSpacing: '0.08em',
+                                            color: '#f1f5f9',
+                                            marginBottom: '1.25rem',
+                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-5", children: "Explore" }), (0, jsx_runtime_1.jsx)("ul", { style: {
+                                            listStyle: 'none',
+                                            padding: 0,
+                                            margin: 0,
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: '0.75rem',
+                                        }, className: "flex flex-col gap-3", children: navigationItems.map((link) => {
+                                            const isSelected = activeLinks.some((al) => al.id === link.id);
+                                            // Synchronized in real-time with Header navLabels!
+                                            const label = navLabels[link.id] || link.label;
+                                            if (isSelected) {
+                                                return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("span", { "data-target-page": link.id, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => navigate(link.route), style: {
+                                                                color: '#94a3b8',
+                                                                fontSize: '0.875rem',
+                                                                display: 'inline-flex',
+                                                                alignItems: 'center',
+                                                                gap: '0.5rem',
+                                                                background: 'transparent',
+                                                                border: 0,
+                                                                padding: 0,
+                                                                cursor: 'pointer',
+                                                                transition: 'color 0.15s ease',
+                                                            }, className: "text-sm text-slate-400 hover:text-white transition-colors duration-150 inline-flex items-center gap-2 group cursor-pointer border-0 bg-transparent p-0", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-static": "nav-bullet", style: {
+                                                                        width: '5px',
+                                                                        height: '5px',
+                                                                        borderRadius: '9999px',
+                                                                        backgroundColor: '#475569',
+                                                                    }, className: "w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-indigo-400 group-hover:scale-125 transition-all duration-200" }), (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `common.navLabels.${link.id}`, children: label })] }) }) }, link.id));
+                                            }
+                                            // Unselected route marker fallback (visible for strict schema coverage without route link)
+                                            return ((0, jsx_runtime_1.jsx)("li", { className: "unavailable", children: (0, jsx_runtime_1.jsx)("span", { "data-target-page": link.id, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `common.navLabels.${link.id}`, children: label }) }) }, link.id));
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { "data-preview-static": "footer-contact-heading", style: {
+                                            fontSize: '0.8125rem',
+                                            fontWeight: 700,
+                                            textTransform: 'uppercase',
+                                            letterSpacing: '0.08em',
+                                            color: '#f1f5f9',
+                                            marginBottom: '1.25rem',
+                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-5", children: "Contact & Support" }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            gap: '0.875rem',
+                                            fontSize: '0.875rem',
+                                            color: '#94a3b8',
+                                        }, className: "flex flex-col gap-3.5 text-sm text-slate-400", children: [emailContact && ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-slate-500", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })] }), (0, jsx_runtime_1.jsx)("a", { href: `mailto:${emailContact}`, "data-preview-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: {
+                                            fontSize: '0.8125rem',
+                                            fontWeight: 700,
+                                            textTransform: 'uppercase',
+                                            letterSpacing: '0.08em',
+                                            color: '#f1f5f9',
+                                            marginBottom: '1rem',
+                                        }, className: "text-xs font-bold uppercase tracking-wider text-slate-200 mb-4", children: footerHeading }), showNewsletter && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-static": "newsletter-description", style: {
+                                                    fontSize: '0.8125rem',
+                                                    color: '#94a3b8',
+                                                    lineHeight: 1.5,
+                                                    margin: 0,
+                                                }, className: "text-xs text-slate-400 leading-relaxed", children: "Join our exclusive community for releases, updates, and special perks." }), subscribed ? ((0, jsx_runtime_1.jsx)("p", { "data-preview-static": "newsletter-success", style: {
+                                                    padding: '0.625rem 0.875rem',
+                                                    borderRadius: '8px',
+                                                    backgroundColor: 'rgba(34, 197, 94, 0.12)',
+                                                    border: '1px solid rgba(34, 197, 94, 0.3)',
+                                                    color: '#4ade80',
+                                                    fontSize: '0.8125rem',
+                                                    fontWeight: 500,
+                                                }, className: "p-2.5 rounded-lg bg-emerald-950/40 border border-emerald-500/30 text-emerald-400 text-xs font-medium", children: "\u2713 Thank you for subscribing!" })) : ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubscribe, style: {
+                                                    display: 'flex',
+                                                    flexDirection: 'column',
+                                                    gap: '0.5rem',
+                                                }, className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            position: 'relative',
+                                                        }, children: (0, jsx_runtime_1.jsx)("input", { type: "email", required: true, "data-preview-static": "newsletter-input", placeholder: "Enter your email", value: email, onChange: (e) => setEmail(e.target.value), style: {
+                                                                width: '100%',
+                                                                backgroundColor: '#0f172a', // slate-900
+                                                                border: '1px solid #1e293b', // slate-800
+                                                                borderRadius: '8px',
+                                                                padding: '0.5rem 0.75rem',
+                                                                fontSize: '0.8125rem',
+                                                                color: '#ffffff',
+                                                                outline: 'none',
+                                                            }, className: "w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-all" }) }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", "data-preview-static": "newsletter-btn", style: {
+                                                            backgroundColor: '#ffffff',
+                                                            color: '#0f172a',
+                                                            border: 'none',
+                                                            borderRadius: '8px',
+                                                            padding: '0.5rem 0.875rem',
+                                                            fontSize: '0.8125rem',
+                                                            fontWeight: 600,
+                                                            cursor: 'pointer',
+                                                            transition: 'background-color 0.15s ease',
+                                                        }, className: "bg-white text-slate-900 hover:bg-slate-200 rounded-lg px-3.5 py-2 text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 shadow-sm", children: ["Subscribe", (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 12h14M12 5l7 7-7 7" }) })] })] }))] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            paddingTop: '2rem',
+                            borderTop: '1px solid rgba(255, 255, 255, 0.08)',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            gap: '1.25rem',
+                        }, className: "pt-8 border-t border-slate-800/80 flex flex-col sm:flex-row justify-between items-center gap-4 text-xs text-slate-400", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": "common.copyright", style: { fontSize: '0.8125rem', color: '#64748b', margin: 0 }, className: "text-xs text-slate-500", children: copyright }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', gap: '1.25rem' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            gap: '0.375rem',
+                                            fontSize: '0.75rem',
+                                            color: '#64748b',
+                                        }, className: "flex items-center gap-1.5 text-xs text-slate-500", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-static": "powered-by-label", children: "Powered by" }), (0, jsx_runtime_1.jsxs)("span", { "data-preview-static": "powered-by-brand", style: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: '0.25rem',
+                                                    fontWeight: 600,
+                                                    color: '#e2e8f0',
+                                                    backgroundColor: '#0f172a',
+                                                    border: '1px solid #1e293b',
+                                                    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: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            width: '32px',
+                                            height: '32px',
+                                            borderRadius: '8px',
+                                            backgroundColor: '#0f172a',
+                                            border: '1px solid #1e293b',
+                                            color: '#94a3b8',
+                                            cursor: 'pointer',
+                                            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-colors", 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", children: (0, jsx_runtime_1.jsx)("path", { d: "m18 15-6-6-6 6" }) }) })] })] })] })] }));
+}
+exports.Footer = EditableFooter;

package/dist/EditableGrid.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export type GridSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | (string & {}) | number;
+export interface ResponsiveColumns {
+    mobile?: number;
+    tablet?: number;
+    desktop?: number;
+}
+export interface EditableGridProps extends React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType;
+    id?: string;
+    'data-preview-list-path'?: string;
+    'data-preview-static'?: string;
+    /**
+     * Minimum width of each card in the grid (e.g. '280px', '320px').
+     * When set, automatically creates a dynamic auto-balancing layout (`repeat(auto-fit, minmax(minCardWidth, 1fr))`)
+     * where cards seamlessly reflow and expand to fill all remaining row space.
+     */
+    minCardWidth?: string;
+    /**
+     * Fixed column count or responsive columns config.
+     */
+    columns?: number | ResponsiveColumns;
+    /**
+     * Gap between cards in the grid ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' or custom CSS).
+     */
+    gap?: GridSpacing;
+    /**
+     * Force all cards in a row to have matching heights (default: true).
+     */
+    equalHeight?: boolean;
+    /**
+     * Align items inside the grid cells.
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+}
+/**
+ * EditableGrid provides an auto-balancing card layout that automatically adjusts
+ * card widths and fills available horizontal space evenly across mobile and desktop.
+ */
+export declare function EditableGrid({ as: Component, id, 'data-preview-list-path': previewListPath, 'data-preview-static': previewStatic, minCardWidth, columns, gap, equalHeight, align, style, className, children, ...props }: EditableGridProps): React.JSX.Element;

package/dist/EditableGrid.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableGrid = EditableGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SPACING_MAP = {
+    none: '0',
+    xs: '0.5rem',
+    sm: '0.75rem',
+    md: '1.25rem',
+    lg: '2rem',
+    xl: '2.5rem',
+    '2xl': '3.5rem',
+};
+/**
+ * EditableGrid provides an auto-balancing card layout that automatically adjusts
+ * card widths and fills available horizontal space evenly across mobile and desktop.
+ */
+function EditableGrid({ as: Component = 'div', id, 'data-preview-list-path': previewListPath, 'data-preview-static': previewStatic, minCardWidth = '280px', columns, gap = 'md', equalHeight = true, align = 'stretch', style, className = '', children, ...props }) {
+    const resolvedGap = gap !== undefined ? (SPACING_MAP[String(gap)] || String(gap)) : '1.25rem';
+    let templateCols;
+    if (typeof columns === 'number') {
+        templateCols = `repeat(${columns}, minmax(0, 1fr))`;
+    }
+    else if (columns && typeof columns === 'object') {
+        templateCols = `repeat(auto-fit, minmax(${minCardWidth}, 1fr))`;
+    }
+    else {
+        // Default auto-balancing formula
+        templateCols = `repeat(auto-fit, minmax(${minCardWidth}, 1fr))`;
+    }
+    const gridStyle = {
+        display: 'grid',
+        gridTemplateColumns: templateCols,
+        gap: resolvedGap,
+        alignItems: equalHeight ? 'stretch' : align,
+        ...style,
+    };
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-list-path": previewListPath || id, className: `editable-grid ${className}`.trim(), style: gridStyle, ...props, children: children }));
+}

package/dist/EditableHero.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface EditableHeroCenteredProps extends React.HTMLAttributes<HTMLElement> {
+    pageKey?: string;
+    badgePath?: string;
+    titlePath?: string;
+    summaryPath?: string;
+    imagePath?: string;
+    primaryCtaPath?: string;
+    secondaryCtaPath?: string;
+    primaryCtaTarget?: string;
+    secondaryCtaTarget?: string;
+    basePath?: string;
+}
+export declare function EditableHeroCentered({ pageKey, badgePath, titlePath, summaryPath, imagePath, primaryCtaPath, secondaryCtaPath, primaryCtaTarget, secondaryCtaTarget, basePath, className, style, ...props }: EditableHeroCenteredProps): React.JSX.Element;
+export interface EditableHeroSplitProps extends React.HTMLAttributes<HTMLElement> {
+    pageKey?: string;
+    badgePath?: string;
+    titlePath?: string;
+    summaryPath?: string;
+    imagePath?: string;
+    primaryCtaPath?: string;
+    primaryCtaTarget?: string;
+    basePath?: string;
+}
+export declare function EditableHeroSplit({ pageKey, badgePath, titlePath, summaryPath, imagePath, primaryCtaPath, primaryCtaTarget, basePath, className, style, ...props }: EditableHeroSplitProps): React.JSX.Element;
+export declare const Hero: typeof EditableHeroCentered;
+export declare const HeroSplit: typeof EditableHeroSplit;

package/dist/EditableHero.js

@@ -0,0 +1,154 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeroSplit = exports.Hero = void 0;
+exports.EditableHeroCentered = EditableHeroCentered;
+exports.EditableHeroSplit = EditableHeroSplit;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SiteDataProvider_1 = require("./SiteDataProvider");
+const EditableText_1 = require("./EditableText");
+const EditableImage_1 = require("./EditableImage");
+function EditableHeroCentered({ pageKey = 'home', badgePath = 'home.heroEyebrow', titlePath = 'home.heroTitle', summaryPath = 'home.heroSummary', imagePath = 'home.bannerImageUrl', primaryCtaPath = 'home.primaryCtaLabel', secondaryCtaPath = 'home.secondaryCtaLabel', primaryCtaTarget = 'contact', secondaryCtaTarget = 'services', basePath = '', className = '', style, ...props }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const content = siteData?.content?.[pageKey] || {};
+    const badge = String(content?.heroEyebrow || content?.heroBadge || '');
+    const title = String(content?.heroTitle || 'Engineered for Modern Living');
+    const summary = String(content?.heroSummary || content?.heroSubtitle || 'Discover our curated collection crafted with meticulous detail.');
+    const imageUrl = String(content?.bannerImageUrl || content?.heroImage || '');
+    const primaryCta = String(content?.primaryCtaLabel || content?.heroCtaText || 'Get Started');
+    const secondaryCta = String(content?.secondaryCtaLabel || 'Explore Services');
+    const requiredPages = Array.isArray(siteData?.requirements?.requiredPages)
+        ? siteData.requirements.requiredPages
+        : siteData?.template?.structure?.pages || ['home', 'contact'];
+    const hasPrimaryTarget = requiredPages.includes(primaryCtaTarget);
+    const hasSecondaryTarget = requiredPages.includes(secondaryCtaTarget);
+    const basePathEnv = typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_SITE_BASE_PATH
+        ? process.env.NEXT_PUBLIC_SITE_BASE_PATH
+        : '';
+    const effectiveBasePath = basePath || basePathEnv;
+    const navigate = (path) => {
+        if (typeof window !== 'undefined') {
+            const cleanBase = effectiveBasePath.replace(/\/$/, '');
+            const cleanPath = path.startsWith('/') ? path : `/${path}`;
+            window.location.href = `${cleanBase}${cleanPath}` || '/';
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("section", { "data-design-section": "hero", style: {
+            padding: '5rem 1.5rem',
+            textAlign: 'center',
+            position: 'relative',
+            overflow: 'hidden',
+            ...style,
+        }, className: `editable-hero-centered ${className}`.trim(), ...props, children: (0, jsx_runtime_1.jsxs)("div", { style: { maxWidth: '896px', margin: '0 auto' }, children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '1.25rem', display: 'inline-block' }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableBadge, { id: badgePath, defaultValue: badge, badgeVariant: "primary" }) }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableHeading, { level: 1, id: titlePath, defaultValue: title, style: {
+                        fontSize: 'clamp(2.5rem, 6vw, 4.5rem)',
+                        fontWeight: 800,
+                        letterSpacing: '-0.035em',
+                        lineHeight: 1.1,
+                        color: 'var(--heading-color, #0f172a)',
+                        marginBottom: '1.5rem',
+                    } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableParagraph, { lead: true, id: summaryPath, defaultValue: summary, style: {
+                        fontSize: '1.2rem',
+                        lineHeight: 1.6,
+                        color: 'var(--muted-text, #64748b)',
+                        maxWidth: '680px',
+                        margin: '0 auto 2.5rem',
+                    } }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: '1rem',
+                        flexWrap: 'wrap',
+                        marginBottom: '3.5rem',
+                    }, children: [hasPrimaryTarget ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": primaryCtaTarget, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate(primaryCtaTarget), style: {
+                                    display: 'inline-block',
+                                    padding: '0.875rem 2rem',
+                                    borderRadius: '12px',
+                                    backgroundColor: 'var(--brand-color, #2563eb)',
+                                    color: '#ffffff',
+                                    fontSize: '1rem',
+                                    fontWeight: 600,
+                                    border: 0,
+                                    cursor: 'pointer',
+                                    boxShadow: '0 4px 14px rgba(37, 99, 235, 0.35)',
+                                    transition: 'opacity 0.2s ease',
+                                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": primaryCtaPath, children: primaryCta }) }) })) : ((0, jsx_runtime_1.jsx)("span", { "data-target-page": primaryCtaTarget, className: "button-primary unavailable", "data-preview-field-path": primaryCtaPath, children: primaryCta })), hasSecondaryTarget ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": secondaryCtaTarget, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate(secondaryCtaTarget), style: {
+                                    display: 'inline-block',
+                                    padding: '0.875rem 2rem',
+                                    borderRadius: '12px',
+                                    backgroundColor: '#ffffff',
+                                    color: 'var(--page-text, #0f172a)',
+                                    border: '1.5px solid #cbd5e1',
+                                    fontSize: '1rem',
+                                    fontWeight: 600,
+                                    cursor: 'pointer',
+                                    transition: 'background-color 0.2s ease',
+                                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": secondaryCtaPath, children: secondaryCta }) }) })) : ((0, jsx_runtime_1.jsx)("span", { "data-target-page": secondaryCtaTarget, className: "button-secondary unavailable", "data-preview-field-path": secondaryCtaPath, children: secondaryCta }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                        borderRadius: '20px',
+                        overflow: 'hidden',
+                        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.15)',
+                        border: '1px solid rgba(226, 232, 240, 0.8)',
+                    }, children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: imagePath, src: imageUrl, alt: title, aspectRatio: "16/9", style: { width: '100%', height: 'auto', display: 'block' } }) })] }) }));
+}
+function EditableHeroSplit({ pageKey = 'home', badgePath = 'home.heroEyebrow', titlePath = 'home.heroTitle', summaryPath = 'home.heroSummary', imagePath = 'home.bannerImageUrl', primaryCtaPath = 'home.primaryCtaLabel', primaryCtaTarget = 'contact', basePath = '', className = '', style, ...props }) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const content = siteData?.content?.[pageKey] || {};
+    const badge = String(content?.heroEyebrow || content?.heroBadge || '');
+    const title = String(content?.heroTitle || 'Engineered for Modern Living');
+    const summary = String(content?.heroSummary || content?.heroSubtitle || 'Discover our curated collection crafted with meticulous detail.');
+    const imageUrl = String(content?.bannerImageUrl || content?.heroImage || '');
+    const primaryCta = String(content?.primaryCtaLabel || content?.heroCtaText || 'Get Started');
+    const requiredPages = Array.isArray(siteData?.requirements?.requiredPages)
+        ? siteData.requirements.requiredPages
+        : siteData?.template?.structure?.pages || ['home', 'contact'];
+    const hasPrimaryTarget = requiredPages.includes(primaryCtaTarget);
+    const basePathEnv = typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_SITE_BASE_PATH
+        ? process.env.NEXT_PUBLIC_SITE_BASE_PATH
+        : '';
+    const effectiveBasePath = basePath || basePathEnv;
+    const navigate = (path) => {
+        if (typeof window !== 'undefined') {
+            const cleanBase = effectiveBasePath.replace(/\/$/, '');
+            const cleanPath = path.startsWith('/') ? path : `/${path}`;
+            window.location.href = `${cleanBase}${cleanPath}` || '/';
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("section", { "data-design-section": "hero", style: {
+            padding: '5rem 1.5rem',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
+            alignItems: 'center',
+            gap: '4rem',
+            ...style,
+        }, className: `editable-hero-split ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '1rem' }, children: (0, jsx_runtime_1.jsx)(EditableText_1.EditableBadge, { id: badgePath, defaultValue: badge, badgeVariant: "primary" }) }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableHeading, { level: 1, id: titlePath, defaultValue: title, style: {
+                            fontSize: 'clamp(2.25rem, 5vw, 3.75rem)',
+                            fontWeight: 800,
+                            letterSpacing: '-0.03em',
+                            lineHeight: 1.15,
+                            color: 'var(--heading-color, #0f172a)',
+                            marginBottom: '1.25rem',
+                        } }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableParagraph, { lead: true, id: summaryPath, defaultValue: summary, style: {
+                            fontSize: '1.125rem',
+                            lineHeight: 1.6,
+                            color: 'var(--muted-text, #64748b)',
+                            marginBottom: '2rem',
+                        } }), hasPrimaryTarget ? ((0, jsx_runtime_1.jsx)("span", { "data-target-page": primaryCtaTarget, children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => navigate(primaryCtaTarget), style: {
+                                display: 'inline-block',
+                                padding: '0.875rem 2rem',
+                                borderRadius: '12px',
+                                backgroundColor: 'var(--brand-color, #2563eb)',
+                                color: '#ffffff',
+                                fontSize: '1rem',
+                                fontWeight: 600,
+                                border: 0,
+                                cursor: 'pointer',
+                                boxShadow: '0 4px 14px rgba(37, 99, 235, 0.35)',
+                                transition: 'opacity 0.2s ease',
+                            }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": primaryCtaPath, children: primaryCta }) }) })) : ((0, jsx_runtime_1.jsx)("span", { "data-target-page": primaryCtaTarget, className: "button-primary unavailable", "data-preview-field-path": primaryCtaPath, children: primaryCta }))] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                        borderRadius: '24px',
+                        overflow: 'hidden',
+                        boxShadow: '0 20px 40px -15px rgba(0, 0, 0, 0.12)',
+                        border: '1px solid rgba(226, 232, 240, 0.8)',
+                    }, children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: imagePath, src: imageUrl, alt: title, aspectRatio: "4/3", style: { width: '100%', height: 'auto', display: 'block' } }) }) })] }));
+}
+exports.Hero = EditableHeroCentered;
+exports.HeroSplit = EditableHeroSplit;