@yaoxiu/marketing-dsl 2.3.0 → 2.4.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-Bj0xyWnx.cjs';
-export { q as DslAction, h as DslActionBase, o as DslCallAction, j as DslCloseAction, k as DslCloseAllAction, t as DslCloseButton, s as DslClosePosition, w as DslDerived, A as DslHandler, E as DslInteractionEvent, B as DslInteractionTrigger, f as DslLength, i as DslNavigateAction, r as DslNode, e as DslNodeType, l as DslOpenAction, g as DslRect, p as DslSequenceAction, m as DslSetStateAction, z as DslSource, v as DslSourceRef, u as DslStage, n as DslTrackAction, d as DslViewType, x as RenderElement, y as RenderLayer, H as RuntimeEmit, G as RuntimeEventName, F as RuntimeEvents } from './types-Bj0xyWnx.cjs';
+import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-8FNxDXp0.cjs';
+export { s as DslAction, j as DslActionBase, h as DslAnimate, q as DslCallAction, l as DslCloseAction, m as DslCloseAllAction, v as DslCloseButton, u as DslClosePosition, y as DslDerived, E as DslHandler, G as DslInteractionEvent, F as DslInteractionTrigger, i as DslKeyframe, f as DslLength, k as DslNavigateAction, t as DslNode, e as DslNodeType, n as DslOpenAction, g as DslRect, r as DslSequenceAction, o as DslSetStateAction, B as DslSource, x as DslSourceRef, w as DslStage, p as DslTrackAction, d as DslViewType, z as RenderElement, A as RenderLayer, J as RuntimeEmit, I as RuntimeEventName, H as RuntimeEvents } from './types-8FNxDXp0.cjs';
 
 /**
  * 运行时。
@@ -271,6 +271,58 @@ declare function safeUrl(input: unknown): string;
 /** 图片额外允许 data:image/*，方便 base64 占位图 */
 declare function safeImageUrl(input: unknown): string;
 
+/**
+ * CSS 文本的值处理。
+ *
+ * 单独成文件是为了让 `hover.ts` 能复用而不与 `css.ts` 形成循环引用
+ * （`css.ts` 要拿 `hover.ts` 的预收集结果，反过来 `hover.ts` 只需要这几个纯函数）。
+ *
+ * 【安全】这里是整个包里唯一做字符串拼接产出样式的地方。行内样式那条路径由框架
+ * （Vue 的 style 绑定）负责转义，值再怪也只是不生效；而 CSS 文本是裸拼的，一个 `}`
+ * 就能提前闭合规则、接着写任意选择器。所以每个值都要过 `sanitizeCssValue`，
+ * 不合格的整条声明直接丢弃 —— 宁可少一条样式，也不能让配置写进任意 CSS。
+ */
+
+/**
+ * CSS 值安全过滤。
+ *
+ * 含 `{` `}` `<` `>` `;` `@` 或注释起始 `/*` 的值一律判为不安全，返回 `null`，
+ * 调用方据此丢弃**整条声明**（不是把字符删掉——半截值同样可能拼出意料外的效果）。
+ *
+ * @returns 安全的值字符串；不安全或空值返回 null
+ */
+declare function sanitizeCssValue(value: unknown): string | null;
+
+/**
+ * CSS 文本生成。
+ *
+ * 行内样式表达不了两件事：`@keyframes` 和 `:hover`。所以这一份配置除了渲染树之外，
+ * 还要产出一段 CSS 文本（`RenderTree.css`），由框架壳原样塞进一个 `<style>` 元素。
+ *
+ * 【安全】这是整个包里**唯一**做字符串拼接产出样式的地方。行内样式那条路径由框架
+ * （Vue 的 style 绑定）负责转义，值再怪也只是不生效；而 CSS 文本是裸拼的，一个 `}`
+ * 就能提前闭合规则、接着写任意选择器（改宿主页面的样式、拿 `content` 做钓鱼文案）。
+ * 所以这里的每个值都要过 `sanitizeCssValue`，每个名字都要过 `CSS_NAME_PATTERN`，
+ * 不合格的整条声明直接丢弃 —— 宁可少一条动画，也不能让配置写进任意 CSS。
+ *
+ * 【作用域】同一个页面上可能同时挂着好几份物料，keyframes 名和 hover 类名都是全局的，
+ * 重名就会互相覆盖。所以每个运行时实例领一个自增 uid，名字全部带上它。
+ */
+
+/** keyframes 名与作用域类名允许的字符：字母开头，字母 / 数字 / 下划线 / 中划线，最长 32 */
+declare const CSS_NAME_PATTERN: RegExp;
+/**
+ * 缓动函数白名单。
+ *
+ * `cubic-bezier(...)` 单独放行（四个数字参数），其余一律按关键字精确匹配 ——
+ * 不做「看着像就放行」的模糊判断，缓动值同样会被拼进 CSS 文本。
+ */
+declare const ALLOWED_EASINGS: string[];
+/** 校验用：缓动值是否合法 */
+declare function isValidEasing(value: unknown): boolean;
+/** 校验用：关键帧的偏移键是否合法 */
+declare function isKeyframeOffset(value: unknown): boolean;
+
 /**
  * 倒计时。只负责「算时间」，不负责「长什么样」。
  *
@@ -312,4 +364,4 @@ declare function computeParts(endTime: number, now?: number): CountdownParts;
 /** 不给 children 时退化成一行文本，占位符 {d} {h} {hAll} {m} {s} {cs} */
 declare function formatParts(parts: CountdownParts, format?: string): string;
 
