@yaoxiu/marketing-dsl 2.3.0 → 2.5.0

package/dist/docs/index.cjs

@@ -5,6 +5,11 @@ function toLength(value) {
   return typeof value === "number" ? `${value}px` : String(value);
 }
 var px = toLength;
+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],
@@ -57,6 +62,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 的热区必须靠它才能用百分比定位：
@@ -93,6 +118,17 @@ var USER_FIELD_LABELS = {
   serviceInfo: "\u5BA2\u670D\u4E0E\u793E\u7FA4\u4FE1\u606F\uFF08\u5BF9\u8C61\uFF0C\u6309\u9700\u53D6\u5B50\u5B57\u6BB5\uFF09"
 };
 
+// src/css.ts
+var ALLOWED_EASINGS = [
+  "linear",
+  "ease",
+  "ease-in",
+  "ease-out",
+  "ease-in-out",
+  "step-start",
+  "step-end"
+];
+
 // src/validate.ts
 var DSL_VERSION = 1;
 var NODE_TYPES = [
@@ -445,8 +481,228 @@ countdown_end          // \u5012\u8BA1\u65F6\u5F52\u96F6`
 ];
 var action_default = sections;
 
-// src/docs/sections/countdown.ts
+// src/docs/sections/animation.ts
 var sections2 = [
+  {
+    id: "animation",
+    title: "15. \u52A8\u753B\u4E0E hover",
+    blocks: [
+      {
+        t: "p",
+        text: "\u52A8\u753B\u5206\u4E24\u6B65\u5199\uFF1A\u5148\u5728**\u9876\u5C42** `keyframes` \u91CC\u5B9A\u4E49\u4E00\u7EC4\u5173\u952E\u5E27\uFF0C\u518D\u5728\u8981\u52A8\u7684\u5730\u65B9\u7528 `animate` \u5F15\u7528\u5B83\u3002\u5173\u952E\u5E27\u5E93\u5168\u914D\u7F6E\u5171\u7528\uFF0C\u591A\u89C6\u56FE\u4E4B\u95F4\u4E5F\u5171\u7528\uFF0C\u540C\u4E00\u7EC4\u5173\u952E\u5E27\u53EF\u4EE5\u88AB\u5F15\u7528\u4EFB\u610F\u591A\u6B21\u3002"
+      },
+      {
+        t: "code",
+        code: `{
+  "version": 1,
+  "keyframes": {
+    "zoomIn": {
+      "from": { "opacity": "0", "transform": "scale(0.7)" },
+      "to":   { "opacity": "1", "transform": "scale(1)" }
+    },
+    "floatY": {
+      "0%":   { "transform": "translateY(0)" },
+      "50%":  { "transform": "translateY(-8px)" },
+      "100%": { "transform": "translateY(0)" }
+    }
+  },
+  "stage": {
+    "animate": { "name": "zoomIn", "duration": 500, "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+    "maskAnimate": { "name": "fadeIn", "duration": 400 }
+  },
+  "nodes": [
+    { "type": "text", "content": "\u{1F9E7}",
+      "animate": { "name": "floatY", "duration": 3000, "easing": "ease-in-out", "iteration": "infinite" } }
+  ]
+}`
+      },
+      { t: "h3", text: "keyframes\uFF1A\u5173\u952E\u5E27\u5E93" },
+      {
+        t: "list",
+        items: [
+          "\u540D\u5B57\u53EA\u80FD\u7528\u5B57\u6BCD\u5F00\u5934\u7684\u5B57\u6BCD / \u6570\u5B57 / \u4E0B\u5212\u7EBF / \u4E2D\u5212\u7EBF\uFF0C\u6700\u957F 32 \u4E2A\u5B57\u7B26\uFF08\u5B83\u8981\u62FC\u8FDB CSS\uFF0C\u5FC5\u987B\u53EF\u63A7\uFF09",
+          "\u504F\u79FB\u91CF\u53EA\u8BA4 `from` / `to` / `50%` \u4E09\u79CD\u5199\u6CD5\uFF0C\u5199 `0.5` \u6216 `half` \u4F1A\u88AB\u62E6\u4E0B",
+          "\u6BCF\u4E00\u5E27\u7684\u503C\u662F**\u6837\u5F0F\u5BF9\u8C61**\uFF0C\u952E\u8D70\u7684\u662F\u7B2C 7 \u8282\u90A3\u4EFD style \u767D\u540D\u5355 \u2014\u2014 \u767D\u540D\u5355\u5916\u7684\u5C5E\u6027\u4F1A\u88AB\u4E22\u5F03\u5E76\u7ED9\u51FA\u8B66\u544A",
+          "\u52A8\u753B\u91CC\u5E38\u7528\u7684\u5C31 `transform` `opacity` `shadow` `background` `color` \u51E0\u4E2A\uFF1B\u6539\u5BBD\u9AD8\u4F1A\u9010\u5E27\u89E6\u53D1\u91CD\u6392\uFF0C\u80FD\u7528 `transform` \u5C31\u522B\u7528\u5BBD\u9AD8"
+        ]
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u5B9A\u4E49\u4E86\u5374\u6CA1\u6709\u4EFB\u4F55 `animate` \u5F15\u7528\u7684\u5173\u952E\u5E27\uFF0C\u4FDD\u5B58\u65F6\u4F1A\u7ED9\u51FA\u8B66\u544A\u3002\u591A\u534A\u662F\u6539\u914D\u7F6E\u65F6\u628A `animate` \u5220\u4E86\u5FD8\u4E86\u5220\u5173\u952E\u5E27\uFF0C\u6216\u8005\u540D\u5B57\u6253\u9519\u4E86\u4E00\u4E2A\u5B57\u6BCD \u2014\u2014 \u540E\u8005\u7684\u8868\u73B0\u662F\u300C\u4EC0\u4E48\u90FD\u6CA1\u53D1\u751F\u300D\uFF0C\u4E0D\u63D0\u793A\u7684\u8BDD\u5F88\u96BE\u60F3\u5230\u662F\u540D\u5B57\u7684\u95EE\u9898\u3002"
+      },
+      { t: "h3", text: "animate\uFF1A\u600E\u4E48\u64AD" },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u5FC5\u586B", "\u9ED8\u8BA4", "\u8BF4\u660E"],
+        rows: [
+          ["`name`", "\u662F", "\u2014", "\u5173\u952E\u5E27\u540D\uFF0C\u5FC5\u987B\u5728 `keyframes` \u91CC\u5B9A\u4E49\u8FC7\uFF0C\u5426\u5219\u4FDD\u5B58\u65F6\u62A5\u9519"],
+          ["`duration`", "\u662F", "\u2014", "\u65F6\u957F\uFF0C\u6BEB\u79D2\u3002\u5FC5\u987B\u5927\u4E8E 0"],
+          ["`delay`", "\u5426", "`0`", "\u5EF6\u8FDF\uFF0C\u6BEB\u79D2\u3002\u4EA4\u9519\u5165\u573A\u5C31\u9760\u5B83\u4E00\u683C\u4E00\u683C\u9519\u5F00"],
+          ["`easing`", "\u5426", "`ease`", `\u7F13\u52A8\uFF0C\u767D\u540D\u5355\u89C1\u4E0B`],
+          ["`iteration`", "\u5426", "`1`", "\u64AD\u653E\u6B21\u6570\uFF0C\u6B63\u6574\u6570\uFF1B`'infinite'` \u65E0\u9650\u5FAA\u73AF"],
+          [
+            "`direction`",
+            "\u5426",
+            "`normal`",
+            "`normal` / `reverse` / `alternate` / `alternate-reverse`"
+          ],
+          [
+            "`fill`",
+            "\u5426",
+            "`both`",
+            "`none` / `forwards` / `backwards` / `both`\u3002\u9ED8\u8BA4\u4FDD\u7559\u7EC8\u6001\uFF0C\u5165\u573A\u52A8\u753B\u4E0D\u8981\u6539\u5B83"
+          ]
+        ]
+      },
+      {
+        t: "p",
+        text: `\u53EF\u7528\u7684 \`easing\`\uFF1A${ALLOWED_EASINGS.map((item) => "`" + item + "`").join(" ")}\uFF0C
+\u4EE5\u53CA \`cubic-bezier(0.34, 1.56, 0.64, 1)\` \u8FD9\u79CD\u56DB\u53C2\u6570\u5199\u6CD5\uFF08\u8D85\u8C03\u66F2\u7EBF\u624D\u6709\u300C\u5F39\u4E00\u4E0B\u300D\u7684\u624B\u611F\uFF09\u3002
+\u522B\u7684\u5199\u6CD5\u4E00\u5F8B\u5728\u4FDD\u5B58\u65F6\u62A5\u9519\uFF0C\u4E0D\u505A\u300C\u770B\u7740\u50CF\u5C31\u653E\u884C\u300D\u7684\u6A21\u7CCA\u5224\u65AD\u3002`
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "`fill` \u9ED8\u8BA4\u662F `both`\uFF0C\u522B\u6539\u6210 `none`\uFF1A\u5165\u573A\u52A8\u753B\u4E0D\u4FDD\u7559\u7EC8\u6001\u7684\u8BDD\uFF0C\u64AD\u5B8C\u90A3\u4E00\u5E27\u4F1A\u76F4\u63A5\u5F39\u56DE\u521D\u59CB\u503C\uFF08\u900F\u660E\u3001\u7F29\u5C0F\uFF09\uFF0C\u770B\u7740\u50CF\u95EA\u4E86\u4E00\u4E0B\u3002"
+      },
+      { t: "h3", text: "\u80FD\u6302\u5728\u54EA" },
+      {
+        t: "table",
+        head: ["\u4F4D\u7F6E", "\u5178\u578B\u7528\u9014"],
+        rows: [
+          ["`stage.animate`", "\u5F39\u7A97\u4E3B\u4F53\u5165\u573A\uFF08\u653E\u5927\u56DE\u5F39\u3001\u4E0A\u6ED1\uFF09"],
+          [
+            "`stage.maskAnimate`",
+            "\u906E\u7F69\u6DE1\u5165\u3002\u548C\u821E\u53F0\u5206\u5F00\u914D\uFF0C\u624D\u80FD\u5404\u8D70\u5404\u7684\u65F6\u957F\uFF1B\u906E\u7F69\u914D\u8272\u53E6\u89C1\u7B2C 3 \u8282\u7684 `maskStyle`\uFF0C\u4E24\u8005\u4E92\u4E0D\u5E72\u6270"
+          ],
+          ["\u4EFB\u610F\u8282\u70B9\u7684 `animate`", "\u7EA2\u5305\u547C\u5438\u3001\u6309\u94AE\u8109\u51B2\u3001\u626B\u5149\u3001\u5149\u70B9\u4E0A\u6D6E\u3001\u5217\u8868\u4EA4\u9519\u5165\u573A"],
+          [
+            "`stage.closeButton.animate`",
+            "\u5EF6\u8FDF\u6DE1\u5165\u7684 \u2715\uFF08\u5148\u8BA9\u7528\u6237\u770B\u5185\u5BB9\uFF0C\u518D\u9732\u51FA\u5173\u95ED\u5165\u53E3\uFF09"
+          ]
+        ]
+      },
+      { t: "h3", text: "\u4EA4\u9519\u5165\u573A\uFF1A\u540C\u4E00\u7EC4\u5173\u952E\u5E27 + \u4E0D\u540C delay" },
+      {
+        t: "p",
+        text: "\u4E00\u6392\u5361\u7247\u4F9D\u6B21\u6D6E\u4E0A\u6765\uFF0C\u4E0D\u9700\u8981\u51E0\u7EC4\u5173\u952E\u5E27\uFF0C\u4E00\u7EC4 `cellIn` \u914D\u4E0D\u540C `delay` \u5C31\u591F\u4E86\u3002\u6CE8\u610F `delay` \u5FC5\u987B\u662F**\u5E38\u91CF\u6570\u5B57**\uFF0C\u4E0D\u652F\u6301 `{{ }}` \u63D2\u503C \u2014\u2014 \u5B83\u8981\u62FC\u8FDB CSS \u7B80\u5199\uFF0C\u63D2\u503C\u8FDB\u53BB\u5C31\u6CA1\u6CD5\u505A\u5B89\u5168\u8FC7\u6EE4\u4E86\u3002\u6240\u4EE5\u6570\u91CF\u56FA\u5B9A\u7684\u4EA4\u9519\u5217\u8868\u8981\u4E00\u683C\u4E00\u683C\u5199\uFF0C\u4E0D\u80FD\u7528 `repeat` \u5FAA\u73AF\u51FA\u6765\u3002"
+      },
+      {
+        t: "code",
+        code: `"keyframes": {
+  "cellIn": {
+    "0%":   { "opacity": "0", "transform": "translateY(10px)" },
+    "100%": { "opacity": "1", "transform": "translateY(0)" }
+  }
+}
+
+// \u4E94\u4E2A\u683C\u5B50\uFF0C\u6BCF\u683C\u665A 80ms
+{ "animate": { "name": "cellIn", "duration": 460, "delay": 340, "easing": "ease-out" } }
+{ "animate": { "name": "cellIn", "duration": 460, "delay": 420, "easing": "ease-out" } }
+{ "animate": { "name": "cellIn", "duration": 460, "delay": 500, "easing": "ease-out" } }`
+      },
+      { t: "h3", text: "\u65E0\u9650\u5FAA\u73AF\uFF1A\u547C\u5438\u3001\u626B\u5149\u3001\u5149\u70B9" },
+      {
+        t: "list",
+        items: [
+          '\u5FAA\u73AF\u52A8\u753B\u4E00\u5F8B `"iteration": "infinite"`\uFF0C\u914D `ease-in-out` \u6700\u81EA\u7136\uFF1B\u626B\u5149\u8FD9\u7C7B\u5300\u901F\u7684\u7528 `linear`',
+          "\u5FAA\u73AF\u5E45\u5EA6\u8981\u5C0F\u3002\u6309\u94AE\u8109\u51B2\u653E\u5927 2% \u5C31\u591F\uFF0C\u653E\u5927 10% \u4F1A\u628A\u5468\u56F4\u7684\u6392\u7248\u9876\u52A8\u3001\u4E5F\u6643\u773C",
+          '\u88C5\u9970\u6027\u56FE\u5C42\uFF08\u5149\u6655\u3001\u626B\u5149\u6761\u3001\u5149\u70B9\uFF09\u5FC5\u987B\u5199 `"pointerEvents": "none"`\uFF0C\u5426\u5219\u4F1A\u6321\u4F4F\u4E0B\u9762\u7684\u6309\u94AE',
+          "\u626B\u5149\u7528 `transform` \u4F4D\u79FB\uFF0C\u4E0D\u8981\u52A8 `left`\uFF1A\u52A8 `left` \u6BCF\u5E27\u90FD\u8981\u91CD\u6392\uFF0C`transform` \u53EA\u8D70\u5408\u6210\u5C42",
+          "\u6309\u94AE\u547C\u5438\u4F18\u5148\u52A8 `shadow` \u800C\u4E0D\u662F\u5C3A\u5BF8\uFF1A\u5C3A\u5BF8\u4E00\u53D8\uFF0C\u6574\u5757\u5185\u5BB9\u90FD\u4F1A\u8DDF\u7740\u52A8"
+        ]
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u4E00\u4E2A\u8282\u70B9\u53EA\u80FD\u6302\u4E00\u7EC4 `animate`\u3002\u65E2\u8981\u5165\u573A\u53C8\u8981\u5FAA\u73AF\u65F6\uFF0C\u628A\u5B83\u4EEC\u62C6\u5230\u7236\u5B50\u4E24\u5C42\u4E0A\uFF1A\u5916\u5C42\u8D1F\u8D23\u5165\u573A\uFF0C\u5185\u5C42\u8D1F\u8D23\u5FAA\u73AF\u3002"
+      },
+      { t: "h3", text: "hoverStyle\uFF1A\u9F20\u6807\u60AC\u505C" },
+      {
+        t: "p",
+        text: "`hoverStyle` \u548C `style` \u7528\u7684\u662F**\u540C\u4E00\u5957**\u5C5E\u6027\u767D\u540D\u5355\uFF0C\u5199\u6CD5\u4E5F\u4E00\u6837\uFF0C\u533A\u522B\u53EA\u5728\u4E8E\u5B83\u53EA\u5728\u9F20\u6807\u60AC\u505C\u65F6\u751F\u6548\u3002\u8282\u70B9\u548C `stage.closeButton` \u4E0A\u90FD\u80FD\u5199\u3002"
+      },
+      {
+        t: "code",
+        code: `{
+  "type": "text", "content": "\u2715",
+  "style": { "background": "rgba(0,0,0,0.08)", "transition": "background 0.2s" },
+  "hoverStyle": { "background": "rgba(0,0,0,0.2)" }
+}`
+      },
+      {
+        t: "list",
+        items: [
+          "\u60F3\u8981\u5E73\u6ED1\u8FC7\u6E21\u5C31\u5728 `style` \u91CC\u5199 `transition`\uFF0C`hoverStyle` \u53EA\u8D1F\u8D23\u7EC8\u6001",
+          "\u89E6\u5C4F\u6CA1\u6709 hover\uFF0C\u6240\u4EE5 `hoverStyle` \u53EA\u80FD\u505A\u9526\u4E0A\u6DFB\u82B1\u7684\u6548\u679C\uFF0C**\u4E0D\u80FD\u627F\u8F7D\u4FE1\u606F**\uFF08\u522B\u628A\u4EF7\u683C\u85CF\u5728 hover \u91CC\uFF09",
+          "`hoverStyle` \u4F1A\u751F\u6210\u4E00\u6761 CSS \u89C4\u5219\u800C\u4E0D\u662F\u884C\u5185\u6837\u5F0F \u2014\u2014 \u884C\u5185\u6837\u5F0F\u6CA1\u6709 `:hover` \u8FD9\u56DE\u4E8B",
+          "`hoverStyle` \u91CC\u7684 `{{ }}` \u53EA\u5728\u9996\u5C4F\u6C42\u503C\u4E00\u6B21\uFF0C\u4E4B\u540E\u4E0D\u968F state \u53D8\u5316\u3002\u8981\u8DDF\u7740\u72B6\u6001\u53D8\u7684\u6837\u5F0F\u5199\u5728 `style` \u91CC \u2014\u2014 hover \u89C4\u5219\u82E5\u968F\u72B6\u6001\u53D8\uFF0C\u6574\u5F20\u6837\u5F0F\u8868\u5C31\u5F97\u53CD\u590D\u91CD\u5199\uFF0C\u9875\u9762\u4E0A\u6B63\u5728\u8DD1\u7684\u52A8\u753B\u4F1A\u5168\u90E8\u91CD\u5934\u64AD\u4E00\u904D"
+        ]
+      },
+      { t: "h3", text: "\u60AC\u505C\u65F6\u6682\u505C\u5FAA\u73AF\u52A8\u753B" },
+      {
+        t: "p",
+        text: '\u6309\u94AE\u4E00\u76F4\u5728\u547C\u5438\uFF0C\u9F20\u6807\u79FB\u4E0A\u53BB\u65F6\u505C\u4F4F\u3001\u770B\u6E05\u695A\u518D\u70B9\uFF0C\u662F\u5E38\u89C1\u505A\u6CD5\u3002\u5199 `animationPlayState: "paused"` \u5373\u53EF \u2014\u2014 \u5B83\u4E0D\u91CD\u64AD\u3001\u4E0D\u8DF3\u5E27\uFF0C\u5C31\u505C\u5728\u5F53\u524D\u90A3\u4E00\u5E27\uFF0C\u79FB\u5F00\u7EE7\u7EED\u3002\u53EA\u5728 `hoverStyle` \u91CC\u5199\u624D\u6709\u610F\u4E49\uFF08\u5199\u8FDB `style` \u7B49\u4E8E\u4E00\u4E0A\u6765\u5C31\u662F\u6682\u505C\u7684\uFF09\u3002'
+      },
+      {
+        t: "code",
+        code: `{
+  "type": "button", "text": "\u7ACB\u5373\u9886\u53D6",
+  "style": { "transition": "transform 0.18s" },
+  "animate": { "name": "breath", "duration": 2400, "easing": "ease-in-out", "iteration": "infinite" },
+  "hoverStyle": { "transform": "translateY(-2px)", "animationPlayState": "paused" }
+}`
+      },
+      { t: "h3", text: "\u7CFB\u7EDF\u5F00\u4E86\u300C\u51CF\u5C11\u52A8\u6001\u6548\u679C\u300D\u4F1A\u81EA\u52A8\u9759\u6B62" },
+      {
+        t: "p",
+        text: "\u89E3\u91CA\u5668\u5728\u751F\u6210\u7684 CSS \u672B\u5C3E\u6052\u5B9A\u8FFD\u52A0\u4E00\u6761 `@media (prefers-reduced-motion: reduce)`\uFF0C\u628A\u8FD9\u4EFD\u7269\u6599\u91CC\u7684 `animation` \u4E0E `transition` \u5168\u90E8\u5173\u6389\u3002\u8FD9\u662F\u65E0\u969C\u788D\u8981\u6C42\uFF0C\u4E5F\u786E\u5B9E\u6709\u4EBA\u4E00\u770B\u52A8\u753B\u5C31\u6655\u3002**\u4E0D\u9700\u8981\u5728\u914D\u7F6E\u91CC\u505A\u4EFB\u4F55\u4E8B**\uFF0C\u4E5F\u6CA1\u6709\u5F00\u5173\u53EF\u4EE5\u7ED5\u8FC7\u5B83 \u2014\u2014 \u6240\u4EE5\u52A8\u753B\u53EA\u80FD\u662F\u9526\u4E0A\u6DFB\u82B1\uFF1A\u9759\u6B62\u72B6\u6001\u4E0B\u8FD9\u4EFD\u7269\u6599\u4E5F\u5FC5\u987B\u5B8C\u6574\u53EF\u8BFB\u3001\u53EF\u70B9\u3002"
+      },
+      { t: "h3", text: "\u4E3A\u4EC0\u4E48\u4E0D\u80FD\u76F4\u63A5\u5199 CSS" },
+      {
+        t: "p",
+        text: "\u5E38\u6709\u4EBA\u95EE\uFF1A\u65E2\u7136\u90FD\u80FD\u5199 `transform` \u4E86\uFF0C\u4E3A\u4EC0\u4E48\u4E0D\u5E72\u8106\u653E\u5F00 `position`\u3001\u653E\u5F00\u4E00\u4E2A `css` \u5B57\u6BB5\u968F\u4FBF\u5199\uFF1F\u56E0\u4E3A\u8FD9\u4EFD\u914D\u7F6E\u662F**\u4ECE\u540E\u53F0\u4E0B\u53D1\u3001\u8DD1\u5728\u7528\u6237\u9875\u9762\u4E0A\u7684**\uFF0C\u5B83\u548C\u9875\u9762\u5171\u4EAB\u540C\u4E00\u4E2A DOM\u3002"
+      },
+      {
+        t: "list",
+        items: [
+          "`position: fixed` + \u94FA\u6EE1\u89C6\u53E3 = \u4E00\u4EFD\u7269\u6599\u53EF\u4EE5\u76D6\u4F4F\u6574\u4E2A\u9875\u9762\uFF0C\u5305\u62EC\u6536\u94F6\u53F0\u548C\u5BFC\u822A \u2014\u2014 \u8FD9\u662F\u9493\u9C7C\u7684\u6807\u51C6\u505A\u6CD5\u3002\u5F39\u7A97\u8981\u94FA\u6EE1\u89C6\u53E3\u7531\u89E3\u91CA\u5668\u81EA\u5DF1\u5B8C\u6210\uFF0C\u4E0D\u7ECF\u8FC7\u914D\u7F6E",
+          "`z-index` \u53EA\u5141\u8BB8 0~10\uFF1A\u5C42\u5185\u6392\u5E03\u5341\u5C42\u7EF0\u7EF0\u6709\u4F59\uFF0C\u771F\u8981\u538B\u8FC7\u9875\u9762\u5176\u5B83\u5185\u5BB9\u7684\u662F\u5F39\u7A97\u5C42\uFF0C\u90A3\u7531\u89E3\u91CA\u5668\u7ED9",
+          "\u81EA\u7531 CSS \u610F\u5473\u7740\u53EF\u4EE5\u5199\u4EFB\u610F\u9009\u62E9\u5668\u53BB\u6539**\u5BBF\u4E3B\u9875\u9762**\u7684\u6837\u5F0F\uFF0C\u8D8A\u6743\u8303\u56F4\u6CA1\u6709\u8FB9\u754C",
+          "\u767D\u540D\u5355\u8FD8\u6709\u4E00\u4E2A\u597D\u5904\uFF1A\u5C5E\u6027\u6709\u9650\uFF0C\u7F16\u8F91\u5668\u624D\u80FD\u505A\u51FA\u53EF\u89C6\u5316\u9762\u677F\uFF1B\u81EA\u7531 CSS \u53EA\u80FD\u7ED9\u4E00\u4E2A\u6587\u672C\u6846"
+        ]
+      },
+      { t: "h3", text: "\u5B89\u5168\u8FC7\u6EE4\uFF1A\u4EC0\u4E48\u4F1A\u88AB\u6084\u6084\u4E22\u6389" },
+      {
+        t: "p",
+        text: "`keyframes` \u4E0E `hoverStyle` \u662F\u552F\u4E8C\u4F1A\u88AB**\u62FC\u6210 CSS \u6587\u672C**\u7684\u5730\u65B9\uFF08\u884C\u5185\u6837\u5F0F\u90A3\u6761\u8DEF\u5F84\u7531\u6846\u67B6\u8F6C\u4E49\uFF0C\u503C\u518D\u602A\u4E5F\u53EA\u662F\u4E0D\u751F\u6548\uFF09\u3002\u6240\u4EE5\u8FD9\u4E24\u5904\u7684\u6BCF\u4E2A\u503C\u90FD\u8981\u8FC7\u4E00\u904D\u8FC7\u6EE4\uFF0C\u4E0D\u5408\u683C\u7684**\u6574\u6761\u58F0\u660E\u4E22\u5F03**\uFF1A"
+      },
+      {
+        t: "list",
+        items: [
+          "\u503C\u91CC\u51FA\u73B0 `{` `}` `<` `>` `;` `@`\u3001\u6CE8\u91CA\u7B26 `/*` `*/` \u6216\u53CD\u659C\u6760 `\\` \u2014\u2014 \u8FD9\u4E9B\u5B57\u7B26\u80FD\u63D0\u524D\u95ED\u5408\u89C4\u5219\u3001\u63A5\u7740\u5199\u4EFB\u610F\u9009\u62E9\u5668",
+          "\u767D\u540D\u5355\u5916\u7684\u6837\u5F0F\u5C5E\u6027\uFF08\u540C `style`\uFF09",
+          "\u5173\u952E\u5E27\u540D / \u7F13\u52A8\u503C\u683C\u5F0F\u4E0D\u5408\u89C4\uFF08\u8FD9\u4E24\u9879\u5728\u4FDD\u5B58\u65F6\u5C31\u4F1A\u62A5\u9519\uFF0C\u4E0D\u4F1A\u8D70\u5230\u8FD0\u884C\u65F6\uFF09"
+        ]
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "\u88AB\u4E22\u5F03\u7684\u662F**\u90A3\u4E00\u6761\u58F0\u660E**\uFF0C\u4E0D\u662F\u628A\u8FDD\u89C4\u5B57\u7B26\u5220\u6389\u540E\u7167\u5199 \u2014\u2014 \u534A\u622A\u503C\u540C\u6837\u53EF\u80FD\u62FC\u51FA\u610F\u6599\u5916\u7684\u6548\u679C\u3002\u6B63\u5E38\u5199\u989C\u8272\u3001`transform`\u3001\u9634\u5F71\u90FD\u78B0\u4E0D\u5230\u8FD9\u4E9B\u5B57\u7B26\uFF0C\u771F\u78B0\u5230\u4E86\u57FA\u672C\u5C31\u662F\u590D\u5236\u7C98\u8D34\u5E26\u8FDB\u4E86\u591A\u4F59\u5185\u5BB9\u3002"
+      },
+      { t: "h3", text: "\u5B8C\u6574\u4F8B\u5B50" },
+      {
+        t: "p",
+        text: "\u793A\u4F8B \u246A\u246B \u662F\u642C\u5BB6\u6210\u529F\u9875\u4E24\u4E2A\u7EBF\u4E0A\u5F39\u7A97\u7684\u4E00\u6BD4\u4E00\u590D\u523B\uFF1A\u246A \u6F14\u793A\u5165\u573A + \u547C\u5438 + \u76F8\u5BF9\u65F6\u957F\u5012\u8BA1\u65F6\uFF0C\u246B \u662F\u52A8\u753B\u6700\u5BC6\u7684\u4E00\u4EFD\uFF08\u5341\u4E00\u7EC4\u5173\u952E\u5E27\uFF1A\u5149\u6655\u547C\u5438\u3001\u5149\u70B9\u4E0A\u6D6E\u3001\u626B\u5149\u3001\u4EA4\u9519\u5165\u573A\u3001\u89D2\u6807\u8F7B\u6D6E\u3001CTA \u547C\u5438\uFF09\uFF0C\u4E24\u4EFD\u90FD\u5E26\u4E8C\u6B21\u633D\u7559\u5F39\u7A97\u3002\u8981\u505A\u52A8\u753B\u5F39\u7A97\uFF0C\u6539\u8FD9\u4E24\u4EFD\u6BD4\u4ECE\u96F6\u5199\u5FEB\u5F97\u591A\u3002"
+      }
+    ]
+  }
+];
+var animation_default = sections2;
+
+// src/docs/sections/countdown.ts
+var sections3 = [
   {
     id: "countdown",
     title: "10. \u5012\u8BA1\u65F6",
@@ -520,6 +776,22 @@ var sections2 = [
     "style": { "color": "#999" } }
 ]`
       },
+      { t: "h3", text: "duration\uFF1A\u6BCF\u6B21\u6253\u5F00\u91CD\u65B0\u5012\u8BA1\u65F6" },
+      {
+        t: "p",
+        text: '`to` \u662F**\u7EDD\u5BF9**\u7ED3\u675F\u65F6\u95F4\uFF08\u6D3B\u52A8\u51E0\u53F7\u51E0\u70B9\u622A\u6B62\uFF09\uFF0C`duration` \u662F**\u76F8\u5BF9**\u65F6\u957F\uFF08\u6BEB\u79D2\uFF09\uFF0C\u4ECE\u8FD9\u4E00\u5C4F\u771F\u6B63\u5C55\u793A\u7684\u90A3\u4E00\u523B\u8D77\u7B97\u3002\u300C\u6253\u5F00\u5F39\u7A97\u540E 5 \u5206\u949F\u5185\u4E0B\u5355\u300D\u8FD9\u79CD\u8425\u9500\u8BDD\u672F\u7528\u540E\u8005\uFF0C\u5199 `"duration": 300000` \u5373\u53EF\uFF0C\u4E0D\u7528\u53BB\u7B97\u7ED3\u675F\u65F6\u95F4\u3002\u4E24\u4E2A\u81F3\u5C11\u8981\u6709\u4E00\u4E2A\uFF0C\u540C\u65F6\u5199\u4EE5 `to` \u4E3A\u51C6\uFF08\u5E76\u7ED9\u51FA\u8B66\u544A\uFF09\u3002'
+      },
+      {
+        t: "code",
+        code: `{ "type": "countdown", "duration": 300000, "precision": "cs",
+  "onEnd": { "type": "closeAll", "reason": "countdown-end" },
+  "children": [ /* \u540C\u4E0A */ ] }`
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u8D77\u7B97\u65F6\u523B\u9489\u5728\u8FD0\u884C\u65F6\u91CC\uFF1A\u5207 tab\u3001\u6539 state \u5BFC\u81F4\u6574\u68F5\u6E32\u67D3\u6811\u91CD\u7B97\uFF0C\u5269\u4F59\u65F6\u95F4**\u4E0D\u4F1A**\u88AB\u5237\u56DE\u53BB\u3002\u4F46\u5173\u6389\u518D\u6253\u5F00\u5C31\u662F\u65B0\u7684\u4E00\u8F6E \u2014\u2014 \u8FD9\u6B63\u662F\u300C\u6BCF\u6B21\u6253\u5F00\u91CD\u65B0\u5012 5 \u5206\u949F\u300D\u60F3\u8981\u7684\u6548\u679C\u3002"
+      },
       { t: "h3", text: "to\uFF1A\u7ED3\u675F\u65F6\u95F4\u600E\u4E48\u5199" },
       { t: "p", text: "**\u4E0D\u9700\u8981\u65F6\u95F4\u6233**\uFF0C\u76F4\u63A5\u5199\u65E5\u671F\u5C31\u884C\u3002\u4E0B\u9762\u8FD9\u4E9B\u5199\u6CD5\u90FD\u80FD\u8BC6\u522B\uFF1A" },
       {
@@ -551,14 +823,14 @@ var sections2 = [
     ]
   }
 ];
-var countdown_default = sections2;
+var countdown_default = sections3;
 
 // src/docs/sections/data-state.ts
 var userFieldRows = DEFAULT_USER_FIELDS.map((field) => [
   `\`user.${field}\``,
   USER_FIELD_LABELS[field] || ""
 ]);
