slexkit 0.2.0 → 0.3.0

package/dist/ai/llms-full.txt

@@ -1,6 +1,6 @@
 # SlexKit Full LLM Documentation
 
-Version: 0.2.0
+Version: 0.3.0
 
 This file concatenates SlexKit's canonical English Markdown docs. `slex` fences are preserved exactly.
 
@@ -1105,6 +1105,7 @@ SlexKit follows the assistant-ui information architecture: a clear index, a full
       "link:full": { href: "/llms-full.txt", text: "/llms-full.txt - full English context", icon: "book-open-text" },
       "link:components": { href: "/llms-components.txt", text: "/llms-components.txt - components and API", icon: "puzzle-piece" },
       "link:runtime": { href: "/llms-runtime.txt", text: "/llms-runtime.txt - runtime and host integration", icon: "cpu" },
+      "link:capabilities": { href: "/llms-capabilities.txt", text: "/llms-capabilities.txt - std and api capabilities", icon: "function" },
       "link:toolhost": { href: "/llms-toolhost.txt", text: "/llms-toolhost.txt - structured input", icon: "cursor-click" },
       "link:authoring": { href: "/llms-authoring.txt", text: "/llms-authoring.txt - slex fence authoring rules", icon: "pencil-simple" },
       "link:manifest": { href: "/slexkit-ai-manifest.json", text: "/slexkit-ai-manifest.json - machine-readable index", icon: "brackets-curly" },
@@ -1119,8 +1120,9 @@ Minimal reading path:
 1. Start with [`/llms.txt`](/llms.txt) for the grouped index.
 2. Use [`/llms-full.txt`](/llms-full.txt) when the agent needs broad context.
 3. Use [`/llms-components.txt`](/llms-components.txt) and raw component `.md` pages when authoring UI.
-4. Use [`/llms-runtime.txt`](/llms-runtime.txt) for host and secure runtime integration.
-5. Use [`/llms-toolhost.txt`](/llms-toolhost.txt) only when user input must return structured data to the host.
+4. Use [`/llms-capabilities.txt`](/llms-capabilities.txt) for `std.*` and policy-gated `api.*`.
+5. Use [`/llms-runtime.txt`](/llms-runtime.txt) for host and secure runtime integration.
+6. Use [`/llms-toolhost.txt`](/llms-toolhost.txt) only when user input must return structured data to the host.
 
 SlexKit raw docs are ordinary `.md` pages with explicit `slex` fences. There is no `.mdx` route — `slex` fences are the interactive layer.
 
@@ -1138,6 +1140,7 @@ Documentation: https://slexkit.dev/llms-full.txt
 Key patterns:
 - Display UI uses explicit `slex` fenced blocks plus Markdown fallback.
 - Slex source uses `{ slex, namespace, g, layout }`; use `slex: "0.1"` for the current public protocol.
+- Use `std.*` for common calculations, formatting, units, and small statistics.
 - ToolHost is only for structured user input flows.
 - Untrusted or agent-generated source should use the secure runtime.
 - Raw docs are `.md` files with `slex` fences, not `.mdx`.
@@ -1260,6 +1263,1606 @@ npx add-mcp @slexkit/mcp -a zed
 
 ---
 
+# 你的第一个 SlexKit 卡片
+
+URL: /zh-CN/examples/hello-slexkit
+Raw Markdown: /zh-CN/examples/hello-slexkit.md
+Source: content/examples/hello-slexkit/zh-CN.md
+
+# 你的第一个 SlexKit 卡片
+
+SlexKit 的核心思想：**用声明式 JSON 描述 UI，而不仅是 Markdown**。下面是一个纯静态的卡片——没有 `g` 对象，没有交互，所有内容都直接写在结构中。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "learn_hello_slexkit",
+  layout: {
+    "section:hello": {
+      eyebrow: "入门教程 · 1/4",
+      title: "你的第一个 SlexKit 卡片",
+      subtitle: "所有内容都是声明式的——数字、颜色、布局，全部来自 DSL。",
+      "grid:top-stats": {
+        columns: 1, mdColumns: 3,
+        "stat:users": { label: "活跃用户", value: "12,847", unit: "人" },
+        "stat:uptime": { label: "正常运行", value: "99.97", unit: "%" },
+        "stat:latency": { label: "服务延迟", value: "42", unit: "ms" }
+      },
+      "table:pricing": {
+        columns: ["功能", "免费版", "专业版"],
+        rows: [
+          ["可用组件", "全部", "全部"],
+          ["自定义主题", "3 种", "无限"],
+          ["数据导出", "JSON", "JSON / CSV / SQL"]
+        ]
+      },
+      "callout:tip": {
+        tone: "info",
+        text: "你现在看到的每一样东西——标题、数值、表格、颜色——都来自上面的 DSL 声明，没有一行 HTML。这就是 SlexKit 的核心理念：Markdown 提供叙事，DSL 提供交互。"
+      }
+    }
+  }
+}
+```
+
+只看不动，感受一下结构和布局语法。下一节我们给卡片加上第一条响应式数据。
+
+---
+
+
+思考：如果 `"12,847"` 需要从里面计算出来，显然直接写死字符串不够。这就需要引入 **`g` 对象**——下一节的主角。
+
+---
+
+# 第一个交互：滑块操控数据
+
+URL: /zh-CN/examples/first-interaction
+Raw Markdown: /zh-CN/examples/first-interaction.md
+Source: content/examples/first-interaction/zh-CN.md
+
+# 第一个交互：滑块操控数据
+
+上一节全是静态数据。要让 UI "活起来"，需要三样东西：
+
+1. **`g` 对象** — 响应式状态容器
+2. **`$value` / `$label` / `$tone`** — 读表达式（从 g 取值渲染）
+3. **`onchange`** — 写表达式（用户操作写入 g）
+
+```slex
+{
+  slex: "0.1",
+  namespace: "learn_first_interaction",
+  g: { count: 42 },
+  layout: {
+    "section:interact": {
+      eyebrow: "入门教程 · 2/4",
+      title: "第一个交互：滑块操控数据",
+      subtitle: "滑动下面的滑块，stat 和 callout 会跟着变。这就是 SlexKit 的响应式核心。",
+      "column:controls": {
+        "slider:count": {
+          label: "选择数值",
+          "$value": "g.count",
+          min: 0,
+          max: 100,
+          step: 1,
+          onchange: "g.count = Number($event)"
+        },
+        "stat:count": { label: "当前数值", "$value": "g.count" },
+        "badge:level": {
+          "$label": "g.count < 30 ? '低' : g.count < 70 ? '中' : '高'",
+          "$tone": "g.count < 30 ? 'success' : g.count < 70 ? 'warning' : 'danger'"
+        },
+        "callout:note": {
+          "$tone": "g.count < 50 ? 'success' : 'info'",
+          "$text": "g.count < 50 ? '当前值偏低，适合入门级负载。' : '当前值偏高，注意监控资源消耗。'"
+        }
+      }
+    }
+  }
+}
+```
+
+核心公式：
+```
+用户操作 → onchange → g → SlexKit 检测变化 → 所有 $value/$tone/$text 自动重算 → UI 更新
+```
+
+这就是**单向数据流** + **响应式重渲染**。不需要手动 `setState`，不需要 DOM 操作。
+
+---
+
+# 多输入协同：两个滑块联动
+
+URL: /zh-CN/examples/multi-input-coordination
+Raw Markdown: /zh-CN/examples/multi-input-coordination.md
+Source: content/examples/multi-input-coordination/zh-CN.md
+
+# 多输入协同：两个滑块联动
+
+真实场景中往往有多个输入变量，它们相互影响。这需要引入两样新东西：
+1. **`g.method()`** — 依赖其他状态的计算值（类似 Vue computed）
+2. **`$if`** — 条件渲染（根据状态决定显示或隐藏组件）
+
+```slex
+{
+  slex: "0.1",
+  namespace: "learn_multi_coordination",
+  g: {
+    width: 120,
+    height: 80,
+    area: function () { return this.width * this.height; },
+    isLandscape: function () { return this.width > this.height; },
+    ratio: function () { return (this.width / this.height).toFixed(2); }
+  },
+  layout: {
+    "section:coordinated": {
+      eyebrow: "入门教程 · 3/4",
+      title: "多输入协同：矩形尺寸联动",
+      subtitle: "同时调整宽和高，面积和宽高比自动重新计算。这就是 g 方法的力量。",
+      "grid:params": {
+        columns: 1, mdColumns: 2,
+        "column:w": {
+          "input:width": { label: "宽度", "$value": "g.width", type: "number", unit: "px", onchange: "g.width = Number($event || 0)" },
+          "slider:width": { label: "宽度", "$value": "g.width", min: 20, max: 300, step: 5, unit: "px", onchange: "g.width = Number($event)" }
+        },
+        "column:h": {
+          "input:height": { label: "高度", "$value": "g.height", type: "number", unit: "px", onchange: "g.height = Number($event || 0)" },
+          "slider:height": { label: "高度", "$value": "g.height", min: 20, max: 300, step: 5, unit: "px", onchange: "g.height = Number($event)" }
+        }
+      },
+      "grid:results": {
+        columns: 1, mdColumns: 3,
+        "stat:area": { label: "面积", "$value": "g.area()", unit: "px²" },
+        "stat:ratio": { label: "宽高比", "$value": "g.ratio()" },
+        "badge:orientation": {
+          "$label": "g.isLandscape() ? '横向' : g.width === g.height ? '正方形' : '纵向'",
+          "$tone": "g.isLandscape() ? 'info' : g.width === g.height ? 'success' : 'warning'"
+        }
+      },
+      "formula:areaEq": { "$tex": "'\\\\text{面积} = ' + g.width + ' \\\\times ' + g.height + ' = ' + g.area() + '\\\\text{ px}^2'" },
+      "callout:tip": {
+        "$tone": "g.isLandscape() ? 'info' : 'warning'",
+        "$text": "g.isLandscape() ? '当前为横向（Landscape）。横向更适用于宽屏展示。' : '当前为纵向（Portrait）。纵向更适用于移动端阅读。'"
+      },
+      "callout:squareTip": {
+        "$if": "g.width === g.height",
+        tone: "success",
+        text: "这是一个正方形！宽高完全相等。"
+      }
+    }
+  }
+}
+```
+
+**三个新知识点：**
+
+| 概念 | 写法 | 含义 |
+|:---|:---|:---|
+| g 方法 | `area: function() { return this.width * this.height; }` | `this` 指向 g 对象本身，返回动态计算值 |
+| 动态公式 | `"$tex": "'...' + g.width + '...'"` | formula 组件可根据 g 值实时渲染 KaTeX |
+| 条件渲染 | `"$if": "g.width === g.height"` | 只有表达式返回 true 时该组件才渲染 |
+
+---
+
+# 分支与切换：模式选择器
+
+URL: /zh-CN/examples/tabs-and-branching
+Raw Markdown: /zh-CN/examples/tabs-and-branching.md
+Source: content/examples/tabs-and-branching/zh-CN.md
+
+# 分支与切换：模式选择器
+
+上一节是一个场景内的协同。现实中有多个场景需要在同一空间内切换——这时候用 **select** 实现分支。
+
+核心思想：**UI = f(state)**。切换 `mode` 状态变量，整个视图区域自动切换。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "learn_tabs_branching",
+  g: {
+    mode: "length",
+    value: 100,
+    convert: function () {
+      if (this.mode === "length") return (this.value / 100).toFixed(2) + " m";
+      if (this.mode === "weight") return (this.value * 2.20462).toFixed(2) + " 磅 (lbs)";
+      if (this.mode === "temp") return (this.value * 9 / 5 + 32).toFixed(1) + " °F";
+      return "—";
+    },
+    label: function () {
+      if (this.mode === "length") return "厘米转米";
+      if (this.mode === "weight") return "公斤转磅";
+      return "摄氏度转华氏度";
+    }
+  },
+  layout: {
+    "section:branching": {
+      eyebrow: "入门教程 · 4/4",
+      title: "分支与切换：模式选择器",
+      subtitle: "切换下面的模式，输入的参数和计算结果会跟着变化。一种模式 = 一种 UI 状态。",
+      "select:mode": {
+        label: "转换模式",
+        "$value": "g.mode",
+        options: [
+          { label: "长度 (cm → m)", value: "length" },
+          { label: "重量 (kg → lbs)", value: "weight" },
+          { label: "温度 (°C → °F)", value: "temp" }
+        ],
+        onchange: "g.mode = String($event)"
+      },
+      "input:value": { label: "输入值", "$value": "g.value", type: "number", onchange: "g.value = Number($event || 0)" },
+      "stat:result": { "$label": "g.label()", "$value": "g.convert()" },
+      "callout:guide": {
+        "$tone": "g.mode === 'temp' ? 'warning' : 'info'",
+        "$text": "g.mode === 'length' ? '1 米 = 100 厘米，除以 100 即可。' : g.mode === 'weight' ? '1 公斤 ≈ 2.20462 磅。' : '°F = °C × 9/5 + 32。华氏度范围更大，注意精度。'"
+      }
+    }
+  }
+}
+```
+
+---
+
+# 五险一金计算器
+
+URL: /zh-CN/examples/salary-calculator
+Raw Markdown: /zh-CN/examples/salary-calculator.md
+Source: content/examples/salary-calculator/zh-CN.md
+
+# 五险一金计算器
+
+你面试拿到一个offer，月薪2万，到手能拿多少？HR说五险一金要扣一大笔，但具体扣多少、怎么算，每个城市还不一样。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_salary_calculator",
+  g: {
+    base: 20000,
+    city: "beijing",
+    rates: {
+      beijing: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 12 },
+      shanghai: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 7 },
+      guangzhou: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 5 },
+      shenzhen: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 5 }
+    },
+    currentRate: function () { return this.rates[this.city] || this.rates.beijing; },
+    personalRate: function () { var r = this.currentRate(); return r.pensionP + r.medicalP + r.unemploymentP + r.housing; },
+    companyRate: function () { var r = this.currentRate(); return r.pensionC + r.medicalC + r.unemploymentC + r.injury + r.maternity + r.housing; },
+    personalTotal: function () { return this.base * this.personalRate() / 100; },
+    companyTotal: function () { return this.base * this.companyRate() / 100; },
+    total: function () { return this.personalTotal() + this.companyTotal(); },
+    takeHome: function () { return this.base - this.personalTotal(); },
+    cityLabel: function () { return { beijing: "北京", shanghai: "上海", guangzhou: "广州", shenzhen: "深圳" }[this.city] || this.city; }
+  },
+  layout: {
+    "section:salary": {
+      eyebrow: "计算器",
+      title: "五险一金计算器",
+      subtitle: "输入税前工资和城市，实时计算五险一金明细。",
+      "grid:params": {
+        columns: 1, mdColumns: 2,
+        "column:baseField": {
+          "input:base": { label: "税前工资", "$value": "g.base", type: "number", unit: "元/月", onchange: "g.base = Number($event || 0)" },
+          "slider:base": { label: "税前工资", "$value": "g.base", min: 3000, max: 50000, step: 500, unit: "元", onchange: "g.base = Number($event)" }
+        },
+        "column:cityField": {
+          "select:city": {
+            label: "缴纳城市",
+            "$value": "g.city",
+            options: [
+              { label: "北京", value: "beijing" },
+              { label: "上海", value: "shanghai" },
+              { label: "广州", value: "guangzhou" },
+              { label: "深圳", value: "shenzhen" }
+            ],
+            onchange: "g.city = String($event)"
+          }
+        }
+      },
+      "grid:summary": {
+        columns: 1, mdColumns: 3,
+        "stat:personal": { label: "个人扣除", "$value": "g.personalTotal().toFixed(0)", unit: "元" },
+        "stat:company": { label: "公司缴纳", "$value": "g.companyTotal().toFixed(0)", unit: "元" },
+        "stat:takehome": { label: "到手工资", "$value": "g.takeHome().toFixed(0)", unit: "元" }
+      }
+    }
+  }
+}
+```
+
+换个城市看看，公积金比例差很多——北京12%，上海7%，到手工资能差好几百。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_salary_calculator",
+  layout: {
+    "card:detail": {
+      title: "各项明细",
+      "grid:personal": {
+        columns: 1, mdColumns: 4,
+        "stat:pension_p": { label: "养老（8%）", "$value": "(g.base * 0.08).toFixed(0)", unit: "元" },
+        "stat:medical_p": { label: "医疗（2%）", "$value": "(g.base * 0.02).toFixed(0)", unit: "元" },
+        "stat:unemployment_p": { label: "失业（0.5%）", "$value": "(g.base * 0.005).toFixed(0)", unit: "元" },
+        "stat:housing_p": { label: "公积金", "$value": "(g.base * g.currentRate().housing / 100).toFixed(0)", unit: "元" }
+      },
+      "grid:company": {
+        columns: 1, mdColumns: 4,
+        "stat:pension_c": { label: "养老（16%）", "$value": "(g.base * 0.16).toFixed(0)", unit: "元" },
+        "stat:medical_c": { label: "医疗（8%）", "$value": "(g.base * 0.08).toFixed(0)", unit: "元" },
+        "stat:unemployment_c": { label: "失业（0.5%）", "$value": "(g.base * 0.005).toFixed(0)", unit: "元" },
+        "stat:other_c": { label: "工伤+生育", "$value": "(g.base * 0.01).toFixed(0)", unit: "元" }
+      },
+      "callout:note": {
+        "$tone": "g.personalTotal() > 3000 ? 'warning' : 'info'",
+        "$text": "g.personalTotal() > 3000 ? '个人扣除超过3000元，到手工资可能低于预期。' : '公积金比例越高，到手工资越少，但公积金可以提取使用。'"
+      }
+    }
+  }
+}
+```
+
+| 城市 | 养老 | 医疗 | 失业 | 公积金 | 个人合计 |
+|------|------|------|------|--------|----------|
+| 北京 | 8% | 2% | 0.5% | 12% | 22.5% |
+| 上海 | 8% | 2% | 0.5% | 7% | 17.5% |
+| 广州 | 8% | 2% | 0.5% | 5% | 15.5% |
+| 深圳 | 8% | 2% | 0.5% | 5% | 15.5% |
+
+---
+
+# 软件项目成本估算器
+
+URL: /zh-CN/examples/project-cost-estimator
+Raw Markdown: /zh-CN/examples/project-cost-estimator.md
+Source: content/examples/project-cost-estimator/zh-CN.md
+
+# 软件项目成本估算器
+
+老板问你："这个项目要多少钱？"你说："我算算。"然后打开Excel，填一堆公式。其实不用——输入团队配置和周期，成本自动算出来。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_project_cost",
+  g: {
+    frontend: 2, backend: 3, tester: 1, designer: 1,
+    months: 6,
+    salary: 15000,
+    teamSize: function () { return this.frontend + this.backend + this.tester + this.designer; },
+    laborCost: function () { return this.teamSize() * this.salary * this.months; },
+    equipmentCost: function () { return this.teamSize() * 5000; },
+    officeCost: function () { return this.teamSize() * 2000 * this.months; },
+    subtotal: function () { return this.laborCost() + this.equipmentCost() + this.officeCost(); },
+    riskBuffer: function () { return this.subtotal() * 0.15; },
+    totalCost: function () { return this.subtotal() + this.riskBuffer(); },
+    perPersonCost: function () { return this.teamSize() > 0 ? this.totalCost() / this.teamSize() : 0; },
+    monthlyBurn: function () { return this.months > 0 ? this.totalCost() / this.months : 0; }
+  },
+  layout: {
+    "section:estimator": {
+      eyebrow: "计算器",
+      title: "软件项目成本估算器",
+      subtitle: "输入团队配置和周期，成本自动算出来。",
+      "card:estimator": {
+        title: "项目成本估算",
+      "grid:team": {
+        columns: 1, mdColumns: 4,
+        "column:fe": {
+          "input:frontend": { label: "前端", "$value": "g.frontend", type: "number", unit: "人", onchange: "g.frontend = Number($event || 0)" }
+        },
+        "column:be": {
+          "input:backend": { label: "后端", "$value": "g.backend", type: "number", unit: "人", onchange: "g.backend = Number($event || 0)" }
+        },
+        "column:qa": {
+          "input:tester": { label: "测试", "$value": "g.tester", type: "number", unit: "人", onchange: "g.tester = Number($event || 0)" }
+        },
+        "column:ui": {
+          "input:designer": { label: "设计", "$value": "g.designer", type: "number", unit: "人", onchange: "g.designer = Number($event || 0)" }
+        }
+      },
+      "grid:params": {
+        columns: 1, mdColumns: 2,
+        "column:period": {
+          "input:months": { label: "开发周期", "$value": "g.months", type: "number", unit: "个月", onchange: "g.months = Number($event || 0)" },
+          "slider:months": { label: "开发周期", "$value": "g.months", min: 1, max: 24, step: 1, unit: "月", onchange: "g.months = Number($event)" }
+        },
+        "column:salaryField": {
+          "input:salary": { label: "人均月薪", "$value": "g.salary", type: "number", unit: "元", onchange: "g.salary = Number($event || 0)" },
+          "slider:salary": { label: "人均月薪", "$value": "g.salary", min: 8000, max: 50000, step: 1000, unit: "元", onchange: "g.salary = Number($event)" }
+        }
+      },
+      "grid:results": {
+        columns: 1, mdColumns: 4,
+        "stat:team": { label: "团队", "$value": "g.teamSize()", unit: "人" },
+        "stat:total": { label: "总成本", "$value": "g.totalCost().toFixed(0)", unit: "元" },
+        "stat:perperson": { label: "人均成本", "$value": "g.perPersonCost().toFixed(0)", unit: "元" },
+        "stat:monthly": { label: "月均消耗", "$value": "g.monthlyBurn().toFixed(0)", unit: "元" }
+      }
+    }
+  }
+  }
+}
+```
+
+7个人做半年，月均消耗多少？加个测试人员会不会超预算？拖一下就知道。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_project_cost",
+  layout: {
+    "card:breakdown": {
+      title: "成本构成",
+      "grid:costs": {
+        columns: 1, mdColumns: 3,
+        "stat:labor": { label: "人力成本", "$value": "g.laborCost().toFixed(0)", unit: "元" },
+        "stat:equipment": { label: "设备成本", "$value": "g.equipmentCost().toFixed(0)", unit: "元" },
+        "stat:office": { label: "办公成本", "$value": "g.officeCost().toFixed(0)", unit: "元" }
+      },
+      "grid:extra": {
+        columns: 1, mdColumns: 2,
+        "stat:risk": { label: "风险缓冲（15%）", "$value": "g.riskBuffer().toFixed(0)", unit: "元" },
+        "stat:total": { label: "总计", "$value": "g.totalCost().toFixed(0)", unit: "元" }
+      },
+      "callout:tip": {
+        "$tone": "g.months > 12 ? 'warning' : 'info'",
+        "$text": "g.months > 12 ? '项目周期超过1年，建议分阶段交付以降低风险。' : '风险缓冲15%是经验值，复杂项目可调高到20-25%。'"
+      }
+    }
+  }
+}
+```
+
+
+常见配置参考：
+
+| 团队 | 周期 | 月薪 | 总成本 |
+|------|------|------|--------|
+| 3人 | 3个月 | 15k | 196,650 |
+| 5人 | 6个月 | 15k | 655,500 |
+| 8人 | 9个月 | 20k | 1,989,000 |
+| 10人 | 12个月 | 25k | 4,140,000 |
+
+风险缓冲15%是经验值，复杂项目可以调到20-25%。设备和办公成本按人头估算，不含服务器和第三方服务。
+
+---
+
+# 分压器计算器
+
+URL: /zh-CN/examples/voltage-divider
+Raw Markdown: /zh-CN/examples/voltage-divider.md
+Source: content/examples/voltage-divider/zh-CN.md
+
+# 分压器计算器
+
+两个电阻串联，从中间引出电压——模拟电路中最简单的信号调理手段。做 ADC 电平转换、设定阈值电压、生成偏置电压，处处都在用。
+
+## 核心公式
+
+空载分压：$V_{out} = V_{in} \times \frac{R_2}{R_1 + R_2}$
+
+带负载 $R_L$ 时：$V_{out,loaded} = V_{in} \times \frac{R_2 \parallel R_L}{R_1 + R_2 \parallel R_L}$
+
+**关键经验**：分压器阻抗（$R_1 \parallel R_2$）应至少 < 后级输入阻抗的 1/10。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_voltage_divider",
+  g: {
+    vin: 5, r1: 10000, r2: 10000, rl: 100000,
+    rParallel: function () { return this.r2 * this.rl / (this.r2 + this.rl); },
+    vout: function () { return this.vin * this.r2 / (this.r1 + this.r2); },
+    voutLoaded: function () { return this.vin * this.rParallel() / (this.r1 + this.rParallel()); },
+    errorPercent: function () { return Math.abs((this.voutLoaded() - this.vout()) / this.vout() * 100); },
+    impedanceRatio: function () { var zout = this.r1 * this.r2 / (this.r1 + this.r2); return this.rl / zout; },
+    loadWarning: function () { return this.impedanceRatio() < 10 ? "负载效应显著，增大 RL 或减小 R1/R2" : "分压器阻抗足够低"; }
+  },
+  layout: {
+    "section:divider": {
+      eyebrow: "计算器",
+      title: "分压器计算器",
+      subtitle: "两个电阻串联，从中间引出电压。",
+      "card:divider": {
+        title: "分压器计算器",
+      "grid:params": {
+        columns: 1, mdColumns: 2,
+        "column:r1Field": { "input:r1": { label: "R1", "$value": "g.r1", type: "number", unit: "Ω", onchange: "g.r1 = Number($event || 0)" }, "slider:r1": { label: "R1", "$value": "g.r1", min: 100, max: 1000000, step: 100, unit: "Ω", onchange: "g.r1 = Number($event)" } },
+        "column:r2Field": { "input:r2": { label: "R2", "$value": "g.r2", type: "number", unit: "Ω", onchange: "g.r2 = Number($event || 0)" }, "slider:r2": { label: "R2", "$value": "g.r2", min: 100, max: 1000000, step: 100, unit: "Ω", onchange: "g.r2 = Number($event)" } }
+      },
+      "grid:params2": {
+        columns: 1, mdColumns: 2,
+        "column:vinField": { "input:vin": { label: "输入电压 Vin", "$value": "g.vin", type: "number", unit: "V", onchange: "g.vin = Number($event || 0)" }, "slider:vin": { label: "Vin", "$value": "g.vin", min: 0.1, max: 48, step: 0.1, unit: "V", onchange: "g.vin = Number($event)" } },
+        "column:rlField": { "input:rl": { label: "负载电阻 RL", "$value": "g.rl", type: "number", unit: "Ω", onchange: "g.rl = Number($event || 0)" }, "slider:rl": { label: "RL", "$value": "g.rl", min: 1000, max: 10000000, step: 1000, unit: "Ω", onchange: "g.rl = Number($event)" } }
+      },
+      "formula:eq1": { "$tex": "'V_{out} = ' + g.vin.toFixed(1) + ' \\\\times \\\\frac{' + (g.r2/1000).toFixed(1) + '\\\\text{k}}{' + (g.r1/1000).toFixed(1) + '\\\\text{k} + ' + (g.r2/1000).toFixed(1) + '\\\\text{k}} = ' + g.vout().toFixed(3) + '\\\\text{ V}'" },
+      "grid:results": {
+        columns: 1, mdColumns: 4,
+        "stat:vout": { label: "空载 Vout", "$value": "g.vout().toFixed(3)", unit: "V" },
+        "stat:voutLoaded": { label: "带载 Vout", "$value": "g.voutLoaded().toFixed(3)", unit: "V" },
+        "stat:error": { label: "负载误差", "$value": "g.errorPercent().toFixed(2)", unit: "%" },
+        "badge:ratio": { "$label": "g.impedanceRatio() < 10 ? '⚠ 负载效应' : '✓ 匹配良好'", "$tone": "g.impedanceRatio() < 10 ? 'warning' : 'success'" }
+      },
+      "callout:warning": { "$tone": "g.impedanceRatio() < 10 ? 'warning' : 'info'", "$text": "g.loadWarning()" }
+      }
+    }
+  }
+}
+```
+
+
+## 工程笔记
+
+| R1 | R2 | Vout/Vin | 阻抗 |
+|----|----|---------|------|
+| 10k | 10k | 0.50 | 5k |
+| 10k | 3.3k | 0.25 | 2.5k |
+| 10k | 1k | 0.09 | 909 |
+| 33k | 10k | 0.23 | 7.7k |
+
+- **ADC 应用**：分压器阻抗应 < ADC 输入阻抗的 1/10，必要时加缓冲运放
+- **高精度场景**：用 1% 精度电阻，R1 和 R2 用同一批次减少温漂差异
+- **功率限制**：$P = V^2/R$，小阻值分压器注意发热
+
+---
+
+# RC 低通滤波器
+
+URL: /zh-CN/examples/rc-low-pass-filter
+Raw Markdown: /zh-CN/examples/rc-low-pass-filter.md
+Source: content/examples/rc-low-pass-filter/zh-CN.md
+
+# RC 低通滤波器
+
+RC 低通滤波器是模拟电路中最基础的无源滤波器——一个电阻加一个电容，就能把高频噪声从信号路径上滤掉。做 ADC 前端抗混叠、音频去嘶声、PWM 平滑输出，都会用到它。
+
+## 核心公式
+
+截止频率 $f_c$（-3dB 点）：
+
+$$f_c = \frac{1}{2\pi RC}$$
+
+对于任意频率 $f$ 的输入信号，输出幅度增益为：
+
+$$|H(f)| = \frac{1}{\sqrt{1 + (f/f_c)^2}}$$
+
+## 参数区
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_rc_low_pass_filter",
+  g: {
+    r: 10000,
+    c: 100,
+    f: 1000,
+    cutoff: function () { return 1 / (2 * Math.PI * this.r * this.c * 1e-9); },
+    gain: function () { return 1 / Math.sqrt(1 + Math.pow(this.f / this.cutoff(), 2)); },
+    gainDb: function () { return (20 * Math.log10(this.gain())).toFixed(1); },
+    regimeLabel: function () { return this.f < this.cutoff() * 0.1 ? "通带" : this.f > this.cutoff() * 10 ? "阻带" : "过渡带"; }
+  },
+  layout: {
+    "section:params": {
+      eyebrow: "计算器",
+      title: "RC 低通滤波器",
+      subtitle: "一个电阻加一个电容，把高频噪声滤掉。",
+      "card:params": {
+        title: "参数输入",
+      "grid:inputs": {
+        columns: 1, mdColumns: 2,
+        "column:rField": { "input:r": { label: "电阻 R", "$value": "g.r", type: "number", unit: "Ω", onchange: "g.r = Number($event || 0)" }, "slider:r": { label: "R", "$value": "g.r", min: 100, max: 100000, step: 100, unit: "Ω", onchange: "g.r = Number($event)" } },
+        "column:cField": { "input:c": { label: "电容 C", "$value": "g.c", type: "number", unit: "nF", onchange: "g.c = Number($event || 0)" }, "slider:c": { label: "C", "$value": "g.c", min: 1, max: 1000, step: 1, unit: "nF", onchange: "g.c = Number($event)" } },
+        "column:fField": { "input:f": { label: "输入频率 f", "$value": "g.f", type: "number", unit: "Hz", onchange: "g.f = Number($event || 0)" }, "slider:f": { label: "f", "$value": "g.f", min: 1, max: 100000, step: 1, unit: "Hz", onchange: "g.f = Number($event)" } }
+      },
+      "stat:fc": { label: "截止频率", "$value": "g.cutoff().toFixed(1)", unit: "Hz" },
+      "badge:regime": { "$label": "g.regimeLabel()", "$tone": "g.f < g.cutoff() * 0.1 ? 'success' : g.f > g.cutoff() * 10 ? 'danger' : 'warning'" }
+      }
+    }
+  }
+}
+```
+
+
+## 计算结果
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_rc_low_pass_filter",
+  layout: {
+    "card:results": {
+      title: "计算结果",
+      "formula:fc_eq": { "$tex": "'f_c = \\\\frac{1}{2\\\\pi \\\\times ' + (g.r/1000).toFixed(1) + 'k\\\\Omega \\\\times ' + g.c + '\\\\text{nF}} = ' + g.cutoff().toFixed(1) + '\\\\text{ Hz}'" },
+      "stat:gain_val": { label: "幅值增益 |H(f)|", "$value": "g.gain().toFixed(4)" },
+      "stat:gain_db": { label: "增益", "$value": "g.gainDb()", unit: "dB" },
+      "callout:verdict": { "$tone": "g.f < g.cutoff() * 0.1 ? 'success' : g.f > g.cutoff() * 10 ? 'danger' : 'warning'", "$text": "g.f < g.cutoff() * 0.1 ? '信号完整通过，衰减 < 0.04 dB。' : g.f > g.cutoff() * 10 ? '信号被强烈衰减超过 20 dB，滤波器有效工作。' : '信号处于过渡带，衰减约 ' + (-20 * Math.log10(1 / Math.sqrt(1 + Math.pow(g.f / g.cutoff(), 2)))).toFixed(1) + ' dB。'" }
+    }
+  }
+}
+```
+
+
+## 选型参考
+
+下表是常见场景下的经验参数组合。把截止频率设为目标信号最高频率的 5-10 倍，可以保证通带平坦。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_rc_low_pass_filter",
+  layout: {
+    "card:selection": {
+      title: "选型建议",
+      "table:guide": {
+        columns: ["R", "C", "fc", "典型用途"],
+        rows: [
+          ["1 kΩ", "100 nF", "1592 Hz", "音频低通"],
+          ["10 kΩ", "100 nF", "159 Hz", "ADC 抗混叠"],
+          ["100 kΩ", "10 nF", "159 Hz", "PWM 平滑"],
+          ["1 kΩ", "1 µF", "159 Hz", "电源纹波滤波"],
+          ["10 kΩ", "1 nF", "15915 Hz", "高频噪声抑制"]
+        ]
+      },
+      "callout:tip": { "$tone": "g.cutoff() < 100 ? 'info' : g.cutoff() > 10000 ? 'warning' : 'success'", "$text": "g.cutoff() < 100 ? '低截止频率适合电源滤波和慢信号。' : g.cutoff() > 10000 ? '高截止频率可能无法有效滤除高频噪声。' : '当前截止频率适合大多数应用场景。'" }
+    }
+  }
+}
+```
+
+
+## 工程笔记
+
+- **R 取值**：太大会增加输出阻抗和后级负载效应；太大会增大热噪声。1kΩ–100kΩ 是常用范围
+- **C 取值**：nF 级 NP0/C0G 陶瓷电容温漂小、精度高；超过 100nF 考虑薄膜电容
+- **负载效应**：后级输入阻抗应至少 > 10 × R，否则 $f_c$ 会偏移
+- **级联**：两级 RC 串联可得到 -40dB/dec 的二阶滚降，但截止频率会降低到约 $0.37f_c$
+
+| $f/f_c$ | 增益 | 衰减 |
+|:---:|:---:|:---:|
+| 0.1 | 0.995 | -0.04 dB |
+| 1.0 | 0.707 | -3 dB |
+| 5.0 | 0.196 | -14.2 dB |
+| 10.0 | 0.100 | -20 dB |
+
+---
+
+# 波特率误差计算器
+
+URL: /zh-CN/examples/baud-rate-calculator
+Raw Markdown: /zh-CN/examples/baud-rate-calculator.md
+Source: content/examples/baud-rate-calculator/zh-CN.md
+
+# 波特率误差计算器
+
+嵌入式开发中，UART 波特率由系统时钟分频得到。晶振频率不能整除目标波特率时会产生误差，误差超过 ±2% 通信就可能丢帧。
+
+## 核心公式
+
+$$Error = \frac{|BR_{actual} - BR_{target}|}{BR_{target}} \times 100\%$$
+
+实际波特率 $BR_{actual} = f_{osc} / (16 \times N)$，其中 $N = \text{round}(f_{osc} / (16 \times BR_{target}))$ 为分频寄存器整数。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_baud_rate_calculator",
+  g: {
+    freq: 8,
+    freqUnit: "MHz",
+    baud: 115200,
+    freqHz: function () { var m = { MHz: 1e6, kHz: 1e3, Hz: 1 }; return this.freq * (m[this.freqUnit] || 1e6); },
+    divisor: function () { return this.freqHz() / (16 * this.baud); },
+    regValue: function () { return Math.round(this.divisor()); },
+    actualBaud: function () { return this.freqHz() / (16 * this.regValue()); },
+    error: function () { return Math.abs((this.actualBaud() - this.baud) / this.baud * 100); },
+    reliability: function () { var e = this.error(); return e < 0.5 ? "优秀" : e < 2 ? "可接受" : e < 5 ? "有风险" : "不可用"; },
+    tone: function () { var e = this.error(); return e < 0.5 ? "success" : e < 2 ? "info" : e < 5 ? "warning" : "danger"; }
+  },
+  layout: {
+    "section:baud": {
+      eyebrow: "计算器",
+      title: "波特率误差计算器",
+      subtitle: "输入晶振频率和目标波特率，计算误差。",
+      "card:baud": {
+        title: "波特率误差计算器",
+      "grid:params": {
+        columns: 1, mdColumns: 2,
+        "column:freqField": {
+          "input:freq": { label: "晶振频率", "$value": "g.freq", type: "number", unit: "MHz", onchange: "g.freq = Number($event || 0)" }
+        },
+        "column:baudField": {
+          "select:baud": { label: "目标波特率", "$value": "g.baud", options: [{ label: "9600", value: 9600 }, { label: "19200", value: 19200 }, { label: "38400", value: 38400 }, { label: "57600", value: 57600 }, { label: "115200", value: 115200 }, { label: "230400", value: 230400 }, { label: "460800", value: 460800 }], onchange: "g.baud = Number($event)" }
+        },
+        "column:unitField": {
+          "select:unit": { label: "频率单位", "$value": "g.freqUnit", options: [{ label: "MHz", value: "MHz" }, { label: "kHz", value: "kHz" }, { label: "Hz", value: "Hz" }], onchange: "g.freqUnit = String($event)" }
+        },
+        "column:divField": {
+          "stat:divisor": { label: "分频比", "$value": "g.divisor().toFixed(3)" }
+        }
+      },
+      "formula:equation": { "$tex": "'\\\\text{Error} = \\\\frac{|' + g.actualBaud().toFixed(0) + ' - ' + g.baud + '|}{' + g.baud + '} \\\\times 100\\\\% = ' + g.error().toFixed(2) + '\\\\%'" },
+      "grid:results": {
+        columns: 1, mdColumns: 4,
+        "stat:actualBaud": { label: "实际波特率", "$value": "g.actualBaud().toFixed(0)", unit: "bps" },
+        "stat:error": { label: "误差", "$value": "g.error().toFixed(2)", unit: "%" },
+        "stat:reliability": { label: "可靠性", "$value": "g.reliability()", "$tone": "g.tone()" },
+        "stat:regValue": { label: "寄存器值", "$value": "g.regValue()" }
+      },
+      "callout:advice": { "$tone": "g.tone()", "$text": "g.error() < 0.5 ? '误差极小，通信可靠。' : g.error() < 2 ? '误差在可接受范围内（<2%），绝大多数场景可用。' : g.error() < 5 ? '误差偏大，长帧通信可能失败，建议更换晶振或降低波特率。' : '误差过大，通信不可靠。请选择能整除的晶振频率。'" }
+      }
+    }
+  }
+}
+```
+
+
+## 常用晶振频率与波特率误差表
+
+| 晶振 | 9600 | 19200 | 38400 | 57600 | 115200 |
+|------|------|-------|-------|-------|--------|
+| 1.8432 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |
+| 3.6864 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |
+| 4.0000 MHz | 8.51 | 8.51 | 8.51 | 8.51 | 8.51 |
+| 7.3728 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |
+| 8.0000 MHz | 8.51 | 8.51 | 8.51 | 8.51 | 8.51 |
+| 11.0592 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |
+| 14.7456 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |
+| 16.0000 MHz | 8.51 | 8.51 | 8.51 | 8.51 | 8.51 |
+
+**工程笔记**：
+
+- 零误差的关键：晶振频率能被 $16 \times BR$ 整除
+- **11.0592 MHz** 是 UART 最经典的选择，对所有标准波特率零误差
+- **7.3728 MHz** 和 **14.7456 MHz** 同样零误差
+- 错误 < 2% 在实际工程中通常可工作，但高速长帧场景建议 < 1%
+
+---
+
+# 搜索与过滤表格
+
+URL: /zh-CN/examples/search-filter-table
+Raw Markdown: /zh-CN/examples/search-filter-table.md
+Source: content/examples/search-filter-table/zh-CN.md
+
+# 搜索与过滤表格
+
+文档里放一个静态表格很常见，但加上搜索和过滤就会变成立即可用的工具。这里用 `input` 绑搜索关键词 + 动态过滤 + `collapsible` 展开行详情。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_search_filter",
+  g: {
+    query: "", selected: "", selectedItem: null,
+    allItems: [
+      { id: "btn-1", name: "Button 按钮", category: "Action", status: "ready", notes: "支持 variant 和 size。" },
+      { id: "card-1", name: "Card 卡片", category: "Layout", status: "ready", notes: "最常用的分组容器。" },
+      { id: "input-1", name: "Input 输入框", category: "Input", status: "ready", notes: "支持 type、unit 和 placeholder。" },
+      { id: "tabs-1", name: "Tabs 选项卡", category: "Navigation", status: "ready", notes: "支持水平和垂直方向。" },
+      { id: "table-1", name: "Table 表格", category: "Display", status: "ready", notes: "columns 数组 + rows 数组。" },
+      { id: "formula-1", name: "Formula 公式", category: "Display", status: "ready", notes: "依赖 KaTeX 渲染 LaTeX。" },
+      { id: "toast-1", name: "Toast 通知", category: "Feedback", status: "experimental", notes: "支持 type 变体。" },
+      { id: "secure-1", name: "Secure 安全运行时", category: "Tooling", status: "draft", notes: "基于 iframe 沙箱。" }
+    ],
+    filtered: function () {
+      var q = this.query.toLowerCase();
+      if (!q) return this.allItems;
+      return this.allItems.filter(function (item) { return item.name.toLowerCase().includes(q) || item.category.toLowerCase().includes(q); });
+    },
+    matched: function () { return this.filtered().length; },
+    select: function (id) { this.selected = this.selected === id ? "" : id; }
+  },
+  layout: {
+    "section:search": {
+      eyebrow: "组件查询",
+      title: "搜索与过滤表格",
+      subtitle: "输入关键词实时过滤组件列表，点击任意行查看详情。",
+      "input:query": { label: "搜索组件", "$value": "g.query", type: "text", placeholder: "输入名称或分类关键词...", onchange: "g.query = String($event || '')" },
+      "stat:matched": { "$label": "'匹配结果'", "$value": "g.matched()", "$unit": "'/' + g.allItems.length + ' 项'" },
+      "table:list": {
+        columns: ["名称", "分类", "状态", ""],
+        "$rows": "g.filtered().map(function(item) { return [item.name, item.category, item.status, item.id]; })"
+      },
+      "callout:empty": {
+        "$if": "g.matched() === 0",
+        tone: "warning",
+        "$text": "'未找到匹配「' + g.query + '」的组件。'"
+      }
+    }
+  }
+}
+```
+
+**这个示例的核心技巧：**
+
+- `input` 的 `onchange` 更新 `g.query` → 触发 `g.filtered()` 重新计算
+- `g.filtered()` 用 `filter` 过滤 `allItems` 数组
+- `"$rows"` 动态计算行的二维数组——每个 item 映射为一行
+- `g.matched()` 返回过滤后数量，用于 stat 和 callout 的条件显示
+- `$if` 在无匹配时显示空结果提示
+
+这就是 "搜索框 → 动态表格" 的基础范式。相比硬编码的 table rows，动态 rows 可以随输入实时变化。
+
+---
+
+## 进阶玩法：展开行详情
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_search_filter",
+  layout: {
+    "section:detail": {
+      eyebrow: "组件详情",
+      title: "选中查看详情",
+      "accordion:faq": {
+        multiple: true,
+        items: [
+          { value: "btn-1", label: "Button 按钮", icon: "cursor-click", content: "触发操作的基础组件。支持 variant (solid/outline/ghost) 和 size (sm/md/lg) 等变体。" },
+          { value: "card-1", label: "Card 卡片", icon: "rectangle", content: "内容分组容器。最常用的布局组件之一，比 section 更轻量。" },
+          { value: "input-1", label: "Input 输入框", icon: "textbox", content: "单行或数字输入。支持 type、unit、placeholder 等属性。" }
+        ]
+      }
+    }
+  }
+}
+```
+
+## 为什么动态 rows 值得学？
+
+在静态表格中，rows 是硬编码的二维数组。一旦数据量增加，或者需要按条件筛选，静态 rows 就力不从心了。`$rows` 允许你在 g 方法中动态生成行数据——这对于：
+
+- **文档内数据浏览**：目录、API 列表、配置项
+- **AI 输出展示**：大模型生成的表格结果需要可筛选
+- **知识库查询**：搜索内部组件/API/术语
+
+都非常实用。
+
+---
+
+---
+
+# 项目仪表盘
+
+URL: /zh-CN/examples/project-dashboard
+Raw Markdown: /zh-CN/examples/project-dashboard.md
+Source: content/examples/project-dashboard/zh-CN.md
+
+# 项目仪表盘
+
+真实项目需要一览全局——不是单一张计算卡片，而是一个**仪表盘**。用 `section` 做区块分组，`grid` 做多列布局，每个 card 展示一个关注领域。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_dashboard",
+  g: {
+    sprint: 8, team: 6, sprintProgress: 72, bugs: 12, resolved: 9,
+    scope: "on-track",
+    bugRate: function () { return this.resolved / this.bugs * 100; },
+    teamLoad: function () { return Math.min(100, this.sprint / this.team * 20); },
+    scopeStatus: function () { return this.scope === "on-track" ? "正常" : this.scope === "at-risk" ? "有风险" : "已偏离"; }
+  },
+  layout: {
+    "section:dashboard": {
+      eyebrow: "Sprint 概览",
+      title: "项目仪表盘 · Sprint 24",
+      subtitle: "数据截止今日 10:00 AM。拖滑动条查看不同假想数据的效果。",
+      "grid:row1": {
+        columns: 1, mdColumns: 3,
+        "card:sprint": {
+          title: "Sprint 进度",
+          "progress:sp": { label: "完成度", "$value": "g.sprintProgress" },
+          "stat:scope": { "$label": "范围状态", "$value": "g.scopeStatus()" },
+          "badge:flag": { "$label": "g.scope === 'on-track' ? '正常' : g.scope === 'at-risk' ? '⚠ 预警' : '🚨 偏离'", "$tone": "g.scope === 'on-track' ? 'success' : g.scope === 'at-risk' ? 'warning' : 'danger'" }
+        },
+        "card:quality": {
+          title: "质量指标",
+          "stat:bugs": { label: "剩余缺陷", value: "3", unit: "个" },
+          "progress:bugFix": { label: "修复率", "$value": "g.bugRate()" },
+          "badge:trend": { label: "趋势：改善中", tone: "success" }
+        },
+        "card:team": {
+          title: "团队健康度",
+          "stat:members": { label: "团队成员", value: "6", unit: "人" },
+          "progress:load": { label: "负载指数", "$value": "g.teamLoad()" },
+          "callout:note": { "$tone": "g.teamLoad() > 80 ? 'warning' : 'info'", "$text": "g.teamLoad() > 80 ? '负载偏高，建议调整任务分配。' : '团队负载在健康范围内。'" }
+        }
+      },
+      "card:detail": {
+        title: "详细数据",
+        "table:tasks": {
+          columns: ["任务", "负责人", "状态", "耗时"],
+          rows: [["API 重构", "张三", "已完成", "3d"], ["前端组件", "李四", "进行中", "2d"], ["集成测试", "王五", "代码审查", "1.5d"], ["性能优化", "赵六", "待开始", "—"]]
+        },
+        "callout:help": { "$tone": "g.bugRate() < 80 ? 'warning' : 'success'", "$text": "g.bugRate() < 80 ? '缺陷修复率低于80%，建议优先处理高优先级缺陷。' : '缺陷修复率良好，项目质量可控。'" }
+      }
+    }
+  }
+}
+```
+
+**仪表盘的设计思路：**
+
+- 用 `section` 做顶层分组（带 eyebrow 和 subtitle，语义清晰）
+- 用 `grid` 做多列布局，每个格子放一个 `card`
+- 每个 card 内放不同关注维度的 stat / progress / badge
+- 底部放一个详情 card，展示表格数据（任务列表）
+- 通过 `$text` 和 `$tone` 在 callout 中做条件提示
+
+
+这个模式适用于：技术 Leader 周报面板、发布质检看板、团队 OKR 追踪、SRE 服务大盘。
+
+---
+
+# ToolHost 表单提问
+
+URL: /zh-CN/examples/form-wizard-steps
+Raw Markdown: /zh-CN/examples/form-wizard-steps.md
+Source: content/examples/form-wizard-steps/zh-CN.md
+
+# ToolHost 表单提问
+
+AI 对话过程中，有时需要收集用户信息——创建项目、配置服务、提交工单。这时候 AI 会弹出一个表单卡片，用户填写后提交，AI 继续处理。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_form_wizard",
+  g: {
+    submitted: false,
+    formData: null,
+    fields: { name: "", description: "", type: "web", priority: "medium" },
+    submit: function () {
+      this.submitted = true;
+      this.formData = { name: this.fields.name, description: this.fields.description, type: this.fields.type, priority: this.fields.priority, timestamp: new Date().toLocaleString() };
+    }
+  },
+  layout: {
+    "section:toolhost": {
+      eyebrow: "ToolHost · 表单提问",
+      title: "AI 需要收集信息",
+      subtitle: "AI 弹出表单，用户填写后提交，AI 继续处理。",
+      "callout:context": {
+        tone: "info",
+        text: "AI：我需要为你创建一个新项目，请填写以下信息。"
+      },
+      "grid:fields": {
+        columns: 1, mdColumns: 2,
+        "input:name": { label: "项目名称", "$value": "g.fields.name", placeholder: "my-project", onchange: "g.fields.name = String($event || '')" },
+        "input:description": { label: "项目描述", "$value": "g.fields.description", placeholder: "简短描述项目用途", onchange: "g.fields.description = String($event || '')" },
+        "select:type": {
+          label: "项目类型",
+          "$value": "g.fields.type",
+          options: [
+            { label: "Web 应用", value: "web" },
+            { label: "API 服务", value: "api" },
+            { label: "CLI 工具", value: "cli" }
+          ],
+          onchange: "g.fields.type = String($event)"
+        },
+        "select:priority": {
+          label: "优先级",
+          "$value": "g.fields.priority",
+          options: [
+            { label: "低", value: "low" },
+            { label: "中", value: "medium" },
+            { label: "高", value: "high" }
+          ],
+          onchange: "g.fields.priority = String($event)"
+        }
+      },
+      "grid:actions": {
+        columns: 2,
+        "button:submit": { label: "提交", onclick: "g.submit()" },
+        "button:skip": { label: "跳过" }
+      },
+      "callout:result": {
+        "$tone": "g.submitted ? 'success' : 'info'",
+        "$text": "g.submitted ? '已提交：' + g.formData.name + '（' + g.formData.type + '）' : '等待用户填写...'"
+      },
+      "code-block:toolresult": {
+        title: "返回给 AI 的 ToolResult",
+        language: "json",
+        "$code": "g.submitted ? JSON.stringify({ toolCallId: 'call_abc123', toolName: 'create-project', status: 'submitted', value: g.formData }, null, 2) : '// 提交后显示 ToolResult'"
+      }
+    }
+  }
+}
+```
+
+---
+
+---
+
+# 技术选型评估
+
+URL: /zh-CN/examples/tech-selection-evaluator
+Raw Markdown: /zh-CN/examples/tech-selection-evaluator.md
+Source: content/examples/tech-selection-evaluator/zh-CN.md
+
+# 技术选型评估
+
+团队要选前端框架，React、Vue、Svelte、Angular，各有各的好。性能、生态、学习曲线、维护成本——怎么量化比较？这里用跨 fence 联动，选一个技术栈，下面的评分和结论自动跟着变。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_tech_selection",
+  g: {
+    tech: "react",
+    performance: 85,
+    ecosystem: 95,
+    learning: 70,
+    maintenance: 80,
+    techLabel: function () { return { react: "React", vue: "Vue", svelte: "Svelte", angular: "Angular" }[this.tech] || this.tech; },
+    totalScore: function () { return (this.performance * 0.3 + this.ecosystem * 0.25 + this.learning * 0.2 + this.maintenance * 0.25).toFixed(1); },
+    recommendation: function () { var s = parseFloat(this.totalScore()); return s >= 85 ? "强烈推荐" : s >= 75 ? "推荐" : s >= 60 ? "可以考虑" : "不推荐"; },
+    riskLevel: function () { var s = parseFloat(this.totalScore()); return s >= 85 ? "低" : s >= 75 ? "中" : "高"; },
+    scores: function () {
+      var data = {
+        react: { performance: 85, ecosystem: 95, learning: 70, maintenance: 80 },
+        vue: { performance: 80, ecosystem: 85, learning: 85, maintenance: 85 },
+        svelte: { performance: 95, ecosystem: 70, learning: 90, maintenance: 90 },
+        angular: { performance: 80, ecosystem: 80, learning: 60, maintenance: 75 }
+      };
+      return data[this.tech] || data.react;
+    }
+  },
+  layout: {
+    "section:select": {
+      eyebrow: "决策辅助",
+      title: "技术选型评估",
+      subtitle: "选一个技术栈，下面的评分和结论自动跟着变。",
+      "card:select": {
+        title: "选择技术栈",
+      "select:tech": {
+        label: "技术栈",
+        "$value": "g.tech",
+        options: [
+          { label: "React", value: "react" },
+          { label: "Vue", value: "vue" },
+          { label: "Svelte", value: "svelte" },
+          { label: "Angular", value: "angular" }
+        ],
+        onchange: "g.tech = String($event); var s = g.scores(); g.performance = s.performance; g.ecosystem = s.ecosystem; g.learning = s.learning; g.maintenance = s.maintenance;"
+      },
+      "badge:current": {
+        "$label": "'当前：' + g.techLabel()",
+        tone: "info"
+      }
+      }
+    }
+  }
+}
+```
+
+选了React，觉得性能分太低？拖一下滑块调整，下面的推荐和风险等级实时更新。这就是跨 fence 联动的价值——三个独立的代码块，共享同一份状态。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_tech_selection",
+  layout: {
+    "card:scoring": {
+      title: "评分调整",
+      "grid:sliders": {
+        columns: 1, mdColumns: 2,
+        "column:left": {
+          "slider:performance": { label: "性能（30%）", "$value": "g.performance", min: 0, max: 100, step: 5, onchange: "g.performance = Number($event)" },
+          "slider:ecosystem": { label: "生态系统（25%）", "$value": "g.ecosystem", min: 0, max: 100, step: 5, onchange: "g.ecosystem = Number($event)" }
+        },
+        "column:right": {
+          "slider:learning": { label: "学习曲线（20%）", "$value": "g.learning", min: 0, max: 100, step: 5, onchange: "g.learning = Number($event)" },
+          "slider:maintenance": { label: "维护成本（25%）", "$value": "g.maintenance", min: 0, max: 100, step: 5, onchange: "g.maintenance = Number($event)" }
+        }
+      },
+      "grid:weights": {
+        columns: 1, mdColumns: 4,
+        "stat:perf": { label: "性能（30%）", "$value": "g.performance", unit: "分" },
+        "stat:eco": { label: "生态（25%）", "$value": "g.ecosystem", unit: "分" },
+        "stat:learn": { label: "学习（20%）", "$value": "g.learning", unit: "分" },
+        "stat:maint": { label: "维护（25%）", "$value": "g.maintenance", unit: "分" }
+      }
+    }
+  }
+}
+```
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_tech_selection",
+  layout: {
+    "card:result": {
+      title: "综合评估",
+      "grid:scores": {
+        columns: 1, mdColumns: 3,
+        "stat:total": { label: "综合评分", "$value": "g.totalScore()" },
+        "stat:recommendation": { label: "推荐程度", "$value": "g.recommendation()", "$tone": "parseFloat(g.totalScore()) >= 85 ? 'success' : parseFloat(g.totalScore()) >= 75 ? 'info' : 'warning'" },
+        "stat:risk": { label: "风险等级", "$value": "g.riskLevel()", "$tone": "parseFloat(g.totalScore()) >= 85 ? 'success' : parseFloat(g.totalScore()) >= 75 ? 'warning' : 'danger'" }
+      },
+      "callout:advice": {
+        "$tone": "parseFloat(g.totalScore()) >= 85 ? 'success' : parseFloat(g.totalScore()) >= 75 ? 'info' : 'warning'",
+        "$text": "parseFloat(g.totalScore()) >= 85 ? g.techLabel() + ' 综合优秀，强烈推荐。' : parseFloat(g.totalScore()) >= 75 ? g.techLabel() + ' 综合良好，推荐采用。' : g.techLabel() + ' 综合一般，建议谨慎。'"
+      }
+    }
+  }
+}
+```
+
+
+默认评分参考：
+
+| 技术栈 | 性能 | 生态 | 学习 | 维护 | 综合 |
+|--------|------|------|------|------|------|
+| React | 85 | 95 | 70 | 80 | 82.5 |
+| Vue | 80 | 85 | 85 | 85 | 83.75 |
+| Svelte | 95 | 70 | 90 | 90 | 85.5 |
+| Angular | 80 | 80 | 60 | 75 | 73.75 |
+
+权重分配：性能30%、生态25%、学习曲线20%、维护成本25%。可以按团队实际情况调整。
+
+---
+
+# ToolHost 对话演示
+
+URL: /zh-CN/examples/toolhost-demo
+Raw Markdown: /zh-CN/examples/toolhost-demo.md
+Source: content/examples/toolhost-demo/zh-CN.md
+
+## ToolHost 对话演示
+
+AI 对话中需要收集用户信息时，会调用 **ToolHost** 弹出交互式表单卡片。用户填写并提交后，表单数据以结构化的 `ToolResult` 返回给 AI，AI 继续处理。
+
+下方是一个完整的对话演示——模拟用户请求创建项目，AI 调用 `fill-form` 模板收集项目信息，提交后返回 ToolResult。
+
+**流程：** 用户发起请求 → AI 判断需要工具调用 → ToolHost 弹出表单 → 用户填写并提交 → 返回 ToolResult → AI 继续响应
+
+AI 端调用 ToolHost 的代码如下：
+
+```js
+import { renderToolCall } from "slexkit/toolhost";
+
+const { promise } = renderToolCall({
+  name: "fill-form",
+  arguments: {
+    title: "创建新项目",
+    description: "请填写项目的基本信息。",
+    submitLabel: "提交",
+    ignoreLabel: "取消",
+    fields: [
+      { name: "name", label: "项目名称", type: "text", required: true },
+      { name: "type", label: "项目类型", type: "select", options: [
+        { label: "Web 应用", value: "web" },
+        { label: "API 服务", value: "api" },
+        { label: "CLI 工具", value: "cli" },
+      ]},
+      { name: "priority", label: "优先级", type: "select", options: [
+        { label: "低", value: "low" },
+        { label: "中", value: "medium" },
+        { label: "高", value: "high" },
+      ]},
+    ],
+  },
+}, container);
+
+// 用户提交后，promise resolve 为 ToolResult
+const result = await promise;
+// → { toolName: "fill-form", status: "submitted", value: { name, type, priority } }
+```
+
+---
+
+# 自建还是外购决策
+
+URL: /zh-CN/examples/roi-estimator
+Raw Markdown: /zh-CN/examples/roi-estimator.md
+Source: content/examples/roi-estimator/zh-CN.md
+
+# 自建还是外购决策
+
+技术团队永恒的难题：这个功能是自己做，还是买现成的？这里提供一个结构化决策框架——不是算一个数字，而是多维度权衡。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_build_vs_buy",
+  g: {
+    scope: "core",
+    buildFit: 60, buildTime: 6, buildCost: 80,
+    buyFit: 85, buyTime: 1, buyCost: 40, buyVendorLock: 30,
+    buildTotal: function () { return (this.buildFit + (100 - this.buildCost) + (100 - this.buildTime * 10)) / 3; },
+    buyTotal: function () { return (this.buyFit + (100 - this.buyCost) + (100 - this.buyTime * 10) - this.buyVendorLock * 0.5) / 3; },
+    recommendation: function () {
+      if (this.scope === "core") return this.buildTotal() >= this.buyTotal() ? "自建" : "外购（但建议评估长期成本）";
+      return this.buyTotal() >= this.buildTotal() ? "外购" : "自建（非核心功能自建需谨慎）";
+    },
+    diff: function () { return Math.abs(this.buildTotal() - this.buyTotal()); }
+  },
+  layout: {
+    "section:decision": {
+      eyebrow: "技术决策",
+      title: "自建还是外购决策",
+      subtitle: "对比两个方案的各维度评分，系统综合推荐。拖滑块调整评分看结论变化。",
+      "select:scope": {
+        label: "功能定位",
+        "$value": "g.scope",
+        options: [
+          { label: "核心业务（差异化的关键）", value: "core" },
+          { label: "辅助功能（非核心）", value: "non-core" }
+        ],
+        onchange: "g.scope = String($event)"
+      },
+      "table:comparison": {
+        columns: ["维度", "自建方案", "外购方案"],
+        rows: [
+          ["功能匹配度", "g.buildFit + '%'", "g.buyFit + '%'"],
+          ["上线时间", "g.buildTime + ' 个月'", "g.buyTime + ' 个月'"],
+          ["成本评分", "g.buildCost + '/100'", "g.buyCost + '/100'"],
+          ["供应商锁定", "—", "g.buyVendorLock + '/100'"]
+        ]
+      },
+      "grid:sliders": {
+        columns: 1, mdColumns: 2,
+        "column:build": {
+          "card:buildSliders": {
+            title: "自建方案",
+            "slider:buildFit": { label: "功能匹配度", "$value": "g.buildFit", min: 0, max: 100, step: 5, onchange: "g.buildFit = Number($event)" },
+            "slider:buildTime": { label: "上线时间（月）", "$value": "g.buildTime", min: 1, max: 24, step: 1, unit: "月", onchange: "g.buildTime = Number($event)" },
+            "slider:buildCost": { label: "成本评分", "$value": "g.buildCost", min: 0, max: 100, step: 5, onchange: "g.buildCost = Number($event)" }
+          }
+        },
+        "column:buy": {
+          "card:buySliders": {
+            title: "外购方案",
+            "slider:buyFit": { label: "功能匹配度", "$value": "g.buyFit", min: 0, max: 100, step: 5, onchange: "g.buyFit = Number($event)" },
+            "slider:buyTime": { label: "上线时间（月）", "$value": "g.buyTime", min: 1, max: 24, step: 1, unit: "月", onchange: "g.buyTime = Number($event)" },
+            "slider:buyCost": { label: "成本评分", "$value": "g.buyCost", min: 0, max: 100, step: 5, onchange: "g.buyCost = Number($event)" },
+            "slider:lock": { label: "供应商锁定风险", "$value": "g.buyVendorLock", min: 0, max: 100, step: 5, onchange: "g.buyVendorLock = Number($event)" }
+          }
+        }
+      },
+      "grid:results": {
+        columns: 1, mdColumns: 3,
+        "stat:buildScore": { label: "自建综合得分", "$value": "g.buildTotal().toFixed(1)" },
+        "stat:buyScore": { label: "外购综合得分", "$value": "g.buyTotal().toFixed(1)" },
+        "badge:winner": { "$label": "g.recommendation().startsWith('自建') ? '建议自建' : '建议外购'", "$tone": "g.diff() < 10 ? 'warning' : g.recommendation().startsWith('自建') ? 'info' : 'success'" }
+      },
+      "callout:advice": {
+        "$tone": "g.diff() < 10 ? 'warning' : 'info'",
+        "$text": "g.diff() < 10 ? '两个方案得分非常接近——建议引入更多决策者参与讨论，或做小范围 POC。' : g.recommendation() + ' 方案的得分明显更高。但请结合团队实际能力和战略方向做最终决定。'"
+      },
+      "accordion:detail": {
+        multiple: true,
+        items: [
+          { value: "cost", label: "成本说明", content: "成本评分越低越好（0 = 零成本，100 = 极高成本）。外购方案需额外考虑供应商锁定风险。" },
+          { value: "scope", label: "核心 vs 非核心策略", content: "核心业务功能通常倾向自建以保持控制力和差异化。非核心功能外购可以释放团队精力。" },
+          { value: "hybrid", label: "第三条路：混合方案", content: "也可以考虑先外购快速上线，同时内部规划自建替代方案，等自建成熟后迁移。" }
+        ]
+      }
+    }
+  }
+}
+```
+
+
+**Build vs Buy 决策模型的要点：**
+
+- `select` 定义功能定位（核心/非核心），影响决策偏向
+- 两套 slider 独立调整各自评分
+- `buildTotal()` 和 `buyTotal()` 用加权公式计算综合得分
+- `recommendation()` 结合功能定位和得分给出建议
+- accordion 提供额外的决策指南（成本说明、策略建议、混合方案）
+
+这个框架帮你把"凭感觉拍脑袋"变成"有依据的比较"。
+
+---
+
+# 跨文档状态实验室
+
+URL: /zh-CN/examples/cross-doc-state-lab
+Raw Markdown: /zh-CN/examples/cross-doc-state-lab.md
+Source: content/examples/cross-doc-state-lab/zh-CN.md
+
+# 跨文档状态实验室
+
+这是 SlexKit 最独特的能力之一：**在同一个 Markdown 文档的不同位置放置多块 `slex` 代码，只要它们使用相同的 `namespace`，就会共享同一份 `g` 状态**。
+
+下面是三个独立的 ` ```slex ` fence——一个控制面板和两个观察面板。试试修改控制面板的值，看下方两个面板实时响应。
+
+## 主控面板
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_cross_doc_lab",
+  g: {
+    color: "blue", size: 16, theme: "light",
+    style: function () {
+      return 'color: ' + this.color + '; font-size: ' + this.size + 'px;';
+    }
+  },
+  layout: {
+    "section:control": {
+      eyebrow: "平台能力",
+      title: "跨文档状态实验室 · 主控面板",
+      subtitle: "修改以下任何参数——下方两个独立 fence 块的卡片会同步更新。",
+      "grid:controls": {
+        columns: 1, mdColumns: 3,
+        "select:color": {
+          label: "文字颜色",
+          "$value": "g.color",
+          options: [
+            { label: "蓝色", value: "blue" },
+            { label: "绿色", value: "green" },
+            { label: "橙色", value: "orange" },
+            { label: "紫色", value: "purple" }
+          ],
+          onchange: "g.color = String($event)"
+        },
+        "slider:size": { label: "字体大小", "$value": "g.size", min: 8, max: 48, step: 2, unit: "px", onchange: "g.size = Number($event)" },
+        "select:theme": {
+          label: "卡片主题",
+          "$value": "g.theme",
+          options: [
+            { label: "明亮", value: "light" },
+            { label: "暗色", value: "dark" },
+            { label: "信息", value: "info" }
+          ],
+          onchange: "g.theme = String($event)"
+        }
+      },
+      "badge:note": { "$label": "'样式 ' + g.color + ' ' + g.size + 'px'", tone: "info" }
+    }
+  }
+}
+```
+
+## 观察面板 A（同一 namespace，不同 fence 块）
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_cross_doc_lab",
+  layout: {
+    "card:a": {
+      title: "观察面板 A — 纯文本样式",
+      "stat:size": { "$label": "'字体大小：' + g.size + 'px'", "$value": "g.color" },
+      "callout:preview": {
+        "$tone": "g.theme === 'dark' ? 'danger' : g.theme === 'info' ? 'info' : 'success'",
+        "$text": "g.theme === 'dark' ? '暗色模式：适合夜间阅读的配色方案。' : g.theme === 'info' ? '信息模式：用于强调技术细节。' : '明亮模式：默认的文档阅读配色。'"
+      }
+    }
+  }
+}
+```
+
+## 观察面板 B
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_cross_doc_lab",
+  layout: {
+    "card:b": {
+      title: "观察面板 B — 参数详情",
+      "grid:params": {
+        columns: 1, mdColumns: 3,
+        "stat:col": { label: "颜色", "$value": "g.color" },
+        "stat:sz": { label: "字号", "$value": "g.size", unit: "px" },
+        "stat:th": { label: "主题", "$value": "g.theme" }
+      },
+      "badge:sync": { "$label": "'已同步 ' + g.color", "$tone": "g.color === 'blue' ? 'info' : g.color === 'green' ? 'success' : g.color === 'orange' ? 'warning' : 'info'" }
+    }
+  }
+}
+```
+
+**三个 fence 块**，同一个 `namespace: "example_cross_doc_lab"`，所有组件共享 `g` 对象。上面你在主控面板改颜色和大小，下面两个观察面板马上更新。
+
+---
+
+### 这意味着什么？
+
+假设你在一篇长篇 Markdown 文档中：
+
+```
+[控制面板 — 选择行业/指标/时间范围]
+... 30 段 Markdown 叙事 ...
+[图表 A — 自动反映控制面板的选项]
+... 更多分析文字 ...
+[图表 B — 同一份状态的不同可视化]
+```
+
+每个 ` ```slex ` 块可以独立渲染，但只要 namespace 相同，它们就共享状态。这对于：
+
+- **技术白皮书**：顶部选参数，中间分析，底部结论，全程联动
+- **项目协作文档**：状态跟踪表格在顶部，各团队任务卡片散布在正文中
+- **AI 输出增强**：模型生成的多个可视化节点共享同一份推理结果
+
+
+都是极其强大的模式。这不是一个 "组件库" 能做到的——这是 SlexKit 的核心设计。
+
+---
+
+# JSONPlaceholder 网络请求实验台
+
+URL: /zh-CN/examples/network-policy-fetch-card
+Raw Markdown: /zh-CN/examples/network-policy-fetch-card.md
+Source: content/examples/network-policy-fetch-card/zh-CN.md
+
+# JSONPlaceholder 网络请求实验台
+
+这个示例不再只是展示一段策略配置，而是让用户在沙盒内选择真实的网络任务：读取 posts、查看详情、拉取评论、按用户过滤，或者向 JSONPlaceholder 发起一个演示用 POST。请求不会从 iframe 直接出网，而是通过 `api.fetch()` 交给宿主，由宿主按 allowlist、方法、超时、请求体大小和响应类型决定是否代理。
+
+```slex
+{
+  slex: "0.1",
+  namespace: "example_jsonplaceholder_network_lab",
+  g: {
+    scenario: "posts",
+    postId: 1,
+    userId: 1,
+    timeout: 3000,
+    title: "SlexKit network demo",
+    status: "未请求",
+    statusCode: "-",
+    elapsed: "-",
+    response: "选择一个网络任务，然后点击“发起请求”。",
+    lastUrl: "https://jsonplaceholder.typicode.com/posts",
+    method: function () { return this.scenario === "create" ? "POST" : "GET"; },
+    url: function () {
+      if (this.scenario === "detail") return "https://jsonplaceholder.typicode.com/posts/" + this.postId;
+      if (this.scenario === "comments") return "https://jsonplaceholder.typicode.com/posts/" + this.postId + "/comments";
+      if (this.scenario === "user-posts") return "https://jsonplaceholder.typicode.com/users/" + this.userId + "/posts";
+      if (this.scenario === "create") return "https://jsonplaceholder.typicode.com/posts";
+      return "https://jsonplaceholder.typicode.com/posts?_limit=5";
+    },
+    requestBody: function () {
+      if (this.scenario !== "create") return undefined;
+      return {
+        title: this.title,
+        body: "这是一条从 SlexKit secure runtime 发起、由宿主代理的演示请求。",
+        userId: this.userId
+      };
+    },
+    description: function () {
+      if (this.scenario === "detail") return "读取单篇 post，适合详情页或引用卡片。";
+      if (this.scenario === "comments") return "读取某篇 post 的评论，适合评论摘要、审阅流和证据面板。";
+      if (this.scenario === "user-posts") return "按用户读取 posts，适合个人空间、作者档案或关联资源列表。";
+      if (this.scenario === "create") return "提交一条演示 post。JSONPlaceholder 会返回假写入结果，不会持久化。";
+      return "读取最新 posts 列表，适合 feed、任务列表和知识库索引。";
+    },
+    riskText: function () {
+      if (this.method() === "POST") return "POST 已被限制为 JSONPlaceholder origin，且请求体大小受 policy 约束。";
+      return "GET 请求仍然要经过 origin、超时、响应大小和 content-type 校验。";
+    },
+    requestSnippet: function () {
+      var body = this.requestBody();
+      var lines = [
+        "await api.fetch('" + this.url() + "', {",
+        "  method: '" + this.method() + "',",
+        "  timeoutMs: " + this.timeout + ","
+      ];
+      if (body) lines.push("  body: " + JSON.stringify(body, null, 2).replace(/\n/g, "\n  ") + ",");
+      lines.push("  credentials: 'omit'");
+      lines.push("})");
+      return lines.join("\n");
+    },
+    policyRows: function () {
+      return [
+        { item: "Origin", value: "https://jsonplaceholder.typicode.com", reason: "只允许演示 API" },
+        { item: "Method", value: "GET, POST", reason: "读列表/详情和创建演示数据" },
+        { item: "Credentials", value: "omit", reason: "不携带 cookie 或站点身份" },
+        { item: "Content-Type", value: "application/json", reason: "拒绝非 JSON 响应进入沙盒" },
+        { item: "Body", value: "<= 4096 bytes", reason: "避免大请求体被模型输出滥用" }
+      ];
+    },
+    async run(api) {
+      var targetUrl = String(this.url());
+      this.status = "请求中";
+      this.statusCode = "-";
+      this.elapsed = "-";
+      this.lastUrl = targetUrl;
+      this.response = "等待宿主代理 " + this.method() + " " + targetUrl;
+      try {
+        var result = await api.fetch(targetUrl, {
+          method: this.method(),
+          timeoutMs: this.timeout,
+          body: this.requestBody(),
+          credentials: "omit"
+        });
+        this.status = result.ok ? "成功" : "HTTP 错误";
+        this.statusCode = String(result.status) + " " + result.statusText;
+        this.elapsed = Math.round(result.elapsedMs) + " ms";
+        this.response = JSON.stringify(result.data === undefined ? result.text : result.data, null, 2).slice(0, 2400);
+      } catch (error) {
+        this.status = api.isPolicyError(error) ? "Policy 拦截" : api.isTimeoutError(error) ? "超时" : "网络失败";
+        this.statusCode = api.isPolicyError(error) ? "policy" : api.isTimeoutError(error) ? "timeout" : "network";
+        var elapsedMs = error && typeof error === "object" && typeof error.elapsedMs === "number" ? error.elapsedMs : undefined;
+        this.elapsed = elapsedMs === undefined ? "-" : Math.round(elapsedMs) + " ms";
+        this.response = targetUrl + "\n" + api.errorMessage(error);
+      }
+    },
+    async runBlocked(api) {
+      var targetUrl = "https://example.com/posts/1";
+      this.status = "请求中";
+      this.statusCode = "-";
+      this.elapsed = "-";
+      this.lastUrl = targetUrl;
+      this.response = "这次请求故意访问 allowlist 外的 origin，应该被 host policy 拦截。";
+      try {
+        await api.get(targetUrl, { timeoutMs: this.timeout, credentials: "omit" });
+        this.status = "异常通过";
+        this.statusCode = "unexpected";
+        this.response = "如果看到这行，说明 policy 没有按预期拦截。";
+      } catch (error) {
+        this.status = api.isPolicyError(error) ? "Policy 拦截" : "失败";
+        this.statusCode = api.isPolicyError(error) ? "origin_blocked" : "network";
+        this.response = targetUrl + "\n" + api.errorMessage(error);
+      }
+    }
+  },
+  layout: {
+    "section:network": {
+      eyebrow: "平台能力",
+      title: "JSONPlaceholder 网络请求实验台",
+      subtitle: "在沙盒内选择网络任务，请求通过 host policy 代理。",
+      "card:network": {
+        title: "JSONPlaceholder 请求实验台",
+      "callout:intent": { tone: "info", "$text": "g.description()" },
+      "grid:controls": {
+        columns: 1,
+        mdColumns: 2,
+        "select:scenario": {
+          label: "网络任务",
+          "$value": "g.scenario",
+          options: [
+            { label: "Posts 列表 GET /posts", value: "posts" },
+            { label: "Post 详情 GET /posts/:id", value: "detail" },
+            { label: "评论列表 GET /posts/:id/comments", value: "comments" },
+            { label: "用户 posts GET /users/:id/posts", value: "user-posts" },
+            { label: "创建 post POST /posts", value: "create" }
+          ],
+          onchange: "g.scenario = String($event)"
+        },
+        "slider:postId": { label: "Post ID", "$value": "g.postId", min: 1, max: 10, step: 1, onchange: "g.postId = Number($event)" },
+        "slider:userId": { label: "User ID", "$value": "g.userId", min: 1, max: 10, step: 1, onchange: "g.userId = Number($event)" },
+        "slider:timeout": { label: "超时上限", "$value": "g.timeout", min: 500, max: 8000, step: 500, unit: "ms", onchange: "g.timeout = Number($event)" }
+      },
+      "row:actions": {
+        "button:run": { label: "发起请求", icon: "paper-plane-tilt", onclick: "g.run(api)" },
+        "button:block": { label: "测试拦截", variant: "secondary", icon: "shield-warning", onclick: "g.runBlocked(api)" }
+      },
+      "grid:status": {
+        columns: 1,
+        mdColumns: 3,
+        "stat:method": { label: "方法", "$value": "g.method()" },
+        "stat:status": { label: "状态", "$value": "g.status" },
+        "stat:elapsed": { label: "耗时", "$value": "g.elapsed" }
+      },
+      "code-block:request": { title: "沙盒内请求代码", language: "ts", "$code": "g.requestSnippet()" },
+      "code-block:response": { title: "宿主代理响应", language: "json", "$code": "g.response" },
+      "table:policy_matrix": {
+        columns: [
+          { key: "item", label: "Policy 项" },
+          { key: "value", label: "允许值" },
+          { key: "reason", label: "原因" }
+        ],
+        "$rows": "g.policyRows()"
+      },
+      "callout:policy_note": { "$tone": "g.status === 'Policy 拦截' ? 'warning' : 'success'", "$text": "g.riskText()" }
+      }
+    }
+  }
+}
+```
+
+---
+
 # Accordion
 
 URL: /docs/components/accordion
@@ -2048,6 +3651,64 @@ Horizontal separator, optionally with a centered text label.
 
 ---
 
+# Formula
+
+URL: /docs/components/formula
+Raw Markdown: /docs/components/formula.md
+Source: site/content/components/formula/en-US.md
+
+---
+title: "Formula"
+category: Display
+status: ready
+order: 11
+summary: "Reactive KaTeX formula display."
+---
+# Formula
+
+Render SlexKit state and computed values through KaTeX. Use it when Markdown explains the model and the interactive block needs the formula itself to update.
+
+<!-- slex:spec-example:start component="formula" id="basic" sourceHash="1578d25d" -->
+```slex
+{
+  "slex": "0.1",
+  "namespace": "doc_formula_typical",
+  "g": {
+    "r": 10000,
+    "c": 100,
+    "fc": 159.15
+  },
+  "layout": {
+    "formula:cutoff": {
+      "$tex": "'f_c = \\\\frac{1}{2\\\\pi RC} = ' + g.fc + '\\\\text{ Hz}'"
+    }
+  }
+}
+```
+<!-- slex:spec-example:end -->
+
+## Usage Notes
+
+- Use for formulas whose variables come from SlexKit state.
+- Keep the explanatory derivation in Markdown and use `formula` for the live expression.
+- Use `displayMode: false` for inline formula fragments.
+- Invalid TeX is rendered by KaTeX as an error expression instead of throwing.
+
+## API Reference {#api}
+
+<!-- slex:spec-api:start component="formula" sourceHash="144588e3" -->
+| Field | Type | Required | Dynamic | Default | Description |
+|---|---|---|---|---|---|
+| `tex` | string | No | Yes |  | KaTeX source to render. |
+| `formula` | string | No | Yes |  | Alias for tex. |
+| `value` | string | No | Yes |  | Alias for tex. |
+| `displayMode` | boolean | No | No | `true` | Render as display math when true; inline math when false. |
+| `display` | boolean | No | No | `true` | Alias for displayMode. |
+| `block` | boolean | No | No | `true` | Alias for displayMode. |
+<!-- slex:spec-api:end -->
+
+---
+
 # Grid
 
 URL: /docs/components/grid
@@ -3757,7 +5418,7 @@ ComponentKey = ComponentType ":" Identifier
 - Named components use `Identifier` for instance state and lifecycle hooks.
 - Keys without `:` are not rendered as component nodes.
 
-Reserved context names: `g`, `api`, `$event`, `$item`, `$index`, `$key`.
+Reserved context names: `g`, `std`, `api`, `$event`, `$item`, `$index`, `$key`.
 
 ## 3. Props classification
 
@@ -3814,6 +5475,7 @@ Expressions can access these variables:
 | Variable           | Type                          | Scope                    |
 | ------------------ | ----------------------------- | ------------------------ |
 | `g`                | Reactive state proxy          | Always                   |
+| `std`              | Pure SlexKit standard library | Always                   |
 | Component state    | e.g. `slider.value`           | Named components         |
 | `api`              | Host-injected object          | If `api` option provided |
 | `$event`           | Event data                    | `on*` handlers only      |
@@ -3822,6 +5484,8 @@ Expressions can access these variables:
 | `$key`             | Current item key              | `$for` context only      |
 | Named `$for` alias | e.g. `user` for `"card:user"` | `$for` context only      |
 
+`std` contains deterministic helpers for math, formatting, units, and small statistics. Sensitive capabilities stay under host-injected `api.*` and may require secure runtime policy.
+
 Expression evaluation errors are caught and produce a warning with namespace and path information. The last known value is returned as a fallback.
 
 ## 6. Component instance state
@@ -4232,6 +5896,7 @@ The `RenderContext` provides:
 | Property | Type | Description |
 |----------|------|-------------|
 | `g` | reactive proxy | Global state |
+| `std` | `SlexKitStdlib` | Pure deterministic helpers |
 | `api` | `Record<string, unknown>` | Host-injected capabilities |
 | `dir` | `"ltr"` or `"rtl"` | Resolved direction |
 | `labels` | `Partial<Record<string, string>>` | Runtime labels |
@@ -4301,6 +5966,8 @@ type MountOptions = {
 
 Calling `mount()` again on the same `container` clears the old root first, then appends a new root. The returned cleanup only unmounts the current root; it does not delete the namespace store.
 
+Every expression receives `std`, SlexKit's pure deterministic standard library. Hosts can still inject capability objects through `api`, but network, timers, animation, and canvas should remain policy-gated in secure mode.
+
 ### `ingest(input)`
 
 Ingests state-only Slex: updates `g` without rendering UI. Used by the Markdown runtime host for state-only fences. Returns `true` if parsing succeeded.
@@ -5895,6 +7562,44 @@ slexkitRenderMode: component
 
 All notable changes to SlexKit.
 
+## v0.3.0 - Examples overhaul with component audit and i18n
+
+### Added
+- Example gallery: 17 high-quality examples organized by usage scenario (Getting Started, Calculators, Data Browsing, Dashboards, Config Wizards, Decision Support, Platform Features)
+- English translations for all 17 example pages
+- `toolhost-demo`: real `renderToolCall` API with chat-style conversation UI
+- Example rendering infrastructure: `site/routes/examples.js`, `site/pages/examples.slex.js`, `site/data/examples.js`
+- Formula component (`src/components/svelte/content/Formula.svelte`) with KaTeX rendering
+- `src/engine/capabilities.ts`: structured capability docs for AI agents
+- `src/engine/validation.ts`: SPEC contract validation
+- `src/engine/stdlib.ts`: standard library with `math.clamp`, `math.safeDivide`, and other utilities
+- `src/engine/sandbox-runner.ts`: sandbox runner for secure runtime
+- Component state eval context shadowing test suite (`component-state-shadowing.test.ts`)
+- Collapsible and Callout double-rendering regression tests
+- Slider component name shadowing regression test
+
+### Changed
+- Examples reduced from 64 to 17 high-quality examples, organized by user story
+- Example source locale: `zh-CN` (with `en-US` translations)
+- `renderChildren` (`helpers.ts`) now clears existing content when children are present
+- Switch component now accepts `checked`/`value` props for initialization consistency with Checkbox
+- Site UI: DocsShell, DocRail, router, shell improvements
+- Components: Input, Select, Tabs, Table, PlaygroundMarkdown refinements
+- CSS: theme-shadcn, text-input, docs-shell styling updates
+
+### Fixed
+- Eval context shadowing: component names `g` and `api` no longer overwrite reserved context keys
+- `renderChildren` double rendering in Collapsible and Callout
+- Voltage divider summary typo ("输入输入电压")
+- Salary calculator fallback numbers to match actual calculator output
+- Tabs-and-branching: title and length conversion mismatch
+- 4 pre-existing test failures (ai-docs, page-structure, theme, markdown-content)
+
+### Removed
+- 47 low-quality/duplicate examples (reduced from 64 to 17)
+- Dead "Fallback" copywriting from all example files
+- Unused `DialogShell.svelte` component
+
 ## v0.2.0 - First public release
 
 ### Added
@@ -6182,6 +7887,26 @@ No child components.
 
 ---
 
+## Formula API (`formula`)
+
+Category: Display
+Status: ready
+State mode: none
+Since: 0.1.0
+
+### Props
+- `tex` (string; optional; dynamic): KaTeX source to render.
+- `formula` (string; optional; dynamic): Alias for tex.
+- `value` (string; optional; dynamic): Alias for tex.
+- `displayMode` (boolean; optional; static; default: true): Render as display math when true; inline math when false.
+- `display` (boolean; optional; static; default: true): Alias for displayMode.
+- `block` (boolean; optional; static; default: true): Alias for displayMode.
+
+### Children
+No child components.
+
+---
+
 ## Grid API (`grid`)
 
 Category: Layout