@deneb-ui/core 2.0.24

package/README.md

@@ -0,0 +1,5 @@
+# @deneb-ui/core
+
+Headless style engine for the Deneb / Fivora real-time visual editing ecosystem.
+
+Provides style schemas, CSS variable generators, instant DOM patching (`FIVORA_PREVIEW_STYLE_PATCH`), and validation utilities. Framework-agnostic — consumed by `@deneb-ui/ui` and the template preview focus bridge.

package/dist/engine/cssVariables.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonStyleProperties, CardStyleProperties, GridStyleProperties, SectionStyleProperties, TextStyleProperties } from '../types/styles';
+export declare function formatUnit(value: string | number | undefined): string | undefined;
+export declare function textStyleToCssVariables(style: TextStyleProperties): Record<string, string>;
+export declare function cardStyleToCssVariables(style: CardStyleProperties): Record<string, string>;
+export declare function buttonStyleToCssVariables(style: ButtonStyleProperties): Record<string, string>;
+export declare function gridStyleToCssVariables(style: GridStyleProperties): Record<string, string>;
+export declare function sectionStyleToCssVariables(style: SectionStyleProperties): Record<string, string>;
+export declare function styleToCssVariables(styleKind: 'text' | 'card' | 'button' | 'grid' | 'section', style: Record<string, unknown>): Record<string, string>;

