@deneb-ui/ui 2.0.23 → 2.0.24

package/dist/DenebComponentStyles.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Base CSS variable mappings for real-time visual style editing.
+ * Components apply `--deneb-*` vars via useComponentStyle; this sheet defines fallbacks.
+ */
+export declare function DenebComponentStyles(): React.JSX.Element;

package/dist/DenebComponentStyles.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DenebComponentStyles = DenebComponentStyles;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Base CSS variable mappings for real-time visual style editing.
+ * Components apply `--deneb-*` vars via useComponentStyle; this sheet defines fallbacks.
+ */
+function DenebComponentStyles() {
+    const css = `
+    .deneb-card {
+      width: var(--deneb-card-width, auto);
+      min-width: var(--deneb-card-min-width, unset);
+      max-width: var(--deneb-card-max-width, 100%);
+      height: var(--deneb-card-height, auto);
+      aspect-ratio: var(--deneb-card-aspect-ratio, auto);
+      padding-top: var(--deneb-card-pt, 1.25rem);
+      padding-bottom: var(--deneb-card-pb, 1.25rem);
+      padding-left: var(--deneb-card-pl, 1.25rem);
+      padding-right: var(--deneb-card-pr, 1.25rem);
+      border-radius: var(--deneb-card-radius, 0.75rem);
+      border-width: var(--deneb-card-border-w, 0);
+      border-style: var(--deneb-card-border-s, solid);
+      border-color: var(--deneb-card-border-c, rgba(0, 0, 0, 0.08));
+      background-color: var(--deneb-card-bg, transparent);
+      background-image: var(--deneb-card-bg-gradient, none);
+      box-shadow: var(--deneb-card-shadow, none);
+      backdrop-filter: blur(var(--deneb-card-blur, 0px));
+      gap: var(--deneb-card-gap, unset);
+      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+    }
+    .deneb-card-balance {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0%;
+      min-width: 0;
+      height: 100%;
+    }
+    .deneb-text {
+      font-family: var(--deneb-font-family, inherit);
+      font-size: var(--deneb-font-size, inherit);
+      font-weight: var(--deneb-font-weight, inherit);
+      line-height: var(--deneb-line-height, inherit);
+      letter-spacing: var(--deneb-letter-spacing, inherit);
+      color: var(--deneb-color, inherit);
+      text-align: var(--deneb-text-align, inherit);
+      text-transform: var(--deneb-text-transform, inherit);
+      margin-top: var(--deneb-margin-top, 0);
+      margin-bottom: var(--deneb-margin-bottom, 0);
+      margin-left: var(--deneb-margin-left, 0);
+      margin-right: var(--deneb-margin-right, 0);
+    }
+    .deneb-btn {
+      border-radius: var(--deneb-btn-radius, inherit);
+      padding-left: var(--deneb-btn-px, inherit);
+      padding-right: var(--deneb-btn-px, inherit);
+      padding-top: var(--deneb-btn-py, inherit);
+      padding-bottom: var(--deneb-btn-py, inherit);
+      background-color: var(--deneb-btn-bg, inherit);
+      color: var(--deneb-btn-color, inherit);
+      border-color: var(--deneb-btn-border-c, inherit);
+    }
+    .deneb-btn:hover {
+      background-color: var(--deneb-btn-hover-bg, inherit);
+      color: var(--deneb-btn-hover-color, inherit);
+    }
+    .deneb-grid {
+      grid-template-columns: var(--deneb-grid-cols, inherit);
+      column-gap: var(--deneb-grid-gap-x, inherit);
+      row-gap: var(--deneb-grid-gap-y, inherit);
+      align-items: var(--deneb-grid-equal-height, inherit);
+    }
+    .deneb-section {
+      padding-top: var(--deneb-section-pt, inherit);
+      padding-bottom: var(--deneb-section-pb, inherit);
+      padding-left: var(--deneb-section-px, inherit);
+      padding-right: var(--deneb-section-px, inherit);
+      max-width: var(--deneb-section-max-w, inherit);
+      background-color: var(--deneb-section-bg, inherit);
+      background-image: var(--deneb-section-bg-image, none);
+    }
+  `;
+    return (0, jsx_runtime_1.jsx)("style", { "data-deneb-component-styles": true, children: css });
+}

package/dist/EditableCard.js

