slexkit 0.2.0 → 0.3.1

package/dist/ai/slexkit-ai-manifest.json

@@ -1,32 +1,38 @@
 {
   "name": "slexkit-ai-docs",
   "packageName": "slexkit",
-  "version": "0.2.0",
-  "generatedAt": "2026-05-29T16:08:38.010Z",
+  "version": "0.3.1",
+  "generatedAt": "2026-06-20T08:01:21.373Z",
   "docs": {
     "llms.txt": {
       "path": "/llms.txt",
       "title": "llms.txt",
       "summary": "- [Full documentation](/llms-full.txt): all canonical English docs pages in one text file.",
-      "hash": "d1a1d567"
+      "hash": "1445b5b6"
     },
     "llms-full.txt": {
       "path": "/llms-full.txt",
       "title": "llms-full.txt",
-      "summary": "Version: 0.2.0",
-      "hash": "578d915f"
+      "summary": "Version: 0.3.1",
+      "hash": "000eb11f"
     },
     "llms-components.txt": {
       "path": "/llms-components.txt",
       "title": "llms-components.txt",
       "summary": "Use these components inside Markdown `slex` fences. Raw component docs are ordinary `.md` pages that preserve `slex` examples.",
-      "hash": "7322df08"
+      "hash": "e2ea8c54"
     },
     "llms-runtime.txt": {
       "path": "/llms-runtime.txt",
       "title": "llms-runtime.txt",
       "summary": "Raw Markdown: /docs/reference/spec.md",
-      "hash": "97f74329"
+      "hash": "edb2cc90"
+    },
+    "llms-capabilities.txt": {
+      "path": "/llms-capabilities.txt",
+      "title": "llms-capabilities.txt",
+      "summary": "Use `std.*` for pure deterministic calculations and formatting. Use `api.*` only for host-injected or secure-runtime capabilities that may require policy.",
+      "hash": "89c92bfd"
     },
     "llms-toolhost.txt": {
       "path": "/llms-toolhost.txt",
@@ -38,7 +44,7 @@
       "path": "/llms-authoring.txt",
       "title": "llms-authoring.txt",
       "summary": "SlexKit's agent-readable source is Markdown with explicit `slex` fences. Do not use `.mdx`; `slex` fences are the interactive layer.",
-      "hash": "1d27a35f"
+      "hash": "fcc8b8b6"
     }
   },
   "pages": [
@@ -50,8 +56,8 @@
       "href": "/",
       "rawHref": "/README.md",
       "sourcePath": "README.md",
-      "body": "<div align=\"center\">\n  <p>\n    <img src=\"site/assets/logo.svg\" alt=\"SlexKit\" width=\"84\" height=\"84\" />\n  </p>\n  <h1>SlexKit</h1>\n  <p><strong>Streaming Live EXpressions Kit</strong></p>\n  <p>\n    \"Docs as tools, tools as docs.\" Give Markdown interactive power and make every AI output come alive.\n  </p>\n  <p>\n    <a href=\"site/content/guides/intro/en-US.md\">Documentation</a> ·\n    <a href=\"site/content/components/accordion/en-US.md\">Components</a> ·\n    <a href=\"site/content/reference/spec/en-US.md\">Specification</a> ·\n    <a href=\"site/content/guides/ai-agents/en-US.md\">AI / Agents</a> ·\n    <a href=\"README.zh-CN.md\">简体中文</a>\n  </p>\n  <p>\n    <img alt=\"version\" src=\"https://img.shields.io/badge/version-0.2.0-18181b\">\n    <img alt=\"script\" src=\"https://img.shields.io/badge/Slex-v0.1-18181b\">\n    <img alt=\"TypeScript\" src=\"https://img.shields.io/badge/runtime-TypeScript-3178c6\">\n    <img alt=\"Svelte 5\" src=\"https://img.shields.io/badge/components-Svelte_5-ff3e00\">\n    <img alt=\"license\" src=\"https://img.shields.io/badge/license-MIT-16a34a\">\n  </p>\n</div>\n\n## Live interface blocks inside Markdown\n\n**SlexKit** turns explicit `slex` Markdown fences into live, stateful UI blocks. A Slex source is just a JavaScript object literal: `g` holds state and logic, `layout` describes the component tree, and the browser runtime renders the result in place.\n\nIt is built for chat messages, documents, agent panels, tool results, and AI-authored dashboards. It is not a full application framework.\n\n## Installation\n\n```sh\nnpm install slexkit\n```\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\n## Usage\n\n```html\n<div id=\"app\"></div>\n\n<script type=\"module\">\n  import { mount } from \"slexkit\";\n  import \"slexkit/style.css\";\n\n  mount(\n    {\n      slex: \"0.1\",\n      namespace: \"hello\",\n      g: { name: \"World\", count: 0 },\n      layout: {\n        \"card:greeting\": {\n          title: \"Greeting\",\n          \"text:message\": {\n            \"$text\": \"'Hello, ' + g.name + '! Count: ' + g.count\"\n          },\n          \"button:add\": {\n            label: \"+1\",\n            onclick: \"g.count++\"\n          }\n        }\n      }\n    },\n    document.getElementById(\"app\")\n  );\n</script>\n```\n\n## Markdown Native\n\nSlexKit-capable hosts process explicit `slex` fences only. Plain `js`, `json`, and unlabeled code blocks stay inert.\n\n````md\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"status\",\n  g: { done: 3, total: 4 },\n  layout: {\n    \"badge:state\": { label: \"Ready\", tone: \"success\" },\n    \"text:summary\": { \"$text\": \"g.done + '/' + g.total + ' complete'\" }\n  }\n}\n```\n\n**Status:** Ready. 3/4 complete.\n````\n\nMarkdown platforms without SlexKit support show the fallback text. Hosts with SlexKit render the interactive UI.\n\n## What You Get\n\n- **Zero-build Slex source**: object literals with no imports, scaffolding, or component bundling in the generated output.\n- **Reactive `g` / `layout` model**: centralized state and logic with declarative component trees.\n- **Expression pipes**: `$` read expressions for dynamic props and `on*` write expressions for events.\n- **Directives**: `$if` and `$for` for conditional rendering and keyed list reconciliation.\n- **Official Svelte components**: 40+ layout, input, content, display, disclosure, feedback, and tooling components.\n- **Extensible registry**: custom component types, Svelte renderers, and component state modes.\n- **Trusted and secure runtimes**: host-realm rendering for trusted content, sandbox iframe rendering for untrusted source.\n- **ToolHost**: confirm, choose, and fill-form templates for structured AI tool-call UX.\n- **AI-friendly docs surface**: `llms.txt`, skills, and the `@slexkit/mcp` read-only MCP server.\n\n## Packages\n\n| Package | Install | Contents |\n| --- | --- | --- |\n| `slexkit` | `npm install slexkit` | Runtime, Svelte components, ToolHost, styles |\n| `@slexkit/runtime` | `npm install slexkit @slexkit/runtime` | Component-free runtime wrapper |\n| `@slexkit/components-svelte` | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` | Svelte component registration |\n| `@slexkit/theme-shadcn` | `npm install @slexkit/theme-shadcn` | CSS theme tokens |\n| `@slexkit/streamdown` | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` | React / Streamdown Markdown renderer |\n| `@slexkit/obsidian` | `npm install slexkit @slexkit/obsidian` | Obsidian plugin adapter |\n| `@slexkit/mcp` | `npx -y @slexkit/mcp` | Read-only MCP server for docs, examples, and source validation |\n\nSee [Package Boundaries](site/content/reference/packages/en-US.md) for details.\n\n## Integrations\n\n| Host | Path |\n| --- | --- |\n| Browser DOM | `mount()`, `ingest()`, `boot()`, `disposeNamespace()` |\n| Markdown renderers | `createSlexKitMarkdownRuntimeHost()` |\n| React / Streamdown | `@slexkit/streamdown` |\n| Obsidian | `@slexkit/obsidian` |\n| AI agents | `@slexkit/mcp`, `llms.txt`, SlexKit skill docs |\n| Custom components | `register()`, `registerSvelteComponent()`, `registerSubset()` |\n\n## Security Runtime\n\nTrusted mode runs inside the host realm and is intended for application-authored or reviewed source. Secure mode isolates untrusted Slex source in a sandbox iframe with an opaque origin, nonce-based CSP, locked-down globals, host-mediated network access, and a heartbeat watchdog.\n\nRead the [Security Runtime](site/content/reference/security/en-US.md) docs before rendering unreviewed user or model output.\n\n## Documentation\n\n| Document | Topic |\n| --- | --- |\n| [Getting Started](site/content/guides/quick-start/en-US.md) | Install and render a first Markdown-friendly Slex source |\n| [Integration](site/content/guides/integration/en-US.md) | Streamdown, Obsidian, and custom host paths |\n| [Runtime model](site/content/reference/runtime/en-US.md) | Mounting, updates, namespace store, lifecycle |\n| [Slex usage reference](site/content/reference/usage/en-US.md) | Source structure, directives, expressions, events, custom components |\n| [Security runtime](site/content/reference/security/en-US.md) | Threat model, sandbox iframe, policy, postMessage bridge |\n| [Slex Specification](site/content/reference/spec/en-US.md) | Protocol v0.1, types, merge rules, lifecycle hooks |\n| [ToolHost](site/content/reference/toolhost/en-US.md) | Tool-call rendering and custom templates |\n| [Icon system](site/content/reference/icons/en-US.md) | Phosphor icons, custom registration, Iconify fallback |\n| [AI / Agents](site/content/guides/ai-agents/en-US.md) | `llms.txt`, MCP server, skills, and authoring rules |\n| [Changelog](CHANGELOG.md) | Release notes and notable changes |\n\n## Version Information\n\n```ts\nimport { SLEXKIT_VERSION, SLEX_PROTOCOL_VERSION, getSlexKitInfo } from \"slexkit\";\n```\n\nThe npm package version, component implementation version, and Slex protocol version are exposed separately. The current public protocol is `v0.1`.\n\n## License\n\nMIT",
-      "hash": "e1cb682c"
+      "body": "<div align=\"center\">\n  <p>\n    <img src=\"site/assets/logo.svg\" alt=\"SlexKit\" width=\"84\" height=\"84\" />\n  </p>\n  <h1>SlexKit</h1>\n  <p><strong>Streaming Live EXpressions Kit</strong></p>\n  <p>\n    \"Docs as tools, tools as docs.\" Give Markdown interactive power and make every AI output come alive.\n  </p>\n  <p>\n    <a href=\"site/content/guides/intro/en-US.md\">Documentation</a> ·\n    <a href=\"site/content/components/accordion/en-US.md\">Components</a> ·\n    <a href=\"site/content/reference/spec/en-US.md\">Specification</a> ·\n    <a href=\"site/content/guides/ai-agents/en-US.md\">AI / Agents</a> ·\n    <a href=\"README.zh-CN.md\">简体中文</a>\n  </p>\n  <p>\n    <img alt=\"version\" src=\"https://img.shields.io/badge/version-0.3.1-18181b\">\n    <img alt=\"script\" src=\"https://img.shields.io/badge/Slex-v0.1-18181b\">\n    <img alt=\"TypeScript\" src=\"https://img.shields.io/badge/runtime-TypeScript-3178c6\">\n    <img alt=\"Svelte 5\" src=\"https://img.shields.io/badge/components-Svelte_5-ff3e00\">\n    <img alt=\"license\" src=\"https://img.shields.io/badge/license-MIT-16a34a\">\n  </p>\n</div>\n\n## Live interface blocks inside Markdown\n\n**SlexKit** turns explicit `slex` Markdown fences into live, stateful UI blocks. A Slex source is just a JavaScript object literal: `g` holds state and logic, `layout` describes the component tree, and the browser runtime renders the result in place.\n\nIt is built for chat messages, documents, agent panels, tool results, and AI-authored dashboards. It is not a full application framework.\n\n## Installation\n\n> 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.\n\n```sh\nnpm install slexkit\n```\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\n## Usage\n\n```html\n<div id=\"app\"></div>\n\n<script type=\"module\">\n  import { mount } from \"slexkit\";\n  import \"slexkit/style.css\";\n\n  mount(\n    {\n      slex: \"0.1\",\n      namespace: \"hello\",\n      g: { name: \"World\", count: 0 },\n      layout: {\n        \"card:greeting\": {\n          title: \"Greeting\",\n          \"text:message\": {\n            \"$text\": \"'Hello, ' + g.name + '! Count: ' + g.count\"\n          },\n          \"button:add\": {\n            label: \"+1\",\n            onclick: \"g.count++\"\n          }\n        }\n      }\n    },\n    document.getElementById(\"app\")\n  );\n</script>\n```\n\n## Markdown Native\n\nSlexKit-capable hosts process explicit `slex` fences only. Plain `js`, `json`, and unlabeled code blocks stay inert.\n\n````md\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"status\",\n  g: { done: 3, total: 4 },\n  layout: {\n    \"badge:state\": { label: \"Ready\", tone: \"success\" },\n    \"text:summary\": { \"$text\": \"g.done + '/' + g.total + ' complete'\" }\n  }\n}\n```\n\n**Status:** Ready. 3/4 complete.\n````\n\nMarkdown platforms without SlexKit support show the fallback text. Hosts with SlexKit render the interactive UI.\n\n## What You Get\n\n- **Zero-build Slex source**: object literals with no imports, scaffolding, or component bundling in the generated output.\n- **Reactive `g` / `layout` model**: centralized state and logic with declarative component trees.\n- **Expression pipes**: `$` read expressions for dynamic props and `on*` write expressions for events.\n- **Directives**: `$if` and `$for` for conditional rendering and keyed list reconciliation.\n- **Official Svelte components**: 40+ layout, input, content, display, disclosure, feedback, and tooling components.\n- **Extensible registry**: custom component types, Svelte renderers, and component state modes.\n- **Trusted and secure runtimes**: host-realm rendering for trusted content, sandbox iframe rendering for untrusted source.\n- **ToolHost**: confirm, choose, and fill-form templates for structured AI tool-call UX.\n- **AI-friendly docs surface**: `llms.txt`, skills, and the `@slexkit/mcp` read-only MCP server.\n\n## Packages\n\n| Package | Install | Contents |\n| --- | --- | --- |\n| `slexkit` | `npm install slexkit` | Runtime, Svelte components, ToolHost, styles |\n| `@slexkit/runtime` | `npm install slexkit @slexkit/runtime` | Component-free runtime wrapper |\n| `@slexkit/components-svelte` | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` | Svelte component registration |\n| `@slexkit/theme-shadcn` | `npm install @slexkit/theme-shadcn` | CSS theme tokens |\n| `@slexkit/streamdown` | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` | React / Streamdown Markdown renderer |\n| `@slexkit/mcp` | `npx -y @slexkit/mcp` | Read-only MCP server for docs, examples, and source validation |\n\nSee [Package Boundaries](site/content/reference/packages/en-US.md) for details.\n\n## Integrations\n\n| Host | Path |\n| --- | --- |\n| Browser DOM | `mount()`, `ingest()`, `boot()`, `disposeNamespace()` |\n| Markdown renderers | `createSlexKitMarkdownRuntimeHost()` |\n| React / Streamdown | `@slexkit/streamdown` |\n| Obsidian | Install **SlexKit** from Community Plugins; release repo: <https://github.com/slexkit/obsidian-slexkit> |\n| AI agents | `@slexkit/mcp`, `llms.txt`, SlexKit skill docs |\n| Custom components | `register()`, `registerSvelteComponent()`, `registerSubset()` |\n\n## Security Runtime\n\nTrusted mode runs inside the host realm and is intended for application-authored or reviewed source. Secure mode isolates untrusted Slex source in a sandbox iframe with an opaque origin, nonce-based CSP, locked-down globals, host-mediated network access, and a heartbeat watchdog.\n\nRead the [Security Runtime](site/content/reference/security/en-US.md) docs before rendering unreviewed user or model output.\n\n## Documentation\n\n| Document | Topic |\n| --- | --- |\n| [Getting Started](site/content/guides/quick-start/en-US.md) | Install and render a first Markdown-friendly Slex source |\n| [Integration](site/content/guides/integration/en-US.md) | Streamdown, Obsidian, and custom host paths |\n| [Runtime model](site/content/reference/runtime/en-US.md) | Mounting, updates, namespace store, lifecycle |\n| [Slex usage reference](site/content/reference/usage/en-US.md) | Source structure, directives, expressions, events, custom components |\n| [Security runtime](site/content/reference/security/en-US.md) | Threat model, sandbox iframe, policy, postMessage bridge |\n| [Slex Specification](site/content/reference/spec/en-US.md) | Protocol v0.1, types, merge rules, lifecycle hooks |\n| [ToolHost](site/content/reference/toolhost/en-US.md) | Tool-call rendering and custom templates |\n| [Icon system](site/content/reference/icons/en-US.md) | Phosphor icons, custom registration, Iconify fallback |\n| [AI / Agents](site/content/guides/ai-agents/en-US.md) | `llms.txt`, MCP server, skills, and authoring rules |\n| [Changelog](CHANGELOG.md) | Release notes and notable changes |\n\n## Version Information\n\n```ts\nimport { SLEXKIT_VERSION, SLEX_PROTOCOL_VERSION, getSlexKitInfo } from \"slexkit\";\n```\n\nThe npm package version, component implementation version, and Slex protocol version are exposed separately. The current public protocol is `v0.1`.\n\n## License\n\nMIT",
+      "hash": "117cabab"
     },
     {
       "id": "guides/intro",
@@ -72,8 +78,8 @@
       "href": "/docs/guides/quick-start",
       "rawHref": "/docs/guides/quick-start.md",
       "sourcePath": "site/content/guides/quick-start/en-US.md",
-      "body": "---\ntitle: Getting Started\ncategory: Guides\nstatus: ready\norder: 20\nsummary: \"Developer-first SlexKit integration: install the runtime, mount trusted fragments, wire Markdown hosts, and choose the next integration path.\"\nslexkitRenderMode: component\n---\n\n# Getting Started\n\nInstall `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.\n\n## Installation Entry\n\nFor most apps, start by installing the root package:\n\n```sh\nnpm install slexkit\n```\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\nFor clearer package boundaries, choose scoped packages by host:\n\n| Use case | Install |\n|---|---|\n| Custom components or component-free runtime | `npm install slexkit @slexkit/runtime` |\n| Official Svelte component registration | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` |\n| Standalone shadcn-token theme CSS | `npm install @slexkit/theme-shadcn` |\n| React + Streamdown Markdown host | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` |\n| Obsidian vault rendering | `npm install slexkit @slexkit/obsidian` |\n\n`@slexkit/runtime` and `@slexkit/components-svelte` are thin wrappers around the root package, not independent implementations.\n\n## Trusted Fragment\n\nTrusted mode is the minimal integration path. Use it for application-authored source, local examples, repository-maintained content, and reviewed snippets.\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n\nconst source = {\n  namespace: \"getting_started_counter\",\n  g: {\n    count: 0\n  },\n  layout: {\n    \"card:demo\": {\n      title: \"Counter\",\n      \"text:value\": {\n        \"$text\": \"'Count: ' + g.count\"\n      },\n      \"button:add\": {\n        label: \"+1\",\n        onclick: \"g.count++\"\n      }\n    }\n  }\n};\n\nconst cleanup = mount(source, document.getElementById(\"app\")!);\n```\n\nCall `cleanup()` when removing containers, replacing messages, or unloading pages. If the namespace won't be reused, call `disposeNamespace(namespace)`.\n\n## Markdown Fallback\n\nWhen source appears in Markdown, handle only explicit `slex` fences and keep readable fallback text after the fence:\n\n````md\n```slex\n{\n  namespace: \"release_status\",\n  layout: {\n    \"badge:status\": { label: \"Ready\", tone: \"success\" },\n    \"text:summary\": { text: \"3 of 3 checks passed.\" }\n  }\n}\n```\n\n**Release status:** Ready. 3 of 3 checks passed.\n````\n\nSlexKit-capable hosts render the fence. Plain Markdown hosts show the fallback. Do not infer executable SlexKit source from `js`, `json`, or unlabeled code blocks.\n\n## Markdown Host\n\nFor products rendering chat messages, docs pages, or long Markdown artifacts, use `createSlexKitMarkdownRuntimeHost`. It manages artifact scoping, block lifecycle, state-only fences, and trusted/secure mode selection.\n\n```ts\nimport { createSlexKitMarkdownRuntimeHost } from \"slexkit\";\nimport \"slexkit/style.css\";\n\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"trusted\",\n  theme: \"host-shadcn\"\n});\n\nexport function mountSlexFence(source: string, container: HTMLElement) {\n  return runtime.mountBlock({\n    artifactId: \"message-42\",\n    source,\n    container\n  });\n}\n```\n\nWhen the whole document or message thread is destroyed, call `runtime.disposeArtifact(artifactId)` or `runtime.disposeAll()`.\n\n## Trust Boundary\n\n| Content source | Recommended mode |\n|---|---|\n| App-generated source, repository examples, local vault content | trusted |\n| Unreviewed user input, third-party Markdown, direct agent output | secure |\n\nSecure mode requires a sandbox iframe, a publicly served `slexkit.runtime.js`, and a host policy. See [Secure Runtime Setup](security-runtime).\n\n## Next Steps\n\n- [Integration](integration): React/Streamdown and Obsidian plugins\n- [Secure Runtime Setup](security-runtime): untrusted or agent-generated content\n- [Component Reference](../components/card): built-in component catalog\n- [AI / Agents](ai-agents): SlexKit authoring context for models and agents",
-      "hash": "ab0489b2"
+      "body": "---\ntitle: Getting Started\ncategory: Guides\nstatus: ready\norder: 20\nsummary: \"Developer-first SlexKit integration: install the runtime, mount trusted fragments, wire Markdown hosts, and choose the next integration path.\"\nslexkitRenderMode: component\n---\n\n# Getting Started\n\n> 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.\n\nInstall `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.\n\n## Installation Entry\n\nFor most apps, start by installing the root package:\n\n```sh\nnpm install slexkit\n```\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\nFor clearer package boundaries, choose scoped packages by host:\n\n| Use case | Install |\n|---|---|\n| Custom components or component-free runtime | `npm install slexkit @slexkit/runtime` |\n| Official Svelte component registration | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` |\n| Standalone shadcn-token theme CSS | `npm install @slexkit/theme-shadcn` |\n| React + Streamdown Markdown host | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` |\n| Obsidian vault rendering | Install **SlexKit** from Obsidian Community Plugins |\n\n`@slexkit/runtime` and `@slexkit/components-svelte` are thin wrappers around the root package, not independent implementations.\n\n## Trusted Fragment\n\nTrusted mode is the minimal integration path. Use it for application-authored source, local examples, repository-maintained content, and reviewed snippets.\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n\nconst source = {\n  namespace: \"getting_started_counter\",\n  g: {\n    count: 0\n  },\n  layout: {\n    \"card:demo\": {\n      title: \"Counter\",\n      \"text:value\": {\n        \"$text\": \"'Count: ' + g.count\"\n      },\n      \"button:add\": {\n        label: \"+1\",\n        onclick: \"g.count++\"\n      }\n    }\n  }\n};\n\nconst cleanup = mount(source, document.getElementById(\"app\")!);\n```\n\nCall `cleanup()` when removing containers, replacing messages, or unloading pages. If the namespace won't be reused, call `disposeNamespace(namespace)`.\n\n## Markdown Fallback\n\nWhen source appears in Markdown, handle only explicit `slex` fences and keep readable fallback text after the fence:\n\n````md\n```slex\n{\n  namespace: \"release_status\",\n  layout: {\n    \"badge:status\": { label: \"Ready\", tone: \"success\" },\n    \"text:summary\": { text: \"3 of 3 checks passed.\" }\n  }\n}\n```\n\n**Release status:** Ready. 3 of 3 checks passed.\n````\n\nSlexKit-capable hosts render the fence. Plain Markdown hosts show the fallback. Do not infer executable SlexKit source from `js`, `json`, or unlabeled code blocks.\n\n## Markdown Host\n\nFor products rendering chat messages, docs pages, or long Markdown artifacts, use `createSlexKitMarkdownRuntimeHost`. It manages artifact scoping, block lifecycle, state-only fences, and trusted/secure mode selection.\n\n```ts\nimport { createSlexKitMarkdownRuntimeHost } from \"slexkit\";\nimport \"slexkit/style.css\";\n\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"trusted\",\n  theme: \"host-shadcn\"\n});\n\nexport function mountSlexFence(source: string, container: HTMLElement) {\n  return runtime.mountBlock({\n    artifactId: \"message-42\",\n    source,\n    container\n  });\n}\n```\n\nWhen the whole document or message thread is destroyed, call `runtime.disposeArtifact(artifactId)` or `runtime.disposeAll()`.\n\n## Trust Boundary\n\n| Content source | Recommended mode |\n|---|---|\n| App-generated source, repository examples, local vault content | trusted |\n| Unreviewed user input, third-party Markdown, direct agent output | secure |\n\nSecure mode requires a sandbox iframe, a publicly served `slexkit.runtime.js`, and a host policy. See [Secure Runtime Setup](security-runtime).\n\n## Next Steps\n\n- [Integration](integration): React/Streamdown and Obsidian plugins\n- [Secure Runtime Setup](security-runtime): untrusted or agent-generated content\n- [Component Reference](../components/card): built-in component catalog\n- [AI / Agents](ai-agents): SlexKit authoring context for models and agents",
+      "hash": "ba82b030"
     },
     {
       "id": "guides/integration",
@@ -83,8 +89,8 @@
       "href": "/docs/guides/integration",
       "rawHref": "/docs/guides/integration.md",
       "sourcePath": "site/content/guides/integration/en-US.md",
-      "body": "---\ntitle: Integration\ncategory: Guides\nstatus: ready\norder: 25\nsummary: \"Plugin setup guide for Streamdown and Obsidian hosts that render explicit Slex fences.\"\nslexkitRenderMode: component\n---\n\n# Integration\n\nSlexKit 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).\n\n## Plugin Selection\n\n| Host | Package | Use case | Runtime boundary |\n|---|---|---|---|\n| React / Streamdown | `@slexkit/streamdown` | Chat messages, AI output, React Markdown pages | trusted or secure |\n| Obsidian | `@slexkit/obsidian` | Slex fences in local vault reading mode | trusted readonly |\n| Custom Markdown host | `slexkit` | Product-specific Markdown renderer or document viewer | trusted or secure |\n\nUse the packaged plugin when the host is Streamdown or Obsidian. Use `createSlexKitMarkdownRuntimeHost` directly for custom Markdown renderers.\n\nPackage installation details and release boundaries are tracked in [Package Boundaries](/docs/reference/packages).\n\n## Streamdown\n\nInstall the runtime, theme, plugin, and React peer dependencies:\n\n```sh\nnpm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom\n```\n\nImport styles once in the app entry:\n\n```ts\nimport \"@slexkit/theme-shadcn/style.css\";\nimport \"@slexkit/streamdown/style.css\";\n```\n\nRegister the renderer with Streamdown:\n\n```tsx\nimport { Streamdown } from \"streamdown\";\nimport { slexkitRenderer } from \"@slexkit/streamdown\";\n\nexport function Message({ markdown }: { markdown: string }) {\n  return (\n    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>\n      {markdown}\n    </Streamdown>\n  );\n}\n```\n\nThe default renderer handles only `slex` fences. Ordinary code blocks pass through to Streamdown.\n\n## Streamdown Options\n\nUse `createSlexKitRenderer` when the host needs explicit domain scoping, source controls, playground mode, or secure mode:\n\n```tsx\nimport { createSlexKitRenderer } from \"@slexkit/streamdown\";\n\nconst renderer = createSlexKitRenderer({\n  domain: \"chat-thread-42\",\n  showChrome: false,\n  showSource: false,\n  runtime: \"trusted\"\n});\n```\n\nState-only fences in the same `domain` can seed later layout fences:\n\n````md\n```slex\n{\n  namespace: \"calc\",\n  g: { value: 21 }\n}\n```\n\n```slex\n{\n  namespace: \"calc\",\n  layout: {\n    \"text:answer\": { \"$text\": \"'answer: ' + (g.value * 2)\" }\n  }\n}\n```\n````\n\nFor unreviewed user input, third-party Markdown, or direct agent output, switch to secure mode and configure a host policy:\n\n```tsx\nconst renderer = createSlexKitRenderer({\n  runtime: \"secure\",\n  secureFrame: {\n    runtimeUrl: \"/slexkit.runtime.js\"\n  },\n  securePolicy: {\n    execution: {\n      maxUnresponsiveMs: 30000\n    }\n  }\n});\n```\n\nThe secure runtime deployment checklist lives in [Secure Runtime Setup](security-runtime). Exact policy fields live in the [Security Runtime Contract](/docs/reference/security).\n\n## Obsidian\n\nThe 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.\n\nBuild the plugin:\n\n```sh\nbun run --filter @slexkit/obsidian build\n```\n\nCopy release assets into the vault:\n\n```text\n.obsidian/plugins/slexkit/\n  main.js\n  manifest.json\n  styles.css\n```\n\nEnable **SlexKit** in Obsidian's community plugin settings.\n\n## Obsidian Example\n\nWrite an explicit `slex` fence in a note:\n\n````md\n```slex\n{\n  namespace: \"vault_status\",\n  layout: {\n    \"card:status\": {\n      title: \"Vault status\",\n      \"badge:ready\": { label: \"Ready\", tone: \"success\" },\n      \"text:note\": { text: \"Rendered by SlexKit in reading mode.\" }\n    }\n  }\n}\n```\n\nVault status: Ready.\n````\n\nBlocks in the same note share one Markdown artifact runtime, so a state-only fence can affect a later renderable fence.\n\n## Obsidian Boundary\n\n`@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.\n\nFor untrusted content, use secure mode in a web host with an explicit sandbox frame and host policy.\n\n## Integration Checklist\n\n- Process only fences whose language is exactly `slex`\n- Keep Markdown fallback for environments without SlexKit\n- Use a stable artifact/domain for each document, message, or note\n- Call cleanup when a container unmounts; dispose the artifact when the document is destroyed\n- Use secure mode for untrusted content instead of trusted mode\n- Link API, lifecycle, package, and security details to the reference pages instead of duplicating them in host guides",
-      "hash": "f3b8bc00"
+      "body": "---\ntitle: Integration\ncategory: Guides\nstatus: ready\norder: 25\nsummary: \"Plugin setup guide for Streamdown and Obsidian hosts that render explicit Slex fences.\"\nslexkitRenderMode: component\n---\n\n# Integration\n\nSlexKit 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).\n\n## Plugin Selection\n\n| Host | Package | Use case | Runtime boundary |\n|---|---|---|---|\n| React / Streamdown | `@slexkit/streamdown` | Chat messages, AI output, React Markdown pages | trusted or secure |\n| Obsidian | `slexkit/obsidian-slexkit` | Slex fences in local vault reading mode | trusted readonly |\n| Custom Markdown host | `slexkit` | Product-specific Markdown renderer or document viewer | trusted or secure |\n\nUse 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.\n\nPackage installation details and release boundaries are tracked in [Package Boundaries](/docs/reference/packages).\n\n## Streamdown\n\nInstall the runtime, theme, plugin, and React peer dependencies:\n\n```sh\nnpm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom\n```\n\nImport styles once in the app entry:\n\n```ts\nimport \"@slexkit/theme-shadcn/style.css\";\nimport \"@slexkit/streamdown/style.css\";\n```\n\nRegister the renderer with Streamdown:\n\n```tsx\nimport { Streamdown } from \"streamdown\";\nimport { slexkitRenderer } from \"@slexkit/streamdown\";\n\nexport function Message({ markdown }: { markdown: string }) {\n  return (\n    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>\n      {markdown}\n    </Streamdown>\n  );\n}\n```\n\nThe default renderer handles only `slex` fences. Ordinary code blocks pass through to Streamdown.\n\n## Streamdown Options\n\nUse `createSlexKitRenderer` when the host needs explicit domain scoping, source controls, playground mode, or secure mode:\n\n```tsx\nimport { createSlexKitRenderer } from \"@slexkit/streamdown\";\n\nconst renderer = createSlexKitRenderer({\n  domain: \"chat-thread-42\",\n  showChrome: false,\n  showSource: false,\n  runtime: \"trusted\"\n});\n```\n\nState-only fences in the same `domain` can seed later layout fences:\n\n````md\n```slex\n{\n  namespace: \"calc\",\n  g: { value: 21 }\n}\n```\n\n```slex\n{\n  namespace: \"calc\",\n  layout: {\n    \"text:answer\": { \"$text\": \"'answer: ' + (g.value * 2)\" }\n  }\n}\n```\n````\n\nFor unreviewed user input, third-party Markdown, or direct agent output, switch to secure mode and configure a host policy:\n\n```tsx\nconst renderer = createSlexKitRenderer({\n  runtime: \"secure\",\n  secureFrame: {\n    runtimeUrl: \"/slexkit.runtime.js\"\n  },\n  securePolicy: {\n    execution: {\n      maxUnresponsiveMs: 30000\n    }\n  }\n});\n```\n\nThe secure runtime deployment checklist lives in [Secure Runtime Setup](security-runtime). Exact policy fields live in the [Security Runtime Contract](/docs/reference/security).\n\n## Obsidian\n\n> 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.\n\nThe 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.\n\nInstall the plugin from Obsidian Community Plugins:\n\n1. Open **Settings -> Community plugins**.\n2. Disable **Restricted mode** if needed.\n3. Search for **SlexKit**.\n4. Install and enable the plugin.\n\nThe current community release is desktop-only until mobile vault testing is complete. The plugin is compatible with Obsidian 1.5.0+.\n\nBRAT and manual release assets remain useful for testing unreleased builds:\n\n```text\nBRAT repository: https://github.com/slexkit/obsidian-slexkit\n```\n\nManual installs copy the GitHub release assets into the vault:\n\n```text\n.obsidian/plugins/slexkit/\n  main.js\n  manifest.json\n  styles.css\n```\n\nEnable **SlexKit** in Obsidian's community plugin settings.\n\n## Obsidian Example\n\nWrite an explicit `slex` fence in a note:\n\n````md\n```slex\n{\n  namespace: \"vault_status\",\n  layout: {\n    \"card:status\": {\n      title: \"Vault status\",\n      \"badge:ready\": { label: \"Ready\", tone: \"success\" },\n      \"text:note\": { text: \"Rendered by SlexKit in reading mode.\" }\n    }\n  }\n}\n```\n\nVault status: Ready.\n````\n\nBlocks in the same note share one Markdown artifact runtime, so a state-only fence can affect a later renderable fence.\n\n## Obsidian Boundary\n\nThe 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.\n\nFor untrusted content, use secure mode in a web host with an explicit sandbox frame and host policy.\n\n## Integration Checklist\n\n- Process only fences whose language is exactly `slex`\n- Keep Markdown fallback for environments without SlexKit\n- Use a stable artifact/domain for each document, message, or note\n- Call cleanup when a container unmounts; dispose the artifact when the document is destroyed\n- Use secure mode for untrusted content instead of trusted mode\n- Link API, lifecycle, package, and security details to the reference pages instead of duplicating them in host guides",
+      "hash": "1138bddd"
     },
     {
       "id": "guides/design",
@@ -105,8 +111,8 @@
       "href": "/docs/guides/security-runtime",
       "rawHref": "/docs/guides/security-runtime.md",
       "sourcePath": "site/content/guides/security-runtime/en-US.md",
-      "body": "---\ntitle: Secure Runtime Setup\ncategory: Guides\nstatus: ready\norder: 40\nsummary: \"Decision and setup guide for rendering untrusted or agent-generated Slex source.\"\nslexkitRenderMode: component\n---\n\n# Secure Runtime Setup\n\nUse secure mode when the host does not fully control the Slex source: unreviewed user input, third-party Markdown, direct agent output, or shared documents where authorship is unclear.\n\nSecure mode is a deployment and policy choice. The complete threat model, `HostRuntimePolicy`, sandbox attributes, bridge messages, and fail-closed behavior are specified in the [Security Runtime Contract](/docs/reference/security).\n\n## Mode Decision\n\n| Source | Recommended mode | Notes |\n|---|---|---|\n| Application-generated source | trusted | Lowest overhead; source is part of your app boundary. |\n| Repository examples or reviewed snippets | trusted | Keep examples explicit and versioned. |\n| Local Obsidian vault notes | trusted readonly | The Obsidian adapter is not a sandbox boundary. |\n| User-submitted Markdown | secure | Treat source as untrusted even when the Markdown looks harmless. |\n| Direct agent output | secure | Do not grant network, timer, animation, or canvas access by default. |\n\nIf the answer is unclear, start with secure mode and enable capabilities only after the host has a concrete product need.\n\n## Minimal Host Setup\n\nFor Markdown hosts, prefer `createSlexKitMarkdownRuntimeHost`. It keeps artifact scoping, state-only fences, block cleanup, and secure-frame mounting in one place.\n\n```ts\nimport { createSlexKitMarkdownRuntimeHost } from \"slexkit\";\nimport \"slexkit/style.css\";\n\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"secure\",\n  theme: \"host-shadcn\",\n  secureFrame: {\n    runtimeUrl: \"/slexkit.runtime.js\"\n  },\n  policy: {\n    execution: {\n      heartbeatIntervalMs: 1000,\n      maxUnresponsiveMs: 30000\n    }\n  }\n});\n\nexport function mountSlexFence(source: string, container: HTMLElement) {\n  return runtime.mountBlock({\n    artifactId: \"message-42\",\n    source,\n    container\n  });\n}\n```\n\nCall `disposeBlock(container)` when a fence disappears, and call `disposeArtifact(artifactId)` when the full message, document, or note is destroyed.\n\nOmitted capability policies deny access by default. Add `network`, `timer`, `animation`, or `canvas` policy objects only when the host intentionally enables those capabilities.\n\n## Runtime Module\n\nThe secure iframe imports the runtime from `secureFrame.runtimeUrl`. Serve that file as a public ES module:\n\n```http\nAccess-Control-Allow-Origin: *\nContent-Type: text/javascript\n```\n\nThis is server or deployment configuration. It cannot be repaired from frontend JavaScript after the request has already failed.\n\n## Policy Checklist\n\n- Keep network disabled unless a specific product feature needs it.\n- If network is enabled, allow only required methods, origins, headers, body sizes, response sizes, and content types.\n- Keep timers, animation, and canvas disabled unless the Slex source needs them.\n- Never treat `capabilities`, `permissions`, `api`, or similar fields inside Slex source as authorization.\n- Do not add `allow-same-origin` to solve CORS or debugging issues.\n- Keep unresponsive runtime failures visible to users through the built-in fail-closed diagnostic.\n\nFor exact policy fields and allowed adapter hooks, use the [Security Runtime Contract](/docs/reference/security).\n\n## Host Boundaries\n\n`@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.\n\n`@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.\n\nCustom Markdown hosts should still process only fences whose language is exactly `slex` and should preserve readable Markdown fallback for non-SlexKit environments.\n\n## Production Checklist\n\n- Stable `artifactId` per message, document, or note\n- Explicit `slex` fence detection only\n- Public `slexkit.runtime.js` module with CORS and JavaScript content type\n- Deny-by-default host policy\n- Cleanup on block removal and artifact destruction\n- Visible fallback text after each interactive fence\n- Link to the reference contract for policy, bridge, CSP, and sandbox details",
-      "hash": "bbf1d81f"
+      "body": "---\ntitle: Secure Runtime Setup\ncategory: Guides\nstatus: ready\norder: 40\nsummary: \"Decision and setup guide for rendering untrusted or agent-generated Slex source.\"\nslexkitRenderMode: component\n---\n\n# Secure Runtime Setup\n\nUse secure mode when the host does not fully control the Slex source: unreviewed user input, third-party Markdown, direct agent output, or shared documents where authorship is unclear.\n\nSecure mode is a deployment and policy choice. The complete threat model, `HostRuntimePolicy`, sandbox attributes, bridge messages, and fail-closed behavior are specified in the [Security Runtime Contract](/docs/reference/security).\n\n## Mode Decision\n\n| Source | Recommended mode | Notes |\n|---|---|---|\n| Application-generated source | trusted | Lowest overhead; source is part of your app boundary. |\n| Repository examples or reviewed snippets | trusted | Keep examples explicit and versioned. |\n| Local Obsidian vault notes | trusted readonly | The Obsidian adapter is not a sandbox boundary. |\n| User-submitted Markdown | secure | Treat source as untrusted even when the Markdown looks harmless. |\n| Direct agent output | secure | Do not grant network, timer, animation, or canvas access by default. |\n\nIf the answer is unclear, start with secure mode and enable capabilities only after the host has a concrete product need.\n\n## Minimal Host Setup\n\nFor Markdown hosts, prefer `createSlexKitMarkdownRuntimeHost`. It keeps artifact scoping, state-only fences, block cleanup, and secure-frame mounting in one place.\n\n```ts\nimport { createSlexKitMarkdownRuntimeHost } from \"slexkit\";\nimport \"slexkit/style.css\";\n\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"secure\",\n  theme: \"host-shadcn\",\n  secureFrame: {\n    runtimeUrl: \"/slexkit.runtime.js\"\n  },\n  policy: {\n    execution: {\n      heartbeatIntervalMs: 1000,\n      maxUnresponsiveMs: 30000\n    }\n  }\n});\n\nexport function mountSlexFence(source: string, container: HTMLElement) {\n  return runtime.mountBlock({\n    artifactId: \"message-42\",\n    source,\n    container\n  });\n}\n```\n\nCall `disposeBlock(container)` when a fence disappears, and call `disposeArtifact(artifactId)` when the full message, document, or note is destroyed.\n\nOmitted capability policies deny access by default. Add `network`, `timer`, `animation`, or `canvas` policy objects only when the host intentionally enables those capabilities.\n\n## Runtime Module\n\nThe secure iframe imports the runtime from `secureFrame.runtimeUrl`. Serve that file as a public ES module:\n\n```http\nAccess-Control-Allow-Origin: *\nContent-Type: text/javascript\n```\n\nThis is server or deployment configuration. It cannot be repaired from frontend JavaScript after the request has already failed.\n\n## Policy Checklist\n\n- Keep network disabled unless a specific product feature needs it.\n- If network is enabled, allow only required methods, origins, headers, body sizes, response sizes, and content types.\n- Keep timers, animation, and canvas disabled unless the Slex source needs them.\n- Never treat `capabilities`, `permissions`, `api`, or similar fields inside Slex source as authorization.\n- Do not add `allow-same-origin` to solve CORS or debugging issues.\n- Keep unresponsive runtime failures visible to users through the built-in fail-closed diagnostic.\n\nFor exact policy fields and allowed adapter hooks, use the [Security Runtime Contract](/docs/reference/security).\n\n## Host Boundaries\n\n`@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.\n\nThe 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.\n\nCustom Markdown hosts should still process only fences whose language is exactly `slex` and should preserve readable Markdown fallback for non-SlexKit environments.\n\n## Production Checklist\n\n- Stable `artifactId` per message, document, or note\n- Explicit `slex` fence detection only\n- Public `slexkit.runtime.js` module with CORS and JavaScript content type\n- Deny-by-default host policy\n- Cleanup on block removal and artifact destruction\n- Visible fallback text after each interactive fence\n- Link to the reference contract for policy, bridge, CSP, and sandbox details",
+      "hash": "eba73f9f"
     },
     {
       "id": "guides/ai-agents",
@@ -116,8 +122,195 @@
       "href": "/docs/guides/ai-agents",
       "rawHref": "/docs/guides/ai-agents.md",
       "sourcePath": "site/content/guides/ai-agents/en-US.md",
-      "body": "---\ntitle: AI / Agents\ncategory: Guides\nstatus: ready\norder: 50\nsummary: \"LLM docs, MCP server, skills, and authoring rules for SlexKit agents.\"\nslexkitRenderMode: component\n---\n\n# AI / Agents\n\n## AI Accessible Documentation\n\nSlexKit 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.\n\n```slex\n{\n  namespace: \"ai_docs_links\",\n  layout: {\n    \"column:links\": {\n      gap: \"sm\",\n      \"link:index\": { href: \"/llms.txt\", text: \"/llms.txt - docs index\", icon: \"list-magnifying-glass\" },\n      \"link:full\": { href: \"/llms-full.txt\", text: \"/llms-full.txt - full English context\", icon: \"book-open-text\" },\n      \"link:components\": { href: \"/llms-components.txt\", text: \"/llms-components.txt - components and API\", icon: \"puzzle-piece\" },\n      \"link:runtime\": { href: \"/llms-runtime.txt\", text: \"/llms-runtime.txt - runtime and host integration\", icon: \"cpu\" },\n      \"link:toolhost\": { href: \"/llms-toolhost.txt\", text: \"/llms-toolhost.txt - structured input\", icon: \"cursor-click\" },\n      \"link:authoring\": { href: \"/llms-authoring.txt\", text: \"/llms-authoring.txt - slex fence authoring rules\", icon: \"pencil-simple\" },\n      \"link:manifest\": { href: \"/slexkit-ai-manifest.json\", text: \"/slexkit-ai-manifest.json - machine-readable index\", icon: \"brackets-curly\" },\n      \"text:note\": { text: \"Raw docs use .md routes such as /docs/components/card.md. Do not add .mdx routes.\" }\n    }\n  }\n}\n```\n\nMinimal reading path:\n\n1. Start with [`/llms.txt`](/llms.txt) for the grouped index.\n2. Use [`/llms-full.txt`](/llms-full.txt) when the agent needs broad context.\n3. Use [`/llms-components.txt`](/llms-components.txt) and raw component `.md` pages when authoring UI.\n4. Use [`/llms-runtime.txt`](/llms-runtime.txt) for host and secure runtime integration.\n5. Use [`/llms-toolhost.txt`](/llms-toolhost.txt) only when user input must return structured data to the host.\n\nSlexKit raw docs are ordinary `.md` pages with explicit `slex` fences. There is no `.mdx` route — `slex` fences are the interactive layer.\n\n## Context Files\n\nAdd SlexKit context to `AGENTS.md`, `CLAUDE.md`, or `.cursorrules`:\n\n````md\n## SlexKit\n\nThis project uses SlexKit for Markdown-native interactive AI output.\n\nDocumentation: https://slexkit.dev/llms-full.txt\n\nKey patterns:\n- Display UI uses explicit `slex` fenced blocks plus Markdown fallback.\n- Slex source uses `{ slex, namespace, g, layout }`; use `slex: \"0.1\"` for the current public protocol.\n- ToolHost is only for structured user input flows.\n- Untrusted or agent-generated source should use the secure runtime.\n- Raw docs are `.md` files with `slex` fences, not `.mdx`.\n````\n\n## Skills\n\nThe `skills/` directory provides these task entry points:\n\n- `/slexkit`: overview, architecture boundaries, and positioning\n- `/author`: write display-oriented `slex` fences with Markdown fallback\n- `/host`: integrate Markdown, Streamdown, Obsidian, or custom hosts\n- `/toolhost`: build confirmations, choices, and structured forms\n- `/secure`: configure sandbox runtime and host policy\n- `/update`: regenerate AI docs after API, docs, or component changes\n\nUse `/author` for display UI. Use `/toolhost` when the host must receive a submitted result.\n\n## MCP\n\n`@slexkit/mcp` provides read-only access to SlexKit documentation, examples, and Slex source validation. Keep the public surface small and natural: docs, examples, validate.\n\n```slex\n{\n  namespace: \"ai_mcp_tools\",\n  layout: {\n    \"grid:tools\": {\n      columns: 1,\n      mdColumns: 3,\n      \"card:docs\": {\n        title: \"slexkitDocs\",\n        icon: \"book-open-text\",\n        \"text:body\": { text: \"Search or fetch Markdown docs by query, group, slug, or raw .md URL.\" }\n      },\n      \"card:examples\": {\n        title: \"slexkitExamples\",\n        icon: \"code\",\n        \"text:body\": { text: \"Browse component examples, ToolHost templates, and host integration snippets.\" }\n      },\n      \"card:validate\": {\n        title: \"slexkitValidate\",\n        icon: \"check-circle\",\n        \"text:body\": { text: \"Parse Slex source and return diagnostics plus component usage.\" }\n      }\n    }\n  }\n}\n```\n\n### Quick Install\n\n```sh\nnpx add-mcp @slexkit/mcp\n```\n\nOr specify an app:\n\n```sh\nnpx add-mcp @slexkit/mcp -a claude-code\nnpx add-mcp @slexkit/mcp -a codex\nnpx add-mcp @slexkit/mcp -a cursor\nnpx add-mcp @slexkit/mcp -a vscode\nnpx add-mcp @slexkit/mcp -a zed\n```\n\n### Manual Installation\n\n```slex\n{\n  namespace: \"ai_manual_configs\",\n  layout: {\n    \"tabs:manualConfigs\": {\n      value: \"cursor\",\n      tabs: [\n        {\n          value: \"cursor\",\n          label: \"Cursor\",\n          content: {\n            \"code-block:cursor\": {\n              title: \".cursor/mcp.json\",\n              language: \"json\",\n              code: \"{\\n  \\\"mcpServers\\\": {\\n    \\\"slexkit\\\": {\\n      \\\"command\\\": \\\"npx\\\",\\n      \\\"args\\\": [\\\"-y\\\", \\\"@slexkit/mcp\\\"]\\n    }\\n  }\\n}\"\n            }\n          }\n        },\n        {\n          value: \"codex\",\n          label: \"Codex\",\n          content: {\n            \"code-block:codex\": {\n              title: \"config.toml\",\n              language: \"toml\",\n              code: \"[mcp_servers.slexkit]\\ncommand = \\\"npx\\\"\\nargs = [\\\"-y\\\", \\\"@slexkit/mcp\\\"]\"\n            }\n          }\n        },\n        {\n          value: \"vscode\",\n          label: \"VS Code\",\n          content: {\n            \"code-block:vscode\": {\n              title: \".vscode/mcp.json\",\n              language: \"json\",\n              code: \"{\\n  \\\"servers\\\": {\\n    \\\"slexkit\\\": {\\n      \\\"command\\\": \\\"npx\\\",\\n      \\\"args\\\": [\\\"-y\\\", \\\"@slexkit/mcp\\\"],\\n      \\\"type\\\": \\\"stdio\\\"\\n    }\\n  }\\n}\"\n            }\n          }\n        }\n      ]\n    }\n  }\n}\n```\n\n## Troubleshooting\n\n- MCP server does not start: verify `npx` and MCP config JSON, then restart the IDE.\n- Tool calls fail: restart the MCP server and confirm `tools/list` exposes only `slexkitDocs`, `slexkitExamples`, and `slexkitValidate`.\n- Docs are stale: run `bun run ai:docs` or `bun run build:core`.\n- Wrong raw source route: use `.md` routes with `slex` fences. Do not request `.mdx`.",
-      "hash": "eab33b74"
+      "body": "---\ntitle: AI / Agents\ncategory: Guides\nstatus: ready\norder: 50\nsummary: \"LLM docs, MCP server, skills, and authoring rules for SlexKit agents.\"\nslexkitRenderMode: component\n---\n\n# AI / Agents\n\n## AI Accessible Documentation\n\nSlexKit 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.\n\n```slex\n{\n  namespace: \"ai_docs_links\",\n  layout: {\n    \"column:links\": {\n      gap: \"sm\",\n      \"link:index\": { href: \"/llms.txt\", text: \"/llms.txt - docs index\", icon: \"list-magnifying-glass\" },\n      \"link:full\": { href: \"/llms-full.txt\", text: \"/llms-full.txt - full English context\", icon: \"book-open-text\" },\n      \"link:components\": { href: \"/llms-components.txt\", text: \"/llms-components.txt - components and API\", icon: \"puzzle-piece\" },\n      \"link:runtime\": { href: \"/llms-runtime.txt\", text: \"/llms-runtime.txt - runtime and host integration\", icon: \"cpu\" },\n      \"link:capabilities\": { href: \"/llms-capabilities.txt\", text: \"/llms-capabilities.txt - std and api capabilities\", icon: \"function\" },\n      \"link:toolhost\": { href: \"/llms-toolhost.txt\", text: \"/llms-toolhost.txt - structured input\", icon: \"cursor-click\" },\n      \"link:authoring\": { href: \"/llms-authoring.txt\", text: \"/llms-authoring.txt - slex fence authoring rules\", icon: \"pencil-simple\" },\n      \"link:manifest\": { href: \"/slexkit-ai-manifest.json\", text: \"/slexkit-ai-manifest.json - machine-readable index\", icon: \"brackets-curly\" },\n      \"text:note\": { text: \"Raw docs use .md routes such as /docs/components/card.md. Do not add .mdx routes.\" }\n    }\n  }\n}\n```\n\nMinimal reading path:\n\n1. Start with [`/llms.txt`](/llms.txt) for the grouped index.\n2. Use [`/llms-full.txt`](/llms-full.txt) when the agent needs broad context.\n3. Use [`/llms-components.txt`](/llms-components.txt) and raw component `.md` pages when authoring UI.\n4. Use [`/llms-capabilities.txt`](/llms-capabilities.txt) for `std.*` and policy-gated `api.*`.\n5. Use [`/llms-runtime.txt`](/llms-runtime.txt) for host and secure runtime integration.\n6. Use [`/llms-toolhost.txt`](/llms-toolhost.txt) only when user input must return structured data to the host.\n\nSlexKit raw docs are ordinary `.md` pages with explicit `slex` fences. There is no `.mdx` route — `slex` fences are the interactive layer.\n\n## Context Files\n\nAdd SlexKit context to `AGENTS.md`, `CLAUDE.md`, or `.cursorrules`:\n\n````md\n## SlexKit\n\nThis project uses SlexKit for Markdown-native interactive AI output.\n\nDocumentation: https://slexkit.dev/llms-full.txt\n\nKey patterns:\n- Display UI uses explicit `slex` fenced blocks plus Markdown fallback.\n- Slex source uses `{ slex, namespace, g, layout }`; use `slex: \"0.1\"` for the current public protocol.\n- Use `std.*` for common calculations, formatting, units, and small statistics.\n- ToolHost is only for structured user input flows.\n- Untrusted or agent-generated source should use the secure runtime.\n- Raw docs are `.md` files with `slex` fences, not `.mdx`.\n````\n\n## Skills\n\nThe `skills/` directory provides these task entry points:\n\n- `/slexkit`: overview, architecture boundaries, and positioning\n- `/author`: write display-oriented `slex` fences with Markdown fallback\n- `/host`: integrate Markdown, Streamdown, Obsidian, or custom hosts\n- `/toolhost`: build confirmations, choices, and structured forms\n- `/secure`: configure sandbox runtime and host policy\n- `/update`: regenerate AI docs after API, docs, or component changes\n\nUse `/author` for display UI. Use `/toolhost` when the host must receive a submitted result.\n\n## MCP\n\n`@slexkit/mcp` provides read-only access to SlexKit documentation, examples, and Slex source validation. Keep the public surface small and natural: docs, examples, validate.\n\n```slex\n{\n  namespace: \"ai_mcp_tools\",\n  layout: {\n    \"grid:tools\": {\n      columns: 1,\n      mdColumns: 3,\n      \"card:docs\": {\n        title: \"slexkitDocs\",\n        icon: \"book-open-text\",\n        \"text:body\": { text: \"Search or fetch Markdown docs by query, group, slug, or raw .md URL.\" }\n      },\n      \"card:examples\": {\n        title: \"slexkitExamples\",\n        icon: \"code\",\n        \"text:body\": { text: \"Browse component examples, ToolHost templates, and host integration snippets.\" }\n      },\n      \"card:validate\": {\n        title: \"slexkitValidate\",\n        icon: \"check-circle\",\n        \"text:body\": { text: \"Parse Slex source and return diagnostics plus component usage.\" }\n      }\n    }\n  }\n}\n```\n\n### Quick Install\n\n```sh\nnpx add-mcp @slexkit/mcp\n```\n\nOr specify an app:\n\n```sh\nnpx add-mcp @slexkit/mcp -a claude-code\nnpx add-mcp @slexkit/mcp -a codex\nnpx add-mcp @slexkit/mcp -a cursor\nnpx add-mcp @slexkit/mcp -a vscode\nnpx add-mcp @slexkit/mcp -a zed\n```\n\n### Manual Installation\n\n```slex\n{\n  namespace: \"ai_manual_configs\",\n  layout: {\n    \"tabs:manualConfigs\": {\n      value: \"cursor\",\n      tabs: [\n        {\n          value: \"cursor\",\n          label: \"Cursor\",\n          content: {\n            \"code-block:cursor\": {\n              title: \".cursor/mcp.json\",\n              language: \"json\",\n              code: \"{\\n  \\\"mcpServers\\\": {\\n    \\\"slexkit\\\": {\\n      \\\"command\\\": \\\"npx\\\",\\n      \\\"args\\\": [\\\"-y\\\", \\\"@slexkit/mcp\\\"]\\n    }\\n  }\\n}\"\n            }\n          }\n        },\n        {\n          value: \"codex\",\n          label: \"Codex\",\n          content: {\n            \"code-block:codex\": {\n              title: \"config.toml\",\n              language: \"toml\",\n              code: \"[mcp_servers.slexkit]\\ncommand = \\\"npx\\\"\\nargs = [\\\"-y\\\", \\\"@slexkit/mcp\\\"]\"\n            }\n          }\n        },\n        {\n          value: \"vscode\",\n          label: \"VS Code\",\n          content: {\n            \"code-block:vscode\": {\n              title: \".vscode/mcp.json\",\n              language: \"json\",\n              code: \"{\\n  \\\"servers\\\": {\\n    \\\"slexkit\\\": {\\n      \\\"command\\\": \\\"npx\\\",\\n      \\\"args\\\": [\\\"-y\\\", \\\"@slexkit/mcp\\\"],\\n      \\\"type\\\": \\\"stdio\\\"\\n    }\\n  }\\n}\"\n            }\n          }\n        }\n      ]\n    }\n  }\n}\n```\n\n## Troubleshooting\n\n- MCP server does not start: verify `npx` and MCP config JSON, then restart the IDE.\n- Tool calls fail: restart the MCP server and confirm `tools/list` exposes only `slexkitDocs`, `slexkitExamples`, and `slexkitValidate`.\n- Docs are stale: run `bun run ai:docs` or `bun run build:core`.\n- Wrong raw source route: use `.md` routes with `slex` fences. Do not request `.mdx`.",
+      "hash": "c6c70f87"
+    },
+    {
+      "id": "examples/hello-slexkit",
+      "group": "Examples",
+      "title": "你的第一个 SlexKit 卡片",
+      "summary": "零交互、纯展示的静态卡片，展示 SlexKit 声明式 DSL 的渲染效果。",
+      "href": "/zh-CN/examples/hello-slexkit",
+      "rawHref": "/zh-CN/examples/hello-slexkit.md",
+      "sourcePath": "content/examples/hello-slexkit/zh-CN.md",
+      "body": "# 你的第一个 SlexKit 卡片\n\nSlexKit 的核心思想：**用声明式 JSON 描述 UI，而不仅是 Markdown**。下面是一个纯静态的卡片——没有 `g` 对象，没有交互，所有内容都直接写在结构中。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"learn_hello_slexkit\",\n  layout: {\n    \"section:hello\": {\n      eyebrow: \"入门教程 · 1/4\",\n      title: \"你的第一个 SlexKit 卡片\",\n      subtitle: \"所有内容都是声明式的——数字、颜色、布局，全部来自 DSL。\",\n      \"grid:top-stats\": {\n        columns: 1, mdColumns: 3,\n        \"stat:users\": { label: \"活跃用户\", value: \"12,847\", unit: \"人\" },\n        \"stat:uptime\": { label: \"正常运行\", value: \"99.97\", unit: \"%\" },\n        \"stat:latency\": { label: \"服务延迟\", value: \"42\", unit: \"ms\" }\n      },\n      \"table:pricing\": {\n        columns: [\"功能\", \"免费版\", \"专业版\"],\n        rows: [\n          [\"可用组件\", \"全部\", \"全部\"],\n          [\"自定义主题\", \"3 种\", \"无限\"],\n          [\"数据导出\", \"JSON\", \"JSON / CSV / SQL\"]\n        ]\n      },\n      \"callout:tip\": {\n        tone: \"info\",\n        text: \"你现在看到的每一样东西——标题、数值、表格、颜色——都来自上面的 DSL 声明，没有一行 HTML。这就是 SlexKit 的核心理念：Markdown 提供叙事，DSL 提供交互。\"\n      }\n    }\n  }\n}\n```\n\n只看不动，感受一下结构和布局语法。下一节我们给卡片加上第一条响应式数据。\n\n---\n\n\n思考：如果 `\"12,847\"` 需要从里面计算出来，显然直接写死字符串不够。这就需要引入 **`g` 对象**——下一节的主角。",
+      "hash": "f5b1728f"
+    },
+    {
+      "id": "examples/first-interaction",
+      "group": "Examples",
+      "title": "第一个交互：滑块操控数据",
+      "summary": "在 SlexKit 卡片引入 g 对象和第一个滑块交互，体验响应式数据绑定。",
+      "href": "/zh-CN/examples/first-interaction",
+      "rawHref": "/zh-CN/examples/first-interaction.md",
+      "sourcePath": "content/examples/first-interaction/zh-CN.md",
+      "body": "# 第一个交互：滑块操控数据\n\n上一节全是静态数据。要让 UI \"活起来\"，需要三样东西：\n\n1. **`g` 对象** — 响应式状态容器\n2. **`$value` / `$label` / `$tone`** — 读表达式（从 g 取值渲染）\n3. **`onchange`** — 写表达式（用户操作写入 g）\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"learn_first_interaction\",\n  g: { count: 42 },\n  layout: {\n    \"section:interact\": {\n      eyebrow: \"入门教程 · 2/4\",\n      title: \"第一个交互：滑块操控数据\",\n      subtitle: \"滑动下面的滑块，stat 和 callout 会跟着变。这就是 SlexKit 的响应式核心。\",\n      \"column:controls\": {\n        \"slider:count\": {\n          label: \"选择数值\",\n          \"$value\": \"g.count\",\n          min: 0,\n          max: 100,\n          step: 1,\n          onchange: \"g.count = Number($event)\"\n        },\n        \"stat:countStat\": { label: \"当前数值\", \"$value\": \"g.count\" },\n        \"badge:level\": {\n          \"$label\": \"g.count < 30 ? '低' : g.count < 70 ? '中' : '高'\",\n          \"$tone\": \"g.count < 30 ? 'success' : g.count < 70 ? 'warning' : 'danger'\"\n        },\n        \"callout:note\": {\n          \"$tone\": \"g.count < 50 ? 'success' : 'info'\",\n          \"$text\": \"g.count < 50 ? '当前值偏低，适合入门级负载。' : '当前值偏高，注意监控资源消耗。'\"\n        }\n      }\n    }\n  }\n}\n```\n\n核心公式：\n```\n用户操作 → onchange → g → SlexKit 检测变化 → 所有 $value/$tone/$text 自动重算 → UI 更新\n```\n\n这就是**单向数据流** + **响应式重渲染**。不需要手动 `setState`，不需要 DOM 操作。",
+      "hash": "d27f5fc3"
+    },
+    {
+      "id": "examples/multi-input-coordination",
+      "group": "Examples",
+      "title": "多输入协同：两个滑块联动",
+      "summary": "两个 slider 相互影响，引入 g 方法、formula 组件和条件渲染。",
+      "href": "/zh-CN/examples/multi-input-coordination",
+      "rawHref": "/zh-CN/examples/multi-input-coordination.md",
+      "sourcePath": "content/examples/multi-input-coordination/zh-CN.md",
+      "body": "# 多输入协同：两个滑块联动\n\n真实场景中往往有多个输入变量，它们相互影响。这需要引入两样新东西：\n1. **`g.method()`** — 依赖其他状态的计算值（类似 Vue computed）\n2. **`$if`** — 条件渲染（根据状态决定显示或隐藏组件）\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"learn_multi_coordination\",\n  g: {\n    width: 120,\n    height: 80,\n    area: function () { return this.width * this.height; },\n    isLandscape: function () { return this.width > this.height; },\n    ratio: function () { return (this.width / this.height).toFixed(2); }\n  },\n  layout: {\n    \"section:coordinated\": {\n      eyebrow: \"入门教程 · 3/4\",\n      title: \"多输入协同：矩形尺寸联动\",\n      subtitle: \"同时调整宽和高，面积和宽高比自动重新计算。这就是 g 方法的力量。\",\n      \"grid:params\": {\n        columns: 1, mdColumns: 2,\n        \"column:w\": {\n          \"input:width\": { label: \"宽度\", \"$value\": \"g.width\", type: \"number\", unit: \"px\", onchange: \"g.width = Number($event || 0)\" },\n          \"slider:width\": { label: \"宽度\", \"$value\": \"g.width\", min: 20, max: 300, step: 5, unit: \"px\", onchange: \"g.width = Number($event)\" }\n        },\n        \"column:h\": {\n          \"input:height\": { label: \"高度\", \"$value\": \"g.height\", type: \"number\", unit: \"px\", onchange: \"g.height = Number($event || 0)\" },\n          \"slider:height\": { label: \"高度\", \"$value\": \"g.height\", min: 20, max: 300, step: 5, unit: \"px\", onchange: \"g.height = Number($event)\" }\n        }\n      },\n      \"grid:results\": {\n        columns: 1, mdColumns: 3,\n        \"stat:area\": { label: \"面积\", \"$value\": \"g.area()\", unit: \"px²\" },\n        \"stat:ratio\": { label: \"宽高比\", \"$value\": \"g.ratio()\" },\n        \"badge:orientation\": {\n          \"$label\": \"g.isLandscape() ? '横向' : g.width === g.height ? '正方形' : '纵向'\",\n          \"$tone\": \"g.isLandscape() ? 'info' : g.width === g.height ? 'success' : 'warning'\"\n        }\n      },\n      \"formula:areaEq\": { \"$tex\": \"'\\\\\\\\text{面积} = ' + g.width + ' \\\\\\\\times ' + g.height + ' = ' + g.area() + '\\\\\\\\text{ px}^2'\" },\n      \"callout:tip\": {\n        \"$tone\": \"g.isLandscape() ? 'info' : 'warning'\",\n        \"$text\": \"g.isLandscape() ? '当前为横向（Landscape）。横向更适用于宽屏展示。' : '当前为纵向（Portrait）。纵向更适用于移动端阅读。'\"\n      },\n      \"callout:squareTip\": {\n        \"$if\": \"g.width === g.height\",\n        tone: \"success\",\n        text: \"这是一个正方形！宽高完全相等。\"\n      }\n    }\n  }\n}\n```\n\n**三个新知识点：**\n\n| 概念 | 写法 | 含义 |\n|:---|:---|:---|\n| g 方法 | `area: function() { return this.width * this.height; }` | `this` 指向 g 对象本身，返回动态计算值 |\n| 动态公式 | `\"$tex\": \"'...' + g.width + '...'\"` | formula 组件可根据 g 值实时渲染 KaTeX |\n| 条件渲染 | `\"$if\": \"g.width === g.height\"` | 只有表达式返回 true 时该组件才渲染 |",
+      "hash": "d16837a3"
+    },
+    {
+      "id": "examples/tabs-and-branching",
+      "group": "Examples",
+      "title": "分支与切换：模式选择器",
+      "summary": "用 select 实现场景切换，展示 UI = f(state) 的分支渲染模式。",
+      "href": "/zh-CN/examples/tabs-and-branching",
+      "rawHref": "/zh-CN/examples/tabs-and-branching.md",
+      "sourcePath": "content/examples/tabs-and-branching/zh-CN.md",
+      "body": "# 分支与切换：模式选择器\n\n上一节是一个场景内的协同。现实中有多个场景需要在同一空间内切换——这时候用 **select** 实现分支。\n\n核心思想：**UI = f(state)**。切换 `mode` 状态变量，整个视图区域自动切换。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"learn_tabs_branching\",\n  g: {\n    mode: \"length\",\n    value: 100,\n    convert: function () {\n      if (this.mode === \"length\") return (this.value / 100).toFixed(2) + \" m\";\n      if (this.mode === \"weight\") return (this.value * 2.20462).toFixed(2) + \" 磅 (lbs)\";\n      if (this.mode === \"temp\") return (this.value * 9 / 5 + 32).toFixed(1) + \" °F\";\n      return \"—\";\n    },\n    label: function () {\n      if (this.mode === \"length\") return \"厘米转米\";\n      if (this.mode === \"weight\") return \"公斤转磅\";\n      return \"摄氏度转华氏度\";\n    }\n  },\n  layout: {\n    \"section:branching\": {\n      eyebrow: \"入门教程 · 4/4\",\n      title: \"分支与切换：模式选择器\",\n      subtitle: \"切换下面的模式，输入的参数和计算结果会跟着变化。一种模式 = 一种 UI 状态。\",\n      \"select:mode\": {\n        label: \"转换模式\",\n        \"$value\": \"g.mode\",\n        options: [\n          { label: \"长度 (cm → m)\", value: \"length\" },\n          { label: \"重量 (kg → lbs)\", value: \"weight\" },\n          { label: \"温度 (°C → °F)\", value: \"temp\" }\n        ],\n        onchange: \"g.mode = String($event)\"\n      },\n      \"input:value\": { label: \"输入值\", \"$value\": \"g.value\", type: \"number\", onchange: \"g.value = Number($event || 0)\" },\n      \"stat:result\": { \"$label\": \"g.label()\", \"$value\": \"g.convert()\" },\n      \"callout:guide\": {\n        \"$tone\": \"g.mode === 'temp' ? 'warning' : 'info'\",\n        \"$text\": \"g.mode === 'length' ? '1 米 = 100 厘米，除以 100 即可。' : g.mode === 'weight' ? '1 公斤 ≈ 2.20462 磅。' : '°F = °C × 9/5 + 32。华氏度范围更大，注意精度。'\"\n      }\n    }\n  }\n}\n```",
+      "hash": "2050088b"
+    },
+    {
+      "id": "examples/salary-calculator",
+      "group": "Examples",
+      "title": "五险一金计算器",
+      "summary": "输入工资基数和城市，计算五险一金明细，显示个人缴纳、单位缴纳和总计。",
+      "href": "/zh-CN/examples/salary-calculator",
+      "rawHref": "/zh-CN/examples/salary-calculator.md",
+      "sourcePath": "content/examples/salary-calculator/zh-CN.md",
+      "body": "# 五险一金计算器\n\n你面试拿到一个offer，月薪2万，到手能拿多少？HR说五险一金要扣一大笔，但具体扣多少、怎么算，每个城市还不一样。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_salary_calculator\",\n  g: {\n    base: 20000,\n    city: \"beijing\",\n    rates: {\n      beijing: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 12 },\n      shanghai: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 7 },\n      guangzhou: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 5 },\n      shenzhen: { pensionP: 8, medicalP: 2, unemploymentP: 0.5, pensionC: 16, medicalC: 8, unemploymentC: 0.5, injury: 0.2, maternity: 0.8, housing: 5 }\n    },\n    currentRate: function () { return this.rates[this.city] || this.rates.beijing; },\n    personalRate: function () { var r = this.currentRate(); return r.pensionP + r.medicalP + r.unemploymentP + r.housing; },\n    companyRate: function () { var r = this.currentRate(); return r.pensionC + r.medicalC + r.unemploymentC + r.injury + r.maternity + r.housing; },\n    personalTotal: function () { return this.base * this.personalRate() / 100; },\n    companyTotal: function () { return this.base * this.companyRate() / 100; },\n    total: function () { return this.personalTotal() + this.companyTotal(); },\n    takeHome: function () { return this.base - this.personalTotal(); },\n    cityLabel: function () { return { beijing: \"北京\", shanghai: \"上海\", guangzhou: \"广州\", shenzhen: \"深圳\" }[this.city] || this.city; }\n  },\n  layout: {\n    \"section:salary\": {\n      title: \"五险一金计算器\",\n      subtitle: \"输入税前工资和城市，实时计算五险一金明细。\",\n      \"grid:params\": {\n        columns: 1, mdColumns: 2,\n        \"column:baseField\": {\n          \"input:base\": { label: \"税前工资\", \"$value\": \"g.base\", type: \"number\", unit: \"元/月\", onchange: \"g.base = Number($event || 0)\" },\n          \"slider:base\": { label: \"税前工资\", \"$value\": \"g.base\", min: 3000, max: 50000, step: 500, unit: \"元\", onchange: \"g.base = Number($event)\" }\n        },\n        \"column:cityField\": {\n          \"select:city\": {\n            label: \"缴纳城市\",\n            \"$value\": \"g.city\",\n            options: [\n              { label: \"北京\", value: \"beijing\" },\n              { label: \"上海\", value: \"shanghai\" },\n              { label: \"广州\", value: \"guangzhou\" },\n              { label: \"深圳\", value: \"shenzhen\" }\n            ],\n            onchange: \"g.city = String($event)\"\n          }\n        }\n      },\n      \"grid:summary\": {\n        columns: 1, mdColumns: 3,\n        \"stat:personal\": { label: \"个人扣除\", \"$value\": \"g.personalTotal().toFixed(0)\", unit: \"元\" },\n        \"stat:company\": { label: \"公司缴纳\", \"$value\": \"g.companyTotal().toFixed(0)\", unit: \"元\" },\n        \"stat:takehome\": { label: \"到手工资\", \"$value\": \"g.takeHome().toFixed(0)\", unit: \"元\" }\n      }\n    }\n  }\n}\n```\n\n换个城市看看，公积金比例差很多——北京12%，上海7%，到手工资能差好几百。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_salary_calculator\",\n  layout: {\n    \"card:detail\": {\n      title: \"各项明细\",\n      \"grid:personal\": {\n        columns: 1, mdColumns: 4,\n        \"stat:pension_p\": { label: \"养老（8%）\", \"$value\": \"(g.base * 0.08).toFixed(0)\", unit: \"元\" },\n        \"stat:medical_p\": { label: \"医疗（2%）\", \"$value\": \"(g.base * 0.02).toFixed(0)\", unit: \"元\" },\n        \"stat:unemployment_p\": { label: \"失业（0.5%）\", \"$value\": \"(g.base * 0.005).toFixed(0)\", unit: \"元\" },\n        \"stat:housing_p\": { label: \"公积金\", \"$value\": \"(g.base * g.currentRate().housing / 100).toFixed(0)\", unit: \"元\" }\n      },\n      \"grid:company\": {\n        columns: 1, mdColumns: 4,\n        \"stat:pension_c\": { label: \"养老（16%）\", \"$value\": \"(g.base * 0.16).toFixed(0)\", unit: \"元\" },\n        \"stat:medical_c\": { label: \"医疗（8%）\", \"$value\": \"(g.base * 0.08).toFixed(0)\", unit: \"元\" },\n        \"stat:unemployment_c\": { label: \"失业（0.5%）\", \"$value\": \"(g.base * 0.005).toFixed(0)\", unit: \"元\" },\n        \"stat:other_c\": { label: \"工伤+生育\", \"$value\": \"(g.base * 0.01).toFixed(0)\", unit: \"元\" }\n      },\n      \"callout:note\": {\n        \"$tone\": \"g.personalTotal() > 3000 ? 'warning' : 'info'\",\n        \"$text\": \"g.personalTotal() > 3000 ? '个人扣除超过3000元，到手工资可能低于预期。' : '公积金比例越高，到手工资越少，但公积金可以提取使用。'\"\n      }\n    }\n  }\n}\n```\n\n| 城市 | 养老 | 医疗 | 失业 | 公积金 | 个人合计 |\n|------|------|------|------|--------|----------|\n| 北京 | 8% | 2% | 0.5% | 12% | 22.5% |\n| 上海 | 8% | 2% | 0.5% | 7% | 17.5% |\n| 广州 | 8% | 2% | 0.5% | 5% | 15.5% |\n| 深圳 | 8% | 2% | 0.5% | 5% | 15.5% |",
+      "hash": "05fd1883"
+    },
+    {
+      "id": "examples/project-cost-estimator",
+      "group": "Examples",
+      "title": "软件项目成本估算器",
+      "summary": "输入团队规模、开发周期和人员成本，计算项目总成本和人均成本。",
+      "href": "/zh-CN/examples/project-cost-estimator",
+      "rawHref": "/zh-CN/examples/project-cost-estimator.md",
+      "sourcePath": "content/examples/project-cost-estimator/zh-CN.md",
+      "body": "# 软件项目成本估算器\n\n老板问你：\"这个项目要多少钱？\"你说：\"我算算。\"然后打开Excel，填一堆公式。其实不用——输入团队配置和周期，成本自动算出来。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_project_cost\",\n  g: {\n    frontend: 2, backend: 3, tester: 1, designer: 1,\n    months: 6,\n    salary: 15000,\n    teamSize: function () { return this.frontend + this.backend + this.tester + this.designer; },\n    laborCost: function () { return this.teamSize() * this.salary * this.months; },\n    equipmentCost: function () { return this.teamSize() * 5000; },\n    officeCost: function () { return this.teamSize() * 2000 * this.months; },\n    subtotal: function () { return this.laborCost() + this.equipmentCost() + this.officeCost(); },\n    riskBuffer: function () { return this.subtotal() * 0.15; },\n    totalCost: function () { return this.subtotal() + this.riskBuffer(); },\n    perPersonCost: function () { return this.teamSize() > 0 ? this.totalCost() / this.teamSize() : 0; },\n    monthlyBurn: function () { return this.months > 0 ? this.totalCost() / this.months : 0; }\n  },\n  layout: {\n    \"section:estimator\": {\n      title: \"软件项目成本估算器\",\n      subtitle: \"输入团队配置和周期，成本自动算出来。\",\n      \"card:estimator\": {\n        title: \"项目成本估算\",\n      \"grid:team\": {\n        columns: 1, mdColumns: 4,\n        \"column:fe\": {\n          \"input:frontend\": { label: \"前端\", \"$value\": \"g.frontend\", type: \"number\", unit: \"人\", onchange: \"g.frontend = Number($event || 0)\" }\n        },\n        \"column:be\": {\n          \"input:backend\": { label: \"后端\", \"$value\": \"g.backend\", type: \"number\", unit: \"人\", onchange: \"g.backend = Number($event || 0)\" }\n        },\n        \"column:qa\": {\n          \"input:tester\": { label: \"测试\", \"$value\": \"g.tester\", type: \"number\", unit: \"人\", onchange: \"g.tester = Number($event || 0)\" }\n        },\n        \"column:ui\": {\n          \"input:designer\": { label: \"设计\", \"$value\": \"g.designer\", type: \"number\", unit: \"人\", onchange: \"g.designer = Number($event || 0)\" }\n        }\n      },\n      \"grid:params\": {\n        columns: 1, mdColumns: 2,\n        \"column:period\": {\n          \"input:months\": { label: \"开发周期\", \"$value\": \"g.months\", type: \"number\", unit: \"个月\", onchange: \"g.months = Number($event || 0)\" },\n          \"slider:months\": { label: \"开发周期\", \"$value\": \"g.months\", min: 1, max: 24, step: 1, unit: \"月\", onchange: \"g.months = Number($event)\" }\n        },\n        \"column:salaryField\": {\n          \"input:salary\": { label: \"人均月薪\", \"$value\": \"g.salary\", type: \"number\", unit: \"元\", onchange: \"g.salary = Number($event || 0)\" },\n          \"slider:salary\": { label: \"人均月薪\", \"$value\": \"g.salary\", min: 8000, max: 50000, step: 1000, unit: \"元\", onchange: \"g.salary = Number($event)\" }\n        }\n      },\n      \"grid:results\": {\n        columns: 1, mdColumns: 4,\n        \"stat:team\": { label: \"团队\", \"$value\": \"g.teamSize()\", unit: \"人\" },\n        \"stat:total\": { label: \"总成本\", \"$value\": \"g.totalCost().toFixed(0)\", unit: \"元\" },\n        \"stat:perperson\": { label: \"人均成本\", \"$value\": \"g.perPersonCost().toFixed(0)\", unit: \"元\" },\n        \"stat:monthly\": { label: \"月均消耗\", \"$value\": \"g.monthlyBurn().toFixed(0)\", unit: \"元\" }\n      }\n    }\n  }\n  }\n}\n```\n\n7个人做半年，月均消耗多少？加个测试人员会不会超预算？拖一下就知道。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_project_cost\",\n  layout: {\n    \"card:breakdown\": {\n      title: \"成本构成\",\n      \"grid:costs\": {\n        columns: 1, mdColumns: 3,\n        \"stat:labor\": { label: \"人力成本\", \"$value\": \"g.laborCost().toFixed(0)\", unit: \"元\" },\n        \"stat:equipment\": { label: \"设备成本\", \"$value\": \"g.equipmentCost().toFixed(0)\", unit: \"元\" },\n        \"stat:office\": { label: \"办公成本\", \"$value\": \"g.officeCost().toFixed(0)\", unit: \"元\" }\n      },\n      \"grid:extra\": {\n        columns: 1, mdColumns: 2,\n        \"stat:risk\": { label: \"风险缓冲（15%）\", \"$value\": \"g.riskBuffer().toFixed(0)\", unit: \"元\" },\n        \"stat:total\": { label: \"总计\", \"$value\": \"g.totalCost().toFixed(0)\", unit: \"元\" }\n      },\n      \"callout:tip\": {\n        \"$tone\": \"g.months > 12 ? 'warning' : 'info'\",\n        \"$text\": \"g.months > 12 ? '项目周期超过1年，建议分阶段交付以降低风险。' : '风险缓冲15%是经验值，复杂项目可调高到20-25%。'\"\n      }\n    }\n  }\n}\n```\n\n\n常见配置参考：\n\n| 团队 | 周期 | 月薪 | 总成本 |\n|------|------|------|--------|\n| 3人 | 3个月 | 15k | 196,650 |\n| 5人 | 6个月 | 15k | 655,500 |\n| 8人 | 9个月 | 20k | 1,989,000 |\n| 10人 | 12个月 | 25k | 4,140,000 |\n\n风险缓冲15%是经验值，复杂项目可以调到20-25%。设备和办公成本按人头估算，不含服务器和第三方服务。",
+      "hash": "9355649f"
+    },
+    {
+      "id": "examples/voltage-divider",
+      "group": "Examples",
+      "title": "分压器计算器",
+      "summary": "输入电压和两个电阻值，计算分压输出，并评估负载效应带来的误差。",
+      "href": "/zh-CN/examples/voltage-divider",
+      "rawHref": "/zh-CN/examples/voltage-divider.md",
+      "sourcePath": "content/examples/voltage-divider/zh-CN.md",
+      "body": "# 分压器计算器\n\n两个电阻串联，从中间引出电压——模拟电路中最简单的信号调理手段。做 ADC 电平转换、设定阈值电压、生成偏置电压，处处都在用。\n\n## 核心公式\n\n空载分压：$V_{out} = V_{in} \\times \\frac{R_2}{R_1 + R_2}$\n\n带负载 $R_L$ 时：$V_{out,loaded} = V_{in} \\times \\frac{R_2 \\parallel R_L}{R_1 + R_2 \\parallel R_L}$\n\n**关键经验**：分压器阻抗（$R_1 \\parallel R_2$）应至少 < 后级输入阻抗的 1/10。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_voltage_divider\",\n  g: {\n    vin: 5, r1: 10000, r2: 10000, rl: 100000,\n    rParallel: function () { return this.r2 * this.rl / (this.r2 + this.rl); },\n    vout: function () { return this.vin * this.r2 / (this.r1 + this.r2); },\n    voutLoaded: function () { return this.vin * this.rParallel() / (this.r1 + this.rParallel()); },\n    errorPercent: function () { return Math.abs((this.voutLoaded() - this.vout()) / this.vout() * 100); },\n    impedanceRatio: function () { var zout = this.r1 * this.r2 / (this.r1 + this.r2); return this.rl / zout; },\n    loadWarning: function () { return this.impedanceRatio() < 10 ? \"负载效应显著，增大 RL 或减小 R1/R2\" : \"分压器阻抗足够低\"; }\n  },\n  layout: {\n    \"section:divider\": {\n      title: \"分压器计算器\",\n      subtitle: \"两个电阻串联，从中间引出电压。\",\n      \"card:divider\": {\n        title: \"分压器计算器\",\n      \"grid:params\": {\n        columns: 1, mdColumns: 2,\n        \"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)\" } },\n        \"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)\" } }\n      },\n      \"grid:params2\": {\n        columns: 1, mdColumns: 2,\n        \"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)\" } },\n        \"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)\" } }\n      },\n      \"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}'\" },\n      \"grid:results\": {\n        columns: 1, mdColumns: 4,\n        \"stat:vout\": { label: \"空载 Vout\", \"$value\": \"g.vout().toFixed(3)\", unit: \"V\" },\n        \"stat:voutLoaded\": { label: \"带载 Vout\", \"$value\": \"g.voutLoaded().toFixed(3)\", unit: \"V\" },\n        \"stat:error\": { label: \"负载误差\", \"$value\": \"g.errorPercent().toFixed(2)\", unit: \"%\" },\n        \"badge:ratio\": { \"$label\": \"g.impedanceRatio() < 10 ? '⚠ 负载效应' : '✓ 匹配良好'\", \"$tone\": \"g.impedanceRatio() < 10 ? 'warning' : 'success'\" }\n      },\n      \"callout:warning\": { \"$tone\": \"g.impedanceRatio() < 10 ? 'warning' : 'info'\", \"$text\": \"g.loadWarning()\" }\n      }\n    }\n  }\n}\n```\n\n\n## 工程笔记\n\n| R1 | R2 | Vout/Vin | 阻抗 |\n|----|----|---------|------|\n| 10k | 10k | 0.50 | 5k |\n| 10k | 3.3k | 0.25 | 2.5k |\n| 10k | 1k | 0.09 | 909 |\n| 33k | 10k | 0.23 | 7.7k |\n\n- **ADC 应用**：分压器阻抗应 < ADC 输入阻抗的 1/10，必要时加缓冲运放\n- **高精度场景**：用 1% 精度电阻，R1 和 R2 用同一批次减少温漂差异\n- **功率限制**：$P = V^2/R$，小阻值分压器注意发热",
+      "hash": "56dc3618"
+    },
+    {
+      "id": "examples/rc-low-pass-filter",
+      "group": "Examples",
+      "title": "RC 低通滤波器",
+      "summary": "用电阻和电容搭建的频率选择电路，计算截止频率和任意频率下的增益衰减。",
+      "href": "/zh-CN/examples/rc-low-pass-filter",
+      "rawHref": "/zh-CN/examples/rc-low-pass-filter.md",
+      "sourcePath": "content/examples/rc-low-pass-filter/zh-CN.md",
+      "body": "# RC 低通滤波器\n\nRC 低通滤波器是模拟电路中最基础的无源滤波器——一个电阻加一个电容，就能把高频噪声从信号路径上滤掉。做 ADC 前端抗混叠、音频去嘶声、PWM 平滑输出，都会用到它。\n\n## 核心公式\n\n截止频率 $f_c$（-3dB 点）：\n\n$$f_c = \\frac{1}{2\\pi RC}$$\n\n对于任意频率 $f$ 的输入信号，输出幅度增益为：\n\n$$|H(f)| = \\frac{1}{\\sqrt{1 + (f/f_c)^2}}$$\n\n## 参数区\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_rc_low_pass_filter\",\n  g: {\n    r: 10000,\n    c: 100,\n    f: 1000,\n    cutoff: function () { return 1 / (2 * Math.PI * this.r * this.c * 1e-9); },\n    gain: function () { return 1 / Math.sqrt(1 + Math.pow(this.f / this.cutoff(), 2)); },\n    gainDb: function () { return (20 * Math.log10(this.gain())).toFixed(1); },\n    regimeLabel: function () { return this.f < this.cutoff() * 0.1 ? \"通带\" : this.f > this.cutoff() * 10 ? \"阻带\" : \"过渡带\"; }\n  },\n  layout: {\n    \"section:params\": {\n      title: \"RC 低通滤波器\",\n      subtitle: \"一个电阻加一个电容，把高频噪声滤掉。\",\n      \"card:params\": {\n        title: \"参数输入\",\n      \"grid:inputs\": {\n        columns: 1, mdColumns: 2,\n        \"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)\" } },\n        \"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)\" } },\n        \"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)\" } }\n      },\n      \"stat:fc\": { label: \"截止频率\", \"$value\": \"g.cutoff().toFixed(1)\", unit: \"Hz\" },\n      \"badge:regime\": { \"$label\": \"g.regimeLabel()\", \"$tone\": \"g.f < g.cutoff() * 0.1 ? 'success' : g.f > g.cutoff() * 10 ? 'danger' : 'warning'\" }\n      }\n    }\n  }\n}\n```\n\n\n## 计算结果\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_rc_low_pass_filter\",\n  layout: {\n    \"card:results\": {\n      title: \"计算结果\",\n      \"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}'\" },\n      \"stat:gain_val\": { label: \"幅值增益 |H(f)|\", \"$value\": \"g.gain().toFixed(4)\" },\n      \"stat:gain_db\": { label: \"增益\", \"$value\": \"g.gainDb()\", unit: \"dB\" },\n      \"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。'\" }\n    }\n  }\n}\n```\n\n\n## 选型参考\n\n下表是常见场景下的经验参数组合。把截止频率设为目标信号最高频率的 5-10 倍，可以保证通带平坦。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_rc_low_pass_filter\",\n  layout: {\n    \"card:selection\": {\n      title: \"选型建议\",\n      \"table:guide\": {\n        columns: [\"R\", \"C\", \"fc\", \"典型用途\"],\n        rows: [\n          [\"1 kΩ\", \"100 nF\", \"1592 Hz\", \"音频低通\"],\n          [\"10 kΩ\", \"100 nF\", \"159 Hz\", \"ADC 抗混叠\"],\n          [\"100 kΩ\", \"10 nF\", \"159 Hz\", \"PWM 平滑\"],\n          [\"1 kΩ\", \"1 µF\", \"159 Hz\", \"电源纹波滤波\"],\n          [\"10 kΩ\", \"1 nF\", \"15915 Hz\", \"高频噪声抑制\"]\n        ]\n      },\n      \"callout:tip\": { \"$tone\": \"g.cutoff() < 100 ? 'info' : g.cutoff() > 10000 ? 'warning' : 'success'\", \"$text\": \"g.cutoff() < 100 ? '低截止频率适合电源滤波和慢信号。' : g.cutoff() > 10000 ? '高截止频率可能无法有效滤除高频噪声。' : '当前截止频率适合大多数应用场景。'\" }\n    }\n  }\n}\n```\n\n\n## 工程笔记\n\n- **R 取值**：太大会增加输出阻抗和后级负载效应；太大会增大热噪声。1kΩ–100kΩ 是常用范围\n- **C 取值**：nF 级 NP0/C0G 陶瓷电容温漂小、精度高；超过 100nF 考虑薄膜电容\n- **负载效应**：后级输入阻抗应至少 > 10 × R，否则 $f_c$ 会偏移\n- **级联**：两级 RC 串联可得到 -40dB/dec 的二阶滚降，但截止频率会降低到约 $0.37f_c$\n\n| $f/f_c$ | 增益 | 衰减 |\n|:---:|:---:|:---:|\n| 0.1 | 0.995 | -0.04 dB |\n| 1.0 | 0.707 | -3 dB |\n| 5.0 | 0.196 | -14.2 dB |\n| 10.0 | 0.100 | -20 dB |",
+      "hash": "52b5fb39"
+    },
+    {
+      "id": "examples/baud-rate-calculator",
+      "group": "Examples",
+      "title": "波特率误差计算器",
+      "summary": "输入晶振频率和目标波特率，计算 UART 波特率误差百分比，判断通信可靠性。",
+      "href": "/zh-CN/examples/baud-rate-calculator",
+      "rawHref": "/zh-CN/examples/baud-rate-calculator.md",
+      "sourcePath": "content/examples/baud-rate-calculator/zh-CN.md",
+      "body": "# 波特率误差计算器\n\n嵌入式开发中，UART 波特率由系统时钟分频得到。晶振频率不能整除目标波特率时会产生误差，误差超过 ±2% 通信就可能丢帧。\n\n## 核心公式\n\n$$Error = \\frac{|BR_{actual} - BR_{target}|}{BR_{target}} \\times 100\\%$$\n\n实际波特率 $BR_{actual} = f_{osc} / (16 \\times N)$，其中 $N = \\text{round}(f_{osc} / (16 \\times BR_{target}))$ 为分频寄存器整数。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_baud_rate_calculator\",\n  g: {\n    freq: 8,\n    freqUnit: \"MHz\",\n    baud: 115200,\n    freqHz: function () { var m = { MHz: 1e6, kHz: 1e3, Hz: 1 }; return this.freq * (m[this.freqUnit] || 1e6); },\n    divisor: function () { return this.freqHz() / (16 * this.baud); },\n    regValue: function () { return Math.round(this.divisor()); },\n    actualBaud: function () { return this.freqHz() / (16 * this.regValue()); },\n    error: function () { return Math.abs((this.actualBaud() - this.baud) / this.baud * 100); },\n    reliability: function () { var e = this.error(); return e < 0.5 ? \"优秀\" : e < 2 ? \"可接受\" : e < 5 ? \"有风险\" : \"不可用\"; },\n    tone: function () { var e = this.error(); return e < 0.5 ? \"success\" : e < 2 ? \"info\" : e < 5 ? \"warning\" : \"danger\"; }\n  },\n  layout: {\n    \"section:baudCalculator\": {\n      title: \"波特率误差计算器\",\n      subtitle: \"输入晶振频率和目标波特率，计算误差。\",\n      \"card:baud\": {\n        title: \"波特率误差计算器\",\n      \"grid:params\": {\n        columns: 1, mdColumns: 2,\n        \"column:freqField\": {\n          \"input:freq\": { label: \"晶振频率\", \"$value\": \"g.freq\", type: \"number\", unit: \"MHz\", onchange: \"g.freq = Number($event || 0)\" }\n        },\n        \"column:baudField\": {\n          \"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)\" }\n        },\n        \"column:unitField\": {\n          \"select:unit\": { label: \"频率单位\", \"$value\": \"g.freqUnit\", options: [{ label: \"MHz\", value: \"MHz\" }, { label: \"kHz\", value: \"kHz\" }, { label: \"Hz\", value: \"Hz\" }], onchange: \"g.freqUnit = String($event)\" }\n        },\n        \"column:divField\": {\n          \"stat:divisor\": { label: \"分频比\", \"$value\": \"g.divisor().toFixed(3)\" }\n        }\n      },\n      \"formula:equation\": { \"$tex\": \"'\\\\\\\\text{Error} = \\\\\\\\frac{|' + g.actualBaud().toFixed(0) + ' - ' + g.baud + '|}{' + g.baud + '} \\\\\\\\times 100\\\\\\\\% = ' + g.error().toFixed(2) + '\\\\\\\\%'\" },\n      \"grid:results\": {\n        columns: 1, mdColumns: 4,\n        \"stat:actualBaud\": { label: \"实际波特率\", \"$value\": \"g.actualBaud().toFixed(0)\", unit: \"bps\" },\n        \"stat:error\": { label: \"误差\", \"$value\": \"g.error().toFixed(2)\", unit: \"%\" },\n        \"stat:reliability\": { label: \"可靠性\", \"$value\": \"g.reliability()\", \"$tone\": \"g.tone()\" },\n        \"stat:regValue\": { label: \"寄存器值\", \"$value\": \"g.regValue()\" }\n      },\n      \"callout:advice\": { \"$tone\": \"g.tone()\", \"$text\": \"g.error() < 0.5 ? '误差极小，通信可靠。' : g.error() < 2 ? '误差在可接受范围内（<2%），绝大多数场景可用。' : g.error() < 5 ? '误差偏大，长帧通信可能失败，建议更换晶振或降低波特率。' : '误差过大，通信不可靠。请选择能整除的晶振频率。'\" }\n      }\n    }\n  }\n}\n```\n\n\n## 常用晶振频率与波特率误差表\n\n| 晶振 | 9600 | 19200 | 38400 | 57600 | 115200 |\n|------|------|-------|-------|-------|--------|\n| 1.8432 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |\n| 3.6864 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |\n| 4.0000 MHz | 8.51 | 8.51 | 8.51 | 8.51 | 8.51 |\n| 7.3728 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |\n| 8.0000 MHz | 8.51 | 8.51 | 8.51 | 8.51 | 8.51 |\n| 11.0592 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |\n| 14.7456 MHz | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 |\n| 16.0000 MHz | 8.51 | 8.51 | 8.51 | 8.51 | 8.51 |\n\n**工程笔记**：\n\n- 零误差的关键：晶振频率能被 $16 \\times BR$ 整除\n- **11.0592 MHz** 是 UART 最经典的选择，对所有标准波特率零误差\n- **7.3728 MHz** 和 **14.7456 MHz** 同样零误差\n- 错误 < 2% 在实际工程中通常可工作，但高速长帧场景建议 < 1%",
+      "hash": "7ac3d2d9"
+    },
+    {
+      "id": "examples/search-filter-table",
+      "group": "Examples",
+      "title": "搜索与过滤表格",
+      "summary": "搜索输入框实时过滤表格行，点击行展开详情，展示 input + 动态 table + collapsible 组合。",
+      "href": "/zh-CN/examples/search-filter-table",
+      "rawHref": "/zh-CN/examples/search-filter-table.md",
+      "sourcePath": "content/examples/search-filter-table/zh-CN.md",
+      "body": "# 搜索与过滤表格\n\n文档里放一个静态表格很常见，但加上搜索和过滤就会变成立即可用的工具。这里用 `input` 绑搜索关键词 + 动态过滤 + `collapsible` 展开行详情。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_search_filter\",\n  g: {\n    query: \"\", selected: \"\", selectedItem: null,\n    allItems: [\n      { id: \"btn-1\", name: \"Button 按钮\", category: \"Action\", status: \"ready\", notes: \"支持 variant 和 size。\" },\n      { id: \"card-1\", name: \"Card 卡片\", category: \"Layout\", status: \"ready\", notes: \"最常用的分组容器。\" },\n      { id: \"input-1\", name: \"Input 输入框\", category: \"Input\", status: \"ready\", notes: \"支持 type、unit 和 placeholder。\" },\n      { id: \"tabs-1\", name: \"Tabs 选项卡\", category: \"Navigation\", status: \"ready\", notes: \"支持水平和垂直方向。\" },\n      { id: \"table-1\", name: \"Table 表格\", category: \"Display\", status: \"ready\", notes: \"columns 数组 + rows 数组。\" },\n      { id: \"formula-1\", name: \"Formula 公式\", category: \"Display\", status: \"ready\", notes: \"依赖 KaTeX 渲染 LaTeX。\" },\n      { id: \"toast-1\", name: \"Toast 通知\", category: \"Feedback\", status: \"experimental\", notes: \"支持 type 变体。\" },\n      { id: \"secure-1\", name: \"Secure 安全运行时\", category: \"Tooling\", status: \"draft\", notes: \"基于 iframe 沙箱。\" }\n    ],\n    filtered: function () {\n      var q = this.query.toLowerCase();\n      if (!q) return this.allItems;\n      return this.allItems.filter(function (item) { return item.name.toLowerCase().includes(q) || item.category.toLowerCase().includes(q); });\n    },\n    matched: function () { return this.filtered().length; },\n    select: function (id) { this.selected = this.selected === id ? \"\" : id; }\n  },\n  layout: {\n    \"section:search\": {\n      eyebrow: \"组件查询\",\n      title: \"搜索与过滤表格\",\n      subtitle: \"输入关键词实时过滤组件列表，点击任意行查看详情。\",\n      \"input:query\": { label: \"搜索组件\", \"$value\": \"g.query\", type: \"text\", placeholder: \"输入名称或分类关键词...\", onchange: \"g.query = String($event || '')\" },\n      \"stat:matched\": { \"$label\": \"'匹配结果'\", \"$value\": \"g.matched()\", \"$unit\": \"'/' + g.allItems.length + ' 项'\" },\n      \"table:list\": {\n        columns: [\"名称\", \"分类\", \"状态\", \"\"],\n        \"$rows\": \"g.filtered().map(function(item) { return [item.name, item.category, item.status, item.id]; })\"\n      },\n      \"callout:empty\": {\n        \"$if\": \"g.matched() === 0\",\n        tone: \"warning\",\n        \"$text\": \"'未找到匹配「' + g.query + '」的组件。'\"\n      }\n    }\n  }\n}\n```\n\n**这个示例的核心技巧：**\n\n- `input` 的 `onchange` 更新 `g.query` → 触发 `g.filtered()` 重新计算\n- `g.filtered()` 用 `filter` 过滤 `allItems` 数组\n- `\"$rows\"` 动态计算行的二维数组——每个 item 映射为一行\n- `g.matched()` 返回过滤后数量，用于 stat 和 callout 的条件显示\n- `$if` 在无匹配时显示空结果提示\n\n这就是 \"搜索框 → 动态表格\" 的基础范式。相比硬编码的 table rows，动态 rows 可以随输入实时变化。\n\n---\n\n## 进阶玩法：展开行详情\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_search_filter\",\n  layout: {\n    \"section:detail\": {\n      eyebrow: \"组件详情\",\n      title: \"选中查看详情\",\n      \"accordion:faq\": {\n        multiple: true,\n        items: [\n          { value: \"btn-1\", label: \"Button 按钮\", icon: \"cursor-click\", content: \"触发操作的基础组件。支持 variant (solid/outline/ghost) 和 size (sm/md/lg) 等变体。\" },\n          { value: \"card-1\", label: \"Card 卡片\", icon: \"rectangle\", content: \"内容分组容器。最常用的布局组件之一，比 section 更轻量。\" },\n          { value: \"input-1\", label: \"Input 输入框\", icon: \"textbox\", content: \"单行或数字输入。支持 type、unit、placeholder 等属性。\" }\n        ]\n      }\n    }\n  }\n}\n```\n\n## 为什么动态 rows 值得学？\n\n在静态表格中，rows 是硬编码的二维数组。一旦数据量增加，或者需要按条件筛选，静态 rows 就力不从心了。`$rows` 允许你在 g 方法中动态生成行数据——这对于：\n\n- **文档内数据浏览**：目录、API 列表、配置项\n- **AI 输出展示**：大模型生成的表格结果需要可筛选\n- **知识库查询**：搜索内部组件/API/术语\n\n都非常实用。\n\n---",
+      "hash": "16e8308e"
+    },
+    {
+      "id": "examples/project-dashboard",
+      "group": "Examples",
+      "title": "项目仪表盘",
+      "summary": "用 section + grid 搭建信息仪表盘，覆盖 Sprint 进度、质量指标和团队健康度的多卡片联动。",
+      "href": "/zh-CN/examples/project-dashboard",
+      "rawHref": "/zh-CN/examples/project-dashboard.md",
+      "sourcePath": "content/examples/project-dashboard/zh-CN.md",
+      "body": "# 项目仪表盘\n\n真实项目需要一览全局——不是单一张计算卡片，而是一个**仪表盘**。用 `section` 做区块分组，`grid` 做多列布局，每个 card 展示一个关注领域。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_dashboard\",\n  g: {\n    sprint: 8, team: 6, sprintProgress: 72, bugs: 12, resolved: 9,\n    scope: \"on-track\",\n    bugRate: function () { return this.resolved / this.bugs * 100; },\n    teamLoad: function () { return Math.min(100, this.sprint / this.team * 20); },\n    scopeStatus: function () { return this.scope === \"on-track\" ? \"正常\" : this.scope === \"at-risk\" ? \"有风险\" : \"已偏离\"; }\n  },\n  layout: {\n    \"section:dashboard\": {\n      eyebrow: \"Sprint 概览\",\n      title: \"项目仪表盘 · Sprint 24\",\n      subtitle: \"数据截止今日 10:00 AM。拖滑动条查看不同假想数据的效果。\",\n      \"grid:row1\": {\n        columns: 1, mdColumns: 3,\n        \"card:sprint\": {\n          title: \"Sprint 进度\",\n          \"progress:sp\": { label: \"完成度\", \"$value\": \"g.sprintProgress\" },\n          \"stat:scope\": { label: \"范围状态\", \"$value\": \"g.scopeStatus()\" },\n          \"badge:flag\": { \"$label\": \"g.scope === 'on-track' ? '正常' : g.scope === 'at-risk' ? '⚠ 预警' : '🚨 偏离'\", \"$tone\": \"g.scope === 'on-track' ? 'success' : g.scope === 'at-risk' ? 'warning' : 'danger'\" }\n        },\n        \"card:quality\": {\n          title: \"质量指标\",\n          \"stat:bugs\": { label: \"剩余缺陷\", value: \"3\", unit: \"个\" },\n          \"progress:bugFix\": { label: \"修复率\", \"$value\": \"g.bugRate()\" },\n          \"badge:trend\": { label: \"趋势：改善中\", tone: \"success\" }\n        },\n        \"card:team\": {\n          title: \"团队健康度\",\n          \"stat:members\": { label: \"团队成员\", value: \"6\", unit: \"人\" },\n          \"progress:load\": { label: \"负载指数\", \"$value\": \"g.teamLoad()\" },\n          \"callout:note\": { \"$tone\": \"g.teamLoad() > 80 ? 'warning' : 'info'\", \"$text\": \"g.teamLoad() > 80 ? '负载偏高，建议调整任务分配。' : '团队负载在健康范围内。'\" }\n        }\n      },\n      \"card:detail\": {\n        title: \"详细数据\",\n        \"table:tasks\": {\n          columns: [\"任务\", \"负责人\", \"状态\", \"耗时\"],\n          rows: [[\"API 重构\", \"张三\", \"已完成\", \"3d\"], [\"前端组件\", \"李四\", \"进行中\", \"2d\"], [\"集成测试\", \"王五\", \"代码审查\", \"1.5d\"], [\"性能优化\", \"赵六\", \"待开始\", \"—\"]]\n        },\n        \"callout:help\": { \"$tone\": \"g.bugRate() < 80 ? 'warning' : 'success'\", \"$text\": \"g.bugRate() < 80 ? '缺陷修复率低于80%，建议优先处理高优先级缺陷。' : '缺陷修复率良好，项目质量可控。'\" }\n      }\n    }\n  }\n}\n```\n\n**仪表盘的设计思路：**\n\n- 用 `section` 做顶层分组（带 eyebrow 和 subtitle，语义清晰）\n- 用 `grid` 做多列布局，每个格子放一个 `card`\n- 每个 card 内放不同关注维度的 stat / progress / badge\n- 底部放一个详情 card，展示表格数据（任务列表）\n- 通过 `$text` 和 `$tone` 在 callout 中做条件提示\n\n\n这个模式适用于：技术 Leader 周报面板、发布质检看板、团队 OKR 追踪、SRE 服务大盘。",
+      "hash": "aacce5f0"
+    },
+    {
+      "id": "examples/form-wizard-steps",
+      "group": "Examples",
+      "title": "ToolHost 表单提问",
+      "summary": "AI 对话过程中突然需要收集用户信息，弹出表单卡片等待用户提交，提交后显示结果。",
+      "href": "/zh-CN/examples/form-wizard-steps",
+      "rawHref": "/zh-CN/examples/form-wizard-steps.md",
+      "sourcePath": "content/examples/form-wizard-steps/zh-CN.md",
+      "body": "# ToolHost 表单提问\n\nAI 对话过程中，有时需要收集用户信息——创建项目、配置服务、提交工单。这时候 AI 会弹出一个表单卡片，用户填写后提交，AI 继续处理。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_form_wizard\",\n  g: {\n    submitted: false,\n    formData: null,\n    fields: { name: \"\", description: \"\", type: \"web\", priority: \"medium\" },\n    submit: function () {\n      this.submitted = true;\n      this.formData = { name: this.fields.name, description: this.fields.description, type: this.fields.type, priority: this.fields.priority, timestamp: new Date().toLocaleString() };\n    }\n  },\n  layout: {\n    \"section:toolhost\": {\n      eyebrow: \"ToolHost · 表单提问\",\n      title: \"AI 需要收集信息\",\n      subtitle: \"AI 弹出表单，用户填写后提交，AI 继续处理。\",\n      \"callout:context\": {\n        tone: \"info\",\n        text: \"AI：我需要为你创建一个新项目，请填写以下信息。\"\n      },\n      \"grid:fields\": {\n        columns: 1, mdColumns: 2,\n        \"input:name\": { label: \"项目名称\", \"$value\": \"g.fields.name\", placeholder: \"my-project\", onchange: \"g.fields.name = String($event || '')\" },\n        \"input:description\": { label: \"项目描述\", \"$value\": \"g.fields.description\", placeholder: \"简短描述项目用途\", onchange: \"g.fields.description = String($event || '')\" },\n        \"select:type\": {\n          label: \"项目类型\",\n          \"$value\": \"g.fields.type\",\n          options: [\n            { label: \"Web 应用\", value: \"web\" },\n            { label: \"API 服务\", value: \"api\" },\n            { label: \"CLI 工具\", value: \"cli\" }\n          ],\n          onchange: \"g.fields.type = String($event)\"\n        },\n        \"select:priority\": {\n          label: \"优先级\",\n          \"$value\": \"g.fields.priority\",\n          options: [\n            { label: \"低\", value: \"low\" },\n            { label: \"中\", value: \"medium\" },\n            { label: \"高\", value: \"high\" }\n          ],\n          onchange: \"g.fields.priority = String($event)\"\n        }\n      },\n      \"grid:actions\": {\n        columns: 2,\n        \"button:submit\": { label: \"提交\", onclick: \"g.submit()\" },\n        \"button:skip\": { label: \"跳过\" }\n      },\n      \"callout:result\": {\n        \"$tone\": \"g.submitted ? 'success' : 'info'\",\n        \"$text\": \"g.submitted ? '已提交：' + g.formData.name + '（' + g.formData.type + '）' : '等待用户填写...'\"\n      },\n      \"code-block:toolresult\": {\n        title: \"返回给 AI 的 ToolResult\",\n        language: \"json\",\n        \"$code\": \"g.submitted ? JSON.stringify({ toolCallId: 'call_abc123', toolName: 'create-project', status: 'submitted', value: g.formData }, null, 2) : '// 提交后显示 ToolResult'\"\n      }\n    }\n  }\n}\n```\n\n---",
+      "hash": "3d2ac73e"
+    },
+    {
+      "id": "examples/tech-selection-evaluator",
+      "group": "Examples",
+      "title": "技术选型评估",
+      "summary": "评估不同技术方案的优劣，通过跨 fence 联动实现参数选择、评分分析和结论推荐。",
+      "href": "/zh-CN/examples/tech-selection-evaluator",
+      "rawHref": "/zh-CN/examples/tech-selection-evaluator.md",
+      "sourcePath": "content/examples/tech-selection-evaluator/zh-CN.md",
+      "body": "# 技术选型评估\n\n团队要选前端框架，React、Vue、Svelte、Angular，各有各的好。性能、生态、学习曲线、维护成本——怎么量化比较？这里用跨 fence 联动，选一个技术栈，下面的评分和结论自动跟着变。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_tech_selection\",\n  g: {\n    tech: \"react\",\n    performance: 85,\n    ecosystem: 95,\n    learning: 70,\n    maintenance: 80,\n    techLabel: function () { return { react: \"React\", vue: \"Vue\", svelte: \"Svelte\", angular: \"Angular\" }[this.tech] || this.tech; },\n    totalScore: function () { return (this.performance * 0.3 + this.ecosystem * 0.25 + this.learning * 0.2 + this.maintenance * 0.25).toFixed(1); },\n    recommendation: function () { var s = parseFloat(this.totalScore()); return s >= 85 ? \"强烈推荐\" : s >= 75 ? \"推荐\" : s >= 60 ? \"可以考虑\" : \"不推荐\"; },\n    riskLevel: function () { var s = parseFloat(this.totalScore()); return s >= 85 ? \"低\" : s >= 75 ? \"中\" : \"高\"; },\n    scores: function () {\n      var data = {\n        react: { performance: 85, ecosystem: 95, learning: 70, maintenance: 80 },\n        vue: { performance: 80, ecosystem: 85, learning: 85, maintenance: 85 },\n        svelte: { performance: 95, ecosystem: 70, learning: 90, maintenance: 90 },\n        angular: { performance: 80, ecosystem: 80, learning: 60, maintenance: 75 }\n      };\n      return data[this.tech] || data.react;\n    }\n  },\n  layout: {\n    \"section:select\": {\n      eyebrow: \"决策辅助\",\n      title: \"技术选型评估\",\n      subtitle: \"选一个技术栈，下面的评分和结论自动跟着变。\",\n      \"card:select\": {\n        title: \"选择技术栈\",\n      \"select:tech\": {\n        label: \"技术栈\",\n        \"$value\": \"g.tech\",\n        options: [\n          { label: \"React\", value: \"react\" },\n          { label: \"Vue\", value: \"vue\" },\n          { label: \"Svelte\", value: \"svelte\" },\n          { label: \"Angular\", value: \"angular\" }\n        ],\n        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;\"\n      },\n      \"badge:current\": {\n        \"$label\": \"'当前：' + g.techLabel()\",\n        tone: \"info\"\n      }\n      }\n    }\n  }\n}\n```\n\n选了React，觉得性能分太低？拖一下滑块调整，下面的推荐和风险等级实时更新。这就是跨 fence 联动的价值——三个独立的代码块，共享同一份状态。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_tech_selection\",\n  layout: {\n    \"card:scoring\": {\n      title: \"评分调整\",\n      \"grid:sliders\": {\n        columns: 1, mdColumns: 2,\n        \"column:left\": {\n          \"slider:performance\": { label: \"性能（30%）\", \"$value\": \"g.performance\", min: 0, max: 100, step: 5, onchange: \"g.performance = Number($event)\" },\n          \"slider:ecosystem\": { label: \"生态系统（25%）\", \"$value\": \"g.ecosystem\", min: 0, max: 100, step: 5, onchange: \"g.ecosystem = Number($event)\" }\n        },\n        \"column:right\": {\n          \"slider:learning\": { label: \"学习曲线（20%）\", \"$value\": \"g.learning\", min: 0, max: 100, step: 5, onchange: \"g.learning = Number($event)\" },\n          \"slider:maintenance\": { label: \"维护成本（25%）\", \"$value\": \"g.maintenance\", min: 0, max: 100, step: 5, onchange: \"g.maintenance = Number($event)\" }\n        }\n      },\n      \"grid:weights\": {\n        columns: 1, mdColumns: 4,\n        \"stat:perf\": { label: \"性能（30%）\", \"$value\": \"g.performance\", unit: \"分\" },\n        \"stat:eco\": { label: \"生态（25%）\", \"$value\": \"g.ecosystem\", unit: \"分\" },\n        \"stat:learn\": { label: \"学习（20%）\", \"$value\": \"g.learning\", unit: \"分\" },\n        \"stat:maint\": { label: \"维护（25%）\", \"$value\": \"g.maintenance\", unit: \"分\" }\n      }\n    }\n  }\n}\n```\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_tech_selection\",\n  layout: {\n    \"card:result\": {\n      title: \"综合评估\",\n      \"grid:scores\": {\n        columns: 1, mdColumns: 3,\n        \"stat:total\": { label: \"综合评分\", \"$value\": \"g.totalScore()\" },\n        \"stat:recommendation\": { label: \"推荐程度\", \"$value\": \"g.recommendation()\", \"$tone\": \"parseFloat(g.totalScore()) >= 85 ? 'success' : parseFloat(g.totalScore()) >= 75 ? 'info' : 'warning'\" },\n        \"stat:risk\": { label: \"风险等级\", \"$value\": \"g.riskLevel()\", \"$tone\": \"parseFloat(g.totalScore()) >= 85 ? 'success' : parseFloat(g.totalScore()) >= 75 ? 'warning' : 'danger'\" }\n      },\n      \"callout:advice\": {\n        \"$tone\": \"parseFloat(g.totalScore()) >= 85 ? 'success' : parseFloat(g.totalScore()) >= 75 ? 'info' : 'warning'\",\n        \"$text\": \"parseFloat(g.totalScore()) >= 85 ? g.techLabel() + ' 综合优秀，强烈推荐。' : parseFloat(g.totalScore()) >= 75 ? g.techLabel() + ' 综合良好，推荐采用。' : g.techLabel() + ' 综合一般，建议谨慎。'\"\n      }\n    }\n  }\n}\n```\n\n\n默认评分参考：\n\n| 技术栈 | 性能 | 生态 | 学习 | 维护 | 综合 |\n|--------|------|------|------|------|------|\n| React | 85 | 95 | 70 | 80 | 82.5 |\n| Vue | 80 | 85 | 85 | 85 | 83.75 |\n| Svelte | 95 | 70 | 90 | 90 | 85.5 |\n| Angular | 80 | 80 | 60 | 75 | 73.75 |\n\n权重分配：性能30%、生态25%、学习曲线20%、维护成本25%。可以按团队实际情况调整。",
+      "hash": "403c7e46"
+    },
+    {
+      "id": "examples/toolhost-demo",
+      "group": "Examples",
+      "title": "ToolHost 对话演示",
+      "summary": "展示 SlexKit 的 ToolHost 能力：在 AI 对话流中内嵌交互式表单，收集用户输入后返回结构化 ToolResult。",
+      "href": "/zh-CN/examples/toolhost-demo",
+      "rawHref": "/zh-CN/examples/toolhost-demo.md",
+      "sourcePath": "content/examples/toolhost-demo/zh-CN.md",
+      "body": "## ToolHost 对话演示\n\nAI 对话中需要收集用户信息时，会调用 **ToolHost** 弹出交互式表单卡片。用户填写并提交后，表单数据以结构化的 `ToolResult` 返回给 AI，AI 继续处理。\n\n下方是一个完整的对话演示——模拟用户请求创建项目，AI 调用 `fill-form` 模板收集项目信息，提交后返回 ToolResult。\n\n**流程：** 用户发起请求 → AI 判断需要工具调用 → ToolHost 弹出表单 → 用户填写并提交 → 返回 ToolResult → AI 继续响应\n\nAI 端调用 ToolHost 的代码如下：\n\n```js\nimport { renderToolCall } from \"slexkit/toolhost\";\n\nconst { promise } = renderToolCall({\n  name: \"fill-form\",\n  arguments: {\n    title: \"创建新项目\",\n    description: \"请填写项目的基本信息。\",\n    submitLabel: \"提交\",\n    ignoreLabel: \"取消\",\n    fields: [\n      { name: \"name\", label: \"项目名称\", type: \"text\", required: true },\n      { name: \"type\", label: \"项目类型\", type: \"select\", options: [\n        { label: \"Web 应用\", value: \"web\" },\n        { label: \"API 服务\", value: \"api\" },\n        { label: \"CLI 工具\", value: \"cli\" },\n      ]},\n      { name: \"priority\", label: \"优先级\", type: \"select\", options: [\n        { label: \"低\", value: \"low\" },\n        { label: \"中\", value: \"medium\" },\n        { label: \"高\", value: \"high\" },\n      ]},\n    ],\n  },\n}, container);\n\n// 用户提交后，promise resolve 为 ToolResult\nconst result = await promise;\n// → { toolName: \"fill-form\", status: \"submitted\", value: { name, type, priority } }\n```",
+      "hash": "0d82032b"
+    },
+    {
+      "id": "examples/roi-estimator",
+      "group": "Examples",
+      "title": "自建还是外购决策",
+      "summary": "自建还是外购决策矩阵——功能覆盖、成本对比、时间线、风险四维度评估，自动推荐方案。",
+      "href": "/zh-CN/examples/roi-estimator",
+      "rawHref": "/zh-CN/examples/roi-estimator.md",
+      "sourcePath": "content/examples/roi-estimator/zh-CN.md",
+      "body": "# 自建还是外购决策\n\n技术团队永恒的难题：这个功能是自己做，还是买现成的？这里提供一个结构化决策框架——不是算一个数字，而是多维度权衡。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_build_vs_buy\",\n  g: {\n    scope: \"core\",\n    buildFit: 60, buildTime: 6, buildCost: 80,\n    buyFit: 85, buyTime: 1, buyCost: 40, buyVendorLock: 30,\n    buildTotal: function () { return (this.buildFit + (100 - this.buildCost) + (100 - this.buildTime * 10)) / 3; },\n    buyTotal: function () { return (this.buyFit + (100 - this.buyCost) + (100 - this.buyTime * 10) - this.buyVendorLock * 0.5) / 3; },\n    recommendation: function () {\n      if (this.scope === \"core\") return this.buildTotal() >= this.buyTotal() ? \"自建\" : \"外购（但建议评估长期成本）\";\n      return this.buyTotal() >= this.buildTotal() ? \"外购\" : \"自建（非核心功能自建需谨慎）\";\n    },\n    diff: function () { return Math.abs(this.buildTotal() - this.buyTotal()); }\n  },\n  layout: {\n    \"section:decision\": {\n      eyebrow: \"技术决策\",\n      title: \"自建还是外购决策\",\n      subtitle: \"对比两个方案的各维度评分，系统综合推荐。拖滑块调整评分看结论变化。\",\n      \"select:scope\": {\n        label: \"功能定位\",\n        \"$value\": \"g.scope\",\n        options: [\n          { label: \"核心业务（差异化的关键）\", value: \"core\" },\n          { label: \"辅助功能（非核心）\", value: \"non-core\" }\n        ],\n        onchange: \"g.scope = String($event)\"\n      },\n      \"table:comparison\": {\n        columns: [\"维度\", \"自建方案\", \"外购方案\"],\n        rows: [\n          [\"功能匹配度\", \"g.buildFit + '%'\", \"g.buyFit + '%'\"],\n          [\"上线时间\", \"g.buildTime + ' 个月'\", \"g.buyTime + ' 个月'\"],\n          [\"成本评分\", \"g.buildCost + '/100'\", \"g.buyCost + '/100'\"],\n          [\"供应商锁定\", \"—\", \"g.buyVendorLock + '/100'\"]\n        ]\n      },\n      \"grid:sliders\": {\n        columns: 1, mdColumns: 2,\n        \"column:build\": {\n          \"card:buildSliders\": {\n            title: \"自建方案\",\n            \"slider:buildFit\": { label: \"功能匹配度\", \"$value\": \"g.buildFit\", min: 0, max: 100, step: 5, onchange: \"g.buildFit = Number($event)\" },\n            \"slider:buildTime\": { label: \"上线时间（月）\", \"$value\": \"g.buildTime\", min: 1, max: 24, step: 1, unit: \"月\", onchange: \"g.buildTime = Number($event)\" },\n            \"slider:buildCost\": { label: \"成本评分\", \"$value\": \"g.buildCost\", min: 0, max: 100, step: 5, onchange: \"g.buildCost = Number($event)\" }\n          }\n        },\n        \"column:buy\": {\n          \"card:buySliders\": {\n            title: \"外购方案\",\n            \"slider:buyFit\": { label: \"功能匹配度\", \"$value\": \"g.buyFit\", min: 0, max: 100, step: 5, onchange: \"g.buyFit = Number($event)\" },\n            \"slider:buyTime\": { label: \"上线时间（月）\", \"$value\": \"g.buyTime\", min: 1, max: 24, step: 1, unit: \"月\", onchange: \"g.buyTime = Number($event)\" },\n            \"slider:buyCost\": { label: \"成本评分\", \"$value\": \"g.buyCost\", min: 0, max: 100, step: 5, onchange: \"g.buyCost = Number($event)\" },\n            \"slider:lock\": { label: \"供应商锁定风险\", \"$value\": \"g.buyVendorLock\", min: 0, max: 100, step: 5, onchange: \"g.buyVendorLock = Number($event)\" }\n          }\n        }\n      },\n      \"grid:results\": {\n        columns: 1, mdColumns: 3,\n        \"stat:buildScore\": { label: \"自建综合得分\", \"$value\": \"g.buildTotal().toFixed(1)\" },\n        \"stat:buyScore\": { label: \"外购综合得分\", \"$value\": \"g.buyTotal().toFixed(1)\" },\n        \"badge:winner\": { \"$label\": \"g.recommendation().startsWith('自建') ? '建议自建' : '建议外购'\", \"$tone\": \"g.diff() < 10 ? 'warning' : g.recommendation().startsWith('自建') ? 'info' : 'success'\" }\n      },\n      \"callout:advice\": {\n        \"$tone\": \"g.diff() < 10 ? 'warning' : 'info'\",\n        \"$text\": \"g.diff() < 10 ? '两个方案得分非常接近——建议引入更多决策者参与讨论，或做小范围 POC。' : g.recommendation() + ' 方案的得分明显更高。但请结合团队实际能力和战略方向做最终决定。'\"\n      },\n      \"accordion:detail\": {\n        multiple: true,\n        items: [\n          { value: \"cost\", label: \"成本说明\", content: \"成本评分越低越好（0 = 零成本，100 = 极高成本）。外购方案需额外考虑供应商锁定风险。\" },\n          { value: \"scope\", label: \"核心 vs 非核心策略\", content: \"核心业务功能通常倾向自建以保持控制力和差异化。非核心功能外购可以释放团队精力。\" },\n          { value: \"hybrid\", label: \"第三条路：混合方案\", content: \"也可以考虑先外购快速上线，同时内部规划自建替代方案，等自建成熟后迁移。\" }\n        ]\n      }\n    }\n  }\n}\n```\n\n\n**Build vs Buy 决策模型的要点：**\n\n- `select` 定义功能定位（核心/非核心），影响决策偏向\n- 两套 slider 独立调整各自评分\n- `buildTotal()` 和 `buyTotal()` 用加权公式计算综合得分\n- `recommendation()` 结合功能定位和得分给出建议\n- accordion 提供额外的决策指南（成本说明、策略建议、混合方案）\n\n这个框架帮你把\"凭感觉拍脑袋\"变成\"有依据的比较\"。",
+      "hash": "73bc3af9"
+    },
+    {
+      "id": "examples/cross-doc-state-lab",
+      "group": "Examples",
+      "title": "跨文档状态实验室",
+      "summary": "展示 SlexKit 最独特的跨 fence 状态共享——文档不同位置的多块 slex 代码共享同一个响应式 g 对象。",
+      "href": "/zh-CN/examples/cross-doc-state-lab",
+      "rawHref": "/zh-CN/examples/cross-doc-state-lab.md",
+      "sourcePath": "content/examples/cross-doc-state-lab/zh-CN.md",
+      "body": "# 跨文档状态实验室\n\n这是 SlexKit 最独特的能力之一：**在同一个 Markdown 文档的不同位置放置多块 `slex` 代码，只要它们使用相同的 `namespace`，就会共享同一份 `g` 状态**。\n\n下面是三个独立的 ` ```slex ` fence——一个控制面板和两个观察面板。试试修改控制面板的值，看下方两个面板实时响应。\n\n## 主控面板\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_cross_doc_lab\",\n  g: {\n    color: \"blue\", size: 16, theme: \"light\",\n    style: function () {\n      return 'color: ' + this.color + '; font-size: ' + this.size + 'px;';\n    }\n  },\n  layout: {\n    \"section:control\": {\n      eyebrow: \"平台能力\",\n      title: \"跨文档状态实验室 · 主控面板\",\n      subtitle: \"修改以下任何参数——下方两个独立 fence 块的卡片会同步更新。\",\n      \"grid:controls\": {\n        columns: 1, mdColumns: 3,\n        \"select:color\": {\n          label: \"文字颜色\",\n          \"$value\": \"g.color\",\n          options: [\n            { label: \"蓝色\", value: \"blue\" },\n            { label: \"绿色\", value: \"green\" },\n            { label: \"橙色\", value: \"orange\" },\n            { label: \"紫色\", value: \"purple\" }\n          ],\n          onchange: \"g.color = String($event)\"\n        },\n        \"slider:size\": { label: \"字体大小\", \"$value\": \"g.size\", min: 8, max: 48, step: 2, unit: \"px\", onchange: \"g.size = Number($event)\" },\n        \"select:theme\": {\n          label: \"卡片主题\",\n          \"$value\": \"g.theme\",\n          options: [\n            { label: \"明亮\", value: \"light\" },\n            { label: \"暗色\", value: \"dark\" },\n            { label: \"信息\", value: \"info\" }\n          ],\n          onchange: \"g.theme = String($event)\"\n        }\n      },\n      \"badge:note\": { \"$label\": \"'样式 ' + g.color + ' ' + g.size + 'px'\", tone: \"info\" }\n    }\n  }\n}\n```\n\n## 观察面板 A（同一 namespace，不同 fence 块）\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_cross_doc_lab\",\n  layout: {\n    \"card:a\": {\n      title: \"观察面板 A — 纯文本样式\",\n      \"column:stylePreview\": {\n        \"text:styleMeta\": { \"$text\": \"'字体大小：' + g.size + 'px'\" },\n        \"text:styledValue\": { \"$text\": \"g.color\", \"$color\": \"g.color\", \"$size\": \"g.size\" }\n      },\n      \"callout:preview\": {\n        \"$tone\": \"g.theme === 'dark' ? 'danger' : g.theme === 'info' ? 'info' : 'success'\",\n        \"$text\": \"g.theme === 'dark' ? '暗色模式：适合夜间阅读的配色方案。' : g.theme === 'info' ? '信息模式：用于强调技术细节。' : '明亮模式：默认的文档阅读配色。'\"\n      }\n    }\n  }\n}\n```\n\n## 观察面板 B\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_cross_doc_lab\",\n  layout: {\n    \"card:b\": {\n      title: \"观察面板 B — 参数详情\",\n      \"grid:params\": {\n        columns: 1, mdColumns: 3,\n        \"stat:col\": { label: \"颜色\", \"$value\": \"g.color\" },\n        \"stat:sz\": { label: \"字号\", \"$value\": \"g.size\", unit: \"px\" },\n        \"stat:th\": { label: \"主题\", \"$value\": \"g.theme\" }\n      },\n      \"badge:sync\": { \"$label\": \"'已同步 ' + g.color\", \"$tone\": \"g.color === 'blue' ? 'info' : g.color === 'green' ? 'success' : g.color === 'orange' ? 'warning' : 'info'\" }\n    }\n  }\n}\n```\n\n**三个 fence 块**，同一个 `namespace: \"example_cross_doc_lab\"`，所有组件共享 `g` 对象。上面你在主控面板改颜色和大小，下面两个观察面板马上更新。\n\n---\n\n### 这意味着什么？\n\n假设你在一篇长篇 Markdown 文档中：\n\n```\n[控制面板 — 选择行业/指标/时间范围]\n... 30 段 Markdown 叙事 ...\n[图表 A — 自动反映控制面板的选项]\n... 更多分析文字 ...\n[图表 B — 同一份状态的不同可视化]\n```\n\n每个 ` ```slex ` 块可以独立渲染，但只要 namespace 相同，它们就共享状态。这对于：\n\n- **技术白皮书**：顶部选参数，中间分析，底部结论，全程联动\n- **项目协作文档**：状态跟踪表格在顶部，各团队任务卡片散布在正文中\n- **AI 输出增强**：模型生成的多个可视化节点共享同一份推理结果\n\n\n都是极其强大的模式。这不是一个 \"组件库\" 能做到的——这是 SlexKit 的核心设计。",
+      "hash": "7ac63204"
+    },
+    {
+      "id": "examples/network-policy-fetch-card",
+      "group": "Examples",
+      "title": "JSONPlaceholder 网络请求实验台",
+      "summary": "用 JSONPlaceholder 演示 secure runtime 如何把用户触发的网络请求交给 host policy 审核和代理。",
+      "href": "/zh-CN/examples/network-policy-fetch-card",
+      "rawHref": "/zh-CN/examples/network-policy-fetch-card.md",
+      "sourcePath": "content/examples/network-policy-fetch-card/zh-CN.md",
+      "body": "# JSONPlaceholder 网络请求实验台\n\n这个示例不再只是展示一段策略配置，而是让用户在沙盒内选择真实的网络任务：读取 posts、查看详情、拉取评论、按用户过滤，或者向 JSONPlaceholder 发起一个演示用 POST。请求不会从 iframe 直接出网，而是通过 `api.fetch()` 交给宿主，由宿主按 allowlist、方法、超时、请求体大小和响应类型决定是否代理。\n\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"example_jsonplaceholder_network_lab\",\n  g: {\n    scenario: \"posts\",\n    postId: 1,\n    userId: 1,\n    timeout: 3000,\n    title: \"SlexKit network demo\",\n    status: \"未请求\",\n    statusCode: \"-\",\n    elapsed: \"-\",\n    response: \"选择一个网络任务，然后点击“发起请求”。\",\n    lastUrl: \"https://jsonplaceholder.typicode.com/posts\",\n    method: function () { return this.scenario === \"create\" ? \"POST\" : \"GET\"; },\n    url: function () {\n      if (this.scenario === \"detail\") return \"https://jsonplaceholder.typicode.com/posts/\" + this.postId;\n      if (this.scenario === \"comments\") return \"https://jsonplaceholder.typicode.com/posts/\" + this.postId + \"/comments\";\n      if (this.scenario === \"user-posts\") return \"https://jsonplaceholder.typicode.com/users/\" + this.userId + \"/posts\";\n      if (this.scenario === \"create\") return \"https://jsonplaceholder.typicode.com/posts\";\n      return \"https://jsonplaceholder.typicode.com/posts?_limit=5\";\n    },\n    requestBody: function () {\n      if (this.scenario !== \"create\") return undefined;\n      return {\n        title: this.title,\n        body: \"这是一条从 SlexKit secure runtime 发起、由宿主代理的演示请求。\",\n        userId: this.userId\n      };\n    },\n    description: function () {\n      if (this.scenario === \"detail\") return \"读取单篇 post，适合详情页或引用卡片。\";\n      if (this.scenario === \"comments\") return \"读取某篇 post 的评论，适合评论摘要、审阅流和证据面板。\";\n      if (this.scenario === \"user-posts\") return \"按用户读取 posts，适合个人空间、作者档案或关联资源列表。\";\n      if (this.scenario === \"create\") return \"提交一条演示 post。JSONPlaceholder 会返回假写入结果，不会持久化。\";\n      return \"读取最新 posts 列表，适合 feed、任务列表和知识库索引。\";\n    },\n    riskText: function () {\n      if (this.method() === \"POST\") return \"POST 已被限制为 JSONPlaceholder origin，且请求体大小受 policy 约束。\";\n      return \"GET 请求仍然要经过 origin、超时、响应大小和 content-type 校验。\";\n    },\n    requestSnippet: function () {\n      var body = this.requestBody();\n      var lines = [\n        \"await api.fetch('\" + this.url() + \"', {\",\n        \"  method: '\" + this.method() + \"',\",\n        \"  timeoutMs: \" + this.timeout + \",\"\n      ];\n      if (body) lines.push(\"  body: \" + JSON.stringify(body, null, 2).replace(/\\n/g, \"\\n  \") + \",\");\n      lines.push(\"  credentials: 'omit'\");\n      lines.push(\"})\");\n      return lines.join(\"\\n\");\n    },\n    policyRows: function () {\n      return [\n        { item: \"Origin\", value: \"https://jsonplaceholder.typicode.com\", reason: \"只允许演示 API\" },\n        { item: \"Method\", value: \"GET, POST\", reason: \"读列表/详情和创建演示数据\" },\n        { item: \"Credentials\", value: \"omit\", reason: \"不携带 cookie 或站点身份\" },\n        { item: \"Content-Type\", value: \"application/json\", reason: \"拒绝非 JSON 响应进入沙盒\" },\n        { item: \"Body\", value: \"<= 4096 bytes\", reason: \"避免大请求体被模型输出滥用\" }\n      ];\n    },\n    async run(api) {\n      var targetUrl = String(this.url());\n      this.status = \"请求中\";\n      this.statusCode = \"-\";\n      this.elapsed = \"-\";\n      this.lastUrl = targetUrl;\n      this.response = \"等待宿主代理 \" + this.method() + \" \" + targetUrl;\n      try {\n        var result = await api.fetch(targetUrl, {\n          method: this.method(),\n          timeoutMs: this.timeout,\n          body: this.requestBody(),\n          credentials: \"omit\"\n        });\n        this.status = result.ok ? \"成功\" : \"HTTP 错误\";\n        this.statusCode = String(result.status) + \" \" + result.statusText;\n        this.elapsed = Math.round(result.elapsedMs) + \" ms\";\n        this.response = JSON.stringify(result.data === undefined ? result.text : result.data, null, 2).slice(0, 2400);\n      } catch (error) {\n        this.status = api.isPolicyError(error) ? \"Policy 拦截\" : api.isTimeoutError(error) ? \"超时\" : \"网络失败\";\n        this.statusCode = api.isPolicyError(error) ? \"policy\" : api.isTimeoutError(error) ? \"timeout\" : \"network\";\n        var elapsedMs = error && typeof error === \"object\" && typeof error.elapsedMs === \"number\" ? error.elapsedMs : undefined;\n        this.elapsed = elapsedMs === undefined ? \"-\" : Math.round(elapsedMs) + \" ms\";\n        this.response = targetUrl + \"\\n\" + api.errorMessage(error);\n      }\n    },\n    async runBlocked(api) {\n      var targetUrl = \"https://example.com/posts/1\";\n      this.status = \"请求中\";\n      this.statusCode = \"-\";\n      this.elapsed = \"-\";\n      this.lastUrl = targetUrl;\n      this.response = \"这次请求故意访问 allowlist 外的 origin，应该被 host policy 拦截。\";\n      try {\n        await api.get(targetUrl, { timeoutMs: this.timeout, credentials: \"omit\" });\n        this.status = \"异常通过\";\n        this.statusCode = \"unexpected\";\n        this.response = \"如果看到这行，说明 policy 没有按预期拦截。\";\n      } catch (error) {\n        this.status = api.isPolicyError(error) ? \"Policy 拦截\" : \"失败\";\n        this.statusCode = api.isPolicyError(error) ? \"origin_blocked\" : \"network\";\n        this.response = targetUrl + \"\\n\" + api.errorMessage(error);\n      }\n    }\n  },\n  layout: {\n    \"section:network\": {\n      eyebrow: \"平台能力\",\n      title: \"JSONPlaceholder 网络请求实验台\",\n      subtitle: \"在沙盒内选择网络任务，请求通过 host policy 代理。\",\n      \"card:network\": {\n        title: \"JSONPlaceholder 请求实验台\",\n      \"callout:intent\": { tone: \"info\", \"$text\": \"g.description()\" },\n      \"grid:controls\": {\n        columns: 1,\n        mdColumns: 2,\n        \"select:scenario\": {\n          label: \"网络任务\",\n          \"$value\": \"g.scenario\",\n          options: [\n            { label: \"Posts 列表 GET /posts\", value: \"posts\" },\n            { label: \"Post 详情 GET /posts/:id\", value: \"detail\" },\n            { label: \"评论列表 GET /posts/:id/comments\", value: \"comments\" },\n            { label: \"用户 posts GET /users/:id/posts\", value: \"user-posts\" },\n            { label: \"创建 post POST /posts\", value: \"create\" }\n          ],\n          onchange: \"g.scenario = String($event)\"\n        },\n        \"slider:postId\": { label: \"Post ID\", \"$value\": \"g.postId\", min: 1, max: 10, step: 1, onchange: \"g.postId = Number($event)\" },\n        \"slider:userId\": { label: \"User ID\", \"$value\": \"g.userId\", min: 1, max: 10, step: 1, onchange: \"g.userId = Number($event)\" },\n        \"slider:timeout\": { label: \"超时上限\", \"$value\": \"g.timeout\", min: 500, max: 8000, step: 500, unit: \"ms\", onchange: \"g.timeout = Number($event)\" }\n      },\n      \"row:actions\": {\n        \"button:run\": { label: \"发起请求\", icon: \"paper-plane-tilt\", onclick: \"g.run(api)\" },\n        \"button:block\": { label: \"测试拦截\", variant: \"secondary\", icon: \"shield-warning\", onclick: \"g.runBlocked(api)\" }\n      },\n      \"grid:status\": {\n        columns: 1,\n        mdColumns: 3,\n        \"stat:method\": { label: \"方法\", \"$value\": \"g.method()\" },\n        \"stat:status\": { label: \"状态\", \"$value\": \"g.status\" },\n        \"stat:elapsed\": { label: \"耗时\", \"$value\": \"g.elapsed\" }\n      },\n      \"code-block:request\": { title: \"沙盒内请求代码\", language: \"ts\", \"$code\": \"g.requestSnippet()\" },\n      \"code-block:response\": { title: \"宿主代理响应\", language: \"json\", \"$code\": \"g.response\" },\n      \"table:policy_matrix\": {\n        columns: [\n          { key: \"item\", label: \"Policy 项\" },\n          { key: \"value\", label: \"允许值\" },\n          { key: \"reason\", label: \"原因\" }\n        ],\n        \"$rows\": \"g.policyRows()\"\n      },\n      \"callout:policy_note\": { \"$tone\": \"g.status === 'Policy 拦截' ? 'warning' : 'success'\", \"$text\": \"g.riskText()\" }\n      }\n    }\n  }\n}\n```",
+      "hash": "7d1daa49"
     },
     {
       "id": "components/accordion",
@@ -229,6 +422,17 @@
       "body": "---\ntitle: \"Divider\"\ncategory: Content\nstatus: ready\nsummary: \"Separator line, optionally with label.\"\n---\n# Divider\n\nHorizontal separator, optionally with a centered text label.\n\n<!-- slex:spec-example:start component=\"divider\" id=\"basic\" sourceHash=\"888b7416\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_divider_typical\",\n  \"layout\": {\n    \"column:content\": {\n      \"text:top\": {\n        \"text\": \"Above\"\n      },\n      \"divider:line\": {\n        \"label\": \"Divider\",\n        \"icon\": \"flag\"\n      },\n      \"text:bottom\": {\n        \"text\": \"Below\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for form sections, settings groups, and visual separation between content paragraphs.\n- Not suitable as a spacing mechanism (use layout container `gap`).\n- Related components: `section` for more structured block separation.\n- Place inside a `column` to separate upper and lower content areas.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"divider\" sourceHash=\"92dc5387\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `label` | string | No | Yes |  | Text shown in the divider. |\n| `icon` | string | No | No |  | Icon name shown before the label. |\n<!-- slex:spec-api:end -->",
       "hash": "cc7df031"
     },
+    {
+      "id": "components/formula",
+      "group": "Components",
+      "title": "Formula",
+      "summary": "Reactive KaTeX formula display.",
+      "href": "/docs/components/formula",
+      "rawHref": "/docs/components/formula.md",
+      "sourcePath": "site/content/components/formula/en-US.md",
+      "body": "---\ntitle: \"Formula\"\ncategory: Display\nstatus: ready\norder: 11\nsummary: \"Reactive KaTeX formula display.\"\n---\n# Formula\n\nRender SlexKit state and computed values through KaTeX. Use it when Markdown explains the model and the interactive block needs the formula itself to update.\n\n<!-- slex:spec-example:start component=\"formula\" id=\"basic\" sourceHash=\"1578d25d\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_formula_typical\",\n  \"g\": {\n    \"r\": 10000,\n    \"c\": 100,\n    \"fc\": 159.15\n  },\n  \"layout\": {\n    \"formula:cutoff\": {\n      \"$tex\": \"'f_c = \\\\\\\\frac{1}{2\\\\\\\\pi RC} = ' + g.fc + '\\\\\\\\text{ Hz}'\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for formulas whose variables come from SlexKit state.\n- Keep the explanatory derivation in Markdown and use `formula` for the live expression.\n- Use `displayMode: false` for inline formula fragments.\n- Invalid TeX is rendered by KaTeX as an error expression instead of throwing.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"formula\" sourceHash=\"144588e3\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `tex` | string | No | Yes |  | KaTeX source to render. |\n| `formula` | string | No | Yes |  | Alias for tex. |\n| `value` | string | No | Yes |  | Alias for tex. |\n| `displayMode` | boolean | No | No | `true` | Render as display math when true; inline math when false. |\n| `display` | boolean | No | No | `true` | Alias for displayMode. |\n| `block` | boolean | No | No | `true` | Alias for displayMode. |\n<!-- slex:spec-api:end -->",
+      "hash": "e2634f4f"
+    },
     {
       "id": "components/grid",
       "group": "Components",
@@ -259,8 +463,8 @@
       "href": "/docs/components/input",
       "rawHref": "/docs/components/input.md",
       "sourcePath": "site/content/components/input/en-US.md",
-      "body": "---\ntitle: \"Input\"\ncategory: Input\nstatus: ready\nsummary: \"Single-line text or engineering value input.\"\n---\n# Input\n\nSingle-line text input with controlled value, placeholder, label, description, native types, engineering input, and disabled state.\n\n<!-- slex:spec-example:start component=\"input\" id=\"basic\" sourceHash=\"4215f98a\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_input_typical\",\n  \"layout\": {\n    \"input:name\": {\n      \"label\": \"Project\",\n      \"value\": \"SlexKit\",\n      \"placeholder\": \"Enter name\",\n      \"description\": \"Visible labels keep form fields scannable.\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for name input, search boxes, email/password, and other single-line text.\n- Use `type: \"engineering\"` for values such as `4.7k`, `2.2uF`, or `1e-3`.\n- Not suitable for numeric range selection (use `slider`).\n- Related components: `select` for option selection, `slider` for numeric ranges.\n- Typically placed inside a `column` to compose forms.\n- Use `$value` and `onchange` for state binding.\n- 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.\n- `onchange` fires when the user edits the value or clicks a step control.\n- `type: \"number\"` still emits a string value. Convert with `Number($event)` or use `type: \"engineering\"` to read parsed results.\n- Use `invalid` plus `error` for validation feedback. Error text is linked through `aria-describedby`.\n\n### Label and unit\n\n`label` renders as a clickable native label; `unit` renders as trailing text, suitable for voltage, resistance, frequency, etc.\n\n```slex\n{\n  namespace: \"doc_input_label_unit\",\n  layout: {\n    \"input:voltage\": {\n      label: \"Voltage\",\n      value: \"3.3\",\n      unit: \"V\",\n      description: \"Supply rail\"\n    }\n  }\n}\n```\n\n### Disabled state\n\n```slex\n{\n  namespace: \"doc_input_disabled_diff\",\n  layout: {\n    \"row:diff\": {\n      \"input:enabled\": {\n        value: \"Editable\",\n        placeholder: \"Type here\"\n      },\n      \"input:disabled\": {\n        value: \"Disabled\",\n        disabled: true\n      }\n    }\n  }\n}\n```\n\n### Engineering input\n\n`type: \"engineering\"` uses a text input (not the native number type). Component state retains the raw string and additionally exposes parsed results:\n\n```slex\n{\n  namespace: \"doc_input_engineering\",\n  layout: {\n    \"input:resistance\": {\n      type: \"engineering\",\n      value: \"4.7kΩ\"\n    },\n    \"stat:parsed\": {\n      label: \"Parsed value\",\n      $value: \"resistance.valid ? resistance.number : 'Invalid'\",\n      $unit: \"resistance.unit\"\n    }\n  }\n}\n```\n\nSupports scientific notation and SI prefixes: `p`, `n`, `u`, `µ`, `m`, `k`, `K`, `M`, `meg`, `G`, `T`. Units are captured but not converted across physical dimensions.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"input\" sourceHash=\"08bdd046\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `value` | string | No | Yes |  | Current input value. |\n| `label` | string | No | Yes |  | Input label. |\n| `unit` | string | No | Yes |  | Trailing unit text. |\n| `description` | string | No | Yes |  | Assistive description below the input. |\n| `help` | string | No | Yes |  | Alias for description. |\n| `hint` | string | No | Yes |  | Alias for description. |\n| `error` | string | No | Yes |  | Error text shown below the input and linked with aria-describedby. |\n| `errorMessage` | string | No | Yes |  | Alias for error. |\n| `invalid` | boolean | No | Yes | `false` | Mark the input as invalid with aria-invalid and error styling. |\n| `placeholder` | string | No | No |  | Placeholder text for empty values. |\n| `type` | string | No | No | `\"text\"` | Input value kind; use engineering for parsed engineering values. |\n| `disabled` | boolean | No | Yes | `false` | Disable editing. |\n| `readonly` | boolean | No | Yes | `false` | Make the input read-only. |\n| `readOnly` | boolean | No | Yes | `false` | Alias for readonly. |\n| `required` | boolean | No | Yes | `false` | Mark the input as required. |\n| `id` | string | No | No |  | Native input id; defaults to a stable id derived from the component name. |\n| `name` | string | No | No |  | Native input name attribute. |\n| `min` | string \\| number | No | Yes |  | Minimum value used by numeric input controls. |\n| `max` | string \\| number | No | Yes |  | Maximum value used by numeric input controls. |\n| `step` | string \\| number | No | Yes |  | Step size used by numeric input controls. |\n| `controls` | boolean | No | Yes | `true` | Show decrement and increment buttons for numeric inputs. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when the value changes. |\n<!-- slex:spec-api:end -->",
-      "hash": "558a0288"
+      "body": "---\ntitle: \"Input\"\ncategory: Input\nstatus: ready\nsummary: \"Single-line text or engineering value input.\"\n---\n# Input\n\nSingle-line text input with controlled value, placeholder, label, description, native types, engineering input, and disabled state.\n\n<!-- slex:spec-example:start component=\"input\" id=\"basic\" sourceHash=\"4215f98a\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_input_typical\",\n  \"layout\": {\n    \"input:name\": {\n      \"label\": \"Project\",\n      \"value\": \"SlexKit\",\n      \"placeholder\": \"Enter name\",\n      \"description\": \"Visible labels keep form fields scannable.\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for name input, search boxes, email/password, and other single-line text.\n- Use `type: \"engineering\"` for values such as `4.7k`, `2.2uF`, or `1e-3`.\n- Not suitable for numeric range selection (use `slider`).\n- Related components: `select` for option selection, `slider` for numeric ranges.\n- Typically placed inside a `column` to compose forms.\n- Use `$value` and `onchange` for state binding.\n- Numeric and engineering inputs render only the native input. Use `slider` for range adjustment; SlexKit no longer adds custom decrement or increment buttons.\n- `onchange` fires when the user edits the value.\n- `type: \"number\"` still emits a string value. Convert with `Number($event)` or use `type: \"engineering\"` to read parsed results.\n- Use `invalid` plus `error` for validation feedback. Error text is linked through `aria-describedby`.\n\n### Label and unit\n\n`label` renders as a clickable native label; `unit` renders as trailing text, suitable for voltage, resistance, frequency, etc.\n\n```slex\n{\n  namespace: \"doc_input_label_unit\",\n  layout: {\n    \"input:voltage\": {\n      label: \"Voltage\",\n      value: \"3.3\",\n      unit: \"V\",\n      description: \"Supply rail\"\n    }\n  }\n}\n```\n\n### Disabled state\n\n```slex\n{\n  namespace: \"doc_input_disabled_diff\",\n  layout: {\n    \"row:diff\": {\n      \"input:enabled\": {\n        value: \"Editable\",\n        placeholder: \"Type here\"\n      },\n      \"input:disabled\": {\n        value: \"Disabled\",\n        disabled: true\n      }\n    }\n  }\n}\n```\n\n### Engineering input\n\n`type: \"engineering\"` uses a text input (not the native number type). Component state retains the raw string and additionally exposes parsed results:\n\n```slex\n{\n  namespace: \"doc_input_engineering\",\n  layout: {\n    \"input:resistance\": {\n      type: \"engineering\",\n      value: \"4.7kΩ\"\n    },\n    \"stat:parsed\": {\n      label: \"Parsed value\",\n      $value: \"resistance.valid ? resistance.number : 'Invalid'\",\n      $unit: \"resistance.unit\"\n    }\n  }\n}\n```\n\nSupports scientific notation and SI prefixes: `p`, `n`, `u`, `µ`, `m`, `k`, `K`, `M`, `meg`, `G`, `T`. Units are captured but not converted across physical dimensions.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"input\" sourceHash=\"a1afe57e\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `value` | string | No | Yes |  | Current input value. |\n| `label` | string | No | Yes |  | Input label. |\n| `unit` | string | No | Yes |  | Trailing unit text. |\n| `description` | string | No | Yes |  | Assistive description below the input. |\n| `help` | string | No | Yes |  | Alias for description. |\n| `hint` | string | No | Yes |  | Alias for description. |\n| `error` | string | No | Yes |  | Error text shown below the input and linked with aria-describedby. |\n| `errorMessage` | string | No | Yes |  | Alias for error. |\n| `invalid` | boolean | No | Yes | `false` | Mark the input as invalid with aria-invalid and error styling. |\n| `placeholder` | string | No | No |  | Placeholder text for empty values. |\n| `type` | string | No | No | `\"text\"` | Input value kind; use engineering for parsed engineering values. |\n| `disabled` | boolean | No | Yes | `false` | Disable editing. |\n| `readonly` | boolean | No | Yes | `false` | Make the input read-only. |\n| `readOnly` | boolean | No | Yes | `false` | Alias for readonly. |\n| `required` | boolean | No | Yes | `false` | Mark the input as required. |\n| `id` | string | No | No |  | Native input id; defaults to a stable id derived from the component name. |\n| `name` | string | No | No |  | Native input name attribute. |\n| `min` | string \\| number | No | Yes |  | Minimum value used by numeric input controls. |\n| `max` | string \\| number | No | Yes |  | Maximum value used by numeric input controls. |\n| `step` | string \\| number | No | Yes |  | Step size used by numeric input controls. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when the value changes. |\n<!-- slex:spec-api:end -->",
+      "hash": "3efa0e53"
     },
     {
       "id": "components/link",
@@ -413,8 +617,8 @@
       "href": "/docs/components/text",
       "rawHref": "/docs/components/text.md",
       "sourcePath": "site/content/components/text/en-US.md",
-      "body": "---\ntitle: \"Text\"\ncategory: Display\nstatus: ready\nsummary: \"Short text output for status, description, and results.\"\n---\n# Text\n\nOutput text content for status messages, descriptions, and result display.\n\n<!-- slex:spec-example:start component=\"text\" id=\"basic\" sourceHash=\"bd63ce36\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_text_typical\",\n  \"layout\": {\n    \"text:status\": {\n      \"text\": \"System is healthy\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for status text, short descriptions, label values, and lightweight output.\n- Not suitable for long paragraphs or structured data (use `table`).\n- Related components: `stat` for numeric metrics, `badge` for status labels.\n- Keep text short; use multiple `text` nodes for longer content.\n- Typically placed inside `row`, `column`, or `card`.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"text\" sourceHash=\"32589fbc\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `text` | string | No | Yes |  | Displayed text. |\n| `content` | string | No | Yes |  | Alias for text. |\n| `label` | string | No | Yes |  | Alias for text. |\n| `variant` | string: default, muted | No | No | `\"default\"` | Text visual variant. |\n| `class` | string | No | No |  | Additional host-controlled CSS class. |\n<!-- slex:spec-api:end -->",
-      "hash": "075cd122"
+      "body": "---\ntitle: \"Text\"\ncategory: Display\nstatus: ready\nsummary: \"Short text output for status, description, and results.\"\n---\n# Text\n\nOutput text content for status messages, descriptions, and result display.\n\n<!-- slex:spec-example:start component=\"text\" id=\"basic\" sourceHash=\"bd63ce36\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_text_typical\",\n  \"layout\": {\n    \"text:status\": {\n      \"text\": \"System is healthy\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for status text, short descriptions, label values, and lightweight output.\n- Not suitable for long paragraphs or structured data (use `table`).\n- Related components: `stat` for numeric metrics, `badge` for status labels.\n- Keep text short; use multiple `text` nodes for longer content.\n- Typically placed inside `row`, `column`, or `card`.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"text\" sourceHash=\"745fea9a\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `text` | string | No | Yes |  | Displayed text. |\n| `content` | string | No | Yes |  | Alias for text. |\n| `label` | string | No | Yes |  | Alias for text. |\n| `variant` | string: default, muted | No | No | `\"default\"` | Text visual variant. |\n| `color` | string | No | Yes |  | Optional CSS color for controlled previews. |\n| `size` | string \\| number | No | Yes |  | Optional font size. Numbers are treated as px. |\n| `class` | string | No | No |  | Additional host-controlled CSS class. |\n<!-- slex:spec-api:end -->",
+      "hash": "c8137ecc"
     },
     {
       "id": "components/toast",
@@ -435,8 +639,8 @@
       "href": "/docs/reference/spec",
       "rawHref": "/docs/reference/spec.md",
       "sourcePath": "site/content/reference/spec/en-US.md",
-      "body": "---\ntitle: Slex Specification v0.1\ncategory: Reference\nstatus: ready\norder: 10\nsummary: \"Public Slex expression envelope, component keys, props, directives, lifecycle, and runtime API contract.\"\nslexkitRenderMode: component\n---\n\n# Slex Specification v0.1\n\nSlex expression envelope, component keys, props, directives, lifecycle, and runtime API contract — SlexKit v0's entire public protocol in one place. Source of truth for implementors, test authors, and host adapter authors.\n\n**v0/beta.** The current implementation may evolve, but the protocol version (v0.1) is independent of the SlexKit package version. The same protocol may remain stable across multiple package releases.\n\n## 1. Slex expression envelope\n\nThe canonical Slex expression is an object. Slex source is the JavaScript object literal string form of that expression:\n\n```ts\ntype SlexExpression = {\n  slex?: \"0.1\";\n  namespace: string;\n  g: Record<string, unknown>;\n  layout: Record<string, unknown>;\n};\n```\n\n`slex`, `namespace`, `g`, and `layout` are the standard envelope fields. `slex: \"0.1\"` is an optional protocol marker for humans, agents, and validators; it does not affect namespace identity or state merging. The runtime also accepts a bare component tree as shorthand: if the input has component keys at the top level and does not define `namespace`, `g`, or `layout`, it is normalized to:\n\n```js\n{ namespace: \"default\", g: {}, layout: <input> }\n```\n\n## 2. Layout key\n\nComponent keys use the format:\n\n```\nComponentKey = ComponentType \":\" Identifier\n```\n\n- `ComponentType` maps to a type in the component registry.\n- `Identifier` may be empty (e.g. `\"box:\"`).\n- Named components use `Identifier` for instance state and lifecycle hooks.\n- Keys without `:` are not rendered as component nodes.\n\nReserved context names: `g`, `api`, `$event`, `$item`, `$index`, `$key`.\n\n## 3. Props classification\n\n### Static props\n\nPassed to the component unchanged:\n\n```js\n\"text:title\": { text: \"Hello\" }\n```\n\n### `$` read-pipes\n\nA string value on a `$`-prefixed key (excluding `$if`, `$for`, `$key`) is evaluated as a JavaScript expression. The result is passed under the key with the `$` prefix removed:\n\n```js\n\"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n// Resolves to: content = \"Count: <value of g.count>\"\n```\n\n### `on*` write-pipes\n\nA string value on an `on*`-prefixed key is executed as a JavaScript statement:\n\n```js\n\"button:add\": { onclick: \"g.count++\" }\n\"input:name\": { onchange: \"g.name = String($event || '')\" }\n```\n\nThe handler receives `$event` as the event data.\n\n### Structural directives\n\n`$if`, `$for`, `$key` are structural directives and are never passed to the component as props. Children of `$if` and `$for` components are treated as the conditional/iterated subtree.\n\n## 4. `g` merge\n\nWhen the same namespace is mounted or ingested again, the new `g` is merged into the existing store:\n\n| Value type          | Merge behavior           |\n| ------------------- | ------------------------ |\n| Function            | Overwrites the old value |\n| Array               | Replaces entirely        |\n| Plain object        | Recursively deep-merges  |\n| Other scalar        | Overwrites the old value |\n| Keys not in new `g` | Preserved from old `g`   |\n\nThe new `layout` always replaces the current layout. Layout is never deep-merged.\n\n## 5. Expression context\n\nExpressions can access these variables:\n\n| Variable           | Type                          | Scope                    |\n| ------------------ | ----------------------------- | ------------------------ |\n| `g`                | Reactive state proxy          | Always                   |\n| Component state    | e.g. `slider.value`           | Named components         |\n| `api`              | Host-injected object          | If `api` option provided |\n| `$event`           | Event data                    | `on*` handlers only      |\n| `$item`            | Current array item            | `$for` context only      |\n| `$index`           | Current array index           | `$for` context only      |\n| `$key`             | Current item key              | `$for` context only      |\n| Named `$for` alias | e.g. `user` for `\"card:user\"` | `$for` context only      |\n\nExpression evaluation errors are caught and produce a warning with namespace and path information. The last known value is returned as a fallback.\n\n## 6. Component instance state\n\nComponent registration declares a state mode:\n\n```ts\nregister(type, renderer, { state: \"value\" | \"checked\" | \"enabled\" | \"readable\" | \"none\" });\n```\n\n| Mode       | Writable           | Behavior                                                      |\n| ---------- | ------------------ | ------------------------------------------------------------- |\n| `value`    | `value`            | Input component; `value` writable from expressions and events |\n| `checked`  | `checked`, `value` | Checkbox-like boolean component; both synced and writable     |\n| `enabled`  | `enabled`          | Switch-like boolean component; enabled state is writable      |\n| `readable` | (none)             | Readable from expressions; write emits console warning        |\n| `none`     | (none)             | No instance state exposed                                     |\n\nInput components (`value`/`checked`/`enabled` modes) sync `change` events to instance state automatically. Duplicate-named components share one namespace-level state instance.\n\n`input` with `type: \"engineering\"` is a value-mode component with additional parsed fields. `value` remains the raw input string, while `number`, `valid`, `prefix`, `unit`, `normalized`, and optional `error` expose the parsed engineering number. Supported v1 notation includes scientific notation plus SI prefixes (`p`, `n`, `u`, `µ`, `m`, `k`, `K`, `M`, `meg`, `G`, `T`) with an optional unit suffix. Units are captured but not dimension-converted.\n\n## 7. `$if`\n\n`$if` controls component existence:\n\n```js\n\"card:panel\": {\n  \"$if\": \"g.visible\",\n  \"text:body\": { text: \"Visible\" }\n}\n```\n\n- **Truthy** -mounts the component and its subtree with enter animation if `$enter` is defined.\n- **Falsy** -unmounts the component and subtree with leave animation if `$leave` is defined, then fires lifecycle hooks, disposers, and subtree cleanup.\n\n## 8. `$for`\n\n`$for` renders a component for each array element:\n\n```js\n\"text:item\": {\n  \"$for\": \"g.items\",\n  \"$key\": \"id\",\n  \"$content\": \"$item.label\"\n}\n```\n\nContext variables: `$item`, `$index`, `$key`. Named components inject the current item as a same-name variable.\n\n### `$key` strategy\n\n| `$key` value             | Behavior                                                                        |\n| ------------------------ | ------------------------------------------------------------------------------- |\n| `\"$value\"`               | Use the primitive item itself                                                   |\n| `\"id\"` or other property | Read that property from object items                                            |\n| Omitted                  | Use `item.id` if available; otherwise fall back to index with a console warning |\n\nPrimitive arrays should always specify `$key: \"$value\"`.\n\n### $for phases\n\n1. **Delete** -Remove items whose keys are absent from the new array (with leave animation).\n2. **Add/update/reorder** -Create new items for new keys; update retained items' `forCtx` (item reference, index); reorder DOM nodes to match array order. Updated items fire `onUpdate_<name>`.\n3. **Trim** -Defensively remove excess children.\n\n## 9. Lifecycle and cleanup\n\nConvention hooks on `g`:\n\n```\ng.onMount_<name>()      -after component is appended to DOM\ng.onUnmount_<name>()    -before component is removed from DOM\ng.onUpdate_<name>()     -after $for item changes (index or item reference)\n```\n\nComponent implementations can register resource cleanup:\n\n```ts\nattachComponentDisposer(el, dispose);\n```\n\nComponent disposal is triggered by normal unmount, `$if` toggle-off, `$for` item removal, root cleanup, and `disposeNamespace()`.\n\n## 10. Public runtime API\n\n| Function                            | Signature                                   | Description                                                          |\n| ----------------------------------- | ------------------------------------------- | -------------------------------------------------------------------- |\n| `mount`                             | `(input, container, options?) => Cleanup`   | Parse, merge state, render component tree                            |\n| `ingest`                            | `(input) => boolean`                        | Ingest state-only Slex, no rendering                                 |\n| `boot`                              | `(options?) => void`                        | Enhance static page code blocks                                      |\n| `disposeNamespace`                  | `(namespace) => void`                       | Release namespace roots, store, and cache                            |\n| `register`                          | `(type, renderer, options?) => void`        | Register component type                                              |\n| `getRenderer`                       | `(type) => ComponentRenderer \\| undefined`  | Look up a registered renderer                                        |\n| `getIcon`                           | `(name, state?) => string`                  | Resolve a registered or bundled icon synchronously                   |\n| `loadIcon`                          | `(name, state?) => Promise<string>`         | Resolve an icon, using Iconify fallback when not bundled             |\n| `registerIcon`                      | `(name, svg, options?) => void`             | Register one global SVG icon for all components with an `icon` field |\n| `registerIcons`                     | `(icons, options?) => void`                 | Register multiple global SVG icons                                   |\n| `clearRegisteredIcons`              | `() => void`                                | Clear all custom registered icons                                    |\n| `getRegisteredIcon`                 | `(name, state?) => string`                  | Look up only registered icons (no Phosphor fallback)                 |\n| `normalizeIconName`                 | `(name) => string`                          | Normalize icon name to kebab-case with set prefix                    |\n| `resolveIconWeight`                 | `(state?) => IconWeight`                    | Resolve icon weight from component state                             |\n| `resolveIconifyIcon`                | `(name, state?) => {prefix, name}`          | Resolve to Iconify-compatible name pair                              |\n| `iconifySvgUrl`                     | `(name, state?) => string`                  | Build full Iconify API SVG URL                                       |\n| `configureComponentScope`           | `(options) => void`                         | Configure framework adapter flush                                    |\n| `attachComponentDisposer`           | `(el, dispose) => void`                     | Bind cleanup to element lifecycle                                    |\n| `createSecureRuntime`               | `(policy, adapter?) => SecureRuntimeHandle` | Create gated runtime instance                                        |\n| `mountSecureArtifact`               | `(input, container, options) => Cleanup`    | Mount in secure sandbox                                              |\n| `createSlexKitMarkdownRuntimeHost`  | `(options?) => MarkdownRuntimeHost`         | Create Markdown host instance                                        |\n| `getSlexKitMarkdownRuntimeHost`     | `() => MarkdownRuntimeHost`                 | Get or create global Markdown host                                   |\n| `installSlexKitMarkdownRuntimeHost` | `(options?) => MarkdownRuntimeHost`         | Install and return global Markdown host                              |\n| `getSlexKitRuntimeUrl`              | `() => string \\| undefined`                 | Get default sandbox runtime URL                                      |\n| `setSlexKitRuntimeUrl`              | `(url) => void`                             | Set default sandbox runtime URL                                      |\n| `diagnoseSlexKitSource`             | `(source, error) => Diagnostic`             | Locate syntax error in source                                        |\n| `parseSlexSource`                   | `(source) => ParseResult`                   | Parse Slex source to object                                          |\n| `formatSlexKitDiagnostic`           | `(diagnostic) => string`                    | Format diagnostic to readable string                                 |\n\n## 11. Error types\n\n### SlexKitSyntaxError\n\nThrown when Slex source parsing fails. Includes a `diagnostic` property with `message`, `line`, `column`, `detail`, and `excerpt`.\n\n### SlexKitRuntimeError\n\nThrown when a runtime operation violates policy or encounters a runtime failure. Has properties: `kind` (`\"policy\"` | `\"network\"` | `\"timeout\"`), `code` (specific error code string), `message`, `elapsedMs`.\n\n## 12. Markdown language handling\n\nSlexKit hosts must only process explicit fence language tags:\n\n- `slex`\n\nPlain JavaScript, JSON, or untagged code blocks must not be scanned or executed.\n\n## 13. Secure runtime types\n\n```ts\ntype SecureRuntimeHandle = {\n  api: SlexKitRuntimeApi;\n  dispose: () => void;\n};\n```\n\nFor full secure runtime types (`HostRuntimePolicy`, `HostRuntimeAdapter`, `SlexKitRuntimeApi`, `SecureFrameOptions`, `SecureMountOptions`, sandbox message types), see the [security runtime contract](/docs/reference/security).\n\n## 14. ToolHost\n\nToolHost bridges AI tool calls to interactive UI that returns structured user input. It is separate from display-oriented `slex` fences.\n\n**Public API:**\n\n| Function | Signature | Description |\n|----------|-----------|-------------|\n| `renderToolCall` | `(call, container) => ToolRenderHandle` | Compile and mount tool UI, return promise |\n| `registerToolTemplate` | `(name, compiler) => void` | Register a custom tool template compiler |\n\n**Result type:**\n\n```ts\ntype ToolResult =\n  | { toolCallId?: string; toolName: string; status: \"submitted\"; value: Record<string, unknown> }\n  | { toolCallId?: string; toolName: string; status: \"ignored\"; value: null };\n```\n\n**Built-in templates:** `confirm-action`, `choose-options`, `option-list`, `fill-form`. Templates compile to standard Slex expressions using `card:tool` and `submit:actions` components. The `submit:actions` component serves as the completion boundary — it is only used by tool templates, not general display fences.\n\nFor full template reference, arguments, type definitions, and custom template development, see [ToolHost documentation](/docs/reference/toolhost).\n\n## 15. Icon system\n\nSlexKit includes a built-in icon system with Phosphor Icons, a custom registration API, and Iconify fallback support.\n\n**Public API (10 functions):** `registerIcon`, `registerIcons`, `clearRegisteredIcons`, `getIcon`, `getRegisteredIcon`, `loadIcon`, `normalizeIconName`, `resolveIconWeight`, `resolveIconifyIcon`, `iconifySvgUrl`.\n\nIcons are resolved through a three-tier chain: registered icons → bundled Phosphor (24 icons, 2 weights) → Iconify API fetch (async, `loadIcon` only). Components that accept an `icon` prop automatically display the resolved SVG.\n\nFor the full API reference, icon list, naming conventions, and custom icon registration, see [Icon system documentation](/docs/reference/icons).\n\n## 16. Non-goals\n\n- No public stable compatibility commitment (v0/beta).\n- Not a pure JSON cross-platform protocol.\n- No automatic security hardening of arbitrary browser APIs.\n- No heuristic scanning of code blocks to guess whether to render.\n- No implicit wrapping of display UI as function calls.",
-      "hash": "8a8391af"
+      "body": "---\ntitle: Slex Specification v0.1\ncategory: Reference\nstatus: ready\norder: 10\nsummary: \"Public Slex expression envelope, component keys, props, directives, lifecycle, and runtime API contract.\"\nslexkitRenderMode: component\n---\n\n# Slex Specification v0.1\n\nSlex expression envelope, component keys, props, directives, lifecycle, and runtime API contract — SlexKit v0's entire public protocol in one place. Source of truth for implementors, test authors, and host adapter authors.\n\n**v0/beta.** The current implementation may evolve, but the protocol version (v0.1) is independent of the SlexKit package version. The same protocol may remain stable across multiple package releases.\n\n## 1. Slex expression envelope\n\nThe canonical Slex expression is an object. Slex source is the JavaScript object literal string form of that expression:\n\n```ts\ntype SlexExpression = {\n  slex?: \"0.1\";\n  namespace: string;\n  g: Record<string, unknown>;\n  layout: Record<string, unknown>;\n};\n```\n\n`slex`, `namespace`, `g`, and `layout` are the standard envelope fields. `slex: \"0.1\"` is an optional protocol marker for humans, agents, and validators; it does not affect namespace identity or state merging. The runtime also accepts a bare component tree as shorthand: if the input has component keys at the top level and does not define `namespace`, `g`, or `layout`, it is normalized to:\n\n```js\n{ namespace: \"default\", g: {}, layout: <input> }\n```\n\n## 2. Layout key\n\nComponent keys use the format:\n\n```\nComponentKey = ComponentType \":\" Identifier\n```\n\n- `ComponentType` maps to a type in the component registry.\n- `Identifier` may be empty (e.g. `\"box:\"`).\n- Named components use `Identifier` for instance state and lifecycle hooks.\n- Keys without `:` are not rendered as component nodes.\n\nReserved context names: `g`, `std`, `api`, `$event`, `$item`, `$index`, `$key`.\n\n## 3. Props classification\n\n### Static props\n\nPassed to the component unchanged:\n\n```js\n\"text:title\": { text: \"Hello\" }\n```\n\n### `$` read-pipes\n\nA string value on a `$`-prefixed key (excluding `$if`, `$for`, `$key`) is evaluated as a JavaScript expression. The result is passed under the key with the `$` prefix removed:\n\n```js\n\"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n// Resolves to: content = \"Count: <value of g.count>\"\n```\n\n### `on*` write-pipes\n\nA string value on an `on*`-prefixed key is executed as a JavaScript statement:\n\n```js\n\"button:add\": { onclick: \"g.count++\" }\n\"input:name\": { onchange: \"g.name = String($event || '')\" }\n```\n\nThe handler receives `$event` as the event data.\n\n### Structural directives\n\n`$if`, `$for`, `$key` are structural directives and are never passed to the component as props. Children of `$if` and `$for` components are treated as the conditional/iterated subtree.\n\n## 4. `g` merge\n\nWhen the same namespace is mounted or ingested again, the new `g` is merged into the existing store:\n\n| Value type          | Merge behavior           |\n| ------------------- | ------------------------ |\n| Function            | Overwrites the old value |\n| Array               | Replaces entirely        |\n| Plain object        | Recursively deep-merges  |\n| Other scalar        | Overwrites the old value |\n| Keys not in new `g` | Preserved from old `g`   |\n\nThe new `layout` always replaces the current layout. Layout is never deep-merged.\n\n## 5. Expression context\n\nExpressions can access these variables:\n\n| Variable           | Type                          | Scope                    |\n| ------------------ | ----------------------------- | ------------------------ |\n| `g`                | Reactive state proxy          | Always                   |\n| `std`              | Pure SlexKit standard library | Always                   |\n| Component state    | e.g. `slider.value`           | Named components         |\n| `api`              | Host-injected object          | If `api` option provided |\n| `$event`           | Event data                    | `on*` handlers only      |\n| `$item`            | Current array item            | `$for` context only      |\n| `$index`           | Current array index           | `$for` context only      |\n| `$key`             | Current item key              | `$for` context only      |\n| Named `$for` alias | e.g. `user` for `\"card:user\"` | `$for` context only      |\n\n`std` contains deterministic helpers for math, formatting, units, and small statistics. Sensitive capabilities stay under host-injected `api.*` and may require secure runtime policy.\n\nExpression evaluation errors are caught and produce a warning with namespace and path information. The last known value is returned as a fallback.\n\n## 6. Component instance state\n\nComponent registration declares a state mode:\n\n```ts\nregister(type, renderer, { state: \"value\" | \"checked\" | \"enabled\" | \"readable\" | \"none\" });\n```\n\n| Mode       | Writable           | Behavior                                                      |\n| ---------- | ------------------ | ------------------------------------------------------------- |\n| `value`    | `value`            | Input component; `value` writable from expressions and events |\n| `checked`  | `checked`, `value` | Checkbox-like boolean component; both synced and writable     |\n| `enabled`  | `enabled`          | Switch-like boolean component; enabled state is writable      |\n| `readable` | (none)             | Readable from expressions; write emits console warning        |\n| `none`     | (none)             | No instance state exposed                                     |\n\nInput components (`value`/`checked`/`enabled` modes) sync `change` events to instance state automatically. Duplicate-named components share one namespace-level state instance.\n\n`input` with `type: \"engineering\"` is a value-mode component with additional parsed fields. `value` remains the raw input string, while `number`, `valid`, `prefix`, `unit`, `normalized`, and optional `error` expose the parsed engineering number. Supported v1 notation includes scientific notation plus SI prefixes (`p`, `n`, `u`, `µ`, `m`, `k`, `K`, `M`, `meg`, `G`, `T`) with an optional unit suffix. Units are captured but not dimension-converted.\n\n## 7. `$if`\n\n`$if` controls component existence:\n\n```js\n\"card:panel\": {\n  \"$if\": \"g.visible\",\n  \"text:body\": { text: \"Visible\" }\n}\n```\n\n- **Truthy** -mounts the component and its subtree with enter animation if `$enter` is defined.\n- **Falsy** -unmounts the component and subtree with leave animation if `$leave` is defined, then fires lifecycle hooks, disposers, and subtree cleanup.\n\n## 8. `$for`\n\n`$for` renders a component for each array element:\n\n```js\n\"text:item\": {\n  \"$for\": \"g.items\",\n  \"$key\": \"id\",\n  \"$content\": \"$item.label\"\n}\n```\n\nContext variables: `$item`, `$index`, `$key`. Named components inject the current item as a same-name variable.\n\n### `$key` strategy\n\n| `$key` value             | Behavior                                                                        |\n| ------------------------ | ------------------------------------------------------------------------------- |\n| `\"$value\"`               | Use the primitive item itself                                                   |\n| `\"id\"` or other property | Read that property from object items                                            |\n| Omitted                  | Use `item.id` if available; otherwise fall back to index with a console warning |\n\nPrimitive arrays should always specify `$key: \"$value\"`.\n\n### $for phases\n\n1. **Delete** -Remove items whose keys are absent from the new array (with leave animation).\n2. **Add/update/reorder** -Create new items for new keys; update retained items' `forCtx` (item reference, index); reorder DOM nodes to match array order. Updated items fire `onUpdate_<name>`.\n3. **Trim** -Defensively remove excess children.\n\n## 9. Lifecycle and cleanup\n\nConvention hooks on `g`:\n\n```\ng.onMount_<name>()      -after component is appended to DOM\ng.onUnmount_<name>()    -before component is removed from DOM\ng.onUpdate_<name>()     -after $for item changes (index or item reference)\n```\n\nComponent implementations can register resource cleanup:\n\n```ts\nattachComponentDisposer(el, dispose);\n```\n\nComponent disposal is triggered by normal unmount, `$if` toggle-off, `$for` item removal, root cleanup, and `disposeNamespace()`.\n\n## 10. Public runtime API\n\n| Function                            | Signature                                   | Description                                                          |\n| ----------------------------------- | ------------------------------------------- | -------------------------------------------------------------------- |\n| `mount`                             | `(input, container, options?) => Cleanup`   | Parse, merge state, render component tree                            |\n| `ingest`                            | `(input) => boolean`                        | Ingest state-only Slex, no rendering                                 |\n| `boot`                              | `(options?) => void`                        | Enhance static page code blocks                                      |\n| `disposeNamespace`                  | `(namespace) => void`                       | Release namespace roots, store, and cache                            |\n| `register`                          | `(type, renderer, options?) => void`        | Register component type                                              |\n| `getRenderer`                       | `(type) => ComponentRenderer \\| undefined`  | Look up a registered renderer                                        |\n| `getIcon`                           | `(name, state?) => string`                  | Resolve a registered or bundled icon synchronously                   |\n| `loadIcon`                          | `(name, state?) => Promise<string>`         | Resolve an icon, using Iconify fallback when not bundled             |\n| `registerIcon`                      | `(name, svg, options?) => void`             | Register one global SVG icon for all components with an `icon` field |\n| `registerIcons`                     | `(icons, options?) => void`                 | Register multiple global SVG icons                                   |\n| `clearRegisteredIcons`              | `() => void`                                | Clear all custom registered icons                                    |\n| `getRegisteredIcon`                 | `(name, state?) => string`                  | Look up only registered icons (no Phosphor fallback)                 |\n| `normalizeIconName`                 | `(name) => string`                          | Normalize icon name to kebab-case with set prefix                    |\n| `resolveIconWeight`                 | `(state?) => IconWeight`                    | Resolve icon weight from component state                             |\n| `resolveIconifyIcon`                | `(name, state?) => {prefix, name}`          | Resolve to Iconify-compatible name pair                              |\n| `iconifySvgUrl`                     | `(name, state?) => string`                  | Build full Iconify API SVG URL                                       |\n| `configureComponentScope`           | `(options) => void`                         | Configure framework adapter flush                                    |\n| `attachComponentDisposer`           | `(el, dispose) => void`                     | Bind cleanup to element lifecycle                                    |\n| `createSecureRuntime`               | `(policy, adapter?) => SecureRuntimeHandle` | Create gated runtime instance                                        |\n| `mountSecureArtifact`               | `(input, container, options) => Cleanup`    | Mount in secure sandbox                                              |\n| `createSlexKitMarkdownRuntimeHost`  | `(options?) => MarkdownRuntimeHost`         | Create Markdown host instance                                        |\n| `getSlexKitMarkdownRuntimeHost`     | `() => MarkdownRuntimeHost`                 | Get or create global Markdown host                                   |\n| `installSlexKitMarkdownRuntimeHost` | `(options?) => MarkdownRuntimeHost`         | Install and return global Markdown host                              |\n| `getSlexKitRuntimeUrl`              | `() => string \\| undefined`                 | Get default sandbox runtime URL                                      |\n| `setSlexKitRuntimeUrl`              | `(url) => void`                             | Set default sandbox runtime URL                                      |\n| `diagnoseSlexKitSource`             | `(source, error) => Diagnostic`             | Locate syntax error in source                                        |\n| `parseSlexSource`                   | `(source) => ParseResult`                   | Parse Slex source to object                                          |\n| `formatSlexKitDiagnostic`           | `(diagnostic) => string`                    | Format diagnostic to readable string                                 |\n\n## 11. Error types\n\n### SlexKitSyntaxError\n\nThrown when Slex source parsing fails. Includes a `diagnostic` property with `message`, `line`, `column`, `detail`, and `excerpt`.\n\n### SlexKitRuntimeError\n\nThrown when a runtime operation violates policy or encounters a runtime failure. Has properties: `kind` (`\"policy\"` | `\"network\"` | `\"timeout\"`), `code` (specific error code string), `message`, `elapsedMs`.\n\n## 12. Markdown language handling\n\nSlexKit hosts must only process explicit fence language tags:\n\n- `slex`\n\nPlain JavaScript, JSON, or untagged code blocks must not be scanned or executed.\n\n## 13. Secure runtime types\n\n```ts\ntype SecureRuntimeHandle = {\n  api: SlexKitRuntimeApi;\n  dispose: () => void;\n};\n```\n\nFor full secure runtime types (`HostRuntimePolicy`, `HostRuntimeAdapter`, `SlexKitRuntimeApi`, `SecureFrameOptions`, `SecureMountOptions`, sandbox message types), see the [security runtime contract](/docs/reference/security).\n\n## 14. ToolHost\n\nToolHost bridges AI tool calls to interactive UI that returns structured user input. It is separate from display-oriented `slex` fences.\n\n**Public API:**\n\n| Function | Signature | Description |\n|----------|-----------|-------------|\n| `renderToolCall` | `(call, container) => ToolRenderHandle` | Compile and mount tool UI, return promise |\n| `registerToolTemplate` | `(name, compiler) => void` | Register a custom tool template compiler |\n\n**Result type:**\n\n```ts\ntype ToolResult =\n  | { toolCallId?: string; toolName: string; status: \"submitted\"; value: Record<string, unknown> }\n  | { toolCallId?: string; toolName: string; status: \"ignored\"; value: null };\n```\n\n**Built-in templates:** `confirm-action`, `choose-options`, `option-list`, `fill-form`. Templates compile to standard Slex expressions using `card:tool` and `submit:actions` components. The `submit:actions` component serves as the completion boundary — it is only used by tool templates, not general display fences.\n\nFor full template reference, arguments, type definitions, and custom template development, see [ToolHost documentation](/docs/reference/toolhost).\n\n## 15. Icon system\n\nSlexKit includes a built-in icon system with Phosphor Icons, a custom registration API, and Iconify fallback support.\n\n**Public API (10 functions):** `registerIcon`, `registerIcons`, `clearRegisteredIcons`, `getIcon`, `getRegisteredIcon`, `loadIcon`, `normalizeIconName`, `resolveIconWeight`, `resolveIconifyIcon`, `iconifySvgUrl`.\n\nIcons are resolved through a three-tier chain: registered icons → bundled Phosphor (24 icons, 2 weights) → Iconify API fetch (async, `loadIcon` only). Components that accept an `icon` prop automatically display the resolved SVG.\n\nFor the full API reference, icon list, naming conventions, and custom icon registration, see [Icon system documentation](/docs/reference/icons).\n\n## 16. Non-goals\n\n- No public stable compatibility commitment (v0/beta).\n- Not a pure JSON cross-platform protocol.\n- No automatic security hardening of arbitrary browser APIs.\n- No heuristic scanning of code blocks to guess whether to render.\n- No implicit wrapping of display UI as function calls.",
+      "hash": "fa2bd10b"
     },
     {
       "id": "reference/usage",
@@ -446,8 +650,8 @@
       "href": "/docs/reference/usage",
       "rawHref": "/docs/reference/usage.md",
       "sourcePath": "site/content/reference/usage/en-US.md",
-      "body": "---\ntitle: Slex Usage Reference\ncategory: Reference\nstatus: ready\norder: 20\nsummary: \"Reference for Slex source structure, props, directives, events, theming, custom components, and ToolHost boundaries.\"\nslexkitRenderMode: component\n---\n\n# Slex Usage Reference\n\nSlex source shape and runtime-facing authoring rules: props, directives, events, theming, custom components, and ToolHost boundaries. For first-time setup, start with [Getting Started](/docs/guides/quick-start). For exact protocol compatibility, use the [Slex Specification](/docs/reference/spec).\n\n## Installation\n\nMost hosts install the root package:\n\n```sh\nnpm install slexkit\n```\n\n```js\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\nComponent-free bare runtime:\n\n```sh\nnpm install slexkit @slexkit/runtime\n```\n\n```js\nimport { mount, register } from \"@slexkit/runtime\";\nimport \"@slexkit/components-svelte\";\nimport \"@slexkit/theme-shadcn/style.css\";\n```\n\nFor package boundaries and host-specific install commands, see [Package Boundaries](/docs/reference/packages).\n\n## Slex source structure\n\nA Slex source is a JavaScript object literal:\n\n```js\n{\n  slex: \"0.1\",\n  namespace: \"demo\",\n  g: { count: 0 },\n  layout: {\n    \"button:add\": { text: \"Add\", onclick: \"g.count++\" },\n    \"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n  }\n}\n```\n\n- `slex` -optional Slex protocol marker; use `\"0.1\"` for the current public protocol.\n- `namespace` -state domain identifier (defaults to `\"default\"`).\n- `g` -reactive state and logic (functions, data).\n- `layout` -component tree.\n\nAs a convenience, a bare component tree (keys containing `:`) is normalized to `{ namespace: \"default\", g: {}, layout: <tree> }`. If the bare tree includes `slex: \"0.1\"`, that marker is preserved while component keys move under `layout`.\n\n## Props\n\n### Static props\n\nPassed to the component as-is:\n\n```js\n\"text:title\": { text: \"Hello World\" }\n```\n\n### Dynamic read-pipes (`$`)\n\nA string value on a `$`-prefixed key is evaluated as a JavaScript expression. The result replaces the key stripped of the `$` prefix:\n\n```js\n\"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n```\n\nThe `$` prefix is removed. The prop passed to the component is `content`. Re-evaluation is triggered automatically when any reactive dependency changes.\n\n### Write-pipes (`on*`)\n\nA string value on an `on*`-prefixed key is executed as a JavaScript statement:\n\n```js\n\"button:add\": { onclick: \"g.count++\" }\n\"input:name\": { onchange: \"g.name = String($event || '')\" }\n```\n\nThe handler receives `$event` as the event data.\n\n### Structural directives\n\n`$if`, `$for`, and `$key` are structural directives -they are not passed to the component as props.\n\n## `$if` -conditional rendering\n\nControls whether the component and its subtree are mounted:\n\n```js\n\"card:panel\": {\n  \"$if\": \"g.visible\",\n  \"text:body\": { text: \"I am visible\" }\n}\n```\n\nWhen the expression is truthy, the component mounts (with enter animation if `$enter` is defined). When falsy, it unmounts (with leave animation if `$leave` is defined, then cleanup).\n\n## `$for` -array iteration\n\nRenders a component for each item in an array:\n\n```js\n\"text:item\": {\n  \"$for\": \"g.items\",\n  \"$key\": \"id\",\n  \"$content\": \"$item.label\"\n}\n```\n\nContext variables available inside `$for`: `$item` (current item), `$index` (current index), `$key` (item key). Named components also inject the current item as a same-name variable (e.g. `\"card:user\"` makes `user` available).\n\n### Key strategy\n\n`$key` supports:\n- `\"$value\"` -use the primitive item itself as key.\n- `\"id\"` (or any property name) -read that property from object items.\n- Omitted -uses `item.id` if available, otherwise falls back to index with a console warning.\n\nPrimitive array items should always specify `$key: \"$value\"`.\n\n### $for update algorithm\n\n1. **Delete phase** -remove items whose keys are no longer in the array (with leave animation).\n2. **Add/update/reorder phase** -create new items, update retained items' context (index, item reference), and reorder DOM nodes to match the array.\n3. **Trim phase** -defensively remove any excess children.\n\nWhen an item's index or item reference changes, `onUpdate_<name>` is called.\n\n## Events\n\nEvent handlers are defined as `on*` write-pipes. The component's native change/input events are automatically wired to component instance state for writable components:\n\n```js\n\"input:name\": { onchange: \"g.name = String($event || '')\" }\n```\n\nThe `$event` variable contains the event data. For change events on writable components (`value`, `checked`, or `enabled` mode), the component state is automatically synced before the handler runs.\n\n## Trusted vs secure mode\n\n### Trusted mode (default)\n\nSlex source executes in the host page realm. Use for application-generated content, repository-maintained Slex source, or already-reviewed snippets.\n\n```js\nimport { mount } from \"slexkit\";\n\nmount(script, container, { theme: \"host-shadcn\" });\n```\n\n### Secure mode\n\nUntrusted or agent-generated Slex source runs in a sandbox iframe with opaque origin. Sensitive capabilities are gated behind host policy:\n\n```js\nimport { mountSecureArtifact } from \"slexkit\";\n\nmountSecureArtifact(script, container, {\n  policy: {},\n  frame: { runtimeUrl: \"/slexkit.runtime.js\" },\n});\n```\n\nUse [Secure Runtime Setup](/docs/guides/security-runtime) for the deployment checklist. Use the [Security Runtime Contract](/docs/reference/security) for the full policy model, sandbox behavior, bridge protocol, and fail-closed requirements.\n\n## Theming\n\nTheme mode is resolved from the `theme` option:\n\n| Value | Behavior |\n|-------|----------|\n| `\"auto\"` | Checks container for known theme classes; falls back to `\"uno\"` |\n| `\"host-shadcn\"` | shadcn/ui compatible |\n| `\"uno\"` | Uno/Flowbite compatible |\n| `\"flowbite\"` | Flowbite compatible |\n\nDirection (`ltr`, `rtl`, `auto`) is resolved from the inherited `dir` attribute or the document element.\n\n```js\nmount(script, container, { theme: \"host-shadcn\", dir: \"auto\" });\n```\n\n## Custom components\n\nRegister a component type with a render function:\n\n```ts\nimport { register } from \"slexkit\";\n\nregister(\"custom\", (props, name, ctx) => {\n  const el = ctx.document.createElement(\"div\");\n  el.textContent = String(props.label ?? name);\n  return el;\n}, { state: \"value\" });\n```\n\nThe `RenderContext` provides:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `g` | reactive proxy | Global state |\n| `api` | `Record<string, unknown>` | Host-injected capabilities |\n| `dir` | `\"ltr\"` or `\"rtl\"` | Resolved direction |\n| `labels` | `Partial<Record<string, string>>` | Runtime labels |\n| `id` | `string \\| null` | Component name |\n| `emit` | `(event, data?) => void` | Event emitter |\n| `children` | `Record<string, unknown>` | Nested component tree |\n| `document` | `Document` | Owner document |\n| `renderTree` | function | Recursive render helper |\n\nUse `attachComponentDisposer(el, fn)` to bind cleanup to the component's DOM lifecycle.\n\n## ToolHost\n\nToolHost handles UI that must return structured user input (confirmations, selections, forms). It is separate from display-oriented `slex` fences.\n\nBuilt-in templates:\n- `confirm-action` -yes/no confirmation\n- `choose-options` -single or multi-select\n- `option-list` -scrollable option list\n- `fill-form` -structured form with submit\n\nTemplates compile to standard Slex source. The `submit` component serves as the completion boundary -only tool templates use it, not display fences.",
-      "hash": "aaac995d"
+      "body": "---\ntitle: Slex Usage Reference\ncategory: Reference\nstatus: ready\norder: 20\nsummary: \"Reference for Slex source structure, props, directives, events, theming, custom components, and ToolHost boundaries.\"\nslexkitRenderMode: component\n---\n\n# Slex Usage Reference\n\nSlex source shape and runtime-facing authoring rules: props, directives, events, theming, custom components, and ToolHost boundaries. For first-time setup, start with [Getting Started](/docs/guides/quick-start). For exact protocol compatibility, use the [Slex Specification](/docs/reference/spec).\n\n## Installation\n\nMost hosts install the root package:\n\n```sh\nnpm install slexkit\n```\n\n```js\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\nComponent-free bare runtime:\n\n```sh\nnpm install slexkit @slexkit/runtime\n```\n\n```js\nimport { mount, register } from \"@slexkit/runtime\";\nimport \"@slexkit/components-svelte\";\nimport \"@slexkit/theme-shadcn/style.css\";\n```\n\nFor package boundaries and host-specific install commands, see [Package Boundaries](/docs/reference/packages).\n\n## Slex source structure\n\nA Slex source is a JavaScript object literal:\n\n```js\n{\n  slex: \"0.1\",\n  namespace: \"demo\",\n  g: { count: 0 },\n  layout: {\n    \"button:add\": { text: \"Add\", onclick: \"g.count++\" },\n    \"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n  }\n}\n```\n\n- `slex` -optional Slex protocol marker; use `\"0.1\"` for the current public protocol.\n- `namespace` -state domain identifier (defaults to `\"default\"`).\n- `g` -reactive state and logic (functions, data).\n- `layout` -component tree.\n\nAs a convenience, a bare component tree (keys containing `:`) is normalized to `{ namespace: \"default\", g: {}, layout: <tree> }`. If the bare tree includes `slex: \"0.1\"`, that marker is preserved while component keys move under `layout`.\n\n## Props\n\n### Static props\n\nPassed to the component as-is:\n\n```js\n\"text:title\": { text: \"Hello World\" }\n```\n\n### Dynamic read-pipes (`$`)\n\nA string value on a `$`-prefixed key is evaluated as a JavaScript expression. The result replaces the key stripped of the `$` prefix:\n\n```js\n\"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n```\n\nThe `$` prefix is removed. The prop passed to the component is `content`. Re-evaluation is triggered automatically when any reactive dependency changes.\n\n### Write-pipes (`on*`)\n\nA string value on an `on*`-prefixed key is executed as a JavaScript statement:\n\n```js\n\"button:add\": { onclick: \"g.count++\" }\n\"input:name\": { onchange: \"g.name = String($event || '')\" }\n```\n\nThe handler receives `$event` as the event data.\n\n### Structural directives\n\n`$if`, `$for`, and `$key` are structural directives -they are not passed to the component as props.\n\n## `$if` -conditional rendering\n\nControls whether the component and its subtree are mounted:\n\n```js\n\"card:panel\": {\n  \"$if\": \"g.visible\",\n  \"text:body\": { text: \"I am visible\" }\n}\n```\n\nWhen the expression is truthy, the component mounts (with enter animation if `$enter` is defined). When falsy, it unmounts (with leave animation if `$leave` is defined, then cleanup).\n\n## `$for` -array iteration\n\nRenders a component for each item in an array:\n\n```js\n\"text:item\": {\n  \"$for\": \"g.items\",\n  \"$key\": \"id\",\n  \"$content\": \"$item.label\"\n}\n```\n\nContext variables available inside `$for`: `$item` (current item), `$index` (current index), `$key` (item key). Named components also inject the current item as a same-name variable (e.g. `\"card:user\"` makes `user` available).\n\n### Key strategy\n\n`$key` supports:\n- `\"$value\"` -use the primitive item itself as key.\n- `\"id\"` (or any property name) -read that property from object items.\n- Omitted -uses `item.id` if available, otherwise falls back to index with a console warning.\n\nPrimitive array items should always specify `$key: \"$value\"`.\n\n### $for update algorithm\n\n1. **Delete phase** -remove items whose keys are no longer in the array (with leave animation).\n2. **Add/update/reorder phase** -create new items, update retained items' context (index, item reference), and reorder DOM nodes to match the array.\n3. **Trim phase** -defensively remove any excess children.\n\nWhen an item's index or item reference changes, `onUpdate_<name>` is called.\n\n## Events\n\nEvent handlers are defined as `on*` write-pipes. The component's native change/input events are automatically wired to component instance state for writable components:\n\n```js\n\"input:name\": { onchange: \"g.name = String($event || '')\" }\n```\n\nThe `$event` variable contains the event data. For change events on writable components (`value`, `checked`, or `enabled` mode), the component state is automatically synced before the handler runs.\n\n## Trusted vs secure mode\n\n### Trusted mode (default)\n\nSlex source executes in the host page realm. Use for application-generated content, repository-maintained Slex source, or already-reviewed snippets.\n\n```js\nimport { mount } from \"slexkit\";\n\nmount(script, container, { theme: \"host-shadcn\" });\n```\n\n### Secure mode\n\nUntrusted or agent-generated Slex source runs in a sandbox iframe with opaque origin. Sensitive capabilities are gated behind host policy:\n\n```js\nimport { mountSecureArtifact } from \"slexkit\";\n\nmountSecureArtifact(script, container, {\n  policy: {},\n  frame: { runtimeUrl: \"/slexkit.runtime.js\" },\n});\n```\n\nUse [Secure Runtime Setup](/docs/guides/security-runtime) for the deployment checklist. Use the [Security Runtime Contract](/docs/reference/security) for the full policy model, sandbox behavior, bridge protocol, and fail-closed requirements.\n\n## Theming\n\nTheme mode is resolved from the `theme` option:\n\n| Value | Behavior |\n|-------|----------|\n| `\"auto\"` | Checks container for known theme classes; falls back to `\"uno\"` |\n| `\"host-shadcn\"` | shadcn/ui compatible |\n| `\"uno\"` | Uno/Flowbite compatible |\n| `\"flowbite\"` | Flowbite compatible |\n\nDirection (`ltr`, `rtl`, `auto`) is resolved from the inherited `dir` attribute or the document element.\n\n```js\nmount(script, container, { theme: \"host-shadcn\", dir: \"auto\" });\n```\n\n## Custom components\n\nRegister a component type with a render function:\n\n```ts\nimport { register } from \"slexkit\";\n\nregister(\"custom\", (props, name, ctx) => {\n  const el = ctx.document.createElement(\"div\");\n  el.textContent = String(props.label ?? name);\n  return el;\n}, { state: \"value\" });\n```\n\nThe `RenderContext` provides:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `g` | reactive proxy | Global state |\n| `std` | `SlexKitStdlib` | Pure deterministic helpers |\n| `api` | `Record<string, unknown>` | Host-injected capabilities |\n| `dir` | `\"ltr\"` or `\"rtl\"` | Resolved direction |\n| `labels` | `Partial<Record<string, string>>` | Runtime labels |\n| `id` | `string \\| null` | Component name |\n| `emit` | `(event, data?) => void` | Event emitter |\n| `children` | `Record<string, unknown>` | Nested component tree |\n| `document` | `Document` | Owner document |\n| `renderTree` | function | Recursive render helper |\n\nUse `attachComponentDisposer(el, fn)` to bind cleanup to the component's DOM lifecycle.\n\n## ToolHost\n\nToolHost handles UI that must return structured user input (confirmations, selections, forms). It is separate from display-oriented `slex` fences.\n\nBuilt-in templates:\n- `confirm-action` -yes/no confirmation\n- `choose-options` -single or multi-select\n- `option-list` -scrollable option list\n- `fill-form` -structured form with submit\n\nTemplates compile to standard Slex source. The `submit` component serves as the completion boundary -only tool templates use it, not display fences.",
+      "hash": "3cc2177d"
     },
     {
       "id": "reference/runtime",
@@ -457,8 +661,8 @@
       "href": "/docs/reference/runtime",
       "rawHref": "/docs/reference/runtime.md",
       "sourcePath": "site/content/reference/runtime/en-US.md",
-      "body": "---\ntitle: Runtime Model\ncategory: Reference\nstatus: ready\norder: 30\nsummary: \"Mounting, ingestion, boot, namespace store, lifecycle hooks, component state, and runtime APIs.\"\nslexkitRenderMode: component\n---\n\n# Runtime Model\n\nThe core SlexKit runtime: entry points, namespace store, component state, lifecycle hooks, and expression evaluation.\n\nSlex source syntax is covered in the [protocol specification](/docs/reference/spec). Secure mode isolation is covered in the [security runtime contract](/docs/reference/security).\n\n## Entry points\n\n### `mount(input, container, options)`\n\nParses Slex source object or source string, merges state into the namespace store, renders the component tree into `container`, returns a root cleanup function.\n\n```ts\nfunction mount(\n  input: SlexExpression | string,\n  container: HTMLElement,\n  options?: MountOptions\n): () => void;\n\ntype MountOptions = {\n  theme?: \"auto\" | \"host-shadcn\" | \"uno\" | \"flowbite\";\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  labels?: Partial<Record<string, string>>;\n  api?: Record<string, unknown>;\n};\n```\n\nCalling `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.\n\n### `ingest(input)`\n\nIngests state-only Slex: updates `g` without rendering UI. Used by the Markdown runtime host for state-only fences. Returns `true` if parsing succeeded.\n\n```ts\nfunction ingest(input: SlexExpression | string): boolean;\n```\n\n### `disposeNamespace(namespace)`\n\nPermanently releases all roots, cleanups, store entries, and expression caches for a namespace. Call this when a document, message domain, or page section is permanently removed. Root cleanup is not equivalent to namespace disposal.\n\n```ts\nfunction disposeNamespace(namespace: string): void;\n```\n\n### `boot(options)`\n\nEnhances static pages by auto-discovering explicitly marked Slex blocks (`<pre><code class=\"language-slex\">`) and mounting live previews.\n\n```ts\nfunction boot(options?: BootOptions): void;\n\ntype BootOptions = {\n  selector?: string;\n  sourceControls?: boolean;\n  theme?: ThemeMode;\n  dir?: MountOptions[\"dir\"];\n  labels?: MountOptions[\"labels\"];\n};\n```\n\nDefault selector covers: `language-slex`.\n\nHosts like React/Streamdown or Obsidian should typically use the Markdown runtime host directly rather than `boot()`.\n\n### `register(type, renderer, options)`\n\nRegisters a component type with a render function and state mode.\n\n```ts\nfunction register(\n  type: string,\n  renderer: ComponentRenderer,\n  options?: ComponentRegistrationOptions\n): void;\n\ntype ComponentRenderer = (\n  props: Record<string, unknown>,\n  name: string,\n  ctx: RenderContext\n) => HTMLElement | void;\n\ntype ComponentRegistrationOptions = {\n  state?: \"value\" | \"checked\" | \"enabled\" | \"readable\" | \"none\";\n};\n```\n\n### `configureComponentScope(options)`\n\nConfigures a flush function for component scope -used by framework adapters to synchronize DOM after reactive updates.\n\n```ts\nfunction configureComponentScope(options: { flush?: () => void }): void;\n```\n\n## Namespace store\n\n`namespace` is the state domain. Multiple mounts with the same namespace share one store:\n\n- New `g` is deep-merged into the old `g` (functions overwrite, objects recursively merge, arrays replace, scalars overwrite).\n- New `layout` replaces the current layout (no deep merge for layout).\n- Component instance state is persisted within the namespace.\n- Expression caches are managed per namespace.\n\nThis allows a document, message domain, or tool panel to update its UI incrementally while preserving state.\n\n## Component instance state\n\nNamed components can expose instance state. Which prop is writable depends on the component's registered state mode:\n\n| Mode | Writable prop | Behavior |\n|------|---------------|----------|\n| `value` | `value` | Writable from expressions and events |\n| `checked` | `checked`, `value` | Both synced, writable |\n| `enabled` | `enabled` | Switch enabled state, writable |\n| `readable` | (none) | Readable from expressions, write emits a console warning |\n| `none` | (none) | No state exposed |\n\n```js\n{\n  layout: {\n    \"slider:threshold\": { value: 42 },\n    \"text:preview\": { \"$content\": \"'Threshold: ' + threshold.value\" }\n  }\n}\n```\n\nRepeatedly named components share namespace-level state. `$for` items with the same component name also share one state instance.\n\n## Lifecycle hooks\n\nThe runtime calls convention-based hooks on the `g` object:\n\n```\ng.onMount_<name>()      -after component is appended to DOM\ng.onUnmount_<name>()    -before component is removed from DOM\ng.onUpdate_<name>()     -after $for item index or item reference changes\n```\n\nThese hooks fire for normal components, `$if` branches, and `$for` slots. Root cleanup and `disposeNamespace()` trigger `onUnmount`.\n\n## Component disposer\n\nFramework components, event listeners, subscriptions, and external resources should bind their cleanup to the component DOM element:\n\n```ts\nimport { register, attachComponentDisposer } from \"slexkit/runtime\";\n\nregister(\"custom\", (props, name, ctx) => {\n  const el = ctx.document.createElement(\"div\");\n  const stop = subscribeSomething();\n  attachComponentDisposer(el, stop);\n  return el;\n});\n```\n\nThe runtime calls the disposer when the element is unmounted. The official Svelte adapter uses this mechanism to destroy Svelte component instances.\n\n## Expression evaluation context\n\nExpressions in `$` read-pipes and statements in `on*` write-pipes can access these variables:\n\n| Variable | Type | Availability |\n|----------|------|--------------|\n| `g` | reactive state proxy | always |\n| `api` | host-injected capabilities | if `api` option passed to `mount()` |\n| `$event` | event data | `on*` handlers only |\n| `$item` | current array item | `$for` context only |\n| `$index` | current array index | `$for` context only |\n| `$key` | current item key | `$for` context only |\n| named component state | e.g. `threshold.value` | named components |\n\nExpression evaluation uses `new Function()` in trusted mode. Evaluation errors are caught and produce a console warning with namespace and path information; the last known value is used as a fallback.",
-      "hash": "559e05c2"
+      "body": "---\ntitle: Runtime Model\ncategory: Reference\nstatus: ready\norder: 30\nsummary: \"Mounting, ingestion, boot, namespace store, lifecycle hooks, component state, and runtime APIs.\"\nslexkitRenderMode: component\n---\n\n# Runtime Model\n\nThe core SlexKit runtime: entry points, namespace store, component state, lifecycle hooks, and expression evaluation.\n\nSlex source syntax is covered in the [protocol specification](/docs/reference/spec). Secure mode isolation is covered in the [security runtime contract](/docs/reference/security).\n\n## Entry points\n\n### `mount(input, container, options)`\n\nParses Slex source object or source string, merges state into the namespace store, renders the component tree into `container`, returns a root cleanup function.\n\n```ts\nfunction mount(\n  input: SlexExpression | string,\n  container: HTMLElement,\n  options?: MountOptions\n): () => void;\n\ntype MountOptions = {\n  theme?: \"auto\" | \"host-shadcn\" | \"uno\" | \"flowbite\";\n  dir?: \"ltr\" | \"rtl\" | \"auto\";\n  labels?: Partial<Record<string, string>>;\n  api?: Record<string, unknown>;\n};\n```\n\nCalling `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.\n\nEvery 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.\n\n### `ingest(input)`\n\nIngests state-only Slex: updates `g` without rendering UI. Used by the Markdown runtime host for state-only fences. Returns `true` if parsing succeeded.\n\n```ts\nfunction ingest(input: SlexExpression | string): boolean;\n```\n\n### `disposeNamespace(namespace)`\n\nPermanently releases all roots, cleanups, store entries, and expression caches for a namespace. Call this when a document, message domain, or page section is permanently removed. Root cleanup is not equivalent to namespace disposal.\n\n```ts\nfunction disposeNamespace(namespace: string): void;\n```\n\n### `boot(options)`\n\nEnhances static pages by auto-discovering explicitly marked Slex blocks (`<pre><code class=\"language-slex\">`) and mounting live previews.\n\n```ts\nfunction boot(options?: BootOptions): void;\n\ntype BootOptions = {\n  selector?: string;\n  sourceControls?: boolean;\n  theme?: ThemeMode;\n  dir?: MountOptions[\"dir\"];\n  labels?: MountOptions[\"labels\"];\n};\n```\n\nDefault selector covers: `language-slex`.\n\nHosts like React/Streamdown or Obsidian should typically use the Markdown runtime host directly rather than `boot()`.\n\n### `register(type, renderer, options)`\n\nRegisters a component type with a render function and state mode.\n\n```ts\nfunction register(\n  type: string,\n  renderer: ComponentRenderer,\n  options?: ComponentRegistrationOptions\n): void;\n\ntype ComponentRenderer = (\n  props: Record<string, unknown>,\n  name: string,\n  ctx: RenderContext\n) => HTMLElement | void;\n\ntype ComponentRegistrationOptions = {\n  state?: \"value\" | \"checked\" | \"enabled\" | \"readable\" | \"none\";\n};\n```\n\n### `configureComponentScope(options)`\n\nConfigures a flush function for component scope -used by framework adapters to synchronize DOM after reactive updates.\n\n```ts\nfunction configureComponentScope(options: { flush?: () => void }): void;\n```\n\n## Namespace store\n\n`namespace` is the state domain. Multiple mounts with the same namespace share one store:\n\n- New `g` is deep-merged into the old `g` (functions overwrite, objects recursively merge, arrays replace, scalars overwrite).\n- New `layout` replaces the current layout (no deep merge for layout).\n- Component instance state is persisted within the namespace.\n- Expression caches are managed per namespace.\n\nThis allows a document, message domain, or tool panel to update its UI incrementally while preserving state.\n\n## Component instance state\n\nNamed components can expose instance state. Which prop is writable depends on the component's registered state mode:\n\n| Mode | Writable prop | Behavior |\n|------|---------------|----------|\n| `value` | `value` | Writable from expressions and events |\n| `checked` | `checked`, `value` | Both synced, writable |\n| `enabled` | `enabled` | Switch enabled state, writable |\n| `readable` | (none) | Readable from expressions, write emits a console warning |\n| `none` | (none) | No state exposed |\n\n```js\n{\n  layout: {\n    \"slider:threshold\": { value: 42 },\n    \"text:preview\": { \"$content\": \"'Threshold: ' + threshold.value\" }\n  }\n}\n```\n\nRepeatedly named components share namespace-level state. `$for` items with the same component name also share one state instance.\n\n## Lifecycle hooks\n\nThe runtime calls convention-based hooks on the `g` object:\n\n```\ng.onMount_<name>()      -after component is appended to DOM\ng.onUnmount_<name>()    -before component is removed from DOM\ng.onUpdate_<name>()     -after $for item index or item reference changes\n```\n\nThese hooks fire for normal components, `$if` branches, and `$for` slots. Root cleanup and `disposeNamespace()` trigger `onUnmount`.\n\n## Component disposer\n\nFramework components, event listeners, subscriptions, and external resources should bind their cleanup to the component DOM element:\n\n```ts\nimport { register, attachComponentDisposer } from \"slexkit/runtime\";\n\nregister(\"custom\", (props, name, ctx) => {\n  const el = ctx.document.createElement(\"div\");\n  const stop = subscribeSomething();\n  attachComponentDisposer(el, stop);\n  return el;\n});\n```\n\nThe runtime calls the disposer when the element is unmounted. The official Svelte adapter uses this mechanism to destroy Svelte component instances.\n\n## Expression evaluation context\n\nExpressions in `$` read-pipes and statements in `on*` write-pipes can access these variables:\n\n| Variable | Type | Availability |\n|----------|------|--------------|\n| `g` | reactive state proxy | always |\n| `api` | host-injected capabilities | if `api` option passed to `mount()` |\n| `$event` | event data | `on*` handlers only |\n| `$item` | current array item | `$for` context only |\n| `$index` | current array index | `$for` context only |\n| `$key` | current item key | `$for` context only |\n| named component state | e.g. `threshold.value` | named components |\n\nExpression evaluation uses `new Function()` in trusted mode. Evaluation errors are caught and produce a console warning with namespace and path information; the last known value is used as a fallback.",
+      "hash": "169041c3"
     },
     {
       "id": "reference/integration",
@@ -468,8 +672,8 @@
       "href": "/docs/reference/integration",
       "rawHref": "/docs/reference/integration.md",
       "sourcePath": "site/content/reference/integration/en-US.md",
-      "body": "---\ntitle: Host Integration\ncategory: Reference\nstatus: ready\norder: 40\nsummary: \"MarkdownRuntimeHost, trusted and secure host integrations, Streamdown, Obsidian, and custom adapters.\"\nslexkitRenderMode: component\n---\n\n# Host Integration\n\nHow to integrate SlexKit into Markdown renderers, chat hosts, document viewers, and custom platforms.\n\n## Core concepts\n\n### Artifact\n\nAn artifact is a group of Slex blocks belonging to the same document, message, or note. Hosts identify an artifact by an `artifactId` and group related blocks into one runtime domain.\n\nIn **trusted mode**, the runtime prefixes each block's namespace with the artifact ID to prevent cross-document state pollution. `disposeArtifact()` releases all namespace stores for that artifact.\n\nIn **secure mode**, all fences in one artifact are combined into a single sandbox iframe. The runtime maintains artifact slots, syncing rendered heights back to the original Markdown placeholder containers.\n\n### Block\n\nA block is a single Slex block: one renderable unit. It has:\n- A source (Slex expression object or source string).\n- A container element (where the rendered output goes).\n- An optional `artifactId` (for grouping into an artifact).\n\n### Cleanup\n\nEvery block mount returns a cleanup function. The host must call it when the block is removed. For artifact-level cleanup, call `disposeArtifact(artifactId)`. For global cleanup, call `disposeAll()`.\n\n## MarkdownRuntimeHost\n\nThe `SlexKitMarkdownRuntimeHost` is the recommended API for Markdown-based hosts. It handles mode selection, artifact management, and block lifecycle.\n\n```ts\nimport {\n  createSlexKitMarkdownRuntimeHost,\n  getSlexKitMarkdownRuntimeHost,\n  installSlexKitMarkdownRuntimeHost\n} from \"slexkit\";\n```\n\n### Interface\n\n```ts\ntype SlexKitMarkdownRuntimeHost = {\n  configure(options: Partial<SlexKitMarkdownRuntimeOptions>): void;\n  getMode(): \"trusted\" | \"secure\";\n  mountBlock(block: SlexKitMarkdownBlock): () => void;\n  disposeBlock(container: HTMLElement): void;\n  disposeArtifact(artifactId: string): void;\n  disposeAll(): void;\n};\n\ntype SlexKitMarkdownBlock = {\n  artifactId?: string;\n  blockId?: string;\n  source: SlexExpression | string;\n  container: HTMLElement;\n  stateOnly?: boolean;\n  theme?: ThemeMode;\n  dir?: MountOptions[\"dir\"];\n  labels?: MountOptions[\"labels\"];\n};\n\ntype SlexKitMarkdownRuntimeOptions = {\n  mode?: \"trusted\" | \"secure\";\n  policy?: HostRuntimePolicy;\n  hostAdapter?: HostRuntimeAdapter;\n  secureFrame?: boolean | SecureFrameOptions;\n  theme?: ThemeMode;\n  dir?: MountOptions[\"dir\"];\n  labels?: MountOptions[\"labels\"];\n};\n```\n\n### Global singleton\n\nThe module provides a global singleton for convenience:\n\n```ts\n// Install explicitly\nconst runtime = installSlexKitMarkdownRuntimeHost({\n  mode: \"secure\",\n  policy: { execution: { maxUnresponsiveMs: 30000 } },\n  secureFrame: { runtimeUrl: \"/slexkit.runtime.js\" }\n});\n\n// Or use lazy global (auto-creates with defaults on first call)\nconst runtime = getSlexKitMarkdownRuntimeHost();\n```\n\nUse the singleton when the entire application shares one runtime configuration. Avoid it when different host contexts need different policies.\n\n## Trusted mode integration\n\nTrusted mode runs Slex source in the host page realm. Use for local documents, application-generated content, or reviewed Slex source.\n\n```ts\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"trusted\",\n  theme: \"host-shadcn\"\n});\n\n// Detect a slex fence at position <container>\nconst cleanup = runtime.mountBlock({\n  artifactId: \"doc-1\",\n  source: fenceSource,\n  container: fenceContainer\n});\n\n// When the fence container is removed\nruntime.disposeBlock(fenceContainer);\n\n// When the document is closed\nruntime.disposeArtifact(\"doc-1\");\n\n// When the plugin or page unloads\nruntime.disposeAll();\n```\n\nIn trusted mode, the runtime automatically scopes namespaces by artifact ID (`<artifactId>::<namespace>`) to prevent different documents from polluting each other's state.\n\nState-only blocks (no `layout`, only `g` updates) are detected automatically and ingested via `ingest()`. Subsequent renderable blocks in the same artifact can read that state.\n\n## Secure mode integration\n\nSecure mode runs Slex source in a sandbox iframe. Use for untrusted or agent-generated Markdown.\n\n```ts\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"secure\",\n  policy: {\n    execution: { maxUnresponsiveMs: 30000 }\n  },\n  secureFrame: {\n    runtimeUrl: \"/slexkit.runtime.js\"\n  },\n  theme: \"host-shadcn\"\n});\n\nconst cleanup = runtime.mountBlock({\n  artifactId: \"agent-msg-1\",\n  source: agentGeneratedDsl,\n  container: fenceContainer\n});\n```\n\nOmitted capability policies deny access by default. Add `network`, `timer`, `animation`, or `canvas` policy objects only when the host intentionally enables those capabilities.\n\n### Artifact slot bridge\n\nWhen multiple secure blocks belong to the same artifact, they share one sandbox iframe. The first block (in document order) becomes the iframe anchor. Other blocks act as slots -their containers receive position and height updates from the sandbox via the postMessage bridge.\n\n```html\n<!-- In Markdown, the first fence becomes the anchor -->\n<div id=\"fence-1\"><!-- anchor: iframe rendered here --></div>\n<div id=\"fence-2\"><!-- slot: height synced from iframe --></div>\n<div id=\"fence-3\"><!-- slot: height synced from iframe --></div>\n```\n\nThis allows state sharing across fences within one artifact while keeping all execution confined to one sandbox.\n\n### `runtimeUrl` requirements\n\nThe `runtimeUrl` must serve the SlexKit runtime as an ES module with:\n\n```\nAccess-Control-Allow-Origin: *\nContent-Type: text/javascript\n```\n\nThe build output includes `dist/runtime.js` for this purpose. The `slex copy-runtime` command copies that module to `public/slexkit.runtime.js` by default so existing secure-frame URLs can stay stable. Configure your CDN or static file server to serve it with the correct headers.\n\n## Streamdown / React integration\n\nThe `@slexkit/streamdown` package provides a React/Streamdown custom renderer:\n\n```tsx\nimport { Streamdown } from \"streamdown\";\nimport { slexkitRenderer } from \"@slexkit/streamdown\";\nimport \"@slexkit/theme-shadcn/style.css\";\nimport \"@slexkit/streamdown/style.css\";\n\nexport function Message({ markdown }: { markdown: string }) {\n  return (\n    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>\n      {markdown}\n    </Streamdown>\n  );\n}\n```\n\nThe renderer handles `slex` fences. It supports both trusted and secure runtime modes and can delegate to a shared Markdown runtime host instance.\n\n## Obsidian integration\n\nThe `@slexkit/obsidian` package registers the `slex` fenced code block processor in Obsidian:\n\n```ts\n// In the Obsidian plugin:\nregisterMarkdownCodeBlockProcessor(\"slex\", (source, el, ctx) => { ... });\n```\n\nThe 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.\n\n**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.\n\n## Writing a custom host adapter\n\nTo integrate SlexKit into a custom Markdown renderer or chat host:\n\n### 1. Detect fence language\n\nOnly process fences tagged with `slex`. Never scan plain JavaScript, JSON, or untagged code blocks.\n\n### 2. Create a runtime host\n\n```ts\nimport { createSlexKitMarkdownRuntimeHost } from \"slexkit\";\n\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"trusted\",   // or \"secure\"\n  theme: \"host-shadcn\"\n});\n```\n\n### 3. Mount blocks\n\nFor each detected fence, create a container element and mount:\n\n```ts\nfunction processFence(source: string, fenceIndex: number) {\n  const container = document.createElement(\"div\");\n  // Insert container at the fence position in the document\n\n  const cleanup = runtime.mountBlock({\n    artifactId: \"message-42\",\n    source,\n    container\n  });\n\n  return cleanup;\n}\n```\n\n### 4. Manage lifecycle\n\n```ts\n// When a single block is removed\nruntime.disposeBlock(container);\n\n// When the entire artifact (message/document) is removed\nruntime.disposeArtifact(\"message-42\");\n\n// When the plugin/page unloads\nruntime.disposeAll();\n```\n\n### 5. Handle secure mode\n\nIf using secure mode, serve `slexkit.runtime.js` as a public ES module with the correct CORS headers, and configure `secureFrame.runtimeUrl`.\n\n## Fallback rendering\n\nSlexKit-capable hosts should still include the raw fence content or a plain text fallback in the DOM for environments that don't support SlexKit. The runtime replaces the container children, so fallback text is only visible before mount or after disposal.",
-      "hash": "ac782b49"
+      "body": "---\ntitle: Host Integration\ncategory: Reference\nstatus: ready\norder: 40\nsummary: \"MarkdownRuntimeHost, trusted and secure host integrations, Streamdown, Obsidian, and custom adapters.\"\nslexkitRenderMode: component\n---\n\n# Host Integration\n\nHow to integrate SlexKit into Markdown renderers, chat hosts, document viewers, and custom platforms.\n\n## Core concepts\n\n### Artifact\n\nAn artifact is a group of Slex blocks belonging to the same document, message, or note. Hosts identify an artifact by an `artifactId` and group related blocks into one runtime domain.\n\nIn **trusted mode**, the runtime prefixes each block's namespace with the artifact ID to prevent cross-document state pollution. `disposeArtifact()` releases all namespace stores for that artifact.\n\nIn **secure mode**, all fences in one artifact are combined into a single sandbox iframe. The runtime maintains artifact slots, syncing rendered heights back to the original Markdown placeholder containers.\n\n### Block\n\nA block is a single Slex block: one renderable unit. It has:\n- A source (Slex expression object or source string).\n- A container element (where the rendered output goes).\n- An optional `artifactId` (for grouping into an artifact).\n\n### Cleanup\n\nEvery block mount returns a cleanup function. The host must call it when the block is removed. For artifact-level cleanup, call `disposeArtifact(artifactId)`. For global cleanup, call `disposeAll()`.\n\n## MarkdownRuntimeHost\n\nThe `SlexKitMarkdownRuntimeHost` is the recommended API for Markdown-based hosts. It handles mode selection, artifact management, and block lifecycle.\n\n```ts\nimport {\n  createSlexKitMarkdownRuntimeHost,\n  getSlexKitMarkdownRuntimeHost,\n  installSlexKitMarkdownRuntimeHost\n} from \"slexkit\";\n```\n\n### Interface\n\n```ts\ntype SlexKitMarkdownRuntimeHost = {\n  configure(options: Partial<SlexKitMarkdownRuntimeOptions>): void;\n  getMode(): \"trusted\" | \"secure\";\n  mountBlock(block: SlexKitMarkdownBlock): () => void;\n  disposeBlock(container: HTMLElement): void;\n  disposeArtifact(artifactId: string): void;\n  disposeAll(): void;\n};\n\ntype SlexKitMarkdownBlock = {\n  artifactId?: string;\n  blockId?: string;\n  source: SlexExpression | string;\n  container: HTMLElement;\n  stateOnly?: boolean;\n  theme?: ThemeMode;\n  dir?: MountOptions[\"dir\"];\n  labels?: MountOptions[\"labels\"];\n};\n\ntype SlexKitMarkdownRuntimeOptions = {\n  mode?: \"trusted\" | \"secure\";\n  policy?: HostRuntimePolicy;\n  hostAdapter?: HostRuntimeAdapter;\n  secureFrame?: boolean | SecureFrameOptions;\n  theme?: ThemeMode;\n  dir?: MountOptions[\"dir\"];\n  labels?: MountOptions[\"labels\"];\n};\n```\n\n### Global singleton\n\nThe module provides a global singleton for convenience:\n\n```ts\n// Install explicitly\nconst runtime = installSlexKitMarkdownRuntimeHost({\n  mode: \"secure\",\n  policy: { execution: { maxUnresponsiveMs: 30000 } },\n  secureFrame: { runtimeUrl: \"/slexkit.runtime.js\" }\n});\n\n// Or use lazy global (auto-creates with defaults on first call)\nconst runtime = getSlexKitMarkdownRuntimeHost();\n```\n\nUse the singleton when the entire application shares one runtime configuration. Avoid it when different host contexts need different policies.\n\n## Trusted mode integration\n\nTrusted mode runs Slex source in the host page realm. Use for local documents, application-generated content, or reviewed Slex source.\n\n```ts\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"trusted\",\n  theme: \"host-shadcn\"\n});\n\n// Detect a slex fence at position <container>\nconst cleanup = runtime.mountBlock({\n  artifactId: \"doc-1\",\n  source: fenceSource,\n  container: fenceContainer\n});\n\n// When the fence container is removed\nruntime.disposeBlock(fenceContainer);\n\n// When the document is closed\nruntime.disposeArtifact(\"doc-1\");\n\n// When the plugin or page unloads\nruntime.disposeAll();\n```\n\nIn trusted mode, the runtime automatically scopes namespaces by artifact ID (`<artifactId>::<namespace>`) to prevent different documents from polluting each other's state.\n\nState-only blocks (no `layout`, only `g` updates) are detected automatically and ingested via `ingest()`. Subsequent renderable blocks in the same artifact can read that state.\n\n## Secure mode integration\n\nSecure mode runs Slex source in a sandbox iframe. Use for untrusted or agent-generated Markdown.\n\n```ts\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"secure\",\n  policy: {\n    execution: { maxUnresponsiveMs: 30000 }\n  },\n  secureFrame: {\n    runtimeUrl: \"/slexkit.runtime.js\"\n  },\n  theme: \"host-shadcn\"\n});\n\nconst cleanup = runtime.mountBlock({\n  artifactId: \"agent-msg-1\",\n  source: agentGeneratedDsl,\n  container: fenceContainer\n});\n```\n\nOmitted capability policies deny access by default. Add `network`, `timer`, `animation`, or `canvas` policy objects only when the host intentionally enables those capabilities.\n\n### Artifact slot bridge\n\nWhen multiple secure blocks belong to the same artifact, they share one sandbox iframe. The first block (in document order) becomes the iframe anchor. Other blocks act as slots -their containers receive position and height updates from the sandbox via the postMessage bridge.\n\n```html\n<!-- In Markdown, the first fence becomes the anchor -->\n<div id=\"fence-1\"><!-- anchor: iframe rendered here --></div>\n<div id=\"fence-2\"><!-- slot: height synced from iframe --></div>\n<div id=\"fence-3\"><!-- slot: height synced from iframe --></div>\n```\n\nThis allows state sharing across fences within one artifact while keeping all execution confined to one sandbox.\n\n### `runtimeUrl` requirements\n\nThe `runtimeUrl` must serve the SlexKit runtime as an ES module with:\n\n```\nAccess-Control-Allow-Origin: *\nContent-Type: text/javascript\n```\n\nThe build output includes `dist/runtime.js` for this purpose. The `slex copy-runtime` command copies that module to `public/slexkit.runtime.js` by default so existing secure-frame URLs can stay stable. Configure your CDN or static file server to serve it with the correct headers.\n\n## Streamdown / React integration\n\nThe `@slexkit/streamdown` package provides a React/Streamdown custom renderer:\n\n```tsx\nimport { Streamdown } from \"streamdown\";\nimport { slexkitRenderer } from \"@slexkit/streamdown\";\nimport \"@slexkit/theme-shadcn/style.css\";\nimport \"@slexkit/streamdown/style.css\";\n\nexport function Message({ markdown }: { markdown: string }) {\n  return (\n    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>\n      {markdown}\n    </Streamdown>\n  );\n}\n```\n\nThe renderer handles `slex` fences. It supports both trusted and secure runtime modes and can delegate to a shared Markdown runtime host instance.\n\n## Obsidian integration\n\nThe official Obsidian plugin lives in <https://github.com/slexkit/obsidian-slexkit> and registers the `slex` fenced code block processor:\n\n```ts\n// In the plugin:\nregisterMarkdownCodeBlockProcessor(\"slex\", (source, el, ctx) => { ... });\n```\n\nThe 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.\n\n**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.\n\n## Writing a custom host adapter\n\nTo integrate SlexKit into a custom Markdown renderer or chat host:\n\n### 1. Detect fence language\n\nOnly process fences tagged with `slex`. Never scan plain JavaScript, JSON, or untagged code blocks.\n\n### 2. Create a runtime host\n\n```ts\nimport { createSlexKitMarkdownRuntimeHost } from \"slexkit\";\n\nconst runtime = createSlexKitMarkdownRuntimeHost({\n  mode: \"trusted\",   // or \"secure\"\n  theme: \"host-shadcn\"\n});\n```\n\n### 3. Mount blocks\n\nFor each detected fence, create a container element and mount:\n\n```ts\nfunction processFence(source: string, fenceIndex: number) {\n  const container = document.createElement(\"div\");\n  // Insert container at the fence position in the document\n\n  const cleanup = runtime.mountBlock({\n    artifactId: \"message-42\",\n    source,\n    container\n  });\n\n  return cleanup;\n}\n```\n\n### 4. Manage lifecycle\n\n```ts\n// When a single block is removed\nruntime.disposeBlock(container);\n\n// When the entire artifact (message/document) is removed\nruntime.disposeArtifact(\"message-42\");\n\n// When the plugin/page unloads\nruntime.disposeAll();\n```\n\n### 5. Handle secure mode\n\nIf using secure mode, serve `slexkit.runtime.js` as a public ES module with the correct CORS headers, and configure `secureFrame.runtimeUrl`.\n\n## Fallback rendering\n\nSlexKit-capable hosts should still include the raw fence content or a plain text fallback in the DOM for environments that don't support SlexKit. The runtime replaces the container children, so fallback text is only visible before mount or after disposal.",
+      "hash": "31cedb3b"
     },
     {
       "id": "reference/security",
@@ -490,8 +694,8 @@
       "href": "/docs/reference/packages",
       "rawHref": "/docs/reference/packages.md",
       "sourcePath": "site/content/reference/packages/en-US.md",
-      "body": "---\ntitle: Package Boundaries\ncategory: Reference\nstatus: ready\norder: 60\nsummary: \"Package relationships, installation matrix, publish contents, and release quality gates.\"\nslexkitRenderMode: component\n---\n\n# Package Boundaries\n\nSlexKit v0/beta npm packages, their relationships, and installation.\n\n## Package relationship\n\n```\nslexkit (root - real code)\n ├── runtime entry\n ├── Svelte component registrations\n ├── ToolHost\n ├── default styles\n └── secure iframe runner\n\n @slexkit/runtime (thin wrapper) ─── re-exports slexkit/runtime\n @slexkit/components-svelte (thin wrapper) ─── re-exports slexkit/components-svelte\n @slexkit/theme-shadcn ─── CSS only\n @slexkit/streamdown ─── React/Streamdown renderer\n @slexkit/obsidian ─── Obsidian plugin\n @slexkit/mcp ─── read-only MCP server for AI agents\n```\n\n`@slexkit/runtime` and `@slexkit/components-svelte` are thin wrappers that re-export from the root `slexkit` package. They are not standalone physical packages; installing them still requires installing `slexkit`. `@slexkit/theme-shadcn` is CSS-only and contains no runtime implementation.\n\n## slexkit (root)\n\nThe actual implementation package. Contains the runtime engine, official Svelte components, ToolHost, and styles.\n\n```sh\nnpm install slexkit\n```\n\n```js\nimport { mount, disposeNamespace, boot } from \"slexkit\";\nimport \"slexkit/style.css\";       // default styles (includes all component CSS)\nimport \"slexkit/dist/style.css\";  // same distributed CSS bundle via dist alias\n```\n\nVersion helpers are exported from both the root and runtime entries:\n\n```js\nimport { SLEXKIT_VERSION, SLEX_PROTOCOL_VERSION, getSlexKitInfo } from \"slexkit\";\n```\n\n## @slexkit/runtime\n\nComponent-free runtime entry point. Does not auto-register any official Svelte components.\n\n```sh\nnpm install slexkit @slexkit/runtime\n```\n\n```js\nimport { mount, register, createSecureRuntime } from \"@slexkit/runtime\";\n```\n\nUse this when you want to register your own component set instead of the bundled Svelte components.\n\n## @slexkit/components-svelte\n\nSide-effect import that registers all official Svelte components into the runtime registry.\n\n```sh\nnpm install slexkit @slexkit/runtime @slexkit/components-svelte\n```\n\n```js\nimport { mount } from \"@slexkit/runtime\";\nimport \"@slexkit/components-svelte\";\n```\n\nPublic component specs: action (2), component capability (1), content (6), data (1), disclosure (2), display (2), feedback (2), input (6), layout (4), navigation (1), tooling (1).\n\n## @slexkit/theme-shadcn\n\nCSS theme bundle (shadcn/ui compatible).\n\n```sh\nnpm install @slexkit/theme-shadcn\n```\n\n```js\nimport \"@slexkit/theme-shadcn/style.css\";\n```\n\n## @slexkit/streamdown\n\nReact/Streamdown custom renderer for Markdown-hosted SlexKit fences.\n\n```sh\nnpm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom\n```\n\n```tsx\nimport { Streamdown } from \"streamdown\";\nimport { slexkitRenderer } from \"@slexkit/streamdown\";\nimport \"@slexkit/theme-shadcn/style.css\";\nimport \"@slexkit/streamdown/style.css\";\n\nexport function Message({ markdown }: { markdown: string }) {\n  return (\n    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>\n      {markdown}\n    </Streamdown>\n  );\n}\n```\n\nProcesses `slex` fences. Supports both trusted and secure runtime modes.\n\n## @slexkit/obsidian\n\nObsidian plugin adapter. Registers SlexKit fenced code block processors and renders local vault content in reading mode.\n\n```sh\nnpm install slexkit @slexkit/obsidian\n```\n\nThe 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.\n\n## @slexkit/mcp\n\nRead-only MCP server for AI agents. It serves generated LLM docs, component metadata, examples, runtime docs, ToolHost docs, and Slex source validation.\n\n```sh\nnpx -y @slexkit/mcp\n```\n\nThe server does not modify project files. Use it when an agent needs current SlexKit component or runtime context.\n\n## Installation matrix\n\n| Use case | Install command |\n|----------|----------------|\n| Quick start, everything included | `npm install slexkit` |\n| Component-free, custom components | `npm install slexkit @slexkit/runtime` |\n| With Svelte components | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` |\n| Add shadcn theme | `npm install @slexkit/theme-shadcn` |\n| React/Streamdown host | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` |\n| Obsidian plugin | `npm install slexkit @slexkit/obsidian` |\n| AI agent MCP server | `npx -y @slexkit/mcp` |\n\n## v0 packaging strategy\n\nThe current approach keeps the root `slexkit` package as the real code carrier. Scoped `@slexkit/*` wrappers exist to define future package boundaries. If physical package splitting happens in the future, it will involve splitting source code, build output, and publishing workflows.\n\n## Release quality gate\n\nAll scoped packages are release-checked together:\n\n```sh\nbun run build\nbun run test\nbun run smoke:release\n```\n\nThe 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`.",
-      "hash": "79d87cbd"
+      "body": "---\ntitle: Package Boundaries\ncategory: Reference\nstatus: ready\norder: 60\nsummary: \"Package relationships, installation matrix, publish contents, and release quality gates.\"\nslexkitRenderMode: component\n---\n\n# Package Boundaries\n\nSlexKit v0/beta npm packages, their relationships, and installation.\n\n## Package relationship\n\n```\nslexkit (root - real code)\n ├── runtime entry\n ├── Svelte component registrations\n ├── ToolHost\n ├── default styles\n └── secure iframe runner\n\n @slexkit/runtime (thin wrapper) ─── re-exports slexkit/runtime\n @slexkit/components-svelte (thin wrapper) ─── re-exports slexkit/components-svelte\n @slexkit/theme-shadcn ─── CSS only\n @slexkit/streamdown ─── React/Streamdown renderer\n @slexkit/mcp ─── read-only MCP server for AI agents\n```\n\n`@slexkit/runtime` and `@slexkit/components-svelte` are thin wrappers that re-export from the root `slexkit` package. They are not standalone physical packages; installing them still requires installing `slexkit`. `@slexkit/theme-shadcn` is CSS-only and contains no runtime implementation.\n\n## slexkit (root)\n\nThe actual implementation package. Contains the runtime engine, official Svelte components, ToolHost, and styles.\n\n```sh\nnpm install slexkit\n```\n\n```js\nimport { mount, disposeNamespace, boot } from \"slexkit\";\nimport \"slexkit/style.css\";       // default styles (includes all component CSS)\nimport \"slexkit/dist/style.css\";  // same distributed CSS bundle via dist alias\n```\n\nVersion helpers are exported from both the root and runtime entries:\n\n```js\nimport { SLEXKIT_VERSION, SLEX_PROTOCOL_VERSION, getSlexKitInfo } from \"slexkit\";\n```\n\n## @slexkit/runtime\n\nComponent-free runtime entry point. Does not auto-register any official Svelte components.\n\n```sh\nnpm install slexkit @slexkit/runtime\n```\n\n```js\nimport { mount, register, createSecureRuntime } from \"@slexkit/runtime\";\n```\n\nUse this when you want to register your own component set instead of the bundled Svelte components.\n\n## @slexkit/components-svelte\n\nSide-effect import that registers all official Svelte components into the runtime registry.\n\n```sh\nnpm install slexkit @slexkit/runtime @slexkit/components-svelte\n```\n\n```js\nimport { mount } from \"@slexkit/runtime\";\nimport \"@slexkit/components-svelte\";\n```\n\nPublic component specs: action (2), component capability (1), content (6), data (1), disclosure (2), display (2), feedback (2), input (6), layout (4), navigation (1), tooling (1).\n\n## @slexkit/theme-shadcn\n\nCSS theme bundle (shadcn/ui compatible).\n\n```sh\nnpm install @slexkit/theme-shadcn\n```\n\n```js\nimport \"@slexkit/theme-shadcn/style.css\";\n```\n\n## @slexkit/streamdown\n\nReact/Streamdown custom renderer for Markdown-hosted SlexKit fences.\n\n```sh\nnpm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom\n```\n\n```tsx\nimport { Streamdown } from \"streamdown\";\nimport { slexkitRenderer } from \"@slexkit/streamdown\";\nimport \"@slexkit/theme-shadcn/style.css\";\nimport \"@slexkit/streamdown/style.css\";\n\nexport function Message({ markdown }: { markdown: string }) {\n  return (\n    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>\n      {markdown}\n    </Streamdown>\n  );\n}\n```\n\nProcesses `slex` fences. Supports both trusted and secure runtime modes.\n\n## Obsidian plugin\n\nThe official Obsidian plugin lives in a separate release repository: <https://github.com/slexkit/obsidian-slexkit>.\n\nInstall **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`.\n\nThe community plugin is currently desktop-only and compatible with Obsidian 1.5.0+. Mobile support should be enabled only after real mobile vault testing.\n\nThe 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.\n\n## @slexkit/mcp\n\nRead-only MCP server for AI agents. It serves generated LLM docs, component metadata, examples, runtime docs, ToolHost docs, and Slex source validation.\n\n```sh\nnpx -y @slexkit/mcp\n```\n\nThe server does not modify project files. Use it when an agent needs current SlexKit component or runtime context.\n\n## Installation matrix\n\n| Use case | Install command |\n|----------|----------------|\n| Quick start, everything included | `npm install slexkit` |\n| Component-free, custom components | `npm install slexkit @slexkit/runtime` |\n| With Svelte components | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` |\n| Add shadcn theme | `npm install @slexkit/theme-shadcn` |\n| React/Streamdown host | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` |\n| Obsidian plugin | Install **SlexKit** from Obsidian Community Plugins |\n| AI agent MCP server | `npx -y @slexkit/mcp` |\n\n## v0 packaging strategy\n\nThe current approach keeps the root `slexkit` package as the real code carrier. Scoped `@slexkit/*` wrappers exist to define future package boundaries. If physical package splitting happens in the future, it will involve splitting source code, build output, and publishing workflows.\n\n## Release quality gate\n\nAll scoped packages are release-checked together:\n\n```sh\nbun run build\nbun run test\nbun run smoke:release\n```\n\nThe 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`.",
+      "hash": "93cf14ed"
     },
     {
       "id": "reference/toolhost",
@@ -523,8 +727,8 @@
       "href": "/docs/reference/rationale",
       "rawHref": "/docs/reference/rationale.md",
       "sourcePath": "site/content/reference/rationale/en-US.md",
-      "body": "---\ntitle: Design Rationale\ncategory: Reference\nstatus: ready\norder: 80\nsummary: \"Why SlexKit uses object literals, expressions, explicit fences, and a trusted/secure runtime split.\"\nslexkitRenderMode: component\n---\n\n# Design Rationale\n\nWhy JavaScript object literals? Why expressions? Why explicit fences? Why a trusted and secure dual runtime?\n\n## Problem space\n\nSlexKit targets small interactive UI inside chat messages, documents, agent output panels, and tool dashboards. It does not attempt to provide routing, data layers, build systems, or a full application framework.\n\nAn input format for AI-generated UI must be:\n- Short enough to stream token-by-token.\n- Embeddable in Markdown.\n- Runnable without a build step.\n- Host-agnostic (works in React, Svelte, Obsidian, vanilla HTML).\n\n## Why JavaScript object literals\n\nA Slex source is a single object literal:\n\n```js\n{\n  namespace: \"demo\",\n  g: { count: 0 },\n  layout: {\n    \"button:add\": { text: \"Add\", onclick: \"g.count++\" },\n    \"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n  }\n}\n```\n\nA model can emit this in one shot. No project structure, no module imports, no build config, no framework boilerplate. The same content works inside a Markdown fence, a Streamdown renderer, an Obsidian adapter, or a custom runtime host.\n\n## Why `g` and `layout` are separate\n\n`g` holds state and logic. `layout` holds the component tree. Expressions read from `g`, component states, and `$for` context. Event handlers write back to `g`.\n\nThis separation makes model output easier to audit: state and algorithms are centralized in one object; UI structure is centralized in a tree. It also lets the host manage state lifecycle by namespace -same-namespace mounts share and merge state.\n\n## Why expressions (not pure JSON)\n\nSlexKit v0 is not a pure JSON protocol. `$` read-pipes and `on*` write-pipes allow JavaScript expressions and statements:\n\n```js\n\"$content\": \"'Count: ' + g.count\"\nonclick: \"g.count++\"\n```\n\nThis makes simple interactions shorter and more natural for AI generation. A pure-JSON format would require a separate expression language or declarative wiring syntax that adds complexity to both the emitter and the runtime.\n\nThe cost is an explicit trust boundary. Trusted content can execute in the host realm with low integration overhead. Untrusted content must go through the secure runtime (sandbox iframe, opaque origin, policy-gated capabilities).\n\nSlexKit's security choice is not about disabling expressions -it is about requiring the host to choose which trust boundary expressions run in.\n\n## Why only explicit fences\n\nSlexKit hosts must only process explicitly-marked fences (`slex`). Plain JavaScript, JSON, or untagged code blocks could be examples, logs, or user content -they must not be automatically executed or rendered.\n\nA generation should include a plain Markdown fallback so the output degrades gracefully:\n\n~~~~md\n```slex\n{ namespace: \"status\", ... }\n```\n\n**Status:** 3/4 complete\n~~~~\n\nOn SlexKit-capable hosts, the fence renders as interactive UI. On plain Markdown hosts, the fallback text still reads correctly.\n\n## Display UI vs ToolHost\n\nMost AI output is display-oriented -status cards, progress indicators, metrics, dashboards. These go through `slex` fences or `mount().`\n\nToolHost exists only for UI that must return structured user input to the host: confirmations, selections, forms. It compiles templates to standard Slex source, but the `submit` component serves as an explicit completion boundary.\n\nThis boundary prevents every display UI from being inadvertently wrapped as a function call.\n\n## Trusted + secure dual runtime\n\n### Trusted runtime\n\nFor application-generated content, repository-maintained Slex source, or already-reviewed snippets. Lowest integration cost -Slex source executes directly in the host page.\n\n### Secure runtime\n\nFor untrusted or agent-generated Slex source. Uses a sandbox iframe with opaque origin, CSP, and locked-down globals. Sensitive capabilities (network, timers, canvas) are gated behind a host policy.\n\nThe host chooses the trust boundary for each mount. The same Slex source syntax works in both modes.\n\n## Why a custom reactivity system\n\nSlexKit ships a minimal reactive engine (~280 lines) rather than depending on a framework:\n\n- **Zero framework dependency for the runtime core** -the `@slexkit/runtime` entry has no external dependencies.\n- **Deep tracking** -arbitrary `g` shapes require Proxy-based property access tracking that maps well to the tree-shaped Slex source model.\n- **Sufficient scope** -signal, effect, batch, memo, root/scope are the only primitives needed for this scale of UI.\n\nThe component layer (Svelte) adds `svelte` as a dependency only when using `@slexkit/components-svelte`.\n\n## How it differs from alternatives\n\n### vs A2UI\n\nA2UI is a cross-platform declarative message protocol with a component catalog approach. SlexKit v0 is browser-focused, Markdown-friendly, and uses executable JavaScript expressions for interactivity rather than declarative wiring. SlexKit does not claim to be a cross-platform UI standard.\n\n### vs application frameworks\n\nSlexKit is not a React/Vue/Svelte alternative. It renders small interactive fragments, not full applications. No router, no data fetching layer, no SSR.\n\n### vs pure JSON UI protocols\n\nSlexKit trades JSON purity for expressive short-form interactivity. The cost is the explicit trust boundary, which is addressed by the sandbox runtime rather than by restricting the expression language.",
-      "hash": "808b34ec"
+      "body": "---\ntitle: Design Rationale\ncategory: Reference\nstatus: ready\norder: 80\nsummary: \"Why SlexKit uses object literals, expressions, explicit fences, and a trusted/secure runtime split.\"\nslexkitRenderMode: component\n---\n\n# Design Rationale\n\nWhy JavaScript object literals? Why expressions? Why explicit fences? Why a trusted and secure dual runtime?\n\n## Problem space\n\nSlexKit targets small interactive UI inside chat messages, documents, agent output panels, and tool dashboards. It does not attempt to provide routing, data layers, build systems, or a full application framework.\n\nAn input format for AI-generated UI must be:\n- Short enough to stream token-by-token.\n- Embeddable in Markdown.\n- Runnable without a build step.\n- Host-agnostic (works in React, Svelte, Obsidian, vanilla HTML).\n\n## Why JavaScript object literals\n\nA Slex source is a single object literal:\n\n```js\n{\n  namespace: \"demo\",\n  g: { count: 0 },\n  layout: {\n    \"button:add\": { text: \"Add\", onclick: \"g.count++\" },\n    \"text:value\": { \"$content\": \"'Count: ' + g.count\" }\n  }\n}\n```\n\nA model can emit this in one shot. No project structure, no module imports, no build config, no framework boilerplate. The same content works inside a Markdown fence, a Streamdown renderer, an Obsidian adapter, or a custom runtime host.\n\n## Why `g` and `layout` are separate\n\n`g` holds state and logic. `layout` holds the component tree. Expressions read from `g`, component states, and `$for` context. Event handlers write back to `g`.\n\nThis separation makes model output easier to audit: state and algorithms are centralized in one object; UI structure is centralized in a tree. It also lets the host manage state lifecycle by namespace -same-namespace mounts share and merge state.\n\n## Why expressions (not pure JSON)\n\nSlexKit v0 is not a pure JSON protocol. `$` read-pipes and `on*` write-pipes allow JavaScript expressions and statements:\n\n```js\n\"$content\": \"'Count: ' + g.count\"\nonclick: \"g.count++\"\n```\n\nThis makes simple interactions shorter and more natural for AI generation. A pure-JSON format would require a separate expression language or declarative wiring syntax that adds complexity to both the emitter and the runtime.\n\nThe cost is an explicit trust boundary. Trusted content can execute in the host realm with low integration overhead. Untrusted content must go through the secure runtime (sandbox iframe, opaque origin, policy-gated capabilities).\n\nSlexKit's security choice is not about disabling expressions -it is about requiring the host to choose which trust boundary expressions run in.\n\n## Why only explicit fences\n\nSlexKit hosts must only process explicitly-marked fences (`slex`). Plain JavaScript, JSON, or untagged code blocks could be examples, logs, or user content -they must not be automatically executed or rendered.\n\nA generation should include a plain Markdown fallback so the output degrades gracefully:\n\n~~~~md\n```slex\n{ namespace: \"status\", layout: { \"badge:state\": { label: \"3/4 complete\", tone: \"info\" } } }\n```\n\n**Status:** 3/4 complete\n~~~~\n\nOn SlexKit-capable hosts, the fence renders as interactive UI. On plain Markdown hosts, the fallback text still reads correctly.\n\n## Display UI vs ToolHost\n\nMost AI output is display-oriented -status cards, progress indicators, metrics, dashboards. These go through `slex` fences or `mount().`\n\nToolHost exists only for UI that must return structured user input to the host: confirmations, selections, forms. It compiles templates to standard Slex source, but the `submit` component serves as an explicit completion boundary.\n\nThis boundary prevents every display UI from being inadvertently wrapped as a function call.\n\n## Trusted + secure dual runtime\n\n### Trusted runtime\n\nFor application-generated content, repository-maintained Slex source, or already-reviewed snippets. Lowest integration cost -Slex source executes directly in the host page.\n\n### Secure runtime\n\nFor untrusted or agent-generated Slex source. Uses a sandbox iframe with opaque origin, CSP, and locked-down globals. Sensitive capabilities (network, timers, canvas) are gated behind a host policy.\n\nThe host chooses the trust boundary for each mount. The same Slex source syntax works in both modes.\n\n## Why a custom reactivity system\n\nSlexKit ships a minimal reactive engine (~280 lines) rather than depending on a framework:\n\n- **Zero framework dependency for the runtime core** -the `@slexkit/runtime` entry has no external dependencies.\n- **Deep tracking** -arbitrary `g` shapes require Proxy-based property access tracking that maps well to the tree-shaped Slex source model.\n- **Sufficient scope** -signal, effect, batch, memo, root/scope are the only primitives needed for this scale of UI.\n\nThe component layer (Svelte) adds `svelte` as a dependency only when using `@slexkit/components-svelte`.\n\n## How it differs from alternatives\n\n### vs A2UI\n\nA2UI is a cross-platform declarative message protocol with a component catalog approach. SlexKit v0 is browser-focused, Markdown-friendly, and uses executable JavaScript expressions for interactivity rather than declarative wiring. SlexKit does not claim to be a cross-platform UI standard.\n\n### vs application frameworks\n\nSlexKit is not a React/Vue/Svelte alternative. It renders small interactive fragments, not full applications. No router, no data fetching layer, no SSR.\n\n### vs pure JSON UI protocols\n\nSlexKit trades JSON purity for expressive short-form interactivity. The cost is the explicit trust boundary, which is addressed by the sandbox runtime rather than by restricting the expression language.",
+      "hash": "dcf53947"
     },
     {
       "id": "releases/changelog",
@@ -534,8 +738,366 @@
       "href": "/docs/releases/changelog",
       "rawHref": "/docs/releases/changelog.md",
       "sourcePath": "site/content/releases/changelog/en-US.md",
-      "body": "---\ntitle: Changelog\ncategory: Releases\nstatus: ready\norder: 10\nsummary: \"Release notes and notable changes for SlexKit.\"\nslexkitRenderMode: component\n---\n\n# Changelog\n\nAll notable changes to SlexKit.\n\n## v0.2.0 - First public release\n\n### Added\n- `@slexkit/mcp`: AI Agent Model Context Protocol server with `slexkitDocs`, `slexkitExamples`, `slexkitValidate` tools\n- Protocol marker: `\"slex\": \"0.1\"` required on all Slex expressions and ToolHost templates\n- SPEC contract validation: component specs are now validated against the runtime contract\n- Version sync automation (`scripts/sync-version.ts`) and changelog sync (`scripts/sync-changelog.ts`)\n- AI documentation generation pipeline with structured LLM-friendly output\n- Static site export with SEO metadata engine (`site/data/seo.js`, `site/scripts/export-static.ts`)\n- Chinese documentation for all reference and guide pages\n- Enhanced component state management with lifecycle hooks (`onMount`, `onUnmount`, `onUpdate`)\n\n### Changed\n- Switch component migrated from `checked` to `enabled` state mode\n- Documentation: restructured site content, synced en-US with zh-CN, added reference section\n- Theme: refined select styling, dropdown shadows, footer and info tone polish\n- AI docs generation enhanced with Chinese/English locale awareness\n\n### Fixed\n- Component spec alignment with documentation across all 28 components\n- Site routing and code block highlighting\n- Introduction and quick-start guide wording for clarity\n- Broken links and factual errors in component and reference documentation\n\n## v0.1.9\n\n### Added\n- Icon manager with Phosphor icon system (`registerIcon`, `registerIcons`, `getIcon`, `loadIcon`)\n- Expanded icon support across labeled components (badge, button, callout, etc.)\n- Icon docs page with registration API reference\n\n### Fixed\n- Refined component interactions in static site export\n- Tabs indicator animation restored\n- Callout and toast icon placement in titles\n- Numeric value display formatting\n\n### Changed\n- Site docs shell refactored for static export\n- Site navigation and theme controls alignment\n- Slex naming standardized across codebase\n\n## v0.1.8\n\n### Added\n- CSP-hardened secure runtime sandbox with heartbeat watchdog\n- `mountSecureArtifact()` for isolated iframe rendering\n- `createSlexKitMarkdownRuntimeHost()` for Markdown-hosted SlexKit blocks\n- Streamdown React renderer (`@slexkit/streamdown`)\n- Obsidian plugin adapter (`@slexkit/obsidian`)\n- Shadcn-compatible CSS theme (`@slexkit/theme-shadcn`)\n- Package boundary wrappers (`@slexkit/runtime`, `@slexkit/components-svelte`)\n- ToolHost with built-in templates: `confirm-action`, `choose-options`, `fill-form`\n\n### Changed\n- Component registration model: side-effect import registers all components\n- Styles reorganized into per-component CSS files\n- Build system: Bun.build with Svelte plugin, split ESM entries\n\n## v0.1.7\n\n### Added\n- `$for` list rendering with keyed reconciliation (delete / add-update-reorder / trim phases)\n- `$if` conditional rendering with enter/leave animation support\n- `$key` strategy: `$value`, property-based, or fallback to index\n- Component instance state modes: `value`, `checked`, `enabled`, `readable`, `none`\n- Lifecycle hooks: `g.onMount_<name>()`, `g.onUnmount_<name>()`, `g.onUpdate_<name>()`\n- Engineering number input with SI prefix parsing\n- Rich error diagnostics with line/column/excerpt display\n\n### Changed\n- Expression evaluation: `new Function()` compilation with reactive dependency tracking\n- Layout tree renderer now supports three rendering paths (normal, `$if`, `$for`)\n- `g` deep-merge preserves keys not present in the new state\n\n## v0.1.6 and earlier\n\n### Added\n- Reactive `g`/`layout` split with expression pipes (`$` read-pipes, `on*` write-pipes)\n- Custom fine-grained reactivity system (~280 lines, no external dependency)\n- Component registry with extensible renderer interface\n- Svelte 5 component adapter (creates stores from props, flushSync DOM)\n- `mount()`, `ingest()`, `boot()` entry points\n- 28 built-in Svelte components across 8 categories\n- `parseSlexSource()` DSL parser with `diagnoseSlexKitSource()` error reporting\n- Documentation site with interactive playground",
-      "hash": "c1cbfe8c"
+      "body": "---\ntitle: Changelog\ncategory: Releases\nstatus: ready\norder: 10\nsummary: \"Release notes and notable changes for SlexKit.\"\nslexkitRenderMode: component\n---\n\n# Changelog\n\nAll notable changes to SlexKit.\n\n## v0.3.1 - Host stability and control rendering hardening\n\n### Added\n- Runtime style safety tests that block broad `:has()` selectors, `clip-path`, and slider track regressions in shipped CSS.\n- Regression coverage for disabled Switch, Checkbox, and Radio state attributes.\n\n### Changed\n- CI now installs dependencies with `bun install --frozen-lockfile` and runs lint before tests.\n- Disabled Switch, Checkbox, and Radio styling now uses explicit `data-disabled` attributes instead of broad relational selectors.\n- Select and sr-only helper styles avoid `clip-path` for better host and Obsidian CSS compatibility.\n\n### Fixed\n- Slider thumb rendering artifacts caused by painting the range track on the native input box.\n- Input focus visibility after removing custom engineering steppers.\n- Home RC example input labels now use native Input component labels instead of separate text labels.\n- Stat cards no longer clip updated text during cross-document state examples.\n- Markdown calculator examples no longer render duplicate section labels.\n\n## v0.3.0 - Examples overhaul with component audit and i18n\n\n### Added\n- Example gallery: 17 high-quality examples organized by usage scenario (Getting Started, Calculators, Data Browsing, Dashboards, Config Wizards, Decision Support, Platform Features)\n- English translations for all 17 example pages\n- `toolhost-demo`: real `renderToolCall` API with chat-style conversation UI\n- Example rendering infrastructure: `site/routes/examples.js`, `site/pages/examples.slex.js`, `site/data/examples.js`\n- Formula component (`src/components/svelte/content/Formula.svelte`) with KaTeX rendering\n- `src/engine/capabilities.ts`: structured capability docs for AI agents\n- `src/engine/validation.ts`: SPEC contract validation\n- `src/engine/stdlib.ts`: standard library with `math.clamp`, `math.safeDivide`, and other utilities\n- `src/engine/sandbox-runner.ts`: sandbox runner for secure runtime\n- Component state eval context shadowing test suite (`component-state-shadowing.test.ts`)\n- Collapsible and Callout double-rendering regression tests\n- Slider component name shadowing regression test\n\n### Changed\n- Examples reduced from 64 to 17 high-quality examples, organized by user story\n- Example source locale: `zh-CN` (with `en-US` translations)\n- `renderChildren` (`helpers.ts`) now clears existing content when children are present\n- Switch component now accepts `checked`/`value` props for initialization consistency with Checkbox\n- Site UI: DocsShell, DocRail, router, shell improvements\n- Components: Input, Select, Tabs, Table, PlaygroundMarkdown refinements\n- CSS: theme-shadcn, text-input, docs-shell styling updates\n\n### Fixed\n- Eval context shadowing: component names `g` and `api` no longer overwrite reserved context keys\n- `renderChildren` double rendering in Collapsible and Callout\n- Voltage divider summary typo (\"输入输入电压\")\n- Salary calculator fallback numbers to match actual calculator output\n- Tabs-and-branching: title and length conversion mismatch\n- 4 pre-existing test failures (ai-docs, page-structure, theme, markdown-content)\n\n### Removed\n- 47 low-quality/duplicate examples (reduced from 64 to 17)\n- Dead \"Fallback\" copywriting from all example files\n- Unused `DialogShell.svelte` component\n\n## v0.2.0 - First public release\n\n### Added\n- `@slexkit/mcp`: AI Agent Model Context Protocol server with `slexkitDocs`, `slexkitExamples`, `slexkitValidate` tools\n- Protocol marker: `\"slex\": \"0.1\"` required on all Slex expressions and ToolHost templates\n- SPEC contract validation: component specs are now validated against the runtime contract\n- Version sync automation (`scripts/sync-version.ts`) and changelog sync (`scripts/sync-changelog.ts`)\n- AI documentation generation pipeline with structured LLM-friendly output\n- Static site export with SEO metadata engine (`site/data/seo.js`, `site/scripts/export-static.ts`)\n- Chinese documentation for all reference and guide pages\n- Enhanced component state management with lifecycle hooks (`onMount`, `onUnmount`, `onUpdate`)\n\n### Changed\n- Switch component migrated from `checked` to `enabled` state mode\n- Documentation: restructured site content, synced en-US with zh-CN, added reference section\n- Theme: refined select styling, dropdown shadows, footer and info tone polish\n- AI docs generation enhanced with Chinese/English locale awareness\n\n### Fixed\n- Component spec alignment with documentation across all 28 components\n- Site routing and code block highlighting\n- Introduction and quick-start guide wording for clarity\n- Broken links and factual errors in component and reference documentation\n\n## v0.1.9\n\n### Added\n- Icon manager with Phosphor icon system (`registerIcon`, `registerIcons`, `getIcon`, `loadIcon`)\n- Expanded icon support across labeled components (badge, button, callout, etc.)\n- Icon docs page with registration API reference\n\n### Fixed\n- Refined component interactions in static site export\n- Tabs indicator animation restored\n- Callout and toast icon placement in titles\n- Numeric value display formatting\n\n### Changed\n- Site docs shell refactored for static export\n- Site navigation and theme controls alignment\n- Slex naming standardized across codebase\n\n## v0.1.8\n\n### Added\n- CSP-hardened secure runtime sandbox with heartbeat watchdog\n- `mountSecureArtifact()` for isolated iframe rendering\n- `createSlexKitMarkdownRuntimeHost()` for Markdown-hosted SlexKit blocks\n- Streamdown React renderer (`@slexkit/streamdown`)\n- Obsidian plugin adapter (`@slexkit/obsidian`)\n- Shadcn-compatible CSS theme (`@slexkit/theme-shadcn`)\n- Package boundary wrappers (`@slexkit/runtime`, `@slexkit/components-svelte`)\n- ToolHost with built-in templates: `confirm-action`, `choose-options`, `fill-form`\n\n### Changed\n- Component registration model: side-effect import registers all components\n- Styles reorganized into per-component CSS files\n- Build system: Bun.build with Svelte plugin, split ESM entries\n\n## v0.1.7\n\n### Added\n- `$for` list rendering with keyed reconciliation (delete / add-update-reorder / trim phases)\n- `$if` conditional rendering with enter/leave animation support\n- `$key` strategy: `$value`, property-based, or fallback to index\n- Component instance state modes: `value`, `checked`, `enabled`, `readable`, `none`\n- Lifecycle hooks: `g.onMount_<name>()`, `g.onUnmount_<name>()`, `g.onUpdate_<name>()`\n- Engineering number input with SI prefix parsing\n- Rich error diagnostics with line/column/excerpt display\n\n### Changed\n- Expression evaluation: `new Function()` compilation with reactive dependency tracking\n- Layout tree renderer now supports three rendering paths (normal, `$if`, `$for`)\n- `g` deep-merge preserves keys not present in the new state\n\n## v0.1.6 and earlier\n\n### Added\n- Reactive `g`/`layout` split with expression pipes (`$` read-pipes, `on*` write-pipes)\n- Custom fine-grained reactivity system (~280 lines, no external dependency)\n- Component registry with extensible renderer interface\n- Svelte 5 component adapter (creates stores from props, flushSync DOM)\n- `mount()`, `ingest()`, `boot()` entry points\n- 28 built-in Svelte components across 8 categories\n- `parseSlexSource()` DSL parser with `diagnoseSlexKitSource()` error reporting\n- Documentation site with interactive playground",
+      "hash": "bc737cc1"
+    }
+  ],
+  "expressionContext": [
+    {
+      "name": "g",
+      "scope": "always",
+      "summary": "Reactive state proxy."
+    },
+    {
+      "name": "std",
+      "scope": "always",
+      "summary": "Pure deterministic SlexKit standard library."
+    },
+    {
+      "name": "api",
+      "scope": "host-injected",
+      "summary": "Host or secure runtime capability object."
+    },
+    {
+      "name": "$event",
+      "scope": "event handlers",
+      "summary": "Event payload for on* handlers."
+    },
+    {
+      "name": "$item",
+      "scope": "$for",
+      "summary": "Current array item."
+    },
+    {
+      "name": "$index",
+      "scope": "$for",
+      "summary": "Current item index."
+    },
+    {
+      "name": "$key",
+      "scope": "$for",
+      "summary": "Current item key."
+    }
+  ],
+  "stdlib": [
+    {
+      "name": "math",
+      "summary": "Small numeric helpers for common interactive calculations.",
+      "functions": [
+        {
+          "name": "std.math.clamp",
+          "signature": "clamp(value, min, max)",
+          "summary": "Clamp a number into a range.",
+          "pure": true,
+          "example": "std.math.clamp(g.score, 0, 100)"
+        },
+        {
+          "name": "std.math.round",
+          "signature": "round(value, digits = 0)",
+          "summary": "Round with a fixed number of decimal digits.",
+          "pure": true,
+          "example": "std.math.round(g.latency, 1)"
+        },
+        {
+          "name": "std.math.safeDivide",
+          "signature": "safeDivide(numerator, denominator, fallback = 0)",
+          "summary": "Divide with a fallback for zero or invalid denominators.",
+          "pure": true,
+          "example": "std.math.safeDivide(g.used, g.total, 0)"
+        },
+        {
+          "name": "std.math.percent",
+          "signature": "percent(part, total, digits = 1)",
+          "summary": "Return part / total as a percentage number.",
+          "pure": true,
+          "example": "std.math.percent(g.done, g.total, 1)"
+        },
+        {
+          "name": "std.math.lerp",
+          "signature": "lerp(start, end, t)",
+          "summary": "Linear interpolation.",
+          "pure": true,
+          "example": "std.math.lerp(0, 100, g.progress)"
+        }
+      ]
+    },
+    {
+      "name": "stats",
+      "summary": "Finite-number aggregations for arrays.",
+      "functions": [
+        {
+          "name": "std.stats.sum",
+          "signature": "sum(values)",
+          "summary": "Sum finite numeric values. Empty arrays return 0.",
+          "pure": true,
+          "example": "std.stats.sum(g.samples)"
+        },
+        {
+          "name": "std.stats.mean",
+          "signature": "mean(values)",
+          "summary": "Average finite numeric values. Empty arrays return NaN.",
+          "pure": true,
+          "example": "std.stats.mean(g.samples)"
+        },
+        {
+          "name": "std.stats.min",
+          "signature": "min(values)",
+          "summary": "Minimum finite numeric value. Empty arrays return NaN.",
+          "pure": true,
+          "example": "std.stats.min(g.samples)"
+        },
+        {
+          "name": "std.stats.max",
+          "signature": "max(values)",
+          "summary": "Maximum finite numeric value. Empty arrays return NaN.",
+          "pure": true,
+          "example": "std.stats.max(g.samples)"
+        },
+        {
+          "name": "std.stats.median",
+          "signature": "median(values)",
+          "summary": "Median finite numeric value. Empty arrays return NaN.",
+          "pure": true,
+          "example": "std.stats.median(g.samples)"
+        }
+      ]
+    },
+    {
+      "name": "format",
+      "summary": "Deterministic display formatting with en-US defaults.",
+      "functions": [
+        {
+          "name": "std.format.fixed",
+          "signature": "fixed(value, digits = 2)",
+          "summary": "Format a number with fixed decimal places.",
+          "pure": true,
+          "example": "std.format.fixed(g.voltage, 3)"
+        },
+        {
+          "name": "std.format.number",
+          "signature": "number(value, digits = 0, locale = 'en-US')",
+          "summary": "Locale number formatting.",
+          "pure": true,
+          "example": "std.format.number(g.requests)"
+        },
+        {
+          "name": "std.format.compact",
+          "signature": "compact(value, digits = 1, locale = 'en-US')",
+          "summary": "Compact number formatting.",
+          "pure": true,
+          "example": "std.format.compact(g.users)"
+        },
+        {
+          "name": "std.format.percent",
+          "signature": "percent(ratio, digits = 1)",
+          "summary": "Format a ratio as a percentage string.",
+          "pure": true,
+          "example": "std.format.percent(g.done / g.total, 1)"
+        },
+        {
+          "name": "std.format.currency",
+          "signature": "currency(value, currency = 'USD', locale = 'en-US')",
+          "summary": "Format a currency value.",
+          "pure": true,
+          "example": "std.format.currency(g.revenue, 'USD')"
+        }
+      ]
+    },
+    {
+      "name": "units",
+      "summary": "Small unit display helpers for common dashboards.",
+      "functions": [
+        {
+          "name": "std.units.withUnit",
+          "signature": "withUnit(value, unit, digits = 2)",
+          "summary": "Format a value with a unit suffix.",
+          "pure": true,
+          "example": "std.units.withUnit(g.power, 'W', 1)"
+        },
+        {
+          "name": "std.units.bytes",
+          "signature": "bytes(value, digits = 1)",
+          "summary": "Format bytes as B, KB, MB, GB, TB, or PB.",
+          "pure": true,
+          "example": "std.units.bytes(g.payloadBytes)"
+        },
+        {
+          "name": "std.units.duration",
+          "signature": "duration(ms, digits = 1)",
+          "summary": "Format milliseconds as ms, s, min, or h.",
+          "pure": true,
+          "example": "std.units.duration(g.elapsedMs)"
+        },
+        {
+          "name": "std.units.si",
+          "signature": "si(value, unit = '', digits = 2)",
+          "summary": "Format with SI prefixes.",
+          "pure": true,
+          "example": "std.units.si(g.frequency, 'Hz', 2)"
+        }
+      ]
+    }
+  ],
+  "capabilities": [
+    {
+      "name": "api.get",
+      "policy": "network",
+      "signature": "get(url, options)",
+      "summary": "Policy-gated GET request.",
+      "example": "await api.get('https://api.example.com/status')",
+      "secureDefault": "denied",
+      "forbidden": [
+        "fetch(url)",
+        "XMLHttpRequest",
+        "WebSocket"
+      ]
+    },
+    {
+      "name": "api.post",
+      "policy": "network",
+      "signature": "post(url, body, options)",
+      "summary": "Policy-gated POST request.",
+      "example": "await api.post('https://api.example.com/items', { ok: true })",
+      "secureDefault": "denied",
+      "forbidden": [
+        "fetch(url)",
+        "XMLHttpRequest",
+        "WebSocket"
+      ]
+    },
+    {
+      "name": "api.fetch",
+      "policy": "network",
+      "signature": "fetch(url, options)",
+      "summary": "Policy-gated GET or POST request.",
+      "example": "await api.fetch(url, { method: 'GET' })",
+      "secureDefault": "denied",
+      "forbidden": [
+        "fetch(url)",
+        "XMLHttpRequest",
+        "WebSocket"
+      ]
+    },
+    {
+      "name": "api.setTimeout",
+      "policy": "timer",
+      "signature": "setTimeout(fn, ms)",
+      "summary": "Policy-gated timeout.",
+      "example": "api.setTimeout(function () { g.ready = true; }, 500)",
+      "secureDefault": "denied",
+      "forbidden": [
+        "setTimeout(fn, ms)"
+      ]
+    },
+    {
+      "name": "api.clearTimeout",
+      "policy": "timer",
+      "signature": "clearTimeout(id)",
+      "summary": "Clear a policy-gated timeout.",
+      "example": "api.clearTimeout(g.timeoutId)",
+      "secureDefault": "denied"
+    },
+    {
+      "name": "api.setInterval",
+      "policy": "timer",
+      "signature": "setInterval(fn, ms)",
+      "summary": "Policy-gated interval.",
+      "example": "api.setInterval(function () { g.ticks += 1; }, 1000)",
+      "secureDefault": "denied",
+      "forbidden": [
+        "setInterval(fn, ms)"
+      ]
+    },
+    {
+      "name": "api.clearInterval",
+      "policy": "timer",
+      "signature": "clearInterval(id)",
+      "summary": "Clear a policy-gated interval.",
+      "example": "api.clearInterval(g.intervalId)",
+      "secureDefault": "denied"
+    },
+    {
+      "name": "api.raf",
+      "policy": "animation",
+      "signature": "raf(fn)",
+      "summary": "Policy-gated animation frame.",
+      "example": "api.raf(function (time) { g.time = time; })",
+      "secureDefault": "denied",
+      "forbidden": [
+        "requestAnimationFrame(fn)"
+      ]
+    },
+    {
+      "name": "api.cancelRaf",
+      "policy": "animation",
+      "signature": "cancelRaf(id)",
+      "summary": "Cancel a policy-gated animation frame.",
+      "example": "api.cancelRaf(g.rafId)",
+      "secureDefault": "denied"
+    },
+    {
+      "name": "api.createCanvas",
+      "policy": "canvas",
+      "signature": "createCanvas(width, height)",
+      "summary": "Create a policy-counted canvas.",
+      "example": "var canvas = api.createCanvas(320, 180)",
+      "secureDefault": "denied"
+    },
+    {
+      "name": "api.getCanvasContext",
+      "policy": "canvas",
+      "signature": "getCanvasContext(canvas, contextId, options)",
+      "summary": "Get a policy-checked canvas context.",
+      "example": "var ctx = api.getCanvasContext(canvas, '2d')",
+      "secureDefault": "denied"
+    },
+    {
+      "name": "api.onDispose",
+      "policy": "lifecycle",
+      "signature": "onDispose(fn)",
+      "summary": "Register runtime cleanup.",
+      "example": "api.onDispose(function () { g.closed = true; })",
+      "secureDefault": "available"
+    },
+    {
+      "name": "api.now",
+      "policy": "lifecycle",
+      "signature": "now()",
+      "summary": "Runtime clock.",
+      "example": "api.now()",
+      "secureDefault": "available"
+    },
+    {
+      "name": "api.isTimeoutError",
+      "policy": "diagnostics",
+      "signature": "isTimeoutError(error)",
+      "summary": "Check timeout errors.",
+      "example": "api.isTimeoutError(error)",
+      "secureDefault": "available"
+    },
+    {
+      "name": "api.isNetworkError",
+      "policy": "diagnostics",
+      "signature": "isNetworkError(error)",
+      "summary": "Check network errors.",
+      "example": "api.isNetworkError(error)",
+      "secureDefault": "available"
+    },
+    {
+      "name": "api.isPolicyError",
+      "policy": "diagnostics",
+      "signature": "isPolicyError(error)",
+      "summary": "Check policy errors.",
+      "example": "api.isPolicyError(error)",
+      "secureDefault": "available"
+    },
+    {
+      "name": "api.errorMessage",
+      "policy": "diagnostics",
+      "signature": "errorMessage(error)",
+      "summary": "Extract a displayable error message.",
+      "example": "api.errorMessage(error)",
+      "secureDefault": "available"
     }
   ],
   "components": [
@@ -1270,6 +1832,76 @@
       ],
       "hash": "447bf44a"
     },