package/dist/engine/cssVariables.js

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatUnit = formatUnit;
+exports.textStyleToCssVariables = textStyleToCssVariables;
+exports.cardStyleToCssVariables = cardStyleToCssVariables;
+exports.buttonStyleToCssVariables = buttonStyleToCssVariables;
+exports.gridStyleToCssVariables = gridStyleToCssVariables;
+exports.sectionStyleToCssVariables = sectionStyleToCssVariables;
+exports.styleToCssVariables = styleToCssVariables;
+const clamp_1 = require("../fonts/clamp");
+const resolve_1 = require("../fonts/resolve");
+const tokenResolver_1 = require("./tokenResolver");
+function formatUnit(value) {
+    if (value === undefined || value === '' || value === null)
+        return undefined;
+    if (typeof value === 'number')
+        return `${value}px`;
+    return /^\d+$/.test(value) ? `${value}px` : value;
+}
+function marginVars(style, prefix) {
+    const vars = {};
+    const top = style.marginTop ?? style.spacingTop;
+    const bottom = style.marginBottom ?? style.spacingBottom;
+    const left = style.marginLeft ?? style.spacingLeft;
+    const right = style.marginRight ?? style.spacingRight;
+    if (top !== undefined)
+        vars[`${prefix}-margin-top`] = formatUnit(top);
+    if (bottom !== undefined)
+        vars[`${prefix}-margin-bottom`] = formatUnit(bottom);
+    if (left !== undefined)
+        vars[`${prefix}-margin-left`] = formatUnit(left);
+    if (right !== undefined)
+        vars[`${prefix}-margin-right`] = formatUnit(right);
+    return vars;
+}
+function textStyleToCssVariables(style) {
+    const vars = {
+        ...marginVars(style, '--deneb'),
+    };
+    if (style.fontFamily) {
+        vars['--deneb-font-family'] = (0, resolve_1.resolveFontFamily)(style.fontFamily);
+    }
+    if (style.fontSize !== undefined) {
+        vars['--deneb-font-size'] = (0, clamp_1.formatFontSize)(style.fontSize, {
+            responsive: style.responsiveFontSize === true,
+        });
+    }
+    if (style.fontWeight !== undefined) {
+        vars['--deneb-font-weight'] = String(style.fontWeight);
+    }
+    if (style.lineHeight !== undefined) {
+        vars['--deneb-line-height'] =
+            typeof style.lineHeight === 'number'
+                ? String(style.lineHeight)
+                : String(style.lineHeight);
+    }
+    if (style.letterSpacing) {
+        vars['--deneb-letter-spacing'] = style.letterSpacing;
+    }
+    if (style.color) {
+        vars['--deneb-color'] = (0, tokenResolver_1.resolveThemeToken)(style.color);
+    }
+    if (style.textAlign) {
+        vars['--deneb-text-align'] = style.textAlign;
+    }
+    if (style.textTransform) {
+        vars['--deneb-text-transform'] = style.textTransform;
+    }
+    return vars;
+}
+function cardStyleToCssVariables(style) {
+    const vars = {
+        ...marginVars(style, '--deneb-card'),
+    };
+    if (style.width !== undefined)
+        vars['--deneb-card-width'] = formatUnit(style.width);
+    if (style.minWidth !== undefined)
+        vars['--deneb-card-min-width'] = formatUnit(style.minWidth);
+    if (style.maxWidth !== undefined)
+        vars['--deneb-card-max-width'] = formatUnit(style.maxWidth);
+    if (style.height !== undefined)
+        vars['--deneb-card-height'] = formatUnit(style.height);
+    if (style.aspectRatio)
+        vars['--deneb-card-aspect-ratio'] = style.aspectRatio;
+    if (style.paddingTop !== undefined)
+        vars['--deneb-card-pt'] = formatUnit(style.paddingTop);
+    if (style.paddingBottom !== undefined)
+        vars['--deneb-card-pb'] = formatUnit(style.paddingBottom);
+    if (style.paddingLeft !== undefined)
+        vars['--deneb-card-pl'] = formatUnit(style.paddingLeft);
+    if (style.paddingRight !== undefined)
+        vars['--deneb-card-pr'] = formatUnit(style.paddingRight);
+    if (style.borderRadius !== undefined)
+        vars['--deneb-card-radius'] = formatUnit(style.borderRadius);
+    if (style.borderWidth !== undefined)
+        vars['--deneb-card-border-w'] = formatUnit(style.borderWidth);
+    if (style.borderStyle)
+        vars['--deneb-card-border-s'] = style.borderStyle;
+    if (style.borderColor)
+        vars['--deneb-card-border-c'] = style.borderColor;
+    if (style.backgroundColor)
+        vars['--deneb-card-bg'] = (0, tokenResolver_1.resolveThemeToken)(style.backgroundColor);
+    if (style.backgroundGradient)
+        vars['--deneb-card-bg-gradient'] = style.backgroundGradient;
+    if (style.boxShadow)
+        vars['--deneb-card-shadow'] = (0, tokenResolver_1.resolveShadowPreset)(style.boxShadow);
+    if (style.backdropBlur !== undefined)
+        vars['--deneb-card-blur'] = formatUnit(style.backdropBlur);
+    if (style.gap !== undefined)
+        vars['--deneb-card-gap'] = formatUnit(style.gap);
+    return vars;
+}
+function buttonStyleToCssVariables(style) {
+    const vars = {
+        ...marginVars(style, '--deneb-btn'),
+    };
+    if (style.borderRadius !== undefined)
+        vars['--deneb-btn-radius'] = formatUnit(style.borderRadius);
+    if (style.paddingX !== undefined)
+        vars['--deneb-btn-px'] = formatUnit(style.paddingX);
+    if (style.paddingY !== undefined)
+        vars['--deneb-btn-py'] = formatUnit(style.paddingY);
+    if (style.backgroundColor)
+        vars['--deneb-btn-bg'] = (0, tokenResolver_1.resolveThemeToken)(style.backgroundColor);
+    if (style.textColor)
+        vars['--deneb-btn-color'] = (0, tokenResolver_1.resolveThemeToken)(style.textColor);
+    if (style.borderColor)
+        vars['--deneb-btn-border-c'] = style.borderColor;
+    if (style.hoverBackgroundColor)
+        vars['--deneb-btn-hover-bg'] = style.hoverBackgroundColor;
+    if (style.hoverTextColor)
+        vars['--deneb-btn-hover-color'] = style.hoverTextColor;
+    return vars;
+}
+function gridStyleToCssVariables(style) {
+    const vars = {};
+    if (style.columns !== undefined)
+        vars['--deneb-grid-cols'] = String(style.columns);
+    if (style.minCardWidth)
+        vars['--deneb-grid-min-card'] = style.minCardWidth;
+    if (style.gapX !== undefined)
+        vars['--deneb-grid-gap-x'] = formatUnit(style.gapX);
+    if (style.gapY !== undefined)
+        vars['--deneb-grid-gap-y'] = formatUnit(style.gapY);
+    if (style.equalHeight !== undefined) {
+        vars['--deneb-grid-equal-height'] = style.equalHeight ? 'stretch' : 'start';
+    }
+    return vars;
+}
+function sectionStyleToCssVariables(style) {
+    const vars = {};
+    if (style.paddingTop !== undefined)
+        vars['--deneb-section-pt'] = formatUnit(style.paddingTop);
+    if (style.paddingBottom !== undefined)
+        vars['--deneb-section-pb'] = formatUnit(style.paddingBottom);
+    if (style.paddingX !== undefined)
+        vars['--deneb-section-px'] = formatUnit(style.paddingX);
+    if (style.maxWidth)
+        vars['--deneb-section-max-w'] = style.maxWidth;
+    if (style.backgroundColor)
+        vars['--deneb-section-bg'] = (0, tokenResolver_1.resolveThemeToken)(style.backgroundColor);
+    if (style.backgroundImage)
+        vars['--deneb-section-bg-image'] = style.backgroundImage;
+    if (style.backgroundOverlayColor)
+        vars['--deneb-section-overlay'] = style.backgroundOverlayColor;
+    if (style.backgroundOverlayOpacity !== undefined) {
+        vars['--deneb-section-overlay-opacity'] = String(style.backgroundOverlayOpacity);
+    }
+    return vars;
+}
+function styleToCssVariables(styleKind, style) {
+    switch (styleKind) {
+        case 'text':
+            return textStyleToCssVariables(style);
+        case 'card':
+            return cardStyleToCssVariables(style);
+        case 'button':
+            return buttonStyleToCssVariables(style);
+        case 'grid':
+            return gridStyleToCssVariables(style);
+        case 'section':
+            return sectionStyleToCssVariables(style);
+        default:
+            return {};
+    }
+}

