@deneb-ui/ui 2.0.22 → 2.0.24

package/dist/EditableProductCard.js

@@ -49,17 +49,17 @@ function EditableProductCard({ itemPath, product, cardVariant = 'modern-glass',
             borderRadius: '14px',
             overflow: 'hidden',
             display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
+            flexDirection: 'column',
+            alignItems: 'stretch',
         },
     };
     return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, style: {
             ...variantStyles[cardVariant],
             ...style,
-        }, className: `editable-product-card group ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+        }, className: `editable-product-card group ${isHorizontal ? 'is-horizontal' : ''} ${className}`.trim(), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "deneb-product-card-media", style: {
                     position: 'relative',
                     overflow: 'hidden',
-                    width: isHorizontal ? '38%' : '100%',
+                    width: isHorizontal ? '100%' : '100%',
                     flexShrink: 0,
                 }, children: [(0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.imageUrl`, src: imageUrl, fallbackSrc: imageFallback, alt: name, aspectRatio: isHorizontal ? 'square' : '4/3', fit: "cover", hoverZoom: true, style: { width: '100%', height: '100%', display: 'block' } }), badge && ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: '10px', left: '10px', zIndex: 10 }, children: (0, jsx_runtime_1.jsx)(EditableText_2.EditableBadge, { id: `${itemPath}.badge`, defaultValue: badge, badgeVariant: "primary" }) }))] }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     padding: '1.25rem',

package/dist/EditableProductDetail.js

@@ -42,11 +42,11 @@ function EditableProductDetail({ sectionPath = 'product', product, sizes = ['40'
     const resolvedWhatsappUrl = whatsappUrl || (product.whatsappNumber
         ? (0, urls_1.createWhatsAppUrl)(product.whatsappNumber, product.whatsappMessage || `Hi, I would like to order ${name} (${selectedSize}, ${selectedColor}) - ${price}`)
         : '');
-    return ((0, jsx_runtime_1.jsx)("section", { "data-preview-page-key": sectionPath, className: `editable-product-detail max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start", children: [(0, jsx_runtime_1.jsxs)("div", { className: "lg:col-span-7 flex flex-col-reverse md:flex-row gap-4", children: [images.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex md:flex-col gap-3 overflow-x-auto md:overflow-y-auto max-h-[580px] pb-2 md:pb-0 scrollbar-none", children: images.map((img, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveImage(img), className: `w-20 h-20 sm:w-24 sm:h-24 rounded-2xl overflow-hidden border-2 transition-all duration-200 flex-shrink-0 bg-slate-900/40 p-2 ${activeImage === img
+    return ((0, jsx_runtime_1.jsx)("section", { "data-preview-page-key": sectionPath, className: `editable-product-detail max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 ${className}`.trim(), style: style, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start", children: [(0, jsx_runtime_1.jsxs)("div", { className: "lg:col-span-7 flex flex-col-reverse md:flex-row gap-4", children: [images.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "deneb-product-detail-gallery flex md:flex-col gap-3 overflow-x-auto md:overflow-y-auto max-h-[580px] pb-2 md:pb-0 scrollbar-none", children: images.map((img, idx) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveImage(img), className: `w-20 h-20 sm:w-24 sm:h-24 rounded-2xl overflow-hidden border-2 transition-all duration-200 flex-shrink-0 bg-slate-900/40 p-2 ${activeImage === img
                                     ? 'border-brand-primary scale-98 shadow-md'
                                     : 'border-slate-800/80 opacity-60 hover:opacity-100 hover:border-slate-700'}`, children: (0, jsx_runtime_1.jsx)("img", { src: (0, utils_1.withBasePath)(img), alt: "", className: "w-full h-full object-contain" }) }, idx))) })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 aspect-square rounded-3xl bg-gradient-to-b from-slate-900/50 to-slate-950/80 border border-slate-800/80 p-8 flex items-center justify-center overflow-hidden group", children: [badge && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.badge`, className: "absolute top-6 left-6 z-10 px-3.5 py-1 text-xs font-black tracking-wider uppercase rounded-full bg-lime-400 text-slate-950 shadow-lg", children: badge })), (0, jsx_runtime_1.jsx)("img", { "data-preview-field-path": `${sectionPath}.featuredImage`, src: (0, utils_1.withBasePath)(activeImage), alt: name, className: "w-full h-full object-contain transition-transform duration-500 group-hover:scale-105" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-5 flex flex-col justify-between", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { "data-preview-field-path": `${sectionPath}.name`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: name }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-4 flex items-baseline gap-3", children: [(0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.price`, className: "text-3xl font-black text-lime-400 tracking-tight", children: price }), product.originalPrice ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-medium text-slate-500 line-through", children: String(product.originalPrice) })) : null] }), description && ((0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.description`, className: "mt-6 text-base text-slate-300 leading-relaxed", children: description })), colors.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsxs)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: ["Color \u2014 ", (0, jsx_runtime_1.jsx)("span", { className: "text-white", children: selectedColor })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-3", children: colors.map((c) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedColor(c.name), className: `w-9 h-9 rounded-full border-2 transition-all p-0.5 ${selectedColor === c.name
                                                 ? 'border-lime-400 ring-2 ring-lime-400/30 scale-105'
-                                                : 'border-slate-700 hover:border-slate-500'}`, style: { backgroundColor: c.hex }, title: c.name, "aria-label": c.name }, c.name))) })] })), sizes.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: "Select Size" }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-4 sm:grid-cols-7 gap-2", children: sizes.map((s) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedSize(s), className: `py-2.5 rounded-xl font-bold text-sm transition-all duration-150 ${selectedSize === s
+                                                : 'border-slate-700 hover:border-slate-500'}`, style: { backgroundColor: c.hex }, title: c.name, "aria-label": c.name }, c.name))) })] })), sizes.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-8", children: [(0, jsx_runtime_1.jsx)("span", { className: "block text-xs font-bold uppercase tracking-wider text-slate-400 mb-3", children: "Select Size" }), (0, jsx_runtime_1.jsx)("div", { className: "deneb-product-detail-sizes grid grid-cols-4 sm:grid-cols-7 gap-2", children: sizes.map((s) => ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setSelectedSize(s), className: `py-2.5 rounded-xl font-bold text-sm transition-all duration-150 ${selectedSize === s
                                                 ? 'bg-white text-slate-950 shadow-md font-extrabold scale-102'
                                                 : 'bg-slate-900/60 text-slate-300 border border-slate-800 hover:bg-slate-800 hover:text-white'}`, children: s }, s))) })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onAddToSelection?.(product, selectedSize, selectedColor), className: "w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-wider bg-lime-400 text-slate-950 hover:bg-lime-300 active:scale-98 transition-all duration-150 shadow-lg shadow-lime-400/20 flex items-center justify-center gap-2", children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.addToSelectionLabel`, children: addToSelectionLabel }) }), resolvedWhatsappUrl && ((0, jsx_runtime_1.jsxs)("a", { href: resolvedWhatsappUrl, target: "_blank", rel: "noopener noreferrer", className: "w-full py-3.5 px-6 rounded-2xl font-bold text-sm bg-emerald-600/20 text-emerald-400 hover:bg-emerald-600/30 border border-emerald-500/30 transition-all duration-150 flex items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5 fill-current", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.472 14.382c-.301-.15-1.78-.879-2.056-.98-.276-.1-.477-.15-.678.15-.201.3-.78 0.98-.956 1.18-.175.2-.351.226-.652.075-.301-.15-1.272-.469-2.423-1.496-.896-.799-1.501-1.787-1.677-2.088-.175-.301-.019-.464.132-.614.136-.135.301-.351.452-.527.15-.176.201-.301.301-.502.1-.2.05-.376-.025-.527-.075-.15-.678-1.635-.93-2.242-.244-.592-.493-.512-.678-.521-.175-.009-.376-.009-.577-.009-.201 0-.527.075-.803.376-.276.301-1.054 1.03-1.054 2.512 0 1.482 1.079 2.912 1.23 3.113.15.201 2.124 3.243 5.145 4.548.718.311 1.279.497 1.716.636.722.23 1.378.197 1.898.12.579-.087 1.78-.728 2.03-1.431.251-.703.251-1.305.176-1.431-.075-.126-.276-.201-.577-.351zM12.004 2C6.48 2 2 6.48 2 12c0 1.82.49 3.52 1.34 4.99L2 22l5.14-1.35c1.42.78 3.04 1.22 4.86 1.22 5.52 0 10-4.48 10-10S17.524 2 12.004 2z" }) }), (0, jsx_runtime_1.jsx)("span", { children: "Order Directly via WhatsApp" })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-10 border-t border-slate-800/80 pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-6 border-b border-slate-800 pb-3 mb-4", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('specs'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'specs' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.specsTitle`, children: specsTitle }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveTab('shipping'), className: `text-sm font-bold tracking-wide transition-colors ${activeTab === 'shipping' ? 'text-lime-400' : 'text-slate-400 hover:text-slate-200'}`, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.shippingTitle`, children: shippingTitle }) })] }), activeTab === 'specs' ? ((0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: product.specs && product.specs.length > 0 ? (product.specs.map((spec, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs py-1 border-b border-slate-900", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-slate-400 font-medium", children: spec.label }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: spec.value })] }, i)))) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-400 space-y-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Upper Material" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Engineered breathable mesh" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Midsole Technology" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "Dual-density responsive foam" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between py-1 border-b border-slate-800/50", children: [(0, jsx_runtime_1.jsx)("span", { children: "Outsole Grip" }), (0, jsx_runtime_1.jsx)("span", { className: "text-slate-200 font-semibold", children: "High-abrasion tactical rubber" })] })] })) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-slate-300 space-y-3 leading-relaxed", children: [(0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingSummary`, children: shippingSummary }), (0, jsx_runtime_1.jsx)("p", { "data-preview-field-path": `${sectionPath}.shippingReturns`, className: "text-slate-400", children: shippingReturns })] }))] })] }) })] }) }));
 }