+    {
+      "type": "formula",
+      "title": "Formula",
+      "category": "Display",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Reactive KaTeX formula display.",
+      "docsHref": "/docs/components/formula",
+      "rawHref": "/docs/components/formula.md",
+      "propCount": 6,
+      "exampleCount": 1,
+      "props": {
+        "tex": {
+          "type": "string",
+          "dynamic": true,
+          "description": "KaTeX source to render."
+        },
+        "formula": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for tex."
+        },
+        "value": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for tex."
+        },
+        "displayMode": {
+          "type": "boolean",
+          "default": true,
+          "description": "Render as display math when true; inline math when false."
+        },
+        "display": {
+          "type": "boolean",
+          "default": true,
+          "description": "Alias for displayMode."
+        },
+        "block": {
+          "type": "boolean",
+          "default": true,
+          "description": "Alias for displayMode."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "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}'"
+              }
+            }
+          }
+        }
+      ],
+      "hash": "61a9d4ee"
+    },
     {
       "type": "grid",
       "title": "Grid",
@@ -1425,7 +2057,7 @@
       "summary": "Text or engineering-value input.",
       "docsHref": "/docs/components/input",
       "rawHref": "/docs/components/input.md",
-      "propCount": 22,
+      "propCount": 21,
       "exampleCount": 1,
       "props": {
         "value": {
@@ -1530,12 +2162,6 @@
           "dynamic": true,
           "description": "Step size used by numeric input controls."
         },
-        "controls": {
-          "type": "boolean",
-          "default": true,
-          "dynamic": true,
-          "description": "Show decrement and increment buttons for numeric inputs."
-        },
         "onchange": {
           "type": "write-expression",
           "description": "Write expression invoked when the value changes."
@@ -1563,7 +2189,7 @@
           }
         }
       ],