package/dist/engine/deepMerge.d.ts

@@ -0,0 +1,2 @@
+export declare function isPlainObject(value: unknown): value is Record<string, unknown>;
+export declare function deepMerge<T extends Record<string, unknown>>(base: T, patch: Record<string, unknown>): T;

package/dist/engine/deepMerge.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isPlainObject = isPlainObject;
+exports.deepMerge = deepMerge;
+function isPlainObject(value) {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+function deepMerge(base, patch) {
+    const next = { ...base };
+    for (const [key, value] of Object.entries(patch)) {
+        if (isPlainObject(value) && isPlainObject(next[key])) {
+            next[key] = deepMerge(next[key], value);
+        }
+        else {
+            next[key] = value;
+        }
+    }
+    return next;
+}

package/dist/engine/domPatcher.d.ts

@@ -0,0 +1,6 @@
+import type { StyleKind } from '../types/styles';
+export declare function getLiveStyleCache(): Map<string, Record<string, unknown>>;
+export declare function applyCssVariablesToElement(element: HTMLElement, cssVars: Record<string, string>): void;
+export declare function findStyleTargetElement(targetPath: string, styleType?: StyleKind): HTMLElement | null;
+export declare function patchElementStyle(element: HTMLElement, styleKind: StyleKind, updates: Record<string, unknown>): void;
+export declare function patchStyleByPath(targetPath: string, styleKind: StyleKind, updates: Record<string, unknown>): boolean;

package/dist/engine/domPatcher.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLiveStyleCache = getLiveStyleCache;
+exports.applyCssVariablesToElement = applyCssVariablesToElement;
+exports.findStyleTargetElement = findStyleTargetElement;
+exports.patchElementStyle = patchElementStyle;
+exports.patchStyleByPath = patchStyleByPath;
+const markers_1 = require("../types/markers");
+const deepMerge_1 = require("./deepMerge");
+const cssVariables_1 = require("./cssVariables");
+const liveStyleCache = new Map();
+function getLiveStyleCache() {
+    return liveStyleCache;
+}
+function applyCssVariablesToElement(element, cssVars) {
+    for (const [varName, varVal] of Object.entries(cssVars)) {
+        if (varVal) {
+            element.style.setProperty(varName, varVal);
+        }
+        else {
+            element.style.removeProperty(varName);
+        }
+    }
+}
+function findStyleTargetElement(targetPath, styleType) {
+    if (typeof document === 'undefined' || !targetPath)
+        return null;
+    for (const selector of (0, markers_1.buildStyleFallbackSelectors)(targetPath, styleType)) {
+        const match = document.querySelector(selector);
+        if (match)
+            return match;
+    }
+    return null;
+}
+function patchElementStyle(element, styleKind, updates) {
+    const targetPath = element.getAttribute(markers_1.STYLE_TARGET_ATTRIBUTE) ?? '';
+    const cacheKey = targetPath || element.getAttribute('data-preview-field-path') || '';
+    const previous = cacheKey ? liveStyleCache.get(cacheKey) ?? {} : {};
+    const merged = (0, deepMerge_1.deepMerge)(previous, updates);
+    if (cacheKey)
+        liveStyleCache.set(cacheKey, merged);
+    const cssVars = (0, cssVariables_1.styleToCssVariables)(styleKind, merged);
+    applyCssVariablesToElement(element, cssVars);
+    if (!element.getAttribute(markers_1.STYLE_TYPE_ATTRIBUTE)) {
+        element.setAttribute(markers_1.STYLE_TYPE_ATTRIBUTE, styleKind);
+    }
+}
+function patchStyleByPath(targetPath, styleKind, updates) {
+    const element = findStyleTargetElement(targetPath, styleKind);
+    if (!element)
+        return false;
+    patchElementStyle(element, styleKind, updates);
+    return true;
+}

package/dist/engine/tokenResolver.d.ts

@@ -0,0 +1,3 @@
+export { resolveFontFamily } from '../fonts/resolve';
+export declare function resolveShadowPreset(value: string | undefined): string | undefined;
+export declare function resolveThemeToken(value: string | undefined): string | undefined;

package/dist/engine/tokenResolver.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveFontFamily = void 0;
+exports.resolveShadowPreset = resolveShadowPreset;
+exports.resolveThemeToken = resolveThemeToken;
+var resolve_1 = require("../fonts/resolve");
+Object.defineProperty(exports, "resolveFontFamily", { enumerable: true, get: function () { return resolve_1.resolveFontFamily; } });
+const SHADOW_PRESETS = {
+    none: 'none',
+    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
+    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+};
+function resolveShadowPreset(value) {
+    if (!value)
+        return undefined;
+    return SHADOW_PRESETS[value] ?? value;
+}
+function resolveThemeToken(value) {
+    if (!value)
+        return undefined;
+    if (value.startsWith('var('))
+        return value;
+    const themeMap = {
+        primary: 'var(--brand-color, #2563eb)',
+        secondary: 'var(--brand-secondary, #0f172a)',
+        surface: 'var(--surface-color, #ffffff)',
+        background: 'var(--page-bg, #f8fafc)',
+        heading: 'var(--heading-color, #0f172a)',
+        muted: 'var(--muted-color, #64748b)',
+    };
+    return themeMap[value] ?? value;
+}

package/dist/fonts/clamp.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Converts a px/rem font size into a responsive clamp() for storefront viewports.
+ * Example: 48px → clamp(2.25rem, 1.5rem + 2.5vw, 3rem)
+ */
+export declare function formatResponsiveFontSize(value: string | number): string | undefined;
+export declare function formatFontSize(value: string | number | undefined, options?: {
+    responsive?: boolean;
+}): string | undefined;

package/dist/fonts/clamp.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatResponsiveFontSize = formatResponsiveFontSize;
+exports.formatFontSize = formatFontSize;
+/**
+ * Converts a px/rem font size into a responsive clamp() for storefront viewports.
+ * Example: 48px → clamp(2.25rem, 1.5rem + 2.5vw, 3rem)
+ */
+function formatResponsiveFontSize(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    let px;
+    if (typeof value === 'number') {
+        px = value;
+    }
+    else if (/^\d+(\.\d+)?px$/i.test(value.trim())) {
+        px = parseFloat(value);
+    }
+    else if (/^\d+(\.\d+)?rem$/i.test(value.trim())) {
+        px = parseFloat(value) * 16;
+    }
+    else if (/^\d+$/.test(value.trim())) {
+        px = parseFloat(value);
+    }
+    else {
+        return value;
+    }
+    if (!Number.isFinite(px) || px <= 0)
+        return undefined;
+    const preferredRem = px / 16;
+    const minRem = Math.max(preferredRem * 0.72, 0.75);
+    const maxRem = preferredRem * 1.15;
+    const vwFactor = Math.min(Math.max(preferredRem * 0.08, 0.5), 3.5);
+    return `clamp(${minRem.toFixed(3)}rem, ${(preferredRem * 0.55).toFixed(3)}rem + ${vwFactor.toFixed(2)}vw, ${maxRem.toFixed(3)}rem)`;
+}
+function formatFontSize(value, options) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    if (options?.responsive) {
+        const clamped = formatResponsiveFontSize(value);
+        if (clamped)
+            return clamped;
+    }
+    if (typeof value === 'number')
+        return `${value}px`;
+    return /^\d+$/.test(value) ? `${value}px` : value;
+}