-export { ACTION_TYPES, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, toCssStyle, toLength, validate, validateUserFields };
+export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-Bj0xyWnx.js';
-export { q as DslAction, h as DslActionBase, o as DslCallAction, j as DslCloseAction, k as DslCloseAllAction, t as DslCloseButton, s as DslClosePosition, w as DslDerived, A as DslHandler, E as DslInteractionEvent, B as DslInteractionTrigger, f as DslLength, i as DslNavigateAction, r as DslNode, e as DslNodeType, l as DslOpenAction, g as DslRect, p as DslSequenceAction, m as DslSetStateAction, z as DslSource, v as DslSourceRef, u as DslStage, n as DslTrackAction, d as DslViewType, x as RenderElement, y as RenderLayer, H as RuntimeEmit, G as RuntimeEventName, F as RuntimeEvents } from './types-Bj0xyWnx.js';
+import { D as Dsl, R as RuntimeOptions, a as RenderTree, b as DslView, c as DslStyle, C as CssStyle } from './types-8FNxDXp0.js';
+export { s as DslAction, j as DslActionBase, h as DslAnimate, q as DslCallAction, l as DslCloseAction, m as DslCloseAllAction, v as DslCloseButton, u as DslClosePosition, y as DslDerived, E as DslHandler, G as DslInteractionEvent, F as DslInteractionTrigger, i as DslKeyframe, f as DslLength, k as DslNavigateAction, t as DslNode, e as DslNodeType, n as DslOpenAction, g as DslRect, r as DslSequenceAction, o as DslSetStateAction, B as DslSource, x as DslSourceRef, w as DslStage, p as DslTrackAction, d as DslViewType, z as RenderElement, A as RenderLayer, J as RuntimeEmit, I as RuntimeEventName, H as RuntimeEvents } from './types-8FNxDXp0.js';
 
 /**
  * 运行时。
@@ -271,6 +271,58 @@ declare function safeUrl(input: unknown): string;
 /** 图片额外允许 data:image/*，方便 base64 占位图 */
 declare function safeImageUrl(input: unknown): string;
 