-      "hash": "66f5dbc5"
+      "hash": "69ec164d"
     },
     {
       "type": "link",
@@ -2668,7 +3294,7 @@
       "summary": "Plain text display.",
       "docsHref": "/docs/components/text",
       "rawHref": "/docs/components/text.md",
-      "propCount": 5,
+      "propCount": 7,
       "exampleCount": 1,
       "props": {
         "text": {
@@ -2695,6 +3321,16 @@
           "default": "default",
           "description": "Text visual variant."
         },
+        "color": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Optional CSS color for controlled previews."
+        },
+        "size": {
+          "type": "string | number",
+          "dynamic": true,
+          "description": "Optional font size. Numbers are treated as px."
+        },
         "class": {
           "type": "string",
           "description": "Additional host-controlled CSS class."
@@ -2719,7 +3355,7 @@
           }
         }
       ],
-      "hash": "d498fd82"
+      "hash": "c99b2de6"
     },
     {
       "type": "toast",
@@ -2845,23 +3481,40 @@
     }
   ],
   "sourceHashes": {
-    "README.md": "e1cb682c",
+    "README.md": "117cabab",
     "site/content/guides/intro/en-US.md": "bff82366",
-    "site/content/guides/quick-start/en-US.md": "ab0489b2",
-    "site/content/guides/integration/en-US.md": "f3b8bc00",
+    "site/content/guides/quick-start/en-US.md": "ba82b030",
+    "site/content/guides/integration/en-US.md": "1138bddd",
     "site/content/guides/design/en-US.md": "8a3b35fd",
-    "site/content/guides/security-runtime/en-US.md": "bbf1d81f",
-    "site/content/guides/ai-agents/en-US.md": "eab33b74",
-    "site/content/reference/spec/en-US.md": "8a8391af",
-    "site/content/reference/usage/en-US.md": "aaac995d",
-    "site/content/reference/runtime/en-US.md": "559e05c2",
-    "site/content/reference/integration/en-US.md": "ac782b49",
+    "site/content/guides/security-runtime/en-US.md": "eba73f9f",
+    "site/content/guides/ai-agents/en-US.md": "c6c70f87",
+    "content/examples/hello-slexkit/zh-CN.md": "f5b1728f",
+    "content/examples/first-interaction/zh-CN.md": "d27f5fc3",
+    "content/examples/multi-input-coordination/zh-CN.md": "d16837a3",
+    "content/examples/tabs-and-branching/zh-CN.md": "2050088b",
+    "content/examples/salary-calculator/zh-CN.md": "05fd1883",
+    "content/examples/project-cost-estimator/zh-CN.md": "9355649f",
+    "content/examples/voltage-divider/zh-CN.md": "56dc3618",
+    "content/examples/rc-low-pass-filter/zh-CN.md": "52b5fb39",
+    "content/examples/baud-rate-calculator/zh-CN.md": "7ac3d2d9",
+    "content/examples/search-filter-table/zh-CN.md": "16e8308e",
+    "content/examples/project-dashboard/zh-CN.md": "aacce5f0",
+    "content/examples/form-wizard-steps/zh-CN.md": "3d2ac73e",
+    "content/examples/tech-selection-evaluator/zh-CN.md": "403c7e46",
+    "content/examples/toolhost-demo/zh-CN.md": "0d82032b",
+    "content/examples/roi-estimator/zh-CN.md": "73bc3af9",
+    "content/examples/cross-doc-state-lab/zh-CN.md": "7ac63204",
+    "content/examples/network-policy-fetch-card/zh-CN.md": "7d1daa49",
+    "site/content/reference/spec/en-US.md": "fa2bd10b",
+    "site/content/reference/usage/en-US.md": "3cc2177d",
+    "site/content/reference/runtime/en-US.md": "169041c3",
+    "site/content/reference/integration/en-US.md": "31cedb3b",
     "site/content/reference/security/en-US.md": "4cfe36f1",
-    "site/content/reference/packages/en-US.md": "79d87cbd",
+    "site/content/reference/packages/en-US.md": "93cf14ed",
     "site/content/reference/toolhost/en-US.md": "f62ba8aa",
     "site/content/reference/icons/en-US.md": "3d32cbbf",
-    "site/content/reference/rationale/en-US.md": "808b34ec",
-    "site/content/releases/changelog/en-US.md": "c1cbfe8c",
+    "site/content/reference/rationale/en-US.md": "dcf53947",
+    "site/content/releases/changelog/en-US.md": "bc737cc1",
     "site/content/components/accordion/en-US.md": "9e90867f",
     "site/content/components/badge/en-US.md": "fb8275e7",
     "site/content/components/button/en-US.md": "30463322",
@@ -2872,9 +3525,10 @@
     "site/content/components/collapsible/en-US.md": "003307a3",
     "site/content/components/column/en-US.md": "718a5b54",
     "site/content/components/divider/en-US.md": "cc7df031",
+    "site/content/components/formula/en-US.md": "e2634f4f",
     "site/content/components/grid/en-US.md": "07d773b2",
     "site/content/components/icon/en-US.md": "a8497d85",
-    "site/content/components/input/en-US.md": "558a0288",
+    "site/content/components/input/en-US.md": "3efa0e53",
     "site/content/components/link/en-US.md": "8eeb87ad",
     "site/content/components/playground/en-US.md": "7313ccc4",
     "site/content/components/progress/en-US.md": "7d008e59",
@@ -2888,7 +3542,7 @@
     "site/content/components/switch/en-US.md": "d72058e4",
     "site/content/components/table/en-US.md": "be8190d7",
     "site/content/components/tabs/en-US.md": "a0029940",
-    "site/content/components/text/en-US.md": "075cd122",
+    "site/content/components/text/en-US.md": "c8137ecc",
     "site/content/components/toast/en-US.md": "960011bc",
     "component:accordion": "ff1be273",
     "component:badge": "eece8f49",
@@ -2900,9 +3554,10 @@
     "component:collapsible": "fbb14382",
     "component:column": "764d30da",
     "component:divider": "447bf44a",
+    "component:formula": "61a9d4ee",
     "component:grid": "912458b7",
     "component:icon": "0b7a18c9",
-    "component:input": "66f5dbc5",
+    "component:input": "69ec164d",
     "component:link": "1404518b",
     "component:playground": "7d8e1d36",
     "component:progress": "706fde5e",
@@ -2916,7 +3571,7 @@
     "component:switch": "c5fd6169",
     "component:table": "546ee458",
     "component:tabs": "e5cff5dc",
-    "component:text": "d498fd82",
+    "component:text": "c99b2de6",
     "component:toast": "cc0c6b05"
   }
 }