package/dist/fonts/google-url.d.ts

@@ -0,0 +1 @@
+export declare function buildGoogleFontsStylesheetUrl(fontIds: string[]): string | null;

package/dist/fonts/google-url.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildGoogleFontsStylesheetUrl = buildGoogleFontsStylesheetUrl;
+const registry_1 = require("./registry");
+const resolve_1 = require("./resolve");
+function buildFamilyParam(font) {
+    if (!font.googleQuery)
+        return null;
+    const weights = font.weights.length > 0 ? font.weights : [400];
+    const unique = Array.from(new Set(weights)).sort((a, b) => a - b);
+    if (font.italic) {
+        const pairs = unique.flatMap((w) => [`0,${w}`, `1,${w}`]);
+        return `family=${font.googleQuery}:ital,wght@${pairs.join(';')}`;
+    }
+    if (font.variable || unique.length > 4) {
+        const min = unique[0];
+        const max = unique[unique.length - 1];
+        return `family=${font.googleQuery}:wght@${min}..${max}`;
+    }
+    return `family=${font.googleQuery}:wght@${unique.join(';')}`;
+}
+function buildGoogleFontsStylesheetUrl(fontIds) {
+    const params = [];
+    const seen = new Set();
+    for (const rawId of fontIds) {
+        const font = registry_1.DENEB_FONT_BY_ID.get(rawId) ?? (0, resolve_1.lookupFontDefinition)(rawId);
+        if (!font || !font.googleFonts || !font.googleQuery)
+            continue;
+        const installId = font.substituteId && !font.fontsourcePackage ? font.substituteId : font.id;
+        const installFont = registry_1.DENEB_FONT_BY_ID.get(installId) ?? font;
+        if (seen.has(installFont.id))
+            continue;
+        seen.add(installFont.id);
+        const param = buildFamilyParam(installFont);
+        if (param)
+            params.push(param);
+    }
+    if (params.length === 0)
+        return null;
+    return `https://fonts.googleapis.com/css2?${params.join('&')}&display=swap`;
+}