-var sections3 = [
+var sections4 = [
   {
     id: "data",
     title: "8. \u6570\u636E\u4E0E\u72B6\u6001",
@@ -588,7 +860,12 @@ var sections3 = [
       {
         t: "note",
         tone: "info",
-        text: "**\u76EE\u524D\u5DF2\u6CE8\u518C\u7684\u6570\u636E\u6E90**\uFF1A`shopAchievements`\uFF08\u5E97\u94FA\u6210\u679C\u7EDF\u8BA1\uFF0C\u8FD4\u56DE\u9879\u5B57\u6BB5 `v` \u52A8\u8BCD / `n` \u6570\u5B57 / `u` \u5355\u4F4D / `l` \u8BF4\u660E\uFF0C\u793A\u4F8B \u2462\u2463 \u7684\u6210\u679C\u683C\u5B50\u7528\u7684\u5C31\u662F\u5B83\uFF09\u3001`listRenewTiers`\uFF08\u7EED\u8D39\u4EF7\u683C\u6863\u4F4D\uFF0C\u5B57\u6BB5 `key` / `p` / `price` / `per` / `flag` / `hot` / `url`\uFF0C\u89C1\u793A\u4F8B \u2462\uFF09\u3002\u8981\u65B0\u7684\u627E\u524D\u7AEF\u767B\u8BB0\u3002"
+        text: "**\u76EE\u524D\u5DF2\u6CE8\u518C\u7684\u6570\u636E\u6E90**\uFF1A`userStatistics`\uFF08\u7528\u6237\u6570\u636E\u7EDF\u8BA1\uFF0C\u8FD4\u56DE\u4E00\u4E2A**\u6241\u5E73\u5BF9\u8C61**\u800C\u4E0D\u662F\u6570\u7EC4\uFF0C\u5B57\u6BB5\u540D\u5C31\u662F\u540E\u7AEF\u7684 snake_case\uFF0C\u5982 `move_success_count` \u7D2F\u8BA1\u642C\u5BB6\u6210\u529F\u6570 / `balance` \u642C\u5BB6\u6B21\u6570\u4F59\u989D / `ai_optimize_count` AI \u81EA\u52A8\u4F18\u5316\u6B21\u6570 / `white_image_fill_count` \u8865\u767D\u5E95\u56FE\u6B21\u6570\uFF0C\u793A\u4F8B \u2462\u2463 \u7684\u6210\u679C\u683C\u5B50\u7528\u7684\u5C31\u662F\u5B83\uFF09\u3001`listRenewTiers`\uFF08\u7EED\u8D39\u4EF7\u683C\u6863\u4F4D**\u6570\u7EC4**\uFF0C\u9879\u5B57\u6BB5 `key` / `p` / `price` / `per` / `flag` / `hot` / `url`\uFF0C\u89C1\u793A\u4F8B \u2462\uFF09\u3002\u8981\u65B0\u7684\u627E\u524D\u7AEF\u767B\u8BB0\u3002"
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: '**\u8FD4\u56DE\u6241\u5E73\u5BF9\u8C61\u7684\u6570\u636E\u6E90\uFF08\u5982 `userStatistics`\uFF09\u4E0D\u80FD\u7528 `repeat` \u7684 `bind` \u904D\u5386**\uFF0C\u683C\u5B50\u53EA\u80FD\u4E00\u4E2A\u4E2A\u5199\uFF0C\u6BCF\u683C\u76F4\u63A5\u63D2\u503C `{{ stat.move_success_count }}`\u3002\u4E5F\u4E0D\u8981\u8BD5\u56FE\u5728 `data` \u7684\u5199\u6B7B\u6570\u7EC4\u91CC\u585E `{{ }}` \u518D\u9760 `bind` \u5C55\u5F00 \u2014\u2014 `data` \u91CC\u7684\u9759\u6001\u503C\u539F\u6837\u5B58\uFF0C`{{ }}` \u53EA\u5728\u6E32\u67D3\u8282\u70B9\u65F6\u6C42\u503C\u4E00\u6B21\uFF0C`{{ item.n }}` \u6C42\u51FA\u6765\u662F\u5B57\u7B26\u4E32 `"{{ stat.xxx }}"`\uFF0C**\u4E0D\u4F1A\u4E8C\u6B21\u6C42\u503C**\uFF0C\u9875\u9762\u4E0A\u4F1A\u539F\u6837\u663E\u793A\u8FD9\u4E00\u4E32\u82B1\u62EC\u53F7\u3002'
       },
       {
         t: "p",
@@ -726,10 +1003,10 @@ var sections3 = [
     ]
   }
 ];
-var data_state_default = sections3;
+var data_state_default = sections4;
 
 // src/docs/sections/guide-basics.ts
-var sections4 = [
+var sections5 = [
   {
     id: "ai",
     title: "0. \u4E0D\u4F1A\u5199 JSON\uFF1F\u7528 AI \u751F\u6210",
@@ -842,10 +1119,10 @@ var sections4 = [
     ]
   }
 ];
-var guide_basics_default = sections4;
+var guide_basics_default = sections5;
 
 // src/docs/sections/guide-layout.ts
-var sections5 = [
+var sections6 = [
   {
     id: "layout",
     title: "4. \u5E03\u5C40\u6A21\u578B\uFF08\u6700\u91CD\u8981\uFF09",
@@ -988,10 +1265,10 @@ var sections5 = [
     ]
   }
 ];
-var guide_layout_default = sections5;
+var guide_layout_default = sections6;
 
 // src/docs/sections/guide-stage.ts
-var sections6 = [
+var sections7 = [
   {
     id: "stage",
     title: "3. stage \u821E\u53F0",
@@ -1004,6 +1281,8 @@ var sections6 = [
   "layout": "flow",              // absolute\uFF08\u9ED8\u8BA4\uFF09| flow
   "mask": true,                  // \u662F\u5426\u6709\u534A\u900F\u660E\u906E\u7F69\uFF0C\u4EC5 popup \u6709\u6548
   "maskClosable": false,         // \u70B9\u906E\u7F69\u80FD\u5426\u5173\u95ED
+  "maskStyle": { "background": "rgba(0,0,0,0.65)" },   // \u906E\u7F69\u914D\u8272\uFF08\u53EF\u9009\uFF09
+  "maskAction": { "type": "open", "view": "confirm" }, // \u70B9\u906E\u7F69\u505A\u4EC0\u4E48\uFF08\u53EF\u9009\uFF09
   "closeButton": {
     "show": true,
     "position": "top-right",     // top-right | top-left | bottom-center
@@ -1020,7 +1299,17 @@ var sections6 = [
           ["height", "400", '\u6570\u5B57\u6309 px\uFF1B\u5199 `auto` \u65F6\u5FC5\u987B\u540C\u65F6\u8BBE `layout: "flow"`'],
           ["layout", "absolute", "\u5B50\u8282\u70B9\u6392\u5E03\u65B9\u5F0F\uFF0C\u89C1\u7B2C 4 \u8282\u3002\u9009\u9519\u662F\u6700\u5E38\u89C1\u7684\u9519\u8BEF"],
           ["mask", "true", "\u4EC5 popup \u751F\u6548"],
-          ["maskClosable", "false", "\u70B9\u906E\u7F69\u5173\u95ED"],
+          ["maskClosable", "false", "\u70B9\u906E\u7F69\u80FD\u4E0D\u80FD\u70B9\uFF08\u80FD\u4E0D\u80FD\u5173\uFF09"],
+          [
+            "maskStyle",
+            "`rgba(0,0,0,0.55)`",
+            "\u906E\u7F69\u81EA\u8EAB\u6837\u5F0F\uFF0C\u8D70 style \u767D\u540D\u5355\u3002\u5E38\u7528 `background` \u8C03\u6DF1\u6D45\u3001`backdropFilter` \u52A0\u6BDB\u73BB\u7483"
+          ],
+          [
+            "maskAction",
+            "\u65E0\uFF08\u5173\u6389\u8FD9\u4E00\u5C42\uFF09",
+            "\u70B9\u906E\u7F69\u6267\u884C\u7684\u52A8\u4F5C\u3002\u914D\u4E86\u5C31**\u4E0D\u5173\u5C42**\uFF0C\u53EA\u6267\u884C\u52A8\u4F5C"
+          ],
           ["closeButton", "\u65E0", "\u4E0D\u5199\u5C31\u6CA1\u6709\u5173\u95ED\u6309\u94AE"],
           ["style", "\u65E0", "\u821E\u53F0\u81EA\u8EAB\u6837\u5F0F\uFF0C\u5E38\u7528 `radius` / `maxWidth` / `background`"]
         ]
@@ -1030,6 +1319,32 @@ var sections6 = [
         tone: "info",
         text: "\u5F39\u7A97\u6BD4\u5C4F\u5E55\u9AD8\u65F6\u4F1A\u81EA\u52A8\u51FA\u73B0\u6EDA\u52A8\uFF0C\u4E0D\u4F1A\u88AB\u88C1\u6389\u3002\u6240\u4EE5\u505A\u957F\u5F39\u7A97\u4E0D\u7528\u62C5\u5FC3\u5C0F\u5C4F\u770B\u4E0D\u5168\uFF0C\u4F46\u4ECD\u5EFA\u8BAE\u63A7\u5236\u5728 700px \u4EE5\u5185\u3002"
       },
+      { t: "h3", text: "\u906E\u7F69\uFF1A\u6539\u914D\u8272\u3001\u6539\u70B9\u51FB\u884C\u4E3A" },
+      {
+        t: "p",
+        text: "\u906E\u7F69\u9ED8\u8BA4\u662F `rgba(0, 0, 0, 0.55)` \u7684\u7EAF\u8272\u3002`maskStyle` \u8986\u76D6\u5B83\uFF0C\u8D70\u7684\u662F\u7B2C 7 \u8282\u90A3\u4EFD style \u767D\u540D\u5355\uFF0C\u5199\u522B\u7684\u5C5E\u6027\u4F1A\u88AB\u5FFD\u7565\uFF08\u4FDD\u5B58\u65F6\u7ED9\u8B66\u544A\uFF09\u3002\u94FA\u6EE1\u3001\u5C42\u7EA7\u8FD9\u4E9B\u5730\u57FA\u7531\u89E3\u91CA\u5668\u7ED9\uFF0C\u914D\u7F6E\u76D6\u4E0D\u6389\u3002"
+      },
+      {
+        t: "code",
+        code: `"stage": {
+  "mask": true,
+  "maskClosable": true,
+  // \u66F4\u91CD\u7684\u906E\u7F69 + \u6BDB\u73BB\u7483\uFF08\u80CC\u540E\u9875\u9762\u7CCA\u6389\uFF0C\u5F39\u7A97\u66F4\u805A\u7126\uFF09
+  "maskStyle": { "background": "rgba(0,0,0,0.65)", "backdropFilter": "blur(4px)" },
+  // \u70B9\u906E\u7F69\u4E0D\u76F4\u63A5\u5173\uFF0C\u5148\u5F39\u4E8C\u6B21\u633D\u7559
+  "maskAction": { "type": "open", "view": "confirm", "mode": "stack" }
+}`
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "`maskClosable` \u548C `maskAction` \u5404\u7BA1\u4E00\u4EF6\u4E8B\uFF1A\u524D\u8005\u51B3\u5B9A**\u906E\u7F69\u54CD\u4E0D\u54CD\u5E94\u70B9\u51FB**\uFF0C\u540E\u8005\u51B3\u5B9A**\u70B9\u4E86\u4E4B\u540E\u505A\u4EC0\u4E48**\u3002\u6240\u4EE5 `maskClosable: false` \u65F6\u906E\u7F69\u4ECD\u7136\u70B9\u4E0D\u52A8\uFF0C\u5149\u914D `maskAction` \u6CA1\u6709\u7528\uFF08\u4FDD\u5B58\u65F6\u4F1A\u63D0\u9192\uFF09\u3002\u60F3\u300C\u70B9\u906E\u7F69\u5F39\u633D\u7559\u300D\u5C31\u4E24\u4E2A\u4E00\u8D77\u5199\u3002"
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "`maskStyle` \u548C `maskAnimate`\uFF08\u7B2C 15 \u8282\uFF09\u4E92\u4E0D\u5E72\u6270\uFF1A\u52A8\u753B\u7684 `animation` \u6C38\u8FDC\u6392\u5728\u6700\u540E\uFF0C\u6539\u914D\u8272\u4E0D\u4F1A\u628A\u6DE1\u5165\u5F04\u4E22\u3002"
+      },
       { t: "h3", text: "closeButton \u5173\u95ED\u6309\u94AE" },
       {
         t: "code",
@@ -1042,7 +1357,9 @@ var sections6 = [
   // icon / image \u90FD\u4E0D\u5199\u65F6\uFF0C\u753B\u7684\u662F\u5185\u7F6E\u7684\u77E2\u91CF \xD7 \u56FE\u6807\uFF08\u63A8\u8350\uFF0C\u4E0D\u7528\u914D\uFF09
   "icon": "\u2715",                 // \u53EF\u9009\uFF1A\u6539\u6210\u6587\u672C\u5B57\u7B26 / emoji
   "image": "https://...",      // \u53EF\u9009\uFF1A\u6539\u6210\u56FE\u7247\uFF0C\u5199\u4E86\u5C31\u76D6\u8FC7 icon
-  "style": { "background": "rgba(0,0,0,0.35)", "color": "#fff", "fontSize": 18 }
+  "style": { "background": "rgba(0,0,0,0.35)", "color": "#fff", "fontSize": 18 },
+  // \u53EF\u9009\uFF1A\u70B9\u5B83\u505A\u4EC0\u4E48\u3002\u4E0D\u5199 = \u5173\u6389\u8FD9\u4E00\u5C42\uFF1B\u5199\u4E86 = \u53EA\u6267\u884C\u8FD9\u4E2A\u52A8\u4F5C\uFF0C\u4E0D\u5173\u5C42
+  "action": { "type": "open", "view": "confirm", "mode": "stack" }
 }`
       },
       {
@@ -1059,9 +1376,19 @@ var sections6 = [
             "**\u53EF\u9009\u8986\u76D6\u9879**\u3002\u5199\u4E86\u5C31\u7528\u8FD9\u4E2A\u6587\u672C\u5B57\u7B26 / emoji \u4EE3\u66FF\u5185\u7F6E\u56FE\u6807"
           ],
           ["image", "\u65E0", "\u56FE\u7247\u56FE\u6807\uFF0C\u4F1A\u94FA\u6EE1\u6309\u94AE\uFF08`object-fit: contain`\uFF09"],
-          ["style", "\u65E0", "\u8D70 style \u767D\u540D\u5355\uFF0C\u53EF\u6539\u80CC\u666F\u3001\u989C\u8272\u3001\u5706\u89D2\u3001\u8FB9\u6846\u3001\u9634\u5F71\u7B49"]
+          ["style", "\u65E0", "\u8D70 style \u767D\u540D\u5355\uFF0C\u53EF\u6539\u80CC\u666F\u3001\u989C\u8272\u3001\u5706\u89D2\u3001\u8FB9\u6846\u3001\u9634\u5F71\u7B49"],
+          [
+            "action",
+            "\u65E0\uFF08\u5173\u6389\u8FD9\u4E00\u5C42\uFF09",
+            "\u70B9\u5B83\u6267\u884C\u7684\u52A8\u4F5C\u3002\u914D\u4E86\u5C31**\u4E0D\u5173\u5C42**\uFF0C\u300C\u70B9 \u2715 \u5148\u5F39\u4E8C\u6B21\u633D\u7559\u300D\u9760\u5B83"
+          ]
         ]
       },
+      {
+        t: "note",
+        tone: "warn",
+        text: '\u914D\u4E86 `action` \u4E4B\u540E\u8FD9\u4E2A \u2715 **\u4E0D\u4F1A\u518D\u81EA\u52A8\u5173\u95ED\u5F39\u7A97**\u2014\u2014\u60F3\u5728\u52A8\u4F5C\u91CC\u987A\u5E26\u5173\u6389\uFF0C\u81EA\u5DF1\u5199\u8FDB\u53BB\uFF08`{ "type": "sequence", "actions": [ {"type":"track", \u2026}, {"type":"close", "reason":"user-dismiss"} ] }`\uFF09\u3002\u5FD8\u4E86\u5199\u7684\u8868\u73B0\u662F\u300C\u70B9 \u2715 \u6CA1\u53CD\u5E94\u300D\u3002'
+      },
       { t: "h3", text: "\u56FE\u6807\u753B\u4EC0\u4E48\uFF1A\u4E09\u9009\u4E00\uFF0C\u4F18\u5148\u7EA7\u56FA\u5B9A" },
       {
         t: "table",
@@ -1152,7 +1479,7 @@ var sections6 = [
     ]
   }
 ];
-var guide_stage_default = sections6;
+var guide_stage_default = sections7;
 
 // src/docs/sections/nodes.ts
 var containerRows = [
@@ -1182,7 +1509,7 @@ var contentRows = [
 var styleRows = [
   [
     "\u6587\u5B57",
-    "`color` `fontSize` `fontWeight` `fontFamily` `lineHeight` `letterSpacing` `textAlign` `textDecoration` `whiteSpace` `fontVariantNumeric`"
+    "`color` `fontSize` `fontWeight` `fontFamily` `fontStyle` `lineHeight` `letterSpacing` `textAlign` `textDecoration` `whiteSpace` `fontVariantNumeric` `textShadow`"
   ],
   [
     "\u80CC\u666F",
@@ -1196,11 +1523,15 @@ var styleRows = [
   ["flex \u5BB9\u5668", "`direction` `gap` `wrap` `align` `justify`"],
   [
     "flex \u5B50\u9879 / \u5C3A\u5BF8",
-    "`flex` `alignSelf` `width` `height` `minWidth` `minHeight` `maxWidth` `maxHeight`"
+    "`flex` `alignSelf` `flexShrink` `width` `height` `minWidth` `minHeight` `maxWidth` `maxHeight`"
+  ],
+  [
+    "\u52A8\u6548 / \u5C42\u7EA7\uFF08\u89C1\u7B2C 15 \u8282\uFF09",
+    "`transform` `transformOrigin` `transition` `animationPlayState` `backdropFilter` `zIndex` `pointerEvents`"
   ],
   ["\u56FE\u7247 / \u6BD4\u4F8B", "`objectFit` `aspectRatio`"]
 ];
-var sections7 = [
+var sections8 = [
   {
     id: "nodes",
     title: "6. \u8282\u70B9\u7C7B\u578B",
@@ -1297,7 +1628,10 @@ var sections7 = [
           'flex \u5217\u5BB9\u5668\u7684\u5B50\u9879\u9ED8\u8BA4\u88AB\u62C9\u6EE1\u6574\u884C\uFF0C\u6807\u7B7E\u7C7B\u5143\u7D20\u8981\u5199 `alignSelf: "flex-start"`',
           "\u5927\u5B57\u53F7\u6587\u672C\u8981\u663E\u5F0F\u5199 `lineHeight`\uFF0C\u5426\u5219\u9ED8\u8BA4\u884C\u9AD8\u4F1A\u628A\u5BB9\u5668\u6491\u9AD8",
           '\u9010\u5E27\u53D8\u5316\u7684\u6570\u5B57\uFF08\u5012\u8BA1\u65F6\u5398\u79D2\uFF09\u8981\u5199 `fontVariantNumeric: "tabular-nums"`\uFF0C\u5426\u5219\u6570\u5B57\u4F1A\u6296',
-          "`style` \u7684\u503C\u4E5F\u652F\u6301 `{{ }}` \u63D2\u503C\uFF0C\u9009\u4E2D\u6001\u5C31\u662F\u9760\u8FD9\u4E2A\u505A\u7684"
+          "`style` \u7684\u503C\u4E5F\u652F\u6301 `{{ }}` \u63D2\u503C\uFF0C\u9009\u4E2D\u6001\u5C31\u662F\u9760\u8FD9\u4E2A\u505A\u7684",
+          "`zIndex` \u53EA\u5141\u8BB8 0~10\uFF0C\u8D85\u51FA\u4F1A\u88AB\u5939\u5230\u533A\u95F4\u5185\uFF1B\u6CA1\u6709 `position`\uFF1A\u7EDD\u5BF9\u5B9A\u4F4D\u7EDF\u4E00\u7528 `rect`",
+          "\u914D\u4E86 `zIndex` \u7684\u8282\u70B9\u4F1A\u81EA\u52A8\u5E26\u4E0A\u5B9A\u4F4D\u65B9\u5F0F \u2014\u2014 `z-index` \u5BF9\u9759\u6001\u5143\u7D20\u662F\u6B7B\u58F0\u660E\uFF0C\u4E0D\u8FD9\u4E48\u505A\uFF0C\u9760\u8D1F `marginTop` \u5F80\u4E0A\u76D6\u7684\u5757\uFF08\u5982\u538B\u4F4F\u7EA2\u5934\u4E0B\u6CBF\u7684\u767D\u8272\u4E3B\u4F53\uFF09\u6C38\u8FDC\u76D6\u4E0D\u4F4F\u524D\u4E00\u4E2A\u5144\u5F1F\u8282\u70B9",
+          '\u5149\u6655\u3001\u626B\u5149\u8FD9\u7C7B\u538B\u5728\u6309\u94AE\u4E0A\u7684\u88C5\u9970\u5C42\u8981\u5199 `pointerEvents: "none"`\uFF0C\u5426\u5219\u4F1A\u6321\u4F4F\u70B9\u51FB'
         ]
       },
       {
@@ -1313,10 +1647,10 @@ var sections7 = [
     ]
   }
 ];
-var nodes_default = sections7;
+var nodes_default = sections8;
 
 // src/docs/sections/views.ts
-var sections8 = [
+var sections9 = [
   {
     id: "views",
     title: "12. \u591A\u89C6\u56FE\uFF08\u4E00\u4EFD\u914D\u7F6E\u91CC\u653E\u51E0\u4E2A\u5F39\u7A97\uFF09",
@@ -1468,10 +1802,10 @@ var sections8 = [
     ]
   }
 ];
-var views_default = sections8;
+var views_default = sections9;
 
 // src/docs/sections/index.ts
-var sections9 = [].concat(
+var sections10 = [].concat(
   guide_basics_default,
   // 0~2
   guide_stage_default,
@@ -1486,13 +1820,42 @@ var sections9 = [].concat(
   // 10
   action_default,
   // 11
-  views_default
+  views_default,
   // 12~14
+  animation_default
+  // 15
 );
-var sections_default = sections9;
+var sections_default = sections10;
 
 // src/docs/meta.ts
 var changelog = [
+  {
+    date: "2026-09-01",
+    items: [
+      "`zIndex` \u73B0\u5728\u4F1A\u81EA\u52A8\u5E26\u4E0A\u5B9A\u4F4D\u65B9\u5F0F\uFF1A`z-index` \u5BF9\u9759\u6001\u5143\u7D20\u662F\u6B7B\u58F0\u660E\uFF0C\u5199\u4E86\u4E0D\u751F\u6548\u3002\u6D41\u5F0F\u6392\u7248\u91CC\u9760\u8D1F `marginTop` \u5F80\u4E0A\u76D6\u7684\u5757\uFF08\u5982\u538B\u4F4F\u7EA2\u5934\u4E0B\u6CBF\u7684\u767D\u8272\u4E3B\u4F53\uFF09\u5FC5\u987B\u6709\u5C42\u7EA7\u624D\u76D6\u5F97\u4F4F\uFF0C\u914D\u4E86 `zIndex` \u5373\u53EF\uFF0C\u4E0D\u7528\uFF08\u4E5F\u6CA1\u6CD5\uFF09\u53E6\u914D `position`",
+      "\u3010\u4FEE\u590D\u3011\u5F39\u51FA\u7B2C\u4E8C\u5C42\u5F39\u7A97\uFF08\u5982\u4E8C\u6B21\u633D\u7559\uFF09\u518D\u5173\u6389\u65F6\uFF0C\u4E0B\u5C42\u5F39\u7A97\u7684\u906E\u7F69\u5165\u573A\u52A8\u753B\u4F1A\u91CD\u64AD\u4E00\u904D\uFF0C\u80CC\u666F\u300C\u95EA\u300D\u4E00\u4E0B\u91CD\u65B0\u6DE1\u5165\u3002\u73B0\u5DF2\u4FEE\u6B63\uFF0C\u914D\u7F6E\u5199\u6CD5\u4E0D\u7528\u6539",
+      "\u3010\u4FEE\u590D\u3011\u5207\u89C6\u56FE / \u5207 tab / `visibleWhen` \u7FFB\u8F6C\u65F6\uFF0C\u9875\u9762\u4E0A\u6B63\u5728\u8DD1\u7684\u5FAA\u73AF\u52A8\u753B\u4F1A\u5168\u90E8\u91CD\u5934\u64AD\u4E00\u904D\u3002\u73B0\u5DF2\u4FEE\u6B63",
+      "`hoverStyle` \u91CC\u7684 `{{ }}` \u53EA\u5728\u9996\u5C4F\u6C42\u503C\u4E00\u6B21\uFF0C\u4E4B\u540E\u4E0D\u968F state \u53D8\u5316\u2014\u2014\u8981\u8DDF\u7740\u72B6\u6001\u53D8\u7684\u6837\u5F0F\u5199\u5728 `style` \u91CC\uFF08\u90A3\u6761\u8DEF\u5F84\u6BCF\u5E27\u90FD\u4F1A\u91CD\u7B97\uFF09"
+    ]
+  },
+  {
+    date: "2026-08-31",
+    items: [
+      "\u65B0\u589E\u52A8\u753B\u80FD\u529B\uFF08\u7B2C 15 \u8282\uFF09\uFF1A\u9876\u5C42 keyframes \u5B9A\u4E49\u5173\u952E\u5E27\uFF0C\u8282\u70B9 / stage / \u906E\u7F69 / \u5173\u95ED\u6309\u94AE\u4E0A\u7528 animate \u5F15\u7528\uFF0C\u652F\u6301\u5EF6\u8FDF\u3001\u65E0\u9650\u5FAA\u73AF\u3001\u65B9\u5411\u4E0E\u586B\u5145\u6A21\u5F0F",
+      "\u65B0\u589E hoverStyle\uFF1A\u4E0E style \u540C\u4E00\u5957\u5C5E\u6027\u767D\u540D\u5355\uFF0C\u53EA\u5728\u9F20\u6807\u60AC\u505C\u65F6\u751F\u6548\uFF08\u89E6\u5C4F\u6CA1\u6709 hover\uFF0C\u522B\u628A\u4FE1\u606F\u653E\u8FDB\u53BB\uFF09",
+      "style \u767D\u540D\u5355\u65B0\u589E transform / transformOrigin / transition / backdropFilter / textShadow / zIndex\uFF080~10\uFF09 / pointerEvents / flexShrink / fontStyle\uFF08\u7B2C 7 \u8282\uFF09",
+      "\u4ECD\u7136\u4E0D\u653E\u5F00 position \u4E0E\u81EA\u7531 CSS\uFF1A\u7EDD\u5BF9\u5B9A\u4F4D\u7528 rect\uFF0C\u5F39\u7A97\u94FA\u6EE1\u89C6\u53E3\u7531\u89E3\u91CA\u5668\u5B8C\u6210\u2014\u2014\u653E\u5F00\u7B49\u4E8E\u628A\u300C\u5168\u5C4F\u8986\u76D6\u9493\u9C7C\u300D\u4EA4\u56DE\u7ED9\u914D\u7F6E\uFF08\u7B2C 15 \u8282\u6709\u5B8C\u6574\u7406\u7531\uFF09",
+      "\u7CFB\u7EDF\u5F00\u4E86\u300C\u51CF\u5C11\u52A8\u6001\u6548\u679C\u300D\u65F6\u81EA\u52A8\u5173\u6389\u8FD9\u4EFD\u7269\u6599\u7684\u5168\u90E8\u52A8\u753B\u4E0E\u8FC7\u6E21\uFF0C\u914D\u7F6E\u91CC\u4E0D\u7528\u7BA1\uFF0C\u4E5F\u6CA1\u6709\u5F00\u5173\u80FD\u7ED5\u8FC7",
+      "countdown \u65B0\u589E duration\uFF08\u76F8\u5BF9\u65F6\u957F\uFF0C\u6BEB\u79D2\uFF0C\u4ECE\u8FD9\u4E00\u5C4F\u5C55\u793A\u90A3\u4E00\u523B\u8D77\u7B97\uFF09\uFF1A\u300C\u6BCF\u6B21\u6253\u5F00\u91CD\u65B0\u5012 5 \u5206\u949F\u300D\u4E0D\u7528\u518D\u53BB\u7B97\u7ED3\u675F\u65F6\u95F4\uFF1Bto \u4E0E duration \u81F3\u5C11\u8981\u6709\u4E00\u4E2A\uFF08\u7B2C 10 \u8282\uFF09",
+      "\u65B0\u589E\u793A\u4F8B \u246A 4 \u6298\u4E13\u5C5E\u793C\u5305\u3001\u246B 1 \u5206\u94B1\u534A\u5E74\u5361\uFF1A\u642C\u5BB6\u6210\u529F\u9875\u4E24\u4E2A\u7EBF\u4E0A\u5F39\u7A97\u7684\u4E00\u6BD4\u4E00\u590D\u523B\uFF0C\u542B\u5165\u573A / \u547C\u5438 / \u626B\u5149 / \u4EA4\u9519\u5165\u573A / \u4E8C\u6B21\u633D\u7559\u5F39\u7A97\uFF0C\u8981\u505A\u52A8\u753B\u5F39\u7A97\u6539\u8FD9\u4E24\u4EFD\u6700\u5FEB",
+      "AI \u63D0\u793A\u8BCD\u8865\u4E0A\u52A8\u753B\u4E0E hover \u7684\u786C\u89C4\u5219\uFF0C\u81EA\u68C0\u6E05\u5355\u52A0\u4E86\u5173\u952E\u5E27\u5F15\u7528\u4E0E\u88C5\u9970\u5C42\u70B9\u51FB\u7A7F\u900F\u4E24\u6761",
+      "\u65B0\u589E stage.maskStyle\uFF08\u7B2C 3 \u8282\uFF09\uFF1A\u906E\u7F69\u914D\u8272\u7EC8\u4E8E\u80FD\u6539\u4E86\uFF0C\u8D70 style \u767D\u540D\u5355\uFF0C\u5E38\u7528 background \u8C03\u6DF1\u6D45 + backdropFilter \u52A0\u6BDB\u73BB\u7483\uFF1B\u4E0D\u5199\u4ECD\u662F\u5185\u7F6E\u7684 rgba(0,0,0,0.55)",
+      "\u65B0\u589E stage.maskAction\uFF08\u7B2C 3 \u8282\uFF09\uFF1A\u70B9\u906E\u7F69\u6267\u884C\u6307\u5B9A\u52A8\u4F5C\u800C\u4E0D\u662F\u76F4\u63A5\u5173\uFF0C\u300C\u70B9\u906E\u7F69\u5148\u5F39\u4E8C\u6B21\u633D\u7559\u300D\u4E0D\u7528\u518D\u81EA\u5DF1\u94FA\u4E00\u5C42\u900F\u660E\u8282\u70B9\u3002\u5B83\u4E0E maskClosable \u5404\u7BA1\u4E00\u4EF6\u4E8B\u2014\u2014\u906E\u7F69\u4E0D\u53EF\u70B9\u65F6\u914D\u4E86\u4E5F\u4E0D\u89E6\u53D1\uFF0C\u4FDD\u5B58\u65F6\u4F1A\u63D0\u9192",
+      "\u65B0\u589E stage.closeButton.action\uFF08\u7B2C 3 \u8282\uFF09\uFF1A\u5185\u7F6E \u2715 \u4E5F\u80FD\u63A5\u52A8\u4F5C\u4E86\uFF0C\u4EE5\u524D\u60F3\u300C\u70B9 \u2715 \u5F39\u633D\u7559\u300D\u53EA\u80FD\u653E\u5F03\u5185\u7F6E\u6309\u94AE\u3001\u81EA\u5DF1\u6446\u4E00\u4E2A\u6587\u672C \u2715\uFF08\u5B57\u5F62\u504F\u4E0B\u3001\u8FD8\u5F97\u624B\u5199\u5B9A\u4F4D\uFF09\u3002\u914D\u4E86 action \u5C31\u4E0D\u518D\u81EA\u52A8\u5173\u5C42\uFF0C\u8981\u5173\u81EA\u5DF1\u628A close \u5199\u8FDB\u52A8\u4F5C\u91CC",
+      'style \u767D\u540D\u5355\u65B0\u589E animationPlayState\uFF08\u7B2C 15 \u8282\uFF09\uFF1A\u5728 hoverStyle \u91CC\u5199 "paused" \u5373\u53EF\u8BA9\u5FAA\u73AF\u52A8\u753B\u5728\u60AC\u505C\u65F6\u505C\u4F4F\uFF0C\u79FB\u5F00\u7EE7\u7EED',
+      "\u793A\u4F8B \u246A\u246B \u6539\u7528\u5185\u7F6E\u5173\u95ED\u6309\u94AE + action\uFF0C\u5E76\u6309\u539F\u9875\u9762\u914D\u4E0A rgba(0,0,0,0.65) + 4px \u6BDB\u73BB\u7483\u7684\u906E\u7F69\u3001\u70B9\u906E\u7F69\u5F39\u633D\u7559\uFF1B\u246B \u7684 CTA \u8865\u4E0A\u60AC\u505C\u6682\u505C\u547C\u5438"
+    ]
+  },
   {
     date: "2026-08-24",
     items: [
@@ -1586,7 +1949,7 @@ var meta_default = meta;
 
 // src/docs/examples/renew-expire.ts
 var ORANGE = "linear-gradient(90deg,#ff7a00,#faad14)";
-var achieveCell = {
+var achieveCell = (verb, field, unit, label) => ({
   type: "flex",
   style: {
     direction: "column",
@@ -1608,7 +1971,7 @@ var achieveCell = {
       children: [
         {
           type: "text",
-          content: "{{ item.v }}",
+          content: verb,
           style: {
             fontSize: 11.5,
             fontWeight: "600",
@@ -1618,23 +1981,23 @@ var achieveCell = {
         },
         {
           type: "text",
-          content: "{{ item.n }}",
+          content: `{{ stat.${field} }}`,
           style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
         },
         {
           type: "text",
-          content: "{{ item.u }}",
+          content: ` ${unit}`,
           style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
         }
       ]
     },
     {
       type: "text",
-      content: "{{ item.l }}",
+      content: label,
       style: { fontSize: 11.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
     }
   ]
-};
+});
 var loseRow = {
   type: "flex",
   style: { align: "center", gap: 8, padding: "8px 0" },
@@ -1754,9 +2117,9 @@ var renewExpire = {
     style: { radius: 18 }
   },
   data: {
-    // 成果格子同样走数据源（字段 v / n / u / l 与 achieveCell 模板对应），
-    // 后端返回几格就渲染几格
-    achieve: { $source: "shopAchievements" },
+    // 成果格子同样走数据源。userStatistics 返回扁平对象，字段名是后端的 snake_case，
+    // 下面四格各自直接插值 {{ stat.xxx }}（扁平对象没法 bind 遍历，见文件头注释）
+    stat: { $source: "userStatistics" },
     lose: [
       { b: "\u6279\u91CF\u642C\u5BB6\u4E0A\u8D27", t: "\u5230\u671F\u540E\u65E0\u6CD5\u7EE7\u7EED\u4E0A\u8D27" },
       { b: "6 \u9879\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1", t: "\u767D\u5E95\u56FE / \u77ED\u6807\u9898\u8865\u9F50\u3001\u4F4E\u6548\u54C1\u8BCA\u65AD\u4F18\u5316" },
@@ -1794,10 +2157,20 @@ var renewExpire = {
           }
         },
         {
-          type: "repeat",
-          bind: "achieve",
+          // 四格并列写死（扁平对象没法 bind 遍历），flex + wrap 排成 2×2
+          type: "flex",
           style: { gap: 9, wrap: true },
-          template: achieveCell
+          children: [
+            achieveCell("\u5DF2\u4E0A\u67B6", "move_success_count", "\u4E2A", "\u7D2F\u8BA1\u642C\u5BB6\u6210\u529F"),
+            achieveCell("\u8FD0\u884C", "operate_task_count", "\u9879", "\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1"),
+            achieveCell(
+              "\u5DF2\u8865\u9F50",
+              "white_image_fill_count",
+              "\u5F20",
+              "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8"
+            ),
+            achieveCell("\u5B8C\u6210", "ai_optimize_count", "\u6B21", "AI \u81EA\u52A8\u4F18\u5316")
+          ]
         }
       ]
     },
@@ -1934,7 +2307,7 @@ var cdSeparator = (content) => ({
   content,
   style: { fontSize: 13, fontWeight: "800", color: "rgba(255,255,255,0.7)" }
 });
-var achieveCell2 = {
+var achieveCell2 = (verb, field, unit, label) => ({
   type: "flex",
   style: {
     direction: "column",
@@ -1954,7 +2327,7 @@ var achieveCell2 = {
       children: [
         {
           type: "text",
-          content: "{{ item.v }}",
+          content: verb,
           style: {
             fontSize: 11.5,
             fontWeight: "600",
@@ -1964,23 +2337,23 @@ var achieveCell2 = {
         },
         {
           type: "text",
-          content: "{{ item.n }}",
+          content: `{{ stat.${field} }}`,
           style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
         },
         {
           type: "text",
-          content: "{{ item.u }}",
+          content: ` ${unit}`,
           style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
         }
       ]
     },
     {
       type: "text",
-      content: "{{ item.l }}",
+      content: label,
       style: { fontSize: 11.5, lineHeight: 1.35, color: "rgba(255,255,255,0.72)" }
     }
   ]
-};
+});
 var loseRow2 = {
   type: "flex",
   style: { align: "flex-start", gap: 10, padding: "7px 0" },
@@ -2119,9 +2492,10 @@ var lastDay = {
   },
   data: {
     // 成果格子的数字是**实时统计**，写死就会跟店铺实际情况对不上 —— 走后端数据源。
-    // $source 填的是宿主注册过的数据源名（不是接口地址），返回项的字段
-    // v / n / u / l 与下面 achieveCell 模板里的 {{ item.x }} 一一对应。
-    achieve: { $source: "shopAchievements" },
+    // $source 填的是宿主注册过的数据源名（不是接口地址）。
+    // userStatistics 返回一个扁平对象，字段名就是后端的 snake_case，
+    // 下面四格各自直接插值 {{ stat.xxx }}（见文件头注释：扁平对象没法 bind 遍历）。
+    stat: { $source: "userStatistics" },
     lose: [
       {
         b: "118 \u4E2A\u5546\u54C1\u7684\u5168\u90E8\u4F18\u5316\u8BB0\u5F55",
@@ -2212,10 +2586,25 @@ var lastDay = {
           }
         },
         {
-          type: "repeat",
-          bind: "achieve",
+          // 四格并列写死（扁平对象没法 bind 遍历），flex + wrap 排成 2×2
+          type: "flex",
           style: { gap: 9, wrap: true, marginTop: 14 },
-          template: achieveCell2
+          children: [
+            achieveCell2("\u5DF2\u4E0A\u67B6", "move_success_count", "\u4E2A", "\u7D2F\u8BA1\u642C\u5BB6\u6210\u529F"),
+            achieveCell2(
+              "\u8FD0\u884C",
+              "operate_task_count",
+              "\u9879",
+              "\u7ECF\u8425\u4EFB\u52A1\uFF08\u5546\u54C1\u4F18\u5316/\u6D41\u91CF\u589E\u957F\uFF09"
+            ),
+            achieveCell2(
+              "\u5DF2\u8865\u9F50",
+              "white_image_fill_count",
+              "\u5F20",
+              "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8"
+            ),
+            achieveCell2("\u5B8C\u6210", "ai_optimize_count", "\u6B21", "AI \u81EA\u52A8\u4F18\u5316")
+          ]
         },
         // ===== 分格倒计时 + 厘秒逐帧动画 =====
         {
@@ -3338,60 +3727,1087 @@ var drawerBottomBanner = createDrawerBanner({
   url: "https://maibaole.example.com/support"
 });
 
-// src/docs/examples/index.ts
-var HOTSPOT_BG = "rgba(255,68,51,0.16)";
-var imageHotspot = {
-  version: 1,
-  type: "popup",
-  meta: { name: "\u6574\u56FE\u70ED\u533A\u5F39\u7A97" },
-  stage: {
-    // 窄屏时跟着父级收，最宽不超过 420
-    width: "calc(100% - 48px)",
-    height: 520,
-    mask: true,
-    maskClosable: true,
-    // 关闭按钮放到弹窗正下方外侧：offset 的 y 写负值即可，不会被圆角裁掉
-    closeButton: {
-      show: true,
-      position: "bottom-center",
-      offset: [0, -46],
-      size: 34,
-      // 不写 icon / image，用内置的矢量 × 图标（跟着 style.color 走）
-      style: {
-        background: "rgba(0,0,0,0.4)",
-        color: "#ffffff",
-        fontSize: 18,
-        borderWidth: 1,
-        borderStyle: "solid",
-        borderColor: "rgba(255,255,255,0.55)"
-      }
-    },
-    style: { radius: 12, maxWidth: 420 },
-    // 曝光埋点：数据就绪、弹窗真正展示时触发一次
-    onShow: { type: "track", event: "popup_show", params: { popup: "image_hotspot" } },
-    // 关闭埋点：点 X、点遮罩、点「不再提醒」都会触发，用 closeReason 区分
-    onClose: {
-      type: "track",
-      event: "popup_close",
-      params: { popup: "image_hotspot", reason: "{{ closeReason }}" }
-    }
-  },
-  nodes: [
-    {
-      // 背景图用百分比铺满舞台，舞台宽度变了也不用改配置
-      id: "bg",
-      type: "image",
-      rect: [0, 0, "100%", "100%"],
-      src: "https://picsum.photos/id/1015/420/520"
+// src/docs/examples/gift-give-up.ts
+var GIFT_MASK_STYLE = {
+  background: "rgba(0,0,0,0.65)",
+  backdropFilter: "blur(4px)"
+};
+function createGiveUpView(options) {
+  return {
+    type: "popup",
+    stage: {
+      width: 360,
+      height: "auto",
+      layout: "flow",
+      mask: true,
+      // 点遮罩 = 关掉栈顶这一层 = 退回主弹窗，正是原页面 hideConfirm 的行为：
+      // 挽留层的 close 不会关掉整份物料，也不产生上报。
+      // 【注意】这一层**不配 maskAction**：它的点击本来就该是「退回主弹窗」，
+      // 配了动作反而会把这个退栈行为顶掉
+      maskClosable: true,
+      // 与主弹窗同一份，弹出这一层时背景不能有落差，见 GIFT_MASK_STYLE
+      maskStyle: GIFT_MASK_STYLE,
+      style: { radius: 16, background: "#ffffff" },
+      onShow: { type: "track", event: `${options.giveUpEvent}_show` }
     },
-    // 热区想放几个放几个，位置各自由 rect 决定，互不影响。
-    // 热区 = 一个透明的 box + action，调试时把 background 的透明度调高就能看见框。
-    {
-      id: "hotspot-rule",
-      type: "box",
-      // 右上角「活动规则」
-      rect: ["62%", 24, "30%", 30],
-      style: { radius: 15, background: HOTSPOT_BG, cursor: "pointer" },
+    nodes: [
+      {
+        type: "flex",
+        style: { direction: "column", align: "center", padding: "28px 24px" },
+        children: [
+          { type: "text", content: "\u{1F622}", style: { fontSize: 48, marginBottom: 12 } },
+          {
+            type: "text",
+            content: "\u771F\u7684\u8981\u653E\u5F03\u5417\uFF1F",
+            style: { fontSize: 18, fontWeight: "700", color: "#1d2129" }
+          },
+          {
+            type: "text",
+            content: "\u60A8\u5C06\u635F\u5931\u793C\u5305\u6536\u76CA",
+            style: {
+              margin: "12px 0 20px",
+              fontSize: 13,
+              lineHeight: 1.6,
+              color: "#4e5969",
+              textAlign: "center"
+            }
+          },
+          {
+            type: "flex",
+            style: { width: "100%", gap: 12 },
+            children: [
+              {
+                type: "button",
+                text: "\u5FCD\u75DB\u653E\u5F03",
+                style: {
+                  flex: "1",
+                  padding: 12,
+                  radius: 8,
+                  background: "#f7f8fa",
+                  color: "#86909c",
+                  fontSize: 14,
+                  fontWeight: "600"
+                },
+                hoverStyle: { background: "#f0f1f5" },
+                // closeAll：挽留层和主弹窗一起关掉，只 close 的话会退回主弹窗
+                action: {
+                  type: "sequence",
+                  actions: [
+                    { type: "track", event: options.giveUpEvent },
+                    { type: "closeAll", reason: "user-give-up" }
+                  ]
+                }
+              },
+              {
+                type: "button",
+                text: "\u9886\u53D6\u793C\u5305",
+                style: {
+                  flex: "1",
+                  padding: 12,
+                  radius: 8,
+                  background: "linear-gradient(90deg,#ff7a00 0%,#f53f3f 100%)",
+                  color: "#ffffff",
+                  fontSize: 14,
+                  fontWeight: "600"
+                },
+                hoverStyle: { transform: "translateY(-1px)" },
+                action: {
+                  type: "sequence",
+                  actions: [
+                    {
+                      type: "track",
+                      event: options.claimEvent,
+                      params: { from: "confirm" }
+                    },
+                    { type: "navigate", url: options.url }
+                  ]
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+}
+
+// src/docs/examples/gift-v6-head.ts
+var HEAD_HEIGHT = 300;
+function createHead() {
+  return {
+    type: "box",
+    style: {
+      width: "100%",
+      height: HEAD_HEIGHT,
+      background: "linear-gradient(180deg,#ff4d4d 0%,#d93025 100%)",
+      overflow: "hidden"
+    },
+    children: [
+      {
+        // 左上角的白色光晕，原页面是 .v6-modal-top::before
+        type: "box",
+        rect: [-40, -40, "calc(100% + 80px)", "calc(100% + 80px)"],
+        style: {
+          background: "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2) 0%, transparent 50%)",
+          // 装饰层必须让点击穿透，否则整块红头都点不动
+          pointerEvents: "none"
+        }
+      },
+      {
+        type: "flex",
+        rect: [0, 0, "100%", "auto"],
+        style: { direction: "column", align: "center", padding: "20px 32px 0" },
+        children: [
+          {
+            type: "text",
+            content: "\u{1F389} \u642C\u5BB6\u6210\u529F \xB7 \u7CFB\u7EDF\u4E13\u5C5E\u5956\u52B1",
+            style: {
+              alignSelf: "center",
+              padding: "4px 16px",
+              marginBottom: 12,
+              fontSize: 12,
+              color: "#ffffff",
+              background: "rgba(255,255,255,0.25)",
+              radius: 12
+            }
+          },
+          {
+            type: "text",
+            content: "\u606D\u559C\uFF01\u60A8\u83B7\u5F97\u4E00\u4EFD\u4E13\u5C5E\u793C\u5305",
+            style: {
+              fontSize: 24,
+              fontWeight: "900",
+              lineHeight: 1.3,
+              color: "#ffffff",
+              textAlign: "center"
+            }
+          },
+          {
+            type: "text",
+            content: "\u4EC5\u9650\u521A\u5B8C\u6210\u642C\u5BB6\u7684\u7528\u6237",
+            style: {
+              marginTop: 6,
+              fontSize: 13,
+              color: "#ffffff",
+              opacity: "0.9"
+            }
+          },
+          {
+            type: "flex",
+            style: {
+              alignSelf: "center",
+              justify: "center",
+              align: "center",
+              width: 110,
+              height: 110,
+              marginTop: 16,
+              radius: "50%",
+              background: "linear-gradient(135deg,#fff5e6 0%,#ffd591 100%)",
+              shadow: "0 8px 24px rgba(0,0,0,0.2), inset 0 4px 8px rgba(255,255,255,0.5)"
+            },
+            animate: {
+              name: "floatY",
+              duration: 3e3,
+              easing: "ease-in-out",
+              iteration: "infinite"
+            },
+            children: [
+              {
+                type: "text",
+                content: "4\u6298",
+                style: {
+                  fontSize: 40,
+                  fontWeight: "900",
+                  lineHeight: 1,
+                  color: "#d93025"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+}
+
+// src/docs/examples/gift-v6.ts
+var PURCHASE_URL = "https://fuwu.jinritemai.com/detail?from=isv.promotion&service_id=21361&promotionIdCode=CgYIASAHKAESXgpc6AasSWVCtjAmMcE%2B00V9l5ZRXgoh0wWk5uc6B7Z8JN4ILp0xJ0CmyiOhAVTvTbl5yoLE1muPBxT7P5lZMT1SYVI8RleaK62xu%2FEwuJHpwa0hmOuDn0wllsRvaLcaAA%3D%3D";
+var NUM_STYLE = {
+  minWidth: 26,
+  padding: "2px 6px",
+  fontFamily: "'Courier New', monospace",
+  fontSize: 13,
+  fontWeight: "700",
+  color: "#ffffff",
+  textAlign: "center",
+  background: "#1d2129",
+  radius: 4,
+  fontVariantNumeric: "tabular-nums"
+};
+function giftRow(highlight, text) {
+  return {
+    type: "flex",
+    style: { align: "center", gap: 8, padding: "4px 0" },
+    children: [
+      { type: "text", content: "\u{1F381}", style: { fontSize: 14 } },
+      {
+        type: "flex",
+        // gap 跟外层一致取 8：原页面 li 本身就是 `display:flex; gap:8`，
+        // 🎁、`<b>4折</b>`、说明文案是同一层的三个 flex 项，三段间距相等。
+        // 这里拆成两层是为了让说明文案能独立换行，间距必须还原成 8，
+        // 写 4 会明显比行首那一格紧、看着像没对齐
+        style: { flex: "1", align: "baseline", gap: 8 },
+        children: [
+          {
+            type: "text",
+            content: highlight,
+            style: { fontSize: 11, fontWeight: "700", color: "#d93025" }
+          },
+          { type: "text", content: text, style: { fontSize: 11, color: "#4e5969" } }
+        ]
+      }
+    ]
+  };
+}
+var giftV6 = {
+  version: 1,
+  meta: { name: "\u590D\u523B\u7EBF\u4E0A\u5F39\u7A97 \xB7 4 \u6298\u4E13\u5C5E\u793C\u5305\uFF08\u52A8\u753B + \u4E8C\u6B21\u633D\u7559\uFF09" },
+  entry: "main",
+  // 关键帧库全配置共用，两个视图都能引用
+  keyframes: {
+    /** 遮罩淡入 */
+    fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
+    /** 弹窗回弹放大，配 cubic-bezier 的超调曲线才有「弹一下」的手感 */
+    zoomIn: {
+      from: { opacity: "0", transform: "scale(0.7)" },
+      to: { opacity: "1", transform: "scale(1)" }
+    },
+    /** 红包上下浮动 */
+    floatY: {
+      "0%": { transform: "translateY(0)" },
+      "50%": { transform: "translateY(-8px)" },
+      "100%": { transform: "translateY(0)" }
+    },
+    /** CTA 呼吸：只放大 2%，再多就晃眼了 */
+    pulseBtn: {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(1.02)" },
+      "100%": { transform: "scale(1)" }
+    }
+  },
+  views: {
+    main: {
+      type: "popup",
+      stage: {
+        width: 450,
+        height: "auto",
+        layout: "flow",
+        mask: true,
+        maskClosable: true,
+        // 原页面的遮罩是 rgba(0,0,0,0.65) + 4px 毛玻璃，比内置默认（0.55 纯色）更重
+        // 与挽留层共用同一份：只有栈顶那层遮罩会画，两层不一致就会在弹出时看到落差
+        maskStyle: GIFT_MASK_STYLE,
+        // 点遮罩不直接关，先弹二次挽留（原页面 @click.self="tryClose()"）
+        maskAction: { type: "open", view: "confirm", mode: "stack" },
+        // 内置关闭按钮（矢量 ✕）+ action：配了 action 就只执行它、不再自动关层
+        closeButton: {
+          position: "top-right",
+          offset: [12, 12],
+          size: 32,
+          style: {
+            background: "rgba(0,0,0,0.08)",
+            backdropFilter: "blur(4px)",
+            color: "#ffffff",
+            transition: "background 0.2s"
+          },
+          hoverStyle: { background: "rgba(0,0,0,0.2)" },
+          action: { type: "open", view: "confirm", mode: "stack" }
+        },
+        style: {
+          radius: 20,
+          background: "#ffffff",
+          shadow: "0 20px 60px rgba(0,0,0,0.3)",
+          maxWidth: "60vw"
+        },
+        animate: {
+          name: "zoomIn",
+          duration: 500,
+          easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+        },
+        maskAnimate: { name: "fadeIn", duration: 400 },
+        onShow: { type: "track", event: "move_success_v6_show" },
+        onClose: {
+          type: "track",
+          event: "move_success_v6_close",
+          params: { reason: "{{ closeReason }}" }
+        }
+      },
+      nodes: [
+        createHead(),
+        // ── 白色主体：往上盖住红头下沿 ──
+        {
+          type: "flex",
+          style: {
+            direction: "column",
+            marginTop: -40,
+            // 必须有层级，否则这 40px 根本盖不住：红头是 box 节点，解释器给所有 box
+            // 加了 position:relative（它要当绝对定位子节点的包含块），定位元素恒画在
+            // 静态元素之上。声明 zIndex 会让解释器顺带补一个 relative，见 resolveNodeStyle
+            zIndex: 1,
+            padding: "30px 32px 30px",
+            background: "#ffffff",
+            radius: "20px 20px 0 0"
+          },
+          children: [
+            {
+              type: "flex",
+              style: {
+                direction: "column",
+                padding: 10,
+                marginBottom: 10,
+                background: "#fffbeb",
+                borderWidth: 1,
+                borderStyle: "dashed",
+                borderColor: "#fbbf24",
+                radius: 12
+              },
+              children: [
+                {
+                  type: "text",
+                  content: "\u{1F4E6} \u793C\u5305\u5185\u5BB9",
+                  style: {
+                    marginBottom: 8,
+                    fontSize: 12,
+                    fontWeight: "600",
+                    color: "#92400e",
+                    textAlign: "center"
+                  }
+                },
+                giftRow("4\u6298", "\u300C\u4E00\u952E\u4E0B\u5355\u300D\u771F\u6298\u6263\u6765\u88AD\uFF0C\u4F4E\u81F34\u6298"),
+                giftRow("50 \u5355", "0 \u670D\u52A1\u8D39 \xB7 \u5355\u5355\u8FD4\u4F63 0.5%"),
+                giftRow("200%", "\u81EA\u52A8\u4E0B\u5355\u3001\u53D1\u8D27\u3001\u552E\u540E\uFF0C\u63D0\u9AD8\u4EBA\u6548")
+              ]
+            },
+            {
+              // duration 而不是 to：这份物料每次弹出都重新倒 5 分钟，没有绝对结束时间
+              type: "countdown",
+              duration: 3e5,
+              precision: "cs",
+              as: "cd",
+              style: { justify: "center", align: "center", gap: 6, marginBottom: 16 },
+              onEnd: { type: "closeAll", reason: "countdown-end" },
+              children: [
+                {
+                  type: "text",
+                  content: "\u23F0 \u793C\u5305\u5931\u6548\u5012\u8BA1\u65F6",
+                  style: { fontSize: 12, color: "#4e5969" }
+                },
+                { type: "text", content: "{{ cd.m }}", style: NUM_STYLE },
+                { type: "text", content: ":", style: { fontSize: 13, color: "#4e5969" } },
+                { type: "text", content: "{{ cd.s }}", style: NUM_STYLE },
+                { type: "text", content: ":", style: { fontSize: 13, color: "#4e5969" } },
+                { type: "text", content: "{{ cd.cs }}", style: NUM_STYLE }
+              ]
+            },
+            {
+              type: "button",
+              text: "\u{1F381} \u7ACB\u5373\u9886\u53D6\u5E76\u542F\u7528",
+              style: {
+                width: "100%",
+                padding: 10,
+                fontSize: 16,
+                fontWeight: "700",
+                color: "#ffffff",
+                background: "linear-gradient(90deg,#ff7a00 0%,#f53f3f 100%)",
+                radius: 28,
+                shadow: "0 6px 20px rgba(245,63,63,0.4)"
+              },
+              animate: {
+                name: "pulseBtn",
+                duration: 1500,
+                easing: "ease-in-out",
+                iteration: "infinite"
+              },
+              action: {
+                type: "sequence",
+                actions: [
+                  {
+                    type: "track",
+                    event: "move_success_v6_claim",
+                    params: { from: "main" }
+                  },
+                  { type: "navigate", url: PURCHASE_URL }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    },
+    confirm: createGiveUpView({
+      url: PURCHASE_URL,
+      claimEvent: "move_success_v6_claim",
+      giveUpEvent: "move_success_v6_give_up"
+    })
+  }
+};
+var gift_v6_default = giftV6;
+
+// src/docs/examples/gift-red-packet-head.ts
+var HEAD_HEIGHT2 = 158;
+function sparkle(left, size, delay) {
+  return {
+    type: "box",
+    // bottom: 14px 换算成 top —— rect 只有 [x, y, w, h]，没有 bottom
+    rect: [left, HEAD_HEIGHT2 - 14 - size, size, size],
+    style: {
+      radius: "50%",
+      background: "#ffe3a1",
+      shadow: "0 0 9px rgba(255,214,130,0.95)",
+      // 初始透明：关键帧从 opacity 0 起步，没有这一行会在动画开播前闪一下
+      opacity: "0",
+      pointerEvents: "none"
+    },
+    animate: {
+      name: "floatUp",
+      duration: 4400,
+      delay,
+      easing: "linear",
+      iteration: "infinite"
+    }
+  };
+}
+function createHead2() {
+  return {
+    type: "box",
+    style: {
+      width: "100%",
+      height: HEAD_HEIGHT2,
+      background: "linear-gradient(168deg,#ff6a52 0%,#f5433a 54%,#dd2b22 100%)",
+      overflow: "hidden"
+    },
+    children: [
+      {
+        // 顶部的暖光晕，原页面是 .rp-hd::before
+        type: "box",
+        rect: ["50%", -70, 300, 180],
+        style: {
+          background: "radial-gradient(ellipse, rgba(255,220,150,0.4), transparent 66%)",
+          // 关键帧里的 transform 同样带着 translateX(-50%)，否则播动画时会向右跳半个身位
+          transform: "translateX(-50%)",
+          pointerEvents: "none"
+        },
+        animate: {
+          name: "glow",
+          duration: 3600,
+          easing: "ease-in-out",
+          iteration: "infinite"
+        }
+      },
+      {
+        type: "flex",
+        rect: [0, 0, "100%", "auto"],
+        style: { direction: "column", align: "center", padding: "26px 26px 0" },
+        children: [
+          {
+            type: "flex",
+            style: {
+              alignSelf: "center",
+              align: "center",
+              gap: 6,
+              padding: "5px 14px",
+              fontSize: 12,
+              color: "#ffe9e2",
+              letterSpacing: "0.04em",
+              background: "rgba(255,255,255,0.2)",
+              radius: 14
+            },
+            animate: {
+              name: "bob",
+              duration: 2800,
+              easing: "ease-in-out",
+              iteration: "infinite"
+            },
+            children: [
+              { type: "text", content: "\u{1F381}", style: { fontSize: 14 } },
+              {
+                type: "text",
+                content: "\u642C\u5BB6\u6210\u529F \xB7 \u4E13\u5C5E\u56DE\u9988",
+                style: { fontSize: 12, color: "#ffe9e2" }
+              }
+            ]
+          },
+          {
+            // 一行混排两种颜色：拆成三个 text，用 baseline 对齐，DSL 没有富文本
+            type: "flex",
+            style: { align: "baseline", justify: "center", marginTop: 14 },
+            children: [
+              {
+                type: "text",
+                content: "\u606D\u559C\u83B7\u5F97 ",
+                style: {
+                  fontSize: 25,
+                  fontWeight: "800",
+                  color: "#ffffff",
+                  letterSpacing: "0.02em",
+                  textShadow: "0 2px 8px rgba(150,20,10,0.22)"
+                }
+              },
+              {
+                type: "text",
+                content: "1 \u5206\u94B1",
+                style: {
+                  fontSize: 25,
+                  fontWeight: "800",
+                  color: "#ffdc7d",
+                  letterSpacing: "0.02em",
+                  textShadow: "0 2px 8px rgba(150,20,10,0.22)"
+                }
+              },
+              {
+                type: "text",
+                content: " \u534A\u5E74\u5361",
+                style: {
+                  fontSize: 25,
+                  fontWeight: "800",
+                  color: "#ffffff",
+                  letterSpacing: "0.02em",
+                  textShadow: "0 2px 8px rgba(150,20,10,0.22)"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      sparkle("13%", 6, 0),
+      sparkle("33%", 4, 1100),
+      sparkle("64%", 6, 2200),
+      sparkle("85%", 5, 3300)
+    ]
+  };
+}
+function createPlate() {
+  return {
+    type: "box",
+    style: {
+      // 负的上外边距把牌子提上去压住红头，左右各留 26 与主体对齐
+      margin: "-38px 26px 0",
+      height: 70,
+      background: "linear-gradient(140deg,#fffdf6,#fff2d9)",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "#ffe1a8",
+      radius: 13,
+      shadow: "0 10px 26px rgba(140,30,15,0.24)",
+      // 扫光条比牌子宽，不裁会飘到牌子外面
+      overflow: "hidden"
+    },
+    animate: {
+      name: "plateIn",
+      duration: 660,
+      delay: 120,
+      easing: "cubic-bezier(0.18, 1.05, 0.35, 1)"
+    },
+    children: [
+      {
+        type: "box",
+        rect: [-110, 0, 72, "100%"],
+        style: {
+          background: "linear-gradient(100deg, transparent, rgba(255,255,255,0.85), transparent)",
+          pointerEvents: "none"
+        },
+        // 原页面动的是 left，DSL 只放开 transform：改成横向位移，效果等价且不触发重排
+        animate: {
+          name: "sweep",
+          duration: 4e3,
+          delay: 1200,
+          easing: "ease-in-out",
+          iteration: "infinite"
+        }
+      },
+      {
+        type: "flex",
+        rect: [0, 0, "100%", "100%"],
+        style: { align: "center", gap: 14, padding: "0 18px" },
+        children: [
+          {
+            type: "flex",
+            style: {
+              align: "baseline",
+              flexShrink: "0",
+              color: "#d3281f",
+              transformOrigin: "left center"
+            },
+            animate: {
+              name: "pop",
+              duration: 3400,
+              delay: 1e3,
+              easing: "ease-in-out",
+              iteration: "infinite"
+            },
+            children: [
+              {
+                type: "text",
+                content: "\xA5",
+                style: {
+                  marginRight: 1,
+                  fontSize: 18,
+                  fontWeight: "800",
+                  color: "#d3281f"
+                }
+              },
+              {
+                type: "text",
+                content: "0.01",
+                style: {
+                  fontSize: 42,
+                  fontWeight: "900",
+                  lineHeight: 1,
+                  letterSpacing: "-0.03em",
+                  color: "#d3281f"
+                }
+              }
+            ]
+          },
+          {
+            type: "box",
+            style: { width: 1, height: 34, background: "#f2dcae", flexShrink: "0" }
+          },
+          {
+            type: "flex",
+            style: { direction: "column", flex: "1" },
+            children: [
+              {
+                type: "text",
+                content: "\u6253\u5355\u53D1\u8D27 \xB7 \u5168\u529F\u80FD\u534A\u5E74\u5361",
+                style: {
+                  fontSize: 14.5,
+                  fontWeight: "800",
+                  color: "#8f3517",
+                  letterSpacing: "0.02em"
+                }
+              },
+              {
+                type: "text",
+                content: "\u539F\u4EF7 \xA590 / \u534A\u5E74",
+                style: {
+                  marginTop: 5,
+                  fontSize: 11.5,
+                  lineHeight: 1.5,
+                  color: "#b08b62",
+                  textDecoration: "line-through"
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  };
+}
+
+// src/docs/examples/gift-red-packet-body.ts
+var FEATURES = [
+  { icon: "\u{1F5A8}\uFE0F", title: "\u6279\u91CF\u6253\u5355", desc: "\u6279\u91CF\u9762\u5355\u4E00\u6B21\u51FA", delay: 340 },
+  { icon: "\u{1F69A}", title: "\u6279\u91CF\u53D1\u8D27", desc: "\u5168\u5E97\u8BA2\u5355\u79D2\u53D1\u5B8C", delay: 420 },
+  { icon: "\u{1F3EA}", title: "\u591A\u5E97\u7BA1\u7406", desc: "\u7BA1\u7406\u591A\u4E2A\u5E97\u94FA\u8BA2\u5355", delay: 500 },
+  { icon: "\u{1F9E9}", title: "\u8BA2\u5355\u5408\u5E76", desc: "\u540C\u5740\u5408\u5355\u7701\u8FD0\u8D39", delay: 580 },
+  {
+    icon: "\u{1F4CD}",
+    title: "\u7269\u6D41\u8F68\u8FF9",
+    desc: "\u9762\u5355\u7269\u6D41\u8F68\u8FF9\uFF0C\u5BA2\u8BC9\u63D0\u524D\u62E6\u622A",
+    delay: 660,
+    full: true
+  }
+];
+function featureCell(feature) {
+  return {
+    type: "flex",
+    style: {
+      // 两列网格用 flex wrap + 百分比宽复刻：gap 8 时每列是 calc(50% - 4px)，
+      // 末项写 100% 就等于原来的 grid-column: 1 / -1
+      width: feature.full ? "100%" : "calc(50% - 4px)",
+      align: "center",
+      gap: 9,
+      padding: "9px 11px",
+      background: "#fff8f1",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "#ffe6d5",
+      radius: 9
+    },
+    animate: { name: "cellIn", duration: 460, delay: feature.delay, easing: "ease-out" },
+    children: [
+      {
+        type: "flex",
+        style: {
+          justify: "center",
+          align: "center",
+          width: 26,
+          height: 26,
+          // 图标位不许被压扁，否则长副标题会把它挤成一条
+          flexShrink: "0",
+          background: "#ffe9d8",
+          radius: 7
+        },
+        children: [{ type: "text", content: feature.icon, style: { fontSize: 15 } }]
+      },
+      {
+        type: "flex",
+        style: { direction: "column", minWidth: 0 },
+        children: [
+          {
+            type: "text",
+            content: feature.title,
+            style: {
+              fontSize: 13,
+              fontWeight: "700",
+              lineHeight: 1.35,
+              color: "#8f3517"
+            }
+          },
+          {
+            type: "text",
+            content: feature.desc,
+            style: {
+              fontSize: 11.5,
+              lineHeight: 1.35,
+              color: "#b07a5c",
+              whiteSpace: "nowrap"
+            }
+          }
+        ]
+      }
+    ]
+  };
+}
+function createFeatureGrid() {
+  return {
+    type: "flex",
+    style: { wrap: true, gap: 8 },
+    children: FEATURES.map(featureCell)
+  };
+}
+function createCta(action) {
+  return {
+    type: "box",
+    // 【必须写死高度的原因】这是绝对定位容器（角标要骑在按钮上沿外面，只能脱流），
+    // 子节点撑不起它，不写死就塌成 0。52 即原页面 .rp-cta 的按钮高度
+    style: { width: "100%", height: 52, marginTop: 16 },
+    children: [
+      {
+        type: "box",
+        // 高度跟满父级即可，不用再写一遍 52
+        rect: [0, 0, "100%", "100%"],
+        style: {
+          background: "linear-gradient(92deg,#ff8f3d,#f5433a)",
+          radius: 26,
+          overflow: "hidden",
+          cursor: "pointer",
+          shadow: "0 8px 20px rgba(245,67,58,0.34)",
+          transition: "transform 0.18s, box-shadow 0.18s"
+        },
+        animate: {
+          name: "breath",
+          duration: 2400,
+          easing: "ease-in-out",
+          iteration: "infinite"
+        },
+        // 原页面 hover 时上浮并暂停呼吸动画，两条都能配
+        hoverStyle: { transform: "translateY(-2px)", animationPlayState: "paused" },
+        action,
+        children: [
+          {
+            type: "box",
+            rect: [-90, 0, 62, "100%"],
+            style: {
+              background: "linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent)",
+              pointerEvents: "none"
+            },
+            animate: {
+              name: "sweep",
+              duration: 2900,
+              delay: 800,
+              easing: "ease-in-out",
+              iteration: "infinite"
+            }
+          },
+          {
+            type: "flex",
+            rect: [0, 0, "100%", "100%"],
+            style: { justify: "center", align: "center", gap: 8 },
+            children: [
+              { type: "text", content: "\u{1F381}", style: { fontSize: 18 } },
+              {
+                type: "text",
+                content: "1 \u5206\u94B1\u8BA2\u9605\u534A\u5E74",
+                style: {
+                  fontSize: 17,
+                  fontWeight: "700",
+                  color: "#ffffff",
+                  letterSpacing: "0.03em"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        // 角标骑在按钮上沿外面：y 写负值即可，父级没有 overflow: hidden 就不会被裁
+        type: "flex",
+        rect: ["calc(100% - 112px)", -10, "auto", 22],
+        style: {
+          justify: "center",
+          align: "center",
+          gap: 4,
+          padding: "0 10px",
+          fontSize: 11.5,
+          fontWeight: "700",
+          color: "#7a3b00",
+          letterSpacing: "0.03em",
+          background: "linear-gradient(96deg,#ffe08a,#ffc24d)",
+          borderWidth: 1,
+          borderStyle: "solid",
+          borderColor: "rgba(255,255,255,0.75)",
+          radius: 11,
+          shadow: "0 4px 10px rgba(190,120,20,0.3)",
+          // 角标压在按钮上，不穿透点击的话这一块就点不动了
+          pointerEvents: "none",
+          zIndex: 2
+        },
+        animate: {
+          name: "badge",
+          duration: 2400,
+          easing: "ease-in-out",
+          iteration: "infinite"
+        },
+        children: [
+          { type: "text", content: "\u23F0", style: { fontSize: 12 } },
+          {
+            type: "text",
+            content: "\u9650\u65F6\u4F18\u60E0",
+            style: { fontSize: 11.5, fontWeight: "700", color: "#7a3b00" }
+          }
+        ]
+      }
+    ]
+  };
+}
+
+// src/docs/examples/gift-red-packet.ts
+var PURCHASE_URL2 = "https://fuwu.jinritemai.com/detail?from=isv.promotion&service_id=37954&promotionIdCode=CgYIASAHKAESXgpcZiuxEgmEfp%2BCuIELbEjHDmFi85jdhDOrbaXhk7JWo7S2zDy7ZoIOuQoLYASUv9XymFznWhybdvdPTpaa4bhM0ydWadh6ViYxI7%2FhpcEo%2F7W4MlNCKrcmzIu9j3YaAA%3D%3D";
+var giftRedPacket = {
+  version: 1,
+  meta: { name: "\u590D\u523B\u7EBF\u4E0A\u5F39\u7A97 \xB7 1 \u5206\u94B1\u534A\u5E74\u5361\uFF08\u7EA2\u5305\u5F00\u7BB1\u7248\uFF09" },
+  entry: "main",
+  keyframes: {
+    /** 遮罩淡入 */
+    fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
+    /** 弹窗回弹放大 */
+    zoomIn: {
+      from: { opacity: "0", transform: "scale(0.7)" },
+      to: { opacity: "1", transform: "scale(1)" }
+    },
+    /** 红头顶部光晕呼吸。transform 里必须带上 translateX(-50%)，否则播动画时会向右跳 */
+    glow: {
+      "0%": { opacity: "0.7", transform: "translateX(-50%) scale(1)" },
+      "50%": { opacity: "1", transform: "translateX(-50%) scale(1.14)" },
+      "100%": { opacity: "0.7", transform: "translateX(-50%) scale(1)" }
+    },
+    /** 缎带轻浮 */
+    bob: {
+      "0%": { transform: "translateY(0)" },
+      "50%": { transform: "translateY(-3px)" },
+      "100%": { transform: "translateY(0)" }
+    },
+    /** 金色光点：从下往上飘 116px，两头都是透明 */
+    floatUp: {
+      "0%": { opacity: "0", transform: "translateY(30px) scale(0.5)" },
+      "18%": { opacity: "0.95" },
+      "100%": { opacity: "0", transform: "translateY(-86px) scale(1)" }
+    },
+    /** 价格牌托上来 */
+    plateIn: {
+      "0%": { opacity: "0", transform: "translateY(24px) scale(0.94)" },
+      "100%": { opacity: "1", transform: "translateY(0) scale(1)" }
+    },
+    /**
+     * 扫光：一条斜光带从左侧滑到右侧外面，停一会儿再来一趟。
+     *
+     * 原页面动的是 `left`，这里改成 `transform` 位移 —— 一是 DSL 只放开 transform，
+     * 二是动 left 每帧都要重排，动 transform 只走合成层。
+     */
+    sweep: {
+      "0%": { transform: "skew(-18deg) translateX(0)" },
+      "42%": { transform: "skew(-18deg) translateX(600px)" },
+      "100%": { transform: "skew(-18deg) translateX(600px)" }
+    },
+    /** 价格每隔几秒弹一下 */
+    pop: {
+      "0%": { transform: "scale(1)" },
+      "86%": { transform: "scale(1)" },
+      "92%": { transform: "scale(1.09)" },
+      "100%": { transform: "scale(1)" }
+    },
+    /** 权益格入场，五格靠各自的 delay 交错 */
+    cellIn: {
+      "0%": { opacity: "0", transform: "translateY(10px)" },
+      "100%": { opacity: "1", transform: "translateY(0)" }
+    },
+    /** 「限时优惠」角标轻浮 */
+    badge: {
+      "0%": { transform: "translateY(0)" },
+      "50%": { transform: "translateY(-2px)" },
+      "100%": { transform: "translateY(0)" }
+    },
+    /** CTA 呼吸：只放大阴影不放大自身，按钮尺寸恒定，不会把下面的内容顶动 */
+    breath: {
+      "0%": { shadow: "0 8px 20px rgba(245,67,58,0.34)" },
+      "50%": { shadow: "0 12px 30px rgba(245,67,58,0.56)" },
+      "100%": { shadow: "0 8px 20px rgba(245,67,58,0.34)" }
+    }
+  },
+  views: {
+    main: {
+      type: "popup",
+      stage: {
+        width: 460,
+        height: "auto",
+        layout: "flow",
+        mask: true,
+        maskClosable: true,
+        // 原页面遮罩 rgba(0,0,0,0.65) + 4px 毛玻璃；与挽留层共用同一份 ——
+        // 只有栈顶那层遮罩会画，两层不一致就会在弹出挽留层时看到背景落差
+        maskStyle: GIFT_MASK_STYLE,
+        // 点遮罩弹二次挽留，不直接关（原页面 @click.self="tryClose()"）
+        maskAction: { type: "open", view: "confirm", mode: "stack" },
+        // 内置关闭按钮画的就是矢量交叉线，和原页面那段内联 SVG 是同一种东西
+        closeButton: {
+          position: "top-right",
+          offset: [14, 14],
+          size: 30,
+          style: {
+            background: "rgba(255,255,255,0.22)",
+            color: "#ffffff",
+            transition: "background 0.2s"
+          },
+          hoverStyle: { background: "rgba(255,255,255,0.38)" },
+          action: { type: "open", view: "confirm", mode: "stack" }
+        },
+        style: {
+          radius: 16,
+          background: "#ffffff",
+          shadow: "0 18px 50px rgba(20,26,45,0.24)",
+          maxWidth: "90vw",
+          // 原页面 .rp-modal 显式指定了字体栈，弹窗内所有文字继承它，
+          // 不写就跟着宿主页面走、字形和字重会有出入
+          fontFamily: "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif"
+        },
+        animate: {
+          name: "zoomIn",
+          duration: 500,
+          easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+        },
+        maskAnimate: { name: "fadeIn", duration: 400 },
+        onShow: { type: "track", event: "move_success_rp_show" },
+        onClose: {
+          type: "track",
+          event: "move_success_rp_close",
+          params: { reason: "{{ closeReason }}" }
+        }
+      },
+      nodes: [
+        createHead2(),
+        createPlate(),
+        {
+          type: "flex",
+          style: {
+            direction: "column",
+            // 底部 38 而不是原页面的 20：原页面 CTA 下面还有一行「今日不再提示」
+            // （约 18px + 14px 间距），那一行按需求去掉了，不把留白补回来底部就贴得慌
+            padding: "18px 26px 38px",
+            background: "#ffffff"
+          },
+          children: [
+            createFeatureGrid(),
+            createCta({
+              type: "sequence",
+              actions: [
+                {
+                  type: "track",
+                  event: "move_success_rp_claim",
+                  params: { from: "main" }
+                },
+                { type: "navigate", url: PURCHASE_URL2 }
+              ]
+            })
+          ]
+        }
+      ]
+    },
+    confirm: createGiveUpView({
+      url: PURCHASE_URL2,
+      claimEvent: "move_success_rp_claim",
+      giveUpEvent: "move_success_rp_give_up"
+    })
+  }
+};
+var gift_red_packet_default = giftRedPacket;
+
+// src/docs/examples/index.ts
+var HOTSPOT_BG = "rgba(255,68,51,0.16)";
+var imageHotspot = {
+  version: 1,
+  type: "popup",
+  meta: { name: "\u6574\u56FE\u70ED\u533A\u5F39\u7A97" },
+  stage: {
+    // 窄屏时跟着父级收，最宽不超过 420
+    width: "calc(100% - 48px)",
+    height: 520,
+    mask: true,
+    maskClosable: true,
+    // 关闭按钮放到弹窗正下方外侧：offset 的 y 写负值即可，不会被圆角裁掉
+    closeButton: {
+      show: true,
+      position: "bottom-center",
+      offset: [0, -46],
+      size: 34,
+      // 不写 icon / image，用内置的矢量 × 图标（跟着 style.color 走）
+      style: {
+        background: "rgba(0,0,0,0.4)",
+        color: "#ffffff",
+        fontSize: 18,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: "rgba(255,255,255,0.55)"
+      }
+    },
+    style: { radius: 12, maxWidth: 420 },
+    // 曝光埋点：数据就绪、弹窗真正展示时触发一次
+    onShow: { type: "track", event: "popup_show", params: { popup: "image_hotspot" } },
+    // 关闭埋点：点 X、点遮罩、点「不再提醒」都会触发，用 closeReason 区分
+    onClose: {
+      type: "track",
+      event: "popup_close",
+      params: { popup: "image_hotspot", reason: "{{ closeReason }}" }
+    }
+  },
+  nodes: [
+    {
+      // 背景图用百分比铺满舞台，舞台宽度变了也不用改配置
+      id: "bg",
+      type: "image",
+      rect: [0, 0, "100%", "100%"],
+      src: "https://picsum.photos/id/1015/420/520"
+    },
+    // 热区想放几个放几个，位置各自由 rect 决定，互不影响。
+    // 热区 = 一个透明的 box + action，调试时把 background 的透明度调高就能看见框。
+    {
+      id: "hotspot-rule",
+      type: "box",
+      // 右上角「活动规则」
+      rect: ["62%", 24, "30%", 30],
+      style: { radius: 15, background: HOTSPOT_BG, cursor: "pointer" },
       action: {
         type: "sequence",
         actions: [
@@ -3579,6 +4995,16 @@ var examples = [
     label: "\u2469 \u62BD\u5C49\u5E95\u90E8 Banner\uFF08\u56FA\u5B9A 400\xD745\uFF09",
     value: "drawerBottomBanner",
     dsl: drawerBottomBanner
+  },
+  {
+    label: "\u246A \u590D\u523B\u7EBF\u4E0A\u5F39\u7A97 \xB7 4 \u6298\u793C\u5305\uFF08\u52A8\u753B + \u4E8C\u6B21\u633D\u7559\uFF09",
+    value: "giftV6",
+    dsl: gift_v6_default
+  },
+  {
+    label: "\u246B \u590D\u523B\u7EBF\u4E0A\u5F39\u7A97 \xB7 1 \u5206\u94B1\u534A\u5E74\u5361\uFF08\u52A8\u753B\u6700\u5BC6\u7684\u4E00\u4EFD\uFF09",
+    value: "giftRedPacket",
+    dsl: gift_red_packet_default
   }
 ];
 var examples_default = examples;
@@ -3612,7 +5038,7 @@ function blockToMarkdown(block) {
       return "";
   }
 }
-function toMarkdown(sections10, meta2) {
+function toMarkdown(sections11, meta2) {
   const lines = [
     "# \u8425\u9500\u5185\u5BB9 DSL \xB7 \u5F00\u53D1\u6587\u6863",
     "",
@@ -3622,7 +5048,7 @@ function toMarkdown(sections10, meta2) {
     "> \u672C\u6587\u4EF6\u7531\u300C\u8425\u9500DSL\u8C03\u8BD5\u53F0 \u2192 \u5F00\u53D1\u6587\u6863\u300D\u5BFC\u51FA\u3002DSL \u6709\u6539\u52A8\u65F6\u8BF7\u91CD\u65B0\u5BFC\u51FA\uFF0C\u4E0D\u8981\u624B\u5DE5\u4FEE\u6539\u672C\u6587\u4EF6\u3002",
     ""
   ];
-  sections10.forEach((section) => {
+  sections11.forEach((section) => {
     lines.push(`## ${section.title}`, "");
     section.blocks.forEach((block) => {
       const text = blockToMarkdown(block);
@@ -3683,17 +5109,28 @@ function structureSection() {
   "layout": "flow",           // "absolute" \u6216 "flow"\uFF0C\u89C1\u4E0B\u9762\u300C\u5E03\u5C40\u300D
   "mask": true,
   "maskClosable": false,
+  // \u53EF\u9009\uFF1A\u906E\u7F69\u6837\u5F0F\uFF0C\u8D70 style \u767D\u540D\u5355\u3002\u4E0D\u5199\u5C31\u662F\u5185\u7F6E\u7684 rgba(0,0,0,0.55) \u7EAF\u8272
+  "maskStyle": { "background": "rgba(0,0,0,0.65)", "backdropFilter": "blur(4px)" },
+  // \u53EF\u9009\uFF1A\u70B9\u906E\u7F69\u505A\u4EC0\u4E48\u3002\u4E0D\u5199 = \u5173\u6389\u8FD9\u4E00\u5C42\uFF1B\u5199\u4E86 = \u53EA\u6267\u884C\u52A8\u4F5C\u3001\u4E0D\u5173\u5C42
+  "maskAction": { "type": "open", "view": "confirm", "mode": "stack" },
   "closeButton": {
     "position": "top-right",  // ${CLOSE_POSITIONS.join(" | ")}
     "offset": [12, 12],       // [x, y]\uFF1B\u5199\u8D1F\u503C = \u6309\u94AE\u8DD1\u5230\u5F39\u7A97\u5916\u9762
     "size": 26,
     // icon / image \u90FD\u4E0D\u5199\u65F6\uFF0C\u753B\u7684\u662F\u5185\u7F6E\u7684\u77E2\u91CF \xD7 \u56FE\u6807 \u2014\u2014 \u9ED8\u8BA4\u5C31\u662F\u5BF9\u7684\uFF0C\u4E0D\u7528\u914D
-    "style": { "background": "rgba(0,0,0,0.35)", "color": "#fff" }
+    "style": { "background": "rgba(0,0,0,0.35)", "color": "#fff" },
+    // \u53EF\u9009\uFF1A\u70B9 \u2715 \u505A\u4EC0\u4E48\u3002\u4E0D\u5199 = \u5173\u6389\u8FD9\u4E00\u5C42\uFF1B\u5199\u4E86 = \u53EA\u6267\u884C\u52A8\u4F5C\u3001\u4E0D\u5173\u5C42
+    "action": { "type": "open", "view": "confirm", "mode": "stack" }
   },
   "style": { "radius": 18, "maxWidth": 420 }
 }
 \`\`\`
 
+\`maskClosable\` \u51B3\u5B9A\u906E\u7F69\u54CD\u4E0D\u54CD\u5E94\u70B9\u51FB\uFF0C\`maskAction\` \u51B3\u5B9A\u70B9\u4E86\u505A\u4EC0\u4E48\uFF0C\u4E24\u4EF6\u4E8B\uFF1A
+\`maskClosable: false\` \u65F6\u5149\u914D \`maskAction\` \u4E0D\u4F1A\u89E6\u53D1\u3002
+\`maskAction\` / \`closeButton.action\` \u914D\u4E86\u5C31**\u4E0D\u518D\u81EA\u52A8\u5173\u5C42**\uFF0C\u8981\u5173\u5C31\u628A \`close\` \u5199\u8FDB\u52A8\u4F5C\u91CC\u3002
+\u300C\u70B9 \u2715 \u6216\u70B9\u906E\u7F69\u5148\u5F39\u4E8C\u6B21\u633D\u7559\u300D\u7684\u6807\u51C6\u5199\u6CD5\u5C31\u662F\u8FD9\u4E24\u4E2A\u5B57\u6BB5\u5404\u914D\u4E00\u4E2A \`open\`\u3002
+
 **\u5173\u95ED\u6309\u94AE\u7684\u56FE\u6807\u4E0D\u8981\u778E\u914D\u3002** \u9ED8\u8BA4\u662F\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\uFF08\u4E24\u6761\u4EA4\u53C9\u7EBF\uFF0C\u5C45\u4E2D\u5BF9\u9F50\u5DF2\u7ECF\u8C03\u597D\uFF09\uFF0C
 \u7528\u6237\u6CA1\u63D0\u300C\u6362\u56FE\u6807\u300D\u5C31**\u4E0D\u8981\u5199 \`icon\`**\u2014\u2014\u5199\u6210 \`"icon": "\xD7"\` \u4F1A\u9000\u56DE\u6587\u672C\u5B57\u7B26\u6E32\u67D3\uFF0C
 \u90A3\u4E2A\u5B57\u5F62\u672C\u8EAB\u504F\u4E0A\u504F\u5C0F\uFF0C\u770B\u7740\u5C31\u662F\u6CA1\u5BF9\u9F50\u3002\u786E\u5B9E\u8981\u6362\u65F6\uFF1A
@@ -3755,6 +5192,8 @@ function checklistSection() {
 - [ ] \u6BCF\u4E2A\u89C6\u56FE\u7684 \`stage\` \u90FD\u6709 \`onShow\` \u66DD\u5149\u57CB\u70B9\u548C \`onClose\` \u5173\u95ED\u57CB\u70B9\uFF0C\`onClose\` \u7684 params \u91CC\u5E26\u4E0A \`"reason": "{{ closeReason }}"\`
 - [ ] \u5173\u95ED\u6309\u94AE\u6CA1\u6709\u591A\u4F59\u7684 \`icon\`\uFF08\u9ED8\u8BA4\u7684\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\u5C31\u662F\u5BF9\u7684\uFF09
 - [ ] \u6CA1\u6709\u7528 \`call\` \u53BB\u8BB0\u5F55\u7528\u6237\u610F\u56FE\u6216\u5199\u672C\u5730\u5B58\u50A8\uFF08\`call\` \u53EA\u7528\u6765\u8BA9\u5BBF\u4E3B\u505A\u4E00\u4EF6\u4E8B\uFF0C\u5982\u5524\u8D77\u5145\u503C / \u6253\u5F00\u5BA2\u670D / \u590D\u5236\u5230\u526A\u8D34\u677F\uFF09\u3002\u300C\u4E0D\u518D\u63D0\u9192\u300D\u5199\u6210 \`{ "type": "close", "reason": "user-dismiss" }\`\uFF0C\u4E0D\u914D \`call\`
+- [ ] \u6BCF\u4E2A \`animate.name\` \u90FD\u80FD\u5728\u9876\u5C42 \`keyframes\` \u91CC\u627E\u5230\uFF1B\`easing\` \u5728\u767D\u540D\u5355\u91CC\uFF1B\u6CA1\u6709\u5B9A\u4E49\u4E86\u5374\u6CA1\u4EBA\u5F15\u7528\u7684\u5173\u952E\u5E27
+- [ ] \u88C5\u9970\u6027\u56FE\u5C42\uFF08\u5149\u6655\u3001\u626B\u5149\u3001\u5149\u70B9\uFF09\u90FD\u5199\u4E86 \`"pointerEvents": "none"\`
 - [ ] \u8F93\u51FA\u7684\u662F\u5408\u6CD5 JSON\uFF08\u6CA1\u6709\u591A\u4F59\u9017\u53F7\u3001\u6CA1\u6709\u6CE8\u91CA\uFF09`;
 }
 function requirementSection() {
@@ -3910,6 +5349,9 @@ function countdownSection() {
 
 \u5199\u6210 \`"\u4E0B\u5468\u4E09"\` \u8FD9\u79CD\u8BC6\u522B\u4E0D\u4E86\u7684\u4F1A\u5728\u4FDD\u5B58\u524D\u62A5\u9519\u3002
 
+\u300C\u6253\u5F00\u540E 5 \u5206\u949F\u5185\u4E0B\u5355\u300D\u8FD9\u79CD**\u76F8\u5BF9**\u65F6\u957F\u4E0D\u8981\u53BB\u7B97\u7ED3\u675F\u65F6\u95F4\uFF0C\u5199 \`"duration": 300000\`\uFF08\u6BEB\u79D2\uFF09\u4EE3\u66FF \`to\`\uFF0C
+\u4ECE\u8FD9\u4E00\u5C4F\u5C55\u793A\u90A3\u4E00\u523B\u8D77\u7B97\u3002\`to\` \u548C \`duration\` \u81F3\u5C11\u8981\u6709\u4E00\u4E2A\uFF0C\u540C\u65F6\u5199\u4EE5 \`to\` \u4E3A\u51C6\u3002
+
 \u5F52\u96F6\u65F6\u53EF\u4EE5\u505A\u70B9\u4EC0\u4E48\uFF0C\u7528 \`onEnd\`\uFF08\u4EFB\u610F\u52A8\u4F5C\uFF09\uFF1A\`{ "type": "track", "event": "countdown_end" }\` \u4E0A\u62A5\u3001\`{ "type": "close" }\` \u81EA\u52A8\u5173\u5F39\u7A97\u3001\`{ "type": "open", "view": "expired", "mode": "replace" }\` \u6362\u5C4F\u3002**\u53EA\u5728\u7528\u6237\u773C\u770B\u7740\u5B83\u5F52\u96F6\u65F6\u89E6\u53D1**\uFF0C\u6253\u5F00\u65F6\u5C31\u5DF2\u7ECF\u8FC7\u671F\u7684\u4E0D\u89E6\u53D1\u3002
 
 \u60F3\u8BA9\u300C\u5DF2\u7ED3\u675F\u300D\u663E\u793A\u6210\u53E6\u4E00\u5957\u6392\u7248\uFF0C\u7528 \`cd.ended\` \u914D \`visibleWhen\`\uFF0C\u4E0D\u8981\u7528 \`onEnd\`\u3002
@@ -4023,6 +5465,65 @@ ${DEFAULT_USER_FIELDS.map((field) => `\`${field}\`\uFF08${USER_FIELD_LABELS[fiel
 \u5207 tab \u8981\u6362\u6210\u5B8C\u5168\u4E0D\u540C\u7684\u6392\u7248\u65F6\uFF0C\u5199\u4E24\u5957\u8282\u70B9\u5404\u914D\u4E00\u4E2A \`visibleWhen\`\uFF08\u5982 \`current.mode == 'grid'\` / \`current.mode == 'list'\`\uFF09\uFF0C\u540C\u4E00\u65F6\u523B\u53EA\u663E\u793A\u4E00\u5957\u3002\u4E0D\u8981\u8BD5\u56FE\u7528\u4E00\u5957\u8282\u70B9\u786C\u51D1\u3002`;
 }
 
+// src/docs/ai-prompt/animation.ts
+function animationSection() {
+  return `# \u52A8\u753B\u4E0E hover
+
+\u4E24\u6B65\uFF1A\u9876\u5C42 \`keyframes\` \u5B9A\u4E49\u5173\u952E\u5E27 \u2192 \u9700\u8981\u52A8\u7684\u5730\u65B9\u5199 \`animate\` \u5F15\u7528\u5B83\u3002\u5173\u952E\u5E27\u5E93\u5168\u914D\u7F6E\u5171\u7528\u3002
+
+\`\`\`jsonc
+"keyframes": {
+  "zoomIn": { "from": { "opacity": "0", "transform": "scale(0.7)" },
+              "to":   { "opacity": "1", "transform": "scale(1)" } },
+  "floatY": { "0%":   { "transform": "translateY(0)" },
+              "50%":  { "transform": "translateY(-8px)" },
+              "100%": { "transform": "translateY(0)" } }
+},
+"stage": {
+  "animate":     { "name": "zoomIn", "duration": 500, "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+  "maskAnimate": { "name": "fadeIn", "duration": 400 }
+},
+// \u4EFB\u610F\u8282\u70B9\u3001\u4EE5\u53CA stage.closeButton \u4E0A\u90FD\u80FD\u5199 animate
+{ "animate": { "name": "floatY", "duration": 3000, "easing": "ease-in-out", "iteration": "infinite" } }
+\`\`\`
+
+\`animate\` \u5B57\u6BB5\uFF1A\`name\`\uFF08\u5FC5\u586B\uFF0C\u5FC5\u987B\u5728 keyframes \u91CC\u5B9A\u4E49\u8FC7\uFF09\u3001\`duration\`\uFF08\u5FC5\u586B\uFF0C\u6BEB\u79D2\uFF0C>0\uFF09\u3001
+\`delay\`\uFF08\u6BEB\u79D2\uFF0C\u9ED8\u8BA4 0\uFF09\u3001\`easing\`\uFF08\u9ED8\u8BA4 \`ease\`\uFF09\u3001\`iteration\`\uFF08\u6B63\u6574\u6570\u6216 \`"infinite"\`\uFF0C\u9ED8\u8BA4 1\uFF09\u3001
+\`direction\`\uFF08\`normal\`/\`reverse\`/\`alternate\`/\`alternate-reverse\`\uFF09\u3001\`fill\`\uFF08\u9ED8\u8BA4 \`both\`\uFF0C**\u4E0D\u8981\u6539**\uFF09\u3002
+
+\`easing\` \u53EA\u80FD\u662F\uFF1A${ALLOWED_EASINGS.map((item) => "`" + item + "`").join(" ")}\uFF0C
+\u6216 \`cubic-bezier(0.34, 1.56, 0.64, 1)\` \u8FD9\u79CD\u56DB\u53C2\u6570\u5199\u6CD5\u3002**\u522B\u7684\u53D6\u503C\u4E00\u5F8B\u62A5\u9519**\u3002
+
+\u5173\u952E\u5E27\u7684\u504F\u79FB\u91CF\u53EA\u80FD\u5199 \`"from"\` / \`"to"\` / \`"50%"\`\uFF1B\u6BCF\u4E00\u5E27\u7684\u503C\u662F\u6837\u5F0F\u5BF9\u8C61\uFF0C\u952E\u8D70 style \u767D\u540D\u5355
+\uFF08\u52A8\u753B\u91CC\u5E38\u7528\u7684\u5C31 \`transform\` \`opacity\` \`shadow\` \`background\` \`color\`\uFF09\u3002
+
+\u89C4\u5219\uFF1A
+
+- \u4E00\u4E2A\u8282\u70B9\u53EA\u80FD\u6302\u4E00\u7EC4 \`animate\`\u3002\u65E2\u8981\u5165\u573A\u53C8\u8981\u5FAA\u73AF\uFF0C\u5C31\u62C6\u6210\u7236\u5B50\u4E24\u5C42
+- \u4EA4\u9519\u5165\u573A\u7528**\u540C\u4E00\u7EC4\u5173\u952E\u5E27 + \u4E0D\u540C \`delay\`**\u3002\`delay\` \u5FC5\u987B\u662F\u5E38\u91CF\u6570\u5B57\uFF0C\u4E0D\u652F\u6301 \`{{ }}\`\uFF0C\u6240\u4EE5\u4EA4\u9519\u5217\u8868\u8981\u4E00\u683C\u4E00\u683C\u5199\u3001\u4E0D\u80FD\u7528 \`repeat\`
+- \u5FAA\u73AF\u52A8\u753B\u5199 \`"iteration": "infinite"\`\uFF0C\u5E45\u5EA6\u8981\u5C0F\uFF08\u6309\u94AE\u8109\u51B2\u653E\u5927 2% \u5C31\u591F\uFF09
+- \u4F4D\u79FB\u4E00\u5F8B\u7528 \`transform\`\uFF0C\u4E0D\u8981\u52A8\u5BBD\u9AD8 / \`left\`\uFF08\u6BCF\u5E27\u91CD\u6392\uFF09\uFF1B\u6309\u94AE\u547C\u5438\u4F18\u5148\u52A8 \`shadow\`
+- \u88C5\u9970\u5C42\uFF08\u5149\u6655\u3001\u626B\u5149\u6761\u3001\u5149\u70B9\uFF09\u5FC5\u987B\u5199 \`"pointerEvents": "none"\`\uFF0C\u5426\u5219\u6321\u4F4F\u4E0B\u9762\u7684\u6309\u94AE
+- \u5B9A\u4E49\u4E86\u6CA1\u4EBA\u5F15\u7528\u7684\u5173\u952E\u5E27\u4F1A\u544A\u8B66\uFF0C\u4E0D\u8981\u7559
+
+\`hoverStyle\` \u4E0E \`style\` \u540C\u4E00\u5957\u767D\u540D\u5355\uFF0C\u53EA\u5728\u9F20\u6807\u60AC\u505C\u65F6\u751F\u6548\uFF08\u8282\u70B9\u4E0E \`stage.closeButton\` \u90FD\u80FD\u5199\uFF09\u3002
+\u8981\u5E73\u6ED1\u8FC7\u6E21\u5C31\u5728 \`style\` \u91CC\u5199 \`transition\`\u3002\u89E6\u5C4F\u6CA1\u6709 hover\uFF0C**hover \u91CC\u4E0D\u80FD\u653E\u4FE1\u606F**\u3002
+\u5E26\u5FAA\u73AF\u52A8\u753B\u7684\u6309\u94AE\u60F3\u5728\u60AC\u505C\u65F6\u505C\u4F4F\uFF0C\u5728 \`hoverStyle\` \u91CC\u52A0 \`"animationPlayState": "paused"\`
+\uFF08\u5199\u8FDB \`style\` \u7B49\u4E8E\u4E00\u5F00\u59CB\u5C31\u6682\u505C\uFF0C\u6CA1\u6709\u610F\u4E49\uFF09\u3002
+
+\`\`\`jsonc
+{ "type": "text", "content": "\u2715",
+  "style": { "background": "rgba(0,0,0,0.08)", "transition": "background 0.2s" },
+  "hoverStyle": { "background": "rgba(0,0,0,0.2)" } }
+\`\`\`
+
+\u7CFB\u7EDF\u5F00\u4E86\u300C\u51CF\u5C11\u52A8\u6001\u6548\u679C\u300D\u65F6\uFF0C\u89E3\u91CA\u5668\u4F1A\u81EA\u52A8\u628A\u8FD9\u4EFD\u7269\u6599\u7684\u52A8\u753B\u548C\u8FC7\u6E21\u5168\u90E8\u5173\u6389\uFF0C\u914D\u7F6E\u91CC\u4E0D\u7528\u7BA1\uFF0C
+\u4E5F\u6CA1\u6709\u5F00\u5173\u80FD\u7ED5\u8FC7 \u2014\u2014 \u6240\u4EE5**\u9759\u6B62\u72B6\u6001\u4E0B\u8FD9\u4EFD\u7269\u6599\u5FC5\u987B\u5B8C\u6574\u53EF\u8BFB\u3001\u53EF\u70B9**\u3002
+
+\u6CA1\u6709 \`position\`\u3001\u6CA1\u6709\u81EA\u7531 CSS\uFF1A\u7EDD\u5BF9\u5B9A\u4F4D\u7528 \`rect\`\uFF0C\`zIndex\` \u53EA\u5141\u8BB8 0~10\u3002
+\`keyframes\` \u548C \`hoverStyle\` \u7684\u503C\u91CC\u51FA\u73B0 \`{\` \`}\` \`<\` \`>\` \`;\` \`@\` \`/*\` \`\\\` \u65F6\uFF0C\u90A3\u6761\u58F0\u660E\u4F1A\u88AB\u6574\u6761\u4E22\u5F03\u3002`;
+}
+
 // src/docs/ai-prompt/index.ts
 function findExample(value) {
   const found = examples_default.filter((item) => item.value === value)[0];
@@ -4056,6 +5557,7 @@ ${JSON.stringify(full, null, 2)}
     actionSection(),
     viewsSection(),
     countdownSection(),
+    animationSection(),
     exampleSection,
     checklistSection(),
     requirementSection()