km-card-layout-core 0.1.10 → 0.1.12

package/dist/index.js

@@ -1,9 +1,9 @@
 "use strict";
 /**
- * CardMaster 布局 JSON 渲染核心。
+ * CardMaster 布局 JSON 渲染核心
  *
  * - 平台无关：不依赖 DOM/小程序 API，方便在 Web/小程序/Node 复用。
- * - 职责：将布局 Schema 与业务数据合成为带内联样式的渲染树，外层只需将节点映射到各端组件。
+ * - 职责：将布局 Schema 与业务数据合成可渲染树，外层只需将节点映射到各端组件。
  */
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -20,396 +20,17 @@ 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.buildRenderResult = exports.buildRenderNodes = exports.resolveBindingValue = exports.normalizeLayout = exports.styleObjectToString = exports.addUnit = void 0;
+exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = exports.backgroundChange = void 0;
 __exportStar(require("./interface/index"), exports);
-/** ---------- 常量 ---------- */
-const DEFAULT_CARD_WIDTH = 343; // 默认卡片宽度（像素）
-const DEFAULT_CARD_HEIGHT = 210; // 默认卡片高度（像素）
-const DIMENSION_PROPS = new Set([
-    'width',
-    'height',
-    'top',
-    'right',
-    'bottom',
-    'left',
-    'padding',
-    'paddingTop',
-    'paddingBottom',
-    'paddingLeft',
-    'paddingRight',
-    'margin',
-    'marginTop',
-    'marginBottom',
-    'marginLeft',
-    'marginRight',
-    'fontSize',
-    'lineHeight',
-    'borderRadius',
-    'borderWidth',
-    'letterSpacing',
-    'gap',
-    'rowGap',
-    'columnGap',
-]);
-/** ---------- 基础工具 ---------- */
-/**
- * 安全转 number，非数值或 NaN 返回 undefined。
- */
-const toNumber = (value) => {
-    const num = Number(value);
-    return Number.isFinite(num) ? num : undefined;
-};
-/**
- * camelCase 转 kebab-case（用于内联样式 key）。
- */
-const toKebab = (key) => key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-/**
- * 数字追加单位，非数字原样转字符串。
- * 数字追加单位，非数字原样转字符串。
- */
-const addUnit = (value, unit) => {
-    if (value === undefined || value === null || value === '')
-        return undefined;
-    if (typeof value === 'number') {
-        const ratio = unit === 'rpx' ? 2 : 1;
-        return `${value * ratio}${unit}`;
-    }
-    if (typeof value === 'string') {
-        const parsed = Number(value);
-        if (Number.isFinite(parsed)) {
-            const ratio = unit === 'rpx' ? 2 : 1;
-            return `${parsed * ratio}${unit}`;
-        }
-    }
-    return `${value}`;
-};
-exports.addUnit = addUnit;
-/**
- * 样式对象转内联样式字符串，对需要单位的字段自动补单位。
- */
-const styleObjectToString = (style, unit = 'px') => {
-    if (!style)
-        return '';
-    const pairs = [];
-    Object.keys(style).forEach(key => {
-        const value = style[key];
-        if (value === undefined || value === null || value === '')
-            return;
-        const useUnit = DIMENSION_PROPS.has(key)
-            ? (0, exports.addUnit)(value, unit)
-            : value;
-        if (useUnit === undefined || useUnit === null || useUnit === '')
-            return;
-        pairs.push(`${toKebab(key)}:${useUnit}`);
-    });
-    return pairs.join(';');
-};
-exports.styleObjectToString = styleObjectToString;
-/**
- * 容错 JSON 解析：字符串用 JSON.parse，其他保持原样或返回 null。
- */
-const parseJson = (input) => {
-    if (typeof input !== 'string')
-        return input !== null && input !== void 0 ? input : null;
-    try {
-        return JSON.parse(input);
-    }
-    catch (err) {
-        console.warn('[km-card-layout-core] JSON parse failed', err);
-        return null;
-    }
-};
-const isObject = (val) => Boolean(val) && typeof val === 'object';
-const getAbsLayout = (el) => el.layout && el.layout.mode === 'absolute'
-    ? el.layout
-    : null;
-/** ---------- 布局与数据解析 ---------- */
-/**
- * 归一化布局输入（对象或 JSON 字符串），补齐宽高/容器/children 默认值。
- */
-const normalizeLayout = (layout) => {
-    if (!Array.isArray(layout))
-        return [];
-    return layout
-        .map(item => {
-        var _a, _b;
-        if (!item || typeof item !== 'object')
-            return null;
-        const parsed = item;
-        return {
-            ...parsed,
-            width: (_a = toNumber(parsed.width)) !== null && _a !== void 0 ? _a : DEFAULT_CARD_WIDTH,
-            height: (_b = toNumber(parsed.height)) !== null && _b !== void 0 ? _b : DEFAULT_CARD_HEIGHT,
-            container: parsed.container || { mode: 'absolute' },
-            children: Array.isArray(parsed.children)
-                ? parsed.children
-                : [],
-        };
-    })
-        .filter((v) => Boolean(v));
-};
-exports.normalizeLayout = normalizeLayout;
-/**
- * 将绑定路径拆分为片段，支持点语法与数组下标。
- */
-const pathToSegments = (path) => `${path || ''}`
-    .replace(/\[(\d+)\]/g, '.$1')
-    .split('.')
-    .map(p => p.trim())
-    .filter(Boolean);
-/**
- * 按路径访问对象/数组，缺失时返回 undefined/null。
- */
-const readByPath = (data, path) => {
-    if (path === undefined || path === null || path === '')
-        return data;
-    const segments = pathToSegments(path);
-    let cursor = data;
-    for (let i = 0; i < segments.length; i += 1) {
-        if (!isObject(cursor) && !Array.isArray(cursor))
-            return undefined;
-        const key = segments[i];
-        if (Array.isArray(cursor)) {
-            const idx = Number(key);
-            cursor = Number.isNaN(idx) ? undefined : cursor[idx];
-        }
-        else {
-            cursor = cursor[key];
-        }
-        if (cursor === undefined || cursor === null) {
-            return cursor;
-        }
-    }
-    return cursor;
-};
-/**
- * Resolve element binding against provided data.
- */
-const resolveBindingValue = (binding, rootData, context) => {
-    if (!binding)
-        return undefined;
-    const value = readByPath(rootData, binding);
-    return value === undefined ? undefined : value;
-};
-exports.resolveBindingValue = resolveBindingValue;
-/** ---------- 样式构建 ---------- */
-const buildCardStyle = (layout, unit) => (0, exports.styleObjectToString)({
-    width: (0, exports.addUnit)(layout.width, unit),
-    height: (0, exports.addUnit)(layout.height, unit),
-    color: layout.fontColor,
-    borderRadius: layout.borderRadius !== undefined
-        ? (0, exports.addUnit)(layout.borderRadius, unit)
-        : undefined,
-    padding: layout.padding !== undefined ? (0, exports.addUnit)(layout.padding, unit) : undefined,
-    position: 'relative',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    backgroundColor: 'transparent',
-}, unit);
-const buildBackgroundStyle = (layout, unit) => (0, exports.styleObjectToString)({
-    zIndex: layout.backgroundZIndex,
-    borderRadius: layout.borderRadius !== undefined
-        ? (0, exports.addUnit)(layout.borderRadius, unit)
-        : undefined,
-    width: '100%',
-    height: '100%',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-}, unit);
-/**
- * 生成元素外层样式（绝对/弹性布局），始终返回内联样式字符串。
- */
-const buildWrapperStyle = (el, unit) => {
-    const abs = getAbsLayout(el);
-    if (!abs)
-        return '';
-    return (0, exports.styleObjectToString)({
-        position: 'absolute',
-        left: (0, exports.addUnit)(abs.x, unit),
-        top: (0, exports.addUnit)(abs.y, unit),
-        width: (0, exports.addUnit)(abs.width, unit),
-        height: (0, exports.addUnit)(abs.height, unit),
-        zIndex: abs.zIndex,
-        boxSizing: 'border-box',
-    }, unit);
-};
-const buildPanelContentStyle = (el, unit) => (0, exports.styleObjectToString)({
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-    display: 'block',
-    boxSizing: 'border-box',
-    ...(el.style || {}),
-}, unit);
-const buildTextContentStyle = (el, unit) => {
-    var _a, _b, _c;
-    const textAlign = ((_a = el.style) === null || _a === void 0 ? void 0 : _a.textAlign) || el.align || undefined;
-    const style = {
-        ...(el.style || {}),
-        whiteSpace: 'pre-wrap',
-        wordBreak: 'break-word',
-        lineHeight: ((_b = el.style) === null || _b === void 0 ? void 0 : _b.lineHeight) !== undefined && ((_c = el.style) === null || _c === void 0 ? void 0 : _c.lineHeight) !== null
-            ? el.style.lineHeight
-            : '1.2',
-        display: 'inline-flex',
-        alignItems: 'center',
-    };
-    if (textAlign)
-        style.textAlign = textAlign;
-    return (0, exports.styleObjectToString)(style, unit);
-};
-const buildBaseContentStyle = (el, unit) => (0, exports.styleObjectToString)({
-    ...(el.style || {}),
-    boxSizing: 'border-box',
-}, unit);
-const buildImageContentStyle = (el, unit) => {
-    const style = { ...(el.style || {}) };
-    const borderWidth = Number(style.borderWidth);
-    if (Number.isFinite(borderWidth) && borderWidth > 0) {
-        if (!style.borderStyle)
-            style.borderStyle = 'solid';
-        if (!style.borderColor)
-            style.borderColor = '#000000';
-    }
-    return (0, exports.styleObjectToString)(style, unit);
-};
-const buildTextIcon = (el, unit) => {
-    var _a, _b, _c, _d;
-    const icon = el.icon;
-    if (!icon || icon.enable === false)
-        return undefined;
-    const style = icon.style || 'fill';
-    const baseName = el.key || el.binding || el.id;
-    let name;
-    if (style === 'dot')
-        name = 'round';
-    else if (style === 'line')
-        name = baseName ? `${baseName}-line` : undefined;
-    else
-        name = baseName || undefined;
-    if (!name)
-        return undefined;
-    const size = icon.size !== undefined && icon.size !== null
-        ? icon.size
-        : (_a = el.style) === null || _a === void 0 ? void 0 : _a.fontSize;
-    const gap = icon.gap !== undefined && icon.gap !== null ? icon.gap : 4;
-    const color = (_b = icon.color) !== null && _b !== void 0 ? _b : (typeof ((_c = el.style) === null || _c === void 0 ? void 0 : _c.color) === 'string' ? el.style.color : undefined);
-    return {
-        name: `${name}`,
-        text: `${name}`,
-        size: (0, exports.addUnit)(size, unit),
-        gap: (0, exports.addUnit)(gap, unit),
-        color: color,
-        align: icon.align || 'left',
-        wrapperStyle: (0, exports.styleObjectToString)({
-            display: 'inline-flex',
-            alignItems: 'center',
-            height: ((_d = el.style) === null || _d === void 0 ? void 0 : _d.lineHeight) || 'auto',
-        }, unit),
-    };
-};
-/** ---------- 渲染树构建 ---------- */
-/**
- * 将 children 展开为渲染节点。
- */
-const buildRenderNodes = (children, rootData, unit = 'px', context = {}) => {
-    if (!Array.isArray(children))
-        return [];
-    const nodes = [];
-    children.forEach(el => {
-        if (!el || el.visible === false)
-            return;
-        const node = buildNode(el, rootData, unit, context);
-        if (node)
-            nodes.push(node);
-    });
-    return nodes;
-};
-exports.buildRenderNodes = buildRenderNodes;
-/**
- * 构建单个渲染节点（layout-panel 递归处理子元素）。
- */
-const buildNode = (el, rootData, unit, context) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (!el || el.visible === false)
-        return null;
-    const wrapperStyle = buildWrapperStyle(el, unit);
-    if (el.type === 'layout-panel') {
-        return {
-            id: el.id,
-            type: el.type,
-            visible: el.visible,
-            wrapperStyle,
-            contentStyle: buildPanelContentStyle(el, unit),
-            children: (0, exports.buildRenderNodes)(el.children || [], rootData, unit, context),
-        };
-    }
-    const baseStyle = buildBaseContentStyle(el, unit);
-    if (el.type === 'text') {
-        const value = (_b = (_a = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _a !== void 0 ? _a : el.defaultValue) !== null && _b !== void 0 ? _b : '';
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildTextContentStyle(el, unit),
-            text: `${value}`,
-            visible: el.visible,
-            icon: buildTextIcon(el, unit),
-        };
-    }
-    if (el.type === 'image') {
-        const src = (_e = (_d = (_c = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _c !== void 0 ? _c : el.defaultUrl) !== null && _d !== void 0 ? _d : el.defaultValue) !== null && _e !== void 0 ? _e : '';
-        const mode = el.fit === 'contain' ? 'aspectFit' : 'aspectFill';
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: buildImageContentStyle(el, unit),
-            src,
-            mode,
-            visible: el.visible,
-        };
-    }
-    if (el.type === 'icon') {
-        const name = (_h = (_g = (_f = (0, exports.resolveBindingValue)(el.binding, rootData, context)) !== null && _f !== void 0 ? _f : el.name) !== null && _g !== void 0 ? _g : el.defaultValue) !== null && _h !== void 0 ? _h : '';
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: baseStyle,
-            name: `${name}`,
-            text: `${name}`,
-            visible: el.visible,
-        };
-    }
-    if (el.type === 'custom') {
-        return {
-            id: el.id,
-            type: el.type,
-            wrapperStyle,
-            contentStyle: baseStyle,
-            visible: el.visible,
-        };
-    }
-    return null;
-};
-/**
- * 主入口：合并布局 Schema 与数据，生成供前端使用的渲染结果。
- */
-const buildRenderResult = (layoutInput, dataInput, unit = 'px') => {
-    const layouts = (0, exports.normalizeLayout)(layoutInput);
-    return layouts.map(layout => {
-        const cardStyle = buildCardStyle(layout, unit);
-        const bgStyle = buildBackgroundStyle(layout, unit);
-        const renderTree = (0, exports.buildRenderNodes)(layout.children || [], dataInput || {}, unit);
-        return {
-            renderTree,
-            cardStyle,
-            backgroundImage: layout.backgroundImage || '',
-            backgroundStyle: bgStyle,
-        };
-    });
-};
-exports.buildRenderResult = buildRenderResult;
-__exportStar(require("./utils"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./layout"), exports);
+__exportStar(require("./data"), exports);
+__exportStar(require("./bindings"), exports);
+var changeBackground_1 = require("./ops/changeBackground");
+Object.defineProperty(exports, "backgroundChange", { enumerable: true, get: function () { return changeBackground_1.backgroundChange; } });
+Object.defineProperty(exports, "DEFAULT_DECOR_COLOR", { enumerable: true, get: function () { return changeBackground_1.DEFAULT_DECOR_COLOR; } });
+Object.defineProperty(exports, "resolveSpecialStyle", { enumerable: true, get: function () { return changeBackground_1.resolveSpecialStyle; } });
+Object.defineProperty(exports, "applySpecialStyle", { enumerable: true, get: function () { return changeBackground_1.applySpecialStyle; } });
+Object.defineProperty(exports, "applyBackground", { enumerable: true, get: function () { return changeBackground_1.applyBackground; } });
+Object.defineProperty(exports, "updateElementsStyle", { enumerable: true, get: function () { return changeBackground_1.updateElementsStyle; } });
+__exportStar(require("./render/builder"), exports);

package/dist/layout.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areChildrenEqual = exports.normalizeLayout = exports.parseLayout = exports.normalizeId = exports.collectBindings = exports.sanitizeLayout = exports.sanitizeElement = exports.getAbsLayout = exports.roundToInt = void 0;
+const helpers_1 = require("./helpers");
+const DEFAULT_CARD_WIDTH = 343;
+const DEFAULT_CARD_HEIGHT = 210;
+const roundToInt = (value) => Number.isFinite(value) ? Math.round(value) : value;
+exports.roundToInt = roundToInt;
+const getAbsLayout = (el) => el.layout && el.layout.mode === 'absolute'
+    ? el.layout
+    : null;
+exports.getAbsLayout = getAbsLayout;
+const roundAbsLayout = (layout) => ({
+    ...layout,
+    x: (0, exports.roundToInt)(layout.x),
+    y: (0, exports.roundToInt)(layout.y),
+    width: (0, exports.roundToInt)(layout.width),
+    height: (0, exports.roundToInt)(layout.height),
+    zIndex: layout.zIndex !== undefined ? (0, exports.roundToInt)(layout.zIndex) : layout.zIndex,
+});
+const sanitizeElement = (el) => {
+    const layout = (0, exports.getAbsLayout)(el);
+    const base = layout ? { ...el, layout: roundAbsLayout(layout) } : el;
+    if (el.type === 'layout-panel' && el.children) {
+        return {
+            ...base,
+            children: el.children.map(child => (0, exports.sanitizeElement)(child)),
+        };
+    }
+    return base;
+};
+exports.sanitizeElement = sanitizeElement;
+const sanitizeLayout = (layout) => ({
+    ...layout,
+    width: (0, exports.roundToInt)(layout.width),
+    height: (0, exports.roundToInt)(layout.height),
+    backgroundZIndex: layout.backgroundZIndex !== undefined
+        ? (0, exports.roundToInt)(layout.backgroundZIndex)
+        : layout.backgroundZIndex,
+    children: (layout.children || []).map(child => (0, exports.sanitizeElement)(child)),
+});
+exports.sanitizeLayout = sanitizeLayout;
+const collectBindings = (elements = []) => {
+    const result = [];
+    elements.forEach(el => {
+        if (el.binding)
+            result.push(el.binding);
+        if (el.type === 'layout-panel' && el.children) {
+            result.push(...(0, exports.collectBindings)(el.children));
+        }
+    });
+    return Array.from(new Set(result));
+};
+exports.collectBindings = collectBindings;
+const normalizeId = (id) => {
+    if (id === undefined || id === null)
+        return undefined;
+    const num = Number(id);
+    return Number.isFinite(num) ? num : id;
+};
+exports.normalizeId = normalizeId;
+const safeParseJson = (input) => {
+    try {
+        return JSON.parse(input);
+    }
+    catch (err) {
+        console.warn('[km-card-layout-core] parseLayout failed', err);
+        return null;
+    }
+};
+const parseSingleLayout = (value) => {
+    if (!value)
+        return null;
+    if (Array.isArray(value))
+        return parseSingleLayout(value[0]);
+    if (typeof value === 'string') {
+        return parseSingleLayout(safeParseJson(value));
+    }
+    if ((0, helpers_1.isObject)(value)) {
+        const content = value.content;
+        if (content !== undefined) {
+            const nested = parseSingleLayout(content);
+            if (nested)
+                return nested;
+        }
+        return (0, exports.sanitizeLayout)(value);
+    }
+    return null;
+};
+const parseLayout = (input) => parseSingleLayout(input);
+exports.parseLayout = parseLayout;
+const normalizeLayout = (layout) => {
+    if (!Array.isArray(layout))
+        return [];
+    return layout
+        .map(item => {
+        var _a, _b;
+        if (!item || typeof item !== 'object')
+            return null;
+        const parsed = item;
+        return {
+            ...parsed,
+            width: (_a = (0, helpers_1.toNumber)(parsed.width)) !== null && _a !== void 0 ? _a : DEFAULT_CARD_WIDTH,
+            height: (_b = (0, helpers_1.toNumber)(parsed.height)) !== null && _b !== void 0 ? _b : DEFAULT_CARD_HEIGHT,
+            container: parsed.container || { mode: 'absolute' },
+            children: Array.isArray(parsed.children)
+                ? parsed.children
+                : [],
+        };
+    })
+        .filter((value) => Boolean(value));
+};
+exports.normalizeLayout = normalizeLayout;
+const areChildrenEqual = (a, b) => {
+    return JSON.stringify(a === null || a === void 0 ? void 0 : a.children) === JSON.stringify(b === null || b === void 0 ? void 0 : b.children);
+};
+exports.areChildrenEqual = areChildrenEqual;

package/dist/ops/changeBackground.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateElementsStyle = exports.applyBackground = exports.applySpecialStyle = exports.resolveSpecialStyle = exports.DEFAULT_DECOR_COLOR = void 0;
+exports.backgroundChange = backgroundChange;
+const toNameArray = (name) => {
+    if (Array.isArray(name))
+        return name.filter(Boolean);
+    if (!name)
+        return [];
+    return `${name}`
+        .split(',')
+        .map(n => n.trim())
+        .filter(Boolean);
+};
+function backgroundChange(bg, layout) {
+    const applySpecialColor = (el) => {
+        const extras = bg.fontColorExtra || [];
+        if (!extras.length)
+            return el;
+        const keys = [];
+        if (el.binding)
+            keys.push(String(el.binding));
+        if (el.id)
+            keys.push(String(el.id));
+        if (el.type === 'icon')
+            keys.push('icon');
+        if (el.type === 'custom')
+            keys.push('decor');
+        const matched = extras.find(sc => toNameArray(sc.name).some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n))));
+        if (!matched)
+            return el;
+        const baseStyle = { ...(el.style || {}) };
+        if (el.type === 'custom') {
+            return { ...el, style: { ...baseStyle, backgroundColor: matched.color } };
+        }
+        return { ...el, style: { ...baseStyle, color: matched.color } };
+    };
+    const traverse = (children = []) => children.map(el => {
+        if (!el)
+            return el;
+        if (el.type === 'layout-panel') {
+            return {
+                ...el,
+                children: traverse(el.children || []),
+            };
+        }
+        return applySpecialColor(el);
+    });
+    return {
+        ...layout,
+        backgroundImage: bg.imgUrl,
+        fontColor: bg.fontColor || layout.fontColor,
+        children: traverse(layout.children || []),
+    };
+}
+exports.DEFAULT_DECOR_COLOR = '#94a3b8';
+const resolveSpecialStyle = (element, background) => {
+    var _a;
+    if (!background)
+        return {};
+    const keys = [];
+    if (element.binding)
+        keys.push(String(element.binding));
+    if (element.id)
+        keys.push(String(element.id));
+    if (element.type === 'icon')
+        keys.push('icon');
+    if (element.type === 'custom')
+        keys.push('decor');
+    const matched = (_a = background.specialColors) === null || _a === void 0 ? void 0 : _a.find(sc => {
+        const names = toNameArray(sc.name);
+        return names.some(n => keys.some(k => k === null || k === void 0 ? void 0 : k.startsWith(n)));
+    });
+    if (!matched)
+        return {};
+    if (element.type === 'custom') {
+        return { backgroundColor: matched.color };
+    }
+    return { color: matched.color };
+};
+exports.resolveSpecialStyle = resolveSpecialStyle;
+const applySpecialStyle = (el, background = null, options = {}) => {
+    const specialStyle = (0, exports.resolveSpecialStyle)(el, background);
+    const baseStyle = { ...(el.style || {}) };
+    const isCustom = el.type === 'custom';
+    const hasExplicit = isCustom
+        ? Boolean(baseStyle.backgroundColor || baseStyle.background)
+        : baseStyle.color !== undefined && baseStyle.color !== null;
+    const overrideExisting = options.overrideExisting === true;
+    const hasSpecial = Object.keys(specialStyle).length > 0;
+    const defaultDecorColor = options.defaultDecorColor || exports.DEFAULT_DECOR_COLOR;
+    if (hasSpecial) {
+        if (hasExplicit && !overrideExisting)
+            return el;
+        return { ...el, style: { ...baseStyle, ...specialStyle } };
+    }
+    if (overrideExisting && hasExplicit) {
+        const nextStyle = { ...baseStyle };
+        if (isCustom) {
+            nextStyle.backgroundColor = (background === null || background === void 0 ? void 0 : background.mainColor) || defaultDecorColor;
+        }
+        else {
+            delete nextStyle.color;
+        }
+        return { ...el, style: nextStyle };
+    }
+    return el;
+};
+exports.applySpecialStyle = applySpecialStyle;
+const applyBackground = (layout, background, _options = {}) => {
+    var _a;
+    const bgId = Number(background.id);
+    const payload = {
+        id: Number.isFinite(bgId) ? bgId : 0,
+        name: background.name,
+        imgUrl: background.imageUrl,
+        fontColor: background.mainColor,
+        fontColorExtra: ((_a = background.specialColors) === null || _a === void 0 ? void 0 : _a.map(sc => ({
+            name: sc.name,
+            color: sc.color,
+        }))) || [],
+    };
+    return backgroundChange(payload, layout);
+};
+exports.applyBackground = applyBackground;
+const updateElementsStyle = (layout, targetIds, updates) => {
+    const targets = new Set(targetIds);
+    return {
+        ...layout,
+        children: layout.children.map(el => targets.has(el.id)
+            ? { ...el, style: { ...(el.style || {}), ...updates } }
+            : el),
+    };
+};
+exports.updateElementsStyle = updateElementsStyle;