+/**
+ * CSS 文本的值处理。
+ *
+ * 单独成文件是为了让 `hover.ts` 能复用而不与 `css.ts` 形成循环引用
+ * （`css.ts` 要拿 `hover.ts` 的预收集结果，反过来 `hover.ts` 只需要这几个纯函数）。
+ *
+ * 【安全】这里是整个包里唯一做字符串拼接产出样式的地方。行内样式那条路径由框架
+ * （Vue 的 style 绑定）负责转义，值再怪也只是不生效；而 CSS 文本是裸拼的，一个 `}`
+ * 就能提前闭合规则、接着写任意选择器。所以每个值都要过 `sanitizeCssValue`，
+ * 不合格的整条声明直接丢弃 —— 宁可少一条样式，也不能让配置写进任意 CSS。
+ */
+
+/**
+ * CSS 值安全过滤。
+ *
+ * 含 `{` `}` `<` `>` `;` `@` 或注释起始 `/*` 的值一律判为不安全，返回 `null`，
+ * 调用方据此丢弃**整条声明**（不是把字符删掉——半截值同样可能拼出意料外的效果）。
+ *
+ * @returns 安全的值字符串；不安全或空值返回 null
+ */
+declare function sanitizeCssValue(value: unknown): string | null;
+
+/**
+ * CSS 文本生成。
+ *
+ * 行内样式表达不了两件事：`@keyframes` 和 `:hover`。所以这一份配置除了渲染树之外，
+ * 还要产出一段 CSS 文本（`RenderTree.css`），由框架壳原样塞进一个 `<style>` 元素。
+ *
+ * 【安全】这是整个包里**唯一**做字符串拼接产出样式的地方。行内样式那条路径由框架
+ * （Vue 的 style 绑定）负责转义，值再怪也只是不生效；而 CSS 文本是裸拼的，一个 `}`
+ * 就能提前闭合规则、接着写任意选择器（改宿主页面的样式、拿 `content` 做钓鱼文案）。
+ * 所以这里的每个值都要过 `sanitizeCssValue`，每个名字都要过 `CSS_NAME_PATTERN`，
+ * 不合格的整条声明直接丢弃 —— 宁可少一条动画，也不能让配置写进任意 CSS。
+ *
+ * 【作用域】同一个页面上可能同时挂着好几份物料，keyframes 名和 hover 类名都是全局的，
+ * 重名就会互相覆盖。所以每个运行时实例领一个自增 uid，名字全部带上它。
+ */
+
+/** keyframes 名与作用域类名允许的字符：字母开头，字母 / 数字 / 下划线 / 中划线，最长 32 */
+declare const CSS_NAME_PATTERN: RegExp;
+/**
+ * 缓动函数白名单。
+ *
+ * `cubic-bezier(...)` 单独放行（四个数字参数），其余一律按关键字精确匹配 ——
+ * 不做「看着像就放行」的模糊判断，缓动值同样会被拼进 CSS 文本。
+ */
+declare const ALLOWED_EASINGS: string[];
+/** 校验用：缓动值是否合法 */
+declare function isValidEasing(value: unknown): boolean;
+/** 校验用：关键帧的偏移键是否合法 */
+declare function isKeyframeOffset(value: unknown): boolean;
+
 /**
  * 倒计时。只负责「算时间」，不负责「长什么样」。
  *
@@ -312,4 +364,4 @@ declare function computeParts(endTime: number, now?: number): CountdownParts;
 /** 不给 children 时退化成一行文本，占位符 {d} {h} {hAll} {m} {s} {cs} */
 declare function formatParts(parts: CountdownParts, format?: string): string;
 
