@yaoxiu/marketing-dsl 2.3.0 → 2.5.0

package/README.md

@@ -141,11 +141,26 @@ unsubscribe();
   }],
   countdownEndTimes: [], // 有倒计时时运行时会自己起定时器
   countdownPrecision: 's',
+  css: '',              // 要注入的 CSS 文本（keyframes + hover 规则），没有动画时是空串
+  rootClassName: 'dsl-renderer dsl-r3', // 根容器类名，后半截是这份物料的作用域前缀
 }
 ```
 
 框架壳照着 layer 的结构套四层 div 即可，**不需要自带任何 CSS**，基础样式已经写进行内样式了。
 
+### 动画与 hover：唯一需要一段真 CSS 的地方
+
+`@keyframes` 和 `:hover` 行内表达不了，所以渲染树多带两个字段。框架壳的义务只有两条：
+根容器的 class 用 `tree.rootClassName`（不要写死 `dsl-renderer`），`tree.css` 非空时把它原样塞进
+一个 `<style>`、随变化更新、销毁时移除。**壳里不做任何 CSS 生成或判断**。
+
+- `animate` 落的是**行内** `animation` 简写（节点、`stage`、`stage.maskAnimate`、`stage.closeButton` 都支持），
+  只有 keyframes 定义与 hover 规则进 `tree.css`
+- keyframes 名带作用域前缀（`dsl-kf-{uid}-{name}`），同一页面上多份物料不会互相覆盖
+- `tree.css` 末尾恒带 `prefers-reduced-motion` 兜底：系统开了「减少动态效果」就全部静止
+- CSS 文本是字符串拼接，所以每个值都过 `sanitizeCssValue`——含 `{ } < > ; @`、`/*` 或反斜杠的
+  **整条声明**直接丢弃（行内那条路径不需要，框架自己会转义）
+
 ### 框架壳必须遵守的一条契约
 
 节点有 `onClick` 时，挂事件要**阻止冒泡**。

package/dist/{chunk-DTHKC5AL.js → chunk-DT3ZINDI.js}

@@ -440,6 +440,11 @@ function isLength(value) {
   if (/^calc\([^;{}]*\)$/.test(trimmed)) return true;
   return LENGTH_RE.test(trimmed);
 }
+function clampZIndex(value) {
+  const num = typeof value === "number" ? value : parseFloat(String(value));
+  if (!isFinite(num)) return 0;
+  return Math.min(10, Math.max(0, Math.round(num)));
+}
 var STYLE_MAP = {
   // 文字
   color: ["color", String],
@@ -492,6 +497,26 @@ var STYLE_MAP = {
   minHeight: ["minHeight", px],
   maxWidth: ["maxWidth", px],
   maxHeight: ["maxHeight", px],
+  // 动效相关。transform / transition 是做位移、缩放、hover 过渡的最小必需集；
+  // 不放开 position / display / grid —— rect 已经提供绝对定位，栅格用 flex wrap + 百分比宽复刻，
+  // 放开 position 等于把「全屏覆盖」这类越权手段又交回给配置。
+  transform: ["transform", String],
+  transformOrigin: ["transformOrigin", String],
+  transition: ["transition", String],
+  // 只为 hoverStyle 而放开：`animationPlayState: 'paused'` 才能做到「悬停时暂停呼吸动画」。
+  // 写进普通 style 也合法（等于一开始就暂停），但那基本没有意义。
+  animationPlayState: ["animationPlayState", String],
+  // 毛玻璃。Safari 至今只认带前缀的写法，所以两个键一起输出，见 EXTRA_CSS_KEYS
+  backdropFilter: ["backdropFilter", String],
+  textShadow: ["textShadow", String],
+  // 只允许 0~10：越权提层是弹窗类配置最容易做的坏事（盖住宿主自己的导航 / 收银台），
+  // 层内排布十层绰绰有余，真需要压过页面其它内容的是弹窗层，那由解释器自己给 1000
+  zIndex: ["zIndex", (v) => String(clampZIndex(v))],
+  // 装饰性图层（光斑、扫光）必须让点击穿透，否则会挡住下面的按钮
+  pointerEvents: ["pointerEvents", String],
+  // 横向排布里「这一项不许被压扁」，图标位和数字位常用
+  flexShrink: ["flexShrink", String],
+  fontStyle: ["fontStyle", String],
   // 图片
   objectFit: ["objectFit", String],
   // 宽度给百分比、高度按比例算。整图 banner 的热区必须靠它才能用百分比定位：
@@ -499,6 +524,9 @@ var STYLE_MAP = {
   aspectRatio: ["aspectRatio", String]
 };
 var ALLOWED_STYLE_KEYS = Object.keys(STYLE_MAP);
+var EXTRA_CSS_KEYS = {
+  backdropFilter: ["WebkitBackdropFilter"]
+};
 function toCssStyle(style) {
   const css = {};
   if (!style) return css;
@@ -507,7 +535,11 @@ function toCssStyle(style) {
     if (!rule) return;
     const value = style[key];
     if (value === void 0 || value === null || value === "") return;
-    css[rule[0]] = rule[1](value);
+    const result = rule[1](value);
+    css[rule[0]] = result;
+    (EXTRA_CSS_KEYS[key] || []).forEach((extra) => {
+      css[extra] = result;
+    });
   });
   return css;
 }
@@ -520,11 +552,116 @@ function toRectStyle(rect) {
   return css;
 }
 function resolveNodeStyle(node, layout) {
-  return Object.assign(
+  const css = Object.assign(
     {},
     layout === "absolute" ? toRectStyle(node.rect) : {},
     toCssStyle(node.style)
   );
+  if (css.zIndex !== void 0 && !css.position) css.position = "relative";
+  return css;
+}
+
+// src/css-value.ts
+function sanitizeCssValue(value) {
+  if (value === void 0 || value === null) return null;
+  const text = String(value).trim();
+  if (!text) return null;
+  if (/[{}<>;@]/.test(text)) return null;
+  if (text.indexOf("/*") > -1 || text.indexOf("*/") > -1) return null;
+  if (text.indexOf("\\") > -1) return null;
+  return text;
+}
+function toCssProp(key) {
+  return key.replace(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
+}
+function declarations(style) {
+  return Object.keys(style).map((key) => {
+    const value = sanitizeCssValue(style[key]);
+    return value === null ? "" : `${toCssProp(key)}:${value}`;
+  }).filter(Boolean).join(";");
+}
+
+// src/css.ts
+var CSS_NAME_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]{0,31}$/;
+var ALLOWED_EASINGS = [
+  "linear",
+  "ease",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  "step-start",
+  "step-end"
+];
+var CUBIC_BEZIER_RE = /^cubic-bezier\(\s*-?\d+(\.\d+)?\s*,\s*-?\d+(\.\d+)?\s*,\s*-?\d+(\.\d+)?\s*,\s*-?\d+(\.\d+)?\s*\)$/;
+var OFFSET_RE = /^(from|to|\d+(\.\d+)?%)$/;
+function isValidEasing(value) {
+  if (typeof value !== "string") return false;
+  const trimmed = value.trim();
+  return ALLOWED_EASINGS.indexOf(trimmed) > -1 || CUBIC_BEZIER_RE.test(trimmed);
+}
+function isKeyframeOffset(value) {
+  return typeof value === "string" && OFFSET_RE.test(value.trim());
+}
+var scopeSeed = 0;
+function nextScopeUid() {
+  scopeSeed += 1;
+  return scopeSeed;
+}
+function createCssBuilder(uid, keyframes, hover) {
+  const rootClassName = `dsl-renderer dsl-r${uid}`;
+  const scope = `.dsl-r${uid}`;
+  const defined = keyframes && typeof keyframes === "object" ? keyframes : {};
+  const hoverRules = hover ? hover.rules : [];
+  function scopedKeyframeName(name) {
+    return `dsl-kf-${uid}-${name}`;
+  }
+  function animation(animate) {
+    if (!animate || typeof animate !== "object") return void 0;
+    const name = animate.name;
+    if (typeof name !== "string" || !CSS_NAME_PATTERN.test(name)) return void 0;
+    if (!Object.prototype.hasOwnProperty.call(defined, name)) return void 0;
+    const duration = toMs(animate.duration, 0);
+    if (duration <= 0) return void 0;
+    const delay = toMs(animate.delay, 0);
+    const easing = isValidEasing(animate.easing) ? String(animate.easing).trim() : "ease";
+    const iteration = animate.iteration === "infinite" ? "infinite" : String(Math.max(1, Math.round(Number(animate.iteration) || 1)));
+    const direction = pick(animate.direction, DIRECTIONS, "normal");
+    const fill = pick(animate.fill, FILLS, "both");
+    return `${scopedKeyframeName(name)} ${duration}ms ${easing} ${delay}ms ${iteration} ${direction} ${fill}`;
+  }
+  function hoverClass(owner) {
+    return owner && hover ? hover.classOf.get(owner) : void 0;
+  }
+  function build() {
+    const rules = keyframeRules().concat(hoverRules);
+    if (!rules.length) return "";
+    rules.push(
+      `@media (prefers-reduced-motion: reduce){${scope} *{animation:none!important;transition:none!important}}`
+    );
+    return rules.join("\n");
+  }
+  function keyframeRules() {
+    return Object.keys(defined).filter((name) => CSS_NAME_PATTERN.test(name)).map((name) => {
+      const frames = defined[name];
+      if (!frames || typeof frames !== "object") return "";
+      const body = Object.keys(frames).filter(isKeyframeOffset).map((offset) => {
+        const decl = declarations(toCssStyle(frames[offset]));
+        return decl ? `${offset.trim()}{${decl}}` : "";
+      }).filter(Boolean).join("");
+      return body ? `@keyframes ${scopedKeyframeName(name)}{${body}}` : "";
+    }).filter(Boolean);
+  }
+  return { uid, rootClassName, animation, hoverClass, build };
+}
+var DIRECTIONS = ["normal", "reverse", "alternate", "alternate-reverse"];
+var FILLS = ["none", "forwards", "backwards", "both"];
+function pick(value, allowed, fallback) {
+  return typeof value === "string" && allowed.indexOf(value) > -1 ? value : fallback;
+}
+function toMs(value, fallback) {
+  const num = Number(value);
+  if (!isFinite(num) || num < 0) return fallback;
+  return Math.round(num);
 }
 
 // src/user-fields.ts
