@yaoxiu/marketing-dsl 2.3.0 → 2.5.0

package/dist/index.cjs

@@ -541,6 +541,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],
@@ -593,6 +598,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 的热区必须靠它才能用百分比定位：
@@ -600,6 +625,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;
@@ -608,7 +636,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;
 }
@@ -621,27 +653,128 @@ 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/resolve.ts
 function resolveTree(input) {
   const { normalized, viewStack, ready } = input;
+  const css = createCssBuilder(input.scopeUid, input.keyframes, input.hover);
+  const pass = Object.assign({}, input, { css });
   const layers = viewStack.map((name) => ({ name, view: normalized.views[name] })).filter((item) => !!item.view);
   const hasPopup = layers.some((item) => item.view.type === "popup");
   const countdowns = { endTimes: [], precision: "s" };
   const renderLayers = ready ? layers.map(
-    (item, index) => resolveLayer(
-      item.name,
-      item.view,
-      index === layers.length - 1,
-      input,
-      countdowns
-    )
+    (item, index) => resolveLayer(item.name, item.view, index === layers.length - 1, pass, countdowns)
   ) : [];
   return {
     ready: ready && layers.length > 0,
@@ -652,7 +785,10 @@ function resolveTree(input) {
     rootStyle: { position: "relative" },
     layers: renderLayers,
     countdownEndTimes: countdowns.endTimes,
-    countdownPrecision: countdowns.precision
+    countdownPrecision: countdowns.precision,
+    // build 必须在 layers 算完之后调：hover 规则是遍历节点时才登记进来的
+    css: css.build(),
+    rootClassName: css.rootClassName
   };
 }
 function resolveLayer(name, view, isTop, input, countdowns) {
@@ -661,7 +797,7 @@ function resolveLayer(name, view, isTop, input, countdowns) {
   const isPopup = view.type === "popup";
   const rootLayout = stage.layout === "flow" ? "flow" : "absolute";
   const maskClosable = !!stage.maskClosable;
-  const onMaskClick = maskClosable ? () => closeTop("mask") : void 0;
+  const onMaskClick = maskClosable ? stage.maskAction ? () => input.dispatch(stage.maskAction, context) : () => closeTop("mask") : void 0;
   const nodes = (view.nodes || []).map(
     (node, index) => resolveNode(node, `${name}-${index}`, rootLayout, context, input, countdowns)
   ).filter((el) => !!el);
@@ -669,20 +805,26 @@ function resolveLayer(name, view, isTop, input, countdowns) {
     name,
     type: view.type,
     isTop,
-    // 只有栈顶那层画遮罩，否则两层遮罩叠加会明显变黑
-    mask: isPopup && stage.mask !== false && isTop,
-    onMaskClick,
+    /**
+     * 弹窗层恒画遮罩元素，**非栈顶时只是变透明**（见下方 maskStyle）。
+     *
+     * 【为什么不是「只有栈顶才画」】那样写视觉上也对（两层实心遮罩叠加会明显变黑，
+     * 所以下层必须让位），但下层的遮罩 DOM 会被整个移除、退回栈顶时再新建一个 ——
+     * 新元素身上的 `maskAnimate` 于是又播一遍：关掉二次挽留层回到主弹窗时，
+     * 背景会重新淡入一次，看起来就是「闪了一下」。元素常驻就没这问题。
+     */
+    mask: isPopup && stage.mask !== false,
+    // 非栈顶层整层 pointerEvents: none，遮罩点不到，这里也就不必给它挂回调
+    onMaskClick: isTop ? onMaskClick : void 0,
     layerStyle: layerStyle(isPopup, isTop),
-    maskStyle: {
-      position: "absolute",
-      top: "0",
-      right: "0",
-      bottom: "0",
-      left: "0",
-      background: "rgba(0, 0, 0, 0.55)"
-    },
+    // 合并顺序固定：内置默认 → stage.maskStyle 覆盖 → maskAnimate 的 animation 收尾。
+    // 遮罩样式也走一遍插值，切 tab 时能跟着变（同 stage.style）
+    maskStyle: maskStyle(stage, isTop, context, input),
     scrollStyle: scrollStyle(isPopup),
-    stageStyle: resolveStageStyle(stage, isPopup, context),
+    stageStyle: withAnimation(
+      resolveStageStyle(stage, isPopup, context),
+      input.css.animation(stage.animate)
+    ),
     clipStyle: {
       position: "relative",
       height: "100%",
@@ -690,10 +832,39 @@ function resolveLayer(name, view, isTop, input, countdowns) {
       overflow: "hidden",
       boxSizing: "border-box"
     },
-    closeButton: resolveCloseButton(stage.closeButton, name, closeTop),
+    closeButton: resolveCloseButton(stage.closeButton, name, closeTop, input, context),
     nodes
   };
 }
+function withAnimation(style, animation) {
+  if (animation) style.animation = animation;
+  return style;
+}
+function maskStyle(stage, isTop, context, input) {
+  const style = withAnimation(
+    Object.assign(
+      {
+        position: "absolute",
+        top: "0",
+        right: "0",
+        bottom: "0",
+        left: "0",
+        background: "rgba(0, 0, 0, 0.55)"
+      },
+      toCssStyle(interpolateDeep(stage.maskStyle, context))
+    ),
+    input.css.animation(stage.maskAnimate)
+  );
+  if (isTop) return style;
+  style.background = "transparent";
+  delete style.backdropFilter;
+  delete style.WebkitBackdropFilter;
+  return style;
+}
+function withHover(className, owner, css) {
+  const hoverClass = css.hoverClass(owner);
+  return hoverClass ? `${className} ${hoverClass}` : className;
+}
 function layerStyle(isPopup, isTop) {
   const style = isPopup ? {
     position: "fixed",
@@ -751,7 +922,8 @@ function resolveStageStyle(stage, isPopup, context) {
   }
   return style;
 }
-function resolveCloseButton(config, layerName, closeTop) {
+function resolveCloseButton(config, layerName, closeTop, input, context) {
+  const css = input.css;
   if (!config || config.show === false) return void 0;
   const offset = config.offset || [8, 8];
   const size = config.size === void 0 ? 26 : config.size;
@@ -789,12 +961,14 @@ function resolveCloseButton(config, layerName, closeTop) {
     style.right = toLength(offset[0]);
   }
   Object.assign(style, toCssStyle(config.style));
-  const onClick = () => closeTop("close-button");
+  withAnimation(style, css.animation(config.animate));
+  const className = withHover("dsl-close", config, css);
+  const onClick = config.action ? () => input.dispatch(config.action, context) : () => closeTop("close-button");
   if (iconMode === "image") {
     return {
       key: `${layerName}-close`,
       tag: "div",
-      className: "dsl-close",
+      className,
       style,
       onClick,
       children: [
@@ -817,7 +991,7 @@ function resolveCloseButton(config, layerName, closeTop) {
     return {
       key: `${layerName}-close`,
       tag: "div",
-      className: "dsl-close",
+      className,
       style,
       onClick,
       text: config.icon
@@ -826,7 +1000,7 @@ function resolveCloseButton(config, layerName, closeTop) {
   return {
     key: `${layerName}-close`,
     tag: "div",
-    className: "dsl-close",
+    className,
     style,
     onClick,
     children: [closeIcon(`${layerName}-close-icon`, size)]
@@ -914,6 +1088,12 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       layout
     )
   );
+  withAnimation(style, input.css.animation(node.animate));
+  const hoverClass = input.css.hoverClass(node);
+  const cls = (type, clickable) => {
+    const base = nodeClass(type, clickable);
+    return hoverClass ? `${base} ${hoverClass}` : base;
+  };
   const onClick = node.action ? () => input.dispatch(node.action, context) : void 0;
   if (onClick && !style.cursor) style.cursor = "pointer";
   switch (node.type) {
@@ -921,7 +1101,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
-        className: nodeClass("box", !!onClick),
+        className: cls("box", !!onClick),
         style: Object.assign({ position: "relative" }, style),
         onClick,
         children: resolveChildren(
@@ -937,7 +1117,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
-        className: nodeClass("flex", !!onClick),
+        className: cls("flex", !!onClick),
         style: Object.assign({ display: "flex" }, style),
         onClick,
         children: resolveChildren(node.children, key, "flow", context, input, countdowns)
@@ -946,7 +1126,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
-        className: nodeClass("repeat", !!onClick),
+        className: cls("repeat", !!onClick),
         style: Object.assign({ display: "flex" }, style),
         onClick,
         children: resolveRepeat(node, key, context, input, countdowns)
@@ -955,7 +1135,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
-        className: nodeClass("tabs", false),
+        className: cls("tabs", false),
         style: Object.assign({ display: "flex" }, style),
         children: resolveTabs(node, key, context, input)
       };
@@ -963,7 +1143,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "img",
-        className: nodeClass("image", !!onClick),
+        className: cls("image", !!onClick),
         src: safeImageUrl(interpolate(node.src, context)),
         style: Object.assign({ display: "block", objectFit: "cover" }, style),
         onClick
@@ -972,7 +1152,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
-        className: nodeClass("text", !!onClick),
+        className: cls("text", !!onClick),
         style: Object.assign({ wordBreak: "break-word" }, style),
         text: toText(interpolate(node.content, context)),
         onClick
@@ -981,7 +1161,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
-        className: nodeClass("button", true),
+        className: cls("button", true),
         style: Object.assign(
           {
             display: "flex",
@@ -997,7 +1177,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
         onClick
       };
     case "countdown":
-      return resolveCountdown(node, key, style, context, input, countdowns);
+      return resolveCountdown(node, key, style, context, input, countdowns, hoverClass);
     // 配置比解释器新时，未知类型降级为不渲染，不阻断整个弹窗
     default:
       return void 0;
@@ -1059,10 +1239,23 @@ function resolveTabs(node, key, context, input) {
     };
   });
 }
-function resolveCountdown(node, key, style, context, input, countdowns) {
-  var _a;
+function resolveCountdownEndTime(node, key, context, input) {
   const endTime = parseEndTime(interpolate(node.to, context));
+  if (endTime > 0) return endTime;
+  const duration = Number(interpolate(node.duration, context));
+  if (!isFinite(duration) || duration <= 0) return 0;
+  let start = input.countdownStarts.get(key);
+  if (start === void 0) {
+    start = Date.now();
+    input.countdownStarts.set(key, start);
+  }
+  return start + duration;
+}
+function resolveCountdown(node, key, style, context, input, countdowns, hoverClass) {
+  var _a;
+  const endTime = resolveCountdownEndTime(node, key, context, input);
   const parts = computeParts(endTime);
+  const cls = (base) => hoverClass ? `${base} ${hoverClass}` : base;
   countdowns.endTimes.push(endTime);
   if (node.precision === "cs") countdowns.precision = "cs";
   if (endTime && node.onEnd) {
@@ -1079,7 +1272,7 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
     return {
       key,
       tag: "div",
-      className: "dsl-node dsl-text dsl-countdown",
+      className: cls("dsl-node dsl-text dsl-countdown"),
       style: Object.assign({ wordBreak: "break-word" }, style),
       text: node.endText || "\u5DF2\u7ED3\u675F"
     };
@@ -1088,7 +1281,7 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
     return {
       key,
       tag: "div",
-      className: "dsl-node dsl-text dsl-countdown",
+      className: cls("dsl-node dsl-text dsl-countdown"),
       style: Object.assign({ wordBreak: "break-word" }, style),
       text: formatParts(parts, node.format)
     };
@@ -1097,7 +1290,7 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
   return {
     key,
     tag: "div",
-    className: "dsl-node dsl-flex dsl-countdown",
+    className: cls("dsl-node dsl-flex dsl-countdown"),
     style: Object.assign({ display: "flex" }, style),
     children: resolveChildren(
       node.children,
@@ -1113,6 +1306,37 @@ function toText(value) {
   return value === void 0 || value === null ? "" : String(value);
 }
 
+// src/hover.ts
+function collectHoverStyles(views, uid, context) {
+  const rules = [];
+  const classOf = /* @__PURE__ */ new WeakMap();
+  const scope = `.dsl-r${uid}`;
+  let seed = 0;
+  const register = (owner, style) => {
+    if (!owner || !style || typeof style !== "object") return;
+    const body = declarations(toCssStyle(interpolateDeep(style, context)));
+    if (!body) return;
+    seed += 1;
+    const className = `dsl-hv-${uid}-${seed}`;
+    classOf.set(owner, className);
+    rules.push(`${scope} .${className}:hover{${body}}`);
+  };
+  const walkNode = (node) => {
+    if (!node || typeof node !== "object") return;
+    register(node, node.hoverStyle);
+    (node.children || []).forEach(walkNode);
+    walkNode(node.template);
+  };
+  Object.keys(views).forEach((name) => {
+    const view = views[name];
+    if (!view || typeof view !== "object") return;
+    const closeButton = view.stage && view.stage.closeButton;
+    register(closeButton, closeButton && closeButton.hoverStyle);
+    (view.nodes || []).forEach(walkNode);
+  });
+  return { rules, classOf };
+}
+
 // src/runtime.ts
 var noopEmit = () => {
 };
@@ -1124,6 +1348,7 @@ function createRuntime(dsl, options = {}) {
     editMode: !!options.editMode
   };
   const normalized = normalizeViews(dsl);
+  const scopeUid = nextScopeUid();
   let state = Object.assign({}, dsl.state || {});
   let resolvedData = {};
   let viewStack = [normalized.entry];
@@ -1132,6 +1357,7 @@ function createRuntime(dsl, options = {}) {
   let destroyed = false;
   const listeners = /* @__PURE__ */ new Set();
   const countdownEnds = /* @__PURE__ */ new Map();
+  const countdownStarts = /* @__PURE__ */ new Map();
   const notify = () => {
     if (destroyed) return;
     listeners.forEach((fn) => fn());
@@ -1265,7 +1491,9 @@ function createRuntime(dsl, options = {}) {
     });
   }
   loadData();
+  let hover;
   function getTree() {
+    if (!hover) hover = collectHoverStyles(normalized.views, scopeUid, buildContext());
     const tree = resolveTree({
       normalized,
       viewStack,
@@ -1275,7 +1503,11 @@ function createRuntime(dsl, options = {}) {
       dispatch,
       setState,
       closeTop,
-      countdownEnds
+      countdownEnds,
+      countdownStarts,
+      scopeUid,
+      keyframes: dsl.keyframes,
+      hover
     });
     ticker.sync(tree.countdownEndTimes, tree.countdownPrecision);
     return tree;
@@ -1418,6 +1650,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",
@@ -1491,14 +1833,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)
@@ -1597,8 +1951,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") {
@@ -1608,7 +1999,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");
@@ -1640,16 +2031,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 [];
@@ -1698,8 +2101,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;
@@ -1725,36 +2161,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");
@@ -1767,7 +2182,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");
   }
@@ -1788,9 +2203,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`
@@ -1883,10 +2314,10 @@ function formatIssues(issues) {
 }
 
 // src/host-capabilities.ts
-var HOST_SOURCE_NAMES = ["shopAchievements", "listRenewTiers"];
+var HOST_SOURCE_NAMES = ["userStatistics", "listRenewTiers"];
 var HOST_HANDLER_NAMES = [];
 var HOST_SOURCE_LABELS = {
-  shopAchievements: "\u5E97\u94FA\u6210\u679C\u7EDF\u8BA1\uFF08\u5DF2\u4E0A\u67B6/\u8FD0\u884C\u4E2D/\u767D\u5E95\u56FE\u7B49\u683C\u5B50\u6570\u7EC4\uFF09",
+  userStatistics: "\u7528\u6237\u6570\u636E\u7EDF\u8BA1\uFF08\u7D2F\u8BA1\u642C\u5BB6\u6570 / \u6B21\u6570\u4F59\u989D / AI \u4F18\u5316\u6B21\u6570\u7B49\uFF0C\u6241\u5E73\u5BF9\u8C61\uFF0C\u5B57\u6BB5\u540D\u4E3A\u540E\u7AEF snake_case\uFF09",
   listRenewTiers: "\u7EED\u8D39\u4EF7\u683C\u6863\u4F4D\u5217\u8868\uFF08\u6708\u4ED8/\u5B63\u4ED8/\u534A\u5E74/\u5E74\u4ED8\uFF0C\u542B\u4E0B\u5355\u5730\u5740\uFF09"
 };
 var HOST_HANDLER_LABELS = {};
@@ -1898,9 +2329,11 @@ function isRegisteredHostHandler(name) {
 }
 
 exports.ACTION_TYPES = ACTION_TYPES;
+exports.ALLOWED_EASINGS = ALLOWED_EASINGS;
 exports.ALLOWED_STYLE_KEYS = ALLOWED_STYLE_KEYS;
 exports.BANNER_MIN_ASPECT_RATIO = BANNER_MIN_ASPECT_RATIO;
 exports.CLOSE_POSITIONS = CLOSE_POSITIONS;
+exports.CSS_NAME_PATTERN = CSS_NAME_PATTERN;
 exports.DEFAULT_USER_FIELDS = DEFAULT_USER_FIELDS;
 exports.DSL_VERSION = DSL_VERSION;
 exports.HOST_HANDLER_LABELS = HOST_HANDLER_LABELS;
@@ -1919,14 +2352,17 @@ exports.formatIssues = formatIssues;
 exports.formatParts = formatParts;
 exports.interpolate = interpolate;
 exports.interpolateDeep = interpolateDeep;
+exports.isKeyframeOffset = isKeyframeOffset;
 exports.isLength = isLength;
 exports.isRegisteredHostHandler = isRegisteredHostHandler;
 exports.isRegisteredHostSource = isRegisteredHostSource;
+exports.isValidEasing = isValidEasing;
 exports.isValidEndTime = isValidEndTime;
 exports.normalizeViews = normalizeViews;
 exports.parseEndTime = parseEndTime;
 exports.safeImageUrl = safeImageUrl;
 exports.safeUrl = safeUrl;
+exports.sanitizeCssValue = sanitizeCssValue;
 exports.toCssStyle = toCssStyle;
 exports.toLength = toLength;
 exports.validate = validate;