-export { ACTION_TYPES, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, toCssStyle, toLength, validate, validateUserFields };
+export { ACTION_TYPES, ALLOWED_EASINGS, ALLOWED_STYLE_KEYS, BANNER_MIN_ASPECT_RATIO, CLOSE_POSITIONS, CSS_NAME_PATTERN, type CountdownParts, type CountdownPrecision, CssStyle, DEFAULT_USER_FIELDS, DSL_VERSION, Dsl, type DslRuntime, DslStyle, DslView, HOST_HANDLER_LABELS, HOST_HANDLER_NAMES, HOST_SOURCE_LABELS, HOST_SOURCE_NAMES, type HostHandlerName, type HostSourceName, type Issue, NODE_TYPES, type NormalizedViews, RenderTree, RuntimeOptions, SINGLE_VIEW_NAME, TRACK_EVENT_PATTERN, USER_FIELD_LABELS, type ValidateOptions, type ValidateResult, check, computeParts, createRuntime, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isRegisteredHostHandler, isRegisteredHostSource, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, safeImageUrl, safeUrl, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { normalizeViews, createTicker, evaluate, resolveNodeStyle, interpolateDeep, interpolate, toLength, toCssStyle, parseEndTime, computeParts, formatParts } from './chunk-DTHKC5AL.js';
-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, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isLength, isValidEndTime, normalizeViews, parseEndTime, toCssStyle, toLength, validate, validateUserFields } from './chunk-DTHKC5AL.js';
+import { normalizeViews, nextScopeUid, createTicker, createCssBuilder, declarations, toCssStyle, interpolateDeep, evaluate, resolveNodeStyle, interpolate, toLength, computeParts, formatParts, parseEndTime } from './chunk-DT3ZINDI.js';
+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, evaluate, formatIssues, formatParts, interpolate, interpolateDeep, isKeyframeOffset, isLength, isValidEasing, isValidEndTime, normalizeViews, parseEndTime, sanitizeCssValue, toCssStyle, toLength, validate, validateUserFields } from './chunk-DT3ZINDI.js';
 
 // src/url.ts
 var SAFE_PROTOCOLS = ["http:", "https:", "mailto:", "tel:"];
@@ -103,17 +103,13 @@ function createDispatcher(options) {
 // 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,
@@ -124,7 +120,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) {
@@ -133,7 +132,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);
@@ -141,20 +140,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%",
@@ -162,10 +167,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",
@@ -223,7 +257,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;
@@ -261,12 +296,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: [
@@ -289,7 +326,7 @@ function resolveCloseButton(config, layerName, closeTop) {
     return {
       key: `${layerName}-close`,
       tag: "div",
-      className: "dsl-close",
+      className,
       style,
       onClick,
       text: config.icon
@@ -298,7 +335,7 @@ function resolveCloseButton(config, layerName, closeTop) {
   return {
     key: `${layerName}-close`,
     tag: "div",
-    className: "dsl-close",
+    className,
     style,
     onClick,
     children: [closeIcon(`${layerName}-close-icon`, size)]
@@ -386,6 +423,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) {
@@ -393,7 +436,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(
@@ -409,7 +452,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)
@@ -418,7 +461,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)
@@ -427,7 +470,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)
       };
@@ -435,7 +478,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
@@ -444,7 +487,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
@@ -453,7 +496,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",
@@ -469,7 +512,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;
@@ -531,10 +574,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) {
@@ -551,7 +607,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"
     };
@@ -560,7 +616,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)
     };
@@ -569,7 +625,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,
@@ -585,6 +641,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 = () => {
 };
@@ -596,6 +683,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];
@@ -604,6 +692,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());
@@ -737,7 +826,9 @@ function createRuntime(dsl, options = {}) {
     });
   }
   loadData();
+  let hover;
   function getTree() {
+    if (!hover) hover = collectHoverStyles(normalized.views, scopeUid, buildContext());
     const tree = resolveTree({
       normalized,
       viewStack,
@@ -747,7 +838,11 @@ function createRuntime(dsl, options = {}) {
       dispatch,
       setState,
       closeTop,
-      countdownEnds
+      countdownEnds,
+      countdownStarts,
+      scopeUid,
+      keyframes: dsl.keyframes,
+      hover
     });
     ticker.sync(tree.countdownEndTimes, tree.countdownPrecision);
     return tree;

package/dist/report/index.d.cts

@@ -1,4 +1,4 @@
-import { G as RuntimeEventName, E as DslInteractionEvent } from '../types-Bj0xyWnx.cjs';
+import { I as RuntimeEventName, G as DslInteractionEvent } from '../types-8FNxDXp0.cjs';
 
 /**
  * 营销物料上报载荷类型（上报契约的唯一数据源）。

package/dist/report/index.d.ts

@@ -1,4 +1,4 @@
-import { G as RuntimeEventName, E as DslInteractionEvent } from '../types-Bj0xyWnx.js';
+import { I as RuntimeEventName, G as DslInteractionEvent } from '../types-8FNxDXp0.js';
 
 /**
  * 营销物料上报载荷类型（上报契约的唯一数据源）。