@yaoxiu/marketing-dsl 1.2.0 → 1.4.0

package/dist/docs/index.cjs

@@ -0,0 +1,3726 @@
+'use strict';
+
+// src/style.ts
+function toLength(value) {
+  return typeof value === "number" ? `${value}px` : String(value);
+}
+var px = toLength;
+var STYLE_MAP = {
+  // 文字
+  color: ["color", String],
+  fontSize: ["fontSize", px],
+  fontWeight: ["fontWeight", String],
+  fontFamily: ["fontFamily", String],
+  lineHeight: ["lineHeight", (v) => typeof v === "number" && v > 4 ? px(v) : String(v)],
+  letterSpacing: ["letterSpacing", px],
+  textAlign: ["textAlign", String],
+  textDecoration: ["textDecoration", String],
+  whiteSpace: ["whiteSpace", String],
+  // 倒计时这类逐帧变化的数字必须等宽，否则数字会左右抖动
+  fontVariantNumeric: ["fontVariantNumeric", String],
+  // 背景
+  background: ["background", String],
+  backgroundImage: ["backgroundImage", (v) => `url(${JSON.stringify(String(v))})`],
+  backgroundSize: ["backgroundSize", String],
+  backgroundPosition: ["backgroundPosition", String],
+  backgroundRepeat: ["backgroundRepeat", String],
+  // 边框与圆角
+  border: ["border", String],
+  borderColor: ["borderColor", String],
+  borderWidth: ["borderWidth", px],
+  borderStyle: ["borderStyle", String],
+  radius: ["borderRadius", px],
+  // 盒模型
+  padding: ["padding", px],
+  margin: ["margin", px],
+  marginTop: ["marginTop", px],
+  marginBottom: ["marginBottom", px],
+  marginLeft: ["marginLeft", px],
+  marginRight: ["marginRight", px],
+  overflow: ["overflow", String],
+  opacity: ["opacity", String],
+  shadow: ["boxShadow", String],
+  cursor: ["cursor", String],
+  // flex 容器
+  direction: ["flexDirection", (v) => v === "column" ? "column" : "row"],
+  gap: ["gap", px],
+  wrap: ["flexWrap", (v) => v ? "wrap" : "nowrap"],
+  align: ["alignItems", String],
+  justify: ["justifyContent", String],
+  // flex 子项
+  flex: ["flex", String],
+  // 不写时子项会被拉满父级交叉轴，标签这类「按内容宽度」的元素要显式声明
+  alignSelf: ["alignSelf", String],
+  width: ["width", px],
+  height: ["height", px],
+  minWidth: ["minWidth", px],
+  minHeight: ["minHeight", px],
+  maxWidth: ["maxWidth", px],
+  maxHeight: ["maxHeight", px],
+  // 图片
+  objectFit: ["objectFit", String],
+  // 宽度给百分比、高度按比例算。整图 banner 的热区必须靠它才能用百分比定位：
+  // 容器没有真实高度时，子节点的百分比 rect 算出来全是 0。
+  aspectRatio: ["aspectRatio", String]
+};
+var ALLOWED_STYLE_KEYS = Object.keys(STYLE_MAP);
+
+// src/validate.ts
+var DSL_VERSION = 1;
+var NODE_TYPES = [
+  "box",
+  "flex",
+  "repeat",
+  "image",
+  "text",
+  "button",
+  "tabs",
+  "countdown"
+];
+var ACTION_TYPES = [
+  "navigate",
+  "close",
+  "closeAll",
+  "open",
+  "setState",
+  "track",
+  "call",
+  "sequence"
+];
+var TRACK_EVENT_PATTERN = /^[a-z][a-z0-9_]{2,63}$/;
+var CLOSE_POSITIONS = [
+  "top-right",
+  "top-left",
+  "top-center",
+  "bottom-right",
+  "bottom-left",
+  "bottom-center"
+];
+
+// src/docs/reconcile.ts
+function pickTokens(rows, columnIndex) {
+  const found = [];
+  rows.forEach((row) => {
+    const cell2 = row[columnIndex];
+    if (typeof cell2 !== "string") return;
+    const matched = cell2.match(/`([A-Za-z][A-Za-z0-9]*)`/g) || [];
+    matched.forEach((item) => found.push(item.slice(1, -1)));
+  });
+  return found;
+}
+function reconcileRows(options) {
+  const { rows, actual, column = 0, inline = false, label = "\u65B0\u589E" } = options;
+  const documented = inline ? pickTokens(rows, column) : rows.map((row) => String(row[column]));
+  const missing = actual.filter((item) => documented.indexOf(item) === -1);
+  const stale = documented.filter((item) => actual.indexOf(item) === -1);
+  const width = rows[0] ? rows[0].length : 3;
+  const extra = [];
+  if (missing.length) {
+    extra.push(
+      [
+        `\u26A0\uFE0F ${label}\uFF08\u6587\u6863\u672A\u8986\u76D6\uFF09`,
+        missing.map((item) => `\`${item}\``).join(" "),
+        "\u89E3\u91CA\u5668\u91CC\u5DF2\u7ECF\u652F\u6301\uFF0C\u4F46\u8FD9\u4EFD\u6587\u6863\u8FD8\u6CA1\u5199\u8BF4\u660E\uFF0C\u8BF7\u8865\u4E0A"
+      ].slice(0, width)
+    );
+  }
+  if (stale.length) {
+    extra.push(
+      [
+        "\u26A0\uFE0F \u5DF2\u5E9F\u5F03",
+        stale.map((item) => `\`${item}\``).join(" "),
+        "\u89E3\u91CA\u5668\u91CC\u5DF2\u7ECF\u6CA1\u6709\u4E86\uFF0C\u7167\u7740\u5199\u4F1A\u88AB\u6821\u9A8C\u62E6\u4E0B\uFF0C\u8BF7\u4ECE\u6587\u6863\u5220\u6389"
+      ].slice(0, width)
+    );
+  }
+  return extra;
+}
+
+// src/docs/sections/action.ts
+var actionRows = [
+  ["navigate", "`url`\u3001`target`", "\u8DF3\u8F6C\u3002`target` \u9ED8\u8BA4 `_blank`"],
+  ["open", "`view`\u3001`mode`", "\u6253\u5F00\u53E6\u4E00\u4E2A\u89C6\u56FE\uFF0C\u89C1\u7B2C 12 \u8282"],
+  ["close", "`reason`", "\u5173\u6389\u5F53\u524D\u8FD9\u4E00\u5C42\uFF1B\u53EA\u5269\u4E00\u5C42\u65F6\u5C31\u662F\u6574\u4F53\u5173\u95ED"],
+  ["closeAll", "\u2014", "\u4E0D\u7BA1\u51E0\u5C42\uFF0C\u5168\u90E8\u5173\u6389"],
+  ["setState", "`key`\u3001`value`", "\u6539\u5C40\u90E8\u72B6\u6001\uFF0C\u7528\u6765\u505A\u9009\u4E2D\u5207\u6362"],
+  ["track", "`event`\u3001`params`", "\u57CB\u70B9\u4E0A\u62A5\u3002`event` \u6709\u547D\u540D\u89C4\u8303\uFF0C\u89C1\u4E0B"],
+  ["call", "`name`\u3001`params`", "\u8C03\u7528\u5BBF\u4E3B\u6CE8\u518C\u7684\u65B9\u6CD5\uFF08\u5982\u9886\u5238\uFF09\uFF0C`name` \u662F\u767D\u540D\u5355"],
+  ["sequence", "`actions`", "\u4F9D\u6B21\u6267\u884C\u591A\u4E2A\u52A8\u4F5C"]
+];
+var sections = [
+  {
+    id: "action",
+    title: "11. \u52A8\u4F5C",
+    blocks: [
+      {
+        t: "p",
+        text: "\u4EFB\u4F55\u8282\u70B9\u52A0\u4E0A `action` \u5C31\u53EF\u4EE5\u70B9\u51FB\u3002\u6240\u6709\u52A8\u4F5C\u7531\u6E32\u67D3\u5668\u7EDF\u4E00\u6267\u884C\uFF0C\u57CB\u70B9\u53E3\u5F84\u5168\u5C40\u4E00\u81F4\u3002"
+      },
+      {
+        t: "table",
+        head: ["type", "\u5B57\u6BB5", "\u8BF4\u660E"],
+        rows: actionRows.concat(
+          reconcileRows({ rows: actionRows, actual: ACTION_TYPES, label: "\u65B0\u589E\u52A8\u4F5C" })
+        )
+      },
+      {
+        t: "code",
+        code: `// \u5178\u578B\uFF1A\u5148\u57CB\u70B9\u518D\u8DF3\u8F6C\uFF0C\u94FE\u63A5\u8DDF\u7740\u5F53\u524D\u9009\u4E2D\u9879\u8D70
+"action": {
+  "type": "sequence",
+  "actions": [
+    { "type": "track", "event": "popup_order_click",
+      "params": { "plan": "{{ current.key }}" } },
+    { "type": "navigate", "url": "{{ current.url }}" }
+  ]
+}
+
+// \u9009\u4E2D\u5207\u6362
+"action": { "type": "setState", "key": "period", "value": "{{ index }}" }`
+      },
+      {
+        t: "note",
+        tone: "danger",
+        text: "\u94FE\u63A5\u53EA\u5141\u8BB8 `http` / `https` / `mailto` / `tel` \u548C\u76F8\u5BF9\u8DEF\u5F84\u3002`javascript:` \u4F1A\u88AB\u62E6\u4E0B\u5E76\u4E0A\u62A5\u9519\u8BEF\u2014\u2014\u4E00\u4E2A\u300C\u8DF3\u8F6C\u94FE\u63A5\u300D\u5B57\u6BB5\u5982\u679C\u80FD\u5199 `javascript:`\uFF0C\u5C31\u7B49\u4E8E\u5F00\u4E86 JS \u6267\u884C\u6743\u9650\u3002"
+      },
+      { t: "h3", text: "track \u7684\u4E8B\u4EF6\u540D\u6709\u683C\u5F0F\u8981\u6C42\uFF08\u4E0D\u5408\u89C4\u76F4\u63A5\u5B58\u4E0D\u4E0A\uFF09" },
+      {
+        t: "p",
+        text: `\`track\` \u52A8\u4F5C\u7684 \`event\` \u5FC5\u987B\u5339\u914D \`${String(TRACK_EVENT_PATTERN.source)}\`\uFF1A**\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934**\uFF0C\u4E4B\u540E\u53EA\u80FD\u662F\u5C0F\u5199\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u4E0B\u5212\u7EBF\uFF0C\u603B\u957F **3~64** \u4E2A\u5B57\u7B26\u3002`
+      },
+      {
+        t: "note",
+        tone: "danger",
+        text: "\u8FD9\u662F **error \u7EA7\u6821\u9A8C\uFF0C\u76F4\u63A5\u963B\u65AD\u4FDD\u5B58**\uFF0C\u4E0D\u662F\u8B66\u544A\u3002\u5199\u6210\u4E2D\u6587\u3001\u9A7C\u5CF0\u3001\u5E26\u4E2D\u5212\u7EBF\u7684\u4E8B\u4EF6\u540D\uFF0C\u5728\u7F16\u8F91\u5668\u91CC\u70B9\u4FDD\u5B58\u90A3\u4E00\u523B\u5C31\u4F1A\u88AB\u62E6\u4E0B\u2014\u2014\u4E0D\u662F\u7B49\u4E0A\u7EBF\u540E\u624D\u53D1\u73B0\u6CA1\u6709\u6570\u636E\u3002AI \u751F\u6210\u7684\u914D\u7F6E\u5C24\u5176\u5BB9\u6613\u8E29\u8FD9\u6761\uFF0C\u62FF\u5230 AI \u7684\u8F93\u51FA\u5148\u5728\u8C03\u8BD5\u53F0\u6821\u9A8C\u4E00\u904D\u3002"
+      },
+      {
+        t: "table",
+        head: ["\u2705 \u6B63\u786E", "\u274C \u9519\u8BEF", "\u4E3A\u4EC0\u4E48"],
+        rows: [
+          ["`banner_renew_click`", "`\u7EED\u8D39\u70B9\u51FB`", "\u4E0D\u80FD\u7528\u4E2D\u6587"],
+          ["`popup_show`", "`bannerRenewClick`", "\u4E0D\u80FD\u7528\u9A7C\u5CF0 / \u5927\u5199\u5B57\u6BCD"],
+          ["`countdown_end`", "`banner-renew-click`", "\u4E0D\u80FD\u7528\u4E2D\u5212\u7EBF\uFF0C\u5206\u8BCD\u4E00\u5F8B\u7528\u4E0B\u5212\u7EBF"],
+          ["`cta_click_v2`", "`cta`", "\u4E0D\u8DB3 3 \u4E2A\u5B57\u7B26\uFF0C\u805A\u5408\u7684\u65F6\u5019\u770B\u4E0D\u51FA\u662F\u4EC0\u4E48"],
+          ["`notice_close`", "`1_click`", "\u5FC5\u987B\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934\uFF0C\u4E0D\u80FD\u662F\u6570\u5B57\u6216\u4E0B\u5212\u7EBF"],
+          ["`vip_renew_click`", "`vip renew click`", "\u4E0D\u80FD\u6709\u7A7A\u683C"]
+        ]
+      },
+      { t: "h3", text: "\u5EFA\u8BAE\u7684\u547D\u540D\u6A21\u5F0F\uFF1A`\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C`" },
+      {
+        t: "table",
+        head: ["\u6BB5", "\u5199\u4EC0\u4E48", "\u4F8B\u5B50"],
+        rows: [
+          ["\u5751\u4F4D", "\u8FD9\u4E2A\u4E1C\u897F\u662F\u4EC0\u4E48\u5F62\u6001\u3001\u51FA\u73B0\u5728\u54EA", "`popup` `banner` `notice`"],
+          ["\u4E1A\u52A1", "\u8FD9\u6B21\u6D3B\u52A8 / \u8FD9\u4E2A\u573A\u666F", "`renew` `vip` `autumn`"],
+          ["\u52A8\u4F5C", "\u7528\u6237\u505A\u4E86\u4EC0\u4E48", "`show` `click` `close` `end`"]
+        ]
+      },
+      {
+        t: "code",
+        code: `banner_renew_click     // \u7EED\u8D39 Banner \u88AB\u70B9\u51FB
+popup_vip_show         // \u4F1A\u5458\u5F39\u7A97\u66DD\u5149
+popup_vip_close        // \u4F1A\u5458\u5F39\u7A97\u5173\u95ED
+notice_autumn_close    // \u79CB\u5B63\u6D3B\u52A8\u516C\u544A\u6761\u88AB\u5173\u6389
+countdown_end          // \u5012\u8BA1\u65F6\u5F52\u96F6`
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "**\u4E8B\u4EF6\u540D\u4E0D\u505A\u767D\u540D\u5355**\uFF0C\u8FD0\u8425\u53EF\u4EE5\u81EA\u7531\u5B9A\u4E49\uFF0C\u53EA\u7EDF\u4E00\u683C\u5F0F\u2014\u2014\u56E0\u4E3A\u540E\u7AEF\u662F\u6309\u524D\u7F00\u805A\u5408\u7684\uFF0C\u683C\u5F0F\u4E00\u4E71\u5C31\u6CA1\u6CD5\u5206\u7EC4\u7EDF\u8BA1\u3002\u540C\u4E00\u573A\u6D3B\u52A8\u7684\u6240\u6709\u4E8B\u4EF6\u7528\u540C\u4E00\u4E2A\u524D\u7F00\uFF0C\u770B\u677F\u4E0A\u5C31\u80FD\u4E00\u773C\u6536\u62E2\u3002\u8981\u533A\u5206\u5177\u4F53\u6863\u4F4D\u3001\u5177\u4F53\u6309\u94AE\uFF0C\u653E `params` \u91CC\uFF0C\u4E0D\u8981\u5F80\u4E8B\u4EF6\u540D\u4E0A\u5806\u3002"
+      },
+      {
+        t: "code",
+        code: `// \u2705 \u4E8B\u4EF6\u540D\u5199\u6B7B\uFF0C\u53D8\u91CF\u653E params
+{ "type": "track", "event": "popup_renew_click",
+  "params": { "plan": "{{ current.key }}", "price": "{{ current.price }}" } }
+
+// \u274C \u522B\u628A\u53D8\u91CF\u62FC\u8FDB\u4E8B\u4EF6\u540D\uFF1A\u62FC\u51FA\u6765\u7684\u503C\u53EF\u80FD\u4E0D\u5408\u683C\u5F0F\uFF0C
+//    \u800C\u4E14\u6BCF\u4E2A\u6863\u4F4D\u4E00\u4E2A\u4E8B\u4EF6\u540D\uFF0C\u540E\u7AEF\u805A\u5408\u65F6\u4F1A\u6563\u6210\u4E00\u5806
+{ "type": "track", "event": "popup_renew_{{ current.key }}" }`
+      },
+      { t: "h3", text: "close \u5230\u5E95\u5173\u6389\u4E86\u4EC0\u4E48" },
+      {
+        t: "p",
+        text: "`close` \u4E0D\u662F\u6E32\u67D3\u5668\u81EA\u5DF1\u628A\u81EA\u5DF1\u85CF\u8D77\u6765\uFF0C\u800C\u662F**\u901A\u77E5\u5BBF\u4E3B\u9875\u9762\u300C\u7528\u6237\u60F3\u5173\u4E86\u300D**\uFF0C\u7531\u5BBF\u4E3B\u51B3\u5B9A\u5173\u4E0D\u5173\u3002\u8FD9\u662F\u523B\u610F\u7684\uFF1A\u4E00\u6BB5\u914D\u7F6E\u4E0D\u8BE5\u6709\u6743\u9650\u76F4\u63A5\u51B3\u5B9A\u5BBF\u4E3B\u9875\u9762\u7684\u663E\u793A\u3002"
+      },
+      {
+        t: "table",
+        head: ["\u573A\u666F", "\u5BBF\u4E3B\u4F1A\u4E0D\u4F1A\u6536\u5230\u901A\u77E5"],
+        rows: [
+          ["\u5355\u4E2A\u5F39\u7A97 / \u516C\u544A\u6761\uFF0C\u70B9 X \u6216\u70B9\u906E\u7F69", "\u4F1A\uFF0C\u5BBF\u4E3B\u5173\u6389\u5B83"],
+          ["\u591A\u89C6\u56FE\u53E0\u4E86\u4E24\u5C42\uFF0C\u5173\u6389\u4E0A\u9762\u90A3\u5C42", "**\u4E0D\u4F1A**\uFF0C\u53EA\u662F\u5185\u90E8\u56DE\u5230\u4E0B\u9762\u90A3\u5C42"],
+          ["\u591A\u89C6\u56FE\uFF0C\u5173\u6389\u6700\u540E\u4E00\u5C42", "\u4F1A"],
+          ["`closeAll`", "\u4F1A\uFF0C\u4E0D\u7BA1\u5F53\u65F6\u51E0\u5C42"],
+          ["\u5012\u8BA1\u65F6 `onEnd` \u914D\u4E86 `close`", "\u4F1A"]
+        ]
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: '`close` \u7684 `reason` \u4F1A\u4E00\u8D77\u4F20\u7ED9\u5BBF\u4E3B\uFF0C\u5BBF\u4E3B\u636E\u6B64\u51B3\u5B9A\u540E\u7EED\u884C\u4E3A\u2014\u2014\u6BD4\u5982 `reason: "user-dismiss"` \u65F6\u8BB0\u4F4F\u300C\u4ECA\u5929\u4E0D\u518D\u663E\u793A\u300D\u3002\u4E0D\u5199 `reason` \u9ED8\u8BA4\u662F `action`\u3002'
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "\u60F3\u8BA9\u5F39\u7A97\u300C\u5173\u4E86\u5C31\u522B\u518D\u51FA\u73B0\u300D\uFF0C\u5149\u9760 `close` \u4E0D\u591F\u2014\u2014\u5B83\u53EA\u7BA1\u8FD9\u4E00\u6B21\u3002\u8981\u914D\u4E00\u6761 `call` \u8BA9\u5BBF\u4E3B\u8BB0\u4E0B\u6765\uFF08\u89C1\u793A\u4F8B \u2461 \u548C \u2464 \u7684\u300C\u4E0D\u518D\u63D0\u9192\u300D\uFF09\u3002"
+      },
+      { t: "h3", text: "\u66DD\u5149\u548C\u5173\u95ED\u4E5F\u8981\u57CB\u70B9\uFF1Astage.onShow / stage.onClose" },
+      {
+        t: "p",
+        text: "\u53EA\u7ED9\u6309\u94AE\u57CB\u70B9\u4F1A\u6F0F\u6389\u6700\u57FA\u672C\u7684\u8F6C\u5316\u6570\u636E\u2014\u2014\u5F39\u4E86\u591A\u5C11\u6B21\u3001\u591A\u5C11\u4EBA\u76F4\u63A5\u5173\u6389\u3001\u662F\u70B9 X \u8D70\u7684\u8FD8\u662F\u70B9\u906E\u7F69\u8D70\u7684\u3002\u8FD9\u4E24\u4E2A\u94A9\u5B50\u5199\u5728 `stage` \u4E0A\uFF0C\u6BCF\u4E2A\u89C6\u56FE\u5404\u81EA\u4E00\u5957\u3002"
+      },
+      {
+        t: "code",
+        code: `"stage": {
+  "width": 420, "height": "auto", "layout": "flow",
+
+  // \u66DD\u5149\uFF1A\u6570\u636E\u5C31\u7EEA\u3001\u5F39\u7A97\u771F\u6B63\u6E32\u67D3\u51FA\u6765\u65F6\u89E6\u53D1\u4E00\u6B21
+  "onShow": { "type": "track", "event": "popup_show", "params": { "popup": "renew" } },
+
+  // \u5173\u95ED\uFF1A\u70B9 X\u3001\u70B9\u906E\u7F69\u3001\u8D70 close \u52A8\u4F5C\u3001\u88AB replace \u9876\u6389\uFF0C\u90FD\u4F1A\u89E6\u53D1
+  "onClose": { "type": "track", "event": "popup_close",
+               "params": { "popup": "renew", "reason": "{{ closeReason }}" } }
+}`
+      },
+      {
+        t: "table",
+        head: ["closeReason", "\u4EC0\u4E48\u65F6\u5019"],
+        rows: [
+          ["`close-button`", "\u70B9\u4E86\u5173\u95ED\u6309\u94AE"],
+          ["`mask`", "\u70B9\u4E86\u906E\u7F69\uFF08\u9700\u8981 `maskClosable: true`\uFF09"],
+          ["`replace`", "\u88AB `open` \u7684 `replace` \u6A21\u5F0F\u9876\u6389"],
+          ["\u81EA\u5B9A\u4E49\u503C", '`close` \u52A8\u4F5C\u91CC\u81EA\u5DF1\u5199\u7684 `reason`\uFF0C\u5982 `"never-remind"`'],
+          ["`action`", "`close` \u52A8\u4F5C\u6CA1\u5199 `reason` \u65F6\u7684\u9ED8\u8BA4\u503C"]
+        ]
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u66DD\u5149\u57CB\u70B9\u7B49\u6570\u636E\u6E90\u8FD4\u56DE\u540E\u624D\u89E6\u53D1\u2014\u2014\u6570\u636E\u6CA1\u56DE\u6765\u65F6\u5F39\u7A97\u6839\u672C\u6CA1\u6E32\u67D3\uFF0C\u8FD9\u65F6\u5019\u4E0A\u62A5\u66DD\u5149\u4F1A\u628A\u8F6C\u5316\u7387\u7B97\u4F4E\u3002\u591A\u89C6\u56FE\u4E0B\u6BCF\u5C42\u5404\u57CB\u5404\u7684\uFF0C\u53EF\u4EE5\u5206\u522B\u7EDF\u8BA1\u300C\u516C\u544A\u6761\u66DD\u5149\u300D\u548C\u300C\u70B9\u5F00\u540E\u7684\u5F39\u7A97\u66DD\u5149\u300D\u3002"
+      },
+      { t: "h3", text: "\u516C\u544A\u6761 / Banner \u600E\u4E48\u5173" },
+      {
+        t: "p",
+        text: "\u516C\u544A\u6761\u4E0D\u9002\u5408\u7528 `stage.closeButton`\uFF08\u90A3\u662F\u538B\u5728\u89D2\u4E0A\u7684\u5706\u5F62\u6309\u94AE\uFF0C\u4E3A\u6574\u56FE\u5F39\u7A97\u8BBE\u8BA1\u7684\uFF09\u3002\u76F4\u63A5\u5728\u884C\u672B\u653E\u4E00\u4E2A\u5E26 `close` \u52A8\u4F5C\u7684 `text` \u8282\u70B9\u66F4\u81EA\u7136\uFF0C\u8DDF\u5176\u4ED6\u5185\u5BB9\u4E00\u8D77\u6392\u7248\u3002"
+      },
+      {
+        t: "code",
+        code: `{ "type": "text", "content": "\u2715",
+  "style": { "alignSelf": "center", "width": 22, "height": 22,
+             "textAlign": "center", "lineHeight": 22, "cursor": "pointer" },
+  "action": { "type": "sequence", "actions": [
+    { "type": "track", "event": "notice_close" },
+    { "type": "call",  "name": "setNeverRemind" },   // \u8BB0\u4F4F\u522B\u518D\u51FA
+    { "type": "close", "reason": "user-dismiss" }
+  ] } }`
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "`close` \u53EA\u662F\u901A\u77E5\u5BBF\u4E3B\u300C\u7528\u6237\u5173\u6389\u4E86\u300D\uFF0C**\u5173\u6389\u4E4B\u540E\u8981\u4E0D\u8981\u518D\u51FA\u3001\u9694\u591A\u4E45\u518D\u51FA\u7531\u5BBF\u4E3B\u51B3\u5B9A**\u3002\u60F3\u8BA9\u5B83\u522B\u518D\u51FA\u73B0\uFF0C\u914D\u4E00\u6761 `call` \u8BA9\u5BBF\u4E3B\u8BB0\u4E0B\u6765\u3002"
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u6574\u6761\u516C\u544A\u6761\u53EF\u70B9\u3001\u884C\u672B\u53C8\u6709 \xD7 \u65F6\u4E0D\u7528\u62C5\u5FC3\u51B2\u7A81\uFF1A\u5185\u5C42\u8282\u70B9\u6709\u81EA\u5DF1\u7684 `action` \u5C31\u4E0D\u4F1A\u518D\u5192\u6CE1\u7ED9\u5916\u5C42\uFF0C\u70B9 \xD7 \u53EA\u4F1A\u5173\u95ED\uFF0C\u4E0D\u4F1A\u540C\u65F6\u89E6\u53D1\u5916\u5C42\u7684\u8DF3\u8F6C\u6216\u5F39\u7A97\u3002"
+      }
+    ]
+  }
+];
+var action_default = sections;
+
+// src/docs/sections/countdown.ts
+var sections2 = [
+  {
+    id: "countdown",
+    title: "10. \u5012\u8BA1\u65F6",
+    blocks: [
+      {
+        t: "p",
+        text: "\u5012\u8BA1\u65F6\u8282\u70B9\u53EA\u8D1F\u8D23\u7B97\u65F6\u95F4\uFF0C\u4E0D\u8D1F\u8D23\u957F\u4EC0\u4E48\u6837\u3002\u5B83\u628A\u65F6\u95F4\u7247\u6BB5\u6CE8\u5165 `children` \u7684\u4E0A\u4E0B\u6587\uFF0C\u6392\u7248\u4F60\u81EA\u5DF1\u5199\u3002"
+      },
+      {
+        t: "code",
+        code: `{
+  "type": "countdown",
+  "to": "{{ user.trialEndAt }}",
+  "precision": "cs",          // "s" \u6BCF\u79D2\uFF08\u9ED8\u8BA4\uFF09| "cs" \u5398\u79D2\uFF0C\u9010\u5E27\u5237\u65B0
+  "as": "cd",                 // \u6CE8\u5165\u7684\u53D8\u91CF\u540D\uFF0C\u9ED8\u8BA4 cd
+  "style": { "align": "center", "gap": 6 },
+  "onEnd": { "type": "track", "event": "countdown_end" },
+  "children": [
+    { "type": "text", "content": "{{ cd.h }}", "style": { "width": 42, "fontVariantNumeric": "tabular-nums" } },
+    { "type": "text", "content": ":" },
+    { "type": "text", "content": "{{ cd.m }}", "style": { "width": 42, "fontVariantNumeric": "tabular-nums" } },
+    { "type": "text", "content": ":" },
+    { "type": "text", "content": "{{ cd.s }}", "style": { "width": 42, "fontVariantNumeric": "tabular-nums" } }
+  ]
+}`
+      },
+      {
+        t: "table",
+        head: ["\u7247\u6BB5", "\u542B\u4E49"],
+        rows: [
+          ["`cd.d`", "\u5929\u6570"],
+          ["`cd.h`", "\u5C0F\u65F6 0~23\uFF0C\u5DF2\u8865\u96F6"],
+          ["`cd.hAll`", "\u603B\u5C0F\u65F6\u6570\uFF0C\u7528\u4E8E `143:58:07` \u8FD9\u79CD\u4E0D\u6309\u5929\u6298\u7B97\u7684\u5199\u6CD5"],
+          ["`cd.m`", "\u5206\uFF0C\u5DF2\u8865\u96F6"],
+          ["`cd.s`", "\u79D2\uFF0C\u5DF2\u8865\u96F6"],
+          ["`cd.cs`", '\u5398\u79D2\uFF0C\u5DF2\u8865\u96F6\u3002\u53EA\u5728 `precision: "cs"` \u4E0B\u6709\u610F\u4E49'],
+          ["`cd.ended`", "\u662F\u5426\u5DF2\u7ED3\u675F"]
+        ]
+      },
+      { t: "h3", text: "onEnd\uFF1A\u5012\u8BA1\u65F6\u5F52\u96F6\u65F6\u505A\u70B9\u4EC0\u4E48" },
+      {
+        t: "p",
+        text: "\u5012\u8BA1\u65F6\u8D70\u5230 0 \u4F1A\u89E6\u53D1\u4E00\u6B21 `onEnd`\uFF0C\u53EF\u4EE5\u662F\u4EFB\u610F\u52A8\u4F5C\u2014\u2014\u4E0A\u62A5\u57CB\u70B9\u3001\u81EA\u52A8\u5173\u6389\u5F39\u7A97\u3001\u6216\u8005\u6362\u5230\u300C\u6D3B\u52A8\u5DF2\u7ED3\u675F\u300D\u90A3\u4E00\u5C4F\u3002"
+      },
+      {
+        t: "code",
+        code: `// \u4E0A\u62A5\u57CB\u70B9
+"onEnd": { "type": "track", "event": "countdown_end" }
+
+// \u5230\u70B9\u81EA\u52A8\u5173\u5F39\u7A97
+"onEnd": { "type": "close", "reason": "countdown-end" }
+
+// \u5230\u70B9\u6362\u4E00\u5C4F\uFF08\u591A\u89C6\u56FE\uFF09
+"onEnd": { "type": "open", "view": "expired", "mode": "replace" }`
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "**\u53EA\u5728\u300C\u7528\u6237\u773C\u770B\u7740\u5B83\u5F52\u96F6\u300D\u65F6\u89E6\u53D1**\u3002\u6253\u5F00\u5F39\u7A97\u65F6\u6D3B\u52A8\u5C31\u5DF2\u7ECF\u8FC7\u671F\u7684\uFF0C\u4E0D\u4F1A\u89E6\u53D1 `onEnd`\u2014\u2014\u5426\u5219\u6BCF\u6B21\u6709\u4EBA\u6253\u5F00\u4E00\u4E2A\u8FC7\u671F\u5F39\u7A97\u90FD\u4E0A\u62A5\u4E00\u6B21\uFF0C\u8FD9\u4E2A\u57CB\u70B9\u5C31\u6CA1\u6CD5\u7528\u4E86\u3002\u8FD9\u79CD\u60C5\u51B5\u663E\u793A\u4E0A\u4ECD\u7136\u8D70 `endText`\u3002"
+      },
+      {
+        t: "p",
+        text: "\u60F3\u8BA9\u300C\u5DF2\u7ED3\u675F\u300D\u548C\u300C\u8FDB\u884C\u4E2D\u300D\u663E\u793A\u6210\u5B8C\u5168\u4E0D\u540C\u7684\u6392\u7248\uFF0C\u7528 `cd.ended` \u914D `visibleWhen`\uFF0C\u4E0D\u9700\u8981\u9760 `onEnd`\u3002"
+      },
+      {
+        t: "code",
+        code: `"children": [
+  { "type": "text", "content": "\u8FD8\u5269 {{ cd.h }}:{{ cd.m }}:{{ cd.s }}",
+    "visibleWhen": "!cd.ended" },
+  { "type": "text", "content": "\u6D3B\u52A8\u5DF2\u7ED3\u675F", "visibleWhen": "cd.ended",
+    "style": { "color": "#999" } }
+]`
+      },
+      { 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" },
+      {
+        t: "table",
+        head: ["\u5199\u6CD5", "\u4F8B\u5B50"],
+        rows: [
+          ["\u65E5\u671F + \u65F6\u95F4", '`"2026-09-01 18:00:00"` `"2026-09-01 18:00"`'],
+          ["\u53EA\u5199\u65E5\u671F\uFF08\u5F53\u5929\u96F6\u70B9\uFF09", '`"2026-09-01"` `"2026/09/01"` `"2026.09.01"`'],
+          ["\u4E2D\u6587", '`"2026\u5E749\u67081\u65E5"` `"2026\u5E749\u67081\u65E5 18\u70B9"` `"2026\u5E749\u67081\u65E5 18\u70B930\u5206"`'],
+          ["\u63A5\u53E3\u8FD4\u56DE\u7684\u683C\u5F0F", '`"2026-09-01T18:00:00Z"` `"2026-09-01T18:00:00+08:00"`'],
+          ["\u65F6\u95F4\u6233\uFF08\u6BEB\u79D2\uFF09", "`1786949074954`"],
+          ["\u4ECE\u6570\u636E\u91CC\u53D6", '`"{{ user.trialEndAt }}"`']
+        ]
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: '\u5199\u6210 `"\u4E0B\u5468\u4E09"`\u300C\u6D3B\u52A8\u7ED3\u675F\u65F6\u300D\u8FD9\u7C7B\u8BC6\u522B\u4E0D\u4E86\u7684\u5185\u5BB9\uFF0C**\u4FDD\u5B58\u524D\u5C31\u4F1A\u62A5\u9519**\u3002\u8FD9\u662F\u523B\u610F\u7684\uFF1A\u8BC6\u522B\u4E0D\u4E86\u4F1A\u88AB\u5F53\u6210\u300C\u5DF2\u7ECF\u7ED3\u675F\u300D\uFF0C\u9875\u9762\u4E0A\u53EA\u6709\u4E00\u884C\u300C\u5DF2\u7ED3\u675F\u300D\uFF0C\u4E0D\u5F53\u573A\u62E6\u4E0B\u7684\u8BDD\u4F60\u6839\u672C\u770B\u4E0D\u51FA\u662F\u65F6\u95F4\u5199\u9519\u4E86\u3002'
+      },
+      {
+        t: "p",
+        text: "\u4E0D\u5199 `children` \u65F6\u9000\u5316\u6210\u4E00\u884C\u6587\u672C\uFF0C\u7528 `format` \u63A7\u5236\uFF0C\u5360\u4F4D\u7B26\u662F `{d}` `{h}` `{hAll}` `{m}` `{s}` `{cs}`\uFF0C\u7ED3\u675F\u540E\u663E\u793A `endText`\u3002"
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u5269\u4F59\u65F6\u95F4\u6309\u300C\u7ED3\u675F\u65F6\u95F4 \u2212 \u5F53\u524D\u65F6\u95F4\u300D\u5B9E\u65F6\u7B97\uFF0C\u4E0D\u662F\u9010\u5E27\u9012\u51CF\u3002\u6240\u4EE5\u6D4F\u89C8\u5668\u628A\u540E\u53F0\u6807\u7B7E\u9875\u6682\u505C\u540E\u518D\u5207\u56DE\u6765\uFF0C\u663E\u793A\u4F1A\u81EA\u52A8\u6821\u51C6\uFF0C\u4E0D\u4F1A\u8D70\u6162\u3002"
+      }
+    ]
+  }
+];
+var countdown_default = sections2;
+
+// src/docs/sections/data-state.ts
+var sections3 = [
+  {
+    id: "data",
+    title: "8. \u6570\u636E\u4E0E\u72B6\u6001",
+    blocks: [
+      { t: "h3", text: "data\uFF1A\u5199\u6B7B\u7684\u6570\u636E" },
+      {
+        t: "code",
+        code: `"data": {
+  "plans": [
+    { "key": "basic", "name": "\u57FA\u7840\u7248", "price": "\xA5299", "url": "https://..." },
+    { "key": "pro",   "name": "\u4E13\u4E1A\u7248", "price": "\xA5899", "url": "https://..." }
+  ]
+}`
+      },
+      { t: "h3", text: "data\uFF1A\u4ECE\u540E\u7AEF\u53D6" },
+      {
+        t: "code",
+        code: `"data": {
+  "plans": { "$source": "listPlans", "params": { "scene": "renew" } }
+}`
+      },
+      {
+        t: "note",
+        tone: "danger",
+        text: "`$source` \u53EA\u80FD\u586B\u540E\u7AEF\u6CE8\u518C\u8FC7\u7684\u6570\u636E\u6E90\u540D\u79F0\uFF0C\u5728\u7F16\u8F91\u5668\u91CC\u4ECE\u4E0B\u62C9\u6846\u9009\u3002\u8FD9\u91CC**\u4E0D\u63A5\u53D7\u63A5\u53E3\u5730\u5740**\u2014\u2014\u80FD\u586B\u4EFB\u610F URL \u5C31\u7B49\u4E8E\u5F00\u4E86\u8D8A\u6743\u62C9\u6570\u548C SSRF \u7684\u53E3\u5B50\u3002\u9700\u8981\u65B0\u6570\u636E\u6E90\u627E\u540E\u7AEF\u767B\u8BB0\uFF0C\u4E0D\u8981\u60F3\u529E\u6CD5\u7ED5\u3002"
+      },
+      {
+        t: "p",
+        text: "\u6570\u636E\u6CA1\u56DE\u6765\u3001\u6216\u8005\u62C9\u5931\u8D25\uFF0C\u5F39\u7A97\u90FD**\u4E0D\u4F1A\u6E32\u67D3**\uFF08\u4E0D\u5F39\u7A7A\u58F3\uFF09\u3002\u6240\u4EE5\u4E0D\u7528\u5728 DSL \u91CC\u5904\u7406\u52A0\u8F7D\u6001\u3002"
+      },
+      { t: "h3", text: "state\uFF1A\u5C40\u90E8\u72B6\u6001" },
+      {
+        t: "p",
+        text: "\u7528\u6765\u8BB0\u300C\u5F53\u524D\u9009\u4E2D\u7B2C\u51E0\u4E2A\u300D\u8FD9\u7C7B\u4FE1\u606F\u3002\u521D\u59CB\u503C\u5199\u5728 `state` \u91CC\uFF0C\u7528\u6237\u4EA4\u4E92\u65F6\u7531 `setState` \u52A8\u4F5C\u6539\u3002"
+      },
+      { t: "code", code: `"state": { "period": 1 }` },
+      { t: "h3", text: "derived\uFF1A\u63A8\u5BFC\u522B\u540D" },
+      {
+        t: "p",
+        text: "\u628A\u300C\u5F53\u524D\u9009\u4E2D\u7684\u90A3\u4E00\u6761\u300D\u8D77\u4E2A\u540D\u5B57\uFF0C\u5176\u4ED6\u8282\u70B9\u76F4\u63A5\u8BFB\u5B83\u3002\u6709\u4E86\u5B83\uFF0C\u5207\u6362\u65F6\u4EF7\u683C\u3001\u56FE\u7247\u3001\u8DF3\u8F6C\u94FE\u63A5\u3001\u57CB\u70B9\u53C2\u6570\u5168\u90E8\u81EA\u52A8\u8054\u52A8\uFF0C\u7248\u5F0F\u53EA\u6392\u4E00\u904D\u3002"
+      },
+      {
+        t: "code",
+        code: `"data":    { "plans": [ ... ] },
+"state":   { "period": 1 },
+"derived": { "current": { "list": "plans", "indexBy": "period" } }
+
+// \u4E4B\u540E\u4EFB\u610F\u8282\u70B9\u91CC\u90FD\u80FD\u7528\uFF1A
+// {{ current.name }}  {{ current.price }}  {{ current.url }}`
+      },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
+        rows: [
+          ["list", "`data` \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D"],
+          ["indexBy", "`state` \u91CC\u7684\u4E0B\u6807\u5B57\u6BB5\u540D"]
+        ]
+      }
+    ]
+  },
+  {
+    id: "expression",
+    title: "9. \u8868\u8FBE\u5F0F\u4E0E\u63D2\u503C",
+    blocks: [
+      { t: "h3", text: "\u80FD\u8BFB\u5230\u4EC0\u4E48" },
+      {
+        t: "table",
+        head: ["\u53D8\u91CF", "\u6765\u6E90"],
+        rows: [
+          ["`plans` \u7B49", "`data` \u7684\u5B57\u6BB5\u76F4\u63A5\u63D0\u5230\u9876\u5C42"],
+          ["`state.xxx`", "\u5F53\u524D\u5C40\u90E8\u72B6\u6001"],
+          ["`user.xxx`", "\u5BBF\u4E3B\u9875\u9762\u6CE8\u5165\u7684\u7528\u6237\u4FE1\u606F\uFF08\u7248\u672C\u3001\u5230\u671F\u5929\u6570\u3001\u5E97\u94FA\u540D\u2026\uFF09\uFF0C\u4E0D\u7528\u53D1\u8BF7\u6C42"],
+          ["`current` \u7B49", "`derived` \u63A8\u5BFC\u51FA\u6765\u7684\u522B\u540D"],
+          ["`item` / `index`", "\u4EC5\u5728 `repeat` \u7684 `template` \u5185\u53EF\u7528"],
+          ["`cd.xxx`", "\u4EC5\u5728 `countdown` \u7684 `children` \u5185\u53EF\u7528"]
+        ]
+      },
+      { t: "h3", text: "\u5728\u54EA\u4E9B\u5730\u65B9\u80FD\u5199 {{ }}" },
+      {
+        t: "p",
+        text: "`content`\u3001`src`\u3001`text`\u3001`to`\u3001**`style` \u7684\u6BCF\u4E2A\u503C**\uFF0C\u4EE5\u53CA\u52A8\u4F5C\u7684 `url` / `event` / `params`\u3002\u6574\u4E32\u6B63\u597D\u662F\u4E00\u4E2A `{{ }}` \u65F6\u8FD4\u56DE\u539F\u59CB\u7C7B\u578B\uFF08\u6570\u5B57\u4ECD\u662F\u6570\u5B57\uFF09\uFF0C\u5426\u5219\u6309\u5B57\u7B26\u4E32\u62FC\u63A5\u3002"
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "`track` \u52A8\u4F5C\u7684 `event` \u867D\u7136\u652F\u6301\u63D2\u503C\uFF0C\u4F46**\u7B97\u51FA\u6765\u7684\u7ED3\u679C\u4ECD\u8981\u7B26\u5408\u4E8B\u4EF6\u540D\u683C\u5F0F**\uFF08\u5C0F\u5199\u5B57\u6BCD / \u6570\u5B57 / \u4E0B\u5212\u7EBF\uFF0C\u89C1\u7B2C 11 \u8282\uFF09\u3002\u7528 `{{ }}` \u62FC\u4E8B\u4EF6\u540D\u65F6\uFF0C\u63D2\u8FDB\u53BB\u7684\u503C\u4E0D\u80FD\u662F\u4E2D\u6587\u6216\u5927\u5199\u2014\u2014\u90A3\u79CD\u683C\u5F0F\u9519\u8BEF\u8981\u5230\u8FD0\u884C\u65F6\u624D\u66B4\u9732\uFF0C\u4FDD\u5B58\u65F6\u6821\u9A8C\u4E0D\u5230\u3002**\u63A8\u8350\u505A\u6CD5\u662F\u4E8B\u4EF6\u540D\u5199\u6B7B\uFF0C\u628A\u53D8\u91CF\u653E\u8FDB `params`**\uFF0C\u8FD9\u6837\u540E\u7AEF\u4E5F\u597D\u805A\u5408\u3002"
+      },
+      { t: "h3", text: "\u652F\u6301\u7684\u8FD0\u7B97" },
+      {
+        t: "list",
+        items: [
+          "\u53D6\u503C\uFF1A`a.b.c`\u3001`a[0]`",
+          "\u5B57\u9762\u91CF\uFF1A\u6570\u5B57\u3001\u5B57\u7B26\u4E32\u3001`true` / `false` / `null`",
+          "\u4E00\u5143\uFF1A`!` `-`",
+          "\u7B97\u672F\uFF1A`+` `-` `*` `/` `%`",
+          "\u6BD4\u8F83\uFF1A`==` `!=` `===` `!==` `<` `>` `<=` `>=`",
+          "\u903B\u8F91\uFF1A`&&` `||`",
+          "\u4E09\u5143\uFF1A`a ? b : c`"
+        ]
+      },
+      {
+        t: "note",
+        tone: "danger",
+        text: "**\u4E0D\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u8D4B\u503C**\uFF0C`constructor` / `__proto__` / `prototype` \u4E5F\u8BFB\u4E0D\u5230\u3002\u8FD9\u662F\u5B89\u5168\u8FB9\u754C\uFF0C\u4E0D\u4F1A\u56E0\u4E3A\u300C\u5C31\u5DEE\u4E00\u70B9\u70B9\u300D\u800C\u653E\u5F00\u3002\u8868\u8FBE\u5F0F\u5199\u9519\u4E0D\u4F1A\u8BA9\u5F39\u7A97\u5D29\u6E83\uFF0C\u53EA\u4F1A\u6C42\u503C\u4E3A\u7A7A\u3002"
+      },
+      { t: "h3", text: "visibleWhen\uFF1A\u6309\u6761\u4EF6\u663E\u793A" },
+      {
+        t: "code",
+        code: `// \u53EA\u6709\u8C6A\u534E\u7248\u624D\u663E\u793A\u8D60\u54C1\u884C
+{ "type": "text", "content": "\u{1F381} {{ current.gift }}",
+  "visibleWhen": "current.gift != ''" }
+
+// \u53EA\u5BF9\u65B0\u7528\u6237\u663E\u793A
+{ "type": "text", "content": "\u65B0\u4EBA\u4E13\u4EAB", "visibleWhen": "user.isNew" }`
+      },
+      { t: "h3", text: "\u5207 tab \u65F6\u6574\u4F53\u6362\u80A4 / \u6362\u5E03\u5C40" },
+      {
+        t: "p",
+        text: "`style` \u91CC\u7684\u6BCF\u4E2A\u503C\u3001\u4EE5\u53CA `stage` \u7684 `width` / `height` / `style`\uFF0C\u90FD\u80FD\u5199 `{{ }}`\u3002\u628A\u914D\u8272\u3001\u80CC\u666F\u653E\u8FDB data \u7684\u6BCF\u4E00\u9879\u91CC\uFF0C\u5207 tab \u65F6\u6574\u4E2A\u5F39\u7A97\u7684\u80CC\u666F\u3001\u6309\u94AE\u8272\u4F1A\u4E00\u8D77\u53D8\u3002\u6392\u7248\u7ED3\u6784\u5B8C\u5168\u4E0D\u540C\u65F6\uFF0C\u5199\u4E24\u5957\u8282\u70B9\u5404\u914D\u4E00\u4E2A `visibleWhen`\uFF0C\u540C\u4E00\u65F6\u523B\u53EA\u663E\u793A\u4E00\u5957\u3002"
+      },
+      {
+        t: "code",
+        code: `"data": { "plans": [
+  { "label": "\u5305\u5E74", "theme": "#7B3FF2", "bg": "linear-gradient(160deg,#2b1055,#7597de)", "mode": "grid" },
+  { "label": "\u5305\u6708", "theme": "#FF6B35", "bg": "linear-gradient(160deg,#3a1c0c,#ff9a3c)", "mode": "list" }
+] },
+"state": { "tab": 0 },
+"derived": { "cur": { "list": "plans", "indexBy": "tab" } },
+
+// \u5F39\u7A97\u81EA\u5DF1\u7684\u80CC\u666F\u8DDF\u7740\u5207
+"stage": { "layout": "flow", "style": { "background": "{{ cur.bg }}", "radius": 16 } },
+
+"nodes": [
+  { "type": "tabs", "bind": "plans", "stateKey": "tab" },
+  // \u4E24\u5957\u6392\u7248\uFF0C\u53EA\u663E\u793A\u5176\u4E2D\u4E00\u5957
+  { "type": "flex", "visibleWhen": "cur.mode == 'grid'", "style": { "direction": "row" }, "children": [] },
+  { "type": "flex", "visibleWhen": "cur.mode == 'list'", "style": { "direction": "column" }, "children": [] },
+  { "type": "button", "text": "\u5F00\u901A", "style": { "background": "{{ cur.theme }}" } }
+]`
+      }
+    ]
+  }
+];
+var data_state_default = sections3;
+
+// src/docs/sections/guide-basics.ts
+var sections4 = [
+  {
+    id: "ai",
+    title: "0. \u4E0D\u4F1A\u5199 JSON\uFF1F\u7528 AI \u751F\u6210",
+    blocks: [
+      {
+        t: "p",
+        text: "\u8FD9\u4EFD\u6587\u6863\u662F\u7ED9\u300C\u8981\u7406\u89E3\u89C4\u5219\u7684\u4EBA\u300D\u770B\u7684\u3002\u5982\u679C\u4F60\u53EA\u662F\u60F3\u5FEB\u70B9\u505A\u51FA\u4E00\u4E2A\u5F39\u7A97\uFF0C\u4E0D\u7528\u4ECE\u5934\u8BFB\u2014\u2014\u5DE6\u8FB9\u6709\u300C\u590D\u5236 AI \u63D0\u793A\u8BCD\u300D\u6309\u94AE\uFF0C\u8D70\u4E0B\u9762\u56DB\u6B65\u5C31\u884C\u3002"
+      },
+      {
+        t: "list",
+        items: [
+          "\u70B9\u5DE6\u4FA7 **\u590D\u5236 AI \u63D0\u793A\u8BCD**",
+          "\u6253\u5F00\u4EFB\u610F AI\uFF08\u8C46\u5305 / DeepSeek / \u901A\u4E49 / ChatGPT / Claude \u90FD\u884C\uFF09\uFF0C\u7C98\u8D34\u8FDB\u53BB",
+          "\u5728\u63D0\u793A\u8BCD\u6700\u540E\u7684\u300C\u7528\u6237\u9700\u6C42\u300D\u90A3\u91CC\uFF0C\u7528\u4E2D\u6587\u5199\u6E05\u695A\u4F60\u8981\u4EC0\u4E48",
+          "AI \u4F1A\u56DE\u4E00\u6BB5 JSON\uFF0C\u590D\u5236\u5230\u300C\u8C03\u8BD5\u53F0\u300D\u5DE6\u8FB9\u7684\u7F16\u8F91\u6846\uFF0C\u70B9\u300C\u6E32\u67D3\u300D\u770B\u6548\u679C"
+        ]
+      },
+      { t: "h3", text: "\u9700\u6C42\u600E\u4E48\u63CF\u8FF0" },
+      { t: "p", text: "\u8D8A\u5177\u4F53\u8D8A\u7701\u4E8B\u3002\u5EFA\u8BAE\u81F3\u5C11\u8BF4\u6E05\u695A\u8FD9\u4E94\u4EF6\u4E8B\uFF1A" },
+      {
+        t: "code",
+        code: `\u573A\u666F\uFF1A\u8BD5\u7528\u8FD8\u5269 3 \u5929\uFF0C\u63D0\u9192\u7528\u6237\u7EED\u8D39
+\u5F62\u6001\uFF1A\u5F39\u7A97\uFF0C\u5BBD 520\uFF0C\u9AD8\u5EA6\u81EA\u9002\u5E94
+\u5185\u5BB9\uFF1A
+  - \u9876\u90E8\u6DF1\u7EA2\u6E10\u53D8\uFF0C\u5DE6\u4E0A\u89D2\u6807\u7B7E\u300C\u23F0 \u8BD5\u7528\u5269 3 \u5929\u300D
+  - \u4E0B\u9762 2\xD72 \u56DB\u4E2A\u6570\u636E\u683C\u5B50\uFF1A\u5DF2\u4E0A\u67B6 68 \u4E2A\u5546\u54C1\u3001AI \u4F18\u5316 15 \u6B21\u3001\u767D\u5E95\u56FE 42 \u5F20\u3001\u7ECF\u8425\u4EFB\u52A1 6 \u9879
+  - \u767D\u8272\u533A\u57DF\u6807\u9898\u300C3 \u5929\u540E\u8BD5\u7528\u5230\u671F\uFF0C\u4EE5\u4E0B\u80FD\u529B\u4F1A\u505C\u6B62\uFF1A\u300D
+  - \u4E09\u6761\u6D41\u5931\u6E05\u5355\uFF08\u6D45\u7EA2\u5E95\u3001\u7EA2\u70B9\u5F00\u5934\uFF09
+  - \u56DB\u4E2A\u4EF7\u683C\u6863\u4F4D\u53EF\u4EE5\u70B9\u9009\uFF1A\u6708\u4ED8 \xA515 / \u5B63\u4ED8 \xA532\uFF08\u9ED8\u8BA4\u9009\u4E2D\u3001\u6807"\u63A8\u8350"\uFF09/ \u534A\u5E74 \xA564 / \u5E74\u4ED8 \xA5128
+  - \u5E95\u90E8\u7EA2\u8272\u6E10\u53D8\u5927\u6309\u94AE\uFF0C\u6587\u6848\u8DDF\u7740\u9009\u4E2D\u7684\u6863\u4F4D\u53D8
+\u6309\u94AE\u8DF3\u8F6C\uFF1Ahttps://xxx.com/order?p={\u6863\u4F4D}
+\u57CB\u70B9\uFF1A\u70B9\u6863\u4F4D\u4E0A\u62A5 popup_period_select\uFF0C\u70B9\u6309\u94AE\u4E0A\u62A5 popup_renew_click`
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "AI \u751F\u6210\u7684\u914D\u7F6E**\u4E00\u5B9A\u8981\u5728\u8C03\u8BD5\u53F0\u91CC\u6E32\u67D3\u786E\u8BA4**\u518D\u7528\u3002\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u628A\u7EA2\u8272\u9519\u8BEF\u4FE1\u606F\u6574\u6BB5\u8D34\u56DE\u7ED9 AI\uFF0C\u5B83\u4E00\u822C\u4E00\u6B21\u5C31\u80FD\u6539\u5BF9\u3002"
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u56FE\u7247\u548C\u8DF3\u8F6C\u94FE\u63A5 AI \u7F16\u4E0D\u51FA\u6765\uFF0C\u5B83\u4F1A\u7528\u5360\u4F4D\u5730\u5740\u3002\u8BB0\u5F97\u81EA\u5DF1\u6362\u6210\u771F\u5B9E\u7684\uFF0C\u7136\u540E\u5728\u300C\u771F\u5B9E\u6001\u300D\u6A21\u5F0F\u4E0B\u70B9\u4E00\u904D\u6309\u94AE\uFF0C\u786E\u8BA4\u8DF3\u8F6C\u6B63\u786E\u3002"
+      }
+    ]
+  },
+  {
+    id: "concept",
+    title: "1. \u5148\u7406\u89E3\u4E00\u4EF6\u4E8B",
+    blocks: [
+      {
+        t: "p",
+        text: "\u8FD9\u5957 DSL \u7528\u4E00\u6BB5 JSON \u63CF\u8FF0\u5F39\u7A97 / Banner / \u516C\u544A\u957F\u4EC0\u4E48\u6837\u3001\u70B9\u4E86\u4F1A\u600E\u6837\u3002\u5B83\u53D6\u4EE3\u7684\u662F\u300C\u8BA9\u8FD0\u8425\u5199\u4E00\u6BB5 JS \u585E\u8FDB\u9875\u9762\u300D\u7684\u505A\u6CD5\u3002"
+      },
+      {
+        t: "note",
+        tone: "danger",
+        text: "\u6838\u5FC3\u7EA6\u675F\uFF1A\u914D\u7F6E\u662F\u6570\u636E\uFF0C\u6C38\u8FDC\u4E0D\u80FD\u53D8\u6210\u53EF\u6267\u884C\u4EE3\u7801\u3002\u6240\u4EE5\u8FD9\u91CC\u6CA1\u6709\u51FD\u6570\u8C03\u7528\u3001\u6CA1\u6709\u8D4B\u503C\u3001\u6CA1\u6709 eval\u3002\u4F60\u5728 JSON \u91CC\u5199\u4E0D\u51FA\u300C\u903B\u8F91\u300D\uFF0C\u53EA\u80FD\u5199\u300C\u63CF\u8FF0\u300D\u3002\u9047\u5230\u8868\u8FBE\u4E0D\u4E86\u7684\u9700\u6C42\uFF0C\u5148\u627E\u5BF9\u5E94\u7684\u8282\u70B9\u6216\u5B57\u6BB5\uFF0C\u4E0D\u8981\u60F3\u529E\u6CD5\u7ED5\u8FC7\u53BB\u2014\u2014\u7ED5\u8FC7\u53BB\u7684\u53E3\u5B50\u5C31\u662F\u4E0B\u4E00\u4E2A\u7EBF\u4E0A\u5B89\u5168\u4E8B\u6545\u3002"
+      },
+      {
+        t: "p",
+        text: "\u6362\u4E2A\u89D2\u5EA6\u60F3\uFF1A\u6392\u7248\u662F\u6570\u636E\uFF0C\u4E0D\u662F\u903B\u8F91\u3002\u300C\u8FD9\u4E2A\u5F39\u7A97\u957F\u4EC0\u4E48\u6837\u300D\u518D\u590D\u6742\uFF0C\u672C\u8D28\u90FD\u662F\u300C\u54EA\u4E9B\u5143\u7D20\u3001\u653E\u5728\u54EA\u3001\u591A\u5927\u3001\u4EC0\u4E48\u6837\u5F0F\u3001\u70B9\u4E86\u5E72\u561B\u300D\uFF0C\u8FD9\u662F\u4E00\u68F5\u80FD\u88AB JSON \u63CF\u8FF0\u7684\u6811\u3002\u771F\u6B63\u9700\u8981\u4EE3\u7801\u7684\u53EA\u6709\u300C\u65F6\u95F4\u300D\u8FD9\u4E00\u7C7B\u8FD0\u884C\u65F6\u6570\u636E\uFF0C\u90A3\u90E8\u5206\u7531 countdown \u8282\u70B9\u63D0\u4F9B\u3002"
+      },
+      { t: "h3", text: "\u5199\u4E4B\u524D\u5148\u60F3\u6E05\u695A\u4E09\u4EF6\u4E8B" },
+      {
+        t: "list",
+        items: [
+          "\u8FD9\u4E2A\u4E1C\u897F\u662F\u5F39\u7A97\uFF08\u5C45\u4E2D\u6D6E\u5C42\uFF09\u3001Banner \u8FD8\u662F\u516C\u544A\u6761\uFF1F \u2192 \u51B3\u5B9A `type` \u548C `stage.layout`",
+          "\u91CC\u9762\u7684\u5185\u5BB9\u662F\u5199\u6B7B\u7684\uFF0C\u8FD8\u662F\u8981\u4ECE\u540E\u7AEF\u53D6\uFF1F \u2192 \u51B3\u5B9A `data` \u7528\u5B57\u9762\u91CF\u8FD8\u662F `$source`",
+          "\u7528\u6237\u70B9\u4E86\u4E4B\u540E\u6709\u6CA1\u6709\u300C\u5207\u6362\u300D\u8FD9\u79CD\u5C40\u90E8\u4EA4\u4E92\uFF1F \u2192 \u51B3\u5B9A\u8981\u4E0D\u8981 `state` \u548C `derived`"
+        ]
+      }
+    ]
+  },
+  {
+    id: "structure",
+    title: "2. \u9876\u5C42\u7ED3\u6784",
+    blocks: [
+      {
+        t: "code",
+        code: `{
+  "version": 1,                    // \u5FC5\u586B\uFF0C\u56FA\u5B9A\u5199 1
+  "type": "popup",                 // popup \u5F39\u7A97 | banner | notice \u516C\u544A\u6761
+  "meta": { "name": "\u7EED\u8D39\u5F39\u7A97" },   // \u7ED9\u4EBA\u770B\u7684\u5907\u6CE8\uFF0C\u4E0D\u5F71\u54CD\u6E32\u67D3
+
+  "stage": { ... },                // \u821E\u53F0\uFF1A\u6574\u4F53\u5C3A\u5BF8\u3001\u906E\u7F69\u3001\u5173\u95ED\u6309\u94AE
+  "data":  { ... },                // \u6570\u636E\uFF1A\u5199\u6B7B\u7684\uFF0C\u6216\u4ECE\u540E\u7AEF\u6570\u636E\u6E90\u53D6
+  "state": { ... },                // \u5C40\u90E8\u72B6\u6001\uFF1A\u6BD4\u5982\u5F53\u524D\u9009\u4E2D\u7B2C\u51E0\u4E2A\u89C4\u683C
+  "derived": { ... },              // \u7531 data + state \u63A8\u5BFC\u7684\u522B\u540D
+  "nodes": [ ... ]                 // \u8282\u70B9\u6811\uFF1A\u771F\u6B63\u7684\u6392\u7248\u5185\u5BB9
+}`
+      },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u5FC5\u586B", "\u8BF4\u660E"],
+        rows: [
+          [
+            "version",
+            "\u662F",
+            "\u56FA\u5B9A 1\u3002\u4EE5\u540E DSL \u7ED3\u6784\u5927\u6539\u4F1A\u5347\u7248\u672C\uFF0C\u6E32\u67D3\u5668\u6309\u7248\u672C\u8D70\u4E0D\u540C\u5206\u652F\uFF0C\u8001\u914D\u7F6E\u7EE7\u7EED\u80FD\u6E32\u67D3"
+          ],
+          ["type", "\u662F", "popup / banner / notice\u3002popup \u4F1A\u5E26\u906E\u7F69\u5E76\u5C45\u4E2D\uFF0C\u5176\u4F59\u662F\u666E\u901A\u5757"],
+          ["meta", "\u5426", "\u53EA\u653E\u5907\u6CE8\u4FE1\u606F\uFF0C\u6E32\u67D3\u5668\u4E0D\u8BFB"],
+          ["stage", "\u662F", "\u821E\u53F0\u914D\u7F6E\uFF0C\u89C1\u7B2C 3 \u8282"],
+          ["data", "\u5426", "\u6570\u636E\uFF0C\u89C1\u7B2C 8 \u8282"],
+          ["state", "\u5426", "\u5C40\u90E8\u72B6\u6001\uFF0C\u89C1\u7B2C 8 \u8282"],
+          ["derived", "\u5426", "\u63A8\u5BFC\u522B\u540D\uFF0C\u89C1\u7B2C 8 \u8282"],
+          ["nodes", "\u662F", "\u975E\u7A7A\u6570\u7EC4\uFF0C\u89C1\u7B2C 6 \u8282"]
+        ]
+      }
+    ]
+  }
+];
+var guide_basics_default = sections4;
+
+// src/docs/sections/guide-layout.ts
+var sections5 = [
+  {
+    id: "layout",
+    title: "4. \u5E03\u5C40\u6A21\u578B\uFF08\u6700\u91CD\u8981\uFF09",
+    blocks: [
+      {
+        t: "p",
+        text: "\u53EA\u6709\u4E24\u79CD\u6392\u5E03\u65B9\u5F0F\u3002\u5199\u4E4B\u524D\u5FC5\u987B\u5148\u660E\u786E\u81EA\u5DF1\u5728\u54EA\u4E00\u79CD\u5BB9\u5668\u91CC\uFF0C\u8FD9\u662F\u9519\u5F97\u6700\u591A\u7684\u5730\u65B9\u3002"
+      },
+      {
+        t: "table",
+        head: ["\u6392\u5E03\u65B9\u5F0F", "\u51FA\u73B0\u5728\u54EA", "\u5B50\u8282\u70B9\u600E\u4E48\u5B9A\u4F4D"],
+        rows: [
+          [
+            "\u7EDD\u5BF9\u5B9A\u4F4D",
+            "`box` \u7684 children\uFF1B`stage.layout` \u4E3A `absolute` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9",
+            "**\u5FC5\u987B**\u5199 `rect: [x, y, w, h]`\uFF0C\u6309\u5750\u6807\u6446"
+          ],
+          [
+            "\u6D41\u5F0F",
+            "`flex` / `repeat` / `countdown` \u7684 children\uFF1B`stage.layout` \u4E3A `flow` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9",
+            "`rect` \u88AB\u5FFD\u7565\uFF0C\u7528 `style` \u7684 `width` / `height` / `flex` / `padding` / `gap` \u63A7\u5236"
+          ]
+        ]
+      },
+      { t: "h3", text: "\u600E\u4E48\u9009" },
+      {
+        t: "table",
+        head: ["\u573A\u666F", "\u914D\u7F6E"],
+        rows: [
+          [
+            "\u5F39\u7A97\uFF1A\u56FA\u5B9A\u753B\u5E03\uFF0C\u5143\u7D20\u6309\u5750\u6807\u6446",
+            '`layout: "absolute"`\uFF08\u9ED8\u8BA4\uFF09\uFF0C`height` \u7ED9\u5177\u4F53\u6570\u503C'
+          ],
+          [
+            "\u5F39\u7A97\uFF1A\u4E0A\u4E0B\u51E0\u4E2A\u533A\u5757\u4F9D\u6B21\u6392\uFF08\u591A\u6570\u771F\u5B9E\u5F39\u7A97\uFF09",
+            '`layout: "flow"`\uFF0C`height: "auto"`\uFF0C\u6BCF\u4E2A\u533A\u5757\u662F\u4E00\u4E2A `flex` \u8282\u70B9'
+          ],
+          [
+            "\u516C\u544A\u6761 / Banner\uFF1A\u5BBD\u5EA6\u94FA\u6EE1\u7236\u7EA7\uFF0C\u9AD8\u5EA6\u7531\u5185\u5BB9\u6491\u5F00",
+            '`layout: "flow"`\uFF0C`width: "100%"`\uFF0C`height: "auto"`'
+          ]
+        ]
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: '`height: "auto"` \u5FC5\u987B\u914D `layout: "flow"`\u3002\u7EDD\u5BF9\u5B9A\u4F4D\u7684\u5B50\u8282\u70B9\u6491\u4E0D\u8D77\u7236\u7EA7\u9AD8\u5EA6\uFF0C\u4F1A\u584C\u6210 0\u3002\u6821\u9A8C\u5C42\u4F1A\u76F4\u63A5\u62E6\u4E0B\u8FD9\u4E2A\u7EC4\u5408\u5E76\u63D0\u793A\u3002'
+      },
+      { t: "h3", text: "\u4E24\u79CD\u65B9\u5F0F\u53EF\u4EE5\u5D4C\u5957" },
+      {
+        t: "p",
+        text: "\u5E38\u89C1\u5199\u6CD5\uFF1A\u6574\u4F53\u7528 `flow` \u4E00\u5C42\u5C42\u5F80\u4E0B\u6392\uFF0C\u67D0\u4E2A\u9700\u8981\u300C\u89D2\u6807\u538B\u5728\u8FB9\u6846\u5916\u300D\u4E4B\u7C7B\u7CBE\u7EC6\u5B9A\u4F4D\u7684\u5C0F\u5361\u7247\u5355\u72EC\u7528 `box` \u5207\u56DE\u7EDD\u5BF9\u5B9A\u4F4D\u3002"
+      },
+      {
+        t: "code",
+        code: `{
+  "stage": { "width": 520, "height": "auto", "layout": "flow" },
+  "nodes": [
+    { "type": "flex", "style": { "direction": "column", "padding": 20 },
+      "children": [
+        { "type": "text", "content": "\u6807\u9898" },
+        { "type": "box", "style": { "width": 120, "height": 100 },
+          "children": [
+            { "type": "text", "rect": [0, -9, "100%", 20], "content": "\u89D2\u6807" }
+          ]
+        }
+      ]
+    }
+  ]
+}`
+      }
+    ]
+  },
+  {
+    id: "length",
+    title: "5. \u957F\u5EA6\u5355\u4F4D",
+    blocks: [
+      {
+        t: "p",
+        text: "`stage.width/height`\u3001`rect` \u7684\u56DB\u4E2A\u503C\u3001\u4EE5\u53CA `style` \u91CC\u7684\u5C3A\u5BF8\u7C7B\u5C5E\u6027\uFF0C\u63A5\u53D7\u4E0B\u9762\u51E0\u79CD\u5199\u6CD5\uFF1A"
+      },
+      {
+        t: "table",
+        head: ["\u5199\u6CD5", "\u4F8B\u5B50", "\u542B\u4E49"],
+        rows: [
+          ["\u6570\u5B57", "`460`", "\u6309 px \u5904\u7406"],
+          ["\u76F8\u5BF9\u5355\u4F4D\u5B57\u7B26\u4E32", '`"100%"` `"2rem"` `"50vw"`', "\u539F\u6837\u4EA4\u7ED9 CSS"],
+          ["auto", '`"auto"`', "\u7531\u5185\u5BB9\u6491\u5F00"],
+          ["calc", '`"calc(100% - 48px)"`', "\u539F\u6837\u4EA4\u7ED9 CSS"],
+          ["CSS \u7B80\u5199", '`"10px 14px"`', "\u7528\u4E8E `padding` / `margin` \u8FD9\u7C7B"],
+          ["\u63D2\u503C", '`"{{ quota.pct }}%"`', "\u8FD0\u884C\u65F6\u6C42\u503C\uFF0C\u6821\u9A8C\u65F6\u8DF3\u8FC7"]
+        ]
+      },
+      {
+        t: "p",
+        text: "\u53D7\u5355\u4F4D\u6821\u9A8C\u7684\u5C5E\u6027\uFF1A`width` `height` `minWidth` `minHeight` `maxWidth` `maxHeight` `radius` `padding` `margin` `marginTop/Bottom/Left/Right` `gap` `fontSize` `letterSpacing` `borderWidth`\u3002"
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: '\u5199\u9519\u5355\u4F4D\uFF08`"100pct"` / `"8px;"` / `"50%%"`\uFF09\u5728\u4FDD\u5B58\u524D\u5C31\u4F1A\u88AB\u62E6\u4E0B\u5E76\u6307\u51FA\u5177\u4F53\u4F4D\u7F6E\u3002'
+      },
+      {
+        t: "code",
+        code: `// \u5F39\u7A97\u7A84\u5C4F\u8DDF\u7740\u7236\u7EA7\u6536\uFF0C\u6700\u5BBD\u4E0D\u8D85\u8FC7 420
+"stage": { "width": "calc(100% - 48px)", "style": { "maxWidth": 420 } }
+
+// \u80CC\u666F\u56FE\u94FA\u6EE1\u821E\u53F0\uFF0C\u821E\u53F0\u5BBD\u5EA6\u53D8\u4E86\u4E0D\u7528\u6539\u914D\u7F6E
+{ "type": "image", "rect": [0, 0, "100%", "100%"], "src": "..." }
+
+// \u516C\u544A\u6761\uFF1A\u6587\u5B57\u5403\u6389\u5269\u4F59\u5BBD\u5EA6\uFF0C\u6309\u94AE\u56FA\u5B9A\u5BBD
+{ "type": "text",   "style": { "flex": "1" } }
+{ "type": "button", "style": { "width": 64 } }`
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: '\u767E\u5206\u6BD4\u9AD8\u5EA6\u4F9D\u8D56\u7236\u7EA7\u6709\u786E\u5B9A\u9AD8\u5EA6\u3002`stage.height` \u662F `"auto"` \u65F6\uFF0C\u5B50\u8282\u70B9\u5199 `height: "100%"` \u4E0D\u751F\u6548\u2014\u2014\u8FD9\u662F CSS \u672C\u8EAB\u7684\u89C4\u5219\u3002'
+      },
+      { t: "h3", text: "aspectRatio\uFF1A\u5BBD\u5EA6\u81EA\u9002\u5E94\u7684\u6574\u56FE Banner \u5FC5\u987B\u7528\u5B83" },
+      {
+        t: "p",
+        text: "Banner \u901A\u5E38\u662F\u300C\u5BBD\u5EA6\u94FA\u6EE1\u3001\u9AD8\u5EA6\u6309\u56FE\u7247\u6BD4\u4F8B\u7B97\u300D\u3002\u4F46\u70ED\u533A\u5BB9\u5668 `box` \u7684\u5B50\u8282\u70B9\u662F\u7EDD\u5BF9\u5B9A\u4F4D\u7684\uFF0C\u6491\u4E0D\u8D77 `box` \u7684\u9AD8\u5EA6\uFF1B`box` \u9AD8\u5EA6\u662F 0\uFF0C\u70ED\u533A\u7684\u767E\u5206\u6BD4 `rect` \u5C31\u5168\u7B97\u6210 0\uFF0C\u6574\u7247\u70ED\u533A\u5931\u6548\u3002\u7ED9\u5BB9\u5668\u5199 `aspectRatio` \u58F0\u660E\u5BBD\u9AD8\u6BD4\uFF0C\u9AD8\u5EA6\u5C31\u7531\u6D4F\u89C8\u5668\u6309\u5F53\u524D\u5BBD\u5EA6\u7B97\u51FA\u6765\u3002"
+      },
+      {
+        t: "code",
+        code: `// \u8BBE\u8BA1\u7A3F 1200 \xD7 300\uFF0C\u70ED\u533A\u5750\u6807\u6309\u6BD4\u4F8B\u6362\u7B97\u6210\u767E\u5206\u6BD4
+{ "type": "box",
+  "style": { "width": "100%", "aspectRatio": "1200 / 300" },
+  "children": [
+    { "type": "image", "rect": [0, 0, "100%", "100%"], "src": "..." },
+    { "type": "box", "rect": ["70%", "58%", "22%", "24%"], "action": {...} }
+  ] }`
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "\u5199\u6B7B `height` \u4E5F\u80FD\u8DD1\uFF0C\u4F46\u53EA\u5728\u67D0\u4E00\u4E2A\u5BBD\u5EA6\u4E0B\u70ED\u533A\u5BF9\u5F97\u4E0A\uFF0C\u6362\u4E2A\u5C4F\u5E55\u5BBD\u5EA6\u5C31\u6574\u4F53\u9519\u4F4D\u3002\u53EA\u8981\u5BB9\u5668\u5BBD\u5EA6\u662F\u767E\u5206\u6BD4\uFF0C\u5C31\u8BE5\u7528 `aspectRatio` \u800C\u4E0D\u662F\u56FA\u5B9A\u9AD8\u5EA6\u3002"
+      }
+    ]
+  }
+];
+var guide_layout_default = sections5;
+
+// src/docs/sections/guide-stage.ts
+var sections6 = [
+  {
+    id: "stage",
+    title: "3. stage \u821E\u53F0",
+    blocks: [
+      {
+        t: "code",
+        code: `"stage": {
+  "width": 520,
+  "height": "auto",
+  "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
+  "closeButton": {
+    "show": true,
+    "position": "top-right",     // top-right | top-left | bottom-center
+    "offset": [14, 14]
+  },
+  "style": { "radius": 18, "maxWidth": 420 }
+}`
+      },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u9ED8\u8BA4", "\u8BF4\u660E"],
+        rows: [
+          ["width", "320", "\u6570\u5B57\u6309 px\uFF1B\u4E5F\u53EF\u5199 `100%` / `calc(100% - 48px)`"],
+          ["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"],
+          ["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`"]
+        ]
+      },
+      {
+        t: "note",
+        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: "closeButton \u5173\u95ED\u6309\u94AE" },
+      {
+        t: "code",
+        code: `"closeButton": {
+  "show": true,
+  "position": "top-right",     // top-right | top-left | top-center
+                               // bottom-right | bottom-left | bottom-center
+  "offset": [12, 12],          // [x, y]\uFF0C\u76F8\u5BF9\u951A\u70B9\u90A3\u6761\u8FB9\u7684\u8DDD\u79BB
+  "size": 26,
+  // 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 }
+}`
+      },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u9ED8\u8BA4", "\u8BF4\u660E"],
+        rows: [
+          ["show", "true", "\u4E0D\u5199\u6574\u4E2A `closeButton` \u5C31\u6CA1\u6709\u5173\u95ED\u6309\u94AE"],
+          ["position", "top-right", "\u951A\u5728\u54EA\u4E2A\u89D2\u3002`*-center` \u4F1A\u6C34\u5E73\u5C45\u4E2D"],
+          ["offset", "[8, 8]", "\u76F8\u5BF9\u951A\u70B9\u8FB9\u7684\u8DDD\u79BB\u3002**\u5199\u8D1F\u503C\u5C31\u8DD1\u5230\u5F39\u7A97\u5916\u9762**"],
+          ["size", "26", "\u6309\u94AE\u5BBD\u9AD8"],
+          [
+            "icon",
+            "\u65E0\uFF08\u7528\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\uFF09",
+            "**\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"]
+        ]
+      },
+      { t: "h3", text: "\u56FE\u6807\u753B\u4EC0\u4E48\uFF1A\u4E09\u9009\u4E00\uFF0C\u4F18\u5148\u7EA7\u56FA\u5B9A" },
+      {
+        t: "table",
+        head: ["\u4F18\u5148\u7EA7", "\u5199\u6CD5", "\u753B\u51FA\u6765\u662F\u4EC0\u4E48"],
+        rows: [
+          ["1\uFF08\u6700\u9AD8\uFF09", "\u5199\u4E86 `image`", "\u8FD9\u5F20\u56FE\uFF0C\u94FA\u6EE1\u6309\u94AE"],
+          [
+            "2",
+            "\u6CA1\u5199 `image`\u3001\u5199\u4E86 `icon`",
+            "\u8FD9\u4E2A\u6587\u672C\u5B57\u7B26 / emoji\uFF0C\u8DDF\u7740 `style` \u7684 `color` `fontSize` \u8D70"
+          ],
+          [
+            "3\uFF08\u9ED8\u8BA4\uFF09",
+            "\u4E24\u4E2A\u90FD\u4E0D\u5199",
+            "**\u5185\u7F6E\u7684\u77E2\u91CF \xD7 \u56FE\u6807**\uFF1A\u4E00\u6BB5\u5185\u8054 SVG \u753B\u7684\u4E24\u6761\u4EA4\u53C9\u7EBF\uFF0C\u989C\u8272\u8DDF\u968F `style.color`"
+          ]
+        ]
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u9ED8\u8BA4\u56FE\u6807\u4EE5\u524D\u662F `\xD7` \u8FD9\u4E2A\u5B57\u7B26\uFF0C\u73B0\u5728\u6539\u6210\u4E86\u77E2\u91CF\u56FE\u3002\u539F\u56E0\u662F `\xD7`\uFF08U+00D7\uFF09\u7684\u5B57\u5F62\u58A8\u8FF9\u6574\u4F53\u504F\u4E0B\uFF0818px \u5B57\u53F7\u4E0B\u5B9E\u6D4B\u504F 1.85px\uFF09\uFF0C\u653E\u8FDB\u5706\u6309\u94AE\u91CC\u8089\u773C\u53EF\u89C1\u5730\u4E0D\u5C45\u4E2D\uFF0C\u800C\u8FD9\u662F\u5B57\u5F62\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u9760\u5BF9\u9F50\u5C5E\u6027\u8C03\u4E0D\u597D\u3002\u753B\u6210\u7EBF\u4E4B\u540E\u50CF\u7D20\u7EA7\u7CBE\u786E\uFF0C\u7C97\u7EC6\u968F\u6309\u94AE\u5927\u5C0F\u81EA\u52A8\u7F29\u653E\uFF0C\u4E5F\u4E0D\u53D7\u5B57\u4F53\u548C\u5E73\u53F0\u5DEE\u5F02\u5F71\u54CD\u3002"
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: '**\u6CA1\u6709\u7279\u6B8A\u8981\u6C42\u5C31\u522B\u5199 `icon`\u3002** \u9ED8\u8BA4\u56FE\u6807\u5DF2\u7ECF\u662F\u5BF9\u9F50\u597D\u7684\uFF0C\u5199\u6210 `"icon": "\xD7"` \u53CD\u800C\u4F1A\u9000\u56DE\u90A3\u4E2A\u504F\u4E0B\u7684\u5B57\u5F62\u3002\u786E\u5B9E\u60F3\u6362\u4E2A\u5F62\u72B6\uFF08\u6BD4\u5982\u6362\u6210 `\u2715`\u3001`\u2716`\u3001emoji\uFF09\u65F6\u624D\u5199\u5B83\u3002'
+      },
+      { t: "h3", text: "\u628A\u5173\u95ED\u6309\u94AE\u653E\u5230\u5F39\u7A97\u5916\u9762" },
+      {
+        t: "p",
+        text: "\u5706\u89D2\u88C1\u5207\u53EA\u4F5C\u7528\u4E8E\u5F39\u7A97\u5185\u5BB9\uFF0C\u5173\u95ED\u6309\u94AE\u5728\u88C1\u5207\u5C42\u4E4B\u5916\uFF0C\u6240\u4EE5 `offset` \u5199\u8D1F\u503C\u65F6\u4E0D\u4F1A\u88AB\u88C1\u6389\u3002\u4E24\u79CD\u5E38\u89C1\u505A\u6CD5\uFF1A"
+      },
+      {
+        t: "code",
+        code: `// \u53F3\u4E0A\u89D2\u5916\u4FA7
+"closeButton": { "position": "top-right", "offset": [-13, -13], "size": 26 }
+
+// \u5F39\u7A97\u6B63\u4E0B\u65B9\uFF08\u89C6\u89C9\u66F4\u8F7B\uFF0C\u5E38\u89C1\u4E8E\u56FE\u7247\u578B\u5F39\u7A97\uFF09
+"closeButton": {
+  "position": "bottom-center",
+  "offset": [0, -46],
+  "size": 34,
+  "style": { "background": "rgba(0,0,0,0.4)", "borderWidth": 1,
+             "borderStyle": "solid", "borderColor": "rgba(255,255,255,0.5)",
+             "color": "#fff" }
+}`
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "\u653E\u5230\u5916\u9762\u65F6\u8BB0\u5F97\u7559\u51FA\u7A7A\u95F4\uFF1A\u5F39\u7A97\u56DB\u5468\u6709 20px \u5185\u8FB9\u8DDD\uFF0C\u8D85\u8FC7\u8FD9\u4E2A\u8DDD\u79BB\u5728\u5C0F\u5C4F\u4E0A\u53EF\u80FD\u8D34\u8FB9\u3002\u5728\u8C03\u8BD5\u53F0\u91CC\u628A\u9884\u89C8\u7F29\u653E\u5207\u5230 100% \u786E\u8BA4\u4E00\u4E0B\u3002"
+      }
+    ]
+  }
+];
+var guide_stage_default = sections6;
+
+// src/docs/sections/nodes.ts
+var containerRows = [
+  ["box", "\u5BB9\u5668\uFF0Cchildren \u7528 rect \u7EDD\u5BF9\u5B9A\u4F4D", "`children`"],
+  [
+    "flex",
+    "\u5BB9\u5668\uFF0Cchildren \u6309\u6D41\u5F0F\u6392\u5217\u3002\u6700\u5E38\u7528",
+    "`children`\uFF1B\u6837\u5F0F\u7528 `direction` `gap` `wrap` `align` `justify`"
+  ],
+  [
+    "repeat",
+    "\u7ED1\u5B9A\u6570\u7EC4\u7684 flex \u5BB9\u5668\uFF0C\u6570\u636E\u51E0\u6761\u5C31\u6E32\u67D3\u51E0\u4EFD",
+    "`bind` `template` `itemName` `indexName`"
+  ]
+];
+var contentRows = [
+  ["text", "\u6587\u672C\u3002\u4E5F\u7528\u6765\u505A\u7EAF\u8272\u5757\u3001\u5706\u70B9\u3001\u6807\u7B7E", "`content`"],
+  ["image", "\u56FE\u7247", "`src`"],
+  ["button", "\u6309\u94AE\uFF08\u5185\u5BB9\u5C45\u4E2D\u7684\u6587\u672C\u5757\uFF09", "`text`"],
+  [
+    "tabs",
+    "\u9009\u9879\u5361\uFF0C\u70B9\u51FB\u65F6\u5199\u5165 `state[stateKey]`",
+    "`bind` `stateKey` `labelField` `itemStyle` `activeItemStyle`"
+  ],
+  ["countdown", "\u5012\u8BA1\u65F6\uFF0C\u89C1\u7B2C 10 \u8282", "`to` `precision` `as` `children` `format`"]
+];
+var styleRows = [
+  [
+    "\u6587\u5B57",
+    "`color` `fontSize` `fontWeight` `fontFamily` `lineHeight` `letterSpacing` `textAlign` `textDecoration` `whiteSpace` `fontVariantNumeric`"
+  ],
+  [
+    "\u80CC\u666F",
+    "`background` `backgroundImage` `backgroundSize` `backgroundPosition` `backgroundRepeat`"
+  ],
+  ["\u8FB9\u6846", "`border` `borderColor` `borderWidth` `borderStyle` `radius`"],
+  [
+    "\u76D2\u6A21\u578B",
+    "`padding` `margin` `marginTop` `marginBottom` `marginLeft` `marginRight` `overflow` `opacity` `shadow` `cursor`"
+  ],
+  ["flex \u5BB9\u5668", "`direction` `gap` `wrap` `align` `justify`"],
+  [
+    "flex \u5B50\u9879 / \u5C3A\u5BF8",
+    "`flex` `alignSelf` `width` `height` `minWidth` `minHeight` `maxWidth` `maxHeight`"
+  ],
+  ["\u56FE\u7247 / \u6BD4\u4F8B", "`objectFit` `aspectRatio`"]
+];
+var sections7 = [
+  {
+    id: "nodes",
+    title: "6. \u8282\u70B9\u7C7B\u578B",
+    blocks: [
+      { t: "p", text: "\u6240\u6709\u8282\u70B9\u90FD\u6709\u8FD9\u51E0\u4E2A\u516C\u5171\u5B57\u6BB5\uFF1A" },
+      {
+        t: "table",
+        head: ["\u5B57\u6BB5", "\u8BF4\u660E"],
+        rows: [
+          ["id", "\u53EF\u9009\uFF0C\u7ED9\u81EA\u5DF1\u770B\u7684\u6807\u8BC6"],
+          ["type", "\u5FC5\u586B\uFF0C\u89C1\u4E0B\u8868"],
+          ["rect", "`[x, y, w, h]`\uFF0C\u4EC5\u5728\u7EDD\u5BF9\u5B9A\u4F4D\u5BB9\u5668\u4E2D\u751F\u6548"],
+          ["style", "\u6837\u5F0F\uFF0C\u89C1\u7B2C 7 \u8282"],
+          ["visibleWhen", "\u8868\u8FBE\u5F0F\uFF0C\u4E3A\u5047\u65F6\u6574\u4E2A\u8282\u70B9\u4E0D\u6E32\u67D3"],
+          ["action", "\u70B9\u51FB\u52A8\u4F5C\uFF0C\u89C1\u7B2C 11 \u8282\u3002\u4EFB\u4F55\u8282\u70B9\u90FD\u80FD\u70B9"]
+        ]
+      },
+      { t: "h3", text: "\u5BB9\u5668\u7C7B" },
+      { t: "table", head: ["type", "\u8BF4\u660E", "\u5173\u952E\u5B57\u6BB5"], rows: containerRows },
+      { t: "h3", text: "\u5185\u5BB9\u7C7B" },
+      {
+        t: "table",
+        head: ["type", "\u8BF4\u660E", "\u5173\u952E\u5B57\u6BB5"],
+        // 容器类和内容类合起来才是完整的 NODE_TYPES，所以在这张表末尾对账
+        rows: contentRows.concat(
+          reconcileRows({
+            rows: containerRows.concat(contentRows),
+            actual: NODE_TYPES,
+            label: "\u65B0\u589E\u8282\u70B9\u7C7B\u578B"
+          })
+        )
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u6E32\u67D3\u5668\u9047\u5230\u4E0D\u8BA4\u8BC6\u7684 type \u4F1A\u8DF3\u8FC7\u800C\u4E0D\u662F\u5D29\u6E83\u2014\u2014\u56E0\u4E3A\u540E\u53F0\u914D\u7F6E\u548C\u4EA7\u54C1\u7AEF\u53D1\u7248\u662F\u5F02\u6B65\u7684\uFF0C\u7528\u6237\u6D4F\u89C8\u5668\u91CC\u53EF\u80FD\u8FD8\u662F\u65E7\u7248\u6E32\u67D3\u5668\u3002\u6240\u4EE5\u65B0\u8282\u70B9\u4E0A\u7EBF\u524D\u8981\u786E\u8BA4\u4EA7\u54C1\u7AEF\u7248\u672C\u5DF2\u94FA\u5F00\u3002"
+      },
+      { t: "h3", text: "repeat\uFF1A\u6570\u91CF\u4E0D\u5B9A\u7684\u5217\u8868" },
+      {
+        t: "code",
+        code: `{
+  "type": "repeat",
+  "bind": "plans",            // data \u91CC\u7684\u6570\u7EC4\u5B57\u6BB5\u540D
+  "itemName": "item",         // \u6A21\u677F\u91CC\u7528 {{ item.xxx }}\uFF0C\u9ED8\u8BA4\u5C31\u662F item
+  "indexName": "index",       // \u6A21\u677F\u91CC\u7528 {{ index }}
+  "style": { "gap": 8, "wrap": true },
+  "template": {               // \u5355\u4E2A\u6761\u76EE\u957F\u4EC0\u4E48\u6837
+    "type": "flex",
+    "style": { "width": "calc(50% - 4px)" },
+    "children": [
+      { "type": "text", "content": "{{ item.name }}" }
+    ]
+  }
+}`
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "\u540E\u7AEF\u8FD4\u56DE\u7684\u5217\u8868\u5FC5\u987B\u7528 repeat\u3002\u914D\u7F6E\u7684\u65F6\u5019\u4F60\u4E0D\u77E5\u9053\u4F1A\u6709\u51E0\u6761\uFF0C\u5199\u6B7B\u51E0\u4E2A\u8282\u70B9\u4E0A\u7EBF\u5C31\u4F1A\u51FA\u9519\u3002"
+      },
+      { t: "h3", text: "\u6CA1\u6709\u5217\u8868 / \u5BCC\u6587\u672C\u8282\u70B9" },
+      {
+        t: "p",
+        text: '\u4E00\u884C\u91CC\u6DF7\u6392\u591A\u79CD\u5B57\u53F7\uFF08\u6BD4\u5982\u300C\u5DF2\u8865\u9F50 **42** \u5F20\u300D\u4E09\u79CD\u5B57\u53F7\uFF09\uFF0C\u7528 `flex` + `align: "baseline"` \u653E\u51E0\u4E2A `text` \u8282\u70B9\uFF0C\u4E0D\u9700\u8981\u5BCC\u6587\u672C\u3002\u52A0\u7C97\u540C\u7406\u2014\u2014\u62C6\u6210\u4E24\u4E2A `text`\uFF0C\u4E00\u4E2A `fontWeight: "700"`\u3002'
+      }
+    ]
+  },
+  {
+    id: "style",
+    title: "7. style \u767D\u540D\u5355",
+    blocks: [
+      {
+        t: "p",
+        text: "\u53EA\u6709\u767B\u8BB0\u5728\u518C\u7684\u5C5E\u6027\u624D\u4F1A\u751F\u6548\uFF0C\u5199\u522B\u7684\u4F1A\u88AB\u4E22\u5F03\u5E76\u5728\u6821\u9A8C\u65F6\u7ED9\u51FA\u8B66\u544A\u3002\u8FD9\u6837\u80FD\u6321\u4F4F\u901A\u8FC7\u6837\u5F0F\u505A\u7684\u574F\u4E8B\uFF08\u5168\u5C4F\u8986\u76D6\u9493\u9C7C\u3001\u5C42\u7EA7\u8D8A\u6743\u7B49\uFF09\u3002"
+      },
+      {
+        t: "table",
+        head: ["\u5206\u7C7B", "\u5C5E\u6027"],
+        rows: styleRows.concat(
+          reconcileRows({
+            rows: styleRows,
+            actual: ALLOWED_STYLE_KEYS,
+            column: 1,
+            inline: true,
+            label: "\u65B0\u589E\u6837\u5F0F\u5C5E\u6027"
+          })
+        )
+      },
+      { t: "h3", text: "\u51E0\u4E2A\u5BB9\u6613\u8E29\u7684\u70B9" },
+      {
+        t: "list",
+        items: [
+          "`radius` \u4E0D\u662F `borderRadius`\uFF1B`shadow` \u4E0D\u662F `boxShadow`\uFF1B`direction` \u4E0D\u662F `flexDirection`",
+          '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"
+        ]
+      },
+      {
+        t: "code",
+        code: `// \u9009\u4E2D\u6001\uFF1A\u8FB9\u6846\u989C\u8272\u8DDF\u7740 state \u53D8
+"style": {
+  "borderStyle": "solid",
+  "borderWidth": "{{ item.key == current.key ? '2px' : '1px' }}",
+  "borderColor": "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}",
+  "background":  "{{ item.key == current.key ? '#fffaf0' : '#ffffff' }}"
+}`
+      }
+    ]
+  }
+];
+var nodes_default = sections7;
+
+// src/docs/sections/views.ts
+var sections8 = [
+  {
+    id: "views",
+    title: "12. \u591A\u89C6\u56FE\uFF08\u4E00\u4EFD\u914D\u7F6E\u91CC\u653E\u51E0\u4E2A\u5F39\u7A97\uFF09",
+    blocks: [
+      {
+        t: "p",
+        text: "\u9ED8\u8BA4\u4E00\u4EFD\u914D\u7F6E\u5C31\u662F\u4E00\u4E2A\u5F39\u7A97\u3002\u8981\u505A\u300C\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u300D\u300C\u4E0D\u518D\u63D0\u9192\u518D\u5F39\u4E2A\u786E\u8BA4\u300D\u300C\u4E3B\u5F39\u7A97\u548C\u8BE6\u60C5\u5C4F\u6765\u56DE\u5207\u300D\u8FD9\u7C7B\uFF0C\u5C31\u7528\u591A\u89C6\u56FE\uFF1A\u628A\u9876\u5C42\u7684 `type` / `stage` / `nodes` \u632A\u8FDB `views`\uFF0C\u518D\u6307\u5B9A `entry`\u3002"
+      },
+      {
+        t: "code",
+        code: `{
+  "version": 1,
+  "entry": "bar",                  // \u9996\u4E2A\u5C55\u793A\u7684\u89C6\u56FE
+  "data": { ... },                 // \u2193 \u8FD9\u4E09\u4E2A\u662F\u5168\u5C40\u5171\u4EAB\u7684
+  "state": { "plan": 0 },
+  "derived": { ... },
+  "views": {
+    "bar":     { "type": "notice", "stage": {...}, "nodes": [...] },
+    "renew":   { "type": "popup",  "stage": {...}, "nodes": [...] },
+    "confirm": { "type": "popup",  "stage": {...}, "nodes": [...] }
+  }
+}`
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "**`state` \u662F\u5168\u5C40\u5171\u4EAB\u7684**\uFF0C\u8FD9\u662F\u591A\u89C6\u56FE\u6700\u597D\u7528\u7684\u5730\u65B9\uFF1A\u7528\u6237\u5728\u4E3B\u5C4F\u9009\u4E86\u300C\u5B63\u4ED8\u300D\uFF0C\u5F39\u51FA\u6765\u7684\u4E8C\u6B21\u786E\u8BA4\u6846\u76F4\u63A5\u5199 `{{ current.price }}` \u5C31\u80FD\u8BFB\u5230\uFF0C\u4E0D\u7528\u4F20\u53C2\u3002"
+      },
+      { t: "h3", text: "\u600E\u4E48\u5207" },
+      {
+        t: "table",
+        head: ["\u5199\u6CD5", "\u6548\u679C", "\u5178\u578B\u573A\u666F"],
+        rows: [
+          [
+            '`{ "type": "open", "view": "renew" }`',
+            '\u53E0\u4E00\u5C42\uFF0C\u4E0B\u9762\u90A3\u5C42\u8FD8\u5728\uFF08\u9ED8\u8BA4 `mode: "stack"`\uFF09',
+            "\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u3001\u4E8C\u6B21\u786E\u8BA4"
+          ],
+          [
+            '`{ "type": "open", "view": "unlock", "mode": "replace" }`',
+            "\u6362\u6389\u5F53\u524D\u5C42\uFF0C\u5C42\u6570\u4E0D\u53D8",
+            "\u4E3B\u5F39\u7A97 \u2194 \u80FD\u529B\u6E05\u5355\u6765\u56DE\u5207"
+          ],
+          ['`{ "type": "close" }`', "\u5173\u6389\u5F53\u524D\u5C42\uFF0C\u56DE\u5230\u4E0A\u4E00\u5C42", "\u786E\u8BA4\u6846\u7684\u300C\u53D6\u6D88\u300D"],
+          ['`{ "type": "closeAll" }`', "\u51E0\u5C42\u90FD\u5173\u6389", "\u786E\u8BA4\u6846\u7684\u300C\u786E\u5B9A\u300D"]
+        ]
+      },
+      { t: "h3", text: "\u53E0\u52A0\u65F6\u7684\u8868\u73B0" },
+      {
+        t: "list",
+        items: [
+          "**\u53EA\u6709\u6700\u4E0A\u9762\u90A3\u5C42\u753B\u906E\u7F69**\uFF0C\u5426\u5219\u4E24\u5C42\u906E\u7F69\u53E0\u52A0\u4F1A\u660E\u663E\u53D8\u9ED1",
+          "\u4E0B\u9762\u7684\u5C42\u8FD8\u770B\u5F97\u89C1\uFF0C\u4F46\u70B9\u4E0D\u52A8\uFF08\u907F\u514D\u8BEF\u89E6\u540E\u9762\u7684\u6309\u94AE\uFF09",
+          "`notice` / `banner` \u7C7B\u578B\u7684\u89C6\u56FE\u5728\u6587\u6863\u6D41\u91CC\uFF0C\u5F39\u7A97\u53E0\u4E0A\u53BB\u65F6\u5B83\u81EA\u7136\u88AB\u538B\u4F4F\uFF0C\u548C\u771F\u5B9E\u9875\u9762\u4E00\u81F4"
+        ]
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: "\u7528\u4E86 `views` \u4E4B\u540E\uFF0C`stage` \u548C `nodes` **\u4E0D\u80FD\u518D\u7559\u5728\u9876\u5C42**\uFF0C\u6821\u9A8C\u4F1A\u76F4\u63A5\u62A5\u9519\u3002`open` \u7684 `view` \u540D\u5199\u9519\u4E5F\u4F1A\u5728\u4FDD\u5B58\u524D\u88AB\u62E6\u4E0B\u3002"
+      },
+      { t: "p", text: "\u8C03\u8BD5\u53F0\u7684\u793A\u4F8B \u2464 \u2465 \u5C31\u662F\u8FD9\u4E24\u79CD\u7528\u6CD5\uFF0C\u76F4\u63A5\u7167\u7740\u6539\u6700\u5FEB\u3002" }
+    ]
+  },
+  {
+    id: "validate",
+    title: "13. \u6821\u9A8C",
+    blocks: [
+      { t: "p", text: "\u540C\u4E00\u5957\u6821\u9A8C\u89C4\u5219\u5728\u4E09\u4E2A\u5730\u65B9\u8DD1\uFF0C\u4EFB\u4F55\u4E00\u5904\u4E0D\u8FC7\u90FD\u4E0D\u4F1A\u4E0A\u7EBF\uFF1A" },
+      {
+        t: "list",
+        items: [
+          "\u7F16\u8F91\u5668\uFF1A\u8FB9\u5199\u8FB9\u63D0\u793A \u2014\u2014\u300C\u5DF2\u751F\u6548\u300D",
+          "\u540E\u7AEF\u4FDD\u5B58\u65F6\uFF1A\u4E0D\u4FE1\u4EFB\u524D\u7AEF\uFF0C\u4E5F\u9632\u624B\u5199 JSON \u7ED5\u8FC7\u63A5\u53E3 \u2014\u2014\u300C**\u5F85\u63A5\u5165**\u300D",
+          "\u6E32\u67D3\u5668\u8FD0\u884C\u65F6\uFF1A\u9047\u5230\u4E0D\u8BA4\u8BC6\u7684\u4E1C\u897F\u8DF3\u8FC7\u800C\u4E0D\u662F\u5D29\u6E83 \u2014\u2014\u300C\u5DF2\u751F\u6548\u300D"
+        ]
+      },
+      {
+        t: "note",
+        tone: "warn",
+        text: '\u540E\u7AEF\u90A3\u5C42\u8FD8\u6CA1\u63A5\u3002\u5728\u63A5\u4E0A\u4E4B\u524D\uFF0C**\u7ED5\u8FC7\u540E\u53F0\u9875\u9762\u76F4\u63A5\u8C03\u4FDD\u5B58\u63A5\u53E3\u7684 JSON \u662F\u6CA1\u6709\u6821\u9A8C\u7684**\u3002\u540E\u7AEF\u63A5\u5165\u65B9\u5F0F\uFF1A`import { validate } from "@yaoxiu/marketing-dsl"`\uFF0C\u8FD9\u4E2A\u5305\u662F\u7EAF TS \u65E0\u6846\u67B6\u4F9D\u8D56\uFF0CNode \u91CC\u53EF\u4EE5\u76F4\u63A5\u8DD1\u3002'
+      },
+      { t: "h3", text: "\u5E38\u89C1\u62A5\u9519" },
+      {
+        t: "table",
+        head: ["\u62A5\u9519", "\u539F\u56E0"],
+        rows: [
+          [
+            "\u5904\u4E8E\u7EDD\u5BF9\u5B9A\u4F4D\u5BB9\u5668\u4E2D\uFF0C\u5FC5\u987B\u63D0\u4F9B rect",
+            "\u7236\u7EA7\u662F `box`\uFF0C\u6216 `stage.layout` \u662F `absolute`\u3002\u8865 `rect`\uFF0C\u6216\u628A\u7236\u7EA7\u6539\u6210 `flex`"
+          ],
+          [
+            "height: 'auto' \u9700\u8981\u540C\u65F6\u8BBE\u7F6E stage.layout: 'flow'",
+            "\u7EDD\u5BF9\u5B9A\u4F4D\u6491\u4E0D\u8D77\u9AD8\u5EA6\uFF0C\u89C1\u7B2C 4 \u8282"
+          ],
+          ['"xxx" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6', "\u5355\u4F4D\u5199\u9519\uFF0C\u89C1\u7B2C 5 \u8282"],
+          [
+            "\u6837\u5F0F\u5C5E\u6027\u4E0D\u5728\u767D\u540D\u5355\u5185\uFF08\u8B66\u544A\uFF09",
+            "\u5C5E\u6027\u540D\u5199\u9519\uFF0C\u6216\u7528\u4E86\u672A\u5F00\u653E\u7684 CSS \u5C5E\u6027\uFF0C\u89C1\u7B2C 7 \u8282"
+          ],
+          ['data \u4E2D\u4E0D\u5B58\u5728 "xxx"', "`derived.list` \u6216 `repeat.bind` \u6307\u5411\u4E86\u4E0D\u5B58\u5728\u7684\u5B57\u6BB5"],
+          ["\u8868\u8FBE\u5F0F\u6709\u8BEF", "`visibleWhen` \u91CC\u5199\u4E86\u4E0D\u652F\u6301\u7684\u8BED\u6CD5\uFF0C\u6BD4\u5982\u51FD\u6570\u8C03\u7528"],
+          [
+            "\u57CB\u70B9\u4E8B\u4EF6\u540D\u683C\u5F0F\u4E0D\u5408\u6CD5",
+            "`track` \u7684 `event` \u7528\u4E86\u4E2D\u6587 / \u9A7C\u5CF0 / \u4E2D\u5212\u7EBF\uFF0C\u6216\u957F\u5EA6\u4E0D\u591F\uFF0C\u89C1\u7B2C 11 \u8282"
+          ]
+        ]
+      }
+    ]
+  },
+  {
+    id: "limits",
+    title: "14. \u7EA2\u7EBF",
+    blocks: [
+      { t: "p", text: "\u4E0B\u9762\u8FD9\u4E9B\u662F\u6709\u610F\u4E0D\u505A\u7684\uFF0C\u4E0D\u662F\u8FD8\u6CA1\u505A\u3002\u63D0\u9700\u6C42\u524D\u5148\u770B\u8FD9\u91CC\uFF1A" },
+      {
+        t: "table",
+        head: ["\u505A\u4E0D\u5230\u7684\u4E8B", "\u4E3A\u4EC0\u4E48", "\u8BE5\u600E\u4E48\u529E"],
+        rows: [
+          [
+            "\u5199\u4EFB\u610F JS / \u8868\u8FBE\u5F0F\u91CC\u8C03\u51FD\u6570",
+            "\u914D\u7F6E\u4E00\u65E6\u80FD\u6267\u884C\uFF0C\u8FD0\u8425\u540E\u53F0\u5C31\u6210\u4E86\u7EBF\u4E0A\u9875\u9762\u7684\u6CE8\u5165\u5165\u53E3",
+            "\u627E\u5BF9\u5E94\u7684\u8282\u70B9\u6216\u52A8\u4F5C\uFF1B\u786E\u5B9E\u6CA1\u6709\u5C31\u63D0\u9700\u6C42\u52A0\u8282\u70B9"
+          ],
+          ["\u586B\u4EFB\u610F\u63A5\u53E3\u5730\u5740", "\u8D8A\u6743\u62C9\u6570\u548C SSRF", "\u8BA9\u540E\u7AEF\u6CE8\u518C\u6570\u636E\u6E90\uFF0C\u7F16\u8F91\u5668\u91CC\u9009"],
+          ["\u5199 `javascript:` \u94FE\u63A5", "\u540C\u7B2C\u4E00\u6761", "\u7528 `call` \u52A8\u4F5C\u8C03\u5BBF\u4E3B\u6CE8\u518C\u7684\u65B9\u6CD5"],
+          [
+            "\u7528\u767D\u540D\u5355\u5916\u7684 CSS\uFF08\u5982 `position` / `zIndex`\uFF09",
+            "\u5168\u5C4F\u8986\u76D6\u9493\u9C7C\u3001\u5C42\u7EA7\u8D8A\u6743",
+            "\u7528 `box` + `rect` \u505A\u5B9A\u4F4D"
+          ],
+          [
+            "\u5BCC\u6587\u672C / \u81EA\u5B9A\u4E49 CSS \u7247\u6BB5",
+            "\u4E00\u5F00\u53E3\u5B50\uFF0CDSL \u5C31\u6C89\u6DC0\u4E0D\u4E0B\u6765\u4E86",
+            "\u591A\u5B57\u53F7\u6DF7\u6392\u7528\u591A\u4E2A `text` \u8282\u70B9\uFF0C\u89C1\u7B2C 6 \u8282"
+          ],
+          [
+            "\u81EA\u5DF1\u5B9A\u4E49\u57CB\u70B9\u4E8B\u4EF6\u540D\u7684\u683C\u5F0F",
+            "\u540E\u7AEF\u6309\u524D\u7F00\u805A\u5408\uFF0C\u683C\u5F0F\u4E00\u4E71\u5C31\u6CA1\u6CD5\u5206\u7EC4",
+            "\u6309\u7B2C 11 \u8282\u7684\u683C\u5F0F\u548C `\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C` \u6A21\u5F0F\u8D77\u540D"
+          ]
+        ]
+      },
+      {
+        t: "note",
+        tone: "info",
+        text: "\u8FD9\u5957 DSL \u5DF2\u7ECF\u5B8C\u6574\u590D\u523B\u8FC7\u8FD0\u8425\u90A3\u4EFD\u300C\u7EED\u8D39\u5F39\u7A97 \xB7 \u94FA\u8D27\u9875\u5B9E\u666F demo\u300D\u91CC\u7684\u771F\u5B9E\u5F39\u7A97\uFF0C\u5305\u62EC\u5206\u683C\u5398\u79D2\u5012\u8BA1\u65F6\u3002\u78B0\u5230\u8868\u8FBE\u4E0D\u4E86\u7684\u6392\u7248\uFF0C\u5927\u6982\u7387\u662F\u8282\u70B9\u7528\u6CD5\u95EE\u9898\uFF0C\u5148\u5728\u8C03\u8BD5\u53F0\u91CC\u8BD5\u3002"
+      }
+    ]
+  }
+];
+var views_default = sections8;
+
+// src/docs/sections/index.ts
+var sections9 = [].concat(
+  guide_basics_default,
+  // 0~2
+  guide_stage_default,
+  // 3
+  guide_layout_default,
+  // 4~5
+  nodes_default,
+  // 6~7
+  data_state_default,
+  // 8~9
+  countdown_default,
+  // 10
+  action_default,
+  // 11
+  views_default
+  // 12~14
+);
+var sections_default = sections9;
+
+// src/docs/meta.ts
+var changelog = [
+  {
+    date: "2026-08-18",
+    items: [
+      "\u5F00\u53D1\u6587\u6863\u642C\u8FDB @yaoxiu/marketing-dsl \u5305\uFF0C\u8D70\u5B50\u8DEF\u5F84 @yaoxiu/marketing-dsl/docs \u5F15\u5165\uFF0C\u8DDF\u89E3\u91CA\u5668\u540C\u4ED3\u540C\u7248\u672C\u53D1\u5E03",
+      "\u66F4\u6B63\u5173\u95ED\u6309\u94AE\u9ED8\u8BA4\u56FE\u6807\uFF1A\u9ED8\u8BA4\u662F\u5185\u8054 SVG \u753B\u7684\u4E24\u6761\u7EBF\uFF0C\u4E0D\u662F `\xD7` \u5B57\u7B26\uFF1Bicon \u53D8\u6210\u53EF\u9009\u8986\u76D6\u9879\uFF08\u7B2C 3 \u8282\uFF09",
+      "\u8865\u5145\u57CB\u70B9\u4E8B\u4EF6\u540D\u7684\u547D\u540D\u89C4\u8303\uFF1A\u683C\u5F0F\u4E0D\u5408\u89C4\u4F1A\u5728\u4FDD\u5B58\u524D\u76F4\u63A5\u62A5\u9519\uFF0C\u4E0D\u662F\u8B66\u544A\uFF08\u7B2C 11 \u8282\uFF09",
+      "AI \u63D0\u793A\u8BCD\u4E00\u5E76\u642C\u8FDB\u5305\u91CC\uFF0C\u540C\u6B65\u8865\u4E0A\u57CB\u70B9\u4E8B\u4EF6\u540D\u89C4\u8303\uFF08\u6B63\u6587 + \u81EA\u68C0\u6E05\u5355\uFF09\u2014\u2014AI \u751F\u6210\u4E2D\u6587 / \u9A7C\u5CF0\u4E8B\u4EF6\u540D\u4F1A\u88AB\u6821\u9A8C\u62E6\u4E0B",
+      'AI \u63D0\u793A\u8BCD\u66F4\u6B63\u5173\u95ED\u6309\u94AE\u5199\u6CD5\uFF1A\u9ED8\u8BA4\u7528\u5185\u7F6E\u77E2\u91CF\u56FE\u6807\uFF0C\u4E0D\u518D\u793A\u8303 `"icon": "\xD7"`',
+      "\u6587\u6863\u4E0D\u518D\u5355\u72EC\u7EF4\u62A4 docVersion\uFF0C\u7248\u672C\u53F7\u8DDF\u5305\u8D70\uFF0C\u53D8\u66F4\u8BB0\u5F55\u6309\u65E5\u671F"
+    ]
+  },
+  {
+    date: "2026-08-17",
+    items: [
+      "\u8BF4\u660E close \u7684\u771F\u5B9E\u8BED\u4E49\uFF1A\u901A\u77E5\u5BBF\u4E3B\u300C\u7528\u6237\u60F3\u5173\u4E86\u300D\uFF0C\u7531\u5BBF\u4E3B\u51B3\u5B9A\u5173\u4E0D\u5173\uFF08\u7B2C 11 \u8282\uFF09",
+      "\u5217\u51FA\u54EA\u4E9B\u573A\u666F\u5BBF\u4E3B\u4F1A\u6536\u5230\u901A\u77E5\u3001\u54EA\u4E9B\u53EA\u662F\u5185\u90E8\u5F39\u6808",
+      "\u63D0\u9192\u300C\u5173\u4E86\u522B\u518D\u51FA\u73B0\u300D\u8981\u914D call\uFF0C\u5149\u9760 close \u53EA\u7BA1\u8FD9\u4E00\u6B21",
+      "\u8865\u5145 onEnd \u8BF4\u660E\uFF1A\u5012\u8BA1\u65F6\u5F52\u96F6\u53EF\u4EE5\u4E0A\u62A5\u57CB\u70B9\u3001\u81EA\u52A8\u5173\u5F39\u7A97\u6216\u6362\u5C4F\uFF08\u7B2C 10 \u8282\uFF09",
+      "onEnd \u6539\u4E3A\u53EA\u5728\u300C\u7528\u6237\u773C\u770B\u7740\u5B83\u5F52\u96F6\u300D\u65F6\u89E6\u53D1\uFF0C\u6253\u5F00\u65F6\u5C31\u5DF2\u8FC7\u671F\u7684\u4E0D\u518D\u89E6\u53D1\uFF0C\u907F\u514D\u6C61\u67D3\u57CB\u70B9",
+      "\u5012\u8BA1\u65F6\u7684 to \u660E\u786E\u652F\u6301\u666E\u901A\u65E5\u671F\u5199\u6CD5\uFF0C\u4E0D\u7528\u5199\u65F6\u95F4\u6233\uFF1A\u300C2026-09-01 18:00\u300D\u300C2026\u5E749\u67081\u65E5 18\u70B9\u300D\u90FD\u884C",
+      "\u4FEE\u590D ISO \u683C\u5F0F\uFF08\u540E\u7AEF\u63A5\u53E3\u7684\u9ED8\u8BA4\u683C\u5F0F\uFF0C\u5982 2026-09-01T18:00:00+08:00\uFF09\u88AB\u89E3\u6790\u6210\u300C\u5DF2\u7ED3\u675F\u300D\u7684\u95EE\u9898",
+      "to \u5199\u6210\u8BC6\u522B\u4E0D\u4E86\u7684\u5185\u5BB9\u4F1A\u5728\u4FDD\u5B58\u524D\u62A5\u9519\uFF0C\u4E0D\u518D\u9759\u9ED8\u663E\u793A\u300C\u5DF2\u7ED3\u675F\u300D",
+      "\u89E3\u91CA\u5668\u62BD\u6210\u72EC\u7ACB\u5305\uFF1A@yaoxiu/marketing-dsl\uFF08\u6838\u5FC3\uFF0C\u7EAF TS \u65E0\u6846\u67B6\u4F9D\u8D56\uFF09+ @yaoxiu/marketing-dsl-vue2\uFF08Vue2 \u6E32\u67D3\u58F3\uFF09",
+      "\u6587\u6863\u91CC\u7684\u8282\u70B9\u7C7B\u578B / \u52A8\u4F5C / \u6837\u5F0F\u767D\u540D\u5355\u4F1A\u8DDF\u89E3\u91CA\u5668\u81EA\u52A8\u5BF9\u8D26\uFF0C\u89E3\u91CA\u5668\u65B0\u589E\u4E86\u800C\u6587\u6863\u6CA1\u5199\u4F1A\u5F53\u573A\u6807\u51FA\u6765",
+      "style \u767D\u540D\u5355\u65B0\u589E aspectRatio\u2014\u2014\u5BBD\u5EA6\u81EA\u9002\u5E94\u7684\u6574\u56FE Banner \u9760\u5B83\u624D\u80FD\u7528\u767E\u5206\u6BD4\u653E\u70ED\u533A\uFF08\u7B2C 5 \u8282\uFF09",
+      "\u65B0\u589E\u793A\u4F8B \u2467 \u6574\u56FE Banner\uFF08\u5BBD\u5EA6\u81EA\u9002\u5E94 + \u70ED\u533A\uFF09",
+      "\u8865\u5145\u516C\u544A\u6761 / Banner \u7684\u5173\u95ED\u5199\u6CD5\uFF1A\u884C\u672B\u653E\u4E00\u4E2A\u5E26 close \u52A8\u4F5C\u7684 text \u8282\u70B9\uFF08\u7B2C 11 \u8282\uFF09",
+      "\u4FEE\u590D\u5185\u5C42\u8282\u70B9\u70B9\u51FB\u4F1A\u5192\u6CE1\u89E6\u53D1\u5916\u5C42\u52A8\u4F5C\u7684\u95EE\u9898\u2014\u2014\u6574\u6761\u516C\u544A\u6761\u53EF\u70B9\u65F6\uFF0C\u70B9 \xD7 \u4F1A\u8FDE\u5E26\u6253\u5F00\u5F39\u7A97",
+      "\u65B0\u589E stage.onShow / stage.onClose \u751F\u547D\u5468\u671F\u52A8\u4F5C\uFF0C\u66DD\u5149\u548C\u5173\u95ED\u4E5F\u80FD\u57CB\u70B9\uFF08\u7B2C 11 \u8282\uFF09",
+      "onClose \u901A\u8FC7 {{ closeReason }} \u533A\u5206\u662F\u70B9 X\u3001\u70B9\u906E\u7F69\u3001close \u52A8\u4F5C\u8FD8\u662F\u88AB replace \u9876\u6389"
+    ]
+  },
+  {
+    date: "2026-08-14",
+    items: [
+      "stage \u7684 width / height / style \u4E5F\u652F\u6301 {{ }}\uFF0C\u5207 tab \u65F6\u5F39\u7A97\u672C\u8EAB\u7684\u80CC\u666F\u3001\u5706\u89D2\u80FD\u8DDF\u7740\u53D8\uFF08\u7B2C 11 \u8282\uFF09",
+      "\u8865\u5145\u300C\u5207 tab \u6362\u80A4 / \u6362\u5E03\u5C40\u300D\u5199\u6CD5\uFF1A\u914D\u8272\u653E\u8FDB data\uFF0C\u6392\u7248\u5DEE\u5F02\u7528\u4E24\u5957\u8282\u70B9 + visibleWhen",
+      "\u65B0\u589E\u793A\u4F8B \u2466 \u5207 tab \u6362\u80A4\u6362\u5E03\u5C40\uFF1B\u793A\u4F8B \u2460 \u6269\u6210 5 \u4E2A\u70ED\u533A\uFF0C\u6F14\u793A\u591A\u70ED\u533A\u5404\u81EA\u7ED1\u4E0D\u540C\u52A8\u4F5C"
+    ]
+  },
+  {
+    date: "2026-08-13",
+    items: [
+      "\u65B0\u589E\u591A\u89C6\u56FE\uFF1A\u4E00\u4EFD\u914D\u7F6E\u53EF\u653E\u591A\u4E2A\u89C6\u56FE\uFF08views + entry\uFF09\uFF0C\u652F\u6301\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u3001\u4E8C\u6B21\u786E\u8BA4\u3001\u5C4F\u95F4\u5207\u6362\uFF08\u7B2C 12 \u8282\uFF09",
+      "\u65B0\u589E\u52A8\u4F5C open\uFF08stack / replace\uFF09\u548C closeAll\uFF1Bclose \u6539\u4E3A\u300C\u5173\u6389\u5F53\u524D\u5C42\u300D",
+      "\u53EA\u6709\u6808\u9876\u90A3\u5C42\u753B\u906E\u7F69\uFF0C\u4E0B\u5C42\u53EF\u89C1\u4F46\u4E0D\u53EF\u70B9\u51FB",
+      "\u5355\u89C6\u56FE\u914D\u7F6E\u5B8C\u5168\u5411\u540E\u517C\u5BB9\uFF0C\u4E0D\u5199 views \u5C31\u548C\u4EE5\u524D\u4E00\u6837",
+      "\u65B0\u589E\u300C\u7528 AI \u751F\u6210\u914D\u7F6E\u300D\u4E00\u8282\uFF0C\u5E76\u652F\u6301\u5BFC\u51FA / \u590D\u5236\u4E13\u95E8\u7ED9 AI \u7684\u63D0\u793A\u8BCD"
+    ]
+  },
+  {
+    date: "2026-08-12",
+    items: [
+      "\u9996\u7248\uFF1A\u8282\u70B9\u3001\u6837\u5F0F\u3001\u8868\u8FBE\u5F0F\u3001\u6570\u636E\u6E90\u3001\u52A8\u4F5C\u3001\u6821\u9A8C\u89C4\u5219",
+      "closeButton \u652F\u6301 icon / image / size / style \u81EA\u5B9A\u4E49\uFF0Coffset \u5199\u8D1F\u503C\u53EF\u653E\u5230\u5F39\u7A97\u5916\u9762\uFF08\u7B2C 3 \u8282\uFF09",
+      "countdown \u6539\u4E3A\u4F5C\u7528\u57DF\u5BB9\u5668\uFF0C\u5206\u683C\u6570\u5B57\u548C\u5398\u79D2\u52A8\u753B\u7531 children \u81EA\u884C\u6392\u7248\uFF08\u7B2C 10 \u8282\uFF09"
+    ]
+  }
+];
+var meta = {
+  updatedAt: changelog[0].date,
+  dslVersion: DSL_VERSION,
+  changelog
+};
+var meta_default = meta;
+
+// src/docs/examples/renew-expire.ts
+var ORANGE = "linear-gradient(90deg,#ff7a00,#faad14)";
+var achieveCell = {
+  type: "flex",
+  style: {
+    direction: "column",
+    width: "calc(50% - 5px)",
+    background: "rgba(255,255,255,0.16)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "rgba(255,255,255,0.2)",
+    radius: 10,
+    padding: "10px 13px",
+    gap: 3
+  },
+  children: [
+    {
+      // 三种字号同排：靠 flex + baseline 对齐，不需要富文本
+      // lineHeight 必须显式给，否则 20px 数字的默认行高会把格子撑高
+      type: "flex",
+      style: { align: "baseline", gap: 3, height: 22 },
+      children: [
+        {
+          type: "text",
+          content: "{{ item.v }}",
+          style: {
+            fontSize: 11.5,
+            fontWeight: "600",
+            lineHeight: 1.1,
+            color: "rgba(255,255,255,0.92)"
+          }
+        },
+        {
+          type: "text",
+          content: "{{ item.n }}",
+          style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
+        },
+        {
+          type: "text",
+          content: "{{ item.u }}",
+          style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
+        }
+      ]
+    },
+    {
+      type: "text",
+      content: "{{ item.l }}",
+      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" },
+  children: [
+    {
+      type: "text",
+      content: "",
+      style: { width: 6, height: 6, radius: "50%", background: "#f53f3f" }
+    },
+    {
+      type: "flex",
+      style: { align: "baseline", flex: "1" },
+      children: [
+        {
+          type: "text",
+          content: "{{ item.b }}",
+          style: { fontSize: 12.5, fontWeight: "700", color: "#3f4656" }
+        },
+        {
+          type: "text",
+          content: " \u2014 {{ item.t }}",
+          style: { fontSize: 12.5, color: "#4a4038" }
+        }
+      ]
+    }
+  ]
+};
+var tierCard = {
+  type: "box",
+  style: {
+    flex: "1",
+    height: 121,
+    radius: 12,
+    background: "{{ item.key == current.key ? '#fffaf0' : '#ffffff' }}",
+    borderStyle: "solid",
+    borderWidth: "{{ item.key == current.key ? '2px' : '1px' }}",
+    borderColor: "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}",
+    cursor: "pointer"
+  },
+  action: {
+    type: "sequence",
+    actions: [
+      { type: "setState", key: "period", value: "{{ index }}" },
+      {
+        type: "track",
+        event: "popup_period_select",
+        params: { period: "{{ item.key }}" }
+      }
+    ]
+  },
+  children: [
+    {
+      type: "text",
+      // 负 top 让角标压到卡片上边框外面；选中态 2px 边框，所以是 -9 不是 -7
+      rect: ["calc(50% - 19px)", -9, 38, 22],
+      content: "\u63A8\u8350",
+      visibleWhen: "item.hot",
+      style: {
+        background: ORANGE,
+        color: "#ffffff",
+        fontSize: 11,
+        fontWeight: "800",
+        radius: 6,
+        textAlign: "center",
+        lineHeight: 22
+      }
+    },
+    {
+      type: "text",
+      rect: [0, 12, "100%", 19],
+      content: "{{ item.p }}",
+      style: { fontSize: 13, color: "#8a909c", textAlign: "center" }
+    },
+    {
+      type: "flex",
+      rect: [0, 34, "100%", 26],
+      style: { justify: "center", align: "baseline" },
+      children: [
+        {
+          type: "text",
+          content: "\xA5",
+          style: { fontSize: 13, fontWeight: "800", color: "#1f2533" }
+        },
+        {
+          type: "text",
+          content: "{{ item.price }}",
+          style: { fontSize: 21, fontWeight: "800", color: "#1f2533" }
+        }
+      ]
+    },
+    {
+      type: "text",
+      rect: [4, 63, "calc(100% - 8px)", 32],
+      content: "{{ item.per }}",
+      style: { fontSize: 11, color: "#8a909c", textAlign: "center", lineHeight: 1.35 }
+    },
+    {
+      type: "text",
+      rect: [0, 98, "100%", 15],
+      content: "{{ item.flag }}",
+      visibleWhen: "item.flag != ''",
+      style: { fontSize: 11, color: "#8a909c", textAlign: "center" }
+    }
+  ]
+};
+var renewExpire = {
+  version: 1,
+  type: "popup",
+  meta: { name: "\u8BD5\u7528\u5269 3 \u5929 \xB7 \u5230\u671F\u4E13\u4EAB\uFF08\u590D\u523B\u8FD0\u8425 demo\uFF09" },
+  stage: {
+    width: 520,
+    height: "auto",
+    layout: "flow",
+    mask: true,
+    maskClosable: false,
+    closeButton: { show: true, position: "top-right", offset: [14, 14] },
+    style: { radius: 18 }
+  },
+  data: {
+    achieve: [
+      { v: "\u5DF2\u8865\u9F50", n: "42", u: " \u5F20", l: "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8" },
+      { v: "\u5DF2\u8865\u9F50", n: "34", u: " \u6761", l: "\u5BFC\u8D2D\u77ED\u6807\u9898 \xB7 \u63D0\u70B9\u51FB" },
+      { v: "\u8FD0\u884C", n: "6", u: " \u9879", l: "\u7ECF\u8425\u4EFB\u52A1\uFF08\u5546\u54C1\u4F18\u5316/\u6D41\u91CF\u589E\u957F\uFF09" },
+      { v: "\u5DF2\u4E0A\u67B6", n: "68", u: " \u4E2A", l: "\u7D2F\u8BA1\u4E0A\u67B6\u5546\u54C1" }
+    ],
+    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" },
+      { b: "\u65B0\u4EBA\u9996\u8D2D\u4EF7", t: "\u5230\u671F\u6062\u590D\u539F\u4EF7 \xA520/\u6708" }
+    ],
+    // 价格档位从后端数据源取：$source 是后端注册过的名字，不是接口地址。
+    // 后端返回几档就渲染几档，配置时不用知道数量（见下面的 repeat）。
+    tiers: { $source: "listRenewTiers", params: { scene: "trial_expire" } }
+  },
+  state: { period: 1 },
+  derived: { current: { list: "tiers", indexBy: "period" } },
+  nodes: [
+    // ===== 深色渐变头部 =====
+    {
+      type: "flex",
+      style: {
+        direction: "column",
+        background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
+        padding: "20px 22px 16px",
+        gap: 13
+      },
+      children: [
+        {
+          type: "text",
+          content: "\u23F0 \u8BD5\u7528\u5269 {{ user.trialLeftDays }} \u5929",
+          style: {
+            // 不写 alignSelf 会被 flex 列拉满整行，标签必须按内容宽度
+            alignSelf: "flex-start",
+            background: "rgba(255,255,255,0.18)",
+            color: "#ffffff",
+            fontSize: 12,
+            fontWeight: "700",
+            radius: 6,
+            padding: "5px 10px"
+          }
+        },
+        {
+          type: "repeat",
+          bind: "achieve",
+          style: { gap: 9, wrap: true },
+          template: achieveCell
+        }
+      ]
+    },
+    // ===== 白色 body =====
+    {
+      type: "flex",
+      style: { direction: "column", background: "#ffffff", padding: "22px 26px 24px" },
+      children: [
+        {
+          type: "text",
+          content: "{{ user.trialLeftDays }} \u5929\u540E\u8BD5\u7528\u5230\u671F\uFF0C\u4EE5\u4E0B\u80FD\u529B\u4F1A\u505C\u6B62\uFF1A",
+          style: { fontSize: 15, fontWeight: "800", color: "#1f2533", marginBottom: 11 }
+        },
+        {
+          type: "repeat",
+          bind: "lose",
+          template: loseRow,
+          style: {
+            direction: "column",
+            background: "#ffe9e6",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#ffd0ca",
+            radius: 12,
+            padding: "7px 13px"
+          }
+        },
+        {
+          type: "flex",
+          style: { align: "center", gap: 8, marginTop: 17, marginBottom: 9 },
+          children: [
+            {
+              type: "text",
+              content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
+              style: { fontSize: 13.5, fontWeight: "700", color: "#747b89" }
+            },
+            {
+              type: "text",
+              content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
+              style: {
+                alignSelf: "center",
+                background: ORANGE,
+                color: "#ffffff",
+                fontSize: 11,
+                fontWeight: "800",
+                radius: 5,
+                padding: "2px 8px"
+              }
+            }
+          ]
+        },
+        { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard },
+        {
+          type: "flex",
+          style: {
+            justify: "center",
+            align: "center",
+            gap: 5,
+            height: 52,
+            radius: 11,
+            background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
+            marginTop: 15,
+            cursor: "pointer"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              {
+                type: "track",
+                event: "popup_renew_click",
+                params: { period: "{{ current.key }}" }
+              },
+              { type: "navigate", url: "{{ current.url }}" }
+            ]
+          },
+          children: [
+            {
+              type: "text",
+              content: "\u4FDD\u4F4F\u5546\u54C1 \xB7",
+              style: { fontSize: 14, fontWeight: "800", color: "#ffffff" }
+            },
+            {
+              type: "text",
+              content: "{{ current.p }} \xA5{{ current.price }}",
+              style: { fontSize: 15, fontWeight: "800", color: "#ffffff" }
+            }
+          ]
+        },
+        {
+          type: "text",
+          content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
+          style: {
+            fontSize: 12.5,
+            color: "#8a909c",
+            textAlign: "center",
+            marginTop: 11,
+            cursor: "pointer"
+          },
+          action: { type: "track", event: "popup_more_plans" }
+        }
+      ]
+    }
+  ]
+};
+var renew_expire_default = renewExpire;
+
+// src/docs/examples/last-day.ts
+var ORANGE2 = "linear-gradient(90deg,#ff7a00,#faad14)";
+var cdBlock = (content, extra) => ({
+  type: "text",
+  content,
+  style: Object.assign(
+    {
+      width: 42,
+      height: 29,
+      background: "rgba(255,255,255,0.14)",
+      borderWidth: 1,
+      borderStyle: "solid",
+      borderColor: "rgba(255,255,255,0.16)",
+      radius: 7,
+      color: "#ffffff",
+      fontSize: 18,
+      fontWeight: "800",
+      lineHeight: 29,
+      textAlign: "center",
+      // 厘秒每帧都在变，不等宽会左右抖
+      fontVariantNumeric: "tabular-nums"
+    },
+    extra
+  )
+});
+var cdSeparator = (content) => ({
+  type: "text",
+  content,
+  style: { fontSize: 13, fontWeight: "800", color: "rgba(255,255,255,0.7)" }
+});
+var achieveCell2 = {
+  type: "flex",
+  style: {
+    direction: "column",
+    width: "calc(50% - 5px)",
+    background: "rgba(255,255,255,0.16)",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: "rgba(255,255,255,0.2)",
+    radius: 10,
+    padding: "10px 13px",
+    gap: 3
+  },
+  children: [
+    {
+      type: "flex",
+      style: { align: "baseline", gap: 3, height: 22 },
+      children: [
+        {
+          type: "text",
+          content: "{{ item.v }}",
+          style: {
+            fontSize: 11.5,
+            fontWeight: "600",
+            lineHeight: 1.1,
+            color: "rgba(255,255,255,0.92)"
+          }
+        },
+        {
+          type: "text",
+          content: "{{ item.n }}",
+          style: { fontSize: 20, fontWeight: "800", lineHeight: 1.1, color: "#ffffff" }
+        },
+        {
+          type: "text",
+          content: "{{ item.u }}",
+          style: { fontSize: 12, lineHeight: 1.1, color: "rgba(255,255,255,0.92)" }
+        }
+      ]
+    },
+    {
+      type: "text",
+      content: "{{ item.l }}",
+      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" },
+  children: [
+    {
+      type: "text",
+      content: "",
+      style: { width: 6, height: 6, radius: "50%", background: "#f53f3f", marginTop: 7 }
+    },
+    {
+      type: "flex",
+      style: { align: "baseline", gap: 4, wrap: true, flex: "1" },
+      children: [
+        {
+          type: "text",
+          content: "{{ item.b }}",
+          style: {
+            fontSize: 12.5,
+            fontWeight: "700",
+            lineHeight: 1.55,
+            color: "#1f2533"
+          }
+        },
+        {
+          type: "text",
+          content: "{{ item.tag }}",
+          visibleWhen: "item.tag != ''",
+          style: {
+            background: "{{ item.sev == 'lose' ? '#ffd5cf' : 'rgba(255,255,255,0.78)' }}",
+            color: "{{ item.sev == 'lose' ? '#cf1322' : '#8a7f78' }}",
+            fontSize: 10,
+            fontWeight: "800",
+            radius: 4,
+            padding: "1px 6px",
+            whiteSpace: "nowrap"
+          }
+        },
+        {
+          type: "text",
+          content: "\u2014 {{ item.t }}",
+          style: { fontSize: 12.5, lineHeight: 1.55, color: "#4a4038" }
+        }
+      ]
+    }
+  ]
+};
+var tierCard2 = {
+  type: "box",
+  style: {
+    flex: "1",
+    height: 121,
+    radius: 12,
+    background: "{{ item.key == current.key ? '#fffaf0' : '#ffffff' }}",
+    borderStyle: "solid",
+    borderWidth: "{{ item.key == current.key ? '2px' : '1px' }}",
+    borderColor: "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}",
+    cursor: "pointer"
+  },
+  action: {
+    type: "sequence",
+    actions: [
+      { type: "setState", key: "period", value: "{{ index }}" },
+      {
+        type: "track",
+        event: "popup_period_select",
+        params: { period: "{{ item.key }}" }
+      }
+    ]
+  },
+  children: [
+    {
+      type: "text",
+      rect: ["calc(50% - 19px)", -9, 38, 22],
+      content: "\u63A8\u8350",
+      visibleWhen: "item.hot",
+      style: {
+        background: ORANGE2,
+        color: "#ffffff",
+        fontSize: 11,
+        fontWeight: "800",
+        radius: 6,
+        textAlign: "center",
+        lineHeight: 22
+      }
+    },
+    {
+      type: "text",
+      rect: [0, 12, "100%", 19],
+      content: "{{ item.p }}",
+      style: { fontSize: 13, color: "#8a909c", textAlign: "center" }
+    },
+    {
+      type: "flex",
+      rect: [0, 34, "100%", 26],
+      style: { justify: "center", align: "baseline" },
+      children: [
+        {
+          type: "text",
+          content: "\xA5",
+          style: { fontSize: 13, fontWeight: "800", color: "#1f2533" }
+        },
+        {
+          type: "text",
+          content: "{{ item.price }}",
+          style: { fontSize: 21, fontWeight: "800", color: "#1f2533" }
+        }
+      ]
+    },
+    {
+      type: "text",
+      rect: [4, 63, "calc(100% - 8px)", 32],
+      content: "{{ item.per }}",
+      style: { fontSize: 11, color: "#8a909c", textAlign: "center", lineHeight: 1.35 }
+    },
+    {
+      type: "text",
+      rect: [0, 98, "100%", 15],
+      content: "{{ item.flag }}",
+      visibleWhen: "item.flag != ''",
+      style: { fontSize: 11, color: "#8a909c", textAlign: "center" }
+    }
+  ]
+};
+var lastDay = {
+  version: 1,
+  type: "popup",
+  meta: { name: "\u5269 1 \u5929 \xB7 \u6700\u540E\u4E00\u9053\uFF08\u542B\u5398\u79D2\u5012\u8BA1\u65F6\uFF09" },
+  stage: {
+    width: 520,
+    height: "auto",
+    layout: "flow",
+    mask: true,
+    maskClosable: false,
+    closeButton: { show: true, position: "top-right", offset: [14, 14] },
+    style: { radius: 18 }
+  },
+  data: {
+    achieve: [
+      { v: "\u5DF2\u4E0A\u67B6", n: "118", u: " \u4E2A", l: "\u7D2F\u8BA1\u4E0A\u67B6\u5546\u54C1" },
+      { v: "\u8FD0\u884C", n: "6", u: " \u9879", l: "\u7ECF\u8425\u4EFB\u52A1\uFF08\u5546\u54C1\u4F18\u5316/\u6D41\u91CF\u589E\u957F\uFF09" },
+      { v: "\u5DF2\u8865\u9F50", n: "42", u: " \u5F20", l: "\u767D\u5E95\u56FE \xB7 \u5408\u89C4\u53EF\u62A5\u6D3B\u52A8" },
+      { v: "\u5B8C\u6210", n: "31", u: " \u6B21", l: "\u6807\u9898\u4E3B\u56FE\u81EA\u52A8\u91CD\u505A" }
+    ],
+    lose: [
+      {
+        b: "118 \u4E2A\u5546\u54C1\u7684\u5168\u90E8\u4F18\u5316\u8BB0\u5F55",
+        tag: "\u5C06\u51BB\u7ED3",
+        sev: "lose",
+        t: "\u5230\u671F\u51BB\u7ED3\uFF0C\u903E\u671F\u5F7B\u5E95\u6E05\u7A7A"
+      },
+      {
+        b: "\u5E97\u94FA\u6388\u6743\u4E0E\u591A\u5E97\u5173\u8054",
+        tag: "",
+        sev: "lose",
+        t: "\u7ED1\u5B9A\u5173\u7CFB\u6E05\u96F6\uFF0C\u6BCF\u4E2A\u5E97\u90FD\u8981\u91CD\u65B0\u6388\u6743\u4E00\u904D"
+      },
+      {
+        b: "\u5546\u54C1\u8BCA\u65AD\u4E0E\u4F18\u5316\u8BB0\u5F55",
+        tag: "\u5C06\u51BB\u7ED3",
+        sev: "lose",
+        t: "\u5546\u54C1\u5386\u53F2\u4F18\u5316\u8BB0\u5F55\u65E0\u6CD5\u67E5\u8BE2\uFF0C\u9700\u91CD\u65B0\u4F18\u5316"
+      },
+      {
+        b: "7 \u9879\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1",
+        tag: "\u5C06\u6682\u505C",
+        sev: "pause",
+        t: "\u8865\u7D20\u6750\u4E0E\u6CBB\u4F4E\u6548\u54C1\u5168\u90E8\u505C\u6446"
+      }
+    ],
+    tiers: [
+      {
+        key: "month",
+        p: "\u6708\u4ED8",
+        price: "15",
+        per: "\u63A5\u56DE\u4EF7 \xB7 \u6B21\u6708\xA520",
+        flag: "",
+        hot: false,
+        url: "https://maibaole.example.com/order?p=month"
+      },
+      {
+        key: "quarter",
+        p: "\u5B63\u4ED8",
+        price: "32",
+        per: "\xA510.7/\u6708 \xB7 \u6700\u5212\u7B97",
+        flag: "",
+        hot: true,
+        url: "https://maibaole.example.com/order?p=quarter"
+      },
+      {
+        key: "half",
+        p: "\u534A\u5E74",
+        price: "64",
+        per: "\xA510.7/\u6708",
+        flag: "\u70ED\u95E8",
+        hot: false,
+        url: "https://maibaole.example.com/order?p=half"
+      },
+      {
+        key: "year",
+        p: "\u5E74\u4ED8",
+        price: "128",
+        per: "\xA510.7/\u6708",
+        flag: "\u7701\u6700\u591A",
+        hot: false,
+        url: "https://maibaole.example.com/order?p=year"
+      }
+    ]
+  },
+  state: { period: 1 },
+  derived: { current: { list: "tiers", indexBy: "period" } },
+  nodes: [
+    {
+      type: "flex",
+      style: {
+        direction: "column",
+        background: "linear-gradient(135deg,#2b0f0f,#3a1414)",
+        padding: "20px 22px 16px"
+      },
+      children: [
+        {
+          type: "text",
+          content: "\u{1F525} \u8FD8\u5269\u6700\u540E {{ user.lastDayLeft }} \u5929",
+          style: {
+            alignSelf: "flex-start",
+            background: "rgba(255,255,255,0.18)",
+            color: "#ffffff",
+            fontSize: 12,
+            fontWeight: "700",
+            radius: 6,
+            padding: "3px 10px"
+          }
+        },
+        {
+          type: "repeat",
+          bind: "achieve",
+          style: { gap: 9, wrap: true, marginTop: 14 },
+          template: achieveCell2
+        },
+        // ===== 分格倒计时 + 厘秒逐帧动画 =====
+        {
+          type: "countdown",
+          to: "{{ user.trialEndAt }}",
+          precision: "cs",
+          as: "cd",
+          style: { align: "center", gap: 6, marginTop: 10 },
+          onEnd: { type: "track", event: "popup_countdown_end" },
+          children: [
+            cdBlock("{{ cd.h }}"),
+            cdSeparator(":"),
+            cdBlock("{{ cd.m }}"),
+            cdSeparator(":"),
+            cdBlock("{{ cd.s }}"),
+            cdSeparator("."),
+            cdBlock("{{ cd.cs }}", {
+              width: 34,
+              height: 24,
+              fontSize: 13,
+              lineHeight: 24,
+              color: "#ffcabc"
+            }),
+            {
+              type: "text",
+              content: "\u540E\u505C\u6B62\u670D\u52A1",
+              style: {
+                fontSize: 11.5,
+                fontWeight: "600",
+                color: "rgba(255,255,255,0.85)",
+                marginLeft: 4
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "flex",
+      style: { direction: "column", background: "#ffffff", padding: "22px 26px 24px" },
+      children: [
+        {
+          type: "text",
+          content: "\u5230\u671F\u540E\uFF0C\u4EE5\u4E0B\u6570\u636E\u5C06\u6E05\u7A7A\uFF1A",
+          style: { fontSize: 15, fontWeight: "800", color: "#1f2533" }
+        },
+        {
+          type: "repeat",
+          bind: "lose",
+          template: loseRow2,
+          style: {
+            direction: "column",
+            marginTop: 14,
+            background: "#ffe9e6",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#ffd0ca",
+            radius: 12,
+            padding: "7px 13px"
+          }
+        },
+        {
+          // perk 权益条
+          type: "flex",
+          style: {
+            align: "flex-start",
+            gap: 7,
+            marginTop: 16,
+            background: "#fff9ed",
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderColor: "#ffd08a",
+            radius: 12,
+            padding: "14px 13px"
+          },
+          children: [
+            {
+              type: "text",
+              content: "\u2713",
+              style: { fontSize: 12.5, fontWeight: "900", color: "#ff7a00" }
+            },
+            {
+              type: "flex",
+              style: { align: "baseline", flex: "1" },
+              children: [
+                {
+                  type: "text",
+                  content: "\u4ECA\u665A\u8FC7\u540E\uFF0C\u81EA\u52A8\u53D8\u56DE\u539F\u4EF7\uFF0C",
+                  style: { fontSize: 12.5, fontWeight: "600", color: "#a35200" }
+                },
+                {
+                  type: "text",
+                  content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
+                  style: { fontSize: 12.5, fontWeight: "800", color: "#a35200" }
+                },
+                {
+                  type: "text",
+                  content: "\u4EC5\u8BD5\u7528\u671F\u5185\u6709\u6548",
+                  style: { fontSize: 12.5, fontWeight: "600", color: "#a35200" }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "flex",
+          style: { align: "center", gap: 8, marginTop: 17, marginBottom: 9 },
+          children: [
+            {
+              type: "text",
+              content: "\u4E13\u5C5E\u4F18\u60E0 \xB7 \u5012\u8BA1\u65F6",
+              style: { fontSize: 13.5, fontWeight: "700", color: "#747b89" }
+            },
+            {
+              type: "text",
+              content: "\u65B0\u4EBA\u9996\u8D2D\u4EF7",
+              style: {
+                alignSelf: "center",
+                background: ORANGE2,
+                color: "#ffffff",
+                fontSize: 11,
+                fontWeight: "800",
+                radius: 5,
+                padding: "2px 8px"
+              }
+            }
+          ]
+        },
+        { type: "repeat", bind: "tiers", style: { gap: 8 }, template: tierCard2 },
+        {
+          type: "flex",
+          style: {
+            justify: "center",
+            align: "center",
+            gap: 5,
+            height: 52,
+            radius: 11,
+            background: "linear-gradient(90deg,#f53f3f,#ff7a45)",
+            marginTop: 20,
+            cursor: "pointer"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              {
+                type: "track",
+                event: "popup_renew_click",
+                params: { period: "{{ current.key }}", stage: "last_day" }
+              },
+              { type: "navigate", url: "{{ current.url }}" }
+            ]
+          },
+          children: [
+            {
+              type: "text",
+              content: "\u539F\u6837\u7559\u4F4F\u6210\u679C \xB7",
+              style: { fontSize: 14, fontWeight: "800", color: "#ffffff" }
+            },
+            {
+              type: "text",
+              content: "{{ current.p }} \xA5{{ current.price }}",
+              style: { fontSize: 16.5, fontWeight: "800", color: "#ffffff" }
+            }
+          ]
+        },
+        {
+          type: "text",
+          content: "\u5347\u7EA7\u6216\u67E5\u770B\u66F4\u591A\u4EA7\u54C1\u5957\u9910",
+          style: {
+            fontSize: 12,
+            color: "#8a909c",
+            textAlign: "center",
+            marginTop: 10,
+            cursor: "pointer"
+          },
+          action: { type: "track", event: "popup_more_plans" }
+        }
+      ]
+    }
+  ]
+};
+var last_day_default = lastDay;
+
+// src/docs/examples/multi-view.ts
+var ORANGE3 = "linear-gradient(90deg,#ff7a00,#faad14)";
+var textBtn = (text, action, extra) => ({
+  type: "text",
+  content: text,
+  style: Object.assign({ fontSize: 12.5, color: "#8a909c", cursor: "pointer" }, extra),
+  action
+});
+var noticeToPopup = {
+  version: 1,
+  meta: { name: "\u516C\u544A\u6761\u70B9\u51FB\u5F39\u51FA\u5F39\u7A97\uFF08\u591A\u89C6\u56FE \xB7 \u53E0\u52A0\uFF09" },
+  entry: "bar",
+  data: {
+    plans: [
+      {
+        key: "pro",
+        name: "\u4E13\u4E1A\u7248",
+        price: "\xA5899/\u5E74",
+        url: "https://maibaole.example.com/order?p=pro"
+      },
+      {
+        key: "lux",
+        name: "\u8C6A\u534E\u7248",
+        price: "\xA51999/\u5E74",
+        url: "https://maibaole.example.com/order?p=lux"
+      }
+    ]
+  },
+  state: { plan: 0 },
+  derived: { current: { list: "plans", indexBy: "plan" } },
+  views: {
+    // 常驻在页面里的公告条，点它才弹弹窗
+    bar: {
+      type: "notice",
+      stage: {
+        width: "100%",
+        height: "auto",
+        layout: "flow",
+        style: { radius: 6, background: "#fff8e6", maxWidth: 1200 },
+        // 多视图下每层各埋各的，能分别统计「公告条曝光」和「弹窗曝光」
+        onShow: { type: "track", event: "notice_show", params: { view: "bar" } },
+        onClose: {
+          type: "track",
+          event: "notice_dismiss",
+          params: { view: "bar", reason: "{{ closeReason }}" }
+        }
+      },
+      nodes: [
+        {
+          type: "flex",
+          // 整条都能点开弹窗
+          style: { align: "center", gap: 10, padding: "10px 14px", cursor: "pointer" },
+          action: {
+            type: "sequence",
+            actions: [
+              { type: "track", event: "notice_click", params: { from: "bar" } },
+              { type: "open", view: "renew" }
+            ]
+          },
+          children: [
+            { type: "text", content: "\u{1F4E2}", style: { fontSize: 16 } },
+            {
+              type: "text",
+              content: "{{ user.shopName }}\uFF0C\u4F60\u7684{{ user.version }}\u8FD8\u6709 {{ user.expireDays }} \u5929\u5230\u671F",
+              style: { flex: "1", fontSize: 14, color: "#8a6212", lineHeight: 1.5 }
+            },
+            {
+              type: "button",
+              text: "\u67E5\u770B\u7EED\u8D39\u65B9\u6848",
+              style: {
+                width: 104,
+                height: 28,
+                radius: 14,
+                background: "#f5a623",
+                color: "#fff",
+                fontSize: 12
+              },
+              // 叠一层弹窗，公告条留在下面
+              action: {
+                type: "sequence",
+                actions: [
+                  { type: "track", event: "notice_click", params: { from: "button" } },
+                  { type: "open", view: "renew" }
+                ]
+              }
+            },
+            {
+              // × 有自己的动作，点它不会再冒泡去触发外层的「打开弹窗」
+              type: "text",
+              content: "\u2715",
+              style: {
+                alignSelf: "center",
+                width: 22,
+                height: 22,
+                textAlign: "center",
+                lineHeight: 22,
+                color: "#b08a3e",
+                fontSize: 13,
+                cursor: "pointer"
+              },
+              action: {
+                type: "sequence",
+                actions: [
+                  { type: "call", name: "setNeverRemind" },
+                  { type: "close", reason: "user-dismiss" }
+                ]
+              }
+            }
+          ]
+        }
+      ]
+    },
+    renew: {
+      type: "popup",
+      stage: {
+        width: 400,
+        height: "auto",
+        layout: "flow",
+        mask: true,
+        maskClosable: true,
+        closeButton: { show: true, position: "top-right", offset: [12, 12] },
+        style: { radius: 14 },
+        onShow: { type: "track", event: "popup_show", params: { view: "renew" } },
+        onClose: {
+          type: "track",
+          event: "popup_close",
+          params: { view: "renew", reason: "{{ closeReason }}" }
+        }
+      },
+      nodes: [
+        {
+          type: "flex",
+          style: { direction: "column", padding: "26px 24px 22px", gap: 12 },
+          children: [
+            {
+              type: "text",
+              content: "\u7EED\u8D39\u65B9\u6848",
+              style: {
+                fontSize: 18,
+                fontWeight: "800",
+                color: "#1f2533",
+                textAlign: "center"
+              }
+            },
+            {
+              type: "tabs",
+              bind: "plans",
+              labelField: "name",
+              stateKey: "plan",
+              style: { gap: 8 },
+              itemStyle: {
+                flex: "1",
+                height: 36,
+                radius: 18,
+                background: "#f2f4f7",
+                color: "#68727f",
+                fontSize: 13
+              },
+              activeItemStyle: {
+                background: "#ff4433",
+                color: "#ffffff",
+                fontWeight: "700"
+              }
+            },
+            {
+              type: "text",
+              content: "{{ current.price }}",
+              style: {
+                fontSize: 30,
+                fontWeight: "800",
+                color: "#ff4433",
+                textAlign: "center"
+              }
+            },
+            {
+              type: "flex",
+              style: {
+                justify: "center",
+                align: "center",
+                height: 46,
+                radius: 23,
+                background: "#ff4433",
+                cursor: "pointer"
+              },
+              action: {
+                type: "sequence",
+                actions: [
+                  {
+                    type: "track",
+                    event: "notice_order_click",
+                    params: { plan: "{{ current.key }}" }
+                  },
+                  { type: "navigate", url: "{{ current.url }}" }
+                ]
+              },
+              children: [
+                {
+                  type: "text",
+                  content: "\u7ACB\u5373\u7EED\u8D39 {{ current.name }}",
+                  style: { fontSize: 15, fontWeight: "700", color: "#ffffff" }
+                }
+              ]
+            },
+            // 只关掉这一层，公告条还在
+            textBtn("\u4EE5\u540E\u518D\u8BF4", { type: "close" }, { textAlign: "center" })
+          ]
+        }
+      ]
+    }
+  }
+};
+var confirmAndSwitch = {
+  version: 1,
+  meta: { name: "\u4E0D\u518D\u63D0\u9192\u4E8C\u6B21\u786E\u8BA4 + \u80FD\u529B\u6E05\u5355\u6362\u5C4F\uFF08\u591A\u89C6\u56FE\uFF09" },
+  entry: "main",
+  data: {
+    features: [
+      { b: "\u591A\u94FE\u63A5\u6279\u91CF\u642C\u5BB6", t: "\u4E00\u6B21\u642C\u6574\u6279\uFF0C\u4E0D\u7528\u9010\u4E2A\u6765" },
+      { b: "\u66F4\u591A\u642C\u5BB6\u989D\u5EA6", t: "\u653E\u5F00\u624B\u642C\uFF0C\u989D\u5EA6\u4E0D\u5361\u8116\u5B50" },
+      { b: "AI \u7206\u6B3E\u88C2\u53D8", t: "\u4E00\u6B3E\u53D8\u591A\u6B3E\uFF0C\u6D4B\u7206\u54C1 \xB7 \u4E13\u4E1A\u7248\u8D77" }
+    ]
+  },
+  state: {},
+  views: {
+    main: {
+      type: "popup",
+      stage: {
+        width: 400,
+        height: "auto",
+        layout: "flow",
+        mask: true,
+        maskClosable: false,
+        closeButton: { show: true, position: "top-right", offset: [12, 12] },
+        style: { radius: 14 }
+      },
+      nodes: [
+        {
+          type: "flex",
+          style: { direction: "column", padding: "26px 24px 20px", gap: 14 },
+          children: [
+            {
+              type: "text",
+              content: "\u8BD5\u7528\u8FD8\u5269 {{ user.trialLeftDays }} \u5929",
+              style: {
+                fontSize: 19,
+                fontWeight: "800",
+                color: "#1f2533",
+                textAlign: "center"
+              }
+            },
+            {
+              type: "text",
+              content: "\u5230\u671F\u540E\u6279\u91CF\u642C\u5BB6\u3001\u81EA\u52A8\u7ECF\u8425\u4EFB\u52A1\u90FD\u4F1A\u505C\u6B62",
+              style: {
+                fontSize: 13,
+                color: "#68727f",
+                textAlign: "center",
+                lineHeight: 1.6
+              }
+            },
+            {
+              type: "flex",
+              style: {
+                justify: "center",
+                align: "center",
+                height: 46,
+                radius: 23,
+                background: "#ff4433",
+                cursor: "pointer"
+              },
+              action: {
+                type: "sequence",
+                actions: [
+                  { type: "track", event: "popup_order_click" },
+                  { type: "navigate", url: "https://maibaole.example.com/order" }
+                ]
+              },
+              children: [
+                {
+                  type: "text",
+                  content: "\u7ACB\u5373\u5F00\u901A",
+                  style: { fontSize: 15, fontWeight: "700", color: "#ffffff" }
+                }
+              ]
+            },
+            {
+              type: "flex",
+              style: { justify: "space-between", align: "center", marginTop: 2 },
+              children: [
+                // 换屏：把当前层换成能力清单，栈深度不变
+                textBtn(
+                  "\u770B\u770B\u80FD\u89E3\u9501\u4EC0\u4E48 \u2192",
+                  { type: "open", view: "unlock", mode: "replace" },
+                  { color: "#409eff" }
+                ),
+                // 叠加：主弹窗留在后面，上面弹二次确认
+                textBtn("\u4E0D\u518D\u63D0\u9192", {
+                  type: "sequence",
+                  actions: [
+                    { type: "track", event: "popup_never_remind_click" },
+                    { type: "open", view: "confirm" }
+                  ]
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    unlock: {
+      type: "popup",
+      stage: {
+        width: 400,
+        height: "auto",
+        layout: "flow",
+        mask: true,
+        maskClosable: false,
+        style: { radius: 14 },
+        // replace 换屏时，被顶掉的那层也会收到 onClose，closeReason 是 'replace'
+        onShow: { type: "track", event: "popup_show", params: { view: "unlock" } },
+        onClose: {
+          type: "track",
+          event: "popup_close",
+          params: { view: "unlock", reason: "{{ closeReason }}" }
+        }
+      },
+      nodes: [
+        {
+          type: "flex",
+          style: { direction: "column", padding: "26px 24px 20px", gap: 12 },
+          children: [
+            {
+              type: "text",
+              content: "\u{1F513} \u4ED8\u8D39\u7248\u80FD\u89E3\u9501",
+              style: {
+                fontSize: 18,
+                fontWeight: "800",
+                color: "#1f2533",
+                textAlign: "center"
+              }
+            },
+            {
+              type: "repeat",
+              bind: "features",
+              style: {
+                direction: "column",
+                background: "#f1faf6",
+                radius: 12,
+                padding: "4px 13px"
+              },
+              template: {
+                type: "flex",
+                style: { align: "flex-start", gap: 10, padding: "9px 0" },
+                children: [
+                  {
+                    type: "text",
+                    content: "\u2713",
+                    style: {
+                      width: 19,
+                      height: 19,
+                      radius: "50%",
+                      background: "#00a870",
+                      color: "#ffffff",
+                      fontSize: 12,
+                      fontWeight: "900",
+                      lineHeight: 19,
+                      textAlign: "center"
+                    }
+                  },
+                  {
+                    type: "flex",
+                    style: { align: "baseline", flex: "1" },
+                    children: [
+                      {
+                        type: "text",
+                        content: "{{ item.b }}",
+                        style: { fontSize: 12.5, fontWeight: "700", color: "#1f2533" }
+                      },
+                      {
+                        type: "text",
+                        content: " \xB7 {{ item.t }}",
+                        style: { fontSize: 12.5, color: "#3f4656" }
+                      }
+                    ]
+                  }
+                ]
+              }
+            },
+            // 换回主屏
+            textBtn(
+              "\u2190 \u8FD4\u56DE",
+              { type: "open", view: "main", mode: "replace" },
+              { textAlign: "center", marginTop: 4 }
+            )
+          ]
+        }
+      ]
+    },
+    confirm: {
+      type: "popup",
+      stage: {
+        width: 320,
+        height: "auto",
+        layout: "flow",
+        // 二次确认自己不画遮罩也行，但保留一层浅遮罩能把下面压暗，层次更清楚
+        mask: true,
+        maskClosable: false,
+        style: { radius: 12 }
+      },
+      nodes: [
+        {
+          type: "flex",
+          style: { direction: "column", padding: "24px 22px 18px", gap: 10 },
+          children: [
+            {
+              type: "text",
+              content: "\u786E\u5B9A\u4E0D\u518D\u63D0\u9192\uFF1F",
+              style: {
+                fontSize: 16,
+                fontWeight: "800",
+                color: "#1f2533",
+                textAlign: "center"
+              }
+            },
+            {
+              type: "text",
+              content: "\u5173\u6389\u4E4B\u540E\uFF0C\u5230\u671F\u524D\u4E0D\u4F1A\u518D\u6536\u5230\u7EED\u8D39\u63D0\u9192",
+              style: {
+                fontSize: 12.5,
+                color: "#8a909c",
+                textAlign: "center",
+                lineHeight: 1.6
+              }
+            },
+            {
+              type: "flex",
+              style: { gap: 10, marginTop: 6 },
+              children: [
+                {
+                  type: "flex",
+                  style: {
+                    flex: "1",
+                    justify: "center",
+                    align: "center",
+                    height: 40,
+                    radius: 20,
+                    borderWidth: 1,
+                    borderStyle: "solid",
+                    borderColor: "#dcdfe6",
+                    cursor: "pointer"
+                  },
+                  // 只关掉确认框，回到主弹窗
+                  action: { type: "close" },
+                  children: [
+                    {
+                      type: "text",
+                      content: "\u518D\u60F3\u60F3",
+                      style: { fontSize: 14, color: "#606266" }
+                    }
+                  ]
+                },
+                {
+                  type: "flex",
+                  style: {
+                    flex: "1",
+                    justify: "center",
+                    align: "center",
+                    height: 40,
+                    radius: 20,
+                    background: ORANGE3,
+                    cursor: "pointer"
+                  },
+                  // 确认后整个关掉，两层一起消失
+                  action: {
+                    type: "sequence",
+                    actions: [
+                      { type: "track", event: "popup_never_remind_confirm" },
+                      { type: "call", name: "setNeverRemind" },
+                      { type: "closeAll" }
+                    ]
+                  },
+                  children: [
+                    {
+                      type: "text",
+                      content: "\u786E\u5B9A",
+                      style: { fontSize: 14, fontWeight: "700", color: "#ffffff" }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+};
+
+// src/docs/examples/tab-theme.ts
+var plans = [
+  {
+    key: "year",
+    label: "\u5305\u5E74",
+    theme: "#7B3FF2",
+    stageBg: "linear-gradient(160deg, #2b1055 0%, #7597de 100%)",
+    cardBg: "rgba(255,255,255,0.94)",
+    price: "\xA5899",
+    unit: "/\u5E74",
+    tip: "\u6298\u5408\u6BCF\u5929 2.4 \u5143\uFF0C\u6BD4\u5305\u6708\u7701 289 \u5143",
+    // 包年主推「权益格子」，两列铺开
+    mode: "grid",
+    cells: [
+      { title: "\u65E0\u9650\u91C7\u96C6", desc: "\u4E0D\u9650\u6761\u6570" },
+      { title: "\u667A\u80FD\u6539\u56FE", desc: "\u6BCF\u6708 5000 \u5F20" },
+      { title: "\u4E00\u952E\u94FA\u8D27", desc: "\u5168\u5E73\u53F0" },
+      { title: "\u4E13\u5C5E\u5BA2\u670D", desc: "7\xD712 \u5C0F\u65F6" }
+    ]
+  },
+  {
+    key: "month",
+    label: "\u5305\u6708",
+    theme: "#FF6B35",
+    stageBg: "linear-gradient(160deg, #3a1c0c 0%, #ff9a3c 100%)",
+    cardBg: "rgba(255,255,255,0.94)",
+    price: "\xA599",
+    unit: "/\u6708",
+    tip: "\u968F\u65F6\u53EF\u505C\uFF0C\u9002\u5408\u5148\u8BD5\u4E00\u4E2A\u6708",
+    // 包月条目少，改成竖排清单更清楚
+    mode: "list",
+    rows: [
+      { title: "\u91C7\u96C6 3000 \u6761/\u6708", tag: "\u591F\u7528" },
+      { title: "\u6539\u56FE 500 \u5F20/\u6708", tag: "" },
+      { title: "\u4E00\u952E\u94FA\u8D27", tag: "" }
+    ]
+  }
+];
+var tabTheme = {
+  version: 1,
+  type: "popup",
+  meta: { name: "\u5207 tab \u6362\u80A4\u6362\u5E03\u5C40" },
+  data: { plans },
+  state: { tab: 0 },
+  // cur 始终指向当前选中的那一档，下面所有 {{ cur.xxx }} 都随 tab 自动变
+  derived: { cur: { list: "plans", indexBy: "tab" } },
+  stage: {
+    width: 420,
+    height: "auto",
+    layout: "flow",
+    mask: true,
+    maskClosable: true,
+    closeButton: {
+      show: true,
+      position: "top-right",
+      offset: [-12, 12],
+      size: 28,
+      icon: "\u2715",
+      style: { color: "rgba(255,255,255,0.85)", fontSize: 16 }
+    },
+    // 弹窗本体的背景跟着 tab 换
+    style: { radius: 16, background: "{{ cur.stageBg }}", padding: 22 },
+    // 曝光时记下默认停在哪一档，关闭时记下用户最后看的是哪一档、怎么走的
+    onShow: {
+      type: "track",
+      event: "popup_show",
+      params: { popup: "tab_theme", plan: "{{ cur.key }}" }
+    },
+    onClose: {
+      type: "track",
+      event: "popup_close",
+      params: { popup: "tab_theme", plan: "{{ cur.key }}", reason: "{{ closeReason }}" }
+    }
+  },
+  nodes: [
+    {
+      type: "tabs",
+      bind: "plans",
+      labelField: "label",
+      stateKey: "tab",
+      style: { direction: "row", gap: 8 },
+      itemStyle: {
+        padding: "8px 20px",
+        radius: 999,
+        background: "rgba(255,255,255,0.16)",
+        color: "rgba(255,255,255,0.85)",
+        fontSize: 14,
+        cursor: "pointer"
+      },
+      // 选中态的文字色也取当前主题色
+      activeItemStyle: {
+        background: "#ffffff",
+        color: "{{ cur.theme }}",
+        fontWeight: "bold"
+      }
+    },
+    // 价格行：不同字号靠多个 text 节点 + baseline 对齐拼出来，不需要富文本
+    {
+      type: "flex",
+      style: { direction: "row", align: "baseline", gap: 4, marginTop: 18 },
+      children: [
+        {
+          type: "text",
+          content: "{{ cur.price }}",
+          style: { color: "#ffffff", fontSize: 34, fontWeight: "bold" }
+        },
+        {
+          type: "text",
+          content: "{{ cur.unit }}",
+          style: { color: "rgba(255,255,255,0.8)", fontSize: 14 }
+        }
+      ]
+    },
+    {
+      type: "text",
+      content: "{{ cur.tip }}",
+      style: { marginTop: 6, color: "rgba(255,255,255,0.75)", fontSize: 13 }
+    },
+    // ——— 排版分支 A：两列格子（包年） ———
+    {
+      type: "repeat",
+      visibleWhen: "cur.mode == 'grid'",
+      bind: "cur.cells",
+      style: { direction: "row", wrap: true, gap: 10, marginTop: 16 },
+      template: {
+        type: "flex",
+        style: {
+          direction: "column",
+          gap: 4,
+          width: "calc(50% - 5px)",
+          background: "{{ cur.cardBg }}",
+          radius: 10,
+          padding: 12
+        },
+        children: [
+          {
+            type: "text",
+            content: "{{ item.title }}",
+            style: { color: "{{ cur.theme }}", fontSize: 14, fontWeight: "bold" }
+          },
+          {
+            type: "text",
+            content: "{{ item.desc }}",
+            style: { color: "#8a8f99", fontSize: 12 }
+          }
+        ]
+      }
+    },
+    // ——— 排版分支 B：竖排清单（包月） ———
+    {
+      type: "repeat",
+      visibleWhen: "cur.mode == 'list'",
+      bind: "cur.rows",
+      style: { direction: "column", gap: 8, marginTop: 16 },
+      template: {
+        type: "flex",
+        style: {
+          direction: "row",
+          align: "center",
+          gap: 8,
+          background: "{{ cur.cardBg }}",
+          radius: 8,
+          padding: "10px 12px"
+        },
+        children: [
+          {
+            type: "text",
+            content: "{{ item.title }}",
+            style: { flex: "1", color: "#2c3038", fontSize: 14 }
+          },
+          {
+            type: "text",
+            content: "{{ item.tag }}",
+            visibleWhen: "item.tag != ''",
+            style: {
+              alignSelf: "center",
+              padding: "2px 8px",
+              radius: 999,
+              background: "{{ cur.theme }}",
+              color: "#ffffff",
+              fontSize: 11
+            }
+          }
+        ]
+      }
+    },
+    {
+      type: "button",
+      text: "\u7ACB\u5373\u5F00\u901A {{ cur.label }}",
+      style: {
+        marginTop: 18,
+        width: "100%",
+        height: 46,
+        radius: 10,
+        background: "{{ cur.theme }}",
+        color: "#ffffff",
+        fontSize: 16,
+        fontWeight: "bold",
+        cursor: "pointer"
+      },
+      action: {
+        type: "sequence",
+        actions: [
+          { type: "track", event: "popup_click", params: { area: "cta" } },
+          {
+            type: "navigate",
+            url: "https://maibaole.example.com/renew",
+            target: "_blank"
+          }
+        ]
+      }
+    }
+  ]
+};
+var tab_theme_default = tabTheme;
+
+// src/docs/examples/image-banner.ts
+var RATIO = "1200 / 300";
+var imageBanner = {
+  version: 1,
+  type: "banner",
+  meta: { name: "\u6574\u56FE Banner\uFF08\u5BBD\u5EA6\u81EA\u9002\u5E94 + \u70ED\u533A\uFF09" },
+  stage: {
+    width: "100%",
+    height: "auto",
+    layout: "flow",
+    style: { radius: 8, maxWidth: 1200, overflow: "hidden" },
+    onShow: { type: "track", event: "banner_show", params: { banner: "autumn" } },
+    onClose: {
+      type: "track",
+      event: "banner_dismiss",
+      params: { banner: "autumn", reason: "{{ closeReason }}" }
+    }
+  },
+  nodes: [
+    {
+      // 热区的定位容器：宽度铺满，高度由 aspectRatio 算
+      type: "box",
+      style: { width: "100%", aspectRatio: RATIO },
+      children: [
+        {
+          type: "image",
+          rect: [0, 0, "100%", "100%"],
+          src: "https://picsum.photos/id/1039/1200/300",
+          style: { objectFit: "cover" }
+        },
+        {
+          // 左半边：主标题区，点了看活动详情
+          type: "box",
+          rect: ["4%", "20%", "40%", "46%"],
+          style: { radius: 8, background: "rgba(255,68,51,0.16)", cursor: "pointer" },
+          action: {
+            type: "sequence",
+            actions: [
+              { type: "track", event: "banner_click", params: { area: "title" } },
+              {
+                type: "navigate",
+                url: "https://maibaole.example.com/autumn",
+                target: "_blank"
+              }
+            ]
+          }
+        },
+        {
+          // 右侧按钮：直接去下单
+          type: "box",
+          rect: ["70%", "58%", "22%", "24%"],
+          style: { radius: 999, background: "rgba(255,68,51,0.16)", cursor: "pointer" },
+          action: {
+            type: "sequence",
+            actions: [
+              { type: "track", event: "banner_click", params: { area: "cta" } },
+              {
+                type: "navigate",
+                url: "https://maibaole.example.com/order",
+                target: "_blank"
+              }
+            ]
+          }
+        },
+        {
+          // 关闭放在图上角落，同样用百分比，缩放时不会跑位
+          type: "text",
+          content: "\u2715",
+          rect: ["95%", "6%", 22, 22],
+          style: {
+            textAlign: "center",
+            lineHeight: 22,
+            radius: 11,
+            background: "rgba(0,0,0,0.35)",
+            color: "#fff",
+            fontSize: 13,
+            cursor: "pointer"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              { type: "call", name: "setNeverRemind" },
+              { type: "close", reason: "user-dismiss" }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+};
+var image_banner_default = imageBanner;
+
+// 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: [
+          { type: "track", event: "popup_click", params: { area: "rule" } },
+          {
+            type: "navigate",
+            url: "https://maibaole.example.com/rule",
+            target: "_blank"
+          }
+        ]
+      }
+    },
+    {
+      id: "hotspot-plan-a",
+      type: "box",
+      // 中部左半：套餐 A
+      rect: ["8%", 300, "40%", 96],
+      style: { radius: 10, background: HOTSPOT_BG, cursor: "pointer" },
+      action: {
+        type: "sequence",
+        actions: [
+          { type: "track", event: "popup_click", params: { area: "plan_a" } },
+          {
+            type: "navigate",
+            url: "https://maibaole.example.com/renew?plan=a",
+            target: "_blank"
+          }
+        ]
+      }
+    },
+    {
+      id: "hotspot-plan-b",
+      type: "box",
+      // 中部右半：套餐 B，和 A 并排但各自独立
+      rect: ["52%", 300, "40%", 96],
+      style: { radius: 10, background: HOTSPOT_BG, cursor: "pointer" },
+      action: {
+        type: "sequence",
+        actions: [
+          { type: "track", event: "popup_click", params: { area: "plan_b" } },
+          {
+            type: "navigate",
+            url: "https://maibaole.example.com/renew?plan=b",
+            target: "_blank"
+          }
+        ]
+      }
+    },
+    {
+      id: "hotspot-cta",
+      type: "box",
+      // 底部主按钮
+      rect: ["12%", 420, "76%", 48],
+      style: { radius: 24, background: HOTSPOT_BG, cursor: "pointer" },
+      action: {
+        type: "sequence",
+        actions: [
+          { type: "track", event: "popup_click", params: { area: "cta" } },
+          {
+            type: "navigate",
+            url: "https://maibaole.example.com/renew",
+            target: "_blank"
+          }
+        ]
+      }
+    },
+    {
+      id: "hotspot-never",
+      type: "box",
+      // 最底部「不再提醒」，动作是关弹窗而不是跳转
+      rect: ["30%", 478, "40%", 26],
+      style: { radius: 13, background: HOTSPOT_BG, cursor: "pointer" },
+      action: {
+        type: "sequence",
+        actions: [
+          { type: "call", name: "setNeverRemind" },
+          { type: "close", reason: "never-remind" }
+        ]
+      }
+    }
+  ]
+};
+var noticeBar = {
+  version: 1,
+  type: "notice",
+  meta: { name: "\u6587\u5B57\u516C\u544A\u6761\uFF08\u94FA\u6EE1\u7236\u5BBD\uFF09" },
+  stage: {
+    width: "100%",
+    height: "auto",
+    layout: "flow",
+    style: { radius: 6, background: "#fff8e6", maxWidth: 1200 },
+    onShow: { type: "track", event: "notice_show", params: { notice: "guide" } },
+    onClose: {
+      type: "track",
+      event: "notice_dismiss",
+      params: { notice: "guide", reason: "{{ closeReason }}" }
+    }
+  },
+  nodes: [
+    {
+      type: "flex",
+      style: { align: "center", gap: 10, padding: "10px 14px" },
+      children: [
+        {
+          // 公告条里的图片就是一个普通 image 节点，不用 rect，靠 style 定尺寸。
+          // 换成 emoji、图标、活动小图都行。
+          type: "image",
+          src: "https://picsum.photos/id/1062/64/64",
+          style: {
+            alignSelf: "center",
+            width: 22,
+            height: 22,
+            radius: 4,
+            objectFit: "cover"
+          }
+        },
+        {
+          // flex: 1 吃掉剩余宽度，文字多了自动换行、公告条跟着变高
+          type: "text",
+          content: "{{ user.shopName }}\uFF0C\u5546\u54C1\u6279\u91CF\u7BA1\u7406\u529F\u80FD\u5DF2\u5347\u7EA7\uFF0C\u70B9\u51FB\u67E5\u770B\u4F7F\u7528\u6307\u5357",
+          style: { flex: "1", fontSize: 14, color: "#8a6212", lineHeight: 1.5 }
+        },
+        {
+          type: "button",
+          text: "\u67E5\u770B",
+          style: {
+            width: 64,
+            height: 26,
+            radius: 13,
+            background: "#f5a623",
+            color: "#fff",
+            fontSize: 12
+          },
+          action: { type: "navigate", url: "https://maibaole.example.com/guide" }
+        },
+        {
+          // 公告条的关闭：排在行内当一个普通节点，比用 stage.closeButton 更自然。
+          // close 只是通知宿主「用户关掉了」，关掉之后要不要再出、隔多久再出，
+          // 由宿主决定（一般配合 call 记一条「今日不再显示」）。
+          type: "text",
+          content: "\u2715",
+          style: {
+            alignSelf: "center",
+            width: 22,
+            height: 22,
+            textAlign: "center",
+            lineHeight: 22,
+            radius: 11,
+            color: "#b08a3e",
+            fontSize: 13,
+            cursor: "pointer"
+          },
+          action: {
+            type: "sequence",
+            actions: [
+              { type: "track", event: "notice_close", params: { notice: "guide" } },
+              { type: "call", name: "setNeverRemind" },
+              { type: "close", reason: "user-dismiss" }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+};
+var examples = [
+  { label: "\u2460 \u6574\u56FE\u70ED\u533A\u5F39\u7A97", value: "imageHotspot", dsl: imageHotspot },
+  { label: "\u2461 \u6587\u5B57\u516C\u544A\u6761", value: "noticeBar", dsl: noticeBar },
+  {
+    label: "\u2462 \u590D\u523B\u8FD0\u8425 demo \xB7 \u5230\u671F\u4E13\u4EAB\uFF08\u540E\u7AEF\u6570\u636E\u6E90\uFF09",
+    value: "renewExpire",
+    dsl: renew_expire_default
+  },
+  { label: "\u2463 \u590D\u523B\u8FD0\u8425 demo \xB7 \u5269 1 \u5929\uFF08\u5398\u79D2\u5012\u8BA1\u65F6\uFF09", value: "lastDay", dsl: last_day_default },
+  { label: "\u2464 \u591A\u89C6\u56FE \xB7 \u516C\u544A\u6761\u70B9\u51FB\u5F39\u51FA\u5F39\u7A97", value: "noticeToPopup", dsl: noticeToPopup },
+  {
+    label: "\u2465 \u591A\u89C6\u56FE \xB7 \u4E8C\u6B21\u786E\u8BA4 + \u80FD\u529B\u6E05\u5355\u6362\u5C4F",
+    value: "confirmAndSwitch",
+    dsl: confirmAndSwitch
+  },
+  { label: "\u2466 \u5207 tab \u6362\u80A4\u6362\u5E03\u5C40", value: "tabTheme", dsl: tab_theme_default },
+  { label: "\u2467 \u6574\u56FE Banner\uFF08\u5BBD\u5EA6\u81EA\u9002\u5E94 + \u70ED\u533A\uFF09", value: "imageBanner", dsl: image_banner_default }
+];
+var examples_default = examples;
+
+// src/docs/to-markdown.ts
+var cell = (text) => String(text).replace(/\|/g, "\\|").replace(/\n/g, " ");
+var NOTE_LABEL = {
+  danger: "\u6CE8\u610F",
+  warn: "\u63D0\u9192",
+  info: "\u8BF4\u660E"
+};
+function blockToMarkdown(block) {
+  switch (block.t) {
+    case "h3":
+      return `### ${block.text}`;
+    case "p":
+      return block.text;
+    case "list":
+      return block.items.map((item) => `- ${item}`).join("\n");
+    case "code":
+      return "```jsonc\n" + block.code + "\n```";
+    case "note":
+      return `> **${NOTE_LABEL[block.tone || "info"]}**\uFF1A${block.text}`;
+    case "table": {
+      const head = `| ${block.head.map(cell).join(" | ")} |`;
+      const split = `| ${block.head.map(() => "---").join(" | ")} |`;
+      const rows = block.rows.map((row) => `| ${row.map(cell).join(" | ")} |`);
+      return [head, split].concat(rows).join("\n");
+    }
+    default:
+      return "";
+  }
+}
+function toMarkdown(sections10, meta2) {
+  const lines = [
+    "# \u8425\u9500\u5185\u5BB9 DSL \xB7 \u5F00\u53D1\u6587\u6863",
+    "",
+    `- \u66F4\u65B0\u65E5\u671F\uFF1A**${meta2.updatedAt}**`,
+    `- \u5BF9\u5E94 DSL \`version\`\uFF1A**${meta2.dslVersion}**`,
+    "",
+    "> \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) => {
+    lines.push(`## ${section.title}`, "");
+    section.blocks.forEach((block) => {
+      const text = blockToMarkdown(block);
+      if (text) lines.push(text, "");
+    });
+  });
+  lines.push("## \u9644\u5F55\uFF1A\u6587\u6863\u53D8\u66F4\u8BB0\u5F55", "");
+  meta2.changelog.forEach((entry) => {
+    lines.push(`### ${entry.date}`, "");
+    entry.items.forEach((item) => lines.push(`- ${item}`));
+    lines.push("");
+  });
+  return lines.join("\n");
+}
+
+// src/docs/ai-prompt/basics.ts
+function roleSection() {
+  return `# \u89D2\u8272
+
+\u4F60\u662F\u300C\u9EA6\u7206\u4E86\u300D\u8425\u9500\u5F39\u7A97\u914D\u7F6E\u52A9\u624B\u3002\u7528\u6237\u7528\u4E2D\u6587\u63CF\u8FF0\u60F3\u8981\u7684\u5F39\u7A97 / Banner / \u516C\u544A\u6761\uFF0C
+\u4F60\u8F93\u51FA\u4E00\u6BB5\u7B26\u5408\u4E0B\u9762\u89C4\u8303\u7684 JSON \u914D\u7F6E\u3002
+
+\u63D0\u793A\u8BCD\u66F4\u65B0\u65E5\u671F\uFF1A${meta_default.updatedAt} \xB7 DSL version\uFF1A${DSL_VERSION}
+
+# \u8F93\u51FA\u8981\u6C42\uFF08\u5FC5\u987B\u9075\u5B88\uFF09
+
+1. \u53EA\u8F93\u51FA**\u4E00\u4E2A** JSON \u4EE3\u7801\u5757\uFF0C\u524D\u540E\u4E0D\u8981\u4EFB\u4F55\u89E3\u91CA\u3001\u5BD2\u6684\u3001\u603B\u7ED3\u3002
+2. \u7528\u6237\u9700\u6C42\u4E0D\u6E05\u695A\u65F6\uFF0C\u5148\u63D0\u95EE\uFF0C\u4E0D\u8981\u778E\u731C\u5C3A\u5BF8\u548C\u6587\u6848\u3002
+3. \`version\` \u56FA\u5B9A\u4E3A ${DSL_VERSION}\u3002
+4. **\u7EDD\u5BF9\u7981\u6B62**\u8F93\u51FA\u4EFB\u4F55 JavaScript \u4EE3\u7801\u3001\u51FD\u6570\u8C03\u7528\u3001\`javascript:\` \u94FE\u63A5\u3001\`<script>\`\u3001\u4E8B\u4EF6\u5904\u7406\u5668\u3002
+   \u8FD9\u5957\u914D\u7F6E\u662F\u7EAF\u6570\u636E\uFF0C\u5199\u8FDB\u53BB\u4E5F\u4E0D\u4F1A\u6267\u884C\uFF0C\u53EA\u4F1A\u88AB\u62E6\u4E0B\u3002
+5. \`style\` \u53EA\u80FD\u7528\u767D\u540D\u5355\u91CC\u7684\u5C5E\u6027\uFF0C\u5199\u522B\u7684\u4F1A\u88AB\u4E22\u5F03\u3002
+6. \u57CB\u70B9\u4E8B\u4EF6\u540D\u5FC5\u987B\u7B26\u5408\u547D\u540D\u89C4\u8303\uFF08\u89C1\u300C\u52A8\u4F5C\u300D\u4E00\u8282\uFF09\uFF0C\u5199\u9519\u4F1A\u5728\u4FDD\u5B58\u65F6\u76F4\u63A5\u62A5\u9519\u3002
+7. \u56FE\u7247\u548C\u8DF3\u8F6C\u94FE\u63A5\u5982\u679C\u7528\u6237\u6CA1\u7ED9\uFF0C\u7528 \`https://\` \u5F00\u5934\u7684\u5360\u4F4D\u5730\u5740\uFF0C\u5E76\u5728\u4EE3\u7801\u5757\u4E4B\u540E\u5355\u72EC\u63D0\u9192\u7528\u6237\u66FF\u6362\u3002`;
+}
+function structureSection() {
+  return `# \u9876\u5C42\u7ED3\u6784
+
+\`\`\`jsonc
+{
+  "version": ${DSL_VERSION},
+  "type": "popup",            // popup \u5F39\u7A97 | banner | notice \u516C\u544A\u6761
+  "meta": { "name": "\u5907\u6CE8" },
+  "stage": { ... },           // \u821E\u53F0\uFF1A\u5C3A\u5BF8\u3001\u906E\u7F69\u3001\u5173\u95ED\u6309\u94AE
+  "data":  { ... },           // \u6570\u636E\uFF08\u53EF\u9009\uFF09
+  "state": { ... },           // \u5C40\u90E8\u72B6\u6001\uFF0C\u5982\u5F53\u524D\u9009\u4E2D\u7B2C\u51E0\u4E2A\uFF08\u53EF\u9009\uFF09
+  "derived": { ... },         // \u7531 data + state \u63A8\u5BFC\u7684\u522B\u540D\uFF08\u53EF\u9009\uFF09
+  "nodes": [ ... ]            // \u8282\u70B9\u6811
+}
+\`\`\`
+
+# stage
+
+\`\`\`jsonc
+"stage": {
+  "width": 520,               // \u6570\u5B57=px\uFF0C\u4E5F\u53EF "100%" / "calc(100% - 48px)"
+  "height": "auto",           // \u6570\u5B57=px\uFF0C\u6216 "auto"
+  "layout": "flow",           // "absolute" \u6216 "flow"\uFF0C\u89C1\u4E0B\u9762\u300C\u5E03\u5C40\u300D
+  "mask": true,
+  "maskClosable": false,
+  "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": { "radius": 18, "maxWidth": 420 }
+}
+\`\`\`
+
+**\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
+\`"icon": "\u2715"\` \u6362\u6210\u522B\u7684\u6587\u672C\u5B57\u7B26 / emoji\uFF0C\`"image": "https://..."\` \u6362\u6210\u56FE\u7247\u3002
+\u4E09\u8005\u4F18\u5148\u7EA7\uFF1A\`image\` > \`icon\` > \u5185\u7F6E\u77E2\u91CF\u56FE\u6807\u3002`;
+}
+function layoutSection() {
+  return `# \u5E03\u5C40\uFF08\u6700\u5BB9\u6613\u9519\uFF0C\u52A1\u5FC5\u770B\u61C2\uFF09
+
+\u53EA\u6709\u4E24\u79CD\u6392\u5E03\u65B9\u5F0F\uFF1A
+
+| \u65B9\u5F0F | \u51FA\u73B0\u5728\u54EA | \u5B50\u8282\u70B9\u600E\u4E48\u5B9A\u4F4D |
+| --- | --- | --- |
+| \u7EDD\u5BF9\u5B9A\u4F4D | \`box\` \u7684 children\uFF1B\`stage.layout: "absolute"\` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9 | **\u5FC5\u987B**\u5199 \`rect: [x, y, w, h]\` |
+| \u6D41\u5F0F | \`flex\` / \`repeat\` / \`countdown\` \u7684 children\uFF1B\`stage.layout: "flow"\` \u65F6 stage \u7684\u76F4\u63A5\u5B50\u8282\u70B9 | \`rect\` \u65E0\u6548\uFF0C\u7528 \`style\` \u7684 width/height/flex/padding/gap |
+
+\u9009\u62E9\u89C4\u5219\uFF1A
+
+- \u4E0A\u4E0B\u51E0\u4E2A\u533A\u5757\u4F9D\u6B21\u6392\uFF08**\u7EDD\u5927\u591A\u6570\u771F\u5B9E\u5F39\u7A97**\uFF09\u2192 \`layout: "flow"\` + \`height: "auto"\`\uFF0C\u6BCF\u4E2A\u533A\u5757\u662F\u4E00\u4E2A \`flex\` \u8282\u70B9
+- \u6574\u5F20\u8BBE\u8BA1\u56FE + \u51E0\u4E2A\u70ED\u533A \u2192 \`layout: "absolute"\` + \`height\` \u7ED9\u5177\u4F53\u6570\u503C
+- \u516C\u544A\u6761 / Banner \u2192 \`layout: "flow"\` + \`width: "100%"\` + \`height: "auto"\`
+
+**\`height: "auto"\` \u5FC5\u987B\u914D \`layout: "flow"\`**\uFF0C\u5426\u5219\u9AD8\u5EA6\u4F1A\u584C\u6210 0\u3002
+
+## \u6574\u56FE Banner + \u70ED\u533A\uFF1A\u5BB9\u5668\u5FC5\u987B\u5199 aspectRatio
+
+Banner \u5BBD\u5EA6\u662F\u767E\u5206\u6BD4\u3001\u9AD8\u5EA6\u5F97\u6309\u56FE\u7247\u6BD4\u4F8B\u7B97\u3002\u70ED\u533A\u5BB9\u5668 \`box\` \u7684\u5B50\u8282\u70B9\u662F\u7EDD\u5BF9\u5B9A\u4F4D\u7684\uFF0C\u6491\u4E0D\u8D77 \`box\` \u7684\u9AD8\u5EA6\u2014\u2014\`box\` \u9AD8\u5EA6\u662F 0\uFF0C\u70ED\u533A\u7684\u767E\u5206\u6BD4 \`rect\` \u5168\u7B97\u6210 0\uFF0C\u6574\u7247\u70ED\u533A\u5931\u6548\u3002**\u4E0D\u8981\u5199\u6B7B height**\uFF0C\u90A3\u6837\u53EA\u5728\u67D0\u4E00\u4E2A\u5C4F\u5E55\u5BBD\u5EA6\u4E0B\u5BF9\u5F97\u4E0A\uFF1A
+
+\`\`\`jsonc
+// \u8BBE\u8BA1\u7A3F 1200 \xD7 300
+{ "type": "box",
+  "style": { "width": "100%", "aspectRatio": "1200 / 300" },
+  "children": [
+    { "type": "image", "rect": [0, 0, "100%", "100%"], "src": "..." },
+    { "type": "box", "rect": ["70%", "58%", "22%", "24%"], "action": {...} }
+  ] }
+\`\`\`
+
+\u56FE\u7247\u4E0D\u662F\u5F39\u7A97\u4E13\u5C5E\uFF1A\u516C\u544A\u6761\u91CC\u653E\u5C0F\u56FE\u6807\uFF08\`image\` \u8282\u70B9 + \`style\` \u5B9A\u5BBD\u9AD8\uFF0C\u4E0D\u7528 \`rect\`\uFF09\u3001Banner \u6574\u56FE\u6253\u5E95\uFF0C\u5199\u6CD5\u90FD\u4E00\u6837\u3002`;
+}
+
+// src/docs/ai-prompt/checklist.ts
+function checklistSection() {
+  return `# \u8F93\u51FA\u524D\u81EA\u68C0
+
+- [ ] \`version\` \u662F ${DSL_VERSION}
+- [ ] \`stage.height\` \u662F \`"auto"\` \u7684\u8BDD\uFF0C\`stage.layout\` \u5FC5\u987B\u662F \`"flow"\`
+- [ ] \u7EDD\u5BF9\u5B9A\u4F4D\u5BB9\u5668\uFF08\`box\`\u3001\u6216 \`layout: "absolute"\` \u7684 stage\uFF09\u91CC\u6BCF\u4E2A\u5B50\u8282\u70B9\u90FD\u6709 \`rect\`
+- [ ] \u6D41\u5F0F\u5BB9\u5668\u91CC\u7684\u5B50\u8282\u70B9\u6CA1\u6709\u591A\u4F59\u7684 \`rect\`
+- [ ] \u6240\u6709 \`style\` \u7684\u5C5E\u6027\u540D\u90FD\u5728\u767D\u540D\u5355\u91CC
+- [ ] \u6CA1\u6709\u4EFB\u4F55 JS \u4EE3\u7801\u3001\`javascript:\` \u94FE\u63A5\u3001\u51FD\u6570\u8C03\u7528
+- [ ] \`derived.list\` \u6307\u5411\u7684\u5B57\u6BB5\u5728 \`data\` \u91CC\u771F\u5B9E\u5B58\u5728\uFF0C\`derived.indexBy\` \u5728 \`state\` \u91CC\u5B58\u5728
+- [ ] \u7528\u4E86 \`views\` \u7684\u8BDD\uFF1A\`entry\` \u5B58\u5728\u4E8E \`views\`\uFF0C\u9876\u5C42\u6CA1\u6709\u6B8B\u7559 \`stage\`/\`nodes\`\uFF0C\u6240\u6709 \`open\` \u7684 \`view\` \u90FD\u80FD\u5BF9\u4E0A
+- [ ] \`repeat.bind\` \u6307\u5411\u7684\u662F\u6570\u7EC4
+- [ ] \u6BCF\u4E2A\u53EF\u70B9\u51FB\u5143\u7D20\u90FD\u6709 \`action\`\uFF0C\u4E14\u5E26 \`track\` \u57CB\u70B9
+- [ ] **\u9010\u4E2A\u6838\u5BF9\u6BCF\u4E00\u4E2A \`track\` \u7684 \`event\`**\uFF1A\u5339\u914D \`${String(TRACK_EVENT_PATTERN.source)}\`\uFF0C
+      \u5373\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934 + \u53EA\u542B\u5C0F\u5199\u5B57\u6BCD/\u6570\u5B57/\u4E0B\u5212\u7EBF + \u957F\u5EA6 3~64\uFF0C\u63A8\u8350 \`\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C\`\uFF08\u5982 \`banner_renew_click\`\uFF09\u3002
+      \u6709\u4E00\u4E2A\u4E0D\u5408\u89C4\uFF0C\u6574\u4EFD\u914D\u7F6E\u5C31\u5B58\u4E0D\u4E0A
+- [ ] \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
+- [ ] \u8F93\u51FA\u7684\u662F\u5408\u6CD5 JSON\uFF08\u6CA1\u6709\u591A\u4F59\u9017\u53F7\u3001\u6CA1\u6709\u6CE8\u91CA\uFF09`;
+}
+function requirementSection() {
+  return `# \u7528\u6237\u9700\u6C42
+
+\u628A\u4F60\u7684\u9700\u6C42\u5199\u5728\u4E0B\u9762\uFF0C\u8D8A\u5177\u4F53\u8D8A\u597D\u3002\u5EFA\u8BAE\u8BF4\u6E05\u695A\uFF1A
+
+- \u4EC0\u4E48\u573A\u666F\uFF08\u7EED\u8D39\u63D0\u9192 / \u6D3B\u52A8\u63A8\u5E7F / \u529F\u80FD\u516C\u544A\u2026\uFF09
+- \u5F39\u7A97\u8FD8\u662F\u516C\u544A\u6761\uFF0C\u5927\u6982\u591A\u5927
+- \u8981\u5C55\u793A\u54EA\u4E9B\u5185\u5BB9\uFF08\u6807\u9898\u3001\u56FE\u3001\u4EF7\u683C\u6863\u4F4D\u3001\u5012\u8BA1\u65F6\u2026\uFF09
+- \u70B9\u4E86\u6309\u94AE\u53BB\u54EA\u4E2A\u94FE\u63A5
+- \u6709\u6CA1\u6709\u9700\u8981\u5207\u6362\u7684\u9009\u9879\uFF08\u6BD4\u5982\u9009\u4E0D\u540C\u5957\u9910\uFF09
+
+---
+
+\uFF08\u5728\u8FD9\u91CC\u5199\u4F60\u7684\u9700\u6C42\uFF09`;
+}
+
+// src/docs/ai-prompt/actions.ts
+function actionSection() {
+  return `# \u52A8\u4F5C
+
+\u53EF\u7528 type\uFF1A${ACTION_TYPES.join(" / ")}
+
+\`\`\`jsonc
+"action": {
+  "type": "sequence",
+  "actions": [
+    { "type": "track", "event": "popup_renew_click", "params": { "plan": "{{ current.key }}" } },
+    { "type": "navigate", "url": "{{ current.url }}", "target": "_blank" }
+  ]
+}
+\`\`\`
+
+- \`setState\`\uFF1A\`{ "type": "setState", "key": "period", "value": "{{ index }}" }\` \u505A\u9009\u4E2D\u5207\u6362
+- \`close\`\uFF1A\u5173\u6389\u5F53\u524D\u8FD9\u4E00\u5C42\uFF08\u53EA\u6709\u4E00\u5C42\u65F6\u5C31\u662F\u6574\u4F53\u5173\u95ED\uFF09\u3002\u6CE8\u610F\u5B83\u53EA\u662F**\u901A\u77E5\u5BBF\u4E3B\u9875\u9762**\u300C\u7528\u6237\u60F3\u5173\u4E86\u300D\uFF0C\u7531\u5BBF\u4E3B\u51B3\u5B9A\u5173\u4E0D\u5173\uFF1B\u591A\u89C6\u56FE\u65F6\u5173\u5185\u5C42\u4E0D\u4F1A\u901A\u77E5\u5BBF\u4E3B\uFF0C\u53EA\u662F\u56DE\u5230\u4E0B\u9762\u90A3\u5C42
+- \`closeAll\`\uFF1A\u51E0\u5C42\u90FD\u5173\u6389\uFF0C\u4E00\u5B9A\u4F1A\u901A\u77E5\u5BBF\u4E3B
+- \u60F3\u300C\u5173\u4E86\u5C31\u522B\u518D\u51FA\u73B0\u300D\uFF0C\u5149 \`close\` \u4E0D\u591F\uFF0C\u8981\u518D\u914D\u4E00\u6761 \`{ "type": "call", "name": "setNeverRemind" }\` \u8BA9\u5BBF\u4E3B\u8BB0\u4E0B\u6765
+- \`open\`\uFF1A\u6253\u5F00\u53E6\u4E00\u4E2A\u89C6\u56FE\uFF0C\u89C1\u4E0B\u4E00\u8282
+- \u4EFB\u4F55\u8282\u70B9\u52A0 \`action\` \u90FD\u80FD\u70B9\u51FB
+- **\u6BCF\u4E2A\u53EF\u70B9\u51FB\u5143\u7D20\u90FD\u5E94\u8BE5\u914D \`track\`**\uFF0C\u5426\u5219\u6CA1\u6709\u6570\u636E\u53EF\u770B
+
+## track \u7684\u4E8B\u4EF6\u540D\u6709\u786C\u6027\u683C\u5F0F\uFF08\u5199\u9519\u6574\u4EFD\u914D\u7F6E\u5B58\u4E0D\u4E0A\uFF09
+
+\`event\` \u5FC5\u987B\u5339\u914D \`${String(TRACK_EVENT_PATTERN.source)}\`\uFF1A**\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934**\uFF0C
+\u4E4B\u540E\u53EA\u80FD\u662F**\u5C0F\u5199\u5B57\u6BCD\u3001\u6570\u5B57\u3001\u4E0B\u5212\u7EBF**\uFF0C\u603B\u957F **3~64** \u4E2A\u5B57\u7B26\u3002
+
+\u8FD9\u662F **error \u7EA7\u6821\u9A8C\uFF0C\u4F1A\u76F4\u63A5\u963B\u65AD\u4FDD\u5B58**\uFF0C\u4E0D\u662F\u8B66\u544A\u3002\u4E2D\u6587\u3001\u9A7C\u5CF0\u3001\u4E2D\u5212\u7EBF\u3001\u7A7A\u683C\u5168\u90FD\u8FC7\u4E0D\u4E86\u3002
+\u8FD9\u6761\u662F AI \u751F\u6210\u7684\u914D\u7F6E\u6700\u5E38\u8E29\u7684\u5751\u2014\u2014\u6392\u7248\u5168\u5BF9\uFF0C\u5C31\u56E0\u4E3A\u4E8B\u4EF6\u540D\u5199\u6210 \`\u7EED\u8D39\u70B9\u51FB\` \u800C\u767D\u5E72\u4E00\u904D\u3002
+
+| \u2705 \u6B63\u786E | \u274C \u9519\u8BEF | \u4E3A\u4EC0\u4E48 |
+| --- | --- | --- |
+| \`banner_renew_click\` | \`\u7EED\u8D39\u70B9\u51FB\` | \u4E0D\u80FD\u7528\u4E2D\u6587 |
+| \`popup_show\` | \`bannerRenewClick\` | \u4E0D\u80FD\u7528\u9A7C\u5CF0 / \u5927\u5199\u5B57\u6BCD |
+| \`countdown_end\` | \`banner-renew-click\` | \u4E0D\u80FD\u7528\u4E2D\u5212\u7EBF\uFF0C\u5206\u8BCD\u4E00\u5F8B\u7528\u4E0B\u5212\u7EBF |
+| \`cta_click_v2\` | \`cta\` | \u4E0D\u8DB3 3 \u4E2A\u5B57\u7B26 |
+| \`notice_close\` | \`1_click\` | \u5FC5\u987B\u5C0F\u5199\u5B57\u6BCD\u5F00\u5934 |
+| \`vip_renew_click\` | \`vip renew click\` | \u4E0D\u80FD\u6709\u7A7A\u683C |
+
+**\u5EFA\u8BAE\u6309\u300C\u5751\u4F4D_\u4E1A\u52A1_\u52A8\u4F5C\u300D\u4E09\u6BB5\u547D\u540D**\uFF08\u540E\u7AEF\u6309\u524D\u7F00\u805A\u5408\uFF0C\u540C\u4E00\u573A\u6D3B\u52A8\u5171\u7528\u4E00\u4E2A\u524D\u7F00\u624D\u80FD\u5206\u7EC4\u7EDF\u8BA1\uFF09\uFF1A
+
+\`\`\`
+banner_renew_click     // \u7EED\u8D39 Banner \u88AB\u70B9\u51FB
+popup_vip_show         // \u4F1A\u5458\u5F39\u7A97\u66DD\u5149
+popup_vip_close        // \u4F1A\u5458\u5F39\u7A97\u5173\u95ED
+notice_autumn_close    // \u79CB\u5B63\u6D3B\u52A8\u516C\u544A\u6761\u88AB\u5173\u6389
+countdown_end          // \u5012\u8BA1\u65F6\u5F52\u96F6
+\`\`\`
+
+\u8981\u533A\u5206\u5177\u4F53\u6863\u4F4D\u3001\u5177\u4F53\u6309\u94AE\uFF0C\u653E \`params\` \u91CC\uFF0C\u4E0D\u8981\u5F80\u4E8B\u4EF6\u540D\u4E0A\u5806\u3002
+
+## \u66DD\u5149\u57CB\u70B9\u548C\u5173\u95ED\u57CB\u70B9
+
+\u53EA\u7ED9\u6309\u94AE\u57CB\u70B9\u662F\u4E0D\u591F\u7684\u3002**\u6BCF\u4E2A\u89C6\u56FE\u7684 \`stage\` \u90FD\u8981\u5199 \`onShow\` \u548C \`onClose\`**\uFF0C\u5426\u5219\u7B97\u4E0D\u51FA\u5F39\u7A97\u7684\u8F6C\u5316\u7387\uFF1A
+
+\`\`\`jsonc
+"stage": {
+  "width": 420, "height": "auto", "layout": "flow",
+  "onShow":  { "type": "track", "event": "popup_renew_show",
+               "params": { "popup": "renew" } },
+  "onClose": { "type": "track", "event": "popup_renew_close",
+               "params": { "popup": "renew", "reason": "{{ closeReason }}" } }
+}
+\`\`\`
+
+- \`onShow\` \u5728\u6570\u636E\u5C31\u7EEA\u3001\u5F39\u7A97\u771F\u6B63\u6E32\u67D3\u51FA\u6765\u65F6\u89E6\u53D1\u4E00\u6B21
+- \`onClose\` \u5728\u70B9 X\u3001\u70B9\u906E\u7F69\u3001\u8D70 \`close\` \u52A8\u4F5C\u3001\u88AB \`replace\` \u9876\u6389\u65F6\u90FD\u4F1A\u89E6\u53D1
+- \`{{ closeReason }}\` \u53D6\u503C\uFF1A\`close-button\` / \`mask\` / \`replace\` / \`close\` \u52A8\u4F5C\u81EA\u5E26\u7684 \`reason\`\uFF08\u5982 \`"never-remind"\`\uFF09/ \u9ED8\u8BA4 \`action\`
+- \u591A\u89C6\u56FE\u65F6\u6BCF\u5C42\u5404\u5199\u5404\u7684\uFF0C\u624D\u80FD\u5206\u5F00\u7EDF\u8BA1
+
+## \u516C\u544A\u6761 / Banner \u7684\u5173\u95ED
+
+\u516C\u544A\u6761**\u4E0D\u8981\u7528 \`stage.closeButton\`**\uFF08\u90A3\u662F\u538B\u5728\u89D2\u4E0A\u7684\u5706\u5F62\u6309\u94AE\uFF0C\u4E3A\u6574\u56FE\u5F39\u7A97\u8BBE\u8BA1\u7684\uFF09\u3002\u5728\u884C\u672B\u653E\u4E00\u4E2A\u5E26 \`close\` \u52A8\u4F5C\u7684 \`text\` \u8282\u70B9\uFF1A
+
+\`\`\`jsonc
+{ "type": "text", "content": "\u2715",
+  "style": { "alignSelf": "center", "width": 22, "height": 22,
+             "textAlign": "center", "lineHeight": 22, "cursor": "pointer" },
+  "action": { "type": "sequence", "actions": [
+    { "type": "track", "event": "notice_guide_close" },
+    { "type": "call",  "name": "setNeverRemind" },
+    { "type": "close", "reason": "user-dismiss" }
+  ] } }
+\`\`\`
+
+\`close\` \u53EA\u901A\u77E5\u5BBF\u4E3B\u300C\u7528\u6237\u5173\u6389\u4E86\u300D\uFF0C\u8981\u8BA9\u5B83\u522B\u518D\u51FA\u73B0\u5F97\u914D\u4E00\u6761 \`call\`\u3002
+\u6574\u6761\u53EF\u70B9 + \u884C\u672B \xD7 \u4E0D\u4F1A\u51B2\u7A81\uFF1A\u5185\u5C42\u6709\u81EA\u5DF1\u7684 \`action\` \u5C31\u4E0D\u518D\u5192\u6CE1\u7ED9\u5916\u5C42\u3002`;
+}
+function viewsSection() {
+  return `# \u591A\u89C6\u56FE\uFF08\u4E00\u4EFD\u914D\u7F6E\u91CC\u653E\u51E0\u4E2A\u5F39\u7A97\uFF09
+
+\u9ED8\u8BA4\u4E00\u4EFD\u914D\u7F6E\u5C31\u662F\u4E00\u4E2A\u5F39\u7A97\u3002\u7528\u6237\u8981\u300C\u516C\u544A\u6761\u70B9\u5F00\u5F39\u7A97\u300D\u300C\u4E0D\u518D\u63D0\u9192\u518D\u5F39\u4E2A\u786E\u8BA4\u300D
+\u300C\u4E3B\u5F39\u7A97\u548C\u8BE6\u60C5\u5C4F\u6765\u56DE\u5207\u300D\u65F6\uFF0C\u628A \`type\`/\`stage\`/\`nodes\` \u632A\u8FDB \`views\`\uFF0C\u52A0 \`entry\`\uFF1A
+
+\`\`\`jsonc
+{
+  "version": ${DSL_VERSION},
+  "entry": "bar",
+  "data": {...}, "state": {...}, "derived": {...},   // \u5168\u5C40\u5171\u4EAB\uFF0C\u8DE8\u89C6\u56FE
+  "views": {
+    "bar":     { "type": "notice", "stage": {...}, "nodes": [...] },
+    "renew":   { "type": "popup",  "stage": {...}, "nodes": [...] },
+    "confirm": { "type": "popup",  "stage": {...}, "nodes": [...] }
+  }
+}
+\`\`\`
+
+\u5207\u6362\u5199\u6CD5\uFF1A
+
+| \u5199\u6CD5 | \u6548\u679C |
+| --- | --- |
+| \`{ "type": "open", "view": "renew" }\` | \u53E0\u4E00\u5C42\uFF0C\u4E0B\u9762\u90A3\u5C42\u8FD8\u5728\uFF08\u9ED8\u8BA4 stack\uFF09 |
+| \`{ "type": "open", "view": "unlock", "mode": "replace" }\` | \u6362\u6389\u5F53\u524D\u5C42\uFF0C\u5C42\u6570\u4E0D\u53D8 |
+| \`{ "type": "close" }\` | \u5173\u6389\u5F53\u524D\u5C42\uFF0C\u56DE\u5230\u4E0A\u4E00\u5C42 |
+| \`{ "type": "closeAll" }\` | \u51E0\u5C42\u90FD\u5173\u6389 |
+
+\u89C4\u5219\uFF1A
+
+- \u7528\u4E86 \`views\` \u4E4B\u540E\uFF0C\`stage\` / \`nodes\` **\u4E0D\u80FD\u518D\u7559\u5728\u9876\u5C42**
+- \`entry\` \u5FC5\u586B\uFF0C\u4E14\u5FC5\u987B\u662F \`views\` \u91CC\u5B58\u5728\u7684 key
+- \`open\` \u7684 \`view\` \u5FC5\u987B\u662F \`views\` \u91CC\u5B58\u5728\u7684 key
+- \u53EA\u6709\u6700\u4E0A\u9762\u90A3\u5C42\u4F1A\u753B\u906E\u7F69\uFF0C\u4E0B\u9762\u7684\u5C42\u8FD8\u770B\u5F97\u89C1\u4F46\u70B9\u4E0D\u52A8
+- \`state\` \u5168\u5C40\u5171\u4EAB\uFF1A\u4E3B\u5C4F\u9009\u4E2D\u7684\u4E1C\u897F\uFF0C\u5F39\u51FA\u6765\u7684\u786E\u8BA4\u6846\u76F4\u63A5\u8BFB\u5F97\u5230`;
+}
+function countdownSection() {
+  return `# \u5012\u8BA1\u65F6
+
+\`to\` \u662F\u7ED3\u675F\u65F6\u95F4\u3002**\u7528\u6237\u8BF4\u300C9\u67081\u53F7\u622A\u6B62\u300D\u5C31\u76F4\u63A5\u5199 \`"2026-09-01"\`\uFF0C\u4E0D\u8981\u81EA\u4F5C\u4E3B\u5F20\u6362\u7B97\u6210\u65F6\u95F4\u6233** \u2014\u2014 \u8FD0\u8425\u770B\u4E0D\u61C2\u65F6\u95F4\u6233\uFF0C\u4E5F\u6CA1\u6CD5\u6838\u5BF9\u3002
+
+\u80FD\u8BC6\u522B\u7684\u5199\u6CD5\uFF1A\`"2026-09-01 18:00:00"\`\u3001\`"2026-09-01"\`\u3001\`"2026\u5E749\u67081\u65E5 18\u70B9"\`\u3001ISO\uFF08\`"2026-09-01T18:00:00+08:00"\`\uFF09\u3001\u6BEB\u79D2\u65F6\u95F4\u6233\u3001\`"{{ user.trialEndAt }}"\`\u3002
+
+\u5199\u6210 \`"\u4E0B\u5468\u4E09"\` \u8FD9\u79CD\u8BC6\u522B\u4E0D\u4E86\u7684\u4F1A\u5728\u4FDD\u5B58\u524D\u62A5\u9519\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
+
+\`\`\`jsonc
+{
+  "type": "countdown",
+  "to": "2026-09-01 18:00:00",   // \u4E5F\u53EF\u4EE5\u5199 "{{ user.trialEndAt }}" \u4ECE\u6570\u636E\u53D6
+  "precision": "s",          // "s" \u6BCF\u79D2 | "cs" \u5398\u79D2\u9010\u5E27\uFF08\u7D27\u8FEB\u611F\u66F4\u5F3A\uFF09
+  "as": "cd",
+  "style": { "align": "center", "gap": 6 },
+  "children": [
+    { "type": "text", "content": "{{ cd.h }}", "style": { "width": 42, "textAlign": "center", "fontVariantNumeric": "tabular-nums" } },
+    { "type": "text", "content": ":" },
+    { "type": "text", "content": "{{ cd.m }}", "style": { "width": 42, "textAlign": "center", "fontVariantNumeric": "tabular-nums" } },
+    { "type": "text", "content": ":" },
+    { "type": "text", "content": "{{ cd.s }}", "style": { "width": 42, "textAlign": "center", "fontVariantNumeric": "tabular-nums" } }
+  ]
+}
+\`\`\`
+
+\u53EF\u7528\u7247\u6BB5\uFF1A\`cd.d\`(\u5929) \`cd.h\`(\u65F60-23) \`cd.hAll\`(\u603B\u5C0F\u65F6) \`cd.m\` \`cd.s\` \`cd.cs\`(\u5398\u79D2) \`cd.ended\`\u3002
+\u9010\u5E27\u53D8\u5316\u7684\u6570\u5B57\u4E00\u5B9A\u8981\u52A0 \`"fontVariantNumeric": "tabular-nums"\`\uFF0C\u5426\u5219\u6570\u5B57\u4F1A\u5DE6\u53F3\u6296\u3002`;
+}
+
+// src/docs/ai-prompt/nodes.ts
+function nodesSection() {
+  return `# \u8282\u70B9\u7C7B\u578B
+
+\u53EF\u7528 type\uFF1A${NODE_TYPES.join(" / ")}
+
+\u516C\u5171\u5B57\u6BB5\uFF1A\`id\` \`type\` \`rect\` \`style\` \`visibleWhen\` \`action\`
+
+| type | \u7528\u9014 | \u5FC5\u586B\u5B57\u6BB5 |
+| --- | --- | --- |
+| flex | \u5BB9\u5668\uFF0Cchildren \u6D41\u5F0F\u6392\u5217\uFF08\u6700\u5E38\u7528\uFF09 | children |
+| box | \u5BB9\u5668\uFF0Cchildren \u7EDD\u5BF9\u5B9A\u4F4D\uFF08\u7528\u4E8E\u89D2\u6807\u538B\u8FB9\u6846\u7B49\u7CBE\u7EC6\u6392\u7248\uFF09 | children |
+| repeat | \u7ED1\u5B9A\u6570\u7EC4\u5FAA\u73AF\uFF0C\u6570\u636E\u51E0\u6761\u6E32\u67D3\u51E0\u6761 | bind, template |
+| text | \u6587\u672C\uFF1B\u4E5F\u7528\u6765\u505A\u8272\u5757\u3001\u5706\u70B9\u3001\u6807\u7B7E | content |
+| image | \u56FE\u7247 | src |
+| button | \u6309\u94AE | text |
+| tabs | \u9009\u9879\u5361\uFF0C\u70B9\u51FB\u5199\u5165 state[stateKey] | bind, stateKey |
+| countdown | \u5012\u8BA1\u65F6\u5BB9\u5668\uFF0C\u89C1\u4E0B | to |
+
+**\u6CA1\u6709\u5BCC\u6587\u672C\u8282\u70B9\u3002** \u4E00\u884C\u91CC\u6DF7\u6392\u591A\u79CD\u5B57\u53F7\uFF08\u5982\u300C\u5DF2\u8865\u9F50 **42** \u5F20\u300D\uFF09\uFF0C
+\u7528 \`flex\` + \`"align": "baseline"\` \u653E\u51E0\u4E2A \`text\` \u8282\u70B9\uFF0C\u5404\u81EA\u8BBE\u4E0D\u540C \`fontSize\`\u3002
+\u52A0\u7C97\u540C\u7406\uFF0C\u62C6\u6210\u4E24\u4E2A \`text\`\uFF0C\u4E00\u4E2A\u8BBE \`"fontWeight": "700"\`\u3002`;
+}
+function styleSection() {
+  return `# style \u767D\u540D\u5355
+
+\u53EA\u80FD\u7528\u8FD9\u4E9B\uFF08\u7528\u522B\u7684\u4F1A\u88AB\u4E22\u5F03\uFF09\uFF1A
+
+${ALLOWED_STYLE_KEYS.map((key) => "`" + key + "`").join(" ")}
+
+\u6CE8\u610F\u547D\u540D\u548C CSS \u4E0D\u5B8C\u5168\u4E00\u6837\uFF1A\`radius\` \u4E0D\u662F borderRadius\uFF0C\`shadow\` \u4E0D\u662F boxShadow\uFF0C
+\`direction\` \u4E0D\u662F flexDirection\u3002
+
+\u5E38\u89C1\u5751\uFF1A
+
+- 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
+- \u957F\u5EA6\u503C\uFF1A\u6570\u5B57=px\uFF0C\u5B57\u7B26\u4E32\u53EF\u7528 \`"100%"\` \`"auto"\` \`"2rem"\` \`"calc(100% - 48px)"\` \`"10px 14px"\``;
+}
+function dataSection() {
+  return `# \u6570\u636E\u3001\u72B6\u6001\u3001\u8054\u52A8
+
+\`\`\`jsonc
+"data":    { "tiers": [ { "key": "month", "p": "\u6708\u4ED8", "price": "15", "url": "https://..." } ] },
+"state":   { "period": 1 },
+"derived": { "current": { "list": "tiers", "indexBy": "period" } }
+\`\`\`
+
+\u4E4B\u540E\u4EFB\u610F\u8282\u70B9\u91CC\u7528 \`{{ current.price }}\` \`{{ current.url }}\`\uFF0C
+\u5207\u6362\u65F6\u4EF7\u683C\u3001\u94FE\u63A5\u3001\u57CB\u70B9\u53C2\u6570\u5168\u90E8\u81EA\u52A8\u8054\u52A8\uFF0C\u7248\u5F0F\u53EA\u9700\u8981\u6392\u4E00\u904D\u3002
+
+\u6570\u636E\u8981\u4ECE\u540E\u7AEF\u53D6\u65F6\u5199 \`"tiers": { "$source": "\u6570\u636E\u6E90\u540D", "params": {} }\`\uFF0C
+\u6570\u636E\u6E90\u540D\u5FC5\u987B\u662F\u540E\u7AEF\u5DF2\u6CE8\u518C\u7684\uFF0C**\u4E0D\u80FD\u5199\u63A5\u53E3\u5730\u5740**\u3002\u7528\u6237\u6CA1\u8BF4\u5C31\u7528\u5199\u6B7B\u7684\u6570\u636E\u3002
+
+# \u8868\u8FBE\u5F0F
+
+\u80FD\u8BFB\u5230\uFF1A\`data\` \u7684\u5B57\u6BB5\uFF08\u76F4\u63A5\u5728\u9876\u5C42\uFF09\u3001\`state.xxx\`\u3001\`user.xxx\`\uFF08\u5F53\u524D\u7528\u6237\u4FE1\u606F\uFF09\u3001
+\`derived\` \u7684\u522B\u540D\u3001\`item\`/\`index\`\uFF08repeat \u5185\uFF09\u3001\`cd.xxx\`\uFF08countdown \u5185\uFF09\u3002
+
+\`{{ }}\` \u53EF\u7528\u4E8E \`content\` \`src\` \`text\` \`to\`\u3001**\`style\` \u7684\u6BCF\u4E2A\u503C**\u3001\u4EE5\u53CA\u52A8\u4F5C\u7684 \`url\`/\`event\`/\`params\`\u3002
+
+\u652F\u6301\uFF1A\u53D6\u503C\u3001\u5B57\u9762\u91CF\u3001\`!\` \`-\`\u3001\`+ - * / %\`\u3001\u6BD4\u8F83\u3001\`&& ||\`\u3001\u4E09\u5143 \`a ? b : c\`\u3002
+**\u4E0D\u652F\u6301\u51FD\u6570\u8C03\u7528**\u3002
+
+\u9009\u4E2D\u6001\u5C31\u9760\u4E09\u5143\u5B9E\u73B0\uFF1A
+
+\`\`\`jsonc
+"style": {
+  "borderWidth": "{{ item.key == current.key ? '2px' : '1px' }}",
+  "borderColor": "{{ item.key == current.key ? '#f0a000' : '#e5e8ed' }}"
+}
+\`\`\`
+
+\u6761\u4EF6\u663E\u793A\u7528 \`"visibleWhen": "current.gift != ''"\`\u3002
+
+\u5207 tab \u8981\u6574\u4F53\u6362\u80A4\u65F6\uFF0C\u628A\u914D\u8272\u5199\u8FDB data \u7684\u6BCF\u4E00\u9879\uFF0C\`stage.style\` \u540C\u6837\u652F\u6301 \`{{ }}\`\uFF1A
+
+\`\`\`jsonc
+"stage": { "layout": "flow", "style": { "background": "{{ current.bg }}", "radius": 16 } }
+\`\`\`
+
+\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/index.ts
+function findExample(value) {
+  const found = examples_default.filter((item) => item.value === value)[0];
+  return found ? found.dsl : null;
+}
+function buildAiPrompt() {
+  const simple = findExample("imageHotspot");
+  const full = findExample("renewExpire");
+  const exampleSection = `# \u5B8C\u6574\u793A\u4F8B 1 \xB7 \u6574\u56FE + \u70ED\u533A\uFF08\u6700\u7B80\u5355\uFF0C\u89C6\u89C9\u5168\u5728\u56FE\u91CC\uFF09
+
+\u70ED\u533A\u5C31\u662F\u300C\u5E26 \`rect\` \u548C \`action\` \u7684\u900F\u660E \`box\`\u300D\uFF0C\u6570\u91CF\u4E0D\u9650\u3001\u4F4D\u7F6E\u5404\u81EA\u72EC\u7ACB\uFF0C\u53EF\u4EE5\u540C\u65F6\u6709\u8DF3\u8F6C\u3001\u5173\u95ED\u3001\u57CB\u70B9\u7B49\u4E0D\u540C\u52A8\u4F5C\u3002\u56FE\u4E0A\u6709\u51E0\u4E2A\u53EF\u70B9\u533A\u57DF\u5C31\u653E\u51E0\u4E2A\u3002
+
+\`\`\`json
+${JSON.stringify(simple, null, 2)}
+\`\`\`
+
+# \u5B8C\u6574\u793A\u4F8B 2 \xB7 \u591A\u6863\u4F4D\u8BA2\u8D2D\u5F39\u7A97\uFF08\u542B\u540E\u7AEF\u6570\u636E\u3001\u9009\u4E2D\u8054\u52A8\u3001\u6761\u4EF6\u663E\u793A\uFF09
+
+\u8FD9\u4E2A\u4F8B\u5B50\u57FA\u672C\u6DB5\u76D6\u4E86\u6240\u6709\u5E38\u89C1\u9700\u6C42\uFF0C\u6539\u5B83\u6BD4\u4ECE\u96F6\u5199\u66F4\u5FEB\u3002
+
+\`\`\`json
+${JSON.stringify(full, null, 2)}
+\`\`\``;
+  return [
+    roleSection(),
+    structureSection(),
+    layoutSection(),
+    nodesSection(),
+    styleSection(),
+    dataSection(),
+    actionSection(),
+    viewsSection(),
+    countdownSection(),
+    exampleSection,
+    checklistSection(),
+    requirementSection()
+  ].join("\n\n");
+}
+
+exports.buildAiPrompt = buildAiPrompt;
+exports.examples = examples_default;
+exports.meta = meta_default;
+exports.reconcileRows = reconcileRows;
+exports.sections = sections_default;
+exports.toMarkdown = toMarkdown;