@@ -4,6 +4,7 @@ exports.EditableCard = EditableCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const EditableText_1 = require("./EditableText");
 const EditableImage_1 = require("./EditableImage");
+const useComponentStyle_1 = require("./hooks/useComponentStyle");
 const RADIUS_MAP = {
     none: '0px',
     sm: '4px',
@@ -57,6 +58,8 @@ function EditableCard({ itemPath, item, titleKey = 'title', bodyKey = 'body', im
         : typeof border === 'string'
             ? border
             : undefined;
+    const stylePath = `${itemPath}.card`;
+    const { cssVars: styleVars } = (0, useComponentStyle_1.useComponentStyle)(stylePath, 'card');
     const cardStyle = {
         ...(width !== undefined ? { width } : {}),
         ...(minWidth !== undefined ? { minWidth } : {}),
@@ -79,7 +82,8 @@ function EditableCard({ itemPath, item, titleKey = 'title', bodyKey = 'body', im
         ...(resolvedBorder ? { border: resolvedBorder } : {}),
         ...(resolvedPadding ? { padding: resolvedPadding } : {}),
         ...(align ? { textAlign: align } : {}),
+        ...styleVars,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, className: `editable-card ${className}`.trim(), style: cardStyle, ...props, children: [imageUrl !== undefined && ((0, jsx_runtime_1.jsx)("div", { className: "editable-card-image-wrap", children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, src: imageUrl, fallbackSrc: imageFallback, alt: title, className: "editable-card-image" }) })), (0, jsx_runtime_1.jsx)("div", { className: "editable-card-body", style: balance ? { display: 'flex', flexDirection: 'column', flex: '1 1 auto' } : undefined, children: children ? (children) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { variant: "h3", color: "heading", id: `${itemPath}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: title, className: "editable-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { variant: "p", color: "muted", id: `${itemPath}.${bodyKey}`, "data-preview-field-path": `${itemPath}.${bodyKey}`, defaultValue: body, className: "editable-card-body-text" })] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Component, { "data-preview-item-path": itemPath, "data-preview-style-target": stylePath, "data-preview-style-type": "card", className: `deneb-card editable-card ${balance ? 'deneb-card-balance' : ''} ${className}`.trim(), style: cardStyle, ...props, children: [imageUrl !== undefined && ((0, jsx_runtime_1.jsx)("div", { className: "editable-card-image-wrap", children: (0, jsx_runtime_1.jsx)(EditableImage_1.EditableImage, { id: `${itemPath}.${imageKey}`, src: imageUrl, fallbackSrc: imageFallback, alt: title, className: "editable-card-image" }) })), (0, jsx_runtime_1.jsx)("div", { className: "editable-card-body", style: balance ? { display: 'flex', flexDirection: 'column', flex: '1 1 auto' } : undefined, children: children ? (children) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { variant: "h3", color: "heading", id: `${itemPath}.${titleKey}`, "data-preview-field-path": `${itemPath}.${titleKey}`, defaultValue: title, className: "editable-card-title" }), (0, jsx_runtime_1.jsx)(EditableText_1.EditableText, { variant: "p", color: "muted", id: `${itemPath}.${bodyKey}`, "data-preview-field-path": `${itemPath}.${bodyKey}`, defaultValue: body, className: "editable-card-body-text" })] })) })] }));
 }

package/dist/EditableGrid.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableGrid = EditableGrid;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const useComponentStyle_1 = require("./hooks/useComponentStyle");
 const responsive_1 = require("./utils/responsive");
 const SPACING_MAP = {
     none: '0',
@@ -19,6 +20,9 @@ const SPACING_MAP = {
 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';
     const { template: templateCols, dataAttrs } = (0, responsive_1.resolveResponsiveColumns)(columns, minCardWidth);
+    const listPath = previewListPath || id;
+    const stylePath = listPath ? `${listPath}.grid` : undefined;
+    const { cssVars: styleVars } = (0, useComponentStyle_1.useComponentStyle)(stylePath, 'grid');
     const gridStyle = {
         display: 'grid',
         gridTemplateColumns: templateCols,
@@ -31,7 +35,8 @@ function EditableGrid({ as: Component = 'div', id, 'data-preview-list-path': pre
                 '--deneb-cols-desktop': dataAttrs['data-cols-desktop'],
             }
             : {}),
+        ...styleVars,
         ...style,
     };
-    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-list-path": previewListPath || id, className: `editable-grid ${className}`.trim(), style: gridStyle, ...(dataAttrs || {}), ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(Component, { "data-preview-list-path": listPath, "data-preview-style-target": stylePath, "data-preview-style-type": "grid", className: `deneb-grid editable-grid ${className}`.trim(), style: gridStyle, ...(dataAttrs || {}), ...props, children: children }));
 }

package/dist/EditableSection.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditableSection = EditableSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const useComponentStyle_1 = require("./hooks/useComponentStyle");
 const responsive_1 = require("./utils/responsive");
 const SECTION_PADDING_MAP = responsive_1.RESPONSIVE_SECTION_PADDING;
 /**
@@ -15,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/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,9 @@ 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';
@@ -31,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__';
@@ -51,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;
         }
@@ -201,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.
@@ -226,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)
@@ -249,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.jsxs)(exports.SiteDataContext.Provider, { value: value, children: [(0, jsx_runtime_1.jsx)(ResponsiveBaseStyles_1.ResponsiveBaseStyles, {}), 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/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)[];
+};

package/dist/fonts/useDenebFonts.js

@@ -0,0 +1,29 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDenebFonts = useDenebFonts;
+const react_1 = require("react");
+const core_1 = require("@deneb-ui/core");
+const SiteDataProvider_1 = require("../SiteDataProvider");
+function useDenebFonts(extraFontIds = []) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const fontIds = (0, react_1.useMemo)(() => {
+        const fromSite = (0, core_1.collectFontIdsFromSiteData)(siteData);
+        const merged = new Set([...fromSite, ...extraFontIds.filter(Boolean)]);
+        return Array.from(merged);
+    }, [siteData, extraFontIds]);
+    const googleStylesheetUrl = (0, react_1.useMemo)(() => (0, core_1.buildGoogleFontsStylesheetUrl)(fontIds), [fontIds]);
+    const cssVariables = (0, react_1.useMemo)(() => {
+        const theme = siteData?.theme ??
+            siteData
+                ?.template?.structure?.theme;
+        const heading = (0, core_1.resolveFontFamily)(typeof theme?.headingFont === 'string' ? theme.headingFont : undefined);
+        const body = (0, core_1.resolveFontFamily)(typeof theme?.bodyFont === 'string' ? theme.bodyFont : undefined);
+        return {
+            ...(heading ? { '--heading-font': heading } : {}),
+            ...(body ? { '--body-font': body } : {}),
+        };
+    }, [siteData]);
+    const catalog = (0, react_1.useMemo)(() => fontIds.map((id) => (0, core_1.lookupFontDefinition)(id)).filter(Boolean), [fontIds]);
+    return { fontIds, googleStylesheetUrl, cssVariables, catalog };
+}

package/dist/hooks/useComponentStyle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type StyleKind } from '@deneb-ui/core';
+import { type GenericRecord } from '../SiteDataProvider';
+export declare function resolveComponentStyle(siteData: GenericRecord, stylePath: string, defaults?: GenericRecord): GenericRecord;
+export declare function useComponentStyle<T extends GenericRecord = GenericRecord>(stylePath: string | undefined, styleKind: StyleKind, defaults?: Partial<T>): {
+    style: T;
+    cssVars: React.CSSProperties;
+};

package/dist/hooks/useComponentStyle.js

@@ -0,0 +1,46 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveComponentStyle = resolveComponentStyle;
+exports.useComponentStyle = useComponentStyle;
+const react_1 = require("react");
+const core_1 = require("@deneb-ui/core");
+const SiteDataProvider_1 = require("../SiteDataProvider");
+function getNestedValue(root, dottedPath) {
+    if (!root || !dottedPath)
+        return undefined;
+    const parts = (0, SiteDataProvider_1.parseFieldPath)(dottedPath);
+    let current = root;
+    for (const part of parts) {
+        if (typeof part === 'number') {
+            if (!Array.isArray(current))
+                return undefined;
+            current = current[part];
+        }
+        else {
+            if (!(0, SiteDataProvider_1.isRecord)(current))
+                return undefined;
+            current = current[part];
+        }
+    }
+    return current;
+}
+function resolveComponentStyle(siteData, stylePath, defaults) {
+    const stylesTree = (0, SiteDataProvider_1.isRecord)(siteData.styles) ? siteData.styles : {};
+    const fromStylesTree = stylesTree[stylePath];
+    const fromContentSuffix = (0, SiteDataProvider_1.getFieldStyle)(siteData.content, stylePath);
+    const raw = (0, SiteDataProvider_1.isRecord)(fromStylesTree)
+        ? fromStylesTree
+        : fromContentSuffix ?? {};
+    return { ...(defaults ?? {}), ...raw };
+}
+function useComponentStyle(stylePath, styleKind, defaults) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const merged = (0, react_1.useMemo)(() => {
+        if (!stylePath)
+            return (defaults ?? {});
+        return resolveComponentStyle(siteData, stylePath, defaults);
+    }, [siteData, stylePath, defaults]);
+    const cssVars = (0, react_1.useMemo)(() => (0, core_1.styleToCssVariables)(styleKind, merged), [styleKind, merged]);
+    return { style: merged, cssVars };
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -18,7 +18,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FilterSidebar = exports.CartDrawer = exports.FloatingContactWidget = exports.CookieConsentBanner = exports.ProductQuickView = exports.TrustBadges = exports.StickyMobileBar = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.CustomerReviews = exports.ProductDetail = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.ResponsiveBaseStyles = void 0;
+exports.Hero = exports.Footer = exports.Header = exports.Navbar = exports.ContactForm = exports.FAQ = exports.Accordion = exports.TestimonialCard = exports.PricingCard = exports.ServiceCard = exports.CustomerReviews = exports.ProductDetail = exports.ProductGrid = exports.ProductCard = exports.List = exports.Box = exports.Section = exports.Grid = exports.Image = exports.Quote = exports.Badge = exports.Paragraph = exports.Heading = exports.Text = exports.Dialog = exports.Card = exports.Button = exports.collectStyleTargetsFromHtml = exports.validateStyleTree = exports.styleToCssVariables = exports.patchStyleByPath = exports.patchElementStyle = exports.STYLE_TYPE_ATTRIBUTE = exports.STYLE_TARGET_ATTRIBUTE = exports.DENEB_STYLE_PATCH_MESSAGE = exports.STYLE_PATCH_MESSAGE = exports.formatResponsiveFontSize = exports.resolveInstallableFont = exports.normalizeFontId = exports.lookupFontDefinition = exports.listFontsByCategory = exports.collectFontIdsFromSiteData = exports.buildGoogleFontsStylesheetUrl = exports.DENEB_GOOGLE_FONT_COUNT = exports.DENEB_FONT_REGISTRY = exports.useDenebFonts = exports.DENEB_FONTS_LINK_ID = exports.FontLoader = exports.DenebComponentStyles = exports.ResponsiveBaseStyles = void 0;
+exports.DENEB_AUTHOR = exports.DENEB_FRAMEWORK_VERSION = exports.DENEB_FRAMEWORK_NAME = exports.FilterSidebar = exports.CartDrawer = exports.FloatingContactWidget = exports.CookieConsentBanner = exports.ProductQuickView = exports.TrustBadges = exports.StickyMobileBar = exports.CategoryPills = exports.AnnouncementBar = exports.HeroSplit = void 0;
 __exportStar(require("./EditableText"), exports);
 __exportStar(require("./EditableImage"), exports);
 __exportStar(require("./EditableList"), exports);
@@ -52,6 +53,34 @@ __exportStar(require("./SiteDataProvider"), exports);
 __exportStar(require("./ThemeStyles"), exports);
 var ResponsiveBaseStyles_1 = require("./ResponsiveBaseStyles");
 Object.defineProperty(exports, "ResponsiveBaseStyles", { enumerable: true, get: function () { return ResponsiveBaseStyles_1.ResponsiveBaseStyles; } });
+var DenebComponentStyles_1 = require("./DenebComponentStyles");
+Object.defineProperty(exports, "DenebComponentStyles", { enumerable: true, get: function () { return DenebComponentStyles_1.DenebComponentStyles; } });
+var FontLoader_1 = require("./fonts/FontLoader");
+Object.defineProperty(exports, "FontLoader", { enumerable: true, get: function () { return FontLoader_1.FontLoader; } });
+Object.defineProperty(exports, "DENEB_FONTS_LINK_ID", { enumerable: true, get: function () { return FontLoader_1.DENEB_FONTS_LINK_ID; } });
+var useDenebFonts_1 = require("./fonts/useDenebFonts");
+Object.defineProperty(exports, "useDenebFonts", { enumerable: true, get: function () { return useDenebFonts_1.useDenebFonts; } });
+__exportStar(require("./hooks/useComponentStyle"), exports);
+var core_1 = require("@deneb-ui/core");
+Object.defineProperty(exports, "DENEB_FONT_REGISTRY", { enumerable: true, get: function () { return core_1.DENEB_FONT_REGISTRY; } });
+Object.defineProperty(exports, "DENEB_GOOGLE_FONT_COUNT", { enumerable: true, get: function () { return core_1.DENEB_GOOGLE_FONT_COUNT; } });
+Object.defineProperty(exports, "buildGoogleFontsStylesheetUrl", { enumerable: true, get: function () { return core_1.buildGoogleFontsStylesheetUrl; } });
+Object.defineProperty(exports, "collectFontIdsFromSiteData", { enumerable: true, get: function () { return core_1.collectFontIdsFromSiteData; } });
+Object.defineProperty(exports, "listFontsByCategory", { enumerable: true, get: function () { return core_1.listFontsByCategory; } });
+Object.defineProperty(exports, "lookupFontDefinition", { enumerable: true, get: function () { return core_1.lookupFontDefinition; } });
+Object.defineProperty(exports, "normalizeFontId", { enumerable: true, get: function () { return core_1.normalizeFontId; } });
+Object.defineProperty(exports, "resolveInstallableFont", { enumerable: true, get: function () { return core_1.resolveInstallableFont; } });
+Object.defineProperty(exports, "formatResponsiveFontSize", { enumerable: true, get: function () { return core_1.formatResponsiveFontSize; } });
+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; } });
+Object.defineProperty(exports, "STYLE_TARGET_ATTRIBUTE", { enumerable: true, get: function () { return core_2.STYLE_TARGET_ATTRIBUTE; } });
+Object.defineProperty(exports, "STYLE_TYPE_ATTRIBUTE", { enumerable: true, get: function () { return core_2.STYLE_TYPE_ATTRIBUTE; } });
+Object.defineProperty(exports, "patchElementStyle", { enumerable: true, get: function () { return core_2.patchElementStyle; } });
+Object.defineProperty(exports, "patchStyleByPath", { enumerable: true, get: function () { return core_2.patchStyleByPath; } });
+Object.defineProperty(exports, "styleToCssVariables", { enumerable: true, get: function () { return core_2.styleToCssVariables; } });
+Object.defineProperty(exports, "validateStyleTree", { enumerable: true, get: function () { return core_2.validateStyleTree; } });
+Object.defineProperty(exports, "collectStyleTargetsFromHtml", { enumerable: true, get: function () { return core_2.collectStyleTargetsFromHtml; } });
 // Smart template components & actions
 __exportStar(require("./utils"), exports);
 __exportStar(require("./core"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,10 +18,12 @@
   },
   "files": [
     "dist",
+    "scripts",
     "README.md"
   ],
   "scripts": {
     "build": "tsc",
+    "postinstall": "node ./scripts/setup-fonts.cjs",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -46,7 +48,9 @@
     "Induranga Kawishwara <https://github.com/Induranga-kawishwara>"
   ],
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "@deneb-ui/core": "^2.0.24"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"

package/scripts/setup-fonts.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ * Runs after `npm install @deneb-ui/ui`.
+ * Walks up to the host Next/React app and self-hosts project fonts.
+ * Skip with DENEB_SKIP_FONTS=1.
+ */
+if (process.env.DENEB_SKIP_FONTS === '1') {
+  process.exit(0);
+}
+
+try {
+  const { installFontsForHostOf } = require('@deneb-ui/core/install-fonts');
+  const result = installFontsForHostOf(__dirname);
+  if (result.skipped) {
+    process.exit(0);
+  }
+  if (result.ok && result.installed.length > 0) {
+    console.log(
+      `[@deneb-ui/ui] Configured ${result.installed.length} font(s): ${result.installed.join(', ')}`,
+    );
+  }
+} catch {
+  // Never fail the host npm install because fonts could not be configured.
+  process.exit(0);
+}