package/dist/EditableProductGrid.js

@@ -38,7 +38,7 @@ function EditableProductGrid({ sectionPath = 'home', title = 'Featured Collectio
                             return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory(cat), className: `px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${isActive
                                     ? 'bg-white text-slate-950 shadow-md scale-102 font-extrabold'
                                     : 'bg-slate-900/60 text-slate-400 hover:text-white border border-slate-800/80 hover:bg-slate-850'}`, children: cat }, cat));
-                        }) }))] }), filteredProducts.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: `grid ${gridColClasses} gap-6 sm:gap-8`, children: filteredProducts.map((product, idx) => {
+                        }) }))] }), filteredProducts.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: `deneb-product-grid grid ${gridColClasses} gap-6 sm:gap-8`, children: filteredProducts.map((product, idx) => {
                     const itemPath = `${sectionPath}.${cardPrefix}${idx + 1}`;
                     return ((0, jsx_runtime_1.jsxs)("div", { className: "relative group", children: [(0, jsx_runtime_1.jsx)(EditableProductCard_1.EditableProductCard, { itemPath: itemPath, product: product, cardVariant: cardVariant, className: "h-full" }), onQuickView && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onQuickView(product, itemPath), className: "p-2.5 rounded-xl bg-slate-950/80 backdrop-blur-md text-white hover:bg-lime-400 hover:text-slate-950 shadow-lg transition-all active:scale-95", title: "Quick View", "aria-label": `Quick View ${product.name || product.title}`, children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }) }) }))] }, product.id || idx));
                 }) })) : (

package/dist/EditableSection.js

@@ -2,15 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableSection = EditableSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const SECTION_PADDING_MAP = {
-    none: '0',
-    xs: '1.5rem 0',
-    sm: '2.5rem 0',
-    md: '4rem 0',
-    lg: '6rem 0',
-    xl: '8rem 0',
-    '2xl': '10rem 0',
-};
+const useComponentStyle_1 = require("./hooks/useComponentStyle");
+const responsive_1 = require("./utils/responsive");
+const SECTION_PADDING_MAP = responsive_1.RESPONSIVE_SECTION_PADDING;
 /**
  * EditableSection standardizes section spacing and automatically applies the required
  * `data-design-section` marker for 100% fivora contract compliance.
@@ -22,13 +16,16 @@ function EditableSection({ as: Component = 'section', name, padding = 'lg', bg,
         : typeof border === 'string'
             ? border
             : undefined;
+    const stylePath = `${name}.section`;
+    const { cssVars: styleVars } = (0, useComponentStyle_1.useComponentStyle)(stylePath, 'section');
     const sectionStyle = {
         ...(resolvedPadding ? { padding: resolvedPadding } : {}),
         ...(bg ? { background: bg } : {}),
         ...(color ? { color } : {}),
         ...(maxWidth !== undefined ? { maxWidth, marginLeft: 'auto', marginRight: 'auto' } : {}),
         ...(resolvedBorder ? { borderBottom: resolvedBorder } : {}),
+        ...styleVars,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsx)(Component, { "data-design-section": name, className: `editable-section ${className}`.trim(), style: sectionStyle, ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-design-section": name, "data-preview-style-target": stylePath, "data-preview-style-type": "section", className: `deneb-section editable-section ${className}`.trim(), style: sectionStyle, ...props, children: children }));
 }

package/dist/EditableText.d.ts

@@ -81,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, placeholder, 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, className, ...props }: EditableTextProps): React.JSX.Element;
 export interface EditableHeadingProps extends Omit<EditableTextProps, 'variant'> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }

package/dist/EditableText.js

@@ -10,7 +10,7 @@ exports.EditableQuote = EditableQuote;
 exports.EditableLink = EditableLink;
 exports.EditableButton = EditableButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const SiteDataProvider_1 = require("./SiteDataProvider");
+const useComponentStyle_1 = require("./hooks/useComponentStyle");
 exports.SIZE_MAP = {
     xs: '0.75rem',
     sm: '0.875rem',
@@ -106,7 +106,7 @@ 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, placeholder, 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, className = '', ...props }) {
     const path = previewFieldPath || id;
     const rawContent = children !== undefined ? children : defaultValue;
     const isContentEmpty = rawContent === undefined ||
@@ -114,7 +114,7 @@ function EditableText({ id, 'data-preview-field-path': previewFieldPath, default
         (typeof rawContent === 'string' && rawContent.trim() === '');
     const isPlaceholderActive = isContentEmpty && Boolean(placeholder);
     const displayContent = isPlaceholderActive ? placeholder : rawContent;
-    const dynamicStyle = (0, SiteDataProvider_1.useFieldStyle)(path);
+    const { cssVars: styleVars } = (0, useComponentStyle_1.useComponentStyle)(path, 'text');
     const variantDefaults = variant ? exports.VARIANT_DEFAULTS[variant] : undefined;
     const Component = ComponentOverride || variantDefaults?.as || 'span';
     const effectiveColor = color || variantDefaults?.color;
@@ -134,24 +134,6 @@ function EditableText({ id, 'data-preview-field-path': previewFieldPath, default
     const resolvedFontFamily = effectiveFontFamily
         ? (exports.FONT_FAMILY_MAP[effectiveFontFamily] || effectiveFontFamily)
         : undefined;
-    // Dynamic visual editor overrides
-    const dynamicColor = dynamicStyle?.color
-        ? (exports.COLOR_MAP[String(dynamicStyle.color)] || String(dynamicStyle.color))
-        : undefined;
-    const dynamicSize = dynamicStyle?.fontSize !== undefined && dynamicStyle?.fontSize !== ''
-        ? (exports.SIZE_MAP[String(dynamicStyle.fontSize)] || toCssUnit(dynamicStyle.fontSize))
-        : undefined;
-    const dynamicLineHeight = dynamicStyle?.lineHeight !== undefined && dynamicStyle?.lineHeight !== ''
-        ? (exports.LINE_HEIGHT_MAP[String(dynamicStyle.lineHeight)] || dynamicStyle.lineHeight)
-        : undefined;
-    const dynamicFontFamily = dynamicStyle?.fontFamily
-        ? (exports.FONT_FAMILY_MAP[String(dynamicStyle.fontFamily)] || String(dynamicStyle.fontFamily))
-        : undefined;
-    const dynamicAlign = dynamicStyle?.textAlign;
-    const dynamicMarginTop = toCssUnit(dynamicStyle?.spacingTop);
-    const dynamicMarginBottom = toCssUnit(dynamicStyle?.spacingBottom);
-    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',
@@ -166,19 +148,10 @@ function EditableText({ id, 'data-preview-field-path': previewFieldPath, default
         ...(effectiveTransform ? { textTransform: effectiveTransform } : {}),
         ...(resolvedLetterSpacing ? { letterSpacing: resolvedLetterSpacing } : {}),
         ...(resolvedFontFamily ? { fontFamily: resolvedFontFamily } : {}),
+        ...styleVars,
         ...style,
-        // Visual editor overrides take highest precedence:
-        ...(dynamicColor ? { color: dynamicColor } : {}),
-        ...(dynamicSize ? { fontSize: dynamicSize } : {}),
-        ...(dynamicLineHeight ? { lineHeight: dynamicLineHeight } : {}),
-        ...(dynamicAlign ? { textAlign: dynamicAlign } : {}),
-        ...(dynamicFontFamily ? { fontFamily: dynamicFontFamily } : {}),
-        ...(dynamicMarginTop !== undefined ? { marginTop: dynamicMarginTop } : {}),
-        ...(dynamicMarginBottom !== undefined ? { marginBottom: dynamicMarginBottom } : {}),
-        ...(dynamicMarginLeft !== undefined ? { marginLeft: dynamicMarginLeft } : {}),
-        ...(dynamicMarginRight !== undefined ? { marginRight: dynamicMarginRight } : {}),
     };
-    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, "data-preview-placeholder": isPlaceholderActive ? 'true' : undefined, style: typographyStyle, ...props, children: displayContent }));
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-field-path": path, "data-preview-style-target": path, "data-preview-style-type": "text", "data-preview-placeholder": isPlaceholderActive ? 'true' : undefined, className: `deneb-text ${className}`.trim(), style: typographyStyle, ...props, children: displayContent }));
 }
 function EditableHeading({ level = 2, as, ...props }) {
     const variant = `h${level}`;
@@ -270,6 +243,7 @@ function EditableLink({ id, 'data-preview-field-path': previewFieldPath, targetP
 function EditableButton({ id, 'data-preview-field-path': previewFieldPath, defaultValue, targetPage, btnVariant = 'primary', size = 'md', children, className = '', style, ...props }) {
     const path = previewFieldPath || id;
     const content = children !== undefined ? children : defaultValue;
+    const { cssVars: styleVars } = (0, useComponentStyle_1.useComponentStyle)(path, 'button');
     const sizeStyles = {
         sm: { padding: '0.375rem 0.875rem', fontSize: '0.875rem', borderRadius: '6px' },
         md: { padding: '0.625rem 1.25rem', fontSize: '1rem', borderRadius: '8px' },
@@ -319,9 +293,10 @@ function EditableButton({ id, 'data-preview-field-path': previewFieldPath, defau
         transition: 'all 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
         ...sizeStyles[size],
         ...variantStyles[btnVariant],
+        ...styleVars,
         ...style,
     };
-    const buttonEl = ((0, jsx_runtime_1.jsx)("button", { style: baseStyle, className: `editable-btn ${className}`.trim(), ...props, children: path ? ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": path, children: content })) : (content) }));
+    const buttonEl = ((0, jsx_runtime_1.jsx)("button", { "data-preview-style-target": path, "data-preview-style-type": "button", style: baseStyle, className: `deneb-btn editable-btn ${className}`.trim(), ...props, children: path ? ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": path, children: content })) : (content) }));
     if (targetPage) {
         return (0, jsx_runtime_1.jsx)("span", { "data-target-page": targetPage, children: buttonEl });
     }

package/dist/ResponsiveBaseStyles.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * Injects viewport-aware CSS for all DENEB UI components.
+ * Works without Tailwind — every template gets mobile / tablet / desktop behavior
+ * when this is mounted once (included automatically by ThemeStyles).
+ */
+export declare function ResponsiveBaseStyles(): React.JSX.Element;

package/dist/ResponsiveBaseStyles.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveBaseStyles = ResponsiveBaseStyles;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Injects viewport-aware CSS for all DENEB UI components.
+ * Works without Tailwind — every template gets mobile / tablet / desktop behavior
+ * when this is mounted once (included automatically by ThemeStyles).
+ */
+function ResponsiveBaseStyles() {
+    const css = `
+    /* ── Breakpoints: mobile <768 | tablet 768–1023 | desktop ≥1024 ── */
+
+    /* Navbar: hide desktop nav + compact header on mobile */
+    .deneb-desktop-nav { display: none !important; }
+    .deneb-mobile-toggle { display: flex !important; }
+    .deneb-header-cta { display: none !important; }
+
+    @media (min-width: 768px) {
+      .deneb-desktop-nav { display: flex !important; }
+      .deneb-mobile-toggle { display: none !important; }
+      .deneb-header-cta { display: inline-flex !important; }
+      .deneb-mobile-drawer { display: none !important; }
+    }
+
+    @media (max-width: 767px) {
+      .deneb-site-title { font-size: 1rem !important; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .deneb-logo { height: 32px !important; max-width: 100px !important; }
+    }
+
+    /* Responsive grid columns via data attributes */
+    .editable-grid[data-deneb-responsive-cols="true"] {
+      grid-template-columns: repeat(var(--deneb-cols, 1), minmax(0, 1fr));
+    }
+    @media (min-width: 640px) {
+      .editable-grid[data-deneb-responsive-cols="true"] {
+        grid-template-columns: repeat(var(--deneb-cols-tablet, 2), minmax(0, 1fr));
+      }
+    }
+    @media (min-width: 1024px) {
+      .editable-grid[data-deneb-responsive-cols="true"] {
+        grid-template-columns: repeat(var(--deneb-cols-desktop, 3), minmax(0, 1fr));
+      }
+    }
+
+    /* Horizontal product card stacks on mobile */
+    .editable-product-card.is-horizontal { flex-direction: column !important; }
+    .editable-product-card.is-horizontal .deneb-product-card-media { width: 100% !important; }
+    @media (min-width: 640px) {
+      .editable-product-card.is-horizontal { flex-direction: row !important; align-items: center !important; }
+      .editable-product-card.is-horizontal .deneb-product-card-media { width: 38% !important; }
+    }
+
+    /* Card padding scales down on small screens */
+    .editable-pricing-card,
+    .editable-testimonial-card {
+      padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) !important;
+    }
+    .editable-pricing-card .deneb-pricing-amount {
+      font-size: clamp(2rem, 6vw, 2.75rem) !important;
+    }
+
+    /* Dialog: tighter padding on phones */
+    .deneb-dialog-portal { padding: clamp(0.5rem, 3vw, 1rem) !important; }
+    .deneb-dialog-content { padding: clamp(1.25rem, 4vw, 2rem) !important; border-radius: clamp(12px, 3vw, 20px) !important; }
+    .deneb-dialog-content h2 { font-size: clamp(1.1rem, 4vw, 1.35rem) !important; }
+
+    /* Floating contact: prevent popup overflow */
+    .deneb-contact-popup {
+      width: min(18rem, calc(100vw - 2rem)) !important;
+      max-width: calc(100vw - 2rem) !important;
+    }
+    @media (max-width: 479px) {
+      .deneb-floating-contact { bottom: 1rem !important; right: 1rem !important; left: auto !important; }
+      .deneb-floating-contact.deneb-floating-left { left: 1rem !important; right: auto !important; }
+    }
+
+    /* Filter sidebar: collapsible on mobile, always visible on tablet+ */
+    .deneb-filter-mobile-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; }
+    @media (min-width: 768px) {
+      .deneb-filter-mobile-toggle { display: none !important; }
+      .deneb-filter-sidebar-panel { display: block !important; }
+    }
+    @media (max-width: 767px) {
+      .deneb-filter-sidebar-panel { display: none; }
+      .deneb-filter-sidebar-panel.is-open { display: block; }
+      .deneb-filter-sidebar .deneb-filter-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+    }
+
+    /* Contact actions: stack on mobile when row layout */
+    @media (max-width: 639px) {
+      .deneb-contact-actions.deneb-layout-row {
+        flex-direction: column !important;
+        align-items: stretch !important;
+      }
+      .deneb-contact-actions.deneb-layout-row > * { width: 100%; }
+    }
+
+    /* Contact form title */
+    .deneb-contact-form-title { font-size: clamp(1.25rem, 4vw, 1.75rem) !important; }
+
+    /* Product detail: size grid on xs */
+    @media (max-width: 479px) {
+      .deneb-product-detail-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
+      .deneb-product-detail-gallery { max-height: 420px !important; }
+    }
+
+    /* Footer / trust badges / product grid fallbacks when Tailwind is absent */
+    @media (max-width: 639px) {
+      .deneb-footer-grid { grid-template-columns: 1fr !important; }
+      .deneb-trust-grid { grid-template-columns: 1fr !important; }
+      .deneb-product-grid { grid-template-columns: 1fr !important; }
+    }
+    @media (min-width: 640px) and (max-width: 1023px) {
+      .deneb-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+      .deneb-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+      .deneb-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
+    }
+    @media (min-width: 1024px) {
+      .deneb-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
+      .deneb-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
+    }
+
+    /* Sticky mobile bar: hide on desktop */
+    .deneb-sticky-mobile-bar { display: flex; }
+    @media (min-width: 1024px) {
+      .deneb-sticky-mobile-bar { display: none !important; }
+    }
+
+    /* Dialog animations */
+    @keyframes deneb-fade-in { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes deneb-zoom-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+    @keyframes deneb-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
+  `;
+    return (0, jsx_runtime_1.jsx)("style", { "data-deneb-responsive": "true", dangerouslySetInnerHTML: { __html: css } });
+}

package/dist/SiteDataProvider.d.ts

@@ -9,6 +9,7 @@ export declare const DENEB_PREVIEW_FOCUS_MESSAGE = "DENEB_PREVIEW_FOCUS_PAGE";
 export declare const PREVIEW_FOCUS_MESSAGE = "FIVORA_PREVIEW_FOCUS_PAGE";
 export declare const LEGACY_PREVIEW_FOCUS_MESSAGE: string;
 export declare const PREVIEW_FIELD_ATTRIBUTE = "data-preview-field-path";
+export { STYLE_PATCH_MESSAGE, DENEB_STYLE_PATCH_MESSAGE } from '@deneb-ui/core';
 export type GenericRecord = Record<string, unknown>;
 export type SiteData = {
     project?: {
@@ -25,6 +26,7 @@ export type SiteData = {
         requiredPages?: string[] | null;
     } | null;
     content?: GenericRecord | null;
+    styles?: GenericRecord | null;
     [key: string]: unknown;
 };
 export declare const SiteDataContext: React.Context<SiteData>;

package/dist/SiteDataProvider.js

@@ -1,7 +1,7 @@
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DenebDataContext = exports.useDenebData = exports.DenebDataProvider = exports.SiteDataContext = exports.PREVIEW_FIELD_ATTRIBUTE = exports.LEGACY_PREVIEW_FOCUS_MESSAGE = exports.PREVIEW_FOCUS_MESSAGE = exports.DENEB_PREVIEW_FOCUS_MESSAGE = exports.LEGACY_PREVIEW_READY_MESSAGE = exports.PREVIEW_READY_MESSAGE = exports.DENEB_PREVIEW_READY_MESSAGE = exports.LEGACY_PREVIEW_DATA_MESSAGE = exports.PREVIEW_DATA_MESSAGE = exports.DENEB_PREVIEW_DATA_MESSAGE = void 0;
+exports.DenebDataContext = exports.useDenebData = exports.DenebDataProvider = exports.SiteDataContext = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.PREVIEW_FIELD_ATTRIBUTE = exports.LEGACY_PREVIEW_FOCUS_MESSAGE = exports.PREVIEW_FOCUS_MESSAGE = exports.DENEB_PREVIEW_FOCUS_MESSAGE = exports.LEGACY_PREVIEW_READY_MESSAGE = exports.PREVIEW_READY_MESSAGE = exports.DENEB_PREVIEW_READY_MESSAGE = exports.LEGACY_PREVIEW_DATA_MESSAGE = exports.PREVIEW_DATA_MESSAGE = exports.DENEB_PREVIEW_DATA_MESSAGE = void 0;
 exports.isRecord = isRecord;
 exports.mergeSiteData = mergeSiteData;
 exports.normalizeOrigin = normalizeOrigin;
@@ -17,6 +17,10 @@ exports.getFieldStyle = getFieldStyle;
 exports.useFieldStyle = useFieldStyle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const core_1 = require("@deneb-ui/core");
+const DenebComponentStyles_1 = require("./DenebComponentStyles");
+const FontLoader_1 = require("./fonts/FontLoader");
+const ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
 exports.DENEB_PREVIEW_DATA_MESSAGE = 'DENEB_PREVIEW_SITE_DATA';
 exports.PREVIEW_DATA_MESSAGE = 'FIVORA_PREVIEW_SITE_DATA';
 const PREVIOUS_PREVIEW_PREFIX = `${['MARKET', 'PLACE'].join('')}_PREVIEW_`;
@@ -30,6 +34,9 @@ exports.DENEB_PREVIEW_FOCUS_MESSAGE = 'DENEB_PREVIEW_FOCUS_PAGE';
 exports.PREVIEW_FOCUS_MESSAGE = 'FIVORA_PREVIEW_FOCUS_PAGE';
 exports.LEGACY_PREVIEW_FOCUS_MESSAGE = previousPreviewMessage('FOCUS_PAGE');
 exports.PREVIEW_FIELD_ATTRIBUTE = 'data-preview-field-path';
+var core_2 = require("@deneb-ui/core");
+Object.defineProperty(exports, "STYLE_PATCH_MESSAGE", { enumerable: true, get: function () { return core_2.STYLE_PATCH_MESSAGE; } });
+Object.defineProperty(exports, "DENEB_STYLE_PATCH_MESSAGE", { enumerable: true, get: function () { return core_2.DENEB_STYLE_PATCH_MESSAGE; } });
 const PARENT_ORIGIN_KEY = '__FIVORA_PREVIEW_PARENT_ORIGIN__';
 const LEGACY_PARENT_ORIGIN_KEY = previousPreviewStorageKey('PARENT_ORIGIN');
 const SITE_DATA_CACHE_KEY = '__FIVORA_PREVIEW_SITE_DATA_CACHE__';
@@ -50,7 +57,7 @@ function mergeSiteData(current, incoming) {
     for (const key of Object.keys(incoming)) {
         // Parent preview always sends complete content/media snapshots. Replacing
         // them wholesale avoids deep-cloning large collections on every keystroke.
-        if (key === 'content' || key === 'media') {
+        if (key === 'content' || key === 'media' || key === 'styles') {
             next[key] = incoming[key];
             continue;
         }
@@ -200,7 +207,9 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, }) {
             const isFocus = event.data.type === exports.DENEB_PREVIEW_FOCUS_MESSAGE ||
                 event.data.type === exports.PREVIEW_FOCUS_MESSAGE ||
                 event.data.type === exports.LEGACY_PREVIEW_FOCUS_MESSAGE;
-            if (!isData && !isFocus) {
+            const isStylePatch = event.data.type === core_1.STYLE_PATCH_MESSAGE ||
+                event.data.type === core_1.DENEB_STYLE_PATCH_MESSAGE;
+            if (!isData && !isFocus && !isStylePatch) {
                 return;
             }
             // Pin the first concrete parent origin when referrer was suppressed.
@@ -225,6 +234,15 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, }) {
                 applyIncomingSiteData(event.data.siteData);
                 return;
             }
+            if (isStylePatch) {
+                const targetPath = typeof event.data.targetPath === 'string' ? event.data.targetPath : '';
+                const styleType = typeof event.data.styleType === 'string' ? event.data.styleType : 'text';
+                const properties = isRecord(event.data.properties) ? event.data.properties : {};
+                if (targetPath) {
+                    (0, core_1.patchStyleByPath)(targetPath, styleType, properties);
+                }
+                return;
+            }
             if (isFocus) {
                 const fieldPath = typeof event.data.fieldPath === 'string' ? event.data.fieldPath : '';
                 if (!fieldPath)
@@ -248,7 +266,7 @@ function SiteDataProvider({ children, initialSiteData, fallbackSiteData, }) {
         return () => window.removeEventListener('message', onMessage);
     }, []);
     const value = (0, react_1.useMemo)(() => siteData, [siteData]);
-    return ((0, jsx_runtime_1.jsx)(exports.SiteDataContext.Provider, { value: value, children: children }));
+    return ((0, jsx_runtime_1.jsxs)(exports.SiteDataContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(FontLoader_1.FontLoader, {}), (0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), (0, jsx_runtime_1.jsx)(DenebComponentStyles_1.DenebComponentStyles, {}), children] }));
 }
 function useSiteData() {
     return (0, react_1.useContext)(exports.SiteDataContext);

package/dist/StickyMobileBar.js

@@ -70,7 +70,7 @@ function StickyMobileBar({ fieldPath, actions, showOnDesktop = false, className
                 return ((0, jsx_runtime_1.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }));
         }
     };