@@ -643,6 +780,116 @@ function validateUserFields(dsl, allowed) {
   return issues;
 }
 
+// src/validate-animate.ts
+function validateKeyframes(keyframes, add, warn) {
+  if (keyframes === void 0) return [];
+  if (typeof keyframes !== "object" || keyframes === null || Array.isArray(keyframes)) {
+    add(
+      "keyframes",
+      'keyframes \u5FC5\u987B\u662F\u5BF9\u8C61\uFF0C\u5F62\u5982 { "fadeIn": { "from": {...}, "to": {...} } }'
+    );
+    return [];
+  }
+  const names = Object.keys(keyframes);
+  names.forEach((name) => {
+    const at = `keyframes.${name}`;
+    if (!CSS_NAME_PATTERN.test(name)) {
+      add(
+        at,
+        `keyframes \u540D "${name}" \u4E0D\u5408\u89C4\uFF1A\u5B57\u6BCD\u5F00\u5934\uFF0C\u53EA\u80FD\u7528\u5B57\u6BCD / \u6570\u5B57 / \u4E0B\u5212\u7EBF / \u4E2D\u5212\u7EBF\uFF0C\u6700\u957F 32 \u4E2A\u5B57\u7B26`
+      );
+    }
+    const frames = keyframes[name];
+    if (!frames || typeof frames !== "object" || Array.isArray(frames)) {
+      add(at, "\u6BCF\u7EC4 keyframes \u5FC5\u987B\u662F\u5BF9\u8C61\uFF0C\u952E\u662F\u504F\u79FB\u91CF\u3001\u503C\u662F\u6837\u5F0F");
+      return;
+    }
+    const offsets = Object.keys(frames);
+    if (!offsets.length) {
+      add(at, 'keyframes \u81F3\u5C11\u8981\u6709\u4E00\u4E2A\u5173\u952E\u5E27\uFF08\u5982 "from" \u548C "to"\uFF09');
+      return;
+    }
+    offsets.forEach((offset) => {
+      if (!isKeyframeOffset(offset)) {
+        add(
+          `${at}.${offset}`,
+          `\u5173\u952E\u5E27\u7684\u504F\u79FB\u91CF\u53EA\u80FD\u5199 "from" / "to" / "50%" \u8FD9\u4E09\u79CD\u5F62\u5F0F\uFF0C"${offset}" \u4E0D\u5408\u6CD5`
+        );
+      }
+      const style = frames[offset];
+      if (!style || typeof style !== "object" || Array.isArray(style)) {
+        add(`${at}.${offset}`, "\u5173\u952E\u5E27\u7684\u503C\u5FC5\u987B\u662F\u6837\u5F0F\u5BF9\u8C61");
+        return;
+      }
+      Object.keys(style).forEach((key) => {
+        if (ALLOWED_STYLE_KEYS.indexOf(key) === -1) {
+          warn(
+            `${at}.${offset}.${key}`,
+            `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`
+          );
+        }
+      });
+    });
+  });
+  return names;
+}
+function validateAnimate(animate, path, add, keyframeNames, used) {
+  if (animate === void 0) return;
+  if (!animate || typeof animate !== "object" || Array.isArray(animate)) {
+    add(path, "animate \u5FC5\u987B\u662F\u5BF9\u8C61\uFF0C\u5F62\u5982 { name, duration, easing, iteration }");
+    return;
+  }
+  const config = animate;
+  if (typeof config.name !== "string" || !config.name) {
+    add(`${path}.name`, "animate \u5FC5\u987B\u63D0\u4F9B name\uFF08keyframes \u540D\uFF09");
+  } else {
+    used.add(config.name);
+    if (keyframeNames.indexOf(config.name) === -1) {
+      add(
+        `${path}.name`,
+        `keyframes \u91CC\u6CA1\u6709\u5B9A\u4E49 "${config.name}"\uFF0C\u52A8\u753B\u4E0D\u4F1A\u64AD\u653E\u3002` + (keyframeNames.length ? `\u5DF2\u5B9A\u4E49\u7684\u6709\uFF1A${keyframeNames.join(" / ")}` : "\u8BF7\u5148\u5728\u9876\u5C42 keyframes \u91CC\u5B9A\u4E49\u8FD9\u7EC4\u5173\u952E\u5E27")
+      );
+    }
+  }
+  checkMs(config.duration, `${path}.duration`, add, true);
+  checkMs(config.delay, `${path}.delay`, add, false);
+  if (config.easing !== void 0 && !isValidEasing(config.easing)) {
+    add(
+      `${path}.easing`,
+      `\u7F13\u52A8 "${String(config.easing)}" \u4E0D\u5728\u767D\u540D\u5355\u5185\u3002\u53EF\u7528\uFF1A${ALLOWED_EASINGS.join(" / ")} \u6216 cubic-bezier(0.34, 1.56, 0.64, 1)`
+    );
+  }
+  if (config.iteration !== void 0 && config.iteration !== "infinite") {
+    const times = config.iteration;
+    if (typeof times !== "number" || !isFinite(times) || times <= 0 || times % 1 !== 0) {
+      add(`${path}.iteration`, "iteration \u5FC5\u987B\u662F\u6B63\u6574\u6570\uFF0C\u6216\u5B57\u7B26\u4E32 'infinite'\uFF08\u65E0\u9650\u5FAA\u73AF\uFF09");
+    }
+  }
+  checkEnum(config.direction, `${path}.direction`, DIRECTIONS2, add);
+  checkEnum(config.fill, `${path}.fill`, FILLS2, add);
+}
+var DIRECTIONS2 = ["normal", "reverse", "alternate", "alternate-reverse"];
+var FILLS2 = ["none", "forwards", "backwards", "both"];
+function checkEnum(value, path, allowed, add) {
+  if (value === void 0) return;
+  if (typeof value !== "string" || allowed.indexOf(value) === -1) {
+    add(path, `\u53EA\u80FD\u662F ${allowed.join(" / ")} \u4E4B\u4E00`);
+  }
+}
+function checkMs(value, path, add, required) {
+  if (value === void 0) {
+    if (required) add(path, "animate \u5FC5\u987B\u63D0\u4F9B duration\uFF08\u6BEB\u79D2\uFF0C\u6B63\u6570\uFF09");
+    return;
+  }
+  if (typeof value !== "number" || !isFinite(value) || value < 0) {
+    add(path, `"${String(value)}" \u4E0D\u5408\u6CD5\uFF1A\u5FC5\u987B\u662F\u975E\u8D1F\u6570\u5B57\uFF0C\u5355\u4F4D\u6BEB\u79D2`);
+    return;
+  }
+  if (required && value === 0) {
+    add(path, "duration \u5FC5\u987B\u5927\u4E8E 0\uFF0C\u5426\u5219\u52A8\u753B\u4E0D\u4F1A\u64AD\u653E");
+  }
+}
+
 // src/validate.ts
 var LENGTH_STYLE_KEYS = [
   "width",
@@ -716,14 +963,26 @@ function validate(dsl, options) {
   const dataKeys = validateData(doc.data, add);
   const stateKeys = validateState(doc.state, add);
   validateDerived(doc.derived, dataKeys, stateKeys, add);
+  const keyframeNames = validateKeyframes(doc.keyframes, add, warn);
   const isMulti = doc.views !== void 0;
   if (isMulti) validateMultiView(doc, add);
   const { views } = normalizeViews(doc);
   const viewNames = Object.keys(views);
-  const ctx = { add, warn, viewNames };
+  const ctx = {
+    add,
+    warn,
+    viewNames,
+    keyframeNames,
+    usedKeyframes: /* @__PURE__ */ new Set()
+  };
   viewNames.forEach((name) => {
     validateView(views[name], isMulti ? `views.${name}` : "", ctx);
   });
+  keyframeNames.forEach((name) => {
+    if (!ctx.usedKeyframes.has(name)) {
+      warn(`keyframes.${name}`, `keyframes "${name}" \u6CA1\u6709\u4EFB\u4F55 animate \u5F15\u7528\uFF0C\u4E0D\u4F1A\u751F\u6548`);
+    }
+  });
   if (options && options.userFields) {
     validateUserFields(doc, options.userFields).forEach(
       (issue) => add(issue.path, issue.message)
@@ -822,8 +1081,45 @@ function validateStage(stage, add, warn, ctx, prefix) {
   if (stage.layout !== void 0 && ["absolute", "flow"].indexOf(stage.layout) === -1) {
     add("stage.layout", "stage.layout \u53EA\u80FD\u662F 'absolute'\uFF08\u9ED8\u8BA4\uFF09\u6216 'flow'");
   }
-  validateCloseButton(stage.closeButton, add, warn);
   const at = (key) => prefix ? `${prefix}.stage.${key}` : `stage.${key}`;
+  if (stage.maskStyle !== void 0) {
+    if (typeof stage.maskStyle !== "object" || stage.maskStyle === null || Array.isArray(stage.maskStyle)) {
+      add("stage.maskStyle", "maskStyle \u5FC5\u987B\u662F\u6837\u5F0F\u5BF9\u8C61");
+    } else {
+      Object.keys(stage.maskStyle).forEach((key) => {
+        if (ALLOWED_STYLE_KEYS.indexOf(key) === -1) {
+          warn(
+            `stage.maskStyle.${key}`,
+            `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`
+          );
+        }
+      });
+    }
+  }
+  if (stage.maskAction !== void 0) {
+    validateAction(stage.maskAction, at("maskAction"), ctx);
+    if (!stage.maskClosable) {
+      warn(
+        "stage.maskAction",
+        "maskAction \u53EA\u6709\u5728 maskClosable \u4E3A true \u65F6\u624D\u4F1A\u6267\u884C\u2014\u2014\u906E\u7F69\u4E0D\u53EF\u70B9\uFF0C\u52A8\u4F5C\u5C31\u6CA1\u6709\u89E6\u53D1\u65F6\u673A"
+      );
+    }
+  }
+  validateCloseButton(stage.closeButton, add, warn, ctx, at("closeButton.action"));
+  validateAnimate(
+    stage.animate,
+    "stage.animate",
+    add,
+    ctx.keyframeNames,
+    ctx.usedKeyframes
+  );
+  validateAnimate(
+    stage.maskAnimate,
+    "stage.maskAnimate",
+    add,
+    ctx.keyframeNames,
+    ctx.usedKeyframes
+  );
   if (stage.onShow !== void 0) validateAction(stage.onShow, at("onShow"), ctx);
   if (stage.onClose !== void 0) validateAction(stage.onClose, at("onClose"), ctx);
   if (stage.height === "auto" && stage.layout !== "flow") {
@@ -833,7 +1129,7 @@ function validateStage(stage, add, warn, ctx, prefix) {
     );
   }
 }
-function validateCloseButton(config, add, warn) {
+function validateCloseButton(config, add, warn, ctx, actionPath) {
   if (config === void 0) return;
   if (typeof config !== "object" || config === null || Array.isArray(config)) {
     add("stage.closeButton", "closeButton \u5FC5\u987B\u662F\u5BF9\u8C61");
@@ -865,16 +1161,28 @@ function validateCloseButton(config, add, warn) {
   if (config.image !== void 0 && typeof config.image !== "string") {
     add("stage.closeButton.image", "image \u5FC5\u987B\u662F\u56FE\u7247\u94FE\u63A5\u5B57\u7B26\u4E32");
   }
-  if (config.style) {
-    Object.keys(config.style).forEach((key) => {
+  [
+    ["style", config.style],
+    ["hoverStyle", config.hoverStyle]
+  ].forEach(([field, style]) => {
+    if (!style) return;
+    Object.keys(style).forEach((key) => {
       if (ALLOWED_STYLE_KEYS.indexOf(key) === -1) {
         warn(
-          `stage.closeButton.style.${key}`,
+          `stage.closeButton.${field}.${key}`,
           `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`
         );
       }
     });
-  }
+  });
+  if (config.action !== void 0) validateAction(config.action, actionPath, ctx);
+  validateAnimate(
+    config.animate,
+    "stage.closeButton.animate",
+    add,
+    ctx.keyframeNames,
+    ctx.usedKeyframes
+  );
 }
 function validateData(data, add) {
   if (data === void 0) return [];
@@ -923,8 +1231,41 @@ function validateDerived(derived, dataKeys, stateKeys, add) {
     }
   });
 }
-function validateNode(node, path, layout, ctx) {
+function validateNodeStyle(style, path, ctx) {
   const { add, warn } = ctx;
+  if (style) {
+    Object.keys(style).forEach((key) => {
+      if (ALLOWED_STYLE_KEYS.indexOf(key) === -1) {
+        warn(`${path}.${key}`, `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`);
+        return;
+      }
+      if (LENGTH_STYLE_KEYS.indexOf(key) > -1 && !checkLength(style[key])) {
+        add(
+          `${path}.${key}`,
+          `"${style[key]}" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6\uFF0C\u652F\u6301\u6570\u5B57(px) / '100%' / 'auto' \u7B49`
+        );
+      }
+      if (key === "aspectRatio") {
+        if (!checkAspectRatio(style[key])) {
+          add(
+            `${path}.aspectRatio`,
+            "aspectRatio \u8981\u5199\u6210 '750 / 200' \u6216 1.5 \u8FD9\u6837\u7684\u5BBD\u9AD8\u6BD4"
+          );
+        } else if (ctx.viewType === "banner") {
+          const ratio = parseAspectRatio(style[key]);
+          if (ratio !== null && ratio < BANNER_MIN_ASPECT_RATIO) {
+            add(
+              `${path}.aspectRatio`,
+              `banner \u7684\u5BBD\u9AD8\u6BD4\u4E0D\u80FD\u5C0F\u4E8E ${BANNER_MIN_ASPECT_RATIO}:1\uFF08\u5F53\u524D\u7EA6 ${ratio.toFixed(1)}:1\uFF09\u3002banner \u5751\u4F4D\u5E38\u9A7B\u9875\u9762\u9876\u90E8\uFF0C\u6BD4\u4F8B\u8D8A\u65B9\u5728\u5BBD\u5C4F\u4E0A\u8D8A\u9AD8 \u2014\u2014 1800px \u5BBD\u7684\u5751\u4F4D\u91CC\uFF0C${ratio.toFixed(1)}:1 \u4F1A\u7B97\u51FA ${Math.round(1800 / ratio)}px \u9AD8\uFF0C\u5403\u6389\u9996\u5C4F\u4E00\u5927\u5757`
+            );
+          }
+        }
+      }
+    });
+  }
+}
+function validateNode(node, path, layout, ctx) {
+  const { add } = ctx;
   if (!node || typeof node !== "object" || Array.isArray(node)) {
     add(path, "\u8282\u70B9\u5FC5\u987B\u662F\u5BF9\u8C61");
     return;
@@ -950,36 +1291,15 @@ function validateNode(node, path, layout, ctx) {
       });
     }
   }
-  if (node.style) {
-    Object.keys(node.style).forEach((key) => {
-      if (ALLOWED_STYLE_KEYS.indexOf(key) === -1) {
-        warn(`${path}.style.${key}`, `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`);
-        return;
-      }
-      if (LENGTH_STYLE_KEYS.indexOf(key) > -1 && !checkLength(node.style[key])) {
-        add(
-          `${path}.style.${key}`,
-          `"${node.style[key]}" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6\uFF0C\u652F\u6301\u6570\u5B57(px) / '100%' / 'auto' \u7B49`
-        );
-      }
-      if (key === "aspectRatio") {
-        if (!checkAspectRatio(node.style[key])) {
-          add(
-            `${path}.style.aspectRatio`,
-            "aspectRatio \u8981\u5199\u6210 '750 / 200' \u6216 1.5 \u8FD9\u6837\u7684\u5BBD\u9AD8\u6BD4"
-          );
-        } else if (ctx.viewType === "banner") {
-          const ratio = parseAspectRatio(node.style[key]);
-          if (ratio !== null && ratio < BANNER_MIN_ASPECT_RATIO) {
-            add(
-              `${path}.style.aspectRatio`,
-              `banner \u7684\u5BBD\u9AD8\u6BD4\u4E0D\u80FD\u5C0F\u4E8E ${BANNER_MIN_ASPECT_RATIO}:1\uFF08\u5F53\u524D\u7EA6 ${ratio.toFixed(1)}:1\uFF09\u3002banner \u5751\u4F4D\u5E38\u9A7B\u9875\u9762\u9876\u90E8\uFF0C\u6BD4\u4F8B\u8D8A\u65B9\u5728\u5BBD\u5C4F\u4E0A\u8D8A\u9AD8 \u2014\u2014 1800px \u5BBD\u7684\u5751\u4F4D\u91CC\uFF0C${ratio.toFixed(1)}:1 \u4F1A\u7B97\u51FA ${Math.round(1800 / ratio)}px \u9AD8\uFF0C\u5403\u6389\u9996\u5C4F\u4E00\u5927\u5757`
-            );
-          }
-        }
-      }
-    });
-  }
+  validateNodeStyle(node.style, `${path}.style`, ctx);
+  validateNodeStyle(node.hoverStyle, `${path}.hoverStyle`, ctx);
+  validateAnimate(
+    node.animate,
+    `${path}.animate`,
+    add,
+    ctx.keyframeNames,
+    ctx.usedKeyframes
+  );
   if (node.visibleWhen !== void 0) {
     if (typeof node.visibleWhen !== "string") {
       add(`${path}.visibleWhen`, "visibleWhen \u5FC5\u987B\u662F\u8868\u8FBE\u5F0F\u5B57\u7B26\u4E32");
@@ -992,7 +1312,7 @@ function validateNode(node, path, layout, ctx) {
   validateNodeByType(node, path, ctx);
 }
 function validateNodeByType(node, path, ctx) {
-  const { add } = ctx;
+  const { add, warn } = ctx;
   if (node.type === "image" && !node.src) {
     add(`${path}.src`, "image \u5FC5\u987B\u63D0\u4F9B src");
   }
@@ -1013,9 +1333,25 @@ function validateNodeByType(node, path, ctx) {
     }
   }
   if (node.type === "countdown") {
-    if (!node.to) {
-      add(`${path}.to`, "countdown \u5FC5\u987B\u63D0\u4F9B to\uFF08\u7ED3\u675F\u65F6\u95F4\uFF09");
-    } else if (!isValidEndTime(node.to)) {
+    if (!node.to && node.duration === void 0) {
+      add(
+        `${path}.to`,
+        "countdown \u5FC5\u987B\u63D0\u4F9B to\uFF08\u7ED3\u675F\u65F6\u95F4\uFF09\u6216 duration\uFF08\u76F8\u5BF9\u65F6\u957F\uFF0C\u6BEB\u79D2\uFF0C\u4ECE\u8BE5\u89C6\u56FE\u5C55\u793A\u90A3\u4E00\u523B\u8D77\u7B97\uFF09"
+      );
+    }
+    if (node.duration !== void 0) {
+      const duration = node.duration;
+      if (typeof duration !== "number" || !isFinite(duration) || duration <= 0) {
+        add(`${path}.duration`, "duration \u5FC5\u987B\u662F\u6B63\u6570\uFF0C\u5355\u4F4D\u6BEB\u79D2\uFF085 \u5206\u949F\u5C31\u5199 300000\uFF09");
+      }
+    }
+    if (node.to && node.duration !== void 0) {
+      warn(
+        `${path}.duration`,
+        "\u540C\u65F6\u5199\u4E86 to \u548C duration\uFF0C\u8FD0\u884C\u65F6\u4EE5 to \u4E3A\u51C6\uFF0Cduration \u4E0D\u4F1A\u751F\u6548"
+      );
+    }
+    if (!node.to) ; else if (!isValidEndTime(node.to)) {
       add(
         `${path}.to`,
         `"${node.to}" \u4E0D\u662F\u80FD\u8BC6\u522B\u7684\u65F6\u95F4\u3002\u53EF\u4EE5\u5199 "2026-09-01 18:00:00" / "2026-09-01" / "2026\u5E749\u67081\u65E5 18\u70B9" / ISO \u683C\u5F0F / \u65F6\u95F4\u6233`
@@ -1107,4 +1443,4 @@ function formatIssues(issues) {
   return issues.map((item) => item.path ? `${item.path}: ${item.message}` : item.message).join("\n");
 }
 
-export { ACTION_TYPES, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, DEFAULT_USER_FIELDS, DSL_VERSION, NODE_TYPES, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, check, computeParts, createTicker, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isLength, isValidEndTime, normalizeViews, parseEndTime, resolveNodeStyle, toCssStyle, toLength, validate, validateUserFields };
+export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, DEFAULT_USER_FIELDS, DSL_VERSION, NODE_TYPES, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, check, computeParts, createCssBuilder, createTicker, declarations, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isValidEasing, isValidEndTime, nextScopeUid, normalizeViews, parseEndTime, resolveNodeStyle, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields };