@slexkit/mcp 0.2.0 → 0.3.1

package/dist/data/llms-full.txt

@@ -1,6 +1,6 @@
 # SlexKit Full LLM Documentation
 
-Version: 0.2.0
+Version: 0.3.1
 
 This file concatenates SlexKit's canonical English Markdown docs. `slex` fences are preserved exactly.
 
@@ -27,7 +27,7 @@ Source: README.md
     <a href="README.zh-CN.md">简体中文</a>
   </p>
   <p>
-    <img alt="version" src="https://img.shields.io/badge/version-0.2.0-18181b">
+    <img alt="version" src="https://img.shields.io/badge/version-0.3.1-18181b">
     <img alt="script" src="https://img.shields.io/badge/Slex-v0.1-18181b">
     <img alt="TypeScript" src="https://img.shields.io/badge/runtime-TypeScript-3178c6">
     <img alt="Svelte 5" src="https://img.shields.io/badge/components-Svelte_5-ff3e00">
@@ -43,6 +43,8 @@ It is built for chat messages, documents, agent panels, tool results, and AI-aut
 
 ## Installation
 
+> Just want to use SlexKit in Obsidian? Open **Settings -> Community plugins**, search for **SlexKit**, then install and enable it. The npm package below is for developers integrating SlexKit into web apps, Markdown renderers, Streamdown, or custom hosts.
+
 ```sh
 npm install slexkit
 ```
@@ -127,7 +129,6 @@ Markdown platforms without SlexKit support show the fallback text. Hosts with Sl
 | `@slexkit/components-svelte` | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` | Svelte component registration |
 | `@slexkit/theme-shadcn` | `npm install @slexkit/theme-shadcn` | CSS theme tokens |
 | `@slexkit/streamdown` | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` | React / Streamdown Markdown renderer |
-| `@slexkit/obsidian` | `npm install slexkit @slexkit/obsidian` | Obsidian plugin adapter |
 | `@slexkit/mcp` | `npx -y @slexkit/mcp` | Read-only MCP server for docs, examples, and source validation |
 
 See [Package Boundaries](site/content/reference/packages/en-US.md) for details.
@@ -139,7 +140,7 @@ See [Package Boundaries](site/content/reference/packages/en-US.md) for details.
 | Browser DOM | `mount()`, `ingest()`, `boot()`, `disposeNamespace()` |
 | Markdown renderers | `createSlexKitMarkdownRuntimeHost()` |
 | React / Streamdown | `@slexkit/streamdown` |
-| Obsidian | `@slexkit/obsidian` |
+| Obsidian | Install **SlexKit** from Community Plugins; release repo: <https://github.com/slexkit/obsidian-slexkit> |
 | AI agents | `@slexkit/mcp`, `llms.txt`, SlexKit skill docs |
 | Custom components | `register()`, `registerSvelteComponent()`, `registerSubset()` |
 
@@ -320,6 +321,8 @@ slexkitRenderMode: component
 
 # Getting Started
 
+> Just want to install the Obsidian plugin? Open **Settings -> Community plugins**, search for **SlexKit**, then install and enable it. The rest of this page is for developers integrating SlexKit into web apps, Markdown hosts, Streamdown, or custom runtimes.
+
 Install `slexkit`, mount a trusted fragment, and you're off. Hand off Markdown / React / Obsidian details to dedicated guides — this page keeps the core integration path focused.
 
 ## Installation Entry
@@ -343,7 +346,7 @@ For clearer package boundaries, choose scoped packages by host:
 | Official Svelte component registration | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` |
 | Standalone shadcn-token theme CSS | `npm install @slexkit/theme-shadcn` |
 | React + Streamdown Markdown host | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` |
-| Obsidian vault rendering | `npm install slexkit @slexkit/obsidian` |
+| Obsidian vault rendering | Install **SlexKit** from Obsidian Community Plugins |
 
 `@slexkit/runtime` and `@slexkit/components-svelte` are thin wrappers around the root package, not independent implementations.
 
@@ -458,17 +461,17 @@ slexkitRenderMode: component
 
 # Integration
 
-SlexKit ships two official plugins: Streamdown and Obsidian. Both process only explicit `slex` fences — they don't scan ordinary JavaScript, JSON, or unlabeled code blocks. For the full API and host contract, see the [Host Integration reference](/docs/reference/integration).
+SlexKit ships the Streamdown package in this repository and maintains the official Obsidian plugin in a separate release repository. Both integrations process only explicit `slex` fences — they don't scan ordinary JavaScript, JSON, or unlabeled code blocks. For the full API and host contract, see the [Host Integration reference](/docs/reference/integration).
 
 ## Plugin Selection
 
 | Host | Package | Use case | Runtime boundary |
 |---|---|---|---|
 | React / Streamdown | `@slexkit/streamdown` | Chat messages, AI output, React Markdown pages | trusted or secure |
-| Obsidian | `@slexkit/obsidian` | Slex fences in local vault reading mode | trusted readonly |
+| Obsidian | `slexkit/obsidian-slexkit` | Slex fences in local vault reading mode | trusted readonly |
 | Custom Markdown host | `slexkit` | Product-specific Markdown renderer or document viewer | trusted or secure |
 
-Use the packaged plugin when the host is Streamdown or Obsidian. Use `createSlexKitMarkdownRuntimeHost` directly for custom Markdown renderers.
+Use the packaged plugin when the host is Streamdown. Use the separate [SlexKit plugin repository](https://github.com/slexkit/obsidian-slexkit) for Obsidian installs and releases. Use `createSlexKitMarkdownRuntimeHost` directly for custom Markdown renderers.
 
 Package installation details and release boundaries are tracked in [Package Boundaries](/docs/reference/packages).
 
@@ -559,15 +562,26 @@ The secure runtime deployment checklist lives in [Secure Runtime Setup](security
 
 ## Obsidian
 
+> If your goal is only to install the Obsidian plugin, you do not need the developer integration material above. Search for **SlexKit** in Obsidian **Community plugins**, then install and enable it.
+
 The Obsidian plugin targets local vault content. It registers a `slex` code block processor in reading mode, renders the fence as a readonly interactive fragment, and does not write output back to notes.
 
-Build the plugin:
+Install the plugin from Obsidian Community Plugins:
 
-```sh
-bun run --filter @slexkit/obsidian build
+1. Open **Settings -> Community plugins**.
+2. Disable **Restricted mode** if needed.
+3. Search for **SlexKit**.
+4. Install and enable the plugin.
+
+The current community release is desktop-only until mobile vault testing is complete. The plugin is compatible with Obsidian 1.5.0+.
+
+BRAT and manual release assets remain useful for testing unreleased builds:
+
+```text
+BRAT repository: https://github.com/slexkit/obsidian-slexkit
 ```
 
-Copy release assets into the vault:
+Manual installs copy the GitHub release assets into the vault:
 
 ```text
 .obsidian/plugins/slexkit/
@@ -603,7 +617,7 @@ Blocks in the same note share one Markdown artifact runtime, so a state-only fen
 
 ## Obsidian Boundary
 
-`@slexkit/obsidian` v0 is a trusted readonly adapter. Content comes from the user's local vault; the plugin is not a sandbox for third-party Markdown or agent output.
+The official plugin is a trusted readonly adapter. Content comes from the user's local vault; the plugin is not a sandbox for third-party Markdown or agent output.
 
 For untrusted content, use secure mode in a web host with an explicit sandbox frame and host policy.
 
@@ -1058,7 +1072,7 @@ For exact policy fields and allowed adapter hooks, use the [Security Runtime Con
 
 `@slexkit/streamdown` can run trusted or secure. Use secure mode for chat messages and agent output unless the message source is already trusted by the host.
 
-`@slexkit/obsidian` v0 is a trusted readonly adapter for local vault content. It should not be used as the isolation boundary for third-party Markdown or direct agent output.
+The official Obsidian plugin is a trusted readonly adapter for local vault content. It should not be used as the isolation boundary for third-party Markdown or direct agent output.
 
 Custom Markdown hosts should still process only fences whose language is exactly `slex` and should preserve readable Markdown fallback for non-SlexKit environments.
 
@@ -1089,175 +1103,1776 @@ summary: "LLM docs, MCP server, skills, and authoring rules for SlexKit agents."
 slexkitRenderMode: component
 ---
 
-# AI / Agents
+# AI / Agents
+
+## AI Accessible Documentation
+
+SlexKit follows the assistant-ui information architecture: a clear index, a full-context file, task-oriented skills, and a minimal MCP surface. Raw docs stay as `.md` pages, and interactive examples use explicit `slex` fences.
+
+```slex
+{
+  namespace: "ai_docs_links",
+  layout: {
+    "column:links": {
+      gap: "sm",
+      "link:index": { href: "/llms.txt", text: "/llms.txt - docs index", icon: "list-magnifying-glass" },
+      "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" },
+      "text:note": { text: "Raw docs use .md routes such as /docs/components/card.md. Do not add .mdx routes." }
+    }
+  }
+}
+```
+
+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-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.
+
+## Context Files
+
+Add SlexKit context to `AGENTS.md`, `CLAUDE.md`, or `.cursorrules`:
+
+````md
+## SlexKit
+
+This project uses SlexKit for Markdown-native interactive AI output.
+
+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`.
+````
+
+## Skills
+
+The `skills/` directory provides these task entry points:
+
+- `/slexkit`: overview, architecture boundaries, and positioning
+- `/author`: write display-oriented `slex` fences with Markdown fallback
+- `/host`: integrate Markdown, Streamdown, Obsidian, or custom hosts
+- `/toolhost`: build confirmations, choices, and structured forms
+- `/secure`: configure sandbox runtime and host policy
+- `/update`: regenerate AI docs after API, docs, or component changes
+
+Use `/author` for display UI. Use `/toolhost` when the host must receive a submitted result.
+
+## MCP
+
+`@slexkit/mcp` provides read-only access to SlexKit documentation, examples, and Slex source validation. Keep the public surface small and natural: docs, examples, validate.
+
+```slex
+{
+  namespace: "ai_mcp_tools",
+  layout: {
+    "grid:tools": {
+      columns: 1,
+      mdColumns: 3,
+      "card:docs": {
+        title: "slexkitDocs",
+        icon: "book-open-text",
+        "text:body": { text: "Search or fetch Markdown docs by query, group, slug, or raw .md URL." }
+      },
+      "card:examples": {
+        title: "slexkitExamples",
+        icon: "code",
+        "text:body": { text: "Browse component examples, ToolHost templates, and host integration snippets." }
+      },
+      "card:validate": {
+        title: "slexkitValidate",
+        icon: "check-circle",
+        "text:body": { text: "Parse Slex source and return diagnostics plus component usage." }
+      }
+    }
+  }
+}
+```
+
+### Quick Install
+
+```sh
+npx add-mcp @slexkit/mcp
+```
+
+Or specify an app:
+
+```sh
+npx add-mcp @slexkit/mcp -a claude-code
+npx add-mcp @slexkit/mcp -a codex
+npx add-mcp @slexkit/mcp -a cursor
+npx add-mcp @slexkit/mcp -a vscode
+npx add-mcp @slexkit/mcp -a zed
+```
+
+### Manual Installation
+
+```slex
+{
+  namespace: "ai_manual_configs",
+  layout: {
+    "tabs:manualConfigs": {
+      value: "cursor",
+      tabs: [
+        {
+          value: "cursor",
+          label: "Cursor",
+          content: {
+            "code-block:cursor": {
+              title: ".cursor/mcp.json",
+              language: "json",
+              code: "{\n  \"mcpServers\": {\n    \"slexkit\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@slexkit/mcp\"]\n    }\n  }\n}"
+            }
+          }
+        },
+        {
+          value: "codex",
+          label: "Codex",
+          content: {
+            "code-block:codex": {
+              title: "config.toml",
+              language: "toml",
+              code: "[mcp_servers.slexkit]\ncommand = \"npx\"\nargs = [\"-y\", \"@slexkit/mcp\"]"
+            }
+          }
+        },
+        {
+          value: "vscode",
+          label: "VS Code",
+          content: {
+            "code-block:vscode": {
+              title: ".vscode/mcp.json",
+              language: "json",
+              code: "{\n  \"servers\": {\n    \"slexkit\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@slexkit/mcp\"],\n      \"type\": \"stdio\"\n    }\n  }\n}"
+            }
+          }
+        }
+      ]
+    }
+  }
+}
+```
+
+## Troubleshooting
+
+- MCP server does not start: verify `npx` and MCP config JSON, then restart the IDE.
+- Tool calls fail: restart the MCP server and confirm `tools/list` exposes only `slexkitDocs`, `slexkitExamples`, and `slexkitValidate`.
+- Docs are stale: run `bun run ai:docs` or `bun run build:core`.
+- Wrong raw source route: use `.md` routes with `slex` fences. Do not request `.mdx`.
+
+---
+
+# 你的第一个 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:countStat": { 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": {
+      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": {
+      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": {
+      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": {
+      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:baudCalculator": {
+      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
 
-## AI Accessible Documentation
+# 自建还是外购决策
 
-SlexKit follows the assistant-ui information architecture: a clear index, a full-context file, task-oriented skills, and a minimal MCP surface. Raw docs stay as `.md` pages, and interactive examples use explicit `slex` fences.
+技术团队永恒的难题：这个功能是自己做，还是买现成的？这里提供一个结构化决策框架——不是算一个数字，而是多维度权衡。
 
 ```slex
 {
-  namespace: "ai_docs_links",
+  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: {
-    "column:links": {
-      gap: "sm",
-      "link:index": { href: "/llms.txt", text: "/llms.txt - docs index", icon: "list-magnifying-glass" },
-      "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: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" },
-      "text:note": { text: "Raw docs use .md routes such as /docs/components/card.md. Do not add .mdx routes." }
+    "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: "也可以考虑先外购快速上线，同时内部规划自建替代方案，等自建成熟后迁移。" }
+        ]
+      }
     }
   }
 }
 ```
 
-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.
-
-SlexKit raw docs are ordinary `.md` pages with explicit `slex` fences. There is no `.mdx` route — `slex` fences are the interactive layer.
 
-## Context Files
+**Build vs Buy 决策模型的要点：**
 
-Add SlexKit context to `AGENTS.md`, `CLAUDE.md`, or `.cursorrules`:
+- `select` 定义功能定位（核心/非核心），影响决策偏向
+- 两套 slider 独立调整各自评分
+- `buildTotal()` 和 `buyTotal()` 用加权公式计算综合得分
+- `recommendation()` 结合功能定位和得分给出建议
+- accordion 提供额外的决策指南（成本说明、策略建议、混合方案）
 
-````md
-## SlexKit
+这个框架帮你把"凭感觉拍脑袋"变成"有依据的比较"。
 
-This project uses SlexKit for Markdown-native interactive AI output.
+---
 
-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.
-- 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`.
-````
+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
 
-## Skills
+# 跨文档状态实验室
 
-The `skills/` directory provides these task entry points:
+这是 SlexKit 最独特的能力之一：**在同一个 Markdown 文档的不同位置放置多块 `slex` 代码，只要它们使用相同的 `namespace`，就会共享同一份 `g` 状态**。
 
-- `/slexkit`: overview, architecture boundaries, and positioning
-- `/author`: write display-oriented `slex` fences with Markdown fallback
-- `/host`: integrate Markdown, Streamdown, Obsidian, or custom hosts
-- `/toolhost`: build confirmations, choices, and structured forms
-- `/secure`: configure sandbox runtime and host policy
-- `/update`: regenerate AI docs after API, docs, or component changes
+下面是三个独立的 ` ```slex ` fence——一个控制面板和两个观察面板。试试修改控制面板的值，看下方两个面板实时响应。
 
-Use `/author` for display UI. Use `/toolhost` when the host must receive a submitted result.
+## 主控面板
 
-## MCP
+```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" }
+    }
+  }
+}
+```
 
-`@slexkit/mcp` provides read-only access to SlexKit documentation, examples, and Slex source validation. Keep the public surface small and natural: docs, examples, validate.
+## 观察面板 A（同一 namespace，不同 fence 块）
 
 ```slex
 {
-  namespace: "ai_mcp_tools",
+  slex: "0.1",
+  namespace: "example_cross_doc_lab",
   layout: {
-    "grid:tools": {
-      columns: 1,
-      mdColumns: 3,
-      "card:docs": {
-        title: "slexkitDocs",
-        icon: "book-open-text",
-        "text:body": { text: "Search or fetch Markdown docs by query, group, slug, or raw .md URL." }
-      },
-      "card:examples": {
-        title: "slexkitExamples",
-        icon: "code",
-        "text:body": { text: "Browse component examples, ToolHost templates, and host integration snippets." }
+    "card:a": {
+      title: "观察面板 A — 纯文本样式",
+      "column:stylePreview": {
+        "text:styleMeta": { "$text": "'字体大小：' + g.size + 'px'" },
+        "text:styledValue": { "$text": "g.color", "$color": "g.color", "$size": "g.size" }
       },
-      "card:validate": {
-        title: "slexkitValidate",
-        icon: "check-circle",
-        "text:body": { text: "Parse Slex source and return diagnostics plus component usage." }
+      "callout:preview": {
+        "$tone": "g.theme === 'dark' ? 'danger' : g.theme === 'info' ? 'info' : 'success'",
+        "$text": "g.theme === 'dark' ? '暗色模式：适合夜间阅读的配色方案。' : g.theme === 'info' ? '信息模式：用于强调技术细节。' : '明亮模式：默认的文档阅读配色。'"
       }
     }
   }
 }
 ```
 
-### Quick Install
+## 观察面板 B
 
-```sh
-npx add-mcp @slexkit/mcp
+```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'" }
+    }
+  }
+}
 ```
 
-Or specify an app:
+**三个 fence 块**，同一个 `namespace: "example_cross_doc_lab"`，所有组件共享 `g` 对象。上面你在主控面板改颜色和大小，下面两个观察面板马上更新。
+
+---
+
+### 这意味着什么？
+
+假设你在一篇长篇 Markdown 文档中：
 
-```sh
-npx add-mcp @slexkit/mcp -a claude-code
-npx add-mcp @slexkit/mcp -a codex
-npx add-mcp @slexkit/mcp -a cursor
-npx add-mcp @slexkit/mcp -a vscode
-npx add-mcp @slexkit/mcp -a zed
+```
+[控制面板 — 选择行业/指标/时间范围]
+... 30 段 Markdown 叙事 ...
+[图表 A — 自动反映控制面板的选项]
+... 更多分析文字 ...
+[图表 B — 同一份状态的不同可视化]
 ```
 
-### Manual Installation
+每个 ` ```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
 {
-  namespace: "ai_manual_configs",
+  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: {
-    "tabs:manualConfigs": {
-      value: "cursor",
-      tabs: [
-        {
-          value: "cursor",
-          label: "Cursor",
-          content: {
-            "code-block:cursor": {
-              title: ".cursor/mcp.json",
-              language: "json",
-              code: "{\n  \"mcpServers\": {\n    \"slexkit\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@slexkit/mcp\"]\n    }\n  }\n}"
-            }
-          }
-        },
-        {
-          value: "codex",
-          label: "Codex",
-          content: {
-            "code-block:codex": {
-              title: "config.toml",
-              language: "toml",
-              code: "[mcp_servers.slexkit]\ncommand = \"npx\"\nargs = [\"-y\", \"@slexkit/mcp\"]"
-            }
-          }
+    "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)"
         },
-        {
-          value: "vscode",
-          label: "VS Code",
-          content: {
-            "code-block:vscode": {
-              title: ".vscode/mcp.json",
-              language: "json",
-              code: "{\n  \"servers\": {\n    \"slexkit\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@slexkit/mcp\"],\n      \"type\": \"stdio\"\n    }\n  }\n}"
-            }
-          }
-        }
-      ]
+        "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()" }
+      }
     }
   }
 }
 ```
 
-## Troubleshooting
-
-- MCP server does not start: verify `npx` and MCP config JSON, then restart the IDE.
-- Tool calls fail: restart the MCP server and confirm `tools/list` exposes only `slexkitDocs`, `slexkitExamples`, and `slexkitValidate`.
-- Docs are stale: run `bun run ai:docs` or `bun run build:core`.
-- Wrong raw source route: use `.md` routes with `slex` fences. Do not request `.mdx`.
-
 ---
 
 # Accordion
@@ -2048,6 +3663,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
@@ -2429,8 +4102,8 @@ Single-line text input with controlled value, placeholder, label, description, n
 - Related components: `select` for option selection, `slider` for numeric ranges.
 - Typically placed inside a `column` to compose forms.
 - Use `$value` and `onchange` for state binding.
-- Numeric inputs show decrement and increment buttons by default. Use `step`, `min`, and `max` to define quick-adjust behavior, or set `controls: false` to hide them.
-- `onchange` fires when the user edits the value or clicks a step control.
+- Numeric and engineering inputs render only the native input. Use `slider` for range adjustment; SlexKit no longer adds custom decrement or increment buttons.
+- `onchange` fires when the user edits the value.
 - `type: "number"` still emits a string value. Convert with `Number($event)` or use `type: "engineering"` to read parsed results.
 - Use `invalid` plus `error` for validation feedback. Error text is linked through `aria-describedby`.
 
@@ -2497,7 +4170,7 @@ Supports scientific notation and SI prefixes: `p`, `n`, `u`, `µ`, `m`, `k`, `K`
 
 ## API Reference {#api}
 
-<!-- slex:spec-api:start component="input" sourceHash="08bdd046" -->
+<!-- slex:spec-api:start component="input" sourceHash="a1afe57e" -->
 | Field | Type | Required | Dynamic | Default | Description |
 |---|---|---|---|---|---|
 | `value` | string | No | Yes |  | Current input value. |
@@ -2520,7 +4193,6 @@ Supports scientific notation and SI prefixes: `p`, `n`, `u`, `µ`, `m`, `k`, `K`
 | `min` | string \| number | No | Yes |  | Minimum value used by numeric input controls. |
 | `max` | string \| number | No | Yes |  | Maximum value used by numeric input controls. |
 | `step` | string \| number | No | Yes |  | Step size used by numeric input controls. |
-| `controls` | boolean | No | Yes | `true` | Show decrement and increment buttons for numeric inputs. |
 | `onchange` | write-expression | No | No |  | Write expression invoked when the value changes. |
 <!-- slex:spec-api:end -->
 
@@ -3595,13 +5267,15 @@ Output text content for status messages, descriptions, and result display.
 
 ## API Reference {#api}
 
-<!-- slex:spec-api:start component="text" sourceHash="32589fbc" -->
+<!-- slex:spec-api:start component="text" sourceHash="745fea9a" -->
 | Field | Type | Required | Dynamic | Default | Description |
 |---|---|---|---|---|---|
 | `text` | string | No | Yes |  | Displayed text. |
 | `content` | string | No | Yes |  | Alias for text. |
 | `label` | string | No | Yes |  | Alias for text. |
 | `variant` | string: default, muted | No | No | `"default"` | Text visual variant. |
+| `color` | string | No | Yes |  | Optional CSS color for controlled previews. |
+| `size` | string \| number | No | Yes |  | Optional font size. Numbers are treated as px. |
 | `class` | string | No | No |  | Additional host-controlled CSS class. |
 <!-- slex:spec-api:end -->
 
@@ -3757,7 +5431,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 +5488,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 +5497,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 +5909,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 +5979,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.
@@ -4655,16 +6335,16 @@ The renderer handles `slex` fences. It supports both trusted and secure runtime
 
 ## Obsidian integration
 
-The `@slexkit/obsidian` package registers the `slex` fenced code block processor in Obsidian:
+The official Obsidian plugin lives in <https://github.com/slexkit/obsidian-slexkit> and registers the `slex` fenced code block processor:
 
 ```ts
-// In the Obsidian plugin:
+// In the plugin:
 registerMarkdownCodeBlockProcessor("slex", (source, el, ctx) => { ... });
 ```
 
 The adapter renders blocks in **reading mode only** and does not write back to the vault. Blocks within the same note share a trusted artifact runtime.
 
-**Important**: The Obsidian adapter uses trusted mode because it renders content from the user's login vault. It is not designed as a security boundary for untrusted or agent-generated Markdown.
+**Important**: The Obsidian adapter uses trusted mode because it renders content from the user's local vault. It is not designed as a security boundary for untrusted or agent-generated Markdown.
 
 ## Writing a custom host adapter
 
@@ -5048,7 +6728,6 @@ slexkit (root - real code)
  @slexkit/components-svelte (thin wrapper) ─── re-exports slexkit/components-svelte
  @slexkit/theme-shadcn ─── CSS only
  @slexkit/streamdown ─── React/Streamdown renderer
- @slexkit/obsidian ─── Obsidian plugin
  @slexkit/mcp ─── read-only MCP server for AI agents
 ```
 
@@ -5140,15 +6819,15 @@ export function Message({ markdown }: { markdown: string }) {
 
 Processes `slex` fences. Supports both trusted and secure runtime modes.
 
-## @slexkit/obsidian
+## Obsidian plugin
 
-Obsidian plugin adapter. Registers SlexKit fenced code block processors and renders local vault content in reading mode.
+The official Obsidian plugin lives in a separate release repository: <https://github.com/slexkit/obsidian-slexkit>.
 
-```sh
-npm install slexkit @slexkit/obsidian
-```
+Install **SlexKit** through Obsidian Community Plugins for normal vault use. Use BRAT or manual GitHub release assets only when testing unreleased builds from `slexkit/obsidian-slexkit`.
 
-The adapter uses trusted runtime mode -it renders content from the user's local vault and is not designed as a sandbox for third-party or agent-generated Markdown. Obsidian secure sandbox support is not part of the v0 adapter.
+The community plugin is currently desktop-only and compatible with Obsidian 1.5.0+. Mobile support should be enabled only after real mobile vault testing.
+
+The adapter uses trusted runtime mode - it renders content from the user's local vault and is not designed as a sandbox for third-party or agent-generated Markdown. Secure sandbox support is not part of the v0 adapter.
 
 ## @slexkit/mcp
 
@@ -5169,7 +6848,7 @@ The server does not modify project files. Use it when an agent needs current Sle
 | With Svelte components | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` |
 | Add shadcn theme | `npm install @slexkit/theme-shadcn` |
 | React/Streamdown host | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` |
-| Obsidian plugin | `npm install slexkit @slexkit/obsidian` |
+| Obsidian plugin | Install **SlexKit** from Obsidian Community Plugins |
 | AI agent MCP server | `npx -y @slexkit/mcp` |
 
 ## v0 packaging strategy
@@ -5186,7 +6865,7 @@ bun run test
 bun run smoke:release
 ```
 
-The release smoke packs and installs every scoped package, verifies public entry points, verifies CSS subpath exports, loads the Obsidian CJS bundle with an Obsidian module mock, and starts the MCP stdio binary to check `initialize`, `tools/list`, and `slexkitValidate`.
+The release smoke packs and installs every scoped package in this repository, verifies public entry points, verifies CSS subpath exports, and starts the MCP stdio binary to check `initialize`, `tools/list`, and `slexkitValidate`.
 
 ---
 
@@ -5822,7 +7501,7 @@ A generation should include a plain Markdown fallback so the output degrades gra
 
 ~~~~md
 ```slex
-{ namespace: "status", ... }
+{ namespace: "status", layout: { "badge:state": { label: "3/4 complete", tone: "info" } } }
 ```
 
 **Status:** 3/4 complete
@@ -5895,6 +7574,62 @@ slexkitRenderMode: component
 
 All notable changes to SlexKit.
 
+## v0.3.1 - Host stability and control rendering hardening
+
+### Added
+- Runtime style safety tests that block broad `:has()` selectors, `clip-path`, and slider track regressions in shipped CSS.
+- Regression coverage for disabled Switch, Checkbox, and Radio state attributes.
+
+### Changed
+- CI now installs dependencies with `bun install --frozen-lockfile` and runs lint before tests.
+- Disabled Switch, Checkbox, and Radio styling now uses explicit `data-disabled` attributes instead of broad relational selectors.
+- Select and sr-only helper styles avoid `clip-path` for better host and Obsidian CSS compatibility.
+
+### Fixed
+- Slider thumb rendering artifacts caused by painting the range track on the native input box.
+- Input focus visibility after removing custom engineering steppers.
+- Home RC example input labels now use native Input component labels instead of separate text labels.
+- Stat cards no longer clip updated text during cross-document state examples.
+- Markdown calculator examples no longer render duplicate section labels.
+
+## 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 +7917,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
@@ -6251,7 +8006,6 @@ Since: 0.1.0
 - `min` (string | number; optional; dynamic): Minimum value used by numeric input controls.
 - `max` (string | number; optional; dynamic): Maximum value used by numeric input controls.
 - `step` (string | number; optional; dynamic): Step size used by numeric input controls.
-- `controls` (boolean; optional; dynamic; default: true): Show decrement and increment buttons for numeric inputs.
 - `onchange` (write-expression; optional; static): Write expression invoked when the value changes.
 
 ### Children
@@ -6551,6 +8305,8 @@ Since: 0.1.0
 - `content` (string; optional; dynamic): Alias for text.
 - `label` (string; optional; dynamic): Alias for text.
 - `variant` (string; optional; static; default: "default"; values: default, muted): Text visual variant.
+- `color` (string; optional; dynamic): Optional CSS color for controlled previews.
+- `size` (string | number; optional; dynamic): Optional font size. Numbers are treated as px.
 - `class` (string; optional; static): Additional host-controlled CSS class.
 
 ### Children