-    return ((0, jsx_runtime_1.jsx)("aside", { className: `fixed bottom-0 left-0 right-0 z-50 p-2 sm:p-3 transition-transform duration-300 ${showOnDesktop ? 'block' : 'lg:hidden'} ${className}`, "data-preview-field-path": fieldPath, style: {
+    return ((0, jsx_runtime_1.jsx)("aside", { className: `deneb-sticky-mobile-bar fixed bottom-0 left-0 right-0 z-50 p-2 sm:p-3 transition-transform duration-300 ${showOnDesktop ? 'block' : 'lg:hidden'} ${className}`, "data-preview-field-path": fieldPath, style: {
             backgroundColor: 'rgba(255, 255, 255, 0.92)',
             backdropFilter: 'blur(12px)',
             WebkitBackdropFilter: 'blur(12px)',

package/dist/ThemeStyles.js

@@ -5,6 +5,7 @@ exports.getCategoryTheme = getCategoryTheme;
 exports.getThemeCssProperties = getThemeCssProperties;
 exports.ThemeStyles = ThemeStyles;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
 /**
  * Pre-configured, high-converting theme presets tailored for different business categories.
  * Allows developers and AI agents to instantly generate distinct designs without copy-pasting styles.
@@ -177,5 +178,5 @@ function ThemeStyles({ theme, defaultPrimary = '#2563eb', defaultSecondary = '#0
 ${cssLines}
     }
   `;
-    return (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: css } });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: css } })] }));
 }

package/dist/TrustBadges.js

@@ -60,7 +60,7 @@ function TrustBadges({ fieldPath = 'content.trustBadges', title, subtitle, badge
     };
     return ((0, jsx_runtime_1.jsxs)("section", { className: `w-full py-8 my-4 ${className}`, "data-preview-field-path": fieldPath, style: style, children: [(title || subtitle) && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center mb-8", children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-xl sm:text-2xl font-bold tracking-tight text-slate-900", children: title })), subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-sm text-slate-600 max-w-xl mx-auto", children: subtitle }))] })), (0, jsx_runtime_1.jsx)("div", { className: variant === 'inline'
                     ? 'flex flex-wrap items-center justify-around gap-6'
-                    : 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6', children: badges.map((badge) => ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-4 p-5 rounded-2xl transition-all duration-200 hover:-translate-y-0.5 ${variant === 'cards'
+                    : 'deneb-trust-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6', children: badges.map((badge) => ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-start gap-4 p-5 rounded-2xl transition-all duration-200 hover:-translate-y-0.5 ${variant === 'cards'
                         ? 'bg-white border border-slate-200/80 shadow-sm hover:shadow-md'
                         : 'bg-transparent'}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 p-2.5 rounded-xl bg-slate-50 border border-slate-100 flex items-center justify-center", children: renderIcon(badge) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-semibold text-slate-900 leading-tight", children: badge.title }), (0, jsx_runtime_1.jsx)("p", { className: "mt-1 text-xs text-slate-500 leading-relaxed", children: badge.description })] })] }, badge.id))) })] }));
 }

package/dist/contact/FloatingContactWidget.js

@@ -56,7 +56,8 @@ function FloatingContactWidget({ fieldPath = 'contact', defaultPhone, defaultWha
         position: 'absolute',
         bottom: '4.25rem',
         [isRight ? 'right' : 'left']: '0',
-        width: '18rem',
+        width: 'min(18rem, calc(100vw - 2rem))',
+        maxWidth: 'calc(100vw - 2rem)',
         backgroundColor: '#ffffff',
         borderRadius: '1rem',
         boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
@@ -64,5 +65,5 @@ function FloatingContactWidget({ fieldPath = 'contact', defaultPhone, defaultWha
         overflow: 'hidden',
         animation: 'deneb-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1)',
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-floating-contact fixed z-50 bottom-6 ${isRight ? 'right-6' : 'left-6'} ${className}`, style: containerStyle, "data-preview-field-path": fieldPath, children: [isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "deneb-contact-popup absolute bottom-16 bg-white rounded-2xl shadow-2xl border border-slate-200 w-72 overflow-hidden text-slate-800", style: menuStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-slate-900 text-white p-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-bold text-sm leading-tight text-white", children: storeName }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-emerald-400 font-medium flex items-center gap-1.5 mt-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-400 animate-pulse" }), "Online & Ready to Help"] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsOpen(false), className: "text-slate-400 hover:text-white p-1 rounded transition-colors", "aria-label": "Close contact drawer", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", 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" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-2 text-sm bg-slate-50", children: [hasWhatsApp && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createWhatsAppUrl)(whatsapp, defaultMessage), target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-emerald-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.whatsapp`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", 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-.694.062-1.116-.073-.266-.086-.61-.225-1.047-.417-1.854-.814-3.056-2.695-3.15-2.819-.092-.124-.755-.999-.755-1.907 0-.909.479-1.353.649-1.536.17-.183.371-.23.495-.23.124 0 .248.002.355.008.113.006.265-.043.414.316.155.372.531 1.296.577 1.39.046.094.077.204.015.328-.061.124-.092.202-.184.31-.092.108-.195.241-.278.324-.093.093-.19.195-.082.381.109.186.483.797 1.037 1.289.713.633 1.314.829 1.501.922.186.093.295.078.404-.047.11-.124.467-.543.591-.729.124-.186.248-.155.418-.093.17.062 1.082.51 1.268.603.186.093.31.14.356.217.046.077.046.449-.098.854z" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Chat on WhatsApp" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: whatsapp })] })] })), hasPhone && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createPhoneUrl)(phone), className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-blue-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.phone`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Direct Call" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: phone })] })] })), hasEmail && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createEmailUrl)(email, `Inquiry: ${storeName}`), className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-purple-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.email`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), (0, jsx_runtime_1.jsx)("polyline", { points: "22,6 12,13 2,6" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Send Email" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: email })] })] }))] })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsOpen(!isOpen), style: bubbleStyle, className: "deneb-bubble hover:scale-105 active:scale-95 flex items-center justify-center focus:outline-none", "aria-label": "Toggle contact channels", children: isOpen ? ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", 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" })] })) : ((0, jsx_runtime_1.jsx)("svg", { width: "28", height: "28", 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-.694.062-1.116-.073-.266-.086-.61-.225-1.047-.417-1.854-.814-3.056-2.695-3.15-2.819-.092-.124-.755-.999-.755-1.907 0-.909.479-1.353.649-1.536.17-.183.371-.23.495-.23.124 0 .248.002.355.008.113.006.265-.043.414.316.155.372.531 1.296.577 1.39.046.094.077.204.015.328-.061.124-.092.202-.184.31-.092.108-.195.241-.278.324-.093.093-.19.195-.082.381.109.186.483.797 1.037 1.289.713.633 1.314.829 1.501.922.186.093.295.078.404-.047.11-.124.467-.543.591-.729.124-.186.248-.155.418-.093.17.062 1.082.51 1.268.603.186.093.31.14.356.217.046.077.046.449-.098.854z" }) })) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `deneb-floating-contact fixed z-50 bottom-6 ${isRight ? 'right-6 deneb-floating-right' : 'left-6 deneb-floating-left'} ${className}`, style: containerStyle, "data-preview-field-path": fieldPath, children: [isOpen && ((0, jsx_runtime_1.jsxs)("div", { className: "deneb-contact-popup absolute bottom-16 bg-white rounded-2xl shadow-2xl border border-slate-200 w-72 overflow-hidden text-slate-800", style: menuStyle, children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-slate-900 text-white p-4 flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-bold text-sm leading-tight text-white", children: storeName }), (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-emerald-400 font-medium flex items-center gap-1.5 mt-0.5", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-2 h-2 rounded-full bg-emerald-400 animate-pulse" }), "Online & Ready to Help"] })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsOpen(false), className: "text-slate-400 hover:text-white p-1 rounded transition-colors", "aria-label": "Close contact drawer", children: (0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", 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" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 space-y-2 text-sm bg-slate-50", children: [hasWhatsApp && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createWhatsAppUrl)(whatsapp, defaultMessage), target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-emerald-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.whatsapp`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", 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-.694.062-1.116-.073-.266-.086-.61-.225-1.047-.417-1.854-.814-3.056-2.695-3.15-2.819-.092-.124-.755-.999-.755-1.907 0-.909.479-1.353.649-1.536.17-.183.371-.23.495-.23.124 0 .248.002.355.008.113.006.265-.043.414.316.155.372.531 1.296.577 1.39.046.094.077.204.015.328-.061.124-.092.202-.184.31-.092.108-.195.241-.278.324-.093.093-.19.195-.082.381.109.186.483.797 1.037 1.289.713.633 1.314.829 1.501.922.186.093.295.078.404-.047.11-.124.467-.543.591-.729.124-.186.248-.155.418-.093.17.062 1.082.51 1.268.603.186.093.31.14.356.217.046.077.046.449-.098.854z" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Chat on WhatsApp" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: whatsapp })] })] })), hasPhone && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createPhoneUrl)(phone), className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-blue-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.phone`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Direct Call" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: phone })] })] })), hasEmail && ((0, jsx_runtime_1.jsxs)("a", { href: (0, urls_1.createEmailUrl)(email, `Inquiry: ${storeName}`), className: "flex items-center gap-3 p-2.5 rounded-xl bg-white border border-slate-200/80 hover:border-purple-400 hover:shadow-sm transition-all text-slate-800", "data-preview-field-path": `${fieldPath}.email`, children: [(0, jsx_runtime_1.jsx)("div", { className: "w-9 h-9 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center flex-shrink-0", children: (0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" }), (0, jsx_runtime_1.jsx)("polyline", { points: "22,6 12,13 2,6" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-slate-900 text-xs", children: "Send Email" }), (0, jsx_runtime_1.jsx)("div", { className: "text-[11px] text-slate-500 truncate", children: email })] })] }))] })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setIsOpen(!isOpen), style: bubbleStyle, className: "deneb-bubble hover:scale-105 active:scale-95 flex items-center justify-center focus:outline-none", "aria-label": "Toggle contact channels", children: isOpen ? ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", 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" })] })) : ((0, jsx_runtime_1.jsx)("svg", { width: "28", height: "28", 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-.694.062-1.116-.073-.266-.086-.61-.225-1.047-.417-1.854-.814-3.056-2.695-3.15-2.819-.092-.124-.755-.999-.755-1.907 0-.909.479-1.353.649-1.536.17-.183.371-.23.495-.23.124 0 .248.002.355.008.113.006.265-.043.414.316.155.372.531 1.296.577 1.39.046.094.077.204.015.328-.061.124-.092.202-.184.31-.092.108-.195.241-.278.324-.093.093-.19.195-.082.381.109.186.483.797 1.037 1.289.713.633 1.314.829 1.501.922.186.093.295.078.404-.047.11-.124.467-.543.591-.729.124-.186.248-.155.418-.093.17.062 1.082.51 1.268.603.186.093.31.14.356.217.046.077.046.449-.098.854z" }) })) })] }));
 }

package/dist/fonts/FontLoader.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const DENEB_FONTS_LINK_ID = "deneb-google-fonts";
+export interface FontLoaderProps {
+    /** Additional font ids to preload beyond site-data discovery */
+    fontIds?: string[];
+    /** Use Google Fonts CDN (default in preview). Set false when `deneb fonts install` CSS is present */
+    useGoogleCdn?: boolean;
+}
+/**
+ * Dynamically loads Google Fonts used by the active site-data theme + style tree.
+ * In production, pair with `deneb fonts install` which writes self-hosted @fontsource CSS.
+ */
+export declare function FontLoader({ fontIds, useGoogleCdn }: FontLoaderProps): React.JSX.Element | null;

package/dist/fonts/FontLoader.js

@@ -0,0 +1,43 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DENEB_FONTS_LINK_ID = void 0;
+exports.FontLoader = FontLoader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useDenebFonts_1 = require("./useDenebFonts");
+exports.DENEB_FONTS_LINK_ID = 'deneb-google-fonts';
+/**
+ * Dynamically loads Google Fonts used by the active site-data theme + style tree.
+ * In production, pair with `deneb fonts install` which writes self-hosted @fontsource CSS.
+ */
+function FontLoader({ fontIds = [], useGoogleCdn = true }) {
+    const { googleStylesheetUrl, cssVariables, fontIds: activeFontIds } = (0, useDenebFonts_1.useDenebFonts)(fontIds);
+    const loadedUrl = (0, react_1.useRef)(null);
+    const enableCdn = useGoogleCdn;
+    (0, react_1.useEffect)(() => {
+        if (!enableCdn || !googleStylesheetUrl || typeof document === 'undefined')
+            return;
+        const selfHosted = getComputedStyle(document.documentElement)
+            .getPropertyValue('--deneb-fonts-selfhosted')
+            .trim();
+        if (selfHosted === '1')
+            return;
+        if (loadedUrl.current === googleStylesheetUrl)
+            return;
+        let link = document.getElementById(exports.DENEB_FONTS_LINK_ID);
+        if (!link) {
+            link = document.createElement('link');
+            link.id = exports.DENEB_FONTS_LINK_ID;
+            link.rel = 'stylesheet';
+            document.head.appendChild(link);
+        }
+        link.href = googleStylesheetUrl;
+        loadedUrl.current = googleStylesheetUrl;
+    }, [enableCdn, googleStylesheetUrl]);
+    if (Object.keys(cssVariables).length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsx)("style", { "data-deneb-font-vars": true, "data-deneb-font-count": activeFontIds.length, children: `:root { ${Object.entries(cssVariables)
+            .map(([key, value]) => `${key}: ${value};`)
+            .join(' ')} }` }));
+}

package/dist/fonts/useDenebFonts.d.ts

@@ -0,0 +1,6 @@
+export declare function useDenebFonts(extraFontIds?: string[]): {
+    fontIds: string[];
+    googleStylesheetUrl: string | null;
+    cssVariables: Record<string, string>;
+    catalog: (import("@deneb-ui/core").DenebFontDefinition | null)[];
+};