package/dist/fonts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './registry';
+export * from './resolve';
+export * from './clamp';
+export * from './google-url';

package/dist/fonts/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./types"), exports);
+__exportStar(require("./registry"), exports);
+__exportStar(require("./resolve"), exports);
+__exportStar(require("./clamp"), exports);
+__exportStar(require("./google-url"), exports);

package/dist/fonts/installProject.d.ts

@@ -0,0 +1,25 @@
+import type { DenebFontDefinition } from './types';
+export declare const FONTS_MANIFEST_REL = ".deneb/fonts.json";
+export declare const FONTS_CSS_REL = "src/fonts/deneb-fonts.css";
+export declare const FONTS_CSS_IMPORT = "./fonts/deneb-fonts.css";
+export interface InstallProjectFontsOptions {
+    projectDir: string;
+    fontIds?: string[];
+    all?: boolean;
+    quiet?: boolean;
+}
+export interface InstallProjectFontsResult {
+    ok: boolean;
+    skipped?: string;
+    installed: string[];
+    packages: string[];
+    cssPath?: string;
+    manifestPath?: string;
+    layoutPatched?: boolean;
+    warnings: string[];
+}
+export declare function findSiteDataPath(projectDir: string): string | null;
+export declare function findHostProject(startDir: string): string | null;
+export declare function generateFontsCss(fonts: DenebFontDefinition[]): string;
+export declare function installProjectFonts(options: InstallProjectFontsOptions): InstallProjectFontsResult;
+export declare function installFontsForHostOf(packageDir: string): InstallProjectFontsResult;